/* The printed pieces at real size, after the EAC templates: black and white, Noto Sans, a light-gray
   road between the steps. Light ink is white with black lines (any office printer); heavy ink fills
   the bars and the sign in black (print shops). Sizes are inches and points, as on paper. */
.pg { position: relative; box-sizing: border-box; background: #fff; color: #111; font-family: 'Noto Sans', Arial, sans-serif; overflow: hidden; }
.pg * { box-sizing: border-box; }
.pg h2, .pg h3, .pg h4, .pg p, .pg ul { margin: 0; }
.pg ul { padding-left: 1.2em; }
.pg u { text-decoration: underline; }
.pg .art { display: block; border: 1.5pt solid #111; background: #fff; }
.pg .cite { font-size: 7pt; color: #333; margin-top: .25em; }
.pg .qr svg { display: block; width: 100%; height: 100%; }
.pg .marks { display: flex; gap: .15in; align-items: center; }
.pg .marks .qr, .pg .marks .logo { width: .8in; height: .8in; object-fit: contain; }

/* ---------- Pocket guide: letter, two sides, folds into quarters ---------- */
.pocket { width: 8.5in; height: 11in; font-size: 8.5pt; line-height: 1.3; }
.pocket .half { position: absolute; left: 0; right: 0; height: 5.5in; }
.pocket .top { top: 0; }
.pocket .bottom { top: 5.5in; display: grid; grid-template-columns: 1fr 1fr; }
.pocket .flip { position: absolute; inset: 0; transform: rotate(180deg); padding: .3in .3in .2in; }
.pocket .grid4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .2in .45in; height: 4.7in; }
.pocket .pstep { display: grid; grid-template-columns: 1.05in 1fr; gap: .12in; align-items: start; }
.pocket .pstep .art { width: 1.05in; height: 1.05in; }
.pocket .pstep h4 { font-size: 10pt; line-height: 1.15; margin-bottom: .05in; }
.pocket .pstep h4 .sn { display: block; }
.pocket .opennext { text-align: center; font-size: 8pt; color: #444; margin-top: .05in; }
.pocket .panel { padding: .3in; }
.pocket .obs h3 { font-size: 11pt; margin-bottom: .08in; }
.pocket .obs p, .pocket .obs ul { margin-bottom: .06in; }
.pocket .cover { border: 1.5pt solid #111; border-radius: .12in; margin: .25in; padding: 0 0 .2in; display: flex; flex-direction: column; }
.pocket .cover .bar { background: #111; color: #fff; font-weight: 700; font-size: 10pt; padding: .08in .2in; border-radius: .1in .1in 0 0; }
.pocket .cover h2 { font-size: 22pt; line-height: 1.1; padding: .5in .2in .3in; flex: 1; }
.pocket .cover .questions { padding: 0 .2in .15in; font-size: 8.5pt; }
.pocket .cover .questions b { display: block; font-size: 11pt; }
.pocket .cover .marks { padding: 0 .2in; }
.pocket.p2 .cols { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; grid-auto-flow: column; grid-template-rows: repeat(4, 1fr); gap: .15in .5in; padding: .35in .35in; height: 11in;
  background: linear-gradient(#cfcfcf, #cfcfcf) calc(.35in + .55in) .35in / .14in calc(100% - .7in) no-repeat, linear-gradient(#cfcfcf, #cfcfcf) calc(50% + .25in + .55in) .35in / .14in calc(100% - .7in) no-repeat; }
.pocket.p2 .cols.tight { grid-template-rows: repeat(5, 1fr); font-size: 7.6pt; }
.pocket.p2 .pstep .art { position: relative; z-index: 1; }

/* ---------- Process poster: 24 x 18 in ---------- */
.poster { width: 24in; height: 18in; padding: .6in .7in; font-size: 13pt; line-height: 1.3; display: flex; flex-direction: column; }
.poster .ptop { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: .5in; margin-bottom: .45in; }
.poster .ptop h2 { font-size: 40pt; line-height: 1.25; }
.poster .ptop h2 span { display: inline; background: #e6e6e6; padding: 0 .08in; }
.poster .pmid p { margin-bottom: .12in; }
.poster .pmid .questions b { display: block; }
.poster .pmid .marks { margin-top: .15in; }
.poster .pmid .marks .qr, .poster .pmid .marks .logo { width: 1.1in; height: 1.1in; }
.poster .pobs { font-size: 10.5pt; border: 1.5pt solid #111; border-radius: .12in; padding: .15in .2in; }
.poster .pobs h3 { font-size: 13pt; margin-bottom: .06in; }
.poster .pobs p, .poster .pobs ul { margin-bottom: .05in; }
.poster .road { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: 1fr 1fr; gap: .45in .3in; position: relative; }
.poster .road::before { content: ''; position: absolute; left: 0; right: 0; top: 1.1in; height: .25in; background: #cfcfcf; border-radius: .11in; }
.poster .road::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% + .225in + 1.1in); height: .25in; background: #cfcfcf; border-radius: .11in; }
.poster .card { position: relative; z-index: 1; font-size: 14pt; line-height: 1.32; }
.poster .card .art { width: 2.4in; height: 2.4in; margin-bottom: .15in; }
.poster .card h4 { font-size: 17pt; line-height: 1.15; margin-bottom: .06in; }
.poster .card h4 .sn { display: block; }
.poster .card .room { font-weight: 700; margin-top: .06in; }

/* ---------- Door signs: one step per letter page ---------- */
.door { width: 8.5in; height: 11in; padding: .35in .45in; display: flex; flex-direction: column; font-size: 19pt; line-height: 1.3; }
.door.wide { width: 11in; height: 8.5in; }
.door .pill { min-height: .4in; font-size: 11pt; display: flex; align-items: center; gap: .1in; }
.door .pill b { background: #111; color: #fff; border-radius: .08in; padding: .02in .12in; font-weight: 700; }
.door .sign { flex: 1; border: .12in solid #111; border-radius: .3in; display: flex; flex-direction: column; overflow: hidden; margin: .12in 0; }
.door .body { flex: 1; padding: .35in .4in .2in; display: flex; flex-direction: column; gap: .25in; }
.door h2 { font-size: 34pt; line-height: 1.08; }
.door h2 .sn { display: block; }
.door .art { width: 3in; height: 3in; }
.door .foot { background: #e6e6e6; padding: .15in .4in; display: flex; gap: .2in; align-items: center; font-size: 10.5pt; line-height: 1.3; }
.door .foot .qr, .door .foot .logo { width: .85in; height: .85in; flex: none; object-fit: contain; }
.door.wide .body { display: grid; grid-template-columns: 3.4in 1fr; grid-template-rows: auto 1fr; column-gap: .4in; }
.door.wide h2 { grid-column: 1 / -1; }
.door.wide .art { width: 3.4in; height: 3.4in; }

/* Heavy ink: the black version for print shops. */
.door.ink-heavy .sign { background: #111; color: #fff; }
.door.ink-heavy .art { border-color: #fff; }
.door.ink-heavy .foot { background: #333; color: #fff; }
.door.ink-heavy .cite { color: #ddd; }
.poster.ink-heavy .ptop { background: #111; color: #fff; margin: -.6in -.7in .45in; padding: .6in .7in .4in; }
.poster.ink-heavy .ptop h2 span { background: #fff; color: #111; }
.poster.ink-heavy .pobs { border-color: #fff; }
.pocket.ink-heavy .cover { background: #111; color: #fff; }
.pocket.ink-heavy .cover .bar { background: #fff; color: #111; }
.pocket.ink-heavy .marks .qr, .poster.ink-heavy .marks .qr, .door.ink-heavy .qr { background: #fff; padding: .04in; }