/* michaelmorale.com — G-001 cover: the cover sheet (title block, NOW BUILDING strip, current project) and the
   overall site plan with its layers, key plan, project schedule and sheet index. Loaded after site.css. */

/* ------------------------------------------------------------------ G-001 cover */
.cover-frame { display: flex; flex-direction: column; }
.cover-main { padding: 18px var(--frame-pad) 0; min-width: 0; }
.name {
  margin-top: 18px; font-family: var(--font-narrow); font-weight: 700; line-height: .9; letter-spacing: -.005em;
  font-size: clamp(44px, 14.4vw, 88px);
}
.name span { display: block; }

.dimline {
  position: relative; display: flex; margin-top: 14px; padding-bottom: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-2); line-height: 1;
}
.dimline span { position: relative; flex: 1 1 auto; text-align: center; padding: 0 4px 10px; }
.dimline::before { /* dimension line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px; background: var(--ink);
  transform-origin: left center; animation: draw 1.1s cubic-bezier(.6, .1, .2, 1) .25s both;
}
/* The spans end 12px above the dimline's bottom edge (its padding) and the line sits 1px below
   them, so ticks and slashes use negative offsets to cross the line as the artboards draw them. */
.dimline span::before { /* extension tick: 8px above the line, 6px below */
  content: ""; position: absolute; left: 0; bottom: -7px; width: 1px; height: 15px; background: var(--ink);
}
.dimline span:first-child::before { height: 26px; bottom: -11px; } /* end tick: 16px above, 10px below */
.dimline span::after { /* architectural slash, centred on the line */
  content: ""; position: absolute; left: -5px; bottom: -1px; width: 11px; height: 1.6px; background: var(--ink); transform: rotate(-45deg);
}
.dimline::after { content: ""; position: absolute; right: 0; bottom: 2px; width: 1px; height: 26px; background: var(--ink); }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 399px) {
  .dimline { letter-spacing: .02em; }
  .dimline span { padding: 0 2px 10px 6px; }
}

.headline {
  margin-top: 18px; font-size: clamp(24px, calc(1.6vw + 16px), 38px); line-height: 1.14; font-weight: 500; letter-spacing: -.015em;
  text-wrap: balance; max-width: 860px;
}
.subhead { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 800px; text-wrap: pretty; }
.cta-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 20px; }
.cta-note { font-size: 14px; line-height: 1.45; font-weight: 500; }
.cta-proof { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 719px) {
  /* phone artboard: the numbers sit under the CTA so the proof is in the first screen */
  .cta-note { display: none; }
}

.cp { margin-top: 16px; border: 2px solid var(--ink); background: var(--panel); container-type: inline-size; }
.cp-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  padding: 8px 8px 8px 12px; border-bottom: 2px solid var(--ink);
}
.cp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 36px; }
.cp h2 { font-family: var(--font-narrow); font-weight: 700; font-size: 17px; letter-spacing: .14em; line-height: 1.2; }
.cp-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-decoration: none;
}
.cp-ref { font-weight: 400; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.cp-link:hover .cp-ref { color: inherit; }
.cp-list { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
.cp-pair { display: contents; }
.cp-list dt, .cp-list dd { border-top: 1px solid var(--line); }
.cp-pair:first-child dt, .cp-pair:first-child dd { border-top: 0; }
.cp-list dt { padding: 12px 8px 10px 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-2); }
.cp-list dd { padding: 9px 12px 9px 0; font-size: 15px; line-height: 1.4; font-weight: 600; }
@container (min-width: 600px) {
  .cp-list { grid-template-columns: 124px minmax(0, 1fr) 124px minmax(0, 1fr); }
  .cp-pair:nth-child(2) dt, .cp-pair:nth-child(2) dd { border-top: 0; }
  .cp-pair:nth-child(even) dt { border-left: 1px solid var(--line); }
  .cp-list dt { padding-left: 16px; }
  .cp-list dd { font-size: 16px; }
}

/* title block */
.tb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 20px; border-top: 2px solid var(--ink); min-width: 0; }
.tb-cell { grid-column: 1 / -1; padding: 12px var(--frame-pad) 14px; border-bottom: 1px solid var(--ink); min-width: 0; }
.tb-owner, .tb-set { display: none; }
.tb-name { margin-top: 6px; font-family: var(--font-narrow); font-weight: 700; font-size: 28px; letter-spacing: .04em; line-height: 1; }
.tb-role { margin-top: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
.set-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.set-btn { justify-content: center; letter-spacing: .1em; }
.set-btn[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.set-btn[aria-pressed="true"]:hover { background: var(--ink); color: var(--sheet); }
.tb-val { margin-top: 4px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.tb-rev .lbl { margin-bottom: 8px; }
.rev-row { display: grid; grid-template-columns: 26px 92px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; line-height: 1.4; }
.rev-date { font-family: var(--font-mono); font-size: 12px; padding-top: 2px; }
.tb-drawn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.tb-drawn > div { padding: 10px var(--frame-pad); }
.tb-drawn > div + div { border-left: 1px solid var(--ink); }
.tb-issued { grid-column: auto; border-bottom: 0; border-right: 1px solid var(--ink); }
.tb-sheet { grid-column: auto; border-bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.tb-sheet-id { font-family: var(--font-narrow); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -.01em; }
.north { flex: none; width: 34px; height: auto; }
.tb-of { display: none; }

/* NOW BUILDING strip */
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; letter-spacing: .12em; }
.strip-ctl { display: flex; align-items: center; gap: 6px; margin-top: 10px; min-width: 0; }
.strip-play { flex: none; min-width: 90px; }
.strip-see {
  margin-left: auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px;
  text-align: right; font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .04em;
  text-underline-offset: 4px;
}
.strip-see .ico { transition: transform .16s ease; }
.strip-see:hover .ico { transform: translateX(2px); }
@media (max-width: 419px) {
  /* beside PAUSE and NEXT the project name would wrap onto three lines: it gets its own row */
  .strip-ctl { flex-wrap: wrap; row-gap: 2px; }
  .strip-see { flex-basis: 100%; }
}

/* ------------------------------------------------------------------ G-001 site plan: the index of the set */
.plan-frame { display: flex; flex-direction: column; }
.plan-grid { display: flex; flex-direction: column; padding: 18px var(--frame-pad) 0; min-width: 0; }
.plan-left { display: flex; flex-direction: column; min-width: 0; }
.plan-intro { order: 1; }
.plan-intro h2 { margin-top: 10px; font-family: var(--font-narrow); font-weight: 700; font-size: clamp(32px, 6vw, 44px); line-height: 1.02; letter-spacing: -.005em; }
.lede { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 640px; }
.lede-plan { display: none; }

.siteplan--full { order: 2; display: none; }
/* phone: DOM order (layers, then the key plan) so Tab follows what is drawn */
.layers { order: 2; }
.keyplan { order: 3; }
.plan-caption { order: 4; }
.symbols { display: none; }

/* key plan (phone): the three zones, each a link to its sheet */
.keyplan {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px; margin-top: 16px;
}
.kz {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 10px;
  border: 1.3px dashed var(--ink); text-decoration: none; color: var(--ink);
  transition: outline-color .16s ease, background-color .16s ease;
}
.kz:hover, .kz.is-hot { background: var(--hover); color: var(--ink); border-style: solid; }
.kz-a { grid-row: span 2; }
.kz-name { padding-right: 18px; font-family: var(--font-narrow); font-size: 15px; font-weight: 700; letter-spacing: .1em; line-height: 1.1; }
/* chevron: each zone opens its sheet */
.kz::after {
  content: ""; position: absolute; top: 13px; right: 12px; width: 8px; height: 8px;
  border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; color: var(--ink-2);
  transform: rotate(45deg); transition: transform .16s ease, color .16s ease;
}
.kz:hover::after, .kz.is-hot::after { color: var(--accent); transform: translateX(2px) rotate(45deg); }
.kz-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.kz-meta .nw { white-space: nowrap; }
@media (max-width: 379px) {
  /* a zone cell is too narrow for one line: sheet number, then the count under it */
  .kz-sep { display: none; }
  .kz-meta .nw { display: block; }
}
.kz-bldg {
  margin-top: auto; padding: 6px; border: 3px solid var(--ink);
  background: repeating-linear-gradient(45deg, var(--line) 0 1.2px, transparent 1.2px 8px);
  transition: opacity .24s ease;
}
.kz-bldg span {
  display: block; padding: 8px 6px; border: 1px solid var(--ink); background: var(--sheet);
  font-family: var(--font-narrow); font-weight: 700; font-size: 16px; letter-spacing: .03em; line-height: 1.1;
}
.kz-glyphs { margin-top: auto; }
.kz-glyphs svg { max-width: 100%; height: auto; }
.kz-g { transition: opacity .24s ease; }
/* off: fade only the aria-hidden glyphs; the building label keeps full-contrast ink-2 text */
.kz-g.is-off { opacity: .4; }
.kz-bldg.is-off { border-style: dashed; border-color: var(--ink-2); background: none; }
.kz-bldg.is-off span { color: var(--ink-2); border-style: dashed; border-color: var(--ink-2); }

/* layers */
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.layers-lbl { grid-column: 1 / -1; letter-spacing: .14em; }
.layers .lay {
  flex-wrap: wrap; align-content: center; gap: 4px 6px; min-height: 60px; padding: 8px 7px; text-align: left;
  font-size: 14px; letter-spacing: .03em;
}
.lay-name { order: 3; flex-basis: 100%; }
.lay-state, .lay-count { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.lay-count { margin-left: auto; white-space: nowrap; }
.lay .bulb-glass { fill: currentColor; }
.layers .lay[aria-pressed="false"] { border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); }
.layers .lay[aria-pressed="false"] .bulb-glass { fill: none; }
@media (max-width: 379px) {
  /* three columns are narrower than ELECTRONICS / FABRICATION: one full-width row each */
  .layers { grid-template-columns: 1fr; }
  .layers .lay { flex-wrap: nowrap; min-height: 44px; }
  .lay-name { order: 0; flex-basis: auto; }
}

/* phone: the caption keeps only the readout and the reset button */
.plan-caption { margin-top: 10px; }
.plan-caption-mark, .plan-caption > div { display: none; }
.plan-shown { letter-spacing: .06em; }
.plan-caption .btn { margin-left: auto; }

.symbols { flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.sym { display: flex; align-items: center; gap: 8px; }
.symbols .lbl { letter-spacing: .14em; }
/* the full legend lives on G-900 */
.sym-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-underline-offset: 4px;
}
.sym-more .ico { transition: transform .16s ease; }
.sym-more:hover .ico { transform: translateX(2px); }
.sym-more--wide { display: none; }

/* Zone labels on the drawing (JOBSITE A-101, BENCH E-201, SHOP Z-301) link to their sheets.
   Everything is in plan units: --u is one unit of the 680-wide drawing, from the plan's container width.
   The link box ends 6 units under the label's baseline (--lb) and is 44px tall, so it always covers the label;
   --lx/--lw are the label's left edge and width; --zx/--zy/--zw/--zh are the zone's dashed outline. */
.siteplan--full { container-type: inline-size; }
.zlink {
  --u: calc(100cqw / 680);
  position: absolute; left: calc(var(--lx) * var(--u)); top: calc(var(--lb) * var(--u) - 44px);
  width: calc(var(--lw) * var(--u) + 20px); height: 44px; color: var(--ink); text-decoration: none;
}
.zlink::before { /* the label's underline: this zone name is a link */
  content: ""; position: absolute; left: calc(8 * var(--u)); right: 0; bottom: 0; height: 1.5px; background: var(--ink-2);
  transition: background-color .16s ease, height .16s ease;
}
.zlink-go { position: absolute; right: 2px; bottom: calc(10.5 * var(--u) - 6px); transition: transform .16s ease; }
.zlink:hover, .zlink.is-hot { color: var(--accent); }
.zlink:hover::before, .zlink.is-hot::before, .zlink:focus-visible::before { height: 2px; background: var(--accent); }
.zlink:hover .zlink-go, .zlink.is-hot .zlink-go { transform: translateX(3px); }
/* hover, focus or a matching sheet-index row: the whole zone is outlined in red pencil */
.zlink:focus-visible { outline: none; }
.zlink:hover::after, .zlink:focus-visible::after, .zlink.is-hot::after {
  content: ""; position: absolute; pointer-events: none;
  left: calc((var(--zx) - var(--lx)) * var(--u)); top: calc((var(--zy) - var(--lb)) * var(--u) + 44px);
  width: calc(var(--zw) * var(--u)); height: calc(var(--zh) * var(--u));
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.zlink[data-zone="a-101"] { --lx: 48; --lw: 145.5; --lb: 76; --zx: 44; --zy: 44; --zw: 336; --zh: 456; }
.zlink[data-zone="e-201"] { --lx: 408; --lw: 123.5; --lb: 84; --zx: 404; --zy: 52; --zw: 260; --zh: 240; }
.zlink[data-zone="z-301"] { --lx: 408; --lw: 111.5; --lb: 348; --zx: 404; --zy: 316; --zw: 260; --zh: 184; }
/* without container units (Safari before 16) the links cannot be placed; the sheet index still links every sheet */
@supports not (width: 1cqw) { .zlink { display: none; } }

/* a callout lights up with its schedule row (and the other way round), the same as hovering it */
.siteplan--full .callout.is-hot {
  transform: translate(-50%, -50%) scale(1.06); background: var(--accent); border-color: var(--accent); border-style: solid; color: var(--on-accent);
}

/* project schedule: every detail, each row a link to its page */
.plan-right { display: flex; flex-direction: column; min-width: 0; }
.schedule { margin-top: 28px; }
.schedule-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.schedule-hint { font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.sched-cols { display: none; }
.sched-list { margin-top: 12px; border-bottom: 1px solid var(--ink); }
.sched-row {
  position: relative;
  display: grid; grid-template-columns: 78px minmax(0, 1fr); grid-template-areas: "mark main" "mark status";
  gap: 4px 12px; align-items: start; min-height: 56px; padding: 12px 28px 12px 8px;
  border-top: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: background-color .16s ease, box-shadow .16s ease;
}
.sched-list li:first-child .sched-row { border-top-color: var(--ink); }
/* chevron: the row opens its page. In a schedule row it sits in the right padding; in a sheet row it has a grid cell */
.sched-row::after, a.si-row::after {
  content: ""; width: 8px; height: 8px;
  border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; color: var(--ink-2);
  transform: rotate(45deg); transition: transform .16s ease, color .16s ease;
}
.sched-row::after { position: absolute; right: 12px; top: 50%; margin-top: -4px; }
a.si-row::after { grid-area: go; align-self: center; justify-self: end; margin-right: 3px; }
.sched-row:hover, .sched-row.is-hot { background: var(--hover); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.sched-row:hover::after, .sched-row.is-hot::after, a.si-row:hover::after, a.si-row.is-hot::after { color: var(--accent); transform: translateX(3px) rotate(45deg); }
.sched-row:hover .sched-title, .sched-row.is-hot .sched-title, a.si-row:hover .si-name, a.si-row.is-hot .si-name {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
/* rows sit edge to edge, so the focus ring is drawn inside the row */
.sched-row:focus-visible, a.si-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sched-mark { grid-area: mark; padding-top: 2px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sched-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sched-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.sched-built { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.sched-status { grid-area: status; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; letter-spacing: .06em; }
.sched-status > span { display: inline; }
.sched-status .row-off { display: none; margin-left: 8px; color: var(--ink-2); }
.sched-row.is-off { color: var(--ink-2); border-top-style: dashed; }
.sched-row.is-off:hover, .sched-row.is-off.is-hot { color: var(--ink); }
.sched-row.is-off .sched-status .row-off { display: inline; }

@media (max-width: 379px) {
  /* too narrow for a mark column: the mark sits above the title like an eyebrow */
  .sched-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mark" "main" "status"; gap: 3px; }
  .sched-mark { padding-top: 0; font-size: 12px; }
}

/* sheets in this set: the drawing index, one row (tablet: one cell) per sheet, each a link to it */
.set-index { margin-top: 32px; }
.si-list { margin-top: 12px; border: 1.5px solid var(--ink); }
.si-list li + li { border-top: 1px solid var(--line); }
.si-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 14px; grid-template-areas: "num main go" "num count go";
  gap: 4px 10px; align-items: center; min-height: 60px; padding: 10px 10px 10px 12px; text-decoration: none; color: var(--ink);
  transition: background-color .16s ease, box-shadow .16s ease;
}
a.si-row:hover, a.si-row.is-hot { background: var(--hover); color: var(--ink); box-shadow: inset 2px 0 0 var(--ink); }
.si-row.is-current { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); }
.si-num { grid-area: num; align-self: start; padding-top: 1px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.si-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-narrow); font-size: 17px; font-weight: 700; letter-spacing: .06em; line-height: 1.15; text-transform: uppercase; }
.si-note { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.si-count { grid-area: count; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; }
.si-count:empty { display: none; }
.si-row.is-current .si-count { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ tablet (720px+) */
@media (min-width: 720px) {
  .name { font-size: clamp(64px, 8.4vw, 104px); }
  .name span { display: inline; }
  .subhead { font-size: 17px; line-height: 1.6; }
  .cta-row { flex-direction: row; align-items: center; gap: 24px; }
  .cta { flex: none; min-height: 54px; padding: 0 24px; font-size: 19px; }
  .cta-note { font-size: 15px; }
  .cta-proof { display: none; }
  .cp { margin-top: 24px; }
  .cp-head { padding-left: 16px; }

  .tb-owner, .tb-set { display: block; }
  .tb-owner { grid-column: 1; border-right: 1px solid var(--ink); }
  .tb-set { grid-column: 2; }
  .tb-of { display: block; padding-bottom: 6px; }
  .tb-sheet-id { font-size: 40px; }

  .plan-intro h2 { font-size: 44px; }
  .lede { font-size: 16px; line-height: 1.6; }
  .keyplan { display: none; }
  .lede-plan { display: inline; }
  .lede-list { display: none; }
  .siteplan--full { display: block; margin-top: 14px; order: 3; }
  .layers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; order: 2; }
  .layers-lbl { margin-right: 4px; }
  .layers .lay { flex-wrap: nowrap; min-height: 44px; padding: 0 12px; font-size: 15px; letter-spacing: .08em; }
  .lay-name { order: 0; flex-basis: auto; }
  .lay-count { display: none; }
  .plan-caption { margin-top: 12px; }
  .plan-caption-mark { display: flex; }
  .plan-caption > div { display: block; }
  .plan-shown { margin-left: auto; }
  .plan-caption .btn { margin-left: 0; }
  .symbols { display: flex; }

  .sched-cols, .sched-row { grid-template-columns: 78px minmax(0, 1fr) 150px; grid-template-areas: "mark main status"; align-items: center; }
  .sched-cols {
    display: grid; gap: 12px; margin-top: 14px; padding: 0 28px 8px 8px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--ink-2);
  }
  .sched-list { margin-top: 0; }
  .sched-status > span { display: block; }
  .sched-status .row-off { margin: 2px 0 0; }
  .sched-row.is-off .sched-status .row-off { display: block; }

  /* drawing index: sheet cells, 3 x 2 (one strip of six from 1180px) */
  .set-index { margin-top: 36px; }
  .si-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
  .si-list li { display: flex; min-width: 0; background: var(--sheet); }
  .si-list li + li { border-top: 0; }
  .si-row {
    flex: 1; min-width: 0; grid-template-columns: minmax(0, 1fr) 14px; grid-template-rows: auto 1fr auto;
    grid-template-areas: "num go" "main main" "count count"; gap: 10px; align-items: start;
    min-height: 150px; padding: 14px 16px 14px;
  }
  .si-num { padding-top: 0; font-size: 13px; letter-spacing: .02em; }
  a.si-row::after { align-self: center; }
  .si-name { font-size: 22px; letter-spacing: .05em; }
  .si-note { margin-top: 2px; }
  a.si-row:hover, a.si-row.is-hot { box-shadow: inset 0 -2px 0 var(--ink); }
  .si-row.is-current { box-shadow: inset 0 -3px 0 var(--accent); }
}

/* ------------------------------------------------------------------ tablet only (720–1179px) */
@media (min-width: 720px) and (max-width: 1179px) {
  /* the strip keeps portrait split-flap tiles instead of stretching across the title block */
  .tb-strip > * { max-width: 480px; }
}

/* ------------------------------------------------------------------ wide (1180px+) */
@media (min-width: 1180px) {
  .cover-frame { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 820px; }
  .cover-main { padding: 30px 44px 28px; display: flex; flex-direction: column; }
  .name { margin-top: 26px; line-height: .88; font-size: clamp(80px, 7.2vw, 104px); }
  .dimline { margin-top: 16px; }
  .dimline span { flex: 1 1 0; }
  .headline { margin-top: 24px; }
  .subhead { margin-top: 18px; }
  .cta-row { margin-top: 24px; }
  .tb { display: flex; flex-direction: column; margin-top: 0; border-top: 0; border-left: 2px solid var(--ink); }
  .tb-cell { padding: 12px 18px 14px; }
  .tb-owner { padding-top: 16px; border-right: 0; }
  .tb-drawn { padding: 0; }
  .tb-drawn > div { padding: 10px 18px; }
  .tb-issued { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; border-right: 0; border-bottom: 2px solid var(--ink); }
  .tb-sheet { border-bottom: 0; align-items: flex-end; }
  .tb-sheet-id { font-size: 64px; line-height: .95; }
  .north { width: 34px; margin-left: auto; margin-bottom: 6px; }
  .strip-board { --flap-h: 34px; }

  /* plan left, schedule and sheet index right */
  .plan-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, calc(40vw - 60px), 520px);
    column-gap: 36px; align-items: start; padding: 32px var(--frame-pad) 0;
  }
  .plan-right { padding-top: 6px; }
  .schedule { order: 1; margin-top: 0; }
  /* the legend moves under the schedule, beside the drawing it explains */
  .symbols { order: 2; display: grid; gap: 6px; margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line); }
  .symbols .lbl { margin-bottom: 2px; }
  .sym { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; }
  .sym svg { justify-self: center; }
  /* the legend's G-900 link: the copy that follows the schedule in the source, so Tab order matches */
  .symbols .sym-more--legend { display: none; }
  .sym-more--wide { display: inline-flex; order: 3; align-self: flex-start; margin-top: 4px; }
  .set-index { grid-column: 1 / -1; margin-top: 40px; }
  .si-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .si-row { min-height: 168px; padding: 14px 14px 14px; }
  /* 12px marks leave the stack line room on one row: the column holds "1 / A-101" and the longest one-line status */
  .sched-cols, .sched-row { grid-template-columns: 66px minmax(0, 1fr) 132px; }
  .sched-mark { font-size: 12px; }
}

/* ------------------------------------------------------------------ reduced motion, forced colors, print */
@media (prefers-reduced-motion: reduce) {
  .siteplan--full .callout.is-hot { transform: translate(-50%, -50%); }
  .zlink:hover .zlink-go, .zlink.is-hot .zlink-go, .strip-see:hover .ico, .sym-more:hover .ico { transform: none; }
  .sched-row:hover::after, .sched-row.is-hot::after, a.si-row:hover::after, a.si-row.is-hot::after,
  .kz:hover::after, .kz.is-hot::after { transform: rotate(45deg); }
}
@media (forced-colors: active) {
  .zlink::before { background: LinkText; }
  .zlink:hover::after, .zlink:focus-visible::after, .zlink.is-hot::after { outline-color: Highlight; }
  .siteplan--full .callout.is-hot { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .si-row.is-current { outline: 2px solid Highlight; outline-offset: -2px; }
}
@media print {
  .zlink { display: none; }
  .sched-row::after, a.si-row::after, .kz::after { display: none; }
}