/* reggieblack.com — “The Rose Window”
   A life as a cathedral window: light from one source, broken into many colors.
   Dark warm stone, jewel glass, volumetric light. Grenze Gotisch + Alegreya.
   The dark ground here is a nave, not a “dark mode”: every color is a tint of
   stone or of glass, and the page is re-lit by whichever Light you stand before. */

/* ---------- fonts ---------- */

@font-face {
  font-family: 'Grenze Gotisch';
  src: url(/assets/fonts/grenze-gotisch.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya';
  src: url(/assets/fonts/alegreya.woff2) format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya';
  src: url(/assets/fonts/alegreya-italic.woff2) format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ---------- */

@property --ambient {
  syntax: '<color>';
  inherits: true;
  initial-value: #8a6a2f;
}

:root {
  /* stone — warm charcoal-umber, never pure black */
  --stone-0: oklch(0.155 0.010 70);
  --stone-1: oklch(0.195 0.012 75);
  --stone-2: oklch(0.245 0.014 78);
  --stone-3: oklch(0.34 0.016 80);
  /* parchment — warm, never pure white */
  --parch: oklch(0.93 0.025 85);
  --parch-soft: oklch(0.80 0.022 82);
  --parch-dim: oklch(0.72 0.02 80);
  /* the six glasses */
  --gold: oklch(0.79 0.13 82);
  --gold-deep: oklch(0.66 0.125 78);
  --ruby: oklch(0.52 0.19 25);
  --ruby-bright: oklch(0.78 0.10 22);
  --rose: oklch(0.78 0.10 12);
  --cobalt: oklch(0.52 0.16 262);
  --cobalt-bright: oklch(0.78 0.08 255);
  --emerald: oklch(0.58 0.12 155);
  --emerald-bright: oklch(0.80 0.10 152);
  --violet: oklch(0.50 0.13 310);
  --violet-bright: oklch(0.79 0.08 310);
  --indigo-bright: oklch(0.78 0.07 268);

  --ambient: #8a6a2f;

  --font-display: 'Grenze Gotisch', 'Palatino', serif;
  --font-body: 'Alegreya', 'Iowan Old Style', Georgia, serif;

  --measure: 60ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --s-1: clamp(0.5rem, 0.8vw, 0.75rem);
  --s0: clamp(1rem, 1.6vw, 1.5rem);
  --s1: clamp(1.75rem, 3vw, 2.75rem);
  --s2: clamp(3rem, 6vw, 5.5rem);
  --s3: clamp(5rem, 11vw, 9rem);
  --s4: clamp(7rem, 16vh, 13rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ~expo */
  color-scheme: dark;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--stone-1);
  color: var(--parch);
  font-family: var(--font-body);
  font-size: clamp(1.06rem, 0.95rem + 0.5vw, 1.21rem);
  line-height: 1.72;
  overflow-x: clip;
  transition: --ambient 1.4s ease;
}

::selection { background: var(--gold-deep); color: var(--stone-0); }

h1, h2, h3 { margin: 0; font-weight: inherit; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--parch); }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* the nave's ambient light — one fixed layer, re-tinted per section */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 65% at 50% 30%,
      color-mix(in oklab, var(--ambient) 13%, transparent), transparent 72%),
    linear-gradient(var(--stone-1), var(--stone-0));
  transition: --ambient 1.4s ease;
}

/* ---------- type patterns ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-bright, var(--gold));
  margin: 0 0 var(--s0);
}

.display {
  font-family: var(--font-display);
  font-weight: 480;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  line-height: 1.5;
  color: var(--parch);
  text-wrap: pretty;
}

.prose { max-width: var(--measure); text-wrap: pretty; }
.prose p + p { text-indent: 1.6em; }
.prose .noindent, .prose p.lede + p { text-indent: 0; }
.soft { color: var(--parch-soft); }

/* verses carved beneath each window */
.proverb {
  font-style: italic;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--light-bright, var(--gold));
  max-width: 44ch;
  margin: 0 0 var(--s1);
}
.proverb .ref {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parch-dim);
  margin-top: 0.5em;
}

blockquote {
  margin: var(--s1) 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--light-bright, var(--gold));
  font-style: italic;
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem);
  line-height: 1.55;
  color: var(--parch);
  max-width: 44ch;
}
blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parch-dim);
  margin-top: 0.7em;
}

/* ---------- reveals (JS-gated; final state is the default) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .lit .reveal, .js .reveal.lit {
  opacity: 1;
  transform: none;
}

/* headings ink in — variable weight settles like drying ink */
.js .inkin { font-variation-settings: 'wght' 180; opacity: 0.25;
  transition: font-variation-settings 1.6s var(--ease-out), opacity 1.2s var(--ease-out);
  transition-delay: var(--d, 0s); }
.js .lit .inkin, .js .inkin.lit { font-variation-settings: 'wght' 480; opacity: 1; }

/* ---------- masthead ---------- */

.mast {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem var(--gutter);
  pointer-events: none;
  background: linear-gradient(color-mix(in oklab, var(--stone-0) 82%, transparent), transparent);
}
.mast a { pointer-events: auto; text-decoration: none; }
.mast-mark {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 430;
  font-size: 1.12rem; color: var(--parch);
}
.mast-mark svg { width: 1.5rem; height: 1.5rem; }
.mast-guide {
  font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--parch-soft);
}
.mast-guide:hover { color: var(--gold); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: end center;
  isolation: isolate;
  overflow: clip;
}
#rose-gl, .hero-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
}
#rose-gl { display: none; }
.gl #rose-gl { display: block; }
.gl .hero-fallback { display: none; }
.hero-fallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 45% at 50% 38%, color-mix(in oklab, var(--gold-deep) 22%, transparent), transparent 70%),
    linear-gradient(var(--stone-1), var(--stone-0));
}
.hero-fallback svg { width: min(58vmin, 34rem); height: auto; }

.hero-inner {
  text-align: center;
  padding: 0 var(--gutter) clamp(4.5rem, 10vh, 7rem);
  max-width: 60rem;
}
.hero-place {
  font-size: 0.8rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--parch-soft); margin: 0.9rem 0 0;
}
.hero-name {
  font-family: var(--font-display);
  font-size: clamp(4rem, 13.5vw, 9.5rem);
  font-weight: 460;
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--parch);
  text-shadow: 0 0 90px color-mix(in oklab, var(--gold-deep) 55%, transparent);
}
.hero-name .lt { display: inline-block; }
.js .hero-name .lt {
  opacity: 0;
  transform: translateY(0.35em);
  font-variation-settings: 'wght' 120;
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out),
    font-variation-settings 1.7s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .hero-name.lit .lt {
  opacity: 1;
  transform: none;
  font-variation-settings: 'wght' 460;
}
.hero-line {
  margin: var(--s0) auto 0;
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.4rem);
  color: var(--parch);
  max-width: 60ch;
  text-wrap: balance;
}
.hero-epigraph {
  margin: clamp(1.2rem, 2.5vh, 2rem) auto 0;
  font-style: italic;
  color: var(--gold);
  font-size: clamp(0.98rem, 0.92rem + 0.4vw, 1.15rem);
  max-width: 64ch;
}
.hero-epigraph .ref {
  font-style: normal; font-size: 0.75rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--parch-dim);
  display: block; margin-top: 0.45em;
}

.cue {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--parch-dim);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
}
.cue:hover { color: var(--gold); }
.cue svg { width: 11px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.js .cue svg { animation: cue-drift 2.8s var(--ease-out) infinite; }
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  55% { transform: translateY(6px); opacity: 0.5; }
}

/* ---------- threshold ---------- */

.threshold {
  padding: var(--s3) var(--gutter) var(--s2);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--s2);
}
.threshold-text { max-width: var(--measure); }
.threshold-text .lede em { color: var(--gold); }

/* the elevation — an architectural drawing of the window as table of contents */
.elevation { width: min(100%, 46rem); }
.elevation svg { width: 100%; height: auto; display: block; overflow: visible; }
.elevation a { outline-offset: 6px; }
.elevation .cell {
  fill: var(--stone-2);
  stroke: oklch(0.42 0.02 80);
  stroke-width: 1;
  transition: fill 0.5s var(--ease-out);
}
.elevation a:hover .cell, .elevation a:focus-visible .cell,
.elevation a[aria-current] .cell { fill: var(--glass, var(--gold-deep)); }
.elevation a:hover .cell { stroke: var(--gold); }
/* the kindling: on first sight, each light glows once in its own glass */
.js .elevation.kindle .cell {
  animation: kindle 1.5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 0.14s + 0.2s);
}
@keyframes kindle {
  0% { fill: var(--stone-2); }
  38% { fill: var(--glass, var(--gold-deep)); }
  100% { fill: var(--stone-2); }
}
@media (prefers-reduced-motion: reduce) {
  .js .elevation.kindle .cell { animation: none; }
}
.elevation text {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--parch-soft);
}
.elevation a:hover text, .elevation a:focus-visible text, .elevation a[aria-current] text { fill: var(--parch); }
.elevation .plan-caption {
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--parch-dim); text-align: center; margin-top: var(--s0);
}

/* ---------- the lights ---------- */

.light {
  --light-bright: var(--gold);
  position: relative;
  padding: var(--s4) 0;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [text-start] minmax(0, 40rem)
    [text-end] clamp(2rem, 6vw, 6rem)
    [win-start] minmax(16rem, 26rem)
    [win-end] minmax(var(--gutter), 1fr)
    [full-end];
  row-gap: var(--s1);
  align-items: start;
}
.light:nth-of-type(even) {
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [win-start] minmax(16rem, 26rem)
    [win-end] clamp(2rem, 6vw, 6rem)
    [text-start] minmax(0, 40rem)
    [text-end] minmax(var(--gutter), 1fr)
    [full-end];
}
.light-head, .light-body { grid-column: text; }
.light .lancet { grid-column: win; grid-row: 1 / span 2; align-self: center; }

/* the great numeral — a ghost of colored light on the stone behind the text */
.light-numeral {
  position: absolute;
  top: clamp(0.5rem, 3vh, 2rem);
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(10rem, 26vw, 24rem);
  line-height: 0.8;
  color: color-mix(in oklab, var(--light-bright) 11%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* the numeral haunts the text side, where the headroom is */
.light:nth-of-type(odd) .light-numeral { left: clamp(0.5rem, 3vw, 4rem); }
.light:nth-of-type(even) .light-numeral { right: clamp(0.5rem, 3vw, 4rem); }
section[id] { scroll-margin-top: 2.5rem; }

.light-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 2rem + 4.5vw, 5.4rem);
  font-weight: 480;
  line-height: 1;
  margin-bottom: var(--s1);
}

/* ---------- lancet windows ---------- */

.lancet {
  position: relative;
  margin: 0;
  z-index: 1;
}
.lancet-frame {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.lancet-frame img {
  width: 100%;
  border-radius: 2px;
  /* melt the render's stone surround into the page's stone */
  -webkit-mask-image: radial-gradient(120% 104% at 50% 46%, #000 52%, transparent 88%);
  mask-image: radial-gradient(120% 104% at 50% 46%, #000 52%, transparent 88%);
}
/* the window's light, fallen onto the floor of the page */
.lancet .pool {
  display: block;
  width: 88%;
  height: clamp(4rem, 8vw, 6rem);
  margin: -1.25rem auto 0;
  pointer-events: none;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.lancet figcaption {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parch-dim);
}
.lancet figcaption em { font-style: italic; text-transform: none; letter-spacing: 0.02em;
  font-size: 0.95rem; color: var(--parch-soft); display: block; margin-bottom: 0.2rem; }

/* ---------- section hues ---------- */

#god    { --light-bright: var(--gold); }
#amy    { --light-bright: var(--rose); }
#six    { --light-bright: var(--emerald-bright); }
#work   { --light-bright: var(--gold); }
#mats   { --light-bright: var(--indigo-bright); }
#book   { --light-bright: var(--violet-bright); }

/* ---------- the workshop bench (other ventures) ---------- */

.bench {
  grid-column: text;
  margin-top: var(--s1);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--stone-3);
  border: 1px solid var(--stone-3);
}
.bench > div {
  background: var(--stone-1);
  padding: var(--s0);
  transition: background 0.4s var(--ease-out);
}
.bench > div:hover { background: var(--stone-2); }
.bench h3 {
  font-family: var(--font-display);
  font-weight: 440;
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
  color: var(--parch);
}
.bench p { margin: 0; font-size: 0.95rem; color: var(--parch-soft); line-height: 1.55; }

/* ---------- the question / coda ---------- */

.question {
  min-height: 72svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: var(--s3) var(--gutter);
}
.question .display {
  font-size: clamp(2.6rem, 2rem + 5vw, 6rem);
  max-width: 16ch;
}
.question .display em { font-style: normal; color: var(--gold); }

.coda {
  padding: var(--s3) var(--gutter) var(--s2);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s1);
}
.coda blockquote {
  border: 0; padding: 0; margin: 0;
  font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.7rem);
  max-width: 38ch;
  color: var(--parch-soft);
}
.coda blockquote strong { color: var(--parch); font-weight: 600; }

/* ---------- footer ---------- */

footer {
  padding: var(--s2) var(--gutter) var(--s1);
  border-top: 1px solid var(--stone-2);
  display: grid;
  gap: var(--s0);
  justify-items: center;
  text-align: center;
  color: var(--parch-soft);
  font-size: 0.95rem;
}
footer .sdg {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: 1.3rem;
  color: var(--gold);
}
footer .fine { font-size: 0.82rem; color: var(--parch-dim); max-width: 60ch; }
footer .fine a { color: var(--parch-soft); }
footer .fine a:hover { color: var(--gold); }

/* ---------- guide shared bits ---------- */

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(var(--s2) + 3rem) var(--gutter) var(--s2);
}
.page h1 {
  font-family: var(--font-display);
  font-weight: 470;
  font-size: clamp(2.6rem, 2rem + 4vw, 4.6rem);
  line-height: 1.02;
  margin-bottom: var(--s0);
}
.page h2 {
  font-family: var(--font-display);
  font-weight: 450;
  font-size: clamp(1.7rem, 1.5rem + 1.4vw, 2.4rem);
  margin: var(--s2) 0 var(--s0);
}
.page h2 .no {
  color: var(--gold);
  margin-right: 0.4em;
}
.page pre {
  background: var(--stone-0);
  border: 1px solid var(--stone-2);
  padding: var(--s0);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
  border-radius: 3px;
}
.page code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.page p code, .page li code {
  background: var(--stone-2);
  padding: 0.08em 0.35em;
  border-radius: 3px;
  font-size: 0.88em;
}
.page ul, .page ol { padding-left: 1.4rem; }
.page li { margin-bottom: 0.5em; }
.page li::marker { color: var(--gold); }
.page hr { border: 0; border-top: 1px solid var(--stone-2); margin: var(--s2) 0; }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  /* the elevation's labels shrink with the drawing — keep the numerals legible */
  .elevation text { font-size: 21px; }
  .elevation tspan.lname { display: none; }
}

@media (max-width: 860px) {
  .light, .light:nth-of-type(even) {
    grid-template-columns:
      [full-start] var(--gutter)
      [text-start win-start] minmax(0, 1fr)
      [text-end win-end] var(--gutter)
      [full-end];
  }
  .light .lancet {
    grid-row: auto;
    max-width: 22rem;
    margin: var(--s0) auto 0;
  }
  .light-numeral { font-size: clamp(8rem, 34vw, 13rem); opacity: 0.75; }
  .hero-name { font-size: clamp(3.6rem, 17vw, 6.5rem); }
}

/* ---------- poster mode (?og) — for social-card capture ---------- */

.poster * { transition: none !important; animation: none !important; }
.poster .mast, .poster .cue { display: none; }

/* ---------- motion sanity ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .inkin, .js .hero-name .lt {
    opacity: 1 !important;
    transform: none !important;
    font-variation-settings: 'wght' 460 !important;
    transition: none !important;
  }
  .js .cue svg { animation: none; }
  .lancet-frame { transform: none !important; }
}