/* ─────────────────────────────────────────────────────────────────────────────
   DARK SKY HOLDINGS — "night blueprint" design system. v2
   An engineering-drawing aesthetic on a night-sky palette: visible hairline
   grid with intersection handles, three type voices (condensed display /
   editorial serif / functional mono), mechanical motion, monochrome UI —
   photography alone carries color.
   Type: Bebas Neue · EB Garamond · Geist Mono
   ──────────────────────────────────────────────────────────────────────────── */

:root{
  --dusk:#0b1120;             /* "dusk mode" section bg */
  --night:#04060c;            /* "night mode" section bg */
  --panel:#0d1322;            /* card fill */
  --w:#f2f4fa;                /* starlight white */
  --w60:rgba(242,244,250,.60);
  --w40:rgba(242,244,250,.40);
  --w25:rgba(242,244,250,.25);
  --w15:rgba(242,244,250,.15);
  --w10:rgba(242,244,250,.10);
  --w06:rgba(242,244,250,.06);
  --frame:10px;               /* page frame gutter */
  --disp:"Bebas Neue",Impact,sans-serif;
  --serif:"EB Garamond",Georgia,serif;
  --mono:"Geist Mono","Space Mono",ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--dusk);color:var(--w);
  font-family:var(--mono);font-size:13.5px;line-height:1.55;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--w);color:var(--night)}

/* page frame — outermost hairline 10px from every edge */
.pageframe{position:fixed;inset:var(--frame);border:1px solid var(--w15);pointer-events:none;z-index:58}

/* film grain over everything */
.grain{position:fixed;inset:0;pointer-events:none;z-index:57;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── The blueprint grid (per-section) ─────────────────────────────────────────
   Every .sec gets vertical hairlines at 25/50/75 with 7px handles where they
   meet the section's top rule. .sec--night flips to the darker mode. */
.sec{position:relative;background:var(--dusk)}
.sec--night{background:var(--night)}
/* Rules span the content area (same inset as .wrap padding) and each vertical
   hairline sits at a gutter midpoint of the 24px-gap 4-col grid — column k
   starts at k*25% + k*6px inside the content box, so the gutter center is
   k*25% + (k-2)*6px. Text therefore never crosses a rule. */
.sec .rules{position:absolute;top:0;bottom:0;left:clamp(22px,3.5vw,52px);right:clamp(22px,3.5vw,52px);pointer-events:none}
.sec .rules i{position:absolute;top:0;bottom:0;width:1px;background:var(--w10)}
.sec .rules i:nth-child(1){left:calc(25% - 6px)}
.sec .rules i:nth-child(2){left:50%}
.sec .rules i:nth-child(3){left:calc(75% + 6px)}
.sec .rules::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--w15)}
.sec .rules b{position:absolute;top:-3px;width:7px;height:7px;background:var(--w40)}
.sec .rules b:nth-of-type(1){left:calc(25% - 9px)}
.sec .rules b:nth-of-type(2){left:calc(50% - 3px)}
.sec .rules b:nth-of-type(3){left:calc(75% + 3px)}
/* grid draw-on */
.sec .rules i{transform:scaleY(0);transform-origin:top;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.sec .rules b{opacity:0;transition:opacity .4s .7s}
.sec.in .rules i{transform:none}
.sec.in .rules b{opacity:1}
@media (prefers-reduced-motion:reduce){.sec .rules i{transform:none}.sec .rules b{opacity:1}}
/* single-column mobile: keep only the center rule (curated density) */
@media (max-width:860px){
  .sec .rules i:nth-child(1),.sec .rules i:nth-child(3),
  .sec .rules b:nth-of-type(1),.sec .rules b:nth-of-type(3){display:none}
}

.cell{position:relative;z-index:2}
.gridwrap{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);min-height:100%}
.pad{padding:clamp(22px,3vw,44px)}
@media (max-width:860px){
  .gridwrap{grid-template-columns:1fr}
  /* inline grid-column placements are desktop choreography — neutralize on mobile */
  .gridwrap>*{grid-column:auto !important;grid-row:auto !important;margin-top:0 !important}
}

/* ── Type voices ── */
.mega{
  font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.86;
  font-size:clamp(64px,14vw,220px);letter-spacing:.005em;
}
/* mega type never overflows its box or the viewport (word-boundary wraps only) */
.mega,.megatitle,.giantword,.scatter .w{overflow-wrap:break-word;max-width:100%}
.wrap>*{max-width:100%}
.mega .it{font-family:var(--serif);font-style:italic;text-transform:none;font-weight:400}
.giantword{font-family:var(--disp);text-transform:uppercase;line-height:.84;font-size:clamp(90px,18vw,300px)}
h1,h2{font-weight:400}
.serifhead{font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);line-height:1.2;letter-spacing:-.02em}
.serifhead .q{display:block;font-style:italic;color:var(--w60)}
.seriflink{font-family:var(--serif);font-size:clamp(22px,2vw,28px);text-decoration:none;line-height:1.6}
.mono-body{font-size:13.3px;line-height:1.55;text-transform:uppercase;letter-spacing:-.005em;color:var(--w60);max-width:44ch}
.mono-body strong{color:var(--w);font-weight:500}
.fine{font-size:11px;text-transform:uppercase;color:var(--w40);letter-spacing:.02em}
.bignum{font-family:var(--mono);font-weight:300;font-size:clamp(44px,6vw,110px);line-height:1;letter-spacing:-.04em}

/* chips */
.chip{
  display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 14px;
  border-radius:8px;background:var(--w10);backdrop-filter:blur(8px);
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--w);white-space:nowrap;
}
.chip::before{content:"·";color:var(--w)}
.chip--num::before{content:none}

/* buttons — hard-cornered, white, "+" suffix convention */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:18px 26px;
  background:var(--w);color:var(--night);border:1px solid var(--w);
  font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
}
.btn::after{content:"+"}
.btn i{position:absolute;inset:0;background:var(--night);transform:translateY(101%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.btn:hover i{transform:none}
.btn span{position:relative;z-index:1;transition:color .3s}
.btn:hover{color:var(--w)}
.btn--ghost{background:transparent;color:var(--w);border-color:var(--w40)}
.btn--ghost:hover{border-color:var(--w)}
.btn--ghost i{background:var(--w)}
.btn--ghost:hover{color:var(--night)}
.cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* ── Nav: floating pill + expanding panel ── */
.navpill{
  position:fixed;top:calc(var(--frame) + 8px);left:50%;transform:translateX(-50%);
  width:min(500px,calc(100vw - 40px));z-index:70;border-radius:10px;overflow:hidden;
  background:rgba(10,14,26,.55);backdrop-filter:blur(18px);
  border:1px solid var(--w25);box-shadow:0 8px 40px rgba(0,0,0,.35);
  transition:max-height .5s cubic-bezier(.2,.7,.2,1);
  max-height:56px;
}
body.menu-open .navpill{max-height:min(640px,calc(100vh - 40px));background:linear-gradient(to bottom,rgba(4,6,12,.92),rgba(11,17,32,.88))}
.navpill .bar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 18px}
.navpill .word{font-family:var(--disp);font-size:22px;letter-spacing:.04em;text-decoration:none;text-transform:uppercase}
.navpill .word .st{color:var(--w60)}
.burger{background:none;border:0;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:5px}
.burger span{width:20px;height:1.5px;background:var(--w);transition:transform .3s,opacity .3s}
body.menu-open .burger span:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}
.navpill .quick{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--w60);text-decoration:none}
.navpill .quick:hover{color:var(--w)}
.navpanel{padding:8px 18px 22px;opacity:0;transition:opacity .35s .1s}
body.menu-open .navpanel{opacity:1}
.navpanel .duo{display:grid;grid-template-columns:1fr 1fr;position:relative;padding-bottom:18px}
.navpanel .duo::before{content:"";position:absolute;top:0;bottom:18px;left:50%;width:1px;background:var(--w15)}
.navpanel .duo a{text-decoration:none;padding:6px 12px;display:block}
.navpanel .duo .thumb{aspect-ratio:16/10;border:1px solid var(--w15);overflow:hidden;margin-bottom:10px}
.navpanel .duo .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.navpanel .duo .nm{font-family:var(--serif);font-size:18px}
.navpanel .duo .ed{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--w60)}
.navpanel hr{border:0;border-top:1px solid var(--w15);margin:14px 0}
.navpanel .links{display:flex;flex-direction:column;align-items:center;gap:2px}
.navpanel .links a{font-family:var(--serif);font-size:19px;text-decoration:none;padding:7px 0;color:var(--w)}
.navpanel .links a:hover{font-style:italic}
.navcols{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-height:46vh;overflow-y:auto;padding:2px 4px}
.navcols .ml{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--w40);margin-bottom:6px}
.navcols a{display:block;font-family:var(--serif);font-size:15.5px;line-height:1.4;color:var(--w);text-decoration:none;padding:3px 0}
.navcols a:hover{font-style:italic}
.navpanel .mail{display:block;text-align:center;font-size:12px;text-transform:uppercase;color:var(--w60);text-decoration:none;letter-spacing:.04em}

/* ── Glass (frosted) card ── */
.glass{
  position:relative;background:rgba(242,244,250,.08);backdrop-filter:blur(18px);
  border:1px solid var(--w15);padding:26px;
}
.glass--dark{background:rgba(4,6,12,.55)}

/* audience/offer card (the "model card" archetype) */
.offercard{width:min(360px,88vw);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:34px 26px}
.offercard .nm{font-family:var(--serif);font-size:27px;line-height:1.15}
.offercard .ed{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--w60);display:block}
.offercard .pr{font-size:12.5px;text-transform:uppercase;color:var(--w60)}
.offercard .thumb{width:200px;aspect-ratio:16/10;border:1px solid var(--w25);overflow:hidden}
.offercard .thumb img{width:100%;height:100%;object-fit:cover}

/* ── Hero ── */
.cinehero{position:relative;min-height:100svh;overflow:hidden}
.cinehero .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cinehero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,12,.72),rgba(4,6,12,.12) 50%,rgba(4,6,12,.3))}
.herocol{
  position:absolute;z-index:3;right:calc(2% + var(--frame));top:50%;transform:translateY(-50%);
  width:min(330px,80vw);display:flex;flex-direction:column;gap:20px;
}
.herocol .serifhead{font-size:clamp(24px,2.2vw,31px)}
.heromark{
  position:absolute;z-index:2;left:0;bottom:-.16em;white-space:nowrap;
  font-family:var(--disp);text-transform:uppercase;line-height:.8;
  font-size:clamp(150px,26vw,420px);color:var(--w);
}

/* mega wordmark marquee (hero + footer) */
.markmq{position:absolute;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}
.markmq .track{display:inline-block;white-space:nowrap;animation:mq var(--dur,80s) linear infinite}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.markmq .track,.ticker .track{animation:none}}

/* tickers */
.ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--w15);border-bottom:1px solid var(--w15);padding:12px 0;position:relative;z-index:3}
.ticker .track{display:inline-block;animation:mq var(--dur,15s) linear infinite}
.ticker span{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--w60);margin:0 26px}
.ticker span::after{content:"/";margin-left:52px;color:var(--w25)}
.ticker--fine span{font-size:10.5px;color:var(--w40)}

/* ── Scattered mega-words ── */
.scatter{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);row-gap:clamp(16px,2.6vw,44px);column-gap:3vw;padding:clamp(60px,9vw,140px) 0}
.scatter .w{font-family:var(--disp);text-transform:uppercase;line-height:.85;font-size:clamp(56px,9.5vw,170px);overflow:hidden}
.scatter .w>span{display:block;transform:translateY(108%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.scatter.in .w>span{transform:none}
.scatter .w.it{font-family:var(--serif);font-style:italic;text-transform:none;font-size:clamp(50px,8vw,150px);line-height:1}
.c1{grid-column-start:1}.c2{grid-column-start:2}.c3{grid-column-start:3}.c4{grid-column-start:4}
.sp2{grid-column-end:span 2}.sp3{grid-column-end:span 3}.sp4{grid-column:1/-1}
.tcenter{text-align:center}.tright{text-align:right}
@media (prefers-reduced-motion:reduce){.scatter .w>span{transform:none;transition:none}}
@media (max-width:860px){
  .scatter{grid-template-columns:1fr;text-align:center}
  .scatter .w{grid-column:1!important;font-size:clamp(52px,13vw,110px)}
}

/* ── Numbered content block ── */
.numblock{display:flex;flex-direction:column;gap:16px;max-width:400px}
.numblock .serifhead{margin-top:4px}

/* framed in-cell image */
.framed{border:1px solid var(--w15);overflow:hidden;position:relative}
.framed img,.framed video{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.framed:hover img{transform:scale(1.04)}
.ratio-169{aspect-ratio:16/9}.ratio-32{aspect-ratio:3/2}.ratio-45{aspect-ratio:4/5}.ratio-11{aspect-ratio:1/1}

/* ── Stat tiles ── */
.stattiles{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2;border:1px solid var(--w15);background:rgba(242,244,250,.05);backdrop-filter:blur(14px)}
.stattile{padding:clamp(20px,2.6vw,38px);border-right:1px solid var(--w15);border-bottom:1px solid var(--w15);min-height:170px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;overflow:hidden}
.stattile .bignum{align-self:center;line-height:1.08;overflow-wrap:break-word;max-width:100%;text-align:center}
.stattile .fine{align-self:flex-start}
@media (max-width:860px){.stattiles{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stattiles{grid-template-columns:1fr}.stattile{min-height:150px}}

/* ── Bracket pull-quote ── */
.bquote{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,40px);padding:clamp(60px,8vw,120px) 0;text-align:center}
.bquote .par{font-family:var(--serif);font-weight:300;font-size:clamp(120px,16vw,240px);line-height:.8;color:var(--w25);transform:scale(.6);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.bquote.in .par{transform:none}
.bquote blockquote{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:1.5;max-width:34ch}
.bquote cite{display:block;margin-top:18px;font-family:var(--mono);font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--w40)}

/* ── Sticky pinned film ── */
.pinwrap{position:relative;height:280vh}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pin video,.pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--pinscale,.72));transition:transform .1s linear}
.pin .ticker{position:absolute;top:0;left:0;right:0;border-bottom-color:transparent}

/* ── Bento gallery ── */
.bento{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.bento .framed{border-width:0;outline:1px solid var(--w10);outline-offset:-0.5px}
.bento .blank{min-height:120px}
.bento .clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1)}
.bento .clip.in{clip-path:inset(0)}
@media (max-width:860px){.bento{grid-template-columns:1fr 1fr}.bento .blank{display:none}}

/* ── Checkerboard people grid ── */
.people{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr)}
.people .cellp{aspect-ratio:4/5;position:relative;outline:1px solid var(--w10)}
.people .cellp img{width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.85)}
.people .plate{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:rgba(4,6,12,.55);backdrop-filter:blur(12px);border-top:1px solid var(--w15)}
.people .plate .nm{font-family:var(--serif);font-size:22px}
.people .plate .rl{font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--w60);margin-top:4px}
.people .sig{display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:clamp(40px,4vw,64px);color:var(--w25)}
.people .markcell{display:grid;place-items:center;font-size:44px;color:var(--w40)}
@media (max-width:860px){.people{grid-template-columns:1fr 1fr}}

/* ── Tier / offer pair-cells (pricing archetype → engagement tiers) ── */
.tiers{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr}
.tiers .tcell{padding:clamp(28px,4vw,56px);outline:1px solid var(--w10);display:flex;flex-direction:column;gap:18px;min-height:340px}
.tiers .tcell:nth-child(4n+2),.tiers .tcell:nth-child(4n+3){background:#0a0e18}
.tiers .avail{margin-left:auto;text-align:right}
.tiers .tcell .btn{margin-top:auto;align-self:flex-start}
@media (max-width:860px){.tiers{grid-template-columns:1fr}.tiers .tcell{min-height:0}}

/* ── Split page (legal / statement archetype) ── */
.splitpage{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.splitpage .mediahalf{position:relative;overflow:hidden}
.splitpage .mediahalf video,.splitpage .mediahalf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:961px){.splitpage .mediahalf{position:sticky;top:0;height:100vh}}
.splitpage .texthalf{position:relative;background:linear-gradient(to bottom,#0a1430,#2a1220);padding:clamp(90px,10vh,140px) clamp(24px,4vw,64px) 80px}
.splitpage .texthalf .megatitle{font-family:var(--disp);text-transform:uppercase;line-height:.86;font-size:clamp(70px,9vw,170px);margin-bottom:40px}
.splitpage .texthalf .megatitle .it{font-family:var(--serif);font-style:italic;text-transform:none}
.legalblock{border-top:1px solid var(--w15);padding:34px 0}
.legalblock h2{font-family:var(--serif);font-size:clamp(26px,3vw,40px);font-weight:400;margin-bottom:18px}
.legalblock h2 .no{color:var(--w40);margin-right:14px}
.legalblock p,.legalblock li{font-size:13px;text-transform:uppercase;line-height:1.7;color:var(--w60);margin:.8em 0;max-width:70ch}
.legalblock ul,.legalblock ol{margin-left:1.4em}
.plainbox{background:var(--w06);border:1px solid var(--w15);padding:20px 24px;margin-bottom:30px}
.plainbox p{font-size:13px;text-transform:none;color:var(--w)}
@media (max-width:960px){.splitpage{grid-template-columns:1fr}.splitpage .mediahalf{min-height:44vh;position:relative}}

/* ── Interior page hero band ── */
.pagehero{position:relative;padding:calc(90px + var(--frame)) 0 0;overflow:hidden}
.pagehero .crumbs{position:relative;z-index:2;font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--w40);padding:18px 0}
.pagehero .crumbs a{color:var(--w40);text-decoration:none}
.pagehero .crumbs a:hover{color:var(--w)}
.pagehero .crumbs span::before{content:"/";margin:0 10px;color:var(--w25)}
.pagehero .megatitle{font-family:var(--disp);text-transform:uppercase;line-height:.84;font-size:clamp(58px,9.5vw,180px);position:relative;z-index:2}
.pagehero .megatitle .it{font-family:var(--serif);font-style:italic;text-transform:none;font-size:.6em;vertical-align:.08em}
.pagehero .introrow{position:relative;z-index:2;display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding:34px 0 46px;align-items:end}
@media (max-width:860px){.pagehero .introrow{grid-template-columns:1fr}}

/* ── Content rows / process steps ── */
.steprow{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr 2fr;gap:clamp(18px,3vw,44px);padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--w15)}
.steprow .shead{display:flex;flex-direction:column;gap:12px}
.steprow .meta{display:flex;flex-direction:column;gap:10px}
.steprow .meta .fine b{color:var(--w);font-weight:500}
@media (max-width:860px){.steprow{grid-template-columns:1fr}}

/* FAQ */
details.faq{border-top:1px solid var(--w15);position:relative;z-index:2}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:26px 0;font-family:var(--serif);font-size:clamp(19px,2vw,25px)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--mono);color:var(--w60);transition:transform .25s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .a{padding:0 0 28px;max-width:62ch}
details.faq .a p{font-size:13px;text-transform:uppercase;line-height:1.7;color:var(--w60);margin:.7em 0}

/* forms */
.field{margin-bottom:20px;position:relative;z-index:2}
.field label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--w40);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;background:var(--w06);border:1px solid var(--w15);color:var(--w);
  font-family:var(--mono);font-size:14px;padding:14px 16px;outline:none;border-radius:0;
  transition:border-color .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--w)}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none}
.confidential{display:flex;gap:14px;background:var(--w06);border:1px solid var(--w25);padding:16px 18px;margin:24px 0;font-size:12px;text-transform:uppercase;line-height:1.7;color:var(--w60);position:relative;z-index:2}
.confidential::before{content:"◆";color:var(--w)}

/* article rows + prose */
.artrow{position:relative;z-index:2;display:grid;grid-template-columns:140px 1fr auto;gap:clamp(14px,3vw,40px);padding:24px 0;border-top:1px solid var(--w15);align-items:baseline;text-decoration:none}
.artrow:hover .t{font-style:italic}
.artrow .d{font-size:11px;color:var(--w40);text-transform:uppercase;letter-spacing:.1em}
.artrow .t{font-family:var(--serif);font-size:clamp(19px,2.2vw,26px);color:var(--w)}
.artrow .cat{font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--w60)}
@media (max-width:720px){.artrow{grid-template-columns:1fr}}
.prose{max-width:66ch;position:relative;z-index:2}
.prose h2{font-family:var(--serif);font-size:clamp(24px,2.8vw,32px);font-weight:400;margin:2em 0 .6em}
.prose h3{font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);font-weight:400;font-style:italic;margin:1.6em 0 .5em}
.prose p{font-size:14.5px;line-height:1.8;color:var(--w60);margin:1em 0;text-transform:none;font-family:var(--mono)}
.prose strong{color:var(--w);font-weight:500}
.prose ul,.prose ol{margin:1em 0 1em 1.4em;color:var(--w60);font-size:14.5px}
.prose li{margin:.5em 0;line-height:1.7}
.prose blockquote{border-left:1px solid var(--w40);padding-left:22px;margin:1.5em 0;font-family:var(--serif);font-size:1.25em;color:var(--w)}

/* decode text: apply data-decode to any mono/serif text node */
[data-decode]{opacity:1}

/* footer */
.dsfooter{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--night)}
.dsfooter .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.dsfooter .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,12,.88),rgba(4,6,12,.25))}
.dsfooter .fbody{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:24px;padding:calc(110px + var(--frame)) clamp(22px,3.5vw,52px) 40px;flex:1}
.dsfooter .fnav{display:flex;flex-direction:column;gap:6px;grid-column:1/span 2}
.dsfooter .fnav a{font-family:var(--serif);font-size:clamp(20px,2vw,27px);text-decoration:none;line-height:1.55;width:fit-content}
.dsfooter .fnav a:hover{font-style:italic}
.dsfooter .fcard{grid-column:4;align-self:start}
.dsfooter .fcard .chip{margin-bottom:16px}
.dsfooter .fcard p,.dsfooter .fcard a{font-size:12px;text-transform:uppercase;line-height:1.9;color:var(--w60);text-decoration:none;display:block}
.dsfooter .fcard a:hover{color:var(--w)}
.fmark{position:relative;z-index:2;overflow:hidden;line-height:.8}
.fmark .track{display:inline-block;white-space:nowrap;animation:mq 70s linear infinite;font-family:var(--disp);text-transform:uppercase;font-size:clamp(120px,22vw,360px);line-height:.8;margin-bottom:-.14em;color:var(--w)}
@media (max-width:960px){.dsfooter .fbody{grid-template-columns:1fr}.dsfooter .fnav,.dsfooter .fcard{grid-column:1}}

/* cookie + toast + preloader */
.cookie{position:fixed;left:calc(var(--frame) + 8px);bottom:calc(var(--frame) + 8px);z-index:80;max-width:360px;background:rgba(4,6,12,.9);backdrop-filter:blur(14px);border:1px solid var(--w25);padding:18px 20px;font-size:11.5px;text-transform:uppercase;line-height:1.7;color:var(--w60);display:none}
.cookie.show{display:block}
.cookie .row{display:flex;gap:10px;margin-top:12px}
.cookie button{font-family:var(--mono);font-size:11px;text-transform:uppercase;padding:9px 16px;cursor:pointer;border:1px solid var(--w25);background:none;color:var(--w)}
.cookie button.yes{background:var(--w);color:var(--night);border-color:var(--w)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,160%);z-index:90;background:rgba(4,6,12,.92);border:1px solid var(--w);color:var(--w);padding:14px 26px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;transition:transform .4s}
.toast.show{transform:translate(-50%,0)}

.preloader{position:fixed;inset:0;z-index:200;background:linear-gradient(to bottom,#0a0f1e,#1b2436);display:grid;place-items:center;transition:opacity .6s,visibility .6s}
.preloader.done{opacity:0;visibility:hidden}
.preloader .chip{position:absolute;bottom:12vh;left:50%;transform:translateX(-50%)}
.preloader .mk{font-family:var(--serif);font-style:italic;font-size:44px;color:var(--w)}

/* a11y + misc */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--w);color:var(--night);padding:12px 20px;font-size:13px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--w);outline-offset:2px}
.wrap{max-width:none;padding:0 clamp(22px,3.5vw,52px);position:relative;z-index:2}
.secpad{padding-top:clamp(60px,8vw,120px);padding-bottom:clamp(60px,8vw,120px)}

@media print{
  body{background:#fff;color:#111;font-family:Georgia,serif;text-transform:none}
  .navpill,.pageframe,.grain,.cookie,.dsfooter,.ticker,.markmq,.preloader{display:none!important}
  .legalblock p,.legalblock li,.prose p{text-transform:none;color:#222}
}