/* ==========================================================================
   Fablepost — landing

   Colours come from the shipping app's light theme: src/constants/theme.ts
   (palette, BRAND_GRADIENT) and src/constants/emotions.ts (emotion chips).
   Two roles are added, and only two, because the app has no equivalent: text
   colours dark enough to carry body copy at 4.5:1 (the app's tx2/tx3 are
   11-13px hint colours), and a control-boundary colour that clears 3:1. Both
   are commented where they are defined.
   ========================================================================== */

@font-face{font-family:Lora;src:url(fonts/Lora-400Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url(fonts/Lora-400Regular_Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Lora;src:url(fonts/Lora-600SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url(fonts/Lora-700Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url(fonts/Lora-700Bold_Italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}

:root{
  /* app light theme, verbatim */
  --pg:#faf3e2; --cd:#fffdf8; --c1:#f6efdc; --c2:#efe7cf;
  --bd:#e9dfc9; --bd2:#dbceb2; --tx:#141414; --tx1:#232323; --acc:#b06e14;
  /* app dark theme, used by the closing band and the footer */
  --d-pg:#101012; --d-tx:#f5f5f4; --d-bd:#2e2e33; --d-acc:#f0ac4a;

  /* Added: the app's tx2 (#7a6f57) and tx3 (#a89b7d) are hint colours for
     11-13px chrome and drop under 4.5:1 as body copy on parchment. These are
     the same hues, darkened until they clear it on the deepest ground. */
  --fg2:#5f5645; --fg3:#726750;
  /* Added: a control boundary at 3:1 — the app's bd2 (#dbceb2) is a 1.5:1 hairline. */
  --line-strong:#a68f66;

  /* BRAND_GRADIENT (theme.ts), with the wine stop pushed past the label box so
     dark text on the button keeps 4.5:1 across the whole word. */
  --brand:linear-gradient(148deg,#f5c04a 0%,#d4791f 72%,#a8395e 100%);
  --btn-tx:#180b01;

  --rail:clamp(1.25rem,5vw,3rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0;background:var(--pg);color:var(--tx);
  font-family:Lora,Georgia,"Times New Roman",serif;
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);line-height:1.65;
  font-variant-ligatures:common-ligatures;
  -webkit-font-smoothing:antialiased;
}
svg{max-width:100%}
h1,h2{margin:0;font-weight:700;line-height:1.14;letter-spacing:-.024em;text-wrap:balance}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute}
.wrap{width:min(1120px,100% - var(--rail)*2);margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--tx);color:var(--pg);padding:.7rem 1.1rem;border-radius:0 0 10px 0}
.skip:focus{left:0}
:where(a,button,input):focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:5px}

/* ── masthead ───────────────────────────────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:40;background:rgba(250,243,226,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.masthead__bar{width:min(1120px,100% - var(--rail)*2);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit}
.brand__mark{width:29px;height:29px;flex:none}
.brand__name{font-weight:700;font-size:1.15rem;letter-spacing:-.02em}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-weight:600;font-size:1rem;
  padding:.85rem 1.4rem;border-radius:12px;border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  background:var(--brand);color:var(--btn-tx);
  box-shadow:0 1px 2px rgba(90,40,10,.14),0 8px 20px -10px rgba(168,57,94,.5);
  transition:transform .18s var(--ease),box-shadow .22s var(--ease);
}
.btn:hover{transform:translateY(-1.5px);box-shadow:0 2px 4px rgba(90,40,10,.16),0 14px 28px -12px rgba(168,57,94,.58)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.5rem 1rem;font-size:.94rem;border-radius:10px}
/* Secondary action. Surface and 3:1 boundary are the control roles already defined
   above, so the brand gradient stays on exactly one button per block. The padding is
   the primary's minus the 1.5px border, so the two sit at the same height. */
.btn--ghost{background:var(--cd);color:var(--tx);border:1.5px solid var(--line-strong);
  padding:calc(.85rem - 1.5px) calc(1.4rem - 1.5px);box-shadow:none}
.btn--ghost:hover{border-color:#8a7449;box-shadow:none}

/* ── type ───────────────────────────────────────────────────────────────── */
.display{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.4rem);line-height:1.04;letter-spacing:-.035em}
.display em{font-style:italic;display:block;color:var(--acc)}
.display--sm{font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem)}
.lede{font-size:clamp(1.09rem,1.02rem + .38vw,1.3rem);line-height:1.55;color:var(--fg2)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{
  background:radial-gradient(120% 80% at 50% 0%,#ffffff 0%,#fbf4e4 46%,#f4e9d2 100%);
  padding-top:clamp(3.5rem,8vw,6.5rem);padding-bottom:clamp(3rem,6vw,5rem);
}
.hero__in{display:grid;justify-items:center;text-align:center;gap:1.5rem}
.hero .display{max-width:16ch}
.hero .lede{max-width:48ch}
.hero .get{margin-top:.4rem}

/* ── get the app ────────────────────────────────────────────────────────── */
.get{width:min(34rem,100%)}
.get__row{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.get__alt{font-size:.94rem;color:var(--fg2);margin-top:.85rem}
.get__note{font-size:.88rem;color:var(--fg3);margin-top:.45rem}
@media(max-width:520px){
  .get__row{flex-direction:column}
  .get__row .btn{width:100%}
}

/* ── device shots ───────────────────────────────────────────────────────── */
.shotwrap{margin-top:clamp(2.5rem,6vw,4.5rem)}
.shot{margin:0;display:flex;justify-content:center}
.shot--hero .device{width:min(414px,100%)}
.device{
  width:min(384px,100%);
  background:var(--cd);
  border:1px solid var(--bd2);border-radius:30px;padding:7px;
  box-shadow:0 2px 4px rgba(60,42,16,.05),0 34px 60px -30px rgba(60,42,16,.4);
}
.scr{background:var(--pg);border-radius:24px;overflow:hidden;position:relative;
  display:flex;flex-direction:column}
.scr--tall{height:520px}
.scr--rules{height:498px}
.scr__nav{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;
  background:var(--c1);border-bottom:1px solid var(--bd)}
.scr__nav--sheet{justify-content:space-between}
.scr__nav--sheet b{font-size:.95rem;font-weight:600}
.scr__back{width:19px;height:19px;flex:none;color:var(--tx)}
.scr__spacer{width:19px;flex:none}
.scr__save{font-size:.9rem;font-weight:600;color:#8a5410}
.scr__titles{flex:1;display:grid;justify-items:center;line-height:1.25}
.scr__titles b{font-size:.96rem;font-weight:600}
.scr__titles i{font-size:.72rem;font-style:normal;color:var(--fg3)}
.scr__bar{display:flex;align-items:center;gap:.55rem;
  padding:.7rem .8rem;background:var(--c1);border-top:1px solid var(--bd)}
.scr__field{flex:1;font-size:.86rem;color:var(--fg3);
  padding:.5rem .7rem;border:1.5px solid var(--bd2);border-radius:18px;background:var(--pg)}
.scr__send{width:34px;height:34px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(148deg,#f5c04a 0%,#d4791f 52%,#a8395e 100%)}
.scr__send svg{width:17px;height:17px;color:#fff}
.scr__fade{position:absolute;left:0;right:0;bottom:0;height:74px;
  background:linear-gradient(rgba(250,243,226,0),var(--pg))}

/* ── chat ───────────────────────────────────────────────────────────────── */
.chat{padding:1rem;display:grid;gap:1.05rem;background:var(--cd)}
.msg{display:flex;gap:.65rem}
.msg__b{min-width:0}
.msg__meta{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:.12rem}
.msg__meta b{font-size:.87rem;font-weight:600}
.msg p{font-size:.92rem;line-height:1.5;color:var(--tx1)}
.narr{background:var(--c1);border:1px solid var(--bd);border-radius:10px;padding:.65rem .85rem}
.narr b{display:block;font-size:.63rem;font-weight:700;color:#8a5b0e;
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:.22rem}
.narr p{font-size:.9rem;line-height:1.42;font-style:italic;color:var(--tx1)}
/* InitialsAvatar picks bg/text from a hash of the name and takes the emotion only as
   its ring, so the inline custom properties carry the app's real pairing. */
.ava{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:.73rem;font-weight:700;border:2px solid var(--ring);background:var(--abg);color:var(--atx)}
.ava--xl{width:78px;height:78px;font-size:1.5rem}
.ava--noring{border:0}
/* EMOTION_COLORS.light chips: filled, uppercase, no ring (chats/[id].tsx emoChip) */
.emo{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:.13rem .42rem;border-radius:99px;color:var(--atx);background:var(--abg)}
.emo[data-emo="neutral"]{--abg:#ededf0;--atx:#5d5d66}
.emo[data-emo="surprised"]{--abg:#f1e7fa;--atx:#7d43ab}
.emo[data-emo="scared"]{--abg:#ddf0e9;--atx:#22755d}

/* ── character sheet ────────────────────────────────────────────────────── */
.sheet{padding:1.1rem 1rem;display:grid;gap:.5rem;background:var(--pg)}
.sheet__top{display:grid;justify-items:center;gap:.4rem;margin-bottom:.5rem}
.sheet__tag{font-size:.78rem;color:var(--fg3)}
.fld__l{font-size:.68rem;font-weight:600;color:var(--fg2);margin-top:.4rem;
  text-transform:uppercase;letter-spacing:.06em}
.fld__row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-top:.35rem}
.fld__row .fld__l{margin-top:0}
.fld__c{font-size:.74rem;color:var(--fg3)}
.fld{font-size:.9rem;padding:.6rem .7rem;border:1.5px solid var(--bd2);
  border-radius:10px;background:var(--pg);color:var(--tx)}
.fld--tall{min-height:3.1rem}
/* ── rules screen ───────────────────────────────────────────────────────── */
.rules{display:flex;flex-direction:column;height:100%;background:var(--pg)}
.rules__head{padding:1rem 1rem .55rem}
.rules__head b{font-size:1.4rem;font-weight:700;display:block;letter-spacing:-.02em}
.rules__sys{display:flex;align-items:center;gap:.35rem;margin-top:.1rem}
.rules__mark{width:15px;height:15px}
.rules__sys i{font-size:.82rem;font-style:normal;color:var(--fg2)}
.rules__body{display:flex;gap:.4rem;padding:0 .55rem;flex:1;min-height:0}
.rail{width:66px;flex:none;display:grid;gap:2px;align-content:start}
.rail__i{display:grid;justify-items:center;gap:2px;padding:.42rem .1rem;border-radius:10px;
  position:relative;color:var(--fg3)}
.rail__i svg{width:19px;height:19px;color:currentColor}
.rail__i i{font-size:.6rem;font-style:normal;color:currentColor}
.rail__i.is-on{background:var(--c1);color:var(--acc)}
.rail__i.is-on i{color:var(--tx)}
.rail__i.is-on::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:2.5px;
  border-radius:2px;background:var(--acc)}
.page{flex:1;min-width:0;background:var(--c1);border:1px solid var(--bd);
  border-radius:14px;padding:.85rem;display:grid;gap:.25rem;align-content:start}
.page__vis{background:var(--pg);border:1px solid var(--bd);border-radius:10px;
  display:grid;place-items:center;padding:1.1rem;margin-bottom:.35rem}
.page__mark{width:52px;height:52px}
.page__n{font-size:.68rem;color:var(--fg3)}
.page__t{font-size:1.02rem;font-weight:700}
.page__i{font-size:.82rem;color:var(--fg2)}
.page p{font-size:.8rem;line-height:1.5;color:var(--tx1);margin-top:.3rem}

/* ── facts ──────────────────────────────────────────────────────────────── */
/* First deep band. The hero's radial resolves to #f4e9d2 at its foot, which is 1.025:1
   against this ground — no perceptible step — so this is the one seam the hairline still
   has to draw. Every later band change carries itself and drops its rule. */
.facts{background:var(--c2);padding-block:clamp(3.5rem,7vw,5.5rem);border-top:1px solid var(--bd)}
.facts__in{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:780px){.facts__in{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facts h2{font-size:1.16rem;margin-bottom:.4rem}
.facts p{color:var(--fg2);font-size:.97rem;max-width:34ch}

/* ── features ───────────────────────────────────────────────────────────── */
/* The two feature sections alternate ground rather than sharing one. Both used to be
   --pg divided by a --bd hairline, which is 1.20:1 on that ground: the page read as a
   single block from facts to close. --pg against --c2 is 1.117:1, the widest step the
   palette holds. The hairline is gone with it — a rule *and* a tone change at the same
   edge reads as a seam laid over a join. Grounds only from here down. */
.feature{background:var(--pg);padding-block:clamp(4.5rem,9vw,8rem)}
.feature--rev{background:var(--c2)}
.feature__in{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .feature__in{grid-template-columns:minmax(0,1fr) minmax(0,384px)}
  /* Both tracks are placed explicitly, row included. `order` alone would leave the text
     in the 384px track; a grid-column without a grid-row is worse — auto-placement
     cannot move the cursor backwards, so the second child drops to a new row and the
     section renders as two stacked half-empty bands. */
  .feature__text{grid-column:1;grid-row:1}
  .feature .shot{grid-column:2;grid-row:1}
  .feature--rev .feature__in{grid-template-columns:minmax(0,384px) minmax(0,1fr)}
  .feature--rev .shot{grid-column:1;grid-row:1}
  .feature--rev .feature__text{grid-column:2;grid-row:1}
}
.feature__text{display:grid;gap:1.1rem;align-content:start}
.feature h2{font-size:clamp(1.9rem,1.3rem + 2vw,2.7rem)}
.feature__text p{color:var(--fg2);font-size:clamp(1.03rem,1rem + .28vw,1.16rem);max-width:44ch}
.feature__text em{font-style:italic;color:var(--tx)}
.feature__small{font-size:.97rem!important;color:var(--fg3)!important}

/* ── beta ───────────────────────────────────────────────────────────────── */
/* Light band, closing the alternation before the dark close. Rising off the deep
   feature above it is the ground change; no rule. */
.beta{background:var(--pg);padding-block:clamp(3.5rem,7vw,5.5rem)}
.beta h2{font-size:1.3rem;margin-bottom:1.6rem}
.honest{margin:0;display:grid;gap:1.3rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.honest{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 3rem}}
.honest dt{font-weight:600;font-size:.85rem;color:#8a5410;margin-bottom:.25rem}
.honest dd{margin:0;font-size:.97rem;color:var(--fg2);line-height:1.55;max-width:52ch}
.honest div:first-child dd{color:var(--tx)}

/* ── close ──────────────────────────────────────────────────────────────── */
.close{background:var(--d-pg);color:var(--d-tx);padding-block:clamp(4.5rem,9vw,7.5rem)}
.close__in{display:grid;justify-items:center;text-align:center;gap:2rem}
.close .display em{color:var(--d-acc)}
.get--dark .btn--ghost{background:#1c1c1f;border-color:#6a6a76;color:var(--d-tx)}
.get--dark .btn--ghost:hover{border-color:var(--d-acc)}
.get--dark .get__alt,.get--dark .get__note{color:#a6a6ad}
.close :where(a,button,input):focus-visible{outline-color:var(--d-acc)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:#0b0a0c;color:#a6a6ad;padding-block:2.4rem}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.foot .brand{color:var(--d-tx)}
.foot__line{font-style:italic;font-size:.93rem}
.foot__nav{display:flex;gap:1.3rem;font-size:.93rem}
.foot__nav a{color:#a6a6ad;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.foot__nav a:hover{color:var(--d-acc);border-bottom-color:currentColor}
.foot__note{font-size:.8rem;color:#8e8e97;margin-top:1.8rem;max-width:60ch}
.foot :where(a,button):focus-visible{outline-color:var(--d-acc)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}