/* ══════════════════════════════════════════════════════════════
   LAYOUT — HUD chrome, rail, hero, section shell, footer
   ══════════════════════════════════════════════════════════════ */

/* ── TOP BAR ───────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: var(--hair) solid var(--line);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.topbar__id { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.topbar__glyph { width: 17px; height: 17px; color: var(--flare); transition: transform 0.6s var(--ease); }
.topbar__id:hover .topbar__glyph { transform: rotate(180deg); }
.topbar__name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 115, "wght" 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.94rem;
}
.topbar__sep { color: var(--flare); font-family: var(--font-mono); font-size: var(--t-xs); }
.topbar__role { color: var(--ink-dim); font-size: var(--t-micro); }

.topbar__nav { display: flex; align-items: center; gap: var(--s-1); }
.navlink {
  position: relative;
  display: flex; align-items: baseline; gap: 0.45em;
  padding: 0.5rem 0.7rem;
  font-size: var(--t-micro);
  letter-spacing: var(--tr-wide);
  color: var(--ink-dim);
  transition: color 0.25s var(--ease);
}
.navlink i { font-style: normal; color: var(--flare); opacity: 0.5; font-size: 0.9em; }
.navlink::after {
  content: "";
  position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.32rem;
  height: var(--hair);
  background: var(--flare);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.navlink:hover, .navlink.is-active { color: var(--ink); }
.navlink:hover::after, .navlink.is-active::after { transform: scaleX(1); }
.navlink.is-active i { opacity: 1; }

.topbar__aux { display: flex; align-items: center; gap: var(--s-4); flex: none; }

.pulse {
  width: 7px; height: 7px;
  background: var(--flare);
  flex: none;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--flare) 60%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.tbtn {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-dim);
  border: var(--hair) solid var(--line);
  padding: 0.38rem 0.6rem;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.tbtn:hover { color: var(--flare-ink); background: var(--flare); border-color: var(--flare); }
.tbtn--menu { display: none; }

/* ── SIDE RAIL ─────────────────────────────────────────────── */
.rail {
  position: fixed;
  left: 0; top: var(--bar-h); bottom: 0;
  width: var(--rail-w);
  z-index: 80;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-5);
  border-right: var(--hair) solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rail__track {
  position: absolute;
  left: 50%; top: var(--s-6); bottom: var(--s-6);
  width: var(--hair);
  background: var(--line-soft);
  transform: translateX(-50%);
}
.rail__track i {
  position: absolute; top: 0; left: 0; right: 0;
  height: 0%;
  background: var(--flare);
  display: block;
}

.rail__list { display: flex; flex-direction: column; gap: var(--s-5); position: relative; z-index: 1; }
.rail__item a {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  font-size: var(--t-micro);
  color: var(--ink-faint);
  background: var(--bg);
  border: var(--hair) solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.rail__item a:hover { color: var(--ink); border-color: var(--line); }
.rail__item.is-active a { color: var(--flare-ink); background: var(--flare); border-color: var(--flare); }

/* ── PAGE FLOW ─────────────────────────────────────────────── */
.hero, main, .foot { padding-left: var(--rail-w); }

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(var(--bar-h) + var(--s-8));
  overflow: hidden;
}

.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, var(--line-soft) var(--hair), transparent var(--hair));
  background-size: clamp(48px, 7vw, 96px) clamp(48px, 7vw, 96px);
  mask-image: radial-gradient(120% 90% at 18% 22%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 18% 22%, #000 0%, transparent 72%);
  pointer-events: none;
}

.hero__head {
  position: relative;
  padding: 0 var(--gutter);
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}

/* Hero settles in as the loader lifts. Scoped to .has-js so the content is
   never hidden from a visitor whose JS never runs. */
html.has-js .hero__head > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.is-booted .hero__head > * { opacity: 1; transform: none; }
html.is-booted .hero__head > *:nth-child(2) { transition-delay: 0.07s; }
html.is-booted .hero__head > *:nth-child(3) { transition-delay: 0.14s; }
html.is-booted .hero__head > *:nth-child(4) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  html.has-js .hero__head > * { opacity: 1; transform: none; }
}
.hero__title { margin: var(--s-5) 0 var(--s-6); }

.hero__line {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 122, "wght" 880;
  text-transform: uppercase;
  font-size: var(--t-hero);
  line-height: 0.82;
  letter-spacing: -0.05em;
}

/* Outlined second line with an offset accent plate behind it — the
   misregistered-print effect, done with two strokes rather than a fill. */
.hero__line--out {
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.16vw, 2.5px) var(--ink);
  position: relative;
  isolation: isolate;
}
.hero__line--out::after {
  content: attr(data-echo);
  position: absolute; left: 0; top: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.16vw, 2.5px) var(--flare);
  opacity: 0.8;
  transform: translate(0.05em, 0.028em);
  pointer-events: none;
}

/* A short second line is balanced by a rule running out to the margin,
   rather than left floating in the middle of the measure. */
.hero__row { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.6rem); }
.hero__bar {
  flex: 1;
  height: clamp(3px, 0.55vw, 8px);
  background: var(--flare);
  transform-origin: left;
  animation: barIn 0.9s var(--ease-sharp) 0.25s both;
}
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__lede {
  max-width: 46ch;
  font-size: var(--t-lg);
  line-height: 1.32;
  color: var(--ink-dim);
  font-variation-settings: "wdth" 100, "wght" 400;
  letter-spacing: var(--tr-snug);
}
.hero__lede b { color: var(--ink); font-variation-settings: "wdth" 100, "wght" 650; }

.hero__foot {
  position: relative;
  padding: var(--s-5) var(--gutter);
  border-top: var(--hair) solid var(--line);
}

/* Data strip along the bottom edge. */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-5) var(--s-6);
}
.readout > div { display: flex; flex-direction: column; gap: 0.35rem; }
.readout dt { color: var(--ink-faint); font-size: var(--t-micro); letter-spacing: var(--tr-wider); }
.readout dd {
  color: var(--ink);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  display: flex; align-items: baseline; gap: 0.5rem;
}
/* Baseline-aligned so the dash stays put when a value wraps. */
.readout dd::before {
  content: "";
  width: 0.55rem; height: var(--hair);
  background: var(--flare);
  flex: none;
  transform: translateY(-0.3em);
}

.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }

/* ── TICKER ────────────────────────────────────────────────── */
.ticker {
  position: relative;
  overflow: hidden;
  border-top: var(--hair) solid var(--line);
  background: var(--surface);
  height: 2.4rem;
  display: flex; align-items: center;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.ticker__track {
  display: flex; gap: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink-faint);
  animation: tick 42s linear infinite;
  will-change: transform;
}
.ticker__track span { display: inline-flex; align-items: center; gap: var(--s-6); }
.ticker__track span::after { content: "/"; color: var(--flare); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ── SECTION SHELL ─────────────────────────────────────────── */
.sec {
  position: relative;
  padding: var(--section-y) var(--gutter);
  border-top: var(--hair) solid var(--line);
  scroll-margin-top: var(--bar-h);
}
.sec--tint { background: var(--bg-2); }

.sec__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: var(--s-6) var(--s-7);
  align-items: start;
  margin-bottom: var(--s-8);
  max-width: var(--maxw);
}

.sec__marker {
  position: sticky;
  top: calc(var(--bar-h) + var(--s-5));
  display: flex; flex-direction: column; gap: var(--s-3);
}
.sec__no {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 120, "wght" 850;
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-hard);
}
.sec__label { color: var(--flare); font-size: var(--t-micro); letter-spacing: var(--tr-wider); }

.sec__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 116, "wght" 820;
  text-transform: uppercase;
  font-size: var(--t-xxl);
  line-height: 0.88;
  letter-spacing: -0.04em;
}
.sec__intro {
  margin-top: var(--s-5);
  max-width: 54ch;
  color: var(--ink-dim);
  font-size: var(--t-md);
  line-height: 1.6;
}

.sec__body { max-width: var(--maxw); }

/* ── FOOTER ────────────────────────────────────────────────── */
.foot { padding-bottom: var(--s-5); }
.foot__rule {
  height: 3rem;
  border-top: var(--hair) solid var(--line);
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 9px);
}
.foot__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5) var(--gutter) 0;
  color: var(--ink-faint);
  font-size: var(--t-micro);
}
.foot__mid { letter-spacing: var(--tr-wider); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .sec__head { grid-template-columns: 1fr; }
  .sec__marker { position: static; flex-direction: row; align-items: baseline; gap: var(--s-4); }
  .sec__no { font-size: 3rem; }
}

@media (max-width: 860px) {
  :root { --rail-w: 0rem; }
  .rail { display: none; }
  .hero, main, .foot { padding-left: 0; }

  .tbtn--menu { display: block; }
  .topbar__nav {
    position: fixed;
    top: var(--bar-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: var(--hair) solid var(--line);
    padding: var(--s-2) var(--gutter) var(--s-5);
    transform: translateY(-115%);
    transition: transform 0.5s var(--ease-sharp);
    box-shadow: 0 30px 60px -20px var(--shade);
  }
  .topbar__nav.is-open { transform: none; }
  .navlink { padding: 0.85rem 0; font-size: var(--t-xs); border-bottom: var(--hair) solid var(--line-soft); }
  .navlink::after { left: 0; right: auto; width: 2rem; bottom: 0.4rem; }

  .readout { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-5); }
  .hero__line { letter-spacing: -0.03em; }
}

@media (max-width: 520px) {
  .topbar__role, .topbar__sep { display: none; }
  .foot__mid { display: none; }
}