:root{
  --noir:#101012; --noir-2:#17171b;
  --bone:#f2ede3; --bone-2:#e8e2d4;
  --ink:#17150f; --chalk:#ece7db;
  --accent:#fed603; --accent-ink:#8a6a00;
  --line-noir:#2c2c31; --line-bone:#d8d0be;
  --muted-noir:#9a968d; --muted-bone:#6c6555;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Oswald",sans-serif;font-weight:600;line-height:1.12;
  text-transform:uppercase;letter-spacing:.02em;margin:0}
img,video,iframe{max-width:100%}
.wrap{max-width:44rem;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2rem)}
.eyebrow{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent-ink);margin:0}

.top{background:var(--noir);border-bottom:1px solid var(--line-noir);position:sticky;top:0;z-index:20}
.top .wrap{max-width:72rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--chalk)}
.brand:hover{opacity:.85}
.brand b{font-family:"Oswald";font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.9rem}
.tnav{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-noir);text-decoration:none}
.tnav:hover{color:var(--accent)}

.reticle{--s:2.4rem;width:var(--s);height:var(--s);position:relative;flex:none}
.reticle .disc{position:absolute;inset:0;border-radius:50%;border:2px solid var(--chalk);overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, var(--noir) 0 3%, transparent 3.5%),
    radial-gradient(circle at 50% 50%, var(--accent) 3% 13%, transparent 13.5%),
    repeating-radial-gradient(circle at 50% 50%, rgba(236,231,219,.5) 0 .5px, transparent .5px 1.9px),
    #1a1a1e}
.reticle .disc::after{content:"";position:absolute;inset:-10%;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 24deg, rgba(255,255,255,.32) 44deg, transparent 66deg, transparent 360deg)}
.reticle.spin{animation:spin 7s linear infinite}
.reticle::before,.reticle::after{content:"";position:absolute;background:var(--chalk);z-index:1}
.reticle::before{left:50%;top:-5px;bottom:-5px;width:1px;transform:translateX(-.5px)}
.reticle::after{top:50%;left:-5px;right:-5px;height:1px;transform:translateY(-.5px)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- article ---- */
.article{padding-block:clamp(2.5rem,7vw,4.5rem)}
.article h1{font-size:clamp(2rem,6vw,3.2rem);text-wrap:balance;margin:1.4rem 0 1.2rem}
.article .meta{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-bone);
  border-top:1px solid var(--line-bone);border-bottom:1px solid var(--line-bone);
  padding:.8rem 0;margin-bottom:2.6rem}
.prose p{margin:0 0 1.35rem}
.prose h2{font-size:clamp(1.25rem,3.6vw,1.7rem);margin:2.8rem 0 1rem}
.prose a{color:var(--accent-ink);text-underline-offset:2px}
.prose hr{border:0;border-top:1px solid var(--line-bone);margin:2.8rem 0}
.prose em{color:var(--muted-bone)}
.prose .label{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-bone);margin:2.4rem 0 .8rem}
.prose .pullquote{margin:2.8rem 0;padding:.2rem 0 .2rem 1.5rem;border-left:4px solid var(--accent)}
.prose .pullquote blockquote{margin:0;font-family:"Oswald";font-weight:600;text-transform:uppercase;
  line-height:1.16;letter-spacing:.01em;font-size:clamp(1.25rem,3.6vw,1.8rem);color:var(--ink)}
.prose .pullquote figcaption{margin-top:.9rem;font-family:"Space Mono",monospace;font-size:.72rem;
  letter-spacing:.04em;color:var(--muted-bone);line-height:1.55}

.ytembed{margin:1rem 0 0}
.ytembed .cover{position:relative;aspect-ratio:16/9;background:var(--noir);
  border:1px solid var(--line-bone);display:grid;place-items:center;cursor:pointer}
.ytembed .cover:hover{border-color:var(--accent-ink)}
.ytembed .play{width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.ytembed .play::after{content:"";border-left:20px solid var(--ink);
  border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.ytembed .cap{position:absolute;left:.9rem;right:.9rem;bottom:.9rem;text-align:center;
  font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-noir)}
.ytembed iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* ---- dossier index ---- */
.dindex{padding-block:clamp(2.5rem,7vw,4.5rem)}
.dindex h1{font-size:clamp(2.6rem,9vw,4.5rem);margin:1rem 0 .6rem}
.dindex .lead{color:var(--muted-bone);max-width:46ch;margin:0 0 3rem}
.entry{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--line-bone);padding:1.9rem 0}
.entry:last-child{border-bottom:1px solid var(--line-bone)}
.entry .edate{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-bone);margin-bottom:.5rem}
.entry .etitle{font-family:"Oswald";font-weight:600;text-transform:uppercase;font-size:1.35rem;color:var(--ink);line-height:1.15}
.entry .edek{color:var(--muted-bone);margin-top:.45rem;font-size:.98rem}
.entry:hover .etitle{color:var(--accent-ink)}

.backlink{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-bone);text-decoration:none;display:inline-block;margin-top:3rem}
.backlink:hover{color:var(--accent-ink)}

footer{background:var(--noir);border-top:1px solid var(--line-noir);color:var(--muted-noir);font-size:.82rem}
footer .wrap{max-width:72rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding-block:2.4rem}
footer .fnav{display:flex;flex-wrap:wrap;gap:1.4rem}
footer a{text-decoration:none;color:var(--muted-noir)}
footer a:hover{color:var(--accent)}

a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.reticle.spin{animation:none}}