/* ══════════════════════════════════════════════════════════════════════════
   Zikkaron marketing site — Classical design system tokens plus the page's
   own layer. Tokens are lifted verbatim from reference/classical-styles.css;
   everything below the token block is this page.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, serif;
  --font-quote: "Newsreader", Georgia, serif;
  --font-ui: "Instrument Sans", system-ui, sans-serif;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* — base — */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }
img { display: block; max-width: 100%; }

a {
  color: var(--color-accent-700);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--color-accent-800); }

em.q {
  font-family: var(--font-quote);
  font-style: italic;
}

::selection { background: var(--color-accent-200); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* — buttons — */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: 9.2px 16.5px;
  border-radius: var(--radius-md);
  transition: transform .3s var(--ease), background .28s, border-color .28s, color .28s;
}
.btn-primary { color: var(--color-accent-700); border-color: var(--color-accent); }
.btn-primary:hover {
  color: var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  transform: translateY(-2px);
}
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  transform: translateY(-2px);
}
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost {
  color: var(--color-accent-700);
  padding-inline: 4.6px;
}
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* — card — */

.card {
  display: flex;
  flex-direction: column;
  gap: 9.2px;
  padding: 13.8px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--color-divider);
}
.card-kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  line-height: 1.2;
}
.card-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.8;
  flex: 1;
}

/* — input — */

.input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input::placeholder { color: var(--color-neutral-500); opacity: 1; }

/* — shared page primitives — */

.kicker {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.tnum { font-feature-settings: 'tnum'; }

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 1. Header ───────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 0;
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  /* The background above is already 96% opaque, so the frosting this used to
     do (16px blur, 1.5x saturation) was barely visible while re-sampling
     everything behind a sticky element on every scroll frame. A lighter blur
     with no saturate keeps the effect while cutting most of that cost. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 55%, transparent);
}

.bar {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: 'brand nav lang cta';
  align-items: center;
  column-gap: 24px;
}

.brand {
  grid-area: brand;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(22px, 5vw, 27px);
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-decoration: none;
  transition: color .28s var(--ease);
}
.brand:hover { color: var(--color-accent-700); }

.site-nav {
  grid-area: nav;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--font-ui);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-neutral-700);
  text-decoration: none;
  transition: color .28s var(--ease);
}
.site-nav a:hover { color: var(--color-accent-700); }

/* Visually hidden but reachable by assistive tech and by Tab. Used to carry
   the language switcher's full accessible name (e.g. "Language: English.
   Choose another language") while the circle itself only shows "EN". */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The language switcher. A <details> element rather than a script-driven
   widget, so the six legal pages, which load no JavaScript at all, get a
   working switcher for free: <summary> already gives a click- and
   keyboard-operable disclosure with the browser's own aria-expanded mapping.
   site/lang.js progressively enhances this with Escape, outside-click and
   arrow keys, on the three pages that do load it; nothing here depends on
   that script running. */
.lang-switch {
  position: relative;
  grid-area: lang;
  font-family: var(--font-ui);
}
.lang-trigger {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-divider);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-neutral-700);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.lang-trigger::-webkit-details-marker { display: none; }
.lang-trigger:hover,
[open] > .lang-trigger {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  border-color: var(--color-accent-300);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 148px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.lang-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-neutral-700);
  text-decoration: none;
  white-space: nowrap;
}
.lang-menu a:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.lang-menu a span {
  display: inline-block;
  width: 2.2em;
  color: var(--color-neutral-500);
}

/* This selector already reaches the header CTA on its own; the .bar-cta
   class it also carries needs no rule here. It exists only so
   build-languages.py has something other than capitalization to key its
   translation on, now that the header and hero buttons carry the same
   words ("Start your altar"). */
.bar .btn {
  grid-area: cta;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.bar .btn:hover { transform: translateY(-1px); }

#om-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--color-accent-300), var(--color-accent));
}
@supports (animation-timeline: scroll(root block)) {
  #om-progress {
    animation: ruleGrow linear both;
    animation-timeline: scroll(root block);
  }
}

/* ── 2. Hero ─────────────────────────────────────────────────────────── */

.hero {
  padding: 72px 0 0;
  text-align: center;
  animation: riseIn .9s var(--ease) both;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.hero-kicker span {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--color-accent);
  animation: ruleGrow 1.1s .2s var(--ease) both;
}
.hero-kicker span:first-child { transform-origin: right; }
.hero-kicker span:last-child { transform-origin: left; }

.hero h1 {
  font-weight: 400;
  font-size: clamp(46px, 7vw, 92px);
  line-height: 0.98;
  margin: 0 auto 28px;
  max-width: 16ch;
  text-wrap: balance;
}
.hero h1 em {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 300;
  color: var(--color-accent-700);
}
/* The plain-language answer to "what is this", sitting between the emotional
   headline and the lede that keeps building on it. Deliberately set in the
   UI face rather than the serif, so it reads as a description rather than
   a continuation of the poetry around it. */
.hero-category {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  color: var(--color-accent-800);
  margin: 0 auto 22px;
  max-width: 38ch;
  text-wrap: balance;
}
.hero-lede {
  font-family: var(--font-quote);
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.55;
  margin: 0 auto 18px;
  max-width: 40ch;
  color: var(--color-neutral-800);
  text-wrap: pretty;
}
.hero-body {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 auto 34px;
  max-width: 46ch;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-cta-note {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-neutral-500);
  margin: 14px 0 0;
}
/* The site's strongest differentiator, stated plainly right where someone is
   deciding whether to click, rather than left for the privacy notice alone
   to carry. */
.hero-proof {
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--color-neutral-600);
  margin: 10px auto 0;
  max-width: 44ch;
}

/* ── 3. Timeline strip ───────────────────────────────────────────────── */

.timeline {
  padding: 40px 0 0;
  animation: fadeIn 1.2s .1s both;
}
.timeline-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 0 2px 16px;
  font-family: var(--font-ui);
}
.timeline-caption p {
  font-size: clamp(9px, 2.2vw, 11px);
  text-transform: uppercase;
  white-space: nowrap;
}
.timeline-caption p:first-child {
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-accent-700);
}
.timeline-caption p:last-child {
  letter-spacing: 0.16em;
  color: var(--color-neutral-600);
}

.timeline-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.timeline-flow {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 1180px;
  padding: 0 6px;
}
.timeline-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-300), var(--color-accent), var(--color-accent-300));
  transform-origin: left;
  animation: ruleGrow 1.8s .25s cubic-bezier(.25, .7, .2, 1) both;
}
.flow-cap {
  position: relative;
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flow-cap-label {
  height: 86px;
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.flow-cap-start .flow-cap-label {
  align-items: flex-end;
  padding-bottom: 10px;
  color: var(--color-neutral-600);
}
.flow-cap-end .flow-cap-label {
  align-items: flex-start;
  padding-top: 10px;
  color: var(--color-accent-700);
}
.flow-cap-start { animation: riseIn .7s .2s both; }
.flow-cap-end { animation: riseIn .7s 1.9s both; }
.flow-dot-hollow {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
}
.flow-dot-solid {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-200);
}
.flow-spacer { height: 86px; }

.flow-item {
  position: relative;
  flex: 0 0 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: riseIn .75s cubic-bezier(.25, .7, .2, 1) both;
}
.flow-label {
  height: 86px;
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.flow-label-top { justify-content: flex-end; padding-bottom: 12px; }
.flow-label-bottom { justify-content: flex-start; padding-top: 12px; }
.flow-date {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.flow-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  line-height: 1.25;
  color: var(--color-text);
}
.flow-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  background: var(--color-bg);
  transform-origin: 50% 85%;
  transition: transform .3s var(--ease);
}
.flow-glyph:hover { transform: scale(1.22); }

.timeline-foot {
  margin: 0;
  padding: 14px 2px 0;
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--color-neutral-700);
}

/* ── 3b. How it works ────────────────────────────────────────────────── */

#how { scroll-margin-top: 96px; padding: 86px 0 0; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.how-step {
  position: relative;
  text-align: center;
  padding: 0 20px;
  animation: settle .9s both;
}
/* The arrow reads as a plain connector between steps, never as an em dash,
   so it carries no BLOCKS entry and needs no translation of its own. */
.how-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 30px;
  right: -8px;
  color: var(--color-accent-300);
  font-size: 20px;
}
.how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 16px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
}
.how-step h3 {
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 10px;
}
.how-step p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-neutral-700);
  margin: 0;
}

/* ── 4. Why this matters ─────────────────────────────────────────────── */

#remember {
  scroll-margin-top: 96px;
  padding: 96px 0 72px;
  animation: riseIn .8s both;
}

.rgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 0;
  align-items: stretch;
}

.r-head    { grid-column: 1; grid-row: 1; padding-bottom: 26px; animation: lift 1s both; }
.r-lede    { grid-column: 1; grid-row: 2; padding-bottom: 26px; animation: liftLeft 1s both; }
.r-intro   { grid-column: 2; grid-row: 2; padding-bottom: 26px; animation: liftRight 1s both; }
.r-beat1   { grid-column: 1; grid-row: 3; padding: 20px 0 26px; border-top: 1px solid var(--color-divider); animation: liftLeft 1s both; }
.r-quote   { grid-column: 2; grid-row: 3; display: flex; align-items: center; padding: 20px 0 26px;
             border-top: 1px solid var(--color-accent-300); border-bottom: 1px solid var(--color-accent-300);
             animation: liftRight 1s both; }
.r-beat2   { grid-column: 1; grid-row: 4; padding-top: 20px; border-top: 1px solid var(--color-divider); animation: liftLeft 1s both; }
.r-tail    { grid-column: 2; grid-row: 4; padding-top: 20px; animation: liftRight 1s both; }
.r-statement { grid-column: 1 / -1; grid-row: 5; padding-top: 46px; text-align: center; animation: lift 1s both; }

.r-head h2 {
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.r-head .kicker { display: block; margin: 0 0 16px; }

.r-lede p {
  font-family: var(--font-quote);
  font-size: 21px;
  line-height: 1.55;
  color: var(--color-neutral-800);
  text-wrap: pretty;
}
.r-intro p, .r-tail p { font-size: 16.5px; line-height: 1.8; text-wrap: pretty; }
.r-beat1 p, .r-beat2 p { font-size: 16.5px; line-height: 1.75; text-wrap: pretty; }
.r-quote p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--color-accent-800);
  text-wrap: pretty;
}
.r-statement .rule {
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto 28px;
  background: var(--color-accent);
}
.r-statement p {
  margin: 0 auto;
  max-width: 42ch;
  font-family: var(--font-quote);
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.45;
  color: var(--color-text);
  text-wrap: balance;
}

.verses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 60px;
}
.verse {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid var(--color-accent-300);
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
  animation: revealSoft .95s var(--ease) both;
}
.verse:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.verse .tick {
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--color-accent);
}
.verse-ref {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-800);
  font-feature-settings: 'tnum';
}
.verse-quote {
  margin: 0 0 16px;
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 21px;
  line-height: 1.42;
  color: var(--color-text);
  text-wrap: pretty;
}
.verse-note {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-accent-300);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-neutral-700);
}

/* ── 5. Material ribbon ──────────────────────────────────────────────── */

.ribbon {
  overflow: hidden;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  /* Isolates the masked, endlessly animating track below into its own paint
     layer, so this runs without asking the rest of the page to repaint on
     its account for as long as the page is open. */
  contain: paint;
}
.ribbon-track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-right: 34px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  white-space: nowrap;
}
.ribbon-item i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

/* ── 6. The idea ─────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--color-divider);
}
#stone { scroll-margin-top: 96px; animation: riseIn .8s both; }
.col {
  padding: 56px 44px;
  background: var(--color-bg);
}
#altar { scroll-margin-top: 96px; animation: liftLeft .95s both; }
#stone .col + .col { animation: liftRight .95s both; }

.col .kicker { display: block; margin: 0 0 14px; }
.col h2 {
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 42px);
  margin: 0 0 18px;
  line-height: 1.08;
}
.col p { font-size: 16.5px; line-height: 1.78; text-wrap: pretty; }
.col p + p { margin-top: 14px; }
.dropcap {
  float: left;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 62px;
  line-height: 0.78;
  padding: 6px 10px 0 0;
  color: var(--color-accent-700);
}
.shape-link {
  font-family: var(--font-quote);
  font-style: italic;
  color: var(--color-accent-700);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-300);
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--font-ui);
}
.pills span {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 99px;
  color: var(--color-accent-800);
  border: 1px solid var(--color-accent-300);
  background: var(--color-accent-100);
}

/* ── 7. Three promises ───────────────────────────────────────────────── */

#promises { scroll-margin-top: 96px; padding: 86px 0 0; }
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
  animation: lift .9s both;
}
.section-head .kicker { margin: 0 0 14px; }
.section-head h2 {
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  margin: 0;
  line-height: 1.05;
  max-width: 20ch;
  text-wrap: balance;
}
.section-head h2 em {
  font-family: var(--font-quote);
  font-style: italic;
  color: var(--color-accent-700);
}
.promise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}
.promise {
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
  animation: settle .9s both;
}
.promise:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-300);
}
.promise .disc {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-bottom: 16px;
}
.ref-chip {
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-300);
  color: var(--color-accent-800);
  white-space: nowrap;
}

/* ── 8. Stone maker ──────────────────────────────────────────────────── */

#make { scroll-margin-top: 96px; padding: 92px 0 0; }
.make-intro {
  max-width: 58ch;
  margin-bottom: 34px;
  animation: lift .9s both;
}
.make-intro .kicker { display: block; margin: 0 0 14px; }
.make-intro h2 {
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 56px);
  margin: 0 0 14px;
  line-height: 1.04;
}
.make-intro p {
  font-family: var(--font-quote);
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-neutral-800);
}

.maker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  padding: 0;
  overflow: hidden;
  background: var(--color-divider);
  animation: settle 1s both;
}
.maker-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 44px 34px;
  background: radial-gradient(120% 90% at 50% 10%, var(--color-neutral-100), var(--color-neutral-200));
  min-height: 480px;
}
.stone-caption {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.stone-name {
  margin: 6px 0 0;
  font-weight: 400;
  font-size: 30px;
  text-align: center;
  line-height: 1.15;
}
.stone-words {
  margin: 8px 0 0;
  max-width: 34ch;
  text-align: center;
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-neutral-800);
  min-height: 1px;
}
.stone-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 6px;
}
.stone-topics span {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 99px;
}

.maker-form {
  padding: 36px 34px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--color-bg);
}
.field-label {
  display: block;
  margin: 0 0 9px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
#stone-name-input { font-family: var(--font-heading); font-size: 20px; }
#stone-words-input {
  resize: vertical;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}
#own-topic-input {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices.swatches { gap: 9px; }
.chip {
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  padding: 7px 14px;
  cursor: pointer;
  border-radius: 99px;
  transition: all .25s;
  background: transparent;
  color: var(--color-neutral-700);
  border: 1px solid var(--color-neutral-300);
}
.chip[aria-pressed="true"] {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  border-color: var(--color-accent);
}
.topic-chip { font-size: 12px; padding: 6px 13px; }
.swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid var(--color-neutral-300);
}
.swatch:hover { transform: scale(1.18); }
.swatch[aria-pressed="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-200);
}
.maker-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.maker-note p {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--color-neutral-600);
}
.maker-note .btn { font-size: 12px; letter-spacing: 0.03em; }
.maker-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-divider);
}
.maker-foot p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; }

/* ── 7b. FAQ ─────────────────────────────────────────────────────────── */

#faq { scroll-margin-top: 96px; padding: 86px 0 0; }
.faq-list {
  max-width: 68ch;
  margin: 0 auto;
}
/* One reveal on the whole list rather than one per row: a long list
   flickering in row by row on a slow scroll reads as broken, not gentle. */
.faq-item {
  border-bottom: 1px solid var(--color-divider);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-weight: 400;
  font-size: 19px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  color: var(--color-neutral-500);
  transition: transform .28s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-neutral-700);
  margin: 0 0 22px;
}

/* ── 9. Colophon band ────────────────────────────────────────────────── */

.band {
  margin: 96px -24px 0;
  padding: 78px 56px;
  background: #17130f;
  color: var(--color-neutral-100);
  position: relative;
  overflow: hidden;
  animation: settle 1s both;
}
.ghost {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(160px, 26vw, 340px);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.09;
  font-feature-settings: 'tnum';
  pointer-events: none;
  user-select: none;
}
.band-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 52px;
  align-items: center;
  max-width: 1112px;
  margin: 0 auto;
}
.band-verse { animation: liftLeft 1.1s both; }
.band-why { animation: liftRight 1.1s both; }
.band-ref {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  font-feature-settings: 'tnum';
}
.band-verse blockquote {
  font-family: var(--font-quote);
  font-weight: 300;
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.3;
  margin: 0;
  color: #f6efe2;
}
.band-verse blockquote em { font-style: normal; color: var(--color-accent-300); }
.band-why h2 {
  font-weight: 400;
  font-size: 34px;
  margin: 0 0 16px;
  color: #f6efe2;
}
.band-why p {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--color-neutral-300);
}
.band-why p + p { margin-top: 14px; }
.band-why em {
  font-family: var(--font-quote);
  font-style: italic;
  color: var(--color-accent-300);
}

/* ── 10. Newsletter + support ────────────────────────────────────────── */

#support {
  scroll-margin-top: 96px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
#support .col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: lift .95s both;
}
#support h2 {
  font-weight: 400;
  font-size: 34px;
  margin: 0 0 12px;
  line-height: 1.1;
}
#support .kicker { margin: 0 0 12px; }
#support p { font-size: 16px; }
.airy p { line-height: 1.95; }
.airy p:first-of-type { margin-bottom: 20px; }
.airy p:last-of-type { margin-bottom: 34px; }
.tight p { line-height: 1.72; }
.tight p:first-of-type { margin-bottom: 14px; }
.tight p:last-of-type { margin-bottom: 28px; }
#support .btn { margin-top: auto; }
.support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}
.support-actions .btn { margin-top: 0; }

/* ── 11. Footer ──────────────────────────────────────────────────────── */

/* Full-bleed and dark, in the same ground as the 1 Samuel band, so the page
   closes the way it turned. It breaks out of the centred wrapper the same way
   that band does, by cancelling the page gutter. */
.site-footer {
  margin-top: 96px;
  padding: 72px 56px 34px;
  background: #17130f;
  color: var(--color-neutral-300);
  font-family: var(--font-ui);
}

.footer-inner {
  max-width: 1112px;
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) 2fr;
  gap: 56px;
  padding-bottom: 44px;
}

.footer-wordmark {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 27px;
  letter-spacing: 0.01em;
  color: #f6efe2;
  margin: 0 0 10px;
}
.footer-tagline {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-neutral-400);
  margin: 0 0 18px;
  max-width: 34ch;
}
.footer-mail {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--color-accent-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 203, 141, 0.35);
  padding-bottom: 2px;
  transition: color .28s var(--ease), border-color .28s var(--ease);
}
.footer-mail:hover { color: #ffe3bf; border-color: var(--color-accent-300); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
}
.footer-cols h2 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin: 0 0 16px;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 11px; }
.footer-cols a {
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--color-neutral-300);
  text-decoration: none;
  transition: color .28s var(--ease);
}
.footer-cols a:hover { color: #f6efe2; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid rgba(246, 239, 226, 0.14);
}
.footer-bottom p {
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--color-neutral-500);
  margin: 0;
}
/* The legal pages carry a shorter version of the same footer: a row of links,
   with no columns to fill. */
.footer-bottom-plain { border-top: 0; padding-top: 0; padding-bottom: 24px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
.footer-links a {
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--color-neutral-300);
  text-decoration: none;
  transition: color .28s var(--ease);
}
.footer-links a:first-child {
  font-family: var(--font-heading);
  font-size: 20px;
  color: #f6efe2;
}
.footer-links a:hover { color: #f6efe2; }
.footer-copy {
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--color-neutral-500);
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(246, 239, 226, 0.14);
}

/* ── Keyframes ───────────────────────────────────────────────────────── */

@keyframes breathe { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes ruleGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
/* Blur cannot be composited, so it forces a full repaint of whatever it is
   applied to for as long as it runs. Once these became scroll-driven rather
   than fire-once-at-load, that cost was paid on every frame the reveal was
   in progress. Compressing the blur into the first 40% keeps the softening
   look at the start of the motion while the remaining 60% is a plain,
   compositable transform + opacity change. */
@keyframes lift {
  0% { opacity: 0; transform: translateY(28px); filter: blur(5px) }
  40% { filter: blur(0) }
  100% { opacity: 1; transform: none; filter: blur(0) }
}
@keyframes liftLeft {
  0% { opacity: 0; transform: translateX(-26px); filter: blur(5px) }
  40% { filter: blur(0) }
  100% { opacity: 1; transform: none; filter: blur(0) }
}
@keyframes liftRight {
  0% { opacity: 0; transform: translateX(26px); filter: blur(5px) }
  40% { filter: blur(0) }
  100% { opacity: 1; transform: none; filter: blur(0) }
}
@keyframes settle { from { opacity: 0; transform: translateY(34px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes ghostDrift { from { transform: translate(9%, -50%); opacity: .03 } to { transform: translate(-7%, -50%); opacity: .14 } }
@keyframes revealSoft {
  0% { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px) }
  40% { filter: blur(0) }
  100% { opacity: 1; transform: none; filter: blur(0) }
}

/* Scroll-driven reveals. Every element that should reveal on scroll rather
   than at load carries a `data-reveal` attribute in the HTML, which is the
   single list this block, the pause rules below it, and main.js's
   wireReveals() all key off. Keeping one list rather than three means an
   element that is missing from it fails to reveal consistently everywhere,
   not silently in just one of three places, which is what happened to the
   old `.site-footer` entry here: it had a timeline but no animation-name
   anywhere in this file, and nobody noticed. Where `view()` is unsupported
   the bare `animation:` declarations above still run once at load, so
   nothing can be stranded at opacity 0 even with this whole block absent. */
@supports (animation-timeline: view()) {
  [data-reveal]  { animation-timeline: view(); animation-range: entry 0% cover 30%; }

  #remember      { animation-range: entry 5% cover 28%; }
  .r-head        { animation-range: entry 0% cover 28%; }
  .r-lede        { animation-range: entry 0% cover 32%; }
  .r-intro       { animation-range: entry 0% cover 34%; }
  .r-beat1, .r-quote { animation-range: entry 0% cover 38%; }
  .r-beat2, .r-tail  { animation-range: entry 0% cover 44%; }
  .r-statement   { animation-range: entry 0% cover 48%; }
  .verse:nth-child(1) { animation-range: entry 0% cover 26%; }
  .verse:nth-child(2) { animation-range: entry 0% cover 35%; }
  .verse:nth-child(3) { animation-range: entry 0% cover 44%; }
  #stone         { animation-range: entry 5% cover 26%; }
  #altar         { animation-range: entry 0% cover 30%; }
  #stone .col + .col { animation-range: entry 0% cover 38%; }
  .section-head  { animation-range: entry 0% cover 26%; }
  .promise:nth-child(1) { animation-range: entry 0% cover 26%; }
  .promise:nth-child(2) { animation-range: entry 0% cover 34%; }
  .promise:nth-child(3) { animation-range: entry 0% cover 42%; }
  .make-intro    { animation-range: entry 0% cover 26%; }
  .maker         { animation-range: entry 0% cover 30%; }
  .band          { animation-range: entry 0% cover 20%; }
  .band-verse    { animation-range: entry 0% cover 34%; }
  .band-why      { animation-range: entry 0% cover 42%; }
  #support .col:first-child { animation-range: entry 0% cover 30%; }
  #support .col:last-child  { animation-range: entry 0% cover 38%; }

  /* Decorative and carries no fallback on purpose: a drifting numeral means
     nothing without scroll to drive it, so where `view()` is unsupported it
     simply does not animate, rather than getting an on-load substitute. */
  .ghost {
    animation: ghostDrift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

/* Fallback for browsers without `animation-timeline: view()` (Firefox, at
   least as of this writing). Without this, every [data-reveal] element runs
   its on-load animation once at load and nothing below the fold ever moves
   again when scrolled to, which is indistinguishable from broken. The class
   below is added by an inline script in <head> only when the feature is
   genuinely absent (see index.html), so a browser that does support `view()`
   never touches this rule, and a visitor with JavaScript off gets today's
   on-load behaviour rather than content stuck invisible. main.js's
   wireReveals() adds .is-revealed via IntersectionObserver as each element
   is scrolled to. Only animation-play-state is touched here, never
   animation-name, so the ≤760px override below (which swaps liftLeft/
   liftRight for lift to avoid horizontal overflow) keeps deciding which
   animation runs; this only ever decides when. */
/* !important earns its place here: several reveal targets (#remember, #stone,
   #altar, #stone .col + .col, #support .col) carry their `animation:`
   shorthand on an ID selector, whose implicit `animation-play-state: running`
   sits at ID specificity and would otherwise beat this two-class selector
   regardless of source order. This is the one property either side of that
   toggle is allowed to touch, so overriding it unconditionally is safe. */
.reveal-js [data-reveal]             { animation-play-state: paused !important; }
.reveal-js [data-reveal].is-revealed { animation-play-state: running !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* ── Responsive: single breakpoint at 760px ──────────────────────────── */

@media (max-width: 760px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .bar {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'brand lang' 'nav cta';
    row-gap: 10px;
    column-gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .lang-switch { justify-self: end; }
  .bar .btn { justify-self: end; }
  .site-nav { justify-content: flex-start; gap: 18px; }
  .hero { padding-top: 44px; }
  #how, #promises, #make, #faq { padding-top: 64px; }
  .how-grid { grid-template-columns: 1fr; gap: 36px; }
  .how-step:not(:last-child)::after {
    content: "↓";
    top: auto;
    bottom: -26px;
    right: 50%;
    transform: translateX(50%);
  }
  #remember { padding: 64px 0 48px; text-align: center; }
  .rgrid { grid-template-columns: 1fr; gap: 30px; }
  .rgrid > * { grid-column: 1; grid-row: auto; }
  .col { padding: 36px 22px; }
  .band { margin: 64px -16px 0; padding: 52px 22px; }
  .band-grid { gap: 32px; }
  .ghost { font-size: 140px; opacity: 0.06; }
  .maker-stage { min-height: 340px; padding: 32px 20px; }
  .maker-form { padding: 28px 20px; }
  .site-footer { margin-top: 64px; padding: 52px 22px 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; }
  .footer-cols { gap: 26px; }

  /* One column wide: a sideways reveal would push the document 26px past the
     viewport while it runs, so the paired columns rise instead. */
  .r-lede, .r-intro, .r-beat1, .r-quote, .r-beat2, .r-tail,
  #altar, #stone .col + .col, .band-verse, .band-why {
    animation-name: lift;
  }
}