/* First Read, the site. The desk at night: near-black ground, white paper where the memo shows, one signal blue.
   Display type is IBM Plex Sans at 300, set large and tight; everything else keeps the tool's working sizes.
   Short blocks, numbered sections, diagrams drawn in HTML so they reflow. Tokens come from brand.css. */

:root {
  color-scheme: dark;
  --bg: var(--b-night); --bg-2: var(--b-night-2); --bg-3: var(--b-night-3);
  --fg: #e8ecf1; --fg-2: #aab3bf; --fg-3: #6f7a88;
  --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .18);
  --signal: var(--b-signal-night); --signal-deep: var(--b-signal-deep);   /* the deep signal is the only one that carries white text: 5.2:1 */
  --amber: var(--b-amber-night);
  --paper: #ffffff; --paper-ink: #14181d; --paper-muted: #5f6672; --paper-line: #e1e5ea; --paper-group: #eef1f5;
  --gutter: 24px; --max: 1280px;
  --nav-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; letter-spacing: -.02em; }
b, strong { font-weight: 600; }
code, .mono { font-family: var(--mono); font-size: .92em; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--signal) 35%, transparent); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--paper); color: var(--paper-ink); border-radius: 999px; font-weight: 500; }
.skip:focus { top: 16px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ------------------------------------------------------------------ the eyebrow, the counter, the arrow */
.eyebrow { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.eyebrow .n { font-family: var(--mono); font-weight: 500; color: var(--fg-3); margin-right: 10px; letter-spacing: .08em; }
.arrow { display: inline-block; width: .9em; height: .9em; vertical-align: -.08em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-left: .35em; transition: transform var(--t-fast); }
a:hover .arrow, button:hover .arrow { transform: translate(2px, -2px); }

/* ------------------------------------------------------------------ buttons: pills, the way the references do them */
.btn { display: inline-flex; align-items: center; gap: 4px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: 500 14px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform .08s ease-out; }
.btn:active { transform: translateY(1px); }
.btn-paper { background: var(--paper); color: var(--paper-ink); }
.btn-paper:hover { background: #dfe6ee; }
.btn-ghost { background: rgba(255, 255, 255, .06); border-color: var(--line-2); color: var(--fg); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-signal { background: var(--signal-deep); color: #fff; }
.btn-signal:hover { background: color-mix(in srgb, var(--signal-deep) 82%, var(--b-ink)); }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 13px; }
/* a phone: a long button wraps inside the page rather than run past its edge */
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 11px; } }
/* a touch screen: the bar's links and every pill are 44px tall */
@media (pointer: coarse) { .nav .nav-links a { padding: 16px 14px; } .btn-small { min-height: 44px; } }
.text-link { display: inline-flex; align-items: center; min-height: 46px; font-weight: 500; color: var(--fg); border-bottom: 1px solid transparent; }
.text-link:hover { color: var(--signal); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* ------------------------------------------------------------------ the top bar: lockup, a pill of links, one button */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--gutter); background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, transparent), transparent); pointer-events: none; }
.nav > * { pointer-events: auto; }
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.lockup .fr-mark { width: 24px; height: 24px; }
.lockup em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--fg-2); margin-left: 4px; }
.nav-links { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); backdrop-filter: blur(12px); }
.nav-links a { padding: 9px 16px; border-radius: 999px; font: 500 13.5px/1 var(--sans); color: var(--fg-2); transition: background-color var(--t-fast), color var(--t-fast); }
.nav-links a:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }
.nav-links a[aria-current="page"] { color: var(--fg); background: rgba(255, 255, 255, .1); }
.nav-cta { justify-self: end; }
@media (max-width: 900px) {
  /* a phone: the bar scrolls with the page; the lockup and the button share the first row, the links the second */
  .nav { position: static; grid-template-columns: 1fr auto; height: auto; padding-block: 14px 10px; row-gap: 10px; background: none; }
  .lockup em { display: none; }
  .nav-links { grid-column: 1 / -1; justify-self: stretch; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .nav-links a { padding: 8px 12px; white-space: nowrap; }
  .nav-cta { min-height: 38px; padding: 0 14px; font-size: 13px; }
}

/* ------------------------------------------------------------------ the hero */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 72px; }
.hero-text { display: flex; flex-direction: column; gap: 28px; max-width: 680px; }
.hero h1 { font-size: clamp(40px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -.03em; }
.hero h1 .dim { color: var(--fg-3); }
.hero .lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
.hero-note { font-size: 12.5px; color: var(--fg-3); }
.hero-art { position: relative; min-width: 0; }
.hero-art::before { content: ""; position: absolute; inset: -10% -8%; background: radial-gradient(closest-side, color-mix(in srgb, var(--signal-deep) 22%, transparent), transparent 70%); pointer-events: none; }
.hero-iso { position: relative; width: 100%; height: auto; display: block; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: space-between; align-items: center; font: 500 12px/1 var(--sans); color: var(--fg-3); letter-spacing: .04em; }
.hero-foot .counter { font-family: var(--mono); }
.hero-foot .counter b { color: var(--fg); font-weight: 500; }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--nav-h) + 72px); padding-bottom: 80px; }
  .hero-foot { display: none; }
}
@media (max-width: 900px) { .hero, .hero.page { padding-top: 40px; } }

/* the isometric massing: the proposed mass in signal blue, the outright envelope dashed inside it */
.iso-street { fill: rgba(255, 255, 255, .03); }
.iso-lot { fill: rgba(255, 255, 255, .04); stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.iso-env { fill: none; stroke: var(--st-fail); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.iso-outright polygon { fill: rgba(255, 255, 255, .05); }
.iso-outright-edges line { stroke: #d3d9e0; stroke-width: 1.1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.iso-proposed .face-top { fill: color-mix(in srgb, var(--signal) 70%, #fff); fill-opacity: .55; }
.iso-proposed .face-front { fill: var(--signal-deep); fill-opacity: .42; }
.iso-proposed .face-left { fill: var(--signal-deep); fill-opacity: .28; }
.iso-proposed polygon { stroke: var(--signal); stroke-width: 1; vector-effect: non-scaling-stroke; }
.iso-floors line { stroke: var(--signal); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.iso-label line { stroke: var(--fg-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.iso-label text { font: 500 12.5px var(--sans); fill: var(--fg); }
.iso-label .l2 { font-size: 11.5px; font-weight: 400; fill: var(--fg-2); }
.iso-street-name, .iso-lot-name { font: 500 11px var(--sans); fill: var(--fg-3); letter-spacing: .04em; }
.iso-street-name { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }

/* an inner page's hero: one column, shorter */
.hero.page { min-height: 0; grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 72px); padding-bottom: 56px; }
.hero.page .hero-text { max-width: 820px; }
.hero.page h1 { font-size: clamp(38px, 5.6vw, 72px); }

/* ------------------------------------------------------------------ brand page devices */
.mark-show { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.tile { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 180px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg); padding: 24px; }
.tile.paper-tile { background: var(--paper); color: var(--paper-ink); border-color: transparent; }
.tile.signal-tile { background: var(--signal-deep); color: #fff; border-color: transparent; }
.tile .fr-mark.big { width: 96px; height: 96px; }
.tile .sizes { display: flex; align-items: center; gap: 22px; }
.tile .sizes .fr-mark:nth-child(1) { width: 64px; height: 64px; } .tile .sizes .fr-mark:nth-child(2) { width: 32px; height: 32px; } .tile .sizes .fr-mark:nth-child(3) { width: 16px; height: 16px; }
.tile img { max-width: 100%; height: auto; display: block; }
.tile-cap { margin-top: 10px; font-size: 12.5px; color: var(--fg-3); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.sw { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.sw i { display: block; height: 84px; }
.sw div { padding: 10px 12px; font-size: 12.5px; background: var(--bg-2); }
.sw b { display: block; font-weight: 600; font-size: 13px; }
.sw code { color: var(--fg-3); font-size: 11.5px; }
.type-samples { display: grid; gap: 22px; }
.ts { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--line); }
.ts .k { font: 500 11px/1.5 var(--mono); color: var(--fg-3); letter-spacing: .04em; }
.ts .display { font-size: clamp(36px, 4.6vw, 60px); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; }
.ts .heading { font-size: 26px; font-weight: 400; letter-spacing: -.015em; }
.ts .body { font-size: 15px; max-width: 60ch; color: var(--fg-2); }
.ts .control { font-size: 14px; font-weight: 500; }
.ts .keyline { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.ts .mach { font: 400 12px/1.6 var(--mono); color: var(--fg-2); }
@media (max-width: 640px) { .ts { grid-template-columns: 1fr; gap: 6px; } }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.dos ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; color: var(--fg-2); }
.dos li { padding-left: 22px; position: relative; }
.dos li::before { position: absolute; left: 0; top: 0; font-weight: 600; }
.dos .do li::before { content: "✓"; color: var(--st-pass); }
.dos .dont li::before { content: "✗"; color: var(--st-fail); }
.dos h3 { font-size: 20px; font-weight: 400; margin-bottom: 14px; }
@media (max-width: 760px) { .dos { grid-template-columns: 1fr; } }
.dl { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ sections */
.sec { padding-block: clamp(72px, 10vw, 128px); border-top: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .eyebrow { grid-column: 1 / -1; }
.sec-head h2 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.05; text-wrap: balance; max-width: 18ch; }
.sec-head .sub { font-size: 16px; line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
.sec-head .sub + .sub { margin-top: 10px; }
.sec-foot { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
@media (max-width: 760px) { .sec-head { grid-template-columns: 1fr; } }

/* a quieter segment: a raised slab across the window */
.sec.slab { background: var(--bg-2); }

/* ------------------------------------------------------------------ numbered items: "01 KEY / title / one sentence" */
.items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; list-style: none; margin: 0; padding: 0; }
.items.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.items.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.item { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.item .n { font: 500 12px/1 var(--mono); color: var(--fg-3); letter-spacing: .08em; }
.item .key { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.item h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.2; font-weight: 400; letter-spacing: -.015em; }
.item p { color: var(--fg-2); font-size: 14.5px; max-width: 36ch; }
.item .pill { align-self: flex-start; }
.item a.more { color: var(--fg); font-weight: 500; font-size: 13.5px; margin-top: 4px; }
.item a.more:hover { color: var(--signal); }
@media (max-width: 900px) { .items, .items.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .items, .items.four, .items.two { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the big numbers */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.stats li { padding: 22px 0 0; border-top: 1px solid var(--line-2); }
.stats .v { font-size: clamp(40px, 5vw, 64px); line-height: 1; font-weight: 300; letter-spacing: -.03em; }
.stats .v small { font-size: max(14px, .45em); color: var(--fg-3); margin-left: 6px; letter-spacing: 0; }
.stats .l { margin-top: 10px; font-size: 13.5px; color: var(--fg-2); max-width: 24ch; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ paper: the memo shows on white, whatever the desk */
.paper { background: var(--paper); color: var(--paper-ink); border-radius: 14px; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 30px); box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.paper, .paper * { color-scheme: light; }
.paper .key { font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); }
.paper .muted { color: var(--paper-muted); }
/* a title block: keys over values under a 2px rule, the way a sheet's title block reads */
.tblock { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 2px solid var(--paper-ink); border-bottom: 1px solid var(--paper-line); }
.tblock > div { padding: 8px 12px 8px 0; border-right: 1px solid var(--paper-line); margin-right: 12px; font-size: 13px; line-height: 1.4; min-width: 0; }
.tblock > div:last-child { border-right: 0; margin-right: 0; }
.tblock .key { display: block; margin-bottom: 2px; }
.tblock .rev { font-weight: 600; }
/* the three answers on paper */
.answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.answer { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--paper-line); }
/* an answer card takes its verdict's wash and ink from the brand's light status set (brand.css --lt-*), which the
   page's dark theme never flips: the paper is light whatever the desk. Prose on a wash is set in that wash's deepened
   ink, never grey (the Marked Word Rule's cousin: colour on a wash belongs to the status). */
.answer[data-verdict] { border-color: transparent; --wash-ink: var(--paper-ink); }
.answer[data-verdict="fail"] { background: var(--lt-fail-wash); --wash-ink: var(--lt-fail-text); }
.answer[data-verdict="conditional"], .answer[data-verdict="uncertain"] { background: var(--lt-conditional-wash); --wash-ink: var(--lt-conditional-text); }
.answer[data-verdict="pass"] { background: var(--lt-pass-wash); --wash-ink: var(--lt-pass-text); }
.answer .q { font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); }
.answer[data-verdict] .q { color: var(--wash-ink); }
.answer .v { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.answer .v em { font-style: normal; color: var(--wash-ink); }
.answer .f { font-size: 13px; color: var(--paper-muted); line-height: 1.45; }
.answer[data-verdict] .f { color: var(--wash-ink); }
.answer .f b { color: var(--paper-ink); }
/* open items on paper: a table with a Who column */
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.ptable th { text-align: left; font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--paper-line); }
.ptable td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--paper-line); vertical-align: top; line-height: 1.45; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable td.who { color: var(--paper-muted); }
.ptable td.who b { color: var(--paper-ink); }
.ptable .rid { display: block; font: 11px var(--mono); color: var(--paper-muted); margin-top: 2px; }
/* one row of the memo: five keyed columns */
.memo-row { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr 1.3fr; gap: 18px; margin: 0; }
.memo-row > div { min-width: 0; font-size: 13px; line-height: 1.45; }
.memo-row .key { display: block; padding-bottom: 6px; border-bottom: 1px solid var(--paper-line); margin-bottom: 8px; }
.memo-row code { display: block; font-size: 11px; color: var(--paper-muted); margin-top: 4px; }
.memo-row .ask { color: var(--lt-conditional-text); font-weight: 500; }
.memo-who { margin-top: 16px; padding: 10px 14px; border-radius: 6px; background: var(--lt-conditional-wash); font-size: 13px; color: var(--lt-conditional-text); }
.memo-who b { color: var(--paper-ink); }
@media (max-width: 900px) { .answers { grid-template-columns: 1fr; } .memo-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .memo-row { grid-template-columns: 1fr; } .tblock { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ diagrams: nodes and arrows drawn in HTML */
.diagram { position: relative; }
.diagram-title { font-size: clamp(18px, 2vw, 22px); font-weight: 400; letter-spacing: -.01em; margin-bottom: 20px; max-width: 46ch; text-wrap: balance; }
.diagram-cap { margin-top: 18px; font-size: 13px; color: var(--fg-3); max-width: 70ch; line-height: 1.5; }
.node { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); min-width: 0; }
.node b { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.node span { font-size: 12.5px; color: var(--fg-2); line-height: 1.4; }
.node .kind { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 4px; }
.node.signal { border-color: var(--signal); background: color-mix(in srgb, var(--signal-deep) 22%, var(--bg-2)); }
.node.signal .kind { color: var(--signal); }
.node.check { background: var(--bg-3); border-color: var(--bg-3); }
.node.person { border-style: dashed; background: transparent; }
.node.band { background: rgba(255, 255, 255, .06); border-color: transparent; padding: 9px 14px; }
.node.band b { font-weight: 500; font-size: 13.5px; }
.node.band .lk { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; background: var(--fg); color: var(--bg); font: 600 11px/1 var(--sans); margin-right: 8px; vertical-align: middle; }
/* the pain badge on a node */
.node .pain { position: absolute; top: -10px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); color: #14181d; font: 600 11.5px/22px var(--sans); text-align: center; }
/* the arrows between nodes in a row: a line and a head in the gap after a node */
.row { display: grid; gap: 34px; align-items: stretch; }
.row.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row > .node:not(:last-child)::after, .row > .node:not(:last-child)::before { content: ""; position: absolute; top: 50%; left: 100%; pointer-events: none; }
.row > .node:not(:last-child)::after { width: 34px; height: 1px; background: var(--line-2); }
.row > .node:not(:last-child)::before { width: 7px; height: 7px; margin-left: 26px; margin-top: -4px; border-right: 1px solid var(--fg-2); border-bottom: 1px solid var(--fg-2); transform: rotate(-45deg); }
.row.rtl > .node:not(:first-child)::after, .row.rtl > .node:not(:first-child)::before { content: ""; position: absolute; top: 50%; right: 100%; left: auto; }
.row.rtl > .node::after, .row.rtl > .node::before { content: none; }
.row.rtl > .node:not(:first-child)::after { width: 34px; height: 1px; background: var(--line-2); }
.row.rtl > .node:not(:first-child)::before { width: 7px; height: 7px; margin-right: 26px; margin-top: -4px; border-left: 1px solid var(--fg-2); border-top: 1px solid var(--fg-2); transform: rotate(-45deg); }
/* a vertical arrow between two rows, under a given column */
.down { display: grid; gap: 34px; height: 34px; }
.down.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.down.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.down > i { position: relative; display: block; }
.down > i.on::after { content: ""; position: absolute; left: 50%; top: 0; height: 100%; width: 1px; background: var(--line-2); }
.down > i.on::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; margin-left: -4px; border-right: 1px solid var(--fg-2); border-bottom: 1px solid var(--fg-2); transform: rotate(45deg); }
/* the marker row under a track: a diamond with a note */
.marks { display: grid; gap: 34px; margin-top: 14px; }
.marks.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mark { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12.5px; color: var(--fg-2); }
.mark .dia { width: 14px; height: 14px; transform: rotate(45deg); border-radius: 2px; background: var(--fg-3); }
.mark.late .dia { background: var(--st-fail); }
.mark.early .dia { background: var(--signal); box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 22%, transparent); }
.mark.early { color: var(--fg); }
.gate-row { margin-bottom: 36px; }
.gate-row .row-label { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.gate-row .node.signal b { color: var(--fg); }
/* a loop note: dashed, returning */
.loop { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 12.5px; color: var(--fg-2); }
.loop::before { content: ""; flex: 0 0 56px; height: 1px; border-top: 1px dashed var(--fg-3); }
.loop .ret { font-family: var(--mono); color: var(--fg-3); }
/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 12.5px; color: var(--fg-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; width: 26px; height: 16px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--bg-2); }
.legend i.signal { border-color: var(--signal); background: color-mix(in srgb, var(--signal-deep) 22%, var(--bg-2)); }
.legend i.check { background: var(--bg-3); border-color: var(--bg-3); }
.legend i.person { border-style: dashed; background: transparent; }
.legend i.amber { width: 16px; height: 16px; border-radius: 50%; background: var(--amber); border: 0; }
/* three columns: in, inside, out */
.io { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap: 48px; align-items: start; }
.io .col { display: flex; flex-direction: column; gap: 10px; }
.io .col-title { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 6px; }
.io .inside { padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; display: flex; flex-direction: column; gap: 8px; }
.io .inside .gap { height: 6px; }
.io .col.in .node::after, .io .col.in .node::before, .io .col.mid .inside::after, .io .col.mid .inside::before { content: ""; position: absolute; top: 50%; left: 100%; pointer-events: none; }
.io .col.in .node, .io .col.mid .inside { position: relative; }
.io .col.in .node::after, .io .col.mid .inside::after { width: 48px; height: 1px; background: var(--line-2); }
.io .col.in .node::before, .io .col.mid .inside::before { width: 7px; height: 7px; margin-left: 40px; margin-top: -4px; border-right: 1px solid var(--fg-2); border-bottom: 1px solid var(--fg-2); transform: rotate(-45deg); }
@media (max-width: 900px) {
  .io { grid-template-columns: 1fr; gap: 28px; }
  .io .col.in .node::after, .io .col.in .node::before, .io .col.mid .inside::after, .io .col.mid .inside::before { content: none; }
}
/* the logic grid: four across, three rows, snaking */
.logic { display: grid; gap: 34px; }
.logic .row { margin: 0; }
@media (max-width: 900px) {
  .row.five, .row.four, .row.three, .down.five, .down.four, .marks.five { grid-template-columns: 1fr 1fr; }
  .row > .node::after, .row > .node::before, .row.rtl > .node::after, .row.rtl > .node::before { content: none !important; }
  .down { display: none; }
  .row.rtl { direction: rtl; } .row.rtl > * { direction: ltr; }
}
@media (max-width: 560px) {
  .row.five, .row.four, .row.three, .marks.five { grid-template-columns: 1fr; gap: 14px; }
  .row.rtl { direction: ltr; }
  /* stacked, the marker row keeps only its diamond; the empty cells would be blank rows */
  .marks > i { display: none; }
  .marks .mark { flex-direction: row; text-align: left; }
}

/* who reads which layer, when: layers as rows, stages as columns, the memo's column lit */
.when { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.when > div { padding: 14px 10px; border-bottom: 1px solid var(--line); min-width: 0; font-size: 13px; }
.when .h { font: 600 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); padding-top: 16px; }
.when .lay { display: flex; gap: 10px; align-items: flex-start; }
.when .lay .lk { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg); color: var(--bg); font: 600 11.5px/22px var(--sans); text-align: center; }
.when .lay b { display: block; font-weight: 600; font-size: 13.5px; }
.when .lay span { color: var(--fg-2); font-size: 12.5px; }
.when .who { color: var(--fg-2); font-size: 12.5px; line-height: 1.4; }
.when .who b { display: block; color: var(--fg); font-weight: 500; font-size: 13px; }
.when .who::before { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--fg-3); margin-bottom: 6px; }
.when .memo-col { background: color-mix(in srgb, var(--signal-deep) 18%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--signal) 50%, transparent), inset -1px 0 0 color-mix(in srgb, var(--signal) 50%, transparent); }
.when .memo-col.h { color: var(--signal); }
.when .memo-col .who::before { background: var(--signal); }
.when .memo-col .who b { color: var(--fg); }
@media (max-width: 900px) {
  .when { grid-template-columns: 1fr; border-top: 0; }
  .when .h { display: none; }
  .when > div { border-bottom: 0; padding: 6px 0; }
  .when .lay { padding-top: 18px; border-top: 1px solid var(--line-2); }
  .when .who { padding-left: 32px; display: flex; gap: 8px; align-items: baseline; }
  .when .who::before { margin: 0; flex: 0 0 9px; }
  .when .who b { display: inline; }
  .when .who b::after { content: " · "; color: var(--fg-3); }
  .when .memo-col { box-shadow: none; background: transparent; }
  .when .memo-col .who b { color: var(--signal); }
}

/* a flow: numbered steps down a line, each with the screen it lands on */
.flows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.flow { display: flex; flex-direction: column; gap: 0; }
.flow .flow-head { padding-bottom: 16px; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; }
.flow .flow-head h3 { font-size: 22px; font-weight: 400; letter-spacing: -.015em; }
.flow .flow-head p { color: var(--fg-2); font-size: 13.5px; margin-top: 6px; }
.flow .flow-head .text-link { min-height: 0; margin-top: 10px; font-size: 13.5px; color: var(--signal); }
.flow ol { list-style: none; margin: 0; padding: 0; }
.flow li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.flow li::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.flow li:first-child::before { top: 50%; } .flow li:last-child::before { bottom: 50%; }
.flow .sn { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-2); font: 600 11.5px/26px var(--sans); text-align: center; }
.flow li.key .sn { background: var(--signal-deep); border-color: var(--signal-deep); color: #fff; }
.flow .st { font-size: 14px; line-height: 1.45; }
.flow .st b { font-weight: 600; }
.flow .scr { display: block; font: 500 11px/1.5 var(--mono); color: var(--fg-3); margin-top: 3px; letter-spacing: .02em; }
@media (max-width: 900px) { .flows { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ a tool mock: the four steps as the tool shows them */
.steps-strip { display: flex; align-items: center; gap: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); flex-wrap: wrap; }
.steps-strip span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font: 500 13px/1 var(--sans); color: var(--fg-2); }
.steps-strip span i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 11px/18px var(--sans); text-align: center; font-style: normal; }
.steps-strip span.on { color: var(--fg); }
.steps-strip span.on i { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.steps-strip .ln { flex: 1 1 24px; height: 1px; background: var(--line-2); min-width: 16px; }

/* ------------------------------------------------------------------ the close and the footer */
.close { text-align: left; }
.close h2 { font-size: clamp(34px, 5.4vw, 72px); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.close .sub { margin: 20px 0 32px; color: var(--fg-2); max-width: 48ch; font-size: 16px; }
.foot { border-top: 1px solid var(--line); padding: 36px 0 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; font-size: 12.5px; color: var(--fg-3); line-height: 1.6; }
.foot a { color: var(--fg-2); }
.foot a:hover { color: var(--fg); }
.foot .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot p { max-width: 80ch; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ motion
   One authored moment: the hero's massing builds itself the way the tool derives it, the lot first, then the
   dashed outright envelope, then the proposed mass rising floor by floor, then the labels. Everything else is
   feedback: sections arrive with a short fade, lists arrive as lists, the gate's early diamond rings once. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* the build: clip-path from the ground up, so the mass rises through its floor lines and the ground stays put */
/* site.js adds .play when the page is first seen (a tab opened in the background would otherwise build unseen);
   without script the drawing simply stands built */
.hero-iso.play .iso-street, .hero-iso.play .iso-lot, .hero-iso.play .iso-env { animation: iso-ground .4s ease-out both; }
.hero-iso.play .iso-outright, .hero-iso.play .iso-outright-edges { animation: iso-rise .45s var(--ease-out) .35s both; }
.hero-iso.play .iso-proposed, .hero-iso.play .iso-floors { animation: iso-rise .8s var(--ease-out) .7s both; }
.hero-iso.play .iso-label, .hero-iso.play .iso-street-name, .hero-iso.play .iso-lot-name { animation: iso-label .3s ease-out 1.35s both; }
@keyframes iso-ground { from { opacity: 0; } to { opacity: 1; } }
@keyframes iso-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-2% 0 0 0); } }
@keyframes iso-label { from { opacity: 0; } to { opacity: 1; } }

/* sections arrive: a short fade, no travel; a list's items follow one another by 50ms, four deep at most */
.js .reveal { opacity: 0; transition: opacity .4s ease-out; }
.js .reveal.in { opacity: 1; }
.js .items.reveal > .item, .js .stats.reveal > li, .js .flows.reveal > .flow { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); }
.js .items.reveal.in > .item, .js .stats.reveal.in > li, .js .flows.reveal.in > .flow { opacity: 1; transform: none; }
.js .reveal.in > :nth-child(2) { transition-delay: .05s; } .js .reveal.in > :nth-child(3) { transition-delay: .1s; } .js .reveal.in > :nth-child(n + 4) { transition-delay: .15s; }
/* the first reliable answer, arriving early: the diamond rings once when the gate comes into view */
.js .reveal.in .mark.early .dia { animation: ring .9s ease-out .35s 1 both; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.js .reveal.in .mark.early .dia { box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 22%, transparent); }

@media (prefers-reduced-motion: reduce) {
  /* the drawing is shown built; only the labels fade in, so the hero still reads as arriving */
  .hero-iso.play .iso-street, .hero-iso.play .iso-lot, .hero-iso.play .iso-env, .hero-iso.play .iso-outright, .hero-iso.play .iso-outright-edges, .hero-iso.play .iso-proposed, .hero-iso.play .iso-floors { animation: none; }
  .hero-iso.play .iso-label, .hero-iso.play .iso-street-name, .hero-iso.play .iso-lot-name { animation-delay: .2s; animation-duration: .4s; }
  .js .reveal, .js .items.reveal > .item, .js .stats.reveal > li, .js .flows.reveal > .flow { transform: none; transition-duration: .25s; transition-delay: 0s !important; }
  .js .reveal.in .mark.early .dia { animation: none; }
  .arrow { transition: none; }
}

/* ------------------------------------------------------------------ print: light, the content only */
@media print {
  /* the selector matches the dark block's specificity, so a dark-mode browser prints light too */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) { color-scheme: light; --bg: #fff; --bg-2: #fff; --bg-3: #f0f2f5; --fg: #000; --fg-2: #333; --fg-3: #555; --line: #ccc; --line-2: #999; --signal: #2a6fb8; --signal-deep: #2a6fb8; }
  .nav, .hero-foot, .btn, .skip { display: none !important; }
  .hero { min-height: 0; padding-top: 20px; }
  .paper { box-shadow: none; border: 1px solid #ccc; }
  .js .reveal { opacity: 1; transform: none; }
}