/* =========================================================================
   helloschalk.com
   Single stylesheet. Dark theme, locked (Section 4.11 page theme lock).

   RADIUS SYSTEM (Section 4.4 shape consistency lock), the documented rule:
     interactive controls .. --r-pill   (buttons, tabs, chips)
     containers ........... --r-card    (panels, cards, media frames)
     inputs ............... --r-input
   Nothing outside this rule.

   ACCENT LOCK (Section 4.2): --accent is the only accent on the page.
   ========================================================================= */

/* ---------- tokens ------------------------------------------------------ */

:root {
  /* brand, preserved verbatim from the previous build */
  --accent: #fe7f2d;
  --accent-bright: #ff954d;
  --accent-a08: rgba(254, 127, 45, 0.08);
  --accent-a14: rgba(254, 127, 45, 0.14);
  --accent-a22: rgba(254, 127, 45, 0.22);
  --accent-a45: rgba(254, 127, 45, 0.45);

  /* neutral ramp, unified (previous build mixed three unrelated greys) */
  --bg: #101522;
  --bg-2: #171c2d;
  --surface: #1b2133;
  --surface-2: #232a41;

  --ink: #f4efe6;
  --ink-78: rgba(244, 239, 230, 0.78);
  --ink-62: rgba(244, 239, 230, 0.62);
  --ink-45: rgba(244, 239, 230, 0.55); /* 5.5:1 on --bg, AA body */
  --line: rgba(226, 217, 202, 0.14);
  --line-soft: rgba(226, 217, 202, 0.08);

  /* form surfaces: light fields on a dark page, so ink is dark here */
  --field: #f3ede2;
  --field-ink: #171c2d;
  --field-ph: rgba(23, 28, 45, 0.66); /* 5.1:1 on --field, AA body */
  --field-line: rgba(23, 28, 45, 0.28);

  --ok: #1d9e75;
  --err: #ff8f85; /* AA against --surface, the old #e2574c was not */

  /* type */
  --f-display: "Syne", "Trebuchet MS", sans-serif;
  --f-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* spacing scale, VISUAL_DENSITY 3 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  --r-pill: 999px;
  --r-card: 14px;
  --r-input: 10px;

  --header-h: 64px;
  --wrap: 1080px;
  --measure: 62ch;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* must outrank any display: rule below, or [hidden] panels still render */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--bg-2);
  font-weight: 700;
  border-radius: 0 0 var(--r-card) 0;
}
.skip:focus { left: 0; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- layout ------------------------------------------------------ */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

section[id] { scroll-margin-top: var(--header-h); }

.sect { padding-block: var(--s-9); }
.sect + .sect { border-top: 1px solid var(--line-soft); }

.sect-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

.sect-head h1,
.sect-head h2 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.02;
}

/* The sub-pages (journal, projects) are one short section each, and without
   a floor the footer lands halfway up the screen. They share every other
   rule on this sheet, which is the point: they used to carry their own
   chrome inline and drifted out of line with the page they belong to. */
.subpage {
  min-height: calc(100vh - var(--header-h) - 8rem);
  min-height: calc(100svh - var(--header-h) - 8rem);
}

.lede {
  color: var(--ink-78);
  max-width: var(--measure);
  font-size: 1.0625rem;
}

.accent { color: var(--accent); }

/* No eyebrow on the page (Section 4.7 eyebrow restraint: 6 sections, budget
   of 2, none used). The hero's one eyebrow carried the old positioning and
   went with it. Every section relies on its heading alone. */

/* ---------- header ------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(16, 21, 34, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.wordmark {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: inline-flex;
}
.wordmark b { font-weight: 700; color: var(--ink); }
.wordmark i { font-style: normal; color: var(--accent); }

.nav-group {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: 0.9375rem;
}

.nav a {
  color: var(--ink-78);
  transition: color 0.2s var(--ease);
}
.nav a:hover,
.nav a[aria-current="true"] { color: var(--accent); }

/* ---------- buttons ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.65rem 1.5rem;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.12s var(--ease);
}

/* solid: dark ink on accent, 8.1:1 */
.btn-solid {
  background: var(--accent);
  color: var(--bg-2);
}
.btn-solid:hover { background: var(--accent-bright); }

/* ghost: accent-bordered, ink label on the page background, 13.6:1 */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--accent-a45);
}
.btn-ghost:hover {
  background: var(--accent-a14);
  border-color: var(--accent);
}

.btn:active { transform: translateY(1px); }

.btn-sm { padding: 0.45rem 1.15rem; font-size: 0.875rem; }

.link-accent {
  color: var(--accent);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.link-accent:hover { color: var(--accent-bright); }

/* ---------- hero -------------------------------------------------------- */

/* layout family A. Copy on the left, Schalk on the right, sharing a bottom
   baseline so the image sits with the words rather than beside them. */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-6));
  padding-bottom: var(--s-8);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* radial only, over the page background. A linear gradient landing on any
     value other than --bg draws a visible band at the fold. */
  background: radial-gradient(60rem 40rem at 8% -10%, rgba(67, 87, 120, 0.30), transparent 62%);
}

.hero > .wrap {
  position: relative;
  z-index: 2;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-7);
}

.hero-copy { display: grid; gap: var(--s-5); justify-items: start; max-width: 36rem; }

/* held to 2 lines at desktop (Section 4.7 hero rule) */
.hero h1 {
  font-size: clamp(2.35rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  max-width: 20ch;
}

.hero-sub {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-78);
  max-width: 44ch;
}
.hero-sub b { color: var(--ink); font-weight: 700; }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* The image slot. Height-capped so the hero fits a laptop screen, and sized
   from that height rather than from an aspect ratio, so the image keeps its
   own proportions and is never cropped. That is what lets the tall photograph
   and the wide line drawing swap places under one rule. --r-card because a
   media frame is a container (Section 4.4 shape consistency lock). */
.hero-portrait {
  --portrait-h: clamp(240px, 44vh, 420px);
  margin: 0;
  justify-self: end;
  min-width: 0;
}

/* object-fit earns its place: the reset caps every image at max-width 100%,
   which against a fixed height would squash the image in a narrow column. */
.hero-portrait img {
  height: var(--portrait-h);
  width: auto;
  object-fit: contain;
  border-radius: var(--r-card);
}

/* ---------- #do : layout family B, paired panels then a full-width band --
   The old numbered, progressively indented sequence went with the three
   verbs: a counter reads as step one, step two, step three, which is the
   process framing this section stopped making. Two panels sit level with
   each other instead, because neither is a stage of the other. */

.gets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}

/* flex, not grid, so the evidence line can be pushed to the foot of the
   card and the two evidence lines sit on the same baseline. */
.get {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.get h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.1;
}

.get > p:not(.get-proof) { color: var(--ink-78); }

/* the evidence line: every panel closes on something that happened, set
   apart from the claim above it by a hairline rather than another box. */
.get-proof {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  color: var(--ink-62);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.first-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5) var(--s-6);
  align-items: center;
  margin-top: var(--s-6);
  padding: var(--s-6);
  border-left: 3px solid var(--accent);
  background: var(--accent-a08);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}

.first-step-copy { display: grid; gap: var(--s-3); }

/* h3 on the main page, where a section h2 sits above it; h2 on the sub-pages,
   where the page h1 does. Same band, same size, correct heading order on both. */
.first-step h2,
.first-step h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.1;
}

.first-step p {
  color: var(--ink-78);
  max-width: var(--measure);
}

/* ---------- #work : layout family C, stacked case panels ---------------- */

/* Plain vertical stack. A sticky/overlapping stack was tried and removed:
   panels covered each other, and an open story panel is taller than the
   viewport, which is exactly the case sticky handles worst. */
.cases {
  display: grid;
  gap: var(--s-7);
}

.case-inner {
  background: var(--surface);
  border: 1px solid var(--accent-a45);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 21, 34, 0.55);
}

.case-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: stretch;
}

.case-media {
  position: relative;
  background: linear-gradient(135deg, var(--surface-2), var(--bg-2));
  border-right: 1px solid var(--accent-a22);
  min-height: 100%;
}

.case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.case-body {
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  display: grid;
  gap: var(--s-4);
  align-content: center;
}

.case-body h3 {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  line-height: 1;
}

.case-kind {
  color: var(--ink-62);
  font-size: 0.9375rem;
}

/* the 30-second read: problem, build, outcome as three labelled lines.
   Grouped with a single hairline between rows, not a border per row. */
.case-beats {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.case-beat {
  display: grid;
  /* 7.5rem, not 5.5: the labels carry the four-part shape now and
     "written down" wraps at the old width. */
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}

.case-beat dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-beat dd {
  margin: 0;
  color: var(--ink-78);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* held panels: client work whose yes is not in writing yet ---------------
   The panel is complete apart from the client's own material, so the media
   frame carries a line instead of an image and the story summary is replaced
   by a plain note. Deliberately not styled as a control: there is nothing to
   open, and a disabled-looking button would read as a bug. */

.case-media-held {
  display: grid;
  place-items: center;
  padding: var(--s-6);
  text-align: center;
  /* the hatch sits over the gradient .case-media already paints */
  background-image: repeating-linear-gradient(135deg, var(--accent-a08) 0 2px, transparent 2px 12px);
}

.held-mark { display: grid; gap: var(--s-3); }



.held-line {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.case-hold {
  border-top: 1px solid var(--accent-a22);
  background: var(--accent-a08);
  padding: var(--s-4) clamp(var(--s-5), 3vw, var(--s-7));
  color: var(--ink-78);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.hold-lbl {
  display: block;
  margin-bottom: var(--s-1);
}

/* the fourth exhibit: someone else describing the method. Markup is in
   index.html behind a comment until her words and her yes are both in. */
.witness {
  margin: var(--s-7) 0 0;
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  background: var(--surface);
  border: 1px solid var(--accent-a45);
  border-radius: var(--r-card);
  display: grid;
  gap: var(--s-4);
}

.witness blockquote { margin: 0; }

.witness blockquote p {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: var(--measure);
}

.witness figcaption {
  color: var(--ink-62);
  font-size: 0.9375rem;
}

/* full story: real DOM, crawlable, works with JS disabled */
.story { border-top: 1px solid var(--accent-a22); }

.story > summary {
  padding: var(--s-4) clamp(var(--s-5), 3vw, var(--s-7));
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-a08);
  transition: background 0.2s var(--ease);
}
.story > summary::-webkit-details-marker { display: none; }
.story > summary:hover { background: var(--accent-a22); }

.story > summary .chev {
  transition: transform 0.25s var(--ease);
  flex: 0 0 auto;
}
.story[open] > summary .chev { transform: rotate(180deg); }
.story[open] > summary .lbl-open { display: inline; }
.story[open] > summary .lbl-shut { display: none; }
.story .lbl-open { display: none; }

.beats {
  display: grid;
  gap: 0;
  padding: clamp(var(--s-5), 3vw, var(--s-7));
}

/* each beat is a discrete step: ruled off from the one before, so scrolling
   through an open story has clear boundaries instead of one long column */
.beat + .beat {
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--accent-a22);
}

.beat {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
}

/* alternation is capped: beats live inside a disclosure, one composition,
   and the outer page never repeats this family (Section 4.7 zigzag cap) */
.beat:nth-child(even) > .beat-media { order: 2; }

.beat-media {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--accent-a22);
  background: linear-gradient(135deg, var(--surface-2), var(--bg-2));
  aspect-ratio: 16 / 10;
}

.beat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.beat-media img.is-photo { filter: grayscale(1) brightness(0.8); }

/* beat images open full size. The whole frame is the hit area. */
button.beat-media {
  padding: 0;
  border: 1px solid var(--accent-a22);
  cursor: zoom-in;
  display: block;
  width: 100%;
  transition: border-color 0.2s var(--ease);
}
button.beat-media:hover { border-color: var(--accent); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(16, 21, 34, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  cursor: zoom-out;
}
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: transparent; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-card);
  border: 1px solid var(--accent-a45);
}
.lightbox-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-a45);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}
.lightbox-close:hover { background: var(--accent-a14); }

.beat-quote {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--s-5);
  text-align: center;
  background: var(--bg);
}
.beat-quote p {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.beat-copy { display: grid; gap: var(--s-2); }

.beat-copy .lbl,
.held-kicker,
.hold-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.beat-copy h4 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.beat-copy p {
  color: var(--ink-78);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.trademark {
  color: var(--ink-45);
  font-size: 0.75rem;
  line-height: 1.5;
  max-width: var(--measure);
}

/* ---------- #how : layout family D, statement + measure ----------------- */

.statement {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 22ch;
}

/* asymmetric two-column body: prose left, the line that matters set large
   in the right column, so the section is not a left-aligned block with a
   dead right half. */
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(var(--s-6), 6vw, var(--s-8));
  align-items: start;
}

.how-body {
  display: grid;
  gap: var(--s-4);
  max-width: var(--measure);
  color: var(--ink-78);
}

.pull {
  padding-left: var(--s-5);
  border-left: 3px solid var(--accent);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 24ch;
  color: var(--ink);
}

/* Only #how's two-column grid has a tall neighbour to sit against, so the
   baseline pull belongs to that grid rather than to .pull itself, which
   #background reuses in a single column. */
.how-grid .pull { align-self: end; }

/* ---------- #background : layout family E, evidence prose --------------- */

/* One claim and its proof, set as a single column: the passage first, then the
   line it earns. Deliberately not the asymmetric two-column form #how uses,
   because the two sections now sit next to each other and would otherwise read
   as one long block. */
.evidence { display: grid; gap: var(--s-6); justify-items: start; }

.evidence-body {
  display: grid;
  gap: var(--s-4);
  max-width: var(--measure);
  color: var(--ink-78);
}

/* ---------- #contact : layout family F, centred single column ----------- */

.contact-wrap {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.contact-wrap .sect-head { justify-items: center; margin-bottom: var(--s-6); }
.contact-wrap .lede { margin-inline: auto; }
.contact-wrap .statement { margin-inline: auto; }

.contact-portrait {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid var(--accent-a45);
  background: #f9f8f6;
}
.contact-portrait img { width: 100%; height: 100%; object-fit: cover; }

.contact-panel {
  margin-top: var(--s-6);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--accent-a45);
  border-radius: var(--r-card);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  display: grid;
  gap: var(--s-4);
}

.tabs {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--accent-a22);
  border-radius: var(--r-pill);
}

.tab {
  flex: 1 1 0;
  border: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 700;
  background: transparent;
  color: var(--ink-78);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--bg-2);
}

/* One line of framing at the top of a panel, read before anything is typed.
   Named apart from .form-note below, which is the live status line. */
.panel-intro {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-78);
}

.field { display: grid; gap: var(--s-2); }
.field > span { font-size: 0.875rem; font-weight: 700; color: var(--ink); }

.field input,
.field textarea {
  width: 100%;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--field-ink);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: var(--r-input);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--field-ph); }
.field input:focus-visible,
.field textarea:focus-visible { outline-offset: 2px; }

.form-grid { display: grid; gap: var(--s-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: 0.875rem;
  color: var(--ink-78);
  cursor: pointer;
}
.check input { margin-top: 0.3rem; accent-color: var(--accent); }

.form-actions {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--s-3);
}
.form-actions .btn { flex: 1 1 0; min-width: 0; }

.form-note {
  min-height: 1.25rem;
  font-size: 0.8125rem;
  color: var(--err);
}
.form-note[data-state="ok"] { color: var(--ok); }

.contact-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
  font-size: 0.9375rem;
  color: var(--ink-62);
}

/* ---------- footer ------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-6);
  color: var(--ink-62);
  font-size: 0.9375rem;
}

.site-footer > .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.foot-meta { display: flex; align-items: center; gap: var(--s-3); }
.foot-brand {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.foot-place { display: inline-flex; align-items: center; gap: var(--s-1); }

.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.foot-nav a { color: var(--ink-62); transition: color 0.2s var(--ease); }
.foot-nav a:hover { color: var(--accent); }

/* concealed access hotspot, unchanged behaviour from the previous build */
.foot-hot { position: relative; display: inline-flex; }
#secret-btn {
  display: block;
  width: 1.1em; height: 0.8em;
  padding: 0; margin: 0; border: 0;
  background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
#secret-menu {
  display: none;
  position: fixed;
  z-index: 61;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 200px;
  padding: var(--s-2);
  background: rgba(23, 28, 45, 0.98);
  border: 1px solid var(--accent-a45);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  text-align: left;
}

/* ---------- mobile nav -------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--accent-a45);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 19;
  flex-direction: column;
  padding: var(--s-4) 1.25rem var(--s-6);
  background: rgba(23, 28, 45, 0.98);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 0.9rem 0.25rem;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav .btn { margin-top: var(--s-4); }

/* ---------- motion ------------------------------------------------------
   Every animation is justified:
   1. hero entry   hierarchy, settles the first screen. CSS only.
   2. .btn :active feedback, physical push.
   3. details      state transition on open.
   4. hover states feedback.

   HARD RULE, learned the hard way: nothing on this page is hidden by
   default and un-hidden by JavaScript. A scroll-reveal that depended on
   IntersectionObserver left the hero blank when it misfired. Content is
   always in the document at full opacity; animation only ever runs FROM a
   hidden state TO the visible one, with fill-mode both, so it cannot
   strand content invisible.
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 0.65s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.07s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.14s; }

  /* the image arrives last, after the sentence it belongs to. Justification:
     the words say what he does, the face says who is saying it, and that is
     the order a stranger reads them in. Runs once, ends static. */
  .hero-portrait { animation: rise 0.65s var(--ease) 0.28s both; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy > *, .hero-portrait { animation: none; }
  .btn, .tab, .nav a, .story > summary { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1000px) {
  .case-top { grid-template-columns: 1fr; }
  .case-media {
    border-right: 0;
    border-bottom: 1px solid var(--accent-a22);
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .case-media-held { aspect-ratio: auto; }
  .beat { grid-template-columns: 1fr; }
  .beat:nth-child(even) > .beat-media { order: 0; }
}

@media (max-width: 860px) {
  :root { --s-9: 4.5rem; --s-8: 3rem; }

  .nav-group { display: none; }
  .nav-toggle { display: inline-flex; }

  .hero { padding-bottom: var(--s-7); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-portrait { --portrait-h: clamp(200px, 32vh, 300px); justify-self: start; }

  .how-grid { grid-template-columns: 1fr; gap: var(--s-6); }

  .gets { grid-template-columns: 1fr; gap: var(--s-5); }
  .get { padding: var(--s-5); }

  .first-step { grid-template-columns: 1fr; padding: var(--s-5); }
  .first-step .btn { justify-self: start; }

  .case-inner { box-shadow: none; }

  .case-beat { grid-template-columns: 1fr; gap: var(--s-1); }

  .form-row { grid-template-columns: 1fr; }

  .site-footer > .wrap { flex-direction: column; text-align: center; }
  .foot-nav { justify-content: center; }
}

@media (max-width: 560px) {
  .wrap { width: min(100% - 2rem, var(--wrap)); }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 3rem); }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
}