/* ════════════════════════════════════════════════════════════════════
   TOWER SECTIONS (twx-*) — Act IV story beats 2–6 below the hero.
   DIRECTORY (lobby board + pinned cross-section) · WINDOWS (proof) ·
   CONSTRUCTION (method) · DRAFTING TABLE (intake) · DAWN (close).
   Scoped under .twx-*; only minimal overrides of existing classes,
   always inside a twx ancestor. Palette per TOWER-SPEC.md.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --twx-ink:#0a0906;            /* night ground */
  --twx-mass:#0d0a07;           /* building mass */
  --twx-mass-2:#12100a;
  --twx-hair:rgba(232,200,119,.18);
  --twx-gold:#e8c877;
  --twx-gold-deep:#c9a254;
  --twx-hot:#f4e3b2;
  --twx-ember:#6b5a33;
  --twx-cream:#efe6d2;
  --twx-cream-dim:rgba(239,230,210,.6);
  --twx-cream-faint:rgba(239,230,210,.38);
}

/* the story sections stand on the tower's night ground, not the green sheet */
#platform, #work, #method, #blueprint, #about{ background:var(--twx-ink); }

/* warm the inherited green-tinted type wherever a twx beat reuses site classes */
#platform .kd-para, #method .kd-para, #work .kd-ghost-sub{ color:rgba(239,230,210,.6); }
#platform .kd-two b, #method .kd-two b, #blueprint .kd-two b{ color:var(--twx-cream); }
#platform .kd-two em, #method .kd-two em, #blueprint .kd-two em{ color:var(--twx-gold); }
#work .kd-ghost b{ color:var(--twx-cream); }
#method .kd-steps b{ color:var(--twx-cream); }
#method .kd-steps span{ color:rgba(239,230,210,.52); }
#about .kd-explore{ color:rgba(239,230,210,.6); }
#about .kd-explore:hover{ color:var(--twx-cream); }
#about .kd-btn-ghost{ color:var(--twx-cream); }

/* ────────────────────────────────────────────────────────────────────
   BEAT 2 · DIRECTORY — brass on black felt in the lobby
   ──────────────────────────────────────────────────────────────────── */
.twx-dir-copy .kd-para{ max-width:44ch; }

/* the board: brass frame around ridged black felt */
.twx-board{
  margin-top:44px; position:relative; border-radius:4px; padding:9px;
  background:linear-gradient(164deg,#4a3b1d 0%,#241c0c 26%,#191307 52%,#33270f 84%,#1c1508 100%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 2px 6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(244,227,178,.45),
    inset 0 -1px 0 rgba(0,0,0,.7);
}
.twx-board-in{
  position:relative; border:1px solid rgba(232,200,119,.42); border-radius:2px;
  padding:24px 24px 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,200,119,.05), transparent 58%),
    repeating-linear-gradient(0deg, #070503 0 3px, #0b0906 3px 4px);
  box-shadow:inset 0 0 44px rgba(0,0,0,.75);
}
.twx-board-head{ text-align:center; padding:2px 0 14px; border-bottom:1px solid rgba(232,200,119,.22); }
.twx-board-title{
  font-family:var(--serif); font-weight:400; font-size:15px; letter-spacing:.34em;
  text-transform:uppercase; color:transparent;
  background:linear-gradient(180deg,#f4e3b2 8%, #cfa957 55%, #7d6432 96%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.8));
}
.twx-board-sub{
  display:block; margin-top:7px; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.3em; color:rgba(232,200,119,.4);
}
/* rows — floor · tool · status. slotted-letter irregularity, row by row */
.twx-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,.65);
  box-shadow:0 1px 0 rgba(232,200,119,.06);
  transition:background .25s, padding .25s;
}
.twx-drow:last-child{ border-bottom:0; box-shadow:none; }
.twx-drow:hover{ background:rgba(232,200,119,.05); padding-left:12px; }
.twx-floor{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:rgba(232,200,119,.5);
}
.twx-dname{
  font-family:var(--serif); font-weight:400; font-size:19px; line-height:1.25;
  color:transparent;
  background:linear-gradient(180deg,#f1dda6 6%, #d3ad5c 52%, #97783c 98%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.85));
  transition:filter .25s;
}
.twx-drow:hover .twx-dname{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.85)) brightness(1.18); }
/* human hands set these letters — slight drift per row */
.twx-drow:nth-child(odd)  .twx-dname{ letter-spacing:.028em; }
.twx-drow:nth-child(even) .twx-dname{ letter-spacing:.052em; }
.twx-drow:nth-child(2)    .twx-dname{ transform:translateY(-.5px); }
.twx-drow:nth-child(4)    .twx-dname{ transform:translateY(.5px) rotate(.12deg); }
.twx-drow:nth-child(5)    .twx-dname{ letter-spacing:.014em; }
/* the dim note under a tool name */
.twx-dsub{
  display:block; margin-top:2px; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.12em; color:rgba(239,230,210,.32); -webkit-text-fill-color:rgba(239,230,210,.32);
}
/* status chips — lowercase mono, four states of light */
.twx-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;
}
.twx-status i{ font-style:normal; width:5px; height:5px; border-radius:50%; display:inline-block; }
.twx-st-prod{
  color:var(--twx-hot); border-color:rgba(232,200,119,.55); background:rgba(232,200,119,.1);
  box-shadow:0 0 16px rgba(232,200,119,.28), inset 0 0 8px rgba(232,200,119,.12);
  text-shadow:0 0 8px rgba(244,227,178,.5);
}
.twx-st-prod i{ background:var(--twx-hot); box-shadow:0 0 8px rgba(244,227,178,.9); animation:twxBreath 4.4s ease-in-out infinite; }
.twx-st-build{ color:rgba(232,200,119,.78); border-color:rgba(232,200,119,.32); background:rgba(232,200,119,.04); }
.twx-st-build i{ background:var(--twx-gold); box-shadow:0 0 7px rgba(232,200,119,.8); animation:twxFlicker 3.7s steps(1,end) infinite; }
.twx-st-sched{ color:rgba(201,162,84,.55); border-color:rgba(201,162,84,.26); }
.twx-st-sched i{ background:var(--twx-ember); }
.twx-st-next{ color:rgba(239,230,210,.26); border-color:rgba(239,230,210,.12); }
.twx-st-next i{ background:transparent; border:1px solid rgba(239,230,210,.24); width:4px; height:4px; }
.twx-st-lobby{ color:rgba(239,230,210,.55); border-color:rgba(239,230,210,.2); }
.twx-st-lobby i{ background:rgba(239,230,210,.5); }
/* the one warm row — floor three glows onto the felt */
.twx-drow-lit{ background:radial-gradient(70% 150% at 34% 50%, rgba(232,200,119,.1), transparent 72%); }
.twx-drow-lit .twx-floor{ color:rgba(244,227,178,.85); text-shadow:0 0 9px rgba(232,200,119,.6); }
.twx-drow-lit .twx-dname{ background:linear-gradient(180deg,#fff3d2 4%, #ecc878 55%, #b3924a 98%); -webkit-background-clip:text; background-clip:text; }
@keyframes twxBreath{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
@keyframes twxFlicker{
  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 }
}
.twx-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,.14);
  font-family:var(--mono); font-size:8px; letter-spacing:.2em; color:rgba(239,230,210,.26);
}
/* small screens: smaller slotted letters so the gradient never clips a word */
@media (max-width:600px){
  .twx-board-in{ padding:18px 14px 12px; }
  .twx-board-title{ font-size:12.5px; letter-spacing:.2em; }
  .twx-drow{ grid-template-columns:30px minmax(0,1fr) auto; gap:10px; }
  .twx-dname{ font-size:15.5px; overflow-wrap:break-word; }
  .twx-drow:nth-child(odd) .twx-dname, .twx-drow:nth-child(even) .twx-dname{ letter-spacing:.018em; }
  .twx-dsub{ font-size:7.5px; }
  .twx-status{ font-size:7.5px; letter-spacing:.1em; padding:3px 6px; gap:5px; }
}

/* ── the pinned cross-section (right column) ── */
.twx-xsec-wall{ position:relative; padding:10px 6px; }
.twx-xsec{
  position:relative; transform:rotate(-1.2deg); border-radius:2px;
  background:#0b0906;
  border:1px solid rgba(232,200,119,.24);
  box-shadow:0 34px 80px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.5);
}
.twx-xsec svg{ display:block; width:100%; height:auto; }
/* pins in the top corners */
.twx-pin{
  position:absolute; top:-5px; width:11px; height:11px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 34% 30%, #f4e3b2, #8a6f38 62%, #40320f);
  box-shadow:0 2px 5px rgba(0,0,0,.8);
}
.twx-pin-l{ left:14px; } .twx-pin-r{ right:18px; top:-4px; }
/* one accent line quietly draws itself, forever */
.twx-trace{ stroke-dasharray:100 100; stroke-dashoffset:100; animation:twxTrace 9s linear infinite; }
@keyframes twxTrace{
  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 }
}
.twx-beacon{ animation:twxBreath 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .twx-trace{ animation:none; stroke-dashoffset:0; opacity:.55; }
  .twx-st-build i, .twx-st-prod i, .twx-beacon{ animation:none; }
}
@media (max-width:960px){
  .twx-xsec{ max-width:440px; margin:0 auto; }
}

/* ────────────────────────────────────────────────────────────────────
   BEAT 3 · WINDOWS — the work videos as lit windows on the night facade
   ──────────────────────────────────────────────────────────────────── */
.twx-win-head b{ text-shadow:0 0 44px rgba(232,200,119,.28); }
/* full-bleed facade band inside #work */
.twx-facade{
  position:relative; margin-top:10px; padding:84px 0 78px;
  border-top:1px solid var(--twx-hair);
  border-bottom:1px solid rgba(232,200,119,.1);
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(232,200,119,.045), transparent 56%),
    repeating-linear-gradient(90deg, transparent 0 214px, rgba(232,200,119,.035) 214px 215px),
    repeating-linear-gradient(0deg, transparent 0 118px, rgba(0,0,0,.42) 118px 121px),
    linear-gradient(180deg, #0c0a07, #080604 70%, #0a0805);
}
/* far, unlit neighbours — sparse dim windows in the masonry */
.twx-facade::before, .twx-facade::after{
  content:""; position:absolute; width:7px; height:10px; opacity:.5; pointer-events:none;
  background:rgba(232,200,119,.14);
}
.twx-facade::before{
  left:3%; top:14%;
  box-shadow:38px 130px rgba(232,200,119,.08), 120px 46px rgba(232,200,119,.11),
    76px 300px rgba(232,200,119,.07), 190px 210px rgba(232,200,119,.05),
    12px 420px rgba(232,200,119,.09), 150px 470px rgba(232,200,119,.06);
}
.twx-facade::after{
  right:6%; bottom:12%;
  box-shadow:-46px -150px rgba(232,200,119,.09), -130px -60px rgba(232,200,119,.06),
    -84px -330px rgba(232,200,119,.08), -20px -240px rgba(232,200,119,.05),
    -180px -420px rgba(232,200,119,.07);
}
.twx-winrow{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.6vw,52px); align-items:start; position:relative; z-index:1;
}
/* nothing in perfect threes — the middle window sits lower on the facade */
@media (min-width:961px){
  .twx-winrow .kd-card:nth-child(2){ transform:translateY(36px); }
  .twx-winrow .kd-card:nth-child(3){ transform:translateY(10px); }
}
/* small etched floor tag above each window */
.twx-wintag{
  display:block; margin:0 0 10px 6px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.24em; color:rgba(232,200,119,.42);
}
/* the window: mullion frame, warm interior light bleeding onto the stone */
.twx-window{
  position:relative; padding:9px; border-radius:3px;
  background:linear-gradient(180deg,#241b0d, #100c06 55%, #1b1409);
  border:1px solid rgba(232,200,119,.42);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(244,227,178,.22),
    0 0 38px rgba(232,200,119,.22),
    0 0 110px 26px rgba(232,200,119,.12),
    0 30px 60px rgba(0,0,0,.55);
}
/* stone sill beneath */
.twx-window::after{
  content:""; position:absolute; left:-7px; right:-7px; bottom:-9px; height:5px; border-radius:2px;
  background:linear-gradient(180deg,#20180c,#0b0805);
  box-shadow:0 5px 14px rgba(0,0,0,.6), inset 0 1px 0 rgba(232,200,119,.16);
}
.twx-window .kd-media{ border-color:rgba(244,227,178,.24); border-radius:2px; }
/* center munt bar + glass sheen — a real element so clicks fall through */
.twx-munt{ position:absolute; inset:9px; z-index:2; pointer-events:none; border-radius:2px;
  background:
    linear-gradient(115deg, rgba(255,244,214,.075), transparent 42%),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(9,7,4,.8) calc(50% - 1px), rgba(9,7,4,.8) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg,  transparent calc(50% - 1px), rgba(9,7,4,.8) calc(50% - 1px), rgba(9,7,4,.8) calc(50% + 1px), transparent calc(50% + 1px));
  box-shadow:inset 0 0 0 1px rgba(232,200,119,.3), inset 0 0 26px rgba(0,0,0,.35);
}
/* the interior light breathes very slowly — someone is working in there */
.twx-window{ transition:box-shadow .5s; }
.twx-winrow .kd-card:hover .twx-window{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(244,227,178,.28),
    0 0 40px rgba(232,200,119,.26),
    0 0 120px 26px rgba(232,200,119,.13),
    0 30px 60px rgba(0,0,0,.55);
}
/* captions as brass plaques mounted under the sill — engraved, centered */
.twx-winrow .kd-card-cap.twx-plaque{
  margin:24px auto 0; padding:10px 26px 9px; max-width:88%; width:max-content; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  background:linear-gradient(180deg, rgba(64,51,25,.92), rgba(26,20,10,.96));
  border:1px solid rgba(232,200,119,.38); border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(244,227,178,.28), 0 8px 20px rgba(0,0,0,.5);
}
.twx-plaque::before, .twx-plaque::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #f4e3b2, #6b5a33 72%);
  box-shadow:0 1px 2px rgba(0,0,0,.8);
}
.twx-plaque::before{ left:6px } .twx-plaque::after{ right:6px }
.twx-winrow .twx-plaque b{
  font-family:var(--serif); font-weight:500; font-size:14.5px; letter-spacing:.04em; color:#eed9a4; white-space:nowrap;
}
.twx-winrow .twx-plaque span{ font-family:var(--mono); font-size:8px; letter-spacing:.14em; color:rgba(239,230,210,.48); text-align:center; }
@media (max-width:960px){
  .twx-winrow{ grid-template-columns:1fr; gap:56px; max-width:560px; margin:0 auto; }
  .twx-facade{ padding:64px 0 60px; }
}

/* ────────────────────────────────────────────────────────────────────
   BEAT 4 · CONSTRUCTION — how a dark floor gets lit
   ──────────────────────────────────────────────────────────────────── */
.twx-method .kd-para{ max-width:40ch; }
/* the little site note pinned by the copy */
.twx-permit{
  display:inline-block; margin-top:30px; padding:14px 18px 12px; transform:rotate(-.9deg);
  border:1px solid rgba(232,200,119,.26); border-radius:2px; background:rgba(232,200,119,.03);
}
.twx-permit i{
  display:block; font-style:normal; font-family:var(--mono); font-size:8px;
  letter-spacing:.26em; color:rgba(232,200,119,.45); margin-bottom:6px;
}
.twx-permit b{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:15.5px; color:var(--twx-cream-dim); }
.twx-permit .twx-permit-sign{
  font-family:"Caveat",cursive; font-weight:500; font-size:20px; color:var(--twx-gold);
  display:inline-block; transform:rotate(-2deg); margin-left:10px;
}
/* steps: mono sheet numbers + gold linework glyphs */
.twx-steps li{ grid-template-columns:52px 46px 1fr; gap:16px; align-items:start; padding:20px 0; }
.twx-steps li em{
  font-family:var(--mono); font-style:normal; font-weight:400; font-size:10.5px;
  letter-spacing:.16em; color:var(--twx-gold-deep); padding-top:12px;
}
.twx-glyph{ width:44px; height:44px; display:block; margin-top:0; }
.twx-glyph path, .twx-glyph circle, .twx-glyph rect, .twx-glyph line, .twx-glyph polyline{
  fill:none; stroke:var(--twx-gold-deep); stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round;
}
.twx-glyph .twx-g-warm{ stroke:var(--twx-gold); }
.twx-glyph .twx-g-fill{ fill:rgba(232,200,119,.9); stroke:none; }
.twx-steps b{ font-family:var(--sans); font-weight:600; font-size:15.5px; }
.twx-steps li:hover .twx-glyph path, .twx-steps li:hover .twx-glyph circle{ stroke:var(--twx-gold); }
/* the switch on the last step glows on a slow loop */
.twx-lamp{ animation:twxLamp 5.2s ease-in-out infinite; transform-origin:center; }
@keyframes twxLamp{ 0%,58%,100%{ opacity:.25 } 70%,86%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .twx-lamp{ animation:none; opacity:1 } }
@media (max-width:560px){ .twx-steps li{ grid-template-columns:44px 38px 1fr; gap:12px; } }

/* ────────────────────────────────────────────────────────────────────
   BEAT 5 · DRAFTING TABLE — the intake as an architect's title block
   ──────────────────────────────────────────────────────────────────── */
.twx-draft{ text-align:left; max-width:1200px; }
.twx-draft .kd-two{ max-width:22ch; }
.twx-draft-sub{ margin:16px 0 46px; max-width:52ch; font-size:15px; line-height:1.7; color:var(--twx-cream-dim); }
.twx-sheetwrap{ position:relative; }
/* the drawing sheet itself */
.twx-draft .twx-sheet{
  position:relative; margin-top:0; transform:rotate(.6deg);
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:0;
  border:1px solid rgba(239,230,210,.3); border-radius:2px;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(232,200,119,.035), transparent 60%),
    #0d0b08;
  box-shadow:0 0 0 5px #0d0b08, 0 0 0 6px rgba(239,230,210,.16), 0 36px 90px rgba(0,0,0,.6);
}
/* faint drafting grid across the whole sheet */
.twx-draft .twx-sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(239,230,210,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,230,210,.05) 1px, transparent 1px);
  background-size:28px 28px;
}
.twx-draft .builder-left{
  gap:0; padding:0; border-right:1px solid rgba(239,230,210,.22);
  display:flex; flex-direction:column;
}
/* each input lives in a ruled cell of the sheet */
.twx-cell{ padding:18px 22px 20px; border-bottom:1px solid rgba(239,230,210,.16); position:relative; }
.twx-cell:last-of-type{ border-bottom:0; }
.twx-draft .builder-step{
  display:block; margin-bottom:12px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(232,200,119,.62);
}
.twx-draft .builder-step::after{ content:""; display:block; width:34px; height:1px; margin-top:6px; background:rgba(232,200,119,.3); }
/* chips: drawing-tag squares, gold when picked */
.twx-draft .chip{
  border-radius:2px; border-color:rgba(239,230,210,.18); color:var(--twx-cream-dim);
  font-size:12.5px; padding:8px 14px;
}
.twx-draft .chip:hover{ border-color:rgba(232,200,119,.5); color:var(--twx-cream); }
.twx-draft .chip.on{
  background:rgba(232,200,119,.1); border-color:var(--twx-gold); color:var(--twx-gold);
  box-shadow:0 0 14px rgba(232,200,119,.14);
}
.twx-draft .intake-box{
  border-radius:2px; background:rgba(7,6,4,.6); border-color:rgba(239,230,210,.2);
}
.twx-draft .intake-box:focus-within{
  border-color:rgba(232,200,119,.55);
  box-shadow:0 0 0 1px rgba(232,200,119,.4), 0 0 34px rgba(232,200,119,.1);
}
.twx-draft .intake-box textarea{ color:var(--twx-cream); }
.twx-draft .intake-box textarea::placeholder{ color:rgba(239,230,210,.34); }
.twx-draft .intake-email{
  border-radius:2px; background:rgba(7,6,4,.6); border-color:rgba(239,230,210,.2); color:var(--twx-cream);
}
.twx-draft .intake-email:focus{ border-color:rgba(232,200,119,.55); }
.twx-draft .intake-send{
  border-radius:2px; background:var(--twx-gold); color:#0a0906; font-weight:700;
  box-shadow:0 0 22px rgba(232,200,119,.22);
}
.twx-draft .intake-send:hover{ background:var(--twx-hot); }
.twx-draft .intake-err{ text-align:left; padding:0; }
.twx-draft .intake-note{ text-align:left; padding:0; color:rgba(239,230,210,.42); margin-top:14px; margin-bottom:0; }
/* the live schematic panel becomes the sheet's drawing area */
.twx-draft .blueprint{
  border:0; border-radius:0; background:transparent; min-height:420px;
}
.twx-draft .blueprint::before{
  opacity:.5;
  background-image:
    linear-gradient(rgba(232,200,119,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,200,119,.07) 1px, transparent 1px);
  background-size:28px 28px;
}
.twx-draft .bp-head{ border-bottom-color:rgba(239,230,210,.16); }
.twx-draft .bp-title{ color:rgba(239,230,210,.4); }
.twx-draft .bp-status{ color:var(--twx-gold); }
.twx-draft .bp-node{ border-color:rgba(232,200,119,.2); background:rgba(10,8,5,.85); border-radius:2px; }
.twx-draft .bp-node.core{ border-color:rgba(232,200,119,.5); }
.twx-draft .bp-ico{ background:rgba(232,200,119,.08); color:var(--twx-gold-deep); border-radius:2px; }
.twx-draft .bp-node.core .bp-ico{ background:rgba(232,200,119,.16); color:var(--twx-gold); }
.twx-draft .bp-node .bp-sub{ color:rgba(239,230,210,.42); }
.twx-draft .bp-link{ background:linear-gradient(to bottom, rgba(232,200,119,.5), transparent); }
.twx-draft .bp-foot{ border-top-color:rgba(239,230,210,.16); color:rgba(239,230,210,.4); }
.twx-draft .bp-foot b{ color:var(--twx-gold); }
/* the title block strip across the sheet's bottom edge */
.twx-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(239,230,210,.3); background:rgba(7,6,4,.35); position:relative;
}
.twx-tb-cell{
  padding:12px 18px 13px; border-right:1px solid rgba(239,230,210,.16);
  display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:64px;
}
.twx-tb-cell:last-child{ border-right:0; }
.twx-tb-cell i{
  font-style:normal; font-family:var(--mono); font-size:7.5px; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(239,230,210,.34);
}
.twx-tb-cell b{ font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.1em; color:var(--twx-cream-dim); }
.twx-tb-seal{ padding:8px 16px; align-items:center; }
.twx-seal{ width:58px; height:58px; transform:rotate(-8deg); opacity:.92; }
.twx-tb-sig{
  font-family:"Caveat",cursive !important; font-size:21px !important; letter-spacing:0 !important;
  color:var(--twx-gold) !important; transform:rotate(-2deg); display:inline-block;
}
/* handwritten margin note beside the sheet */
.twx-margin-note{
  position:absolute; right:calc(100% + 22px); top:56px; width:170px; text-align:right; z-index:2;
  font-family:"Caveat",cursive; font-weight:500; font-size:20px; line-height:1.25;
  color:#ecdcb2; transform:rotate(-2.4deg); pointer-events:none;
}
@media (max-width:1380px){ .twx-margin-note{ position:static; display:block; width:auto; text-align:left; margin:0 0 18px 4px; transform:rotate(-1.6deg); } }
@media (max-width:960px){
  .twx-draft .twx-sheet{ grid-template-columns:1fr; transform:rotate(.4deg); }
  .twx-draft .builder-left{ border-right:0; border-bottom:1px solid rgba(239,230,210,.22); }
  .twx-titleblock{ grid-template-columns:auto minmax(0,1fr) auto; }
  .twx-tb-cell:nth-child(3), .twx-tb-cell:nth-child(4){ display:none; }
  .twx-draft .blueprint{ min-height:340px; }
}
@media (max-width:600px){
  .twx-draft .bp-head{ padding:12px 14px; }
  .twx-draft .bp-title{ font-size:8px; letter-spacing:.14em; }
  .twx-draft .bp-status{ font-size:8px; }
  .twx-tb-cell{ padding:10px 12px; min-height:56px; }
  .twx-tb-cell b{ font-size:9px; }
  .twx-seal{ width:46px; height:46px; }
}
/* success card, same drawing language */
.twx-draft .intake-done{ border-radius:2px; border-color:rgba(232,200,119,.5); background:#0d0b08; }
.twx-draft .intake-done::before{
  background-image:
    linear-gradient(rgba(232,200,119,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,200,119,.08) 1px, transparent 1px);
}
.twx-draft .intake-done .mono-label{ color:var(--twx-gold); }

/* ────────────────────────────────────────────────────────────────────
   BEAT 6 · DAWN — the close
   ──────────────────────────────────────────────────────────────────── */
#about{ padding-bottom:0; overflow:hidden; }
.twx-dawnband{ position:relative; padding-bottom:150px; }
/* first light, low behind the skyline */
.twx-dawnband::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(96% 72% at 62% 108%, rgba(214,128,52,.24), transparent 62%),
    radial-gradient(60% 44% at 64% 112%, rgba(232,200,119,.2), transparent 66%);
  animation:twxDawn 12s ease-in-out infinite;
}
@keyframes twxDawn{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .twx-dawnband::before{ animation:none } }
.twx-dawn{ position:relative; z-index:1; align-items:center; }
.twx-dawn-small{ font-size:13.5px; line-height:1.7; color:var(--twx-cream-faint); max-width:44ch; margin-bottom:26px; }
.twx-dawn-line{ font-size:clamp(24px,2.6vw,34px); max-width:24ch; color:var(--twx-cream); }
.twx-dawn-line em{ color:var(--twx-gold); font-style:italic; }
.twx-dawn-sign{
  display:inline-block; margin-top:18px; transform:rotate(-2deg);
  font-family:"Caveat",cursive; font-weight:500; font-size:26px; color:var(--twx-gold);
}
/* the finished building stands on the horizon, every window lit */
.twx-horizon{
  position:absolute; left:0; right:0; bottom:0; height:1px; z-index:0;
  background:linear-gradient(90deg, transparent, rgba(232,200,119,.35) 30%, rgba(232,200,119,.35) 74%, transparent);
}
.twx-horizon svg{ position:absolute; right:12%; bottom:0; width:88px; height:auto; display:block; filter:drop-shadow(0 0 18px rgba(232,200,119,.25)); }
.twx-horizon .twx-beacon{ animation:twxBreath 5s ease-in-out infinite; }
@media (max-width:960px){
  .twx-dawnband{ padding-bottom:120px; }
  .twx-horizon svg{ right:8%; width:58px; }
}