/* ── Clarity, the shared identity ───────────────────────────────────
   After cliamp.stream, chosen for this phase: near-black ground, one cyan accent
   with magenta as the second voice, monospace throughout, box-drawing rules
   rather than cards, numbered file-name section labels, flat surfaces.

   ⚠️ Every page links this file. The warm amber theme (amber / chalk / Caveat)
   that each page used to carry inline is retired; anything still declaring it is
   a page that has not been converted yet. */

:root{
  --ground:#08090a;
  --surface:#0e1113;
  --raised:#141819;
  --line:#1e2629;
  --ink:#dfe8e8;
  --muted:#7d9295;
  --dim:#4f6265;
  --cyan:#2fe0d6;
  --cyan-dim:#177c77;
  --magenta:#ff5fa2;
  --amber:#e8b765;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--mono);font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--cyan);text-decoration:none;border-bottom:1px solid var(--cyan-dim)}
a:hover{border-bottom-color:var(--cyan)}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
code{font-family:var(--mono);background:var(--raised);border:1px solid var(--line);border-radius:3px;padding:.08em .36em;color:var(--amber);font-size:.88em}
strong,b{color:#f2fbfa;font-weight:700}
em,i{color:var(--ink)}
img{max-width:100%;height:auto}

.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.narrow{max-width:780px}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
header.top{position:sticky;top:0;z-index:20;background:rgba(8,9,10,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.14em;font-size:.92rem;text-transform:uppercase;color:var(--ink);border:0}
.brand:hover{color:var(--cyan)}
.brand .dot{color:var(--cyan)}
nav.links{display:flex;gap:18px;font-size:.8rem;letter-spacing:.08em;flex-wrap:wrap}
nav.links a{border:0;color:var(--muted)}
nav.links a:hover{color:var(--cyan)}

/* ── Page furniture ──────────────────────────────────────────────────────── */
section{padding:clamp(40px,7vh,90px) 0}
.label{font-size:.72rem;letter-spacing:.2em;color:var(--dim);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.label::after{content:"";flex:1;height:1px;background:var(--line)}
h1{font-size:clamp(1.9rem,5.4vw,3.4rem);line-height:1.06;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
h1 .em{color:var(--cyan)}
h2{font-size:clamp(1.25rem,2.8vw,1.85rem);font-weight:700;letter-spacing:-.02em;margin-bottom:14px;text-wrap:balance}
h3{font-size:1rem;font-weight:700;color:var(--cyan);margin:26px 0 8px;letter-spacing:.01em}
p.body,p.lead{max-width:66ch;color:var(--muted)}
p.body+p.body{margin-top:14px}
p.body strong,p.lead strong{color:var(--ink);font-weight:700}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eyebrow .tag{border:1px solid var(--magenta);color:var(--magenta);padding:2px 8px;letter-spacing:.14em}
.back{display:inline-block;font-size:.78rem;letter-spacing:.1em;color:var(--muted);border:0;margin:26px 0 0}
.back:hover{color:var(--cyan)}
.rule{height:1px;background:var(--line);border:0;margin:26px 0}

ul.list{list-style:none;display:grid;gap:10px;margin:16px 0 0;max-width:66ch}
ul.list li{position:relative;padding-left:1.5rem;color:var(--muted)}
ul.list li::before{content:"▸";position:absolute;left:0;color:var(--cyan)}
ul.list li strong{color:var(--ink)}

.btn{display:inline-block;border:1px solid var(--cyan-dim);color:var(--cyan);background:rgba(47,224,214,.06);padding:11px 20px;font-family:var(--mono);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.btn:hover{background:rgba(47,224,214,.14);border-color:var(--cyan)}
.btn.ghost{border-color:var(--line);color:var(--muted);background:transparent}
.btn.ghost:hover{color:var(--ink);border-color:var(--muted)}

/* Panels: a flat bordered block, the page's only container shape. */
.panel{border:1px solid var(--line);background:var(--surface);padding:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.grid > .cell{background:var(--surface);padding:22px}
.grid > .cell h3{margin-top:0}
.grid > .cell p{font-size:.86rem;color:var(--muted)}

.note{border:1px solid var(--magenta);background:linear-gradient(180deg,rgba(255,95,162,.07),rgba(255,95,162,.02));padding:20px 22px}
.note .h{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);margin-bottom:8px}
.note p{color:var(--ink);max-width:68ch;font-size:.92rem}
.note p + p{margin-top:12px}

footer{border-top:1px solid var(--line);padding:28px 0 60px;color:var(--dim);font-size:.76rem;letter-spacing:.06em}
footer .fin{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);border:0}
footer a:hover{color:var(--cyan)}

/* ── Small screens ───────────────────────────────────────────────────────────
   header.top is sticky, so whatever it costs it costs for the whole scroll. Measured
   at 320px the seven links wrapped to three rows and the bar stood 171px tall, a fifth
   of the screen, permanently. Tightening the gap and the type pulls it back to two rows. */
@media (max-width:560px){
  .topin{padding:10px 0;gap:10px}
  nav.links{gap:8px 12px;font-size:.72rem}
  /* The section labels are single unbreakable snake_case tokens, and .2em of letter-spacing
     on a 35-character one (04_what_it_deliberately_will_not_do) is wider than a 320px screen.
     Tighten the tracking and let it break rather than push the page out. */
  .label{letter-spacing:.12em;overflow-wrap:anywhere}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ── News ──────────────────────────────────────────────────────────────────
   A banner strip on the home page and the story list on news.html.

   The rail is built as a carousel from the start even though there is one
   story in it: slides are flex children with scroll-snap, so a second one
   needs markup and nothing else. The dots hide themselves at one slide. */
.news{margin:56px 0 0}
.news-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.news-head h2{margin:0}
.news-all{font-size:.78rem;letter-spacing:.14em;color:var(--dim);text-decoration:none;white-space:nowrap;transition:color .18s}
.news-all:hover{color:var(--cyan)}

.news-rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border:1px solid var(--line)}
.news-rail::-webkit-scrollbar{display:none}
.news-track{display:flex}

.slide{position:relative;flex:0 0 100%;scroll-snap-align:start;display:flex;gap:clamp(18px,3vw,38px);
  align-items:center;padding:clamp(20px,3vw,34px);background:var(--surface);overflow:hidden;isolation:isolate}
/* The art sits BEHIND the copy rather than beside it: Fallout London is warm
   orange and this site is near-black and cyan, so the screenshot is dimmed and
   allowed to glow through the scrim instead of competing with the chrome. The
   scrim is opaque where the type sits and clears toward the right edge. */
.slide-shot{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;opacity:.62;filter:saturate(.82)}
.slide::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--surface) 0%,rgba(14,17,19,.95) 42%,
    rgba(14,17,19,.82) 68%,rgba(14,17,19,.28) 100%)}

.slide-art{flex:0 0 auto;width:clamp(96px,13vw,150px)}
.slide-art img{display:block;width:100%;height:auto;border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.6)}
.slide-body{min-width:0}
.slide-tag{display:inline-block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ground);background:var(--cyan);padding:4px 9px;margin-bottom:12px;font-weight:700}
.slide-body h3{margin:0 0 10px;color:var(--ink);font-size:clamp(1rem,2.1vw,1.32rem);line-height:1.28;letter-spacing:-.01em}
.slide-body p{margin:0 0 16px;color:var(--muted);font-size:.86rem;max-width:56ch}

.news-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.news-dots:has(> :only-child){display:none}
.news-dot{width:7px;height:7px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;transition:background .2s}
.news-dot[aria-current="true"]{background:var(--cyan)}

/* Stacked, the copy no longer sits to the left of the art, so the scrim turns
   vertical: the top stays open for the picture and it closes under the type. */
@media (max-width:620px){
  .slide{flex-direction:column;align-items:flex-start}
  .slide-art{width:118px}
  .slide-shot{opacity:.5;object-position:center 30%}
  .slide::after{background:linear-gradient(180deg,rgba(14,17,19,.30) 0%,
    rgba(14,17,19,.86) 34%,var(--surface) 52%)}
}

/* ── The "new" flag on a game fix ──────────────────────────────────────── */
.badge-new{display:inline-block;vertical-align:middle;margin-left:10px;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--ground);background:var(--cyan);padding:3px 7px;
  position:relative;top:-2px}

/* ── news.html ─────────────────────────────────────────────────────────── */
.post{border:1px solid var(--line);background:var(--surface);padding:clamp(20px,3vw,30px);margin-top:18px}
.post + .post{margin-top:16px}
.post-date{font-size:.7rem;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.post h2{margin:10px 0 4px;font-size:clamp(1.1rem,2.4vw,1.5rem)}
.post .kicker{color:var(--magenta);font-size:.84rem;margin-bottom:14px}
.post p.body{font-size:.9rem}
.post p.body + p.body{margin-top:12px}
.post-figure{margin:0 0 18px;border:1px solid var(--line);overflow:hidden}
.post-figure img{display:block;width:100%;height:auto}