/* ==========================================================================
   ZENLOCK PRODUCTIONS LLC — GLOBAL STYLESHEET
   styles/styles.css  ·  Complete replacement, production ready

   Palette source of truth: assets/images/zenlock-productions-logo.png
   Authoring model: mobile-first from 320px, progressive enhancement,
   content fully visible with JavaScript disabled.

   CONTENTS
     01. Reset & box sizing
     02. Design tokens (:root)
     03. Breakpoint token notes
     04. Page shell & background
     05. Grain texture (CSS only)
     06. Typography
     07. Layout primitives
     08. Separators & page heads
     09. Skip link
     10. Header & desktop navigation
     11. Mobile navigation panel
     12. Buttons & interactive baseline
     13. Links & focus system
     14. Hero
     15. Marquee strip
     16. Cards & project grids
     17. Numbered process / principles
     18. Roster & service lists
     19. Timeline & biography
     20. Mission composition
     21. Quotes
     22. Media, figures & logo showcase
     23. Error page (404)
     24. Embeds & iframe containment
     25. Audio player
     26. Contact layout & details
     27. Contact form
     28. Form status messages
     29. Social / streaming bar
     30. Footer
     31. Reveal animation classes
     32. Utilities
     33. Reduced motion
     34. Contrast preferences
     35. Print baseline
   ========================================================================== */


/* ==========================================================================
   01. RESET & BOX SIZING
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps in-page anchors clear of the sticky header */
  scroll-padding-top: var(--header-clearance);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ol, ul,
fieldset, legend {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

fieldset {
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

img,
picture,
svg,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  border: 0;
}

[hidden] {
  display: none !important;
}


/* ==========================================================================
   02. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Palette sampled from the logo artwork --------------------------- */
  --color-near-black:  #050706;  /* deepest night sky */
  --color-surface:     #0b100e;  /* elevated dark surface */
  --color-surface-2:   #121815;  /* second elevation */
  --color-charcoal:    #1a201d;  /* charcoal wells */
  --color-teal-deep:   #0e2a26;  /* deep teal atmosphere */
  --color-forest:      #16402c;  /* forest green dune field */
  --color-green-lit:   #2f7a4f;  /* lit halo behind the monolith */
  --color-sage:        #8fa587;  /* muted sage dune highlight */
  --color-sand:        #cbc3a8;  /* restrained sand accent */
  --color-moon-gold:   #f2d06b;  /* moon gold */
  --color-moon-core:   #f8e6a6;  /* brightest moon centre */

  /* ---- Semantic colour ------------------------------------------------- */
  --color-bg:          var(--color-near-black);
  --color-bg-elevated: var(--color-surface);
  --color-bg-sunken:   #030504;

  --color-text:        #ecefe9;  /* warm off-white · ~16.4:1 on --color-bg */
  --color-text-muted:  #9daa9c;  /* ~8.6:1 on --color-bg */
  --color-text-subtle: #7d8b7e;  /* ~5.4:1 · supporting text only */
  --color-text-invert: #050706;

  --color-accent:        var(--color-moon-gold);
  --color-accent-strong: var(--color-moon-core);
  --color-accent-quiet:  var(--color-sand);

  --color-border:        rgba(143, 165, 135, 0.18);
  --color-border-strong: rgba(242, 208, 107, 0.38);
  --color-border-solid:  var(--color-charcoal);

  --color-focus:      var(--color-moon-gold);
  --color-focus-halo: rgba(242, 208, 107, 0.28);

  /* Status hues stay inside the sage / sand / gold family. Every status is
     additionally signalled by an icon glyph and a border, never colour alone. */
  --color-success:  var(--color-sage);
  --color-pending:  var(--color-sand);
  --color-error:    #e8a88f;   /* warm clay */
  --color-caution:  #e3c98d;   /* configuration notice, muted gold */

  /* ---- Atmosphere ------------------------------------------------------- */
  --grad-halo:    radial-gradient(58% 58% at 50% 42%, rgba(47, 122, 79, 0.32), transparent 72%);
  --grad-page:    linear-gradient(180deg, var(--color-near-black) 0%, #071009 55%, var(--color-near-black) 100%);
  --grad-surface: linear-gradient(160deg, rgba(18, 24, 21, 0.92), rgba(5, 7, 6, 0.92));
  --grad-veil:    linear-gradient(180deg, rgba(5, 7, 6, 0.28), rgba(5, 7, 6, 0.94) 78%);
  --grad-aside:   linear-gradient(160deg, rgba(14, 42, 38, 0.55), rgba(5, 7, 6, 0.90));
  --grad-form:    linear-gradient(168deg, rgba(14, 42, 38, 0.42), rgba(5, 7, 6, 0.94) 62%);

  /* Numeral fill for the 404 glyph: forest core lifting to a gold rim */
  --grad-numeral: linear-gradient(
                    172deg,
                    rgba(242, 208, 107, 0.85) 0%,
                    rgba(143, 165, 135, 0.55) 34%,
                    rgba(22, 64, 44, 0.95) 78%
                  );

  /* ---- Elevation & glow -------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 12px 30px -12px rgba(0, 0, 0, 0.75);
  --shadow-lg:  0 32px 70px -28px rgba(0, 0, 0, 0.85);
  --shadow-inset: inset 0 1px 0 rgba(203, 195, 168, 0.05);
  --glow-gold:  0 0 0 1px rgba(242, 208, 107, 0.25), 0 0 38px rgba(242, 208, 107, 0.12);
  --glow-green: 0 0 60px rgba(47, 122, 79, 0.22);
  --glow-focus: 0 0 0 3px var(--color-focus-halo);

  /* ---- Type stacks · no paid or external font required ------------------- */
  --font-display:
    "Zen Display", "Bebas Neue", "Oswald", "Haettenschweiler",
    "Arial Narrow", Impact, ui-sans-serif, sans-serif;

  --font-body:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---- Fluid type scale · 320px → 1600px --------------------------------- */
  --fs-100: clamp(0.78rem, 0.755rem + 0.13vw, 0.86rem);
  --fs-200: clamp(0.92rem, 0.888rem + 0.16vw, 1.02rem);
  --fs-300: clamp(1.05rem, 0.986rem + 0.32vw, 1.25rem);
  --fs-400: clamp(1.25rem, 1.077rem + 0.86vw, 1.80rem);
  --fs-500: clamp(1.70rem, 1.317rem + 1.92vw, 2.90rem);
  --fs-600: clamp(2.20rem, 1.497rem + 3.52vw, 4.40rem);
  --fs-700: clamp(2.60rem, 1.323rem + 6.38vw, 6.60rem);

  /* Reserved for the 404 numeral only — larger than any editorial heading */
  --fs-800: clamp(5.5rem, 2.045rem + 17.27vw, 16rem);

  --lh-tight:  0.94;
  --lh-snug:   1.18;
  --lh-normal: 1.65;
  --lh-loose:  1.8;

  --ls-display:   -0.02em;
  --ls-body:       0.01em;
  --ls-caps:       0.16em;
  --ls-caps-wide:  0.30em;

  /* ---- Spacing scale ------------------------------------------------------ */
  --sp-1: 0.5rem;
  --sp-2: 0.875rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  --sp-7: clamp(4.5rem, 3.1rem + 6vw, 8rem);
  --sp-8: clamp(6rem, 3.8rem + 9vw, 11rem);

  /* ---- Structure ---------------------------------------------------------- */
  --wrap-max: 78rem;
  --wrap-gutter: 1rem;          /* 320px safe default */
  --measure: 62ch;
  --measure-tight: 46ch;
  --form-max: 46rem;

  --header-height: 4rem;        /* mobile bar height */
  --header-clearance: 5.5rem;   /* anchor offset under the sticky header */

  --tap-min: 2.75rem;           /* 44px minimum interactive target */

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --border-hair: 1px solid var(--color-border);
  --border-lit:  1px solid var(--color-border-strong);

  /* ---- Motion -------------------------------------------------------------- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 180ms;
  --dur-2: 360ms;
  --dur-3: 640ms;

  /* ---- Layers -------------------------------------------------------------- */
  --z-below:   -1;
  --z-grain:    5;
  --z-header:  80;
  --z-drawer:  90;
  --z-skip:   100;

  /* ---- Grain --------------------------------------------------------------- */
  --grain-opacity: 0.05;
  --grain-size: 3px;

  color-scheme: dark;
  accent-color: var(--color-moon-gold);
}


/* ==========================================================================
   03. BREAKPOINT TOKENS
   Named intents rather than device widths:
     36em  (576px)  — comfortable phone, two-up chips
     40em  (640px)  — paired form fields
     48em  (768px)  — small tablet, two-column editorial
     62em  (992px)  — desktop nav appears, asymmetric grids
     75em  (1200px) — wide desktop refinements
   ========================================================================== */

@media (min-width: 36em) {
  :root { --wrap-gutter: 1.5rem; }
}

@media (min-width: 62em) {
  :root {
    --wrap-gutter: 2.5rem;
    --header-height: 4.5rem;
    --header-clearance: 6.5rem;
  }
}

@media (min-width: 75em) {
  :root { --wrap-gutter: 3rem; }
}


/* ==========================================================================
   04. PAGE SHELL & BACKGROUND
   ========================================================================== */

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background-color: var(--color-bg);
  background-image: var(--grad-page);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Guards against any wide child forcing a horizontal scrollbar */
  overflow-x: hidden;
}

/* Ambient green halo behind the top of every page */
body::before {
  content: "";
  position: fixed;
  inset: -20vh 0 auto 0;
  height: 90vh;
  z-index: var(--z-below);
  background: var(--grad-halo);
  opacity: 0.55;
  pointer-events: none;
}

main {
  display: block;
}


/* ==========================================================================
   05. GRAIN TEXTURE — pure CSS, no image request, no data URI
   ========================================================================== */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(255, 255, 255, 0.9) 0deg 90deg,
      rgba(0, 0, 0, 0.9) 90deg 180deg
    ),
    repeating-linear-gradient(27deg,  rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-54deg, rgba(0, 0, 0, 0.55) 0 1px, transparent 1px 5px);
  background-size:
    var(--grain-size) var(--grain-size),
    7px 7px,
    11px 11px;
}

@media (min-width: 75em) {
  body::after { --grain-opacity: 0.06; }
}


/* ==========================================================================
   06. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4,
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--color-text);
  /* Prevents long titles from overflowing narrow viewports */
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-600); }
h2 { font-size: var(--fs-500); }
h3 { font-size: var(--fs-400); }
h4 { font-size: var(--fs-300); letter-spacing: 0; }

h5, h6 {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-sage);
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

strong, b { font-weight: 650; color: var(--color-text); }
em, i     { font-style: italic; }

small {
  font-size: var(--fs-100);
  color: var(--color-text-muted);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--color-sand);
}

code {
  padding: 0.1em 0.4em;
  border: var(--border-hair);
  border-radius: var(--radius-xs);
  background: var(--color-bg-sunken);
  overflow-wrap: break-word;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.25em;
  cursor: help;
}

blockquote { max-width: var(--measure-tight); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--color-sage);
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 2rem;
  block-size: 1px;
  background: var(--color-border-strong);
}

@media (min-width: 48em) {
  .eyebrow::before { inline-size: 2.5rem; }
}

.lead {
  max-width: 52ch;
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--color-text-muted);
}

::selection {
  background: var(--color-moon-gold);
  color: var(--color-text-invert);
}


/* ==========================================================================
   07. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  width: min(100% - (var(--wrap-gutter) * 2), var(--wrap-max));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--sp-6);
}

.section--tall { padding-block: var(--sp-7); }
.section--edge { border-top: var(--border-hair); }

.stack    > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-4); }

@media (min-width: 48em) {
  .stack-lg > * + * { margin-top: var(--sp-5); }
}

/* All grids are single column until the breakpoint earns more */
.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 36em) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
  .grid--asym     { grid-template-columns: 1.35fr minmax(0, 0.85fr); align-items: start; }
  .grid--asym-rev { grid-template-columns: 0.85fr minmax(0, 1.35fr); align-items: center; }
  .offset-down    { margin-top: var(--sp-6); }
}


/* ==========================================================================
   08. SEPARATORS & PAGE HEADS
   ========================================================================== */

.rule {
  width: min(100% - (var(--wrap-gutter) * 2), var(--wrap-max));
  margin-inline: auto;
  block-size: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border) 12%,
    var(--color-border-strong) 50%,
    var(--color-border) 88%,
    transparent
  );
  opacity: 0.85;
}

.page-head {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-6) var(--sp-4);
  border-bottom: var(--border-hair);
}

.page-head h1,
.page-head .lead { margin-top: var(--sp-2); }


/* ==========================================================================
   09. SKIP LINK
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: var(--z-skip);
  transform: translateY(-250%);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-moon-gold);
  color: var(--color-text-invert);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); }


/* ==========================================================================
   10. HEADER & DESKTOP NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(5, 7, 6, 0.78);
  border-bottom: var(--border-hair);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(5, 7, 6, 0.62);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
  }
}

/* Firms up once the page has begun scrolling; set by main.js */
.site-header[data-scrolled="true"] {
  background: rgba(5, 7, 6, 0.88);
  border-bottom-color: var(--color-border-strong);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--header-height);
}

@media (min-width: 62em) {
  .header-inner { gap: var(--sp-4); }
}

/* Brand lock-up */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  min-block-size: var(--tap-min);
  text-decoration: none;
}

.brand img {
  inline-size: 36px;
  block-size: 36px;
  border: var(--border-hair);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

@media (min-width: 62em) {
  .brand img { inline-size: 40px; block-size: 40px; }
}

.brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}

.brand-name span {
  display: block;
  margin-top: 0.25em;
  font-size: 0.6em;
  letter-spacing: var(--ls-caps-wide);
  color: var(--color-text-muted);
}

/* Hide the wordmark on the narrowest screens so five nav items fit later */
@media (max-width: 22.5em) {
  .brand-name { display: none; }
}

/* Desktop navigation sits to the LEFT, pushing the toggle area right */
.nav-desktop { display: none; }

@media (min-width: 62em) {
  .nav-desktop {
    display: block;
    margin-inline-start: var(--sp-4);
    margin-inline-end: auto;
  }

  .nav-desktop ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
  }

  .nav-toggle { display: none; }
}

@media (min-width: 75em) {
  .nav-desktop { margin-inline-start: var(--sp-5); }
  .nav-desktop ul { gap: var(--sp-4); }
}

.nav-desktop a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-block: 0.4rem;
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text-muted);
  transition: color var(--dur-1) var(--ease);
}

.nav-desktop a::after {
  content: "";
  position: absolute;
  inset: auto 0 0.6rem 0;
  block-size: 1px;
  background: var(--color-moon-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease);
}

.nav-desktop a:hover,
.nav-desktop a:focus-visible { color: var(--color-text); }

.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after { transform: scaleX(1); }

.nav-desktop a[aria-current="page"] { color: var(--color-moon-gold); }
.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }


/* ==========================================================================
   11. MOBILE NAVIGATION PANEL
   ========================================================================== */

.nav-toggle {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-block-size: var(--tap-min);
  min-inline-size: var(--tap-min);
  padding: 0.55rem 1rem;
  border: var(--border-hair);
  border-radius: var(--radius-pill);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--color-border-strong);
  color: var(--color-moon-gold);
  background-color: rgba(14, 42, 38, 0.4);
}

.nav-toggle-bars {
  display: grid;
  gap: 4px;
  inline-size: 18px;
}

.nav-toggle-bars i {
  display: block;
  block-size: 1px;
  background: currentColor;
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  align-content: start;
  gap: 0;
  padding: calc(var(--header-height) + var(--sp-4)) var(--wrap-gutter) var(--sp-5);
  background-color: var(--color-surface);
  background-image: var(--grad-halo);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform var(--dur-3) var(--ease-out),
    visibility 0s linear var(--dur-3);
}

.nav-drawer[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform var(--dur-3) var(--ease-out),
    visibility 0s linear 0s;
}

.nav-drawer a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-block: var(--sp-2);
  padding-inline-start: 0;
  border-bottom: var(--border-hair);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  transition:
    color var(--dur-1) var(--ease),
    padding-inline-start var(--dur-2) var(--ease);
}

.nav-drawer a:hover,
.nav-drawer a:focus-visible {
  color: var(--color-moon-gold);
  padding-inline-start: 0.5rem;
}

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

.nav-drawer-close {
  position: absolute;
  top: 0.75rem;
  right: var(--wrap-gutter);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding: 0.5rem 1rem;
  border: var(--border-hair);
  border-radius: var(--radius-pill);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.nav-drawer-close:hover,
.nav-drawer-close:focus-visible {
  border-color: var(--color-border-strong);
  color: var(--color-moon-gold);
}

@media (min-width: 62em) {
  .nav-drawer { display: none; }
}

body[data-scroll-lock="true"] { overflow: hidden; }


/* ==========================================================================
   12. BUTTONS & INTERACTIVE BASELINE
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-block-size: var(--tap-min);
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-text);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--color-moon-gold);
  border-color: var(--color-moon-gold);
  color: var(--color-text-invert);
  box-shadow: var(--glow-gold);
}

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

.btn--solid {
  background-color: var(--color-moon-gold);
  border-color: var(--color-moon-gold);
  color: var(--color-text-invert);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background-color: var(--color-moon-core);
  border-color: var(--color-moon-core);
}

.btn--ghost {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.btn--ghost:hover,
.btn--ghost:focus-visible { color: var(--color-text-invert); }

/* Disabled state stays legible: dimmed surface, not dimmed text */
.btn[disabled],
.btn[aria-disabled="true"] {
  background-color: var(--color-charcoal);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  background-color: var(--color-charcoal);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  box-shadow: none;
}

/* Buttons go full width on the narrowest screens for reliable tapping */
@media (max-width: 22.5em) {
  .btn { width: 100%; }
}


/* ==========================================================================
   13. LINKS & FOCUS SYSTEM
   ========================================================================== */

a { color: inherit; }

a:not([class]) {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.28em;
  overflow-wrap: break-word;
  transition:
    color var(--dur-1) var(--ease),
    text-decoration-color var(--dur-1) var(--ease);
}

a:not([class]):hover,
a:not([class]):focus-visible {
  color: var(--color-moon-gold);
  text-decoration-color: var(--color-moon-gold);
}

/* Remove the default ring only where a visible replacement is guaranteed */
:focus:not(:focus-visible) { outline: none; }

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


/* ==========================================================================
   14. HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: clamp(30rem, 78svh, 46rem);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
}

.hero-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Keeps the monolith and moon in frame as the crop narrows */
  object-position: center 35%;
  filter: saturate(0.9) contrast(1.05);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-image: var(--grad-veil), var(--grad-halo);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  gap: var(--sp-3);
  max-inline-size: 46rem;
  padding-block: var(--sp-7) var(--sp-6);
}

.hero h1 { font-size: var(--fs-700); }

.hero h1 em {
  font-style: normal;
  color: var(--color-moon-gold);
  text-shadow: 0 0 42px rgba(242, 208, 107, 0.22);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.hero-scroll { display: none; }

@media (min-width: 62em) {
  .hero-scroll {
    position: absolute;
    right: var(--wrap-gutter);
    bottom: var(--sp-4);
    display: block;
    writing-mode: vertical-rl;
    font-size: var(--fs-100);
    letter-spacing: var(--ls-caps-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
}


/* ==========================================================================
   15. MARQUEE STRIP
   ========================================================================== */

.strip {
  display: flex;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  border-block: var(--border-hair);
  font-family: var(--font-display);
  font-size: var(--fs-400);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-forest);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

/* Slow and low contrast so it never competes with the branding */
.strip span { animation: drift 40s linear infinite; }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==========================================================================
   16. CARDS & PROJECT GRIDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-inline-size: 0;
  padding: var(--sp-4);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background-image: var(--grad-surface);
  box-shadow: var(--shadow-md);
  transition:
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.card:hover,
.card:focus-within {
  border-color: var(--color-border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--glow-green);
}

.card p { color: var(--color-text-muted); }

.card-index {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: 1;
  color: var(--color-forest);
}

.release {
  display: grid;
  gap: var(--sp-2);
  min-inline-size: 0;
  padding-top: var(--sp-2);
  border-top: var(--border-hair);
}

.release-art {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.release-art img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  transition:
    transform var(--dur-3) var(--ease),
    filter var(--dur-3) var(--ease);
}

.release:hover .release-art img,
.release:focus-within .release-art img {
  transform: scale(1.04);
  filter: saturate(1.05);
}

.release-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.release p { color: var(--color-text-muted); }


/* ==========================================================================
   17. NUMBERED PROCESS / PRINCIPLES
   ========================================================================== */

.process {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: step;
}

@media (min-width: 48em) {
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 75em) {
  .process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.process li {
  counter-increment: step;
  min-inline-size: 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--color-border-strong);
}

.process li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: 1;
  color: var(--color-forest);
}

.process h3 {
  margin-bottom: 0.35rem;
  font-size: var(--fs-300);
}

.process p {
  font-size: var(--fs-100);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}


/* ==========================================================================
   18. ROSTER & SERVICE LISTS
   ========================================================================== */

.roster li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-3);
  border-top: var(--border-hair);
}

.roster li:last-child { border-bottom: var(--border-hair); }

.roster strong {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  transition: color var(--dur-2) var(--ease);
}

.roster li:hover strong { color: var(--color-moon-gold); }

.roster span {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ==========================================================================
   19. TIMELINE & BIOGRAPHY
   ========================================================================== */

.timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.timeline li {
  display: grid;
  gap: 0.35rem;
  padding-block: var(--sp-3);
  border-top: var(--border-hair);
}

.timeline li:last-child { border-bottom: var(--border-hair); }

@media (min-width: 48em) {
  .timeline li {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.35rem var(--sp-4);
    align-items: baseline;
  }
}

.timeline time,
.timeline .text-accent {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  color: var(--color-moon-gold);
}

.timeline p { color: var(--color-text-muted); }
.timeline em { font-style: italic; color: var(--color-text); }


/* ==========================================================================
   20. MISSION COMPOSITION
   Copy inside .mission-body may be replaced freely; the layout is
   driven entirely by the grid, not by the length of the text.
   ========================================================================== */

.mission {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62em) {
  .mission {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .mission-aside {
    position: sticky;
    top: var(--header-clearance);
  }
}

.mission-marker {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: 1;
  color: var(--color-forest);
}

.mission-body > p { max-inline-size: 60ch; }

.mission-lede {
  max-inline-size: 34ch;
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: none;
  color: var(--color-sand);
}


/* ==========================================================================
   21. QUOTES
   ========================================================================== */

.quote {
  margin-top: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  text-transform: none;
}

.quote p { max-inline-size: none; }

.quote footer {
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ==========================================================================
   22. MEDIA, FIGURES & LOGO SHOWCASE
   ========================================================================== */

figure { margin: 0; }

figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.connect-figure img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--border-hair);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  filter: saturate(0.9) contrast(1.04);
}

@media (max-width: 35.99em) {
  /* Taller crop keeps a subject centred on narrow screens */
  .connect-figure img { aspect-ratio: 4 / 3; }
}

.logo-showcase {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.logo-figure {
  position: relative;
  isolation: isolate;
  inline-size: min(100%, 34rem);
}

.logo-figure::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: var(--z-below);
  background: var(--grad-halo);
  opacity: 0.7;
  pointer-events: none;
}

/* object-fit: contain guarantees the Z, moon and dunes are never cropped */
.logo-figure img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--glow-green);
}


/* ==========================================================================
   23. ERROR PAGE (404)
   Centred, cinematic, and deliberately quiet. The numeral is decorative:
   404.html carries a visually-hidden h1 for assistive technology, so the
   glyph and the supporting line are both aria-hidden in the markup.
   Reuses .btn, .eyebrow, .lead, .logo-figure and .social-note unchanged.
   ========================================================================== */

.error-page {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-3);
  min-block-size: 62svh;
  text-align: center;
}

.error-page > p,
.error-page > .lead {
  margin-inline: auto;
}

/* Oversized numeral. --fs-800 exists only for this glyph.
   A gradient fill would fail forced-colors, so a solid colour is set first
   and the clip is applied progressively where it is supported. */
.error-code {
  margin-block: var(--sp-1) 0;
  font-family: var(--font-display);
  font-size: var(--fs-800);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--color-forest);
  user-select: none;
  /* Never allows the glyph to force a horizontal scrollbar */
  max-inline-size: 100%;
  overflow-wrap: normal;
  text-shadow: 0 0 90px rgba(47, 122, 79, 0.35);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .error-code {
    background-image: var(--grad-numeral);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
  }
}

/* Supporting line. Sits between the numeral and the explanatory copy. */
.error-heading {
  margin-block: 0;
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-sand);
}

@media (min-width: 48em) {
  .error-heading { font-size: var(--fs-500); }
}

/* Action row inherits .hero-actions; only the centring differs here */
.error-page .hero-actions {
  justify-content: center;
  margin-top: var(--sp-2);
}

/* Artwork stays present but subordinate: small on phones, never dominant */
.error-figure {
  inline-size: min(100%, 11rem);
  margin-top: var(--sp-4);
  opacity: 0.9;
}

@media (min-width: 48em) {
  .error-figure { inline-size: min(100%, 15rem); }
}

@media (min-width: 62em) {
  .error-figure { inline-size: min(100%, 17rem); }
}

.error-figure img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), var(--glow-green);
}

.error-page .social-note {
  margin-top: var(--sp-2);
}


/* ==========================================================================
   24. EMBEDS & IFRAME CONTAINMENT
   ========================================================================== */

.embed {
  position: relative;
  inline-size: 100%;
  max-inline-size: 100%;
  overflow: hidden;
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: var(--color-bg-sunken);
}

.embed iframe,
.embed video {
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}

.embed--16x9 { aspect-ratio: 16 / 9; }
.embed--1x1  { aspect-ratio: 1; }

/* Streaming widgets that report a fixed pixel height */
.embed--player {
  aspect-ratio: auto;
  min-block-size: 9.5rem;
}

.embed--player iframe { block-size: 9.5rem; }


/* ==========================================================================
   25. AUDIO PLAYER
   ========================================================================== */

.player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  background-color: rgba(14, 42, 38, 0.35);
}

@media (min-width: 36em) {
  .player { flex-wrap: nowrap; border-radius: var(--radius-pill); }
}

.player-btn {
  flex: 0 0 auto;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.player-btn:hover,
.player-btn:focus-visible {
  background-color: var(--color-moon-gold);
  color: var(--color-text-invert);
}

.player-title {
  flex: 1 1 8rem;
  min-inline-size: 0;
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-progress {
  position: relative;
  flex: 1 1 100%;
  block-size: 2px;
  border-radius: 2px;
  background: var(--color-border);
}

@media (min-width: 36em) {
  .player-progress { flex: 1 1 40%; }
}

.player-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: 0;
  border-radius: 2px;
  background: var(--color-moon-gold);
}

.player-time {
  flex: 0 0 auto;
  font-size: var(--fs-100);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}


/* ==========================================================================
   26. CONTACT LAYOUT & DETAILS
   ========================================================================== */

.contact-split {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62em) {
  .contact-split {
    grid-template-columns: 1.15fr minmax(0, 0.85fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

.contact-details dt {
  margin-top: var(--sp-3);
  font-size: var(--fs-100);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sage);
}

.contact-details dd {
  margin: 0;
  font-size: var(--fs-300);
  overflow-wrap: break-word;
}

/* Email links keep a comfortable tap target inside flowing text */
.contact-details dd a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
}

.contact-aside {
  padding: var(--sp-4);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background-image: var(--grad-aside);
}

.contact-aside h2 { font-size: var(--fs-400); }

.contact-aside ul {
  display: grid;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
}

.contact-aside li {
  position: relative;
  padding-left: var(--sp-3);
  font-size: var(--fs-100);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}

.contact-aside li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  inline-size: 0.5rem;
  block-size: 1px;
  background: var(--color-moon-gold);
}


/* ==========================================================================
   27. CONTACT FORM
   Editorial rather than SaaS: a single hairline-bordered panel, generous
   internal rhythm, uppercase micro-labels, and a gold rule marking the
   submit row. No white surfaces anywhere, including under autofill.
   ========================================================================== */

.contact-form {
  display: grid;
  gap: var(--sp-3);
  max-inline-size: var(--form-max);
  padding: var(--sp-4) var(--sp-3);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background-image: var(--grad-form);
  box-shadow: var(--shadow-md), var(--shadow-inset);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.contact-form:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg), var(--shadow-inset);
}

@media (min-width: 40em) {
  .contact-form {
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
  }
}

/* Paired short fields; the message field is never placed in this row */
.field-row {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40em) {
  .field-row {
    gap: var(--sp-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 0.4rem;
  min-inline-size: 0;
}

.field label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-sage);
}

/* Required marker: gold asterisk, but the label text and the required
   attribute carry the real meaning for assistive technology */
.field label span[aria-hidden="true"] {
  color: var(--color-moon-gold);
  font-size: 1.1em;
  line-height: 1;
}

/* ---- Controls ----------------------------------------------------------- */

.field input,
.field textarea,
.field select {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-sunken);
  background-image: linear-gradient(180deg, rgba(18, 24, 21, 0.5), rgba(3, 5, 4, 0.5));
  color: var(--color-text);
  font-size: var(--fs-200);
  line-height: var(--lh-normal);
  box-shadow: var(--shadow-inset);
  transition:
    border-color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

.field select {
  appearance: none;
  padding-inline-end: 2.5rem;
  cursor: pointer;
  /* Chevron drawn with gradients so no SVG or image request is required */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-sage) 50%),
    linear-gradient(135deg, var(--color-sage) 50%, transparent 50%),
    linear-gradient(180deg, rgba(18, 24, 21, 0.5), rgba(3, 5, 4, 0.5));
  background-position:
    calc(100% - 1.15rem) calc(50% + 1px),
    calc(100% - 0.8rem) calc(50% + 1px),
    0 0;
  background-size: 0.36rem 0.36rem, 0.36rem 0.36rem, 100% 100%;
  background-repeat: no-repeat;
}

.field select option {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.field textarea {
  min-block-size: 11rem;
  resize: vertical;
  field-sizing: content;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

/* ---- Interaction states -------------------------------------------------- */

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: rgba(143, 165, 135, 0.34);
  background-color: rgba(11, 16, 14, 0.9);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-moon-gold);
  background-color: var(--color-surface);
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--color-moon-gold);
  box-shadow: var(--glow-focus), var(--shadow-inset);
}

/* Invalid state pairs a clay border with a glyph on the error text below,
   so the condition is never signalled by colour alone */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: rgba(232, 168, 143, 0.05);
}

.field input[aria-invalid="true"]:focus-visible,
.field textarea[aria-invalid="true"]:focus-visible,
.field select[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(232, 168, 143, 0.22), var(--shadow-inset);
}

.field input:disabled,
.field textarea:disabled,
.field select:disabled {
  border-color: var(--color-border);
  background-color: var(--color-charcoal);
  background-image: none;
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.field input:read-only,
.field textarea:read-only {
  color: var(--color-text-muted);
}

/* ---- Autofill -----------------------------------------------------------
   Chromium paints a bright canvas over autofilled controls. A long inset
   shadow repaints the surface in the project palette; -webkit-text-fill-color
   restores the warm off-white. The transition delay defeats the reflow that
   otherwise flashes the browser default for one frame. */

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field textarea:-webkit-autofill:hover,
.field textarea:-webkit-autofill:focus,
.field select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 100rem var(--color-bg-sunken) inset;
  box-shadow: 0 0 0 100rem var(--color-bg-sunken) inset;
  border-color: var(--color-border);
  caret-color: var(--color-moon-gold);
  transition: background-color 100000s ease 0s;
}

.field input:-webkit-autofill:focus-visible,
.field textarea:-webkit-autofill:focus-visible {
  border-color: var(--color-moon-gold);
  -webkit-box-shadow: 0 0 0 100rem var(--color-surface) inset, var(--glow-focus);
  box-shadow: 0 0 0 100rem var(--color-surface) inset, var(--glow-focus);
}

/* Firefox */
.field input:autofill,
.field textarea:autofill {
  background-color: var(--color-bg-sunken);
  color: var(--color-text);
}

/* ---- Helper text & field errors ------------------------------------------ */

.field .social-note,
.field-hint {
  margin: 0;
  font-size: var(--fs-100);
  line-height: 1.5;
  color: var(--color-text-subtle);
}

/* Reserves its own line so revealing an error never shifts the layout */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  min-block-size: 1.25em;
  font-size: var(--fs-100);
  line-height: 1.4;
  color: var(--color-error);
}

.field-error:empty { min-block-size: 0.35rem; }

/* Glyph appears only when the message does, giving a non-colour signal */
.field-error:not(:empty)::before {
  content: "\26A0";
  flex: 0 0 auto;
  font-size: 0.95em;
  line-height: 1.5;
}

/* ---- Honeypot -----------------------------------------------------------
   Clipped rather than display:none so naive bots still parse and fill it.
   The input carries tabindex="-1" and the wrapper aria-hidden="true", so it
   is absent from both the tab order and the accessibility tree. */

.honeypot {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---- Submit row ---------------------------------------------------------- */

.contact-form > .stack {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border-strong);
}

.contact-form [data-submit-button] {
  min-inline-size: 12rem;
}

@media (max-width: 39.99em) {
  .contact-form [data-submit-button] { inline-size: 100%; }
}


/* ==========================================================================
   28. FORM STATUS MESSAGES
   Five distinct states. Each carries a leading glyph and a coloured rule,
   so meaning survives greyscale, colour blindness and forced-colours mode.
   The aria-live region keeps its spacing whether or not it holds text.
   ========================================================================== */

.form-status {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-inline-size: var(--measure);
  margin: 0;
  font-size: var(--fs-200);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Empty region still reserves rhythm so nothing jumps on first announcement */
.form-status:empty {
  min-block-size: var(--sp-1);
  padding: 0;
  border: 0;
}

.form-status:not(:empty) {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background-color: rgba(11, 16, 14, 0.7);
}

.form-status:not(:empty)::before {
  flex: 0 0 auto;
  font-size: 1.05em;
  line-height: 1.45;
}

.form-status:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.form-status a {
  color: var(--color-moon-gold);
  text-decoration-color: var(--color-moon-gold);
}

/* -- Pending: no data-state attribute, message present --------------------- */
.form-status:not(:empty):not([data-state]) {
  border-left-color: var(--color-pending);
  color: var(--color-sand);
}

.form-status:not(:empty):not([data-state])::before {
  content: "\2022";
}

/* -- Success ---------------------------------------------------------------- */
.form-status[data-state="ok"] {
  border-left-color: var(--color-success);
  color: var(--color-sage);
}

.form-status[data-state="ok"]::before {
  content: "\2713";
}

/* -- Validation error ------------------------------------------------------- */
.form-status[data-state="error"] {
  border-left-color: var(--color-error);
  color: var(--color-error);
}

.form-status[data-state="error"]::before {
  content: "\26A0";
}

/* -- Configuration notice (endpoint not yet wired to a provider) ------------ */
.form-status[data-state="config"] {
  border-left-color: var(--color-caution);
  color: var(--color-caution);
}

.form-status[data-state="config"]::before {
  content: "\24D8";
}

/* -- Server / transport failure --------------------------------------------- */
.form-status[data-state="server"] {
  border-left-color: var(--color-error);
  color: var(--color-error);
  background-color: rgba(232, 168, 143, 0.06);
}

.form-status[data-state="server"]::before {
  content: "\2715";
}

/* No-JavaScript notice reuses the status shell inside <noscript> */
noscript .form-status {
  display: flex;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-caution);
  border-radius: var(--radius-sm);
  background-color: rgba(11, 16, 14, 0.7);
  color: var(--color-caution);
}

noscript .form-status::before {
  content: "\24D8";
  flex: 0 0 auto;
  font-size: 1.05em;
  line-height: 1.45;
}


/* ==========================================================================
   29. SOCIAL / STREAMING BAR
   ========================================================================== */

.social-bar { inline-size: 100%; }

.social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-2);
}

.social-list > li { display: flex; }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding: 0.6rem 1.1rem;
  border: var(--border-hair);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    background-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--color-moon-gold);
  border-color: var(--color-border-strong);
  background-color: rgba(14, 42, 38, 0.45);
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}

.social-link:active { transform: translateY(0); }

.social-icon {
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.social-label {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.social-note {
  font-size: var(--fs-100);
  color: var(--color-text-subtle);
}

/* Below 360px the chips stack full width; above, they wrap in a row */
@media (max-width: 22.5em) {
  .social-list > li { inline-size: 100%; }
}

@media (min-width: 22.5625em) {
  .social-list > li { inline-size: auto; }
  .social-link { inline-size: auto; }
}


/* ==========================================================================
   30. FOOTER
   ========================================================================== */

.site-footer {
  margin-top: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-4);
  border-top: var(--border-hair);
  background-image: linear-gradient(180deg, transparent, rgba(14, 42, 38, 0.35));
}

.footer-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 36em) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
  .footer-grid { grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr); }
}

.foot