/* ============================================================
   Wickmate — marketing site
   Identity is inherited from the app, not invented here:
   warm amber #F2A93B as LIGHT (never paint) on near-black #0E0F13,
   cream text, Cinzel display + Nunito Sans body, screens are
   candlelit scenes with a ground plane and one lit thing per view.
   Fonts are SELF-HOSTED on purpose: this site claims to collect
   nothing, and a fonts CDN would falsify that claim.
   ============================================================ */

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #0e0f13;
  --surface: #1a1c22;
  --glass: rgba(26, 28, 34, 0.72);
  --line: rgba(245, 241, 232, 0.12);
  --line-soft: rgba(245, 241, 232, 0.07);
  --text: #f5f1e8;
  --muted: #9aa0aa;
  --muted-warm: #b9a88c;
  --amber: #f2a93b;
  --amber-soft: rgba(242, 169, 59, 0.14);
  --cool: #9db8d6;
  --display: "Cinzel", "Times New Roman", serif;
  --body: "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
  --measure: 38rem;
  --pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ONE vertical rhythm for the whole page. Every gap between two scenes is
     `--space-scene` of padding on each side of the hairline, so the air around
     every rule is identical whether it separates two sections or the campaign
     from its keepers. Nothing else may invent its own section spacing. */
  --space-scene: clamp(5rem, 10vw, 9rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(242, 169, 59, 0.28); color: var(--text); }

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

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; }

.display {
  font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  letter-spacing: 0.015em;
  text-wrap: balance;
  margin-bottom: 0.75rem;
}

.lede {
  color: var(--muted);
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  max-width: var(--measure);
}

/* The app's SectionHeader: tracked eyebrow + a rule that fades right. */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.1rem;
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.kicker::after {
  content: "";
  flex: 0 1 9rem;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  background: var(--amber);
  color: #17130a;
  border: 0;
  cursor: pointer;
  box-shadow:
    0 2px 24px rgba(242, 169, 59, 0.32),
    0 10px 40px rgba(242, 169, 59, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 2px 30px rgba(242, 169, 59, 0.44),
    0 14px 52px rgba(242, 169, 59, 0.2),
    0 6px 16px rgba(0, 0, 0, 0.5);
}
.btn:active { transform: translateY(0); }

/* quiet escape-hatch link, borrowed from the app's `quiet` button */
.btn-quiet {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  color: var(--amber);
  border: 1px solid var(--line);
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-quiet:hover { text-decoration: none; border-color: rgba(242, 169, 59, 0.5); background: var(--amber-soft); }

.cta-note {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---------- header ---------- */

.site-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--pad);
  max-width: 74rem;
  margin: 0 auto;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  color: var(--text);
}
.wordmark:hover { text-decoration: none; color: var(--amber); }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7.5rem var(--pad) 5rem;
  isolation: isolate;
}

.hero-art {
  position: relative;
  width: clamp(150px, 22vw, 210px);
  margin-bottom: 1.25rem;
}
.hero-art img:not(.glow) { position: relative; z-index: 2; }

/* the one light source: a real radial sprite, never a hard-edged disc */
.glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 340%;
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.hero .glow { animation: flicker 4.2s ease-in-out infinite; }

/* the pool the light lands in — the ground plane under the hero */
.ground {
  position: absolute;
  left: 50%;
  bottom: -14%;
  transform: translateX(-50%);
  width: 240%;
  aspect-ratio: 5 / 1;
  background: radial-gradient(ellipse at center, rgba(242, 169, 59, 0.13), transparent 65%);
  z-index: 0;
  pointer-events: none;
}

@keyframes flicker {
  0%, 100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1.035); }
  62% { opacity: 0.88; transform: translate(-50%, -50%) scale(0.985); }
}

.hero .eyebrow {
  color: var(--muted-warm);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.hero .lede { margin: 1.4rem auto 2.2rem; }

/* The one affordance on the fold. It is amber because it has to read as
   something you can act on, but it never competes with the CTA: the button is
   a solid filled pill and this is a thin outline at 45–85% opacity. */
.scroll-hint {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--amber);
  font-size: clamp(2.5rem, 4.5vw, 3.25rem);
  line-height: 1;
  opacity: 0.75;
  text-shadow: 0 0 18px rgba(242, 169, 59, 0.35);
  animation: drift-down 2.4s ease-in-out infinite;
}
/* Travel is short on purpose: a long bounce reads as a gap between the
   arrow and where it started, not as one moving object. */
@keyframes drift-down {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.45; }
  50% { transform: translate(-50%, 5px); opacity: 0.85; }
}

/* The ONE exception to `--space-scene`, and it earns it: the hero is a
   full-viewport scene whose content is centred, so it already ends in a large
   empty band. A full scene gap on top of that band leaves the arrow pointing
   at nothing, which is what made the first section easy to miss. */
.hero + .section { padding-top: calc(var(--space-scene) * 0.55); }

/* ---------- embers (ambient, honored reduced-motion) ---------- */

.embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.embers i {
  position: absolute;
  bottom: -8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0;
  animation: ember-rise linear infinite;
}

/* Each ember's lane, speed and offset. These used to be `style=""` attributes
   on the twelve <i> elements, and they were the ONLY inline styles on the site
   — which meant the whole page needed `style-src 'unsafe-inline'`, the single
   directive that most weakens a CSP. Moving twelve declarations here bought a
   strict `style-src 'self'`. Do not put them back inline.

   The values are deliberately uneven: equal spacing or a shared duration makes
   the embers read as a row of dots pulsing in time, not as air moving. */
.hero .embers i:nth-child(1) { left:  8%; animation-duration: 11s;   animation-delay: 0s; }
.hero .embers i:nth-child(2) { left: 19%; animation-duration: 14s;   animation-delay: 3s; }
.hero .embers i:nth-child(3) { left: 31%; animation-duration: 12s;   animation-delay: 6s; }
.hero .embers i:nth-child(4) { left: 44%; animation-duration: 16s;   animation-delay: 1.5s; }
.hero .embers i:nth-child(5) { left: 57%; animation-duration: 13s;   animation-delay: 8s; }
.hero .embers i:nth-child(6) { left: 68%; animation-duration: 15s;   animation-delay: 4.5s; }
.hero .embers i:nth-child(7) { left: 79%; animation-duration: 12.5s; animation-delay: 10s; }
.hero .embers i:nth-child(8) { left: 90%; animation-duration: 14.5s; animation-delay: 2s; }

.close .embers i:nth-child(1) { left: 14%; animation-duration: 12s; animation-delay: 1s; }
.close .embers i:nth-child(2) { left: 38%; animation-duration: 15s; animation-delay: 5s; }
.close .embers i:nth-child(3) { left: 63%; animation-duration: 13s; animation-delay: 2.5s; }
.close .embers i:nth-child(4) { left: 86%; animation-duration: 14s; animation-delay: 7s; }
@keyframes ember-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.55; }
  60% { opacity: 0.3; }
  100% { transform: translateY(-72vh) translateX(2.2rem); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .embers i, .hero .glow, .scroll-hint { animation: none; }
  .embers { display: none; }
}

/* ---------- sections ---------- */

.section {
  position: relative;
  max-width: 74rem;
  margin: 0 auto;
  padding: var(--space-scene) var(--pad);
}

/* One hairline between every scene, not just around the vow. The rule is
   the same weight everywhere so the page reads as evenly-spaced chapters. */
.section + .section { border-top: 1px solid var(--line-soft); }
.close::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(74rem, 100%);
  height: 1px;
  background: var(--line-soft);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split > .copy { max-width: 34rem; }
.split.flip > .copy { order: 2; }
.split.flip > .stage { order: 1; }

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > .copy, .split > .copy { order: 1; }
  .split.flip > .stage, .split > .stage { order: 2; }
}

/* ---------- the phone as a lantern-object on the table ---------- */

.stage {
  position: relative;
  display: flex;
  justify-content: center;
  isolation: isolate;
}
.stage .glow { width: 175%; opacity: 0.85; }
.stage::after {
  /* contact pool under the device — light lands on the table */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2.4rem;
  transform: translateX(-50%);
  width: 120%;
  height: 5rem;
  background: radial-gradient(ellipse at center, rgba(242, 169, 59, 0.16), transparent 62%);
  z-index: 0;
}

.phone {
  position: relative;
  z-index: 2;
  width: min(300px, 78vw);
  border-radius: 44px;
  padding: 11px;
  background: linear-gradient(180deg, #23252d, #101116);
  border: 1px solid rgba(245, 241, 232, 0.14);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.65),
    0 6px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(245, 241, 232, 0.08);
}
.phone img { border-radius: 34px; width: 100%; }

/* facts that stand beside the device, not icon-cards */
.facts {
  list-style: none;
  margin-top: 1.6rem;
  display: grid;
  gap: 0.85rem;
}
.facts li {
  position: relative;
  padding-left: 1.65rem;
  color: var(--text);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(242, 169, 59, 0.8);
}
.facts li small { display: block; color: var(--muted); font-size: 0.9375rem; }

/* ---------- keepers row ---------- */

/* The keepers are their own scene inside the campaign section, so they get the
   same rule and the same air as a real section boundary: `--space-scene` above
   the hairline, `--space-scene` below it. */
.keepers {
  margin-top: var(--space-scene);
  padding-top: var(--space-scene);
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
}
@media (max-width: 640px) {
  .keepers { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; }
}
.keeper { text-align: center; }
.keeper .art {
  position: relative;
  isolation: isolate;
  margin-bottom: 0.4rem;
}
.keeper .art img:not(.glow) { position: relative; z-index: 1; }
.keeper .art .glow { width: 135%; opacity: 0.55; }
.keeper h3 {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}
.keeper p { color: var(--muted); font-size: 0.9375rem; max-width: 17rem; margin: 0.25rem auto 0; }
.keeper .elo { color: var(--cool); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; }

/* Keeper fires are never the brand amber — each carries its own hue from the
   app's `keeperFlame` table. These are three separate PRE-TINTED sprites, built
   by `build-keeper-glows.py`, not a CSS filter on the shared amber one: filters
   only approximate a hue rotation and cannot reach Vesper's violet at all.
   To change a keeper's fire, change it in the app's tokens and re-run that
   script — never hardcode a colour here. */

/* ---------- the vow (honesty block) ---------- */

/* `.vow` deliberately declares no border and no padding: `.section + .section`
   draws its rule and `--space-scene` sets its air, same as every other scene.
   An override here would put one scene on a different rhythm from the other five. */
.vow blockquote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.25;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.vow blockquote em { font-style: normal; color: var(--amber); }

.vow-list {
  list-style: none;
  margin: 2.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.9rem;
}
.vow-list li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  color: var(--muted-warm);
  font-size: 0.9375rem;
  background: rgba(26, 28, 34, 0.5);
}

/* ---------- FAQ ---------- */

.faq { max-width: 44rem; margin: 0 auto; }
.faq h2 { text-align: center; margin-bottom: 2.2rem; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq details:first-of-type { border-top: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  font-weight: 700;
  font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--amber);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0.25rem 1.3rem; color: var(--muted); max-width: 40rem; }

/* ---------- final CTA ---------- */

.close {
  position: relative;
  text-align: center;
  isolation: isolate;
  padding-top: var(--space-scene);
  padding-bottom: var(--space-scene);
}
.close .hero-art { width: 150px; margin: 0 auto 1.75rem; }
.close h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.close .lede { margin: 1.1rem auto 2.2rem; }

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

.site-foot {
  border-top: 1px solid var(--line-soft);
  padding: 2.6rem var(--pad) 3.2rem;
}
.site-foot .inner {
  max-width: 74rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  justify-content: space-between;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--amber); }
.site-foot .brand { font-family: var(--display); letter-spacing: 0.12em; color: var(--muted-warm); }

/* ---------- scroll reveal (JS adds .reveal-armed to <html>) ---------- */

.reveal-armed .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-armed .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-armed .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Legal / support pages
   ============================================================ */

.doc {
  max-width: 46rem;
  margin: 0 auto;
  padding: 6.5rem var(--pad) 4rem;
}
.doc .back {
  display: inline-block;
  font-size: 0.875rem;
  margin-bottom: 2.2rem;
}
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 0.5rem; }
.doc .updated { color: var(--muted); font-size: 0.875rem; margin-bottom: 0.75rem; }
.doc .tldr {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  margin: 1.8rem 0 1rem;
}
.doc h2 {
  font-size: 1.35rem;
  margin: 2.6rem 0 0.7rem;
  letter-spacing: 0.02em;
}
.doc p { margin-bottom: 0.95rem; }
.doc ul { margin: 0 0 0.95rem 1.25rem; }
.doc li { margin-bottom: 0.55rem; }
.doc .note { color: var(--muted); font-size: 0.9375rem; }
.doc footer {
  border-top: 1px solid var(--line-soft);
  margin-top: 3rem;
  padding-top: 1.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}