/* ==========================================================================
   WALLY WORKS · SHARED DESIGN SYSTEM · styles.css
   "The Shop Drawing" — a working shop drawing for small-business AI:
   cyanotype blueprint with hand-inked redline markups. Precise like a
   builder's plan, warm like the guy who drew it.

   FROZEN once Foundation ships. Pages consume this via
   <link rel="stylesheet" href="styles.css">. Page-specific CSS goes in a
   small <style> block inside the page and may use ONLY the custom
   properties below. Never invent hexes. See DESIGN.md for the ration
   rules on heading treatments.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* cyanotype ground ramp: lighter = higher, never pure black */
  --ground:    #0f2236;
  --surface-1: #142a40;
  --surface-2: #1a334c;

  /* drafting ink (text on the blue ground) */
  --paper:      #eaf2f9;
  --paper-soft: #c2d6e7;
  --paper-mute: #96b2cc;

  /* hairlines + the drawing grid */
  --line:        rgba(160, 199, 235, 0.14);
  --line-strong: rgba(180, 210, 238, 0.34);
  --grid:        rgba(160, 199, 235, 0.05);
  --grid-major:  rgba(160, 199, 235, 0.09);

  /* the redline pen (brand terracotta, tuned for the blue ground) */
  --redline:      #ff6a3d;
  --redline-ink:  #ff9d78;
  --redline-deep: #d9532b;

  /* the cream of the physical stamp + photo mat */
  --cream:     #f2ebdd;
  --cream-ink: #43382c;

  /* dark ink for text sitting ON the redline (buttons, skip link) */
  --ink-on-accent: #10202f;

  /* crop-mark / print registration ink */
  --crop: #0f2236;

  /* type stack */
  --serif: "Fraunces", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* type scale */
  --fs-hero:    clamp(44px, 7.4vw, 94px);
  --fs-h2:      clamp(36px, 4.8vw, 62px);
  --fs-h3:      clamp(26px, 3vw, 38px);
  --fs-lg:      clamp(22px, 2.3vw, 31px);
  --fs-card:    29px;
  --fs-body:    16.5px;
  --fs-small:   15.5px;
  --fs-mono:    12px;
  --fs-mono-sm: 11px;

  /* spacing (drafting module = 24px; the body grid is drawn on it) */
  --module: 24px;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* elevation: light-edge + contact + ambient. Never darker-shadow-for-higher. */
  --shadow-contact: 0 1px 1px rgba(5, 13, 23, 0.6);
  --shadow-ambient: 0 14px 34px -14px rgba(4, 11, 20, 0.55);
  --light-edge: inset 0 1px 0 rgba(220, 238, 255, 0.07);

  /* motion */
  --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-in:  cubic-bezier(0.3, 0, 0.8, 0.15);
  --dur-1: 0.18s;
  --dur-2: 0.28s;
  --dur-3: 0.42s;

  color-scheme: dark;
  accent-color: var(--redline);
}

/* --------------------------------------------------------------------------
   02 · RESET + BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

@view-transition { navigation: auto; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--ground);
  /* the drafting table: one lamp + the drawing grid, on a 24px module */
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(64, 108, 152, 0.28), transparent 62%),
    repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 24px);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* a whisper of grain so the blue ground never bands */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.9 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

::selection { background: var(--redline); color: var(--ink-on-accent); }

:focus-visible {
  outline: 2px solid var(--redline);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   03 · A11Y + LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 90;
  background: var(--redline);
  color: var(--ink-on-accent);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 18px;
  transform: translateY(-160px);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* honeypot form field: off-canvas for humans, filled by bots */
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 48px;
}

/* narrow measure for document pages (privacy) + the lead form */
.wrap-narrow {
  max-width: 780px;
  margin: 0 auto;
  padding-inline: 48px;
}

.sec { padding-block: clamp(72px, 9vw, 112px); }

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* --------------------------------------------------------------------------
   04 · DRAWING ANNOTATIONS (kickers, dimension lines, corner ticks)
   -------------------------------------------------------------------------- */
/* mono kicker in redline ink; sits above any heading */
.callout {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--redline-ink);
  font-variant-numeric: tabular-nums;
}

/* hero meta line: location, sheet, est. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}
.eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--line-strong);
  flex-shrink: 0;
}

/* dimension line: |---- label ----|  (decorative; aria-hidden it) */
.dim {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--paper-mute);
}
.dim::before,
.dim::after {
  content: "";
  width: 1px;
  height: 14px;
  background: var(--line-strong);
  flex-shrink: 0;
}
.dim i {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
  min-width: 24px;
}
.dim span {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* registration ticks: "+" at the top corners of any block */
.ticks { position: relative; }
.ticks::before,
.ticks::after {
  content: "+";
  position: absolute;
  top: -11px;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  color: var(--paper-mute);
  pointer-events: none;
}
.ticks::before { left: -5px; }
.ticks::after  { right: -5px; }

/* --------------------------------------------------------------------------
   05 · HEADING SYSTEMS (four treatments; ration rules in DESIGN.md)
   --------------------------------------------------------------------------
   A · .h-flip   — Fraunces roman with an <em> that flips italic + terracotta.
                   THE signature device. Homepage hero + AT MOST one more
                   appearance per page. Add .xl for hero scale.
   B · .h-sheet  — plain roman Fraunces + trailing rule + mono sheet number.
                   The interior-page workhorse. No <em> color device.
   C · .h-title  — all-mono titleblock strip: number cell + uppercase title.
                   Structural breaks on utility pages (work index, FAQ,
                   privacy, 404).
   D · .h-label  — small-caps sans label with a redline tick. Minor headings
                   inside panels, forms, and documents.
   -------------------------------------------------------------------------- */

/* A · the italic-flip (rationed) */
.h-flip {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.h-flip em {
  font-style: italic;
  color: var(--redline-ink);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
.h-flip.xl {
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
/* hero variant: the <em> stays paper-colored (the redline circle carries
   the accent instead) */
.h-flip.xl.quiet em { color: inherit; }

/* B · roman + rule + sheet number
   <h2 class="h-sheet">Heading <i aria-hidden="true"></i>
     <span class="h-sheet-no" aria-hidden="true">SHT 02</span></h2> */
.h-sheet {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 90, "SOFT" 30, "WONK" 0;
}
.h-sheet i {
  flex: 1 1 24px;
  height: 1px;
  min-width: 24px;
  background: var(--line-strong);
  align-self: center;
}
.h-sheet .h-sheet-no {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.h-sheet.lg { font-size: var(--fs-h2); font-weight: 380; line-height: 1.05; }

/* C · all-mono titleblock heading
   <header class="h-title"><span class="h-title-no" aria-hidden="true">DTL 03</span>
     <h2>Field notes</h2></header> */
.h-title {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  box-shadow: var(--light-edge);
}
.h-title .h-title-no {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-right: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--redline-ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.h-title h1, .h-title h2, .h-title h3, .h-title .h-title-text {
  padding: 14px 20px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

/* D · small-caps label with a redline tick */
.h-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
}
.h-label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--redline);
  flex-shrink: 0;
}

/* section header scaffold: top rule + corner ticks + callout column.
   Put ANY heading class in the second column. */
.sec-head {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 56px;
  align-items: end;
  padding-top: 26px;
  margin-bottom: 72px;
  border-top: 1px solid var(--line-strong);
  position: relative;
}
.sec-head::before,
.sec-head::after {
  content: "+";
  position: absolute;
  top: -11px;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  color: var(--paper-mute);
}
.sec-head::before { left: -5px; }
.sec-head::after  { right: -5px; }

/* --------------------------------------------------------------------------
   06 · NAV
   -------------------------------------------------------------------------- */
.nav {
  border-bottom: 1px solid var(--line-strong);
  position: relative;
  z-index: 5;
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 46px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--paper-soft);
  transition: color var(--dur-1) var(--ease-out);
}

.nav-links a:hover { color: var(--redline-ink); }

.nav-links a[aria-current="page"] {
  color: var(--paper);
  border-bottom: 2px solid var(--redline);
  padding-bottom: 3px;
}

.nav-cta {
  border: 1px solid var(--line-strong);
  padding: 10px 18px;
  color: var(--paper);
  background: var(--surface-1);
  box-shadow: var(--light-edge), var(--shadow-contact);
  transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}

.nav-links a.nav-cta:hover {
  background: var(--surface-2);
  color: var(--paper);
  transform: translateY(-1px);
}

.nav-links a.nav-cta[aria-current="page"] {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 10px;
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   07 · BUTTONS + LINKS
   -------------------------------------------------------------------------- */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  background: var(--redline);
  color: var(--ink-on-accent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 0.22s var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

/* the offset "double-print" shadow rides a pseudo-element so only
   transform + opacity animate */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--redline-deep) 45%, transparent);
  opacity: 0;
  transform: translate(0, 0);
  transition: transform 0.22s var(--ease-out), opacity 0.22s var(--ease-out);
}

.btn-primary:hover {
  background: color-mix(in oklch, var(--redline), white 7%);
  transform: translate(-2px, -2px);
}
.btn-primary:hover::after {
  opacity: 1;
  transform: translate(6px, 6px);
}

.btn-primary .arrow { transition: transform 0.22s var(--ease-out); }
.btn-primary:hover .arrow { transform: translateX(4px); }

/* bordered quiet button (secondary actions, 404 return) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--light-edge), var(--shadow-contact);
  transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.btn-ghost:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
}

/* underlined mono text link */
.link-quiet {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-soft);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.link-quiet:hover {
  color: var(--redline-ink);
  border-color: var(--redline-ink);
}

/* --------------------------------------------------------------------------
   08 · PANELS, BANDS + FIGURE FRAMES
   -------------------------------------------------------------------------- */
/* drawing-callout panel: hairline border + offset outline, raised surface */
.panel {
  border: 1px solid var(--line-strong);
  outline: 1px solid var(--line);
  outline-offset: 7px;
  background: var(--surface-1);
  box-shadow: var(--light-edge), var(--shadow-ambient);
  padding: 64px 48px;
}
.panel.center { text-align: center; padding: 88px 48px 80px; }

/* full-width note band (the mission device) */
.band {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface-1);
  box-shadow: var(--light-edge);
}
.band-inner {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 56px;
  align-items: start;
  padding-block: 96px;
}
.band-text {
  font-family: var(--serif);
  font-weight: 350;
  font-size: var(--fs-lg);
  line-height: 1.4;
  letter-spacing: -0.012em;
  max-width: 880px;
  font-variation-settings: "opsz" 60, "SOFT" 40;
}
/* NOTE: .band-text em is the italic-flip device and counts toward the
   one-extra-per-page ration (see DESIGN.md) */
.band-text em {
  font-style: italic;
  color: var(--redline-ink);
  font-variation-settings: "opsz" 60, "SOFT" 60, "WONK" 1;
}

/* photo matted on cream, taped to the drawing */
.photo-mat {
  background: var(--cream);
  padding: 14px 14px 16px;
  transform: rotate(1.4deg);
  box-shadow: 10px 12px 0 rgba(6, 15, 26, 0.5), var(--shadow-ambient);
}
.photo-mat img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.04);
}
.photo-mat figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-ink);
  padding-top: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* framed drawing/screenshot with a mono caption row */
.drawing {
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  box-shadow: var(--light-edge), var(--shadow-ambient);
  padding: 10px;
}
.drawing img { display: block; width: 100%; height: auto; }
.drawing figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute);
  padding: 12px 6px 4px;
  font-variant-numeric: tabular-nums;
}

/* the round inspection stamp (pages position it themselves) */
.stamp {
  width: 196px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  transform: rotate(-8deg);
  box-shadow: var(--shadow-ambient), 0 2px 4px rgba(5, 13, 23, 0.5);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   09 · WORK INDEX ROWS (home teaser + work page)
   -------------------------------------------------------------------------- */
.work-list { border-top: 1px solid var(--line-strong); }

.job {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 48px;
  padding: 52px 24px 52px 8px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.25s var(--ease-out);
}
.job:hover {
  background: rgba(26, 51, 76, 0.55);
  box-shadow: var(--light-edge);
}

.job-meta {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
.job-num { color: var(--redline-ink); font-weight: 500; }
.job-status { color: var(--paper-soft); }

.job h3 {
  font-family: var(--serif);
  font-weight: 450;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  transition: color 0.2s var(--ease-out);
  transition-delay: 40ms;
}
.job:hover h3 { color: var(--redline-ink); }
.job:not(:hover) h3 { transition-duration: 0.12s; transition-delay: 0ms; }

.job-client {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  color: var(--paper-mute);
  margin-bottom: 20px;
}

.job-body {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--paper-soft);
  max-width: 640px;
}

.work-more {
  display: flex;
  justify-content: flex-end;
  padding-top: 36px;
}

/* --------------------------------------------------------------------------
   10 · FORMS (the project form; posts to our own /contact.php)
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
  margin-bottom: 28px;
}

.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }

.form-field label {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 10px;
}

.form-field input,
.form-field select,
.form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  color: var(--paper);
  caret-color: var(--redline);
  border-radius: 0;
  transition: border-color var(--dur-1) var(--ease-out);
}

.form-field ::placeholder { color: var(--paper-mute); opacity: 1; }

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--redline);
  box-shadow: 0 1px 0 0 var(--redline);
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%2396b2cc' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  cursor: pointer;
}
.form-field select option {
  background: var(--surface-1);
  color: var(--paper);
}

.form-field textarea {
  field-sizing: content;
  min-height: 110px;
  max-height: 12lh;
  resize: vertical;
  line-height: 1.5;
}

/* quiet the autofill flash on the dark ground */
input:-webkit-autofill {
  -webkit-text-fill-color: var(--paper);
  transition: background-color 9999s var(--ease-out);
}

/* pair with .btn-primary: class="btn-primary form-submit" */
.form-submit {
  width: 100%;
  justify-content: center;
  margin-top: 36px;
  padding: 22px;
  letter-spacing: 0.15em;
}

.form-success {
  text-align: center;
  padding: 56px 20px;
  font-family: var(--serif);
  font-weight: 380;
  font-size: 24px;
  line-height: 1.4;
  color: var(--paper);
  font-variation-settings: "opsz" 60, "SOFT" 40;
}
.form-success em {
  font-style: italic;
  color: var(--redline-ink);
  font-variation-settings: "opsz" 60, "SOFT" 60, "WONK" 1;
}

.form-error {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--redline-deep);
  background: color-mix(in srgb, var(--redline) 10%, transparent);
  color: var(--redline-ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
}

.form-promise {
  text-align: center;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11 · FAQ (native details/summary)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-strong); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 26px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 450;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 60, "SOFT" 30;
  transition: color var(--dur-1) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--redline-ink); }

.faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  color: var(--redline-ink);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq-body {
  padding: 0 4px 28px;
  color: var(--paper-soft);
  max-width: 640px;
}
.faq-body p + p { margin-top: 12px; }

.faq details[open] .faq-body {
  animation: faq-in 0.3s var(--ease-out) both;
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   12 · DOCUMENT PROSE (privacy + any utilitarian page)
   -------------------------------------------------------------------------- */
.prose { color: var(--paper-soft); }

.prose h2 { margin: 44px 0 16px; }
.prose h3 { margin: 32px 0 12px; }

.prose p { margin-bottom: 18px; max-width: 68ch; }

.prose ul, .prose ol {
  margin: 0 0 18px 20px;
  max-width: 66ch;
}
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--redline-ink); }

.prose a {
  color: var(--redline-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-out);
}
.prose a:hover { color: var(--redline); }

.prose strong { color: var(--paper); font-weight: 500; }

/* revision note: "Rev. A · 2026-07-23" */
.doc-meta {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   13 · FOOTER: THE TITLE BLOCK
   -------------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--line-strong);
  padding-block: 0 56px;
}

.titleblock {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
  border-top: none;
  margin-bottom: 48px;
}

.tb-cell {
  background: var(--ground);
  padding: 16px 18px 14px;
  box-shadow: var(--light-edge);
}

.tb-cell dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 6px;
}

.tb-cell dd {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}

.footer-nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-nav a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-mute);
  transition: color var(--dur-1) var(--ease-out);
}
.footer-nav a:hover { color: var(--redline-ink); }

.footer-note {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
}
.footer-note b { color: var(--redline-ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   14 · RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .wrap, .wrap-narrow { padding-inline: 24px; }

  /* the nav stays a nav on phones: compact links, never amputated.
     If the row runs out of sheet, it wraps like any drawing annotation. */
  .nav-inner { flex-wrap: wrap; row-gap: 14px; }
  .nav-links { gap: 16px; }
  .nav-links a.nav-cta { padding: 9px 14px; }

  .eyebrow { margin-bottom: 32px; }

  .sec-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 52px; }
  .sec-head::after { display: none; }

  .band-inner { grid-template-columns: 1fr; gap: 28px; padding-block: 72px; }

  .job { grid-template-columns: 1fr; gap: 18px; padding: 40px 0; }
  .job-meta { flex-direction: row; flex-wrap: wrap; gap: 20px; padding-top: 0; }

  .panel { padding: 56px 24px; }
  .panel.center { padding: 56px 24px 52px; }

  .photo-mat { max-width: 420px; transform: rotate(0.8deg); }

  .form-grid { grid-template-columns: 1fr; gap: 28px; }

  .titleblock { grid-template-columns: repeat(2, 1fr); }
  .footer-row { flex-direction: column; align-items: flex-start; }

  .stamp { width: 118px; }
}

@media (max-width: 620px) {
  /* the brand link keeps its aria-label + monogram; the wordmark cedes
     the room to the page links */
  .brand-name { display: none; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: var(--fs-mono-sm); letter-spacing: 0.07em; }
  .nav-links a.nav-cta { padding: 8px 11px; }
}

@media (max-width: 460px) {
  .eyebrow::before { display: none; }
  .eyebrow { font-size: var(--fs-mono-sm); letter-spacing: 0.14em; }
  .stamp { width: 96px; }
  .h-title { flex-direction: column; }
  .h-title .h-title-no {
    border-right: none;
    border-bottom: 1px solid var(--line-strong);
    padding: 12px 18px 10px;
  }
}

/* --------------------------------------------------------------------------
   15 · PRINT (the drawing comes off the table: ink on paper + crop marks)
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --ground: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --paper: #0f2236;
    --paper-soft: rgba(15, 34, 54, 0.82);
    --paper-mute: rgba(15, 34, 54, 0.6);
    --line: rgba(15, 34, 54, 0.28);
    --line-strong: rgba(15, 34, 54, 0.55);
    --grid: rgba(15, 34, 54, 0.05);
    --grid-major: rgba(15, 34, 54, 0.08);
    --redline-ink: #d9532b;
    --shadow-contact: 0 0 0 rgba(0, 0, 0, 0);
    --shadow-ambient: 0 0 0 rgba(0, 0, 0, 0);
    --light-edge: inset 0 0 0 rgba(0, 0, 0, 0);
    color-scheme: light;
  }

  @page { margin: 12mm; }

  body {
    /* keep the drafting grid, lose the lamp */
    background-image:
      repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 24px);
  }

  /* registration crop marks at the sheet corners */
  body::before {
    content: "";
    position: fixed;
    inset: 3mm;
    pointer-events: none;
    background:
      linear-gradient(var(--crop), var(--crop)) left 0 top 0 / 5mm 0.3mm no-repeat,
      linear-gradient(var(--crop), var(--crop)) left 0 top 0 / 0.3mm 5mm no-repeat,
      linear-gradient(var(--crop), var(--crop)) right 0 top 0 / 5mm 0.3mm no-repeat,
      linear-gradient(var(--crop), var(--crop)) right 0 top 0 / 0.3mm 5mm no-repeat,
      linear-gradient(var(--crop), var(--crop)) left 0 bottom 0 / 5mm 0.3mm no-repeat,
      linear-gradient(var(--crop), var(--crop)) left 0 bottom 0 / 0.3mm 5mm no-repeat,
      linear-gradient(var(--crop), var(--crop)) right 0 bottom 0 / 5mm 0.3mm no-repeat,
      linear-gradient(var(--crop), var(--crop)) right 0 bottom 0 / 0.3mm 5mm no-repeat;
  }

  body::after { display: none; }
  .skip-link, .nav-cta, .btn-primary, .btn-ghost, .form-submit { display: none; }
  .photo-mat { transform: none; box-shadow: none; border: 1px solid var(--line-strong); }
  .stamp { box-shadow: none; }
}

/* --------------------------------------------------------------------------
   16 · PREFERENCE MATRIX
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --line: rgba(180, 210, 238, 0.4);
    --line-strong: rgba(200, 224, 245, 0.7);
    --paper-mute: #c2d6e7;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}