/* ════════════════════════════════════════════════════════════════════
   EDITORIAL.CSS — the quiet-luxury layer (builder B · design system)
   Loads AFTER sections3.css and overrides. One file, eight moves, in the
   order the brief lists them:

     1 TOKENS      spacing · radii · motion · type roles · hairlines · bone
     2 RHYTHM      section paddings by breakpoint · measures · tracking
     3 BUTTONS     gold primary · ghost · arrow nudge · focus sitewide
     4 BOX CUTS    #method editorial list · #work plaques → hairline+type
     5 NEW BEATS   #band (credibility line) · #floors (numbered themes)
     6 MOBILE NAV  .nav-toggle + .nav-links drawer (the contract)
     7 MOTION      150–300ms UI via tokens · reduced-motion strips UI tweens
     8 RESPONSIVE  gutters · balance · no horizontal scroll

   Standing rules honoured here: the night-to-morning photographic world
   stays; the bone palette is used ONLY on #method/#blueprint/#about; no
   scroll-triggered reveals; scenes handle their own reduced-motion.
   Role discipline: Clash Display = display only (h1, h2 bold halves,
   numerals, brass engraving) · Manrope = body/UI/buttons/forms · Fraunces
   italic = one keystone line per section · JetBrains Mono = instruments
   and eyebrows at 10–11px · Caveat = at most one handwritten note.
   Every override is scoped by section id or the twx2/kd class it retires
   and commented by purpose. Nothing here touches the tower3 scene.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1 · TOKENS
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* spacing scale — the brief's eleven stops (4 … 160); --s-1 = 4px */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;

  /* radii — panels 12, large surfaces 20, buttons 8 */
  --r-panel:12px; --r-hero:20px; --r-btn:8px;

  /* motion — UI only; the scenes keep their own clocks */
  --dur-1:150ms; --dur-2:220ms; --dur-3:300ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* type roles */
  --t-display:clamp(2.6rem, 6.2vw, 5.6rem);   /* h1 — Clash Display */
  --t-h2:clamp(2.1rem, 4.2vw, 4.2rem);        /* section h2 */
  --t-h3:clamp(1.25rem, 1.4vw, 1.4rem);       /* list/step titles — Manrope 600 */
  --t-body:17px;                              /* running copy */
  --t-small:14px;                             /* secondary copy, captions */
  --t-mono:10.5px;                            /* instruments + eyebrows, tracked */
  --measure:62ch;

  /* hairlines — always rgba, never a gray border */
  --hair-night:rgba(232,200,119,.16);
  --hair-night-firm:rgba(232,200,119,.3);
  --hair-paper:rgba(21,21,18,.14);
  --hair-paper-firm:rgba(21,21,18,.3);

  /* night inks */
  --night:#0a0906;
  --gold:#e8c877;
  --gold-lift:#f0d48a;
  --cream-ed:#efe6d2;
  --cream-mute-ed:rgba(239,230,210,.66);

  /* bone palette — used ONLY on #method / #blueprint / #about
     (the paper itself comes from the plates; these are the inks) */
  --bone:#f4f2ec;
  --ink:#151512;
  --ink-muted:#52524a;
  --espresso:#2a2119;

  /* section rhythm — desktop 128 · tablet 80 · mobile 56 */
  --sec-pad:var(--s-10);
  --sec-pad-band:var(--s-9);   /* the one-line band breathes at 96 so it reads as a pause, not a void */

  /* hero geometry, derived from tower3.css (.twr3 right/width) and .wrap —
     the h1 measure is computed from these so the headline always clears
     the scene's rail while the two share a row (≥1101px) */
  --ed-scene-left:calc(100vw - max(2vw, 50vw - 720px) - min(46vw, 640px));
  --ed-copy-left:calc(max(24px, 4vw) + max(0px, 50vw - 600px));
}
@media (max-width:1023.98px){ :root{ --sec-pad:80px; --sec-pad-band:64px; } }
@media (max-width:767.98px){ :root{ --sec-pad:56px; --sec-pad-band:48px; } }

/* ════════════════════════════════════════════════════════════════════
   2 · RHYTHM — paddings, measures, tracking, line-height
   ════════════════════════════════════════════════════════════════════ */
/* .kd-section carries the rhythm wherever a section has no inner shell;
   the photographic beats zero it (sections2) and carry it on their
   wrappers, so the same token lands on those. */
.kd-section{ padding:var(--sec-pad) 0; }
#band{ padding:var(--sec-pad-band) 0; }
#floors{ padding:var(--sec-pad) 0; }
.twx2-lobby, .twx2-table, .twx2-morning{ padding:var(--sec-pad) 0; }
#work{ padding-top:var(--sec-pad); }
.twx2-street{ padding-bottom:var(--sec-pad); }
@media (max-width:960px){
  .twx2-lobby, .twx2-table, .twx2-morning{ padding:var(--sec-pad) 0; }
}

/* body copy: 17px / 1.65, capped at the measure */
body.kd{ font-size:16px; line-height:1.65; }
.kd-para, .kd-ghost-sub, .twx2-draft-sub, .kd-hero-lede,
#band p, #floors p, .ed-step p, .ed-floor p{
  font-size:var(--t-body); line-height:1.65; text-wrap:pretty;
}
#platform .kd-para, #method .kd-para, #work .twx2-win-sub, .twx2-draft-sub{
  font-size:var(--t-body); line-height:1.65;
}
.kd-para, .kd-ghost-sub, .twx2-draft-sub, .kd-hero-lede, .twx2-dawn-small,
#band p, #floors p, .ed-step p, .ed-floor p, .intake-note, .foot-legal{
  max-width:min(var(--measure), 100%);
}
#platform .kd-para{ margin:var(--s-5) 0 var(--s-6); }
#method .kd-para{ margin:var(--s-5) 0 0; }

/* headings: tracking -.02em, balanced wraps, no orphans where the engine allows */
h1, h2, .kd-two, .kd-ghost{ letter-spacing:-.02em; text-wrap:balance; }
#platform .kd-two, #method .kd-two, #blueprint .kd-two, #floors .kd-two{
  font-size:var(--t-h2); line-height:1.04; letter-spacing:-.02em;
}
#work .kd-ghost{ letter-spacing:-.02em; }

/* ── HERO h1: the display role, Clash Display at the brief's scale.
   ai.css zeroes the hero wrap's side padding (copy sat at x=0 under
   1200px); the gutter comes back so the hero shares the site grid. While
   the scene shares the row the h1's measure is the computed distance to
   the scene's rail, and its size caps at 5.2vw / 84px so the line never
   reaches the timeline; below 1100 the scene is behind the words and the
   full display token applies. */
.kd-hero-inner{ padding-left:max(24px, 4vw); padding-right:max(24px, 4vw); }
.kd-hero-copy h1{
  font-family:var(--display); font-weight:600;
  font-size:min(var(--t-display), 5.2vw, 5.25rem); line-height:1.0; letter-spacing:-.025em;
  color:rgba(239,230,210,.8);
  max-width:calc(var(--ed-scene-left) - var(--ed-copy-left) - 14px);
}
.kd-hero-copy h1 b{ font-weight:700; color:#fbf3df; }
.kd-hero-lede{ margin-top:var(--s-5); color:var(--cream-mute-ed); }
.kd-phil{ margin-top:var(--s-6); }
@media (max-width:1100px){
  /* the scene sits behind the words here — the measure can breathe */
  .kd-hero-copy h1{ font-size:var(--t-display); max-width:14ch; }
}
@media (max-width:767.98px){
  .kd-hero-copy h1{ max-width:100%; }
}

/* ── the instrument floor: no mono under 10px, one register sitewide ── */
.kd-pill, .kd-hero-facts span,
.twx2-board-sub, .twx2-floor, .twx2-status, .twx2-board-foot,
.twx2-wintag, .twx2-draft .builder-step, .twx2-tb-cell i, .twx2-permit i,
.bp-title, .bp-status, .mono-label{
  font-size:var(--t-mono);
}
@media (max-width:600px){
  .twx2-status, .twx2-board-sub, .twx2-board-foot, .twx2-tb-cell i, .bp-title, .bp-status{ font-size:10px; }
}
/* running text that had been set in mono moves to the body face */
.twx2-dsub{
  font-family:var(--sans); font-size:13px; letter-spacing:0; line-height:1.4;
  color:rgba(239,230,210,.5); -webkit-text-fill-color:rgba(239,230,210,.5);
}
@media (max-width:600px){ .twx2-dsub{ font-size:12px; } }

/* ── role discipline: display face on the brass, not the serif roman ── */
.twx2-board-title{ font-family:var(--display); font-weight:600; letter-spacing:.3em; }
.twx2-dname{ font-family:var(--display); font-weight:600; font-size:19px; }
@media (max-width:600px){ .twx2-dname{ font-size:15.5px; } }
.twx2-draft .intake-done h3{ font-family:var(--display); font-weight:600; letter-spacing:-.01em; }
/* keystone rule: one Fraunces-italic line per section — the close keeps
   its dawn line; the second line steps into the body face */
#about .twx2-dawn-line2{ font-family:var(--sans); font-style:normal; font-weight:400; }
#about .twx2-dawn-line2 em{ font-family:var(--sans); font-style:normal; font-weight:600; color:#ffd98f; }

/* ── small palette corrections: the old teal/green accents on a gold site ── */
::selection{ background:var(--gold); color:var(--night); }
.brand-word b{ color:var(--gold); }
main.sheet{ border-top-color:var(--hair-night); border-radius:var(--r-hero) var(--r-hero) 0 0; }
main.sheet::before{ background:linear-gradient(90deg, rgba(232,200,119,0), rgba(232,200,119,.75), rgba(232,200,119,0)); opacity:.6; }
footer{ border-top:1px solid var(--hair-night); padding:var(--s-8) 0 var(--s-7); }
.foot-legal{ font-size:13px; color:rgba(239,230,210,.5); }
.foot-legal a{ display:inline-block; padding:var(--s-3) 0; color:rgba(239,230,210,.78); border-bottom:1px solid var(--hair-night-firm); transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.foot-legal a:hover{ color:var(--cream-ed); border-bottom-color:var(--gold); }

/* ════════════════════════════════════════════════════════════════════
   3 · BUTTONS, LINKS, FOCUS, TAP TARGETS
   ════════════════════════════════════════════════════════════════════ */
/* gold-on-night primary — the brand's deep-colour primary, refined:
   8px radius, 16/28 padding, 600 weight, lift + brighten on hover */
.kd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:var(--s-4) 28px; border-radius:var(--r-btn);
  font-family:var(--sans); font-weight:600; font-size:15px; line-height:1.2; letter-spacing:.005em;
  background:var(--gold); color:var(--night); border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.kd-btn:hover{
  transform:translateY(-1px); background:var(--gold-lift);
  box-shadow:0 10px 28px rgba(232,200,119,.22), 0 2px 6px rgba(0,0,0,.28);
}
.kd-btn:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(232,200,119,.16); transition-duration:var(--dur-1); }
.kd-btn:focus-visible{ outline:2px solid rgba(239,230,210,.95); outline-offset:3px; }
/* ghost: transparent + hairline (the dawn close recolours it for its plate) */
.kd-btn-ghost{ background:transparent; color:var(--cream-ed); border-color:var(--hair-night-firm); }
.kd-btn-ghost:hover{ background:rgba(232,200,119,.06); border-color:rgba(232,200,119,.5); box-shadow:none; }

/* the form's primary is the same button */
.twx2-draft .intake-send, .intake-send{
  min-height:44px; padding:var(--s-3) var(--s-5); border-radius:var(--r-btn);
  font-family:var(--sans); font-weight:600; font-size:15px;
  transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.twx2-draft .intake-send:hover{ transform:translateY(-1px); background:var(--gold); }
.twx2-draft .intake-send:active{ transform:translateY(0); transition-duration:var(--dur-1); }
.intake-email{ min-height:44px; }
.twx2-draft .intake-email, .twx2-draft .intake-box{ border-radius:var(--r-btn); }
.twx2-draft .chip{ min-height:36px; border-radius:6px; transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }

/* inline CTAs: the arrow nudges 4px along its own direction on hover */
.kd-explore{ min-height:44px; gap:12px; transition:color var(--dur-2) var(--ease); }
.kd-explore .kd-circ{
  transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.kd-explore:hover .kd-circ{ transform:translate(3px,-3px); } /* ≈4px along ↗ */
.ed-link{
  display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px;
  font-family:var(--sans); font-weight:600; font-size:15px; color:var(--cream-ed);
  text-decoration:none; transition:color var(--dur-2) var(--ease);
}
.ed-link:hover{ color:#fff8e6; }
.ed-link:not(:has(.ed-arrow, svg))::after{ content:"→"; }
.ed-link::after, .ed-link .ed-arrow, .ed-link > svg{
  display:inline-block; color:var(--gold);
  transition:transform var(--dur-2) var(--ease);
}
.ed-link:hover::after, .ed-link:hover .ed-arrow, .ed-link:hover > svg{ transform:translateX(4px); }
/* ed-links standing on paper */
#method .ed-link, #blueprint .ed-link{ color:var(--ink); }
#method .ed-link::after, #blueprint .ed-link::after,
#method .ed-link .ed-arrow, #blueprint .ed-link .ed-arrow{ color:var(--espresso); }

/* focus, sitewide — a ring, never outline:none without a replacement.
   :where() keeps this at zero specificity so any component that draws its
   own focus (the tower rail, the intake box) still wins. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid rgba(239,230,210,.92); outline-offset:3px;
}
#method :where(a, button, input, textarea, [tabindex]):focus-visible,
#blueprint :where(a, button, input, textarea, [tabindex]):focus-visible,
#about :where(a, button, input, textarea, [tabindex]):focus-visible{
  outline-color:var(--espresso);
}
.twx2-draft .chip:focus-visible, .twx2-draft .intake-email:focus-visible, .twx2-draft .intake-send:focus-visible{
  outline:2px solid var(--espresso); outline-offset:3px;
}
.twx2-draft .intake-box:focus-within{ box-shadow:0 0 0 2px rgba(42,33,25,.55); }

/* touch: every control ≥ 44px */
@media (pointer:coarse), (max-width:899.98px){
  .twx2-draft .chip{ min-height:44px; padding:10px 16px; }
  .twx2-drow{ min-height:44px; align-items:center; }
  .kd-explore, .ed-link{ min-height:48px; }
}

/* ════════════════════════════════════════════════════════════════════
   4 · BOX REDUCTION
   ════════════════════════════════════════════════════════════════════ */

/* ── #method: from five pinned sheets to one editorial numbered list.
   The vellum card, its tape, the tacks, the rotations, the red-pencil
   underlines and the slip all retire. Type, hairlines and whitespace do
   the work. The drafting plate stays but steps back: it moves to a
   blurred ::before layer (depth of field on the desk — same crop, same
   plate) under a bone veil carried by .twx2-table, so 17px ink reads on
   the photographed table without a card. No edges are drawn. ── */
#method{ background:#7a7060; }
#method::before{
  content:""; position:absolute; inset:-28px; z-index:0; pointer-events:none;
  background:url('/media/plates2/drafting.webp') 12% 92% / auto 175% no-repeat #7a7060;
  filter:blur(3px) saturate(.85);
}
#method .twx2-table{
  position:relative; z-index:1;
  background:
    linear-gradient(180deg, rgba(24,20,13,.72), rgba(24,20,13,0) 180px),
    linear-gradient(180deg, rgba(244,242,236,.26), rgba(244,242,236,.42)),
    radial-gradient(130% 90% at 50% 40%, rgba(0,0,0,0) 62%, rgba(24,20,12,.14) 100%);
}
#method .twx2-method2{ gap:var(--s-9); }
#method .twx2-brief{
  padding:0; transform:none; border-radius:0;
  background:none; box-shadow:none;
}
#method .twx2-brief::after{ display:none; }              /* tape */
#method .twx2-brief::before{                             /* the pool, not the sheet */
  content:""; position:absolute; inset:-56px -72px -48px -64px; z-index:0;
  width:auto; height:auto; transform:none; box-shadow:none; opacity:1; pointer-events:none;
  background:radial-gradient(78% 78% at 44% 42%, rgba(244,242,236,.66), rgba(244,242,236,.3) 58%, transparent 80%);
}
#method .twx2-brief > *{ position:relative; z-index:1; }
#method .twx2-brief .kd-two b{ color:var(--ink); }
#method .twx2-brief .kd-two em{ color:var(--espresso); }
#method .twx2-brief .kd-para{ color:var(--ink-muted); max-width:min(46ch, 100%); }

/* the notice: a hairline-left aside, no slip, no rotation */
#method .twx2-permit{
  display:block; margin-top:var(--s-6); padding:var(--s-1) 0 var(--s-1) var(--s-5);
  border:0; border-left:1px solid var(--hair-paper-firm); border-radius:0;
  background:none; box-shadow:none; transform:none;
}
#method .twx2-permit i{ letter-spacing:.24em; color:var(--espresso); margin-bottom:var(--s-2); }
#method .twx2-permit b{ font-family:var(--sans); font-style:normal; font-weight:500; font-size:var(--t-body); line-height:1.5; color:var(--ink); }
/* the one Caveat note in #method is the signature; the "five sheets" margin
   note described the pinned sheets and retires with them */
#method .twx2-permit-sign{ color:var(--espresso); }
#method .twx2-table-note{ display:none; }

/* the list — legacy .twx2-notes markup and A's .ed-steps both land here */
#method .twx2-notes, .ed-steps{
  list-style:none; margin:0; padding:0; counter-reset:ed-step;
  border-top:1px solid var(--hair-paper-firm);
}
#method .twx2-notes li, .ed-step{
  position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--s-5);
  align-items:start; margin:0; padding:var(--s-5) 0 var(--s-5);
  border-bottom:1px solid var(--hair-paper); border-radius:0;
  background:none; box-shadow:none; transform:none;
}
#method .twx2-notes li::before{ display:none; }          /* brass tack */
#method .twx2-notes li em::after{ display:none; }        /* red pencil */
#method .twx2-notes li:nth-child(n){ transform:none; }   /* hand-laid rotations */

/* NUMERALS: Clash Display (the display role) — Fraunces italic is reserved
   for the section's single keystone line, so the numerals take the display
   face at 600, tabular, in muted espresso. */
.ed-step-num, .ed-step > em, .ed-step > i{
  font-family:var(--display); font-style:normal; font-weight:600;
  font-size:clamp(38px, 3.6vw, 52px); line-height:.9; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:rgba(42,33,25,.42);
  padding-top:2px;
}
/* legacy sheet numbers ("A-01") read as an instrument label instead */
#method .twx2-notes li em{
  position:static; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.2em;
  color:var(--espresso); padding-top:6px;
}
.ed-step h3, .ed-step > div > b, #method .twx2-notes b{
  display:block; margin:0 0 var(--s-2);
  font-family:var(--sans); font-weight:600; font-size:var(--t-h3); line-height:1.25;
  letter-spacing:-.005em; color:var(--ink);
}
.ed-step p, .ed-step > div > span, #method .twx2-notes span{
  display:block; margin:0; font-family:var(--sans);
  font-size:var(--t-body); line-height:1.65; color:var(--ink-muted); max-width:min(var(--measure), 100%);
}
/* the one Caveat note allowed in a step list, if A writes one */
.ed-steps .ed-note{
  display:inline-block; margin-top:var(--s-3);
  font-family:"Caveat",cursive; font-weight:500; font-size:20px; line-height:1.2;
  color:var(--espresso); transform:rotate(-1.6deg);
}
@media (max-width:960px){
  #method .twx2-method2{ gap:var(--s-7); }
  #method .twx2-brief::before{ inset:-40px -40px -32px -40px; }
}
@media (max-width:560px){
  #method .twx2-brief{ padding:0; }
  #method .twx2-notes li, .ed-step{ grid-template-columns:64px minmax(0,1fr); gap:var(--s-4); padding:var(--s-5) 0; }
  #method .twx2-notes li em{ left:auto; }
  .ed-step-num, .ed-step > em, .ed-step > i{ font-size:34px; }
}

/* ── #blueprint: the paper world calms toward bone; the sheet stays (it is
   the form). Same blurred-plate move as #method, half the blur — the
   morning sharpens as it comes up — and a lighter veil, so the exposure
   arc still ascends method < blueprint < about. ── */
#blueprint{ background:#6d6455; }
#blueprint::before{
  content:""; position:absolute; inset:-20px; z-index:0; pointer-events:none;
  background:url('/media/plates2/drafting.webp') 12% 88% / auto 170% no-repeat #6d6455;
  filter:blur(2px) saturate(.9);
}
#blueprint .twx2-morning{
  position:relative; z-index:1;
  background:linear-gradient(180deg, rgba(244,242,236,.2), rgba(244,242,236,.34));
}
#blueprint .twx2-draft .kd-two b{ color:var(--ink); }
#blueprint .twx2-draft .kd-two em{ color:var(--espresso); }
.twx2-draft-sub{ color:var(--ink-muted); margin-top:var(--s-4); }
/* one Caveat note per section: the title block keeps the signature; the
   margin aside retires */
.twx2-margin-note{ display:none; }
.twx2-sheetwrap{ margin-top:var(--s-7); }
.twx2-cell{ padding:var(--s-5) var(--s-5) var(--s-5); }

/* ── #work: the plaques under the windows become hairline + type. The
   glazed windows stay — they are the product previews. ── */
#work .twx2-win .twx2-plaque{
  padding:10px 2px 0; gap:3px;
  background:none; border:0; border-top:1px solid rgba(232,200,119,.34); border-radius:0;
  box-shadow:none;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.85), 0 0 34px rgba(0,0,0,.6);
}
#work .twx2-plaque::before, #work .twx2-plaque::after{ display:none; }   /* the screws */
#work .twx2-win .twx2-plaque b{
  font-family:var(--sans); font-weight:600; font-size:14px; line-height:1.25; letter-spacing:0;
  color:#f3e5c0;
}
#work .twx2-win .twx2-plaque span{
  font-family:var(--sans); font-weight:400; font-size:12.5px; line-height:1.4; letter-spacing:0;
  color:rgba(239,230,210,.74);
}
@media (max-width:719.98px){
  #work .twx2-win .kd-card-cap.twx2-plaque{ margin:var(--s-4) 0 0; max-width:100%; align-items:flex-start; text-align:left; }
}
.twx2-cards .twx2-win .kd-card-cap.twx2-plaque{ margin:var(--s-4) 0 0; max-width:100%; align-items:flex-start; text-align:left; }

/* ════════════════════════════════════════════════════════════════════
   5 · THE NEW BEATS — #band and #floors
   Night grounds: #0a0906 with a faint continuation of the hero's warm
   ground haze (mean luma ~19–21). Corner captions use the sections2/3
   ::after grammar verbatim, so the ascending clock reads down the page:
   dusk 18:42 → BUILT FOR 19:00 → LOBBY 19:12 → THE FLOORS 19:40 → FACADE 23:40
   ════════════════════════════════════════════════════════════════════ */
#band, #floors{
  position:relative; overflow:hidden; overflow:clip;
  color:var(--cream-ed); font-variant-numeric:tabular-nums;
}
#band{
  border-top:1px solid var(--hair-night); border-bottom:1px solid var(--hair-night);
  background:
    radial-gradient(90% 140% at 50% -10%, rgba(140,88,36,.2), rgba(120,72,26,.06) 46%, transparent 72%),
    linear-gradient(180deg, #15110b, #100d09);
}
#floors{
  border-bottom:1px solid var(--hair-night);
  background:
    radial-gradient(70% 90% at 12% 100%, rgba(120,72,26,.14), transparent 60%),
    radial-gradient(60% 70% at 88% 0%, rgba(140,88,36,.1), transparent 60%),
    linear-gradient(180deg, #15110b, #110e09 60%, #0e0b07);
}
/* corner captions — the sections2/3 instrument grammar, exactly */
#band::after, #floors::after{
  position:absolute; top:30px; left:clamp(24px, 4.4vw, 56px); z-index:6;
  font:400 10px/1 var(--mono); letter-spacing:.24em; white-space:nowrap;
  font-variant-numeric:tabular-nums;
  padding:9px 20px 0 0; border-top:1px solid; pointer-events:none;
}
#band::after{
  content:"BUILT FOR \00b7 19:00";
  content:"BUILT FOR \00b7 19:00" / "";
  color:rgba(232,200,119,.4); border-color:rgba(232,200,119,.28);
}
#floors::after{
  content:"THE FLOORS \00b7 19:40";
  content:"THE FLOORS \00b7 19:40" / "";
  color:rgba(232,200,119,.4); border-color:rgba(232,200,119,.28);
}
@media (max-width:600px){
  #band::after, #floors::after{ top:22px; font-size:9px; letter-spacing:.2em; }
}

/* #band — one line, left-aligned to the grid, hairlines above and below */
#band .wrap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-3) var(--s-7); padding-top:var(--s-6); }
#band p, .ed-band-line{
  margin:0; font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.6;
  color:var(--cream-mute-ed); max-width:min(var(--measure), 100%);
}
#band p b, #band p strong, .ed-band-line b, .ed-band-line strong{ font-weight:600; color:var(--cream-ed); }
#band .ed-band-facts{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); margin:0; padding:0; list-style:none;
  font-family:var(--sans); font-size:var(--t-small); color:var(--cream-mute-ed);
}
#band .ed-band-facts li{ position:relative; }
#band .ed-band-facts li + li::before{
  content:""; position:absolute; left:calc(var(--s-6) * -.5); top:.35em; height:1em; width:1px;
  background:var(--hair-night-firm);
}
#band .ed-band-facts b{ font-weight:600; color:var(--cream-ed); }
#band .ed-link{ margin-left:auto; }

/* #floors — numbered editorial themes: numeral | text, hairlines between */
#floors .wrap > .kd-two, #floors .ed-floors-head{ padding-top:var(--s-6); }
#floors .kd-two b{ color:var(--cream-ed); }
#floors .kd-two em{ color:var(--gold); }
#floors .kd-para, #floors .ed-floors-sub{ color:var(--cream-mute-ed); margin:var(--s-5) 0 0; max-width:min(52ch, 100%); }
#floors ol, .ed-floors{
  list-style:none; margin:var(--s-8) 0 0; padding:0; counter-reset:ed-floor;
  border-top:1px solid var(--hair-night);
}
#floors ol > li, .ed-floor{
  display:grid; grid-template-columns:minmax(120px, .26fr) minmax(0, .74fr); gap:var(--s-6);
  align-items:start; padding:var(--s-7) 0; margin:0;
  border-bottom:1px solid var(--hair-night);
}
.ed-floor-num, #floors ol > li > em, #floors ol > li > i{
  font-family:var(--display); font-style:normal; font-weight:600;
  font-size:clamp(56px, 6.6vw, 96px); line-height:.85; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; color:rgba(232,200,119,.32);
  padding-top:4px;
}
.ed-floor h3, #floors ol > li > div > b{
  display:block; margin:0 0 var(--s-3);
  font-family:var(--sans); font-weight:600; font-size:var(--t-h3); line-height:1.25; letter-spacing:-.005em;
  color:var(--cream-ed);
}
.ed-floor p, #floors ol > li > div > span{
  display:block; margin:0; font-family:var(--sans);
  font-size:var(--t-body); line-height:1.65; color:var(--cream-mute-ed); max-width:min(var(--measure), 100%);
}
.ed-floor .ed-floor-kicker, #floors .ed-kicker{
  display:block; margin-bottom:var(--s-3);
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(232,200,119,.55);
}
.ed-floor .ed-link{ margin-top:var(--s-4); }
/* the section's keystone: one Fraunces-italic line, if A writes one */
#floors .ed-keystone{
  margin:var(--s-8) 0 0; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(22px, 2.2vw, 30px); line-height:1.4; color:#d9c9a3; max-width:32ch;
}
#floors .ed-keystone em{ color:var(--gold); }
@media (max-width:767.98px){
  #floors ol > li, .ed-floor{ grid-template-columns:1fr; gap:var(--s-3); padding:var(--s-6) 0; }
  .ed-floor-num, #floors ol > li > em, #floors ol > li > i{ font-size:44px; }
  #band .wrap{ gap:var(--s-4); }
  #band .ed-link{ margin-left:0; }
  /* stacked facts read as a list; the inline separators stand down */
  #band .ed-band-facts{ flex-direction:column; gap:var(--s-2); }
  #band .ed-band-facts li + li::before{ display:none; }
}

/* ════════════════════════════════════════════════════════════════════
   6 · MOBILE NAV — the contract
   .nav-toggle hidden ≥900; <900 the primary nav is a full-height drawer
   (#0a0906 at .96, hairline left edge) visible only under body.nav-open;
   links 44px, 18px Manrope; the two bars fold to an X in 220ms.
   ════════════════════════════════════════════════════════════════════ */
/* the legacy hamburger + overlay retire (ai.js guards their absence) */
.menu-btn, .mobile-nav{ display:none !important; }

/* header hygiene on the night ground: warm scrim, gold hairline, 44px links */
.nav{ transition:background var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease), padding var(--dur-3) var(--ease); }
.nav.scrolled{ background:rgba(10,9,6,.84); border-bottom-color:var(--hair-night); }
.nav-links{ gap:var(--s-5); }
.nav-links a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-1);
  font-family:var(--sans); font-weight:500; font-size:14px; color:rgba(239,230,210,.7);
  white-space:nowrap; transition:color var(--dur-2) var(--ease);
}
/* the desktop row must still fit between 900 and ~1180 (the toggle only
   appears under 900): tighter gaps, 13px links, a quieter brand word */
@media (max-width:1180px){
  .nav-links{ gap:var(--s-4); }
  .nav-links a{ font-size:13px; }
  .nav-links .nav-portal{ padding:0 var(--s-3); }
}
@media (max-width:1000px){
  .brand{ gap:10px; }
  .brand img{ width:72px; height:48px; }
  .brand-word{ font-size:11px; letter-spacing:.08em; }
  .nav-links{ gap:var(--s-3); }
}
.nav-links a:hover{ color:var(--cream-ed); }
.nav-links a::after{ bottom:8px; left:var(--s-1); background:var(--gold); transition:right var(--dur-3) var(--ease); }
.nav-links .nav-portal{
  padding:0 var(--s-4); border:1px solid rgba(232,200,119,.35); border-radius:var(--r-btn);
  color:var(--gold) !important; box-shadow:none;
  transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.nav-links .nav-portal:hover{ background:rgba(232,200,119,.08); border-color:rgba(232,200,119,.55); box-shadow:none; }

.nav-toggle{
  display:none; position:relative; z-index:2; flex:none;
  width:44px; height:44px; margin:0 -8px 0 0; padding:0;
  background:none; border:0; border-radius:var(--r-btn); color:var(--cream-ed); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle:focus-visible{ outline:2px solid rgba(239,230,210,.92); outline-offset:3px; }
.nav-bar{
  position:absolute; left:50%; top:50%; width:22px; height:1.5px; margin:-1px 0 0 -11px;
  background:currentColor; border-radius:1px;
  transition:transform var(--dur-2) var(--ease);
}
.nav-bar:first-child{ transform:translateY(-4px); }
.nav-bar:last-child{ transform:translateY(4px); }
body.nav-open .nav-bar:first-child{ transform:rotate(45deg); }
body.nav-open .nav-bar:last-child{ transform:rotate(-45deg); }

@media (max-width:899.98px){
  .nav-toggle{ display:block; }
  /* the drawer — sized with 100dvh, not top/bottom, because .nav.scrolled's
     backdrop-filter makes the header the containing block */
  .nav-links{
    display:flex; position:fixed; top:0; right:0; z-index:1;
    height:100vh; height:100dvh; width:min(340px, 86vw);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:calc(var(--s-9) + var(--s-2)) var(--s-5) var(--s-7);
    background:rgba(10,9,6,.96); border-left:1px solid var(--hair-night);
    box-shadow:-24px 0 60px rgba(0,0,0,.45); overflow-y:auto;
    transform:translateX(100%); visibility:hidden;
    transition:transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  }
  body.nav-open .nav-links{ transform:none; visibility:visible; transition:transform var(--dur-3) var(--ease), visibility 0s; }
  .nav-links a{
    display:flex; align-items:center; min-height:44px; padding:var(--s-2) 0;
    font-size:18px; font-weight:500; color:var(--cream-ed);
    border-bottom:1px solid var(--hair-night);
  }
  .nav-links a::after{ display:none; }
  .nav-links .nav-portal{
    margin-top:var(--s-5); justify-content:center; min-height:48px;
    padding:var(--s-3) var(--s-4); border:1px solid rgba(232,200,119,.4); border-radius:var(--r-btn);
  }
  /* scrim over the page while the drawer is open — a click here is "outside" */
  body.nav-open .nav::before{
    content:""; position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh; z-index:0;
    background:rgba(4,3,2,.5);
  }
  body.nav-open{ overflow:hidden; }
}
@media (min-width:900px){
  .nav-toggle{ display:none; }
  .nav-links{ display:flex; }
}

/* ════════════════════════════════════════════════════════════════════
   7 · MOTION DISCIPLINE
   Every UI transition above runs 150–300ms on the tokens. Under reduced
   motion the UI tweens go; the ambient scenes step on their own rules.
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .kd-btn, .kd-btn-ghost, .intake-send, .twx2-draft .chip, .kd-explore, .kd-explore .kd-circ,
  .ed-link, .ed-link::after, .ed-link .ed-arrow, .ed-link > svg,
  .nav, .nav-links, .nav-links a, .nav-links a::after, .nav-links .nav-portal, .nav-bar,
  .foot-legal a{
    transition:none !important;
  }
  .kd-btn:hover, .twx2-draft .intake-send:hover{ transform:none; }
  .kd-explore:hover .kd-circ, .ed-link:hover::after, .ed-link:hover .ed-arrow{ transform:none; }
}

/* ════════════════════════════════════════════════════════════════════
   8 · RESPONSIVE — gutters 20–24 on mobile, no horizontal scroll
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  .wrap{ padding-left:var(--s-5); padding-right:var(--s-5); }
  .kd-hero-inner{ padding-top:16svh; }
  .kd-hero-facts{ gap:var(--s-5); flex-wrap:wrap; }
}
@media (max-width:420px){
  .wrap{ padding-left:20px; padding-right:20px; }
}

/* a11y: skip link meets the 44px touch minimum */
.ed-skip{ min-height:44px; display:inline-flex; align-items:center; }