/* 956 N Noble Loop — Home Manual.
   The handover documentation for a well-engineered machine: hairline rules, generous
   whitespace, letterspaced mono for anything the manual says *about itself*, one
   confident accent, seven part hues used as thin binder-tab marks only.
   Mobile-first. Light + dark are both first-class. Print is a real deliverable.
   Self-contained: system fonts only, no external resources, no page scripts. */

/* ============================================================ 1. tokens ==== */
:root {
  /* surfaces & ink — warm paper, warm near-black */
  --paper: #f7f6f3;
  --surface: #fffefc;
  --surface-2: #f1efe9;
  --ink: #22201c;
  --ink-soft: #46433c;
  --muted: #6f6a61;
  --rule: #e0dcd3;          /* hairline */
  --rule-strong: #c9c4b8;   /* structural hairline */
  --ink-faint: #b3ad9f;     /* the "document" rule: heavier, still thin */

  --accent: #2c4a5e;
  --accent-soft: #e6edf1;

  /* status */
  --draft: #8a5a12;
  --draft-bg: #f8f0dd;
  --verified: #33684a;
  --verified-bg: #e6f0e7;
  --warn: #97362b;
  --info: #2c4a5e;
  --tip: #40603a;

  /* seven part hues — binder tabs. 4.5:1+ on paper and on surface. */
  --hue-0: #4a4844;  /* graphite  */
  --hue-1: #7a5424;  /* warm oak  */
  --hue-2: #2c4a5e;  /* slate blue*/
  --hue-3: #6b3457;  /* plum      */
  --hue-4: #3d5c33;  /* moss      */
  --hue-5: #8b4324;  /* rust      */
  --hue-6: #265b57;  /* teal-gray */
  --hue: var(--hue-0);

  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* scale: 12 / 14 / 17 / 21 / 28 / 40 / 56 */
  --t12: .75rem;
  --t14: .875rem;
  --t17: 1.0625rem;
  --t21: 1.3125rem;
  --t28: 1.75rem;
  --t40: 2.5rem;
  --t56: 3.5rem;
  --t11: .6875rem;          /* mono metadata only */

  --maxw: 44rem;
  --maxw-wide: 58rem;
  --pad: 1.25rem;
  --r: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14151a;
    --surface: #1c1e23;
    --surface-2: #22252b;
    --ink: #e9e5dc;
    --ink-soft: #c9c4b9;
    --muted: #9a948a;
    --rule: #32353c;
    --rule-strong: #454951;
    --ink-faint: #5a5f68;

    --accent: #8fb9cc;
    --accent-soft: #1e2c35;

    --draft: #d8a75d;
    --draft-bg: #2a2213;
    --verified: #7fbc8e;
    --verified-bg: #16261a;
    --warn: #e8927f;
    --info: #8fb9cc;
    --tip: #a5c98a;

    --hue-0: #a9a49a;
    --hue-1: #d0a36a;
    --hue-2: #8ab8cd;
    --hue-3: #cb95b8;
    --hue-4: #9cc086;
    --hue-5: #e09a76;
    --hue-6: #7cbdb6;
  }
}

.hue-0 { --hue: var(--hue-0); }
.hue-1 { --hue: var(--hue-1); }
.hue-2 { --hue: var(--hue-2); }
.hue-3 { --hue: var(--hue-3); }
.hue-4 { --hue: var(--hue-4); }
.hue-5 { --hue: var(--hue-5); }
.hue-6 { --hue: var(--hue-6); }

/* ============================================================== 2. base ==== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t17);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
p { margin: 0 0 1.05em; }
strong { font-weight: 650; }

/* the mono voice of the machine: anything the manual says about itself */
.meta, .doccode, .docctl__line, .nav__kind, .tab__n, .badge, .chip,
.glance__eyebrow, .glance__dl dt, .sec__h, .specs th[scope="row"],
.table thead th, .specs caption, .toc__code, .toc__count, .toc__h,
.card__code, .card__status, .card__soon, .cardsec__h, .techref__eyebrow,
.techref__cue, .redact__label, .credref__ptr, .specstrip li, .imprint dt,
.foot__ctl, .title__eyebrow, .crumb a, .cred-chip, .owner-chip, .outbound,
.callout__title, .plate figcaption::before, .figure figcaption::before,
.kiosk__pos, .kiosk__note, .kiosk__hint, .kiosk-hint, .kiosk-toast, .kspot__eyebrow,
.launch__eyebrow, .launch__city, .launch__btn, .programme__h, .programme__code {
  font-family: var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
}

.ic { width: 1.05em; height: 1.05em; flex: none; }

/* =============================================================== 3. nav ==== */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--ink-faint);
}
.nav__bar {
  max-width: var(--maxw-wide); margin: 0 auto;
  padding: .7rem var(--pad) .5rem;
}
.nav__brand {
  display: flex; align-items: baseline; gap: .6rem;
  text-decoration: none; color: var(--ink);
  min-height: 28px;
}
.nav__addr { font-family: var(--serif); font-size: var(--t17); line-height: 1.1; }
.nav__kind { font-size: var(--t11); color: var(--muted); letter-spacing: .16em; }
.nav__kind::before { content: "· "; }

.nav__tabs {
  display: flex; gap: 0;
  max-width: var(--maxw-wide); margin: 0 auto;
  padding: 0 var(--pad);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav__tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 42px; padding: 0 .8rem;
  text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:first-child { padding-left: 0; }
.tab__n { font-family: var(--mono); font-size: var(--t11); letter-spacing: .06em; opacity: .75; }
.tab__l { font-size: var(--t14); letter-spacing: .01em; }
.tab--active { color: var(--ink); border-bottom-color: var(--hue); }
/* Where the strip scrolls (phones), a hairline-soft fade says "there is more". */
@media (max-width: 759px) {
  .nav::after {
    content: ""; position: absolute; right: 0; bottom: 1px;
    width: 2rem; height: 42px; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface));
  }
}
.tab--active .tab__n { color: var(--hue); opacity: 1; }
@media (hover: hover) { .tab:hover { color: var(--ink); } }

/* ============================================================ 4. layout ==== */
.main {
  max-width: var(--maxw); margin: 0 auto;
  padding: 1.6rem var(--pad) 3.5rem;
  counter-reset: fig;
}
.is-index .main, .is-landing .main { max-width: var(--maxw-wide); }

.crumb { margin: 0 0 1.2rem; font-size: var(--t11); }
.crumb a {
  display: inline-flex; align-items: center; gap: .35rem;
  /* 40px hit area without 40px of visual weight */
  min-height: 40px; padding: 0 .5rem 0 0; margin: -.6rem 0;
  color: var(--muted); text-decoration: none;
}
.crumb .ic { width: 14px; height: 14px; }
@media (hover: hover) { .crumb a:hover { color: var(--accent); } }

/* ---------- page header + document control ---------- */
.pagehead { margin: 0 0 2.2rem; }
.pagehead--part { border-top: 3px solid var(--hue); padding-top: 1.3rem; }
.pagehead__eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
  margin: 0 0 .8rem;
}
.doccode {
  font-size: var(--t11); color: var(--hue);
  border-left: 3px solid var(--hue); padding-left: .5rem;
  line-height: 1.3;
}
.pagehead__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(var(--t28), 8.5vw, var(--t40));
  line-height: 1.06; letter-spacing: -.018em;
  margin: 0;
}
.pagehead__sub {
  margin: .85rem 0 0; color: var(--ink-soft);
  font-size: var(--t17); max-width: 38rem;
}
.docctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  justify-content: space-between;
  margin: 1.4rem 0 0; padding: .5rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.docctl__line { font-size: var(--t11); color: var(--muted); line-height: 1.5; letter-spacing: .1em; }

/* ---------- status badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t11); letter-spacing: .08em;
  padding: .2rem .45rem; border: 1px solid; border-radius: var(--r);
  white-space: nowrap;
}
.badge .ic { width: 12px; height: 12px; }
.badge--draft { color: var(--draft); background: var(--draft-bg); border-color: color-mix(in srgb, var(--draft) 35%, transparent); }
.badge--verified { color: var(--verified); background: var(--verified-bg); border-color: color-mix(in srgb, var(--verified) 35%, transparent); }

/* ==================================================== 5. AT A GLANCE ======= */
.glance {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--hue);
  padding: 1.3rem 1.15rem 1.15rem;
  margin: 0 0 2.6rem;
}
.glance__grid { display: grid; gap: 1.4rem; }
.glance__eyebrow { font-size: var(--t11); color: var(--hue); margin: 0 0 .7rem; }
.glance__what { margin: 0 0 .3rem; font-size: var(--t17); line-height: 1.55; }
.glance__dl { margin: .9rem 0 0; }
.glance__dl > div {
  display: grid; gap: .15rem;
  padding: .8rem 0; border-top: 1px solid var(--rule);
}
.glance__dl > div:last-child { padding-bottom: 0; }
.glance__dl dt { font-size: var(--t11); color: var(--muted); }
.glance__dl dd { margin: 0; font-size: var(--t14); line-height: 1.6; }

/* figure plates */
.plate { margin: 0; }
.plate img, .figure img { width: 100%; border: 1px solid var(--rule); border-radius: var(--r); }
.plate, .figure { counter-increment: fig; }
.plate figcaption, .figure figcaption {
  font-size: var(--t12); color: var(--muted); line-height: 1.5;
  margin-top: .55rem;
}
.plate figcaption::before, .figure figcaption::before {
  content: "Fig. " counter(fig, decimal-leading-zero) " — ";
  font-size: var(--t11); color: var(--ink-soft); letter-spacing: .12em;
}
.figure { margin: 1.6rem 0; }

/* The At-a-Glance media column: hero plate, then the locator plate under it. */
.glance__media { display: grid; gap: 1.15rem; align-content: start; }

/* Floor-plan plates (src/planlocator.js). The drawing is INLINE SVG, not an <img>:
   the locator overlay is tinted with var(--hue), so it has to inherit the page's
   part hue and the light/dark/print theme from this document. The plan carries all
   its own drawing styles inside its <style> element — everything below is the frame
   around it, matched to the photo plates: same hairline, same radius, same caption.
   max-height keeps a 60-foot-deep plan from swallowing a phone screen; the SVG's
   preserveAspectRatio letterboxes rather than distorts. */
.plan-frame {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); padding: .55rem .5rem;
}
.plan-frame .plan { display: block; width: 100%; height: auto; max-height: 68vh; }
.glance .plan-frame { background: var(--paper); }
.glance .plan-frame .plan { max-height: 52vh; }
.figure--plan { margin: 1.8rem 0; }

/* ========================================================== 6. sections ==== */
.sec { margin: 0 0 2.8rem; }
.sec__h {
  display: flex; align-items: baseline; gap: .7rem;
  margin: 0 0 1.15rem; padding-top: .65rem;
  border-top: 1px solid var(--ink-faint);
  font-size: var(--t12); letter-spacing: .15em; font-weight: 600;
  color: var(--ink);
}
.sec__num { font-family: var(--mono); color: var(--accent); letter-spacing: .05em; }
.sec__t { display: block; }
.sec__body > *:first-child { margin-top: 0; }
.sec__body > *:last-child { margin-bottom: 0; }
.article { margin-top: .5rem; }
/* Landing/index columns are wide for grids and TOCs — prose inside stays readable. */
.is-landing .article { max-width: var(--maxw); }

.block-h {
  font-family: var(--serif); font-weight: 600;
  font-size: var(--t21); line-height: 1.2; letter-spacing: -.01em;
  margin: 2rem 0 .7rem;
}
.lead { font-size: var(--t17); color: var(--ink-soft); }
.sec__body a, .glance a, .article a { text-decoration-thickness: 1px; }

.ul { padding-left: 1.15em; margin: 1.05em 0; }
.ul li { margin: .5em 0; padding-left: .2em; }
.ul li::marker { color: var(--ink-faint); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.2em 0; }
.steps li {
  position: relative; padding-left: 2.6rem; margin: 0 0 1em;
  min-height: 1.8rem;
}
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  width: 1.85rem; height: 1.6rem;
  border: 1px solid var(--rule-strong); border-radius: var(--r);
  color: var(--accent); background: var(--surface);
  font-family: var(--mono); font-size: var(--t11); letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
}

/* ========================================================== 7. callouts ==== */
.callout {
  --tone: var(--info);
  border-left: 2px solid var(--tone);
  background: color-mix(in srgb, var(--tone) 6%, var(--surface));
  padding: .9rem 1.1rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--r) var(--r) 0;
}
.callout--warn { --tone: var(--warn); }
.callout--tip  { --tone: var(--tip); }
.callout--info { --tone: var(--info); }
.callout__title {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .5rem; font-size: var(--t11); color: var(--tone);
  line-height: 1.4;
}
.callout__title .ic { width: 15px; height: 15px; }
.callout__body { font-size: var(--t14); line-height: 1.6; }
.callout__body > *:first-child { margin-top: 0; }
.callout__body > *:last-child { margin-bottom: 0; }

/* ============================================================ 8. tables ==== */
.tablewrap { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.table, .specs { border-collapse: collapse; width: 100%; }
.table { font-size: var(--t14); }
.table thead th {
  text-align: left; vertical-align: bottom;
  font-size: var(--t11); color: var(--muted); font-weight: 500;
  padding: 0 1rem .5rem 0;
  border-bottom: 1px solid var(--ink-faint);
  white-space: nowrap;
}
.table td {
  vertical-align: top; padding: .85rem 1rem .85rem 0;
  border-bottom: 1px solid var(--rule); line-height: 1.55;
  min-width: 9rem;
}
.table th:last-child, .table td:last-child { padding-right: 0; }
@media (hover: hover) { .table tbody tr:hover { background: var(--surface-2); } }

.specs { font-size: var(--t14); }
.specs caption {
  text-align: left; font-size: var(--t11); color: var(--muted);
  padding: 0 0 .5rem; border-bottom: 1px solid var(--ink-faint);
}
.specs th[scope="row"] {
  text-align: left; vertical-align: top; font-weight: 500;
  font-size: var(--t11); color: var(--muted);
  width: 38%; padding: .8rem 1rem .8rem 0;
  border-bottom: 1px solid var(--rule);
}
.specs td {
  vertical-align: top; padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t12); line-height: 1.65;
  overflow-wrap: anywhere;
}
.specs td strong { font-weight: 600; }

/* ======================================================== 9. doc links ===== */
.doclinks { list-style: none; padding: 0; margin: 1.2rem 0; }
.doclinks li {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
}
.doclinks li:first-child { border-top: 1px solid var(--rule); }
.doclink__ic { color: var(--ink-faint); display: flex; padding-top: .15rem; }
.doclink__main { flex: 1; min-width: 0; }
.doclink { font-weight: 600; font-size: var(--t14); }
.doclink--pending { color: var(--ink-soft); }
.doclink__note { color: var(--muted); font-size: var(--t12); display: inline-block; margin-top: .2rem; }
.outbound {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--t11); color: var(--muted); text-decoration: none;
  min-height: 40px; padding: 0 .4rem; margin: -.5rem -.4rem;
}
.outbound .ic { width: 12px; height: 12px; }
@media (hover: hover) { .outbound:hover { color: var(--accent); } }

/* chips */
.chip {
  display: inline-block; font-size: var(--t11); padding: .1rem .35rem;
  border-radius: var(--r); border: 1px solid;
  letter-spacing: .1em;
}
.chip--todo { color: var(--draft); background: var(--draft-bg); border-color: color-mix(in srgb, var(--draft) 30%, transparent); }
.chip--local { color: var(--verified); background: var(--verified-bg); border-color: color-mix(in srgb, var(--verified) 30%, transparent); }
.cred-chip, .owner-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t11); letter-spacing: .1em;
  padding: .15rem .4rem; border-radius: var(--r); border: 1px solid var(--rule-strong);
  color: var(--ink-soft); background: var(--surface-2);
}
.cred-chip .ic, .owner-chip .ic { width: 12px; height: 12px; }
.owner-chip { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); }

/* credentials pointer */
.credref {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  border: 1px solid var(--rule); border-left: 2px solid var(--ink-faint);
  background: var(--surface);
  padding: .75rem .9rem; margin: 1.4rem 0;
  border-radius: 0 var(--r) var(--r) 0;
}
.credref__ic { color: var(--muted); display: flex; }
.credref__what { font-size: var(--t14); flex: 1 1 12rem; }
.credref__ptr { font-size: var(--t11); color: var(--muted); }

/* ================================================= 10. redaction specimen == */
.redact {
  display: flex; gap: .9rem; align-items: flex-start;
  border: 1px dashed var(--rule-strong);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 7px,
    color-mix(in srgb, var(--ink) 4%, transparent) 7px 8px
  );
  padding: 1.05rem 1.1rem; margin: 1.6rem 0;
  border-radius: var(--r);
}
.redact__ic { color: var(--muted); display: flex; padding-top: .1rem; }
.redact__ic .ic { width: 20px; height: 20px; }
.redact__label { margin: 0; font-size: var(--t11); color: var(--ink-soft); }
.redact__text {
  margin: .35rem 0 0; font-size: var(--t14); color: var(--muted);
  max-width: 34rem; line-height: 1.55;
}

/* ================================================ 11. technical reference == */
.techref {
  border: 1px solid var(--rule-strong);
  background: var(--surface-2);
  margin: 3rem 0 0;
  border-radius: var(--r);
}
.techref__sum {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem; min-height: 56px;
  cursor: pointer; list-style: none;
}
.techref__sum::-webkit-details-marker { display: none; }
.techref__ic { color: var(--accent); display: flex; }
.techref__ic .ic { width: 22px; height: 22px; }
.techref__lab { display: block; min-width: 0; }
.techref__eyebrow { display: block; font-size: var(--t11); color: var(--muted); }
.techref__title {
  display: block; font-family: var(--serif); font-size: var(--t21);
  line-height: 1.15; letter-spacing: -.01em; margin-top: .1rem;
}
.techref__cue {
  margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t11); color: var(--accent); white-space: nowrap;
}
.techref__cue .ic--cue { width: 13px; height: 13px; transition: transform .15s ease; }
.techref__cue-close { display: none; }
.techref[open] .techref__cue-open { display: none; }
.techref[open] .techref__cue-close { display: inline; }
.techref[open] .techref__cue .ic--cue { transform: rotate(90deg); }
.techref[open] .techref__sum { border-bottom: 1px solid var(--rule); }
.techref__body { padding: 1.2rem 1.1rem 1.5rem; }
.techref__note {
  font-size: var(--t12); color: var(--muted);
  margin: 0 0 1.2rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
}
.techref__body > *:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .techref__cue .ic--cue { transition: none; } }

/* ======================================================= 12. title page ==== */
.title { text-align: center; padding: 2.2rem 0 1.6rem; }
.title__eyebrow { font-size: var(--t11); letter-spacing: .22em; color: var(--muted); margin: 0; }
.title__rule {
  max-width: 26rem; margin: 1.3rem auto 1.8rem; height: 3px;
  border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint);
}
.title__addr {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(var(--t40), 13vw, var(--t56));
  line-height: 1.0; letter-spacing: -.025em; margin: 0;
}
.title__city {
  margin: 1rem 0 0; font-family: var(--mono); font-size: var(--t12);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.specstrip {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 .4rem; margin: 2rem auto 0; padding: .55rem 0; max-width: 49rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.specstrip li {
  position: relative; padding: .3rem .5rem;
  font-size: var(--t11); letter-spacing: .1em; color: var(--ink-soft);
}
/* Hairline dividers only where the strip really is one line (≥560px). */
@media (min-width: 560px) {
  .specstrip { gap: 0; }
  .specstrip li { padding: .3rem .8rem; }
  .specstrip li + li::before {
    content: ""; position: absolute; left: 0; top: .55em; bottom: .55em;
    width: 1px; background: var(--rule-strong);
  }
}
.imprint {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.1rem 2.2rem; margin: 1.8rem 0 0;
}
.imprint > div { text-align: center; }
.imprint dt { font-size: var(--t11); color: var(--muted); }
.imprint dd {
  margin: .25rem 0 0; font-family: var(--mono); font-size: var(--t12);
  color: var(--ink); letter-spacing: .04em;
}
.title__note {
  margin: 2.2rem auto 0; max-width: 34rem;
  font-size: var(--t12); color: var(--muted); line-height: 1.6;
}
.title__note .badge { transform: translateY(1px); }

/* ------------------------------- table of contents ------------------------ */
.toc { margin: 2.6rem 0 0; }
.toc__h {
  font-size: var(--t11); color: var(--muted); margin: 0 0 .6rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--ink-faint);
  font-weight: 500;
}
.toc__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: baseline; gap: .2rem .9rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
  min-height: 48px;
}
.toc__n {
  font-family: var(--mono); font-size: var(--t14); color: var(--hue);
  border-left: 3px solid var(--hue); padding-left: .55rem;
  letter-spacing: .02em; align-self: start; line-height: 1.35;
}
.toc__text { min-width: 0; }
.toc__label {
  display: block; font-family: var(--serif); font-size: var(--t21);
  line-height: 1.15; letter-spacing: -.01em;
}
.toc__blurb {
  display: block; color: var(--muted); font-size: var(--t14);
  margin-top: .2rem; line-height: 1.5;
}
.toc__meta { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; align-self: start; }
.toc__code { font-size: var(--t11); color: var(--muted); }
.toc__count { font-size: var(--t11); color: var(--ink-faint); display: none; }
.toc__go { display: none; color: var(--ink-faint); align-self: center; }
@media (hover: hover) {
  .toc__row:hover { background: var(--surface); }
  .toc__row:hover .toc__label { color: var(--hue); }
}

/* ============================================================= 13. cards === */
.cardsec__h {
  font-size: var(--t11); color: var(--muted); font-weight: 500;
  margin: 2.6rem 0 1rem; padding-top: .65rem;
  border-top: 1px solid var(--ink-faint);
}
.cardgrid { display: grid; gap: .8rem; }
.card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule); border-left: 3px solid var(--hue);
  border-radius: 0 var(--r) var(--r) 0;
  padding: .9rem 1.05rem 1.05rem;
}
.card__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .5rem; min-height: 1.2rem;
}
.card__code { font-size: var(--t11); color: var(--hue); }
.card__code--soon { color: var(--ink-faint); }
.card__title {
  display: block; font-family: var(--serif); font-size: var(--t17);
  line-height: 1.25; letter-spacing: -.005em;
}
.card__blurb { display: block; color: var(--muted); font-size: var(--t14); margin-top: .3rem; line-height: 1.5; }
.card__status, .card__soon { font-size: var(--t11); color: var(--muted); }
.card__status--draft { color: var(--draft); }
.card__status--verified { color: var(--verified); }
.card--soon { border-left-color: var(--rule-strong); background: transparent; }
.card--soon .card__title { color: var(--ink-soft); }
@media (hover: hover) { .card[href]:hover { border-color: var(--hue); border-left-color: var(--hue); } }
/* Touch feedback — nothing is hover-gated, but taps should acknowledge. */
.card[href]:active, .toc__row:active, .tab:active, .techref__sum:active { background: var(--surface-2); }
@media (hover: hover) { .techref__sum:hover .techref__cue { text-decoration: underline; } }

/* ============================================================ 14. footer === */
.foot {
  max-width: var(--maxw-wide); margin: 0 auto;
  padding: 1.6rem var(--pad) 3rem;
  border-top: 1px solid var(--ink-faint);
  color: var(--muted);
}
.foot__showing {
  display: flex; gap: .6rem; align-items: flex-start;
  border: 1px dashed var(--rule-strong); border-radius: var(--r);
  padding: .8rem .9rem; margin: 0 0 1.4rem;
  font-size: var(--t12); color: var(--ink-soft); max-width: 40rem; line-height: 1.6;
}
.foot__showing-ic { color: var(--muted); display: flex; padding-top: .1rem; }
.foot__addr { font-family: var(--serif); font-size: var(--t17); color: var(--ink); margin: 0 0 .5rem; }
.foot__city {
  font-family: var(--mono); font-size: var(--t11); letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.foot__city::before { content: "· "; }
.foot__ctl { font-size: var(--t11); color: var(--muted); margin: 0 0 .7rem; }
.foot__micro { font-size: var(--t12); margin: 0; max-width: 44rem; line-height: 1.6; }

/* ==================================================== 15. wider screens ==== */
@media (min-width: 560px) {
  .glance__dl > div { grid-template-columns: 7rem 1fr; gap: .9rem; }
  .toc__row { grid-template-columns: 3rem 1fr 9rem 1.2rem; }
  .toc__count { display: block; }
  .toc__go { display: flex; }
  .cardgrid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 760px) {
  :root { --pad: 2rem; }
  body { font-size: 18px; }
  .main { padding-top: 2.4rem; }
  .glance { padding: 1.7rem 1.6rem 1.5rem; }
  .glance__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .title { padding: 3.4rem 0 2rem; }
  .techref__sum { padding: 1.15rem 1.4rem; }
  .techref__body { padding: 1.5rem 1.4rem 1.8rem; }
  .callout { padding: 1rem 1.3rem; }
  .card { padding: 1.05rem 1.25rem 1.2rem; }
}

@media (min-width: 1040px) {
  .cardgrid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================================================= 16. print === */
@page {
  size: letter;
  margin: 0.85in 0.75in 0.7in;
}

@media print {
  :root {
    --paper: #fff; --surface: #fff; --surface-2: #f4f3f1;
    --ink: #000; --ink-soft: #1c1c1c; --muted: #4a4a4a;
    --rule: #b8b4ac; --rule-strong: #8d8981; --ink-faint: #6f6b64;
    --accent: #24405180; --accent: #244051;
    --hue-0: #3c3a37; --hue-1: #6b4a20; --hue-2: #244051; --hue-3: #5d2d4b;
    --hue-4: #35502c; --hue-5: #7a3b20; --hue-6: #20504c;
    --draft-bg: #f6f0e2; --verified-bg: #eaf2ea;
  }
  html, body {
    background: #fff; font-size: 10.5pt; line-height: 1.5;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .nav, .crumb, .techref__cue, .toc__go { display: none !important; }
  .main, .foot { max-width: none; padding: 0; }
  .foot { margin-top: 24pt; padding-top: 10pt; }

  /* The document designator rides along with every section head, the way a real
     manual repeats its document number down the page. Chrome supports no @page
     margin boxes, and fixed running headers overlap content — this does neither. */
  .sec__h::after, .cardsec__h::after, .toc__h::after {
    content: var(--doccode, "");
    margin-left: auto; font-family: var(--mono); font-size: 7pt;
    letter-spacing: .13em; color: #6f6b64; font-weight: 400;
  }
  .cardsec__h, .toc__h { display: flex; align-items: baseline; }

  a { color: #000; text-decoration: none; }
  .sec__body a, .article a, .glance a { text-decoration: underline; text-decoration-color: #999; }
  .outbound[href]::after {
    content: " " attr(href); font-family: var(--mono); font-size: 6.5pt;
    letter-spacing: 0; text-transform: none; color: #4a4a4a; word-break: break-all;
  }
  .outbound .ic { display: none; }

  .pagehead { margin-bottom: 18pt; }
  .pagehead--part { border-top-width: 4pt; }
  .is-landing .pagehead__title { font-size: 26pt; }

  .glance { border: .75pt solid #8d8981; border-top: 3pt solid var(--hue); break-inside: avoid; }
  .techref { border: .75pt solid #8d8981; background: #f6f5f3; break-inside: auto; }
  .techref[open] .techref__sum, .techref .techref__sum { border-bottom: .5pt solid #b8b4ac; }
  .techref__body { display: block !important; }        /* the technical appendix */
  .redact { background-image: none; border: .75pt dashed #8d8981; }

  .table thead { display: table-header-group; }
  .table thead th, .specs caption { border-bottom: .75pt solid #6f6b64; }
  .table td, .specs td, .specs th[scope="row"] { border-bottom: .5pt solid #b8b4ac; }
  .tablewrap { overflow: visible; }

  /* Plans print at a predictable size (vh is the sheet, which would make a locator
     plate absurd) and on white — the plan's own @media print block supplies the
     forced-light ink, hue and room fills. */
  .plan-frame { background: #fff; border-color: #b8b4ac; break-inside: avoid; }
  .plan-frame .plan { max-height: 5.4in; }
  .glance .plan-frame { background: #fff; }
  .glance .plan-frame .plan { max-height: 2.6in; }

  /* On paper the At-a-Glance panel is one column (the sheet's text block is
     narrower than the two-column breakpoint), so a hero photo and a locator plan
     stacked would push the panel past a single sheet and split it. Side by side
     they take the height of the taller one and the panel stays whole. Column flow
     rather than a fixed 1fr 1fr: a panel with only one of the two still fills the
     width. */
  .glance__media { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1rem; }

  .callout, .figure, .plate, .table tr, .specs tr, .redact, .card, .toc__row,
  .credref, .doclinks li { break-inside: avoid; }
  .sec__h, .block-h, .pagehead__title, .title__addr, .toc__h, .cardsec__h,
  .techref__sum { break-after: avoid; }
  h1, h2, h3, p, li { orphans: 3; widows: 3; }

  .title { padding-top: 0; }
  .toc { break-before: auto; }
  .is-index .toc__row { padding: 10pt 0; }
}

/* Force the technical reference open when printing. A closed <details> hides its
   content through the ::details-content pseudo-element (content-visibility), so
   both that and the legacy display rule are needed — no JS, no markup change. */
@media print {
  .techref::details-content { content-visibility: visible !important; display: block; }
  .techref:not([open]) > .techref__body { display: block !important; }
}

/* =================================== 17. kiosk (showing edition only) ====== */
/* Dormant until asked for: src/kiosk.js ships in build/showing/ only, and adds
   .is-kiosk plus the rail/hint elements only while the attract loop is actually
   running. Nothing below applies to normal showing browsing or to the owner's
   edition. The plaque takes the part hue of whatever page it is standing on, so
   the tour reads as one exhibit moving through the binder's tabs. */

body.is-kiosk {
  padding-bottom: 4.8rem;                 /* the rail is fixed; keep the foot clear */
  -webkit-user-select: none; user-select: none;   /* no long-press selection popups */
}
body.is-kiosk .nav__brand { position: relative; }

/* ------------------------------------- the plaque ------------------------- */
.kiosk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--ink-faint);
}
.kiosk__prog { height: 2px; background: var(--rule); }
.kiosk__prog > span {
  display: block; height: 100%; width: 0;
  background: var(--hue);
}
.kiosk__bar {
  max-width: var(--maxw-wide); margin: 0 auto;
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem var(--pad) .95rem;
  min-height: 3.2rem;
}
.kiosk__pos { font-size: var(--t11); color: var(--hue); white-space: nowrap; flex: none; }
.kiosk__mid { display: flex; align-items: baseline; gap: .7rem; min-width: 0; }
.kiosk__label {
  font-family: var(--serif); font-size: var(--t17); line-height: 1.2;
  letter-spacing: -.005em; color: var(--ink); white-space: nowrap;
}
.kiosk__note {
  font-size: var(--t11); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kiosk__hint {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t11); color: var(--muted); white-space: nowrap;
}
.kiosk__hint .ic { width: 15px; height: 15px; }
.kiosk[data-mode="free"] .kiosk__label,
.kiosk[data-mode="resuming"] .kiosk__label { color: var(--muted); }
.kiosk[data-mode="resuming"] .kiosk__hint { color: var(--hue); }
/* Below ~880px the plaque drops the sub-note rather than truncating it: a
   half-finished spec line is worse than none. Portrait tablets land here. */
@media (max-width: 879px) {
  .kiosk__note { display: none; }
}
@media (max-width: 759px) {
  .kiosk__label { font-size: var(--t14); }
}
@media (max-width: 519px) {
  .kiosk__mid { display: none; }
}

/* ------------------------------- "touch to explore" ----------------------- */
.kiosk-hint {
  position: fixed; z-index: 61; left: 50%; bottom: 5.9rem;
  transform: translateX(-50%) translateY(.45rem);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .72rem 1.15rem;
  background: var(--surface); border: 1px solid var(--ink-faint);
  border-radius: var(--r);
  font-size: var(--t11); color: var(--ink-soft);
  box-shadow: 0 1px 14px rgba(0, 0, 0, .06);
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
}
.kiosk-hint.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.kiosk-hint .ic--touch { width: 17px; height: 17px; color: var(--hue); }
.kiosk-hint .kt-a { animation: kiosk-ripple 2.6s ease-in-out infinite; }
@keyframes kiosk-ripple { 0%, 100% { opacity: .22; } 45% { opacity: 1; } }

/* ----------------------------------- spotlights --------------------------- */
/* Attract-mode annotation of the live page (src/kiosk.js → "spotlights"). One
   overlay layer, positioned in DOCUMENT coordinates, so it scrolls with the page
   with no scroll listener and nothing re-measured per frame; opacity and a 4px
   translate are the only animated properties.

   The look is the manual's own callout language, not a demo balloon: a hairline
   rectangle in the part hue with a 7px halo of undimmed page inside it, a 1px
   elbow leader with a dot on the target (technical-illustration grammar), and a
   note card that is a small AT-A-GLANCE panel — hairline border, 2px hue top
   edge, 2px radius, mono letterspaced designator eyebrow, one sentence. No
   shadow anywhere: the veil is what separates the card from the page.

   The dim is a single flat spread on the frame — one element, one paint, no blur
   and no four-rectangle mask. z-index 55 puts the layer above the sticky nav
   (20) and below the plaque and hint (60/61), which stay legible over it. */
.kspot-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  z-index: 55; pointer-events: none;
  --kveil: rgba(46, 38, 25, .31);
}
.kspot { opacity: 0; transition: opacity .5s ease; }
.kspot.is-on { opacity: 1; }
.kspot__frame, .kspot__note, .kspot__lead { position: absolute; }

.kspot__frame {
  border: 1px solid var(--hue);
  border-radius: var(--r);
  box-shadow: 0 0 0 100vmax var(--kveil);
}
.kspot__lead { overflow: visible; fill: none; stroke: var(--hue); stroke-width: 1; }
.kspot__lead circle { fill: var(--hue); stroke: none; }

.kspot__note {
  background: var(--surface);
  border: 1px solid var(--ink-faint);
  border-top: 2px solid var(--hue);
  border-radius: var(--r);
  padding: .6rem .8rem .7rem;
  transform: translateY(4px);
  transition: transform .5s ease;
}
.kspot.is-on .kspot__note { transform: translateY(0); }
.kspot__eyebrow { margin: 0 0 .35rem; font-size: var(--t11); color: var(--muted); }
.kspot__code { color: var(--hue); }
.kspot__text {
  margin: 0; font-size: var(--t14); line-height: 1.5; color: var(--ink-soft);
  letter-spacing: 0; text-transform: none;
}

/* --------------------------------- exit affordances ----------------------- */
/* Exit is a 3-second long-press on the address — deliberately non-obvious. A
   hairline in the part hue fills under the brand while it is held. */
body.is-kiosk .nav__brand::after {
  content: ""; position: absolute; left: 0; bottom: -.3rem;
  height: 2px; width: 0; background: var(--hue); opacity: 0;
}
body.is-kiosk .nav__brand.is-holding::after {
  width: 100%; opacity: .9;
  transition: width 3s linear, opacity .25s ease;
}
.kiosk-toast {
  position: fixed; z-index: 62; left: 50%; bottom: 1.5rem;
  transform: translateX(-50%) translateY(.4rem);
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .72rem 1.15rem;
  background: var(--surface); border: 1px solid var(--ink-faint);
  border-radius: var(--r); font-size: var(--t11); color: var(--ink-soft);
  box-shadow: 0 1px 14px rgba(0, 0, 0, .06);
  opacity: 0; transition: opacity .5s ease, transform .5s ease;
}
.kiosk-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.kiosk-toast__go { color: var(--accent); text-decoration: none; }

/* Outbound links and dialer links go quiet — and inert (JS) — in kiosk mode
   only. Their hrefs are untouched, so ordinary showing browsing still works. */
.is-kiosk a.kiosk-inert { color: var(--muted); text-decoration: none; cursor: default; opacity: .62; }
.is-kiosk a.kiosk-inert .ic { opacity: .55; }

@media (prefers-color-scheme: dark) {
  .kiosk-hint, .kiosk-toast { box-shadow: 0 1px 16px rgba(0, 0, 0, .45); }
  /* On a dark page the veil cannot brighten the target, so the card carries the
     lift instead: one step up the surface ramp, off the veiled page. */
  .kspot-layer { --kveil: rgba(4, 5, 8, .56); }
  .kspot__note { background: var(--surface-2); }
}
@media (prefers-reduced-motion: reduce) {
  .kiosk-hint { transition: none; }
  .kiosk-hint .kt-a { animation: none; opacity: .55; }
  .kspot, .kspot__note { transition: none; }
  .kspot__note { transform: none; }
}

/* ------------------------------- the entry page (kiosk.html) -------------- */
.is-kiosk-launch .main { max-width: 46rem; padding-top: 2.4rem; }
.launch { text-align: center; }
.launch__eyebrow { font-size: var(--t11); letter-spacing: .22em; color: var(--muted); margin: 0; }
.launch__addr {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(var(--t28), 8vw, var(--t40));
  line-height: 1.02; letter-spacing: -.025em; margin: 0;
}
.launch__city { margin: .85rem 0 0; font-size: var(--t12); color: var(--muted); }
.launch__lead {
  margin: 1.9rem auto 0; max-width: 33rem;
  color: var(--ink-soft); line-height: 1.6;
}
.launch__go { display: none; margin-top: 2.3rem; }
.launch.is-ready .launch__go { display: block; }
.launch.is-ready .launch__nojs { display: none; }
.launch__nojs {
  margin: 2.3rem auto 0; max-width: 30rem;
  font-size: var(--t12); color: var(--muted); line-height: 1.6;
}
.launch__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 64px; padding: 0 2.3rem;
  font-size: var(--t14); letter-spacing: .16em;
  color: var(--paper); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r);
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.launch__btn .ic { width: 17px; height: 17px; }
.launch__btn:active { background: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .launch__btn:hover { background: var(--ink); border-color: var(--ink); } }
.launch__micro {
  margin: 1.15rem auto 0; max-width: 30rem;
  font-size: var(--t12); color: var(--muted); line-height: 1.6;
}
.launch__alt { margin: 2.1rem 0 0; }
.launch__alt a {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; font-size: var(--t14); text-decoration: none;
}
.launch__alt .ic { width: 14px; height: 14px; }
@media (hover: hover) { .launch__alt a:hover { text-decoration: underline; } }

.programme { margin: 3.4rem 0 0; text-align: left; }
.programme__h {
  font-size: var(--t11); color: var(--muted); font-weight: 500;
  margin: 0 0 .3rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--ink-faint);
}
.programme__list { list-style: none; margin: 0; padding: 0; }
.programme__row {
  display: grid; grid-template-columns: 2.3rem 1fr auto;
  align-items: baseline; gap: .2rem .9rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
}
.programme__n {
  font-family: var(--mono); font-size: var(--t12); letter-spacing: .02em;
  color: var(--hue); border-left: 3px solid var(--hue); padding-left: .55rem;
  align-self: start; line-height: 1.35;
}
.programme__mid { min-width: 0; }
.programme__label { display: block; font-family: var(--serif); font-size: var(--t17); line-height: 1.25; }
.programme__note { display: block; color: var(--muted); font-size: var(--t12); margin-top: .15rem; line-height: 1.5; }
.programme__code { font-size: var(--t11); color: var(--muted); align-self: start; }

@media print {
  .kiosk, .kiosk-hint, .kiosk-toast, .kspot-layer { display: none !important; }
  body.is-kiosk { padding-bottom: 0; }
}