/* Self-hosted subset - generated by tools/fetch-fonts.py. Do not edit by hand. */

@font-face{
  font-family:"Archivo Black";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/archivo-black-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo Black";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/archivo-black-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  font-style:italic;
  font-weight:300;
  font-display:swap;
  src:url("fonts/newsreader-300i-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader";
  font-style:italic;
  font-weight:300;
  font-display:swap;
  src:url("fonts/newsreader-300i-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url("fonts/newsreader-300-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url("fonts/newsreader-300-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback metric overrides - generated by tools/fallback-metrics.py.
   Sizes the pre-swap fallback to match the webfont so text does not reflow
   when the real face arrives. Do not edit by hand. */

@font-face{
  font-family:"Archivo Black Fallback";
  src:local("Arial Black");
  size-adjust:99.99%;
  ascent-override:87.81%;
  descent-override:21.00%;
  line-gap-override:0.00%;
}
@font-face{
  font-family:"Newsreader Fallback";
  src:local("Georgia");
  size-adjust:96.07%;
  ascent-override:76.51%;
  descent-override:27.58%;
  line-gap-override:0.00%;
}
@font-face{
  font-family:"IBM Plex Mono Fallback";
  src:local("Courier New");
  size-adjust:99.98%;
  ascent-override:102.52%;
  descent-override:27.50%;
  line-gap-override:0.00%;
}

/* ============================================================================
   237 Willits Alley — design system
   Source file. Compiled with the generated @font-face blocks into src/styles.css
   by tools/build-css.py. Edit this file, not src/styles.css.
   ============================================================================ */

:root{
  --ink:#0C0D12;        /* page background */
  --ink-2:#14161E;      /* alternating section tint */
  --ink-3:#1D202B;
  --paper:#E6E2D8;      /* body text, fire-code tally blocks */
  --paper-dim:#A8A499;  /* secondary text */
  --amber:#E8A020;      /* eyebrows, timeline dots, building-code tally */
  --red:#C7382B;        /* GRAPHICS ONLY — tally blocks, rules, dots */
  --slate:#7F8494;      /* metadata, timestamps */

  /* Text-safe red. --red is 3.46:1 on --ink-2, which fails WCAG AA for text, but
     it is the real charge-breakdown color in the tally and must not move. So the
     graphic token stays put and text that needs to read as red uses this instead:
     4.94:1 on --ink-2, 5.31:1 on --ink. Shares the 232 red channel with --amber so
     the two still read as a pair. */
  --red-text:#E85341;

  --rule:rgba(230,226,216,.14);
  --display:"Archivo Black","Archivo Black Fallback",system-ui,sans-serif;
  --body:"Newsreader","Newsreader Fallback",Georgia,serif;
  --mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:19px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:760px;margin:0 auto;padding:0 24px;}

/* ---------- accessibility helpers ---------- */
.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:99;
  background:var(--amber);
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:12px 18px;
  text-decoration:none;
}
.skip:focus{left:0;}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- eyebrow / utility type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 18px;
}
.eyebrow.quiet{color:var(--slate);}

/* ---------- hero ---------- */
.hero{
  min-height:92vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:120px 0 80px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  left:50%; top:-10%;
  width:120vw; height:60vh;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(232,160,32,.13), transparent 62%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;}
.hero h1{
  font-family:var(--display);
  font-size:clamp(42px, 8.4vw, 92px);
  line-height:.95;
  letter-spacing:-.02em;
  margin:0 0 28px;
  text-transform:uppercase;
}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero .standfirst{
  font-size:clamp(19px,2.4vw,23px);
  color:var(--paper-dim);
  max-width:52ch;
  margin:0 0 40px;
}
.stamp{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate);
  border-top:1px solid var(--rule);
  padding-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
}

/* ---------- generic section ---------- */
.band{padding:88px 0;border-top:1px solid var(--rule);}
.band.tint{background:var(--ink-2);}
h2{
  font-family:var(--display);
  font-size:clamp(28px,4.4vw,42px);
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 26px;
}
h3{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--amber);
  margin:44px 0 14px;
}
p{margin:0 0 22px;}
p.lead{font-size:22px;color:var(--paper);}
.dim{color:var(--paper-dim);}

/* Provenance notes that sit directly above a block. These were inline style
   attributes in the prototype; CSP style-src 'self' blocks those outright
   (hashes do not cover style attributes without 'unsafe-hashes'), so they live
   in the stylesheet instead. */
.note-lead{margin-bottom:36px;}
.note-tight{margin-bottom:8px;}

blockquote{
  margin:34px 0;
  padding-left:22px;
  border-left:2px solid var(--red);
  font-size:24px;
  line-height:1.4;
  font-style:italic;
  color:var(--paper);
}
blockquote cite{
  display:block;
  margin-top:12px;
  font-family:var(--mono);
  font-size:11px;
  font-style:normal;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate);
}

/* ---------- signature: the incident log ---------- */
.log{list-style:none;margin:0;padding:0;}
.log li{
  position:relative;
  padding:0 0 34px 30px;
  border-left:1px solid var(--rule);
}
.log li:last-child{border-left-color:transparent;padding-bottom:0;}
.log li::before{
  content:"";
  position:absolute;
  left:-4px; top:9px;
  width:7px; height:7px;
  background:var(--amber);
  border-radius:50%;
}
.log li.hot::before{background:var(--red);}
.log .t{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:7px;
}
.log li.hot .t{color:var(--red-text);}
.log .t small{color:var(--slate);font-weight:400;letter-spacing:.1em;margin-left:10px;}
.log p{margin:0 0 14px;font-size:18px;}
.log p:last-child{margin-bottom:0;}

/* ---------- signature: the count tally ---------- */
.tally{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:8px 0 34px;
}
.tally i{
  width:26px; height:52px;
  display:block;
  border-radius:2px;
}
.tally i.liquor{background:var(--red);}
.tally i.building{background:var(--amber);}
.tally i.fire{background:var(--paper);}
.key{
  list-style:none;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--paper-dim);
  margin-bottom:30px;
}
.key li{display:flex;align-items:center;gap:9px;}
.key b{
  width:11px;height:11px;border-radius:2px;display:inline-block;
}
.key b.liquor{background:var(--red);}
.key b.building{background:var(--amber);}
.key b.fire{background:var(--paper);}
.bignum{
  font-family:var(--display);
  font-size:clamp(64px,13vw,132px);
  line-height:.85;
  letter-spacing:-.03em;
  margin:0 0 6px;
}

/* ---------- media ---------- */
/* Placeholders stay in the stylesheet permanently. If a slot has no file yet the
   page still reads as finished rather than showing a hole. */
.slot{
  border:1px dashed rgba(230,226,216,.28);
  border-radius:3px;
  padding:34px 22px;
  text-align:center;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.06em;
  color:var(--slate);
  margin:34px 0;
  background:rgba(230,226,216,.02);
}
.slot strong{display:block;color:var(--amber);letter-spacing:.16em;margin-bottom:8px;text-transform:uppercase;}

figure{margin:34px 0;}
figure img,
figure video{
  display:block;
  width:100%;
  height:auto;
  border-radius:3px;
  background:var(--ink-3);
}
figcaption{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.7;
  letter-spacing:.08em;
  color:var(--slate);
  margin-top:12px;
}

/* Click-to-play facade: a poster + button that only loads the embed on demand,
   so an unplayed video costs nothing on first paint. */
.facade{
  position:relative;
  margin:34px 0;
  border-radius:3px;
  overflow:hidden;
  background:var(--ink-3);
  aspect-ratio:16/9;
}
.facade img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.facade iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}
.facade button{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:rgba(12,13,18,.42);
  border:0;
  cursor:pointer;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper);
}
.facade button:hover{background:rgba(12,13,18,.24);}
.facade button::before{
  content:"";
  width:0;height:0;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--paper);
}

/* ---------- sources ---------- */
.src{list-style:none;margin:0;padding:0;}
.src li{
  padding:20px 0;
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns:110px 1fr;
  gap:6px 20px;
}
.src .date{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  padding-top:5px;
}
.src a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--amber);}
.src a:hover{color:var(--amber);}
.src .outlet{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
  margin-top:5px;
  display:block;
}

footer{
  padding:70px 0 90px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--slate);
  line-height:2;
}
footer a{color:var(--paper-dim);text-decoration:none;border-bottom:1px solid var(--rule);}
footer a:hover{color:var(--amber);border-bottom-color:var(--amber);}

/* One visible focus treatment for everything focusable, not just links. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.rise.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none;}
}
/* If JS never runs, the reveal must not leave the page invisible. */
.no-js .rise{opacity:1;transform:none;}

/* ---------- 404 ---------- */
.gone{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.gone h1{
  font-family:var(--display);
  font-size:clamp(38px,7.2vw,76px);
  line-height:1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0 0 26px;
}
.gone a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber);}

@media (max-width:640px){
  body{font-size:18px;}
  .band{padding:64px 0;}
  .src li{grid-template-columns:1fr;}
  .tally i{width:22px;height:44px;}
}