/* ============================================================
   Curious Life — Develop Your Awareness
   Unlisted signup page (/awareness)

   Brand system shared with the homepage (styles-v3.css):
   Gentium Plus + Figtree (Work Sans and Hanken Grotesk both break the R's
   leg-junction at display sizes; Figtree is round with a textbook R),
   cream/gold, light only.
   ============================================================ */

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

:root {
  color-scheme: light;
  --bg: #fefdfb;
  --fg: #2c2420;
  --muted: #6b5d54;
  --accent: #c4a24e;
  --accent-hover: #a8863a;
  --border: #e7e1d6;
  --card-bg: #f6f2ea;
  --nav-bg: rgba(254, 253, 251, 0.9);
  --btn-primary-bg: #c4c4c4;
  --btn-primary-fg: #2c2420;
  --error: #b3503e;

  /* Hero seal — the mark rendered as a tint, with a clear circular window */
  --seal-tint: rgba(196, 162, 78, 0.13);
  --seal-ring: rgba(196, 162, 78, 0.30);
  --seal-halo: rgba(196, 162, 78, 0.10);
  --seal-wing-tint: rgba(196, 162, 78, 0.085);   /* the echoes, lighter than the seal */

  /* Geometry of curious-life-mark-gold.svg (465×465 viewBox).
     Inner square: 77.4663 → 387.533, so the inscribed circle is
     310.067/465 = 66.68% of the mark's width, dead centre. */
  --circle-ratio: 66.68%;

  /* the practice colour coding — worn by the three cards and the calendar */
  --p1: #ff9a6c;   /* physical — sunrise coral  */
  --p2: #57c7e3;   /* mental   — crystal aqua   */
  --p3: #a78be0;   /* journal  — morning violet */

  --measure: 640px;
  --container: 1080px;
  --rail: 190px;
}



html { scroll-behavior: smooth; }

body {
  /* our canvases resize and repaint; never let the browser's scroll
     anchoring "correct" the scroll position because of them */
  overflow-anchor: none;
  /* the page is not copyable: no selection, no long-press callout */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-family: 'Gentium Plus', Georgia, serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  overflow-x: hidden;          /* the seal bleeds past the viewport on narrow screens */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* form fields must stay editable and selectable */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll reveal. Only active under html.js, so no-JS renders everything. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- NAV ---------- */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1.1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 20px;
  width: auto;
  display: block;
}

.nav-cta {
  font-family: 'Figtree', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg);
  text-decoration: none;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: border-color 0.2s, color 0.2s;
}

.nav-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- PAGE ---------- */
.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

[id] { scroll-margin-top: 92px; }

/* ============================================================
   HERO — the seal
   ============================================================ */

.hero {
  position: relative;
  /* Plain vh — the LARGE viewport on iOS, and static. dvh resized every
     full-screen section at once whenever the URL bar collapsed mid-scroll,
     shifting all content under the finger: scroll appeared to reverse for a
     beat at section transitions. vh never resizes during scroll; the cost
     (a sliver under the toolbar until it retracts) is the standard trade. */
  min-height: 100vh;
  /* the hero sits outside .page, so it is already full width — the seal is
     clipped at the screen edges, not at the page gutter */
  overflow: hidden;
}

/* Square box the size of the whole mark. The copy lives in its inner circle.
   88vmin keeps the *whole* seal on screen — a square mark can't be both
   edge-to-edge and uncropped on a landscape viewport, and the complete mark
   reads far better. The seal-rules carry the composition to the screen edges.

   Centred absolutely, not by grid alignment: on phones the seal is deliberately
   wider than the viewport, and Chromium clamps an overflowing centred grid item
   back to `start`, which threw the whole composition off to one side. */
.hero-seal {
  --seal: 100vmin;               /* always fills the viewport height */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--seal);
  height: var(--seal);
  display: grid;
  place-items: center;
  /* pack the rows together and centre them as a group — without this the
     implicit auto rows stretch apart and leave a hole between copy and CTA */
  align-content: center;
  container-type: inline-size;   /* 1cqw = 1% of the seal — type scales with the mark */
}

.seal-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The mark itself, as a mask over a flat tint so it can follow the theme. */
.seal-mark {
  position: absolute;
  inset: 0;
  background: var(--seal-tint);
  -webkit-mask: url(../curious-life-mark-gold.svg) center / contain no-repeat;
  mask: url(../curious-life-mark-gold.svg) center / contain no-repeat;
}

/* Crisp hairline on the negative-space circle */
.seal-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--circle-ratio);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid var(--seal-ring);
  border-radius: 50%;
}

/* The window reads as a pool of clean light, not a tinted disc: the page
   colour is pushed back up inside the circle, fading out at its edge. */
.seal-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--circle-ratio) + 6%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              var(--bg) 0%,
              var(--bg) 58%,
              transparent 76%);
}

/* ---- emanating wings ----
   Rather than leave the space either side of the seal blank, the mark tiles
   outward from it at the same scale and fades toward the screen edge. Two mask
   layers — the artwork and a fade — combined with mask-composite, so the tint
   itself is what dissolves. Mask-position aligns a tile edge with the seal, so
   the repeat continues the mark seamlessly rather than starting mid-figure. */
.seal-wing {
  position: absolute;
  top: 0;
  height: 100%;
  width: max(0px, calc(50vw - var(--seal) / 2));
  background: var(--seal-wing-tint);
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: var(--seal) var(--seal), 100% 100%;
  mask-size: var(--seal) var(--seal), 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}

.seal-wing--left {
  right: 100%;
  -webkit-mask-image: url(../curious-life-mark-gold.svg),
                      linear-gradient(to right, transparent, #000 88%);
  mask-image: url(../curious-life-mark-gold.svg),
              linear-gradient(to right, transparent, #000 88%);
  -webkit-mask-position: right center, center;
  mask-position: right center, center;
}

.seal-wing--right {
  left: 100%;
  -webkit-mask-image: url(../curious-life-mark-gold.svg),
                      linear-gradient(to left, transparent, #000 88%);
  mask-image: url(../curious-life-mark-gold.svg),
              linear-gradient(to left, transparent, #000 88%);
  -webkit-mask-position: left center, center;
  mask-position: left center, center;
}

.seal-content {
  position: relative;
  z-index: 1;
  /* 48% of the mark ≈ 72% of the circle's diameter — inside the inscribed square */
  width: min(48%, 82vw);
  text-align: center;
}

.eyebrow {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(0.62rem, 1.3cqw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1em;
}

.hero h1 {
  font-size: clamp(1.85rem, 4.8cqw, 3.2rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 0.5em;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.lede {
  font-family: 'Figtree', sans-serif;
}

/* the lede always breaks before its second phrase */
.lede .lede-b { display: block; }

.lede {
  font-size: clamp(0.9rem, 1.8cqw, 1.15rem);
  line-height: 1.5;
  color: var(--fg);
  margin-bottom: 1.4em;
}

.hero-body {
  font-family: 'Gentium Plus', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.92rem, 1.85cqw, 1.15rem);
  line-height: 1.45;
  color: var(--muted);
  margin: 1.1em auto 0;
}

/* ---------- BUTTONS ---------- */
.cta-bar {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2em;
}

/* The clear channel below the circle: the mark's outer arc (r = 50% of the
   seal) leaves a lens of open space at bottom centre, ~60% of the seal wide
   at this height. left/right rather than translateX so .reveal can animate. */
.hero .cta-bar {
  position: absolute;
  top: 85%;
  left: 0;
  right: 0;
  margin-top: 0;
  z-index: 2;
}

.btn {
  display: inline-block;
  font-family: 'Figtree', sans-serif;
  font-size: clamp(0.78rem, 1.5cqw, 0.9rem);
  font-weight: 400;
  text-decoration: none;
  color: var(--fg);
  padding: 0.62em 1.5em;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Gold rather than the homepage's grey — this page exists to convert. */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #2c2420;
  font-weight: 500;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fefdfb;
}


/* ---------- SCROLL CUE ---------- */
.scroll-cue {
  position: absolute;
  bottom: clamp(18px, 3.5vh, 34px);
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 38px;
  display: grid;
  place-items: start center;
  padding-top: 8px;
  border: 1px solid var(--border);
  border-radius: 100px;
  z-index: 2;
}

.scroll-cue span {
  width: 3px;
  height: 7px;
  border-radius: 100px;
  background: var(--accent);
  animation: cue 2s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55%      { transform: translateY(11px); opacity: 0.15; }
}

/* ============================================================
   WORDMARK — screen-wide CURIOUS LIFE
   CURIOUS is struck gold; LIFE is overgrown.
   The foliage SVGs in assets/ are a placeholder for a Blender
   render — swap the two urls and nothing else has to change.
   ============================================================ */

.wordmark {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(3rem, 9vh, 6.5rem) 0;
  overflow: hidden;               /* spilled foliage must not create scroll */
  text-align: center;
  border-top: 1px solid var(--border);
}

.wordmark-text {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Figtree', sans-serif;   /* the wordmark font, not the display serif */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.98;
  font-size: 11.6vw;              /* sized exactly to the viewport by JS on load */
}

/* The cosmos, clipped inside the letterforms — NASA's Great Observatories
   galactic-centre composite (Hubble + Spitzer + Chandra; public domain).
   2000px WebP, ~165KB. `cover` here is width-driven, so the letters read
   the luminous middle band of the image. */
.w-curious {
  position: relative;
  display: inline-block;
  padding-right: 0.26em;          /* the word space */
  background-image: url(awareness/assets/curious-fill.webp?v=1);
  background-size: cover;
  background-position: 50% 48%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.007em rgba(24, 18, 46, 0.45);
}

.w-life {
  position: relative;
  display: inline-block;
}

/* Real jungle, clipped inside the letterforms — photo by Mattia Pavesi
   (Unsplash licence: free commercial use). 1600px WebP, ~94KB. `cover`
   scales uniformly; the position keeps the scarlet ibis in frame. */
.w-life-text {
  background-image: url(awareness/assets/life-fill.webp?v=1);
  /* 5% over cover (cover here is width-driven), so the ibis's head and eye
     land on the E's strokes rather than in the gap between letters */
  background-size: 108% auto;
  background-position: 50% 45%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.007em rgba(9, 28, 15, 0.5);
}


/* ---------- course framing around the wordmark ---------- */

/* The verb, set above the name it applies to and treated as a graphic in its
   own right: wide-tracked capitals, sized by JS to a fixed share of the
   wordmark's width so the two lines lock together at any viewport. */
.wordmark-lead {
  display: block;
  width: fit-content;
  margin: 0 auto clamp(0.6rem, 1.8vh, 1.2rem);
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 4.6vw;               /* refined by JS once fonts are ready */
  text-transform: uppercase;
  letter-spacing: 0.34em;
  text-indent: 0.34em;            /* offset the trailing track so it centres */
  line-height: 1;
  white-space: nowrap;
  color: var(--fg);
}

/* at heading scale, not caption scale */
.wordmark-sub {
  font-family: 'Gentium Plus', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-top: clamp(2.75rem, 7vh, 4.5rem);
}

.wordmark-cta {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: 'Figtree', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.7rem 1.7rem;
  transition: border-color 0.2s, color 0.2s;
}

.wordmark-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.wordmark-more {
  display: block;
  margin-top: 1.1rem;
  font-family: 'Figtree', sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color 0.2s;
}

/* the arrow points where the link goes: down the page */
.wordmark-more::after {
  content: '↓';
  display: inline-block;
  margin-left: 0.35em;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.wordmark-more:hover { color: var(--accent); }
.wordmark-more:hover::after { transform: translateY(2px); }

/* ============================================================
   BANDS — label rail + content
   ============================================================ */

.band {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 3rem;
  padding: clamp(4.5rem, 11vh, 8rem) 0;
  border-top: 1px solid var(--border);
}

.band-label {
  font-family: 'Figtree', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.55rem;
}

.band-body { max-width: var(--measure); }

.band h2 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

.band h2 .dim { color: var(--muted); }
.band h2 .gld { color: var(--accent); }


.band-note {
  font-family: 'Figtree', sans-serif;
  font-size: 0.95rem;
  color: var(--muted);
}

.band-note strong {
  color: var(--fg);
  font-weight: 500;
}

/* the intro to the movements reads as its own full-screen view */
#path {
  min-height: 100vh;
  align-content: center;
  grid-template-columns: var(--rail) minmax(0, 1fr) minmax(230px, 300px);
}

/* the legend: what the three movements are, at a glance */
.mv-legend {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.7rem;
}

.mv-legend li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.9rem;
}

.mv-legend i {
  font-family: 'Figtree', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-align: right;
  padding-top: 0.3rem;
}

.mv-legend b {
  display: block;
  font-family: 'Gentium Plus', Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.mv-legend span {
  font-family: 'Figtree', sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

/* each movement's living glyph: know condenses, tune settles, realise grows.
   Know and Tune share one height; the clouds get sky above and below */
.mv-legend .lg-anim {
  display: block;
  width: 100%;
  max-width: 190px;
  height: 72px;
  margin-top: 0.4rem;
}

/* the mycelium lives in a square, so its whole reach stays in view */
.mv-legend #lg-real {
  width: 150px;
  height: 150px;
}

/* ---------- The Path: the spiral ---------- */
.spiral-wrap {
  grid-column: 2;
  grid-row: 2;
  margin-top: 2.5rem;
}

.spiral {
  display: block;
  width: min(560px, 92%);
  aspect-ratio: 1;
}

/* ============================================================
   THE MOVEMENTS — one full screen each
   ============================================================ */

.movement {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* the tune movement breathes taller: room for the waves above the band */
.movement--tune { min-height: 120vh; }

.mv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  /* own compositor layer, so scrolling moves the last frame as a texture */
  will-change: transform;
}

.mv-inner {
  position: relative;
  max-width: 620px;
  padding: 6rem 1.5rem;
  text-align: center;
}

.mv-num {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.movement h3 {
  font-family: 'Gentium Plus', Georgia, serif;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}

.movement > .mv-inner > p {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(0.98rem, 1.7vw, 1.12rem);
  line-height: 1.7;
  color: var(--muted);
}

.mv-note {
  margin-top: 1.6rem;
  font-size: 0.68rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Know Yourself: one quiet line on the instruments, and the door to them */
.mv-inner .mv-sub {
  margin: 0.9rem auto 0;
  max-width: 30rem;
  font-size: clamp(0.84rem, 1.4vw, 0.94rem);
  line-height: 1.6;
  opacity: 0.85;
}

.mv-link {
  display: inline-block;
  margin-top: 1.6rem;
  font-family: 'Figtree', sans-serif;
  font-size: 0.7rem;
  padding: 0.6rem 1.35rem;
}

/* the maker's name wears gold, and is quietly a door */
.mv-note .myc {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

.mv-note .myc:hover,
.mv-note .myc:active {
  color: #e0b96a;
}

/* the door to the star game: a strip of living universe */
.play-star {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  height: 50px;
  width: min(380px, 100%);
  margin: 1.8rem auto 0;
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(224, 185, 106, 0.35);
  text-decoration: none;
  transition: border-color 0.25s;
}

.play-star:hover { border-color: rgba(224, 185, 106, 0.75); }

.play-star .ps-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.play-star .ps-label {
  position: relative;
  font-family: 'Figtree', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f6efdf;
}

.play-star .ps-star {
  position: relative;
  width: 24px;
  height: 44px;
}

/* 1 — deep space, so the type inverts */
.movement--map { background: #080a12; }
.movement--map h3 { color: #f2eee4; }
.movement--map .mv-inner > p { color: #b9bccd; }
.movement--map .mv-num { color: #d3ad5a; }

/* The copy sits on top of a live canvas, so it carries its own pool of
   ground. Not one ellipse (that read as an oval sticker) but a stack of
   offset soft blobs whose union has a lumpy, cloud-like silhouette. All
   are percent-positioned in the text block's own box, so the cloud grows,
   shrinks, and reshapes with the actual copy on any viewport. */
.movement--map .mv-inner {
  max-width: 760px;
  padding: 7rem 4.5rem;
  background:
    radial-gradient(42% 34% at 35% 26%, rgba(8, 10, 18, 0.92) 0%, rgba(8, 10, 18, 0.5) 52%, rgba(8, 10, 18, 0) 78%),
    radial-gradient(48% 30% at 66% 34%, rgba(8, 10, 18, 0.9) 0%, rgba(8, 10, 18, 0.45) 55%, rgba(8, 10, 18, 0) 80%),
    radial-gradient(54% 38% at 44% 58%, rgba(8, 10, 18, 0.92) 0%, rgba(8, 10, 18, 0.5) 55%, rgba(8, 10, 18, 0) 80%),
    radial-gradient(40% 30% at 70% 66%, rgba(8, 10, 18, 0.85) 0%, rgba(8, 10, 18, 0.4) 52%, rgba(8, 10, 18, 0) 78%),
    radial-gradient(34% 26% at 24% 52%, rgba(8, 10, 18, 0.8) 0%, rgba(8, 10, 18, 0.35) 50%, rgba(8, 10, 18, 0) 76%),
    radial-gradient(36% 24% at 55% 82%, rgba(8, 10, 18, 0.72) 0%, rgba(8, 10, 18, 0) 75%),
    radial-gradient(30% 22% at 42% 14%, rgba(8, 10, 18, 0.66) 0%, rgba(8, 10, 18, 0) 74%),
    radial-gradient(82% 68% at 50% 50%, rgba(8, 10, 18, 0.6) 0%, rgba(8, 10, 18, 0.38) 52%, rgba(8, 10, 18, 0) 80%);
}

/* Captions for the field instrument's live line. The head row (label + ?)
   sits ABOVE the graph band the canvas draws; the invitation sits below it.
   The head row's bottom offset is set by path.js from the measured height
   of the play row, so nothing overlaps at any wrap width. */
.tune-note {
  position: absolute;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: baseline;
  gap: 6px 14px;
  flex-wrap: wrap;
  font-family: 'Figtree', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  line-height: 1.5;
  color: var(--muted);
  pointer-events: none;
}

/* the row dims, but never the tip: an opacity on the whole note would make
   the open explanation translucent and let the section shine through it */
.tune-note > :not(.tn-tip) { opacity: 0.8; }

/* the measurement strip is night now: its words go light */
.movement--tune .tune-note { color: rgba(226, 232, 250, 0.78); }

.tune-note--head {
  bottom: 116px;   /* refined by path.js on resize */
  justify-content: flex-start;
}

.tune-note--play {
  bottom: 9px;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.tn-cta {
  pointer-events: auto;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 99px;
  padding: 0.45rem 1rem;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

/* hovering shows where it leads: the game's deep-space night */
.tn-cta:hover {
  border-color: rgba(224, 185, 106, 0.55);
  color: #e0b96a;
  background:
    radial-gradient(80% 160% at 25% 20%, rgba(120, 90, 200, 0.18), transparent 60%),
    linear-gradient(100deg, #0a0c18, #0e1122);
}

.tune-note .tn-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--accent);
}

/* the invitation carries slightly more light than the caption around it */
.tune-note .tn-play {
  margin-left: auto;
  opacity: 1;
  font-size: 0.68rem;
  color: rgba(240, 234, 218, 0.92);
}

/* the ? — a small ring in the accent, openable by hover, focus, or tap */
.tn-help {
  pointer-events: auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: none;
  color: var(--accent);
  font: 600 9px/1 'Figtree', sans-serif;
  padding: 0;
  cursor: pointer;
  align-self: center;
}

.tn-tip .tn-line { display: block; margin-bottom: 0.35rem; }

.tn-tip .tn-science {
  color: var(--accent);
  pointer-events: auto;
}

.tn-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);   /* just above the head row */
  max-width: min(380px, calc(100vw - 48px));
  /* opaque: the section copy behind must never show through the text */
  background: var(--bg);
  border: 1px solid rgba(60, 50, 30, 0.10);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(40, 32, 16, 0.09);
  padding: 0.85rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.015em;
  line-height: 1.75;
  text-transform: none;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  pointer-events: none;
}

.tn-help:hover ~ .tn-tip,
.tn-help:focus-visible ~ .tn-tip,
.tip-open > .tn-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* over the night strip, the explanation wears the night too */
.movement--tune .tn-tip {
  background: #0e1122;
  border-color: rgba(224, 185, 106, 0.28);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  color: rgba(230, 236, 250, 0.88);
}

/* No panel behind the manifest copy: it sits inside the portal, and the
   portal's own interior is its ground. */
.movement--manifest .mv-inner {
  max-width: 460px;
  padding: 4rem 1.5rem;
}

/* ---------- The Daily Practice ---------- */

.card h3,
.cap dt {
  font-family: 'Gentium Plus', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

.card p,
.cap dd {
  font-family: 'Figtree', sans-serif;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- The Daily Practice ---------- */
.cards {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}

/* Frosted until attended to. The heading always stays sharp so the section
   can be read at a glance; only the supporting line is fogged, and hover,
   tap or keyboard focus clears it. Card and text share one duration and
   easing, so the whole thing resolves as a single continuous movement. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.6rem 1.4rem;
  cursor: default;
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 2px rgba(44, 36, 32, 0.03);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.55s ease,
              background-color 0.55s ease;
}

/* the fade lives in the filter, not `opacity` — .js .reveal.in outranks
   .card on the opacity property and would cancel it */
.card p {
  filter: blur(1.6px) saturate(0.72) opacity(0.55);
  transition: filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Each card wears its practice colour once, as the live sessions' box wears
   its warmth: a soft cloud of it drifting inside (coral body, aqua mind,
   violet journal), no line along the top. Hover deepens the card's own hue. */
.cards .card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 22%, transparent);
  background: color-mix(in srgb, var(--pc, var(--accent)) 5%, var(--card-bg));
}
.cards .card::before {
  content: '';
  position: absolute;
  inset: -45%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30% 40% at 28% 36%, color-mix(in srgb, var(--pc, var(--accent)) 34%, transparent), transparent 70%),
    radial-gradient(28% 36% at 72% 66%, color-mix(in srgb, var(--pc, var(--accent)) 22%, transparent), transparent 70%),
    radial-gradient(38% 44% at 56% 22%, rgba(255, 250, 240, 0.55), transparent 70%);
  filter: blur(24px);
  animation: card-cloud 44s ease-in-out infinite alternate;
}
.cards .card:nth-child(1) { --pc: var(--p1); }
.cards .card:nth-child(2) { --pc: var(--p2); }
.cards .card:nth-child(3) { --pc: var(--p3); }
.cards .card:nth-child(2)::before { animation-duration: 52s; animation-delay: -18s; }
.cards .card:nth-child(3)::before { animation-duration: 47s; animation-delay: -31s; }
@keyframes card-cloud {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(5%, -4%) rotate(20deg) scale(1.07); }
  100% { transform: translate(-5%, 4%) rotate(-12deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .cards .card::before { animation: none; } }

/* beneath the cards: the way to a daily reminder, frosted, a faint cloud of
   the three practices' colours inside */
.daily-go {
  grid-column: 2;
  justify-self: start;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 1.6rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-family: 'Figtree', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--fg, #2c2420);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 8px 28px -12px rgba(150, 120, 160, 0.4);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.daily-go::before {
  content: '';
  position: absolute;
  inset: -70%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  background:
    radial-gradient(26% 40% at 24% 46%, color-mix(in srgb, var(--p1) 45%, transparent), transparent 70%),
    radial-gradient(24% 38% at 52% 58%, color-mix(in srgb, var(--p2) 40%, transparent), transparent 70%),
    radial-gradient(26% 40% at 78% 44%, color-mix(in srgb, var(--p3) 42%, transparent), transparent 70%);
  filter: blur(12px);
  animation: card-cloud 30s ease-in-out infinite alternate;
}
.daily-go:hover,
.daily-go:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(196, 162, 78, 0.4), 0 10px 32px -12px rgba(150, 120, 160, 0.5);
}
@media (prefers-reduced-motion: reduce) { .daily-go::before { animation: none; } }

/* .is-focus exists only on touch (the JS returns early on fine pointers).
   It stays deliberately CHEAP — border tint and text unblur, no transform,
   no shadow, no background swap — so it can track the viewport middle LIVE
   while scrolling without fighting the compositor. */
.card.is-focus {
  outline: none;
  border-color: color-mix(in srgb, var(--pc, var(--accent)) 45%, transparent);
}

.card.is-focus p {
  filter: blur(0) saturate(1) opacity(1);
  transition-duration: 0.3s;
}

/* Hover and keyboard states exist only where a real hover exists. On touch,
   plain :focus stuck to whatever was last tapped while the scroll-picker
   focused another card — two clear at once, fighting. */
@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .card:focus-visible {
    outline: none;
    transform: translateY(-4px) scale(1);
    background: color-mix(in srgb, var(--pc, var(--accent)) 7%, var(--bg));
    border-color: color-mix(in srgb, var(--pc, var(--accent)) 45%, transparent);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--pc, #2c2420) 22%, transparent);
  }

  .card:hover p,
  .card:focus-visible p {
    filter: blur(0) saturate(1) opacity(1);
  }
}

/* Never leave copy fogged for someone who has asked for less motion, or for
   a browser that will not run the focus script. */
@media (prefers-reduced-motion: reduce) {
  .card { transform: none; }
  .card p { filter: none; }
}

html:not(.js) .card { transform: none; }
html:not(.js) .card p { filter: none; }

.card h3 { font-size: 1.1rem; }

.card p { font-size: 0.88rem; }

/* ---------- the practice log ----------
   Five weeks. Each day is a stack of three bands, one per part of the
   morning practice; the ring marks the weekly session, the disc the
   monthly moon ritual. */
/* On desktop the log and its legend share one row: the five weeks on the
   left, the three cadences stacked beside them on the right. */
.practice-cal {
  grid-column: 2;
  margin-top: 3.25rem;
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3rem);
}

.cal-head,
.cal-grid {
  display: grid;
  grid-column: 1;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  max-width: 430px;
}

.cal-head {
  margin-bottom: 8px;
}

.cal-head span {
  font-family: 'Figtree', sans-serif;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-align: center;
}

.cal-d {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid #ffffff;
  background: var(--card-bg);
  overflow: hidden;
}

/* The colour rides its own layer so each day can carry an intensity, the
   way a contribution graph breathes: --ci waves continuously through the
   weeks, set per day in the markup. Skipped days carry none of it. */
.cal-d::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              var(--p1) 0 33.33%,
              var(--p2) 33.33% 66.66%,
              var(--p3) 66.66% 100%);
  opacity: var(--ci, 1);
}

/* days where only part of the practice was kept */
.cal-d--two::before {
  background: linear-gradient(to bottom,
              var(--p1) 0 33.33%,
              var(--p2) 33.33% 66.66%,
              transparent 66.66% 100%);
}

.cal-d--one::before {
  background: linear-gradient(to bottom,
              var(--p1) 0 33.33%,
              transparent 33.33% 100%);
}

.cal-d--off::before { background: none; }

/* weekly session — a ring drawn over the day */
.cal-d--session::after {
  content: '';
  position: absolute;
  inset: 22%;
  border: 2px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(44, 36, 32, 0.28);
}

/* monthly ritual — the full moon: a whole luminous disc, not a crescent */
.cal-d--moon::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(44, 36, 32, 0.30), 0 0 7px rgba(254, 253, 251, 0.95);
}

.cal-d--today {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- the three cadences, as one day's agenda ---------- */
.cal-rhythm {
  list-style: none;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

/* Each cadence is labelled by the mark that stands for it in the grid above,
   not by a colour. The practice colours mean the three parts of the morning
   practice and nothing else, so borrowing them for weekly and monthly items
   made them read as claims they were not making. */
.rh {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
}

.rh-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.rh-mark {
  flex: none;
  width: 20px;
  height: 20px;
  position: relative;
}

/* the morning practice: one day of the log — the same three bands as a cell,
   which are the same three colours as the three cards */
.rh-mark--practice {
  border-radius: 4px;
  border: 1px solid var(--border);
  background: linear-gradient(to bottom,
              var(--p1) 0 33.33%,
              var(--p2) 33.33% 66.66%,
              var(--p3) 66.66% 100%);
}

/* the weekly session: the ring that marks it in the grid */
.rh-mark--session {
  border: 2px solid var(--fg);
  border-radius: 50%;
}

/* the monthly ritual: the same full moon as the grid */
.rh-mark--moon {
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--fg);
  box-shadow: 0 0 6px rgba(196, 162, 78, 0.55);
}

.rh-when {
  font-family: 'Figtree', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.rh-what {
  font-family: 'Figtree', sans-serif;
  font-size: 0.88rem;
  color: var(--fg);
}

/* ---------- The Capabilities ---------- */
.caps { margin-top: 3rem; }

.cap {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}

.cap:last-child { border-bottom: 1px solid var(--border); }

/* ============================================================
   CAPABILITIES — a night interlude: the moon beside the capacities
   ============================================================ */

.capnight {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 10vh, 7rem) 24px;
  background:
    radial-gradient(70% 50% at 80% 10%, rgba(120, 90, 200, 0.10), transparent 60%),
    radial-gradient(60% 40% at 15% 85%, rgba(60, 140, 180, 0.08), transparent 60%),
    linear-gradient(180deg, #06080f, #0b0e1c 55%, #0d1020);
  color: #f0eadc;
}

.capnight-inner {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(300px, 520px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  max-width: 1040px;
}

.cap-moon { display: flex; justify-content: center; }

.cap-moon canvas {
  width: min(56vw, 340px);
  aspect-ratio: 1;
  cursor: grab;
  touch-action: none;   /* the moon spins freely in every direction */
}

.cap-moon canvas.spinning { cursor: grabbing; }

.capnight .band-label { color: #e0b96a; }

.capnight h2 {
  font-family: 'Gentium Plus', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-top: 0.5rem;
  color: #f0eadc;
}

.capnight .caps { margin-top: 2.4rem; }

.capnight .cap { border-top-color: rgba(240, 234, 220, 0.14); }

.capnight .cap:last-child { border-bottom-color: rgba(240, 234, 220, 0.14); }

.capnight .cap dt { color: #f0eadc; }

.capnight .cap dd { color: rgba(240, 234, 220, 0.6); }

@media (max-width: 900px) {
  .capnight-inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .cap-moon canvas { width: min(62vw, 280px); }
}

/* ============================================================
   CLOSING — signup over the canvas sun
   ============================================================ */

.closing {
  position: relative;
  isolation: isolate;
  text-align: center;
  /* outside .page, so the sun's light reaches the screen edges. No inline
     padding here — the canvas is positioned against this box and must reach
     the edges; the gutter lives on .closing-inner instead.

     The sun owns a band at the bottom (--sun-h) that starts immediately under
     the Apply button, so the form and the whole sun sit on one screen. The
     closing line is placed inside the top of that band rather than above it. */
  --sun-h: min(54vh, 480px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 11vh, 7rem) 0 var(--sun-h);
  border-top: 1px solid var(--border);
  /* --lum is written by sun.js, 0 → 1 as the section scrolls in */
  --lum: 0;
  /* the light the sun throws onto the section as it rises */
  background:
    radial-gradient(120% 70% at 50% 118%,
      rgba(226, 150, 52, calc(var(--lum) * 0.16)) 0%,
      rgba(226, 150, 52, calc(var(--lum) * 0.05)) 42%,
      transparent 72%);
}

/* The canvas covers the WHOLE section — the disc stays anchored to the
   bottom (sun.js bottom-anchors it), but its corona and flares now have the
   full height to climb, wrapping the headline and the form in the wind.
   Layout is untouched: spacing still derives from --sun-h.
   Width/height must be explicit: a canvas is a replaced element, so inset
   with auto size falls back to its drawing-buffer size. */
.sun-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* deliberately not positioned — the canvas sits at z-index -1, so flow
   content paints above it regardless */
.closing-inner {
  max-width: 620px;
  margin: 0 auto;
  padding-inline: 1.5rem;
}

.closing h2 {
  font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
  /* the sun lifts the headline as it rises */
  text-shadow: 0 0 calc(var(--lum) * 46px) rgba(224, 178, 92, calc(var(--lum) * 0.5));
}

.closing-note {
  font-family: 'Figtree', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 460px;
  margin: 0 auto 2rem;
}

/* Sits just inside the top of the sun's band — the animation reaches up past
   it — with the disc itself lower down, so the two never collide. */
.closing-sun {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sun-h) - 5.5rem);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--muted);
  opacity: calc(0.45 + var(--lum) * 0.55);
  transition: opacity 0.3s linear;
}

/* quieter, greyer, and a size down from the line it introduces */
.cs-lead {
  display: block;
  font-style: normal;
  font-family: 'Figtree', sans-serif;
  font-size: 0.6em;
  letter-spacing: 0.06em;
  color: #8c847c;
  margin-bottom: 0.5em;
}

.cs-mid { display: block; }

/* ---------- SIGNUP FORM → /api/apply ----------
   No input box: a rule, a label, and a blinking gold caret. If Apply is
   pressed with nothing typed, a frosted pane surfaces from the background
   behind the field to show where to write. */

.signup-form {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto;
  max-width: 460px;
}

.field {
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.field-label,
.field-line {
  position: relative;
  z-index: 1;
}

.field-label {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.55rem;
  transition: color 0.3s;
}

.field-line {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  padding-bottom: 0.45rem;
  transition: border-color 0.3s;
}

.field input[type="email"] {
  width: 100%;
  font-family: 'Figtree', sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  outline: none;
  caret-color: var(--accent);   /* the gold cursor, once you are typing */
}

.field input[type="email"]:focus ~ .field-caret { animation: none; opacity: 0; }

.field:focus-within .field-line { border-bottom-color: var(--accent); }
.field:focus-within .field-label { color: var(--accent); }

/* Stand-in caret for the empty, unfocused state */
.field-caret {
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 2px;
  height: 1.1em;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}

.field input[type="email"]:placeholder-shown:not(:focus) ~ .field-caret {
  animation: caret-blink 1.15s steps(1, end) infinite;
}

@keyframes caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* The glass pane, at rest sunk into the background */
.field-glass {
  position: absolute;
  inset: -18px -22px -14px;
  z-index: 0;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 14px 34px rgba(44, 36, 32, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.65);
  opacity: 0;
  transform: translateY(14px) scale(0.93);
  pointer-events: none;
  transition: opacity 0.55s ease,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


.field--summon .field-glass {
  opacity: 1;
  transform: none;
}

/* both classes, so this wins over the .signup-message colour below */
.signup-message.signup-hint {
  color: var(--accent);
  min-height: 1.4em;
}

.signup-submit {
  font-family: 'Figtree', sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--fg);
  background: transparent;
  /* the same translucent gold as the email line beside it */
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 100px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.signup-submit:hover,
.signup-submit:active {
  border-color: rgba(224, 185, 106, 0.65);
  color: #e0b96a;
  background:
    radial-gradient(80% 160% at 25% 20%, rgba(120, 90, 200, 0.2), transparent 60%),
    linear-gradient(100deg, #0a0c18, #0e1122);
}


.signup-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.signup-message {
  font-family: 'Figtree', sans-serif;
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 1rem;
}

.signup-message.signup-error { color: var(--error); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  padding: clamp(4rem, 10vh, 6.5rem) 0 2.4rem;
  border-top: 1px solid var(--border);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr);
  gap: 3rem clamp(2rem, 5vw, 4.5rem);
}

.footer-brand { margin-bottom: 0; }

.footer-logo {
  display: block;
  height: clamp(30px, 3.6vw, 40px);
  width: auto;
  margin-bottom: 1.1rem;
}

.footer-motto {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-indent: -0.02em;   /* flush the M ink with the logo's left edge */
}

/* the site, in four short columns */
.ft-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.6rem;
}
.ft-col { display: flex; flex-direction: column; gap: 0.6rem; }
.ft-h {
  font-family: 'Figtree', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.ft-col a {
  font-family: 'Figtree', sans-serif;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ft-col a:hover, .ft-col a:focus-visible { color: var(--fg); }

/* the quiet line at the very foot */
.ft-base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
  font-family: 'Figtree', sans-serif;
  font-size: 0.75rem;
  color: var(--muted);
}
.ft-base a { color: var(--muted); text-decoration: none; }
.ft-base a:hover { color: var(--fg); }

@media (max-width: 900px) {
  footer { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.4rem; }
}



/* The field record: rounded panel holding the live measurement, this
   session's statistics, and how it sits against the stored archive. */
.field-panel {
  max-width: 560px;
  margin: 0 0 clamp(3rem, 7vh, 5rem);
  padding: 1rem 1.2rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.fp-head {
  position: relative;   /* anchors the ? explanation above the row */
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 0.55rem;
}

.fp-head .fp-z { margin-left: auto; }

.fp-label {
  font-family: 'Figtree', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.fp-z {
  font-family: 'Figtree', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
}

#fp-canvas {
  display: block;
  width: 100%;
  height: 92px;
}

/* The nav's mini sun: a small disc whose light follows the live
   measurement (--g, 0..1, written by the instrument; 0.5 is chance). */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-sun-link {
  display: inline-flex;
  align-items: center;
  padding: 2px;
}

.nav-sun {
  --g: 0.5;
  position: relative;
  width: 20px;
  height: 20px;
}

/* the mist: widest and loosest when the stream is merely random */
.nav-sun::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(224, 168, 60, 0.28),
    rgba(224, 168, 60, 0.09) 46%,
    transparent 72%);
  filter: blur(3px);
  opacity: calc(0.55 - var(--g) * 0.45);
  transform: scale(calc(1 + (1 - var(--g)) * 0.65));
  transition: opacity 1.8s ease, transform 1.8s ease;
}

/* the heart: condenses out of the mist as the score rises */
.nav-sun::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(238, 185, 80, 0.95),
    rgba(189, 128, 34, 0.5) 58%,
    transparent 80%);
  filter: blur(0.6px);
  opacity: calc((var(--g) - 0.22) * 1.28);
  transform: scale(calc(0.45 + var(--g) * 0.7));
  /* the organization glow: appears only once the stream runs clearly hot */
  box-shadow: 0 0 calc(var(--g) * 11px) rgba(224, 168, 60, calc((var(--g) - 0.45) * 0.6));
  transition: opacity 1.8s ease, transform 1.8s ease, box-shadow 1.8s ease;
}

.fp-try {
  margin-top: 0.35rem;
  text-align: right;
  font-family: 'Figtree', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.fp-stats {
  margin-top: 0.55rem;
  font-family: 'Figtree', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--muted);
}

.fp-more {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-top: 0.9rem;
  font-family: 'Figtree', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 99px;
  padding: 0.45rem 1rem;
  transition: border-color 0.25s, color 0.25s;
}

.fp-more:hover { border-color: var(--accent); }

/* The member's whisper: a quiet door to the current module, bottom-left,
   shown while a course is underway on this device (index inline script). */
.course-pop {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 60;
  max-width: 280px;
  padding: 0.9rem 2.4rem 0.9rem 1.1rem;
  border-radius: 14px;
  background:
    radial-gradient(70% 140% at 20% 30%, rgba(224, 185, 106, 0.14), transparent 60%),
    linear-gradient(100deg, #0a0c18, #0e1122);
  border: 1px solid rgba(224, 185, 106, 0.3);
  font-family: 'Figtree', sans-serif;
  animation: cp-in 0.6s ease both;
}

@keyframes cp-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.course-pop i {
  display: block;
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e0b96a;
  margin-bottom: 0.25rem;
}

.course-pop b {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #f0e6d0;
  margin-bottom: 0.6rem;
}

.course-pop a {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e0b96a;
  text-decoration: none;
  border: 1px solid rgba(224, 185, 106, 0.45);
  border-radius: 99px;
  padding: 0.4rem 0.9rem;
}

.course-pop a:hover { border-color: #e0b96a; }

.cp-x {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(240, 234, 220, 0.45);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
}

.cp-x:hover { color: #e0b96a; }

.footer-copyright {
  font-family: 'Figtree', sans-serif;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Below the rail breakpoint the label sits above its content */
@media (max-width: 900px) {
  .band {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .band-label {
    padding-top: 0;
    margin-bottom: 1.5rem;
  }
  .cards,
  .practice-cal,
  .spiral-wrap,
  .daily-go {
    grid-column: 1;
  }
  /* below the rail the legend returns beneath the log, and the log keeps
     to the right edge of the text column */
  .practice-cal { display: block; }
  .cal-head,
  .cal-grid {
    margin-left: auto;
    margin-right: 0;
  }
  .cal-rhythm {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 1.75rem;
  }
  .rh { flex: 1 1 190px; }
  #path { grid-template-columns: minmax(0, 1fr); }
  .spiral-wrap { grid-row: auto; }
  .mv-legend {
    grid-column: 1;
    grid-row: auto;
    margin-top: 3rem;
  }

  /* on a phone the three movements stand centred, each glyph beneath
     its word */
  .mv-legend li {
    display: block;
    text-align: center;
  }

  .mv-legend i {
    display: block;
    text-align: center;
    padding-top: 0;
    margin-bottom: 0.2rem;
  }

  .mv-legend .lg-anim {
    margin-left: auto;
    margin-right: auto;
  }
  .cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

/* the wordmark subtitle holds one line on desktop, two on phones */
.ws-br { display: none; }

@media (max-width: 720px) {
  /* the question gets its own line on phones */
  .closing-note .cn-q { display: block; }

  .ws-br { display: inline; }

  .page { padding: 0 1.5rem; }
  nav { padding: 0.9rem 1.25rem; }
  .logo img { height: 18px; }
  .nav-cta { font-size: 0.72rem; padding: 0.4rem 0.9rem; }

  /* The mark fills the screen and the copy sits in its circle, exactly as on
     desktop — a portrait screen simply crops the mark's sides rather than its
     top and bottom. It runs from under the fixed nav to the bottom edge, edge
     to edge; nothing is inset, which is what previously read as a pillow. */
  .hero-seal {
    --nav-h: 63px;               /* default; measured and overwritten by JS */
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    transform: none;
  }

  .seal-wing { display: none; }

  /* cover, not contain: the mark is square and the screen is not, so it is
     scaled to the taller side and its left and right bleed off */
  .seal-mark {
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  /* With `cover` the mark is scaled to the frame's HEIGHT, so the circle is
     66.68% of the height, not of the width. Drive both off height and let
     aspect-ratio give back the width. */
  .seal-ring {
    width: auto;
    height: var(--circle-ratio);
  }

  .seal-halo {
    width: auto;
    height: calc(var(--circle-ratio) + 6%);
  }

  .seal-content { width: 84vw; }

  /* back into flow, so it stacks under the copy inside the frame */
  .hero .cta-bar {
    position: static;
    margin-top: 2rem;
  }

  /* wordmark stacks into two full-width lines */
  .wordmark-text { white-space: normal; display: block; }
  .w-curious,
  .w-life {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding-right: 0;
  }

  .cards { grid-template-columns: minmax(0, 1fr); }
  /* the stacked form is taller, so the sun's band gives a little back to keep
     form + sun on a single screen */
  .closing { --sun-h: min(47vh, 420px); }
  .signup-form { flex-direction: column; align-items: stretch; gap: 1.6rem; }
  .signup-submit { padding: 0.8rem 1.5rem; }
  .field-glass { inset: -18px -18px -14px; }
}

@media (max-width: 400px) {
  .cta-bar { gap: 0.5rem; }
  .btn { padding: 0.6em 1.1em; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
  /* keep the caret visible, just stop it blinking */
  .field input[type="email"]:placeholder-shown:not(:focus) ~ .field-caret {
    animation: none;
    opacity: 1;
  }
}