/* ════════════════════════════════════════════════════════════════
   Atelos OS — atelos.cc
   Shared stylesheet: design tokens + index (teaser) + manifesto
   Zero border-radius. No shadows. Cyan accent only where specified.
   ════════════════════════════════════════════════════════════════ */

/* --- SELF-HOSTED FONTS (generated by _build-fonts.py) --- */
@font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-narrow-700-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 Narrow';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-narrow-700-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-400-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-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:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/jetbrains-mono-600-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/jetbrains-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:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/jetbrains-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}
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/geist-300-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:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/geist-300-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:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/geist-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:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/geist-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}


/* ─── DESIGN TOKENS (fixed — do not change) ─────────────────────── */
:root {
  --bg:             #131313;
  --surface:        #1a1a1a;
  --surface-low:    #1c1b1b;
  --surface-high:   #2a2a2a;
  --border:         #333333;
  --border-dim:     #1e1e1e;
  --text-primary:   #e5e2e1;
  --text-secondary: #c4c7c8;
  --text-dim:       #6b6b6b;
  --cyan:           #00fbfb;
  --cyan-dim:       #00dddd;

  --font-display: 'Archivo Narrow', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-body:    'Geist', sans-serif;
}

/* ─── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The index teaser uses a fixed app-shell: header + hero + footer fill exactly
   one viewport and only the sidebar scrolls. Other pages (manifesto, 404)
   keep normal document scrolling. */
body.shell {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.shell .topbar { flex: none; }   /* never shrink the 56px header */
body.shell footer  { flex: none; }   /* never shrink the footer */
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }
img, svg, video { display: block; max-width: 100%; }

/* ─── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--border); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ─── TOP BAR (shared) ──────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
}
.topbar-wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.topbar-wordmark .badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--cyan);
  padding: 1px 4px;
  line-height: 1.4;
  vertical-align: super;
  opacity: 0.7;
}
.topbar-domain {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.topbar-back {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.topbar-back:hover { color: var(--text-primary); }

/* Header CTA — "Get Access" (casts the access spell on home / returns home elsewhere) */
.topbar-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 7px 16px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.topbar-cta:hover { background: var(--cyan); border-color: var(--cyan); color: #000; }

/* Header nav links (Manifesto / News) — sit left of the CTA */
.topbar-nav { display: flex; align-items: center; gap: 24px; }
.topbar-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.topbar-link:hover { color: var(--text-primary); }

/* ─── HAMBURGER BUTTON ───────────────────────────────────────── */
.topbar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
  transition: border-color 0.2s, color 0.2s;
}
.topbar-hamburger:hover { border-color: var(--cyan); color: var(--cyan); }
/* Show hamburger + hide text links at narrow mobile widths — rule must come
   AFTER the base display:none above so the media query wins the cascade */
@media (max-width: 600px) { .topbar-link { display: none; } .topbar-hamburger { display: flex; } }

/* ─── SLIDE-OUT NAV DRAWER ───────────────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(280px, 80vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 300;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}
.nav-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-drawer-inner {
  display: flex;
  flex-direction: column;
  padding: 20px 32px;
  height: 100%;
  box-sizing: border-box;
}
.nav-drawer-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  margin-bottom: 32px;
  line-height: 0;
  transition: color 0.2s;
}
.nav-drawer-close:hover { color: var(--text-primary); }
.nav-drawer-links { display: flex; flex-direction: column; }
.nav-drawer-link {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 20px 0;
  border-bottom: 1px solid var(--border-dim);
  transition: color 0.2s;
  text-decoration: none;
}
.nav-drawer-link:first-child { border-top: 1px solid var(--border-dim); }
.nav-drawer-link:hover { color: var(--cyan); }

/* ════════════════════════════════════════════════════════════════
   PAGE 1 — index.html (teaser)
   ════════════════════════════════════════════════════════════════ */

.main-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 380px 1fr;   /* sidebar | hero */
  grid-template-rows: minmax(0, 1fr);  /* fill the shell; children scroll, page doesn't */
}

/* ─── HERO PANEL (right) ────────────────────────────────────────── */
.hero-panel {
  position: relative;
  overflow: hidden;
  min-height: 0;
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-image { position: absolute; inset: 0; z-index: 0; }
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(100%);
  opacity: 0.75;
  mix-blend-mode: luminosity;
  transition: filter 1.2s ease, opacity 1.2s ease;
}
.hero-panel:hover .hero-image img { filter: grayscale(20%); opacity: 0.85; }

/* Gradient fades — bottom + left — let copy sit cleanly over the image
   and blend the hero into the sidebar on its left edge */
.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 30%, var(--bg) 100%),
    linear-gradient(to left, transparent 50%, var(--bg) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 10;
  padding: 48px;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Greek eyebrow */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--cyan);
  flex-shrink: 0;
}
.hero-eyebrow .greek { color: var(--cyan); opacity: 0.8; }

/* Headline */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-wrap: balance;
}
.hero-headline .accent { color: var(--cyan); display: block; }

/* Sub-copy */
.hero-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
  letter-spacing: 0.01em;
}

/* CTA */
.hero-cta { display: flex; flex-direction: column; gap: 4px; }
.cta-form { display: flex; gap: 0; max-width: 460px; }
.cta-input {
  flex: 1;
  background: rgba(19, 19, 19, 0.9);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
}
.cta-input::placeholder { color: var(--text-dim); }
.cta-input:focus { border-color: var(--cyan); }
.cta-btn {
  background: var(--text-primary);
  color: #131313;
  border: 1px solid var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border-radius: 0;
}
.cta-btn:hover { background: var(--cyan); border-color: var(--cyan); color: #000; }
.cta-btn[disabled] { cursor: default; }
.cta-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ─── SIDEBAR (right, sticky) ───────────────────────────────────── */
.sidebar {
  order: 1;                /* left column */
  min-height: 0;
  overflow-y: auto;        /* the ONLY scroll region — page itself does not scroll */
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.sidebar-section { border-bottom: 1px solid var(--border); padding: 32px 32px 32px 48px; }
.sidebar-section:last-child { border-bottom: none; }

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border-dim); }

/* Philosophy */
.philosophy-word { margin-bottom: 24px; }
.philosophy-word:last-child { margin-bottom: 0; }
.philosophy-word .word-greek {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  opacity: 0.8;
}
.philosophy-word .word-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.philosophy-word .word-def {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.6;
  border-left: 2px solid var(--border);
  padding-left: 12px;
}
.philosophy-word .word-def em { color: var(--text-dim); font-style: normal; }

/* Manifesto excerpt */
.manifesto {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.75;
  font-weight: 300;
  padding-top: 4px;
}
.manifesto strong { color: var(--text-primary); font-weight: 400; }
.manifesto-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}
.manifesto-link:hover { opacity: 0.7; }
.manifesto-list { margin: 10px 0 14px; padding: 0; }
.manifesto-list li {
  padding-left: 18px;
  position: relative;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 4px;
}
.manifesto-list li::before { content: '—'; position: absolute; left: 0; color: var(--cyan); }

/* Build log */
.build-log { display: flex; flex-direction: column; gap: 0; }
.log-entry {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-dim);
  align-items: start;
}
.log-entry:last-child { border-bottom: none; }
.log-date {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  padding-top: 2px;
  line-height: 1.4;
}
.log-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.log-text .log-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(0, 251, 251, 0.3);
  padding: 1px 5px;
  margin-right: 6px;
  vertical-align: 1px;
}
.log-text .log-tag.shipped { color: #a3e635; border-color: rgba(163, 230, 53, 0.3); }
.log-text .log-tag.queued  { color: #fb923c; border-color: rgba(251, 146, 60, 0.3); }
.log-counter {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 16px;
  letter-spacing: 0.04em;
}
.log-counter span { color: var(--cyan); font-weight: 600; }

/* ─── HERO IMAGE PLACEHOLDER (until Midjourney art is ready) ─────── */
.hero-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #1a1a1a 0%, #111 50%, #0e0e0e 100%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--border);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-placeholder .placeholder-label { color: var(--text-dim); }
.hero-placeholder .placeholder-note { color: var(--border); font-size: 10px; }
.fragment-grid {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(var(--text-primary) 1px, transparent 1px),
    linear-gradient(90deg, var(--text-primary) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Hero art — marble hand + glowing globe, bottom-right.
   z-55 sits above the lightning bolt (topbar context z-50) so the bolt passes BEHIND it. */
.hero-art {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 55;
  width: clamp(420px, 47%, 800px);
  pointer-events: none;
}
.hero-art img { display: block; width: 100%; height: auto; transition: filter 0.5s ease-out; }
/* CSS glow on bolt strike — drop-shadow follows the PNG alpha channel exactly */
.hero-art--lit img {
  filter:
    drop-shadow(0 0 8px rgba(0, 251, 251, 0.95))
    drop-shadow(0 0 24px rgba(0, 251, 251, 0.6))
    drop-shadow(0 0 52px rgba(0, 251, 251, 0.3));
  transition: filter 0.06s ease-in;
}
.hero-art::before {            /* subtle cyan backlight behind the globe */
  content: '';
  position: absolute;
  z-index: -1;
  left: -16%;
  top: -8%;
  width: 96%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(0, 251, 251, 0.26), rgba(0, 150, 200, 0.12) 52%, transparent 76%);
  filter: blur(55px);
}

/* ════════════════════════════════════════════════════════════════
   PAGE 2 — manifesto/index.html
   ════════════════════════════════════════════════════════════════ */

.manifesto-wrap { max-width: 680px; margin: 0 auto; padding: 80px 48px 120px; }

.chapter {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 80px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.manifesto-wrap > .chapter:first-child { margin-top: 0; }
.chapter-num { color: var(--cyan); opacity: 0.6; }
.chapter::after { content: ''; flex: 1; height: 1px; background: var(--border-dim); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 32px;
  text-wrap: balance;
}
.section-title .accent { color: var(--cyan); }
h2.section-title { margin-top: 48px; }

.prose {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 20px;
  text-wrap: pretty;
}
.prose strong { color: var(--text-primary); font-weight: 400; }
.prose em { color: var(--text-dim); font-style: normal; }

.pull-quote {
  border-left: 2px solid var(--cyan);
  padding: 16px 24px;
  margin: 32px 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.15;
}

.section-break { border: none; border-top: 1px solid var(--border-dim); margin: 64px 0; }

.signature { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--border); }
.signature-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.signature-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.8;
}
.signature-meta span { color: var(--text-secondary); }

/* ════════════════════════════════════════════════════════════════
   FOOTER (shared)
   ════════════════════════════════════════════════════════════════ */
footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 20px 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.footer-left   { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
.footer-center { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; text-align: center; }
.footer-right  { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-align: right; }
.footer-left a { color: var(--text-dim); transition: color 0.2s; }
.footer-left a:hover { color: var(--cyan); }
.footer-center a { color: var(--text-dim); transition: color 0.2s; }
.footer-center a:hover { color: var(--cyan); }
.footer-right a { color: var(--text-dim); transition: color 0.2s; }
.footer-right a:hover { color: var(--cyan); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Stacked + natural page scroll on mobile (app-shell is desktop-only) */
  body.shell { height: auto; overflow: visible; }
  .topbar { padding: 0 20px; }
  .main-grid { flex: none; grid-template-columns: 1fr; grid-template-rows: auto; }
  /* hero-panel comes first (order:-1 beats sidebar's order:1) */
  .hero-panel { order: -1; height: auto; justify-content: flex-start; }
  .hero-content { padding: 32px 20px; max-width: none; }
  .hero-headline { font-size: clamp(44px, 12vw, 72px); }
  .sidebar {
    order: 1;
    overflow: visible;
    border-right: none;
    border-top: 1px solid var(--border);
  }
  .sidebar-section { padding: 24px 20px; }
  .cta-form { flex-direction: column; }
  .cta-note { white-space: normal; }
  .cta-input { border-right: 1px solid var(--border); border-bottom: none; }
  footer { flex-direction: column; gap: 8px; text-align: center; padding: 20px; }
  /* Mobile background consistency: flatten hero-placeholder gradient to page bg; remove
     the desktop left-sidebar and bottom vignettes (designed for a background image + sidebar) */
  .hero-placeholder { background: var(--bg); }
  .hero-image::after { background: none; }
  /* Hero art: full-width below the form; calc crops the dark bottom of the image frame */
  .hero-art { background: var(--bg); }  /* transparent WebP edges = page background */
  .hero-art::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none;
    z-index: 1;
  }
  .hero-art {
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    height: calc(100vw * 0.822 - 48px);  /* image ratio (740/900) minus bottom dark space */
    overflow: hidden;
    top: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    opacity: 1;
  }
  .hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}
@media (max-width: 700px) {
  .manifesto-wrap { padding: 48px 20px 80px; }
}

/* ─── MOTION + FOCUS ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════
   NEWS — index (card grid) + post pages
   ════════════════════════════════════════════════════════════════ */
.news-wrap { max-width: 1120px; margin: 0 auto; padding: 64px 48px 120px; }
.news-header { margin-bottom: 44px; }
.news-h1 {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.news-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 12px;
}

/* Shared card chrome */
.news-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
  padding: 1px 6px;
  white-space: nowrap;
}
.news-card-meta { display: flex; align-items: center; gap: 10px; }
.news-card-date { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }

/* Featured hero card (full width) */
.news-hero {
  display: block;
  position: relative;
  min-height: 320px;
  border: 1px solid var(--border);
  margin-bottom: 24px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.news-hero-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 32px;
}
.news-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.news-hero-excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 560px;
}

/* Card grid — 6 cols; wide = span 3 (2-up), std = span 2 (3-up) → 2/3/3 pattern */
.news-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.news-card { display: block; border: 1px solid var(--border); overflow: hidden; transition: border-color 0.2s; }
.news-card--wide { grid-column: span 3; }
.news-card--std  { grid-column: span 2; }
.news-card-media {
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.news-card--wide .news-card-media { height: 180px; }
.news-card--std  .news-card-media { height: 160px; }
.news-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.news-card-body { padding: 14px 16px 16px; }
.news-card-body .news-card-meta { margin-bottom: 9px; }
.news-card-excerpt {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Type backgrounds (cards without an image) */
.type-letter  .news-card-media,
.news-hero.type-letter {
  background-color: #1a1a2e;
  background-image: repeating-linear-gradient(45deg, rgba(229, 226, 225, 0.035) 0 1px, transparent 1px 13px);
}
.type-feature .news-card-media, .news-hero.type-feature { background-color: #0e1a0e; }
.type-build   .news-card-media, .news-hero.type-build   { background-color: #1a1500; }
.type-release .news-card-media, .news-hero.type-release { background-color: #1a0a0a; }

/* Type tag colors (same system as build-log tags) */
.type-letter  .news-tag { color: #00fbfb; border-color: rgba(0, 251, 251, 0.35); }
.type-feature .news-tag { color: #a3e635; border-color: rgba(163, 230, 53, 0.35); }
.type-build   .news-tag { color: #fb923c; border-color: rgba(251, 146, 60, 0.35); }
.type-release .news-tag { color: #e5e2e1; border-color: rgba(229, 226, 225, 0.35); }

/* Hover → border shifts to the type color */
.news-card.type-letter:hover,  .news-hero.type-letter:hover  { border-color: #00fbfb; }
.news-card.type-feature:hover, .news-hero.type-feature:hover { border-color: #a3e635; }
.news-card.type-build:hover,   .news-hero.type-build:hover   { border-color: #fb923c; }
.news-card.type-release:hover, .news-hero.type-release:hover { border-color: #e5e2e1; }

/* Load more */
.news-more-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 32px; }
.news-more {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  transition: border-color 0.2s, color 0.2s;
}
.news-more:hover { border-color: var(--cyan); color: var(--cyan); }
.news-done { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }

/* ─── POST PAGE ─────────────────────────────────────────────────── */
.post-wrap { max-width: 720px; margin: 0 auto; padding: 80px 48px 120px; }
.post-back {
  display: inline-block;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.post-back:hover { color: var(--cyan); }
.post-vol {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 14px 0 16px;
}
.post-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.post-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; margin-top: 16px; }
.post-divider { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

.post-body p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.post-body strong { color: var(--text-primary); font-weight: 400; }
.post-body h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-primary);
  border-left: 2px solid var(--cyan);
  padding-left: 16px;
  margin: 48px 0 20px;
}
.post-body blockquote {
  border-left: 2px solid var(--cyan);
  padding: 6px 0 6px 24px;
  margin: 32px 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-primary);
}
.post-body ul { margin: 20px 0; }
.post-body li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
}
.post-body li::before { content: '—'; position: absolute; left: 0; color: var(--cyan); }
.post-body hr { border: none; border-top: 1px solid var(--border-dim); margin: 48px 0; }

.post-foot { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); }
.post-sign-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: var(--text-primary); }
.post-sign-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; margin-top: 4px; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }
.post-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  padding: 10px 16px;
  transition: border-color 0.2s, color 0.2s;
}
.post-nav a:hover { border-color: var(--cyan); color: var(--cyan); }
.post-cta { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); }
.post-cta .cta-note { margin-bottom: 12px; }

@media (max-width: 760px) {
  .news-wrap { padding: 48px 20px 80px; }
  .news-h1 { font-size: 36px; }
  .news-grid { grid-template-columns: 1fr; }
  .news-card--wide, .news-card--std { grid-column: 1 / -1; }
  .news-card--wide .news-card-media, .news-card--std .news-card-media { height: 170px; }
  .post-wrap { padding: 48px 20px 80px; }
  .post-nav { flex-direction: column; }
  .post-nav a { text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   ROADMAP — /roadmap
   ════════════════════════════════════════════════════════════════ */

.roadmap-wrap { max-width: 1120px; margin: 0 auto; padding: 64px 48px 120px; }

/* ── Last Pushed widget ──────────────────────────────────────── */
.last-pushed {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px 24px;
  margin-bottom: 64px;
}
.lp-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lp-time {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.lp-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* ── Roadmap hero ────────────────────────────────────────────── */
.rm-hero { margin-bottom: 72px; max-width: 800px; }
.rm-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rm-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--cyan);
  flex-shrink: 0;
}
.rm-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 14px;
  text-wrap: balance;
}
.rm-subhead {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* ── Feature grid (2 cols × 3 rows) ─────────────────────────── */
.rm-section { margin-bottom: 80px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 24px;
}
.feature-card {
  background: var(--bg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.2s;
}
.feature-card:hover { background: var(--surface); }
.fc-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.fc-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
}
.fc-badge {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-top: 8px;
}
.fc-badge--built    { background: var(--cyan); color: #131313; }
.fc-badge--becoming { border: 1px solid var(--cyan); color: var(--cyan); }
.fc-badge--planned  { border: 1px solid var(--text-dim); color: var(--text-dim); }
.fc-badge--dreaming { border: 1px dashed var(--border); color: var(--border); }

/* ── Build log (roadmap page) ────────────────────────────────── */
.bl-entry {
  border-bottom: 1px solid var(--border-dim);
  padding: 24px 0;
}
.bl-entry:first-child { border-top: 1px solid var(--border-dim); }
.bl-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bl-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  min-width: 100px;
}
.bl-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
  padding: 2px 6px;
}
.bl-tag--email    { color: var(--cyan);  border-color: rgba(0, 251, 251, 0.3); }
.bl-tag--personal { color: #fb923c;     border-color: rgba(251, 146, 60, 0.3); }
.bl-tag--system   { color: var(--text-dim); border-color: var(--border); }
.bl-tag--work     { color: #60a5fa;     border-color: rgba(96, 165, 250, 0.3); }
.bl-tag--core     { color: #f87171;     border-color: rgba(248, 113, 113, 0.3); }

.bl-status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
  padding: 2px 6px;
}
.bl-status--shipped  { color: #a3e635;     border-color: rgba(163, 230, 53, 0.3); }
.bl-status--becoming { color: #fb923c;     border-color: rgba(251, 146, 60, 0.3); }
.bl-status--planned  { color: var(--text-dim); border-color: var(--border); }
.bl-status--dreaming { color: var(--border);   border-color: var(--border-dim); }

.bl-headline {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-wrap: pretty;
}
.bl-summary {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 12px;
}
.bl-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.bl-tools-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.bl-tool-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid var(--border-dim);
  padding: 1px 7px;
  letter-spacing: 0.03em;
}
.bl-more {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.bl-more:hover { color: var(--cyan); }

/* ── Roadmap CTA ─────────────────────────────────────────────── */
.roadmap-cta {
  padding-top: 64px;
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.rm-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .roadmap-wrap { padding: 48px 20px 80px; }
  .feature-grid { grid-template-columns: 1fr; }
  .last-pushed { width: 100%; }
}