/* Gnomon · the stylesheet — the building on an architect's sheet: a cool silver-gelatin grey ground,
   black ink, hairlines and hatch, Italiana for the name and the mottos (never under 48px), Mulish small
   and widely spaced. The elevation is ink only: shade is hatch, sunlit glass one step paler than the
   ground. The one colour is the sun, a pale warm light, and it appears only in the sun study: the plan's
   floor, the year pad and the three pre-drawn studies. */
@font-face { font-family: "GnItaliana"; src: url("/assets/fonts/specimen/italiana-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GnMulish"; src: url("/assets/fonts/specimen/mulish-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "GnMulish"; src: url("/assets/fonts/specimen/mulish-var-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

body.spec-gnomon { margin: 0; background: #B5BBC1; --bar-h: 46px; }
@media (max-width: 720px) { body.spec-gnomon { --bar-h: 44px; } }

.gn-site, .gn-sheet {
  --gn-bg: #B5BBC1; --gn-ink: #0E0F10; --gn-support: #3A3F44; --gn-light: #FFF1C9; --gn-floor: #9AA1A8; --gn-lift: #C9CED3; --gn-glass: #BFC5CA;
  --gn-disp: "GnItaliana", "Didot", "Bodoni 72", "Times New Roman", serif;
  --gn-text: "GnMulish", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --gn-ease: cubic-bezier(.2, .7, .1, 1);
  --gn-u: clamp(8px, .45rem + .38vw, 12px);
  --gn-t-mast: clamp(4.5rem, 2.3625rem + 8.762vw, 10.25rem);
  --gn-t-h1: clamp(3rem, 2.721rem + 1.143vw, 3.75rem);
  --gn-t-h2: clamp(3rem, 2.257rem + 3.048vw, 5rem);
  --gn-t-lede: clamp(1.0625rem, 1.016rem + .19vw, 1.1875rem);
  --gn-t-body: clamp(.96875rem, .946rem + .095vw, 1.03125rem);
  --gn-t-read: clamp(.8125rem, .79rem + .095vw, .875rem);
  --gn-t-label: clamp(.65625rem, .633rem + .095vw, .71875rem);
  --gn-gl: 16px; --gn-gr: 16px; --gn-cg: 16px; --gn-cols: 4;
  --gn-rule: rgb(58 63 68 / .55);
  color: var(--gn-ink); background: var(--gn-bg);
  font: 380 var(--gn-t-body)/1.72 var(--gn-text); letter-spacing: .015em;
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased;
}
.gn-site { --gn-nav-h: 48px; position: relative; }
@media (min-width: 701px) { .gn-site, .gn-sheet { --gn-gl: 32px; --gn-gr: 32px; --gn-cg: 20px; --gn-cols: 8; } }
@media (min-width: 1024px) { .gn-site, .gn-sheet { --gn-gl: 96px; --gn-gr: 48px; --gn-cg: 24px; --gn-cols: 12; } }

.gn-site *, .gn-sheet * { box-sizing: border-box; }
:where(.gn-site, .gn-sheet) :where(p, h1, h2, ul, ol, dl, dd, figure, fieldset) { margin: 0; }
:where(.gn-site, .gn-sheet) :where(ul, ol) { padding: 0; list-style: none; }
:where(.gn-site, .gn-sheet) :where(a) { color: inherit; text-decoration: none; }
:where(.gn-site) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.gn-site, .gn-sheet) :where(button, input, textarea) { font: inherit; color: inherit; letter-spacing: inherit; border-radius: 0; }
.gn-site :focus-visible, .gn-sheet :focus-visible { outline: 1px solid var(--gn-ink); outline-offset: 3px; }
.gn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gn-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── type ─────────────────────────────────────────────────────────────────────────────────────── */
.gn-lab, .gn-label, .gn-nav, .gn-ln, .gn-hint, .gn-tag, .gn-scale, .gn-open, .gn-sheet button, .gn-ctl label, .gn-form label, .gn-form legend, .gn-reg th, .gn-send {
  font: 600 var(--gn-t-label)/1.4 var(--gn-text); letter-spacing: .26em; text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}
.gn-lede { font: 300 var(--gn-t-lede)/1.62 var(--gn-text); letter-spacing: .01em; }
.gn-copy { max-inline-size: 34em; text-wrap: pretty; }
.gn-copy p + p { margin-top: 1.2em; }
.gn-motto { font: 400 var(--gn-t-h2)/1.04 var(--gn-disp); letter-spacing: .01em; max-inline-size: 13em; text-wrap: balance; margin-bottom: calc(4 * var(--gn-u)); }
.gn-lab { display: flex; justify-content: space-between; gap: 16px; margin-bottom: calc(3 * var(--gn-u)); }
.gn-site figcaption, .gn-calc, .gn-note, .gn-cap, .gn-pad figcaption {
  font: italic 300 var(--gn-t-read)/1.55 var(--gn-text); letter-spacing: .01em; color: var(--gn-support);
}
.gn-calc { color: var(--gn-ink); font-variant-numeric: tabular-nums lining-nums; }

/* links: a 0.5px underline, and a 1px one drawn from the left on hover */
.gn-ln { position: relative; display: inline-block; padding-bottom: 4px; }
.gn-ln::before, .gn-ln::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 0 100%; }
.gn-ln::before { transform: scaleY(.5); }
.gn-ln::after { transform: scaleX(0); transition: transform .24s var(--gn-ease); }
.gn-ln:is(:hover, :focus-visible)::after { transform: none; }

/* ── the nav, under the Ozwebnet bar ────────────────────────────────────────────────────────────── */
.gn-nav {
  position: sticky; top: var(--bar-h); z-index: 810; height: var(--gn-nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding-inline: var(--gn-gl) var(--gn-gr); background: var(--gn-bg); border-bottom: 1px solid var(--gn-ink);
}
.gn-brand { justify-self: start; letter-spacing: .34em; }
.gn-now { display: none; white-space: nowrap; }
.gn-levels { display: none; justify-self: end; text-transform: uppercase; letter-spacing: .22em; background: none; border: 1px solid var(--gn-ink); height: 32px; padding: 0 12px; cursor: pointer; }
.gn-levels[aria-expanded="true"] { background: var(--gn-ink); color: var(--gn-bg); }
.gn-write { justify-self: end; }
.gn-lift { display: flex; gap: 4px; }
.gn-lift li { position: relative; }
.gn-lift a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; letter-spacing: .04em; transition: border-color .18s; }
.gn-lift a:hover { border-color: var(--gn-ink); }
.gn-lift a[aria-current] { background: var(--gn-ink); color: var(--gn-bg); }
.gn-lift .gn-cn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gn-lift a::after {
  content: attr(data-name) / ""; position: absolute; top: calc(100% + 9px); left: 50%; translate: -50% 0; white-space: nowrap;
  padding: 7px 12px; background: var(--gn-bg); border: 1px solid var(--gn-ink); border-top: 0; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.gn-lift a:is(:hover, :focus-visible)::after { opacity: 1; }
@media (max-width: 1023px) {
  .gn-nav { grid-template-columns: auto 1fr auto; }
  .gn-lift { display: none; }
  .gn-js .gn-now { display: block; justify-self: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .gn-js .gn-levels { display: block; }
  .gn-js .gn-write { display: none; }
  .gn-nav.gn-open .gn-lift {
    display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--gn-bg);
    border-bottom: 1px solid var(--gn-ink); max-height: calc(100svh - var(--bar-h) - var(--gn-nav-h)); overflow-y: auto;
  }
  .gn-nav.gn-open .gn-lift a { display: flex; width: auto; height: 44px; justify-content: flex-start; padding-inline: var(--gn-gl); border: 0; border-top: 1px solid var(--gn-rule); letter-spacing: .26em; }
  .gn-nav.gn-open .gn-lift .gn-cn { position: static; width: auto; height: auto; clip-path: none; }
  .gn-nav.gn-open .gn-lift a::after { display: none; }
  .gn-lift .gn-cell { min-width: 2.6em; }
}

/* ── the lift rail (1024 and up) ────────────────────────────────────────────────────────────────── */
.gn-rail { display: none; }
@media (min-width: 1024px) {
  .gn-rail { display: grid; justify-items: start; gap: 14px; position: fixed; left: 18px; top: 50%; translate: 0 -46%; z-index: 700; pointer-events: none; }
  .gn-site.gn-sheet-on .gn-rail { z-index: 830; }
  .gn-rnum { position: relative; }
  .gn-rbox { position: relative; display: block; width: 1.3em; height: 1.05em; overflow: hidden; font: 400 3rem/1.05 var(--gn-disp); text-align: center; letter-spacing: .02em; }
  .gn-rbox span { position: absolute; inset: 0; }
  .gn-dir { position: absolute; left: 50%; width: 1px; height: 8px; background: var(--gn-ink); opacity: 0; transition: opacity .32s; }
  .gn-dir::before { content: ""; position: absolute; left: -3px; width: 5px; height: 5px; border: solid var(--gn-ink); border-width: 1px 0 0 1px; }
  .gn-rail[data-dir="up"] .gn-dir { opacity: 1; top: -12px; }
  .gn-rail[data-dir="up"] .gn-dir::before { top: 0; rotate: 45deg; }
  .gn-rail[data-dir="down"] .gn-dir { opacity: 1; bottom: -12px; }
  .gn-rail[data-dir="down"] .gn-dir::before { bottom: 0; rotate: 225deg; }
  .gn-shaft { position: relative; width: 1px; height: 240px; margin-left: 30px; background: var(--gn-ink); }
  .gn-shaft i { position: absolute; left: 0; width: 5px; height: 1px; background: var(--gn-ink); transition: width .32s var(--gn-ease); }
  .gn-shaft i.gn-on { width: 12px; }
  .gn-rname { writing-mode: vertical-rl; rotate: 180deg; margin-left: 24px; font: 600 var(--gn-t-label)/1 var(--gn-text); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
}

/* ── plates: floors that slide up and settle on the one below ───────────────────────────────────── */
.gn-plate {
  position: relative; background: var(--gn-bg); min-height: calc(100svh - var(--bar-h) - var(--gn-nav-h));
  padding: calc(8 * var(--gn-u)) var(--gn-gr) calc(12 * var(--gn-u)) var(--gn-gl);
  scroll-margin-top: calc(var(--bar-h) + var(--gn-nav-h));
}
.gn-plate:not(.gn-hero)::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 1px; background: var(--gn-ink); transform-origin: 0 50%; }
.gn-js .gn-plate { position: sticky; top: var(--gn-top, calc(var(--bar-h) + var(--gn-nav-h))); }
.gn-js .gn-plate:not(.gn-hero) { box-shadow: 0 -18px 24px -12px rgb(14 15 16 / .2); }
.gn-grid { display: grid; grid-template-columns: repeat(var(--gn-cols), minmax(0, 1fr)); column-gap: var(--gn-cg); align-items: start; }
.gn-grid > * { grid-column: 1 / -1; }
.gn-head { grid-column: 1 / -1; }

/* ── G: the hero, a drawing sheet. The north elevation at true scale takes about 60% of the sheet, the
   notes column holds the h1 and the sub-line, and GNOMON sits in the title block in the lower corner.
   On load the shadow sweeps down the façade and the sun comes onto the glass floor by floor. ─────── */
@property --gn-sw { syntax: "<number>"; inherits: true; initial-value: 0; }
.gn-hero {
  --gn-m: min(12px, calc((100vw - 32px - 56px) / 24)); --gn-tw: 44px; --gn-tg: 12px; --gn-sw: var(--gn-sw-end, 0);
  isolation: isolate; display: flex; flex-direction: column; padding-top: calc(2 * var(--gn-u)); padding-bottom: calc(6 * var(--gn-u));
  transition: --gn-sw 1.8s cubic-bezier(.55, .05, .3, 1) .15s;
}
.gn-js .gn-hero:not(.gn-drawn) { --gn-sw: 34; transition: none; }
.gn-notes { display: contents; }
.gn-label { order: 1; margin-bottom: 10px; }
.gn-h1 { order: 3; font: 400 3rem/1.08 var(--gn-disp); letter-spacing: 0; margin: 0 0 16px; text-wrap: balance; }
.gn-h1 span { display: block; }
.gn-stack { order: 5; }
.gn-hint { order: 6; }
.gn-tb { order: 7; margin-top: 18px; }
.gn-sub { order: 8; margin-top: 28px; font: 300 var(--gn-t-lede)/1.62 var(--gn-text); max-inline-size: 36em; text-wrap: pretty; }
.gn-links { order: 9; display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; }
.gn-nb { order: 10; margin-top: 28px; max-width: 34em; }
.gn-nb .gn-lab { margin-bottom: 6px; }
.gn-arr::after { content: "↓" / ""; }
.gn-park, .gn-dim, .gn-fl { display: none; }
@media (max-width: 380px) { .gn-h1 span { display: inline; } }
@media (max-width: 720px) {
  .gn-hero { padding-top: 12px; }
  .gn-hint { position: sticky; bottom: 0; z-index: 4; margin: 10px calc(-1 * var(--gn-gr)) 0 calc(-1 * var(--gn-gl)); padding: 11px var(--gn-gr) 11px var(--gn-gl); background: var(--gn-bg); border-top: 1px solid var(--gn-ink); }
}
@media (max-width: 720px) and (max-height: 640px) { .gn-label { order: 12; margin: 20px 0 0; } .gn-h1 { margin-bottom: 10px; } }

/* the title block: the name, what the drawing is, when its sun is drawn for, and a 5 m scale */
.gn-tb { border: 1px solid var(--gn-ink); background: var(--gn-bg); }
.gn-mast { font: 400 3rem/.9 var(--gn-disp); letter-spacing: .06em; text-transform: uppercase; padding: 14px 14px 9px; white-space: nowrap; }
.gn-tbd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--gn-ink); }
.gn-tbd > div { min-width: 0; padding: 7px 12px 9px 14px; }
.gn-tbd > div:nth-child(n+3) { border-top: 1px solid var(--gn-rule); }
.gn-tbd > div:nth-child(odd) { border-right: 1px solid var(--gn-rule); }
.gn-tbd dt { font: 600 var(--gn-t-label)/1.4 var(--gn-text); letter-spacing: .22em; text-transform: uppercase; color: var(--gn-support); }
.gn-tbd dd { margin: 2px 0 0; font: 450 var(--gn-t-read)/1.4 var(--gn-text); letter-spacing: .02em; font-variant-numeric: tabular-nums lining-nums; }
.gn-scale { display: flex; position: relative; justify-content: space-between; width: calc(5 * var(--gn-m)); margin: 13px 0 1px; padding-top: 5px; border-top: 1px solid var(--gn-ink); letter-spacing: .1em; }
.gn-scale span { position: relative; width: 0; display: flex; justify-content: center; white-space: nowrap; }
.gn-scale span::before { content: ""; position: absolute; top: -10px; width: 1px; height: 7px; background: var(--gn-ink); }
.gn-scale span:last-child { justify-content: flex-start; } .gn-scale span:last-child::before { left: 0; }
/* phones: the title block opens up. The name heads the sheet, above the h1, so it is in the first screen
   even on a short phone; what the drawing is and its scale follow the stack in their own box. */
@media (max-width: 720px) {
  .gn-tb { display: contents; }
  .gn-mast { order: 2; font-size: 3rem; letter-spacing: .14em; padding: 2px 0 10px; margin: 0 0 16px; border-bottom: 1px solid var(--gn-ink); }
  .gn-tbd { order: 7; margin-top: 18px; border: 1px solid var(--gn-ink); background: var(--gn-bg); }
}
@media (max-width: 720px) and (max-height: 640px) { .gn-mast { padding-bottom: 8px; margin-bottom: 12px; } }

/* the stack: a roof, eight floors and the ground, drawn in metres at --gn-m px per metre */
.gn-stack { position: relative; margin: 0; width: calc(var(--gn-tw) + var(--gn-tg) + 24 * var(--gn-m)); max-width: 100%; }
.gn-floors { display: flex; flex-direction: column-reverse; }
.gn-lv { height: calc(var(--s) * var(--gn-m)); }
.gn-part { display: flex; align-items: flex-end; }
.gn-roof { height: calc(1.5 * var(--gn-m)); }
.gn-ground { height: calc(4.5 * var(--gn-m)); }
.gn-floor { display: flex; align-items: flex-end; height: 100%; cursor: pointer; outline: none !important; -webkit-tap-highlight-color: transparent; }
.gn-tag { position: relative; z-index: 3; flex: none; width: var(--gn-tw); margin-right: var(--gn-tg); padding-bottom: 5px; text-align: right; line-height: 1; letter-spacing: .12em; font-weight: 400; transition: font-weight .18s; white-space: nowrap; }
.gn-tag > * { background: var(--gn-bg); }
.gn-tag b { font-weight: inherit; }
.gn-tag span { display: none; }
.gn-slab { position: relative; display: block; flex: none; width: calc(24 * var(--gn-m)); height: 100%; transition: translate .18s var(--gn-ease), background-color .18s; }
.gn-slab svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
/* the glass in sun: below each balcony's hatched shade, above the sweeping shadow of the trees. Ink only:
   sunlit glass is a step paler than the ground, the shade is hatch (the sun's colour is kept for the plan) */
.gn-lv .gn-slab::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc((3 - var(--gn-sh, 1.23)) * var(--gn-m)); background: var(--gn-glass);
  clip-path: inset(0 0 clamp(0px, calc((var(--gn-sw) - var(--z, 0)) * var(--gn-m)), 100%) 0);
}
.gn-night .gn-slab::before { display: none; }
.gn-sweep {
  position: absolute; z-index: 1; left: calc(var(--gn-tw) + var(--gn-tg)); bottom: 0; width: calc(24 * var(--gn-m)); max-height: 100%;
  height: calc(max(0, var(--gn-sw)) * var(--gn-m)); border-top: 1px solid var(--gn-ink); pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgb(14 15 16 / .34) 0 1px, transparent 1px 6px);
}
.gn-night .gn-sweep { display: none; }
:is(.gn-stack, .gn-fd, .gn-park) path { fill: none; stroke: var(--gn-ink); vector-effect: non-scaling-stroke; }
:is(.gn-stack, .gn-fd, .gn-park) .gn-e05 { stroke-width: .5; stroke: var(--gn-support); }
:is(.gn-stack, .gn-fd) .gn-e75 { stroke-width: .75; }
:is(.gn-stack, .gn-fd) .gn-e1 { stroke-width: 1; }
:is(.gn-stack, .gn-fd) .gn-e15 { stroke-width: 2; }
.gn-fd .gn-sh { fill: url(#gn-hatch); }
@media (max-width: 720px) { .gn-fd .gn-sh { fill: url(#gn-hatch-m); } }
.gn-edge { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gn-ink); transition: height .18s; }
/* the park's trees, a line 14 m high: over the façade in the stack; across the whole drawing on the sheet */
.gn-canopy { position: absolute; z-index: 2; left: calc(var(--gn-tw) + var(--gn-tg)); top: calc(19 * var(--gn-m)); width: calc(24 * var(--gn-m)); height: calc(15 * var(--gn-m)); pointer-events: none; }
.gn-canopy svg, .gn-park svg { display: block; width: 100%; height: 100%; overflow: hidden; }
:is(.gn-canopy, .gn-park) .gn-cn { stroke: var(--gn-support); stroke-width: .75; }
:is(.gn-canopy, .gn-park) .gn-trunk { stroke-width: .6; }
.gn-floor:is(:hover, :focus-visible, .gn-on) .gn-slab { translate: 0 -4px; background: var(--gn-lift); }
.gn-floor:is(:hover, :focus-visible, .gn-on) .gn-slab::before { background: var(--gn-lift); }
.gn-floor:is(:hover, :focus-visible, .gn-on) .gn-edge { height: 3px; }
.gn-floor:is(:hover, :focus-visible, .gn-on) .gn-tag { font-weight: 700; }
.gn-floor:focus-visible .gn-slab { outline: 1px solid var(--gn-ink); outline-offset: 3px; }
.gn-hint span { font-weight: 400; }

/* the parted building, while a floor is open (the page is covered by the sheet by then). The parts keep
   their places; the hinge moves their snapshots (see "the hinge" below). */
.gn-parted :is(.gn-up, .gn-down, .gn-roof, .gn-ground, .gn-canopy, .gn-sweep) { opacity: 0; }
.gn-hero:has(.gn-parted) .gn-park { opacity: 0; }

@media (min-width: 721px) {
  .gn-hero { --gn-m: min(16px, calc((100vw - 64px - 76px) / 24)); --gn-tw: 56px; --gn-tg: 16px; }
  .gn-tag { width: auto; min-width: var(--gn-tw); }
  .gn-mast { font-size: 3.5rem; }
  .gn-tb { width: calc(var(--gn-tw) + var(--gn-tg) + 24 * var(--gn-m)); max-width: 100%; }
}
/* 801–1179, and short desktops: the hero in normal flow, the h1 on top, the sub-line beside the stack, the title block under it */
@media (min-width: 801px) and (max-width: 1179px), (min-width: 1180px) and (max-height: 639px), (min-width: 1180px) and (max-width: 1279px) and (max-height: 669px) {
  .gn-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-content: start; --gn-m: 16px; --gn-tw: 72px; }
  .gn-label { grid-column: 1 / -1; grid-row: 1; }
  .gn-h1 { grid-column: 1 / -1; grid-row: 2; }
  .gn-tag span { display: inline; }
  .gn-sub { grid-column: 1; grid-row: 3; align-self: start; margin-top: 0; }
  .gn-links { grid-column: 1; grid-row: 4; align-self: start; }
  .gn-nb { grid-column: 1; grid-row: 5; align-self: start; }
  .gn-stack { grid-column: 2; grid-row: 3 / span 4; }
  .gn-hint { grid-column: 2; grid-row: 7; margin-top: 12px; }
  .gn-tb { grid-column: 2; grid-row: 8; }
  .gn-arr::after { content: "→" / ""; }
}
@media (min-width: 1180px) and (max-height: 639px), (min-width: 1180px) and (max-width: 1279px) and (max-height: 669px) { .gn-hero { --gn-m: 15px; } }

/* 1180 and up, tall enough: the sheet. A frame; the drawing on the left, its rows the building's storeys;
   the notes column on the right, with the title block in the lower corner. Down to 640px of height (670px
   under 1280 wide), so a 1366 × 650 laptop window and the share image show the whole sheet */
@media (min-width: 1280px) and (min-height: 640px), (min-width: 1180px) and (min-height: 670px) {
  .gn-hero {
    --gn-m: clamp(12px, calc((100svh - var(--bar-h) - var(--gn-nav-h) - 132px) / 34), 24px); --gn-tw: 72px; --gn-tg: 16px; --gn-nw: clamp(410px, 29vw, 480px);
    display: grid; align-content: center; padding-block: 16px;
    grid-template-columns: minmax(24px, 1fr) var(--gn-tw) var(--gn-tg) calc(24 * var(--gn-m)) calc(6 * var(--gn-m)) var(--gn-nw);
    grid-template-rows: 32px calc(1 * var(--gn-m)) calc(.5 * var(--gn-m)) repeat(2, calc(3.8 * var(--gn-m))) repeat(6, calc(3.4 * var(--gn-m))) calc(4.5 * var(--gn-m)) 64px;
  }
  .gn-hero::before { content: ""; grid-column: 1 / -1; grid-row: 1 / -1; border: 1px solid var(--gn-ink); pointer-events: none; }
  .gn-hero > * { min-width: 0; }
  .gn-tag span { display: inline; }
  .gn-label { grid-column: 1 / 6; grid-row: 1; align-self: center; margin: 0; padding-left: 24px; }
  .gn-notes > * { order: 0; }
  .gn-notes { grid-column: 6; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px 20px 0 28px; border-left: 1px solid var(--gn-ink); }
  .gn-h1 { margin: 0; font-size: min(3.75rem, max(3rem, calc((var(--gn-nw) - 50px) / 7.5))); line-height: 1.08; white-space: nowrap; }
  .gn-sub { margin-top: calc(2.5 * var(--gn-u)); font-size: clamp(1rem, calc(.85 * var(--gn-m)), var(--gn-t-lede)); }
  .gn-links { margin-top: calc(2.5 * var(--gn-u)); gap: 8px 22px; }
  .gn-arr::after { content: "←" / ""; }
  .gn-nb { margin-top: auto; padding-top: 20px; }
  .gn-tb { align-self: stretch; width: auto; max-width: none; margin: 18px -20px 0 -28px; border-width: 1px 0 0; }
  .gn-mast { font-size: min(3.5rem, calc((var(--gn-nw) - 40px) / 4.4)); padding: 16px 20px 11px 28px; }
  .gn-tbd > div { padding-left: 28px; }
  .gn-tbd > div:nth-child(even) { padding-left: 16px; }
  .gn-stack { grid-column: 2 / 5; grid-row: 2 / 13; width: auto; }
  .gn-canopy { display: none; }
  .gn-park { display: block; position: relative; z-index: 2; grid-column: 1 / 6; grid-row: 7 / 13; overflow: hidden; pointer-events: none; }
  .gn-park svg { position: absolute; right: 0; bottom: 0; width: calc(70 * var(--gn-m)); height: calc(15 * var(--gn-m)); }
  .gn-hint { grid-column: 2 / 6; grid-row: 13; align-self: center; justify-self: start; margin: 0; white-space: nowrap; letter-spacing: .18em; }
  /* the overall height, dimensioned on the east side */
  .gn-dim { display: block; position: relative; grid-column: 5; grid-row: 3 / 13; justify-self: start; margin-left: calc(2.5 * var(--gn-m)); width: 1px; background: var(--gn-ink); }
  .gn-dim::before, .gn-dim::after { content: ""; position: absolute; left: -5px; width: 11px; height: 1px; background: var(--gn-ink); }
  .gn-dim::before { top: 0; } .gn-dim::after { bottom: 0; }
  .gn-dim span { position: absolute; z-index: 3; left: 0; top: 38%; translate: -50% -50%; padding: 8px 0; writing-mode: vertical-rl; rotate: 180deg; background: var(--gn-bg); font: 600 var(--gn-t-label)/1 var(--gn-text); letter-spacing: .16em; white-space: nowrap; }
  /* the floor lines: from the frame to the façade, each storey's datum */
  .gn-fl { z-index: -1; display: block; grid-column: 1 / 4; grid-row: var(--r); align-self: end; margin-left: 24px; height: 1px; background: var(--gn-rule); pointer-events: none; transform-origin: 100% 0; transition: transform .8s var(--gn-ease) calc((12 - var(--r)) * 50ms), background-color .18s; }
  .gn-fl.gn-on { background: var(--gn-ink); }
  .gn-hero::after { content: ""; grid-row: 12; grid-column: 1 / 6; align-self: end; height: 2px; margin-bottom: -1px; background: var(--gn-ink); transform-origin: 100% 0; transition: transform .8s var(--gn-ease); }
  .gn-js .gn-hero:not(.gn-drawn) .gn-fl, .gn-js .gn-hero:not(.gn-drawn)::after { transform: scaleX(0); }
}
@media (min-width: 1280px) and (min-height: 640px) and (max-height: 820px), (min-width: 1180px) and (min-height: 670px) and (max-height: 820px) {
  .gn-notes { padding-top: 22px; }
  .gn-sub { font-size: 1rem; line-height: 1.55; }
  .gn-nb { padding-top: 14px; }
  .gn-tb { margin-top: 14px; }
  .gn-mast { font-size: 3rem; padding-block: 12px 8px; }
}
/* short sheets keep the whole title block in the frame: under 900px the notes give way; under 760px the notes
   column widens into the grey on the left (never past the label), the h1 keeps its 48px floor, the gaps close */
@media (min-width: 1280px) and (min-height: 640px) and (max-height: 899px), (min-width: 1180px) and (min-height: 670px) and (max-height: 899px) {
  .gn-nb { display: none; }
  .gn-links { margin-bottom: 14px; }
  .gn-tb { margin-top: auto; }
}
@media (min-width: 1280px) and (min-height: 640px) and (max-height: 760px), (min-width: 1180px) and (min-height: 670px) and (max-height: 760px) {
  .gn-hero { --gn-nw: clamp(410px, min(100vw - 794px, 100vw - 256px - 30 * var(--gn-m)), 480px); }
  .gn-h1 { font-size: 3rem; }
  .gn-notes { padding-top: 16px; }
  .gn-sub, .gn-links { margin-top: 16px; }
  .gn-links { margin-bottom: 12px; }
}

/* ── 01 The pin ─────────────────────────────────────────────────────────────────────────────────── */
.gn-p1 { display: flex; flex-direction: column; gap: 28px; }
.gn-p1-text { display: contents; }
.gn-p1 .gn-head { order: 1; } .gn-pin-ph { order: 2; } .gn-p1 .gn-copy { order: 3; } .gn-calc { order: 4; max-width: 30em; }
.gn-ph { position: relative; overflow: hidden; }
.gn-ph img { width: 100%; }
.gn-ph figcaption { padding-top: 8px; }
.gn-pin-ph img { aspect-ratio: 2 / 3; object-fit: cover; object-position: 35% 40%; }
@media (max-width: 720px) and (max-height: 640px) { .gn-pin-ph img { max-height: 70svh; } }
@media (min-width: 1024px) {
  .gn-p1 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gn-cg); padding-block: 0; padding-right: 0; }
  .gn-p1-text { display: flex; flex-direction: column; grid-column: 1 / 6; padding-block: calc(8 * var(--gn-u)) calc(12 * var(--gn-u)); }
  .gn-p1 .gn-copy { margin-top: calc(2 * var(--gn-u)); }
  .gn-calc { margin-top: auto; padding-top: calc(6 * var(--gn-u)); }
  .gn-pin-ph { grid-column: 7 / -1; align-self: stretch; }
  .gn-pin-ph img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .gn-pin-ph figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 18px 0 0; background: var(--gn-bg); }
}

/* ── 02 North ──────────────────────────────────────────────────────────────────────────────────── */
.gn-draw { display: block; width: 100%; height: auto; overflow: visible; }
.gn-draw path { fill: none; stroke: var(--gn-ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.gn-draw .gn-d05 { stroke: var(--gn-support); stroke-width: .5; }
.gn-draw .gn-d2 { stroke-width: 2; }
.gn-draw .gn-dot { stroke: var(--gn-ink); stroke-width: 4.5; stroke-linecap: round; }
.gn-draw .gn-dot-n { stroke-width: 8; }
.gn-draw .gn-dot2 { stroke: var(--gn-support); stroke-width: .75; stroke-dasharray: 1 3; stroke-linecap: butt; }
.gn-draw .gn-poche { fill: url(#gn-hatch-s); stroke: none; }
.gn-draw .gn-ray55 { stroke-width: 1.5; }
.gn-draw .gn-dnow { fill: var(--gn-support); fill-opacity: .82; stroke: none; }
.gn-dt { font-size: 13px; }
.gn-dt text { font-family: var(--gn-text); font-weight: 600; letter-spacing: .14em; text-anchor: middle; fill: var(--gn-ink); paint-order: stroke; stroke: var(--gn-bg); stroke-width: 5px; stroke-linejoin: round; }
@media (max-width: 720px) { .gn-sunpath .gn-dt { font-size: 15px; } .gn-dial .gn-dt { font-size: 20px; } }
.gn-dt .gn-dts { font-weight: 400; fill: var(--gn-support); }
.gn-dt [text-anchor="start"], .gn-plan [text-anchor="start"] { text-anchor: start; }
.gn-fig figcaption { margin-top: 14px; max-width: 34em; }
.gn-sun-fig { max-width: 420px; margin-block: 12px 36px; }
@media (min-width: 1024px) {
  .gn-p2 .gn-sun-fig { grid-column: 1 / 6; margin: 0; }
  .gn-p2 .gn-north-copy { grid-column: 7 / 12; padding-top: 12px; }
}

/* ── 03 The park, 05 Material: full-bleed studies with a ground-grey panel ──────────────────────── */
.gn-p3, .gn-p5 { padding-top: 0; }
.gn-park-ph, .gn-room-ph { margin: 0 calc(-1 * var(--gn-gr)) 0 calc(-1 * var(--gn-gl)); }
.gn-park-ph img, .gn-room-ph img { aspect-ratio: 3 / 4; object-fit: cover; }
.gn-park-ph figcaption, .gn-room-ph figcaption { padding: 8px var(--gn-gr) 0 var(--gn-gl); }
.gn-panel { position: relative; z-index: 2; background: var(--gn-bg); padding-top: calc(6 * var(--gn-u)); }
.gn-heights li { display: grid; grid-template-columns: 6.5em 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--gn-rule); }
.gn-heights li:last-child { border-bottom: 1px solid var(--gn-rule); }
.gn-heights b { font: 600 var(--gn-t-label)/2.1 var(--gn-text); letter-spacing: .2em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.gn-country { margin-top: 20px; font: italic 300 var(--gn-t-body)/1.6 var(--gn-text); }
.gn-colo li { padding: 12px 0; border-top: 1px solid var(--gn-rule); max-width: 30em; }
.gn-colo li:last-child { border-bottom: 1px solid var(--gn-rule); }
.gn-sill-ph { width: 200px; margin: 24px 0 0 auto; }
.gn-sill-ph img { aspect-ratio: 1; object-fit: cover; }
@media (min-width: 1024px) {
  .gn-p3, .gn-p5 { padding: 0 0 calc(12 * var(--gn-u)); }
  .gn-park-ph, .gn-room-ph { margin: 0 0 0 72px; }
  .gn-park-ph img { aspect-ratio: auto; height: 78svh; min-height: 460px; }
  .gn-park-ph figcaption, .gn-room-ph figcaption { position: absolute; right: 0; bottom: 0; padding: 10px var(--gn-gr) 0 18px; background: var(--gn-bg); }
  .gn-park-panel { width: min(33rem, 40vw); margin: -300px 0 0 var(--gn-gl); padding: calc(5 * var(--gn-u)) calc(4 * var(--gn-u)) calc(4 * var(--gn-u)); border-top: 1px solid var(--gn-ink); }
  .gn-p5 { padding-bottom: 0; }
  .gn-room-ph img { aspect-ratio: auto; height: 88svh; min-height: 560px; }
  .gn-mat-panel { position: absolute; left: calc(72px + 6 * var(--gn-u)); bottom: calc(6 * var(--gn-u)); width: 420px; padding: calc(4 * var(--gn-u)); border-top: 1px solid var(--gn-ink); }
  .gn-mat-panel .gn-motto { font-size: 3.5rem; }
  .gn-sill-ph { position: absolute; left: calc(100% + 3 * var(--gn-u)); bottom: 0; width: 360px; margin: 0; padding: 10px 10px 0; background: var(--gn-bg); border-top: 1px solid var(--gn-ink); }
  .gn-sill-ph figcaption { padding: 8px 0 10px; }
}
@media (min-width: 1024px) and (max-height: 760px) { .gn-sill-ph { width: 260px; } }

/* ── 04 The balcony ────────────────────────────────────────────────────────────────────────────── */
.gn-sect-p { display: none; }
@media (max-width: 720px) { .gn-sect-l { display: none; } .gn-sect-p { display: block; } }
.gn-sect-fig { margin-bottom: calc(6 * var(--gn-u)); }
.gn-key { margin: 36px 0; }
.gn-key div { padding: 14px 0; border-top: 1px solid var(--gn-rule); }
.gn-key div:last-child { border-bottom: 1px solid var(--gn-rule); }
.gn-key dt { font: 600 var(--gn-t-label)/1.4 var(--gn-text); letter-spacing: .2em; text-transform: uppercase; }
.gn-key dt b { display: inline-block; min-width: 5.5em; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.gn-key dd { margin: 6px 0 0 calc(5.5em * .72); font-size: var(--gn-t-read); }
.gn-edge-ph img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 60%; }
.gn-edge-ph { margin-inline: calc(-1 * var(--gn-gr)) calc(-1 * var(--gn-gl)); }
.gn-edge-ph figcaption { padding-inline: var(--gn-gl) var(--gn-gr); }
@media (min-width: 721px) { .gn-edge-ph { margin-inline: 0; } .gn-edge-ph figcaption { padding-inline: 0; } }
@media (min-width: 1024px) {
  .gn-p4 .gn-bal-copy { grid-column: 1 / 7; }
  .gn-p4 .gn-key { grid-column: 8 / 13; margin: 4px 0 0; }
  .gn-edge-ph { margin-top: calc(8 * var(--gn-u)); }
  .gn-edge-ph img { aspect-ratio: auto; height: 520px; }
}

/* ── 06 Eight levels ───────────────────────────────────────────────────────────────────────────── */
.gn-reg-lede { max-width: 34em; margin-bottom: calc(4 * var(--gn-u)); }
.gn-reg { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.gn-reg thead th { text-align: left; font-weight: 600; padding: 0 12px 10px 0; vertical-align: bottom; border-bottom: 1px solid var(--gn-ink); }
.gn-reg thead th:nth-child(5) { max-width: 15em; }
.gn-reg td, .gn-reg tbody th { padding: 0 12px 0 0; height: 72px; border-bottom: 1px solid var(--gn-ink); text-align: left; vertical-align: middle; }
.gn-reg .gn-rl { font: 400 3rem/1 var(--gn-disp); letter-spacing: .02em; text-transform: none; width: 2.2em; }
.gn-reg td.gn-num { font-weight: 450; letter-spacing: .04em; white-space: nowrap; }
.gn-reg .gn-ro { text-align: right; padding-right: 0; }
.gn-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--gn-ink); background: none; cursor: pointer; white-space: nowrap; transition: background-color .18s, color .18s; }
.gn-open:hover { background: var(--gn-ink); color: var(--gn-bg); }
.gn-note { margin-top: 20px; max-width: 40em; }
@media (max-width: 720px) {
  .gn-reg thead { display: none; }
  .gn-reg, .gn-reg tbody { display: block; }
  .gn-reg tr { display: grid; grid-template-columns: 7.5em 1fr; column-gap: 12px; padding: 18px 0; border-top: 1px solid var(--gn-ink); }
  .gn-reg tr:last-child { border-bottom: 1px solid var(--gn-ink); }
  .gn-reg td, .gn-reg tbody th { display: block; height: auto; border: 0; padding: 3px 0; }
  .gn-reg .gn-rl { grid-column: 1 / -1; padding-bottom: 10px; }
  .gn-reg td { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .gn-reg td::before { content: attr(data-k); font: 600 var(--gn-t-label)/2 var(--gn-text); letter-spacing: .2em; text-transform: uppercase; color: var(--gn-support); }
  .gn-reg .gn-ro { padding-top: 12px; }
  .gn-reg .gn-ro::before { display: none; }
  .gn-reg .gn-open { grid-column: 1 / -1; width: 100%; }
}

/* ── 07 The plans ──────────────────────────────────────────────────────────────────────────────── */
.gn-plan { display: block; width: 100%; height: auto; overflow: visible; }
.gn-plan path { fill: none; stroke: var(--gn-ink); vector-effect: non-scaling-stroke; stroke-linecap: square; }
.gn-plan .gn-pw { stroke-width: 2; }
.gn-plan .gn-pg { stroke-width: .6; }
.gn-plan .gn-pe { stroke-width: 1; stroke-dasharray: 5 3; stroke-linecap: butt; }
.gn-plan .gn-pc { stroke-width: .5; stroke: var(--gn-support); }
.gn-plan .gn-pk { stroke-width: 1; }
.gn-plan .gn-rm { fill: var(--gn-floor); stroke: none; }
.gn-plan .gn-lt { fill: var(--gn-light); fill-opacity: .92; stroke: none; }
.gn-plan .gn-ls { fill: var(--gn-floor); stroke: none; }
.gn-plan text { font-family: var(--gn-text); font-weight: 600; font-size: .34px; letter-spacing: .085px; text-anchor: middle; fill: var(--gn-ink); }
.gn-plan .gn-pt { font-size: .36px; }
@media (max-width: 720px) { .gn-plan-s text { font-size: .56px; letter-spacing: .07px; } .gn-plan-s .gn-pt { font-size: .62px; } }
.gn-planset { display: grid; gap: calc(6 * var(--gn-u)); }
.gn-planf figcaption { margin-top: 12px; }
.gn-planf figcaption b { font: 600 var(--gn-t-label)/1 var(--gn-text); letter-spacing: .26em; text-transform: uppercase; color: var(--gn-ink); margin-right: 10px; font-style: normal; }
.gn-open-l { margin-top: 14px; }
.gn-which { margin-top: calc(6 * var(--gn-u)); }
.gn-which li { display: flex; align-items: center; gap: 16px; min-height: 48px; border-top: 1px solid var(--gn-rule); scroll-margin-top: calc(var(--bar-h) + var(--gn-nav-h) + 24px); }
.gn-which li:last-child { border-bottom: 1px solid var(--gn-rule); }
.gn-wn { font: 600 var(--gn-t-label)/1 var(--gn-text); letter-spacing: .12em; min-width: 2.4em; }
.gn-wz { margin-left: auto; font-size: var(--gn-t-read); color: var(--gn-support); font-variant-numeric: tabular-nums; }
.gn-mini { min-height: 36px; padding: 0 10px; }
.gn-which li:target { background: var(--gn-lift); }
.gn-studies { margin-top: calc(8 * var(--gn-u)); display: grid; gap: calc(4 * var(--gn-u)) var(--gn-cg); }
.gn-studies-h { margin: 0; }
.gn-study-d { max-width: 420px; }
.gn-study figcaption { margin-top: 10px; max-width: 30em; }
.gn-study figcaption b { display: block; font-style: normal; font-weight: 600; color: var(--gn-ink); }
@media (min-width: 1024px) {
  .gn-planset { grid-column: 1 / 9; }
  .gn-which { grid-column: 10 / 13; margin: 0; }
  .gn-studies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gn-studies-h { grid-column: 1 / -1; }
}

/* ── 08 Write to us ────────────────────────────────────────────────────────────────────────────── */
.gn-write-note { max-width: 26em; margin-bottom: calc(6 * var(--gn-u)); }
.gn-form { max-width: 560px; }
.gn-field { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--gn-ink); }
.gn-form input[type="text"], .gn-form input[type="email"], .gn-form textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--gn-ink); background: var(--gn-lift); font-weight: 400;
}
.gn-form textarea { resize: vertical; line-height: 1.6; }
.gn-fh { font: italic 300 var(--gn-t-read)/1.5 var(--gn-text); color: var(--gn-support); }
.gn-set { border: 0; border-top: 1px solid var(--gn-ink); padding: 14px 0 16px; margin: 0; min-width: 0; }
.gn-set legend { float: left; width: 100%; padding: 0 0 10px; }
.gn-opts { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gn-set-d .gn-opts { grid-template-columns: 1fr; }
.gn-chk { position: relative; display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.gn-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gn-chk span { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--gn-ink); font-weight: 450; text-transform: none; letter-spacing: .04em; font-size: var(--gn-t-read); }
.gn-set-l .gn-chk span { font-weight: 600; letter-spacing: .12em; }
.gn-chk input:checked + span { background: var(--gn-ink); color: var(--gn-bg); }
.gn-chk input:focus-visible + span { outline: 1px solid var(--gn-ink); outline-offset: 3px; }
.gn-all { grid-column: span 2; }
.gn-carry, .gn-nothing { font: italic 300 var(--gn-t-read)/1.55 var(--gn-text); padding-top: 14px; border-top: 1px solid var(--gn-ink); }
.gn-carry + .gn-nothing { border-top: 0; padding-top: 6px; }
.gn-send { margin-top: 16px; min-height: 48px; padding: 0 28px; border: 1px solid var(--gn-ink); background: var(--gn-ink); color: var(--gn-bg); cursor: pointer; }
.gn-send:hover { background: none; color: var(--gn-ink); }
.gn-status { margin-top: 14px; min-height: 1.6em; font-weight: 600; }
@media (min-width: 1024px) {
  .gn-p8 .gn-head, .gn-write-note { grid-column: 1 / 6; }
  .gn-p8 .gn-head { grid-row: 1; } .gn-write-note { grid-row: 2; }
  .gn-form { grid-column: 7 / 12; grid-row: 1 / 4; margin-top: 4px; }
  .gn-set-l .gn-opts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── R Roof ────────────────────────────────────────────────────────────────────────────────────── */
.gn-dial-fig { max-width: 640px; margin-bottom: calc(6 * var(--gn-u)); }
.gn-draw.gn-dial { overflow: hidden; }
.gn-plate:focus { outline: none; }
.gn-nocanvas :is(.gn-tray, .gn-stops, .gn-pad, .gn-lists, .gn-halves) { display: none !important; }
.gn-colophon { font-size: 14px; line-height: 22px; max-width: 28em; }
.gn-colophon p + p { margin-top: 1em; }
.gn-colophon .gn-ln { margin-top: 12px; }
@media (min-width: 1024px) { .gn-dial-fig { grid-column: 1 / 7; margin: 0; } .gn-colophon { grid-column: 8 / 12; padding-top: 12px; } }

/* ── the sheet: the top of the stack, where a floor opens into its plan ─────────────────────────── */
.gn-sheet {
  position: fixed; inset: var(--bar-h) 0 0 0; z-index: 820; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--gn-ink); box-shadow: 0 -18px 24px -12px rgb(14 15 16 / .2);
}
.gn-sheet[hidden] { display: none; }
.gn-sheet-in { min-height: calc(100% + 1px); display: flex; flex-direction: column; padding: 0 var(--gn-gr) 0 var(--gn-gl); }
.gn-sh-side, .gn-sh-main, .gn-tray { display: contents; }
.gn-sh-top { order: 1; display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--gn-rule); }
.gn-sh-title { font: 400 3rem/1 var(--gn-disp); letter-spacing: .02em; outline: none; }
.gn-sh-tag { order: 2; padding: 10px 0; font: 600 var(--gn-t-label)/1.4 var(--gn-text); letter-spacing: .2em; text-transform: uppercase; text-wrap: balance; }
/* phones: one line (height and homes; the outlook is on the stack and in the register) */
@media (max-width: 720px) {
  .gn-sh-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gn-sh-dot, .gn-sh-view { display: none; }
}
/* 1024 and up: the outlook on its own line, on purpose */
@media (min-width: 1024px) { .gn-sh-dot { display: none; } .gn-sh-view { display: block; } }
.gn-plan-fig { order: 3; position: relative; margin: 4px auto 0; background: var(--gn-bg); aspect-ratio: var(--gn-ar, 13 / 16.7); width: min(100%, calc((100svh - var(--bar-h) - 176px) * var(--gn-arn, .778))); }
.gn-light, .gn-plan-svg, .gn-plan-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gn-light { opacity: 0; transition: opacity .5s var(--gn-ease); }
.gn-sheet.gn-lit .gn-light { opacity: 1; }
.gn-sheet.gn-instant .gn-light { transition: none; }
.gn-halves { order: 4; display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.gn-sheet button { min-height: 44px; padding: 0 12px; border: 1px solid var(--gn-ink); background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gn-sheet button:hover { background: var(--gn-lift); }
.gn-sheet button[aria-pressed="true"] { background: var(--gn-ink); color: var(--gn-bg); }
.gn-halves button + button { border-left: 0; }
.gn-sh-info { order: 5; padding: 18px 0 4px; }
.gn-sh-note { font: italic 300 var(--gn-t-read)/1.55 var(--gn-text); margin-bottom: 10px; }
.gn-readout { font: 450 var(--gn-t-read)/1.6 var(--gn-text); letter-spacing: .03em; font-variant-numeric: tabular-nums lining-nums; min-height: 4.8em; }
.gn-readout i { font-style: italic; font-weight: 500; }
.gn-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.gn-lists .gn-lab { margin-bottom: 8px; }
.gn-lists li { display: flex; align-items: baseline; gap: 9px; font-size: var(--gn-t-read); line-height: 1.7; }
.gn-lists li::first-letter { text-transform: uppercase; }
.gn-lists li::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid var(--gn-ink); }
.gn-in-sun li::before { background: var(--gn-ink); }
.gn-stops { order: 6; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; }
.gn-stops-d { order: 7; }
.gn-stops button { letter-spacing: .18em; }
.gn-stops button span { font-weight: 450; letter-spacing: .04em; }
.gn-stops small { font: italic 300 var(--gn-t-read)/1 var(--gn-text); letter-spacing: .01em; text-transform: none; }
.gn-play { margin-left: auto; }
.gn-nocv { order: 7; display: grid; gap: 6px; padding-top: 14px; }
.gn-nocv label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 450; cursor: pointer; }
.gn-nocv input { accent-color: var(--gn-ink); width: 16px; height: 16px; }
.gn-pad { order: 8; padding-top: 22px; }
.gn-pad-box { position: relative; width: min(calc(100% - 44px), 358px); margin-left: 44px; }
.gn-pad canvas { display: block; width: 100%; height: 180px; outline: 1px solid var(--gn-ink); touch-action: none; cursor: crosshair; }
.gn-pad-m { display: flex; justify-content: space-between; padding: 6px 0 0; font: 600 10px/1 var(--gn-text); letter-spacing: .16em; text-transform: uppercase; }
.gn-pad-m span { width: 0; display: flex; justify-content: center; }
.gn-pad-m span:nth-child(1) { margin-left: 21.6%; } .gn-pad-m span:nth-child(2) { margin-left: 25%; } .gn-pad-m span:nth-child(3) { margin-left: 25.2%; } .gn-pad-m span:nth-child(4) { margin-left: 24.7%; margin-right: 3.2%; }
.gn-pad-m { justify-content: flex-start; }
.gn-pad-h { position: absolute; left: -44px; top: 0; height: 180px; font: 450 10px/1 var(--gn-text); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.gn-pad-h span { position: absolute; left: 0; translate: 0 -50%; }
.gn-pad-h span:nth-child(1) { top: 6.25%; } .gn-pad-h span:nth-child(2) { top: 43.75%; } .gn-pad-h span:nth-child(3) { top: 81.25%; }
.gn-pad figcaption { margin-top: 12px; max-width: 26em; }
.gn-sh-floors { order: 9; display: flex; gap: 6px; padding: 22px 0 8px; }
.gn-sheet .gn-sh-floors button { flex: 1; letter-spacing: .14em; padding: 0 8px; white-space: nowrap; }
.gn-sheet .gn-sh-title:focus { outline: none; }
.gn-sh-floors button:first-child svg { rotate: 180deg; }
.gn-back { border-width: 0 !important; padding: 0 !important; min-height: 44px; }
.gn-back-l { display: none !important; }
.gn-esc { font-weight: 400; letter-spacing: .1em; margin-left: 8px; padding: 2px 5px; border: 1px solid var(--gn-rule); }
/* the tray's one line (phones and tablets): time, the sun, the rooms in sun */
.gn-tray-read { display: none; }
.gn-sq { display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; background: var(--gn-ink); vertical-align: middle; }
.gn-ctl { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 16px; }
.gn-ctl output { font: italic 450 var(--gn-t-read)/1.4 var(--gn-text); font-variant-numeric: tabular-nums lining-nums; }
.gn-track { grid-column: 1 / -1; position: relative; }
.gn-marks { position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; }
.gn-marks i { position: absolute; top: 7px; left: calc(11px + var(--p) * (100% - 22px)); width: 6px; height: 6px; margin-left: -3px; border: 1px solid var(--gn-ink); border-radius: 50%; }
.gn-sheet input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; }
.gn-sheet input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--gn-ink); }
.gn-sheet input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10.5px; border: 0; border-radius: 0; background: linear-gradient(var(--gn-ink), var(--gn-ink)) 50% 0 / 2px 100% no-repeat; }
.gn-sheet input[type="range"]::-moz-range-track { height: 1px; background: var(--gn-ink); }
.gn-sheet input[type="range"]::-moz-range-thumb { width: 2px; height: 22px; border: 0; border-radius: 0; background: var(--gn-ink); }
@media (max-width: 1023px) {
  .gn-tray { order: 20; display: block; position: sticky; bottom: 0; z-index: 3; margin: 16px calc(-1 * var(--gn-gr)) 0 calc(-1 * var(--gn-gl)); padding: 8px var(--gn-gr) 8px var(--gn-gl); background: var(--gn-bg); border-top: 1px solid var(--gn-ink); }
  .gn-ctl + .gn-ctl { margin-top: 4px; }
  .gn-sheet-in { padding-bottom: 0; }
  .gn-tray-read { display: block; margin-bottom: 2px; font: 450 var(--gn-t-read)/1.5 var(--gn-text); letter-spacing: .01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gn-tray-read i { font-style: italic; font-weight: 500; }
}
/* the plan fits between the head (title row, the one-line tag) and the tray, so the plan and both sliders
   are on screen together: 264px is the head (96) plus the tray (162) plus a gap; 220px on short phones */
@media (max-width: 1023px) { .gn-plan-fig { width: min(100%, calc((100svh - var(--bar-h) - 264px) * var(--gn-arn, .778))); } }
@media (max-width: 720px) and (max-height: 640px) {
  .gn-sh-top { min-height: 48px; } .gn-sh-title { font-size: 3rem; }
  .gn-sh-tag { padding: 6px 0; }
  .gn-tray { padding-block: 6px; }
  .gn-ctl + .gn-ctl { margin-top: 0; }
  .gn-sheet input[type="range"] { height: 30px; }
  .gn-plan-fig { width: min(100%, calc((100svh - var(--bar-h) - 220px) * var(--gn-arn, .778))); }
}
@media (min-width: 1024px) {
  .gn-sheet-in { display: grid; grid-template-columns: minmax(0, 324px) minmax(0, 1fr); column-gap: 48px; align-items: start; padding-block: 28px 40px; }
  .gn-sh-side { display: flex; flex-direction: column; }
  .gn-sh-main { display: flex; flex-direction: column; width: min(100%, calc((100svh - var(--bar-h) - 300px) * var(--gn-arn, 1.53))); }
  .gn-sh-top { border: 0; min-height: 0; } .gn-sh-title { font-size: 4rem; }
  .gn-back-s { display: none !important; } .gn-back-l { display: inline-flex !important; justify-content: flex-start !important; order: 10; margin-top: 8px; }
  .gn-plan-fig { order: 1; width: 100%; margin: 0; }
  .gn-halves { display: none; }
  .gn-ctl-t { order: 2; margin-top: 18px; } .gn-stops-t { order: 3; padding-top: 4px; }
  .gn-ctl-d { order: 4; margin-top: 18px; } .gn-stops-d { order: 5; padding-top: 4px; }
  .gn-stops button { min-height: 34px; }
  .gn-pad-box { width: 292px; } .gn-pad canvas { height: 192px; } .gn-pad-h { height: 192px; }
  .gn-sh-info { padding-top: 12px; }
}

/* ── the hinge: a floor's slab swings up about its north edge and opens into the plan ─────────── */
@supports (view-transition-name: a) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-group(*) { animation-duration: 700ms; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
  ::view-transition-group(gn-slab) { animation-duration: 900ms; }
  ::view-transition-old(gn-slab), ::view-transition-new(gn-slab) { mix-blend-mode: normal; transform-origin: 50% 0; }
  ::view-transition-old(gn-slab) { animation: gn-edge-out 180ms cubic-bezier(.2, .7, .1, 1) both; }
  ::view-transition-new(gn-slab) { animation: gn-unfold 900ms cubic-bezier(.2, .7, .1, 1) both; }
  :active-view-transition-type(gn-close)::view-transition-group(gn-slab) { animation-duration: 700ms; }
  :active-view-transition-type(gn-close)::view-transition-old(gn-slab) { animation: gn-fold 700ms cubic-bezier(.2, .7, .1, 1) both; }
  :active-view-transition-type(gn-close)::view-transition-new(gn-slab) { animation: gn-edge-in 180ms cubic-bezier(.2, .7, .1, 1) 520ms both; }
  /* the parts: 40svh of travel, gone within the first 35% on the way out, back only near home on the way in */
  :active-view-transition-type(gn-open)::view-transition-old(*.gn-vup) { animation: gn-up-out 700ms cubic-bezier(.2, .7, .1, 1) both; }
  :active-view-transition-type(gn-open)::view-transition-old(*.gn-vdn) { animation: gn-dn-out 700ms cubic-bezier(.2, .7, .1, 1) both; }
  :active-view-transition-type(gn-close)::view-transition-new(*.gn-vup) { animation: gn-up-in 700ms cubic-bezier(.2, .7, .1, 1) both; }
  :active-view-transition-type(gn-close)::view-transition-new(*.gn-vdn) { animation: gn-dn-in 700ms cubic-bezier(.2, .7, .1, 1) both; }
  :active-view-transition-type(gn-open)::view-transition-new(*.gn-vpt), :active-view-transition-type(gn-close)::view-transition-old(*.gn-vpt) { animation: none; opacity: 0; }
}
@keyframes gn-up-out { 35% { opacity: 0; } to { transform: translateY(-40svh); opacity: 0; } }
@keyframes gn-dn-out { 35% { opacity: 0; } to { transform: translateY(40svh); opacity: 0; } }
@keyframes gn-up-in { from { transform: translateY(-40svh); opacity: 0; } 30% { opacity: 0; } }
@keyframes gn-dn-in { from { transform: translateY(40svh); opacity: 0; } 30% { opacity: 0; } }
@keyframes gn-unfold { from { transform: perspective(1600px) rotateX(-89deg); } to { transform: perspective(1600px) rotateX(0); } }
@keyframes gn-fold { from { transform: perspective(1600px) rotateX(0); } to { transform: perspective(1600px) rotateX(-89deg); } }
@keyframes gn-edge-out { to { transform: scaleY(0); } }
@keyframes gn-edge-in { from { transform: scaleY(0); } }
@keyframes gn-walls { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gn-fade { from { opacity: 0; } }
.gn-sheet.gn-opening .gn-plan .gn-pw { stroke-dasharray: 1; animation: gn-walls .4s .5s var(--gn-ease) both; }
.gn-sheet.gn-opening :is(.gn-sh-side, .gn-stops, .gn-tray > *) { animation: gn-fade .4s .45s var(--gn-ease) both; }

/* ── motion: settle, then measure ───────────────────────────────────────────────────────────────── */
.gn-js .gn-draw .gn-dr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--gn-ease); }
.gn-js .gn-draw.gn-in .gn-dr { stroke-dashoffset: 0; }
.gn-js .gn-draw .gn-ray55 { transition-delay: .55s; }
.gn-js .gn-draw .gn-arc55 { transition-delay: .95s; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gn-js .gn-plate:not(.gn-hero)::before { animation: gn-rule linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .gn-js .gn-motto { animation: gn-rise linear both; animation-timeline: view(); animation-range: entry 20% entry 60%; }
    .gn-js .gn-ph img { animation: gn-blind linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  }
}
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gn-js .gn-plate:not(.gn-hero)::before { transform: scaleX(0); transition: transform .8s var(--gn-ease); }
    .gn-js .gn-plate.gn-in::before { transform: none; }
    .gn-js .gn-motto { opacity: 0; translate: 0 8px; transition: opacity .7s var(--gn-ease), translate .7s var(--gn-ease); }
    .gn-js .gn-in .gn-motto { opacity: 1; translate: 0 0; }
    .gn-js .gn-ph img { clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--gn-ease); }
    .gn-js .gn-ph.gn-in img { clip-path: inset(0); }
  }
}
@keyframes gn-rule { from { transform: scaleX(0); } }
@keyframes gn-rise { from { opacity: 0; translate: 0 8px; } }
@keyframes gn-blind { from { clip-path: inset(100% 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .gn-js .gn-plate { position: relative; top: auto; }
  .gn-js .gn-plate:not(.gn-hero) { box-shadow: none; }
  .gn-site *, .gn-sheet * { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  .gn-js .gn-draw .gn-dr { stroke-dasharray: none; stroke-dashoffset: 0; }
  .gn-floor .gn-slab { translate: none !important; }
  .gn-js .gn-hero:not(.gn-drawn) .gn-fl, .gn-js .gn-hero:not(.gn-drawn)::after { transform: none; }
  .gn-js .gn-hero:not(.gn-drawn) { --gn-sw: var(--gn-sw-end, 0); }
  .gn-play { display: none !important; }
}