/* ═══════════════════════════════════════════════════════════════════════
   MOSS & FORM — botanical architecture & interiors
   Self-contained. No token is shared with any other world.

   The page is a drawing sheet: paper ground, ink linework, four voices of
   type — a large condensed grotesk for statements, a narrow technical
   label for every annotation, a serif for captions set in italic, and a
   monospace for anything that is genuinely a number.

   Palette is the studio's own:
     limestone #EDE7DA · moss #5E6F4D · forest #263126
     clay #B8795B · pale sage #C8D0BA · paper #FAF8F1
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --limestone: #EDE7DA;
  --moss: #5E6F4D;
  --forest: #263126;
  --clay: #B8795B;
  --sage: #C8D0BA;
  --paper: #FAF8F1;

  /* derived working tones — all mixes of the six above, nothing new */
  --ink: var(--forest);
  --ink-60: rgba(38, 49, 38, .60);
  --ink-38: rgba(38, 49, 38, .38);
  --ink-20: rgba(38, 49, 38, .20);
  --ink-10: rgba(38, 49, 38, .10);
  --ink-05: rgba(38, 49, 38, .05);
  --moss-deep: #47563A;
  --clay-deep: #96603F;
  --paper-lift: #FFFDF7;

  /* type */
  --grotesk: "Archivo Narrow", "Roboto Condensed", "Arial Narrow",
             "Helvetica Neue", Inter, system-ui, sans-serif;
  --tech: "Archivo Narrow", "Roboto Condensed", "Arial Narrow",
          "Helvetica Neue", Inter, system-ui, sans-serif;
  --serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono",
          monospace;

  /* measure */
  --gut: clamp(18px, 4vw, 56px);
  --hair: 1px solid var(--ink-20);
  --max: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--limestone);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, var(--ink-05) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(var(--ink-05) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--limestone);
  font-family: var(--tech);
  font-size: clamp(15px, .55vw + 13px, 17px);
  line-height: 1.6;
  font-stretch: 87.5%;
  overflow-x: hidden;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.vh {
  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: absolute; left: 8px; top: -60px; z-index: 90;
  padding: 10px 16px; background: var(--forest); color: var(--paper);
  font: 600 11px/1 var(--tech); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; transition: top .18s;
}
.skip:focus { top: 8px; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* ── type voices ────────────────────────────────────────────────────── */

.disp {
  font-family: var(--grotesk);
  font-weight: 700;
  font-stretch: 78%;
  line-height: .88;
  letter-spacing: -.018em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
}
.disp--3 { font-size: clamp(1.9rem, 3.6vw, 3.3rem); }
.disp--4 { font-size: clamp(1.15rem, 1.5vw, 1.6rem); letter-spacing: -.01em; }
.disp--lite { color: var(--paper); }

.lab {
  font-family: var(--tech);
  font-weight: 600;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 1.1em;
}

.cap {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--moss-deep);
  max-width: 54ch;
  margin: 0 0 1.2em;
}

/* ── masthead ───────────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 34px);
  padding: 12px var(--gut);
  background: rgba(237, 231, 218, .92);
  backdrop-filter: blur(9px);
  border-bottom: var(--hair);
}

.masthead__mark {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
}
.mark { width: 34px; height: 31px; flex: none; }
.mark__shell { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: miter; }
.mark__leaf  { fill: var(--moss); }
.mark__vein  { fill: none; stroke: var(--paper); stroke-width: 1.2; }

.mark__type {
  font-family: var(--grotesk);
  font-weight: 700; font-stretch: 74%;
  text-transform: uppercase; letter-spacing: .01em;
  font-size: 1.16rem; line-height: 1; white-space: nowrap;
}
.mark__type em { font-style: normal; color: var(--clay); }

.masthead__line {
  font-family: var(--serif); font-style: italic;
  font-size: .9rem; color: var(--moss-deep);
  margin: 0; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.masthead__nav { display: flex; gap: clamp(10px, 1.4vw, 22px); }
.masthead__nav a {
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-60); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.masthead__nav a:hover { color: var(--ink); border-bottom-color: var(--clay); }

/* ── the sheet (hero) ───────────────────────────────────────────────── */

/* the drawing office: light falls across the sheet and the sheet drifts
   against the section band above it. Everything is slow and continuous —
   the drawing is never "performing". */
.hero {
  position: relative;
  padding: clamp(14px, 2.4vw, 34px) var(--gut) clamp(28px, 5vw, 72px);
  min-height: calc(100svh - 58px);
  display: flex; align-items: center;
}

.sheet {
  position: relative;
  width: 100%; max-width: var(--max); margin: 0 auto;
  background: var(--paper);
  border: var(--hair);
  box-shadow: 0 1px 0 rgba(38, 49, 38, .07), 0 22px 60px -40px rgba(38, 49, 38, .5);
  padding: clamp(12px, 1.7vw, 26px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(10px, 1.6vw, 22px);
  isolation: isolate;
}

/* fine ruled grid, like a drawing sheet */
.sheet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink-05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(var(--ink-05) 1px, transparent 1px) 0 0 / 22px 22px;
  opacity: .7;
}
/* a cloud shadow crossing the sheet. Multiply on the paper itself, so the
   ink, the grid and the title block all sit under the same moving light. */
.sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(58% 44% at 24% 28%, rgba(38, 49, 38, .085), rgba(38, 49, 38, 0) 72%),
    radial-gradient(46% 38% at 64% 66%, rgba(38, 49, 38, .07), rgba(38, 49, 38, 0) 74%),
    radial-gradient(40% 32% at 84% 30%, rgba(38, 49, 38, .055), rgba(38, 49, 38, 0) 72%);
  mix-blend-mode: multiply;
  animation: cloudDrift 104s ease-in-out infinite alternate;
}
/* the light in the room, sliding over the desk the sheet lies on */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(102deg,
    transparent 16%, rgba(250, 248, 241, .40) 35%, rgba(255, 226, 196, .46) 50%,
    rgba(250, 248, 241, .40) 65%, transparent 84%);
  mix-blend-mode: soft-light;
  animation: lightSweep 96s ease-in-out infinite alternate;
}

/* ── section band ───────────────────────────────────────────────────── */

.sect { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink-38);
        animation: sheetDrift 58s ease-in-out infinite alternate; }

.sect__sun path { fill: none; stroke: var(--clay); stroke-width: 1; opacity: .34; }
.sect__sun { animation: sunBreath 46s ease-in-out infinite alternate; }
.sect__disc { fill: none; stroke: var(--clay); stroke-width: 1.4; opacity: .55; }
.sect__ground { stroke: var(--ink); stroke-width: 2; fill: none; }
.sect__soil { color: var(--ink-20); }
.sect__txt, .sect__cap {
  font-family: var(--tech); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; fill: var(--ink-60);
}
.sect__cap { fill: var(--ink); }

.ts-trunk { fill: none; stroke: var(--ink-60); stroke-width: 2.4; stroke-linecap: round; }
.ts-canopy { fill: var(--sage); stroke: var(--moss); stroke-width: 1.2; }
.ts-line { fill: none; stroke: var(--moss); stroke-width: .9; opacity: .7; }
.sect__trees use:nth-child(2), .sect__trees use:nth-child(4) { opacity: .55; }

.sect__slab { color: var(--ink-38); stroke: var(--ink); stroke-width: 1.2; }
.sect__thick { fill: var(--sage); stroke: var(--ink); stroke-width: 1.2; }
.sect__floor { stroke: var(--ink); stroke-width: 2; fill: none; }
.sect__wall { fill: var(--limestone); stroke: var(--ink); stroke-width: 1.4; }
.sect__roof { fill: var(--sage); stroke: var(--ink); stroke-width: 1.4; }
.sect__roofcut { stroke: var(--ink-60); stroke-width: 1; stroke-dasharray: 8 5; fill: none; }
.sect__fascia { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: butt; }
.sect__mull { fill: none; stroke: var(--ink-60); stroke-width: 1; }
.sect__voidedge { stroke: var(--ink); stroke-width: 2; fill: none; }
.sect__voidtree .ts-canopy { fill: var(--moss); }
.sect__voidtree .ts-line { stroke: var(--paper); opacity: .55; }
.sect__fig { fill: none; stroke: var(--clay); stroke-width: 2; stroke-linecap: round; }
.sect__dim path, .sect__dim text { stroke: var(--ink-60); fill: var(--ink-60); }
.sect__dim path { stroke-width: 1; }
.sect__dim text {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  fill: var(--ink-60); stroke: none;
}
.sect__cut path { stroke: var(--ink-60); stroke-width: 1; fill: none; }
.sect__cut path:nth-of-type(1) { stroke-dasharray: 14 7; }
.sect__cut path:nth-of-type(n+2) { fill: var(--ink-60); stroke: none; }
.sect__cut text {
  font-family: var(--grotesk); font-size: 22px; font-weight: 700;
  letter-spacing: .3em; fill: var(--ink-60);
}
.scalebar path { stroke: var(--ink-60); stroke-width: 1.2; fill: none; }
.scalebar text { font-family: var(--mono); font-size: 11px; fill: var(--ink-60); }

/* ── plan stage ─────────────────────────────────────────────────────── */

.stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 34px);
  animation: planDrift 74s ease-in-out infinite alternate;
}
.notes--l { justify-self: end; text-align: right; }
.notes--r { justify-self: start; }
.notes p {
  margin: 0 0 12px;
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-38); white-space: nowrap;
}
.notes b { display: block; color: var(--ink); font-size: 12px; letter-spacing: .1em; }
.notes__mark {
  color: var(--clay) !important; font-family: var(--serif); font-style: italic;
  font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important;
  white-space: normal !important; line-height: 1.35; margin-top: 22px !important;
}
.reset {
  font-family: var(--tech); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  background: none; border: 1px solid var(--ink-20); color: var(--ink-60);
  padding: 6px 10px; cursor: pointer;
}
.reset:hover { border-color: var(--clay); color: var(--ink); }

.plan { position: relative; }
.plan__frame {
  /* the drawing is drawn at 760 × 560 and scaled by one factor, so the frame,
     the sheet border and the hit targets can never drift apart */
  --k: 1; --kz: 1;
  position: relative; margin: 0 auto;
  width: calc(760px * var(--k)); height: calc(560px * var(--k));
}
.plan__scaler {
  position: absolute; inset: 0 auto auto 0;
  width: 760px; height: 560px;
  transform: scale(var(--k, 1)); transform-origin: 0 0;
}

/* perspective + the plan plate that tilts from flat plan to isometric room.
   Named planplate, not plate: below, `plate` is a section of the sheet. */
.planplate {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateZ(0deg);
  transition: transform 1150ms cubic-bezier(.22, .72, .16, 1);
}
.sheet[data-built="a"] .planplate,
.sheet[data-built="b"] .planplate,
.sheet[data-built="c"] .planplate { transform: rotateX(58deg) rotateZ(-45deg); }

.art { position: absolute; inset: 0; width: 760px; height: 560px; }
.art__field .field { fill: none; stroke: var(--ink-20); stroke-width: 1; stroke-dasharray: 2 6; }
.art__field .contour { fill: none; stroke: var(--ink-10); stroke-width: 1; }
.fp { fill: rgba(237, 231, 218, .5); stroke: var(--ink); stroke-width: 1.6; }
.art__part path { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.bed { fill: var(--sage); fill-opacity: .55; stroke: var(--ink-38); stroke-width: 1; }
.stair { fill: none; stroke: var(--ink-38); stroke-width: 1; }
.door { fill: none; stroke: var(--ink-38); stroke-width: 1; }
.thr { fill: none; stroke: var(--ink-20); stroke-width: 1; }
.art__dim path { stroke: var(--ink-38); stroke-width: 1; fill: none; }
.art__dim text {
  font-family: var(--mono); font-size: 11px; fill: var(--ink-38); stroke: none;
}
.art__north path { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.art__north text { font-family: var(--grotesk); font-size: 12px; font-weight: 700; fill: var(--ink); }

/* plan planting — grows through the floor plan */
.tp-ring { fill: var(--sage); fill-opacity: .5; stroke: var(--ink-38); stroke-width: 1.2;
          stroke-dasharray: 1; stroke-dashoffset: 1;
          animation: draw 2.6s var(--dl, 0s) cubic-bezier(.3, .7, .3, 1) forwards; }
.tp-cross { fill: none; stroke: var(--ink-38); stroke-width: 1;
            stroke-dasharray: 1; stroke-dashoffset: 1;
            animation: draw 2.6s var(--dl, 0s) cubic-bezier(.3, .7, .3, 1) forwards; }
.lf-fill {
  fill: var(--moss); fill-opacity: .26; stroke: var(--moss); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: sprout var(--gd, 4s) var(--dl, 0s) cubic-bezier(.2, .7, .25, 1) both;
}
.lf-vein path {
  fill: none; stroke: var(--moss-deep); stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw var(--gd, 4s) var(--dl, 0s) cubic-bezier(.3, .7, .3, 1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes sprout {
  from { transform: scaleY(0) scaleX(.86); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scaleY(1) scaleX(1); opacity: 1; }
}
/* ── ambient: the sheet is never still, and never busy ─────────────── */
@keyframes cloudDrift {
  from { transform: translate3d(-5%, 0, 0) scale(1.05); }
  to   { transform: translate3d(6%, -2%, 0) scale(1.14); }
}
@keyframes lightSweep {
  from { transform: translate3d(-40%, 0, 0); }
  to   { transform: translate3d(40%, 0, 0); }
}
/* the section band and the plan below it run on different periods, so the
   two planes of the drawing separate by a few millimetres and settle back */
@keyframes sheetDrift {
  from { transform: translate3d(0, -2.5px, 0); }
  to   { transform: translate3d(0, 2.5px, 0); }
}
@keyframes planDrift {
  from { transform: translate3d(0, 4.5px, 0); }
  to   { transform: translate3d(0, -4.5px, 0); }
}
@keyframes sunBreath { from { opacity: .74; } to { opacity: 1; } }
@keyframes plateLight {
  from { transform: translate3d(-32%, 0, 0); }
  to   { transform: translate3d(46%, 0, 0); }
}

/* ── the 3D build ───────────────────────────────────────────────────── */

.walls { position: absolute; inset: 0; transform-style: preserve-3d; }
.zone3d { position: absolute; inset: 0; transform-style: preserve-3d; }

.w {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transform-style: preserve-3d;
}
.wb {
  position: absolute; left: 0; top: 0;
  width: var(--t, 11px); height: var(--h, 120px);
  transform-origin: 0 0;
  transform: rotateX(131.5deg) scaleY(0);
  opacity: 0;
  background: var(--limestone);
  border: 1px solid var(--ink);
  box-shadow: inset -1px 0 0 var(--ink-10);
  transition:
    transform 660ms cubic-bezier(.2, .8, .2, 1) var(--d, 0ms),
    opacity 320ms linear var(--d, 0ms);
}
.w--low .wb { background: var(--sage); }
.w--tree {
  position: absolute; left: 0; top: 0;
  width: var(--t, 10px); height: var(--h, 170px);
  transform-origin: 0 0;
  transform: rotateX(131.5deg) scaleY(0);
  opacity: 0;
  background: var(--moss-deep);
  border: 1px solid var(--forest);
  border-radius: 40% 40% 8% 8% / 6% 6% 3% 3%;
  transition:
    transform 700ms cubic-bezier(.2, .8, .2, 1) var(--d, 0ms),
    opacity 320ms linear var(--d, 0ms);
}
.canopy {
  position: absolute; left: -50%; bottom: 0;
  width: calc(var(--h) * 1.05); height: calc(var(--h) * .42);
  border-radius: 50%;
  background: var(--moss);
  border: 1px solid var(--forest);
  transform-origin: 50% 100%;
  transform: rotateX(-131.5deg) scale(0);
  transition: transform 620ms cubic-bezier(.2, .85, .25, 1) calc(var(--d, 0ms) + 380ms);
}
.canopy--2 {
  left: -18%; width: calc(var(--h) * .68); height: calc(var(--h) * .3);
  background: var(--moss-deep); bottom: 12%;
  transition-delay: calc(var(--d, 0ms) + 470ms);
}

/* flat → built */
.sheet[data-built="a"] [data-zone="a"].zone3d .wb,
.sheet[data-built="b"] [data-zone="b"].zone3d .wb,
.sheet[data-built="c"] [data-zone="c"].zone3d .wb {
  transform: rotateX(131.5deg) scaleY(1);
  opacity: 1;
}
/* the zone being built lifts the plan's linework back so the room reads */
.sheet[data-built] .art__fp path,
.sheet[data-built] .art__part path { opacity: .18; transition: opacity 500ms ease; }
.art__fp path, .art__part path { transition: opacity 700ms ease 300ms; }

/* ── zones: 2D hit targets above the tilted plate ──────────────────── */

.zones { position: absolute; inset: 0; }
.zone {
  position: absolute;
  appearance: none; background: transparent; padding: 0; margin: 0;
  border: 1px dashed transparent;
  cursor: pointer; color: inherit; text-align: left;
  font: inherit;
  transition: border-color 260ms ease, background-color 260ms ease;
}
/* These are sheet units. .zones sits inside .plan__scaler, which already
   applies scale(var(--k)), so multiplying here as well scaled every hit
   target and every label by the square of the factor and slid them off their
   own footprints. The walls beside them (.w, --x/--y) are plain units for
   the same reason. */
.zone[data-zone="a"] { left: 64px;  top: 86px;  width: 248px; height: 196px; }
.zone[data-zone="b"] { left: 352px; top: 86px;  width: 344px; height: 150px; }
.zone[data-zone="c"] { left: 352px; top: 316px; width: 344px; height: 170px; }

.zone__no {
  position: absolute;
  left: -30px; top: -24px;
  font-family: var(--grotesk); font-weight: 700; font-stretch: 72%;
  /* the plate shrinks with the viewport; its annotation must not. These
     floors are measured on the screen, so they are divided by the scale. */
  font-size: max(calc(15px * var(--kz)), calc(30px * var(--k)));
  line-height: 1; color: var(--ink-20);
  transition: color 260ms ease;
}
.zone__name {
  position: absolute; left: 0; bottom: -30px;
  font-family: var(--tech); font-weight: 600;
  font-size: max(calc(11px * var(--kz)), calc(13px * var(--k)));
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
}
.zone__tag {
  position: absolute; right: 0; bottom: -30px;
  font-family: var(--serif); font-style: italic;
  font-size: max(calc(11px * var(--kz)), calc(13px * var(--k)));
  color: var(--ink-38); white-space: nowrap;
  opacity: 0; transition: opacity 260ms ease;
}
.zone:hover, .zone:focus-visible, .zone[aria-pressed="true"] {
  border-color: var(--clay);
  background: rgba(184, 121, 91, .07);
}
.zone:hover .zone__no, .zone:focus-visible .zone__no,
.zone[aria-pressed="true"] .zone__no { color: var(--clay); }
.zone:hover .zone__tag, .zone:focus-visible .zone__tag,
.zone[aria-pressed="true"] .zone__tag { opacity: 1; }

.plan__hint {
  margin: 10px 0 0; text-align: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--ink-38);
}
.plan__hint span { display: none; }
.plan__hint span:first-child { display: inline; }
@media (hover: none) {
  .plan__hint span:first-child { display: none; }
  .plan__hint span:last-child { display: inline; }
}

/* ── cursor pencil ──────────────────────────────────────────────────── */

.pencil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
}
.pencil path {
  fill: none; stroke: var(--forest); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity 1100ms ease;
}
.pencil path.live { opacity: .5; }
.pencil path.fade { opacity: 0; }

/* ── title block ────────────────────────────────────────────────────── */

.tb {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 44px);
  align-items: end;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
}
.tb__name {
  margin: 0;
  font-family: var(--grotesk); font-weight: 700; font-stretch: 70%;
  text-transform: uppercase; line-height: .8; letter-spacing: -.01em;
  font-size: clamp(2.6rem, 8vw, 6.6rem);
}
.tb__name span:nth-child(2) { color: var(--clay); }
.tb__rows { margin: 0; display: grid; gap: 5px; }
.tb__rows > div {
  display: grid; grid-template-columns: 78px 1fr; gap: 12px;
  border-top: var(--hair); padding-top: 4px;
}
.tb__rows dt {
  font-size: 10px; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--ink-38);
}
.tb__rows dd {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--ink);
}

/* ── plates · one sheet: a measured margin, a field, a title block ─────
   The page is not stacked as pages. It is one A1 sheet with a left margin
   that runs the full height of every plate and is never tinted, a drawing
   field that may be filled or left as paper, and a title block set at the
   foot of each plate — which is where a drawing carries its title, and the
   reason no plate opens the way a section would.                        */

.plate {
  --rail-w: clamp(108px, 12.5vw, 210px);
  --field-pad: clamp(22px, 3.6vw, 54px);
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--ink);
  background: var(--paper);
}
.plate--dark   { background: var(--forest);   color: var(--paper); border-top-color: var(--forest); }
.plate--sage   { background: var(--sage);     color: var(--forest); }
.plate--forest { background: var(--moss-deep); color: var(--paper); border-top-color: var(--forest); }
/* light moving across the two filled plates, where it actually reads */
.plate--dark::after, .plate--forest::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(66% 110% at 24% 20%,
    rgba(250, 248, 241, .17), rgba(250, 248, 241, 0) 72%);
  mix-blend-mode: soft-light;
  animation: plateLight 118s ease-in-out infinite alternate;
}

/* the margin column: paper, ruled, annotated, never filled */
.plate__rail {
  background: var(--paper);
  border-right: var(--hair);
  padding: clamp(15px, 1.7vw, 24px) 15px clamp(18px, 2.6vw, 36px) var(--gut);
  display: flex; flex-direction: column; gap: 15px;
}
.ref { margin: 0; display: grid; gap: 2px; }
.ref b {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; color: var(--ink);
}
.ref span {
  font-family: var(--tech); font-size: 10px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-38);
  line-height: 1.4;
}
.plate__note {
  margin: 0; padding-top: 15px; border-top: var(--hair);
  font-family: var(--serif); font-style: italic;
  font-size: .87rem; line-height: 1.62; color: var(--moss-deep);
  text-wrap: pretty;
}
.plate__mark {
  margin: auto 0 0; padding-top: 15px; border-top: var(--hair);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  color: var(--ink-38); line-height: 1.5;
}

/* the drawing field */
.plate__field {
  position: relative;
  min-width: 0;
  padding: var(--field-pad) clamp(34px, 4vw, 62px) var(--field-pad) var(--field-pad);
}
/* registration ticks, top corners of the field */
.plate__field::before, .plate__field::after {
  content: ""; position: absolute; top: 12px; width: 15px; height: 15px;
  border-top: 1px solid currentColor; border-left: 1px solid currentColor;
  opacity: .3; pointer-events: none;
}
.plate__field::before { left: 12px; }
.plate__field::after  { right: 46px; border-left: 0; border-right: 1px solid currentColor; }

/* running title, set up the trimmed edge of the sheet */
.plate__spine {
  position: absolute; right: 0; top: 0; bottom: 0; margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center;
  padding: 18px 11px;
  font-family: var(--tech); font-size: 9.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-38);
  pointer-events: none;
}
.plate--dark .plate__spine, .plate--forest .plate__spine { color: rgba(250, 248, 241, .42); }

/* the title block, at the foot of the plate */
.block {
  margin-top: clamp(30px, 4.4vw, 62px);
  padding-top: 13px;
  border-top: 2px solid currentColor;
  display: grid; gap: 9px;
  justify-items: start;
}
.block__ref {
  margin: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-38);
}
.plate--dark .block__ref, .plate--forest .block__ref { color: rgba(250, 248, 241, .48); }
.disp--plate { margin: 0; font-size: clamp(1.9rem, 4.1vw, 3.7rem); max-width: 20ch; }
.plate--dark .disp--plate { color: var(--sage); }

/* registers — two runs of content set one above the other on one plate */
.register { margin: 0 0 clamp(30px, 4vw, 58px); }
.register--notes {
  background: var(--clay); color: #241a13;
  border: 1px solid rgba(36, 26, 19, .28);
  padding: clamp(20px, 2.6vw, 34px);
  margin-left: clamp(0px, -2vw, -26px);
}
.register__mark {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: var(--tech); font-size: 10.5px; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase; color: var(--ink-38);
  padding-bottom: 8px; border-bottom: var(--hair);
}
.register--notes .register__mark { color: rgba(36, 26, 19, .62); border-bottom-color: rgba(36, 26, 19, .28); }

.cols {
  margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(22px, 3.4vw, 54px);
}
.cols .work__body { margin: 0; }
.work__body { font-size: 1rem; line-height: 1.72; max-width: 46ch; }

.facts {
  margin: clamp(34px, 5vw, 62px) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0; border-top: var(--hair);
}
.facts > div {
  border-right: var(--hair); padding: 12px 16px 12px 0;
}
.facts > div:last-child { border-right: 0; }
.facts dt {
  font-size: 10px; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--ink-38);
}
.facts dd {
  margin: 2px 0 0; font-family: var(--grotesk); font-weight: 700;
  font-stretch: 74%; text-transform: uppercase; font-size: 1.9rem; line-height: 1;
}

/* ── work list ──────────────────────────────────────────────────────── */

.works {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(34px, 5vw, 76px);
}
.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(22px, 4vw, 62px);
  align-items: start;
  border-top: var(--hair); padding-top: clamp(18px, 2.4vw, 34px);
}
.work:nth-child(even) .work__fig { order: -1; }
.work__txt > .lab { color: var(--clay); margin: 0 0 1.3em; }
.work__txt h3 { margin-bottom: .35em; }
.work__txt .cap { margin-top: 1.1em; }
.work__mat {
  margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-38);
}
.work__mat b { color: var(--ink-38); font-weight: 600; margin-right: .8em; }
.work__matv { color: var(--moss-deep); }

.work__fig { margin: 0; }
.render {
  display: block; width: 100%; height: auto;
  border: var(--hair);
  background: var(--limestone);
  --r-wall: #EDE7DA; --r-roof: #C8D0BA; --r-floor: #DCD3C0;
  --r-glass: #C8D0BA; --r-plant: #5E6F4D; --r-sky: #FAF8F1;
}
.work__fig figcaption { margin-top: 8px; }

.r-sky { fill: var(--r-sky); }
.r-far { fill: var(--r-plant); fill-opacity: .12; }
.r-wall { fill: var(--r-wall); stroke: var(--ink); stroke-width: 1.4; }
.r-roof { fill: var(--r-roof); stroke: var(--ink); stroke-width: 1.4; }
.r-void { fill: var(--limestone); stroke: var(--ink); stroke-width: 1.2; }
.r-glass rect { fill: var(--r-glass); fill-opacity: .7; stroke: var(--ink); stroke-width: 1; }
.r-glass path { fill: none; stroke: var(--ink-60); stroke-width: .9; }
.r-floor { fill: var(--r-floor); stroke: var(--ink); stroke-width: 1.4; }
.r-grnd { stroke: var(--ink); stroke-width: 2; fill: none; }
.r-stem, .r-twig { fill: none; stroke: var(--r-plant); stroke-width: 2.4; stroke-linecap: round; }
.r-canopy { fill: var(--r-plant); fill-opacity: .82; stroke: var(--forest); stroke-width: 1; }
.r-canopy--2, .r-canopy--3, .r-canopy--4 { fill-opacity: .55; }
.r-fig { fill: none; stroke: var(--clay); stroke-width: 2; stroke-linecap: round; }

/* swatches — a material set, drawn as chips */
.swatches { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 12px; }
.swatch {
  appearance: none; cursor: pointer; padding: 0;
  width: 46px; height: 46px; position: relative;
  border: 1px solid var(--ink-38);
  background: var(--c, var(--sage));
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease;
}
.swatch::after {
  content: attr(data-short);
  position: absolute; inset: auto 0 -17px 0; text-align: center;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-38);
}
.swatch:hover { transform: translateY(-3px); }
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--clay);
  transform: translateY(-3px);
}
.swatch[aria-pressed="true"]::after { color: var(--clay); }
/* the five materials, as they appear as chips and drawer samples */
.chip--limestone { --c: #EDE7DA; }
.chip--timber    { --c: #B8795B; }
.chip--glass     { --c: #C8D0BA; }
.chip--moss      { --c: #5E6F4D; }
.chip--concrete  { --c: #B4B0A4; }
.chip--limestone::before { content: ""; position: absolute; inset: 5px 6px 12px 5px;
  border: 1px solid var(--ink-20); }
.chip--timber::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(38,49,38,.22) 5px 6px); }
.chip--glass::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(128deg, transparent 34%, rgba(250,248,241,.85) 46%, transparent 58%); }
.chip--moss::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 34%, rgba(38,49,38,.4) 0 2px, transparent 2px),
              radial-gradient(circle at 66% 60%, rgba(38,49,38,.34) 0 3px, transparent 3px),
              radial-gradient(circle at 44% 78%, rgba(38,49,38,.28) 0 2px, transparent 2px); }
.chip--concrete::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 40% 40%, rgba(38,49,38,.16) 0 1px, transparent 1px),
              radial-gradient(circle at 70% 66%, rgba(38,49,38,.13) 0 1px, transparent 1px); }

/* ── construction sequence ──────────────────────────────────────────── */

.seq {
  margin: 0;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: clamp(24px, 4vw, 60px); align-items: start;
}
/* the readout sits under the drawing: it is the annotation for that figure */
.seq__ctl { grid-column: 1 / -1; }
.seq__ctl > .lab { display: block; margin-bottom: 6px; }
.seq__read {
  margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(250, 248, 241, .3);
}
.seq__fig { margin: 0; border: var(--hair); background: rgba(250, 248, 241, .05); }
.tl { display: block; width: 100%; height: auto; }
.tl g[data-layer] { opacity: 0; transition: opacity 420ms ease; }
.tl[data-stage="1"] g[data-layer="1"],
.tl[data-stage="2"] g[data-layer="2"],
.tl[data-stage="3"] g[data-layer="3"],
.tl[data-stage="4"] g[data-layer="4"],
.tl[data-stage="5"] g[data-layer="5"],
.tl[data-stage="6"] g[data-layer="6"],
.tl[data-stage="7"] g[data-layer="7"] { opacity: 1; }

.tl-grnd { stroke: var(--sage); stroke-width: 2; fill: none; }
.tl-txt { font-family: var(--tech); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; fill: var(--sage); opacity: .7; }
.tl-dash { fill: none; stroke: var(--sage); stroke-width: 1.4; stroke-dasharray: 10 8; opacity: .8; }
.tl-thin { fill: none; stroke: var(--sage); stroke-width: 1.2; opacity: .6; }
.tl-thick { fill: rgba(250, 248, 241, .07); stroke: var(--sage); stroke-width: 1.6; }
.tl-fill { fill: rgba(200, 208, 186, .14); stroke: none; }
.tl-hatchline { stroke: var(--sage); stroke-width: 1; opacity: .35; }
.tl-fillroof { fill: rgba(250, 248, 241, .1); stroke: var(--sage); stroke-width: 1.6; }
.tl-glass path { fill: none; stroke: var(--sage); stroke-width: 1; opacity: .55; }
.tl-pegs path { stroke: var(--clay); stroke-width: 2; }
.tl-serv path { fill: none; stroke: var(--clay); stroke-width: 1.4; stroke-dasharray: 6 4; }
.tl-serv circle { fill: var(--clay); }
.tl-plant path { fill: none; stroke: var(--sage); stroke-width: 2; stroke-linecap: round; }
.tl-plant circle { fill: var(--sage); fill-opacity: .5; stroke: var(--sage); }
.tl-fig path { fill: none; stroke: var(--clay); stroke-width: 2; stroke-linecap: round; }

.scrub {
  appearance: none; width: 100%; height: 34px; background: none;
  cursor: ew-resize; margin: 0 0 14px;
}
.scrub::-webkit-slider-runnable-track {
  height: 2px; background: var(--ink-38);
}
.scrub::-moz-range-track { height: 2px; background: var(--ink-38); }
.scrub::-webkit-slider-thumb {
  appearance: none; width: 15px; height: 26px; margin-top: -12px;
  background: var(--clay); border: 0; border-radius: 0;
  clip-path: polygon(50% 0, 100% 26%, 100% 100%, 0 100%, 0 26%);
}
.scrub::-moz-range-thumb {
  width: 15px; height: 26px; background: var(--clay); border: 0; border-radius: 0;
}
.scrub:focus-visible { outline: 2px solid var(--sage); outline-offset: 6px; }

.stages { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: s; }
.stages li {
  display: grid; grid-template-columns: 2.2em 1fr; gap: 10px;
  padding: 5px 0; border-top: 1px solid rgba(250, 248, 241, .14);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250, 248, 241, .34);
  cursor: pointer;
}
.stages li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--mono); letter-spacing: 0;
}
.stages li[aria-current="true"] { color: var(--paper); }
.stages li[aria-current="true"]::after {
  content: ""; grid-column: 2; height: 1px; background: var(--clay);
}
.stages li:hover { color: var(--paper); }

.seq__read {
  margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(250, 248, 241, .3);
}
.seq__read b {
  display: block; font-family: var(--grotesk); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; letter-spacing: .01em; font-size: 1.28rem;
  color: var(--paper); margin-bottom: 6px;
}
.seq__read span {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--sage); display: block;
}

/* ── 03 daylight ────────────────────────────────────────────────────── */

.sun {
  margin: 0;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, .8fr);
  gap: clamp(20px, 3.4vw, 48px); align-items: start;
}
.sunfig {
  display: block; width: 100%; height: auto;
  border: var(--hair); background: var(--limestone);
  touch-action: none; cursor: ew-resize; user-select: none;
}
.su-sky { fill: var(--paper-lift); }
.su-dash { fill: none; stroke: var(--ink-10); stroke-width: 1; stroke-dasharray: 7 9; }
.su-wall { fill: var(--limestone); stroke: var(--ink); stroke-width: 1.6; }
.su-slab { fill: var(--sage); stroke: var(--ink); stroke-width: 1.4; }
.su-floor { stroke: var(--ink); stroke-width: 2.4; fill: none; }
.su-ceil { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.su-thin { fill: var(--moss-deep); stroke: none; }
.su-arch { fill: none; stroke: var(--ink-60); stroke-width: 1.2; }
.su-win rect { fill: var(--paper-lift); stroke: var(--ink); stroke-width: 1.4; }
.su-win path { stroke: var(--ink); stroke-width: 1.4; }

.su-beam { fill: rgba(184, 121, 91, .3); stroke: var(--clay); stroke-width: 1.2; }
.su-pool { fill: rgba(184, 121, 91, .17); stroke: none; }
.su-shadow { fill: rgba(38, 49, 38, .1); stroke: none; }

.su-arc { fill: none; stroke: var(--ink-20); stroke-width: 1.2; stroke-dasharray: 3 4; }
.su-handle { cursor: grab; }
.su-handle:active { cursor: grabbing; }
.su-sun { fill: var(--clay); stroke: var(--clay-deep); stroke-width: 1.4; }
.su-grip { stroke: var(--clay-deep); stroke-width: 3; stroke-linecap: round; }
.su-dot { fill: var(--paper); }
.su-handle:focus-visible { outline: none; }
.su-handle:focus-visible .su-sun { stroke: var(--forest); stroke-width: 3; }

.sunout { margin: 0; border-top: 2px solid currentColor; }
.sunout > div {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: var(--hair);
}
.sunout dt {
  font-size: 10px; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--ink-38);
}
.sunout dd {
  margin: 0; font-family: var(--mono); font-size: 15px; color: var(--ink);
  text-align: right;
}
.sunout > div:last-child { display: block; border-bottom: 0; }
.sunout > div:last-child dd {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  text-align: left; margin-top: 4px; color: var(--moss-deep);
}

/* ── the notes register, toned like a panel laid over the sheet ─────── */

.notes-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(22px, 3.4vw, 52px);
}
.notes-list .work__body { margin: 0; }
.notes-list .lab { color: rgba(36, 26, 19, .62); margin: 0 0 1.1em; }
.notes-list h3 { color: #241a13; margin-bottom: .35em; }

/* ── enquiries, the last plate ──────────────────────────────────────── */

.enq { margin: 0; display: grid; gap: 6px; }
.enq__mail { margin: 12px 0 18px; }
.enq__mail a {
  font-family: var(--grotesk); font-weight: 700; font-stretch: 74%;
  text-transform: uppercase; text-decoration: none; color: var(--paper);
  font-size: clamp(1.5rem, 4.2vw, 3.6rem); line-height: 1.02;
  /* an address is one unbreakable token, so it has to be allowed to break */
  overflow-wrap: anywhere;
  border-bottom: 3px solid var(--clay); padding-bottom: 4px;
}
.enq__mail a:hover { color: var(--clay); border-bottom-color: var(--sage); }
.enq__addr {
  font-family: var(--serif); font-style: italic; font-size: 1.02rem;
  color: var(--sage); line-height: 1.6;
}
.enq__reg {
  margin: 26px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(250, 248, 241, .2);
  font-size: 10px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(250, 248, 241, .45);
}

/* ── the material drawer ────────────────────────────────────────────── */

.drawer { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; pointer-events: none; }
.drawer__tab {
  /* inset from the trimmed edge: the tab is mounted on the sheet, not
     running off the side of it */
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 9px;
  writing-mode: vertical-rl;
  background: var(--forest); color: var(--paper);
  border: 0; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(38, 49, 38, .28), 3px 3px 16px -6px rgba(38, 49, 38, .8);
}
.drawer__tabmark {
  width: 13px; height: 13px; flex: none; background: var(--clay);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.drawer__tabtxt {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; line-height: 1.5;
}
.drawer__tab:hover { background: #1A2219; }
.drawer__tab[aria-expanded="true"] { background: var(--clay); color: #241a13; }
.drawer__tab[aria-expanded="true"] .drawer__tabmark { background: var(--paper); }

.drawer__body {
  pointer-events: auto;
  position: absolute; left: 0; top: 0; bottom: 0;
  width: min(310px, 84vw);
  background: var(--limestone);
  border-right: 2px solid var(--forest);
  padding: 76px 22px 24px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; gap: 14px;
}
.drawer[data-open="true"] .drawer__body { transform: translateX(0); }
.drawer__body[hidden] { display: flex; }

.drawer__for {
  margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--ink-38);
}
.drawer__for b {
  display: block; margin-top: 3px; font-family: var(--grotesk); font-weight: 700;
  font-stretch: 76%; text-transform: uppercase; letter-spacing: .01em;
  font-size: 1.16rem; color: var(--ink);
}
.drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.samp {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  padding: 8px; background: var(--paper); border: 1px solid var(--ink-20);
  color: inherit; font: inherit;
  transition: border-color 200ms ease, transform 200ms ease;
}
.samp:hover { border-color: var(--clay); transform: translateX(3px); }
.samp[aria-pressed="true"] { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.samp__chip { width: 54px; height: 54px; border: 1px solid var(--ink-38); position: relative; background: var(--c); }
.samp__chip::before { content: ""; position: absolute; inset: 0; }
.chip--limestone.samp__chip::before { border: 1px solid var(--ink-20); margin: 5px; }
.chip--timber.samp__chip::before {
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(38,49,38,.22) 6px 7px); }
.chip--glass.samp__chip::before {
  background: linear-gradient(128deg, transparent 34%, rgba(250,248,241,.9) 46%, transparent 58%); }
.chip--moss.samp__chip::before {
  background: radial-gradient(circle at 30% 34%, rgba(38,49,38,.4) 0 3px, transparent 3px),
              radial-gradient(circle at 66% 60%, rgba(38,49,38,.34) 0 4px, transparent 4px),
              radial-gradient(circle at 44% 78%, rgba(38,49,38,.28) 0 3px, transparent 3px); }
.chip--concrete.samp__chip::before {
  background: radial-gradient(circle at 40% 40%, rgba(38,49,38,.16) 0 2px, transparent 2px),
              radial-gradient(circle at 70% 66%, rgba(38,49,38,.13) 0 2px, transparent 2px); }
.samp__name {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; display: block;
}
.samp__spec {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-38);
  display: block; margin-top: 3px; line-height: 1.5;
}
.samp__src { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--moss-deep); }
.drawer__note {
  margin: 6px 0 0; padding-top: 12px; border-top: var(--hair);
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--moss-deep); line-height: 1.5;
}

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .masthead { grid-template-columns: auto 1fr; row-gap: 6px; }
  .masthead__nav { grid-column: 1 / -1; overflow-x: auto; }
  .masthead__line { font-size: .82rem; }
  .stage { grid-template-columns: 1fr; }
  .notes { display: none; }
  .work { grid-template-columns: 1fr; }
  .work:nth-child(even) .work__fig { order: 0; }
  .seq, .sun { grid-template-columns: 1fr; }
  .plate { --rail-w: clamp(96px, 11.5vw, 168px); }
}

/* below this the margin cannot run down the side of the sheet, so it turns
   into the sheet header: reference left, annotation right, drawing under it */
@media (max-width: 820px) {
  .plate { grid-template-columns: minmax(0, 1fr); }
  .plate__rail {
    border-right: 0; border-bottom: 1px solid var(--ink);
    padding: 15px var(--gut) 14px;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: start; column-gap: clamp(14px, 3vw, 28px); row-gap: 8px;
  }
  .plate__note { margin: 0; padding: 0; border-top: 0; grid-column: 2; }
  .plate__mark { grid-column: 1; margin: 0; padding: 0; border-top: 0; }
  .plate__field {
    padding: clamp(20px, 5vw, 34px) clamp(30px, 7vw, 44px) clamp(20px, 5vw, 34px) var(--gut);
  }
  .plate__field::after { right: 30px; }
  .plate__spine { display: none; }
  .register--notes { margin-left: 0; }
  .seq, .sun { grid-template-columns: 1fr; }
  .facts > div { border-right: 0; border-bottom: var(--hair); }
}

/* the plan sheet is one drawing at a fixed 760 x 560; --k is the only thing
   that changes with the viewport, and every dimension on it is derived from
   it. --kz is its reciprocal: the annotation on the sheet is set in sheet
   units and scaled with the drawing, so a floor on it has to be divided by
   that same factor to survive on the screen. */
@media (max-width: 1080px) { .plan__frame { --k: .92; --kz: 1.087; } }
@media (max-width: 860px)  { .plan__frame { --k: .82; --kz: 1.22; } }
@media (max-width: 760px)  { .plan__frame { --k: .74; --kz: 1.351; } }
@media (max-width: 620px)  { .plan__frame { --k: .62; --kz: 1.613; } }
@media (max-width: 520px)  { .plan__frame { --k: .48; --kz: 2.083; } }
@media (max-width: 430px)  { .plan__frame { --k: .40; --kz: 2.5; } }
@media (max-width: 360px)  { .plan__frame { --k: .34; --kz: 2.941; } }

/* the construction-sequence drawing is 900 units wide and scales the same way */
@media (max-width: 860px) { .tl-txt { font-size: 14px; } }
@media (max-width: 760px) { .tl-txt { font-size: 15px; } }
@media (max-width: 620px) { .tl-txt { font-size: 16px; } }
@media (max-width: 520px) { .tl-txt { font-size: 20px; letter-spacing: .1em; } }
@media (max-width: 430px) { .tl-txt { font-size: 25px; letter-spacing: .08em; } }
@media (max-width: 360px) { .tl-txt { font-size: 30px; letter-spacing: .06em; } }
/* The plan and the section are drawn at 1200- and 760-unit widths and scaled
   down to fit. Their annotation is set in the same units as the drawing, so
   below 860 the annotation is stepped up against --k to hold a readable size
   on the sheet instead of shrinking to four points with the geometry. */
@media (max-width: 860px) {
 .sect__txt, .sect__cap { font-size: 17px; letter-spacing: .12em; }
 .sect__dim text { font-size: 16px; }
 .scalebar text { font-size: 15px; }
 .art__dim text { font-size: 14px; }
 .art__north text { font-size: 15px; }
}
/* At these sizes the annotation is knocked out of the linework behind it, the
   way a section mark is drawn on a real sheet — a paper-coloured halo under
   the glyphs, so the note stays readable where it crosses a tree. */
@media (max-width: 860px) {
 .sect__cap, .sect__txt, .sect__dim text, .scalebar text, .art__dim text,
 .art__north text, .tl-txt {
   paint-order: stroke fill;
   stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round;
 }
 .plate--dark .tl-txt { stroke: var(--forest); }
}
@media (max-width: 760px) {
 .sect__txt, .sect__cap { font-size: 19px; letter-spacing: .1em; }
 .sect__dim text { font-size: 18px; }
 .scalebar text { font-size: 17px; }
 .art__dim text { font-size: 15px; }
 .art__north text { font-size: 16px; }
}
@media (max-width: 620px) {
 .sect__txt, .sect__cap { font-size: 22px; letter-spacing: .08em; }
 .sect__dim text { font-size: 21px; }
 .scalebar text { font-size: 20px; }
 .art__dim text { font-size: 18px; }
 .art__north text { font-size: 19px; }
}
@media (max-width: 520px) {
 .sect__txt, .sect__cap { font-size: 26px; letter-spacing: .06em; }
 .sect__dim text { font-size: 25px; }
 .scalebar text { font-size: 23px; }
 .art__dim text { font-size: 23px; }
 .art__north text { font-size: 24px; }
 .zone__name, .zone__tag { letter-spacing: .07em; }
}
@media (max-width: 430px) {
 .sect__txt, .sect__cap { font-size: 34px; letter-spacing: .05em; }
 .sect__dim text { font-size: 34px; }
 .scalebar text { font-size: 32px; }
 /* the two A markers sit 20 units apart, so they grow by dropping the
    tracking rather than by overlapping each other */
 .sect__cut text { font-size: 30px; letter-spacing: 0; }
 .art__dim text { font-size: 28px; }
 .art__north text { font-size: 29px; }
 .zone__name, .zone__tag { letter-spacing: .06em; }
}
@media (max-width: 360px) {
 .sect__txt, .sect__cap { font-size: 38px; letter-spacing: .04em; }
 .sect__dim text { font-size: 36px; }
 .scalebar text { font-size: 34px; }
 .art__dim text { font-size: 32px; }
 .art__north text { font-size: 33px; }
}
@media (max-width: 360px) {
 .sect__cut text { font-size: 34px; letter-spacing: 0; }
}

@media (max-width: 760px) {
  .tb { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .sect { min-height: 132px; }
  .zone__tag { display: none; }
}

@media (max-width: 520px) {
  .swatches { gap: 14px; }
  .swatch { width: 40px; height: 40px; }
  .drawer__tab { left: 9px; padding: 12px 7px; }
}

/* ── reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* growth still lands, it simply arrives already grown */
  .lf-fill, .lf-vein path, .tp-ring, .tp-cross { animation: none !important; }
  .lf-vein path, .tp-ring, .tp-cross { stroke-dashoffset: 0; }
  .lf-fill { transform: none; opacity: 1; }
  /* and the plan is already standing */
  .planplate { transform: rotateX(58deg) rotateZ(-45deg); }
  .zone3d .wb { transform: rotateX(131.5deg) scaleY(1); opacity: 1; }
  .canopy { transform: rotateX(-131.5deg) scale(1); }
  /* the ambient layers stop, but they stop where they were already composed:
     the shadow still lies across the sheet and the light still falls on it */
  .sheet::after, .hero::after, .sect, .stage, .sect__sun,
  .plate--dark::after, .plate--forest::after {
    animation: none !important;
    transform: none;
  }
}