/* ============================================================
   offyoga.app — built on the Ravenworks house chassis
   (venture-starter). The chassis is unchanged below the token block
   except where a comment says "OffYoga:"; the venture's own rules sit
   in their own section just above Motion.

   House chassis — the parts every Ravenworks site shares.
   Deep ground, drifting atmosphere, one orchestrated arrival.
   Restraint is the brief: atmosphere, never spectacle.

   Tune the tokens below and the rest follows. Everything past
   the token block should rarely need editing.
   ============================================================ */

/* OffYoga: self-hosted fonts (SIL Open Font License, latin subset), so
   the site makes no third-party requests — the extension's own promise.
   The CSP in web/vercel.json says the same: font-src 'self'. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Palette ----
     The studio's ink/bone/slate, shipped as a working default. This is
     the first block to make your own — a venture that looks identical to
     the studio reads as a subsidiary rather than a company. Keep the
     structure (ground / deep / foreground / dim / accent / muted) and
     swap the values; nothing below hardcodes a colour outside this block
     except the two rgba() atmosphere layers, which are keyed to slate. */
  /* OffYoga: the extension's own dark palette — a deep pine-green ground
     and the sage its popup uses in dark mode — so the site and the product
     read as one thing. The roundel keeps its original #8BAA55. */
  --ink:       #11150E; /* the ground */
  --ink-deep:  #0A0D08; /* the dark the edges fall into */
  --bone:      #EEF1EA; /* foreground text */
  --bone-dim:  #C3CBBA; /* supporting copy */
  --slate:     #9CCC6F; /* accent — eyebrow, rules, focus rings */
  --slate-dim: #7FAE55; /* a deeper accent */
  --muted:     #98A18F; /* footer */
  --leaf:      #8BAA55; /* the roundel's green, since 2018 */

  /* ---- The one warm light ----
     Warm light in the cold dark: the ground stays cool, and the warmth is
     only ever a small point of light falling on it, never a wash. Used by
     .lantern and .horizon below. If your venture is not a night scene,
     this is still the accent that keeps an all-cool palette from feeling
     clinical — change the hue, keep the restraint. */
  --moon:      #F5DCAE; /* OffYoga: a low dawn sun rather than a moon */

  /* ---- Type ----
     A serif for the wordmark and the one italic line that carries voice;
     a sans for everything that has to be read rather than felt. */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- The mark's size ----
     One number, shared by every page, so a mark in a footer stays in
     relation to the same mark in a hero at any viewport. */
  --mark: clamp(34px, min(7vw, 6.3svh), 62px);

  /* ---- Arrival ----
     The page-load sequence is driven by --i on each element (see .settle),
     so adding or reordering content never means editing a delay list. */
  --settle-lead: 0.15s;  /* stillness before anything moves */
  --settle-step: 0.16s;  /* between successive elements */
  --settle-dur:  1.1s;
  --settle-rise: 10px;
  --settle-ease: cubic-bezier(0.2, 0.65, 0.3, 1);

  /* OffYoga: the vertical rhythm lives here rather than on main, because
     this page carries sections below the hero and they share the unit. */
  --rhythm: clamp(0.55rem, min(calc(3.45svh - 0.55rem), 4vw), 1.6rem);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  padding: 0 1.5rem;
  position: relative;
  overflow-x: hidden;
  background-color: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A faint iridescent lift toward centre, then a vignette letting the edges
   fall away into the dark. OffYoga: this was body's background-image, but
   body is one window tall, so on a page longer than the window the gradient
   tiled and left a hard seam every screen-height. Pinned to the window here,
   it stays put while the page scrolls, like the fog and the lantern. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(120% 90% at 50% 38%, #18201A 0%, #11150E 60%, #0B0E09 100%),
    radial-gradient(100% 100% at 50% 46%, transparent 50%, rgba(0, 0, 0, 0.45) 100%);
}

/* ---- Atmosphere: drifting fog + a breath of film grain ----
   Two fixed, non-interactive layers behind everything. The fog is a
   handful of very low-opacity glows that never quite resolve; the grain
   keeps the gradients from banding and adds a little haze. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -25%;              /* overscan so the slow drift never shows an edge */
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(40% 34% at 20% 26%, rgba(132, 160, 118, 0.13), transparent 70%),
    radial-gradient(46% 40% at 82% 66%, rgba(96, 122, 88, 0.12), transparent 72%),
    radial-gradient(50% 44% at 60% 12%, rgba(74, 96, 70, 0.10), transparent 75%),
    radial-gradient(95% 52% at 50% 98%, rgba(120, 146, 108, 0.08), transparent 78%);
  mix-blend-mode: screen;
}

body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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.045;
  mix-blend-mode: overlay;
}

/* ============================================================
   The one warm light — a lantern and the lift it throws
   Fixed, non-interactive, z-index 0 (behind `main`, which is 1).

   This is the house's night-scene grammar reduced to the two parts that
   travel: a single small warm source, and a barely-there warm lift where
   it meets the bottom edge. Everything the studio site puts BETWEEN them
   — its treeline, its ground mist — is its own identity and deliberately
   not here. Delete both of these if your venture is not a dark page; keep
   --moon as the accent either way.
   ============================================================ */
.lantern,
.horizon {
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

/* A small, clean disc — just enough halo to sit in the dark, not a glow
   over the page. Resist growing it: the restraint is the whole effect. */
.lantern {
  right: max(9vw, 64px);
  top: clamp(58px, 14vh, 120px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FFF8E8 0%, var(--moon) 55%, #D9C69F 100%);
  box-shadow:
    0 0 4px 1px rgba(243, 228, 196, 0.4),
    0 0 14px 3px rgba(243, 228, 196, 0.12);
}

/* A barely-there warm lift at the foot of the page — grounds the bottom
   edge so the column does not simply stop in black. */
.horizon {
  left: 0;
  right: 0;
  bottom: 0;
  height: min(34vh, 340px);
  background: linear-gradient(
    to top,
    rgba(243, 228, 196, 0.022),
    rgba(243, 228, 196, 0.007) 44%,
    transparent
  );
}

/* Decoration is not content: it should never cost ink. */
@media print {
  .lantern, .horizon, html::before { display: none; }
}

/* On a narrow screen the centred column fills the width, so the light moves
   into the corner rather than sitting beside the mark. Decorative only — the
   hero column stays governed by --rhythm and --mark. */
@media (max-width: 640px) {
  .lantern { top: 26px; right: 26px; width: 18px; height: 18px; }
}

/* ============================================================
   Layout
   ============================================================ */

/* main centres itself rather than being centred by body: at min-height it
   has free space to centre into, and when the content is taller it simply
   grows. Centring from body pushes the top of the block past the scroll
   origin, which cuts the mark off the top of the window. */
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  min-height: 100svh;
  /* ---- the vertical rhythm, as a single unit ----
     Every gap is a multiple of --rhythm, so the whole column is tuned from
     one number. It tracks the shorter axis, and the -0.55rem term makes it
     tighten faster than proportionally as the screen gets short — a
     continuous version of a max-height breakpoint, so there is no jump to
     land on. */
  padding-block: calc(var(--rhythm) * 1.15) calc(var(--rhythm) * 1.35);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* A reading page (about, terms, a longer story) rather than a hero. */
.prose-main {
  max-width: 40rem;
  justify-content: flex-start;
  text-align: left;
}

/* ============================================================
   The mark
   ============================================================ */
.mark-wrap {
  position: relative;
  margin-bottom: calc(var(--rhythm) * 0.9);
  perspective: 620px; /* so the cursor-lean reads as depth, not a flat spin */
}

/* The faintest lift behind the mark so it isn't floating in pure void —
   a breath of light, not a halo. It was a halo once and read as a glow
   effect; at this alpha you notice the mark, not the light behind it. */
.mark-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(120px, min(24vw, 24svh), 190px);
  height: clamp(120px, min(24vw, 24svh), 190px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(156, 204, 111, 0.08), transparent 68%);
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}

.mark {
  display: block;
  width: var(--mark);
  height: auto;
  opacity: 0.98;
  transform-origin: 50% 50%;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.25, 1);
  will-change: transform;
}

/* A mark used as a link home — keeps a comfortable hit area as it scales. */
.mark-home {
  display: inline-block;
  line-height: 0;
  padding: 0.4rem;
}

.mark-home:focus-visible {
  outline: 1px solid rgba(156, 204, 111, 0.5);
  outline-offset: 4px;
  border-radius: 3px;
}

.mark--sm { width: clamp(28px, calc(var(--mark) * 0.65), 40px); }

/* ============================================================
   Type primitives
   ============================================================ */

/* ---- Eyebrow: the small line above the name ---- */
.eyebrow {
  margin: 0 0 var(--rhythm);
  font-family: var(--sans);
  font-size: clamp(0.62rem, 1.6vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  text-indent: 0.36em; /* offsets the trailing letter-space so it reads centred */
  color: var(--slate);
}

/* ---- Wordmark ---- */
.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, min(10.5vw, 7svh), 6rem);
  line-height: 0.95;
  letter-spacing: -0.018em;
  color: var(--bone);
}

/* A second word on its own line, in italic — keeps the lockup at every
   size rather than leaving the break to wrap luck. */
.wordmark .line-2 {
  display: block;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---- Body copy ---- */
.lede,
.body-copy {
  margin: var(--rhythm) auto 0;
  max-width: 30rem;
  font-family: var(--sans);
  font-size: clamp(0.92rem, 2.2vw, 1.06rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--bone-dim);
}

.body-copy {
  margin-top: calc(var(--rhythm) * 0.8);
  max-width: 31rem;
}

.prose-main .lede,
.prose-main .body-copy { margin-inline: 0; }

/* ---- The one line that carries voice ---- */
.invite {
  margin: calc(var(--rhythm) * 1.1) auto 0;
  max-width: 29rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.08rem, 2.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.003em;
  color: var(--bone);
}

/* ---- A row of short items, dot-separated ---- */
.inline-list {
  margin: calc(var(--rhythm) * 0.9) auto 0;
  padding: 0;
  max-width: 34rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em 0;
  font-family: var(--sans);
  font-size: clamp(0.64rem, 1.5vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.inline-list li { list-style: none; white-space: nowrap; }

.inline-list li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.85em;
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* ============================================================
   Links
   ============================================================ */

/* ---- The primary call: an email, a signup, one destination ---- */
.contact {
  margin: var(--rhythm) 0 0;
  font-family: var(--sans);
  font-size: clamp(0.9rem, 2.1vw, 1rem);
  letter-spacing: 0.02em;
}

.contact a {
  color: var(--bone);
  text-decoration: none;
  padding: 0.35em 0.1em;
  border-bottom: 1px solid rgba(156, 204, 111, 0.45);
  transition: border-color 0.35s ease, color 0.35s ease;
}

.contact a:hover { border-bottom-color: var(--slate); color: #FFFFFF; }

.contact a:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 4px;
  border-radius: 2px;
  border-bottom-color: transparent;
}

/* ---- A quiet link: half-hidden, lifts when found ---- */
.quiet-link {
  font-size: inherit;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--muted);
  opacity: 0.45;
  text-decoration: none;
  transition: opacity 0.5s ease, color 0.5s ease, letter-spacing 0.5s ease;
}

.quiet-link:hover,
.quiet-link:focus-visible {
  opacity: 1;
  color: var(--bone-dim);
  letter-spacing: 0.22em;
}

.quiet-link:focus-visible {
  outline: 1px solid rgba(156, 204, 111, 0.5);
  outline-offset: 6px;
  border-radius: 2px;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  margin: calc(var(--rhythm) * 1.4) 0 0;
  font-family: var(--sans);
  font-size: clamp(0.66rem, 1.7vw, 0.74rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--rhythm) * 0.45);
}

/* ============================================================
   OffYoga — the venture's own rules. Everything above is the
   chassis; everything here is this page: the extension in the
   hero, and the chapters below it.
   ============================================================ */

/* Fraunces ships italic at 400 only; ask for what is loaded rather than
   let the browser fake a bold italic. */
.wordmark .line-2,
.invite { font-weight: 400; }

.wordmark {
  font-size: clamp(2.6rem, min(9vw, 8svh), 5.2rem);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}

.wordmark .line-2 { color: var(--slate); }

/* short centred copy breaks evenly rather than leaving one word behind */
.lede,
.body-copy,
.invite,
.steps p,
.timeline p { text-wrap: pretty; }

/* ---- Hero: the copy and the extension, side by side where there is room ---- */
main.hero { max-width: 64rem; } /* same edges as the chapters below */

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta {
  margin-top: calc(var(--rhythm) * 1.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--rhythm) * 0.6);
}

.button {
  display: inline-block;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  background: var(--slate);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.button:hover { background: #B3D98D; }

.button:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 4px;
}

.soon {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.extension {
  margin: calc(var(--rhythm) * 2.2) 0 0;
  width: 100%;
  max-width: 30rem;
}

@media (min-width: 960px) {
  main.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-content: center;
    align-items: center;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    text-align: left;
  }

  .hero-copy { align-items: flex-start; }
  .hero .eyebrow { text-indent: 0; }
  .hero .lede { margin-inline: 0; }
  .hero .inline-list { justify-content: flex-start; margin-inline: 0; }
  .hero .cta { align-items: flex-start; }
  .extension { margin: 0; max-width: none; }
}

/* ---- The extension, drawn: a browser window with the popup open ----
   The popup mirrors the real one (brand row, today's label, title,
   duration, play, progress) in the extension's light theme, so it reads
   as a screenshot against the dark page. */
.browser {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #E9ECE4;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(238, 241, 234, 0.08);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  background: #232A1F;
}

.browser-dots { display: flex; gap: 0.4rem; }

.browser-dots i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: rgba(238, 241, 234, 0.22);
}

.browser-address {
  flex: 1;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(238, 241, 234, 0.08);
}

.browser-icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 6px;
  background: rgba(238, 241, 234, 0.14);
}

.browser-icon svg { width: 1.15rem; height: 1.15rem; }

.browser-page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 19rem;
  padding: 2.2rem 2rem 2.4rem;
}

.doc-line {
  display: block;
  width: 62%;
  height: 0.55rem;
  border-radius: 4px;
  background: #D4D9CC;
}

.doc-line--title {
  width: 44%;
  height: 1rem;
  margin-bottom: 0.6rem;
  background: #C3CAB9;
}

.doc-line--short { width: 38%; }

.popup {
  position: absolute;
  top: 3.55rem;
  right: 0.7rem;
  width: min(15.5rem, 64%);
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 10px;
  background: #FFFFFF;
  color: #1A1F16;
  font-family: var(--sans);
  text-align: left;
  box-shadow:
    0 18px 40px -12px rgba(10, 14, 8, 0.45),
    0 0 0 1px rgba(26, 31, 22, 0.06);
}

/* the caret up to the toolbar icon */
.popup::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 0.95rem;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  transform: rotate(45deg);
}

.popup-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.popup-brand svg { width: 1.1rem; height: 1.1rem; }

.popup-eyebrow {
  margin: 0.9rem 0 0;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5B6455;
}

.popup-title {
  margin: 0.3rem 0 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.15;
}

.popup-duration {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #5B6455;
}

.popup-play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.6rem 0;
  border-radius: 999px;
  background: #4D7A2F;
  color: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 500;
}

.popup-play-icon {
  width: 0;
  height: 0;
  border-left: 0.5rem solid #FFFFFF;
  border-top: 0.32rem solid transparent;
  border-bottom: 0.32rem solid transparent;
}

.popup-progress {
  display: block;
  height: 4px;
  margin-top: 0.85rem;
  overflow: hidden;
  border-radius: 999px;
  background: #E6E9E2;
}

.popup-progress span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: #4D7A2F;
}

/* ---- Chapters below the hero ---- */
.chapter {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
  padding: calc(var(--rhythm) * 4) 0;
  border-top: 1px solid rgba(238, 241, 234, 0.08);
  text-align: center;
}

.chapter .eyebrow { margin-bottom: calc(var(--rhythm) * 1.3); }

.chapter-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bone);
  font-variation-settings: "opsz" 144;
}

.chapter-title .line-2 {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--slate);
}

.steps,
.timeline {
  list-style: none;
  padding: 0;
  display: grid;
  gap: calc(var(--rhythm) * 2) clamp(1.5rem, 4vw, 3rem);
}

.steps {
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.steps p,
.timeline p {
  margin: calc(var(--rhythm) * 0.5) auto 0;
  max-width: 18rem;
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--bone-dim);
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--leaf);
  border-radius: 50%;
  font-family: var(--serif);
  color: var(--slate);
}

.step-title {
  margin: calc(var(--rhythm) * 0.7) 0 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--bone);
}

/* each era sits under a short rule in the roundel's green */
.timeline {
  margin: calc(var(--rhythm) * 2.6) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  text-align: left;
}

.timeline li {
  padding-top: var(--rhythm);
  border-top: 1px solid var(--leaf);
}

.timeline p { margin-inline: 0; max-width: none; }

.timeline .timeline-when {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}

.facts {
  list-style: none;
  margin: calc(var(--rhythm) * 3) auto 0;
  padding: 0;
  max-width: 40rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 4vw, 3rem);
}

.facts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.fact-figure {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--bone);
  font-variation-settings: "opsz" 144;
}

.fact-label {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.chapter .invite {
  margin-top: 0;
  max-width: 36rem;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
}

.chapter--contact { padding-bottom: calc(var(--rhythm) * 3); }
.chapter--contact .body-copy { margin-top: var(--rhythm); }
.chapter--contact .footer { margin-top: calc(var(--rhythm) * 3.5); }

/* The Ravenworks line, said plainly the way the other ventures' footers say
   it ("A Ravenworks Ventures company") rather than half-hidden like the
   chassis's quiet-link. */
.footer-venture {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(152, 161, 143, 0.35);
  transition: color 0.35s ease, border-color 0.35s ease;
}

.footer-venture:hover { color: var(--bone-dim); border-bottom-color: var(--slate); }

.footer-venture:focus-visible {
  outline: 1px solid rgba(156, 204, 111, 0.5);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- The privacy page: the chassis's prose-main, read top to bottom ---- */
.privacy { align-items: stretch; }
.privacy .mark-home { align-self: flex-start; margin: 0 0 var(--rhythm) -0.4rem; }
.privacy .eyebrow { text-indent: 0; }
.privacy .chapter-title { margin-bottom: 0; }
.privacy h2.eyebrow { margin: calc(var(--rhythm) * 2.2) 0 0; }
.privacy .lede,
.privacy .body-copy { max-width: none; }
.privacy .contact { margin: calc(var(--rhythm) * 0.8) 0 0; }
.privacy .footer { align-items: flex-start; margin-top: calc(var(--rhythm) * 3.5); }

/* ============================================================
   Motion — all opt-in, all slow. Nothing here is load-blocking, and
   everything reads as complete with motion disabled.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* One orchestrated arrival. Order comes from --i on the element:

       <p class="eyebrow settle" style="--i: 1">

     so content can be added or reordered without touching this file.
     Leave --i off and the element arrives first. */
  .settle {
    opacity: 0;
    transform: translateY(var(--settle-rise));
    animation: settle var(--settle-dur) var(--settle-ease) forwards;
    animation-delay: calc(var(--settle-lead) + var(--i, 0) * var(--settle-step));
  }

  /* Arrival order. These carry --i rather than an inline style attribute,
     so the site needs no 'unsafe-inline' in its style-src. Skipping a
     number is how you hold a breath before the next line lands. */
  .i0  { --i: 0 }  .i1  { --i: 1 }  .i2  { --i: 2 }  .i3  { --i: 3 }  .i4  { --i: 4 }
  .i5  { --i: 5 }  .i6  { --i: 6 }  .i7  { --i: 7 }  .i8  { --i: 8 }
  .i9  { --i: 9 }  .i10 { --i: 10 } .i11 { --i: 11 } .i12 { --i: 12 }

  /* The mark leads, and rises a little less than the copy behind it. */
  .mark-wrap.settle { --settle-rise: 6px; }

  @keyframes settle {
    to { opacity: 1; transform: translateY(0); }
  }

  /* The fog breathes and drifts — very slow, barely there. */
  body::before {
    animation: drift 46s ease-in-out infinite alternate;
  }

  @keyframes drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
    100% { transform: translate3d(3%, 2%, 0) scale(1.12); }
  }

  /* The halo behind the mark breathes, as if it is catching a slow light. */
  .mark-wrap::before {
    animation: breathe 10s ease-in-out infinite;
  }

  @keyframes breathe {
    0%, 100% { opacity: 0.5;  transform: translate(-50%, -50%) scale(0.98); }
    50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.03); }
  }

  /* One authored moment: the lantern kindles as the page settles. */
  .lantern {
    opacity: 0;
    animation: kindle 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  }

  @keyframes kindle { to { opacity: 1; } }

  /* The mark's facets resolve into being as it settles. Give each shape in
     the mark class="facet" and they arrive in DOM order; a mark with no
     facets simply skips this. */
  .mark-wrap.settle .facet {
    opacity: 0;
    animation: facetIn 0.6s cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
  }
  .mark-wrap.settle .facet:nth-child(1) { animation-delay: 1.05s; }
  .mark-wrap.settle .facet:nth-child(2) { animation-delay: 1.13s; }
  .mark-wrap.settle .facet:nth-child(3) { animation-delay: 1.21s; }
  .mark-wrap.settle .facet:nth-child(4) { animation-delay: 1.29s; }
  .mark-wrap.settle .facet:nth-child(5) { animation-delay: 1.37s; }
  .mark-wrap.settle .facet:nth-child(6) { animation-delay: 1.45s; }
  .mark-wrap.settle .facet:nth-child(7) { animation-delay: 1.53s; }
  .mark-wrap.settle .facet:nth-child(8) { animation-delay: 1.61s; }

  @keyframes facetIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}