:root{
  --ink:#0B0B0C; --paper:#FAFAF7; --chalk:#F0F0EC; --slate:#9A9A94;
  --carbon:#101012; --carbon-raised:#1A1A1E; --flamme:#FF3D00; --titanium:#8E9196;
  --rule:#DCDCD6;
}
*{margin:0;padding:0;box-sizing:border-box}
/* clip, not hidden: full-bleed bands can overhang without creating a
   scroll container (which would break any sticky positioning). */
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--chalk);color:var(--ink);font-family:'Inter Tight',sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.kicker.flamme{color:var(--flamme)}
a{color:inherit}

/* Header, matched to the landing page */
header{padding:28px 0;border-bottom:1px solid var(--ink);background:var(--chalk)}
header .wrap{max-width:760px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
header .lockup{height:22px;width:auto;display:block;flex:none}
.headright{display:flex;gap:24px;align-items:baseline}
.headright a{text-decoration:none}
.riderlink{color:var(--slate);white-space:nowrap} .riderlink:hover{color:var(--ink)}
.joinlink{color:var(--flamme);white-space:nowrap} .joinlink:hover{color:var(--ink)}
/* Below 640px the lockup plus three header items overflow the viewport, and
   html{overflow-x:clip} above means that overflow is clipped, not scrollable.
   So the header sheds: the index sheds its EST. stamp, articles shed the
   Journal link (they carry "All journal entries" at the foot), and the CTA
   shortens. The lockup never shrinks: it is the brand. */
@media (max-width:640px){
  header .wrap{gap:14px}
  .headright{gap:18px}
  .headright .est{display:none}
  .headright .journallink{display:none}
  .joinlink .joinlong{display:none}
}
@media (min-width:641px){ .joinlink .joinshort{display:none} }
/* Under ~400px even the shortened row loses to the lockup, so the header
   wraps into two tidy rows rather than shedding the login link. */
@media (max-width:400px){
  header .wrap{flex-wrap:wrap}
  .headright{width:100%;justify-content:flex-start}
}

/* Index masthead */
.masthead{padding:72px 0 40px;border-bottom:1px solid var(--rule)}
.masthead h1{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;letter-spacing:-.02em;line-height:.98;font-size:clamp(48px,9vw,76px);margin:14px 0 0}
.masthead p{max-width:560px;margin-top:18px;color:#3C3C3A}

/* Index list */
.entries{padding:8px 0 40px}
.entry{display:block;text-decoration:none;padding:30px 0;border-bottom:1px solid var(--rule)}
.entry:hover h2{color:var(--flamme)}
.entry .meta{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.entry h2{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;letter-spacing:-.015em;line-height:1.06;font-size:clamp(24px,4vw,31px);margin:10px 0 8px;transition:color .15s ease}
.entry p{color:#3C3C3A;max-width:600px}
.entry .read{margin-top:10px}

/* Article */
article{padding:64px 0 24px}
.artmeta{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:16px}
article h1{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;letter-spacing:-.02em;line-height:1.02;font-size:clamp(36px,6.4vw,56px);text-wrap:balance}
.standfirst{font-size:20px;line-height:1.55;color:#3C3C3A;margin-top:22px;max-width:620px}
.byline{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.body{padding-bottom:20px}
.body p{margin-top:20px}
.body h2{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;letter-spacing:-.015em;line-height:1.1;font-size:clamp(24px,3.6vw,30px);margin:44px 0 0;text-wrap:balance}
.body h3{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:650;font-size:20px;margin:32px 0 0}
.body strong{font-weight:600}
.body ul{margin:18px 0 0;padding-left:20px}
.body li{margin-top:9px}
.body a{color:var(--flamme);text-underline-offset:3px}

/* Figures that carry numbers */
.stat{margin:34px 0;padding:22px 24px;background:var(--carbon);color:#F0F0EC}
.stat .n{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;font-size:clamp(34px,6vw,46px);line-height:1;color:#fff}
.stat .lab{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--titanium);margin-top:10px}
/* Reset the standalone .note box styling: inside carbon it is plain text. */
.stat .note{margin:12px 0 0;padding:0;border:0;background:none;font-size:15px;line-height:1.5;color:#C9C9C4;max-width:520px}

.pull{margin:36px 0;padding-left:20px;border-left:3px solid var(--flamme)}
.pull p{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:650;font-size:clamp(20px,3.2vw,25px);line-height:1.22;letter-spacing:-.01em;margin:0}

.note{margin:32px 0;padding:16px 18px;border:1px solid var(--rule);background:var(--paper);font-size:15px;color:#4A4A47}

table{width:100%;border-collapse:collapse;margin:30px 0;font-size:15px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule)}
th{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
td.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.scroller{overflow-x:auto}

/* Close + CTA */
.endnote{margin-top:48px;padding-top:26px;border-top:2px solid var(--ink)}
/* Must out-specify `.body a`, or the label renders flamme on flamme. */
.cta,.body a.cta{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:17px 30px;background:var(--flamme);color:#fff;text-decoration:none;border-radius:2px;margin-top:18px}
.cta:hover,.body a.cta:hover{background:#D93400;color:#fff}
.backlink{display:inline-block;margin:40px 0 0;text-decoration:none}
.backlink:hover{color:var(--flamme)}

footer{margin-top:64px;padding:28px 0;border-top:1px solid var(--ink)}
footer .wrap{max-width:760px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--flamme)}

/* Photography */
figure{margin:38px 0}
figure img{display:block;width:100%;height:auto;background:var(--rule)}
figcaption{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:9px;line-height:1.55}
.lead{margin:0 0 6px}
.lead img{aspect-ratio:3/2;object-fit:cover}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:38px 0}
.duo figure{margin:0}
.duo img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:620px){ .duo{grid-template-columns:1fr} }
/* Full-bleed band for the wide panoramics */
.band{margin:44px 0;width:100vw;position:relative;left:50%;transform:translateX(-50%)}
.band img{width:100%;height:auto;display:block;max-height:420px;object-fit:cover}
.band figcaption{max-width:720px;margin:9px auto 0;padding:0 24px}
/* Index thumbnails */
.entry{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:start}
.entry .thumb{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--rule)}
.entry .txt{min-width:0}
@media (max-width:620px){ .entry{grid-template-columns:1fr} .entry .thumb{aspect-ratio:16/9} }

/* Video: breaks out past the 720px reading column to a cinematic 960,
   without the 100vw scrollbar trap (min() against the padded viewport). */
.vid{margin:44px 0;width:min(960px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}
/* Absolute inside a ratio box: the iframe's intrinsic height would
   otherwise win over aspect-ratio and squash the player. */
.vid .frame{position:relative;aspect-ratio:16/9;background:var(--carbon)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid figcaption{max-width:720px;margin-left:auto;margin-right:auto;padding:0 24px}
@media (max-width:760px){ .vid figcaption{padding:0} }