/* ==========================================================================
   زَخَم · the momentum blog
   Palette and type sampled from the hero footage so page and film read as one world.
   ========================================================================== */

:root{
  --canvas:#070B18;
  --canvas-deep:#04060F;
  --panel:#0E1730;
  --panel-hi:#16233F;
  --blue:#2F6BFF;
  --blue-soft:#5D93FF;
  --accent:#E8B54B;
  --accent-hover:#F6CC6E;
  --accent-muted:rgba(232,181,75,.20);
  --text-primary:#F1F4FA;
  --text-secondary:#93A1BE;
  --hairline:rgba(147,161,190,.16);
  --border-ui:rgba(147,161,190,.34);

  --display:"Reem Kufi",'Segoe UI',system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",'Segoe UI',system-ui,sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(4,6,15,.95),0 3px 12px rgba(4,6,15,.78),0 10px 44px rgba(4,6,15,.8);
  --wrap:min(1180px,92vw);
  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;font-size:clamp(15px,1.05vw,17px);line-height:1.75;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--accent);color:#0A0E1C;padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{inset-inline-start:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- the one fixed environment layer ---------- */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 22% 12%,rgba(47,107,255,.16) 0%,rgba(47,107,255,0) 62%),
    radial-gradient(60% 50% at 82% 78%,rgba(232,181,75,.075) 0%,rgba(232,181,75,0) 66%),
    linear-gradient(180deg,var(--canvas-deep) 0%,var(--canvas) 40%,var(--canvas-deep) 100%);
  animation:envdrift 96s var(--ease) -22s infinite alternate;
}
@keyframes envdrift{from{transform:translate3d(-1.4%,-1%,0) scale(1.04)}to{transform:translate3d(1.6%,1.2%,0) scale(1.09)}}
.motes{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.62}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;inset-inline:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;gap:1.4rem;padding:0 clamp(14px,4vw,40px);
  background:linear-gradient(180deg,rgba(4,6,15,.82) 0%,rgba(4,6,15,.42) 62%,rgba(4,6,15,0) 100%);
  backdrop-filter:blur(9px);
  transition:background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(7,11,24,.9);border-bottom-color:var(--hairline)}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-mark{width:34px;height:34px;display:block;filter:drop-shadow(0 4px 12px rgba(232,181,75,.22))}
.brand-mark svg{width:100%;height:100%}
.bm-tile{fill:#0B1226;stroke:rgba(232,181,75,.32);stroke-width:1.5}
.bm-stroke{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.bm-dot{fill:var(--accent)}
.brand-word{font-family:var(--display);word-spacing:.1em;font-weight:700;font-size:1.32rem;line-height:1}
.nav-links{display:flex;gap:1.5rem;margin-inline-start:auto;font-size:.94rem}
.nav-links a{text-decoration:none;color:var(--text-secondary);position:relative;padding:.2rem 0;transition:color .35s var(--ease)}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease-out)}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------- the raised glossy button (the 3D language) ---------- */
.btn{
  position:relative;display:inline-flex;word-spacing:.1em;align-items:center;justify-content:center;
  padding:.82rem 1.7rem;border-radius:13px;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1;
  color:#150E00;
  background:linear-gradient(178deg,#F8CE72 0%,#E8B54B 52%,#C9942F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,247,224,.85),
    inset 0 -2px 0 rgba(120,84,14,.5),
    0 1px 2px rgba(4,6,15,.6),
    0 10px 22px -8px rgba(232,181,75,.5),
    0 18px 40px -20px rgba(0,0,0,.9);
  transform:translateZ(0);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),filter .3s var(--ease);
}
.btn::after{content:"";position:absolute;inset:1px 1px 45% 1px;border-radius:12px 12px 20px 20px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));pointer-events:none}
.btn:hover{transform:translateY(-2px);filter:saturate(1.06);box-shadow:inset 0 1px 0 rgba(255,247,224,.9),inset 0 -2px 0 rgba(120,84,14,.5),0 1px 2px rgba(4,6,15,.6),0 14px 30px -8px rgba(232,181,75,.62),0 22px 46px -20px rgba(0,0,0,.9)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(120,84,14,.55),inset 0 1px 0 rgba(255,247,224,.4),0 4px 12px -6px rgba(232,181,75,.4)}
.btn.ghost{
  color:var(--text-primary);
  background:linear-gradient(178deg,var(--panel-hi) 0%,var(--panel) 100%);
  box-shadow:inset 0 1px 0 rgba(180,205,255,.16),inset 0 -2px 0 rgba(0,0,0,.45),0 1px 2px rgba(4,6,15,.6),0 14px 32px -18px rgba(47,107,255,.65);
  border:1px solid var(--border-ui);
}
.btn.ghost::after{background:linear-gradient(180deg,rgba(160,195,255,.12),rgba(255,255,255,0))}
.btn.ghost:hover{border-color:var(--accent-muted);filter:none}
.btn.sm,.btn-sm{padding:.58rem 1.1rem;font-size:.92rem;border-radius:11px}
@media (pointer:coarse){.btn{min-height:44px}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;height:1000vh;z-index:2}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas-deep)}
.poster{position:absolute;inset:0;background-size:cover;background-position:38% 50%;opacity:0;transition:opacity .9s var(--ease)}
.stage.poster-ready .poster{opacity:1}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%;opacity:0;transform:translateZ(0);will-change:transform;transition:opacity .8s var(--ease)}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 38% 45%,rgba(7,11,24,0) 30%,rgba(7,11,24,.66) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

.loader{position:absolute;inset-block-end:34px;inset-inline-end:34px;color:var(--accent);opacity:.9;transition:opacity .5s var(--ease)}
.loader.done{opacity:0}
.ring{width:44px;height:44px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .15s linear}

/* ---------- caption bands ---------- */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;inset-block:0;inset-inline-start:0;inline-size:min(52ch,48vw);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding-inline:clamp(20px,4vw,64px);padding-block:var(--nav-h) 8vh;
  opacity:0;text-shadow:var(--tshadow);
}
/* The scrim runs off the page edge and dies out before the action lane, so it never
   draws a hard boundary of its own. A radial sized in percentages gets clipped by its
   own box and shows as a rectangle: this cannot. RTL page, so the text side is the right. */
/* The scrim box reaches well past the band so its falloff happens OUTSIDE the text,
   never across it. Held flat over the words, then eased to nothing over the overhang,
   which is what keeps the action lane bright and leaves no visible edge. */
.band::before{
  content:"";position:absolute;inset:0 -1px 0 -62%;pointer-events:none;z-index:0;
  opacity:calc(.25 + .75*var(--k,1));
  background:linear-gradient(to left,
    rgba(4,6,15,var(--s1,.50)) 0%,
    rgba(4,6,15,var(--s1,.50)) 60%,
    rgba(4,6,15,calc(var(--s1,.50)*0.90)) 68%,
    rgba(4,6,15,calc(var(--s1,.50)*0.72)) 76%,
    rgba(4,6,15,calc(var(--s1,.50)*0.48)) 84%,
    rgba(4,6,15,calc(var(--s1,.50)*0.25)) 91%,
    rgba(4,6,15,calc(var(--s1,.50)*0.08)) 96%,
    rgba(4,6,15,0) 100%);
}
.band > *{position:relative;z-index:1}
/* bands 3 to 5 ride the blown-out horizon: their scrim alphas are tuned against that
   worst frame, measured, not eyeballed. The gradient still dies out by 80% so the
   corners of the footage stay live. */
.band.b3::before{--s1:.58}
.band.b4::before{--s1:.64}
.band.b5::before{--s1:.62}
.band .btn{text-shadow:none}
.band .ln{margin:0;font-family:var(--display);word-spacing:.14em;font-weight:700;line-height:1.18}
.band .ln.xl{font-size:clamp(2rem,4.4vw,3.6rem)}
.band .ln.lg{font-size:clamp(1.6rem,3.2vw,2.6rem)}
.band .sub{margin:1.1rem 0 0;font-size:clamp(1rem,1.35vw,1.2rem);color:#D6DEEE;max-inline-size:40ch;line-height:1.6}
.band .wordmark{margin:0;font-family:var(--display);word-spacing:.1em;font-weight:700;font-size:clamp(3.4rem,8.6vw,7rem);line-height:1.1;
  color:#F4CC79;
  text-shadow:0 1px 2px rgba(4,6,15,.9),0 6px 26px rgba(232,181,75,.32),0 14px 54px rgba(4,6,15,.85)}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.7rem;pointer-events:auto}

/* per-character / per-word entrance primitives (transform + opacity only) */
.w{display:inline-block;white-space:pre;will-change:transform,opacity}
.fx-scatter .w,.fx-grid .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
.fx-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
.fx-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.fx-punch .w.em{--ov:.24;--sd:.16;--ss:2.6;color:var(--accent)}
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*30px))}
.fx-rise .sub{--ks:clamp(0,(var(--k,0) - .62)*3.6,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*16px))}
.fx-rise .cta-row{--kb:clamp(0,(var(--k,0) - .76)*4.6,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.blurwrap{position:relative;display:block}
.blurwrap .soft{position:absolute;inset:0;filter:blur(12px);opacity:calc(1 - var(--k,0));color:var(--accent)}
.blurwrap .sharp{opacity:var(--k,0)}

/* scroll cue */
.cue{position:absolute;inset-block-end:26px;inset-inline-start:50%;transform:translateX(50%);opacity:.7}
.cue span{display:block;width:1px;height:52px;background:linear-gradient(180deg,rgba(232,181,75,0),var(--accent));animation:cuepulse 3.2s var(--ease) -1s infinite}
@keyframes cuepulse{0%,100%{transform:scaleY(.4);opacity:.25}50%{transform:scaleY(1);opacity:.9}}
.cue{transition:opacity .6s var(--ease)}
.cue.gone{opacity:0}

/* ==========================================================================
   THE SIGNATURE: the gold momentum thread
   ========================================================================== */
.thread-wrap{position:absolute;inset-inline:0;top:1000vh;height:calc(100% - 1000vh);z-index:1;pointer-events:none}
.thread{width:100%;height:100%;opacity:.72}
#thread-path{stroke:var(--accent);stroke-width:.55;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(232,181,75,.55));
  stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--off,2000)}
.thread-dot{position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFF2D2 0%,var(--accent) 52%,#B8842A 100%);
  box-shadow:0 0 0 4px rgba(232,181,75,.14),0 0 16px 3px rgba(232,181,75,.55);
  opacity:0;transition:opacity .6s var(--ease)}
.thread-dot.on{opacity:1}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
main{position:relative;z-index:2}
.sec{position:relative;padding-block:clamp(64px,9vh,112px);z-index:2}
.wrap{width:var(--wrap);margin-inline:auto}
.kicker{margin:0 0 .5rem;font-family:var(--mono);font-size:.78rem;color:var(--accent);opacity:.9}
.sec-h{margin:0 0 1rem;font-family:var(--display);word-spacing:.16em;font-weight:700;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.22}
.sec-h.big{font-size:clamp(2.2rem,5.6vw,4.2rem)}
.lede{margin:0 0 1.2rem;color:var(--text-secondary);font-size:clamp(1rem,1.2vw,1.1rem);max-inline-size:56ch}

/* raised panel: the 3D surface language, one definition reused */
.panel{
  position:relative;border-radius:18px;
  background:linear-gradient(174deg,var(--panel-hi) 0%,var(--panel) 58%,#0A1122 100%);
  border:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 rgba(170,200,255,.13),inset 0 -1px 0 rgba(0,0,0,.5),0 22px 48px -28px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.35);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease);
}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(174deg,rgba(160,195,255,.09),rgba(255,255,255,0) 42%)}

/* entrance choreography */
.rise{opacity:0;transform:translateY(26px)}
.in .rise,.rise.in{opacity:1;transform:none;transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.in .rise:nth-child(2){transition-delay:.09s}
.in .rise:nth-child(3){transition-delay:.18s}
.in .rise:nth-child(4){transition-delay:.27s}
.in .rise:nth-child(5){transition-delay:.36s}
.in.settled .rise,.in.settled .rise:nth-child(2),.in.settled .rise:nth-child(3),.in.settled .rise:nth-child(4),.in.settled .rise:nth-child(5){transition-delay:0s}

/* ---------- 1. ticker rail ---------- */
.ticker-sec .rail{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to left,#000 88%,transparent 100%);mask-image:linear-gradient(to left,#000 88%,transparent 100%)}
.tick{flex:0 0 clamp(220px,26vw,280px);padding:1.1rem 1.2rem;scroll-snap-align:start;text-decoration:none}
.tick:hover{transform:translateY(-4px);border-color:var(--accent-muted)}
.tick .tcat{font-family:var(--mono);font-size:.72rem;color:var(--text-secondary);text-transform:uppercase}
.tick h3{margin:.45rem 0 .8rem;font-family:var(--display);word-spacing:.12em;font-weight:500;font-size:1.06rem;line-height:1.45}
.mom{display:flex;align-items:baseline;gap:.42rem;font-family:var(--mono);font-size:.8rem;color:var(--text-secondary)}
.mom b{font-size:1.28rem;font-weight:500;color:var(--accent);animation:momglow 6s var(--ease) -2s infinite}
@keyframes momglow{0%,100%{opacity:.82}50%{opacity:1}}

/* ---------- 2. featured: asymmetric overlap ---------- */
.feat{display:grid;grid-template-columns:1.15fr .95fr;align-items:center;gap:0}
.feat-art{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/10;
  box-shadow:0 40px 90px -46px rgba(0,0,0,1);border:1px solid var(--hairline)}
.feat-art img{width:100%;height:100%;object-fit:cover}
.feat-art figcaption{position:absolute;inset-inline:0;bottom:0;padding:.5rem .9rem;font-family:var(--mono);font-size:.7rem;color:#B9C6DF;
  background:linear-gradient(0deg,rgba(4,6,15,.86),rgba(4,6,15,0))}
.feat-card{margin-inline-start:-13%;padding:clamp(1.4rem,2.6vw,2.4rem);z-index:3}
.feat-card h2{margin:.3rem 0 .9rem;font-family:var(--display);word-spacing:.16em;font-weight:700;font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.26}
.feat-meta{display:flex;gap:1.1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;color:var(--text-secondary);margin-bottom:1.2rem}

/* ---------- 3. category cards: staggered ---------- */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:2rem}
.cat{grid-column:span 2;padding:1.5rem 1.4rem 1.6rem;text-decoration:none;display:block}
.cat:nth-child(4),.cat:nth-child(5){grid-column:span 3}
.cat:hover{transform:translateY(-5px);border-color:var(--accent-muted);box-shadow:inset 0 1px 0 rgba(170,200,255,.16),0 30px 60px -30px rgba(0,0,0,1),0 0 0 1px var(--accent-muted)}
.cat-ico{display:block;width:46px;height:46px;margin-bottom:1rem}
.cat-ico svg{width:100%;height:100%;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cat h3{margin:0 0 .4rem;font-family:var(--display);word-spacing:.12em;font-weight:700;font-size:1.3rem}
.cat p{margin:0;color:var(--text-secondary);font-size:.96rem}
.cat .count{display:block;margin-top:.9rem;font-family:var(--mono);font-size:.74rem;color:var(--accent);opacity:.85}

/* ---------- 4. the interactive moment ---------- */
.meter-sec{overflow:hidden}
.meter-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,3.4vw,48px)}
.meter-copy{max-inline-size:38ch}
.dial{position:relative;width:clamp(190px,20vw,232px);aspect-ratio:1;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 50% 34%,#16233F 0%,#0B1226 62%,#070B18 100%);
  box-shadow:inset 0 2px 0 rgba(170,200,255,.16),inset 0 -3px 10px rgba(0,0,0,.7),0 26px 56px -26px rgba(0,0,0,1),0 0 0 1px var(--hairline);
  display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.dial:active{transform:scale(.975)}
.dial.full{box-shadow:inset 0 2px 0 rgba(255,236,190,.3),inset 0 -3px 10px rgba(0,0,0,.7),0 26px 60px -22px rgba(232,181,75,.5),0 0 0 1px var(--accent-muted)}
.dial svg{position:absolute;inset:0;width:100%;height:100%}
.dial-track{stroke:rgba(147,161,190,.18)}
.dial-fill{stroke:var(--accent);filter:drop-shadow(0 0 8px rgba(232,181,75,.6))}
.dial-num{font-family:var(--mono);font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;color:var(--text-primary);letter-spacing:-.03em}
.dial-lbl{font-family:var(--display);font-size:.9rem;color:var(--text-secondary);margin-top:.35rem}
.dial-help{margin:.9rem 0 0;text-align:center;font-family:var(--mono);font-size:.76rem;color:var(--text-secondary)}
.meter-out{display:flex;flex-direction:column;gap:10px}
.mo{padding:.85rem 1rem;opacity:.3;filter:saturate(.25);transform:translateX(-14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),filter .6s var(--ease)}
.mo.lit{opacity:1;filter:none;transform:none}
.mo:nth-child(2){transition-delay:.12s}
.mo:nth-child(3){transition-delay:.24s}
.mo h4{margin:0 0 .2rem;font-family:var(--display);word-spacing:.12em;font-weight:500;font-size:1rem;line-height:1.4}

/* ---------- 5. prompts: wide stacked rows ---------- */
.pgrid{display:flex;flex-direction:column;gap:14px;margin-top:2rem}
.prow{padding:1.3rem clamp(1.1rem,2.2vw,1.9rem)}
.prow-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.prow h3{margin:0;font-family:var(--display);word-spacing:.14em;font-weight:700;font-size:clamp(1.1rem,1.7vw,1.35rem);flex:1 1 18ch}
.prow p{margin:.5rem 0 0;color:var(--text-secondary);font-size:.96rem;max-inline-size:70ch}
.pcode{margin:1rem 0 0;padding:1rem 1.1rem;border-radius:12px;background:#050914;border:1px solid var(--hairline);
  font-family:var(--mono);font-size:.84rem;line-height:1.85;color:#C7D3EA;white-space:pre-wrap;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .6s var(--ease),opacity .4s var(--ease),margin .6s var(--ease);padding-block:0;border-width:0}
.prow.open .pcode{max-height:1000px;opacity:1;padding-block:1rem;border-width:1px}
.prow-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.mini{padding:.5rem .95rem;border-radius:10px;font-family:var(--mono);font-size:.8rem;cursor:pointer;
  background:linear-gradient(178deg,#16233F,#0C1428);border:1px solid var(--border-ui);color:var(--text-primary);
  box-shadow:inset 0 1px 0 rgba(170,200,255,.14),0 6px 16px -10px rgba(0,0,0,.9);
  transition:border-color .35s var(--ease),transform .25s var(--ease-out)}
.mini:hover{border-color:var(--accent-muted);transform:translateY(-1px)}
.mini.ok{border-color:var(--accent);color:var(--accent)}

/* ---------- 6. about: mirrored split ---------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.about-fig{position:relative;margin:0}
.about-fig img{position:relative;z-index:2;filter:drop-shadow(0 40px 60px rgba(0,0,0,.8))}
.about-halo{position:absolute;inset:6% -6% 0 -6%;z-index:1;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,rgba(47,107,255,.3) 0%,rgba(47,107,255,0) 66%);
  animation:halo 9s var(--ease) -3s infinite alternate}
@keyframes halo{from{transform:scale(.94);opacity:.7}to{transform:scale(1.06);opacity:1}}

/* ---------- 7. faq ---------- */
.faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(24px,4vw,64px);align-items:start}
.faq-head{position:sticky;top:calc(var(--nav-h) + 28px)}
.faq-head .lede{margin-bottom:0}
.faq-list{margin-top:.4rem;border-top:1px solid var(--hairline)}
.qa{border-bottom:1px solid var(--hairline)}
.qa summary{list-style:none;cursor:pointer;padding:1.15rem 0;font-family:var(--display);word-spacing:.12em;font-weight:500;font-size:clamp(1.02rem,1.5vw,1.18rem);
  display:flex;align-items:center;gap:.9rem;transition:color .35s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"";flex:0 0 9px;height:9px;border-radius:2px;background:var(--accent);opacity:.42;
  transition:opacity .4s var(--ease),transform .4s var(--ease-out)}
.qa[open] summary::before{opacity:1;transform:rotate(45deg)}
.qa summary:hover{color:var(--accent)}
.qa p{margin:0 0 1.25rem;padding-inline-start:1.8rem;color:var(--text-secondary);max-inline-size:62ch}

/* ---------- 8. join ---------- */
.join{text-align:center;display:flex;flex-direction:column;align-items:center}
.join .lede{max-inline-size:44ch}
.joinform{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem;width:min(560px,100%)}
.joinform input{
  flex:1 1 260px;padding:.85rem 1.1rem;border-radius:13px;
  background:#050914;border:1px solid var(--border-ui);color:var(--text-primary);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.joinform input::placeholder{color:#6E7C99}
.joinform input:focus{border-color:var(--accent);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 3px var(--accent-muted);outline:none}
.joinform input.bad{border-color:#E8735B}
.formnote{min-height:1.6em;margin:.95rem 0 0;font-family:var(--mono);font-size:.85rem;color:var(--accent);opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease-out)}
.formnote.show{opacity:1;transform:none}
.formnote.err{color:#E8735B}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;border-top:1px solid var(--hairline);padding-block:clamp(40px,6vh,68px);background:rgba(4,6,15,.6)}
.footgrid{display:grid;grid-template-columns:1fr auto auto;gap:clamp(20px,4vw,56px);align-items:start}
.fnote{margin:.8rem 0 0;color:var(--text-secondary);font-family:var(--mono);font-size:.82rem}
.fnote.sm{font-size:.74rem;max-inline-size:34ch;margin-top:.9rem}
.fnav{display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}
.fnav a{color:var(--text-secondary);text-decoration:none;transition:color .35s var(--ease)}
.fnav a:hover{color:var(--accent)}
.fend{text-align:start}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .faq-grid{grid-template-columns:1fr;gap:8px}
  .faq-head{position:static}
  .feat{grid-template-columns:1fr}
  .feat-card{margin-inline-start:0;margin-top:-9%;margin-inline-end:6%}
  .meter-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  .meter-copy{max-inline-size:52ch}
  .meter-out{width:min(460px,100%)}
  .mo{transform:translateY(12px)}
  .about{grid-template-columns:1fr;gap:24px}
  .about-fig{max-width:420px}
}
@media (max-width:860px){
  /* stretched into a narrow viewport the thread reads as a diagonal cutting through the
     content, so on phones it becomes an edge rail instead */
  .thread-wrap{right:auto;left:0;width:22%}
  .btn-sm{margin-inline-start:auto}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat,.cat:nth-child(4),.cat:nth-child(5){grid-column:span 1}
  .cat:nth-child(5){grid-column:span 2}
  .footgrid{grid-template-columns:1fr;gap:26px}
  .fnav{flex-direction:row;flex-wrap:wrap;gap:1rem}
}
@media (max-width:560px){
  .cats{grid-template-columns:1fr}
  .cat:nth-child(5){grid-column:span 1}
  .feat-card{margin-top:-6%;margin-inline-end:0}
}

/* ---------- the static hero (CSS side; must match the JS list exactly) ---------- */
@media (prefers-reduced-motion:reduce){
  .hero{height:100svh;min-height:560px}
  .stage{height:100svh;min-height:560px}
  .poster{opacity:1;background-image:url("hero-ending.128cc39b.jpg")}
  #hero,.loader,.cue{display:none}
  .thread-wrap{top:0;height:100%}
  .band{opacity:0;display:none}
  .band.b6{opacity:1;display:flex;inline-size:min(60ch,86vw);inset-inline-start:0;
    justify-content:flex-end;padding-block-end:12vh}
  .band.b6::before{opacity:1;inset:-10% -20%;
    background:radial-gradient(ellipse 90% 62% at 50% 74%,rgba(4,6,15,.86) 0%,rgba(4,6,15,.6) 48%,rgba(4,6,15,0) 80%)}
  .band.b6 .w,.band.b6 .c,.band.b6 .sub,.band.b6 .cta-row{opacity:1;transform:none}
  .band.b6 .wordmark{font-size:clamp(3rem,17vw,5.4rem)}
}
@media (max-height:560px){.cue,.loader{display:none}}

/* ---------- reduced motion, honored completely ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .env{transform:none}
  .rise{opacity:1;transform:none}
  .mo{opacity:1;transform:none}
  .motes{display:none}
  #thread-path{stroke-dashoffset:0!important}
  .thread-dot{display:none}
  .prow .pcode{max-height:none;opacity:1;padding-block:1rem;border-width:1px}
  .poster{opacity:1}
  /* positional transforms re-applied per breakpoint so nothing lands off-screen */
  .cue{transform:translateX(50%)}
  @media (max-width:1080px){.mo{transform:none}}
}

/* pause every animation when the tab is hidden or the element is off-screen */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* content could not be read (a page opened straight off the disk): no empty shells */
body.no-content #ticker,body.no-content #featured,body.no-content #cats,
body.no-content #prompts,body.no-content .meter-out{display:none}
body.no-content .meter-wrap{grid-template-columns:1fr auto}

/* ==========================================================================
   POST CARDS, CONTACT, AND THE READING SHEET
   Added after launch: the card face of a post, the contact block, and the
   white paper the article itself is read on.
   ========================================================================== */

:root{
  --serif:"Amiri",Georgia,"Times New Roman",serif;
  --paper:#FBF7EE;          /* the reading sheet, warm white, never pure #fff */
  --paper-ink:#171308;      /* ink on that sheet */
  --paper-soft:#4A4234;
  --paper-rule:rgba(23,19,8,.12);
  --wa:#25D366;
}

/* ---------- the modern post card ---------- */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-top:2rem}
.pcard{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-decoration:none;
  background:linear-gradient(172deg,var(--panel-hi) 0%,var(--panel) 56%,#0A1122 100%);
  border:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 rgba(170,200,255,.12),0 26px 54px -32px rgba(0,0,0,1),0 2px 6px rgba(0,0,0,.35);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease)}
.pcard:hover{transform:translateY(-6px);border-color:var(--accent-muted);
  box-shadow:inset 0 1px 0 rgba(170,200,255,.18),0 36px 66px -30px rgba(0,0,0,1),0 0 0 1px var(--accent-muted)}
.pcard-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050914}
.pcard-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.pcard:hover .pcard-art img{transform:scale(1.045)}
.pcard-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,15,0) 46%,rgba(4,6,15,.72) 100%)}
.pcard-kind{position:absolute;z-index:2;inset-block-start:12px;inset-inline-start:12px;
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:999px;
  font-family:var(--mono);font-size:.7rem;color:#F3E6C6;
  background:rgba(8,10,20,.7);border:1px solid rgba(232,181,75,.32);backdrop-filter:blur(8px)}
.pcard-mom{position:absolute;z-index:2;inset-block-start:12px;inset-inline-end:12px;
  display:inline-flex;align-items:baseline;gap:.25rem;padding:.28rem .6rem;border-radius:999px;
  font-family:var(--mono);font-size:.7rem;color:#0F0B02;
  background:linear-gradient(178deg,#F6CC6E,#D9A63C);box-shadow:0 4px 14px -6px rgba(232,181,75,.8)}
.pcard-mom b{font-size:.86rem;font-weight:500}
.pcard-body{padding:1.05rem 1.15rem 1.25rem;display:flex;flex-direction:column;flex:1 1 auto}
.pcard h3{margin:0 0 .45rem;font-family:var(--display);font-weight:700;word-spacing:.12em;font-size:1.12rem;line-height:1.5}
.pcard p{margin:0 0 1rem;color:var(--text-secondary);font-size:.93rem;line-height:1.7;flex:1 1 auto}
.pcard-foot{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.72rem;color:var(--text-secondary);
  padding-top:.85rem;border-top:1px solid var(--hairline)}
.pcard-foot .go{margin-inline-start:auto;color:var(--accent)}
.pcard-badge{display:inline-flex;align-items:center;gap:.3rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:2rem}
.ccard{display:flex;align-items:center;gap:.95rem;padding:1.15rem 1.25rem;border-radius:18px;text-decoration:none;
  background:linear-gradient(172deg,var(--panel-hi),var(--panel));border:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 rgba(170,200,255,.12),0 22px 46px -30px rgba(0,0,0,.95);
  transition:transform .45s var(--ease-out),border-color .45s var(--ease),box-shadow .45s var(--ease-out)}
.ccard:hover{transform:translateY(-4px);border-color:var(--accent-muted)}
.ccard .ico{flex:0 0 46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#1B2A4A,#0A1122);border:1px solid var(--hairline)}
.ccard .ico svg{width:24px;height:24px}
.ccard.wa .ico{background:radial-gradient(circle at 34% 28%,#1E5B3A,#0C2A1C);border-color:rgba(37,211,102,.32)}
.ccard.wa .ico svg{fill:var(--wa)}
.ccard.tel .ico svg{fill:none;stroke:var(--blue-soft);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ccard.mail .ico svg{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ccard b{display:block;font-family:var(--display);font-weight:500;font-size:1rem;margin-bottom:.15rem}
.ccard span{font-family:var(--mono);font-size:.84rem;color:var(--text-secondary);direction:ltr;display:block;text-align:start}
.contact-name{display:flex;align-items:center;gap:.7rem;margin-top:1.6rem;font-family:var(--display);
  font-weight:500;font-size:1.05rem;color:var(--text-secondary)}
.contact-name::before{content:"";width:34px;height:1px;background:var(--accent);opacity:.6}

/* ---------- empty state ---------- */
.blank{padding:2.6rem 1.6rem;border-radius:18px;text-align:center;border:1px dashed var(--border-ui);
  color:var(--text-secondary);background:rgba(14,23,48,.4)}
.blank b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--text-primary);margin-bottom:.4rem}

/* ==========================================================================
   THE ARTICLE: glossy frame, white reading sheet, link reveal, comments
   ========================================================================== */

/* --- the glossy frame around the post image --- */
.shine{position:relative;margin:0 0 2rem;border-radius:22px;padding:3px;
  background:linear-gradient(135deg,#F8D98C 0%,#C9942F 22%,#7A5A1B 40%,#F6E3AE 52%,#C9942F 70%,#8A6620 88%,#F8D98C 100%);
  background-size:260% 260%;
  box-shadow:0 26px 60px -30px rgba(0,0,0,1),0 0 34px -12px rgba(232,181,75,.4)}
.shine::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:linear-gradient(110deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.5) 48%,rgba(255,255,255,0) 62%);
  background-size:260% 100%;animation:sheen 7s var(--ease) -1.5s infinite}
@keyframes sheen{0%{background-position:150% 0}55%,100%{background-position:-60% 0}}
.shine-in{position:relative;border-radius:19px;overflow:hidden;background:#050914;display:block}
.shine-in img,.shine-in video{width:100%;display:block}
.shine figcaption{position:absolute;z-index:2;inset-inline:3px;bottom:3px;border-radius:0 0 19px 19px;
  padding:.5rem .95rem;font-family:var(--mono);font-size:.72rem;color:#E4DCC7;
  background:linear-gradient(0deg,rgba(4,6,15,.9),rgba(4,6,15,0))}

/* --- the reading sheet: white paper, gold edge, royal serif --- */
.sheet{position:relative;border-radius:20px;padding:3px;margin:0 0 2.2rem;
  background:linear-gradient(150deg,#F3D08F,#C9942F 34%,#8A6620 52%,#EBC97E 74%,#C9942F);
  box-shadow:0 30px 70px -34px rgba(0,0,0,1)}
.sheet-in{border-radius:17px;background:var(--paper);color:var(--paper-ink);
  padding:clamp(1.5rem,4vw,3rem) clamp(1.3rem,4vw,3.2rem);
  background-image:radial-gradient(120% 60% at 50% 0%,rgba(232,181,75,.10),rgba(232,181,75,0) 62%)}
.serif{font-family:var(--serif);font-size:clamp(1.12rem,1.55vw,1.32rem);line-height:2.15;color:var(--paper-ink)}
.serif p{margin:0 0 1.35rem;max-inline-size:none}
.serif p:last-child{margin-bottom:0}
.serif h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.85rem);
  line-height:1.6;margin:2.1rem 0 .9rem;color:#0F0C04}
.serif h2::after{content:"";display:block;width:58px;height:2px;margin-top:.55rem;
  background:linear-gradient(90deg,#C9942F,rgba(201,148,47,0))}
.serif h3{font-family:var(--serif);font-weight:700;font-size:clamp(1.2rem,1.9vw,1.45rem);
  margin:1.6rem 0 .7rem;color:#1B1608}
.serif ul,.serif ol{margin:0 0 1.35rem;padding-inline-start:1.5rem}
.serif li{margin-bottom:.55rem}
.serif blockquote{margin:1.6rem 0;padding:.2rem 1.2rem;border-inline-start:3px solid #C9942F;color:var(--paper-soft)}
.serif a{color:#8A6620;text-decoration:underline;text-underline-offset:.25em}
.serif a:hover{color:#5E4413}
.serif strong,.serif b{font-weight:700;color:#0F0C04}
.serif code{font-family:var(--mono);font-size:.88em;background:rgba(23,19,8,.06);padding:.12em .4em;border-radius:5px}
.serif pre{background:#171308;color:#EFE6D2;border-radius:12px;padding:1rem 1.1rem;overflow-x:auto;
  font-family:var(--mono);font-size:.86rem;line-height:1.85;margin:0 0 1.35rem}
.serif img{max-width:100%;height:auto;border-radius:12px;margin:1.4rem 0;border:1px solid var(--paper-rule)}
.serif hr{border:0;height:1px;background:var(--paper-rule);margin:2rem 0}
.sheet-lede{font-family:var(--serif);font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.95;
  color:#2B2413;margin:0 0 1.6rem;padding-bottom:1.4rem;border-bottom:1px solid var(--paper-rule)}

/* --- the attached file --- */
.filecard{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.1rem;border-radius:14px;
  border:1px solid var(--paper-rule);background:rgba(23,19,8,.04);text-decoration:none;color:var(--paper-ink);
  margin:1.6rem 0 0;transition:border-color .35s var(--ease),background .35s var(--ease)}
.filecard:hover{border-color:#C9942F;background:rgba(201,148,47,.09)}
.filecard .fi{flex:0 0 42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:#171308;color:#F6CC6E;font-family:var(--mono);font-size:.66rem}
.filecard b{display:block;font-family:var(--serif);font-size:1.02rem;margin-bottom:.1rem}
.filecard span{font-family:var(--mono);font-size:.76rem;color:var(--paper-soft)}

/* --- the link, hidden behind a button until asked for --- */
.linkbox{margin:1.8rem 0 0}
.linkbtn{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.25rem;border-radius:12px;cursor:pointer;
  font-family:var(--serif);font-size:1rem;font-weight:700;color:#171308;border:1px solid #C9942F;
  background:linear-gradient(178deg,#F8DFA4,#E5C070);
  box-shadow:inset 0 1px 0 rgba(255,251,240,.9),0 8px 20px -12px rgba(201,148,47,.9);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.linkbtn:hover{transform:translateY(-2px)}
.linkbtn .chev{transition:transform .45s var(--ease-out);display:inline-block}
.linkbox.open .linkbtn .chev{transform:rotate(180deg)}
.linkdrop{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .4s var(--ease)}
.linkbox.open .linkdrop{max-height:340px;opacity:1;margin-top:.9rem}
.linkframe{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.85rem 1rem;border-radius:14px;
  border:2px solid #C9942F;background:#FFFDF7;box-shadow:inset 0 2px 6px rgba(23,19,8,.06)}
.linkframe a{flex:1 1 240px;font-family:var(--mono);font-size:.86rem;color:#6B4E12;word-break:break-all;
  text-decoration:underline;text-underline-offset:.25em;direction:ltr;text-align:start}
.linkframe button{padding:.5rem .95rem;border-radius:10px;cursor:pointer;font-family:var(--serif);font-size:.92rem;
  color:#171308;border:1px solid #C9942F;background:linear-gradient(178deg,#FBEBC8,#EFD79C)}
.linkframe button.ok{background:linear-gradient(178deg,#CBEBD2,#A8DCB8);border-color:#4E9A68}

/* --- share and like --- */
.actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:2rem 0 0}
.act{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-radius:12px;cursor:pointer;
  font-size:.92rem;color:var(--text-primary);border:1px solid var(--border-ui);
  background:linear-gradient(178deg,#16233F,#0C1428);text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(170,200,255,.13),0 8px 20px -14px rgba(0,0,0,.9);
  transition:transform .3s var(--ease-out),border-color .3s var(--ease),color .3s var(--ease)}
.act:hover{transform:translateY(-2px);border-color:var(--accent-muted)}
.act svg{width:17px;height:17px;flex:0 0 17px}
.act.like.on{border-color:var(--accent);color:var(--accent)}
.act.like.on svg{fill:var(--accent)}
.act.wa:hover{border-color:rgba(37,211,102,.6)}
.act.ok{border-color:var(--accent);color:var(--accent)}
.act .n{font-family:var(--mono);font-size:.8rem;opacity:.85}

/* --- comments --- */
.talk{margin-top:2.6rem}
.talk h2{font-family:var(--display);font-weight:700;word-spacing:.14em;font-size:1.35rem;margin:0 0 .4rem}
.talk .note{color:var(--text-secondary);font-size:.9rem;margin:0 0 1.4rem;max-inline-size:70ch}
.cbox{border-radius:18px;padding:1.1rem;background:linear-gradient(172deg,var(--panel-hi),var(--panel));
  border:1px solid var(--hairline);box-shadow:inset 0 1px 0 rgba(170,200,255,.1)}
.cbox textarea{width:100%;min-height:110px;resize:vertical;padding:.85rem 1rem;border-radius:13px;
  background:#050914;border:1px solid var(--border-ui);color:var(--text-primary);font-family:var(--body);
  font-size:.98rem;line-height:1.85}
.cbox textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.cbox .crow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.cbox .crow .spacer{flex:1 1 auto}
.cname{flex:0 1 190px;padding:.6rem .85rem;border-radius:11px;background:#050914;border:1px solid var(--border-ui);
  color:var(--text-primary);font-size:.92rem}
.cname:focus{outline:none;border-color:var(--accent)}
.emoji-btn{width:42px;height:42px;border-radius:11px;cursor:pointer;font-size:1.2rem;line-height:1;
  border:1px solid var(--border-ui);background:linear-gradient(178deg,#16233F,#0C1428);color:inherit}
.emoji-btn:hover{border-color:var(--accent-muted)}
.picker{display:none;margin-top:.8rem;padding:.8rem;border-radius:14px;background:#050914;border:1px solid var(--hairline)}
.picker.open{display:block}
.picker .ptabs{display:flex;gap:.4rem;margin-bottom:.7rem;flex-wrap:wrap}
.picker .ptab{padding:.32rem .75rem;border-radius:999px;cursor:pointer;font-size:.82rem;
  border:1px solid transparent;background:rgba(147,161,190,.1);color:var(--text-secondary)}
.picker .ptab.on{border-color:var(--accent-muted);color:var(--accent);background:rgba(232,181,75,.1)}
.picker .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:190px;overflow:auto}
.picker .grid button{aspect-ratio:1;border:0;border-radius:9px;cursor:pointer;background:none;font-size:1.35rem;
  line-height:1;transition:background .2s var(--ease),transform .2s var(--ease-out)}
.picker .grid button:hover{background:rgba(232,181,75,.14);transform:scale(1.15)}
.picker .grid.stick{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
.picker .grid.stick button{font-size:2.1rem}

.thread{margin-top:1.4rem;display:flex;flex-direction:column;gap:12px}
.cmt{display:flex;gap:.8rem;padding:1rem 1.1rem;border-radius:16px;
  background:rgba(14,23,48,.55);border:1px solid var(--hairline)}
.cmt .av{flex:0 0 38px;height:38px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);
  font-weight:700;font-size:1rem;color:#0F0B02;background:linear-gradient(178deg,#F6CC6E,#C9942F)}
.cmt .bd{flex:1 1 auto;min-width:0}
.cmt .who{font-family:var(--display);font-weight:500;font-size:.98rem;margin-bottom:.25rem}
.cmt .when{font-family:var(--mono);font-size:.7rem;color:var(--text-secondary);margin-inline-start:.5rem}
.cmt .txt{font-size:.96rem;line-height:1.9;white-space:pre-wrap;word-break:break-word}
.cmt.reply{margin-inline-start:2.2rem;border-color:var(--accent-muted);background:rgba(232,181,75,.06)}
.cmt.reply .av{background:linear-gradient(178deg,#2F6BFF,#173B8F);color:#EAF1FF}
.cmt .sent{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;font-family:var(--mono);
  font-size:.7rem;color:var(--accent);opacity:.9}

/* the contact card the auto reply hands a question to */
.replycard{margin-top:.9rem;padding:.9rem 1rem;border-radius:14px;background:rgba(4,6,15,.5);
  border:1px solid var(--accent-muted)}
.replycard .nm{font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:.7rem}
.replycard .rows{display:flex;flex-direction:column;gap:.5rem}
.replycard a{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--mono);
  font-size:.85rem;color:var(--text-primary);direction:ltr;justify-content:flex-start}
.replycard a:hover{color:var(--accent)}
.replycard svg{width:17px;height:17px;flex:0 0 17px}

@media (max-width:620px){
  .cmt.reply{margin-inline-start:.9rem}
  .sheet-in{padding:1.4rem 1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .shine::before{animation:none;background:none}
  .linkbox .linkdrop{max-height:none;opacity:1;margin-top:.9rem}
}

/* the weekly rail carries the same card the rest of the site uses */
.railcard{flex:0 0 clamp(268px,30vw,330px);scroll-snap-align:start;display:block}
.railcard .pcard{height:100%}
.ticker-sec .rail{align-items:stretch}
body.no-content #contact,body.no-posts #contact{display:block}

/* icons inherit the colour of whatever they sit in, and the contact tiles keep their own */
.act svg,.replycard svg,.filecard svg{fill:currentColor}
.replycard a svg{color:var(--accent)}
.ccard.wa .ico svg{fill:var(--wa);stroke:none}
.ccard.tel .ico svg{fill:var(--blue-soft);stroke:none}
.ccard.mail .ico svg{fill:none;stroke:var(--accent)}

/* ==========================================================================
   THE SECTIONS MENU
   One component, two shapes: a dropdown on wide screens, a full sheet on
   phones, where the top nav used to disappear entirely.
   ========================================================================== */
.navmenu{position:relative;display:inline-flex}
.navtrig{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem 0;cursor:pointer;
  background:none;border:0;font-family:var(--body);font-size:.94rem;color:var(--text-secondary);
  transition:color .35s var(--ease)}
.navtrig:hover,.navtrig[aria-expanded="true"]{color:var(--text-primary)}
.navtrig .chev{width:9px;height:9px;border-inline-end:1.6px solid currentColor;border-block-end:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .4s var(--ease-out)}
.navtrig[aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(-2px)}

.navdrop{position:absolute;z-index:70;top:calc(100% + 14px);inset-inline-start:50%;transform:translateX(50%) translateY(-8px);
  width:min(300px,86vw);padding:.5rem;border-radius:16px;opacity:0;pointer-events:none;
  background:linear-gradient(172deg,#16233F 0%,#0C1428 100%);
  border:1px solid var(--border-ui);
  box-shadow:0 30px 60px -28px rgba(0,0,0,1),0 0 0 1px rgba(232,181,75,.12),inset 0 1px 0 rgba(170,200,255,.14);
  transition:opacity .3s var(--ease),transform .35s var(--ease-out)}
.navdrop.open{opacity:1;pointer-events:auto;transform:translateX(50%) translateY(0)}
.navdrop::before{content:"";position:absolute;top:-6px;inset-inline-start:calc(50% - 6px);width:11px;height:11px;
  transform:rotate(45deg);background:#16233F;border-inline-start:1px solid var(--border-ui);border-block-start:1px solid var(--border-ui)}

.navitem{display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem;border-radius:11px;text-decoration:none;
  color:var(--text-primary);transition:background .25s var(--ease)}
.navitem:hover{background:rgba(232,181,75,.1)}
.navitem .ni{flex:0 0 32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:rgba(5,9,20,.7);border:1px solid var(--hairline)}
.navitem .ni svg{width:19px;height:19px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.navitem .nt{flex:1 1 auto;min-width:0}
.navitem b{display:block;font-family:var(--display);font-weight:500;font-size:.98rem;line-height:1.4}
.navitem small{display:block;color:var(--text-secondary);font-size:.78rem;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navitem .nn{font-family:var(--mono);font-size:.72rem;color:var(--accent);opacity:.85}
.navdrop .navfoot{margin-top:.35rem;padding-top:.5rem;border-top:1px solid var(--hairline)}
.navdrop .navfoot a{display:block;padding:.5rem .7rem;border-radius:10px;text-decoration:none;
  font-family:var(--mono);font-size:.8rem;color:var(--text-secondary)}
.navdrop .navfoot a:hover{background:rgba(147,161,190,.1);color:var(--accent)}

/* the burger, and the sheet it opens */
.navburger{display:none;width:42px;height:42px;border-radius:12px;cursor:pointer;
  background:linear-gradient(178deg,#16233F,#0C1428);border:1px solid var(--border-ui);
  padding:0;place-items:center;gap:4px;flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(170,200,255,.14)}
.navburger span{display:block;width:17px;height:1.7px;border-radius:2px;background:var(--text-primary);
  transition:transform .35s var(--ease-out),opacity .25s var(--ease)}
.navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.7px) rotate(45deg)}
.navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.7px) rotate(-45deg)}

.sheet-nav{position:fixed;inset:var(--nav-h) 0 0;z-index:55;overflow-y:auto;
  background:rgba(4,6,15,.94);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .3s var(--ease)}
.sheet-nav.open{opacity:1}
.sheet-in-nav{width:min(560px,92vw);margin-inline:auto;padding:1.4rem 0 3rem;
  display:flex;flex-direction:column;gap:6px}
.sheet-in-nav .kicker{margin:1rem 0 .3rem}
.sheet-in-nav .navitem{padding:.85rem .9rem;border:1px solid var(--hairline);
  background:linear-gradient(172deg,rgba(22,35,63,.7),rgba(12,20,40,.7))}
.sheet-in-nav .plain{display:block;padding:.8rem .9rem;border-radius:11px;text-decoration:none;
  color:var(--text-primary);font-size:1rem;border:1px solid transparent}
.sheet-in-nav .plain:hover{background:rgba(147,161,190,.08);border-color:var(--hairline)}
.sheet-in-nav .btn{margin-top:.6rem}

@media (max-width:860px){
  .nav-links{display:none}
  .navburger{display:inline-flex}
  .btn-sm{margin-inline-start:0}
  .nav{gap:.7rem}
  .nav .spacer-nav{flex:1 1 auto}
}
@media (min-width:861px){
  .sheet-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .navdrop{transition:none}
  .sheet-nav{transition:none}
}


/* --------------------------------------------------------------------------
   THE DOCUMENT
   The cover stays on the card in the listing. What sits above the text here is
   the post's own picture, framed as a picture is framed: matted, bordered, and
   sized so it never pretends to be a banner. The text below it is a sheet of
   white paper inside a ruled gold border with a flourish at every corner, so a
   post reads as something issued rather than something posted.
   -------------------------------------------------------------------------- */

/* --- the picture, as a hung frame --- */
.shine.pic{max-inline-size:min(100%,600px);margin-inline:auto;padding:11px;border-radius:14px;
  box-shadow:0 34px 66px -30px rgba(0,0,0,1),0 0 0 1px rgba(12,8,0,.55),
             0 0 44px -16px rgba(232,181,75,.42)}
.shine.pic .shine-in{border-radius:6px;background:#F4EFE4;
  box-shadow:inset 0 0 0 1px rgba(23,19,8,.28),inset 0 2px 14px rgba(23,19,8,.14)}
.shine.pic .shine-in img{display:block;inline-size:100%;block-size:auto;
  max-block-size:min(66vh,540px);object-fit:contain;background:#F4EFE4}
.shine.pic figcaption{position:static;border-radius:0;background:none;color:#3D2E0A;
  padding:.55rem .2rem .1rem;text-align:center;font-size:.7rem;letter-spacing:.1em}

/* --- the sheet: white paper, ruled gold border, ornamented corners --- */
.sheet{border-radius:12px;padding:9px;
  background:linear-gradient(150deg,#F3D08F,#C9942F 30%,#7A5A1B 50%,#EBC97E 72%,#C9942F);
  box-shadow:0 34px 78px -34px rgba(0,0,0,1),0 0 0 1px rgba(12,8,0,.5)}
.sheet-in{position:relative;border-radius:4px;background:#FFFFFF;background-image:none;
  padding:clamp(2.4rem,5.5vw,4rem) clamp(1.8rem,5.5vw,4rem);
  box-shadow:inset 0 0 0 1px rgba(122,90,27,.45)}
/* the double rule: a thin outer line and a heavier inner one, as on a deed */
.sheet-in::before{content:"";position:absolute;inset:11px;pointer-events:none;
  border:1px solid rgba(122,90,27,.42)}
.sheet-in::after{content:"";position:absolute;inset:16px;pointer-events:none;
  border:2px solid rgba(201,148,47,.22);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20transform%3D%22rotate%280%2032%2032%29%22%20fill%3D%22none%22%20stroke%3D%22%23A8801F%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.3%22%3E%3Cpath%20d%3D%22M3%2026V9a6%206%200%200%201%206-6h17%22%2F%3E%3Cpath%20d%3D%22M9%2032V15a6%206%200%200%201%206-6h17%22%20stroke-opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M15%2042c0-14%2013-27%2027-27%22%20stroke-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M12%2012c5-1%209%203%208%208%22%20stroke-opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.6%22%20fill%3D%22%23A8801F%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20transform%3D%22rotate%2890%2032%2032%29%22%20fill%3D%22none%22%20stroke%3D%22%23A8801F%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.3%22%3E%3Cpath%20d%3D%22M3%2026V9a6%206%200%200%201%206-6h17%22%2F%3E%3Cpath%20d%3D%22M9%2032V15a6%206%200%200%201%206-6h17%22%20stroke-opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M15%2042c0-14%2013-27%2027-27%22%20stroke-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M12%2012c5-1%209%203%208%208%22%20stroke-opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.6%22%20fill%3D%22%23A8801F%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20transform%3D%22rotate%28180%2032%2032%29%22%20fill%3D%22none%22%20stroke%3D%22%23A8801F%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.3%22%3E%3Cpath%20d%3D%22M3%2026V9a6%206%200%200%201%206-6h17%22%2F%3E%3Cpath%20d%3D%22M9%2032V15a6%206%200%200%201%206-6h17%22%20stroke-opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M15%2042c0-14%2013-27%2027-27%22%20stroke-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M12%2012c5-1%209%203%208%208%22%20stroke-opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.6%22%20fill%3D%22%23A8801F%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20transform%3D%22rotate%28270%2032%2032%29%22%20fill%3D%22none%22%20stroke%3D%22%23A8801F%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.3%22%3E%3Cpath%20d%3D%22M3%2026V9a6%206%200%200%201%206-6h17%22%2F%3E%3Cpath%20d%3D%22M9%2032V15a6%206%200%200%201%206-6h17%22%20stroke-opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M15%2042c0-14%2013-27%2027-27%22%20stroke-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M12%2012c5-1%209%203%208%208%22%20stroke-opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.6%22%20fill%3D%22%23A8801F%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-size:52px 52px;
  background-position:left top,right top,right bottom,left bottom}

/* --- the head of the document --- */
.doc-head{text-align:center;margin:0 0 1.8rem}
.doc-mark{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:#8A6620;padding:.3rem .85rem;border:1px solid rgba(122,90,27,.4);
  border-radius:999px}
.doc-mark{font-family:var(--serif);font-size:1.15rem;font-weight:700;letter-spacing:0;
  text-transform:none;color:#8A6620}
.doc-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:#6B5A38;
  margin:.7rem 0 0}
.doc-rule{display:block;block-size:14px;margin:1rem auto 0;inline-size:min(280px,72%);
  background:
    linear-gradient(90deg,rgba(201,148,47,0),#C9942F 22%,#C9942F 78%,rgba(201,148,47,0)) center/100% 1px no-repeat,
    radial-gradient(circle,#C9942F 0 3px,rgba(201,148,47,0) 3.5px) center/14px 14px no-repeat}

/* --- the reading text --- */
.serif{font-size:clamp(1.1rem,1.45vw,1.26rem);line-height:2.2;letter-spacing:0;
  text-align:justify;text-justify:inter-word;hanging-punctuation:first last}
.serif p{margin:0 0 1.25rem}
.serif > p:first-of-type{font-size:1.06em;color:#241E10}
.serif h2{text-align:center;margin:2.4rem 0 1.1rem}
.serif h2::after{margin-inline:auto;inline-size:96px;
  background:linear-gradient(90deg,rgba(201,148,47,0),#C9942F,rgba(201,148,47,0))}
.serif h3{text-align:center;margin:1.9rem 0 .8rem}
.sheet-lede{text-align:center;color:#3A3120;border-bottom:0;padding-bottom:0;margin-bottom:1.9rem;
  font-style:normal}
.sheet-lede::after{content:"";display:block;inline-size:64px;block-size:1px;margin:1.4rem auto 0;
  background:linear-gradient(90deg,rgba(201,148,47,0),#C9942F,rgba(201,148,47,0))}

@media (max-width:640px){
  .sheet{padding:6px}
  .sheet-in{padding:2rem 1.35rem}
  .sheet-in::before{inset:8px}
  .sheet-in::after{inset:12px;background-size:34px 34px}
  .serif{text-align:start}
}

/* --------------------------------------------------------------------------
   THE PROMPT CONSOLE
   A prompt sits inside the white document, but it is not part of the prose. It
   is an instrument: it keeps its own direction, its own monospace, a number on
   every line so a reader can point at one, and a single button that takes the
   whole thing. The dark panel is deliberate — it reads as a terminal set into
   a page, which is what it is.
   -------------------------------------------------------------------------- */
.pbox{margin:2rem 0 0;border-radius:14px;overflow:hidden;background:#070C1A;
  border:1px solid rgba(122,90,27,.5);
  box-shadow:0 26px 54px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(170,200,255,.09)}

.pbox-head{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;
  background:linear-gradient(178deg,#16233F,#0B1327);
  border-bottom:1px solid rgba(147,161,190,.2)}
.pbox-dots{display:flex;gap:.34rem;flex:0 0 auto}
.pbox-dots i{inline-size:9px;block-size:9px;border-radius:50%;background:#2B3550}
.pbox-dots i:nth-child(1){background:#E05A4E}
.pbox-dots i:nth-child(2){background:#E8B54B}
.pbox-dots i:nth-child(3){background:#4FA97A}
.pbox-name{flex:1;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:#E8B54B}
.pbox-copy{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:9px;
  font-family:var(--mono);font-size:.72rem;cursor:pointer;color:#F1F4FA;
  background:linear-gradient(178deg,#22335A,#101B33);border:1px solid rgba(147,161,190,.36);
  box-shadow:inset 0 1px 0 rgba(170,200,255,.16);
  transition:border-color .3s var(--ease),transform .2s var(--ease-out),background .3s var(--ease)}
.pbox-copy:hover{border-color:#E8B54B;transform:translateY(-1px)}
.pbox-copy.done{background:linear-gradient(178deg,#1E4030,#0D2318);border-color:#4FA97A;color:#B9EBCE}
.pbox-copy svg{inline-size:14px;block-size:14px;flex:0 0 auto}

.pbox-body{margin:0;padding:.9rem 0;list-style:none;counter-reset:pl;
  overflow-x:auto;font-family:var(--mono);font-size:.82rem;line-height:1.95;color:#C7D3EA}
.pbox-body li{counter-increment:pl;display:grid;grid-template-columns:3.1rem 1fr;
  gap:.2rem;padding:0 .9rem;white-space:pre-wrap;overflow-wrap:anywhere}
.pbox-body li::before{content:counter(pl);text-align:center;color:#5D93FF;
  font-size:.7rem;line-height:inherit;-webkit-user-select:none;user-select:none;
  border-inline-end:1px solid rgba(147,161,190,.16);margin-inline-end:.75rem;opacity:.85}
.pbox-body li:hover{background:rgba(93,147,255,.06)}
.pbox[dir="ltr"] .pbox-body{text-align:left}
.pbox[dir="rtl"] .pbox-body{text-align:right}

@media (max-width:640px){
  .pbox-body{font-size:.76rem}
  .pbox-body li{grid-template-columns:2.3rem 1fr;padding:0 .5rem}
  .pbox-copy span{display:none}
}


/* --------------------------------------------------------------------------
   THE PHONE GETS THE SAME SITE
   Not a reduced edition of it. The scrubbed hero, all six caption bands, the
   justified sheet, the ornamented border — the phone runs the whole thing. What
   changes is measurement, never composition: on a screen a quarter as wide, a
   band that occupies 48vw occupies nearly all of it, and type set for a metre
   away is set for thirty centimetres instead.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  /* the band takes the width it needs, and the scrim follows it */
  .band{inline-size:min(46ch,92vw);padding-inline:clamp(18px,5vw,40px);
    padding-block:var(--nav-h) 14vh;justify-content:flex-end}
  /* the text sits at the foot of the screen here, so the scrim has to come up
     from the foot too. The desktop scrim runs sideways off the page edge, which
     over a bottom-anchored line covers nothing at all. */
  .band::before{inset:auto -1px 0 -1px;block-size:62%;
    background:linear-gradient(to top,
      rgba(4,6,15,.92) 0%, rgba(4,6,15,.88) 26%, rgba(4,6,15,.66) 52%,
      rgba(4,6,15,.34) 74%, rgba(4,6,15,0) 100%)}
  .band.b3::before,.band.b4::before,.band.b5::before{
    background:linear-gradient(to top,
      rgba(4,6,15,.95) 0%, rgba(4,6,15,.9) 30%, rgba(4,6,15,.7) 56%,
      rgba(4,6,15,.36) 78%, rgba(4,6,15,0) 100%)}
  .band .ln.xl{font-size:clamp(1.75rem,7.4vw,2.9rem)}
  .band .ln.lg{font-size:clamp(1.45rem,6vw,2.3rem)}
  .band .sub{font-size:clamp(.95rem,3.7vw,1.1rem);max-inline-size:34ch;margin-top:.9rem}
  .band .wordmark{font-size:clamp(3rem,15vw,5.4rem)}
  /* the thread would cut across the words at this width, so it hugs the edge */
  .thread-wrap{right:auto;left:0;width:16%}
}

@media (max-width:520px){
  .band{inline-size:min(42ch,94vw);padding-block:var(--nav-h) 16vh}
  .band .ln.xl{font-size:clamp(1.6rem,7.8vw,2.4rem)}
  .band .ln.lg{font-size:clamp(1.3rem,6.4vw,2rem)}
  .band .sub{font-size:clamp(.92rem,4vw,1.05rem);line-height:1.75}
  .band .btn{padding-inline:1rem}
}

/* the reading sheet keeps its character on a phone: justified, ornamented,
   only tighter. The earlier build dropped both, which is precisely the
   difference that was being complained about. */
@media (max-width:640px){
  .serif{text-align:justify;text-justify:inter-word}
  .sheet-in::after{background-size:40px 40px}
  .pbox-copy span{display:inline}
  .pbox-body{font-size:.79rem}
}

/* two columns beat one: a single stack of category cards reads as a list,
   which is not what the desktop shows */
@media (max-width:560px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat:nth-child(5){grid-column:span 2}
}

/* the caption above the prompt console: the reader's sentence about a block of
   text that is usually not in the reader's language, so it keeps the page's
   direction and its serif, and leans on the console rather than floating free */
.pbox-note{font-family:var(--serif);font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.9;
  color:#3A3120;margin:2rem 0 0;padding:.85rem 1.1rem;border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,rgba(201,148,47,.13),rgba(201,148,47,.05));
  border:1px solid rgba(122,90,27,.4);border-bottom:0;text-align:start}
.pbox-note + .pbox{margin-top:0;border-radius:0 0 14px 14px}


/* a video whose host forbids framing: a real card that opens the source, rather
   than an empty frame carrying a refusal notice */
.vidout{position:relative;display:block;line-height:0;text-decoration:none}
.vidout img{inline-size:100%;block-size:auto;display:block}
.vidout .play{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  inline-size:74px;block-size:74px;margin:-37px 0 0 -37px;border-radius:50%;
  background:rgba(4,6,15,.72);border:2px solid rgba(232,181,75,.9);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.9);transition:transform .3s var(--ease-out)}
.vidout .play::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;
  margin:-13px 0 0 -8px;border-inline-start:20px solid #E8B54B;
  border-block:13px solid transparent}
.vidout:hover .play{transform:scale(1.08)}
.vidout .lbl{position:absolute;inset-inline:0;inset-block-end:0;padding:.75rem 1rem;
  font-family:var(--mono);font-size:.78rem;line-height:1.6;color:#EFE6D2;text-align:center;
  background:linear-gradient(0deg,rgba(4,6,15,.92),rgba(4,6,15,0))}

/* the video frame: landscape by default, upright for a Short. The upright one
   is held to a comfortable reading height and centred, so a phone-shaped video
   does not become a tower the reader has to scroll past. */
.vidframe{position:relative;padding-top:56.25%;background:#050914}
.vidframe iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}
.vidframe.up{padding-top:0;aspect-ratio:9/16;max-block-size:min(78vh,760px);
  inline-size:auto;margin-inline:auto}
.vidframe.up iframe{position:static;block-size:100%;inline-size:100%}
.shine.vid .shine-in:has(.vidframe.up){display:flex;justify-content:center;background:#04060F}
@supports not (aspect-ratio:1){
  .vidframe.up{padding-top:177.78%}
  .vidframe.up iframe{position:absolute}
}

/* --------------------------------------------------------------------------
   THE PURCHASE CARD
   It sits after the reading sheet, where a reader who has finished the piece
   decides. Gold and raised, so it reads as an offer rather than as part of the
   text; and the transfer details stay folded away until asked for, because an
   account number on open display is noise to everyone who is not buying.
   -------------------------------------------------------------------------- */
.buy{position:relative;margin:0 0 2rem;border-radius:18px;padding:3px;
  background:linear-gradient(150deg,#F3D08F,#C9942F 32%,#7A5A1B 52%,#EBC97E 74%,#C9942F);
  box-shadow:0 30px 66px -32px rgba(0,0,0,1),0 0 34px -16px rgba(232,181,75,.4)}
.buy > *{position:relative;z-index:1}
.buy-head,.buy-open,.buy-drop,.buy-acts{background:#0B1327}
.buy-head{border-radius:15px 15px 0 0;padding:1.4rem clamp(1.1rem,3vw,1.9rem) 1.2rem}
.buy-tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.1em;color:#E8B54B;padding:.32rem .7rem;border-radius:999px;
  border:1px solid rgba(232,181,75,.42);background:rgba(232,181,75,.08)}
.buy-tag svg{inline-size:14px;block-size:14px}
.buy h3{margin:.85rem 0 0;font-family:var(--display);word-spacing:.12em;font-weight:700;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.5;color:var(--text-primary)}
.buy-price{margin:.5rem 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.1rem);color:#F6CC6E;line-height:1.2}
.buy-note{margin:.6rem 0 0;font-size:.92rem;line-height:1.85;color:var(--text-secondary);
  max-inline-size:60ch}

.buy-open{display:flex;align-items:center;gap:.6rem;inline-size:100%;
  padding:.95rem clamp(1.1rem,3vw,1.9rem);cursor:pointer;text-align:start;
  font-family:var(--mono);font-size:.84rem;color:var(--text-primary);
  border:0;border-block-start:1px solid var(--hairline)}
.buy-open svg{inline-size:17px;block-size:17px;color:#E8B54B;flex:0 0 auto}
.buy-open .chev{margin-inline-start:auto;display:inline-flex;transition:transform .4s var(--ease)}
.buy-open .chev svg{inline-size:15px;block-size:15px;color:var(--text-secondary)}
.buy.open .buy-open .chev{transform:rotate(180deg)}
.buy-open:hover{color:#F6CC6E}

.buy-drop{max-block-size:0;overflow:hidden;transition:max-block-size .55s var(--ease)}
.buy.open .buy-drop{max-block-size:620px}
.buy-frame{padding:.3rem clamp(1.1rem,3vw,1.9rem) 1.3rem}
.bline{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.7rem 0;border-block-end:1px solid var(--hairline)}
.bline:last-of-type{border-block-end:0}
.bk{flex:0 0 8.5rem;font-family:var(--mono);font-size:.72rem;color:var(--text-secondary)}
.bv{flex:1 1 14rem;font-size:.95rem;color:var(--text-primary);overflow-wrap:anywhere}
.bv.mono{font-family:var(--mono);font-size:.88rem;letter-spacing:.02em}
.bcopy{flex:0 0 auto;padding:.34rem .8rem;border-radius:9px;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;color:var(--text-primary);
  background:linear-gradient(178deg,#22335A,#101B33);border:1px solid rgba(147,161,190,.36);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.bcopy:hover{border-color:#E8B54B}
.bcopy.done{background:linear-gradient(178deg,#1E4030,#0D2318);border-color:#4FA97A;color:#B9EBCE}
.buy-after{margin:1rem 0 0;font-size:.86rem;line-height:1.8;color:var(--text-secondary)}

.buy-acts{display:flex;gap:.6rem;flex-wrap:wrap;border-radius:0 0 15px 15px;
  padding:1rem clamp(1.1rem,3vw,1.9rem) 1.2rem;border-block-start:1px solid var(--hairline)}

@media (max-width:560px){
  .bk{flex:1 1 100%}
  .buy-acts .act{flex:1 1 100%;justify-content:center}
}

/* --- the locked notice and the order form on the purchase card --- */
.buy-locked{display:flex;align-items:flex-start;gap:.55rem;margin:.9rem 0 0;
  padding:.7rem .85rem;border-radius:11px;font-size:.86rem;line-height:1.8;
  color:#E6D9B4;background:rgba(232,181,75,.08);border:1px solid rgba(232,181,75,.3)}
.buy-locked svg{inline-size:16px;block-size:16px;flex:0 0 auto;margin-block-start:.2rem;color:#E8B54B}

.buy-form{display:grid;gap:.7rem;padding:1.1rem clamp(1.1rem,3vw,1.9rem) .3rem;
  border-block-start:1px solid var(--hairline)}
.buy-formhead{margin:0;font-family:var(--mono);font-size:.78rem;color:#E8B54B}
.bf{display:grid;gap:.32rem}
.bf > span{font-size:.8rem;color:var(--text-secondary)}
.bf > span b{color:#E8B54B;font-weight:600;font-size:.74rem;margin-inline-start:.3rem}
.bf input{padding:.7rem .85rem;border-radius:10px;background:#050914;
  border:1px solid var(--border-ui);color:var(--text-primary);font:inherit;font-size:.92rem;
  transition:border-color .3s var(--ease)}
.bf input:focus{outline:0;border-color:#E8B54B}
.buy-form .btn{justify-self:start;margin-top:.2rem}
.buy-msg{margin:.2rem 0 0;font-size:.86rem;line-height:1.8;min-block-size:1.2em}
.buy-msg.good{color:#7BD6A4}
.buy-msg.bad{color:#F0A08E}
.buy-privacy{margin:0;font-size:.76rem;color:var(--text-secondary)}
.buy-form.done .bf,.buy-form.done .btn{display:none}
.buy-form.done .buy-formhead{display:none}

/* --------------------------------------------------------------------------
   FOR SALE, SEEN FROM THE OUTSIDE
   A price on the listing card. A reader deciding what to open deserves to know
   which of these is an offer before they click, not after.
   -------------------------------------------------------------------------- */
.pcard-sale{position:absolute;z-index:2;inset-block-start:12px;inset-inline-start:12px;
  padding:.34rem .75rem;border-radius:999px;font-family:var(--display);font-weight:700;
  font-size:.82rem;letter-spacing:.01em;color:#2A1E05;
  background:linear-gradient(178deg,#F6CC6E,#C9942F);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.5)}

/* the section's own card in the grid wears the same gold, so it reads as the shop */
.cat[href*="cat=store"] .ic{color:#F6CC6E}
.cat[href*="cat=store"]{border-color:rgba(232,181,75,.34)}
.cat[href*="cat=store"]:hover{border-color:rgba(232,181,75,.6)}

/* --------------------------------------------------------------------------
   THE SOURCE CARD
   A news item's link, shown as something worth looking at. A browser-like bar
   carries the site's own identity, then the page's own picture at full width,
   then its headline. Where the site permits framing, the picture is replaced
   by the site itself, running.
   -------------------------------------------------------------------------- */
.srccard{position:relative;margin:0 0 2rem;border-radius:16px;overflow:hidden;
  background:#0B1327;border:1px solid rgba(147,161,190,.22);
  box-shadow:0 28px 60px -30px rgba(0,0,0,1),0 0 0 1px rgba(12,8,0,.4);
  transition:border-color .4s var(--ease),transform .4s var(--ease-out)}
.srccard:hover{border-color:rgba(232,181,75,.44);transform:translateY(-2px)}

.src-bar{display:flex;align-items:center;gap:.6rem;padding:.7rem .95rem;
  background:linear-gradient(178deg,#16233F,#0C1428);
  border-block-end:1px solid var(--hairline)}
.src-ico{inline-size:18px;block-size:18px;border-radius:4px;flex:0 0 auto;object-fit:contain}
.src-host{font-family:var(--mono);font-size:.78rem;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:16ch}
.src-dot{inline-size:5px;block-size:5px;border-radius:50%;background:#4FA97A;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(79,169,122,.18)}
.srccard:not(.islive) .src-dot{background:#E8B54B;box-shadow:0 0 0 3px rgba(232,181,75,.18)}
.src-live{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--text-secondary)}
.src-open{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.35rem;
  padding:.34rem .7rem;border-radius:8px;text-decoration:none;
  font-family:var(--mono);font-size:.72rem;color:var(--text-primary);
  background:rgba(255,255,255,.05);border:1px solid var(--border-ui);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.src-open:hover{border-color:#E8B54B;color:#F6CC6E}
.src-open svg{inline-size:13px;block-size:13px}

.src-shot{position:relative;display:block;line-height:0;background:#050914;
  aspect-ratio:1200/630;overflow:hidden}
.src-shot img{inline-size:100%;block-size:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease-out)}
.srccard:hover .src-shot img{transform:scale(1.03)}
.src-shot .src-glass{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,6,15,.5) 0%,rgba(4,6,15,0) 45%),
             linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 60%)}
.src-shot.noimg{background:
  radial-gradient(120% 90% at 50% 0%,rgba(232,181,75,.14),rgba(232,181,75,0) 62%),#070C1A;
  aspect-ratio:1200/420}

.src-live-frame{position:relative;aspect-ratio:16/10;background:#fff;overflow:hidden}
.src-live-frame iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}

.src-body{padding:1rem 1.1rem 1.2rem}
.src-body h3{margin:0;font-family:var(--display);word-spacing:.1em;font-weight:700;
  font-size:clamp(1.02rem,1.7vw,1.25rem);line-height:1.6;color:var(--text-primary)}
.src-body p{margin:.55rem 0 0;font-size:.92rem;line-height:1.85;color:var(--text-secondary);
  max-inline-size:70ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.src-go{display:inline-block;margin-top:.9rem;font-family:var(--mono);font-size:.75rem;
  color:#E8B54B;text-decoration:none;border-block-end:1px solid rgba(232,181,75,.35);
  padding-block-end:.15rem}
.src-go:hover{color:#F6CC6E}

@media (max-width:560px){
  .src-host{max-inline-size:11ch}
  .src-live{display:none}
  .src-live-frame{aspect-ratio:9/12}
}

/* the plate shown when a site publishes no picture of its own */
.src-plate{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:.7rem;text-align:center;padding:1rem}
.src-shot.noimg .src-plate{display:flex}
.src-shot.noimg > img{display:none}
.src-plate img{inline-size:44px;block-size:44px;object-fit:contain;border-radius:10px;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.src-plate b{font-family:var(--mono);font-size:.9rem;font-weight:500;letter-spacing:.04em;
  color:#E8B54B}
.src-shot.noimg .src-glass{display:none}

/* the plate shown when a site publishes no picture of its own */
.src-plate{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:.7rem;text-align:center;padding:1rem}
.src-shot.noimg .src-plate{display:flex}
.src-shot.noimg > img{display:none}
.src-plate img{inline-size:44px;block-size:44px;object-fit:contain;border-radius:10px;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.src-plate b{font-family:var(--mono);font-size:.9rem;font-weight:500;letter-spacing:.04em;
  color:#E8B54B}
.src-shot.noimg .src-glass{display:none}