/* =============================================================
   Reuben Cullum-Hall — bold editorial redesign (experiment)
   Self-contained. Dark monochrome, no status-widget chrome,
   no animated gimmicks. Type and space do the work.
   ============================================================= */

:root {
  --bg:        #070707;
  --bg-raise:  #0F0F0E;
  --ink:       #F5F4F1;
  --ink-2:     #9C988F;
  --ink-3:     #5C5955;
  --line:      #201F1C;
  --line-2:    #35332F;

  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1280px;
  --pad:  clamp(1.25rem, 5vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* keep anchored sections clear of the sticky header (76px) */
#top, #who, #building, #contact { scroll-margin-top: 92px; }

body {
  position: relative;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1, "cv05" 1;
}

/* ---------- Night sky ----------
   A fixed canvas of drifting stars, plus a document-anchored veil that
   lifts the black very slightly at the top of the page. Both sit behind
   the content; the mission statement's opaque slab deliberately covers
   them, which is the darkest point of the scroll. */
#sky {
  position: fixed; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
}
.sky-veil {
  position: absolute; top: 0; left: 0; right: 0; height: 170vh;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(112% 62% at 50% -12%, rgba(158,174,214,0.030), transparent 64%),
    radial-gradient(76% 44% at 86% 2%,   rgba(255,255,255,0.012), transparent 70%);
}
.hdr, main, .foot { position: relative; z-index: 1; }
.hdr { z-index: 60; }

/* Icon sprite — referenced by <use>, never itself displayed.
   Zero-sized rather than display:none, which would stop <use> resolving. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Type primitives ---------- */
.label {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3);
}
.h-hero {
  font-weight: 600; letter-spacing: -0.045em; line-height: 0.96;
  font-size: clamp(2.9rem, 9vw, 7rem);
}
.h-sec {
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.03;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
}
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.lead { color: var(--ink-2); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; max-width: 52ch; }
.prose { color: var(--ink-2); font-size: 1.18rem; line-height: 1.75; max-width: 60ch; }
.prose + .prose { margin-top: 1.35rem; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Oversized editorial numeral — the section marker as a design device */
.marker {
  font-weight: 600; color: var(--ink-3);
  font-size: clamp(2.6rem, 6vw, 4.75rem); line-height: 0.8;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.hdr.scrolled { border-bottom-color: var(--line); }
.hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; }
.wordmark { font-weight: 600; letter-spacing: -0.02em; font-size: 1.02rem; justify-self: start; }
.nav { display: flex; gap: clamp(1.2rem, 2.5vw, 2.5rem); align-items: center; justify-self: center; }
.nav a {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-2); transition: color .18s ease;
}
.nav a:hover { color: var(--ink); }
.social { display: inline-flex; align-items: center; gap: 0.1rem; justify-self: end; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--ink-3); transition: color .18s ease, background .18s ease; }
.social a:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.nav-btn { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; margin-right: -10px; align-items: center; justify-content: center; }
.nav-btn span, .nav-btn span::before, .nav-btn span::after { content: ""; display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
.nav-btn span { position: relative; }
.nav-btn span::before { position: absolute; top: -7px; left: 0; }
.nav-btn span::after { position: absolute; top: 7px; left: 0; }
.nav-btn[aria-expanded="true"] span { background: transparent; }
.nav-btn[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-btn[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sections / rhythm ---------- */
.section { padding-block: clamp(4.5rem, 11vw, 9.5rem); }
.rule { border: 0; border-top: 1px solid var(--line); }
.block-head { display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 2rem); margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.block-head .label { transform: translateY(-0.15em); }

/* ---------- Hero ---------- */
.hero {
  min-height: min(94vh, 940px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 5rem; padding-bottom: 4rem;
}
.hero .label { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.hero .h-hero { max-width: 15ch; }
.hero .h-hero em { font-style: normal; color: var(--ink-2); }

/* Hero title — JS splits it into its wrapped visual lines; each line floats up
   from the lower-left and settles onto its baseline, fading in on a per-line
   stagger. Held hidden until JS adds .lines-in, so the raw text never flashes. */
.hero-title { opacity: 0; }
.hero-title.lines-in { opacity: 1; }
.hero-title .ht-line { display: block; }
.hero-title .ht-line-in {
  display: inline-block;
  opacity: 0;
  transform: translate3d(-0.16em, 0.42em, 0);   /* start: below + to the left */
  will-change: transform, opacity;
}
.hero-title.lines-in .ht-line-in {
  animation: ht-line-in .8s cubic-bezier(.2, .9, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 0.1s);    /* line 1, then 2, then 3… */
}
@keyframes ht-line-in {
  from { opacity: 0; transform: translate3d(-0.16em, 0.42em, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title { opacity: 1; }
  .hero-title .ht-line-in { opacity: 1; transform: none; animation: none; }
}
.hero .serif {
  font-size: clamp(1.35rem, 2.5vw, 2rem); color: var(--ink-2);
  margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 32ch; line-height: 1.2;
}
.hero .serif em { color: var(--ink); font-style: italic; }

/* Hero line typewriter caret */
.type-caret {
  display: inline-block; width: 0.06em; height: 1.02em;
  margin-left: 0.08em; vertical-align: -0.14em;
  background: var(--ink); border-radius: 1px; opacity: 0;
}
.serif.typing .type-caret { opacity: 1; animation: caret-blink 1.05s steps(1, end) infinite; }
.serif.typed .type-caret { opacity: 0; animation: none; transition: opacity .55s ease; }
@keyframes caret-blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .type-caret { display: none; } }

.hero-foot { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* understated statement link (replaces button pair) */
/* Inter (not mono) reads softer here; kept small + quietly tracked so it stays a
   secondary cue — the blink-in below is what earns the eye, not the type. */
.jump {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 0.4rem; border-bottom: 1px solid var(--line-2);
  transition: gap .2s ease, border-color .2s ease;
}
.jump:hover { gap: 1.05rem; border-color: var(--ink); }
.jump .a { transition: transform .2s ease; }
.jump:hover .a { transform: translateY(2px); }

/* Blink-in: after the line finishes typing, the CTA simply fades in from 0 to full
   over 0.9s. .await-blink holds it hidden until JS fires the reveal. */
.jump.await-blink { opacity: 0; }
.jump.blink-in { animation: jump-blink-in 0.9s ease-in-out both; }
@keyframes jump-blink-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) { .jump.await-blink { opacity: 1; } }

/* ---------- Who / portrait ---------- */
.who { display: grid; grid-template-columns: 1fr minmax(300px, 460px); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.portrait { position: relative; }
.portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 46% 30%;
  filter: grayscale(1) contrast(1.05) brightness(1.02);
  border: 1px solid var(--line-2);
}
.portrait figcaption { margin-top: 0.9rem; }

/* stacked text blocks (why / shipped) */
.stack-block { display: grid; grid-template-columns: clamp(3rem,7vw,6rem) 1fr; gap: clamp(1.5rem,4vw,3.5rem); }
.stack-block + .stack-block { margin-top: clamp(3rem, 7vw, 5.5rem); padding-top: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--line); }
.stack-block .label { margin-bottom: 1.1rem; }

/* ---------- Big mission statement ---------- */
.statement { background: var(--bg-raise); border-block: 1px solid var(--line); }
.statement .label { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.big-quote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 6.2vw, 4.6rem); line-height: 1.08; letter-spacing: -0.025em;
  max-width: 20ch; color: var(--ink);
}
.big-quote + .prose { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Stat (days building) ---------- */
.stat { display: flex; align-items: flex-end; gap: clamp(1.25rem, 3vw, 2.5rem); flex-wrap: wrap; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.stat-num {
  font-weight: 600; letter-spacing: -0.04em; line-height: 0.82;
  font-size: clamp(4.5rem, 16vw, 11rem); font-variant-numeric: tabular-nums;
}
.stat-label { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); max-width: 12ch; padding-bottom: 0.75rem; }

/* ---------- Projects (editorial list, no cards) ---------- */
.projects { border-top: 1px solid var(--line); }
.proj { padding-block: clamp(2rem, 4.5vw, 3.25rem); border-bottom: 1px solid var(--line); }
.proj-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.proj-name { letter-spacing: -0.03em; }
.status { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.status.on { color: var(--ink); }

/* Power switch — the "Active" status boots up as it scrolls into view */
.power { display: inline-flex; align-items: center; gap: 0.7rem; align-self: center; white-space: nowrap; }
/* A status light, not a control — clicking replays the boot-up, never turns it off.
   -webkit-tap-highlight-color kills iOS's grey flash on tap. */
.switch {
  position: relative; display: inline-block; width: 42px; height: 23px; flex: none;
  padding: 0; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px; border: 1px solid var(--line-2); background: #0B0B0A;
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.knob {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 50%; background: var(--ink-3);
  transition: left .34s cubic-bezier(.5,1.65,.45,1), background .35s ease, box-shadow .35s ease;
}
.spark {
  position: absolute; top: 50%; left: calc(100% - 11px); transform: translate(-50%,-50%) scale(.2);
  width: 4px; height: 4px; border-radius: 50%; background: #FFF; opacity: 0; pointer-events: none;
}
.status-text {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); transition: color .35s ease; position: relative;
}
/* dim halo behind the label, lit only when on */
.status-text::before {
  content: ""; position: absolute; inset: -0.4em -0.6em; border-radius: 6px;
  background: radial-gradient(closest-side, rgba(245,244,241,.14), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}

/* ---- ON ---- */
.power.on .switch {
  border-color: var(--ink); background: #191917;
  box-shadow: inset 0 0 0 1px rgba(245,244,241,.12), 0 0 18px -5px rgba(245,244,241,.55);
}
.power.on .knob { left: calc(100% - 18px); background: var(--ink); box-shadow: 0 0 10px 1px rgba(245,244,241,.7); }
.power.on .status-text { color: var(--ink); animation: flicker-on 1.15s steps(1, end) both; }
.power.on .status-text::before { opacity: 1; }
.power.on .spark { animation: spark .55s ease-out .12s both; }

@keyframes spark {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.2); box-shadow: 0 0 0 0 rgba(255,255,255,.9); }
  22%  { opacity: 1; transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 9px 2px rgba(255,255,255,.95); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.5); box-shadow: 0 0 16px 9px rgba(255,255,255,0); }
}
@keyframes flicker-on {
  0%  { opacity: .15 } 6% { opacity: 1 } 10% { opacity: .25 } 15% { opacity: 1 }
  21% { opacity: .4 }  28% { opacity: 1 } 34% { opacity: .6 } 42% { opacity: 1 }
  52% { opacity: .8 }  60% { opacity: 1 } 100% { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .power.on .status-text, .power.on .spark { animation: none; }
}
.proj p { color: var(--ink-2); max-width: 62ch; margin-top: 1.1rem; font-size: 1.1rem; line-height: 1.7; }
.proj .meta { margin-top: 1.3rem; color: var(--ink-3); }
.proj .meta a { color: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,0.18); transition: color .18s ease, border-color .18s ease; }
.proj .meta a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.proj .meta a:active { color: var(--ink-2); }

/* ---------- Topics ---------- */
.topics { list-style: none; padding: 0; border-top: 1px solid var(--line); max-width: 68ch; }
.topics li { display: grid; grid-template-columns: 3.5ch 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: baseline; padding-block: clamp(1.2rem, 3vw, 1.75rem); border-bottom: 1px solid var(--line); font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink); }
.topics .t-num { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-3); }

/* ---------- Contact ---------- */
.contact .label { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.contact-h { max-width: 13ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.big-links { display: grid; gap: clamp(0.75rem, 2vw, 1.4rem); justify-items: start; }
.big-link {
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.05;
  font-size: clamp(1.6rem, 5.5vw, 3.5rem); color: var(--ink);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s ease; padding-bottom: 4px;
  display: inline-block;
}
.big-link:hover { background-size: 100% 1.5px; }
.big-link .sub { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 0.5rem; }

/* .socials — the old written-out list. Still used by experiment.html. */
.socials { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2.75rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line); }
.socials a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); transition: color .18s ease; }
.socials a:hover { color: var(--ink); }

/* ---------- Social buttons (a centred copy of the header's icon set) ---------- */
/* The icons sit in a band between two hairlines: this row's border-top and the
   footer's. Padding is symmetric and the section's bottom padding is zeroed, so
   the band centres the buttons instead of pinning them under the top rule.
   The clamp reproduces the old total band height, so nothing below shifts. */
.social-row {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: clamp(0.6rem, 1.6vw, 1rem);
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-block: clamp(3.25rem, 6.8vw, 6.125rem);
  border-top: 1px solid var(--line);
}
.section.contact { padding-bottom: 0; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 999px;
  color: var(--ink-2); background: var(--bg-raise);
  border: 1px solid var(--line-2);
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease,
              transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.social-btn svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.social-btn:hover {
  color: var(--bg); background: var(--ink); border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(245,244,241,.55), 0 2px 8px -4px rgba(245,244,241,.3);
}
.social-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.social-btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .social-btn:hover { transform: none; } }

/* ---------- Contact form (same send mechanism as the original site) ---------- */
.c-form { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); max-width: 720px; }
.c-form-label { display: block; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.c-fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.1rem); }
.c-span { grid-column: 1 / -1; }
.c-field { display: grid; gap: 0.6rem; }
.c-field label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.c-field input, .c-field textarea {
  font: inherit; font-size: 1.05rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 0.55rem 0; width: 100%; transition: border-color .2s ease;
}
.c-field input::placeholder, .c-field textarea::placeholder { color: var(--ink-3); }
.c-field input:focus, .c-field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.c-field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.c-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); flex-wrap: wrap; }
.c-submit {
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bg); background: var(--ink); border: 1px solid var(--ink);
  padding: 0.9rem 1.6rem; border-radius: 999px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.c-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -14px rgba(245,244,241,.4); }
.c-submit:active { transform: translateY(0); }
.c-submit span { transition: transform .2s ease; }
.c-submit:hover span { transform: translateX(3px); }
.c-status { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-2); min-height: 1.1em; }
.c-note { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 1.4rem; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.foot-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.foot .tag { font-family: var(--serif); font-style: italic; color: var(--ink-2); margin-top: 0.35rem; }
.foot .cr { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-3); }

/* ---------- Reveal (restrained) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .who { grid-template-columns: 1fr; gap: 2.5rem; }
  .portrait { max-width: 380px; }
  .stack-block { grid-template-columns: 1fr; gap: 0.75rem; }
}
@media (max-width: 620px) {
  .hdr-in { display: flex; justify-content: space-between; }
  .social { display: none; }
  .nav { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 0.5rem var(--pad) 1.5rem; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { width: 100%; padding: 0.95rem 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
  .nav a:first-child { border-top: 0; }
  .nav-btn { display: inline-flex; }
  .c-fields { grid-template-columns: 1fr; }
}