/* Splash-only layout, layered over the production theme.css that build.sh copies in
   beside it. Tokens, .btn, .input, .eyebrow, .foil and .wordmark are the real ones.

   Follows docs/design/handoff/design_handoff_splash_coming_soon (high fidelity: colours,
   type, spacing, copy and animation are final). Deviations from the prototype are marked
   DEVIATION and are production concerns only, never design changes. */

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  /* DEVIATION: the handoff asks for `overflow: hidden` — one fixed screen, no scroll.
     Taken literally that silently swallows content: at 360x640 the stage needs 703px, so
     the form and fine print sat below the fold with no way to reach them. Scrolling
     vertically only when the content genuinely does not fit keeps the intended
     single-screen composition on every normal viewport and never hides the one thing the
     page exists to show. Horizontal stays hidden — nothing should ever overflow sideways. */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  /* Stage takes the slack, footer sits under it. When everything fits this is pixel-wise
     identical to the prototype's centred stage + bottom-fixed footer; when it does not,
     the footer moves down with the content instead of covering it. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }

.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;
}

/* ---- layers --------------------------------------------------------------- */

.splash-art { position: fixed; inset: 0; overflow: hidden; }
.splash-art img.hero-base {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* splash-fx.js maps canvas uv -> image uv against THIS crop. The two must agree:
     see COVER_POS_Y in splash-fx.js, which is 0.48 to match. */
  object-position: center 48%;
}
/* Named .splash-scrim, not .scrim: theme.css already owns .scrim and puts a
   backdrop-filter: blur(7px) on it, which would frost the whole painting. */
.splash-scrim {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 46%, rgba(16,15,11,0.6) 100%),
    linear-gradient(180deg, rgba(16,15,11,0.42), transparent 24%, transparent 64%, rgba(16,15,11,0.8) 100%);
}

/* ---- stage ---------------------------------------------------------------- */

.stage {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 48px 24px 40px;
  gap: 0;
}

.seal-mount .seal { width: 76px; height: 76px; display: block; }

.wordmark {
  font-family: var(--display); font-weight: 700;
  font-size: 34px; letter-spacing: 0.08em;
  color: var(--gold);
  margin: 18px 0 26px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6);
  text-transform: none;            /* theme's .wordmark lowercases; the mark is already lowercase */
}

/* The theme's .eyebrow is `white-space: nowrap` ("a proclamation never breaks mid-line")
   and its flanking rules give way under pressure. This label is long enough that even with
   the rules fully collapsed it wants 354px inside a 312px box at 360 wide. Let it wrap on
   small phones: two centred lines of small caps reads correctly, and unlike shrinking the
   type it cannot fail again if the copy changes. Scoped to the splash — the global rule
   serves other pages. */
.stage .eyebrow { max-width: 100%; }
@media (max-width: 430px) {
  .stage .eyebrow { white-space: normal; }
}

.stage h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.08; letter-spacing: 0.01em;
  margin: 18px 0 0;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(0,0,0,0.65);
  max-width: 100%;
}
.stage h1 .foil {
  background: linear-gradient(180deg,#F4E3B2 0%,#ECCE85 32%,#CBA35C 56%,#B08A3E 78%,#E8C87E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.steward-line {
  font-family: var(--serif); font-style: italic;
  font-size: 20px; color: var(--cream-dim);
  line-height: 1.5; max-width: 52ch;
  margin: 18px auto 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
}

/* ---- the writ ------------------------------------------------------------- */

.writ {
  display: flex; gap: 10px;
  justify-content: center; flex-wrap: wrap;
  margin-top: 34px;
  max-width: 100%;                 /* DEVIATION: a flex row that sizes to max-content is
                                      never under pressure, so it would overhang rather
                                      than wrap. Capping the container is what makes the
                                      handoff's "wraps on mobile" actually happen. */
}
.writ .input {
  width: min(320px, 72vw);
  min-width: 0;
  background: rgba(16,15,11,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* DEVIATION: 44px minimum touch target on both controls (theme .input is already 16px,
   so there is no iOS zoom-on-focus problem to solve here). */
.writ .input, .writ .btn { min-height: 46px; }

/* Honeypot. Clipped rather than pushed to left:-9999px: the off-screen version still
   counted toward the document's scroll width and reported 18px of phantom horizontal
   overflow at 360px. Still not display:none — bots that skip hidden fields must see it. */
/* Honeypot. One 1px input pinned to a known origin — explicit left/top, because an
   auto-positioned absolute resolves to its STATIC position (the end of the flex row,
   x=341 on a 360px screen) and takes its content out past the viewport with it.
   Not display:none: bots that skip hidden fields must still see it. */
.writ-hp {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
}

.fine { font-size: 13px; color: var(--cream-mut); margin-top: 14px; }

/* DEVIATION: the prototype has no failure path. A live form needs one. */
.writ-status { font-size: 14px; margin: 10px 0 0; min-height: 1.3em; color: var(--cream-dim); }
.writ-status.is-bad { color: var(--blood); }

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

footer {
  position: relative; z-index: 2;   /* in flow, not fixed — see the note on body */
  flex: none;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 0 24px 26px;
  pointer-events: none;            /* decorative; the one real link re-enables itself */
}
.foot-steward { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--cream-mut); }
.foot-mark { font-family: var(--display); font-size: 11px; letter-spacing: 0.26em; color: var(--gold-lo); }
.foot-legal {
  pointer-events: auto;
  color: var(--cream-mut); font-size: 12px; text-decoration: none;
  /* 44px of target without a 44px-looking box — padding alone cannot get there from a
     12px line. */
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px; margin: -12px 0 -14px;
}
.foot-legal:hover { color: var(--cream-dim); text-decoration: underline; }

/* ---- privacy page --------------------------------------------------------- */
/* Same brand, none of the splash's single-screen machinery: this one is a document, so
   it scrolls normally and carries no art layer or WebGL. */

.legal-body { overflow: auto; min-height: auto; display: block; background: var(--ink); }

.legal { max-width: 820px; margin: 0 auto; padding: 40px 20px 64px; }
.legal-head { text-align: center; margin-bottom: 26px; }
/* Block-level flex, not inline-flex: the eyebrow below is itself inline-flex, so an
   inline brand lockup shares its line and the two collide. */
.legal-brand {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  text-decoration: none; margin-bottom: 22px; max-width: 100%;
}
.legal-head .eyebrow { max-width: 100%; }
.legal h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 5vw, 40px); line-height: 1.1;
  color: var(--cream); margin: 12px 0 0;
}
.legal-lede {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--cream-dim);
  margin: 10px auto 0; max-width: 46ch;
}
.legal-panel section + section { margin-top: 26px; }
.legal-panel h2 {
  font-family: var(--display); font-size: 20px;
  color: var(--ink-on-parch); margin: 0 0 8px;
}
.legal-panel p {
  font-size: 14.5px; line-height: 1.65;
  color: var(--ink-on-parch-dim); margin: 0 0 10px;
}
.legal-panel a { color: var(--gold-deep); text-decoration: underline; }
.legal-back { text-align: center; margin: 26px 0 0; }
.legal-back a {
  color: var(--cream-mut); font-size: 13.5px; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
}
.legal-back a:hover { color: var(--cream-dim); text-decoration: underline; }

@media (max-width: 560px) {
  .legal { padding: 28px 18px 48px; }
  .legal-head .eyebrow { white-space: normal; }
}

/* ---- entrance ------------------------------------------------------------- */

.rise { opacity: 0; animation: fadeUp 0.9s cubic-bezier(.2,.8,.3,1) forwards; }
.d1 { animation-delay: .1s }
.d2 { animation-delay: .25s }
.d3 { animation-delay: .4s }
.d4 { animation-delay: .55s }
.d5 { animation-delay: .7s }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; }
}

/* ---- tight viewports ------------------------------------------------------ */

@media (max-height: 640px) {
  .stage { padding: 32px 24px 28px; }
  .wordmark { margin: 12px 0 14px; }
  .seal-mount .seal { width: 60px; height: 60px; }
  .steward-line { font-size: 18px; margin-top: 14px; }
  .writ { margin-top: 24px; }
}