/* ============================================================
   The 404 on 369 — the world
   One stylesheet for every page. Three temperatures, one room.

   Themes are set on <html data-theme="...">:
     dark  — the room at the threshold, and Field Notes
     dusk  — Two Beings, the half-lit meeting place
     light — Reality Mechanics, and anywhere you need to read a lot

   Zero external requests. No JavaScript anywhere on this site.
   ============================================================ */

:root{
  /* the room */
  --room:#07080d;
  --room-raise:#0b0d14;
  --ink:#ece9e2;
  --ink-soft:#b9b5ac;
  --ink-faint:#7f7b72;
  --hair:rgba(236,233,226,.09);
  --hair-strong:rgba(236,233,226,.18);

  /* the three lights, and the collision */
  --seam:#c2543a;
  --warm:#e0a468;
  --cold:#9dbdd9;
  --bright:#f2e6d2;

  /* textures on dark */
  --panel:rgba(236,233,226,.03);
  --panel-raise:rgba(236,233,226,.05);

  /* two beings speak in two materials */
  --human:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"DejaVu Serif",serif;
  --machine:"Helvetica Neue",Helvetica,Arial,"Liberation Sans","DejaVu Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"DejaVu Sans Mono",Menlo,Consolas,monospace;

  --measure:38rem;      /* reading column, ~73 characters */
  --wide:58rem;         /* page */
  --edge:56px;          /* page gutter */

  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- the lit world: paper, ink, and the same three lights ---------- */
html[data-theme="light"]{
  --room:#f7f4ee;
  --room-raise:#fffdf8;
  --ink:#1b1815;
  --ink-soft:#4f483e;
  --ink-faint:#8b8272;
  --hair:rgba(27,24,21,.10);
  --hair-strong:rgba(27,24,21,.22);
  --seam:#8d3524;
  --warm:#a86a2c;
  --cold:#3f5f7a;
  --bright:#1b1815;
  --panel:rgba(27,24,21,.03);
  --panel-raise:rgba(27,24,21,.05);
}

/* ---------- the half-lit meeting place ---------- */
html[data-theme="dusk"]{
  --room:#100e12;
  --room-raise:#16131a;
  --ink:#ece6de;
  --ink-soft:#b4aca2;
  --ink-faint:#7d766c;
  --hair:rgba(236,230,222,.10);
  --hair-strong:rgba(236,230,222,.20);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--room);
  color:var(--ink);
  font-family:var(--machine);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* ---------- masthead ---------- */
.masthead{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:26px var(--edge) 0;position:relative;z-index:5;
}
.wordmark{
  font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.wordmark b{color:var(--seam);font-weight:400}
.status{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- thresholds: the band that says which door you came through ---------- */
.threshold{
  margin-top:26px;padding:12px var(--edge);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
}
.threshold a{color:var(--warm);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.threshold a:hover{color:var(--ink)}
.threshold .cat{color:var(--ink-faint)}
.door-glyph{width:11px;height:16px;border:1px solid currentColor;display:inline-block}

/* ---------- the room ---------- */
.room{
  position:relative;flex:1;display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(500px,1.22fr);
  align-items:center;gap:36px;padding:34px var(--edge) 24px;min-height:660px;
}
.room-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(42% 56% at 66% 72%, rgba(194,84,58,.10), transparent 70%),
    radial-gradient(46% 60% at 74% 62%, rgba(224,164,104,.09), transparent 72%),
    radial-gradient(34% 48% at 58% 66%, rgba(157,189,217,.05), transparent 74%);
}
html[data-theme="light"] .room-glow{
  background:
    radial-gradient(42% 56% at 66% 72%, rgba(141,53,36,.06), transparent 70%),
    radial-gradient(46% 60% at 74% 62%, rgba(168,106,44,.07), transparent 72%);
}

/* ---------- the copy column ---------- */
.copy{position:relative;z-index:4;max-width:34rem}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:24px;
}
h1,h2,h3{font-weight:700}
h1.display{
  font-size:clamp(3.2rem,7.4vw,6.2rem);line-height:.92;letter-spacing:-.045em;
  margin-bottom:16px;
}
.subtitle{
  font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:32px;
}
.manifesto{font-size:1.15rem;line-height:1.62;max-width:29rem;margin-bottom:20px}
.hedge{font-size:.94rem;line-height:1.66;color:var(--ink-faint);max-width:27rem}
.epigraph{
  margin-top:34px;padding-left:18px;border-left:1px solid var(--seam);
  font-size:.95rem;line-height:1.72;color:var(--ink-soft);max-width:29rem;
}
.epigraph span{
  display:block;margin-top:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- the scene ---------- */
.scene{position:relative;z-index:3;width:100%;max-width:680px;justify-self:end}
.scene svg{display:block;width:100%;height:auto;overflow:visible}

/* doors: category above, newest talk inside, light that means something */
.door-link{cursor:pointer}
.frame,.door-light,.plate-label,.plate-num,.latest-title{
  transition:stroke .5s var(--ease),fill .5s var(--ease),opacity .55s var(--ease);
}
.door-link:hover .frame,.door-link:focus-visible .frame{stroke:rgba(236,233,226,.4)}
.door-link:hover .door-light,.door-link:focus-visible .door-light{opacity:.68}
.door-link:hover .latest-title,.door-link:focus-visible .latest-title{opacity:1}
.door-link:hover .plate-label,.door-link:focus-visible .plate-label{fill:var(--ink)}
.door-link:focus-visible{outline:none}
.door-link:focus-visible .hit{stroke:var(--warm);stroke-width:1.5;stroke-dasharray:4 4}

.plate-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;fill:var(--ink-soft)}
.plate-num{font-family:var(--mono);font-size:10px;letter-spacing:.2em;fill:var(--ink-faint)}
.plate-note{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;fill:var(--ink-faint);opacity:.75}
.latest-kicker{font-family:var(--mono);font-size:8px;letter-spacing:.26em;text-transform:uppercase;opacity:.5}
.latest-title{font-family:var(--mono);font-size:10px;letter-spacing:.02em;opacity:.88}

/* text palettes matched to the light each doorway carries */
.on-dark{fill:#cfd6df}      .on-dark-dim{fill:#9aa3b0}
.on-warm{fill:#f6ead6}      .on-warm-dim{fill:#cbb79a}
.on-bright{fill:#241f18}    .on-bright-dim{fill:#6b5c45}

/* ---------- pages: category indexes and talks ---------- */
main.page{width:100%;max-width:var(--wide);margin:0 auto;padding:56px var(--edge) 90px;flex:1}

.page-title{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.02;letter-spacing:-.035em;max-width:20ch;margin-bottom:14px}
.standfirst{
  font-family:var(--human);font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.28rem);color:var(--ink-soft);max-width:32rem;margin-bottom:26px;
}
.meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);padding-bottom:34px;border-bottom:1px solid var(--hair);
}

/* the index of talks behind a door */
.talks{list-style:none;margin:0;padding:0}
.talks li{border-bottom:1px solid var(--hair)}
.talks a{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) 9rem;gap:20px;align-items:baseline;
  padding:22px 0;text-decoration:none;color:var(--ink);
}
.talks a:hover{color:var(--warm)}
.talks .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-faint)}
.talks .t{font-size:1.16rem;line-height:1.35}
.talks .when{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);text-align:right}
.talks .empty{padding:22px 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- a talk: two voices in two materials ---------- */
.voice{margin-top:52px}
.voice-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px}
.voice-label i{font-style:normal;opacity:.6}

.spark{border-left:2px solid var(--seam);padding-left:22px}
.spark .voice-label{color:var(--seam)}
.spark p.body{font-family:var(--human);font-size:1.34rem;line-height:1.58;max-width:30rem;color:var(--ink)}

.synthesis .voice-label{color:var(--cold)}
.synthesis p{font-size:1.06rem;line-height:1.72;color:var(--ink);margin-bottom:1.3em;max-width:var(--measure)}
.synthesis h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--warm);font-weight:400;margin:2.6em 0 1.1em;max-width:var(--measure);
}
.synthesis em{color:var(--ink)}
.synthesis ul{margin:0 0 1.4em;padding-left:1.2em;max-width:var(--measure)}
.synthesis li{font-size:1.06rem;line-height:1.72;margin-bottom:.55em}
.synthesis li::marker{color:var(--ink-faint)}
.math{font-family:var(--mono);font-size:.92em;color:var(--cold);white-space:nowrap}
.tick{
  font-family:var(--mono);font-size:.9em;color:var(--cold);
  background:var(--panel-raise);padding:2px 6px;border-radius:2px;white-space:nowrap;
}
.vector{
  font-family:var(--mono);font-size:.92rem;color:var(--warm);
  border-left:1px solid var(--hair-strong);padding:14px 0 14px 18px;margin:1.6em 0;display:block;
}

/* ---------- the question it leaves open ---------- */
.open{margin-top:64px;padding-top:30px;border-top:1px solid var(--hair);max-width:var(--measure)}
.open .voice-label{color:var(--ink-faint)}
.open p{font-family:var(--human);font-style:italic;font-size:1.24rem;line-height:1.55;color:var(--ink-soft)}

/* ---------- the two beings breathe, slowly ---------- */
@media (prefers-reduced-motion: no-preference){
  .ghost{animation:drift 14s ease-in-out infinite}
}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* ---------- colophon ---------- */
.colophon{
  margin-top:auto;padding:24px var(--edge) 32px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);line-height:2.1;
}
.colophon p,.colophon div{margin:0}
.colophon > :first-child{text-transform:none;letter-spacing:.2em}
.colophon a{color:var(--ink-faint);text-decoration:none}
.colophon a:hover{color:var(--warm)}

/* ---------- narrow ---------- */
@media (max-width:1040px){
  :root{--edge:26px}
  .room{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:22px;min-height:0}
  .copy{order:2}
  .scene{order:1;justify-self:center;max-width:540px}
  h1.display{font-size:clamp(2.7rem,11vw,4rem)}
  main.page{padding-top:36px}
}
@media (max-width:640px){
  .talks a{grid-template-columns:2.6rem minmax(0,1fr);gap:14px}
  .talks .when{grid-column:2;text-align:left}
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}