/* ===== OneShotLens — continuous-canvas editorial system =====
   One unifying visual thread, sitewide:
   1. Structural framing — every content block is separated by a razor-thin,
      low-opacity hairline (--border-thread), never a shadow or a filled
      color block.
   2. Deliberate motion — controls, state changes, reveals, and editorial
      statements use four related timing tiers with the same easing curve. */

:root {
  --bg: #fffdf8;                      /* matches the logo wordmark's paper-cream color */
  --fg: #1d2f4e;                      /* canonical navy ink */
  --fg-dim: #52627a;                  /* canonical secondary slate */
  /* ---- OneShotLens locked brand system (Brand Kit v1) ---- */
  --oneshot-navy: #1d2f4e;
  --oneshot-cream: #fffdf8;
  --oneshot-warm-white: #fdfbf6;       /* card/panel surfaces — a whisper warmer than the page's cream */
  --oneshot-gold-shadow: #a77e36;
  --oneshot-gold-body: #c6a153;
  --oneshot-gold-highlight: #e0c276;
  --oneshot-gold-return: #b88c3d;
  --oneshot-muted-cream: #c9c2b0;
  --oneshot-president-gold: linear-gradient(90deg, var(--oneshot-gold-shadow) 0%, var(--oneshot-gold-body) 48%, var(--oneshot-gold-highlight) 72%, var(--oneshot-gold-return) 100%);
  --oneshot-line-draw: 340ms;
  --oneshot-shimmer-delay: 120ms;
  --oneshot-shimmer-duration: 720ms;
  --oneshot-ease: cubic-bezier(.22,.72,.18,1);
  --motion-control: 120ms;
  --motion-state: 180ms;
  --motion-reveal: 240ms;
  --motion-statement: 480ms;
  --oneshot-wordmark-lean: 0deg;
  --heritage: #3a4a34;                /* muted hunter green — rare accent, used sparingly */
  /* --trim/--trim-dim kept as aliases — every existing var(--trim) usage
     sitewide (borders, dividers, icon strokes) now resolves to the locked
     Gold Body/Gold Shadow stops rather than the old flat hex, with zero
     find-and-replace risk across the rest of this file. */
  --trim: var(--oneshot-gold-body);   /* gold — hairline accents and icon strokes only, never fills */
  --trim-dim: var(--oneshot-gold-shadow); /* gold in shadow */
  --on-trim: var(--oneshot-navy);     /* navy text set on top of the gold trim */
  --paper: var(--oneshot-cream);      /* warm paper white */
  --header-navy: var(--oneshot-navy); /* header banner and primary UI fill */
  --patina-intensity: 0.004;          /* restrained aged-paper wash */
  --star-scale: 0.95;                 /* tweakable: logo blade/star size */
  --frame-scale: 1.12;                /* tweakable: logo corner-bracket size */
  --flag-opacity: 0.85;                /* tweakable: footer flag mark prominence */

  --font-label: "Barlow Condensed", "Arial Narrow", sans-serif; /* condensed sans — nav, UI labels, small print */

  --border-thread: 1px solid rgba(29, 47, 78, 0.14); /* navy architectural hairline */
  --motion-signature: all var(--motion-state) var(--oneshot-ease); /* concise functional feedback */

  --max-w: 1120px;
  --max-w-wide: 1400px;
  --gap: clamp(1.5rem, 4vw, 3.5rem);

  --font-display: "Source Serif 4", Georgia, serif; /* precise editorial voice */
  --font-reflective: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; /* evidence and data */
  --font-header: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif; /* protected wordmark voice */
  --font-editorial-title: "Faculty Glyphic", "Trebuchet MS", sans-serif;
  /* Logo wordmark only. True ITC Avant Garde Gothic is not a licensed web
     font (not on Google Fonts) — this stack tries the real name first for
     any machine that has it installed/licensed, then falls back through
     Century Gothic (a common system geometric sans) to Poppins (the
     closest free, actually web-deliverable geometric-sans substitute). */
  --font-logo: "ITC Avant Garde Gothic", "Avant Garde", "Century Gothic", "Poppins", sans-serif;
}

/* Heritage palette note: cream ground + warm ink + brass trim, in the spirit
   of Ralph Lauren / Rolex / Aime Leon Dore Americana — traditional materials,
   restrained color, one metal accent — carried by the same serif/mono type
   system already in place sitewide. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Architectural Ledger — isolated AI-page hero prototype */
.ai-ledger-shell {
  position: relative;
  width: 100%;
  height: clamp(620px, calc(100svh - 96px), 900px);
  min-height: 620px;
  overflow: hidden;
  background: var(--oneshot-cream);
  border-bottom: 1px solid rgba(29, 47, 78, 0.12);
}

.ai-ledger-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--oneshot-cream);
}

.legacy-ai-hero {
  display: none;
}

@media (max-width: 650px) {
  .ai-ledger-shell {
    height: 820px;
    min-height: 820px;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--patina-intensity, 0.6);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(120, 90, 40, 0.06), transparent 60%),
    radial-gradient(ellipse at 82% 68%, rgba(90, 70, 30, 0.055), transparent 55%),
    radial-gradient(ellipse at 50% 105%, rgba(100, 80, 40, 0.045), transparent 60%);
}

img { max-width: 100%; display: block; }

/* ---------- Texture engine: film-grain overlay ---------- */
/* Pure SVG feTurbulence noise, tiled and looped — no image asset. Sits above
   everything, blocks no interaction. This is a surface texture, not a
   content-block separator, so it sits outside the border/motion rules above. */

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: none;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1.5%, 1%); }
  50%  { transform: translate(1%, -1.5%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .grain-overlay { animation: none; }
}

/* ---------- Tactile borders: viewfinder crop-marks ---------- */
/* Four independent L-shaped corner marks, built from layered gradients —
   no extra markup, no drop shadows. Mimics a camera viewfinder / crop marks.
   Same razor-thin-line logic as --border-thread, just radial instead of
   a straight rule. */

/* Rendered as a ::after overlay (not a background on the element itself) so
   it still shows up on top of real content dropped in later — a photo, a
   video poster, whatever — instead of being hidden behind it. ::after does
   not render on replaced elements (<img>, <video>), so anything using this
   class needs to be a plain container; wrap an <img> in a div and put this
   class on the wrapper, not the image tag. */
.viewfinder {
  position: relative;
  color: var(--fg); /* crop-mark color follows currentColor */
}

.viewfinder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size:
    14px 1.5px, 1.5px 14px,
    14px 1.5px, 1.5px 14px,
    14px 1.5px, 1.5px 14px,
    14px 1.5px, 1.5px 14px;
  background-position:
    top 10px left 10px, top 10px left 10px,
    top 10px right 10px, top 10px right 10px,
    bottom 10px left 10px, bottom 10px left 10px,
    bottom 10px right 10px, bottom 10px right 10px;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.container-wide {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* ---------- Reveal-on-scroll ---------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--oneshot-ease), transform 720ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Header ---------- */
/* No filled block — the header sits on the same dark canvas as the rest of
   the page, separated only by --border-thread underneath it. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-navy);
  color: var(--oneshot-warm-white);
  border-bottom: 1px solid rgba(253, 251, 246, 0.15);
  will-change: transform;
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms var(--oneshot-ease), border-color 220ms var(--oneshot-ease);
}

.site-header.nav-hidden {
  transform: translate3d(0, -105%, 0);
}

.site-header .container-wide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.1rem;
  height: 96px;
  transition: height 280ms cubic-bezier(.16, 1, .3, 1);
}

.site-header.nav-compact {
  border-bottom-color: rgba(253, 251, 246, .21);
  box-shadow: 0 10px 30px rgba(10, 22, 40, .10);
}

.site-header.nav-compact .container-wide { height: 76px; }

.logo {
  display: inline-flex;
  align-items: center;
  font-size: 1.35rem;
}

.logo-text {
  display: inline-block;
  font-family: var(--font-header); /* Bodoni Moda — coupled with the icon mark */
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
  /* line-height:1 is required here: this element inherits the site's
     global unitless line-height (1.6), which recalculates against this
     element's own larger font-size and inflates the line-box well past
     the visible glyphs. That invisible half-leading was the actual cause
     of the oversized gap beneath the underline — not the padding-bottom
     value itself, which was already correctly tuned. */
  line-height: 1.125;
  padding-bottom: calc(0.0504em + 3.65px);
  background-image: var(--oneshot-president-gold), linear-gradient(90deg, transparent 0%, rgba(255,253,248,.65) 50%, transparent 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 2.3px, 34% 2.3px;
  /* Underline stays on this outer, unskewed box — a crisp horizontal
     rule underneath the leaning letterforms, not tilted along with them.
     Settled/default state shows the sheen already past, off to the
     right; only .brand-shimmer-play (added once per browser session by
     main.js, same pattern as the splash gate) rewinds and animates it,
     so it plays once per session, not once per page load.
     Gap-to-glyph-height ratio matches .splash-quote-finale's already-
     validated 0.0504em (the tight distance confirmed against the brand
     kit lockup), not the brand kit's absolute rem+px value — that fixed
     value was tuned for the kit's large display-size lockup and reads as
     an oversized gap at this element's much smaller font-size. Thickness
     is 2.3px, position offset (0.45px) stays fixed. */
  background-position: left calc(100% - 0.45px), 134% calc(100% - 0.45px);
}

.logo-text-glyphs {
  display: inline-block;
  /* Locked brand lean: fully upright (0deg) — corrected from the earlier
     1.5deg forward tilt after verifying against the master lockup. Reads
     from the shared --oneshot-wordmark-lean token so the header wordmark
     and splash wordmark stay in sync through one value. */
  transform: skewX(calc(-1 * var(--oneshot-wordmark-lean)));
  transform-origin: left bottom;
}

.brand-shimmer-play .logo-text {
  animation: os-underline-shimmer var(--oneshot-shimmer-duration) var(--oneshot-ease) var(--oneshot-shimmer-delay) 1 both;
}

/* Header logo underline draw-in: same recipe as the splash "hustle"
   underline (splash-pen-underline + splash-underline-glow), reused here
   at the same timing/easing tokens so it reads as the same animation.
   Homepage-only, gated by main.js to play once per browser session (a
   separate sessionStorage key from the shimmer's own gate, since this is
   scoped to index.html specifically). background-size animates from 0%
   to the element's normal static value (100% 2.3px), so animation-fill-
   mode:forwards leaves it in the exact same state as every non-animated
   page once the animation completes — no separate "freeze" step needed. */
.header-underline-draw-play .logo-text {
  animation:
    header-underline-draw var(--oneshot-line-draw) var(--oneshot-ease) forwards,
    header-underline-glow 480ms ease-out var(--oneshot-line-draw) forwards;
}

@keyframes header-underline-draw {
  from { background-size: 0% 2.3px, 34% 2.3px; }
  to   { background-size: 100% 2.3px, 34% 2.3px; }
}

@keyframes header-underline-glow {
  0% { box-shadow: 0 0 0 rgba(198, 161, 83, 0); }
  30% { box-shadow: 0 0 14px 2px rgba(198, 161, 83, 0.85); }
  100% { box-shadow: 0 0 0 rgba(198, 161, 83, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .header-underline-draw-play .logo-text { animation: none !important; }
}

@keyframes os-underline-shimmer {
  from { background-position: left calc(100% - 0.45px), -34% calc(100% - 0.45px); }
  to   { background-position: left calc(100% - 0.45px), 134% calc(100% - 0.45px); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-shimmer-play .logo-text { animation: none; }
}

.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  margin-right: 0.4em;
  vertical-align: middle;
  color: var(--oneshot-warm-white);
}

.logo-icon .os-frame {
  stroke: var(--trim); /* gold corner brackets */
  transform: scale(var(--frame-scale, 1));
  transform-box: fill-box;
  transform-origin: center;
}

.logo-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.logo-icon .os-blades {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
  transform: scale(var(--star-scale, 1));
}

/* Boot spin: plays once automatically when the page loads. ~0.5s of fast,
   constant-speed rotation (2 full turns), then eases smoothly into a full
   stop over the remaining ~0.3s — no bounce, no overshoot, just a gradual
   wind-down. Final angle (855deg) is a clean multiple of the mark's own
   45° symmetry, so it visually "resets" to its starting orientation.
   This is a keyframe `animation`, not a `transition` — it's exempt from the
   single motion-signature rule, which governs hover/focus/active feedback,
   not entrance/loading sequences. */
@keyframes os-boot-spin {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(400deg); }
  80%  { transform: rotate(340deg); }
  100% { transform: rotate(360deg); }
}

.logo-icon.boot-spinning .os-blades {
  animation: os-boot-spin 850ms linear 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .logo-icon.boot-spinning .os-blades { animation: none; }
}

.nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  font-family: var(--font-label);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--oneshot-warm-white);
}

.nav a {
  position: relative;
  padding-bottom: 4px;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--oneshot-warm-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--motion-signature);
}

.nav a:hover::after,
.nav a:active::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav a[aria-current="page"] { color: var(--trim); }
.nav a[aria-current="page"]::after { background: var(--trim); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(253, 251, 246, 0.4);
  border-radius: 2px;
  padding: 0;
  transition: var(--motion-signature);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle:hover,
.nav-toggle:active {
  border-color: var(--trim);
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--oneshot-warm-white);
  transition: var(--motion-signature);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(29, 47, 78, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: var(--motion-signature);
}

.nav-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Hero ---------- */

.hero {
  /* Matches .shutter-hero's rhythm (the homepage hero) so every page opens
     with the same amount of air, not just the same colors/type. */
  padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(4rem, 9vw, 6.5rem);
}

/* Photography page only: a faint, hand-traced outline of David's own
   camera sits behind the hero copy — a quiet watermark, not a photo.
   Sepia-brown (pulled from the brand's gold-shadow stop) so it reads as
   warm, archival ink rather than a flat gray placeholder. */
.hero-camera {
  position: relative;
  overflow: hidden;
  /* Section grows to fully contain the outline's own height (it's a
     square image, so height === width) — nothing gets cropped by the
     section boundary, regardless of viewport width. */
  min-height: min(92vw, 1104px);
}

.hero-camera-outline {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 1104px); /* 78vw/936px base, +18% */
  height: min(92vw, 1104px);
  opacity: 0.058;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hero-camera .container-wide {
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  color: var(--trim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-label);
}

.hero h1 {
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.98;
  margin: 0 0 1.5rem;
  max-width: 14ch;
}

.hero p {
  color: var(--fg-dim);
  max-width: 42ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin: 0 0 2.25rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.7rem;
  border: 1px solid var(--fg);
  border-radius: 2px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-label);
  font-weight: 700;
  background: transparent;
  color: var(--fg);
  transition: var(--motion-signature);
}

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover,
.btn:active {
  background: var(--fg);
  color: var(--bg);
}

.btn.btn-accent {
  border-color: var(--header-navy);
  background: var(--header-navy);
  color: var(--paper);
}

.btn.btn-accent:hover,
.btn.btn-accent:active {
  background: transparent;
  color: var(--header-navy);
}

/* Shared interaction finish: a small lift, a crisp press, and a visible
   keyboard-focus ring. The palette remains entirely within the brand kit. */
:where(.btn, .nav a, .footer-links a, .nav-toggle) {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate3d(0, -2px, 0); }
  .nav a:hover,
  .footer-links a:hover { transform: translate3d(0, -1px, 0); }
}

.btn:active { transform: translate3d(0, 0, 0) scale(.985); }
.nav a:active,
.footer-links a:active { transform: translate3d(0, 1px, 0); }

:where(a, button):focus-visible {
  outline: 2px solid var(--oneshot-gold-highlight);
  outline-offset: 4px;
}

/* ---------- Shutter hero: split statement + toggling visual ---------- */

.shutter-hero {
  padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(4rem, 9vw, 6.5rem);
}

.shutter-grid {
  /* Single column: the AI deploy-terminal visual that used to live in a
     second column here now lives on the AI Consulting page instead. */
  display: grid;
  grid-template-columns: 1fr;
  max-width: 62ch;
}

.shutter-copy h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.04;
  margin: 0 0 1.25rem;
  max-width: 15ch;
}

.shutter-copy > p {
  color: var(--fg-dim);
  max-width: 44ch;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  margin: 0 0 2rem;
}

.shutter-toggle {
  position: relative;
  display: inline-flex;
  border: var(--border-thread);
  border-radius: 2px;
  padding: 3px;
  font-family: var(--font-label);
}

.shutter-toggle-btn {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  padding: 0.65rem 1.1rem;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-dim);
  cursor: pointer;
  transition: var(--motion-signature);
}

.shutter-toggle-btn.is-active { color: var(--paper); }

.shutter-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  background: var(--header-navy);
  border: 1px solid var(--trim);
  border-radius: 1px;
  transition: var(--motion-signature);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shutter-toggle.mode-ai .shutter-toggle-thumb,
.shutter-toggle.mode-b .shutter-toggle-thumb {
  transform: translateX(100%);
}

.shutter-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border: var(--border-thread);
}

.shutter-panel {
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  transform: scale(0.985);
  transition: var(--motion-signature);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
}

.shutter-panel.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.shutter-panel .frame-tag {
  position: absolute;
  top: 0.9rem;
  left: 1.1rem;
}

.shutter-panel[data-panel="ai"] {
  align-items: stretch;
  justify-content: center;
}

.code-snippet {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--fg);
  white-space: pre-wrap;
  margin: 0;
}

.code-snippet .ok { color: var(--trim); }

/* ---------- Zero-prompt deploy terminal (hero AI panel) ---------- */

.deploy-terminal {
  position: relative;
  background: var(--header-navy);
  /* Softened, continuous-feeling corners — a laptop-bezel curve rather
     than the sitewide 1-2px hairline radius used elsewhere. */
  border-radius: 18px;
  padding: 1.1rem 1.25rem;
}

.dt-scroll-viewport {
  position: relative;
  height: 220px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
}

.dt-prompt-block {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--paper);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 16px;
}

.dt-line {
  display: block;
  opacity: 0;
}

.dt-check {
  display: block;
  opacity: 0;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--paper);
}

.dt-brand { position: relative; display: inline-block; font-weight: 700; }
.dt-brand-base { color: var(--paper); }
.dt-brand-wipe {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
}
.dt-brand-glisten {
  display: inline-block;
  /* All four locked President Gold stops, so the brand-name glisten and
     the header underline read as the same material, not two near-golds. */
  background-image: linear-gradient(115deg, var(--oneshot-gold-shadow) 0%, var(--oneshot-gold-body) 38%, var(--oneshot-gold-highlight) 50%, var(--oneshot-gold-body) 62%, var(--oneshot-gold-return) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dt-scroll-inner { padding-bottom: 44px; }
/* Scroll position itself is now driven frame-by-frame from JS (see
   js/deploy-terminal.js) so the speed-up/settle curve can be non-linear;
   this class still gates the per-line fade-ins and the brand-name reveal. */
.dt-scroll-inner.dt-playing .dt-line { animation: dtFadeUp .3s ease-out forwards; animation-delay: var(--d); }
.dt-scroll-inner.dt-playing .dt-check { animation: dtFadeUp .3s ease-out forwards; animation-delay: var(--d); }
.dt-scroll-inner.dt-playing .dt-brand-wipe { animation: dtWipeReveal 1s cubic-bezier(.4,0,.2,1) 6.51s forwards; }
.dt-scroll-inner.dt-playing .dt-brand-glisten { animation: dtGoldGlisten 1s linear 6.51s forwards; }

/* Final line emphasis: once the (decelerated) scroll settles on the last
   line, a soft gold glow — matched to --trim — pulses behind the whole
   line, not just the brand name, then eases down to a faint, sustained glow. */
.dt-scroll-inner.dt-playing .dt-check-final {
  animation: dtFadeUp .3s ease-out forwards, dtFinalEmphasis 1.6s ease-out forwards;
  animation-delay: var(--d), 6.51s;
}

@keyframes dtFadeUp { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes dtWipeReveal { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes dtGoldGlisten { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@keyframes dtFinalEmphasis {
  0% { text-shadow: 0 0 0 rgba(198, 161, 83, 0); }
  45% { text-shadow: 0 0 16px rgba(198, 161, 83, 0.8); }
  100% { text-shadow: 0 0 5px rgba(198, 161, 83, 0.35); }
}

/* ---------- AI Consulting hero: centered, widened deploy terminal ---------- */

.dt-hero-wrap {
  /* Widened 50% vs. the terminal's old homepage-hero footprint (~650px),
     then tightened back 20% per later feedback: 975px * 0.8 = 780px. */
  max-width: 780px;
  margin: 2.75rem auto 0;
}

.dt-hero-tag {
  display: block;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--trim);
  margin: 0 0 0.75rem;
}

/* ---------- Turn strip (weeks -> days -> hours -> minutes) ---------- */

/* Top padding trimmed 30% so the gold eyebrow + dial animation sit
   noticeably closer to (higher relative to) the navy header bar above. */
.turn-strip { padding: clamp(2.45rem, 5.6vw, 3.85rem) 0 clamp(3.5rem, 8vw, 5.5rem); }

.turn-eyebrow {
  font-family: var(--font-label);
  font-size: 1.2675rem; /* 0.975rem base, +30% */
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--trim);
  text-align: center;
  margin: 0 0 1.5rem;
}

.turn-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.turn-content {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  width: max-content;
  position: relative;
}

.turn-logo-slot {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 85px;
  position: relative;
  z-index: 1;
}

.turn-logo {
  width: 81.25px;
  height: 81.25px;
  color: var(--fg);
}

.turn-logo.nudging { animation: turn-logo-nudge 0.45s cubic-bezier(0.3, 0.7, 0.3, 1) both; }

@keyframes turn-logo-nudge {
  0% { transform: translateX(0) rotate(0deg); }
  35% { transform: translateX(28px) rotate(20deg); }
  65% { transform: translateX(-5px) rotate(-5deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Construction-line detailing (Vitruvian precision-instrument read): a
   faint compass ring around the star and around each dial appears only
   while that element is actively in motion and retracts once it settles —
   proving the geometry rather than just decorating it. Toggled by
   js/turn-strip.js off the same master timeline that drives everything
   else, so it can never drift out of sync. */
.turn-logo-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 119px;
  height: 119px;
  transform: translate(-50%, -50%);
  border: 0.5px solid rgba(184, 152, 90, 0.35);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.turn-logo-ring.active { opacity: 1; }

.turn-dials-wrap {
  display: flex;
  align-items: flex-start;
  gap: 31.25px;
}

.turn-dial {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.turn-dial-face {
  width: 85px;
  height: 85px;
  border: 2px solid var(--trim);
  border-radius: 50%;
  position: relative;
  background: var(--bg);
}

.turn-dial-ring {
  position: absolute;
  inset: -10px;
  border: 0.5px solid rgba(184, 152, 90, 0.35);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.turn-dial-ring.active { opacity: 1; }

/* Rim tick at the 15-min mark (3 o'clock) — flashes the instant that
   dial's hand lands there. */
.turn-dial-tick {
  position: absolute;
  top: 50%;
  right: -3px;
  width: 6px;
  height: 0.5px;
  background: rgba(184, 152, 90, 0.35);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.turn-dial-tick.flash { opacity: 1; background: var(--trim); }

.turn-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 32.5px;
  background: var(--fg);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(270deg);
}

.turn-hand.rolling { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.turn-hand.nudging { transition: transform 0.188s ease-out; }

.turn-word {
  font-family: var(--font-label);
  font-size: 23.4375px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

.turn-check {
  width: 41.25px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--trim);
  font-size: 45px;
  opacity: 0;
  margin-left: 4px;
  transition: opacity 0.15s ease;
}

.turn-check.visible { opacity: 1; }

.turn-track {
  position: absolute;
  left: calc(100px + 15px);
  right: calc(41.25px + 6.25px + 15px);
  top: 42.5px;
  height: 0.5px;
  background: rgba(184, 152, 90, 0.15);
  z-index: 0;
}

.turn-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--trim);
  opacity: 0.25;
}

/* .turn-content is width: max-content (~685px: logo slot + 4 dials + gaps +
   checkmark — 25% larger than the original ~548px) so the row never wraps
   mid-sequence — the connecting track line's position is derived from real
   DOM geometry in js/turn-strip.js (getBoundingClientRect), not guessed
   offsets, so scaling the whole block down is safe: the JS re-measures the
   already-scaled boxes and the fill line still lines up. Breakpoint scale
   factors below are reduced from the pre-25%-increase values (0.72/0.48)
   so the on-screen mobile footprint stays the same as before and doesn't
   overflow narrow viewports — the 25% size increase is realized at
   tablet/desktop widths where there's room for it. */
@media (max-width: 640px) {
  .turn-content { transform: scale(0.576); transform-origin: 50% 0%; }
}

@media (max-width: 480px) {
  .turn-content { transform: scale(0.384); }
}

/* ---------- Section rhythm ---------- */

.section {
  padding: clamp(4.5rem, 11vw, 8rem) 0;
  border-top: var(--border-thread);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin: 0;
}

.muted {
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.85rem;
}

.section-head .muted {
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.section-head a.muted {
  position: relative;
}

.section-head a.muted::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: var(--fg-dim);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--motion-signature);
}

.section-head a.muted:hover::after,
.section-head a.muted:active::after { transform: scaleX(1); }

/* ---------- Editorial gallery (asymmetric, placeholder frames) ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

.frame {
  position: relative;
  border: var(--border-thread);
  border-radius: 1px;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: flex-end;
  transition: var(--motion-signature);
}

.frame:hover,
.frame:active {
  transform: translateY(-4px);
  border-color: rgba(29, 47, 78, 0.3);
}

.frame .frame-label {
  position: relative;
  width: 100%;
  padding: 1rem 1.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-family: var(--font-label);
}

.frame-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 1;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--fg);
  opacity: 0.6;
}

/* asymmetric spans — magazine layout, not a uniform grid */
.frame.span-7 { grid-column: span 7; aspect-ratio: 4 / 3; }
.frame.span-5 { grid-column: span 5; aspect-ratio: 3 / 4; }
.frame.span-4 { grid-column: span 4; aspect-ratio: 3 / 4; }
.frame.span-8 { grid-column: span 8; aspect-ratio: 16 / 9; }
.frame.span-6 { grid-column: span 6; aspect-ratio: 1 / 1; }

/* ---------- Photo timeline (2014-tumblr-dashboard-style scroll feed) ----------
   A single vertical spine down the center (left-aligned on mobile), photo
   cards alternating left/right, each photo wrapped in a paper-white mat for
   a vintage-print feel. A toggle switches the feed between true chronological
   order and a shuffled "random mix" — reuses .shutter-toggle for visual
   consistency with the rest of the site. Brass stays hairline-only here too:
   the spine fill and reveal-dots use the paper/ink pairing, not a brass fill. */

.timeline-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.timeline-controls .shutter-toggle-btn {
  padding: 0.55rem 0.9rem;
}

/* Home/Away now stands alone, centered on its own line above the
   timeline, rather than sharing the section-head row with the title and
   the chrono/shuffle control. */
.visibility-toggle-row {
  display: flex;
  justify-content: center;
  margin: 0 0 2rem;
}

/* "Selected work" heading removed — the sort control is the only thing
   left in this row, so it sits flush right instead of collapsing to
   flex-start under .section-head's space-between rule. */
#work .section-head {
  justify-content: flex-end;
  /* Base 3.5rem, halved to 1.75rem, halved again — part of closing the
     camera-to-toggle gap. */
  margin-bottom: 0.875rem;
}

/* Space between the camera outline above and the Home/Away toggle below
   cut 50%, then cut 50% again: trims the hero's own bottom padding and
   this section's top padding (the two biggest contributors) by half
   each time, on top of the section-head margin above. Scoped to this
   page only. */
.hero-camera {
  padding-bottom: clamp(1rem, 2.25vw, 1.625rem);
}

#work {
  padding-top: clamp(1.125rem, 2.75vw, 2rem);
}

/* Chronological/Shuffle replaced with a plain, quiet pair of arrows —
   flips sort direction only, no pill/border chrome like .shutter-toggle.
   Deliberately small and out of the way; this is a utility, not a feature. */
.timeline-sort {
  display: inline-flex;
  gap: 2px;
}

.timeline-sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--fg-dim);
  cursor: pointer;
  transition: var(--motion-signature);
}

.timeline-sort-btn svg {
  width: 15px;
  height: 15px;
}

.timeline-sort-btn:hover {
  color: var(--fg);
}

.timeline-sort-btn.is-active {
  color: var(--oneshot-gold-body, var(--trim));
  border-color: rgba(198, 161, 83, 0.35);
}

/* Home/Away carries the brand's gold accent — a slightly warmer treatment
   than the plain sort arrows, since this is the one the site's whole
   "old money, new school" character should show up on. Lives in its own
   centered row now (see .visibility-toggle-row), not inside .timeline-controls. */
.visibility-toggle-row .visibility-toggle {
  border-color: var(--oneshot-gold-body, var(--trim));
  /* 70% larger overall: outer padding scaled with it (3px base -> ~5px)
     so the thumb inset below stays flush with the button edge. */
  padding: var(--visibility-shell-padding, 5px);
}

.visibility-toggle-row .visibility-toggle .shutter-toggle-thumb {
  background: var(--oneshot-navy, var(--header-navy));
  border-color: var(--oneshot-gold-body, var(--trim));
  top: var(--visibility-shell-padding, 5px);
  left: var(--visibility-shell-padding, 5px);
  bottom: var(--visibility-shell-padding, 5px);
  width: calc(50% - var(--visibility-shell-padding, 5px));
}

.visibility-toggle-row .visibility-toggle .shutter-toggle-btn {
  /* Base .shutter-toggle-btn: padding 0.65rem 1.1rem, font-size 0.72rem.
     +70% on both. */
  padding: var(--visibility-button-pad-y, 1.105rem) var(--visibility-button-pad-x, 1.87rem);
  font-size: var(--visibility-button-font, 1.224rem);
}

.visibility-toggle-row .visibility-toggle .shutter-toggle-btn.is-active {
  color: var(--oneshot-cream, var(--paper));
}

.photo-timeline {
  position: relative;
  padding: 1rem 0 0;
}

.photo-timeline::before {
  /* base spine — dim, always visible */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(29, 47, 78, 0.14);
  transform: translateX(-50%);
}

.photo-timeline::after {
  /* fill spine — grows with scroll progress via --spine-fill (0–1), set by JS */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(var(--spine-fill, 0) * 100%);
  background: var(--trim);
  transform: translateX(-50%);
  transition: height 120ms linear;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: start;
  margin-bottom: 0.75rem;
}

/* Cards alternate left/right of the spine, so pulling each one up doesn't
   stack it on top of the last — it just lets consecutive cards climb into
   the same vertical band, up to ~10% of a card's height, so the timeline
   reads tighter instead of stretching on and on. Scoped to the alternating
   desktop/tablet layout only — on the single-column mobile stack (below)
   every card shares one column, so this would overlap photos directly. */
@media (min-width: 721px) {
  .timeline-item:not(:first-child) {
    margin-top: clamp(-3.5rem, -6vw, -4.5rem);
  }
}

.timeline-item-dot {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--trim);
  transform: translateX(-50%);
  z-index: 2;
  transition: var(--motion-signature);
}

.timeline-item.is-visible .timeline-item-dot {
  background: var(--paper); /* brass ring stays the accent; fill is always paper, not a brass fill */
}

.timeline-card {
  grid-column: 1;
  justify-self: end;
  /* 420px * 1.15 = 483px. Width is the only constraint on the photo itself
     (aspect-ratio handles height), so scaling this scales the whole image
     proportionally without touching its aspect ratio. */
  width: min(483px, 100%);
  padding-right: clamp(1.5rem, 4vw, 3rem);
  text-align: right;
}

/* Horizontal (landscape) photos read as too small at the same width as
   portrait ones — sized up 40% from the base (now 483px -> 676px, same
   40%-over-base relationship, just carried through the +15% bump above).
   Height still follows the photo's own aspect-ratio automatically, so
   nothing stretches or crops; only the ceiling on how large the card is
   allowed to get changes. Scoped above the 720px stacking breakpoint so it
   can't out-specificity the mobile width:100% override below. */
@media (min-width: 721px) {
  .timeline-card.is-landscape {
    width: min(676px, 100%);
  }
}

.timeline-item.side-right .timeline-card {
  grid-column: 3;
  justify-self: start;
  padding-right: 0;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  text-align: left;
}

.timeline-photo-frame {
  /* Same branded .photo-framed mat as the Bio portrait (10px paper-white
     border + faint grain), just with the timeline's own slight tilt and
     lift-on-hover layered on top — see .photo-framed below for the mat/
     grain/stacking rules themselves. */
  display: inline-block;
  width: auto;
  transition: var(--motion-signature);
}

/* Extra room at the bottom of the mat for the faint EXIF line — a nod to
   writing settings in pencil on the white border of a contact print. */
.timeline-photo-frame.photo-framed {
  padding: 10px 10px 26px;
}

.timeline-exif {
  position: absolute;
  left: 13px;
  bottom: 8px;
  z-index: 1;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
  opacity: 0.45;
  pointer-events: none;
}

.timeline-location,
.timeline-date-corner {
  position: absolute;
  right: 13px;
  bottom: 8px;
  z-index: 1;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
  opacity: 0.45;
  pointer-events: none;
}

.timeline-item:nth-child(odd) .timeline-photo-frame,
.timeline-item:nth-child(even) .timeline-photo-frame { transform: none; }

.timeline-photo-frame:hover,
.timeline-photo-frame:active {
  transform: translateY(-3px);
  border-color: var(--trim);
}

.timeline-photo {
  display: block;
  width: 100%;
  aspect-ratio: var(--photo-ratio, 4 / 5);
  object-fit: cover;
  background: var(--oneshot-warm-white);
}

.timeline-photo.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
}

.timeline-caption {
  margin: 0.6rem 0 0;
}

.timeline-caption-date {
  display: block;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--trim-dim);
}

.timeline-caption-text {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--fg-dim);
}

@media (max-width: 720px) {
  .photo-timeline::before,
  .photo-timeline::after { left: 10px; }

  .timeline-item,
  .timeline-item.side-right {
    display: grid;
    grid-template-columns: 20px 1fr;
  }

  .timeline-item-dot { left: 10px; }

  .timeline-card,
  .timeline-item.side-right .timeline-card {
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    margin-inline: 0;
    padding: 0 0 0 1.5rem;
    text-align: left;
  }
}

/* ---------- Breadcrumb (musings/post back-links) ---------- */

.breadcrumb {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
  text-transform: uppercase;
  transition: var(--motion-signature);
}

.breadcrumb:hover,
.breadcrumb:active { color: var(--trim); }

/* ---------- Home hub: two-path cards ---------- */

.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.path-grid.is-duo {
  grid-template-columns: repeat(2, 1fr);
}

.path-card.is-featured {
  border-color: var(--trim);
}

.path-card {
  position: relative;
  border: var(--border-thread);
  padding: clamp(2.5rem, 5vw, 3.5rem);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  transition: var(--motion-signature);
}

.path-card:hover,
.path-card:active {
  border-color: var(--trim);
  transform: translateY(-3px);
}

.path-card .path-eyebrow {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--trim);
  margin: 0 0 0.75rem;
}

.path-card h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.75rem;
}

.path-card p {
  color: var(--fg-dim);
  margin: 0 0 1.5rem;
  max-width: 40ch;
}

.path-card .path-arrow {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  position: relative;
  align-self: flex-start;
  padding-bottom: 3px;
}

.path-card .path-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--trim);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--motion-signature);
}

.path-card:hover .path-arrow::after,
.path-card:active .path-arrow::after { transform: scaleX(1); }

/* ---------- Method / process steps ---------- */

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.method-step {
  border-top: var(--border-thread);
  padding-top: 1.5rem;
}

.method-step .step-num {
  font-family: var(--font-label);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--trim);
  margin: 0 0 0.5rem;
}

.method-step h3 {
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
}

.method-step p {
  color: var(--fg-dim);
  font-size: 0.95rem;
  margin: 0;
}

/* ---------- Stat / results grid ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.stat-card {
  border-top: var(--border-thread);
  padding-top: 1.25rem;
}

.stat-card .stat-num {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  color: var(--trim);
  margin: 0 0 0.4rem;
}

.stat-card .stat-label {
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Musings index: controls, tags, card grid, pagination ---------- */

.musings-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.5rem;
}

#musings-search,
#musings-sort {
  background: var(--oneshot-warm-white);
  border: var(--border-thread);
  color: var(--fg);
  font-family: var(--font-label);
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-radius: 2px;
  transition: var(--motion-signature);
}

#musings-search { flex: 1; min-width: 200px; }
#musings-search:focus,
#musings-sort:focus { outline: none; border-color: var(--trim); }

.musings-count {
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.78rem;
  white-space: nowrap;
}

.tag-bar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.tag-btn {
  font-family: var(--font-label);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.8rem;
  border: var(--border-thread);
  background: transparent;
  color: var(--fg-dim);
  border-radius: 2px;
  cursor: pointer;
  transition: var(--motion-signature);
}

.tag-btn:hover,
.tag-btn:active { color: var(--fg); border-color: rgba(29, 47, 78, 0.3); }

.tag-btn.is-active {
  color: var(--paper);
  background: var(--header-navy);
  border-color: var(--header-navy);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
}

.post-card {
  display: flex;
  flex-direction: column;
  border: var(--border-thread);
  padding: 1.75rem;
  background: var(--oneshot-warm-white);
  transition: var(--motion-signature);
}

.post-card:hover,
.post-card:active {
  border-color: var(--trim);
  transform: translateY(-1px);
}

.post-card-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-label);
  font-size: 0.72rem;
  color: var(--fg-dim);
  margin-bottom: 1rem;
}

.post-card h3 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.post-card p { color: var(--fg-dim); font-size: 0.92rem; margin: 0 0 1rem; }

.post-card-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; }

.tag-pill {
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.55rem;
  border: var(--border-thread);
  color: var(--fg-dim);
  border-radius: 2px;
}

.musings-status {
  grid-column: 1 / -1;
  padding: 2rem 0;
  color: var(--fg-dim);
  font-size: 0.95rem;
  max-width: 60ch;
}

.musings-status code {
  font-family: var(--font-label);
  background: rgba(29, 47, 78, 0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
}

.section-tint {
  background: var(--oneshot-cream);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 3rem;
}

.pagination-status {
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: var(--fg-dim);
}

/* ---------- Post body: markdown-rendered content ---------- */

.post-body-content ul,
.post-body-content ol {
  color: var(--fg);
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}

.post-body-content li { margin-bottom: 0.4rem; }

.post-body-content code {
  font-family: var(--font-label);
  background: rgba(29, 47, 78, 0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  font-size: 0.9em;
}

.post-body-content pre {
  background: rgba(29, 47, 78, 0.04);
  border: var(--border-thread);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border-radius: 2px;
}

.post-body-content pre code { background: none; padding: 0; }

.post-body-content a {
  color: var(--trim);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-body-content blockquote {
  border-left: var(--border-thread);
  border-left-width: 2px;
  border-left-color: var(--heritage);
  padding-left: 1.25rem;
  color: var(--fg-dim);
  margin: 0 0 1.25rem;
}

.post-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.75rem;
  border: var(--border-thread);
  background: var(--header-navy);
}

.post-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Table of contents ---------- */

.post-toc {
  border: var(--border-thread);
  padding: 1.25rem 1.5rem;
  margin: 0 0 2.5rem;
}

.post-toc-label {
  font-family: var(--font-label);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  margin: 0 0 0.75rem;
}

.post-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.post-toc a {
  color: var(--fg);
  font-size: 0.92rem;
  transition: var(--motion-signature);
}

.post-toc a:hover,
.post-toc a:active { color: var(--trim); }

/* ---------- Prev/next post navigation ---------- */

.post-nav {
  margin-top: 3rem;
}

.post-nav-ledger {
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg);
}

.post-nav-link {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 28px;
  gap: 1.15rem;
  min-height: 154px;
  color: var(--fg);
  transition: var(--motion-signature);
}

.post-nav-link + .post-nav-link { border-top: var(--border-thread); }

.post-nav-number {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1.25rem;
  border-right: 1px solid var(--trim);
  color: var(--trim);
  font-family: var(--font-label);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.post-nav-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1.25rem 0;
}

.post-nav-label {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}

.post-nav-title {
  margin-top: 0.45rem;
  font-family: var(--font-editorial-title);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--fg);
}

.post-nav-meta {
  margin-top: 0.7rem;
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-nav-arrow {
  align-self: center;
  color: var(--fg);
  font-family: var(--font-label);
  font-size: 1.45rem;
  transition: color var(--motion-state) var(--oneshot-ease), transform var(--motion-state) var(--oneshot-ease);
}

.post-nav-link:hover .post-nav-arrow,
.post-nav-link:focus-visible .post-nav-arrow { color: var(--trim); }

.post-nav-link--next:hover .post-nav-arrow,
.post-nav-link--next:focus-visible .post-nav-arrow { transform: translateX(4px); }

.post-nav-link--prev:hover .post-nav-arrow,
.post-nav-link--prev:focus-visible .post-nav-arrow { transform: translateX(-4px); }

.post-nav-footer {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.1rem;
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-nav-index {
  padding-bottom: 0.18rem;
  border-bottom: 1px solid var(--trim);
  color: var(--fg);
}

/* ---------- Musings list ---------- */

.post-list {
  display: flex;
  flex-direction: column;
}

.post-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--gap);
  padding: 2.75rem 0;
  border-top: var(--border-thread);
  align-items: baseline;
}

.post-row:last-child { border-bottom: var(--border-thread); }

.post-date {
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.post-row h3 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.post-row p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 0.95rem;
  max-width: 60ch;
}

a.post-title-link {
  position: relative;
  background-image: linear-gradient(var(--trim), var(--trim));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: var(--motion-signature);
}

a.post-title-link:hover,
a.post-title-link:active {
  background-size: 100% 1px;
}

/* ---------- Single post ---------- */

.post-template-root,
.post-template { overflow-x: clip; }

.post-page { min-height: 60vh; }

.post-monument-shell {
  padding: clamp(1.25rem, 3vw, 2rem) var(--gap) 0;
}

.post-monument-inner {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.post-monument-back {
  display: inline-block;
  margin: 0 0 1.6rem;
  color: var(--fg);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.post-monument-back:hover,
.post-monument-back:focus-visible { color: var(--trim); }

.post-monument-photo {
  position: relative;
  height: clamp(500px, 52vw, 620px);
  margin: 0;
  overflow: hidden;
  background: var(--fg);
}

.post-monument-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 25%, rgba(12, 28, 49, 0.8) 100%);
  pointer-events: none;
}

.post-monument-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.05);
}

.post-monument-title {
  position: absolute;
  z-index: 1;
  left: clamp(1.6rem, 6vw, 4.75rem);
  right: clamp(1.6rem, 7vw, 5.5rem);
  bottom: clamp(2rem, 4vw, 3.2rem);
  color: var(--bg);
}

.post-monument-eyebrow,
.post-monument-meta {
  margin: 0;
  color: inherit;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.post-monument-title h1 {
  max-width: 11ch;
  margin: 0.55rem 0 1.55rem;
  color: inherit;
  font-family: var(--font-header);
  font-size: clamp(4.2rem, 8vw, 7.25rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.post-monument-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.post-monument-meta::before {
  content: "";
  width: 3.25rem;
  border-top: 1px solid var(--trim);
}

.post-monument-photo--editorial {
  height: auto;
  overflow: visible;
  background: transparent;
}

.post-monument-photo--editorial::after { display: none; }

.post-monument-photo--editorial img,
.post-monument-photo--editorial .post-monument-video {
  width: 70%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  padding: clamp(0.45rem, 0.8vw, 0.7rem);
  border: 1px solid rgba(29, 47, 78, 0.22);
  background: #f3efe5;
  box-shadow: 0 1.1rem 2.8rem rgba(29, 47, 78, 0.1);
  object-fit: cover;
  object-position: center top;
  filter: none;
}

.post-monument-video {
  display: block;
}

.post-monument-photo--editorial .post-monument-title {
  position: static;
  width: min(835px, calc(100% - (2 * var(--gap))));
  margin-inline: auto;
  padding: clamp(1.8rem, 4vw, 3rem) 0 0;
  color: var(--fg);
}

.post-monument-photo--editorial .post-monument-title h1 {
  max-width: 15.5ch;
  font-family: var(--font-editorial-title);
  font-size: clamp(3.8rem, 7vw, 6.75rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.99;
}

.post-title-quarter {
  display: inline-flex;
  align-items: baseline;
  margin-right: 0.08em;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.post-title-q-glyph {
  position: relative;
  display: inline-block;
}

.post-title-q-glyph::after {
  content: "";
  position: absolute;
  right: -0.03em;
  bottom: 0.07em;
  width: 0.34em;
  height: 0.055em;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(48deg);
  transform-origin: center;
}

.post-story-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  width: min(1040px, calc(100% - (2 * var(--gap))));
  margin: clamp(3.5rem, 7vw, 5rem) auto;
}

.post-story-rail {
  padding-top: 0.55rem;
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  line-height: 1.55;
}

.post-story-rail strong {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--fg);
  font-weight: 600;
}

.post-story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.3rem;
}

.post-story-tags span {
  padding: 0.25rem 0.5rem;
  border: var(--border-thread);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.post-monument-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.9rem 0 0 4.5rem;
}

.post-monument-photo--editorial .post-monument-meta { gap: 0; }

.post-monument-photo--editorial .post-monument-meta::before { display: none; }

.post-monument-photo--editorial .post-monument-tags { margin-left: 0; }

.post-monument-tags span {
  padding: 0.25rem 0.5rem;
  border: var(--border-thread);
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.post-story-layout--editorial {
  display: block;
  width: min(835px, calc(100% - (2 * var(--gap))));
}

.post-article-copy { min-width: 0; }

.post-article-copy .post-body-content {
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.72;
}

.post-article-copy .post-body-content p { margin: 0 0 1.55em; }

.post-article-copy .post-body-content > p:first-child::first-letter {
  float: left;
  padding: 0.12em 0.12em 0 0;
  color: var(--fg);
  font-family: var(--font-header);
  font-size: 4.6em;
  line-height: 0.76;
}

.post-article-copy .post-body-content.post-body-content--no-drop-cap > p:first-child::first-letter {
  float: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.post-article-copy .post-body-content > p:last-child {
  margin-top: 2.3em;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.post-page > .post-nav {
  width: min(1040px, calc(100% - (2 * var(--gap))));
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}

.post-page--editorial > .post-nav {
  width: min(835px, calc(100% - (2 * var(--gap))));
}

@media (max-width: 760px) {
  .post-monument-shell { padding-inline: 0; }
  .post-monument-back { margin-left: var(--gap); }
  .post-monument-photo { height: 500px; }
  .post-monument-photo.post-monument-photo--editorial { height: auto; }
  .post-monument-title { left: var(--gap); right: var(--gap); bottom: 2rem; }
  .post-monument-photo--editorial img,
  .post-monument-photo--editorial .post-monument-video { width: 88%; }
  .post-monument-photo--editorial .post-monument-title {
    display: block;
    width: 88%;
    padding-inline: 0;
  }
  .post-monument-title h1 { max-width: 9ch; font-size: clamp(3.25rem, 15vw, 4.25rem); }
  .post-monument-photo--editorial .post-monument-title h1 {
    max-width: 10.5ch;
    font-size: clamp(3rem, 13vw, 3.8rem);
    line-height: 1.02;
  }
  .post-monument-meta { gap: 0.8rem; }
  .post-monument-meta::before { width: 2.3rem; }
  .post-monument-tags { margin-left: 3.1rem; }
  .post-monument-photo--editorial .post-monument-tags { margin-left: 0; }
  .post-story-layout { grid-template-columns: 1fr; gap: 1.5rem; margin-block: 3rem; }
  .post-story-layout--editorial,
  .post-page--editorial > .post-nav { width: 88%; }
  .post-story-rail { display: none; }
  .post-article-copy .post-body-content { font-size: 1.08rem; line-height: 1.68; }
  .post-article-copy .post-body-content > p:first-child::first-letter { font-size: 4em; }
}

/* ---------- Accessibility utility ---------- */

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

/* ---------- About page ---------- */

.about-grid {
  display: grid;
  /* Portrait column widened 35% (0.6 vs. the original 0.444 fraction of the
     row) while keeping the same overall container width — the copy column
     absorbs the difference. Photo itself is width:100%/height:auto, so its
     aspect ratio is unaffected. */
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: start;
}

.about-portrait {
  /* No fixed aspect-ratio — the frame sizes itself to the photo's own
     dimensions so the original aspect ratio is never cropped. */
  border-radius: 1px;
  border: var(--border-thread);
  background: transparent;
  position: relative;
  overflow: hidden;
}

.about-portrait-photo {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---------- Branded photo frame ----------
   The standard treatment for any real, uploaded photo on the site (starting
   here on the Bio portrait): a 10px paper-white mat, corners softened just
   barely, with a faint aged-paper grain on the mat itself — same fractal-
   noise technique as the sitewide .grain-overlay/patina wash, just scoped
   to the mat instead of the whole page, and kept off the photo itself via
   explicit stacking (the ::before texture sits at z-index 0, the image at
   z-index 1). (An earlier version also added the logo's rounded corner-
   bracket arcs at each corner — tried on the Bio photo and dropped; they
   read as busy sitting on top of an actual photograph rather than an icon.)
   To apply to a new photo elsewhere on the site, wrap the <img> in a
   `.photo-framed` div. */

.photo-framed {
  position: relative;
  display: block;
  padding: 10px;
  border-radius: 3px;
  /* --oneshot-warm-white (#fdfbf6) mixed 30% toward pure white (#fefcf9)
     — brighter, closer to an actual print's stock, while the grain layer
     below still keeps it from reading as a flat digital white. */
  background: var(--oneshot-warm-white);
  border: var(--border-thread);
  overflow: hidden;
}

.photo-framed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.photo-framed > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.portrait-caption {
  /* Raised 15% closer to the photo border (0.3rem -> 0.255rem gap). */
  margin: 0.255rem 0 0;
  text-align: right;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
  opacity: 0.65;
}

.about-copy p { color: var(--fg-dim); font-size: 1.05rem; }
.about-copy h1 {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  margin: 0 0 1.5rem;
  color: var(--fg);
  max-width: 14ch;
}

/* Bio editorial profile: preserve the existing portrait at its current
   desktop footprint while giving the canonical copy a wider reading measure. */
.about-grid-editorial {
  display: block;
}

.about-grid-editorial .about-portrait-wrap {
  width: min(100%, 574px);
  margin-inline: auto;
}

.about-grid-editorial .about-copy {
  width: min(100%, 900px);
  max-width: 900px;
  margin: clamp(2.275rem, 4.55vw, 3.9rem) auto 0;
  padding-top: 0;
}

.about-grid-editorial .about-copy p {
  margin: 0 0 1.65em;
  color: var(--oneshot-navy);
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 1.55vw, 1.55rem);
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: -0.012em;
}

.about-grid-editorial .portrait-caption {
  margin-top: 0.55rem;
  color: var(--trim-dim);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-block {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: var(--border-thread);
}

.contact-block h2 {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-label);
  color: var(--fg-dim);
  margin: 0 0 1rem;
}

.contact-block a {
  color: var(--fg);
  background-image: linear-gradient(var(--trim), var(--trim));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: var(--motion-signature);
}

.contact-block a:hover,
.contact-block a:active { background-size: 100% 1px; }

/* ---------- Contact form ---------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 440px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-row label {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.form-row input,
.form-row textarea {
  background: transparent;
  border: var(--border-thread);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75rem 0.9rem;
  border-radius: 2px;
  transition: var(--motion-signature);
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--trim);
}

.contact-form .btn {
  align-self: flex-start;
  cursor: pointer;
}

.form-status {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--trim);
  min-height: 1.2em;
}

.form-status.is-error { color: #e08a8a; }

/* ---------- Newsletter signup ---------- */
/* .newsletter-form also carries the .contact-form class, so it inherits
   the exact same column layout, gap, max-width, and .btn alignment as the
   contact form above it — the two forms should read as one rhythm. Only
   the block spacing/divider and small heading are newsletter-specific. */

.newsletter-block {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: var(--border-thread);
}

.newsletter-block h2 {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-label);
  color: var(--fg-dim);
  margin: 0 0 0.6rem;
}

.newsletter-copy {
  font-size: 0.92rem;
  color: var(--fg-dim);
  max-width: 42ch;
  margin: 0 0 1.1rem;
}

/* ---------- Footer ---------- */
/* No filled block here either — same dark canvas, separated only by the
   hairline above it. */

.site-footer {
  padding: 4rem 0 4.5rem;
  background: var(--bg);
  color: var(--fg-dim);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  border-top: var(--border-thread);
}

.site-footer .container-wide {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a { position: relative; padding-bottom: 3px; transition: var(--motion-signature); }
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--trim);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--motion-signature);
}
.footer-links a:hover,
.footer-links a:active {
  color: var(--fg);
}
.footer-links a:hover::after,
.footer-links a:active::after { transform: scaleX(1); }

.footer-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 2.5rem;
  color: var(--header-navy);
}

.footer-mark svg {
  opacity: var(--flag-opacity, 0.55);
}

.footer-mark-dash {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--header-navy);
}

/* ---------- Responsive ----------
   Five-tier breakpoint system, tested/tuned at each rather than just the
   extremes: <480 (small phone), 480–768 (large phone / small tablet),
   768–1024 (tablet), 1024–1440 (laptop/desktop — the default, unmedia'd
   styles above), 1440+ (large desktop, see the min-width block at the
   bottom). The nav collapses to the off-canvas drawer at 1024px so it
   never wraps or crowds on tablet widths, not just phones. */

/* ----- Tablet and below (<=1024px): nav becomes an off-canvas drawer ----- */
@media (max-width: 1024px) {
  html, body { overflow-x: clip; }
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(320px, 84vw);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 6.5rem 1.75rem 2rem;
    gap: 0;
    /* The drawer is an extension of the page masthead, not a detached card. */
    background: var(--header-navy);
    border-left: 1px solid rgba(253, 251, 246, 0.15);
    color: var(--oneshot-warm-white);
    transform: translateX(100%);
    transition: var(--motion-signature);
    overflow-y: auto;
  }

  .nav.open { transform: translateX(0); }

  .nav-toggle { position: relative; z-index: 61; }
  .nav-toggle[aria-expanded="true"] { border-color: rgba(253, 251, 246, 0.4); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: var(--oneshot-warm-white); }

  .nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(253, 251, 246, 0.15);
    color: var(--oneshot-warm-white);
    font-size: 1.3rem;
  }

  .nav a[aria-current="page"] { color: var(--trim); }

  .nav a::after { display: none; }

  .frame.span-7, .frame.span-5, .frame.span-8, .frame.span-6, .frame.span-4 {
    grid-column: span 12;
    aspect-ratio: 4 / 3;
  }
  .path-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid-editorial .about-copy {
    max-width: 900px;
    padding-top: 0;
  }
  .shutter-grid { grid-template-columns: 1fr; }
  .shutter-visual { aspect-ratio: 16 / 10; }
}

/* ----- Large phone / small tablet & below (<=768px) ----- */
@media (max-width: 768px) {
  .site-header .container-wide { height: 76px; }
  .site-header .logo { min-height: 44px; }
  .nav { padding-top: 5.75rem; }

  .post-row { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .musings-controls { flex-direction: column; align-items: stretch; }
  .post-nav-link { grid-template-columns: 58px minmax(0, 1fr) 24px; gap: 0.8rem; min-height: 138px; }
  .post-nav-number { font-size: 1.55rem; }
  .post-nav-title { font-size: 1.35rem; }
  .about-copy .tag-bar { gap: 0.5rem; }

  /* Home/Away toggle on the photography page: base .shutter-toggle-btn is
     bumped +70% for the desktop-scale standalone row (see rule above), which
     reads oversized on phones. First cut to 50% of that, then bumped back
     up 25% per feedback — net ~62.5% of the desktop-scale size. */
  .visibility-toggle-row .visibility-toggle .shutter-toggle-btn {
    padding: var(--visibility-button-pad-y, 0.690625rem) var(--visibility-button-pad-x, 1.16875rem);
    font-size: var(--visibility-button-font, 0.765rem);
  }
}

/* ----- Small phone and below (<=480px) ----- */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }
  .timeline-controls { flex-wrap: wrap; row-gap: 0.6rem; }
  .contact-form { max-width: 100%; }
  .site-footer .container-wide { align-items: flex-start; }
  .footer-links { width: 100%; flex-wrap: wrap; gap: 0 .75rem; }
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ----- Large desktop (>=1440px): a little extra breathing room ----- */
@media (min-width: 1440px) {
  :root { --gap: clamp(2rem, 4vw, 4.5rem); }
}

/* ----- Touch tap targets ----- */
/* Small chip-style controls stay compact for mouse users (their visual
   density is intentional) but grow to the 44x44px minimum on touch
   devices, where precision is lower. Scoped to (pointer: coarse) rather
   than viewport width so a touch laptop/tablet in landscape still gets it. */
@media (pointer: coarse) {
  .tag-btn,
  .shutter-toggle-btn,
  .breadcrumb,
  .form-row input,
  .form-row textarea {
    min-height: 44px;
  }

  .form-row input {
    display: flex;
    align-items: center;
  }
}

/* ---------- Smooth-scroll wrapper (index page) ----------
   DIY momentum scroll: #smooth-wrapper is pinned via position:fixed and
   translated in JS toward the real scroll position each frame; #smooth-spacer
   (an empty div sized to match the wrapper's height) gives the document real
   scrollable height so the native scrollbar/keyboard/anchor links still work.
   The 96px spacer inside the wrapper compensates for the sticky header's own
   height, since content here is no longer in normal document flow after it. */

#smooth-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}

#hero-parallax {
  will-change: transform;
}

/* ---------- Patina tweak control (index page) ----------
   Collapsed behind a small gear button in the header by default, so it
   never has a permanent footprint to overlap content on any screen size —
   toggled open/closed via .patina-toggle (see js/main.js). */

.patina-control {
  position: fixed;
  top: 106px;
  right: 1.25rem;
  z-index: 65;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--paper);
  border: var(--border-thread);
  border-radius: 2px;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-dim);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: var(--motion-signature);
}

.patina-control.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.patina-toggle {
  width: 40px;
  height: 40px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 1.05rem;
  cursor: pointer;
  transition: var(--motion-signature);
  flex-shrink: 0;
}

.patina-toggle:hover,
.patina-toggle:active {
  border-color: var(--trim);
  color: var(--trim);
}

.patina-control .control-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.patina-control label { width: 3.4rem; }

.patina-control input[type="range"] {
  accent-color: var(--trim);
}

/* ---------- Photography lightbox ---------- */

[data-lightbox],
.timeline-photo-frame:has(img.timeline-photo) { cursor: pointer; }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(29, 47, 78, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--motion-signature);
}

.lightbox-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Substantially larger than before (was 85vw/80vh) — the photo should
   fill nearly the whole viewport, aspect ratio always intact via
   object-fit: contain, sourced from the same full-resolution file used
   on the timeline card itself (no separate lower-res asset). */
.lightbox-stage {
  max-width: 94vw;
  max-height: 90vh;
  position: relative;
}

/* The enlarged photo reuses the site's real .photo-framed white mat (see
   that class further down) rather than a generic border, so it reads as
   the same physical print, just held closer — same border, same faint
   grain, same EXIF/location/date corner styling as every timeline card. */
.lightbox-stage .photo-framed.lightbox-framed {
  display: inline-block;
  max-width: 94vw;
  max-height: 90vh;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.65);
}

.lightbox-stage .photo-framed.lightbox-framed > img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(94vw - 20px);
  max-height: calc(90vh - 56px);
  object-fit: contain;
}

.lightbox-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--oneshot-cream, var(--paper));
  opacity: 0.75;
  white-space: nowrap;
  padding: 0.3rem 0.85rem;
  border-top: 1px solid rgba(198, 161, 83, 0.35);
}

.lightbox-close,
.lightbox-nav {
  position: fixed;
  background: rgba(29, 47, 78, 0.55);
  border: 1px solid rgba(198, 161, 83, 0.4);
  color: var(--oneshot-cream, var(--paper));
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.3rem;
  transition: var(--motion-signature);
}

.lightbox-close:hover,
.lightbox-close:active,
.lightbox-nav:hover,
.lightbox-nav:active {
  border-color: var(--oneshot-gold-body, var(--trim));
  color: var(--oneshot-gold-body, var(--trim));
  background: rgba(29, 47, 78, 0.8);
}

.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lightbox-close,
  .lightbox-nav { width: 38px; height: 38px; font-size: 1.1rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

/* ---------- Opening splash: vault reveal ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
}

html.no-splash .splash { display: none; }

/* ---------- Splash phase 1: heritage quote reveal ---------- */

.splash-quote-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(84vw, 780px);
  text-align: center;
  z-index: 3;
  opacity: 1;
}

.splash-quote-stage.quote-done {
  animation: splash-quote-fade-out 616ms linear forwards;
}

@keyframes splash-quote-fade-out {
  to { opacity: 0; }
}

.splash-quote-rule {
  width: 0;
  height: 1px;
  background: var(--trim);
  margin: 0 auto 2.2rem;
}

.splash.quote-animate .splash-quote-rule {
  animation: splash-rule-draw 900ms cubic-bezier(0.65, 0, 0.35, 1) 200ms forwards;
}

@keyframes splash-rule-draw {
  to { width: 88px; }
}

.splash-quote {
  font-family: "Spectral", "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.415vw, 2.0125rem);
  line-height: 1.5;
  color: #ffffff;
  letter-spacing: 0.01em;
  margin: 0;
}

.splash-quote-word {
  display: inline-block;
  opacity: 0;
  white-space: pre;
}

.splash.quote-animate .splash-quote-word {
  animation: splash-word-in 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes splash-word-in {
  from { opacity: 0; transform: translateY(0.25em) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.splash-quote-finale {
  position: relative;
  color: var(--oneshot-cream);
  font-family: "DM Serif Display", "Fraunces", "Cormorant Garamond", serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.875rem, 4.6875vw, 5.625rem);
  /* line-height:1 fixes the same inherited half-leading inflation found
     on .logo-text and .splash-word — this element's ::after underline is
     positioned via `bottom:` relative to this box's own bottom edge, so
     an inflated line-box (1.6x font-size) was pushing the underline far
     below the visible glyphs regardless of the ::after offset itself. */
  line-height: 1.125;
}

.splash.quote-animate .splash-quote-finale {
  animation: splash-finale-in 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes splash-finale-in {
  0% { opacity: 0; transform: translateY(0.3em) scale(0.96); }
  60% { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1.02); }
}

.splash-quote-finale::before {
  content: "";
  position: absolute;
  inset: -0.65em -0.9em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 161, 83, 0.55) 0%, rgba(198, 161, 83, 0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.splash-quote-finale.impact-flash::before {
  animation: splash-impact-flash 420ms ease-out forwards;
}

@keyframes splash-impact-flash {
  0% { opacity: 0; transform: scale(0.6); }
  30% { opacity: 0.9; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.4); }
}

.splash-quote-finale::after {
  content: "";
  position: absolute;
  /* Extends 1px beyond the word on the left ('h' start) for emphasis;
     the right edge ends flush with the period (left:-1px + width:100%+1px
     lands exactly back at the box's own right edge). Relies on the parent
     being a content-sized inline-block with no horizontal padding, so its
     content-box edges equal the text's actual edges. */
  left: -1px;
  /* Gap-to-glyph-height ratio (0.0504em) — reduced a further 40% from the
     0.084em value, per direct feedback. Bottom offset's fixed term
     matches this element's own height (2.3px). */
  bottom: calc(-0.0504em - 2.3px);
  width: 0;
  height: 2.3px;
  /* Locked President Gold gradient — this is the site's one splash-page
     "isolated underline" moment per the brand kit, so it draws on the
     brand's own exact timing (340ms) rather than a bespoke one. */
  background: var(--oneshot-president-gold);
}

.splash-quote-finale.underline-go::after {
  animation:
    splash-pen-underline var(--oneshot-line-draw) var(--oneshot-ease) forwards,
    splash-underline-glow 480ms ease-out var(--oneshot-line-draw) forwards;
}

@keyframes splash-pen-underline {
  from { width: 0; }
  to   { width: calc(100% + 1px); }
}

@keyframes splash-underline-glow {
  0% { box-shadow: 0 0 0 rgba(198, 161, 83, 0); }
  30% { box-shadow: 0 0 14px 2px rgba(198, 161, 83, 0.85); }
  100% { box-shadow: 0 0 0 rgba(198, 161, 83, 0); }
}

.splash-quote-clause {
  display: block;
  opacity: 0;
}

@keyframes splash-clause-fade {
  from { opacity: 0; transform: translateY(0.25em); }
  to { opacity: 1; transform: translateY(0); }
}

.splash-quote-finale {
  display: inline-block;
  opacity: 0;
  transform-origin: 50% 100%;
}

@keyframes punch-drop {
  0% { opacity: 0; transform: translateY(-2.8em) scale(1, 1); }
  62% { opacity: 1; transform: translateY(0.04em) scale(1, 1); }
  70% { transform: translateY(0.16em) scale(1.07, 0.87); }
  85% { transform: translateY(-0.06em) scale(0.97, 1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

.splash-type-cursor {
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-left: 1px;
  background: currentColor;
  vertical-align: -0.1em;
  animation: splash-cursor-blink 800ms steps(1) infinite;
}

@keyframes splash-cursor-blink {
  50% { opacity: 0; }
}

.splash-quote-emph {
  color: #ffffff;
  font-weight: 500;
  font-style: italic;
  display: inline;
}

.splash-quote-eyebrow {
  font-family: "EB Garamond", serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--trim);
  opacity: 0;
  margin: 2.2rem 0 0;
}

.splash.quote-animate .splash-quote-eyebrow {
  animation: splash-word-in 900ms ease-out forwards;
}

.splash.quote-reduced .splash-quote-word,
.splash.quote-reduced .splash-quote-finale,
.splash.quote-reduced .splash-quote-eyebrow {
  opacity: 1;
}
.splash.quote-reduced .splash-quote-rule { width: 88px; }
.splash.quote-reduced .splash-quote-finale::after { width: calc(100% + 1px); }

.splash-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--header-navy);
  transition: none;
}

.splash-panel-left { left: 0; }
.splash-panel-right { right: 0; }

/* Doors open on the .doors-open class rather than a fixed animation-delay
   off .animate — JS adds this class either automatically (once the
   viewfinder has held for a moment) or immediately when the visitor
   clicks the brackets like a shutter button, so the timing has to be
   driven from script either way. See js/splash.js. */
.splash.doors-open .splash-panel-left {
  animation: splash-panel-left-out 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.splash.doors-open .splash-panel-right {
  animation: splash-panel-right-out 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes splash-panel-left-out {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes splash-panel-right-out {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

.splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
}

.splash-icon {
  display: block;
  width: clamp(48px, 12vw, 100px);
  height: clamp(48px, 12vw, 100px);
  opacity: 0;
  transform: rotate(-140deg) scale(0.6);
}

.splash-word {
  font-family: var(--font-header);
  font-style: normal;
  /* Locked brand lean: fully upright (0deg), same shared token as the
     header wordmark — not the old 12deg oblique placeholder, and not the
     since-corrected 1.5deg tilt. No fallback value needed: the token is
     always defined at :root. */
  transform: skewX(calc(-1 * var(--oneshot-wordmark-lean)));
  transform-origin: left bottom;
  font-weight: 600;
  color: var(--paper);
  font-size: clamp(1.3rem, 3.4vw, 2.4rem);
  letter-spacing: -0.01em;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  /* line-height:0.65 fixes the same inherited half-leading inflation as
     the header .logo-text — without it, this element's line-box is 1.6x
     its font-size, pushing the underline far below the visible glyphs. */
  line-height: 1.125;
  /* Same gold gradient underline + sheen recipe as the header .logo-text,
     so the wordmark reads identically wherever it appears on the site.
     Gap-to-glyph-height ratio matches the already-validated 0.0504em used
     by .splash-quote-finale ("hustle"), not the brand kit's absolute
     rem+px gap — that fixed value reads as oversized at this element's
     font-size, which is much smaller than the kit's own display lockup.
     Thickness is 2.3px, position offset (0.45px) stays fixed. */
  padding-bottom: calc(0.0504em + 3.65px);
  background-image: var(--oneshot-president-gold), linear-gradient(90deg, transparent 0%, rgba(255, 253, 248, .65) 50%, transparent 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 2.3px, 34% 2.3px;
  background-position: left calc(100% - 0.45px), 134% calc(100% - 0.45px);
}

/* Vault-unlock choreography: the icon pops in, then dials like a
   combination lock (right, hold, left, hold, final turn) — this part is
   always automatic, ~1900ms. Once it settles, the viewfinder brackets
   are "live": the visitor can click them like a shutter button, or (if
   they don't) the same click-and-open fires on its own shortly after.
   Either way it's the same sequence — bolts snap tight, then the vault
   doors (panels) swing open. Timing for that second half lives entirely
   in js/splash.js (DIAL_DONE / CLICK_DUR / DOORS_DUR), not in a CSS
   animation-delay, so a real click can jump straight to it. */
.splash.animate .splash-icon {
  animation: splash-dial-unlock 1900ms cubic-bezier(0.45, 0, 0.2, 1) both;
}
.splash.animate .splash-word {
  animation: splash-word-in 420ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}

@keyframes splash-dial-unlock {
  0%   { opacity: 0; transform: rotate(-70deg) scale(0.75); }
  20%  { opacity: 1; transform: rotate(4deg) scale(1.015); }
  28%  { opacity: 1; transform: rotate(0deg) scale(1); }
  45%  { transform: rotate(10deg) scale(1); }
  56%  { transform: rotate(10deg) scale(1); }
  74%  { transform: rotate(-7deg) scale(1); }
  86%  { transform: rotate(-7deg) scale(1); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes splash-word-in {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

.splash.doors-open .splash-logo,
.splash.doors-open .splash-frame {
  animation: splash-fade-out 180ms linear both;
}

@keyframes splash-fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.splash-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(60vw, 420px);
  height: min(38vw, 260px);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.splash-frame.clickable {
  pointer-events: auto;
  cursor: pointer;
}

.splash-bracket {
  position: absolute;
  width: 26px;
  height: 26px;
  opacity: 0;
}

/* Gold, not white — these read as the vault's actual bolts, so they
   carry the brand gold rather than a neutral frame line. Each one's
   transform-origin sits at its own outer vertex (the point of the L),
   so the click animation below extends its arms outward, away from
   center — the same outward direction as the star's own corner arcs. */
.splash-bracket-tl { top: 0; left: 0; border-top: 1px solid rgba(198, 161, 83, 0.55); border-left: 1px solid rgba(198, 161, 83, 0.55); transform-origin: top left; }
.splash-bracket-tr { top: 0; right: 0; border-top: 1px solid rgba(198, 161, 83, 0.55); border-right: 1px solid rgba(198, 161, 83, 0.55); transform-origin: top right; }
.splash-bracket-br { bottom: 0; right: 0; border-bottom: 1px solid rgba(198, 161, 83, 0.55); border-right: 1px solid rgba(198, 161, 83, 0.55); transform-origin: bottom right; }
.splash-bracket-bl { bottom: 0; left: 0; border-bottom: 1px solid rgba(198, 161, 83, 0.55); border-left: 1px solid rgba(198, 161, 83, 0.55); transform-origin: bottom left; }

/* Entrance only — flies in from off-screen once, holds. */
.splash.animate .splash-bracket {
  animation: splash-bracket-in 320ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;
}

@keyframes splash-bracket-in {
  0% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1.5); }
  70% { opacity: 1; transform: translate(0, 0) scale(0.9); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* The click: same animation structure (keyframe, duration, easing) as
   the star's own corner arcs below, so both sets click outward at
   exactly the same moment. Triggered by splash.js adding .clicked to
   .splash-frame. */
.splash-frame.clicked .splash-bracket {
  animation: splash-bolt-click 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Rounded corner-arc mark, hugging the star itself — same treatment as
   the primary logo's os-frame (header, turn-strip banner). Lives inside
   the icon's own SVG, so it inherits the icon's dial-unlock entrance for
   free; no separate fly-in animation needed. */
.splash-icon-frame {
  transform-box: fill-box;
  transform-origin: center;
}

/* The shutter click: the corner arcs snap in tighter — the viewfinder
   locking focus — right before the vault doors swing open. Triggered by
   splash.js adding .clicked directly to this element, either
   automatically once the viewfinder has held for a moment or instantly
   on a real click. */
.splash-icon-frame.clicked {
  animation: splash-bolt-click 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes splash-bolt-click {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}

.splash.reduced .splash-icon,
.splash.reduced .splash-word {
  animation: splash-fade-simple 200ms linear both;
}
.splash.reduced .splash-bracket { display: none; }

@keyframes splash-fade-simple {
  0% { opacity: 0; transform: none; clip-path: none; }
  100% { opacity: 1; transform: none; clip-path: none; }
}

/* ---------- Career: deal lifecycle animation ---------- */
/* Horizontal four-sided rotating display (Underwriting / Closing /
   Construction / Asset Management & Servicing). Ported from a standalone
   export — colors/fonts already matched the site's own --header-navy,
   --trim, and --font-display/--font-label, so no re-theming was needed,
   just class-name scoping (dl- prefix) to avoid clashing with the rest of
   the stylesheet. */

.dl-lifecycle {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  --dl-depth: 175px;
  --dl-pitch: 8deg;
}

.dl-lifecycle .container-wide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dl-eyebrow {
  color: var(--trim);
  text-transform: uppercase;
  letter-spacing: 0.36em;
  font-size: 0.96rem; /* 0.8rem base, +20% */
  margin: 0 0 0.9rem;
  font-family: var(--font-label);
  font-weight: 500;
}

.dl-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.dl-subheading {
  max-width: 620px;
  margin: 1rem auto 0;
  color: var(--fg-dim);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.dl-divider {
  margin: 1.5rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.dl-divider span { width: 76px; height: 1px; background: var(--trim); opacity: 0.5; }
.dl-divider b { width: 8px; height: 8px; border: 1px solid var(--trim); transform: rotate(45deg); }

.dl-viewport {
  position: relative;
  width: min(860px, 96vw);
  height: 400px;
  perspective: 1100px;
  display: grid;
  place-items: center;
  overflow: visible;
  margin-top: 1rem;
}

.dl-floor {
  position: absolute;
  left: 50%;
  top: 59%;
  width: min(650px, 86vw);
  height: 155px;
  transform: translate(-50%, -50%) rotateX(78deg);
  border: 1px solid rgba(184, 152, 90, 0.16);
  border-radius: 50%;
  box-shadow: inset 0 0 46px rgba(184, 152, 90, 0.03);
  pointer-events: none;
}
.dl-floor::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(184, 152, 90, 0.06);
  border-radius: 50%;
}

.dl-rig {
  position: relative;
  width: 300px;
  height: 190px;
  transform-style: preserve-3d;
  transform: rotateX(var(--dl-pitch));
}
.dl-rotor {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.dl-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  opacity: 0.98;
}
.dl-face:nth-child(1) { transform: rotateY(0deg) translateZ(var(--dl-depth)); }
.dl-face:nth-child(2) { transform: rotateY(90deg) translateZ(var(--dl-depth)); }
.dl-face:nth-child(3) { transform: rotateY(180deg) translateZ(var(--dl-depth)); }
.dl-face:nth-child(4) { transform: rotateY(270deg) translateZ(var(--dl-depth)); }

.dl-face img {
  display: block;
  max-width: 190px;
  max-height: 126px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(184, 152, 90, 0.08));
}
.dl-face span {
  margin-top: 12px;
  font: 500 0.82rem var(--font-label);
  letter-spacing: 0.19em;
  line-height: 1.3;
  text-align: center;
  color: var(--header-navy);
}

.dl-readout {
  margin-top: -8px;
  width: min(650px, 92vw);
  min-height: 110px;
  text-align: center;
  transition: opacity 0.22s ease, transform 0.3s ease;
}
.dl-readout.dl-changing { opacity: 0; transform: translateY(7px); }
.dl-readout h2 {
  margin: 0;
  font: 600 1.2rem var(--font-label); /* 1rem base, +20% */
  letter-spacing: 0.26em;
  color: var(--trim);
}
.dl-readout p {
  margin: 1.1rem auto 0;
  max-width: 520px;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.65;
  font-weight: 300;
  font-family: var(--font-display);
  color: var(--fg);
}

.dl-note {
  margin: 0.75rem 0 0;
  font: 400 0.76rem var(--font-label);
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  text-align: center;
}

@media (max-width: 620px) {
  .dl-lifecycle { --dl-depth: 125px; }
  .dl-viewport { height: 340px; }
  .dl-rig { width: 230px; height: 160px; }
  .dl-face img { max-width: 145px; max-height: 100px; }
  .dl-face span { font-size: 0.68rem; letter-spacing: 0.15em; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-rotor { transition: none !important; }
}

/* Career film: borderless architectural plate, integrated into the page. */
.career-film-stage {
  position: relative;
  width: min(50vw, 720px);
  aspect-ratio: 16 / 9;
  margin: clamp(1.25rem, 3vw, 2.25rem) 0 0;
  overflow: hidden;
  background: var(--oneshot-cream);
  isolation: isolate;
}

.career-film-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 clamp(16px, 2.5vw, 36px) rgba(255, 253, 248, 0.22);
  z-index: 1;
}

.career-film {
  display: block;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  margin: -2px;
  border: 0;
  outline: 0;
  object-fit: cover;
  background: var(--oneshot-cream);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}

.career-film-replay,
.career-film-audio {
  position: absolute;
  bottom: clamp(0.75rem, 2.2vw, 1.6rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 38px;
  padding: 0.58rem 0.75rem;
  border: 1px solid rgba(29, 47, 78, 0.2);
  border-radius: 999px;
  color: var(--header-navy);
  background: rgba(253, 251, 246, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 600 0.66rem/1 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity var(--motion-state) var(--oneshot-ease), transform var(--motion-state) var(--oneshot-ease), border-color var(--motion-control) var(--oneshot-ease), visibility 0s linear var(--motion-state);
}

.career-film-replay { right: clamp(0.75rem, 2.2vw, 1.6rem); }

.career-film-audio {
  left: clamp(0.75rem, 2.2vw, 1.6rem);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.career-film-replay svg,
.career-film-audio svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.career-film-replay.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.career-film-replay:hover,
.career-film-replay:focus-visible,
.career-film-audio:hover,
.career-film-audio:focus-visible {
  border-color: rgba(184, 152, 90, 0.65);
}

.career-film-replay:hover,
.career-film-audio:hover { transform: translateY(-1px); }
.career-film-replay:focus-visible,
.career-film-audio:focus-visible { outline: 2px solid var(--trim); outline-offset: 3px; }

@media (max-width: 620px) {
  .career-film-stage { width: calc(100vw - 32px); }
  .career-film-replay,
  .career-film-audio { min-width: 40px; min-height: 40px; justify-content: center; padding: 0; }
  .career-film-replay span,
  .career-film-audio span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (min-width: 621px) and (max-width: 900px) {
  .career-film-stage { width: min(72vw, 720px); }
}

@media (prefers-reduced-motion: reduce) {
  .career-film-replay,
  .career-film-audio { transition: none; }
}
/* Sharp, directional link hover using Gold Body */
.nav-link {
  position: relative;
  text-decoration: none;
  font-family: 'Source Sans 3', sans-serif;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2.3px; 
  bottom: -2px;
  left: 0;
  background-color: #C6A153; 
  transition: width 0.34s ease-out; 
}
.nav-link:hover::after {
  width: 100%;
}

/* Institutional, non-bouncy button hover */
.button {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(19, 33, 63, 0.15); 
}

/* ---------- AI page: editorial context ---------- */

.ai-context-section {
  padding: clamp(4.25rem, 8vw, 7.5rem) 0;
  border-top: var(--border-thread);
  background: var(--oneshot-cream);
}

.ai-context-inner {
  display: grid;
  grid-template-columns: 1px minmax(0, 760px);
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.ai-context-rule {
  width: 1px;
  min-height: 100%;
  background: var(--oneshot-president-gold);
}

.ai-context-copy {
  display: grid;
  gap: 1.1rem;
}

.ai-context-copy p {
  max-width: 64ch;
  margin: 0;
  color: var(--fg-dim);
  font: 400 clamp(1.02rem, 1.55vw, 1.18rem)/1.75 var(--font-display);
  letter-spacing: -.005em;
}

@media (max-width: 650px) {
  .ai-context-section { padding: 3.5rem 0; }
  .ai-context-inner { justify-content: start; padding: 0 1.5rem; gap: 1.25rem; }
}

/* ---------- AI Curve: embedded assessment ---------- */

.ai-curve-section {
  background:
    linear-gradient(135deg, rgba(29,47,78,.035), transparent 46%),
    var(--oneshot-cream);
}

.ai-curve-section .section-head {
  align-items: flex-end;
}

.ai-curve-section .section-head h2 {
  margin: .35rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.01em;
}

.ai-curve-section .hero-eyebrow {
  margin: 0;
}

.ai-curve-frame {
  max-width: 880px;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  padding: clamp(1.5rem, 5vw, 4rem);
  border: var(--border-thread);
  background: var(--oneshot-warm-white);
}

.ai-curve-frame.viewfinder::after {
  color: rgba(29, 47, 78, 0.14);
  opacity: 1;
}

.curve-brand-mark { display: flex; justify-content: flex-end; height: 0; overflow: visible; pointer-events: none; }
.curve-brand-mark span { position: relative; z-index: 1; display: block; width: 34px; height: 34px; margin: -1.18rem .1rem 0 0; overflow: hidden; }
.curve-brand-mark img { position: absolute; left: 50%; top: 50%; width: 100px; max-width: none; height: auto; transform: translate(-50%, -50%); opacity: .28; }

.curve-panel { outline: none; animation: curve-panel-in 420ms var(--oneshot-ease) both; }
@keyframes curve-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.curve-intro { max-width: 660px; }
.curve-intro h2 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; margin: .25rem 0 1.25rem; }
.curve-lede { color: var(--fg-dim); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 56ch; margin: 0 0 1.25rem; }
.curve-intro .btn { margin-top: 1rem; }
.curve-intro-facts { display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; padding: 0; margin: 1.35rem 0 .4rem; list-style: none; color: var(--fg-dim); font-family: var(--font-label); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.curve-intro-facts li::before { content: "—"; color: var(--trim-dim); margin-right: .45rem; }

.curve-progress { height: 2px; background: rgba(28,22,15,.09); margin-bottom: .65rem; overflow: hidden; }
.curve-progress-fill { height: 100%; background: var(--oneshot-president-gold); transition: var(--motion-signature); }
.curve-progress-label { margin: 0 0 2rem; font-family: var(--font-label); font-size: .74rem; text-transform: uppercase; letter-spacing: .055em; }
.curve-question { display: block; width: 100%; padding: 0; border: 0; margin: 0 0 1.75rem; color: var(--fg); font-family: var(--font-display); font-size: clamp(1.35rem, 2.8vw, 2rem); font-weight: 500; line-height: 1.28; letter-spacing: -.01em; }
.curve-options { display: flex; flex-direction: column; gap: .65rem; padding: 0; border: 0; margin: 0; }
.curve-option { display: flex; align-items: flex-start; gap: .85rem; padding: .95rem 1.05rem; border: var(--border-thread); background: rgba(255,253,248,.45); cursor: pointer; transition: var(--motion-signature); }
.curve-option:hover { border-color: var(--oneshot-gold-shadow); background: var(--oneshot-cream); }
.curve-option:has(input:checked) { border-color: var(--oneshot-gold-body); background: rgba(198,161,83,.085); }
.curve-option:has(input:focus-visible) { outline: 2px solid var(--oneshot-gold-body); outline-offset: 2px; }
.curve-option input { flex: 0 0 auto; margin-top: .28rem; accent-color: var(--oneshot-navy); }
.curve-option span { font-size: .96rem; line-height: 1.5; }
.curve-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 2rem; }
.curve-back:disabled, .curve-next:disabled { opacity: .35; cursor: not-allowed; }

.curve-form h2 { max-width: 18ch; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.curve-form .form-row { margin-bottom: 1rem; }
.curve-form select,
.curve-form textarea { width: 100%; padding: .8rem .9rem; border: var(--border-thread); border-radius: 0; background: var(--oneshot-cream); color: var(--fg); font-family: var(--font-body); font-size: .95rem; transition: var(--motion-signature); }
.curve-form select:focus,
.curve-form textarea:focus { outline: none; border-color: var(--oneshot-gold-shadow); }
.curve-data-note { max-width: 68ch; margin: 1.4rem 0 0; padding-top: .9rem; border-top: 1px solid rgba(28,22,15,.08); color: color-mix(in srgb, var(--fg-dim) 78%, transparent); font-size: .76rem; line-height: 1.55; }
.curve-data-note strong { color: var(--fg-dim); font-family: var(--font-label); font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.curve-submitting { padding: 3rem 0; text-align: center; }
.curve-scoring-mark { position: relative; width: 56px; height: 56px; margin: 0 auto 1.15rem; animation: curve-mark-turn 1.8s linear infinite; }
.curve-scoring-mark span { position: absolute; left: 26px; top: 3px; width: 4px; height: 21px; background: var(--oneshot-gold-body); transform-origin: 2px 25px; }
.curve-scoring-mark span:nth-child(2) { transform: rotate(90deg); }
.curve-scoring-mark span:nth-child(3) { transform: rotate(180deg); }
.curve-scoring-mark span:nth-child(4) { transform: rotate(270deg); }
.curve-scoring-label { margin-bottom: .3rem; color: var(--oneshot-navy); font-family: var(--font-label); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@keyframes curve-mark-turn { to { transform: rotate(360deg); } }

.curve-result-lede { max-width: 56ch; color: var(--fg-dim); }
.curve-reveal-stage { opacity: 0; transform: translateY(9px); animation: curve-stage-in 380ms var(--oneshot-ease) var(--curve-stage-delay, 0ms) forwards; }
@keyframes curve-stage-in { to { opacity: 1; transform: translateY(0); } }
.curve-score-row { display: flex; align-items: baseline; gap: 1.5rem; margin: 1.5rem 0 2rem; }
.curve-return-card { margin: -1rem 0 2rem; padding: 1rem 1.1rem; border: var(--border-thread); background: rgba(198, 161, 83, .055); }
.curve-return-card .hero-eyebrow { margin-bottom: .35rem; }
.curve-return-title { margin: 0 0 .2rem; color: var(--oneshot-navy); font-family: var(--font-display); font-size: 1.08rem; }
.curve-return-card .muted { margin: 0; font-size: .82rem; }
.curve-score-num { color: var(--oneshot-navy); font-family: var(--font-label); font-size: clamp(3rem, 8vw, 5rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; }
.curve-level { margin: 0 0 .25rem; font-family: var(--font-display); font-size: 1.4rem; }
.curve-svg { display: block; width: 100%; height: auto; margin: 1.5rem 0 1rem; }
.curve-line { fill: none; stroke: rgba(28,22,15,.17); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: curve-line-draw 1050ms var(--oneshot-ease) 120ms forwards; }
@keyframes curve-line-draw { to { stroke-dashoffset: 0; } }
.curve-frontier-marker { fill: var(--oneshot-navy); }
.curve-user-marker { fill: var(--oneshot-gold-shadow); }
.curve-user-marker.is-animating { transition: cx 850ms var(--oneshot-ease) 480ms, cy 850ms var(--oneshot-ease) 480ms; }
.curve-svg-label { fill: var(--fg-dim); font-family: var(--font-label); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.curve-svg-label-user { fill: var(--fg); font-weight: 700; }
.curve-dimensions { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 2.5rem; }
.curve-dim-row { display: grid; grid-template-columns: 8.5rem 1fr 2.5rem; align-items: center; gap: .75rem; }
.curve-dim-label { color: var(--fg-dim); font-family: var(--font-label); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.curve-dim-track { height: 5px; background: rgba(28,22,15,.08); overflow: hidden; }
.curve-dim-fill { height: 100%; background: var(--oneshot-president-gold); transition: width 900ms var(--oneshot-ease); }
.curve-dim-val { color: var(--fg-dim); font-family: var(--font-mono); font-size: .82rem; text-align: right; }
.curve-interp { padding-top: 1.75rem; border-top: var(--border-thread); margin-bottom: 2rem; }
.curve-interp h3 { margin: 1.4rem 0 .45rem; color: var(--oneshot-gold-shadow); font-family: var(--font-label); font-size: .78rem; text-transform: uppercase; letter-spacing: .055em; }
.curve-interp h3:first-child { margin-top: 0; }
.curve-interp p { max-width: 60ch; margin: 0; color: var(--fg-dim); }
.curve-interp .curve-challenge-title { margin-bottom: .85rem; color: var(--fg); font-family: var(--font-display); font-size: 1.15rem; line-height: 1.45; }
.curve-next-steps { max-width: 60ch; padding-left: 1.3rem; color: var(--fg-dim); }
.curve-next-steps li { margin-bottom: .65rem; padding-left: .2rem; }
.curve-retest { margin: -1rem 0 1.75rem; padding: .9rem 0; border-top: 1px solid rgba(28,22,15,.08); border-bottom: 1px solid rgba(28,22,15,.08); color: var(--fg-dim); font-size: .84rem; }
.curve-retest strong { color: var(--oneshot-navy); font-family: var(--font-label); font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.curve-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.curve-linkedin-share { border-color: rgba(30, 64, 104, .42); color: var(--oneshot-navy); }
.curve-linkedin-share:hover,
.curve-linkedin-share:active { border-color: var(--oneshot-navy); }
.curve-friction-clinic { margin: 1rem 0 2.25rem; padding: clamp(1.25rem, 4vw, 2.25rem); border: var(--border-thread); background: var(--oneshot-cream); animation: curve-panel-in 420ms var(--oneshot-ease) both; }
.curve-friction-clinic[hidden] { display: none; }
.curve-friction-clinic h3 { max-width: 18ch; margin: .25rem 0 .65rem; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.12; }
.curve-friction-clinic textarea { width: 100%; min-height: 9rem; margin-top: 1rem; padding: 1rem; resize: vertical; border: var(--border-thread); border-radius: 0; background: var(--oneshot-warm-white); color: var(--fg); font-family: var(--font-body); font-size: .96rem; line-height: 1.55; transition: var(--motion-signature); }
.curve-friction-clinic textarea:focus { outline: none; border-color: var(--oneshot-gold-shadow); }
.curve-friction-clinic textarea::placeholder { color: color-mix(in srgb, var(--fg-dim) 68%, transparent); }
.curve-friction-warning { max-width: 72ch; margin: .55rem 0 1rem; color: var(--fg-dim); font-size: .75rem; line-height: 1.5; }
.curve-friction-status { min-height: 1.5em; margin: .8rem 0 0; color: var(--oneshot-gold-shadow); font-family: var(--font-label); font-size: .76rem; letter-spacing: .035em; text-transform: uppercase; }
.curve-friction-status.is-error { color: #8a3434; }
.curve-friction-output { margin-top: 1.5rem; padding-top: 1.5rem; border-top: var(--border-thread); animation: curve-panel-in 420ms var(--oneshot-ease) both; }
.curve-friction-output:empty { display: none; }
.curve-friction-output h4 { margin: 1.35rem 0 .4rem; color: var(--oneshot-gold-shadow); font-family: var(--font-label); font-size: .78rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.curve-friction-output h4:first-child { margin-top: 0; }
.curve-friction-output p, .curve-friction-output li { color: var(--fg-dim); }
.curve-friction-output ol { max-width: 62ch; padding-left: 1.3rem; }
.curve-friction-output li { margin-bottom: .55rem; padding-left: .2rem; }
.curve-friction-sources { padding-left: 1.1rem; font-size: .82rem; }
.curve-friction-sources a { text-decoration: underline; text-underline-offset: 2px; }
.curve-participation { margin: 1.25rem 0 2.25rem; padding-top: 1.75rem; border-top: var(--border-thread); }
.curve-participation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.curve-participation-head h3 { margin: .25rem 0 .5rem; color: var(--oneshot-navy); font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.15rem); }
.curve-participation-update { padding-top: .15rem; color: var(--oneshot-gold-shadow); font-family: var(--font-label); font-size: .7rem; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.curve-participation-lede { max-width: 62ch; margin: 0 0 1rem; font-size: .84rem; }
.curve-participation-stage { position: relative; width: 100%; height: clamp(270px, 45vw, 350px); overflow: hidden; border: var(--border-thread); background-color: var(--oneshot-warm-white); background-image: radial-gradient(rgba(29,47,78,.026) .55px, transparent .7px), linear-gradient(102deg, transparent 0%, rgba(167,126,54,.025) 48%, transparent 74%); background-size: 4px 4px, 100% 100%; cursor: grab; touch-action: none; }
.curve-participation-stage:active { cursor: grabbing; }
.curve-participation-stage svg { display: block; width: 100%; height: 100%; }
.curve-participation-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.25rem; padding: .8rem 0 0; color: var(--oneshot-navy); font-family: var(--font-label); font-size: .72rem; letter-spacing: .055em; text-transform: uppercase; }
.curve-participation-controls { display: flex; gap: .35rem; margin-left: auto; }
.curve-globe-zoom { width: 2rem; height: 2rem; border: var(--border-thread); background: transparent; color: var(--oneshot-navy); font-family: var(--font-label); font-size: 1rem; cursor: pointer; }
.curve-globe-zoom:hover { border-color: var(--oneshot-gold-shadow); }
.curve-disclosure { padding-top: 1.25rem; border-top: var(--border-thread); color: var(--fg-dim); font-size: .86rem; }
.curve-disclosure summary { color: var(--fg); cursor: pointer; font-family: var(--font-label); font-size: .75rem; text-transform: uppercase; letter-spacing: .045em; }
.curve-disclosure p { max-width: 62ch; }

@media (max-width: 720px) {
  .ai-curve-section .section-head { align-items: flex-start; }
  .ai-curve-frame { padding: 1.5rem 1.15rem; }
  .curve-nav .btn { padding-left: .8rem; padding-right: .8rem; }
  .curve-dim-row { grid-template-columns: 6.6rem 1fr 2rem; gap: .5rem; }
  .curve-dim-label { font-size: .68rem; }
  .curve-brand-mark span { width: 30px; height: 30px; margin-top: -1rem; }
  .curve-brand-mark img { width: 88px; opacity: .24; }
  .curve-participation-head { display: block; }
  .curve-participation-update { display: block; padding: 0 0 .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .curve-panel { animation: none !important; }
  .curve-reveal-stage { opacity: 1 !important; transform: none !important; animation: none !important; }
  .curve-progress-fill, .curve-dim-fill, .curve-user-marker.is-animating { transition: none !important; }
  .curve-line { animation: none !important; stroke-dashoffset: 0; }
  .curve-scoring-mark { animation: none !important; }
}

/* Reuse the site’s existing brand mark in the integrated Curve panel. */
.curve-brand-mark img { width: 100%; opacity: .26; }

/* Approved REEFI / Curve typography. Scoped to the embedded AI-page section. */
.ai-page .ai-curve-section {
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --fg: #1d2f4e;
  --fg-dim: #52627a;
  color: var(--fg);
  font-family: var(--font-body);
}

.ai-page .ai-curve-section .section-head {
  display: block;
}

.ai-page .ai-curve-section .section-head h2 {
  color: var(--oneshot-navy);
  font: 400 38px/1.08 var(--font-display);
  letter-spacing: -.025em;
}

.ai-page .ai-curve-section .section-head > .muted {
  display: block;
  margin-top: 12px;
  color: var(--fg-dim);
  font: 400 17px/1.5 var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}

.ai-page .ai-curve-frame h2,
.ai-page .ai-curve-frame .curve-question,
.ai-page .ai-curve-frame .curve-friction-clinic h3,
.ai-page .ai-curve-frame .curve-participation-head h3 {
  color: var(--oneshot-navy);
  font: 400 29px/1.16 var(--font-display);
  letter-spacing: -.02em;
}

.ai-page .curve-intro h2 { margin-bottom: 15px; }

.ai-page .curve-intro .curve-lede,
.ai-page .curve-intro > .muted {
  color: var(--fg-dim);
  font: 400 17px/1.55 var(--font-body);
  letter-spacing: normal;
}

@media (max-width: 520px) {
  .ai-page .ai-curve-section .section-head h2 { font-size: 32px; }
  .ai-page .ai-curve-frame h2,
  .ai-page .ai-curve-frame .curve-question,
  .ai-page .ai-curve-frame .curve-friction-clinic h3,
  .ai-page .ai-curve-frame .curve-participation-head h3 { font-size: 27px; }
  .ai-page .curve-intro .curve-lede,
  .ai-page .curve-intro > .muted { font-size: 16px; }
}

/* ---------- Capability Horizon: approved AI Curve entry experience ---------- */

.ai-page .capability-horizon {
  position: relative;
  min-height: calc(100svh - 96px);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--oneshot-cream);
}

.capability-horizon-art {
  position: absolute;
  z-index: 0;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: clamp(720px, calc(100svh - 96px), 900px);
  pointer-events: none;
}

.capability-mineral-body {
  opacity: .92;
  transform-origin: center;
  transition: opacity 700ms var(--oneshot-ease), transform 950ms var(--oneshot-ease);
}

.capability-horizon-shadow {
  fill: none;
  stroke: rgba(29, 47, 78, .16);
  stroke-width: 28;
  filter: blur(18px);
  transform: translateY(16px);
}

.capability-curve-base,
.capability-curve-live {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.capability-curve-base {
  stroke: rgba(159, 121, 48, .2);
  stroke-width: 1.1;
}

.capability-curve-live {
  stroke: var(--oneshot-gold-body);
  stroke-width: 1.75;
  stroke-dasharray: 1;
  stroke-dashoffset: .76;
}

#capability-curve-marker {
  pointer-events: none;
  will-change: transform;
}

.capability-horizon-inner {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 96px);
  padding-top: clamp(74px, 10vh, 120px);
  padding-bottom: 80px;
}

.ai-page .capability-horizon .ai-curve-frame {
  width: min(720px, 56vw);
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.capability-horizon .curve-brand-mark { display: none; }
.capability-horizon .curve-intro { max-width: 650px; }

.ai-page .capability-horizon .curve-intro h2 {
  max-width: 10ch;
  margin: 0;
  color: var(--fg);
  font: 450 clamp(54px, 5.5vw, 84px)/1.06 var(--font-display);
  letter-spacing: -.045em;
}

.ai-page .capability-horizon .curve-intro .curve-lede {
  max-width: 520px;
  margin: 34px 0 0;
  color: #39342e;
  font: 400 clamp(18px, 1.5vw, 22px)/1.58 var(--font-body);
}

.capability-horizon .curve-intro-facts {
  display: flex;
  gap: 30px;
  margin: 37px 0 0;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
}

.capability-horizon .curve-intro-facts li::before { content: none; }
.capability-horizon .curve-intro-facts li + li {
  padding-left: 30px;
  border-left: 1px solid rgba(29, 47, 78, .35);
}

.capability-horizon .curve-intro .btn {
  margin-top: 38px;
}

.capability-horizon .curve-intro .btn.btn-accent {
  color: #fff;
}

.capability-horizon .curve-intro .btn.btn-accent:hover,
.capability-horizon .curve-intro .btn.btn-accent:active {
  color: var(--header-navy);
}

.capability-horizon.is-question .capability-mineral-body,
.capability-horizon.is-segmentation .capability-mineral-body,
.capability-horizon.is-qualitative .capability-mineral-body,
.capability-horizon.is-submitting .capability-mineral-body {
  opacity: .14;
  transform: translate(4%, 3%) scale(1.035);
}

.capability-horizon.is-question .capability-horizon-shadow,
.capability-horizon.is-segmentation .capability-horizon-shadow,
.capability-horizon.is-qualitative .capability-horizon-shadow,
.capability-horizon.is-submitting .capability-horizon-shadow {
  opacity: .14;
}

.capability-horizon.is-question .capability-curve-base,
.capability-horizon.is-segmentation .capability-curve-base,
.capability-horizon.is-qualitative .capability-curve-base,
.capability-horizon.is-submitting .capability-curve-base {
  opacity: .25;
}

.capability-horizon.is-question .capability-curve-live,
.capability-horizon.is-segmentation .capability-curve-live,
.capability-horizon.is-qualitative .capability-curve-live,
.capability-horizon.is-submitting .capability-curve-live {
  opacity: .52;
}

@media (max-width: 900px) {
  .ai-page .capability-horizon { min-height: calc(100svh - 76px); }
  .capability-horizon-art { left: -18%; width: 140%; height: clamp(720px, calc(100svh - 76px), 900px); opacity: .72; }
  .capability-horizon::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,253,248,.96) 0%, rgba(255,253,248,.76) 63%, rgba(255,253,248,.18) 100%);
  }
  .capability-horizon-inner { min-height: calc(100svh - 76px); padding-top: 60px; padding-bottom: 110px; }
  .ai-page .capability-horizon .ai-curve-frame { width: min(660px, 100%); }
  .ai-page .capability-horizon .curve-intro h2 { font-size: clamp(48px, 12vw, 70px); }
}

@media (max-width: 560px) {
  .capability-horizon-inner { padding-top: 46px; }
  .ai-page .capability-horizon .curve-intro h2 { font-size: clamp(43px, 13vw, 58px); }
  .ai-page .capability-horizon .curve-intro .curve-lede { margin-top: 25px; font-size: 17px; }
  .capability-horizon .curve-intro-facts { flex-direction: column; gap: 10px; margin-top: 28px; }
  .capability-horizon .curve-intro-facts li + li { padding-left: 0; border-left: 0; }
  .capability-horizon .curve-intro .btn { width: 100%; margin-top: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-mineral-body,
  .capability-curve-live { transition: none !important; }
}

/* Career — embedded Applied Intelligence Systems portfolio. */
.career-intelligence-section {
  position:relative;
  width:100%;
  overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.career-intelligence-section > .visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.career-intelligence-frame {
  display:block;
  width:100%;
  height:900px;
  border:0;
  background:var(--bg);
}