/* Tiphareth Studio — main stylesheet
   SSOT: docs/foundation/design-system.md */

:root {
  --primary-color: #5f4b8b;        /* deep purple (legacy token, used inside cards) */
  --primary-color-2: #f6f1eb;      /* sand canvas */
  --primary-color-3: #d2cfc7;      /* borders */
  --background-color: #f6f1eb;     /* page ground — sand (fusion now lives only in .hero-wrap) */
  --secondary-color: #1c1a1f;      /* headings/body ink over sand */
  --secondary-color-2: #4a4550;    /* secondary ink (principles p-right, prose secondary) */
  --secondary-text-color: #6b6572; /* muted ink (leads, connector words, eyebrows) */
  --gold: #d4af37;
  --lavender: #6d6875;
  --canvas-ink: #333;              /* text inside cards (unaffected by ground) */
  --ground-fusion-opacity: 0.13;   /* hero fusion recipe, whispered over sand */
  --canvas-ink-soft: #6d6875;
  --container-border: #d2cfc7;
}

[theme="dark"] {
  --primary-color: #1c1c1e;
  --primary-color-2: #262628;
  --primary-color-3: #373b38;
  --background-color: #1c1c1e;     /* page ground — smoked black */
  --secondary-color: #f6f1eb;      /* headings/body parchment over smoked black */
  --secondary-color-2: #d2cfc7;
  --secondary-text-color: #bfb6cc;
  --canvas-ink: #f6f1eb;
  --canvas-ink-soft: #bfb6cc;
  --container-border: #373b38;
  --ground-fusion-opacity: 0.11;   /* a touch stronger over smoked black */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 7rem; overflow-x: clip; }

body {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  background-color: var(--background-color);
  color: var(--secondary-color);
  transition: background-color 400ms ease, color 400ms ease;
}

/* ---------- Fusion page ground — opt-in per page (manifesto only for
   now), like the hero but covering the whole scroll, both themes ---------- */

body.fusion-page {
  position: relative;
  isolation: isolate;
  background: transparent;
}

body.fusion-page::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -2;
  background:
    radial-gradient(95% 130% at 118% 32%, transparent 34%, rgba(255, 145, 10, 0.55) 46%, rgba(255, 180, 40, 0.30) 52%, transparent 64%),
    radial-gradient(130% 150% at 128% 8%, transparent 48%, rgba(255, 110, 0, 0.40) 60%, transparent 72%),
    radial-gradient(75% 95% at -6% 78%, rgba(232, 0, 165, 0.55) 0%, rgba(190, 0, 140, 0.25) 42%, transparent 66%),
    radial-gradient(125% 120% at 68% 42%, rgba(226, 58, 34, 0.34) 0%, transparent 68%),
    linear-gradient(150deg, #3a0b52 0%, #6d1160 30%, #a41a58 52%, #c9274b 72%, #e85c22 100%);
  filter: blur(34px) saturate(1.15);
  animation: fusionDrift 45s ease-in-out infinite alternate;
}

body.fusion-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: overlay;
}

/* Loose text (not inside a glass card) now sits directly on the vivid
   fusion regardless of theme — pin it light, same treatment as the hero */
.fusion-page .page-header h1 {
  color: #f6f1eb;
  text-shadow: 0 2px 16px rgba(20, 6, 20, 0.55), 0 0 40px rgba(20, 6, 20, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  body.fusion-page::before { animation: none; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--secondary-color);
}

a { color: inherit; }

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

/* ---------- Header ---------- */

.site-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.mark-svg { width: 38px; height: 38px; }

.mark-center { fill: var(--secondary-color); }

.site-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  /*text-transform: uppercase;*/
  color: #f6f1eb; /* cream over the fusion band */
  transition: color 300ms ease;
}

/* past the hero the header floats over the page ground: back to theme ink */
.site-header--off-hero .site-name {
  color: var(--secondary-color);
}

.site-header--off-hero #theme-toggle {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f6f1eb; /* cream over the fusion band */
  transition: color 300ms ease;
}

.site-header--off-hero .site-nav a { color: var(--secondary-color); }

.site-nav a:hover { color: var(--gold); }

#theme-toggle {
  background: none;
  border: 1px solid #f6f1eb;
  transition: color 300ms ease, border-color 300ms ease;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: #f6f1eb;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}

#theme-toggle:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Hero — the only place the fusion lives, full viewport ---------- */

.hero-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero-wrap::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  background:
    radial-gradient(95% 130% at 118% 32%, transparent 34%, rgba(255, 145, 10, 0.55) 46%, rgba(255, 180, 40, 0.30) 52%, transparent 64%),
    radial-gradient(130% 150% at 128% 8%, transparent 48%, rgba(255, 110, 0, 0.40) 60%, transparent 72%),
    radial-gradient(75% 95% at -6% 78%, rgba(232, 0, 165, 0.55) 0%, rgba(190, 0, 140, 0.25) 42%, transparent 66%),
    radial-gradient(125% 120% at 68% 42%, rgba(226, 58, 34, 0.34) 0%, transparent 68%),
    linear-gradient(150deg, #3a0b52 0%, #6d1160 30%, #a41a58 52%, #c9274b 72%, #e85c22 100%);
  filter: blur(34px) saturate(1.15);
  animation: fusionDrift 45s ease-in-out infinite alternate;
}

.hero-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: overlay;
}

@keyframes fusionDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.03) rotate(-0.5deg); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.09) rotate(0.8deg); }
}

.hero {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  text-align: center;
}

.hero-emblem {
  width: 230px;
  margin-bottom: 1.6rem;
  /* golden radiance arrives only after the emblem finishes drawing
     (glow-late), then hands off to the slow breathing pulse */
  filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
  animation:
    radiance-in 900ms ease-out 2.6s both,
    radiance 7s ease-in-out 3.5s infinite;
}

.hero-emblem svg { display: block; width: 100%; height: auto; }

/* brush pass: the circle draws itself closed */
.emblem-circle {
  stroke-dasharray: 100;
  animation: emblem-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* rays extend from the center, previewing the star */
.emblem-rays .ray {
  stroke-dasharray: 40;
  animation: ray-draw 700ms ease-out both;
  animation-delay: 0.9s;
}

.emblem-rays .ray-d { animation-delay: 1.1s; }

/* the star and its soft underlay settle in over the rays */
.emblem-star {
  animation: emblem-fade 800ms ease-out 1.6s both;
}

.emblem-under {
  animation: emblem-fade 900ms ease-out 1.9s both;
}

/* the center point arrives last, a quiet pop */
.emblem-core {
  transform-origin: 60px 60px;
  animation: core-pop 500ms cubic-bezier(0.34, 1.4, 0.64, 1) 1.5s both;
}

@keyframes emblem-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes ray-draw {
  from { stroke-dashoffset: 40; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 0.75; }
}

@keyframes emblem-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes core-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes radiance-in {
  from { filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0)); }
  to   { filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.25)); }
}

@keyframes radiance {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.18)); }
  50%      { filter: drop-shadow(0 0 26px rgba(212, 175, 55, 0.38)); }
}

.hero-name {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: 0.12em;
  margin-bottom: 0.6rem;
  /* pinned light — the hero always sits on the fusion, regardless of theme */
  color: #f6f1eb;
  text-shadow: 0 2px 20px rgba(20, 6, 20, 0.4);
}

.hero-slogan {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.25rem;
  /* brighter than --gold on purpose — the standard bronze gold loses
     contrast against the vivid pink/red band of the fusion; this is a
     hero-only override, --gold stays the site's accent everywhere else */
  color: #f0cf6a;
  letter-spacing: 0.06em;
  margin-bottom: 1.8rem;
  text-shadow: 0 1px 12px rgba(20, 6, 20, 0.3);
}

.hero-line {
  font-size: 0.98rem;
  color: rgba(246, 241, 235, 0.85);
  max-width: 30rem;
  margin: 0 auto 2.2rem;
  text-shadow: 0 1px 12px rgba(20, 6, 20, 0.35);
}

.discover {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(246, 241, 235, 0.4);
  color: #f6f1eb;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 200ms ease, background 200ms ease;
}

.discover:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}

.discover svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.discover:hover svg { transform: translateY(2px); }

/* ---------- Section divider — the center point ---------- */

.section-divider {
  text-align: center;
  color: var(--gold);
  font-size: 0.85rem;
  /* closes the section above (tight above, generous below) rather than
     reading as the opening mark of the section that follows */
  padding: 0.8rem 0 3.2rem;
  opacity: 0.75;
}

/* ---------- Sections ---------- */

section {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
}

.section-lead {
  text-align: center;
  color: var(--secondary-text-color);
  font-size: 0.95rem;
  max-width: 32rem;
  margin: 0 auto 2.5rem;
}

.section-more {
  text-align: center;
  margin: 2.2rem 0 0;
}

/* ---------- Section ambience — faint warm washes behind the body
   sections (the fusion's afterglow), fully faded before any edge so
   nothing ever shows a clipped seam ---------- */

.manifesto-preview,
.works {
  position: relative;
  isolation: isolate;
}

.manifesto-preview::before,
.works::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.manifesto-preview::before {
  top: -4rem;
  right: -6rem;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.09), transparent);
}

.works::before {
  top: 2rem;
  left: -8rem;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(closest-side, rgba(232, 0, 165, 0.06), transparent);
}

[theme="dark"] .manifesto-preview::before {
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.07), transparent);
}

[theme="dark"] .works::before {
  background: radial-gradient(closest-side, rgba(232, 0, 165, 0.05), transparent);
}

.section-more a,
.work-back a {
  color: var(--gold);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.section-more a:hover,
.work-back a:hover { text-decoration: underline; }

/* ---------- Principles — glass chips with the manifesto's icons ---------- */

.principle-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  max-width: 40rem;
  margin: 0 auto;
}

.principle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
  background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 45%), rgba(246, 241, 235, 0.34);
  border: 1.5px solid rgba(212, 175, 55, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 14px rgba(28, 28, 30, 0.10);
  font-size: 0.95rem;
  transition: border-color 200ms ease, background 300ms ease;
}

.principle-chip:hover { border-color: rgba(212, 175, 55, 0.5); }

[theme="dark"] .principle-chip {
  background: linear-gradient(135deg, rgba(226,192,128,0.055), rgba(226,192,128,0) 45%), rgba(20, 15, 35, 0.42);
  box-shadow: inset 0 1px 0 rgba(226,192,128,0.09), 0 2px 14px rgba(0, 0, 0, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
}

[theme="dark"] .principle-chip:hover { border-color: rgba(212, 175, 55, 0.4); }

.principle-chip svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.4;
}

.principle-chip .p-left {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

.principle-chip em {
  color: var(--secondary-text-color);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  padding: 0 0.15rem;
}

.principle-chip .p-right { color: var(--secondary-color-2); }

/* staggered arrival — only once JS confirms it can reveal them */
.principle-chips.will-reveal .principle-chip {
  opacity: 0;
}

.principle-chips.in-view .principle-chip {
  animation: chip-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.principle-chips.in-view .principle-chip:nth-child(2) { animation-delay: 90ms; }
.principle-chips.in-view .principle-chip:nth-child(3) { animation-delay: 180ms; }
.principle-chips.in-view .principle-chip:nth-child(4) { animation-delay: 270ms; }
.principle-chips.in-view .principle-chip:nth-child(5) { animation-delay: 360ms; }
.principle-chips.in-view .principle-chip:nth-child(6) { animation-delay: 450ms; }
.principle-chips.in-view .principle-chip:nth-child(7) { animation-delay: 540ms; }

@keyframes chip-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Works ---------- */

.works { max-width: 860px; padding-bottom: 5rem; }

.works-group {
  font-size: 1.3rem;
  color: var(--secondary-text-color);
  margin: 2.6rem 0 1.2rem;
  text-align: center;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

.work-card {
  display: block;
  background-color: var(--primary-color-2);
  color: var(--canvas-ink);
  border: 1px solid var(--container-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.work-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(28, 28, 30, 0.28);
}

.card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

/* thesis micro-diagram: the card argues its claim before the prose does */
.card-diagram {
  padding: 1.2rem 1.2rem 0;
}

.card-diagram .card-diagram-svg {
  display: block;
  width: 100%;
  height: auto;
}

.card-body { padding: 1.4rem 1.5rem; }

.card-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  margin-bottom: 0.6rem;
}

.work-card h4 {
  font-size: 1.45rem;
  color: var(--canvas-ink);
  margin-bottom: 0.35rem;
}

.card-thesis {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--canvas-ink);
  margin-bottom: 0.7rem;
}

.card-period {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--canvas-ink-soft);
}

.works-empty {
  text-align: center;
  color: var(--secondary-text-color);
  font-style: italic;
}

/* ---------- Pages (manifesto, works) ---------- */

.page {
  max-width: 820px;
  margin: 0 auto;
  /* top padding clears the now-fixed .site-header (it no longer reserves
     flow space like sticky did) */
  padding: 7.5rem 1.5rem 5rem;
}

.page-header {
  text-align: center;
  margin: 0 auto 3rem;
  max-width: 640px;
}

.page-header h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-bottom: 0.5rem;
}

.page-subtitle,
.work-thesis {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold);
}

/* ---------- Principles page: eyebrow, principle cards ---------- */

.eyebrow-pill {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  margin-bottom: 1.4rem;
}

/* Two columns, not three: each card carries 380–580 characters of body plus
   evidence, which is prose, not a scannable item. At three columns inside an
   820px panel that renders around 28 characters per line — half a comfortable
   measure. Two puts it near 55. */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  max-width: 820px;
  margin: 2.6rem auto 2.8rem;
}

/* Seven cards leaves the last one alone on its row. Centre it at a sibling's
   width so it reads as a deliberate close rather than a leftover — which suits
   the seventh principle being Silence as affordance. */
.principles-grid .principle-card:last-child {
  grid-column: 1 / -1;
  /* Percent, not the 820px max-width: the grid is narrower than 820 whenever
     the page padding bites, and hardcoding it made this card 24px wider than
     its siblings instead of matching them. 100% here is the grid's own width,
     because the card spans every column. */
  max-width: calc((100% - 1.1rem) / 2);
  margin-inline: auto;
}

.principle-card {
  position: relative;
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 45%), rgba(246, 241, 235, 0.34);
  border: 1.5px solid rgba(246, 241, 235, 0.45);
  border-radius: 16px;
  padding: 1.6rem 1.4rem 1.3rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 24px rgba(28, 28, 30, 0.18);
  transition: border-color 200ms ease, background 300ms ease;
}

.principle-card:hover { background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 45%), rgba(246, 241, 235, 0.46); }

[theme="dark"] .principle-card {
  background: linear-gradient(135deg, rgba(226,192,128,0.055), rgba(226,192,128,0) 45%), rgba(20, 15, 35, 0.42);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(226,192,128,0.09), 0 4px 24px rgba(0, 0, 0, 0.20);
}

[theme="dark"] .principle-card:hover {
  background: linear-gradient(135deg, rgba(226,192,128,0.055), rgba(226,192,128,0) 45%), rgba(20, 15, 35, 0.54);
  border-color: rgba(212, 175, 55, 0.4);
}

/* Same treatment as .landing .pain-num — one ordinal marker across the site.
   Was 0.7rem at 65% alpha and unreadable; also missing the display face the
   landing cards already used. */
.principle-num {
  position: absolute;
  top: 0.9rem;
  right: 1.2rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: rgba(212, 175, 55, 0.92);
}

.principle-icon { margin-bottom: 0.9rem; }
.principle-icon svg { width: 28px; height: 28px; stroke: var(--gold); fill: none; stroke-width: 1.4; }

.principle-card h3 {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
  color: var(--canvas-ink);
}

.principle-card p { font-size: 0.88rem; line-height: 1.55; color: var(--canvas-ink); }

/* Evidence: the principle names the work that tests it, in prose rather than
   as a badge. A hairline separates doctrine from what argues it; the work's
   name is the link, so the sentence stays a sentence. */
.principle-evidence {
  margin-top: 1.05rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(226, 192, 128, 0.20);
}

.principle-evidence p + p { margin-top: 0.6rem; }

/* Three classes deep so it outranks the fusion-page ink rule on
   `.principle-card p` — the evidence sits a step behind the principle.
   The step is carried by size and the rule above it, not by fading the ink:
   the fusion ground runs pale under the lower cards, and cream much below
   0.85 stops being readable down there. */
.principles-grid .principle-card .principle-evidence p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(246, 241, 235, 0.86);
}

.principle-evidence a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
  padding-bottom: 0.05rem;
  transition: border-color 200ms ease, color 200ms ease;
}

.principle-evidence a:hover { border-bottom-color: var(--gold); }

/* The one principle no single work proves points at the set instead. Its
   evidence reads as a note, not as a citation, so the rule above it goes. */
.principle-evidence-aggregate { border-top-style: dashed; }

.principles-grid .principle-card .principle-evidence-aggregate p {
  font-style: italic;
  color: rgba(246, 241, 235, 0.74);
}

.principle-evidence-aggregate a { font-style: normal; }

@media (max-width: 720px) {
  .principles-grid { grid-template-columns: 1fr; }
  .principles-grid .principle-card:last-child { max-width: none; }
}

/* Hero showcase — contained rounded fusion panel (poster, not edge-to-
   edge), self-contained animation (work pages have a flat sand/smoked-
   black ground now, not a page-wide fusion), spotlight card floating
   with margin on top. */
.showcase {
  position: relative;
  /* Break out of .page's 820px column: left edge pinned to the column's
     center (50%), then shifted back by half own width — centers on the
     viewport no matter how wide the panel resolves. */
  width: 1240px;
  max-width: calc(100vw - 3rem);
  min-height: 560px;
  margin: 0 0 2rem 50%;
  transform: translateX(-50%);
  padding: 2.5rem;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  box-shadow: 0 24px 70px rgba(10, 2, 15, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.showcase::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 22% 20%, rgba(255, 170, 30, 0.65) 0%, transparent 60%),
    radial-gradient(65% 80% at 82% 75%, rgba(232, 0, 165, 0.60) 0%, transparent 62%),
    radial-gradient(90% 100% at 50% 50%, rgba(164, 26, 88, 0.55) 0%, transparent 70%),
    linear-gradient(155deg, #2e004f 0%, #7a0a63 28%, #c9274b 58%, #e85c22 100%);
  filter: blur(14px) saturate(1.35);
  animation: showcaseDrift 30s ease-in-out infinite alternate;
}

.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.14;
  mix-blend-mode: overlay;
}

@keyframes showcaseDrift {
  from { transform: scale(1.05) translate(-1%, 0); }
  to   { transform: scale(1.12) translate(1%, -1%); }
}

.showcase-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  width: 100%;
}

.spotlight {
  position: relative;
  z-index: 1;
  width: min(94%, 1180px);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(20, 15, 35, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 30px 80px rgba(10, 2, 15, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 0 60px rgba(212, 175, 55, 0.10);
}

.spotlight img {
  display: block;
  width: 100%;
  height: auto;
}

.spotlight-caption {
  position: relative;
  z-index: 1;
  margin: 1rem auto 2rem;
  max-width: 700px;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
}

@media (max-width: 720px) {
  .spotlight { width: 88%; }
  .showcase { min-height: 420px; }
}

/* Long-form reading surface — same glass system as work cards, so
   paragraphs don't have to fight the moving fusion ground directly */
.prose-panel {
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border-radius: 20px;
  padding: 2.5rem clamp(1.5rem, 5vw, 3.5rem);
  background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 45%), rgba(246, 241, 235, 0.34);
  border: 1.5px solid rgba(246, 241, 235, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 24px rgba(28, 28, 30, 0.18);
  transition: background 400ms ease, border-color 400ms ease;
}

[theme="dark"] .prose-panel {
  background: linear-gradient(135deg, rgba(226,192,128,0.055), rgba(226,192,128,0) 45%), rgba(20, 15, 35, 0.42);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(226,192,128,0.09), 0 4px 24px rgba(0, 0, 0, 0.20);
}

.prose-panel { text-shadow: none; }

.prose-panel .prose,
.prose-panel .prose p,
.prose-panel .prose li,
.prose-panel .prose h2,
.prose-panel .prose h3 {
  color: var(--canvas-ink);
}

[theme="dark"] .prose-panel .prose,
[theme="dark"] .prose-panel .prose p,
[theme="dark"] .prose-panel .prose li,
[theme="dark"] .prose-panel .prose h2,
[theme="dark"] .prose-panel .prose h3 {
  color: #f6f1eb;
}

.prose-panel .prose strong { color: inherit; }
.prose-panel .prose blockquote { color: inherit; }

.work-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
  margin-bottom: 0.8rem;
}

.prose h2 {
  font-size: 1.6rem;
  margin: 2.4rem 0 0.8rem;
}

.prose h3 {
  font-size: 1.25rem;
  margin: 1.8rem 0 0.6rem;
}

.prose p, .prose li { margin-bottom: 1rem; color: var(--secondary-color-2); }

.prose ul, .prose ol { padding-left: 1.4rem; }

.prose blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 1.2rem;
  margin: 1.6rem 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--secondary-color);
}

.prose strong { font-weight: 500; color: var(--secondary-color); }

.prose a { color: var(--gold); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.9rem;
}

.prose th, .prose td {
  border: 1px solid rgba(191, 182, 204, 0.25);
  padding: 0.5rem 0.7rem;
  text-align: left;
}

.work-back { margin-top: 3rem; text-align: center; }

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  padding: 3.5rem 1.5rem 3rem;
  border-top: 1px solid rgba(191, 182, 204, 0.15);
  margin-top: 2rem;
}

.footer-star { color: var(--gold); margin-bottom: 1rem; }

.footer-studio {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  /*text-transform: uppercase;*/
}

.footer-slogan {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--secondary-text-color);
  margin-bottom: 1.4rem;
}

.footer-person {
  font-size: 0.85rem;
  color: var(--secondary-text-color);
}

.footer-person span {
  font-style: italic;
  font-size: 0.8rem;
  color: var(--lavender);
}

[theme="dark"] .footer-person span { color: var(--secondary-text-color); }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .works-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 4rem; }
  .site-header { flex-direction: column; gap: 0.8rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-emblem,
  .emblem-circle,
  .emblem-rays .ray,
  .emblem-star,
  .emblem-under,
  .emblem-core { animation: none; }
  .work-card, .work-card:hover { transition: none; transform: none; }
  .principle-chips.will-reveal .principle-chip { opacity: 1; animation: none; }
}


/* ---------- Glass system (Prisma lineage; theme switches the tone) ---------- */
/* Cards and header keep the exact same glass chrome as before — only the
   ground behind them changed (fusion confined to .hero-wrap, flat sand/
   smoked-black everywhere else). Untouched on purpose. */

.site-header {
  position: fixed;
  top: 0.8rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: 10;
  padding: 0.85rem 1.7rem;
  border-radius: 20px;
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02) 50%), rgba(246, 241, 235, 0.16);
  border: 1px solid rgba(246, 241, 235, 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
  transition: background 400ms ease, border-color 400ms ease, transform 300ms ease;
}

.site-header.site-header--hidden {
  transform: translateY(-140%);
}

[theme="dark"] .site-header {
  background: linear-gradient(135deg, rgba(226,192,128,0.055), rgba(226,192,128,0) 45%), rgba(15, 10, 28, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(226,192,128,0.09);
}

.work-card {
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 45%), rgba(246, 241, 235, 0.34);
  border: 1.5px solid rgba(246, 241, 235, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 24px rgba(28, 28, 30, 0.18);
  transition: transform 250ms ease, box-shadow 250ms ease, background 400ms ease, border-color 400ms ease;
}

.work-card:hover { background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 45%), rgba(246, 241, 235, 0.46); }

[theme="dark"] .work-card {
  background: linear-gradient(135deg, rgba(226,192,128,0.055), rgba(226,192,128,0) 45%), rgba(20, 15, 35, 0.42);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(226,192,128,0.09), 0 4px 24px rgba(0, 0, 0, 0.20);
}

[theme="dark"] .work-card h4,
[theme="dark"] .work-card .card-thesis { color: #f6f1eb; }
[theme="dark"] .work-card .card-period { color: #bfb6cc; }

[theme="dark"] .work-card:hover {
  background: linear-gradient(135deg, rgba(226,192,128,0.055), rgba(226,192,128,0) 45%), rgba(20, 15, 35, 0.54);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.12), 0 4px 24px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .hero-wrap::before { animation: none; }
}
/* ---------- Fusion-page (manifesto): cream ink in light mode too —
   the ground under the glass is the fusion, same reason as the header ---------- */
body.fusion-page .prose-panel p,
body.fusion-page .prose-panel strong,
body.fusion-page .prose-panel .prose,
body.fusion-page .prose-panel .prose p,
body.fusion-page .prose-panel .prose li,
body.fusion-page .prose-panel .prose h2,
body.fusion-page .prose-panel .prose h3,
body.fusion-page .principle-card h3,
body.fusion-page .principle-card p {
  color: #f6f1eb;
}

/* Manifesto glass goes dark in both themes — cream ink needs the smoked panel */
body.fusion-page .prose-panel,
body.fusion-page .principle-card {
  background: linear-gradient(135deg, rgba(226,192,128,0.055), rgba(226,192,128,0) 45%), rgba(20, 15, 35, 0.42);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(226,192,128,0.09), 0 4px 24px rgba(0, 0, 0, 0.20);
}

body.fusion-page .principle-card:hover {
  background: linear-gradient(135deg, rgba(226,192,128,0.055), rgba(226,192,128,0) 45%), rgba(20, 15, 35, 0.54);
  border-color: rgba(212, 175, 55, 0.4);
}

/* Manifesto footer sits on the fusion too: cream ink */
body.fusion-page .site-footer,
body.fusion-page .footer-studio,
body.fusion-page .footer-slogan,
body.fusion-page .footer-person,
body.fusion-page .footer-person span {
  color: #f6f1eb;
}


/* ---------- Page ground: a whispered variance of the hero fusion.
   Same hues, near-transparent, fixed to the viewport — the fusion's
   chromatic identity continues below the hero in both themes.
   (fusion-page already owns its full-bleed ground.) ---------- */
body:not(.fusion-page)::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(95% 130% at 118% 32%, transparent 34%, rgba(255, 145, 10, 0.55) 46%, rgba(255, 180, 40, 0.30) 52%, transparent 64%),
    radial-gradient(130% 150% at 128% 8%, transparent 48%, rgba(255, 110, 0, 0.40) 60%, transparent 72%),
    radial-gradient(75% 95% at -6% 78%, rgba(232, 0, 165, 0.55) 0%, rgba(190, 0, 140, 0.25) 42%, transparent 66%),
    radial-gradient(125% 120% at 68% 42%, rgba(226, 58, 34, 0.34) 0%, transparent 68%),
    linear-gradient(150deg, #3a0b52 0%, #6d1160 30%, #a41a58 52%, #c9274b 72%, #e85c22 100%);
  filter: blur(34px) saturate(1.15);
  opacity: var(--ground-fusion-opacity);
}

/* soft radial washes floating above the faded fusion ground */
body:not(.fusion-page)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120vw 80vh at 12% -10%, rgba(95, 75, 139, 0.06), transparent 62%),
    radial-gradient(100vw 70vh at 88% 28%, rgba(217, 108, 74, 0.055), transparent 60%),
    radial-gradient(90vw 90vh at 45% 108%, rgba(196, 52, 122, 0.045), transparent 62%);
}