/* ============================================================
   PERSIST — shared theme
   Quiet discipline · minimalist · dark mode · athletic grotesque
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Oswald:wght@500;600;700&display=swap');

/* Page transitions are handled manually by transition.js (the black veil
   descent / crossfade). We do NOT opt into the browser's automatic
   cross-document view transition: when a navigation interrupts/skips it,
   it raises a benign but noisy "Transition was skipped" promise rejection.
   The veil already covers the navigation, so nothing is lost. */
@view-transition { navigation: none; }

:root{
  /* cool near-black base */
  --ink-900:#0c0e10;
  --ink-850:#101316;
  --ink-800:#15181c;
  --ink-750:#1b1f24;
  --ink-700:#23282e;
  --line:#2a3036;
  --line-soft:#1f242a;

  /* type */
  --paper:#f3f5f6;     /* off white */
  --paper-dim:#c3cace; /* muted light */
  --mute:#8b949b;      /* secondary gray */
  --mute-2:#5e676d;    /* tertiary */

  /* accents — same L/C, hue varies (oklch) */
  --accent:#cfd6da;                       /* minimal: neutral light */
  --accent-green:oklch(0.74 0.085 152);
  --accent-blue:oklch(0.72 0.085 244);

  --display:'Oswald',sans-serif;
  --sans:'Archivo',sans-serif;

  --r:3px;
}

/* per-direction accent override */
[data-accent="green"]{ --accent:var(--accent-green); }
[data-accent="blue"]{  --accent:var(--accent-blue);  }

*{ box-sizing:border-box; }

.p-root{
  width:100%; height:100%;
  background:var(--ink-900);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow:hidden;
}

/* faint vertical grain so flat black isn't dead */
.p-grain{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.035), transparent 60%);
}

/* ---- wordmark / nav ---- */
.p-word{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.p-nav{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:30px 44px;
  z-index:5;
}
.p-nav .p-word{ font-size:17px; letter-spacing:.40em; }
.p-nav-links{
  display:flex; gap:34px; align-items:center;
}
.p-nav-links a{
  color:var(--mute); text-decoration:none;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; white-space:nowrap;
}
.p-nav-links a:hover{ color:var(--paper); }

/* ---- kicker ---- */
.p-kick{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--mute); font-weight:600; white-space:nowrap;
}
.p-kick::before{
  content:""; width:24px; height:1px; background:var(--accent); opacity:.9;
}
.p-kick.solo::before{ display:none; }

/* ---- big statement (athletic condensed) ---- */
.p-state{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  margin:0;
}

/* ---- buttons ---- */
.p-btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:700;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--r);
  background:var(--paper); color:var(--ink-900);
  border:1px solid var(--paper); cursor:pointer;
  text-decoration:none; white-space:nowrap;
}
.p-btn:hover{ background:transparent; color:var(--paper); }
.p-btn-ghost{
  background:transparent; color:var(--paper); border:1px solid var(--line);
}
.p-btn-ghost:hover{ border-color:var(--paper); background:transparent; }
.p-btn .arw{ font-size:14px; }

/* ---- inline email capture ---- */
.p-capture{
  display:flex; align-items:stretch; max-width:430px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-850); overflow:hidden;
}
.p-capture input{
  flex:1; background:transparent; border:0; outline:none;
  color:var(--paper); font-family:var(--sans); font-size:13.5px;
  padding:0 18px; letter-spacing:.02em;
}
.p-capture input::placeholder{ color:var(--mute-2); }
.p-capture button{
  border:0; cursor:pointer; background:var(--accent); color:var(--ink-900);
  font-family:var(--sans); font-weight:700; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; padding:0 22px;
  white-space:nowrap;
}
.p-capture button:hover{ filter:brightness(1.08); }

/* ---- placeholder image slot ---- */
.p-slot{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--ink-800) 0 11px, var(--ink-850) 11px 22px);
  border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
}
.p-slot span{
  font-family:'Oswald',monospace; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute-2);
  border:1px dashed var(--line); padding:7px 12px; border-radius:2px;
  background:rgba(12,14,16,.5);
}

/* tiny meta row */
.p-meta{
  display:flex; gap:26px; align-items:center;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute-2); font-weight:600;
}
.p-meta b{ color:var(--paper-dim); font-weight:700; }
.p-meta span{ white-space:nowrap; }
.p-dot{ width:4px;height:4px;border-radius:50%;background:var(--accent); }

/* ============================================================
   Scroll choreography — JS-driven (reveal.js).
   "Emerge from the mist": content condenses out of the fog with a
   blur + rise; big statements rise line-by-line behind a mask.
   Hidden states are armed ONLY when reveal.js adds html.rv-on, so
   no-JS / reduced-motion users always see fully-painted content.
   ============================================================ */

/* top progress hairline (driven by lava.js — body-level, paints reliably) */
.scroll-prog{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--mute); z-index:60; pointer-events:none;
  box-shadow:0 0 12px rgba(139,148,155,.35);
}

@media (prefers-reduced-motion: no-preference){
  /* initial hidden states only — reveal.js tweens these to visible via
     rAF (CSS transitions don't advance reliably in this renderer) */
  html.rv-on [data-reveal]:not(.rv-split),
  html.rv-on [data-reveal-group] > *{
    opacity:0;
    transform:translate3d(0, var(--rv-y,26px), 0);
    filter:blur(var(--rv-blur,11px));
  }
  /* headline line rise — soft, no hard clip so wide centered headlines
     never get cropped; the blur sells "condensing out of the fog" */
  html.rv-on .rv-split{ opacity:1; }
  html.rv-on .rv-linemask{ display:block; }
  html.rv-on .rv-line{
    display:block;
    opacity:0;
    transform:translate3d(0,40px,0);
    filter:blur(9px);
  }
}

/* ============================================================
   Page transition veil (transition.js).
   "Descent into the dark": Pre-order sinks the page into black,
   the wordmark surfaces with a drawn hairline, then the next
   page emerges from the same darkness.
   ============================================================ */
.pst-veil{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  visibility:hidden;
}
.pst-veil.show{ visibility:visible; }
.pst-veil-bg{
  position:absolute; inset:0;
  background:#08090a;   /* flat near-black — matches the canvas base so the
                           veil blends seamlessly and never glows in the centre */
  opacity:0;
}
.pst-veil-core{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; opacity:0;
}
.pst-veil-line{ width:0; height:1px; background:var(--accent); opacity:.85; }
.pst-veil-word{
  font-family:var(--sans); font-weight:800; text-transform:uppercase;
  font-size:16px; letter-spacing:.42em; color:var(--paper);
  opacity:0; transform:translateY(7px); white-space:nowrap;
  /* nudge optical centering against the wide tracking */
  padding-left:.42em;
}
.pst-veil-sub{
  font-family:var(--sans); font-weight:600; text-transform:uppercase;
  font-size:10px; letter-spacing:.32em; color:var(--mute);
  opacity:0; transform:translateY(7px); padding-left:.32em; white-space:nowrap;
}
.pst-veil.fade-mode .pst-veil-core{ display:none; }

@media (prefers-reduced-motion: reduce){
  .pst-veil{ display:none !important; }
}