/* Design tokens — dark ink/paper palette with survival accents */
:root {
  --ink: #0c0c0c;
  --paper: #fbfbfc;
  --shade-900: #121315;
  --shade-800: #202226;
  --shade-700: #2c3035;
  --shade-600: #383c42;
  --shade-500: #4d5259;
  --shade-300: #919296;
  --fire: #f0a12e;     /* sodium streetlight — primary accent */
  --blood: #d9434b;
  --cold: #6fb7d8;
  --toxic: #9bd14b;
  --concrete: #8d8a82;
  --gold: #f7c600;
  --rail: 5rem;
  --head: 6rem;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --pad-l: 6.25rem;
  --pad-r: 11.25rem;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--paper); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
svg { fill: currentColor; }
[hidden] { display: none !important; }

.shell { display: flex; min-height: 100vh; }
.page { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Left rail ---------- */
.rail {
  position: relative; z-index: 40; width: var(--rail); flex-shrink: 0;
  background: var(--shade-900); border-right: 1px solid var(--shade-800);
}
.rail-logo {
  position: sticky; top: 0; height: var(--head); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .25rem;
  border-bottom: 1px solid var(--shade-800); background: var(--shade-900);
  font-family: var(--font-display); text-transform: uppercase;
}
.rail-logo img { width: 2rem; height: 2rem; }
.rail-word { font-size: .72rem; font-weight: 800; letter-spacing: .1em; line-height: 1; }
.rail-sub { font-size: .62rem; font-weight: 500; letter-spacing: .3em; color: var(--shade-300); line-height: 1; }
.rail-dots {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); width: var(--rail);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.rail-dots button {
  width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--paper);
  opacity: .7; position: relative; transition: opacity .3s;
}
.rail-dots button::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--paper);
  transform: scale(0); transition: transform .3s;
}
.rail-dots button:hover { opacity: 1; }
.rail-dots button.is-active { opacity: 1; }
.rail-dots button.is-active::after { transform: scale(1); }
.rail-dots button span {
  position: absolute; left: 1.8rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; white-space: nowrap; background: var(--paper); color: var(--ink);
  padding: .15rem .45rem; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.rail-dots button:hover span { opacity: 1; }

/* ---------- Top header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--head); margin-bottom: calc(var(--head) * -1);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1.5rem;
  background: rgba(12, 12, 12, .48); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-display);
}
.mainnav { grid-column: 2; display: flex; gap: 1.75rem; }
.mainnav a {
  font-size: 1.15rem; font-weight: 700; text-transform: uppercase; color: var(--shade-300);
  padding: .25rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.mainnav a:hover { color: var(--paper); }
.mainnav a.active { color: var(--paper); border-color: var(--paper); }
.mainnav a.nav-dev { color: var(--fire); }
.mainnav a.nav-dev:hover, .mainnav a.nav-dev.active { color: var(--fire); border-color: var(--fire); }
.top-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2rem; }
.socials { display: flex; gap: 1.6rem; }
.account {
  display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 1rem;
  border: 1px solid var(--shade-600); font-size: 1rem; font-weight: 700; text-transform: uppercase;
  transition: border-color .2s, background .2s, color .2s;
}
.account svg { width: 1.1rem; height: 1.1rem; }
.account:hover { border-color: var(--paper); background: rgba(251,251,252,.08); }
.account.is-in { border-color: var(--fire); color: var(--fire); }
.socials a { display: grid; place-items: center; transition: color .2s, transform .2s; }
.socials svg { width: 1.6rem; height: 1.6rem; }
.socials a:hover { color: var(--fire); transform: translateY(-2px); }
.burger { display: none; }

/* ---------- Element art (CSS-only illustrations) ---------- */
[class*="art-"] { position: absolute; inset: 0; background-size: cover; }
[class*="art-"]::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); mix-blend-mode: overlay; opacity: .35; }
/* Real screenshot loaded into a slot: replaces the gradient art */
[class*="art-"].has-img { background: var(--img) center / cover no-repeat; filter: none; }
[class*="art-"].has-img::before, [class*="art-"].has-img::after { display: none; }
/* Panel-block silhouette with a window grid, reused by several placeholders */
.art-s1::before, .art-s3::before, .art-f1::before, .art-card-2::before {
  content: ""; position: absolute;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, #0b0b0c 18px 30px),
    repeating-linear-gradient(0deg, #0b0b0c 0 12px, var(--win, #24221d) 12px 28px);
  box-shadow: 0 0 0 10px #0b0b0c;
}
.art-s1 {
  background:
    radial-gradient(ellipse 22% 38% at 78% 72%, #ffcf7a 0%, #f0a12e66 30%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%, #3a2a12 0%, transparent 70%),
    linear-gradient(180deg, #0d1016 0%, #141414 55%, #0c0c0c 100%);
}
.art-s1::before { left: 10%; width: 52%; bottom: 12%; height: 62%; --win: #2a2418; }
.art-s2 {
  background:
    radial-gradient(ellipse 30% 25% at 30% 80%, #9bd14b33 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 30%, #6fb7d833 0%, transparent 70%),
    repeating-linear-gradient(100deg, transparent 0 60px, #ffffff06 60px 64px),
    linear-gradient(180deg, #0c1215 0%, #0a0d0e 60%, #0c0c0c 100%);
}
.art-s3 {
  background:
    radial-gradient(circle at 80% 20%, #dfe8ee55 0%, transparent 12%),
    radial-gradient(ellipse 80% 40% at 50% 100%, #10202a 0%, transparent 70%),
    linear-gradient(180deg, #0b1621 0%, #0c0f13 70%, #0c0c0c 100%);
}
.art-s3::before { left: 30%; right: 8%; bottom: 10%; height: 48%; --win: #1a2630; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; font-family: var(--font-display); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.slide.is-active { opacity: 1; }
.slide-art { transform: scale(1.08); transition: transform 8s ease-out; }
.slide.is-active .slide-art { transform: scale(1); }
.slide::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(12,12,12,.9) 0%, transparent 45%), linear-gradient(90deg, rgba(12,12,12,.55) 0%, transparent 50%);
}
.slide-copy {
  position: absolute; z-index: 2; left: var(--pad-l); bottom: 4.5rem; max-width: 40rem;
  transform: translateY(20px); opacity: 0; transition: all .8s .3s ease;
}
.slide.is-active .slide-copy { transform: none; opacity: 1; }
.kicker { display: inline-block; margin-bottom: .9rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--fire); }
.slide-copy h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 800; text-transform: uppercase; line-height: .95; }
.slide-copy p { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55; color: #d9d9dc; margin-top: 1rem; max-width: 32rem; }
.play {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 9.5rem; height: 9rem; background: var(--paper); color: var(--ink); display: grid; place-items: center;
  transition: transform .3s, background .3s;
}
.play svg { width: 4rem; height: 4rem; }
.play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--fire); }
.slide-count { position: absolute; z-index: 3; right: var(--pad-r); bottom: 4.5rem; display: flex; align-items: center; gap: 1rem; }
.count-num { font-size: 1.75rem; font-weight: 700; }
.count-bars { display: flex; gap: .35rem; }
.count-bars button { width: 1.6rem; height: 3px; background: var(--shade-500); transition: background .3s, width .3s; }
.count-bars button.is-active { background: var(--paper); width: 2.4rem; }

/* ---------- News ---------- */
.news { position: relative; font-family: var(--font-display); }
.wrap { padding: min(15rem, 15svh) var(--pad-r) min(15rem, 15svh) var(--pad-l); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { font-size: 2rem; font-weight: 600; text-transform: uppercase; line-height: 1.1; }
.news-bar { margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.chips { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.chip { font-size: 1.25rem; padding: .5rem 1rem; letter-spacing: .02em; color: rgba(251,251,252,.9); transition: color .3s, background .3s; }
.chip:hover { color: var(--fire); }
.chip.is-active { background: var(--paper); color: var(--ink); }
.sep { width: 1px; height: 2rem; background: var(--shade-600); }
.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem; height: 4rem; padding: 0 2rem;
  border: 1px solid #e6e6e8; font-size: 1.25rem; font-weight: 600; text-transform: uppercase; transition: background .3s;
}
.btn-outline svg { width: 1.1rem; height: 1.1rem; }
.btn-outline:hover { background: rgba(251,251,252,.1); }
.cards { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.card {
  position: relative; overflow: hidden; height: min(45rem, 50svh); background: var(--shade-700);
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s;
}
.card.in { opacity: 1; transform: none; }
.card.is-hidden { display: none; }
.card-art { transition: transform .6s ease; }
.card:hover .card-art { transform: scale(1.05); }
.card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--hover); mix-blend-mode: color; opacity: 0; transition: opacity .3s; }
.card:hover::before { opacity: 1; }
.card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(12,12,12,.95) 0%, rgba(12,12,12,.3) 45%, transparent 70%); }
.tag { position: absolute; z-index: 2; top: 1rem; left: 1rem; background: var(--paper); color: var(--ink); font-size: .85rem; font-weight: 700; text-transform: uppercase; padding: .25rem .6rem; }
.card-body { position: relative; z-index: 2; padding: 1.5rem; }
.card-body h3 { font-size: 1.9rem; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.more { display: inline-block; margin-top: 1rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.art-card-1 { background: radial-gradient(ellipse 40% 30% at 50% 35%, #f0a12e 0%, #7a3e0c 35%, transparent 70%), repeating-linear-gradient(90deg, #0000 0 22px, #f0a12e14 22px 24px), linear-gradient(#1c1208, #0c0c0c); }
.art-card-2 { background: radial-gradient(ellipse at 50% 10%, #9bd14b44 0%, transparent 60%), linear-gradient(#141a10, #0c0c0c); }
.art-card-2::before { left: 18%; right: 18%; top: 14%; bottom: 38%; --win: #2b3322; }
.art-card-3 {
  background:
    linear-gradient(35deg, transparent 47%, #6fb7d855 48% 50%, transparent 51%),
    linear-gradient(-60deg, transparent 60%, #f0a12e55 61% 62%, transparent 63%),
    repeating-linear-gradient(0deg, #0000 0 40px, #ffffff0c 40px 41px),
    repeating-linear-gradient(90deg, #0000 0 40px, #ffffff0c 40px 41px),
    linear-gradient(#0b1820, #0c0c0c);
}
.art-card-4 { background: radial-gradient(circle at 55% 35%, #d9434b 0%, #5a1418 30%, transparent 62%), linear-gradient(#1a0809, #0c0c0c); }

/* ---------- Feature panels ---------- */
.feature { position: relative; aspect-ratio: 2480 / 1440; max-height: 100svh; width: 100%; overflow: hidden; font-family: var(--font-display); }
.feature-media { position: absolute; inset: 0; padding: 0 var(--pad-r) 0 var(--pad-l); }
.feature-media > .feature-art { position: relative; height: 100%; inset: auto; }
.feature-box { position: absolute; z-index: 2; width: 44.5rem; max-width: calc(100% - 3rem); padding: 1.5rem; transition: opacity .8s, transform .8s; }
.feature-box h2 { font-size: 4rem; line-height: 4.25rem; font-weight: 800; text-transform: uppercase; }
.feature-box p { margin-top: 1rem; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55; opacity: .78; max-width: 34rem; }
.box-dark { background: var(--ink); color: #f3f3f4; }
.box-light { background: var(--paper); color: var(--shade-900); }
.pos-bl { left: var(--pad-l); bottom: 15rem; }
.pos-tr { right: var(--pad-r); top: 15rem; }
.reveal-left { opacity: 0; transform: translateX(-32px); }
.reveal-right { opacity: 0; transform: translateX(32px); }
.reveal-up { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
.in.reveal-left, .in.reveal-right, .in.reveal-up { opacity: 1; transform: none; }
.art-f1 { background: radial-gradient(ellipse 30% 40% at 30% 70%, #f0a12e44, transparent 70%), linear-gradient(#15140f, #0b0b0a); }
.art-f1::before { left: 46%; right: 8%; top: 14%; bottom: 10%; --win: #2a2418; }
.art-f2 { background: radial-gradient(ellipse 35% 50% at 65% 55%, #9bd14b55, transparent 70%), repeating-radial-gradient(circle at 65% 55%, #0000 0 40px, #9bd14b12 40px 42px), linear-gradient(200deg, #121a0d, #070906); }
.art-f3 { background: radial-gradient(ellipse 40% 45% at 70% 55%, #d9434b66, #5a141800 70%), radial-gradient(circle at 25% 30%, #2a0b0d, transparent 55%), linear-gradient(120deg, #140708, #0b0505); }
.art-f4 { background: repeating-linear-gradient(105deg, #0000 0 26px, #ffffff0b 26px 28px), radial-gradient(ellipse 70% 40% at 50% 25%, #6fb7d855, transparent 70%), linear-gradient(#162430, #0a0f14); }
.art-f5 { background: repeating-linear-gradient(0deg, #0000 0 60px, #f0a12e16 60px 62px), repeating-linear-gradient(90deg, #0000 0 60px, #f0a12e16 60px 62px), radial-gradient(ellipse 50% 50% at 40% 50%, #f0a12e33, transparent 70%), linear-gradient(#17130c, #0a0907); }

/* ---------- The Map band ---------- */
.mapband { position: relative; overflow: hidden; font-family: var(--font-display); border-top: 1px solid var(--shade-800); border-bottom: 1px solid var(--shade-800); }
.mapband-art {
  position: absolute; inset: 0; opacity: .55;
  background:
    linear-gradient(28deg, transparent 49.6%, #f0a12e66 49.8% 50.2%, transparent 50.4%),
    linear-gradient(-58deg, transparent 49.7%, #f0a12e40 49.8% 50.2%, transparent 50.3%),
    linear-gradient(95deg, transparent 69.8%, #ffffff22 70% 70.3%, transparent 70.5%),
    repeating-linear-gradient(0deg, #0000 0 47px, #ffffff0a 47px 48px),
    repeating-linear-gradient(90deg, #0000 0 47px, #ffffff0a 47px 48px),
    radial-gradient(ellipse 60% 70% at 80% 50%, #1a1c20, #0c0c0c 70%);
}
.mapband-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 25%, transparent 80%); }
.mapband-inner { position: relative; padding: 8rem var(--pad-r) 8rem var(--pad-l); }
.mapband-lead, .roadmap-lead { margin-top: 1.25rem; max-width: 38rem; font-family: var(--font-body); font-size: 1.1rem; line-height: 1.6; color: #cfd0d3; }
.stats { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.stats li { border-left: 2px solid var(--fire); padding-left: 1.25rem; }
.stats b { display: block; font-size: 4rem; font-weight: 800; line-height: 1; }
.stats small { font-size: .45em; font-weight: 700; color: var(--shade-300); margin: 0 .1em; }
.stats span { display: block; margin-top: .5rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--shade-300); }

/* ---------- Public roadmap ---------- */
.roadmap { font-family: var(--font-display); background: var(--shade-900); border-top: 1px solid var(--shade-800); }
.roadmap .wrap { min-height: 0; }
.phases { list-style: none; margin-top: 3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.phase { background: var(--ink); border: 1px solid var(--shade-800); padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.phase-id { font-size: .9rem; font-weight: 700; letter-spacing: .12em; color: var(--shade-300); }
.phase h3 { font-size: 1.6rem; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.phase-state { margin-top: auto; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--shade-300); }
.phase-bar { height: 4px; background: var(--shade-700); }
.phase-bar i { display: block; height: 100%; background: var(--fire); }
.phase.is-done .phase-state { color: var(--toxic); } .phase.is-done .phase-bar i { background: var(--toxic); }
.phase.is-now { border-color: var(--fire); } .phase.is-now .phase-state { color: var(--fire); }

/* ---------- Footer ---------- */
.footer { margin-top: auto; font-family: var(--font-display); border-top: 1px solid var(--shade-800); background: var(--shade-900); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 3rem; padding: 5rem var(--pad-r) 4rem var(--pad-l); }
.brand-lockup { display: flex; align-items: center; gap: .9rem; text-transform: uppercase; }
.brand-lockup img { width: 3rem; height: 3rem; }
.brand-lockup b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: .1em; line-height: 1; }
.brand-lockup i { display: block; font-style: normal; font-size: 1rem; letter-spacing: .35em; color: var(--shade-300); }
.footer-brand p { margin-top: 1.5rem; font-family: var(--font-body); font-size: .95rem; line-height: 1.6; color: var(--shade-300); max-width: 22rem; }
.footer h4 { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.footer li + li { margin-top: .6rem; }
.footer li a { font-size: 1.1rem; color: var(--shade-300); transition: color .2s; }
.footer li a:hover { color: var(--paper); }
.footer-follow p { font-size: 1.1rem; margin-bottom: 1rem; }
.socials.small { gap: 1.2rem; justify-self: start; }
.socials.small svg { width: 1.4rem; height: 1.4rem; }
.footer-bottom { display: flex; align-items: center; gap: 2rem; padding: 1.5rem var(--pad-r) 1.5rem var(--pad-l); border-top: 1px solid var(--shade-800); font-size: 1rem; color: var(--shade-300); }
.cookie-link:hover { color: var(--paper); }
.to-top { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-transform: uppercase; color: var(--paper); }
.to-top svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Cookie notice ---------- */
.cookie {
  position: fixed; z-index: 60; right: 3rem; bottom: 3rem; width: 22.5rem; max-width: calc(100vw - 2rem);
  background: #0a0a0a; padding: 2.5rem 3rem 3rem; font-family: var(--font-display); box-shadow: 0 20px 60px #0008;
  animation: rise .5s ease;
}
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.cookie-close { position: absolute; right: 2rem; top: 1.3rem; display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; text-transform: uppercase; }
.cookie-close svg { width: 1rem; height: 1rem; }
.cookie h3 { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; margin: 1rem 0; }
.cookie p { font-size: 1.05rem; line-height: 1.5; color: #ddd; }
.btn-block { display: block; width: 100%; height: 2.25rem; margin-top: .75rem; border: 1px solid var(--paper); font-weight: 600; text-transform: uppercase; transition: background .2s, color .2s; }
.btn-block:first-of-type { margin-top: 1.5rem; }
.btn-block:hover { background: var(--paper); color: var(--ink); }

/* ---------- Modal & drawer ---------- */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.85); display: grid; place-items: center; padding: 1rem; }
.modal-inner { position: relative; width: min(1100px, 100%); }
.modal-video video, .modal-video iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.modal-video { aspect-ratio: 16/9; background: var(--shade-800); display: grid; place-items: center; color: var(--shade-300); font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; }
.modal-close { position: absolute; top: -2.75rem; right: 0; }
.modal-close svg { width: 2rem; height: 2rem; }
.drawer .nav-dev { color: var(--fire); }

/* ---------- Post reader & sign-in ---------- */
.post-reader { position: relative; width: min(820px, 100%); max-height: calc(100svh - 4rem); overflow: auto; background: var(--shade-900); border: 1px solid var(--shade-800); }
.post-reader .modal-close { position: sticky; top: .75rem; float: right; margin-right: .75rem; z-index: 2; background: var(--ink); padding: .2rem; }
.post-cover { aspect-ratio: 16 / 7; background: var(--shade-800) center / cover no-repeat; }
.post-cover:not([style]) { display: none; }
.post-text { padding: 2rem 2.5rem 2.5rem; }
.tag.static { position: static; display: inline-block; font-family: var(--font-display); }
.post-text time { margin-left: .75rem; font-family: var(--font-display); color: var(--shade-300); text-transform: uppercase; letter-spacing: .06em; }
.post-text h2 { margin-top: 1rem; font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
.post-body { margin-top: 1.25rem; font-size: 1.02rem; line-height: 1.7; color: #d7d8db; }
.post-body p + p, .post-body ul { margin-top: .9rem; }
.post-body ul { padding-left: 1.2rem; list-style: disc; }
.post-body h3 { margin-top: 1.4rem; font-family: var(--font-display); font-size: 1.4rem; text-transform: uppercase; color: var(--paper); }
.post-body code { background: var(--shade-800); padding: .05rem .35rem; font-size: .9em; }
.post-body a { color: var(--fire); text-decoration: underline; }

.login-box { position: relative; width: min(24rem, 100%); background: #0a0a0a; border: 1px solid var(--shade-800); padding: 2.5rem 2.25rem 2.25rem; font-family: var(--font-display); box-shadow: 0 20px 60px #0008; animation: rise .35s ease; }
.login-box .modal-close { top: 1rem; right: 1rem; }
.login-box .modal-close svg { width: 1.5rem; height: 1.5rem; }
.login-box img { width: 2.5rem; height: 2.5rem; }
.login-box h3 { margin: .75rem 0 1.25rem; font-size: 1.8rem; font-weight: 800; text-transform: uppercase; }
.login-box label { display: block; margin-top: .9rem; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--shade-300); }
.login-box input { display: block; width: 100%; margin-top: .35rem; height: 2.75rem; padding: 0 .85rem; background: var(--shade-900); border: 1px solid var(--shade-600); color: var(--paper); font: 1rem var(--font-body); }
.login-box input:focus { outline: none; border-color: var(--fire); }
.login-error { min-height: 1.4rem; margin-top: .9rem; font-family: var(--font-body); font-size: .9rem; color: var(--blood); }
.btn-solid { height: 2.9rem; background: var(--paper); color: var(--ink); font-size: 1.1rem; }
.btn-solid:hover { background: var(--fire); border-color: var(--fire); }
.btn-block.btn-solid:first-of-type { margin-top: .25rem; }

.drawer { position: fixed; z-index: 45; inset: 4rem 0 0; background: var(--ink); display: flex; flex-direction: column; padding: 2rem 1.5rem; gap: 1.25rem; font-family: var(--font-display); }
.drawer a { font-size: 2.25rem; font-weight: 800; text-transform: uppercase; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  :root { --pad-l: 3.5rem; --pad-r: 5rem; }
  .feature-box h2 { font-size: 3rem; line-height: 3.2rem; }
  .pos-bl { bottom: 8rem; } .pos-tr { top: 8rem; }
}
@media (max-width: 1024px) {
  :root { --pad-l: 2.5rem; --pad-r: 2.5rem; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .card { height: auto; aspect-ratio: 526 / 720; }
  .feature { aspect-ratio: auto; max-height: none; padding-bottom: 2.5rem; }
  .feature-media { position: relative; padding: 0 var(--pad-r) 0 var(--pad-l); aspect-ratio: 2200 / 1440; }
  .feature-box { position: relative; inset: auto; width: auto; max-width: none; margin: 1.5rem var(--pad-r) 0 var(--pad-l); }
  .feature-box h2 { font-size: 2.25rem; line-height: 1.07; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .socials { display: none; }
  .mainnav { gap: 1.25rem; }
}
@media (max-width: 767px) {
  :root { --head: 4rem; --pad-l: 1rem; --pad-r: 1rem; }
  .rail { display: none; }
  .topbar { grid-template-columns: auto 1fr; padding: 0 1rem; }
  .mainnav { display: none; }
  .top-right { grid-column: 2; gap: 1rem; }
  .account { height: 2.2rem; padding: 0 .75rem; font-size: .85rem; }
  .mapband-inner { padding: 4rem 1rem; }
  .stats b { font-size: 2.6rem; }
  .post-text { padding: 1.5rem 1.25rem 2rem; }
  .post-text h2 { font-size: 1.9rem; }
  .burger { display: flex; flex-direction: column; gap: 6px; width: 28px; }
  .burger span { height: 2px; background: var(--paper); transition: transform .3s; }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .play { width: 5.5rem; height: 5.25rem; }
  .play svg { width: 2.4rem; height: 2.4rem; }
  .slide-copy { right: 1rem; bottom: 6.5rem; }
  .slide-count { right: auto; left: 1rem; bottom: 2rem; }
  .wrap { padding-top: 4rem; padding-bottom: 6rem; min-height: 0; }
  .eyebrow { font-size: 1.25rem; }
  .chips { gap: 1.25rem; }
  .chip { font-size: .8rem; padding: .3rem .6rem; }
  .btn-outline { height: 2.5rem; padding: 0 1.25rem; font-size: .8rem; }
  .cards { grid-template-columns: 1fr; }
  .feature-media { aspect-ratio: 4 / 3; }
  .feature-box { padding: .95rem; }
  .feature-box h2 { font-size: 1.9rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding-top: 3rem; }
  .footer-bottom { flex-wrap: wrap; gap: 1rem; }
  .cookie { right: 1rem; bottom: 1rem; padding: 2rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}