:root{
  --paper:#F2ECDF;
  --paper-2:#EAE2D1;
  --ink:#1A1410;
  --ink-2:#4A3F35;
  --rule:#C9BFA9;
  --accent:#F5C518;
  --maxw:1400px;
  --reading:720px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans","Noto Sans SC",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.serif{font-family:"Instrument Serif","Noto Serif SC",Georgia,serif;font-weight:400;letter-spacing:-0.01em}
.label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}

/* ─── Nav ─── */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in oklab, var(--rule) 60%, transparent);
}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.04em;font-size:16px}
.nav .links{display:flex;gap:28px;font-size:16px;color:var(--ink-2)}
.nav .links a{position:relative;padding:6px 0}
.nav .links a:hover{color:var(--ink)}
.nav .links a.active{color:var(--ink)}
.nav .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent)}
.nav .right{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--ink-2)}
.lang{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.lang button{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:5px 10px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em}
.lang button.on{background:var(--ink);color:var(--paper)}
.cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;
  background:var(--ink);color:var(--paper);
  font-size:12px;letter-spacing:.06em;font-weight:500;
  cursor:pointer;transition:transform .15s ease;
}
.cta:hover{transform:translateY(-1px)}
.cta .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ─── Reading progress ─── */
.progress{position:fixed;left:0;top:0;height:2px;width:0%;background:var(--accent);z-index:60;transition:width .08s linear}

/* ─── Crumb ─── */
.crumb{
  max-width:var(--maxw);margin:0 auto;
  padding:28px 32px 0;
  display:flex;align-items:center;gap:14px;
  color:var(--ink-2);font-size:12px;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}
.crumb .here{color:var(--ink)}

/* ─── Story Hero ─── */
.story-hero{
  max-width:var(--maxw);margin:0 auto;
  padding:24px 32px 56px;
  display:grid;grid-template-columns:1fr;gap:36px;
}
.story-meta{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:18px;border-bottom:1px solid var(--rule);
  color:var(--ink-2);
}
.story-meta .left{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.story-meta .pill{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--rule);border-radius:999px;padding:5px 12px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.story-meta .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.story-title{
  font-family:"Instrument Serif","Noto Serif SC",serif;font-weight:400;
  font-size:clamp(40px,6.5vw,96px);
  line-height:1.02;letter-spacing:-0.02em;
  margin:0;max-width:20ch;text-wrap:pretty;
}
.story-title em{font-style:italic;color:var(--ink-2)}
.story-title .hl{
  background:linear-gradient(transparent 64%, color-mix(in oklab, var(--accent) 70%, transparent) 64%, color-mix(in oklab, var(--accent) 70%, transparent) 92%, transparent 92%);
  padding:0 .05em;
}
.story-deck{
  max-width:60ch;color:var(--ink-2);
  font-size:19px;line-height:1.6;
  font-family:"Noto Serif SC",serif;font-weight:400;
}
.byline{
  display:flex;justify-content:space-between;align-items:end;gap:24px;
  padding-top:24px;border-top:1px solid var(--rule);
}
.byline .author{display:flex;align-items:center;gap:14px}
.byline .avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:"Instrument Serif",serif;font-style:italic;font-size:22px;
  border:1px solid var(--rule);
}
.byline .who{display:flex;flex-direction:column}
.byline .who .name{font-size:14px;font-weight:500;color:var(--ink)}
.byline .who .role{font-size:12px;color:var(--ink-2);font-family:"IBM Plex Mono",monospace;letter-spacing:.08em}

/* ─── Cover ─── */
.cover-wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.cover{aspect-ratio:16/9;background:var(--paper-2);overflow:hidden;position:relative}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .credit{
  position:absolute;left:14px;bottom:12px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;padding:4px 6px;
}

/* ─── Article body ─── */
.article{
  max-width:var(--maxw);margin:0 auto;
  padding:80px 32px 0;
  display:grid;grid-template-columns:220px minmax(0,1fr) 220px;
  gap:48px;
}
.toc{position:sticky;top:96px;align-self:start;font-size:13px;line-height:1.5}
.toc .label{margin-bottom:14px;display:block}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--rule);padding-left:14px;counter-reset:tocn}
.toc ol li{counter-increment:tocn;position:relative}
.toc ol li::before{
  content:counter(tocn,decimal-leading-zero);
  position:absolute;left:-46px;top:1px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--ink-2);
}
.toc a{color:var(--ink-2)}
.toc a:hover,.toc a.on{color:var(--ink)}
.toc a.on{position:relative}
.toc a.on::before{content:"";position:absolute;left:-15px;top:6px;width:1px;height:1em;background:var(--accent)}

.body{max-width:var(--reading);justify-self:center;width:100%}
.body h2{
  font-family:"Instrument Serif","Noto Serif SC",serif;font-weight:400;
  font-size:38px;line-height:1.1;letter-spacing:-0.01em;
  margin:64px 0 18px;text-wrap:pretty;
}
.body h2 .num{
  color:var(--accent);font-family:"IBM Plex Mono",monospace;
  font-size:13px;letter-spacing:.18em;vertical-align:0.5em;margin-right:12px;
}
.body h3{font-size:18px;margin:36px 0 8px;font-family:"IBM Plex Sans","Noto Sans SC",sans-serif;font-weight:600;letter-spacing:.01em}
.body p{margin:0 0 18px;color:var(--ink);text-wrap:pretty}
.body p:first-of-type::first-letter{
  font-family:"Instrument Serif",serif;
  font-size:76px;line-height:.9;
  float:left;padding:6px 10px 0 0;
  color:var(--ink);font-style:italic;
}
.body a.inline{
  color:var(--ink);
  background-image:linear-gradient(transparent 60%, color-mix(in oklab, var(--accent) 70%, transparent) 60%);
  padding:0 .04em;
}
.body a.inline:hover{background-image:linear-gradient(transparent 0%, color-mix(in oklab, var(--accent) 70%, transparent) 0%)}
.body blockquote{
  margin:36px 0;padding:0;
  border-left:2px solid var(--accent);padding-left:24px;
  font-family:"Noto Serif SC","Instrument Serif",serif;
  font-size:24px;line-height:1.45;
  color:var(--ink);font-style:italic;
}
.body blockquote .who{
  display:block;margin-top:14px;
  font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;color:var(--ink-2);
}
.body figure{margin:40px 0}
.body figure .ph{background:var(--paper-2);overflow:hidden}
.body figure .ph img{width:100%;height:100%;object-fit:cover;display:block}
.body figure figcaption{margin-top:10px;font-size:13px;color:var(--ink-2);font-family:"IBM Plex Mono",monospace;letter-spacing:.06em}
.body figure.wide{margin-left:-120px;margin-right:-120px}
.body figure.wide .ph{aspect-ratio:21/9}
.body figure:not(.wide) .ph{aspect-ratio:4/3}
.body .pull{
  font-family:"Instrument Serif","Noto Serif SC",serif;font-weight:400;
  font-size:40px;line-height:1.18;letter-spacing:-0.01em;
  margin:48px 0;color:var(--ink);text-wrap:pretty;
}
.body .pull::before{content:"";display:inline-block;width:40px;border-top:1px solid var(--ink);vertical-align:middle;margin-right:14px}
.body ul{padding-left:1.2em;margin:0 0 18px}
.body ul li{margin-bottom:6px}
.body .spec{
  margin:36px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:20px 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.body .spec .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.body .spec .v{margin-top:6px;font-family:"Instrument Serif",serif;font-size:24px;line-height:1.15}
.body .divider{margin:48px auto;text-align:center;color:var(--accent);font-family:"Instrument Serif",serif;font-size:24px;letter-spacing:.6em}
.body .ranking{margin:24px 0;border-top:1px solid var(--rule)}
.body .ranking .row{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.body .ranking .row .rank{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--ink-2);min-width:24px}
.body .ranking .row .machine{font-weight:500;min-width:100px}
.body .ranking .row .note{font-size:15px;color:var(--ink-2)}

.aside{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:24px;color:var(--ink-2)}
.aside .blk{border-top:1px solid var(--rule);padding-top:14px;font-size:13px;line-height:1.55}
.aside .blk .label{margin-bottom:8px;display:block}
.aside .share{display:flex;flex-direction:column;gap:8px}
.aside .share a{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border:1px solid var(--rule);border-radius:8px;
  font-size:12px;color:var(--ink);font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
  transition:background .15s ease,border-color .15s ease;
}
.aside .share a:hover{background:var(--paper-2);border-color:var(--ink)}
.aside .share a span:last-child{color:var(--ink-2)}

/* ─── Author card ─── */
.author-card{
  max-width:var(--maxw);margin:80px auto 0;padding:40px 32px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;
}
.author-card .who{display:flex;align-items:center;gap:18px}
.author-card .who .avatar{
  width:64px;height:64px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:"Instrument Serif",serif;font-style:italic;font-size:30px;
}
.author-card .name{font-family:"Instrument Serif",serif;font-size:30px;line-height:1.1}
.author-card .role{font-size:12px;color:var(--ink-2);font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.author-card p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6;max-width:52ch}

/* ─── Sign-off ─── */
.signoff{max-width:var(--reading);margin:80px auto 0;padding:0 32px;text-align:center}
.signoff .mark{color:var(--accent);font-family:"Instrument Serif",serif;font-size:42px;letter-spacing:.4em}
.signoff p{color:var(--ink-2);margin:18px auto 0;max-width:50ch;font-size:14px}

/* ─── Related ─── */
.related{max-width:var(--maxw);margin:80px auto 0;padding:0 32px}
.related .hd{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;
  padding-bottom:24px;border-bottom:1px solid var(--rule);
}
.related h2{margin:0;font-family:"Instrument Serif","Noto Serif SC",serif;font-weight:400;font-size:clamp(40px,6vw,80px);line-height:.95;letter-spacing:-0.02em}
.related h2 em{font-style:italic;color:var(--ink-2)}
.related .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.post{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--ink);padding-top:18px}
.post .ph{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.post .ph img{width:100%;height:100%;object-fit:cover;display:block}
.post h3{margin:0;font-family:"Instrument Serif","Noto Serif SC",serif;font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-0.01em}
.post .meta{display:flex;justify-content:space-between;color:var(--ink-2)}
.post:hover h3{color:color-mix(in oklab, var(--ink) 70%, var(--accent))}

/* ─── Footer ─── */
footer{background:var(--paper);border-top:1px solid var(--rule);margin-top:120px;padding:80px 0 28px}
.ftr-mark{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.ftr-word{font-family:"Instrument Serif",serif;font-size:clamp(120px,22vw,320px);line-height:.85;letter-spacing:-0.04em;margin:0;display:flex;align-items:flex-start}
.ftr-word .dot{color:var(--accent)}
.ftr-bottom{
  max-width:var(--maxw);margin:48px auto 0;padding:0 32px;
  display:flex;justify-content:space-between;align-items:center;
  color:var(--ink-2);font-size:12px;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.06em;
}

@media(max-width:1080px){
  .article{grid-template-columns:1fr;gap:24px}
  .toc,.aside{position:static}
  .body figure.wide{margin-left:0;margin-right:0}
  .body .spec{grid-template-columns:repeat(2,1fr)}
  .author-card{grid-template-columns:1fr;gap:18px}
}
@media(max-width:760px){
  .nav .links{display:none}
  .related .grid{grid-template-columns:1fr}
  .byline{flex-direction:column;align-items:flex-start;gap:14px}
  .nav{padding:14px 20px}
  .story-hero,.crumb,.cover-wrap,.related,.ftr-mark,.ftr-bottom{padding-left:20px;padding-right:20px}
  .article{padding:40px 20px 0}
}