/* Order of the Bildung — rough mockup stylesheet
   The forest is the entrance. The article is the journey. */

:root {
  /* blue hour */
  --indigo-950: #05081a;
  --indigo-900: #080d24;
  --indigo-800: #0b1430;
  --indigo-700: #121d45;
  --periwinkle: #6f7fc4;
  --mist: #9aa6d8;
  --violet: #2a1f4d;
  --night: #08061a;     /* blue-violet, almost black */
  --forest: #061410;
  /* warmth from the windows */
  --amber: #f2a74b;
  --gold: #c9a45c;
  --gold-dim: #8f7340;
  --ember: #ff8a3d;
  /* text */
  --cream: #f3e9d2;
  --cream-2: #cfc4a9;   /* tinted secondary, not gray */
  --cream-3: #a39a86;
  --ink: #000;

  --serif: "Newsreader", Georgia, serif;
  --display: "Cormorant Garamond", Garamond, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --measure: 66ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--indigo-900);
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "onum";
}
::selection { background: var(--gold); color: var(--indigo-950); }
a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--gold-dim); }
a:hover { color: var(--amber); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
img, video { max-width: 100%; height: auto; display: block; }

/* ============ THE FOREST: entrance ============ */
.entrance {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  background: linear-gradient(to bottom, #050a1c 0%, #0b1538 60%, var(--indigo-800) 100%);
  color: var(--cream);
}
/* forest header: sticky, zero height, drawn over both columns */
.hero-forest { position: sticky; top: 0; grid-column: 1 / -1; height: 0; z-index: 4; pointer-events: none; }
/* header shade: night falls from the top and fades out over 35px, on a slight
   tilt so it sits lower on the left. Stops are measured along the tilt. */
.hero-shade { position: absolute; top: 0; left: 0; width: 100%; height: 130px; background: linear-gradient(178.5deg, var(--night) 0 90px, transparent 125px); }
.hero-mark { position: absolute; top: clamp(.9rem, 2.4svh, 1.4rem); left: var(--gutter); pointer-events: auto; color: var(--gold); display: flex; align-items: center; gap: 1.1rem; }
.hero-mark { text-decoration: none; }
.hero-mark img { width: 48px; height: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.hero-mark-note { font: 500 .74rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-2); }
/* membership: always one tap away at the top. A hairline cream outline in the
   dark; hover or tap fills it cream with blue text. */
.join-top {
  position: absolute; top: calc(clamp(.9rem, 2.4svh, 1.4rem) + 14px); right: var(--gutter); pointer-events: auto;
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 1.7rem; border-radius: 10px;
  font: 500 .66rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--cream); border: 1px solid rgba(243,233,210,.85);
  background: linear-gradient(to bottom, rgba(243,233,210,.12), rgba(243,233,210,.02));
  transition: background-color .25s, color .25s, border-color .25s;
}
.join-top:hover, .join-top:active, .join-top:focus-visible {
  color: var(--indigo-800); border-color: #fff; background: linear-gradient(to bottom, #fff, var(--cream));
}
/* the outline is short, but the tap area stays a full 44px tall */
.join-top::after { content: ""; position: absolute; inset: -4px 0; }
/* narrow phones: tighten the name and the button so they sit side by side */
@media (max-width: 480px) {
  .hero-mark { gap: .8rem; }
  .hero-mark-note { font-size: .68rem; letter-spacing: .12em; }
  .join-top { padding: 0 1.1rem; letter-spacing: .1em; }
}
@media (max-width: 380px) {
  .join-top { padding: 0 .8rem; }
}

/* the stage: sticky picture */
.stage { position: sticky; top: 0; height: 100svh; grid-column: 1; z-index: 1; }
.hero-frame { position: absolute; inset: 0; overflow: hidden; background: var(--indigo-950); }
.hero-still, .hero-canvas, .hero-lab { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 60%; }
.hero-canvas { opacity: 0; transition: opacity .4s; }
.hero-canvas.is-live { opacity: 1; }
.hero-lab { opacity: 0; object-position: 50% 45%; transform-origin: 50% 50%; will-change: opacity, scale; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(to right, transparent 70%, rgba(11,21,56,.65)), linear-gradient(to bottom, rgba(5,8,26,.35), transparent 25%, transparent 80%, rgba(5,8,26,.4)); }

/* the words: scroll past the picture */
.steps { grid-column: 2; position: relative; z-index: 2; }
.step { min-height: 100svh; display: grid; align-content: center; padding: clamp(5rem, 16svh, 9rem) clamp(1.5rem, 6vw, 6rem); max-width: 40rem; }
.step p { margin: 0 0 1rem; color: var(--cream-2); text-wrap: pretty; }
.step-lede { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.4rem); line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
.step-journey { font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cream-2); }
.hero-title { margin: 0 0 1.4rem; font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 4.2vw, 5rem); line-height: .96; letter-spacing: .14em; text-transform: uppercase; display: grid; gap: .08em; }
.hero-title .hero-of { font-weight: 600; font-size: .34em; letter-spacing: .5em; font-style: italic; text-transform: lowercase; color: var(--mist); padding-left: .2em; }
.hero-dek { font-style: italic; font-size: 1.12em; max-width: 34ch; }
.step-cue { font: 500 .66rem/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--amber); margin-top: 1.5rem; }
.hero-enter { display: inline-grid; justify-items: start; gap: .5rem; text-decoration: none; color: var(--amber); font: 500 .68rem/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; margin-top: .5rem; }
.hero-enter i { width: 1px; height: 2.4rem; background: linear-gradient(var(--amber), transparent); justify-self: center; }
@media (prefers-reduced-motion: no-preference) { .hero-enter i { animation: drip 2.4s cubic-bezier(.2,.7,.2,1) infinite; } }
@keyframes drip { 0% { transform: scaleY(.2); transform-origin: top; opacity: 0 } 40% { opacity: 1 } 100% { transform: scaleY(1); opacity: 0 } }

/* scroll-driven: each step arrives from an already-visible default */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .step > * { animation: step-in linear both; animation-timeline: view(); animation-range: entry 10% entry 45%; }
  }
}
@keyframes step-in { from { opacity: .15; translate: 0 1.2rem; filter: blur(2px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-canvas { display: none; }
  .hero-lab { display: none; }
}
/* phones: picture on top, words beneath */
@media (max-width: 800px) {
  .entrance { grid-template-columns: 1fr; }
  .stage { grid-column: 1; height: 56svh; }
  .steps { grid-column: 1; }
  .step { min-height: 72svh; padding: 2.5rem var(--gutter) 3rem; }
  /* the words scroll over the picture here; keep them legible on bright frames */
  .step p, .step .hero-title { text-shadow: 0 1px 2px rgba(5,8,26,.9), 0 0 18px rgba(5,8,26,.85); }
  .hero-scrim { background: linear-gradient(to bottom, rgba(5,8,26,.35), transparent 25%, transparent 70%, var(--indigo-800)); }
  .hero-title { letter-spacing: .1em; }
}

/* ============ THE WORKSHOP: interior ============ */
.interior {
  position: relative; z-index: 2;
  background:
    radial-gradient(60vw 60vh at -10% 20%, rgba(6,20,16,.9), transparent 60%),
    radial-gradient(50vw 70vh at 110% 60%, rgba(6,20,16,.85), transparent 60%),
    radial-gradient(40vw 30vh at 50% 0%, rgba(42,31,77,.5), transparent 70%),
    var(--indigo-800);
}
.interior::before, .interior::after {
  /* forest silhouettes at the edges */
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 9vw, 9rem); pointer-events: none;
  background: linear-gradient(to right, rgba(3,10,8,.85), transparent);
}
.interior::after { right: 0; left: auto; background: linear-gradient(to left, rgba(3,10,8,.85), transparent); }
.interior::before { left: 0; }

/* chapters nav */
.chapters {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in oklab, var(--indigo-900) 80%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,164,92,.22);
}
.chapters-track {
  display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; padding: .8rem var(--gutter);
  white-space: nowrap; mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
}
.chapters-track::-webkit-scrollbar { display: none; }
.chapters a { font: 500 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-3); text-decoration: none; padding-block: .2rem; border-bottom: 1px solid transparent; }
.chapters a:hover { color: var(--cream); }
.chapters a.is-current { color: var(--amber); border-bottom-color: var(--amber); }

/* article */
.article { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; padding: clamp(3rem, 8vw, 6rem) 0 6rem; }
.article-head { text-align: center; margin-bottom: clamp(3rem, 7vw, 5rem); }
.article-title {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.4rem); line-height: 1.08;
  margin: 0 0 1.2rem; text-wrap: balance;
}
.standfirst { font-style: italic; font-size: 1.1em; color: var(--cream-2); margin: 0 auto; max-width: 48ch; text-wrap: pretty; }
.article-head .standfirst { margin-inline: auto; }  /* beats .article p's margin */
.article-by { margin: 1.6rem 0 0; font: 500 .66rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.article-by::before, .article-by::after { content: "·"; margin-inline: .8em; color: var(--gold-dim); }

.article h2 {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); line-height: 1.12;
  margin: clamp(3.5rem, 8vw, 5.5rem) 0 1.1rem; text-wrap: balance; position: relative; padding-top: 1.6rem;
}
.article h2::before {
  /* gold divider */
  content: ""; position: absolute; top: 0; left: 0; width: 3.5rem; height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
}
.article p { margin: 0 0 1.25em; text-wrap: pretty; }
.article strong { font-weight: 500; color: #fff; }

/* data table */
.data { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95em; }
.data th, .data td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid rgba(201,164,92,.22); }
.data th { font: 500 .66rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-3); }
.data .num, .data th:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* figures */
figure { margin: 2.25rem 0; }
figcaption { font: 400 .78rem/1.5 var(--mono); color: var(--cream-3); margin-top: .7rem; letter-spacing: .02em; }
.art img { border: 1px solid rgba(201,164,92,.25); box-shadow: 0 18px 50px -20px rgba(0,0,0,.8); }
.art .expand { display: block; cursor: zoom-in; }
.art-portrait { width: min(100%, 26rem); margin-inline: auto; }
.art-chapter { margin: 1.4rem calc(-1 * clamp(0rem, 5vw, 6rem)) 2.2rem; }
@media (max-width: 800px) { .art-chapter { margin-inline: 0; } }

.placeholder .ph-frame {
  aspect-ratio: 16 / 9; display: grid; place-content: center; gap: .5rem; text-align: center; padding: 1.5rem;
  border: 1px dashed rgba(201,164,92,.45);
  background: repeating-linear-gradient(135deg, rgba(201,164,92,.05) 0 10px, transparent 10px 20px), rgba(5,8,26,.5);
}
.placeholder-video .ph-frame { aspect-ratio: 16 / 9; }
.ph-kind { font: 500 .62rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); }
.ph-label { font-style: italic; color: var(--cream-2); max-width: 36ch; }

/* redaction: archival blackout. The text is not there; this is a mark. */
.redact {
  display: inline-block; vertical-align: -.12em; height: .95em; min-width: 7ch; background: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(201,164,92,.28), 0 0 0 1px rgba(0,0,0,.6);
  border-radius: 1px; margin-inline: .1em; position: relative; top: .05em;
}
.redact-w { display: inline-block; width: calc(5ch + 6ch * .7); }
.redact-block {
  display: block; height: auto; min-height: 3.2em; margin: .6rem 0 1.4rem; padding: .9rem 1rem;
  background: repeating-linear-gradient(0deg, #000 0 .9em, #0a0a0a .9em 1.1em), #000;
}
.redact-note { font: 500 .62rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); }

/* gambler's ruin */
.ruin { border: 1px solid rgba(201,164,92,.25); padding: 1.4rem; background: rgba(5,8,26,.45); }
.ruin-title { font-family: var(--serif); font-style: italic; color: var(--cream-2); font-size: 1em; margin: 0 0 1.1rem; }
.ruin-row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto; gap: .9rem; align-items: center; margin-bottom: .7rem; }
.ruin-label { font: 400 .8rem/1.3 var(--mono); color: var(--cream-2); }
.ruin-track { height: 10px; background: rgba(255,255,255,.06); position: relative; }
.ruin-fill { position: absolute; inset: 0 auto 0 0; width: max(2px, calc(var(--v) * 100%)); background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.ruin-val { font: 500 .85rem/1 var(--mono); color: var(--amber); font-variant-numeric: tabular-nums; }
.ruin-math summary { cursor: pointer; font: 500 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: .8rem; }
.ruin-math p { font-size: .92em; color: var(--cream-2); margin-top: .9rem; }
.formula { font-family: var(--mono); font-size: .9em; color: var(--cream); padding: .6rem .8rem; border-left: 1px solid var(--gold-dim); }
@media (max-width: 520px) { .ruin-row { grid-template-columns: 1fr auto; } .ruin-track { grid-column: 1 / -1; } }

/* read-more aside */
.readmore { display: grid; gap: .25rem; padding: 1rem 1.2rem; margin: 1.8rem 0; border: 1px solid rgba(201,164,92,.25); border-left-width: 1px; background: rgba(5,8,26,.4); }
.readmore-k { font: 500 .62rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-3); }
.readmore a { font-family: var(--display); font-weight: 600; font-size: 1.25em; line-height: 1.2; text-decoration: none; }
.readmore-src { font: 400 .78rem/1.4 var(--mono); color: var(--cream-3); }

/* disciplines schematic (rough) */
.disciplines { margin: 2.5rem calc(-1 * clamp(0rem, 6vw, 10rem)); border: 1px solid rgba(201,164,92,.25); padding: 1.6rem; background: rgba(5,8,26,.5); }
.disc-hub { display: flex; justify-content: space-between; align-items: baseline; font: 500 .66rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding-bottom: 1rem; border-bottom: 1px solid rgba(201,164,92,.25); margin-bottom: 1.2rem; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1.2rem 1.6rem; }
.disc-group h4 { margin: 0 0 .5rem; font: 500 .62rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.disc-group ul { list-style: none; margin: 0; padding: 0; }
.disc-group li { font-size: .9em; line-height: 1.4; color: var(--cream-2); padding: .22rem 0 .22rem .9rem; position: relative; }
.disc-group li::before { content: ""; position: absolute; left: 0; top: .85em; width: .45rem; height: 1px; background: var(--gold-dim); }
.disc-group li:first-child::before { background: var(--gold); }

/* resources */
.resources { list-style: none; margin: 1.5rem 0 2rem; padding: 0; border-top: 1px solid rgba(201,164,92,.22); }
.resources li { display: grid; gap: .15rem; padding: .9rem 0; border-bottom: 1px solid rgba(201,164,92,.16); }
.resources a, .res-name { font-family: var(--display); font-weight: 600; font-size: 1.15em; text-decoration: none; color: var(--cream); }
.resources a:hover { color: var(--amber); }
.res-what { font: 500 .66rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.res-note { font-size: .92em; color: var(--cream-2); }

/* join CTA: the golden door */
.portal { margin: 3.5rem 0 1rem; text-align: center; }
.portal-door {
  display: inline-flex; align-items: center; gap: 1rem; padding: 1.1rem 1.6rem; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--indigo-950);
  background: radial-gradient(120% 100% at 50% 100%, #ffd98a, var(--amber) 55%, #d9822f);
  border-radius: 2.5rem 2.5rem .4rem .4rem;
  box-shadow: 0 0 40px 6px rgba(242,167,75,.22), 0 18px 50px -14px rgba(242,167,75,.5);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.portal-door:hover { transform: translateY(-2px); box-shadow: 0 0 60px 10px rgba(242,167,75,.3), 0 24px 60px -14px rgba(242,167,75,.6); color: var(--indigo-950); }
.portal-arrow { font-family: var(--serif); }
.portal-note { font: 400 .8rem/1.5 var(--mono); color: var(--cream-3); margin: 1rem 0 0; }

.article-foot { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgba(201,164,92,.22); }
.dm { font-style: italic; color: var(--cream-2); }
.lockup { width: min(100%, 18rem); height: auto; margin: 3rem auto 1.5rem; display: block; opacity: .9; }
.colophon { text-align: center; font: 400 .72rem/1.6 var(--mono); color: var(--cream-3); }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.lightbox::backdrop { background: rgba(5,8,26,.92); backdrop-filter: blur(6px); }
.lightbox img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; border: 1px solid rgba(201,164,92,.3); }
.lightbox-close { position: fixed; top: 1rem; right: 1rem; background: none; border: 1px solid var(--gold-dim); color: var(--cream); width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.3rem; cursor: pointer; }

/* scrollbar belongs to the world */
@supports (scrollbar-color: red blue) { html { scrollbar-color: var(--gold-dim) var(--indigo-950); scrollbar-width: thin; } }

/* join page */
.join-page { min-height: 100svh; }
.join-home { display: inline-flex; align-items: center; gap: 1.1rem; padding: clamp(.9rem, 2.4svh, 1.4rem) var(--gutter) 0; text-decoration: none; position: relative; z-index: 1; }
.join-home img { width: 48px; height: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }

/* the four ways to join: two plans, each renewing or pay-once */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; margin: 0 0 3rem; }
.plan { display: grid; justify-items: center; align-content: start; gap: .7rem; text-align: center; padding: 1.8rem 1.2rem 1.6rem; border: 1px solid rgba(201,164,92,.3); background: rgba(5,8,26,.45); }
.plan .plan-term { margin: 0; font: 500 .7rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.plan .plan-price { margin: .1rem 0 .5rem; font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 1; color: var(--cream); }
.plan-price span { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: .38em; color: var(--cream-2); }
.plan .portal-door { font-size: 1.2rem; padding: .85rem 1.4rem; gap: .8rem; }
.plan .plan-note { margin: 0; font: 400 .74rem/1.4 var(--mono); color: var(--cream-3); }
.plan-once {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: .4rem; padding: 0 1.2rem; border-radius: 2rem;
  border: 1px solid var(--gold-dim); font: 500 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); text-decoration: none;
}
.plan-once:hover { border-color: var(--amber); color: var(--amber); }
.article .plans-note { margin: -1.8rem 0 3rem; text-align: center; font: 400 .78rem/1.5 var(--mono); color: var(--cream-3); }

/* terms, refunds and privacy */
.policy ul { margin: 0 0 1.25em; padding-left: 1.2rem; }
.policy li { margin-bottom: .5em; }
.policy li::marker { color: var(--gold); }

@media (max-width: 640px) {
  .disciplines { margin-inline: 0; padding: 1.1rem; }
  .readmore, .ruin { padding: 1rem; }
}