/* ==========================================================================
   SkyMathis.com — site stylesheet
   Palette and type mirror thearchitectureofhiddenforces.com and
   threemagipress.com: warm near-black, bone, aged gold; Cinzel for display
   and tracked labels, EB Garamond for reading.
   ========================================================================== */

/* --- Seraphine ------------------------------------------------------------
   The face Sky's own Architecture of Hidden Forces stylesheet already names
   (--crs-serif: "Seraphine", "IM Fell DW Pica"). Self-hosted here.

   It is given a job rather than sprayed about: Seraphine is the VOICE —
   the questions, the leads, the named concepts of the system. Cinzel stays
   the identity (wordmark, headings, tracked labels) and EB Garamond stays
   the body. Seraphine's stems are finer and its fit tighter than Garamond's,
   which is exactly why it sings at 30px and tires at 17px over long copy.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Seraphine";
  src: url("../fonts/seraphine-light.woff2") format("woff2"),
       url("../fonts/seraphine-light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Seraphine";
  src: url("../fonts/seraphine-regular.woff2") format("woff2"),
       url("../fonts/seraphine-regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Seraphine";
  src: url("../fonts/seraphine-italic.woff2") format("woff2"),
       url("../fonts/seraphine-italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* --- tokens ------------------------------------------------------------- */
:root {
  /* Palette lifted from thearchitectureofhiddenforces.com so all of Sky's
     properties share one system. Source values are oklch; sRGB shown here. */
  --ink:        #020201;   /* oklch(8%  .005 60) — page */
  --ink-2:      #0b0907;   /* between page and clay      */
  --ink-3:      #120f0c;   /* oklch(17% .008 60) — clay  */
  --ink-4:      #1a1611;

  --bone:       #f3eee6;   /* oklch(95% .012 80) */
  --bone-dim:   #bcb6ae;   /* oklch(78% .014 78) */
  --bone-faint: #8b857f;   /* oklch(62% .012 70) */

  --gold:        #e8aa4e;  /* oklch(78% .13 75)  */
  --gold-bright: #facc83;
  --gold-dim:    #bc8f4d;  /* oklch(68% .10 76)  */

  --lapis:      #4b77cc;   /* oklch(58% .14 262) — secondary accent */
  --lapis-lit:  #86a9e6;   /* lifted, for hairlines on near-black   */
  --lapis-deep: #254582;

  --rule:       rgba(243, 238, 230, 0.14);
  --rule-soft:  rgba(243, 238, 230, 0.08);   /* their --border exactly */

  /* Cinzel for display and labels, EB Garamond for reading — the pairing
     used across The Architecture of Hidden Forces and Three Magi Press.
     Cinzel renders lowercase as small caps, which is the house look. */
  --font-display: "Cinzel", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --font-label:   "Cinzel", "EB Garamond", Georgia, serif;
  --font-voice:   "Seraphine", "EB Garamond", Garamond, Georgia, serif;

  --measure:  68ch;
  --gutter:   clamp(1.25rem, 5vw, 4rem);
  --page-max: 78rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  line-height: 1.7;
  font-feature-settings: "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* film grain — keeps large flat fields from looking digital */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- shared primitives -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 54rem; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

:where(a, button, summary, input, textarea):focus-visible {
  outline: 1px solid var(--gold-bright);
  outline-offset: 3px;
}

/* --- typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.005em;
}

.display {
  font-size: clamp(2.5rem, 7.4vw, 6.25rem);
  line-height: 1.0;
  letter-spacing: 0.015em;
  font-weight: 400;
}

.h-page {
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.16;
}

.h-section {
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
}

.h-card {
  font-size: clamp(1.125rem, 1.3vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
}

/* small tracked label — the connective tissue of the whole design */
.label {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.label--dim { color: var(--bone-faint); }

.numeral {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  color: var(--gold-dim);
}

.lead {
  font-family: var(--font-voice);
  font-weight: 300;
  font-size: clamp(1.1875rem, 0.85vw + 1rem, 1.5625rem);
  line-height: 1.52;
  color: var(--bone);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.35em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--gold-bright); font-weight: 600; }
.prose em { color: var(--bone); }
.prose > p:first-of-type { color: var(--bone); }
.prose a { color: var(--gold-bright); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--gold-dim); }

.dim { color: var(--bone-dim); }

/* pull quote — the central question, set as architecture */
.ask {
  font-family: var(--font-voice);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1.18;
  color: var(--bone);
  max-width: 32ch;
  margin: 0;
  text-wrap: balance;
}
.ask em { font-style: italic; color: var(--gold-bright); }

/* --- rules & ornaments -------------------------------------------------- */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--rule), rgba(200, 164, 74, 0.02));
}

.glyph {
  display: block;
  color: var(--gold);
  opacity: 0.55;
}

/* --- header ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--rule-soft);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .masthead { background: rgba(10, 9, 8, 0.86); }
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  transition: color 0.3s var(--ease);
}
.wordmark:hover { color: var(--gold-bright); }
.wordmark svg { flex: none; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }

.nav a {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 450;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-decoration: none;
  padding: 0.35rem 0;
  position: relative;
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav a:hover { color: var(--bone); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--gold-bright); }
.nav a[aria-current="page"]::after { transform: scaleX(1); opacity: 0.6; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--bone);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}

@media (max-width: 62rem) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1.75rem;
    transform: translateY(-120%);
    transition: transform 0.45s var(--ease);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a {
    width: 100%;
    font-size: 0.8125rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .nav a::after { display: none; }
}

/* --- hero --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  padding-block: clamp(5rem, 14vh, 10rem) clamp(4rem, 10vh, 7rem);
  border-bottom: 1px solid var(--rule-soft);
}

.hero__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 72% 22%, rgba(200, 164, 74, 0.11), transparent 70%),
    radial-gradient(70% 60% at 10% 90%, rgba(120, 90, 180, 0.07), transparent 70%);
}

/* --- hero media ---------------------------------------------------------
   The poster is the baseline (it shows with no JS, on small screens, and
   under reduced motion); the video is layered on top as an enhancement.
   Everything here is graded down hard so the type stays the loudest thing
   on the page.
   ------------------------------------------------------------------------ */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: url("../video/hero-poster.jpg") center / cover no-repeat;
  filter: saturate(0.76) contrast(1.08) brightness(0.5);
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__video.is-playing { opacity: 1; }

/* Two crossed gradients: horizontal keeps the text column dark, vertical
   clears the sticky header and melts the bottom edge into the page. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* pools darkness directly behind the text block */
    radial-gradient(46% 62% at 24% 50%, rgba(2, 2, 1, 0.78), transparent 72%),
    linear-gradient(90deg,
      rgba(2, 2, 1, 0.98) 0%,
      rgba(2, 2, 1, 0.94) 30%,
      rgba(2, 2, 1, 0.70) 56%,
      rgba(2, 2, 1, 0.44) 80%,
      rgba(2, 2, 1, 0.34) 100%),
    linear-gradient(180deg,
      rgba(2, 2, 1, 0.92) 0%,
      rgba(2, 2, 1, 0.22) 34%,
      rgba(2, 2, 1, 0.52) 74%,
      rgba(2, 2, 1, 1) 100%);
}

/* Over live imagery the type needs its own separation. */
.hero--media .display,
.hero--media .lead,
.hero--media .label,
.hero--media .hero__roles li {
  text-shadow: 0 1px 2px rgba(2, 2, 1, 0.85), 0 2px 30px rgba(2, 2, 1, 0.95);
}
.hero--media .orrery { opacity: 0.30; }

/* Glass chips so the calls to action hold against moving imagery. */
.hero--media .btn {
  background: rgba(2, 2, 1, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-color: var(--gold-dim);
}
.hero--media .btn--ghost { border-color: rgba(243, 238, 230, 0.28); }
.hero--media .btn:hover { background: transparent; }

/* --- hero orrery --------------------------------------------------------
   A real 3D scene: each ring is its own element inside a perspective
   container, so the rings gimbal through one another instead of spinning
   flat. Two nested transforms per ring — the outer sweeps the ring's plane
   around the Y axis (precession), the inner turns it within its own plane.
   ------------------------------------------------------------------------ */
.orrery {
  position: absolute;
  /* Sits high and oversized so the cluster runs off the top of the hero —
     the figure reads as larger than the frame that contains it. */
  top: 38%;
  right: -16vw;
  transform: translateY(-50%);
  width: min(92vw, 68rem);
  aspect-ratio: 1;
  color: var(--gold);
  opacity: 0.13;
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

.orrery__stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.ring,
.ring__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.ring svg { width: 100%; height: 100%; overflow: visible; }

/* Not every ring is gold. The heptagram and the vesica pick up bone and
   lapis — the second accent from the Architecture of Hidden Forces palette —
   so the cluster reads as several distinct figures rather than one texture. */
.ring--ii   { color: var(--bone);        opacity: 0.16; }  /* Flower of Life */
.ring--iii  { color: var(--bone);        opacity: 0.80; }  /* heptagram */
.ring--iv   { color: var(--gold-bright); opacity: 0.95; }  /* Seed of Life */
.ring--v    { color: var(--lapis-lit);   opacity: 0.75; }  /* hexagram */
.ring--vi   { color: var(--bone);        opacity: 0.40; }  /* vesica */
.ring--vii  { color: var(--gold-bright); opacity: 1; }     /* pentagram */
.ring--viii { color: var(--gold-bright); opacity: 1; }     /* squared circle */

.ring--i {
  transform: rotateY(0deg) rotateX(74deg);
  animation-name: precess-i;
  animation-duration: 340s;
}
.ring--i .ring__spin { animation-name: spin-i; animation-duration: 250s; }
@keyframes precess-i {
  from { transform: rotateY(0deg) rotateX(74deg); }
  to   { transform: rotateY(360deg) rotateX(74deg); }
}
@keyframes spin-i { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }

.ring--ii {
  transform: rotateY(0deg) rotateX(22deg);
  animation-name: precess-ii;
  animation-duration: 280s;
}
.ring--ii .ring__spin { animation-name: spin-ii; animation-duration: 210s; }
@keyframes precess-ii {
  from { transform: rotateY(0deg) rotateX(22deg); }
  to   { transform: rotateY(-360deg) rotateX(22deg); }
}
@keyframes spin-ii { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }

.ring--iii {
  transform: rotateY(0deg) rotateX(58deg);
  animation-name: precess-iii;
  animation-duration: 240s;
}
.ring--iii .ring__spin { animation-name: spin-iii; animation-duration: 180s; }
@keyframes precess-iii {
  from { transform: rotateY(0deg) rotateX(58deg); }
  to   { transform: rotateY(-360deg) rotateX(58deg); }
}
@keyframes spin-iii { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }

.ring--iv {
  transform: rotateY(0deg) rotateX(40deg);
  animation-name: precess-iv;
  animation-duration: 200s;
}
.ring--iv .ring__spin { animation-name: spin-iv; animation-duration: 150s; }
@keyframes precess-iv {
  from { transform: rotateY(0deg) rotateX(40deg); }
  to   { transform: rotateY(360deg) rotateX(40deg); }
}
@keyframes spin-iv { from { transform: rotateZ(0deg); } to { transform: rotateZ(-360deg); } }

.ring--v {
  transform: rotateY(0deg) rotateX(80deg);
  animation-name: precess-v;
  animation-duration: 165s;
}
.ring--v .ring__spin { animation-name: spin-v; animation-duration: 165s; }
@keyframes precess-v {
  from { transform: rotateY(0deg) rotateX(80deg); }
  to   { transform: rotateY(-360deg) rotateX(80deg); }
}
@keyframes spin-v { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }

.ring--vi {
  transform: rotateY(0deg) rotateX(46deg);
  animation-name: precess-vi;
  animation-duration: 130s;
}
.ring--vi .ring__spin { animation-name: spin-vi; animation-duration: 115s; }
@keyframes precess-vi {
  from { transform: rotateY(0deg) rotateX(46deg); }
  to   { transform: rotateY(360deg) rotateX(46deg); }
}
@keyframes spin-vi { from { transform: rotateZ(0deg); } to { transform: rotateZ(-360deg); } }

.ring--vii {
  transform: rotateY(0deg) rotateX(16deg);
  animation-name: precess-vii;
  animation-duration: 175s;
}
.ring--vii .ring__spin { animation-name: spin-vii; animation-duration: 100s; }
@keyframes precess-vii {
  from { transform: rotateY(0deg) rotateX(16deg); }
  to   { transform: rotateY(-360deg) rotateX(16deg); }
}
@keyframes spin-vii { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }

.ring--viii {
  transform: rotateY(0deg) rotateX(62deg);
  animation-name: precess-viii;
  animation-duration: 210s;
}
.ring--viii .ring__spin { animation-name: spin-viii; animation-duration: 92s; }
@keyframes precess-viii {
  from { transform: rotateY(0deg) rotateX(62deg); }
  to   { transform: rotateY(360deg) rotateX(62deg); }
}
@keyframes spin-viii { from { transform: rotateZ(0deg); } to { transform: rotateZ(-360deg); } }

/* --- hero media ---------------------------------------------------------
   The poster is the baseline (it shows with no JS, on small screens, and
   under reduced motion); the video is layered on top as an enhancement.
   Everything here is graded down hard so the type stays the loudest thing
   on the page.
   ------------------------------------------------------------------------ */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: url("../video/hero-poster.jpg") center / cover no-repeat;
  filter: saturate(0.76) contrast(1.08) brightness(0.5);
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__video.is-playing { opacity: 1; }

/* Two crossed gradients: horizontal keeps the text column dark, vertical
   clears the sticky header and melts the bottom edge into the page. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* pools darkness directly behind the text block */
    radial-gradient(46% 62% at 24% 50%, rgba(2, 2, 1, 0.78), transparent 72%),
    linear-gradient(90deg,
      rgba(2, 2, 1, 0.98) 0%,
      rgba(2, 2, 1, 0.94) 30%,
      rgba(2, 2, 1, 0.70) 56%,
      rgba(2, 2, 1, 0.44) 80%,
      rgba(2, 2, 1, 0.34) 100%),
    linear-gradient(180deg,
      rgba(2, 2, 1, 0.92) 0%,
      rgba(2, 2, 1, 0.22) 34%,
      rgba(2, 2, 1, 0.52) 74%,
      rgba(2, 2, 1, 1) 100%);
}

/* Over live imagery the type needs its own separation. */
.hero--media .display,
.hero--media .lead,
.hero--media .label,
.hero--media .hero__roles li {
  text-shadow: 0 1px 2px rgba(2, 2, 1, 0.85), 0 2px 30px rgba(2, 2, 1, 0.95);
}
.hero--media .orrery { opacity: 0.30; }

/* Glass chips so the calls to action hold against moving imagery. */
.hero--media .btn {
  background: rgba(2, 2, 1, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-color: var(--gold-dim);
}
.hero--media .btn--ghost { border-color: rgba(243, 238, 230, 0.28); }
.hero--media .btn:hover { background: transparent; }

/* --- hero orrery --------------------------------------------------------
   A real 3D scene: each ring is its own element inside a perspective
   container, so the rings gimbal through one another instead of spinning
   flat. Two nested transforms per ring — the outer sweeps the ring's plane
   around the Y axis (precession), the inner turns it within its own plane.
   ------------------------------------------------------------------------ */
.orrery {
  position: absolute;
  /* Sits high and oversized so the cluster runs off the top of the hero —
     the figure reads as larger than the frame that contains it. */
  top: 38%;
  right: -16vw;
  transform: translateY(-50%);
  width: min(92vw, 68rem);
  aspect-ratio: 1;
  color: var(--gold);
  opacity: 0.13;
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

.orrery__stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.ring,
.ring__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.ring svg { width: 100%; height: 100%; overflow: visible; }

/* Not every ring is gold. The heptagram and the vesica pick up bone and
   lapis — the second accent from the Architecture of Hidden Forces palette —
   so the cluster reads as several distinct figures rather than one texture. */
.ring--ii   { color: var(--bone);        opacity: 0.16; }  /* Flower of Life */
.ring--iii  { color: var(--bone);        opacity: 0.80; }  /* heptagram */
.ring--iv   { color: var(--gold-bright); opacity: 0.95; }  /* Seed of Life */
.ring--v    { color: var(--lapis-lit);   opacity: 0.75; }  /* hexagram */
.ring--vi   { color: var(--bone);        opacity: 0.40; }  /* vesica */
.ring--vii  { color: var(--gold-bright); opacity: 1; }     /* pentagram */
.ring--viii { color: var(--gold-bright); opacity: 1; }     /* squared circle */

.ring--i {
  transform: rotateY(0deg) rotateX(72deg);
  animation-name: precess-i;
  animation-duration: 300s;
}
.ring--i .ring__spin {
  animation-name: spin-i;
  animation-duration: 220s;
}
@keyframes precess-i {
  from { transform: rotateY(0deg) rotateX(72deg); }
  to   { transform: rotateY(360deg) rotateX(72deg); }
}
@keyframes spin-i {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

.ring--ii {
  transform: rotateY(0deg) rotateX(58deg);
  animation-name: precess-ii;
  animation-duration: 240s;
}
.ring--ii .ring__spin {
  animation-name: spin-ii;
  animation-duration: 180s;
}
@keyframes precess-ii {
  from { transform: rotateY(0deg) rotateX(58deg); }
  to   { transform: rotateY(-360deg) rotateX(58deg); }
}
@keyframes spin-ii {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

.ring--iii {
  transform: rotateY(0deg) rotateX(26deg);
  animation-name: precess-iii;
  animation-duration: 190s;
}
.ring--iii .ring__spin {
  animation-name: spin-iii;
  animation-duration: 130s;
}
@keyframes precess-iii {
  from { transform: rotateY(0deg) rotateX(26deg); }
  to   { transform: rotateY(360deg) rotateX(26deg); }
}
@keyframes spin-iii {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(-360deg); }
}

.ring--iv {
  transform: rotateY(0deg) rotateX(80deg);
  animation-name: precess-iv;
  animation-duration: 150s;
}
.ring--iv .ring__spin {
  animation-name: spin-iv;
  animation-duration: 160s;
}
@keyframes precess-iv {
  from { transform: rotateY(0deg) rotateX(80deg); }
  to   { transform: rotateY(-360deg) rotateX(80deg); }
}
@keyframes spin-iv {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

.ring--v {
  transform: rotateY(0deg) rotateX(44deg);
  animation-name: precess-v;
  animation-duration: 120s;
}
.ring--v .ring__spin {
  animation-name: spin-v;
  animation-duration: 100s;
}
@keyframes precess-v {
  from { transform: rotateY(0deg) rotateX(44deg); }
  to   { transform: rotateY(360deg) rotateX(44deg); }
}
@keyframes spin-v {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(-360deg); }
}

.ring--vi {
  transform: rotateY(0deg) rotateX(15deg);
  animation-name: precess-vi;
  animation-duration: 200s;
}
.ring--vi .ring__spin {
  animation-name: spin-vi;
  animation-duration: 90s;
}
@keyframes precess-vi {
  from { transform: rotateY(0deg) rotateX(15deg); }
  to   { transform: rotateY(-360deg) rotateX(15deg); }
}
@keyframes spin-vi {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

.hero__inner { position: relative; z-index: 1; }

.hero .display { margin-block: 1.75rem 0; }

.hero__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.hero__roles li {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.hero__roles li:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.7;
}

.hero__lead { margin: 2.5rem 0 0; }

/* --- page hero (interior pages) ----------------------------------------- */
.pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 11vh, 7rem) clamp(2.5rem, 7vh, 4.5rem);
  border-bottom: 1px solid var(--rule-soft);
}
.pagehead__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 90% at 85% 10%, rgba(200, 164, 74, 0.09), transparent 72%);
}
.pagehead__inner { position: relative; z-index: 1; }

/* --- figured pageheads ---------------------------------------------------
   Same two-layer idea as sections (image on ::before, scrim on ::after) but
   a pagehead is short and its heading is large, so the scrim runs a little
   lighter and carries extra weight at the very top, under the sticky header.
   ------------------------------------------------------------------------ */
.pagehead--figured { isolation: isolate; }

.pagehead--figured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--head-bg, none);
  background-size: cover;
  background-position: var(--head-bg-pos, center);
  background-repeat: no-repeat;
  filter: saturate(0.68) contrast(1.03) brightness(var(--head-bright, 1));
}

.pagehead--figured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg,
      rgba(2, 2, 1, 0.95) 0%,
      rgba(2, 2, 1, 0.90) 34%,
      rgba(2, 2, 1, 0.72) 58%,
      rgba(2, 2, 1, 0.42) 80%,
      rgba(2, 2, 1, 0.26) 100%),
    linear-gradient(180deg,
      rgba(2, 2, 1, 0.82) 0%,
      rgba(2, 2, 1, 0.34) 45%,
      rgba(2, 2, 1, 0.58) 86%,
      rgb(2, 2, 1) 100%);
}

.head--architecture {
  --head-bg: url("../img/head-architecture.jpg");
  --head-bg-pos: center 55%;
  --head-bright: 1.15;
}
.head--about {
  --head-bg: url("../img/head-about.jpg");
  --head-bg-pos: center 45%;
  --head-bright: 0.32;
}
.head--conversations {
  --head-bg: url("../img/head-conversations.jpg");
  --head-bg-pos: center 50%;
  --head-bright: 0.73;
}
.head--publishing {
  --head-bg: url("../img/head-publishing.jpg");
  --head-bg-pos: center 52%;
  --head-bright: 1.8;
}
.head--visual {
  --head-bg: url("../img/head-visual.jpg");
  --head-bg-pos: center 58%;
  --head-bright: 0.31;
}
.head--contact {
  --head-bg: url("../img/head-contact.jpg");
  --head-bg-pos: center 50%;
  --head-bright: 1.15;
}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .head--architecture {
    --head-bg: image-set(url("../img/head-architecture.webp") type("image/webp"),
                         url("../img/head-architecture.jpg")  type("image/jpeg"));
  }
  .head--about {
    --head-bg: image-set(url("../img/head-about.webp") type("image/webp"),
                         url("../img/head-about.jpg")  type("image/jpeg"));
  }
  .head--conversations {
    --head-bg: image-set(url("../img/head-conversations.webp") type("image/webp"),
                         url("../img/head-conversations.jpg")  type("image/jpeg"));
  }
  .head--publishing {
    --head-bg: image-set(url("../img/head-publishing.webp") type("image/webp"),
                         url("../img/head-publishing.jpg")  type("image/jpeg"));
  }
  .head--visual {
    --head-bg: image-set(url("../img/head-visual.webp") type("image/webp"),
                         url("../img/head-visual.jpg")  type("image/jpeg"));
  }
  .head--contact {
    --head-bg: image-set(url("../img/head-contact.webp") type("image/webp"),
                         url("../img/head-contact.jpg")  type("image/jpeg"));
  }
}

/* --- portrait -----------------------------------------------------------
   The photograph is cool concrete and pale sky; the site is warm near-black
   and gold. Rather than bake a grade into the file, it is graded in CSS —
   desaturated toward the house monochrome, then warmed back by a gold wash
   and grounded by an ink gradient. The original file stays untouched.
   ------------------------------------------------------------------------ */
.portrait-head {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .portrait-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
}

.portrait {
  position: relative;
  margin: 0;
  isolation: isolate;
  border: 1px solid var(--rule-soft);
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 2, 1, 0.12) 0%, transparent 34%, rgba(2, 2, 1, 0.55) 100%),
    linear-gradient(0deg, rgba(232, 170, 78, 0.10), rgba(232, 170, 78, 0.10));
  mix-blend-mode: multiply;
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.42) contrast(1.06) brightness(0.86);
}

/* a hairline that reads as a frame, not a border */
.portrait::before {
  content: "";
  position: absolute;
  inset: 0.6rem;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(243, 238, 230, 0.14);
}

@media (max-width: 60rem) {
  .portrait { max-width: 28rem; }
}
.pagehead .h-page { margin-block: 1.25rem 0; max-width: 24ch; text-wrap: balance; }
.pagehead--portrait { padding-block: clamp(3rem, 8vh, 5.5rem); }
.pagehead .lead { margin-block: 1.75rem 0; }

/* --- generic section ---------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 9vh, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.section + .section { border-top: 1px solid var(--rule-soft); }
.section--raised { background: var(--ink-2); }

.section__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section__head .h-section { max-width: 30ch; text-wrap: balance; }

/* two-column: sticky label rail + content */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 14rem minmax(0, 1fr); }
  .split__rail { position: sticky; top: 7rem; align-self: start; }
}
.split__rail { display: grid; gap: 0.75rem; align-content: start; }

/* --- the question, as a figure -------------------------------------------
   One cycle: a pulse leaves the hidden source, descends the axis, lights the
   four terms as it passes through the mediating ring, and arrives at the
   manifest plane as spreading ripples. Every element shares one --dgm-cycle
   so the timings stay in step; move the cycle and the whole figure retimes.
   ------------------------------------------------------------------------ */
.diagram {
  --dgm-cycle: 9s;
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
  max-width: 44rem;
}

.diagram__fig {
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--gold);
}

.diagram__cap {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--bone-faint);
  max-width: 42ch;
}

.dgm-label text {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--bone-dim);
}

.dgm-node       { fill: var(--ink); stroke: var(--gold); stroke-width: 1.2; }
.dgm-source     { fill: var(--gold-bright); }
.dgm-source-halo{ fill: none; stroke: var(--gold); stroke-width: 0.8; opacity: 0.45; }
.dgm-pulse__core{ fill: var(--gold-bright); }
.dgm-pulse__halo{ fill: var(--gold); opacity: 0.18; }
.dgm-ripple     { stroke: var(--gold); opacity: 0; transform-box: view-box; transform-origin: 360px 340px; }

.dgm-bezel,
.dgm-pulse,
.dgm-ripple,
.dgm-node,
.dgm-axis,
.dgm-source-halo {
  transform-box: view-box;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.dgm-bezel       { transform-origin: 360px 196px; animation-name: dgm-turn;   animation-duration: 90s; }
.dgm-axis        { animation-name: dgm-flow;   animation-duration: var(--dgm-cycle); }
.dgm-pulse       { animation-name: dgm-descend; animation-duration: var(--dgm-cycle); }
.dgm-source-halo { animation-name: dgm-breathe; animation-duration: var(--dgm-cycle); animation-timing-function: ease-in-out; }
.dgm-node--up    { animation-name: dgm-flare-up; animation-duration: var(--dgm-cycle); animation-timing-function: ease-out; }
.dgm-node--dn    { animation-name: dgm-flare-dn; animation-duration: var(--dgm-cycle); animation-timing-function: ease-out; }
.dgm-ripple      { animation-name: dgm-ripple;  animation-duration: var(--dgm-cycle); animation-timing-function: ease-out; }
.dgm-ripple:nth-child(2) { animation-delay: 0.45s; }
.dgm-ripple:nth-child(3) { animation-delay: 0.9s; }

@keyframes dgm-turn { to { transform: rotate(360deg); } }

/* the pulse crosses the upper nodes at ~17% and the lower at ~53% */
@keyframes dgm-descend {
  0%        { transform: translateY(52px);  opacity: 0; }
  5%        { opacity: 1; }
  70%       { transform: translateY(340px); opacity: 1; }
  76%, 100% { transform: translateY(340px); opacity: 0; }
}

@keyframes dgm-flare-up {
  0%, 12%   { fill: var(--ink);        stroke: var(--gold); }
  19%       { fill: var(--gold-bright); stroke: var(--gold-bright); }
  36%, 100% { fill: var(--ink);        stroke: var(--gold); }
}
@keyframes dgm-flare-dn {
  0%, 46%   { fill: var(--ink);        stroke: var(--gold); }
  53%       { fill: var(--gold-bright); stroke: var(--gold-bright); }
  70%, 100% { fill: var(--ink);        stroke: var(--gold); }
}

@keyframes dgm-ripple {
  0%, 68%  { transform: scale(0.15); opacity: 0; }
  72%      { opacity: 0.6; }
  100%     { transform: scale(2.6);  opacity: 0; }
}

/* current running down the axis */
@keyframes dgm-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -60; }
}

@keyframes dgm-breathe {
  0%, 100% { opacity: 0.25; r: 13; }
  8%       { opacity: 0.7;  r: 17; }
  40%      { opacity: 0.25; r: 13; }
}

/* Reduced motion: hold the figure still and legible — the pulse simply
   rests on the plane it was travelling toward. */
@media (prefers-reduced-motion: reduce) {
  .dgm-bezel, .dgm-axis, .dgm-source-halo,
  .dgm-node, .dgm-ripple { animation: none !important; }
  .dgm-pulse { animation: none !important; transform: translateY(196px); opacity: 1; }
  .dgm-ripple:first-child { opacity: 0.4; }
}

/* --- figured sections ---------------------------------------------------
   Full-bleed photographic grounds behind whole sections. Two layers: the
   image (::before, filtered) and the scrim (::after, unfiltered) — kept apart
   so brightness can be tuned per image without also lightening the scrim.

   Sections are far larger than cards and sit behind body copy, so these run
   much quieter: the image is heavily dimmed, the left column is darkened
   further for the text, and the top and bottom fade to solid --ink so the
   section melts into its neighbours instead of stacking as a visible band.
   ------------------------------------------------------------------------ */
.section--figured {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section--figured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--sec-bg, none);
  background-size: cover;
  background-position: var(--sec-bg-pos, center);
  background-repeat: no-repeat;
  filter: saturate(0.62) contrast(1.02) brightness(var(--sec-bright, 1));
  opacity: var(--sec-opacity, 1);
}

.section--figured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    /* Hold the scrim strong across the whole text column (roughly 0-70% of
       the viewport) and release it only where the image has the page to
       itself. Mean luminance is a poor guide for high-contrast images —
       a picture that is dark overall can still be bright under the text. */
    linear-gradient(90deg,
      rgba(2, 2, 1, 0.94) 0%,
      rgba(2, 2, 1, 0.90) 34%,
      rgba(2, 2, 1, 0.78) 58%,
      rgba(2, 2, 1, 0.44) 78%,
      rgba(2, 2, 1, 0.24) 100%),
    linear-gradient(180deg,
      rgb(2, 2, 1) 0%,
      rgba(2, 2, 1, 0.34) 15%,
      rgba(2, 2, 1, 0.30) 50%,
      rgba(2, 2, 1, 0.44) 85%,
      rgb(2, 2, 1) 100%);
}


/* Section image sources. Declared here, not inline — a relative url() in a
   custom property resolves against the stylesheet that uses it. */
.sec--question {
  --sec-bg: url("../img/sec-question.jpg");
  --sec-bg-pos: center 52%;
  --sec-bright: 1.73;
}
.sec--concepts {
  --sec-bg: url("../img/sec-concepts.jpg");
  --sec-bg-pos: center 66%;
  --sec-bright: 1.18;
}
.sec--systems {
  --sec-bg: url("../img/sec-systems.jpg");
  --sec-bg-pos: center 55%;
  --sec-bright: 1.62;
}
.sec--sources {
  --sec-bg: url("../img/sec-sources.jpg");
  --sec-bg-pos: center 55%;
  --sec-bright: 0.53;
}
.sec--forms {
  --sec-bg: url("../img/sec-forms.jpg");
  --sec-bg-pos: center 50%;
  --sec-bright: 0.45;
}
.sec--minds {
  --sec-bg: url("../img/sec-minds.jpg");
  --sec-bg-pos: center 55%;
  --sec-bright: 1.3;
}
.sec--aetherica {
  --sec-bg: url("../img/sec-aetherica.jpg");
  --sec-bg-pos: center 45%;
  --sec-bright: 1.8;
}
.sec--press {
  --sec-bg: url("../img/sec-press.jpg");
  --sec-bg-pos: center 50%;
  --sec-bright: 1.53;
}
.sec--lamp {
  --sec-bg: url("../img/sec-lamp.jpg");
  --sec-bg-pos: center 62%;
  --sec-bright: 0.41;
}
.sec--aesthetic {
  --sec-bg: url("../img/sec-aesthetic.jpg");
  --sec-bg-pos: center 50%;
  --sec-bright: 0.84;
}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
    .sec--question {
    --sec-bg: image-set(url("../img/sec-question.webp") type("image/webp"),
                        url("../img/sec-question.jpg")  type("image/jpeg"));
  }
  .sec--concepts {
    --sec-bg: image-set(url("../img/sec-concepts.webp") type("image/webp"),
                        url("../img/sec-concepts.jpg")  type("image/jpeg"));
  }
    .sec--systems {
    --sec-bg: image-set(url("../img/sec-systems.webp") type("image/webp"),
                        url("../img/sec-systems.jpg")  type("image/jpeg"));
  }
  .sec--sources {
    --sec-bg: image-set(url("../img/sec-sources.webp") type("image/webp"),
                        url("../img/sec-sources.jpg")  type("image/jpeg"));
  }
  .sec--forms {
    --sec-bg: image-set(url("../img/sec-forms.webp") type("image/webp"),
                        url("../img/sec-forms.jpg")  type("image/jpeg"));
  }
  .sec--minds {
    --sec-bg: image-set(url("../img/sec-minds.webp") type("image/webp"),
                        url("../img/sec-minds.jpg")  type("image/jpeg"));
  }
  .sec--aetherica {
    --sec-bg: image-set(url("../img/sec-aetherica.webp") type("image/webp"),
                        url("../img/sec-aetherica.jpg")  type("image/jpeg"));
  }
  .sec--press {
    --sec-bg: image-set(url("../img/sec-press.webp") type("image/webp"),
                        url("../img/sec-press.jpg")  type("image/jpeg"));
  }
  .sec--lamp {
    --sec-bg: image-set(url("../img/sec-lamp.webp") type("image/webp"),
                        url("../img/sec-lamp.jpg")  type("image/jpeg"));
  }
  .sec--aesthetic {
    --sec-bg: image-set(url("../img/sec-aesthetic.webp") type("image/webp"),
                        url("../img/sec-aesthetic.jpg")  type("image/jpeg"));
  }
}

/* A raised section already has its own ground; skip the ink fill under it. */
.section--figured.section--raised { background: transparent; }

/* --- animated ornaments --------------------------------------------------
   Two small figures, each built from the same circle-triangle-point
   vocabulary as the hero orrery so they read as the same hand. Both are
   decorative: aria-hidden, and still under prefers-reduced-motion.
   ------------------------------------------------------------------------ */
.rail-glyph {
  width: 3rem;
  height: 3rem;
  margin-top: 0.9rem;
  color: var(--gold);
  opacity: 0.4;
  overflow: visible;
}
.rail-glyph g {
  transform-box: view-box;
  transform-origin: 32px 32px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.rail-glyph__out { animation-name: orn-cw;  animation-duration: 120s; }
.rail-glyph__mid { animation-name: orn-ccw; animation-duration: 64s; }
.rail-glyph__in  { animation-name: orn-cw;  animation-duration: 40s; }
.rail-glyph__core {
  animation: orn-breathe 6s ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 32px 32px;
}

.band-orn {
  width: 4.5rem;
  height: 4.5rem;
  color: var(--gold);
  opacity: 0.55;
  margin-bottom: 0.25rem;
  overflow: visible;
}
.band-orn__orbit {
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: orn-cw 26s linear infinite;
}
.band-orn__orbit--rev { animation: orn-ccw 17s linear infinite; }
.band-orn__core {
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: orn-breathe 5s ease-in-out infinite;
}

@keyframes orn-cw  { to { transform: rotate(360deg); } }
@keyframes orn-ccw { to { transform: rotate(-360deg); } }
@keyframes orn-breathe {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .rail-glyph g, .rail-glyph__core,
  .band-orn__orbit, .band-orn__core { animation: none !important; }
}

/* --- cards -------------------------------------------------------------- */
.cards {
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
@media (min-width: 46rem) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--ink);
  text-decoration: none;
  position: relative;
  isolation: isolate;
  transition: background 0.45s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(80% 70% at 50% 0%, rgba(200, 164, 74, 0.09), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.card:hover { background: var(--ink-3); }
.card:hover::before { opacity: 1; }
/* --- figured cards ------------------------------------------------------
   Any card can carry a photographic ground: add class="card--figured" and set
   --card-bg to an image url. The image sits on its own layer at z-index -2
   (below the gold hover glow, above the card's ink background) under a heavy
   top-weighted scrim, so the sigil, number and title always keep their
   contrast. If the file is missing the card simply renders as normal.
   ------------------------------------------------------------------------ */
.card--figured { overflow: hidden; }

/* Image paths are declared here, not inline, because a relative url() inside a
   custom property resolves against the stylesheet that USES it — an inline
   "assets/img/x.jpg" silently became "/assets/css/assets/img/x.jpg". */
.card--architecture {
  --card-bg: url("../img/card-architecture.jpg");
  --card-bg-pos: center 55%;
  --card-bright: 0.59;
}
.card--conversations {
  --card-bg: url("../img/card-conversations.jpg");
  --card-bg-pos: center 42%;
  --card-bright: 0.62;
}
.card--publishing {
  --card-bg: url("../img/card-publishing.jpg");
  --card-bg-pos: center 50%;
  --card-bright: 1.07;
}
/* luminous white-and-gold subject — needs pulling down harder than the rest */
.card--visual {
  --card-bg: url("../img/card-visual.jpg");
  --card-bg-pos: center 40%;
  --card-bright: 0.65;
}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .card--architecture {
    --card-bg: image-set(url("../img/card-architecture.webp") type("image/webp"),
                         url("../img/card-architecture.jpg")  type("image/jpeg"));
  }
  .card--conversations {
    --card-bg: image-set(url("../img/card-conversations.webp") type("image/webp"),
                         url("../img/card-conversations.jpg")  type("image/jpeg"));
  }
  .card--publishing {
    --card-bg: image-set(url("../img/card-publishing.webp") type("image/webp"),
                         url("../img/card-publishing.jpg")  type("image/jpeg"));
  }
  .card--visual {
    --card-bg: image-set(url("../img/card-visual.webp") type("image/webp"),
                         url("../img/card-visual.jpg")  type("image/jpeg"));
  }
}

.card--figured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(180deg,
      rgba(2, 2, 1, 0.95) 0%,
      rgba(2, 2, 1, 0.88) 34%,
      rgba(2, 2, 1, 0.78) 62%,
      rgba(2, 2, 1, 0.84) 100%),
    var(--card-bg, none);
  background-size: cover, cover;
  background-position: center, var(--card-bg-pos, center 55%);
  background-repeat: no-repeat, no-repeat;
  filter: saturate(0.78) contrast(1.04) brightness(var(--card-bright, 1));
  transform: scale(1.001);
  transition: transform 1.4s var(--ease), filter 0.8s var(--ease);
}
.card--figured:hover::after {
  transform: scale(1.05);
  filter: saturate(0.92) contrast(1.06) brightness(calc(var(--card-bright, 1) * 1.14));
}

/* The card's flat hover wash would sit under the photograph; drop it. */
.card--figured:hover { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .card--figured::after,
  .card--figured:hover::after { transform: none; }
}

.card__sigil {
  margin-bottom: 0.25rem;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--gold-dim);
  transition: color 0.45s var(--ease), transform 0.6s var(--ease);
}
.card:hover .card__sigil {
  color: var(--gold-bright);
  transform: rotate(8deg) scale(1.04);
}
.card__no { color: var(--gold-dim); }
.card .h-card { color: var(--bone); transition: color 0.35s var(--ease); }
.card:hover .h-card { color: var(--gold-bright); }
.card p { margin: 0; color: var(--bone-dim); font-size: 1.0625rem; line-height: 1.65; }
.card__more {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.card__more span { transition: transform 0.4s var(--ease); }
.card:hover .card__more span { transform: translateX(5px); }

/* --- lists -------------------------------------------------------------- */
/* tradition / field chips */
.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fields li {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border: 1px solid var(--rule);
  padding: 0.55rem 0.9rem;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.fields li:hover { color: var(--gold-bright); border-color: var(--gold-dim); }

/* named concepts — set like an index of plates */
.concepts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: concept;
}
@media (min-width: 52rem) { .concepts { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); } }

.concepts li {
  counter-increment: concept;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-voice);
  font-weight: 300;
  font-size: clamp(1.1875rem, 1.5vw, 1.5rem);
  line-height: 1.3;
  color: var(--bone);
  transition: color 0.3s var(--ease);
}
.concepts li::before {
  content: counter(concept, upper-roman);
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--gold-dim);
}
.concepts li:hover { color: var(--gold-bright); }

/* question list — the synthesis questions */
.asks { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.asks li {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-voice);
  font-weight: 300;
  font-size: clamp(1.3125rem, 2.1vw, 1.8125rem);
  line-height: 1.3;
  color: var(--bone);
  max-width: 44ch;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.75rem;
}
.asks li:last-child { border-bottom: 1px solid var(--rule-soft); }
.asks li::before {
  content: "?";
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  opacity: 0.7;
  line-height: 1.4;
}

/* definition-style list for sub-projects */
.facets { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin: 0; }
.facet { display: grid; gap: 1rem; }
.facet__head { display: grid; gap: 0.6rem; }

/* detail rows (imprints, formats, etc.) */
.rows { display: grid; margin: 0; padding: 0; list-style: none; }
.rows li {
  display: grid;
  gap: 0.35rem 2rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule-soft);
}
.rows li:last-child { border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 48rem) { .rows li { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; } }
.rows dt, .rows .rows__k {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.rows dd, .rows .rows__v { margin: 0; color: var(--bone-dim); }

/* --- buttons ------------------------------------------------------------ */
.actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border: 1px solid var(--gold-dim);
  color: var(--gold-bright);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn > * { position: relative; }
.btn:hover { color: var(--ink); border-color: var(--gold); }
.btn:hover::before { transform: translateY(0); }

.btn--ghost { border-color: var(--rule); color: var(--bone); }
.btn--ghost::before { background: var(--bone); }
.btn--solid { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--solid::before { background: var(--gold-bright); }
.btn--solid:hover { color: var(--ink); }

/* --- contact ------------------------------------------------------------ */
.form { display: grid; gap: 1.5rem; max-width: 40rem; }
.field { display: grid; gap: 0.6rem; }
.field > span {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--bone);
  background: var(--ink-2);
  border: 1px solid var(--rule-soft);
  padding: 0.9rem 1rem;
  width: 100%;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold-dim);
  background: var(--ink-3);
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--bone-faint); }

.form__note { font-size: 0.9375rem; color: var(--bone-faint); margin: 0; max-width: 42ch; }

.contact-links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.contact-links li { border-top: 1px solid var(--rule-soft); }
.contact-links li:last-child { border-bottom: 1px solid var(--rule-soft); }
.contact-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  text-decoration: none;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.25rem;
  transition: color 0.3s var(--ease);
}
.contact-links a:hover { color: var(--gold-bright); }
.contact-links a span:last-child {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* --- call to action band ------------------------------------------------ */
.band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 10vh, 7.5rem);
  background: var(--ink-2);
  border-top: 1px solid var(--rule-soft);
  text-align: center;
}
.band__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 120% at 50% 100%, rgba(200, 164, 74, 0.12), transparent 70%);
}
.band__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.75rem; }
.band .ask { max-width: 28ch; }
.band .actions { justify-content: center; margin-top: 0.75rem; }

/* --- footer ------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(3rem, 7vh, 5rem) 2rem;
  background: var(--ink);
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-bottom: 3.5rem;
}
@media (min-width: 52rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__blurb { color: var(--bone-dim); max-width: 34ch; margin: 1rem 0 0; font-size: 1rem; }

.footer__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.footer__list a {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--bone-dim);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.footer__list a:hover { color: var(--gold-bright); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-soft);
}
.footer__bar p {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* --- reveal on scroll --------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .ring,
  .ring__spin { animation: none !important; }
  .hero__video { display: none; }
}

/* --- print -------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  body::after, .masthead, .nav, .band, .hero__aura, .orrery { display: none !important; }
  a { color: #000; text-decoration: underline; }
}


/* ==========================================================================
   Mobile refinements — appended last so these win on equal specificity.
   ========================================================================== */
@media (max-width: 48rem) {

  /* --- lighter image files -----------------------------------------------
     A phone was being sent the same 1500px backgrounds as a desktop. These
     800px versions cover a 375pt screen at 2x and cut the image payload
     from about 2.0MB to 632KB. */
  .card--architecture { --card-bg: url("../img/card-architecture-sm.jpg"); }
  .card--conversations { --card-bg: url("../img/card-conversations-sm.jpg"); }
  .card--publishing { --card-bg: url("../img/card-publishing-sm.jpg"); }
  .card--visual { --card-bg: url("../img/card-visual-sm.jpg"); }
  .head--about { --head-bg: url("../img/head-about-sm.jpg"); }
  .head--architecture { --head-bg: url("../img/head-architecture-sm.jpg"); }
  .head--contact { --head-bg: url("../img/head-contact-sm.jpg"); }
  .head--conversations { --head-bg: url("../img/head-conversations-sm.jpg"); }
  .head--publishing { --head-bg: url("../img/head-publishing-sm.jpg"); }
  .head--visual { --head-bg: url("../img/head-visual-sm.jpg"); }
  .sec--aesthetic { --sec-bg: url("../img/sec-aesthetic-sm.jpg"); }
  .sec--aetherica { --sec-bg: url("../img/sec-aetherica-sm.jpg"); }
  .sec--concepts { --sec-bg: url("../img/sec-concepts-sm.jpg"); }
  .sec--forms { --sec-bg: url("../img/sec-forms-sm.jpg"); }
  .sec--lamp { --sec-bg: url("../img/sec-lamp-sm.jpg"); }
  .sec--minds { --sec-bg: url("../img/sec-minds-sm.jpg"); }
  .sec--press { --sec-bg: url("../img/sec-press-sm.jpg"); }
  .sec--question { --sec-bg: url("../img/sec-question-sm.jpg"); }
  .sec--sources { --sec-bg: url("../img/sec-sources-sm.jpg"); }
  .sec--systems { --sec-bg: url("../img/sec-systems-sm.jpg"); }

  @supports (background-image: image-set(url("a.webp") type("image/webp"))) {
    .card--architecture {
      --card-bg: image-set(url("../img/card-architecture-sm.webp") type("image/webp"),
                             url("../img/card-architecture-sm.jpg")  type("image/jpeg"));
    }
    .card--conversations {
      --card-bg: image-set(url("../img/card-conversations-sm.webp") type("image/webp"),
                             url("../img/card-conversations-sm.jpg")  type("image/jpeg"));
    }
    .card--publishing {
      --card-bg: image-set(url("../img/card-publishing-sm.webp") type("image/webp"),
                             url("../img/card-publishing-sm.jpg")  type("image/jpeg"));
    }
    .card--visual {
      --card-bg: image-set(url("../img/card-visual-sm.webp") type("image/webp"),
                             url("../img/card-visual-sm.jpg")  type("image/jpeg"));
    }
    .head--about {
      --head-bg: image-set(url("../img/head-about-sm.webp") type("image/webp"),
                             url("../img/head-about-sm.jpg")  type("image/jpeg"));
    }
    .head--architecture {
      --head-bg: image-set(url("../img/head-architecture-sm.webp") type("image/webp"),
                             url("../img/head-architecture-sm.jpg")  type("image/jpeg"));
    }
    .head--contact {
      --head-bg: image-set(url("../img/head-contact-sm.webp") type("image/webp"),
                             url("../img/head-contact-sm.jpg")  type("image/jpeg"));
    }
    .head--conversations {
      --head-bg: image-set(url("../img/head-conversations-sm.webp") type("image/webp"),
                             url("../img/head-conversations-sm.jpg")  type("image/jpeg"));
    }
    .head--publishing {
      --head-bg: image-set(url("../img/head-publishing-sm.webp") type("image/webp"),
                             url("../img/head-publishing-sm.jpg")  type("image/jpeg"));
    }
    .head--visual {
      --head-bg: image-set(url("../img/head-visual-sm.webp") type("image/webp"),
                             url("../img/head-visual-sm.jpg")  type("image/jpeg"));
    }
    .sec--aesthetic {
      --sec-bg: image-set(url("../img/sec-aesthetic-sm.webp") type("image/webp"),
                             url("../img/sec-aesthetic-sm.jpg")  type("image/jpeg"));
    }
    .sec--aetherica {
      --sec-bg: image-set(url("../img/sec-aetherica-sm.webp") type("image/webp"),
                             url("../img/sec-aetherica-sm.jpg")  type("image/jpeg"));
    }
    .sec--concepts {
      --sec-bg: image-set(url("../img/sec-concepts-sm.webp") type("image/webp"),
                             url("../img/sec-concepts-sm.jpg")  type("image/jpeg"));
    }
    .sec--forms {
      --sec-bg: image-set(url("../img/sec-forms-sm.webp") type("image/webp"),
                             url("../img/sec-forms-sm.jpg")  type("image/jpeg"));
    }
    .sec--lamp {
      --sec-bg: image-set(url("../img/sec-lamp-sm.webp") type("image/webp"),
                             url("../img/sec-lamp-sm.jpg")  type("image/jpeg"));
    }
    .sec--minds {
      --sec-bg: image-set(url("../img/sec-minds-sm.webp") type("image/webp"),
                             url("../img/sec-minds-sm.jpg")  type("image/jpeg"));
    }
    .sec--press {
      --sec-bg: image-set(url("../img/sec-press-sm.webp") type("image/webp"),
                             url("../img/sec-press-sm.jpg")  type("image/jpeg"));
    }
    .sec--question {
      --sec-bg: image-set(url("../img/sec-question-sm.webp") type("image/webp"),
                             url("../img/sec-question-sm.jpg")  type("image/jpeg"));
    }
    .sec--sources {
      --sec-bg: image-set(url("../img/sec-sources-sm.webp") type("image/webp"),
                             url("../img/sec-sources-sm.jpg")  type("image/jpeg"));
    }
    .sec--systems {
      --sec-bg: image-set(url("../img/sec-systems-sm.webp") type("image/webp"),
                             url("../img/sec-systems-sm.jpg")  type("image/jpeg"));
    }
  }

  /* --- the question diagram ----------------------------------------------
     Its labels are sized in viewBox units, so at 335px wide they were
     rendering at about 5px — present but unreadable. At 24 units they come
     out near 11px, and the tracking comes in so the longest label still
     fits inside the frame. */
  .dgm-label text {
    font-size: 24px;
    letter-spacing: 0.06em;
  }
  .diagram { margin-top: 2rem; }

  /* --- the orrery --------------------------------------------------------
     On a phone the hero text runs the full width, so the figure was sitting
     directly behind the name. Lift it into the top corner and quieten it. */
  .orrery { top: 24%; right: -34vw; width: min(118vw, 32rem); }
  .hero--media .orrery { opacity: 0.26; }

  /* --- ornaments ---------------------------------------------------------
     The rail is a stacked strip on mobile, not a column, so the glyph reads
     as clutter beside the label. */
  /* The role list wraps to three lines on a phone and the bullet separators
     end up dangling at line ends. Drop them and let the spacing separate. */
  .hero__roles { gap: 0.35rem 1.1rem; }
  .hero__roles li:not(:last-child)::after { display: none; }

  .rail-glyph { display: none; }
  .band-orn { width: 3.5rem; height: 3.5rem; }
}