/* LitHERacy — Home (merged cut): E's pinned-scene spine + F's card-stack voices.
   Self-contained: the homepage is a distinct scroll-driven system from the
   calm content pages (Episodes / Show Notes), so it carries its own base. */

:root {
  --ink: #0F0F0F;
  --dark: #0F0F0F;
  --font-display: 'Anton';
  --font-hand: 'Caveat';
  --font-marker: 'Permanent Marker';
  --mess: 1;
  --pace: 1;
  --cream: #F5F1E8;
  --lavender: #A78BCA;
  --lilac: #C9B8DD;
  --violet: #7D5BA6;
  --paper: #EFEAE0;
  --card: #E4DCCB;
  --wall: #EFEAE0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--dark);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
.anton { font-family: var(--font-display), sans-serif; text-transform: uppercase; line-height: 0.95; }

/* placeholder slots for imagery still to be shot */
.ph {
  background: repeating-linear-gradient(45deg, var(--card), var(--card) 11px, var(--paper) 11px, var(--paper) 22px);
  display: grid; place-items: center;
}
.ph span {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(15,15,15,0.6);
  background: var(--cream); padding: 5px 9px; text-align: center; line-height: 1.4;
}

/* ---------- NAV ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 36px; mix-blend-mode: difference;
}
nav .logo img { height: 32px; }
nav .listen {
  font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: 14px; letter-spacing: 0.06em;
  color: #fff; border: 2px solid #fff; padding: 9px 20px; text-decoration: none;
}
nav .nav-right { display: flex; align-items: center; gap: 26px; }
nav .navlink { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: 14px; letter-spacing: 0.06em; color: #fff; text-decoration: none; }

/* ---------- SCENE 1: QUESTIONS ---------- */
.sc-questions { height: calc(420vh * var(--pace)); position: relative; background: var(--dark); --q-size: clamp(44px, 7.6vw, 118px); }
.sc-questions .stage {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center; overflow: hidden;
  color: var(--cream); text-align: center; padding: 0 24px;
}
.q-static { position: relative; width: min(1100px, 92vw); display: grid; gap: 4.5vh; justify-items: center; }
.q-head { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: var(--q-size); line-height: 1.04; }
.q-wordbox { position: relative; width: 100%; font-size: var(--q-size); height: 1.3em; }
.q-word {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display), sans-serif; text-transform: uppercase;
  font-size: var(--q-size); line-height: 1; opacity: 0; white-space: nowrap;
}
.q-promise {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-display), sans-serif; text-transform: uppercase;
  font-size: clamp(34px, 5.6vw, 88px); line-height: 1.08;
  opacity: 0; padding: 0 24px; pointer-events: none;
}
.q-promise-text { display: block; line-height: 1.16; }
.sc-questions .u { position: relative; white-space: nowrap; }
.sc-questions .u i { font-style: normal; position: relative; z-index: 1; }
.sc-questions .u::after {
  content: ""; position: absolute; left: -4%; right: -4%; bottom: -0.22em; height: 0.34em;
  background: var(--lavender); z-index: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 36' preserveAspectRatio='none'%3E%3Cpath d='M6 22 C70 12 180 8 294 11 C210 15 80 20 14 27 C110 25 230 21 292 25' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 36' preserveAspectRatio='none'%3E%3Cpath d='M6 22 C70 12 180 8 294 11 C210 15 80 20 14 27 C110 25 230 21 292 25' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.q-counter { position: absolute; bottom: 8vh; left: 0; right: 0; text-align: center; font-family: var(--font-hand), cursive; font-size: 28px; color: var(--lilac); }
.sc-questions .scroll-cue { position: absolute; bottom: 3.5vh; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(245,241,232,0.4); }

/* ---------- SCENE 2: PAPER TEAR REVEAL ---------- */
.sc-reveal { position: relative; z-index: 10; background: var(--cream); min-height: 100vh; display: grid; place-items: center; padding: 16vh 40px 14vh; text-align: center; }
.sc-reveal .wordmark { display: inline-flex; flex-wrap: wrap; justify-content: center; }
.sc-reveal .wordmark-img { width: min(840px, 88vw); height: auto; margin: 0 auto; display: block; }
.sc-reveal .wordmark span { font-family: var(--font-display), sans-serif; text-transform: lowercase; font-size: clamp(56px, 10.5vw, 168px); line-height: 1; padding: 0 0.04em; }
.sc-reveal .wordmark .her { background: var(--lavender); text-transform: uppercase; }
.sc-reveal .wordmark .blk { background: var(--ink); color: var(--cream); }
.sc-reveal .tag { font-family: var(--font-hand), cursive; font-size: clamp(26px, 3vw, 40px); color: var(--violet); margin-top: 30px; transform: rotate(calc(-1.5deg * var(--mess))); }
.sc-reveal .meta { margin-top: 56px; display: flex; flex-direction: column; gap: 18px; align-items: center; font-size: 18px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(15,15,15,0.65); }
.sc-reveal .meta b { color: var(--ink); }

/* ---------- SCENE 4: THE PROMISE + FOUNDER ---------- */
.sc-founder { background: var(--dark); color: var(--cream); padding: 200px 40px; position: relative; }
.founder-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: center; }
.founder-photo { position: relative; justify-self: center; width: min(420px, 80%); transform: rotate(calc(-2deg * var(--mess))); }
.founder-photo .ripped { position: absolute; inset: -22px -18px; background: var(--card); z-index: -1; transform: rotate(2.4deg);
  clip-path: polygon(2% 6%, 12% 1%, 30% 4%, 47% 0%, 66% 3%, 84% 1%, 97% 5%, 99% 22%, 96% 41%, 99% 60%, 97% 80%, 99% 95%, 83% 98%, 64% 95%, 45% 99%, 26% 96%, 9% 99%, 1% 93%, 4% 74%, 0% 55%, 3% 36%, 1% 18%);
  box-shadow: 0 14px 36px rgba(0,0,0,0.4); }
.founder-photo img { border: 8px solid #fff; box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
.founder-photo .tape { top: -16px; left: 50%; margin-left: -55px; }
.founder-photo .tape.b { top: auto; bottom: -14px; left: 18%; transform: rotate(calc(8deg * var(--mess))); }
.founder-copy .kicker { font-family: var(--font-marker), cursive; font-size: 22px; color: var(--lilac); display: inline-block; transform: rotate(calc(-1deg * var(--mess))); margin-bottom: 24px; }
.founder-copy h2 { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: clamp(40px, 5.2vw, 84px); line-height: 1.24; letter-spacing: 0.01em; }
.founder-copy h2 .line1 { display: block; margin-bottom: 0.3em; }
.founder-copy h2 .hl { color: var(--ink); background: var(--lavender); padding: 0.04em 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.founder-copy .body { margin-top: 36px; max-width: 620px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.7; color: rgba(245,241,232,0.85); }
.founder-copy .body strong { color: var(--cream); }
.founder-copy .sig { display: block; margin-top: 26px; font-family: var(--font-hand), cursive; font-size: 34px; color: var(--lilac); }

/* ---------- SCENE 5: VOICES (card stack) ---------- */
.sc-voices { height: calc(380vh * var(--pace)); position: relative; background: var(--cream); }
.sc-voices .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 40px; gap: 40px; }
.voice-copy { position: relative; height: 380px; }
.voice-copy .head { font-size: 14px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--violet); margin-bottom: 26px; }
.vtext { position: absolute; top: 50px; left: 0; right: 0; opacity: 0; }
.vtext .num { font-family: var(--font-marker), cursive; font-size: 22px; color: var(--violet); }
.vtext h3 { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: clamp(40px, 4.4vw, 64px); margin: 10px 0 18px; }
.vtext p { font-size: 16.5px; line-height: 1.65; color: rgba(15,15,15,0.78); max-width: 46ch; }
.vtext .tagline { font-family: var(--font-hand), cursive; font-size: 26px; color: var(--violet); margin-top: 16px; }
.vstack { position: relative; height: 560px; display: grid; place-items: center; }
.vcard { position: absolute; width: min(380px, 80%); background: #fff; padding: 16px 16px 56px; box-shadow: 0 18px 44px rgba(15,15,15,0.26); transform: rotate(calc(var(--r, 0deg) * var(--mess))); }
.vcard img, .vcard .ph { width: 100%; height: 380px; object-fit: cover; }
/* the expert card holds a square grid of guests — contain it so none of
   them are cropped off; the letterbox is white on a white polaroid */
.vcard[data-card="1"] img { object-fit: contain; background: #fff; }
.vcard .cap { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--font-hand), cursive; font-size: 26px; }
.vcard .tape { top: -15px; left: 50%; margin-left: -55px; }
.voices-progress { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); font-family: var(--font-marker), cursive; font-size: 18px; color: rgba(15,15,15,0.5); }

/* ---------- SCENE 6: NOTES (for her / adults) ---------- */
.sc-notes { background: var(--dark); padding: 190px 40px 170px; position: relative; }
.notes-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.note-card { background: var(--cream); padding: 54px 48px 60px; position: relative; transform: rotate(calc(var(--tilt, 0deg) * var(--mess))); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
.note-card.lav { background: var(--lilac); }
.note-card .tape { top: -16px; left: 50%; margin-left: -55px; }
.note-card .annot { font-family: var(--font-marker), cursive; font-size: 19px; color: var(--violet); margin-bottom: 18px; }
.note-card.lav .annot { color: var(--ink); }
.note-card h3 { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: clamp(32px, 3.2vw, 46px); line-height: 1; margin-bottom: 22px; }
.note-card p { font-size: 16px; line-height: 1.7; color: rgba(15,15,15,0.8); margin-bottom: 14px; }
.note-card .cta { display: inline-block; margin-top: 18px; font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: 16px; padding: 13px 26px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; background: var(--lavender); box-shadow: 4px 4px 0 var(--ink); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.note-card.lav .cta { background: var(--cream); }
.note-card .cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- SCENE 7: SIGNUP ---------- */
.sc-signup { background: var(--dark); color: var(--cream); padding: 60px 40px 60px; }
.signup-inner { max-width: 1100px; margin: 0 auto; }
.sc-signup .bigask { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: clamp(50px, 8vw, 118px); line-height: 0.95; }
.sc-signup .bigask .hl { color: var(--lavender); }
.sc-signup .date { font-family: var(--font-marker), cursive; font-size: 24px; color: var(--lilac); display: inline-block; transform: rotate(calc(-1.4deg * var(--mess))); margin-bottom: 20px; }
.sc-signup form { display: flex; margin-top: 48px; max-width: 620px; }
.sc-signup input { flex: 1; background: transparent; border: 2px solid rgba(245,241,232,0.5); border-right: none; color: var(--cream); padding: 18px 22px; font-size: 16px; font-family: 'Inter', sans-serif; }
.sc-signup input::placeholder { color: rgba(245,241,232,0.45); }
.sc-signup input:focus { outline: none; border-color: var(--lavender); }
.sc-signup button { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: 17px; background: var(--lavender); color: var(--ink); border: 2px solid var(--lavender); padding: 0 32px; cursor: pointer; }
.sc-signup .question { margin-top: 64px; max-width: 620px; }
.sc-signup .question label { font-family: var(--font-hand), cursive; font-size: 32px; color: var(--lilac); display: block; margin-bottom: 14px; }
.sc-signup textarea { width: 100%; min-height: 110px; background: rgba(245,241,232,0.06); border: 1.5px dashed rgba(245,241,232,0.4); color: var(--cream); padding: 18px 22px; font-size: 16px; font-family: 'Inter', sans-serif; resize: vertical; }
.sc-signup textarea:focus { outline: none; border-color: var(--lavender); }
.sc-signup .anon { font-size: 12.5px; color: rgba(245,241,232,0.5); margin-top: 10px; }
.footer-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 110px; padding-top: 26px; border-top: 1px solid rgba(245,241,232,0.2); }
.footer-bar img { height: 40px; }
.footer-bar .soc { display: flex; gap: 26px; }
.footer-bar a { color: rgba(245,241,232,0.75); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.footer-bar a:hover { color: var(--lavender); }

/* ---------- TWEAK HOOKS ---------- */
body.no-torn [data-torn-top]::before { display: none !important; }
body.no-tape .tape { display: none !important; }

/* tape angle follows the messiness variable (loaded after textures.js in the
   original prototype; kept here so tape sits at a consistent scrapbook angle) */
.tape { transform: rotate(calc(-4deg * var(--mess, 1))); }

@media (max-width: 960px) {
  nav { padding: 16px 20px; }
  .founder-inner { grid-template-columns: 1fr; gap: 50px; }
  /* The pinned card-stack is a desktop idea: it needs the copy and the
     cards to share one viewport, which a phone cannot give. Here the two
     wrappers dissolve with display:contents so their children become grid
     items of the stage directly, letting each voice sit with its own
     photo instead of all the words then all the pictures.
     The matching timeline in merged.js is disabled at the same width. */
  .sc-voices { height: auto; }
  .sc-voices .stage {
    position: static; height: auto; overflow: visible;
    display: grid; grid-template-columns: 1fr; gap: 0;
    padding: 90px 24px 70px;
  }
  .voice-copy, .vstack { display: contents; }

  .voice-copy .head { order: 0; }

  .vtext {
    position: static; opacity: 1;
    margin: 0 0 26px;
  }
  .vcard {
    position: static; width: 100%; max-width: 330px;
    justify-self: center;
    margin: 0 0 44px;
    padding-bottom: 52px;
    transform: rotate(calc(var(--r, 0deg) * var(--mess)));
  }
  .vcard img, .vcard .ph { height: 300px; }

  /* each voice sits with its own photo, in reading order */
  .vtext[data-v="0"] { order: 1; }  .vcard[data-card="0"] { order: 2; }
  .vtext[data-v="1"] { order: 3; }  .vcard[data-card="1"] { order: 4; }
  .vtext[data-v="2"] { order: 5; }  .vcard[data-card="2"] { order: 6; }

  /* a rule between pairs, not after the last */
  .vcard[data-card="0"], .vcard[data-card="1"] {
    border-bottom: none;
    padding-bottom: 52px;
  }
  .vtext[data-v="1"], .vtext[data-v="2"] {
    border-top: 1px solid rgba(15,15,15,0.1);
    padding-top: 42px;
  }

  .voices-progress { display: none; }
  .notes-inner { grid-template-columns: 1fr; gap: 60px; }
  .sc-founder, .sc-notes, .sc-signup, .sc-reveal { padding-left: 24px; padding-right: 24px; }
  .sc-founder { padding-top: 130px; padding-bottom: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-questions { height: auto; }
  .sc-questions .stage { position: static; height: auto; padding: 30vh 24px; }
  .q-wordbox { height: auto; }
  .q-word { position: static; opacity: 1; margin: 0.35em 0; }
  .q-promise { position: static; opacity: 1; margin-top: 70px; }
  .sc-voices { height: auto; }
  .sc-voices .stage { position: static; height: auto; padding-top: 120px; padding-bottom: 120px; }
  .voice-copy { height: auto; }
  .vtext { position: static; opacity: 1; margin-bottom: 60px; }
  .vstack { display: none; }
}