/* THE LOST ARCHIVE — design system. Diegetic ~2125 future-news portal.
   Swiss editorial grid + 3-role type (Fraunces display / Inter body / IBM Plex Mono telemetry)
   + layered dark mode + house graphite B/N imagery with restrained cyan(system)/amber(alert) FUI. */

:root{
  /* surfaces (layered near-blacks, not pure #000) */
  --bg:#0A0B0D; --surface:#121418; --surface-2:#181B21; --surface-3:#20242B;
  --line:#262A31; --line-2:#333842;
  /* ink */
  --ink:#E7E9ED; --ink-2:#AEB4BE; --ink-3:#727884; --ink-faint:#4B515B;
  /* accents = TLOTL vortex: teal (system/live) + gold (alert/status) */
  --cyan:#43BBA8; --cyan-dim:#236E63; --amber:#D8A860; --amber-dim:#8A6C3E;
  --gold:#D8A860;
  --sealed:#3A2E2E; --sealed-ink:#7C5C5C;
  /* type */
  --display:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,'Consolas',monospace;
  --wrap:1240px; --gutter:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan-dim);color:#fff}

/* ---- telemetry / mono voice ---- */
.mono,.dateline,.code,.ticker,.stat-n{font-family:var(--mono)}
.dateline{font-size:.72rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.dateline .sec{color:var(--cyan)}
.hair{height:1px;background:var(--line);border:0;margin:0}

/* ---- layout ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;gap:1px;background:var(--line)}
.grid > *{background:var(--bg)}
.cols-12{grid-template-columns:repeat(12,1fr)}
@media(max-width:900px){.cols-12{grid-template-columns:repeat(6,1fr)}}
@media(max-width:560px){.cols-12{grid-template-columns:1fr}}

/* ---- masthead ---- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(10,11,13,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.masthead-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px var(--gutter);max-width:var(--wrap);margin:0 auto}
.brand-mark{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark img{width:30px;height:30px;opacity:.95}
.brand-name{font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:.02em;white-space:nowrap}
.brand-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase}
.clock{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-2);text-align:right;line-height:1.35}
.clock .live{color:var(--cyan)}
.clock .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:6px;vertical-align:middle;box-shadow:0 0 8px var(--cyan);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.nav{display:flex;gap:2px;background:var(--line);border-top:1px solid var(--line)}
.nav a{flex:1;text-align:center;background:var(--bg);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:9px 6px;transition:color .2s,background .2s}
.nav a:hover,.nav a[aria-current=page]{color:var(--cyan);background:var(--surface)}
.nav a.sealed{color:var(--sealed-ink);cursor:not-allowed}
.nav a.sealed::after{content:" ▚";opacity:.6}

/* ---- ticker ---- */
.ticker{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden;height:34px}
.ticker-label{flex:none;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--bg);background:var(--cyan);padding:0 12px;height:100%;display:flex;align-items:center;text-transform:uppercase}
.ticker-track{display:flex;gap:44px;white-space:nowrap;animation:ticker 48s linear infinite;padding-left:44px;font-family:var(--mono);font-size:.74rem;color:var(--ink-2)}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track b{color:var(--amber);font-weight:400;margin-right:8px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- hero / lead story ---- */
.lead{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.lead h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.01em;margin:0 0 18px}
.lead .stand{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink-2);max-width:60ch}
.lead .byline{margin-top:20px}

/* ---- feed cards ---- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;padding:34px 0 14px;border-bottom:1px solid var(--line-2)}
.section-head h2{font-family:var(--display);font-weight:600;font-size:1.5rem;margin:0}
.section-head .more{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--cyan);text-transform:uppercase}
.feed{padding:0}
.card{grid-column:span 4;padding:24px 22px;min-height:200px;display:flex;flex-direction:column;transition:background .2s}
.card:hover{background:var(--surface)}
.card.wide{grid-column:span 8}
@media(max-width:900px){.card,.card.wide{grid-column:span 6}}
@media(max-width:560px){.card,.card.wide{grid-column:span 1}}
.card h3{font-family:var(--display);font-weight:600;font-size:1.32rem;line-height:1.16;margin:.5rem 0 .5rem}
.card.wide h3{font-size:1.7rem}
.card p{color:var(--ink-2);font-size:.96rem;margin:0}
.card .tag{align-self:flex-start;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber-dim);padding:2px 7px;margin-top:auto}

/* ---- status rail / stats ---- */
.rail{display:flex;gap:1px;background:var(--line);border-block:1px solid var(--line);margin:0}
.stat{flex:1;background:var(--bg);padding:20px 22px}
.stat .stat-n{font-family:var(--mono);font-size:1.9rem;color:var(--ink);letter-spacing:-.01em}
.stat .stat-n.cyan{color:var(--cyan)} .stat .stat-n.amber{color:var(--amber)}
.stat .stat-l{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
@media(max-width:560px){.rail{flex-wrap:wrap}.stat{flex:1 1 50%}}

/* ---- timeline (archive 2000-2125) ---- */
.tl{position:relative;padding:20px 0 40px}
.tl-row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.tl-year{font-family:var(--mono);font-size:1.05rem;color:var(--cyan);letter-spacing:.02em}
.tl-row.real .tl-year{color:var(--ink-3)}
.tl-body h4{font-family:var(--display);font-weight:600;font-size:1.12rem;margin:0 0 4px}
.tl-body p{color:var(--ink-2);font-size:.92rem;margin:0}
.tl-lines{margin-top:7px}
.tl-lines span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);padding:1px 6px;margin-right:6px;display:inline-block}
@media(max-width:560px){.tl-row{grid-template-columns:1fr;gap:6px}}

/* ---- sealed / redaction ---- */
.sealed-block{border:1px dashed var(--sealed-ink);background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(124,92,92,.06) 8px,rgba(124,92,92,.06) 16px);color:var(--sealed-ink);font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;padding:22px;text-align:center}
.redacted{background:var(--ink);color:transparent;border-radius:1px;user-select:none}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);padding:44px 0 60px;color:var(--ink-3)}
.foot .mono{font-size:.68rem;letter-spacing:.08em}
.foot a{color:var(--ink-2)} .foot a:hover{color:var(--cyan)}

/* ---- waters map page ---- */
.map-stage{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.map-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 0;font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
.map-controls input[type=range]{accent-color:var(--cyan)}
.pin{cursor:pointer}
.pin .dot-drowned{fill:var(--cyan);opacity:.9}
.pin .dot-survive{fill:var(--amber)}
.beat-readout{font-family:var(--mono);font-size:.8rem;color:var(--cyan);min-height:1.4em}

.btn-ghost{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);padding:10px 18px;transition:border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---- living spaces: The Commons + The Gallery (homepage feature band) ---- */
.spaces{padding:14px 0 6px}
.space-card{position:relative;overflow:hidden;background:var(--surface);padding:30px 28px;
  display:flex;flex-direction:column;gap:11px;border-left:2px solid var(--line-2);
  transition:background .2s,transform .2s}
.space-card:hover{background:var(--surface-2);transform:translateY(-2px)}
.space-card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.space-card > *{position:relative;z-index:1}
.space-card.commons{border-left-color:var(--cyan-dim)}
.space-card.commons::before{background:radial-gradient(120% 90% at 100% 0,rgba(67,187,168,.10),transparent 58%)}
.space-card.gallery{border-left-color:var(--amber-dim)}
.space-card.gallery::before{background:radial-gradient(120% 90% at 100% 0,rgba(216,168,96,.11),transparent 55%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(216,168,96,.028) 3px 4px)}
.space-kicker{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.space-card.gallery .space-kicker{color:var(--amber)}
.space-card h3{font-family:var(--display);font-weight:600;font-size:1.8rem;line-height:1.08;margin:0}
.space-card p{color:var(--ink-2);font-size:.96rem;max-width:48ch;margin:0}
.space-names{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--ink-2)}
.space-stat{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:16px;flex-wrap:wrap;margin-top:2px;align-items:baseline}
.space-stat b{color:var(--amber);font-weight:500;font-size:.94rem}
.space-card.commons .space-stat b{color:var(--cyan)}
/* CTA = resting-state pill in the card's accent (touch/keyboard affordance, not hover-only) */
.space-cta{align-self:flex-start;margin-top:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);border-radius:2px;padding:7px 13px;transition:border-color .2s,color .2s,background .2s}
.space-card.commons .space-cta{color:var(--cyan);border-color:var(--cyan-dim)}
.space-card.gallery .space-cta{color:var(--amber);border-color:var(--amber-dim)}
.space-card.commons:hover .space-cta{background:var(--cyan-dim);color:#06110f}
.space-card.gallery:hover .space-cta{background:var(--amber-dim);color:#120d05}
@media(max-width:560px){.space-card.gallery{order:-1}}

/* nav: live affordance for the inhabited spaces — a quiet, steady "open" dot (NOT pulsing, so it doesn't compete with the LIVE clock) + wrap on small screens */
.nav a.live-link::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--cyan);opacity:.55;box-shadow:0 0 4px rgba(67,187,168,.5);margin-left:7px;vertical-align:middle}
@media(max-width:560px){.nav{flex-wrap:wrap}.nav a{flex:1 1 33%}}

/* accessibility: keyboard focus affordance + honor prefers-reduced-motion (a11y panel must-fix) */
.space-card:focus-visible,.nav a:focus-visible,.foot a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.space-card.gallery:focus-visible{outline-color:var(--amber)}
@media (prefers-reduced-motion: reduce){
  .clock .live::before,.nav a.live-link::after,.ticker-track,.space-card,.card{animation:none !important;transition:none !important}
}