/* Atelier Rook — a drawing set on Prussian-blue paper.
   Ink is pale; the only second colour is a vermilion kept for dimensions, measures and the stamp.
   Pen weights: f 0.35 → .6px, m 0.7 → 1.1px, h 1.4 → 2.1px (non-scaling). */

@font-face { font-family: 'Archivo Narrow'; src: url('fonts/ArchivoNarrow-Latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('fonts/PublicSans-Latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #0f3462; --paper-deep: #0a2549; --ink: #e7eef8; --ink-2: rgba(231, 238, 248, .62); --ink-3: rgba(231, 238, 248, .34);
  --rule: rgba(231, 238, 248, .30); --rule-2: rgba(231, 238, 248, .16); --verm: #ff5a3c; --verm-ink: #ff7a60;
  --sans: 'Public Sans', 'Inter', system-ui, sans-serif; --cond: 'Archivo Narrow', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --gutter: 40px; --bar: 38px; --tb-h: 66px; --notes-w: 336px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: auto; }
body { margin: 0; font: 400 15px/1.52 var(--sans); color: var(--ink); background: radial-gradient(120% 90% at 50% 40%, var(--paper) 0%, var(--paper-deep) 100%) fixed; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { /* 1 cm grid of the drawing board, very faint */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size: 38px 38px; opacity: .35;
}
main { position: relative; z-index: 1; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--cond); font-weight: 600; line-height: 1.05; }
h2 small, h3 small { display: block; font: 600 11px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
p { margin: 0 0 .9em; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; vertical-align: top; padding: 5px 8px; border-bottom: 1px solid var(--rule-2); }
th { font: 600 10.5px/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
caption { caption-side: top; text-align: left; font: 600 11px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); padding: 0 0 8px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; }
.skip:focus { left: 8px; }
.noscript-note { position: relative; z-index: 21; margin: 0; padding: 8px var(--gutter); background: var(--paper-deep); color: var(--ink-2); font-size: 12.5px; border-bottom: 1px solid var(--rule); }

/* ---------- the set bar: a thin strip along the top edge of the board ---------- */
#setbar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar); z-index: 20; display: flex; align-items: center; gap: 22px; padding: 0 var(--gutter); background: color-mix(in srgb, var(--paper-deep) 88%, transparent); border-bottom: 1px solid var(--rule); font-family: var(--cond); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(3px); }
.setbar-name { text-decoration: none; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.setbar-name b { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.2px solid var(--ink); font-size: 11px; letter-spacing: 0; }
.setbar-sheets { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.setbar-sheets a { display: inline-block; padding: 3px 7px; border: 1px solid transparent; text-decoration: none; color: var(--ink-2); }
.setbar-sheets a.on { color: var(--ink); border-color: var(--ink); }
.setbar-set { margin-left: auto; color: var(--ink-2); }
.setbar-set em { font-style: normal; color: var(--ink); }

/* ---------- sheets: every container is a drawing sheet with a double frame and a title block ---------- */
.sheet { padding: calc(var(--bar) + 26px) var(--gutter) 26px; }
.frame { position: relative; border: 1px solid var(--ink-2); min-height: calc(100vh - var(--bar) - 52px); display: grid; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.frame::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--rule-2); pointer-events: none; }
.frame::after { /* corner crop marks */
  content: ''; position: absolute; inset: -9px; pointer-events: none;
  background: linear-gradient(var(--ink-2), var(--ink-2)) 0 0/9px 1px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) 0 0/1px 9px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) 100% 0/9px 1px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) 100% 0/1px 9px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) 0 100%/9px 1px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) 0 100%/1px 9px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) 100% 100%/9px 1px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) 100% 100%/1px 9px no-repeat;
}

/* title block */
.tb { grid-area: tb; display: grid; grid-template-columns: 1.35fr 1.15fr 1.7fr .65fr .8fr .8fr .5fr .42fr; border-top: 1px solid var(--ink-2); min-height: var(--tb-h); font-family: var(--cond); font-size: 14px; line-height: 1.25; }
.tb-cell { padding: 8px 12px 9px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; min-width: 0; }
.tb-cell:last-child { border-right: 0; }
.tb-cell small { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.tb-brand { flex-direction: row; align-items: center; gap: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.tb-brand b { display: grid; place-items: center; width: 34px; height: 34px; border: 1.4px solid var(--ink); font-size: 14px; letter-spacing: 0; flex: none; }
.tb-no, .tb-rev { font-size: 22px; font-weight: 600; }
.tb-layers .layer-tab { display: block; color: var(--ink-3); transition: color .3s; }
.tb-layers .layer-tab.on { color: var(--ink); }
.tb-layers .layer-tab.on::before { content: '▸ '; color: var(--verm); }

/* stamped rectangles: the only button */
.stamp { display: inline-flex; align-items: baseline; gap: 10px; position: relative; padding: 11px 18px 10px; border: 1.6px solid var(--ink); background: transparent; color: var(--ink); font: 600 14px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer; transform: rotate(-1.4deg); transition: background-color .12s, color .12s, transform .12s; }
.stamp::before { content: ''; position: absolute; inset: 3px; border: 1px dotted currentColor; opacity: .7; }
.stamp:hover, .stamp:focus-visible { background: var(--ink); color: var(--paper-deep); transform: rotate(-1.4deg) scale(1.04); outline: none; }
.stamp:active { transform: rotate(-1.4deg) scale(.98); }
.stamp.primary { border-color: var(--verm); color: var(--verm-ink); }
.stamp.primary:hover, .stamp.primary:focus-visible { background: var(--verm); color: var(--paper-deep); }
.stamp-arrow { font-family: var(--sans); letter-spacing: 0; }
.stamp-sub { font-size: 10px; letter-spacing: .12em; opacity: .8; }
.stamp.done { border-style: double; border-width: 4px; }

/* the drawings */
.drawing { margin: 0; min-width: 0; min-height: 0; position: relative; }
.drawing svg { display: block; width: 100%; height: 100%; overflow: visible; }
.drawing figcaption { font: 400 12px/1.4 var(--sans); color: var(--ink-2); margin-top: 8px; }
svg line, svg path, svg polyline, svg polygon, svg rect, svg circle { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg .f { stroke-width: calc(.6px * var(--k, 1)); }
svg .m { stroke-width: calc(1.1px * var(--k, 1)); }
svg .h { stroke-width: calc(2.1px * var(--k, 1)); }
svg .dim, svg text.dim { stroke: var(--verm); }
svg text { font-family: var(--cond); fill: var(--ink); stroke: none; }
svg text.dim { fill: var(--verm-ink); }
svg text.ttl { font-weight: 600; letter-spacing: .08em; }
svg text.lab { fill: var(--ink-2); letter-spacing: .02em; }
svg text.lvl { letter-spacing: .03em; }
svg text.tagn { fill: var(--ink); font-weight: 600; }
svg .dsh { stroke-dasharray: 9 6; }
svg .ctr { stroke-dasharray: none; }
svg .ld { stroke: var(--ink-2); }
svg .sunw { stroke-dasharray: 12 7; stroke: var(--ink-2); }
svg .sunl { stroke: var(--ink); }
svg .fl { stroke: none; }
svg .fl.solid { fill: var(--ink); }
svg .pat { stroke: var(--ink); stroke-width: .9; opacity: .5; vector-effect: none; }
svg .patd { fill: var(--ink); stroke: none; opacity: .5; }
svg .pat.sun { stroke: var(--verm); opacity: .8; stroke-width: 1.2; }
svg .pat.sun2 { stroke: var(--ink); opacity: .85; stroke-width: 1; }
svg .keybox { fill: var(--paper); opacity: .97; stroke: var(--ink-2); }
svg .tag.hot polygon { fill: var(--verm); stroke: var(--verm); }
svg .tag.hot text { fill: var(--paper-deep); }
svg g[data-layer] .ann { transition: opacity .2s; }
svg g[data-layer][data-under] .ann { opacity: 0; }

/* ---------- Sheet 01: cover ---------- */
.cover .frame { min-height: calc(100vh - var(--bar) - 52px); grid-template-columns: minmax(0, 1fr) var(--notes-w); grid-template-rows: auto minmax(360px, auto) auto; grid-template-areas: 'lettering lettering' 'drawing notes' 'tb tb'; }
.lettering { grid-area: lettering; position: relative; padding: 30px 36px 20px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 56px; align-items: end; }
.guides { position: absolute; left: 0; right: 0; top: 30px; height: 100px; pointer-events: none; }
.guides i { position: absolute; left: 0; right: 0; height: 1px; background: var(--ink-3); transform-origin: left; }
.guides .g-cap { top: 10px; } .guides .g-x { top: 40px; } .guides .g-base { top: 84px; }
.guides .g-dim { position: absolute; right: 36px; top: 10px; height: 74px; border-right: 1px solid var(--verm); font: 400 11px/1 var(--cond); color: var(--verm-ink); letter-spacing: .1em; padding: 0 6px 0 0; writing-mode: vertical-rl; text-orientation: mixed; display: flex; align-items: center; }
.guides .g-dim::before, .guides .g-dim::after { content: ''; position: absolute; right: -4px; width: 9px; height: 1px; background: var(--verm); transform: rotate(45deg); }
.guides .g-dim::before { top: 0; } .guides .g-dim::after { bottom: 0; }
.letter-title { position: relative; font: 700 104px/1 var(--cond); letter-spacing: .05em; text-transform: uppercase; margin: -6px 0 0; }
.letter-title .ch { display: inline-block; color: var(--ink); }
.letter-title .word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.letter-title { min-width: 0; }
.tb-brand > span { min-width: 0; overflow-wrap: anywhere; }
.setbar-name { min-width: 0; overflow-wrap: anywhere; }
.setbar-name b, .setbar-sheets { flex-shrink: 0; }
.letter-title.small { font-size: 78px; margin: 0 0 8px; }
.letter-title.small small { display: block; font: 600 11px/1 var(--cond); letter-spacing: .18em; color: var(--ink-2); margin-bottom: 12px; }
.strap { max-width: 56ch; font-size: 15.5px; line-height: 1.5; color: var(--ink); margin: 0 0 4px; position: relative; padding-right: 64px; }
.strap-note { color: var(--ink-2); }
.site-fig { grid-area: drawing; padding: 18px 30px 12px; border-right: 1px solid var(--rule); display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.cover-notes { grid-area: notes; padding: 22px 26px; display: flex; flex-direction: column; gap: 18px; }
.h-small { font: 600 11px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.setlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.setlist a { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule-2); text-decoration: none; font-family: var(--cond); font-size: 15px; letter-spacing: .02em; }
.setlist a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.setlist b { font-weight: 600; } .setlist em { font-style: normal; color: var(--ink-2); font-size: 13px; }
.facts { margin: 0; display: grid; gap: 6px; font-size: 13px; }
.facts div { display: grid; grid-template-columns: 110px 1fr; }
.facts dt { color: var(--ink-2); font-family: var(--cond); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; padding-top: 2px; }
.facts dd { margin: 0; }
.cover-notes .stamp { align-self: flex-start; margin-top: auto; }

/* ---------- Sheets 02–04: the board ---------- */
.pin { position: relative; }
.board { height: 460vh; }
.planpin { height: 220vh; }
.sticky { position: sticky; top: 0; height: 100vh; padding: calc(var(--bar) + 18px) var(--gutter) 18px; }
.sticky .frame { height: 100%; min-height: 0; }
.board-frame, .plan-frame { grid-template-columns: 1fr var(--notes-w); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: 'drawing notes' 'tb tb'; }
.board-drawing, .plan-drawing { grid-area: drawing; padding: 18px 18px 8px 22px; border-right: 1px solid var(--rule); }
.notes, .schedule { grid-area: notes; position: relative; overflow: hidden; }
.note-set { position: absolute; inset: 0; padding: 22px 24px; opacity: 0; transform: translateY(10px); transition: opacity .32s ease, transform .32s ease; pointer-events: none; overflow: auto; }
.note-set.on { opacity: 1; transform: none; pointer-events: auto; }
.note-set h2, .schedule h2 { font-size: 30px; margin-bottom: 12px; }
.note-set p, .schedule p { font-size: 14px; line-height: 1.5; color: var(--ink); }
.keyed { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.keyed li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule-2); font-size: 13px; line-height: 1.42; color: var(--ink); opacity: .32; transition: opacity .25s; }
.keyed li.on { opacity: 1; }
.keyed li.on b { background: var(--ink); color: var(--paper-deep); }
.keyed b { isolation: isolate; }
.keyed b::before { z-index: -1; }
.keyed b { position: relative; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; font: 600 12px/1 var(--cond); color: var(--ink); clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); background: var(--ink); }
.keyed b::before { content: ''; position: absolute; inset: 1.5px; background: var(--paper); clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); }
.keyed b span, .keyed b { z-index: 0; }
.keyed li.on b::before { display: none; }

/* ---------- Sheet 05: plan and schedule ---------- */
.schedule { padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.rooms td, .rooms th { padding: 5px 6px; font-size: 12.5px; }
.rooms td small { display: block; font-size: 11px; color: var(--ink-2); }
.rooms td:nth-child(3), .rooms td:nth-child(4) { white-space: nowrap; font-family: var(--cond); font-size: 13.5px; }
.rooms tbody tr { opacity: .3; transition: opacity .25s; }
.rooms tbody tr.on { opacity: 1; }
.rooms tfoot td { font-size: 11.5px; color: var(--ink-2); border-bottom: 0; padding-top: 8px; }
.rooms tfoot td:nth-child(3) { color: var(--ink); font-family: var(--cond); font-size: 15px; font-weight: 600; }
.schedule .keyed { margin-top: 10px; }

/* ---------- Sheet 06: practice ---------- */
.practice .frame { grid-template-rows: auto 1fr auto auto; grid-template-areas: 'head' 'grid' 'reg' 'tb'; }
.sheet-head { grid-area: head; padding: 26px 36px 18px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1.4fr; gap: 36px; align-items: end; }
.sheet-head h2 { font-size: 46px; }
.sheet-head-p { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 60ch; }
.practice-grid { grid-area: grid; display: grid; grid-template-columns: 1.05fr 1.35fr 1fr; }
.practice-grid .col { padding: 20px 26px 22px; border-right: 1px solid var(--rule); min-width: 0; }
.practice-grid .col:last-child { border-right: 0; }
.practice-grid h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.how p { font-size: 13.5px; line-height: 1.5; margin-bottom: .8em; }
.how b { font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.stagetab td:first-child { font-family: var(--cond); font-weight: 600; font-size: 14px; white-space: nowrap; }
.stagetab td:nth-child(2), .stagetab td:last-child { font-family: var(--cond); font-size: 14px; white-space: nowrap; }
.fine { font-size: 11.5px; color: var(--ink-2); margin: 12px 0 0; }
.jamb-fig { display: grid; grid-template-rows: 1fr auto; }
.jamb-fig svg { max-height: 470px; }
.register { grid-area: reg; padding: 18px 26px 22px; border-top: 1px solid var(--rule); }
.register h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-bottom: 10px; }
.regtab td:first-child, .regtab td:nth-child(3) { font-family: var(--cond); font-weight: 600; font-size: 14px; }
.regtab td:nth-child(4), .regtab td:nth-child(5) { font-family: var(--cond); font-size: 14px; }

/* ---------- Sheet 07: contact, the last sheet ---------- */
.contact .frame { grid-template-rows: auto 1fr auto; grid-template-areas: 'head' 'grid' 'tb'; }
.contact-head { grid-template-columns: 1fr 1fr; align-items: end; }
.contact-grid { grid-area: grid; display: grid; grid-template-columns: 1.25fr .85fr; grid-template-rows: auto auto; grid-template-areas: 'block actions' 'block key' 'revs revs'; }
.bigblock { grid-area: block; margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-right: 1px solid var(--rule); }
.bigblock div { padding: 18px 26px 20px; border-bottom: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2); }
.bigblock div:nth-child(2n) { border-right: 0; }
.bigblock dt { font: 600 10.5px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.bigblock dd { margin: 0; font-family: var(--cond); font-size: 19px; line-height: 1.25; }
.bigblock dd a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.bigblock dd a:hover { border-bottom-color: var(--ink); }
.actions { grid-area: actions; padding: 24px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--rule); }
.actions-note { font-size: 11.5px; color: var(--ink-2); margin: 4px 0 0; max-width: 40ch; }
.key-fig { grid-area: key; padding: 18px 26px 14px; }
.key-fig svg, .jamb-fig svg { height: auto; }
.revs { grid-area: revs; border-top: 1px solid var(--rule); }
.revs-h { font: 600 11px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); padding: 14px 26px 8px; }
.revs th, .revs td { padding: 7px 12px; }
.revs th:first-child, .revs td:first-child { padding-left: 26px; }
.revs td:first-child { font-family: var(--cond); font-weight: 600; font-size: 15px; }
.revs td:nth-child(2), .revs td:last-child { font-family: var(--cond); font-size: 14px; white-space: nowrap; }
.revs td:nth-child(3) { padding-right: 250px; }
.revs tbody tr:last-child td { border-bottom: 0; }
.tb-final { border-top: 1px solid var(--ink-2); }
.endstamp { position: absolute; right: 118px; bottom: 96px; margin: 0; display: grid; gap: 4px; padding: 10px 16px 9px; border: 2px solid var(--verm); color: var(--verm-ink); font: 600 14px/1 var(--cond); letter-spacing: .22em; text-transform: uppercase; transform: rotate(-6deg); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.endstamp::before { content: ''; position: absolute; inset: 3px; border: 1px dotted var(--verm); opacity: .8; }
.endstamp span:last-child { font-size: 10px; letter-spacing: .16em; opacity: .85; }

/* ---------- the drafting cursor: crosshair and T-square, fine pointer only ---------- */
#tsq { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
#tsq[hidden] { display: none; }
#tsq i { position: absolute; background: var(--ink); opacity: .34; }
.tsq-h { left: 0; right: 0; height: 1px; top: 0; }
.tsq-v { top: 0; bottom: 0; width: 1px; left: 0; }
.tsq-x { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 1.2px solid var(--ink); border-radius: 50%; background: radial-gradient(circle, var(--ink) 1px, transparent 1.6px); transition: border-color .12s; }
.tsq-rd { position: absolute; margin: 12px 0 0 14px; padding: 3px 6px 2px; font: 400 11px/1 var(--cond); letter-spacing: .1em; color: var(--verm-ink); border: 1px solid var(--verm); background: color-mix(in srgb, var(--paper-deep) 82%, transparent); white-space: nowrap; }
#tsq.hot .tsq-x { border-color: var(--verm); border-width: 2px; }
body.tsq-on { cursor: none; }
body.tsq-on a, body.tsq-on button { cursor: none; }

/* ---------- document mode: phone, and reduced motion ---------- */
.doc-sheets { display: none; }
body[data-mode='document'] .doc-sheets { display: block; }
body[data-mode='document'] .board .sticky, body[data-mode='document'] .planpin .sticky { position: static; height: auto; }
body[data-mode='document'] .board { height: auto; }
body[data-mode='document'] .board > .sticky { display: none; }
body[data-mode='document'] .planpin { height: auto; }
body[data-mode='document'] .note-set { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 18px 20px; }
body[data-mode='document'] .keyed li, body[data-mode='document'] .rooms tbody tr { opacity: 1; }
body[data-mode='document'] .layer-tab { color: var(--ink); }
body[data-mode='document'] .layer-tab:not(.on) { display: none; }
.doc-sheets .sticky { padding: calc(var(--bar) + 18px) var(--gutter) 18px; }
.doc-sheets .frame { min-height: calc(100vh - var(--bar) - 36px); }

@media (max-width: 1180px) {
  :root { --notes-w: 300px; }
  .letter-title { font-size: 92px; }
  .practice-grid { grid-template-columns: 1fr 1fr; }
  .practice-grid .jamb-fig { grid-column: 1 / -1; border-top: 1px solid var(--rule); border-right: 0; }
  .practice-grid .col:nth-child(2) { border-right: 0; }
  .tb { grid-template-columns: repeat(4, 1fr); }
  .tb-cell { border-bottom: 1px solid var(--rule); }
  .tb-cell:nth-child(4n) { border-right: 0; }
}
@media (max-width: 899px) {
  :root { --gutter: 14px; --bar: 34px; }
  body { font-size: 14px; }
  #setbar { gap: 12px; padding: 0 12px; font-size: 12px; }
  .setbar-set { display: none; }
  .sheet { padding: calc(var(--bar) + 14px) var(--gutter) 14px; }
  .frame { min-height: 0; }
  .frame::after { display: none; }
  .cover .frame { height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: 'lettering' 'drawing' 'notes' 'tb'; }
  .lettering { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .lettering { padding: 22px 18px 16px; }
  .guides { display: none; }
  .letter-title { font-size: clamp(48px, 14.5vw, 72px); margin: 0 0 12px; letter-spacing: .04em; }
  .letter-title.small { font-size: 48px; }
  .strap { font-size: 15px; }
  .site-fig { padding: 14px 12px 12px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .site-fig svg { aspect-ratio: 4 / 3; }
  .cover-notes { padding: 16px 18px 18px; }
  .board-frame, .plan-frame { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: 'drawing' 'notes' 'tb'; }
  .board-drawing, .plan-drawing { padding: 12px 10px 8px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .board-drawing svg, .plan-drawing svg { height: auto; }
  .notes, .schedule { overflow: visible; }
  .note-set h2, .schedule h2 { font-size: 26px; }
  .schedule { padding: 16px 18px; }
  .rooms { font-size: 12px; }
  .rooms td small { display: none; }
  .sheet-head { grid-template-columns: 1fr; gap: 8px; padding: 18px 18px 14px; }
  .sheet-head h2 { font-size: 34px; }
  .practice-grid { grid-template-columns: 1fr; }
  .practice-grid .col { border-right: 0; border-bottom: 1px solid var(--rule); padding: 16px 18px; }
  .stagetab th:nth-child(3), .stagetab td:nth-child(3) { font-size: 12px; }
  .jamb-fig svg { max-height: none; aspect-ratio: 620 / 780; }
  .register { padding: 14px 18px 18px; overflow-x: auto; }
  .regtab { min-width: 520px; }
  .contact-grid { grid-template-columns: 1fr; grid-template-areas: 'block' 'actions' 'key' 'revs'; }
  .bigblock { grid-template-columns: 1fr; border-right: 0; border-bottom: 1px solid var(--rule); }
  .bigblock div { border-right: 0; padding: 14px 18px; }
  .bigblock dd { font-size: 17px; }
  .actions { padding: 18px; }
  .key-fig { padding: 14px 18px; }
  .revs th:first-child, .revs td:first-child { padding-left: 18px; }
  .revs-h { padding: 12px 18px 6px; }
  .revs td:nth-child(3) { min-width: 0; padding-right: 12px; }
  .tb { grid-template-columns: 1fr 1fr; font-size: 13px; }
  .tb-cell:nth-child(2n) { border-right: 0; }
  .tb-cell:nth-child(4n) { border-right: 0; }
  .endstamp { right: 18px; bottom: auto; top: 14px; transform: rotate(-5deg) scale(.85); transform-origin: top right; }
  .doc-sheets .sticky { padding: 0 0 14px; }
  .doc-sheets .frame { min-height: 0; }
  #tsq { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .note-set, .keyed li, .rooms tbody tr, .stamp, svg g[data-layer], .tb-layers .layer-tab { transition: none; }
  #tsq { display: none; }
}

/* ---------- the cover lettering inks in letter by letter, the guides rule first ---------- */
.letter-title .ch { animation: ink .42s cubic-bezier(.3, 0, .2, 1) both; animation-delay: calc(.35s + var(--i, 0) * .055s); }
.guides i { animation: rule 1.1s cubic-bezier(.4, 0, .2, 1) both; }
.guides .g-x { animation-delay: .1s; } .guides .g-base { animation-delay: .2s; }
.guides .g-dim { animation: fadein .4s 1.2s both; }
@keyframes ink { from { color: transparent; -webkit-text-stroke: 1px var(--ink-2); } 60% { color: transparent; -webkit-text-stroke: 1px var(--ink); } to { color: var(--ink); -webkit-text-stroke: 0 transparent; } }
@keyframes rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .letter-title .ch, .guides i, .guides .g-dim { animation: none; } }