:root{
  --paper:   oklch(94.8% 0.016 88);
  --paper-2: oklch(91.5% 0.020 86);
  --paper-3: oklch(87%   0.024 84);
  --ink:     oklch(19%   0.020 62);
  --ink-2:   oklch(40%   0.019 64);
  --ink-3:   oklch(60%   0.018 72);
  --rule:    oklch(80%   0.022 82);
  --mag:     oklch(58%   0.235 5);
  --mag-dp:  oklch(44%   0.190 8);
  --cyan:    oklch(60%   0.132 226);
  --cyan-dp: oklch(45%   0.110 232);

  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px;
  --sp5:24px; --sp6:32px; --sp7:48px; --sp8:72px; --sp9:112px;

  --expo: cubic-bezier(.16,1,.3,1);
  --quart: cubic-bezier(.25,1,.5,1);

  --sans:"Noto Sans SC",system-ui,sans-serif;
  --serif:"Noto Serif SC",Songti SC,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.75;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(oklch(19% 0.02 62/.055) .5px,transparent .5px);
  background-size:3px 3px;
}
.wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}

/* ── masthead ── */
.mast{padding:clamp(28px,5vw,64px) 0 var(--sp6)}
.slug{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp3) var(--sp5);
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mag-dp);
  padding-bottom:var(--sp3);border-bottom:3px solid var(--ink);
}
.slug span:last-child{color:var(--ink-3)}
h1{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(2.9rem,9.2vw,7.4rem);
  line-height:.9;letter-spacing:-.02em;
  margin:var(--sp5) 0 0;margin-left:-.03em;
  text-wrap:balance;
}
h1 em{font-style:normal;color:var(--mag);display:inline-block}
.deck{
  margin-top:var(--sp5);max-width:58ch;
  font-size:clamp(1.0625rem,1.6vw,1.375rem);
  font-weight:600;line-height:1.6;color:var(--ink-2);text-wrap:pretty;
}
.byline{
  margin-top:var(--sp6);padding-top:var(--sp3);
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp6);
  font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.byline b{color:var(--ink);font-weight:600}

/* ── timeline ── */
.tl{
  margin:var(--sp8) 0;padding:var(--sp5) 0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.tl h2{
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:var(--sp4);
}
.tl ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp5) var(--sp4)}
.tl li{border-top:2px solid var(--paper-3);padding-top:var(--sp3)}
.tl li.key{border-top-color:var(--mag)}
.tl time{
  display:block;font-family:var(--mono);font-size:.8125rem;font-weight:600;
  letter-spacing:.04em;color:var(--mag-dp);margin-bottom:2px;
  font-variant-numeric:tabular-nums;
}
.tl li.key time{color:var(--mag)}
.tl p{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}

/* ── panels ── */
.panels{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp9) var(--sp6);padding-bottom:var(--sp8)}
article{
  grid-column:span 12;
  display:grid;grid-template-columns:subgrid;
  align-items:start;gap:var(--sp6);
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--expo),transform 1s var(--expo);
}
article.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){article{opacity:1;transform:none;transition:none}}

.shot{position:relative;grid-column:span 7;align-self:start}
.copy{grid-column:span 5;padding-top:var(--sp2)}
article:nth-child(even) .shot{grid-column:6/13;grid-row:1}
article:nth-child(even) .copy{grid-column:1/6;grid-row:1}
article.feat .shot{grid-column:span 12}
article.feat .copy{grid-column:3/11;padding-top:var(--sp5)}

.shot button{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  position:relative;line-height:0;
}
.shot img{
  width:100%;height:auto;display:block;
  border:1px solid var(--ink);
  background:var(--paper-2);
  transition:transform .5s var(--expo),box-shadow .5s var(--expo);
}
.shot button::before{
  content:"";position:absolute;inset:0;
  box-shadow:9px 10px 0 var(--mag);
  z-index:-1;transition:box-shadow .5s var(--expo);
}
.shot button:hover img{transform:translate(-3px,-4px)}
.shot button:hover::before{box-shadow:14px 16px 0 var(--mag)}
.shot button:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}

.num{
  position:absolute;top:-.42em;left:-.06em;z-index:2;
  font-family:var(--sans);font-weight:900;font-size:clamp(4.2rem,9vw,8.2rem);
  line-height:1;color:var(--paper);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  font-variant-numeric:tabular-nums;pointer-events:none;
  text-shadow:5px 5px 0 var(--cyan);
}

.kicker{
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cyan-dp);
  margin-bottom:var(--sp3);
}
.copy h3{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.16;
  letter-spacing:-.01em;margin-bottom:var(--sp4);text-wrap:balance;
}
.copy p{max-width:44ch;color:var(--ink-2);text-wrap:pretty}
article.feat .copy p{max-width:66ch;column-count:2;column-gap:var(--sp7)}

/* ── lightbox ── */
dialog{
  border:0;padding:0;max-width:min(96vw,1300px);max-height:94vh;
  background:var(--paper);width:auto;
}
dialog::backdrop{background:oklch(15% 0.02 60/.92)}
dialog img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto}
.lb-bar{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp4);
  padding:var(--sp3) var(--sp4);border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.75rem;color:var(--ink-2);
}
.lb-bar button{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  background:none;border:1px solid var(--ink-3);color:var(--ink);
  padding:6px 12px;border-radius:2px;cursor:pointer;
  transition:background .13s var(--quart),border-color .13s var(--quart);
}
.lb-bar button:hover{background:var(--paper-2);border-color:var(--ink)}
.lb-bar button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ── footer ── */
footer{border-top:3px solid var(--ink);padding:var(--sp6) 0 var(--sp8);margin-top:var(--sp7)}
.note{
  background:var(--paper-2);border:1px solid var(--ink);
  padding:var(--sp5);max-width:74ch;margin-bottom:var(--sp6);
}
.note strong{display:block;font-family:var(--sans);font-weight:900;font-size:1.0625rem;margin-bottom:var(--sp2)}
.note p{font-size:.9375rem;color:var(--ink-2)}
.fmeta{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp3) var(--sp5);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--ink-3);
}

@media (max-width:880px){
  .panels{gap:var(--sp8) var(--sp5)}
  .shot,.copy,article:nth-child(even) .shot,article:nth-child(even) .copy,
  article.feat .shot,article.feat .copy{grid-column:span 12;grid-row:auto}
  .copy{padding-top:0}
  article.feat .copy p{column-count:1}
  .num{font-size:clamp(3.6rem,15vw,5.6rem);-webkit-text-stroke-width:2.5px;text-shadow:4px 4px 0 var(--cyan)}
  .shot button::before{box-shadow:6px 7px 0 var(--mag)}
}

.chap{
  grid-column:span 12;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp3) var(--sp5);
  padding-bottom:var(--sp3);
  border-bottom:3px solid var(--ink);
  margin-top:calc(var(--sp5) * -1);
}
.chap span{
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mag);
}
.chap p{font-family:var(--sans);font-weight:700;font-size:clamp(1.125rem,2vw,1.5rem);color:var(--ink)}