/* Cosmix landing. Season of Amber.
   Palette (ColorHunt "Crimson Tangerine Sand"): #003049 prussian blue, #D62828 crimson,
   #F77F00 tangerine, #FCBF49 sand-gold, on near-black.
   Type: Fraunces (display serif with real character) + Space Grotesk (body/UI). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg:      #0a0a0c;
  --panel:   #121317;
  --panel-2: #171a1f;
  --navy:    #003049;
  --red:     #d62828;
  --orange:  #f77f00;
  --amber:   #fcbf49;
  --line:    #23262c;
  --line-warm: #3a3020;
  --text:    #ece7de;
  --muted:   #97918a;
  --serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:    'Space Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  /* faint map grid + a low prussian-blue wash for depth, so it never reads as flat minimalism */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(252,191,73,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252,191,73,0.022) 1px, transparent 1px),
    radial-gradient(900px 600px at 82% -6%, rgba(247,127,0,0.08), transparent 60%),
    radial-gradient(760px 520px at 6% 2%, rgba(0,48,73,0.5), transparent 64%);
  background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%;
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  min-height: 100vh;
  animation: page-in 0.4s ease-out;
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body.leaving { opacity: 0; transition: opacity 0.6s ease-in; }

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--orange); }
.muted { color: var(--muted); }

/* Nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 30px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: rgba(10,10,12,0.85); backdrop-filter: blur(8px);
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.brand-logo {
  width: 26px; height: 26px; flex: none; display: inline-block;
  background-color: var(--amber);
  -webkit-mask: url("../assets/logo.svg") center / contain no-repeat;
  mask: url("../assets/logo.svg") center / contain no-repeat;
  transition: background-color 0.18s;
}
.logo:hover .brand-logo { background-color: var(--orange); }
.logo .wordmark { color: var(--amber); }
.logo span:not(.wordmark) { color: var(--muted); font-weight: 500; font-size: 15px; }
.logo:hover .wordmark { color: var(--orange); }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { color: var(--muted); font-weight: 500; font-size: 15px; }
.nav-links a:hover { color: var(--text); }
.btn-discord {
  padding: 8px 15px; border: 1px solid var(--line-warm); border-radius: 4px; color: var(--text) !important;
}
.btn-discord:hover { border-color: var(--orange); color: var(--amber) !important; }
/* Language switcher — identical markup and rules on the landing and the map page. */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1.2;
  font: 500 14px 'Space Grotesk', system-ui, sans-serif; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-warm); border-radius: 4px;
  padding: 8px 12px; cursor: pointer;
}
.lang-btn:hover, .lang-btn.open { border-color: var(--amber); }
.lang-cur { white-space: nowrap; }
.lang-chev {
  width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--amber); transition: transform 0.15s ease;
}
.lang-btn.open .lang-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 100%; width: max-content; padding: 4px;
  background: var(--panel); border: 1px solid var(--line-warm); border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.lang-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; white-space: nowrap;
  font: 500 14px 'Space Grotesk', system-ui, sans-serif; color: var(--text);
  background: none; border: 0; border-radius: 3px; padding: 7px 10px; cursor: pointer;
}
.lang-opt:hover { background: var(--panel-2); }
.lang-opt.on { color: var(--amber); }
.lang-tick { width: 12px; flex: none; color: var(--amber); opacity: 0; }
.lang-opt.on .lang-tick { opacity: 1; }

/* Hero */
.hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
  max-width: 1140px; margin: 0 auto; padding: 74px 30px 56px;
}
.kicker {
  color: var(--amber); font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--orange); }
h1 { font-family: var(--serif); font-size: 52px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 22px; }
h1 .hl { color: var(--amber); font-style: italic; }
.lede { color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 52ch; margin-bottom: 30px; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.ip-box {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--line-warm); border-radius: 4px; padding: 11px 16px; background: var(--panel);
  font-family: 'Space Grotesk', ui-monospace, monospace;
}
.ip-box:hover { border-color: var(--amber); }
.ip-label { color: var(--muted); font-size: 13px; }
.ip { font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; }
.btn-primary {
  display: flex; align-items: center; padding: 11px 22px; border-radius: 4px;
  background: var(--orange); color: #150a00 !important; font-weight: 700; font-size: 15px;
  border: 1px solid #ffa53a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover { background: var(--amber); }
.statline { margin-top: 22px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.statline b { color: var(--amber); font-weight: 700; }

.hero-globe { position: relative; text-align: center; }
.hero-globe::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 76%; height: 76%;
  border-radius: 50%; background: radial-gradient(circle, rgba(247,127,0,0.2), transparent 68%);
  filter: blur(26px);
}
#hero-canvas { position: relative; z-index: 1; width: 100%; max-width: 520px; aspect-ratio: 1; display: block; margin: 0 auto; cursor: pointer; }
.globe-hint { display: inline-block; margin-top: 4px; color: var(--muted); font-size: 13px; }

/* Sections */
.band { max-width: 1140px; margin: 0 auto; padding: 52px 30px; border-top: 1px solid var(--line); }
.band h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.band h2 .hl { color: var(--amber); font-style: italic; }
.band-sub { color: var(--muted); margin-bottom: 26px; max-width: 68ch; font-size: 16px; }

/* Feature bento — deliberately uneven so it doesn't read as a stamped card grid */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.cell {
  position: relative; border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: 4px; padding: 22px 24px; background: var(--panel);
  transition: border-color 0.18s, background 0.18s;
}
.cell.wide { grid-column: 1 / -1; }
.cell:hover { background: var(--panel-2); border-left-color: var(--orange); }
.cell h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.cell p { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 62ch; }
.cell .tag { font: 600 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 10px; }
.cell.war { border-left-color: var(--red); }
.cell.war .tag { color: var(--red); }
.cell.war:hover { border-left-color: var(--red); }

/* Towns table */
.towns-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.towns-table th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 9px 12px; border-bottom: 1px solid var(--line-warm);
}
.towns-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.towns-table tbody tr { cursor: pointer; transition: background 0.14s; }
.towns-table tbody tr:hover { background: rgba(0,48,73,0.38); }
.tdot { width: 11px; height: 11px; border-radius: 2px; display: inline-block; box-shadow: 0 0 7px currentColor; }
.towns-table .mono { font-family: 'Space Grotesk', ui-monospace, monospace; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Footer */
.footer {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1140px; margin: 0 auto; padding: 28px 30px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; }
  #hero-canvas { max-width: 320px; }
  h1 { font-size: 38px; }
  .grid { grid-template-columns: 1fr; }
  .cell.wide { grid-column: auto; }
  .nav-links a:not(.btn-discord):not(.lang-select) { display: none; }
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   Three things decide whether this reads as a real mobile site: the header has
   to fit on one line, the headline has to come before the globe (a screenful of
   planet with no words tells you nothing), and nothing may scroll sideways. */
@media (max-width: 620px) {
  .nav { padding: 10px 16px; gap: 10px; }
  .logo { font-size: 17px; gap: 8px; min-width: 0; }
  .brand-logo { width: 22px; height: 22px; }
  .logo span:not(.wordmark) { display: none; }   /* drop "Civilization", keep the wordmark */
  .nav-links { gap: 10px; flex: none; }
  .btn-discord { padding: 7px 11px; font-size: 14px; }
  .lang-btn { padding: 7px 9px; font-size: 14px; }
  .lang-menu { right: 0; left: auto; }

  /* Text first, planet second. */
  .hero { padding: 30px 18px 40px; gap: 26px; }
  .hero-globe { order: 1; }
  #hero-canvas { max-width: 240px; }
  h1 { font-size: clamp(30px, 8.5vw, 36px); }
  .kicker { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 14px; }
  .lede { font-size: 16px; margin-bottom: 24px; }
  .statline { margin-top: 16px; font-size: 13px; }

  /* Full-width tap targets, comfortably tall. */
  .cta-row { gap: 10px; }
  .cta-row > * { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  .ip-box { padding: 12px 16px; }

  .band { padding: 34px 18px; }
  .band h2 { font-size: 24px; }
  .band-sub { font-size: 15px; margin-bottom: 20px; }
  .cell { padding: 18px 18px; }

  /* The towns table keeps its columns but scrolls inside its own box, so the
     page itself never moves sideways. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -18px; padding: 0 18px; }
  .towns-table { min-width: 560px; font-size: 14px; }
  .towns-table th, .towns-table td { padding: 9px 10px; }

  .footer { padding: 22px 18px; font-size: 13px; gap: 8px; }
}

/* Very narrow phones: the wordmark alone still has to fit next to the buttons. */
@media (max-width: 380px) {
  .logo { font-size: 15px; }
  .btn-discord { padding: 7px 9px; font-size: 13px; }
  .lang-cur { max-width: 4.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
}

/* ── How-to-join page ─────────────────────────────────────────────────────── */
.play { max-width: 1000px; margin: 0 auto; padding: 60px 30px 90px; }
.play-hero { max-width: 62ch; margin-bottom: 44px; }
.play-hero .kicker { display: inline-flex; }
.play-hero h1 { font-family: var(--serif); font-size: clamp(38px, 6.4vw, 66px); line-height: 1.0;
  font-weight: 600; letter-spacing: -0.025em; margin: 16px 0 18px; }
.play-hero .lede { color: var(--muted); font-size: 18px; line-height: 1.6; }

/* The address: the one thing you must copy — a wide amber-edged plate, clearly a button. */
.addr { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  margin-top: 30px; cursor: pointer; min-width: min(420px, 100%);
  border: 1px solid var(--line-warm); border-left: 3px solid var(--orange); border-radius: 6px;
  background: var(--panel); padding: 15px 18px 15px 22px; font-family: var(--sans); text-align: left;
  transition: border-color .18s, background .18s, transform .18s; }
.addr:hover { border-color: var(--amber); background: var(--panel-2); transform: translateY(-1px); }
.addr.copied { border-color: var(--amber); }
.addr-main { display: flex; flex-direction: column; gap: 3px; }
.addr-label { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.addr-value { font-family: 'Space Grotesk', ui-monospace, monospace; font-weight: 700; font-size: 23px;
  color: var(--amber); letter-spacing: .01em; }
.addr-copy { flex: none; color: var(--orange); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 7px 14px; border: 1px solid var(--line-warm); border-radius: 4px; }
.addr:hover .addr-copy { border-color: var(--orange); }
.addr.copied .addr-copy { color: var(--amber); border-color: var(--amber); }
.addr-note { color: var(--muted); font-size: 14px; margin-top: 14px; }

/* Two editions side by side — no hidden toggle, you see both paths and pick one. */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.path { border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  padding: 24px 24px 20px; display: flex; flex-direction: column; }
.path-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.path-badge { flex: none; font: 700 12px/1 var(--sans); letter-spacing: .12em; padding: 8px 11px;
  border-radius: 5px; color: #120a00; }
.path-badge.java { background: var(--amber); }
.path-badge.bedrock { background: linear-gradient(120deg, var(--orange), var(--amber)); }
.path-head h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
.path-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.steps { list-style: none; display: grid; gap: 4px; counter-reset: step; flex: 1; }
.steps li { position: relative; padding: 14px 4px 16px 46px; }
.steps li + li { border-top: 1px solid var(--line); }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 13px;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--navy); color: var(--amber); font: 700 14px var(--sans); }
.steps h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; margin-bottom: 5px; color: var(--text); }
.steps p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

.path-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line); }
.port-label { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.port-val { color: var(--text); font-size: 14px; }
.port-num { font-family: 'Space Grotesk', ui-monospace, monospace; font-weight: 700; font-size: 17px;
  color: var(--amber); }

/* First ten minutes — a numbered timeline, because arrival really is a sequence. */
.first { border-top: 1px solid var(--line); margin-top: 60px; padding-top: 40px; }
.first h2 { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 30px); font-weight: 600; margin-bottom: 24px; }
.first-line { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.first-line li { position: relative; padding-top: 16px; border-top: 2px solid var(--line-warm); }
.first-line .fn { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--orange);
  letter-spacing: .08em; }
.first-line p { color: var(--muted); font-size: 15px; line-height: 1.55; margin-top: 8px; }

.help { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 48px;
  padding-top: 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }

@media (max-width: 780px) {
  .paths { grid-template-columns: 1fr; }
  .first-line { grid-template-columns: 1fr; gap: 0; }
  .first-line li { border-top: none; border-left: 2px solid var(--line-warm); padding: 4px 0 20px 18px; }
}
@media (max-width: 560px) {
  .play { padding: 34px 18px 64px; }
  .addr { width: 100%; min-width: 0; gap: 12px; padding: 14px 14px 14px 18px; }
  .addr-value { font-size: 20px; }
  .path { padding: 20px 18px 18px; }
}

/* ── Cradles / cultures page ───────────────────────────────────────────────── */
.cul { max-width: 1100px; margin: 0 auto; padding: 44px 30px 90px; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

.cul-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
  margin-bottom: 54px; }
.cul-hero h1 { font-family: var(--serif); font-size: clamp(38px, 6vw, 66px); line-height: 1.0;
  font-weight: 600; letter-spacing: -0.025em; margin: 14px 0 16px; }
.cul-hero .lede { color: var(--muted); font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
.cul-video { position: relative; border: 1px solid var(--line-warm); border-radius: 10px; overflow: hidden;
  background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cul-video video { display: block; width: 100%; height: auto; }
.cul-video figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: #d9d2c6;
  letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0,0,0,.8); }

.cul-rule { border-left: 3px solid var(--orange); padding: 8px 0 8px 22px; margin: 0 0 46px;
  max-width: 70ch; }
.cul-rule p { font-size: 18px; line-height: 1.6; color: var(--muted); }
.cul-rule-lead { color: var(--text); font-family: var(--serif); font-weight: 600; }

/* the four cradle panels */
.cradles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cradle { --accent: var(--amber); display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel);
  transition: border-color .22s, transform .22s, box-shadow .22s; }
.cradle:hover { border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(0,0,0,.4); }
.c-europe  { --accent: #9fb4c4; }
.c-africa  { --accent: #5fd8d3; }
.c-america { --accent: var(--amber); }
.c-asia    { --accent: #5c86e6; }

.cradle-shot { position: relative; aspect-ratio: 16 / 8; background:
  linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel-2)) 0%, var(--panel-2) 70%);
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px; display: grid; place-items: center; }
/* The real cradle screenshot fills the box; the gradient underneath is what shows while it loads. */
.cradle-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cradle-body { padding: 22px 24px 24px; }
.cradle-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.cradle-badge { flex: none; font: 700 11px/1 var(--sans); letter-spacing: .14em; padding: 8px 10px;
  border-radius: 5px; color: #100c04; background: var(--accent); }
.cradle-head h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1; }
.cradle-place { color: var(--muted); font-size: 13px; margin-top: 3px; }
.cradle-char { color: var(--muted); font-size: 15px; line-height: 1.55; margin-bottom: 18px; }

.traits { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.traits li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  background: var(--panel-2); padding: 11px 14px; }
.trait-k { color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.trait-v { color: var(--text); font-weight: 600; font-size: 15px; text-align: right;
  border-bottom: 2px solid var(--accent); padding-bottom: 1px; }

.cradle-trade { font-size: 15px; color: var(--muted); }
.cradle-trade b { color: var(--text); font-weight: 600; }
.cradle-perk { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted); line-height: 1.5; }
.perk-tag { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #100c04; background: var(--accent); padding: 3px 8px; border-radius: 4px; margin-right: 6px; }

.cul-catch { margin-top: 60px; border-top: 1px solid var(--line); padding-top: 46px; max-width: 74ch; }
.cul-catch h2 { font-family: var(--serif); font-size: clamp(26px, 4vw, 38px); font-weight: 600;
  margin-bottom: 16px; }
.cul-catch p { color: var(--muted); font-size: 17px; line-height: 1.65; }
.cul-catch-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btn-ghost { display: inline-flex; align-items: center; padding: 12px 20px; border: 1px solid var(--line-warm);
  border-radius: 6px; color: var(--text); font-weight: 600; font-size: 15px; transition: border-color .18s, color .18s; }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }

@media (max-width: 900px) {
  .cul-hero { grid-template-columns: 1fr; gap: 26px; }
  .cradles { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cul { padding: 30px 18px 64px; }
  .cul-rule { font-size: 16px; }
}

/* ── Landing front-door cards ───────────────────────────────────────────────── */
/* The three front doors, drawn as one atlas plate: a single amber meridian across the top
   (echoing the globe's equator right above), the doors hung beneath it as columns split by
   hairlines, each marked by a node "port" sitting on the line. One accent, no floating cards. */
.gateway { max-width: 1140px; margin: 0 auto; padding: 4px 30px 54px; }
.gateway-cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-warm); }
.gateway-label { display: inline-block; margin: 0 0 16px 28px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); }
.door { position: relative; display: flex; flex-direction: column;
  padding: 32px 28px 24px; min-height: 188px; transition: background .25s ease; }
.door + .door { border-left: 1px solid var(--line); }
.door-node { position: absolute; top: 0; left: 28px; width: 9px; height: 9px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--amber); box-shadow: 0 0 0 5px var(--bg);
  transition: background .2s ease, box-shadow .2s ease; }
.door-tag { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 15px; transition: color .2s ease; }
.door h3 { font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.12;
  letter-spacing: -0.01em; color: var(--text); margin-bottom: 9px; }
.door p { color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; margin-bottom: 18px; }
.door-go { color: var(--amber); font-weight: 600; font-size: 13px; letter-spacing: .01em;
  transition: color .2s ease, transform .2s ease; }
.door:hover { background: linear-gradient(180deg,
  color-mix(in srgb, var(--amber) 6%, transparent), transparent 62%); }
.door:hover .door-node { background: var(--amber); box-shadow: 0 0 0 5px var(--bg), 0 0 12px 1px color-mix(in srgb, var(--amber) 55%, transparent); }
.door:hover .door-tag { color: var(--text); }
.door:hover .door-go { color: var(--orange); transform: translateX(3px); }
.door:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
@media (max-width: 820px) {
  .gateway-cols { grid-template-columns: 1fr; border-top: none; }
  .gateway-label { display: none; }
  .door { min-height: 0; border-top: 1px solid var(--line); }
  .door + .door { border-left: none; }
}

/* ── Update log ───────────────────────────────────────────────────────────────
   A record, not a feed. The page reads as a core sample through the world's
   repairs: each release is a stratum, each subsystem a labelled band down the
   side. The one flourish is that band label — set vertically along the rule, the
   way a stratum is labelled on a section drawing — and everything else stays
   quiet so long bodies of text remain readable. */
.log-hero {
  max-width: 900px; margin: 0 auto; padding: 76px 30px 46px;
  border-bottom: 1px solid var(--line);
}
.log-hero h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.025em;
  font-size: clamp(40px, 7vw, 74px); line-height: 0.98; margin: 10px 0 18px;
}
.log-hero .lede { max-width: 62ch; color: var(--muted); font-size: 17px; }
.log-scheme {
  margin-top: 34px; padding-top: 20px; border-top: 1px dashed var(--line-warm);
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 8px 28px;
}
.log-scheme dt {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--amber); padding-top: 3px;
}
.log-scheme dd { color: var(--muted); max-width: 56ch; font-size: 15px; }

.log { max-width: 900px; margin: 0 auto; padding: 0 30px 90px; }

.rel { padding: 56px 0 10px; }
.rel + .rel { border-top: 1px solid var(--line); }

.rel-head {
  display: grid; grid-template-columns: minmax(120px, 168px) 1fr; gap: 28px;
  align-items: start; margin-bottom: 40px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.rel-head.in { opacity: 1; transform: none; }
.rel-num {
  font-family: var(--serif); font-weight: 700; font-size: clamp(56px, 11vw, 104px);
  line-height: 0.8; letter-spacing: -0.04em; color: var(--amber);
  font-variant-numeric: lining-nums tabular-nums;
}
.rel:not(.rel-latest) .rel-num { color: var(--line-warm); }
.rel-name {
  font-family: var(--serif); font-size: clamp(24px, 3.4vw, 34px); font-weight: 600;
  letter-spacing: -0.015em; margin-bottom: 10px;
}
.rel-lede { color: var(--muted); max-width: 56ch; }
.rel-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 12px; letter-spacing: 0.06em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}
.tag-mono { font-family: 'Space Grotesk', ui-monospace, monospace; }
.tag-now {
  color: #0a0a0c; background: var(--amber); border-color: var(--amber); font-weight: 600;
}

.grp {
  display: grid; grid-template-columns: minmax(120px, 168px) 1fr; gap: 28px;
  padding: 26px 0; border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s;
}
.grp.in { opacity: 1; transform: none; }
/* The label runs down the rule, the way a stratum is named on a section drawing. */
.grp-label { position: relative; }
.grp-label span {
  position: sticky; top: 96px; display: block;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--orange); white-space: nowrap;
  padding-left: 2px; border-left: 2px solid var(--line-warm);
}
.grp-entries { display: grid; gap: 26px; }

.entry h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.entry-hash {
  font-family: 'Space Grotesk', ui-monospace, monospace; font-size: 12px;
  color: var(--muted); letter-spacing: 0.04em; margin-bottom: 8px;
}
.entry-body { color: var(--muted); max-width: 68ch; }
.entry-body::first-line { color: var(--text); }

.log-empty { color: var(--muted); padding: 60px 0; text-align: center; }
.log-foot {
  border-top: 1px solid var(--line); padding: 26px 30px 60px;
  max-width: 900px; margin: 0 auto; color: var(--muted); font-size: 14px;
}

@media (max-width: 760px) {
  .log-scheme { grid-template-columns: 1fr; }
  .rel-head, .grp { grid-template-columns: 1fr; gap: 14px; }
  .grp-label span {
    position: static; writing-mode: horizontal-tb; transform: none;
    border-left: none; border-bottom: 2px solid var(--line-warm);
    padding: 0 0 6px; display: inline-block;
  }
  .rel-num { font-size: 54px; }
}

/* Log entries as plain lists, not essays. */
.grp-entries { list-style: none; display: block; }
.grp-entries .entry {
  position: relative; padding: 0 0 0 20px; margin-bottom: 11px;
  color: var(--text); max-width: 74ch; font-size: 15.5px; line-height: 1.55;
}
.grp-entries .entry::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 6px; height: 1px; background: var(--line-warm);
}
.grp-fixed .entry::before { background: var(--red); }
.grp-added .entry::before { background: var(--amber); }
.grp-changed .entry::before { background: var(--orange); }
.entry-hash {
  font-family: 'Space Grotesk', ui-monospace, monospace; font-size: 11.5px;
  color: var(--muted); margin-left: 8px; opacity: 0.75;
}