/* ════════════════════════════════════════════════════════════════════
   TOWER SECTIONS, PHOTOGRAPHIC CUT (twx2-*) — Act IV beats 2–6 rebuilt
   on graded location plates (media/plates2). Nothing drawn: every scene
   is a photograph with the living behavior composited onto it.

   EXPOSURE ARC (binding): each section is literally brighter than the
   one before —  hero(dusk) < DIRECTORY(lobby) < WORK(facade)
   < METHOD(drafting table) < BLUEPRINT(morning sheet) < CLOSE(dawn).

   Copy doctrine: the dark is named once, in the hero. Everything below
   writes toward the light. Statuses: LIT / WIRING / SCHEDULED / NEXT.

   Loads AFTER sections.css when integrated; overrides its section
   grounds. Scoped .twx2-*; legacy hooks (kd-*, proof-*, intake-*,
   chips, bp-*) are only ever restyled inside a twx2 ancestor or a
   section id. Ambient motion only — no scroll-triggered reveals.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --twx2-ink:#0a0906;
  --twx2-gold:#e8c877;
  --twx2-gold-deep:#c9a254;
  --twx2-hot:#f4e3b2;
  --twx2-cream:#efe6d2;
  --twx2-cream-dim:rgba(239,230,210,.66);
  /* morning inks — for type standing on photographed paper */
  --twx2-paper:#e9dfc6;
  --twx2-ink-morn:#241d12;
  --twx2-ink-soft:#54483a;
  --twx2-oxide:#96422a;      /* red grease pencil, echoes the strap in the plate */
  --twx2-brass-morn:#8a6b2e;
}

/* ── section grounds: the ladder of exposure ────────────────────────── */
#platform, #work, #method, #blueprint, #about{
  position:relative; overflow:hidden; overflow:clip;
}

/* BEAT 2 · DIRECTORY — warm lobby interior, first practicals after dusk */
#platform{
  padding:0;
  background:
    linear-gradient(180deg, rgba(10,9,6,.94), rgba(10,9,6,0) 16%),
    linear-gradient(0deg, rgba(15,13,9,.9), rgba(15,13,9,0) 14%),
    radial-gradient(140% 100% at 50% 30%, rgba(0,0,0,0) 42%, rgba(6,4,2,.52) 100%),
    url('/media/plates2/lobby.webp') center 42% / cover no-repeat,
    #0e0b07;
}

/* BEAT 3 · WORK — the brick facade, windows warmer and more numerous */
#work{
  padding:110px 0 0;
  background:
    linear-gradient(180deg, #0e0c08, rgba(14,12,8,0) 12%),
    radial-gradient(120% 60% at 50% 108%, rgba(70,52,26,.35), transparent 60%),
    radial-gradient(70% 44% at 50% 30%, rgba(52,66,58,.14), transparent 70%),
    linear-gradient(180deg, #100f0c 0%, #14130f 46%, #181612 100%);
}

/* BEAT 4 · METHOD — the drafting table at first light */
#method{
  padding:0; border-top:0; border-bottom:0;
  background:
    linear-gradient(180deg, rgba(26,21,13,.88), rgba(26,21,13,0) 130px),
    linear-gradient(0deg, rgba(58,52,40,.34), rgba(58,52,40,0) 130px),
    radial-gradient(130% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(24,20,12,.36) 100%),
    url('/media/plates2/drafting.webp') center 32% / cover no-repeat,
    #6e6455;
}

/* BEAT 5 · BLUEPRINT — same table, the morning fully in the room */
#blueprint{
  padding:0;
  background:
    url('/media/plates2/drafting.webp') 32% 74% / 165% no-repeat,
    #5f5749;
}

/* BEAT 6 · CLOSE — golden sunrise, the brightest screen on the site */
#about{ padding:0; overflow:hidden; overflow:clip; background:#caa05e; }

/* ════════════════════════════════════════════════════════════════════
   BEAT 2 · DIRECTORY — the board hangs in the photographed lobby
   ════════════════════════════════════════════════════════════════════ */
.twx2-lobby{ padding:128px 0 118px; }
.twx2-dir{ align-items:start; }

/* local scrim behind the copy column — never a full-section wash */
.twx2-dir-copy{ position:relative; }
.twx2-dir-copy::before{
  content:""; position:absolute; inset:-48px -56px -40px -60px; z-index:0;
  pointer-events:none; border-radius:26px;
  background:radial-gradient(88% 82% at 42% 40%, rgba(8,6,3,.74), rgba(8,6,3,.4) 62%, transparent 82%);
}
.twx2-dir-copy > *{ position:relative; z-index:1; }
.twx2-dir-copy .kd-para{ max-width:44ch; color:rgba(239,230,210,.72); }
#platform .twx2-dir .kd-two b{ color:var(--twx2-cream); }
#platform .twx2-dir .kd-two em{ color:var(--twx2-gold); }

/* the brass board — photographic materials: milled frame, felt, sheen */
.twx2-board{
  margin-top:44px; position:relative; border-radius:5px; padding:10px;
  background:
    linear-gradient(164deg,#59461f 0%,#2c220e 24%,#1a1408 50%,#3d2f12 82%,#211808 100%);
  box-shadow:
    0 34px 90px rgba(0,0,0,.66),
    0 3px 8px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,236,190,.55),
    inset 0 -1px 0 rgba(0,0,0,.75);
}
/* lobby cove light striking the top rail of the frame */
.twx2-board::before{
  content:""; position:absolute; inset:0; border-radius:5px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,206,120,.16), transparent 14%);
}
/* a slow specular sweep across the glass — someone crossing the lobby */
.twx2-board::after{
  content:""; position:absolute; inset:0; border-radius:5px; pointer-events:none; z-index:3;
  background:linear-gradient(107deg, transparent 34%, rgba(255,240,205,.085) 46%, rgba(255,247,224,.028) 51%, transparent 62%);
  background-size:300% 100%; background-position:130% 0;
  animation:twx2Sheen 14s ease-in-out infinite;
}
@keyframes twx2Sheen{
  0%, 46%{ background-position:130% 0; }
  78%, 100%{ background-position:-60% 0; }
}
.twx2-board-in{
  position:relative; border:1px solid rgba(232,200,119,.44); border-radius:2px;
  padding:24px 24px 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,206,120,.07), transparent 58%),
    repeating-linear-gradient(0deg, #080503 0 3px, #0c0906 3px 4px);
  box-shadow:inset 0 0 48px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,220,150,.08);
}
.twx2-board-head{ text-align:center; padding:2px 0 14px; border-bottom:1px solid rgba(232,200,119,.24); }
.twx2-board-title{
  font-family:var(--serif); font-weight:400; font-size:15px; letter-spacing:.34em;
  text-transform:uppercase; color:transparent;
  background:linear-gradient(180deg,#ffedbe 8%, #d4ad58 55%, #7d6432 96%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.85));
}
.twx2-board-sub{
  display:block; margin-top:7px; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.3em; color:rgba(232,200,119,.42);
}
.twx2-drow{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:baseline; gap:16px;
  padding:13px 4px 12px; text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.68);
  box-shadow:0 1px 0 rgba(232,200,119,.07);
  transition:background .25s, padding .25s;
}
.twx2-drow:last-child{ border-bottom:0; box-shadow:none; }
.twx2-drow:hover{ background:rgba(232,200,119,.05); padding-left:12px; }
.twx2-floor{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:rgba(232,200,119,.5); }
.twx2-dname{
  font-family:var(--serif); font-weight:400; font-size:19px; line-height:1.25;
  color:transparent;
  background:linear-gradient(180deg,#f6e2ab 6%, #d3ad5c 52%, #97783c 98%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.88));
  transition:filter .25s;
}
.twx2-drow:hover .twx2-dname{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.88)) brightness(1.18); }
/* slotted by hand — slight drift, row by row */
.twx2-drow:nth-child(odd)  .twx2-dname{ letter-spacing:.028em; }
.twx2-drow:nth-child(even) .twx2-dname{ letter-spacing:.052em; }
.twx2-drow:nth-child(2)    .twx2-dname{ transform:translateY(-.5px); }
.twx2-drow:nth-child(4)    .twx2-dname{ transform:translateY(.5px) rotate(.12deg); }
.twx2-drow:nth-child(5)    .twx2-dname{ letter-spacing:.014em; }
.twx2-dsub{
  display:block; margin-top:2px; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.12em; color:rgba(239,230,210,.34); -webkit-text-fill-color:rgba(239,230,210,.34);
}
/* status lamps — four states of light */
.twx2-status{
  justify-self:end; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-style:normal; font-size:8.5px; letter-spacing:.16em;
  border:1px solid; border-radius:2px; padding:4px 9px 3px; white-space:nowrap;
}
.twx2-status i{ font-style:normal; width:5px; height:5px; border-radius:50%; display:inline-block; }
.twx2-st-lit{
  color:var(--twx2-hot); border-color:rgba(232,200,119,.58); background:rgba(232,200,119,.11);
  box-shadow:0 0 16px rgba(232,200,119,.3), inset 0 0 8px rgba(232,200,119,.13);
  text-shadow:0 0 8px rgba(244,227,178,.55);
}
.twx2-st-lit i{ background:var(--twx2-hot); box-shadow:0 0 8px rgba(244,227,178,.95); animation:twx2Breath 4.4s ease-in-out infinite; }
.twx2-st-wiring{ color:rgba(232,200,119,.8); border-color:rgba(232,200,119,.34); background:rgba(232,200,119,.045); }
.twx2-st-wiring i{ background:var(--twx2-gold); box-shadow:0 0 7px rgba(232,200,119,.85); animation:twx2Flicker 3.7s steps(1,end) infinite; }
.twx2-st-sched{ color:rgba(216,178,102,.62); border-color:rgba(201,162,84,.3); }
.twx2-st-sched i{ background:#6b5a33; }
.twx2-st-next{ color:rgba(239,230,210,.3); border-color:rgba(239,230,210,.14); }
.twx2-st-next i{ background:transparent; border:1px solid rgba(239,230,210,.26); width:4px; height:4px; }
.twx2-st-lobby{ color:rgba(239,230,210,.58); border-color:rgba(239,230,210,.22); }
.twx2-st-lobby i{ background:rgba(239,230,210,.55); }
.twx2-drow-lit{ background:radial-gradient(70% 150% at 34% 50%, rgba(232,200,119,.11), transparent 72%); }
.twx2-drow-lit .twx2-floor{ color:rgba(244,227,178,.88); text-shadow:0 0 9px rgba(232,200,119,.65); }
.twx2-drow-lit .twx2-dname{ background:linear-gradient(180deg,#fff6d8 4%, #eeca7a 55%, #b3924a 98%); -webkit-background-clip:text; background-clip:text; }
@keyframes twx2Breath{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
@keyframes twx2Flicker{
  0%,100%{ opacity:1 } 6%{ opacity:.25 } 8%{ opacity:1 } 27%{ opacity:.85 }
  29%{ opacity:.15 } 31%{ opacity:.9 } 58%{ opacity:1 } 61%{ opacity:.35 }
  63%{ opacity:1 } 82%{ opacity:.7 } 84%{ opacity:1 }
}
.twx2-board-foot{
  display:flex; justify-content:space-between; gap:6px 18px; flex-wrap:wrap; padding:12px 4px 2px;
  border-top:1px solid rgba(232,200,119,.16);
  font-family:var(--mono); font-size:8px; letter-spacing:.2em; color:rgba(239,230,210,.3);
}
@media (max-width:600px){
  .twx2-board-in{ padding:18px 14px 12px; }
  .twx2-board-title{ font-size:12.5px; letter-spacing:.2em; }
  .twx2-drow{ grid-template-columns:30px minmax(0,1fr) auto; gap:10px; }
  .twx2-dname{ font-size:15.5px; overflow-wrap:break-word; }
  .twx2-drow:nth-child(odd) .twx2-dname, .twx2-drow:nth-child(even) .twx2-dname{ letter-spacing:.018em; }
  .twx2-dsub{ font-size:7.5px; }
  .twx2-status{ font-size:7.5px; letter-spacing:.1em; padding:3px 6px; gap:5px; }
}

/* the printed lighting plan, pinned to the lobby wall and lit by it */
.twx2-xsec-wall{ position:relative; padding:10px 6px; }
.twx2-xsec{
  position:relative; transform:rotate(-1.2deg); border-radius:2px;
  background:#0d0a07;
  border:1px solid rgba(232,200,119,.26);
  box-shadow:0 38px 90px rgba(0,0,0,.7), 0 5px 16px rgba(0,0,0,.55);
}
.twx2-xsec svg{ display:block; width:100%; height:auto; }
/* the lobby's cove light falls across the print from the upper left */
.twx2-xsec::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:2px;
  background:
    linear-gradient(196deg, rgba(255,202,112,.15), transparent 42%),
    radial-gradient(90% 34% at 46% -6%, rgba(255,190,90,.17), transparent 62%),
    linear-gradient(12deg, rgba(0,0,0,.28), transparent 30%);
}
.twx2-pin{
  position:absolute; top:-5px; width:11px; height:11px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 34% 30%, #ffedbe, #8a6f38 62%, #40320f);
  box-shadow:0 2px 5px rgba(0,0,0,.85);
}
.twx2-pin-l{ left:14px; } .twx2-pin-r{ right:18px; top:-4px; }
/* one accent line quietly draws itself, forever */
.twx2-trace{ stroke-dasharray:100 100; stroke-dashoffset:100; animation:twx2Trace 9s linear infinite; }
@keyframes twx2Trace{
  0%{ stroke-dashoffset:100; opacity:0 }
  6%{ opacity:.9 }
  52%{ stroke-dashoffset:0; opacity:.9 }
  68%{ stroke-dashoffset:0; opacity:0 }
  100%{ stroke-dashoffset:0; opacity:0 }
}
.twx2-beacon{ animation:twx2Breath 5s ease-in-out infinite; }
@media (max-width:960px){
  .twx2-lobby{ padding:104px 0 96px; }
  .twx2-xsec{ max-width:440px; margin:0 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   BEAT 3 · WORK — the proof videos live INSIDE the photographed windows
   ════════════════════════════════════════════════════════════════════ */
#work .twx2-win-head b{ color:var(--twx2-cream); text-shadow:0 0 48px rgba(232,200,119,.32); }
#work .twx2-win-head em{ -webkit-text-stroke:1px rgba(232,200,119,.6); }
#work .twx2-win-sub{ color:rgba(239,230,210,.66); }

.twx2-street{ position:relative; padding:36px 0 116px; }
/* the block across the street, fading up into city haze */
.twx2-street::before{
  content:""; position:absolute; left:0; right:0; top:0; height:100%; pointer-events:none;
  background:radial-gradient(60% 42% at 50% 30%, rgba(96,74,34,.12), transparent 70%);
}
.twx2-facade{ position:relative; margin:0 auto; width:min(94vw, 820px); }
/* the plate itself — real brick, six window openings, 2 across 3 down */
.twx2-plate{
  position:relative; aspect-ratio:2048/3070;
  background:url('/media/plates2/work.webp') center / cover no-repeat;
  filter:contrast(1.06) brightness(1.07) saturate(.92);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent),
                     linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent),
             linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  mask-composite:intersect;
}

/* window coordinates, measured against the photograph (percent of plate) —
   each box sits just inside the opening so the photo's own reveal frames it */
.twx2-win{ position:absolute; z-index:2; }
.twx2-win-a{ left:19.0%; top:8.05%; width:16.2%; height:14.2%; }  /* row 1, left  — story film   */
.twx2-win-b{ left:65.1%; top:34.5%; width:17.0%; height:15.3%; }  /* row 2, right — floor 3 · AP */
.twx2-win-c{ left:14.9%; top:62.5%; width:19.0%; height:16.1%; }  /* row 3, left  — floor 4 · audit */

/* the glass: video recessed into the opening, glazing over it */
.twx2-glass{
  position:absolute; inset:0; overflow:hidden; background:#150d04;
  box-shadow:
    0 0 30px 7px rgba(236,164,66,.26),
    0 0 100px 22px rgba(230,150,54,.1);
  animation:twx2Room 9s ease-in-out infinite;
}
.twx2-win-b .twx2-glass{ animation-delay:-3.1s; }
.twx2-win-c .twx2-glass{ animation-delay:-6.4s; }
@keyframes twx2Room{
  0%,100%{ box-shadow:0 0 30px 7px rgba(236,164,66,.26), 0 0 100px 22px rgba(230,150,54,.1); }
  50%    { box-shadow:0 0 34px 8px rgba(236,164,66,.33), 0 0 112px 24px rgba(230,150,54,.14); }
}
.twx2-glass .kd-media{
  position:absolute; inset:0; aspect-ratio:auto; border:0; border-radius:0;
  background:#150d04; overflow:hidden;
}
.twx2-glass .proof-media{ aspect-ratio:auto; border-bottom:0; }
.twx2-glass video{ filter:sepia(.32) saturate(1.04) contrast(1.02) brightness(.97); }
/* the glazing: photo-matched mullions + reflection + the room's warm air */
.twx2-munt{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(148deg, rgba(196,224,232,.07), transparent 34%),
    linear-gradient(0deg, rgba(230,120,32,.26), rgba(230,130,40,.1) 46%, rgba(255,170,70,.05)),
    linear-gradient(90deg, transparent calc(50% - 1.7%), #0d0e0c calc(50% - 1.7%), #0d0e0c calc(50% + 1.7%), transparent calc(50% + 1.7%)),
    linear-gradient(180deg, transparent calc(39% - 1.3%), #0d0e0c calc(39% - 1.3%), #0d0e0c calc(39% + 1.3%), transparent calc(39% + 1.3%)),
    linear-gradient(180deg, transparent calc(70% - 1.3%), #0d0e0c calc(70% - 1.3%), #0d0e0c calc(70% + 1.3%), transparent calc(70% + 1.3%)),
    radial-gradient(130% 105% at 50% 50%, transparent 52%, rgba(10,6,2,.5) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(9,10,9,.92),
    inset 0 0 0 3px rgba(74,58,30,.28),
    inset 0 2px 10px rgba(0,0,0,.5);
}
/* keep the site's play affordance, scaled for a window across the street */
.twx2-glass .kd-media::after{ width:34px; height:34px; font-size:11px; padding-left:3px; background:rgba(232,200,119,.9); }
.twx2-glass .proof-dur{ right:7%; bottom:5%; font-size:8px; padding:2px 6px; opacity:.85; }
.twx2-glass .proof-progress{ height:2px; z-index:3; background:rgba(24,18,8,.55); }
.twx2-glass .proof-progress i{ background:var(--twx2-gold); }

/* etched floor tag above the lintel */
.twx2-wintag{
  position:absolute; bottom:calc(100% + 9px); left:2%;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.24em; white-space:nowrap;
  color:rgba(240,205,140,.62); text-shadow:0 1px 3px rgba(0,0,0,.85);
}
/* brass plaque mounted on the brick beneath the sill */
.twx2-win .kd-card-cap.twx2-plaque{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  margin:0; padding:8px 20px 7px; width:max-content; max-width:230%;
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  background:linear-gradient(180deg, rgba(74,59,28,.94), rgba(28,21,10,.97));
  border:1px solid rgba(232,200,119,.4); border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,232,178,.3), 0 8px 22px rgba(0,0,0,.55);
}
.twx2-plaque::before, .twx2-plaque::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ffedbe, #6b5a33 72%);
  box-shadow:0 1px 2px rgba(0,0,0,.8);
}
.twx2-plaque::before{ left:6px } .twx2-plaque::after{ right:6px }
.twx2-win .twx2-plaque b{
  font-family:var(--serif); font-weight:500; font-size:12.5px; letter-spacing:.04em;
  color:#eed9a4; white-space:nowrap;
}
.twx2-win .twx2-plaque span{
  font-family:var(--mono); font-size:7.5px; letter-spacing:.13em;
  color:rgba(239,230,210,.52); text-align:center;
}
/* the story window wears its plaque like the others, slightly proud */
.twx2-win-a .twx2-plaque{ transform:translateX(-50%) rotate(-.5deg); }
.twx2-win-c .twx2-plaque{ transform:translateX(-50%) rotate(.4deg); }

/* settle the graffiti-lit pane so the street stays in the brand's key */
.twx2-quiet{
  position:absolute; left:15.4%; top:33.9%; width:20.2%; height:16.9%; z-index:1;
  pointer-events:none;
  background:
    linear-gradient(0deg, rgba(214,120,40,.12), transparent 60%),
    rgba(14,9,4,.4);
}

/* debug outlines for mapping the windows to the photograph */
.twx2-debug .twx2-win{ outline:1px solid rgba(0,255,180,.85); }
.twx2-debug .twx2-plate{ outline:1px dashed rgba(0,255,180,.4); }

/* ── fallback: window-framed cards ON the facade plate ──
   Used at narrow widths (the composited windows drop below legibility)
   and force-able anywhere with .twx2-cards for honesty checks. */
@media (max-width:719.98px){
  .twx2-facade{ width:min(94vw, 560px); }
  .twx2-plate{
    aspect-ratio:auto; display:flex; flex-direction:column; gap:74px;
    padding:58px 7vw 66px; background-size:cover; background-position:center;
  }
  .twx2-win{ position:relative; left:auto !important; top:auto !important;
    width:100% !important; height:auto !important; }
  .twx2-glass{ position:relative; inset:auto; aspect-ratio:16/10;
    border:6px solid #10120f; outline:2px solid rgba(70,56,30,.5);
    box-shadow:0 0 34px 8px rgba(228,146,52,.22), 0 18px 44px rgba(0,0,0,.6); }
  .twx2-wintag{ position:static; display:block; margin:0 0 10px 2px; }
  .twx2-win .kd-card-cap.twx2-plaque{
    position:static; transform:none; margin:16px auto 0; max-width:96%; }
  .twx2-win-a .twx2-plaque{ transform:rotate(-.5deg); }
  .twx2-win-c .twx2-plaque{ transform:rotate(.4deg); }
  .twx2-quiet{ display:none; }
}
.twx2-cards .twx2-facade{ width:min(94vw, 620px); }
.twx2-cards .twx2-plate{
  aspect-ratio:auto; display:flex; flex-direction:column; gap:74px;
  padding:58px 48px 66px; background-size:cover; background-position:center;
}
.twx2-cards .twx2-win{ position:relative; left:auto; top:auto; width:100%; height:auto; }
.twx2-cards .twx2-glass{ position:relative; inset:auto; aspect-ratio:16/10;
  border:6px solid #10120f; outline:2px solid rgba(70,56,30,.5);
  box-shadow:0 0 34px 8px rgba(228,146,52,.22), 0 18px 44px rgba(0,0,0,.6); }
.twx2-cards .twx2-wintag{ position:static; display:block; margin:0 0 10px 2px; }
.twx2-cards .twx2-win .kd-card-cap.twx2-plaque{
  position:static; transform:none; margin:16px auto 0; max-width:96%; }
.twx2-cards .twx2-quiet{ display:none; }

/* ════════════════════════════════════════════════════════════════════
   BEAT 4 · METHOD — five sheets laid out on the photographed table
   ════════════════════════════════════════════════════════════════════ */
.twx2-table{ padding:118px 0 128px; }
.twx2-method2{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:64px; align-items:start; position:relative;
}
@media (max-width:960px){ .twx2-method2{ grid-template-columns:1fr; gap:48px; } }

/* the brief — a vellum sheet with the section's voice, morning-lit */
.twx2-brief{
  position:relative; padding:36px 38px 32px; transform:rotate(-.7deg); border-radius:2px;
  background:
    linear-gradient(158deg, rgba(246,239,222,.97), rgba(222,211,186,.95) 68%, rgba(210,198,170,.96));
  box-shadow:
    0 26px 54px rgba(22,17,9,.46), 0 3px 10px rgba(22,17,9,.3),
    inset 0 1px 0 rgba(255,252,240,.8);
}
/* masking tape holding the brief to the table */
.twx2-brief::before, .twx2-brief::after{
  content:""; position:absolute; width:74px; height:22px;
  background:linear-gradient(180deg, rgba(238,229,204,.85), rgba(222,210,180,.78));
  box-shadow:0 2px 5px rgba(20,16,8,.25); opacity:.9;
}
.twx2-brief::before{ top:-10px; left:34px; transform:rotate(-3deg); }
.twx2-brief::after{ bottom:-9px; right:44px; transform:rotate(2.4deg); }
#method .twx2-brief .kd-two b{ color:var(--twx2-ink-morn); }
#method .twx2-brief .kd-two em{ color:var(--twx2-brass-morn); }
#method .twx2-brief .kd-para{ color:var(--twx2-ink-soft); max-width:42ch; }
/* the site notice, a slip taped to the sheet's foot */
.twx2-permit{
  display:inline-block; margin-top:22px; padding:14px 18px 12px; transform:rotate(-.9deg);
  border:1px solid rgba(90,76,52,.4); border-radius:2px;
  background:rgba(255,251,240,.65); box-shadow:0 4px 12px rgba(22,17,9,.16);
}
.twx2-permit i{
  display:block; font-style:normal; font-family:var(--mono); font-size:8px;
  letter-spacing:.26em; color:var(--twx2-oxide); margin-bottom:6px; text-transform:uppercase;
}
.twx2-permit b{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:15.5px; color:var(--twx2-ink-soft); }
.twx2-permit-sign{
  font-family:"Caveat",cursive; font-weight:500; font-size:20px; color:var(--twx2-brass-morn);
  display:inline-block; transform:rotate(-2deg); margin-left:10px;
}
/* the five numbered sheets — pinned notes, each its own object */
.twx2-notes{ list-style:none; margin:0; padding:0; counter-reset:none; }
.twx2-notes li{
  position:relative; margin:0 0 20px; padding:19px 24px 17px 74px; border-radius:2px;
  background:linear-gradient(168deg, rgba(243,236,218,.97), rgba(219,208,182,.95));
  box-shadow:0 18px 38px rgba(22,17,9,.42), 0 2px 7px rgba(22,17,9,.26),
    inset 0 1px 0 rgba(255,252,240,.75);
}
.twx2-notes li:nth-child(1){ transform:rotate(-.55deg); }
.twx2-notes li:nth-child(2){ transform:rotate(.5deg) translateX(12px); }
.twx2-notes li:nth-child(3){ transform:rotate(-.3deg) translateX(-4px); }
.twx2-notes li:nth-child(4){ transform:rotate(.65deg) translateX(8px); }
.twx2-notes li:nth-child(5){ transform:rotate(-.8deg); }
/* a brass tack presses each sheet to the table */
.twx2-notes li::before{
  content:""; position:absolute; top:12px; right:16px; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #f7e6b8, #8a6f38 60%, #4a3a14);
  box-shadow:0 2px 4px rgba(22,17,9,.5);
}
.twx2-notes li em{
  position:absolute; left:22px; top:20px; font-family:var(--mono); font-style:normal;
  font-size:10.5px; letter-spacing:.16em; color:var(--twx2-oxide);
}
/* red pencil underline beneath the sheet number */
.twx2-notes li em::after{
  content:""; position:absolute; left:-2px; right:-4px; bottom:-6px; height:2px;
  background:linear-gradient(90deg, rgba(150,66,42,.75), rgba(150,66,42,.15));
  border-radius:2px; transform:rotate(-1.6deg);
}
.twx2-notes b{ display:block; font-family:var(--sans); font-weight:700; font-size:15.5px; color:var(--twx2-ink-morn); margin-bottom:4px; }
.twx2-notes span{ display:block; font-size:13.5px; line-height:1.6; color:var(--twx2-ink-soft); }
/* handwritten note in the table's margin */
.twx2-table-note{
  position:absolute; right:-8px; top:-52px;
  font-family:"Caveat",cursive; font-weight:500; font-size:21px; line-height:1.25;
  color:#ead9ae; transform:rotate(-2.2deg); pointer-events:none;
  text-shadow:0 1px 6px rgba(20,16,8,.75);
}
@media (max-width:960px){
  .twx2-table{ padding:96px 0 104px; }
  .twx2-table-note{ position:static; display:block; margin:0 0 6px 8px; }
  .twx2-notes li:nth-child(2){ transform:rotate(.5deg); }
  .twx2-notes li:nth-child(4){ transform:rotate(.65deg); }
}
@media (max-width:560px){
  .twx2-brief{ padding:28px 22px 26px; }
  .twx2-notes li{ padding:18px 20px 16px 60px; }
  .twx2-notes li em{ left:16px; }
}

/* ════════════════════════════════════════════════════════════════════
   BEAT 5 · BLUEPRINT — the intake, drawn in full morning light
   ════════════════════════════════════════════════════════════════════ */
.twx2-morning{ padding:118px 0 132px; }
.twx2-draft{ text-align:left; max-width:1200px; }
.twx2-draft-head{
  position:relative; display:inline-block; padding:6px 10px 2px; border-radius:14px;
}
/* soft pool of morning light behind the headline for contrast on the photo */
.twx2-draft-head::before{
  content:""; position:absolute; inset:-30px -84px -24px -46px; z-index:0; border-radius:40px;
  background:radial-gradient(82% 86% at 42% 45%, rgba(240,231,209,.62), rgba(240,231,209,.26) 60%, transparent 80%);
  filter:blur(16px);
}
.twx2-draft-head > *{ position:relative; z-index:1; }
#blueprint .twx2-draft .kd-two{ max-width:22ch; }
#blueprint .twx2-draft .kd-two b{ color:var(--twx2-ink-morn); }
#blueprint .twx2-draft .kd-two em{ color:var(--twx2-brass-morn); }
.twx2-draft-sub{ margin:14px 0 0; max-width:52ch; font-size:15px; line-height:1.7; color:#4c4132; }
.twx2-sheetwrap{ position:relative; margin-top:44px; }
/* the sheet — vellum catching the sun, square to the working table */
.twx2-draft .twx2-sheet{
  position:relative; margin-top:0; transform:rotate(.55deg);
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:0;
  border:1px solid rgba(90,76,52,.42); border-radius:2px;
  background:
    linear-gradient(151deg, rgba(234,225,203,.97), rgba(216,205,179,.96) 55%, rgba(204,192,164,.97)),
    #d4c9ac;
  box-shadow:
    0 0 0 5px rgba(224,214,188,.9), 0 0 0 6px rgba(90,76,52,.32),
    0 40px 90px rgba(24,19,10,.44), 0 4px 14px rgba(24,19,10,.24);
}
/* faint drafting grid pressed into the sheet */
.twx2-draft .twx2-sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(90,76,52,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,76,52,.08) 1px, transparent 1px);
  background-size:28px 28px;
}
.twx2-draft .builder-left{
  gap:0; padding:0; border-right:1px solid rgba(90,76,52,.3);
  display:flex; flex-direction:column;
}
.twx2-cell{ padding:18px 22px 20px; border-bottom:1px solid rgba(90,76,52,.22); position:relative; }
.twx2-cell:last-of-type{ border-bottom:0; }
.twx2-draft .builder-step{
  display:block; margin-bottom:12px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--twx2-brass-morn);
}
.twx2-draft .builder-step::after{ content:""; display:block; width:34px; height:1px; margin-top:6px; background:rgba(138,107,46,.5); }
.twx2-draft .chip{
  border-radius:2px; border:1px solid rgba(90,76,52,.42); background:rgba(255,252,244,.5);
  color:#4c4130; font-size:12.5px; padding:8px 14px;
}
.twx2-draft .chip:hover{ border-color:var(--twx2-brass-morn); color:var(--twx2-ink-morn); }
.twx2-draft .chip.on{
  background:rgba(200,158,64,.18); border-color:var(--twx2-brass-morn); color:#6d5320;
  box-shadow:0 0 0 1px rgba(138,107,46,.25);
}
.twx2-draft .intake-box{
  border-radius:2px; background:rgba(255,252,244,.72); border:1px solid rgba(90,76,52,.38);
}
.twx2-draft .intake-box:focus-within{
  border-color:var(--twx2-brass-morn);
  box-shadow:0 0 0 1px rgba(138,107,46,.5), 0 0 30px rgba(200,158,64,.14);
}
.twx2-draft .intake-box textarea{ color:var(--twx2-ink-morn); }
.twx2-draft .intake-box textarea::placeholder{ color:rgba(76,65,50,.5); }
.twx2-draft .intake-email{
  border-radius:2px; background:rgba(255,252,244,.72); border:1px solid rgba(90,76,52,.38); color:var(--twx2-ink-morn);
}
.twx2-draft .intake-email:focus{ border-color:var(--twx2-brass-morn); }
.twx2-draft .intake-send{
  border-radius:2px; background:#c9a254; color:#241a08; font-weight:700;
  box-shadow:0 6px 20px rgba(120,90,30,.35);
}
.twx2-draft .intake-send:hover{ background:#e8c877; }
.twx2-draft .intake-err{ text-align:left; padding:0; color:var(--twx2-oxide); }
.twx2-draft .intake-note{ text-align:left; padding:0; color:#5c5140; margin-top:14px; margin-bottom:0; }
/* the live schematic — ink lines on the sheet's drawing area */
.twx2-draft .blueprint{ border:0; border-radius:0; background:transparent; min-height:420px; }
.twx2-draft .blueprint::before{
  opacity:.55;
  background-image:
    linear-gradient(rgba(90,76,52,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,76,52,.1) 1px, transparent 1px);
  background-size:28px 28px;
}
.twx2-draft .bp-head{ border-bottom:1px solid rgba(90,76,52,.26); }
.twx2-draft .bp-title{ color:#6b5e46; }
.twx2-draft .bp-status{ color:var(--twx2-brass-morn); }
.twx2-draft .bp-node{ border:1px solid rgba(90,76,52,.4); background:rgba(255,252,244,.88); border-radius:2px; }
.twx2-draft .bp-node.core{ border-color:rgba(138,107,46,.65); }
.twx2-draft .bp-ico{ background:rgba(200,158,64,.16); color:var(--twx2-brass-morn); border-radius:2px; }
.twx2-draft .bp-node.core .bp-ico{ background:rgba(200,158,64,.28); color:#6d5320; }
.twx2-draft .bp-node .bp-b{ color:var(--twx2-ink-morn); }
.twx2-draft .bp-node .bp-sub{ color:#5c5140; }
.twx2-draft .bp-link{ background:linear-gradient(to bottom, rgba(138,107,46,.6), transparent); }
.twx2-draft .bp-foot{ border-top:1px solid rgba(90,76,52,.26); color:#5c5140; }
.twx2-draft .bp-foot b{ color:var(--twx2-brass-morn); }
/* title block along the sheet's foot */
.twx2-titleblock{
  grid-column:1 / -1; display:grid;
  grid-template-columns:auto minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,1fr) auto;
  border-top:1px solid rgba(90,76,52,.42); background:rgba(255,252,244,.4); position:relative;
}
.twx2-tb-cell{
  padding:12px 18px 13px; border-right:1px solid rgba(90,76,52,.26);
  display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:64px;
}
.twx2-tb-cell:last-child{ border-right:0; }
.twx2-tb-cell i{
  font-style:normal; font-family:var(--mono); font-size:7.5px; letter-spacing:.26em;
  text-transform:uppercase; color:#7b6d54;
}
.twx2-tb-cell b{ font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.1em; color:#3d3628; }
.twx2-tb-seal{ padding:8px 16px; align-items:center; }
.twx2-seal{ width:58px; height:58px; transform:rotate(-8deg); opacity:.95; }
.twx2-tb-sig{
  font-family:"Caveat",cursive !important; font-size:21px !important; letter-spacing:0 !important;
  color:var(--twx2-brass-morn) !important; transform:rotate(-2deg); display:inline-block;
}
/* handwritten note in the sheet's margin */
.twx2-margin-note{
  position:absolute; right:calc(100% + 22px); top:56px; width:180px; text-align:right; z-index:2;
  font-family:"Caveat",cursive; font-weight:500; font-size:20px; line-height:1.25;
  color:#3d362b; transform:rotate(-2.4deg); pointer-events:none;
  text-shadow:0 1px 0 rgba(255,252,240,.4);
}
@media (max-width:1380px){ .twx2-margin-note{ position:static; display:block; width:auto; text-align:left; margin:0 0 18px 4px; transform:rotate(-1.6deg); } }
@media (max-width:960px){
  .twx2-morning{ padding:96px 0 108px; }
  .twx2-draft .twx2-sheet{ grid-template-columns:1fr; transform:rotate(.4deg); }
  .twx2-draft .builder-left{ border-right:0; border-bottom:1px solid rgba(90,76,52,.3); }
  .twx2-titleblock{ grid-template-columns:auto minmax(0,1fr) auto; }
  .twx2-tb-cell:nth-child(3), .twx2-tb-cell:nth-child(4){ display:none; }
  .twx2-draft .blueprint{ min-height:340px; }
}
@media (max-width:600px){
  .twx2-draft .bp-head{ padding:12px 14px; }
  .twx2-draft .bp-title{ font-size:8px; letter-spacing:.14em; }
  .twx2-draft .bp-status{ font-size:8px; }
  .twx2-tb-cell{ padding:10px 12px; min-height:56px; }
  .twx2-tb-cell b{ font-size:9px; }
  .twx2-seal{ width:46px; height:46px; }
}
.twx2-draft .intake-done{ border-radius:2px; border:1px solid rgba(138,107,46,.6); background:rgba(252,247,234,.97); }
.twx2-draft .intake-done::before{
  background-image:
    linear-gradient(rgba(90,76,52,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,76,52,.1) 1px, transparent 1px);
}
.twx2-draft .intake-done h3{ color:var(--twx2-ink-morn); }
.twx2-draft .intake-done p{ color:var(--twx2-ink-soft); }
.twx2-draft .intake-done .mono-label{ color:var(--twx2-brass-morn); }

/* ════════════════════════════════════════════════════════════════════
   BEAT 6 · CLOSE — sunrise over the skyline, the page's brightest frame
   ════════════════════════════════════════════════════════════════════ */
.twx2-dawnscene{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  overflow:hidden; overflow:clip;
}
.twx2-dawn-plate{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 36%;
  filter:brightness(1.3) saturate(1.05);
  transform:scale(1.07); will-change:transform;
  animation:twx2Drift 56s ease-in-out infinite alternate;
}
@keyframes twx2Drift{
  from{ transform:scale(1.07) translateY(0); }
  to  { transform:scale(1.015) translateY(-6px); }
}
/* the sun breathes through the fog */
.twx2-dawn-bloom{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(64% 52% at 71% 22%, rgba(255,216,140,.42), transparent 66%),
    linear-gradient(180deg, rgba(255,226,170,.24), rgba(255,214,150,.12) 60%, rgba(255,206,140,.07));
  animation:twx2Bloom 11s ease-in-out infinite alternate;
}
@keyframes twx2Bloom{ from{ opacity:.74 } to{ opacity:1 } }
/* grade: gentle foreground scrim only where the type stands */
.twx2-dawn-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(240,226,196,.2), transparent 16%),
    radial-gradient(50% 44% at 21% 88%, rgba(22,14,7,.44), transparent 70%),
    linear-gradient(0deg, rgba(22,14,7,.46), rgba(22,14,7,.18) 26%, transparent 42%);
}
.twx2-dawncontent{
  position:relative; z-index:2; width:100%;
  display:flex; justify-content:space-between; align-items:flex-end; gap:48px;
  padding-top:26vh; padding-bottom:74px;
}
.twx2-dawn-copy{ position:relative; }
/* the copy stands in the last of the night pooled between towers */
.twx2-dawn-copy::before{
  content:""; position:absolute; inset:-44px -58px -38px -52px; z-index:0; border-radius:32px;
  background:radial-gradient(80% 78% at 42% 55%, rgba(20,13,6,.5), rgba(20,13,6,.24) 60%, transparent 80%);
}
.twx2-dawn-copy > *{ position:relative; z-index:1; }
.twx2-dawn-small{
  font-size:13.5px; line-height:1.7; color:rgba(255,246,228,.92); max-width:46ch; margin-bottom:26px;
  text-shadow:0 1px 12px rgba(22,14,7,.8);
}
#about .twx2-dawn-line{
  font-size:clamp(25px,2.7vw,36px); max-width:24ch; color:#fdf6e6;
  text-shadow:0 2px 22px rgba(22,14,7,.75), 0 1px 4px rgba(22,14,7,.4);
}
#about .twx2-dawn-line em{ color:#ffd98f; font-style:italic; }
.twx2-dawn-sign{
  display:inline-block; margin-top:18px; transform:rotate(-2deg);
  font-family:"Caveat",cursive; font-weight:500; font-size:27px; color:#ffd98f;
  text-shadow:0 1px 10px rgba(22,14,7,.5);
}
.twx2-dawn-links{ padding-bottom:8px; }
#about .twx2-dawn-links .kd-btn-ghost{
  color:#fff4dd; border:1px solid rgba(255,240,210,.6); background:rgba(24,16,8,.32);
}
#about .twx2-dawn-links .kd-btn-ghost:hover{ box-shadow:0 12px 34px rgba(20,12,4,.4); }
#about .twx2-dawn-links .kd-explore{ color:rgba(255,244,222,.85); text-shadow:0 1px 8px rgba(22,14,7,.5); }
#about .twx2-dawn-links .kd-explore:hover{ color:#fff; }
#about .twx2-dawn-links .kd-circ{ border-color:rgba(255,240,210,.5); }
@media (max-width:960px){
  .twx2-dawnscene{ min-height:88vh; }
  .twx2-dawncontent{ flex-direction:column; align-items:flex-start; gap:34px; padding-top:34vh; padding-bottom:60px; }
  .twx2-dawn-links{ padding-bottom:0; }
}

/* ── reduced motion: hold the lit frame, stop every ambient loop ───── */
@media (prefers-reduced-motion: reduce){
  .twx2-board::after{ animation:none; }
  .twx2-trace{ animation:none; stroke-dashoffset:0; opacity:.55; }
  .twx2-beacon, .twx2-st-lit i, .twx2-st-wiring i{ animation:none; }
  .twx2-glass{ animation:none; }
  .twx2-dawn-plate{ animation:none; transform:scale(1.04); }
  .twx2-dawn-bloom{ animation:none; opacity:.8; }
}