/* ════════════════════════════════════════════════════════════════════
   TWX3 — THE FUTURE LAYER (refinement pass over the approved twx2 cut)
   Loads AFTER sections2.css and overrides. Three moves, no rebuilds:

   1. FINISHED BUILDING, NOT CONSTRUCTION YARD — the method + intake
      grounds re-crop media/plates2/drafting.webp away from the lens,
      straps and tape at the top of the plate, down into the clean
      drawing itself, under a soft morning veil. More air everywhere;
      scrims lighter; paper brighter; rules thinner.

   2. THE INSTRUMENT LAYER — one hairline mono annotation per section,
      a digital-twin caption on real footage. The clock ascends down
      the page, rhyming with the hero's chapters:
        LOBBY 19:12 → FACADE 23:40 → DESK 06:12 → SHEET 06:38 → SUNRISE 06:51
      1px gold rule + 10px JetBrains Mono at 30–55% opacity. Quiet.

   3. GRAPHIC DESIGN +300% — display type up a notch with tighter
      tracking, kickers refined, tabular numerals, generous rhythm,
      every decorative rule at 1px.

   EXPOSURE ARC stays law: platform < work < method < blueprint < about.
   Ambient and automatic; nothing scroll-driven; zero new animation.
   ════════════════════════════════════════════════════════════════════ */

/* ── tabular numerals across the whole tower (inherits) ─────────────── */
#platform, #work, #method, #blueprint, #about{ font-variant-numeric:tabular-nums; }

/* ════════════════════════════════════════════════════════════════════
   1 · GROUNDS — the finished building's light
   ════════════════════════════════════════════════════════════════════ */

/* DIRECTORY — same lobby, a touch more open; vignette eased */
#platform{
  background:
    linear-gradient(180deg, rgba(10,9,6,.94), rgba(10,9,6,0) 15%),
    linear-gradient(0deg, rgba(15,13,9,.86), rgba(15,13,9,0) 13%),
    radial-gradient(140% 100% at 50% 30%, rgba(0,0,0,0) 48%, rgba(6,4,2,.42) 100%),
    url('/media/plates2/lobby.webp') center 42% / cover no-repeat,
    #0e0b07;
}
/* the copy scrim breathes — enough ground for type, no more */
.twx2-dir-copy::before{
  background:radial-gradient(88% 82% at 42% 40%, rgba(8,6,3,.68), rgba(8,6,3,.34) 62%, transparent 82%);
}

/* WORK — the facade lifted half a stop; the street less soot, more night air */
#work{
  padding:118px 0 0;
  background:
    linear-gradient(180deg, #0f0d09, rgba(15,13,9,0) 12%),
    radial-gradient(120% 60% at 50% 108%, rgba(76,58,30,.38), transparent 60%),
    radial-gradient(70% 44% at 50% 30%, rgba(56,68,60,.15), transparent 70%),
    linear-gradient(180deg, #12110d 0%, #16150f 46%, #1a1813 100%);
}
.twx2-plate{ filter:contrast(1.05) brightness(1.12) saturate(.93); }

/* METHOD — the same table, re-cropped to the clean drawing: no lens, no
   strap, no tape. A morning veil calms what remains into a quiet desk. */
#method{
  background:
    linear-gradient(180deg, rgba(24,20,13,.74), rgba(24,20,13,0) 180px),
    linear-gradient(180deg, rgba(238,228,205,.16), rgba(240,231,210,.3)),
    radial-gradient(130% 90% at 50% 40%, rgba(0,0,0,0) 62%, rgba(24,20,12,.2) 100%),
    url('/media/plates2/drafting.webp') 12% 92% / auto 175% no-repeat,
    #7a7060;
}

/* BLUEPRINT — further down the same sheet, morning fully in the room */
#blueprint{
  background:
    linear-gradient(180deg, rgba(240,231,210,.13), rgba(243,235,215,.26)),
    url('/media/plates2/drafting.webp') 12% 88% / auto 170% no-repeat,
    #6d6455;
}
/* height-keyed sizing (auto NN%) pins the visible band below the plate's
   cluttered top third — lens, strap, tape — at every viewport aspect. */

/* ════════════════════════════════════════════════════════════════════
   2 · THE INSTRUMENT LAYER — five captions, one ascending clock
   ════════════════════════════════════════════════════════════════════ */
#platform::after, #work::after, #method::after, #blueprint::after, #about::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;
}
#platform::after{
  content:"LOBBY \00b7 19:12";
  content:"LOBBY \00b7 19:12" / "";
  color:rgba(232,200,119,.4); border-color:rgba(232,200,119,.28);
}
#work::after{
  content:"FACADE \00b7 23:40";
  content:"FACADE \00b7 23:40" / "";
  color:rgba(232,200,119,.4); border-color:rgba(232,200,119,.28);
}
#method::after{
  content:"DESK \00b7 06:12";
  content:"DESK \00b7 06:12" / "";
  color:rgba(236,208,138,.5); border-color:rgba(236,208,138,.34);
}
#blueprint::after{
  content:"SHEET A-01 \00b7 06:38";
  content:"SHEET A-01 \00b7 06:38" / "";
  color:rgba(82,62,24,.62); border-color:rgba(82,62,24,.42);
}
#about::after{
  content:"SUNRISE \00b7 06:51";
  content:"SUNRISE \00b7 06:51" / "";
  color:rgba(88,58,22,.55); border-color:rgba(88,58,22,.36);
}
@media (max-width:600px){
  #platform::after, #work::after, #method::after, #blueprint::after, #about::after{
    top:22px; font-size:9px; letter-spacing:.2em;
  }
}

/* ════════════════════════════════════════════════════════════════════
   3 · GRAPHIC DESIGN +300% — type, rhythm, hairlines
   ════════════════════════════════════════════════════════════════════ */

/* display sizes up a notch, tracking tighter — same families, same voice */
#platform .kd-two, #method .kd-two, #blueprint .kd-two{
  font-size:clamp(36px, 4.1vw, 60px); line-height:1.04; letter-spacing:-.026em;
}
#work .kd-ghost{
  font-size:clamp(44px, 5.7vw, 88px); letter-spacing:-.03em; line-height:1.03;
}
#platform .kd-para{ font-size:16px; line-height:1.8; margin:26px 0 34px; color:rgba(239,230,210,.78); }
#method .kd-para{ font-size:15.5px; line-height:1.8; margin:24px 0 6px; }
#work .twx2-win-sub{ font-size:15.5px; margin:18px auto 60px; }
.twx2-draft-sub{ font-size:15.5px; }
#about .twx2-dawn-line{ font-size:clamp(28px, 3.1vw, 44px); }
#about .twx2-dawn-line2{ font-size:clamp(16px, 1.6vw, 21px); color:rgba(255,242,218,.88); }
.twx2-dawn-small{ font-size:14px; }

/* SUNRISE — the page's brightest frame stays the brightest: half a stop up,
   plus a soft screen-blend veil through the bloom (lifts the mean without
   clipping the sun) */
.twx2-dawn-plate{ filter:brightness(1.44) saturate(1.04); }
.twx2-dawn-bloom{
  background:
    radial-gradient(64% 52% at 71% 22%, rgba(255,216,140,.42), transparent 66%),
    linear-gradient(180deg, rgba(255,226,170,.3), rgba(255,218,158,.2) 60%, rgba(255,212,150,.16));
}
.twx2-dawn-scrim{
  background:
    linear-gradient(180deg, rgba(240,226,196,.22), transparent 16%),
    radial-gradient(50% 44% at 21% 88%, rgba(22,14,7,.4), transparent 70%),
    linear-gradient(0deg, rgba(22,14,7,.38), rgba(22,14,7,.14) 26%, transparent 42%);
}

/* the table's margin note stands in morning ink now, not lamplight */
.twx2-table-note{ color:#57492f; text-shadow:0 1px 0 rgba(255,250,236,.45); }

/* kickers and small instruments, one register */
.twx2-board-sub{ letter-spacing:.32em; }
.twx2-wintag{ font-size:9px; letter-spacing:.28em; }
.twx2-draft .builder-step{ letter-spacing:.3em; }

/* brass board: the names carry more weight */
.twx2-board-title{ font-size:16.5px; }
.twx2-dname{ font-size:20px; }
.twx2-board-in{ padding:26px 26px 18px; }
.twx2-drow{ padding:15px 4px 14px; gap:18px; }

/* rhythm — more air between and inside the blocks */
.twx2-lobby{ padding:152px 0 142px; }
.twx2-dir{ gap:84px; }
.twx2-board{ margin-top:54px; }
.twx2-street{ padding:46px 0 150px; }
.twx2-table{ padding:150px 0 160px; }
.twx2-method2{ gap:84px; }
.twx2-morning{ padding:150px 0 172px; }
.twx2-sheetwrap{ margin-top:54px; }
.twx2-cell{ padding:22px 26px 24px; }

/* the paper objects: brighter stock, softer weight on the table */
.twx2-brief{
  padding:42px 44px 38px;
  background:linear-gradient(158deg, rgba(250,244,229,.97), rgba(233,223,200,.95) 68%, rgba(222,211,186,.96));
  box-shadow:0 22px 46px rgba(22,17,9,.34), 0 3px 9px rgba(22,17,9,.22),
    inset 0 1px 0 rgba(255,252,240,.85);
}
.twx2-notes li{
  margin:0 0 26px; padding:22px 28px 20px 78px;
  background:linear-gradient(168deg, rgba(248,242,226,.97), rgba(228,218,193,.95));
  box-shadow:0 16px 34px rgba(22,17,9,.3), 0 2px 6px rgba(22,17,9,.2),
    inset 0 1px 0 rgba(255,252,240,.8);
}
.twx2-notes li em{ left:24px; top:23px; }
.twx2-notes b{ font-size:16px; }
.twx2-notes span{ font-size:13.5px; line-height:1.65; }
.twx2-permit{ border-color:rgba(90,76,52,.32); background:rgba(255,251,240,.72); }

/* the intake sheet: brighter vellum, same drawing */
.twx2-draft .twx2-sheet{
  background:
    linear-gradient(151deg, rgba(240,232,211,.97), rgba(224,214,189,.96) 55%, rgba(212,201,174,.97)),
    #d8cdb1;
  box-shadow:
    0 0 0 5px rgba(230,221,197,.9), 0 0 0 6px rgba(90,76,52,.28),
    0 36px 80px rgba(24,19,10,.36), 0 4px 12px rgba(24,19,10,.2);
}

/* hairline law: every decorative rule at 1px */
.twx2-notes li em::after{ height:1px; }
@media (max-width:719.98px){
  .twx2-glass{ outline:1px solid rgba(70,56,30,.5); }
}
.twx2-cards .twx2-glass{ outline:1px solid rgba(70,56,30,.5); }

/* mobile rhythm */
@media (max-width:960px){
  .twx2-lobby{ padding:118px 0 108px; }
  .twx2-table{ padding:114px 0 122px; }
  .twx2-morning{ padding:114px 0 126px; }
  .twx2-dir{ gap:52px; }
  .twx2-method2{ gap:52px; }
}