/* ==========================================================================
   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.
   ========================================================================== */

/* --- 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-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;

  --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-size: clamp(1.1875rem, 0.8vw + 1rem, 1.5rem);
  line-height: 1.6;
  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-body);
  font-weight: 400;
  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: hidden;
  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;
  top: 50%;
  right: -12vw;
  transform: translateY(-50%);
  width: min(62vw, 46rem);
  aspect-ratio: 1;
  color: var(--gold);
  opacity: 0.16;
  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; }

.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; }

/* --- 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; }

/* --- 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--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--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; }

/* --- 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-body);
  font-size: clamp(1.125rem, 1.4vw, 1.4375rem);
  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-body);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  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; }
}