:root{
  --black:#0A0B0D;--black-2:#131519;--paper:#FFFFFF;--yellow:#FFCE1B;
  --on-black:#F4F4F2;--dim:#A8AEBA;--mut:#737B8A;
  --ink:#0A0B0D;--ink-dim:#3C424B;--ink-mut:#6B7280;
  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-text:"Newsreader",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(1.15rem,4vw,3.5rem);
}
*{box-sizing:border-box}
body{margin:0;background:var(--black);color:var(--on-black);
  font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ------------------------------------------------------------------ bar -- */
.bar{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between;
  padding:1rem var(--pad);border-bottom:2px solid var(--yellow);background:var(--black)}
.bar-home{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none}
.bar-nav{display:flex;flex-wrap:wrap;gap:1.3rem;align-items:center}
.bar-nav a{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);text-decoration:none}
.bar-nav a:hover{color:var(--yellow)}
.bar-tel{color:var(--yellow) !important}

/* --------------------------------------------------------- post header -- */
/* The masthead is a black poster panel; the body below it is a page. */
.masthead{padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4rem);border-bottom:1px solid rgba(244,244,242,.14)}
.masthead .kicker{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-bottom:1.4rem}
.masthead h1{font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.1rem,6.2vw,4.4rem);line-height:.96;letter-spacing:-.04em;
  margin:0;max-width:19ch;text-wrap:balance}

/* ----------------------------------------------------------- post body -- */
/* Asymmetric: a mono rail on the left holds the date, text sits right of it. */
.article{background:var(--paper);color:var(--ink)}
.article-inner{max-width:1240px;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) var(--pad) clamp(3rem,8vw,5rem);
  display:grid;grid-template-columns:9rem minmax(0,42rem);gap:clamp(1.5rem,5vw,4rem);justify-content:start}
.rail{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mut);line-height:1.9;position:sticky;top:1.5rem;align-self:start}
.rail b{display:block;color:var(--ink);font-weight:500}
.body p{font-size:1.14rem;line-height:1.78;color:var(--ink-dim);font-weight:300;margin:0 0 1.4rem}
.body p:first-of-type{font-size:1.3rem;line-height:1.6;color:var(--ink)}
.body p:first-of-type::first-letter{font-family:var(--f-display);font-weight:800;font-size:3.1rem;
  line-height:.8;float:left;margin:.28rem .6rem 0 0;color:var(--ink)}
.body img{display:block;width:100%;height:auto;margin:2.2rem 0}
/* Section headings: yellow rule above, so they read as breaks in the argument. */
.body h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,2.8vw,1.75rem);
  letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin:2.6rem 0 1rem;
  padding-top:1.1rem;border-top:3px solid var(--yellow);max-width:26ch;text-wrap:balance}
.body h2:first-child{margin-top:0}
.body p+h2{margin-top:2.8rem}

/* The hero runs full-bleed between the black masthead and the white page. */
.hero{margin:0;background:var(--black-2);line-height:0}
.hero img{display:block;width:100%;max-height:min(62vh,560px);object-fit:cover;object-position:50% 42%}
@media(max-width:820px){
  .article-inner{grid-template-columns:1fr;gap:1.2rem}
  .rail{position:static;display:flex;gap:1.2rem;flex-wrap:wrap}
  .rail b{display:inline}
}

/* --------------------------------------------------------- index, by year -- */
.year{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:clamp(1rem,4vw,3rem);
  padding-block:clamp(1.8rem,4vw,3rem);border-top:1px solid rgba(244,244,242,.16)}
.year-no{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,4vw,2.9rem);
  letter-spacing:-.04em;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.year-count{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);display:block;margin-top:.5rem}
.item{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1.2rem;align-items:baseline;
  padding-block:.75rem;text-decoration:none;border-bottom:1px solid rgba(244,244,242,.08)}
.item:last-child{border-bottom:0}
.item .when{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.item .ttl{font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,1.9vw,1.18rem);letter-spacing:-.02em}
.item:hover .ttl{color:var(--yellow)}
@media(max-width:700px){
  .year{grid-template-columns:1fr;gap:.8rem}
  .item{grid-template-columns:3.6rem minmax(0,1fr);gap:.9rem}
}

/* ------------------------------------------------------------- endcaps -- */
.endbar{background:var(--yellow);color:var(--black);padding:1.5rem var(--pad);text-align:center}
.endbar a{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--black);text-decoration:none;font-weight:500}
.endbar a:hover{text-decoration:underline}
.foot{display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between;align-items:center;
  padding:2rem var(--pad) 2.8rem}
.foot a{text-decoration:none}