/* install-guide.css — the step-by-step installation guides.
   Used by /concealed-lights-install, /surface-lights-install and
   /strip-lights-install (and the guides still to come). The CIANA guides
   keep their own inline styles. Every colour and face is a site.css token.

   Why this layout (Mustafa, 2026-09-27: "can anyone really follow and read
   so much?"). Measured on a phone, the first concealed guide ran to 23 screens
   with step 1 on screen 7, and each stage's drawings sat above all of its
   steps. A guide now reads top to bottom:
     map of the stages -> three rules -> the stages, each a numbered run of
     steps -> other fittings -> if something is wrong -> the wiring (reference)
   A step is ONE instruction you can act on (the bold line), its picture, and
   a line or two of why. Read only the bold lines and the pictures, and the job
   still gets done. Steps are numbered 1..N through the whole guide, so
   "do step 7" means the same thing on a phone, on paper and on a call.

   CHANGING THIS FILE: bump ?v= on every page that links it. */

/* ---- The skeleton shared with the CIANA guides (ct-*) ------------------ */
.ct-hero { background: var(--ep-ink); color: var(--ep-white); padding: 64px 22px 52px; text-align: center; } /* 2026-10-04 compact pass: hero padding 84/64 -> 64/52 (file had 84/64, not 92/76) (Mustafa: less empty space) */
.ct-hero h1 { font-family: var(--ep-font-display); font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 500; line-height: 1.06; letter-spacing: -0.025em; margin: 0 auto 16px;
  max-width: 17ch; color: var(--ep-white); }
.ct-hero h1 em { font-style: normal; color: var(--ep-lumen-500); }
.ct-hero p { font-size: clamp(16px, 1.5vw, 20px); color: rgba(255,255,255,.74);
  max-width: 56ch; margin: 0 auto; line-height: 1.5; }
.ct-hero p.ct-other { margin: 26px auto 0; max-width: 560px; font-size: 14px;
  line-height: 1.55; color: rgba(255,255,255,.66); }
.ct-hero p.ct-other a { color: rgba(255,255,255,.95); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
.ct-eyebrow { font-size: 12px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ep-lumen-500); font-weight: 600; margin: 0 0 14px; }
.ct-hero-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.ct-btn { display: inline-block; padding: 14px 28px; border-radius: 999px;
  text-decoration: none; font-size: 15px; font-weight: 500; cursor: pointer;
  font-family: inherit; line-height: 1.2; }
.ct-btn--primary { background: var(--ep-lumen-500); color: var(--ep-ink); border: 0; }
.ct-btn--ghost { border: 1px solid rgba(255,255,255,.28); color: var(--ep-white); background: transparent; }
/* Anchor jumps from the sub-nav must clear the sticky chrome (~105px). */
.ct-band { padding: 40px 22px; scroll-margin-top: 112px; } /* 2026-10-04 compact pass: padding 56 -> 40 (Mustafa: less empty space) */
.ct-band--paper { background: var(--ep-paper); }
.ct-band--white { background: var(--ep-white); }
.ct-inner { max-width: 1180px; margin: 0 auto; }
.ct-band h2 { font-family: var(--ep-font-display); font-size: clamp(25px, 2.8vw, 36px);
  font-weight: 500; letter-spacing: -0.022em; margin: 0 0 22px; text-align: center; }
.ct-band h2 + .ct-lead { margin-top: -10px; }
.ct-lead { text-align: center; color: var(--ep-fg-2); font-size: 16px; line-height: 1.55;
  max-width: 60ch; margin: 0 auto 30px; }
.ct-foot { text-align: center; color: var(--ep-fg-3); font-size: 14px;
  margin: 24px auto 0; max-width: 64ch; line-height: 1.55; }
.ct-foot a, .ct-lead a, .ig-s a, .ig-faults a, .ig-parts a, .ig-seq a, .ig-check a, .ig-opt a { color: var(--ep-signal-500); }
.num { font-family: var(--ep-font-mono); font-feature-settings: "tnum" 1; white-space: nowrap; }
.ct-cta { background: var(--ep-ink); color: var(--ep-white); text-align: center; padding: 56px 22px; } /* 2026-10-04 compact pass: padding 72 -> 56 (Mustafa: less empty space) */
.ct-cta h2 { color: var(--ep-white); margin-bottom: 10px; }
.ct-cta p { color: rgba(255,255,255,.72); max-width: 46ch; margin: 0 auto 28px; }
.ct-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- The map: every stage, when it happens, and which steps it holds -- */
.ig-map { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ig-map a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box;
  padding: 18px 20px; background: var(--ep-paper); border: 1px solid var(--ep-border-hair-2);
  border-radius: 14px; color: inherit; text-decoration: none; transition: border-color 200ms var(--ep-ease); }
.ig-map a:hover { border-color: var(--ep-fg-3); }
.ig-map .n { font-family: var(--ep-font-display); font-size: 40px; line-height: 1; font-weight: 500;
  color: var(--ep-lumen-500); letter-spacing: -.02em; }
.ig-map h3 { font-family: var(--ep-font-display); font-size: 18px; font-weight: 500;
  letter-spacing: -.02em; line-height: 1.25; margin: 6px 0 0; }
.ig-map .when { font-size: 13.5px; color: var(--ep-fg-2); line-height: 1.45; margin: 0; }
.ig-map .range { margin-top: auto; padding-top: 8px; font-family: var(--ep-font-mono); font-size: 12px;
  color: var(--ep-fg-3); font-feature-settings: "tnum" 1; }
@media (max-width: 820px) { .ig-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .ig-map a { padding: 14px; } .ig-map .n { font-size: 32px; } }

/* Other fittings, as a row of jump links under the map. */
.ig-kinds { margin: 16px 0 0; font-size: 14px; color: var(--ep-fg-2); line-height: 1.5; text-align: center; }
.ig-kinds a { display: inline-block; margin: 6px 3px 0; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--ep-border-hair); color: var(--ep-fg-1); text-decoration: none; font-size: 13.5px; }
.ig-kinds a:hover { border-color: var(--ep-fg-3); }

/* Three rules — only what burns a light or a person, or costs a ceiling.
   Everything else lives in the step where it matters, as a Careful note. */
.ig-three-h { font-family: var(--ep-font-display); font-size: 20px; font-weight: 500;
  letter-spacing: -.02em; margin: 40px 0 14px; text-align: center; }
.ig-three { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ig-three li { border: 1px solid var(--ep-border-hair); border-radius: 14px; padding: 16px 18px;
  font-size: 14.5px; line-height: 1.55; color: var(--ep-fg-2); background: var(--ep-white); }
.ig-three li b { display: block; font-family: var(--ep-font-display); font-size: 17px; font-weight: 500;
  letter-spacing: -.02em; color: var(--ep-fg-1); margin-bottom: 4px; }
@media (max-width: 820px) { .ig-three { grid-template-columns: minmax(0, 1fr); } }
.ig-legal { font-size: 13px; color: var(--ep-fg-3); text-align: center; margin: 14px auto 0; max-width: 72ch; line-height: 1.5; }
.ig-legal + .ig-legal { margin-top: 4px; }

/* ---- A stage: a big numeral, its name, and when it happens ------------ */
.ig-phase-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; align-items: end;
  margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--ep-border-hair); }
.ig-phase-h .n { font-family: var(--ep-font-display); font-size: clamp(64px, 8vw, 92px); line-height: .8;
  font-weight: 500; color: var(--ep-lumen-500); letter-spacing: -.04em; }
.ig-phase-h .k { font-family: var(--ep-font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ep-fg-3); margin: 0 0 6px; font-feature-settings: "tnum" 1; }
.ct-band .ig-phase-h h2 { text-align: left; margin: 0 0 4px; }
.ig-phase-h .when { margin: 0; color: var(--ep-fg-2); font-size: 16px; line-height: 1.45; max-width: 70ch; }

/* ---- A step: number | the instruction and its why | its picture ------- */
.ig-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ig-s { display: grid; grid-template-columns: 40px minmax(0, 5fr) minmax(0, 6fr); gap: 0 24px;
  align-items: start; background: var(--ep-white); border: 1px solid var(--ep-border-hair);
  border-radius: 16px; padding: 22px 24px; scroll-margin-top: 112px; }
.ct-band--white .ig-s { background: var(--ep-paper); border-color: var(--ep-border-hair-2); }
.ig-s-n { grid-column: 1; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 8px;
  background: var(--ep-ink); color: var(--ep-white); font-family: var(--ep-font-mono); font-size: 16px;
  font-weight: 600; display: flex; align-items: center; justify-content: center; font-feature-settings: "tnum" 1; }
.ig-s-body { grid-column: 2; grid-row: 1 / span 2; }
.ig-s-fig { grid-column: 3; margin: 0; min-width: 0; background: var(--ep-white); border-radius: 10px; }
.ig-s-fig + .ig-s-fig { margin-top: 14px; }
.ct-band--white .ig-s-fig { padding: 8px; }
.ig-s h3 { font-family: var(--ep-font-display); font-size: clamp(19px, 1.9vw, 22px); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.28; margin: 4px 0 10px; text-align: left; color: var(--ep-fg-1); }
.ig-s p { font-size: 15px; line-height: 1.6; color: var(--ep-fg-2); margin: 0 0 10px; max-width: 62ch; }
.ig-s p:last-child { margin-bottom: 0; }
.ig-s .ig-careful { background: var(--ep-lumen-100); border-radius: 8px; padding: 10px 14px; color: var(--ep-fg-1); }
.ig-careful b { font-family: var(--ep-font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ep-lumen-700); margin-right: 8px; }
/* A drawing shows at its drawn size or smaller, never enlarged: width comes
   from its width attribute (so its box is reserved before it loads,
   standard #9) and max-width shrinks it to fit. */
.ig-s-fig img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ig-s-fig picture { display: block; }
.ig-s-fig .ig-wide img, .ig-s-fig .ig-panels img { width: 100%; }
.ig-s-fig figcaption { font-size: 13px; color: var(--ep-fg-3); line-height: 1.5; margin: 10px 4px 2px; }
.ig-s-fig figcaption b { font-weight: 600; color: var(--ep-fg-1); }
/* Tap a drawing to open it on its own, where a phone can pinch-zoom it. */
.ig-zoom { display: block; cursor: zoom-in; }
/* A moving drawing and its still twin: the still shows in print and for
   anyone who has asked for less motion (tools/guides/concealed_figs.py). */
.ig-still { display: none !important; }

/* Text-only, wide-picture and choice steps: two columns, the picture (or the
   choices) under the words. */
.ig-s--text, .ig-s--wide, .ig-s--choice { grid-template-columns: 40px minmax(0, 1fr); }
.ig-s--wide .ig-s-body, .ig-s--choice .ig-s-body { grid-row: 1; }
.ig-s--wide .ig-s-fig { grid-column: 2; margin-top: 16px; }
/* A wide drawing keeps its labels readable on a phone by scrolling inside
   its own frame (product-page standard #3) — never the page. */
.ig-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .ig-wide img { min-width: 560px; } }

/* A choice: "find yours" — the options side by side, each with its picture. */
.ig-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ig-opt { margin: 0; background: var(--ep-white); border: 1px solid var(--ep-border-hair); border-radius: 12px;
  padding: 12px 14px 16px; min-width: 0; }
.ig-opt img { display: block; width: 100%; height: auto; margin-bottom: 8px; }
.ig-opt h4 { font-family: var(--ep-font-display); font-size: 17px; font-weight: 500; letter-spacing: -.02em;
  margin: 0 0 4px; color: var(--ep-fg-1); }
.ig-opt p { font-size: 14px; line-height: 1.55; color: var(--ep-fg-2); margin: 0; }
@media (max-width: 640px) { .ig-choice { grid-template-columns: minmax(0, 1fr); } }

/* On a phone a step reads: number and instruction, the picture, the why.
   The body wrapper dissolves so its lines can sit either side of the
   picture; nothing is duplicated. */
@media (max-width: 640px) {
  .ct-band { padding: 30px 14px; }   /* 2026-10-04 compact pass: phone band 44 -> 30 (Mustafa: less empty space) */
  .ct-hero { padding: 56px 18px 46px; }
  .ct-cta { padding: 44px 16px; }
  .ig-phase-h { gap: 0 16px; }
  .ig-s, .ig-s--text, .ig-s--wide, .ig-s--choice { grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; padding: 16px 14px; }
  .ig-s-body { display: contents; }
  .ig-s-n { grid-row: 1; width: 30px; height: 30px; font-size: 14px; border-radius: 7px; }
  .ig-s h3 { grid-column: 2; grid-row: 1; margin: 2px 0 12px; }
  .ig-s-fig, .ig-s--wide .ig-s-fig { grid-column: 1 / -1; grid-row: auto; order: 1; margin: 0 0 12px; }
  .ig-s-fig + .ig-s-fig { margin-top: 0; }
  .ig-s-body > :not(h3) { grid-column: 1 / -1; order: 2; }
}

/* ---- If something is wrong: what you see, then what to do ------------- */
.ig-faults { max-width: 920px; margin: 0 auto; list-style: none; padding: 0; background: var(--ep-white);
  border: 1px solid var(--ep-border-hair); border-radius: 16px; overflow: hidden; }
.ig-faults li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 24px;
  padding: 16px 22px; border-bottom: 1px solid var(--ep-border-hair-2); }
.ig-faults li:last-child { border-bottom: 0; }
.ig-faults h3 { font-family: var(--ep-font-display); font-size: 17px; font-weight: 500;
  letter-spacing: -.02em; margin: 0; }
.ig-faults p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ep-fg-2); }
@media (max-width: 640px) { .ig-faults li { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; } }

/* ---- Figure cards, panels and tables (other fittings, reference) ------ */
.ig-fig { background: var(--ep-white); border: 1px solid var(--ep-border-hair);
  border-radius: 14px; padding: 18px; margin: 0; min-width: 0; }
.ig-fig img { display: block; width: 100%; height: auto; }
.ig-fig figcaption { font-size: 13px; color: var(--ep-fg-3); line-height: 1.5; margin: 12px 4px 0; }
.ig-fig figcaption b { font-weight: 600; color: var(--ep-fg-1); }
/* Multi-panel figures ship as one file per panel; on a phone they stack.
   Each panel's flex-grow is its drawn width, so they keep one scale. */
.ig-panels { display: flex; align-items: flex-start; }
.ig-panels img { min-width: 0; display: block; height: auto; }
.ig-panels img + img { border-left: 1px dashed var(--ep-border-hair); }
@media (max-width: 560px) {
  .ig-panels { flex-direction: column; }
  .ig-panels img { flex: none !important; width: 100%; }
  .ig-panels img + img { border-left: 0; border-top: 1px dashed var(--ep-border-hair); padding-top: 10px; margin-top: 10px; }
}
.ig-subh { font-family: var(--ep-font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.02em;
  margin: 40px 0 14px; text-align: center; }
.ig-note { font-size: 14px; color: var(--ep-fg-2); line-height: 1.6; margin: 12px 4px 0; }
.ig-colours { max-width: 760px; margin: 0 auto; }
.ig-parts-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--ep-border-hair); background: var(--ep-white); }
.ig-parts { width: 100%; border-collapse: collapse; background: var(--ep-white); }
.ig-parts th, .ig-parts td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--ep-border-hair-2);
  vertical-align: top; font-size: 14px; line-height: 1.5; }
.ig-parts th { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--ep-fg-3);
  font-weight: 600; background: var(--ep-paper); }
.ig-parts tr:last-child td { border-bottom: 0; }
.ig-parts td.code { font-family: var(--ep-font-mono); font-size: 14px; font-weight: 600; color: var(--ep-fg-1);
  font-feature-settings: "tnum" 1; white-space: nowrap; }
.ig-parts td.part { font-weight: 500; color: var(--ep-fg-1); }
.ig-parts td.note { color: var(--ep-fg-2); }
@media (max-width: 640px) {
  .ig-parts thead { display: none; }
  .ig-parts tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--ep-border-hair-2); }
  .ig-parts tr:last-child { border-bottom: 0; }
  .ig-parts td { display: block; padding: 2px 0; border: 0; }
}
.ig-power { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .ig-power { grid-template-columns: 1fr; } }
.ig-option { background: var(--ep-white); border: 1px solid var(--ep-border-hair); border-radius: 16px; padding: 20px 22px; }
.ct-band--white .ig-option { background: var(--ep-paper); border-color: var(--ep-border-hair-2); }
.ig-option .k { font-family: var(--ep-font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ep-fg-3); margin: 0 0 8px; }
.ig-option h3 { font-family: var(--ep-font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
.ig-option p { font-size: 14px; color: var(--ep-fg-2); margin: 0; line-height: 1.6; }
/* Other fittings — figure left, text right. */
.ig-more { background: var(--ep-white); border: 1px solid var(--ep-border-hair); border-radius: 16px;
  overflow: hidden; scroll-margin-top: 112px; }
.ig-more summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px; align-items: center; padding: 16px 22px; }
.ig-more summary::-webkit-details-marker { display: none; }
.ig-more summary .n, .ig-more summary h3 { grid-column: 1; margin: 0; }
.ig-more summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; font-family: var(--ep-font-mono);
  font-size: 22px; line-height: 1; color: var(--ep-fg-3); }
.ig-more[open] summary::after { content: "\2212"; }
.ig-more summary:hover h3 { color: var(--ep-signal-500); }
.ig-seq .ig-more .row { border: 0; border-radius: 0; border-top: 1px solid var(--ep-border-hair-2); }
.ig-more summary .n { font-family: var(--ep-font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ep-fg-3); }
.ig-more summary h3 { font-family: var(--ep-font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.ig-seq { display: grid; gap: 14px; }
.ig-seq .row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0;
  background: var(--ep-white); border: 1px solid var(--ep-border-hair); border-radius: 16px; overflow: hidden;
  align-items: center; scroll-margin-top: 112px; }
.ig-seq .row > div { padding: 18px 22px; min-width: 0; }
.ig-seq .row .txt { border-left: 1px solid var(--ep-border-hair-2); align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; }
.ig-seq img { display: block; width: 100%; height: auto; }
.ig-seq .n { font-family: var(--ep-font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ep-fg-3); margin: 0 0 6px; }
.ig-seq h3 { font-family: var(--ep-font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 6px; }
.ig-seq p { font-size: 14.5px; color: var(--ep-fg-2); margin: 0 0 8px; line-height: 1.6; }
.ig-seq p:last-child { margin-bottom: 0; }
.ig-seq .models { font-family: var(--ep-font-mono); font-size: 12px; color: var(--ep-fg-3); letter-spacing: .02em; }
@media (max-width: 760px) { .ig-seq .row { grid-template-columns: minmax(0, 1fr); }
  .ig-seq .row .txt { border-left: 0; border-top: 1px solid var(--ep-border-hair-2); } }
.ig-checks { max-width: 920px; margin: 0 auto; background: var(--ep-white); border: 1px solid var(--ep-border-hair); border-radius: 16px; overflow: hidden; }
.ig-check { padding: 18px 24px; border-bottom: 1px solid var(--ep-border-hair-2); scroll-margin-top: 112px; }
.ig-check:last-child { border-bottom: 0; }
.ig-check h3 { font-family: var(--ep-font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 6px; }
.ig-check p { font-size: 14.5px; color: var(--ep-fg-2); margin: 0; line-height: 1.6; }
@media (max-width: 560px) {
  .ig-more summary { padding: 14px 16px; }
  .ig-fig { padding: 10px; }
  .ig-check { padding: 16px; }
  .ig-seq .row > div { padding: 14px 16px; }
}

/* The print-only running footer rides in a <tfoot> — the one mechanism
   Chrome both repeats on every sheet and reserves space for. On screen the
   wrapper is flattened back to plain blocks and the bar is hidden. */
.ig-pw, .ig-pw > tbody, .ig-pw > tbody > tr, .ig-pw > tbody > tr > td,
.ig-pw > tfoot, .ig-pw > tfoot > tr, .ig-pw > tfoot > tr > td {
  display: block; width: auto; margin: 0; padding: 0; border: 0;
  vertical-align: baseline; text-align: inherit;
}
.ig-printmark { display: none; }

/* Less motion asked for: the still twin replaces every moving drawing. */
@media (prefers-reduced-motion: reduce) {
  .ig-anim { display: none !important; }
  .ig-still { display: block !important; }
}

@media print {
  .nav-utility-bar, .nav-global, .nav-drawer, .nav-drawer-scrim,
  #ep-nav, #ep-subnav, .nav-sub, #ep-footer, .ct-cta, .ct-hero-row, .ct-other,
  .ep-copylink, .ig-kinds { display: none !important; }
  .ig-anim { display: none !important; }
  .ig-still { display: block !important; }
  .ct-hero { background: none; color: var(--ep-ink); padding: 0 0 14px; text-align: left; }
  .ct-hero h1 { color: var(--ep-ink); font-size: 28px; max-width: none; margin-bottom: 6px; }
  .ct-hero h1 em { color: var(--ep-ink); }
  .ct-hero p { color: var(--ep-fg-2); margin: 0; font-size: 13px; max-width: none; }
  .ct-band { padding: 12px 0; }
  .ct-band--paper, .ct-band--white { background: none; }
  .ct-band h2, .ig-subh { text-align: left; font-size: 19px; margin-bottom: 8px; }
  .ct-lead { text-align: left; margin: 0 0 10px; font-size: 12px; }
  .ct-band h2, .ig-subh, .ct-lead, .ig-phase-h { break-after: avoid; page-break-after: avoid; }
  .ig-map { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ig-map a { background: none; padding: 10px 12px; }
  .ig-map .n { font-size: 26px; }
  .ig-map h3 { font-size: 14px; }
  .ig-map .when, .ig-map .range { font-size: 10.5px; }
  .ig-three-h { text-align: left; margin: 14px 0 8px; font-size: 15px; }
  .ig-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ig-three li { padding: 8px 10px; font-size: 11px; }
  .ig-three li b { font-size: 13px; }
  .ig-legal { text-align: left; margin-left: 0; font-size: 10.5px; }
  .ig-phase-h { margin-bottom: 8px; padding-bottom: 6px; }
  /* One stage per sheet: the map and rules make the cover, and each stage
     can be handed to whoever does it (the ceiling contractor gets sheet 2). */
  .ct-band:has(.ig-phase-h) { break-before: page; }
  .ig-phase-h .n { font-size: 40px; }
  /* Chrome will not split a grid across sheets cleanly — it pushed whole
     stages onto a new page and left half-empty sheets behind. On paper the
     step list is plain blocks. */
  .ig-steps { display: block; }
  .ig-s, .ct-band--white .ig-s { background: none; border: 0; border-bottom: 1px solid var(--ep-border-hair-2);
    border-radius: 0; padding: 10px 0; break-inside: avoid; }
  .ig-s-fig, .ct-band--white .ig-s-fig { padding: 0; }
  .ig-s-fig img { max-height: 50mm; width: auto; max-width: 100%; }
  .ig-s--wide .ig-s-fig img { max-height: 58mm; }
  .ig-wide img { min-width: 0; }
  .ig-s h3 { font-size: 15px; margin-bottom: 4px; }
  .ig-s p, .ig-opt p { font-size: 11.5px; line-height: 1.45; margin-bottom: 4px; }
  .ig-s-fig figcaption { font-size: 10px; }
  .ig-choice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ig-opt { padding: 6px 8px; break-inside: avoid; }
  .ig-opt h4 { font-size: 13px; }
  .ig-faults li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 8px 12px; break-inside: avoid; }
  .ig-faults h3 { font-size: 13px; }
  .ig-faults p { font-size: 11px; }
  .ig-fig, .ig-option, .ig-seq .row, .ig-parts tr, .ig-check, .ig-more { break-inside: avoid; }
  .ig-more summary::after { content: none; }
  .ig-parts thead { display: table-header-group; }
  .ig-power { grid-template-columns: 1fr 1fr; }
  .ig-seq .row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ig-seq .row .txt { border-left: 1px solid var(--ep-border-hair-2); border-top: 0; }
  .ig-fig > img, .ig-seq img { max-height: 70mm; width: auto; max-width: 100%; margin: 0 auto; }
  .ig-panels { flex-direction: row; }
  .ig-panels img + img { border-top: 0; padding-top: 0; margin-top: 0; border-left: 1px dashed var(--ep-border-hair); }
  a { color: inherit; text-decoration: none; }
  @page { margin: 11mm 11mm 12mm; }
  .ig-pw { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
  .ig-pw > tbody { display: table-row-group; }
  .ig-pw > tfoot { display: table-footer-group; }
  .ig-pw > tbody > tr, .ig-pw > tfoot > tr { display: table-row; }
  .ig-pw > tbody > tr > td, .ig-pw > tfoot > tr > td { display: table-cell; }
  .ig-printmark { display: block; margin-top: 9pt; padding-top: 4px; border-top: 1px solid rgba(0,0,0,.22);
    font-size: 7.5pt; line-height: 1.3; color: var(--ep-fg-2); }
  .ig-printmark .r1 { display: flex; align-items: center; gap: 9px; }
  .ig-printmark img { height: 7.5pt; width: auto; display: block; }
  .ig-printmark .sep { width: 1px; height: 8pt; background: rgba(0,0,0,.22); }
  .ig-printmark .u { margin-left: auto; }
  .ig-printmark .r2 { font-size: 6.8pt; color: var(--ep-fg-3); margin-top: 1.5pt; }
  /* site.css's body::after contact line would take a sheet of its own; it
     is folded into .r2 above. No phone number in the printout — by decision. */
  body::after { content: none !important; display: none !important; }
}