:root {
  --ground: #080b10; /* Cool ink grounds the cinematic work. */
  --raised: #111720; /* One step of depth for examples and dialogs. */
  --ink: #f4efe4; /* Warm, readable foreground. */
  --ink-soft: #c2c5cb; /* Supporting text, still high contrast. */
  --ink-dim: #a2a7b0; /* Captions remain readable. */
  --accent: #ffb56b; /* Existing amber, reserved for emphasis. */
  --rule: #333b46; /* Quiet structural separation. */
  --focus: #ffcc98; /* Clearly visible keyboard focus. */
  --scrim: #080b10ed; /* Solid enough for dialog backdrops. */
  --hand-scrim-soft: #080b109c; /* Let the film show behind the edge of the text column. */
  --hand-scrim-medium: #080b10c9; /* Keep phone and tablet copy readable over the film. */
  --hand-clear: #080b1000; /* Fade the text scrim into the unaltered image. */
  --mask-opaque: black; /* Fully visible portion of the mobile film's edge mask. */
  --face-display: 'Fraunces', Georgia, serif; /* Existing editorial voice. */
  --face-body: 'Inter', Arial, sans-serif; /* Familiar, clear body text. */
  --face-mono: 'JetBrains Mono', Consolas, monospace; /* Navigation and project apparatus. */
  --text-small: .875rem; /* Supporting copy stays comfortably readable. */
  --text-label: .6875rem; /* Compact section markers. */
  --text-body: 1.0625rem; /* 17px reading size. */
  --text-lead: 1.25rem; /* Introduction and supporting hierarchy. */
  --text-card: clamp(1.5rem, 2.4vw, 2.25rem); /* Project names scale with images. */
  --text-section: clamp(2.5rem, 4.8vw, 4rem); /* Strong chapter changes. */
  --text-hero: clamp(3.875rem, 7.8vw, 7rem); /* 6.6× desktop body scale. */
  --leading-body: 1.62; /* Comfortable reading. */
  --leading-display: .98; /* Display lines form one statement. */
  --tracking-display: -.035em; /* Optical spacing at large sizes. */
  --tracking-label: .12em; /* Deliberate apparatus spacing. */
  --space-1: .25rem; /* 4px base. */
  --space-2: .5rem; /* Closely related labels. */
  --space-3: .75rem; /* Control gaps. */
  --space-4: 1rem; /* Compact internal space. */
  --space-5: 1.5rem; /* Text to action. */
  --space-6: 2rem; /* Grid gutter. */
  --space-7: 2.5rem; /* Component separation. */
  --space-8: 3.5rem; /* Section subgroups. */
  --space-9: 4.5rem; /* Narrow-screen sections. */
  --space-10: 6rem; /* Main section rhythm. */
  --space-11: 7.5rem; /* Air around quiet sections. */
  --page-gutter: clamp(1.5rem, 4.4vw, 4rem); /* Consistent viewport edge. */
  --page-max: 90rem; /* Enough room for the actual portfolio. */
  --measure: 62ch; /* Prose never spans a whole monitor. */
  --target: 2.75rem; /* Minimum standalone touch target. */
  --radius: .25rem; /* Subtle softness for controls only. */
  --ease: cubic-bezier(.2, .7, .3, 1); /* Quick response, gentle settle. */
  --duration: 180ms; /* Immediate control response. */
}