/* =============================================================================
   booktalk.club — styles
   Homepage design v2 ("more character"), Nov 2026.

   Sections in this file (search for the ==== headings):
     1. Colours & fonts (change brand colours here)
     2. Basics & helpers
     3. Buttons & signup form
     4. Header / menu
     5. Hero
     6. The story (Slack window that plays as you scroll)
     7. Why read together (survey numbers + quotes)
     8. The sky (page background, drifting clouds, serif headings)
     9. How it works (steps)
    10. Waitlist banner (sunrise + early member card)
    11. FAQ
    12. Footer
    13. Thank-you popup
    14. Scroll animations
    15. Tablet & phone layouts
   ============================================================================= */


/* ==== 1. Colours & fonts ==================================================== */
:root {
  --bg: #ffffff;
  --bg-soft: #f4f4fa;          /* light lilac-grey behind hero + features */
  --text: #1a1d21;             /* main text */
  --muted: #5c5f66;            /* secondary text */
  --line: #ececf1;             /* thin borders */
  --orange: #ff7b00;           /* "Request invite" buttons */
  --orange-dark: #eb6f00;
  --purple: #6730c3;           /* brand purple */
  --purple-bright: #7e3ff2;    /* "free lifetime access" */
  --teal: #4ad3cf;             /* benefit labels & icons */

  --font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;   /* headings & quotes */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 12px;
  --container: 1200px;
  --gutter: 24px;

  /* Fine grain texture used on the coloured cards (drawn in code, no image file) */
  /* Coarser grey static for the hero card (moves like TV static, see .hero-card::after) */
  --static: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.9 .9 .9 0 -.85 .9 .9 .9 0 -.85 .9 .9 .9 0 -.85 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  /* Speckles for the ink stamp on the early member card (solid with small gaps) */
  --ink-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 4.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==== 2. Basics & helpers =================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: calc(720px + 2 * var(--gutter)); }

.section-soft { background: var(--bg-soft); }

/* Centered title + subtitle used at the top of most sections */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.section-head p { margin-top: 16px; font-size: 18px; font-weight: 500; color: var(--text); opacity: .82; }
.section-head .display { font-size: 62px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; max-width: 640px; margin: 0 auto; }

/* Inline Slack commands like /booktalk-poll */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: rgba(103, 48, 195, .08);
  color: #4b2391;
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

/* Text only screen readers can "see" (for accessibility) */
.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; }

/* Visible outline when moving around with the keyboard */
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* Clouds are decorative and never block clicks */
.cloud { position: absolute; pointer-events: none; user-select: none; }


/* ==== 3. Buttons & signup form ============================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1;
  border: 0; border-radius: 6px; padding: 0 20px; height: 46px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, transform .2s, opacity .2s;
}
.btn:active { transform: translateY(1px); }
.btn-dark { background: #121212; color: #fff; height: 38px; border-radius: 8px; padding: 0 16px; }
.btn-dark:hover { background: #2a2a2a; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-dark); }

/* Email box with the orange button inside it */
.signup {
  position: relative;
  display: flex; align-items: stretch; gap: 6px;
  width: 100%; max-width: 446px;
  background: #f8f8f8; border: 1px solid #fff; border-radius: 8px; padding: 6px;
  box-shadow: 0 1px 2px rgba(20, 20, 40, .04);
}
.signup input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font: 500 16px var(--font); color: var(--text); padding: 0 14px;
}
.signup input::placeholder { color: #b5b5b5; }
.signup { transition: box-shadow .25s, border-color .25s; }
.signup:focus-within { border-color: rgba(103, 48, 195, .35); }

/* Floating label: "Your email" rises above the box once something is typed */
.float-label {
  position: absolute; left: 2px; top: -26px;
  font-size: 14px; font-weight: 500; color: #b5b5b5; white-space: nowrap;
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s, color .25s;
  pointer-events: none;
}
.signup.has-value .float-label:not(.float-label-invalid) { opacity: 1; transform: none; }

/* Invalid email (checked when leaving the box or pressing the button): red outline + "Invalid address" */
.signup.is-invalid { border-color: #ff3b30; box-shadow: 0 0 0 1px #ff3b30; }
.signup.is-invalid .float-label:not(.float-label-invalid) { opacity: 0; }
.signup.is-invalid .float-label-invalid { opacity: 1; transform: none; color: #ff3b30; }

/* Button states set by main.js: sending… / done */
.btn.is-loading { opacity: .8; pointer-events: none; }
.btn.is-loading .btn-label { opacity: 0; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.signup .btn { position: relative; min-width: 132px; transition: background-color .25s, color .25s, transform .2s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Saved: a white tick replaces the text */
.btn.is-success .btn-label { opacity: 0; }
.btn.is-success::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: pop-in .35s cubic-bezier(.2, .9, .3, 1.4);
}
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } }

/* Not saved: the button turns red and says so (until the email is changed) */
.btn.is-error { background: #ff4d6a; color: #ffe3e7; font-size: 13px; }
.btn.is-error:hover { background: #f23f5d; }

.signup-note { margin-top: 12px; font-size: 16px; font-weight: 500; max-width: 446px; text-align: right; }
.signup-note strong { color: var(--purple-bright); font-weight: 700; }
.signup-error { margin-top: 10px; font-size: 14px; font-weight: 500; color: #c2261d; max-width: 446px; }


/* ==== 4. Header / menu ====================================================== */
/* The menu floats over the page. At the top it's see-through and full width;
   once the hero has scrolled away (main.js adds "is-scrolled") it shrinks into a
   compact white bar with a soft shadow — same sizes and feel as the original. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 24px 16px; pointer-events: none; }
.header-inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; max-width: 1200px; height: 61px; margin: 0 auto; padding: 12px;
  border-radius: 12px; background: rgba(255, 255, 255, 0); box-shadow: 0 1px 30px rgba(0, 0, 0, 0);
  transition: max-width .45s cubic-bezier(.2, .8, .2, 1), background-color .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled .header-inner { max-width: 720px; background: #fff; box-shadow: 0 1px 30px rgba(0, 0, 0, .12); }
.site-header.is-scrolled .main-nav { gap: 26px; }
.logo img { width: 116px; height: auto; }
.main-nav { display: flex; gap: 32px; }
.main-nav a { text-decoration: none; font-size: 16px; color: var(--text); opacity: .9; transition: opacity .2s; }
.main-nav a:hover { opacity: .6; }

/* Phone menu button (hidden on big screens) */
.menu-toggle { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; position: relative; }
.menu-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, top .25s; }
.menu-toggle span:first-child { top: 15px; }
.menu-toggle span:last-child { top: 23px; }
.nav-open .menu-toggle span:first-child { top: 19px; transform: rotate(45deg); }
.nav-open .menu-toggle span:last-child { top: 19px; transform: rotate(-45deg); }


/* ==== 5. Hero =============================================================== */
.hero { position: relative; padding: 160px 0 56px; overflow: hidden; isolation: isolate; }   /* top space = room for the floating menu */   /* clouds stick out of the card but not off the page */

/* Haze around the card: three very soft colour clouds drifting slowly (like the original) */
.hero-haze {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 96%);   /* fades out before the section ends */
  mask-image: linear-gradient(#000 55%, transparent 96%);
}
.haze { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.haze-purple { width: 62vw; max-width: 900px; height: 860px; background: radial-gradient(closest-side, rgba(206, 173, 255, .55), transparent); animation: haze-1 12s ease-in-out infinite alternate; }
.haze-mint   { width: 46vw; max-width: 660px; height: 690px; background: radial-gradient(closest-side, rgba(161, 228, 178, .5), transparent); animation: haze-2 15s ease-in-out infinite alternate; }
.haze-peach  { width: 46vw; max-width: 660px; height: 690px; background: radial-gradient(closest-side, rgba(255, 200, 150, .55), transparent); animation: haze-3 11s ease-in-out infinite alternate; }
@keyframes haze-1 { 0% { transform: translate(-5vw, -160px) rotate(-8deg) scale(.75); } 50% { transform: translate(10vw, 60px) rotate(12deg) scale(1.1); } 100% { transform: translate(21vw, 200px) rotate(-4deg) scale(.9); } }
@keyframes haze-2 { 0% { transform: translate(5vw, 110px) scale(.85); } 50% { transform: translate(38vw, 230px) scale(1.1); } 100% { transform: translate(68vw, 120px) scale(.95); } }
@keyframes haze-3 { 0% { transform: translate(25vw, 30px) scale(1); } 50% { transform: translate(40vw, 300px) scale(1.12); } 100% { transform: translate(50vw, 480px) scale(.9); } }

/* The card and its clouds are placed together, so the clouds always sit on the card's edges */
.hero-stage { position: relative; isolation: isolate; }

.hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: 48px;
  min-height: 720px; padding: 72px 64px 72px 32px;
  border-radius: 23px;
  background: linear-gradient(rgba(255, 145, 145, .31), rgba(255, 145, 145, .31)), #fff;   /* pink base */
}

/* Two blurred colour blobs inside the card. main.js moves them (they bounce off each other and the
   card's edges) and picks their colours. Without JavaScript they simply sit still in these spots. */
.card-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%;
  will-change: transform; background: radial-gradient(closest-side, var(--blob-colour) 0%, var(--blob-colour) 28%, transparent 100%);
}
.blob-a { --blob-colour: rgba(255, 118, 20, .82); left: 28%; top: 4%; }
.blob-b { --blob-colour: rgba(150, 70, 210, .72); left: 46%; top: 48%; }
/* fine grain + faint grid lines on top of the colours */
.hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 72px 72px;
}
/* Moving static: a large grain layer that jumps to a new random-looking spot ~16 times a second */
.hero-card::after {
  content: ""; position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: url("../img/grain.png") 0 0 / 64px 64px;   /* ready-made fine grain (2 specks per screen point); same in every browser */
  animation: static-flicker .6s steps(10) infinite;
}
@keyframes static-flicker {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, 4%); }
  20% { transform: translate(6%, -7%); }
  30% { transform: translate(-8%, -3%); }
  40% { transform: translate(3%, 8%); }
  50% { transform: translate(-2%, -9%); }
  60% { transform: translate(9%, 2%); }
  70% { transform: translate(-7%, 7%); }
  80% { transform: translate(5%, -4%); }
  90% { transform: translate(-4%, -6%); }
}

.hero-text, .hero-visual { position: relative; z-index: 2; }
.hero-text h1 { font-size: 62px; font-weight: 500; line-height: 1.18; letter-spacing: -0.02em; max-width: 560px; }
.hero-sub { margin: 28px 0 44px; font-size: 18px; font-weight: 500; max-width: 500px; }

.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 40px 0 0; font-size: 15px; font-weight: 500; color: rgba(26, 29, 33, .78); }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points li::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236730C3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Stacked Slack messages (positions are % of the 340×590 box, matching the design) */
.hero-visual { width: 100%; max-width: 400px; aspect-ratio: 340 / 590; justify-self: end; }
.hv-item { position: absolute; }
.hv-item img { width: 100%; height: auto; }
.hv-sidebar   { left: 0;     top: 9.5%;  width: 66.5%; }
.hv-classic   { left: 19.1%; top: -1.4%; width: 74.7%; }
.hv-vote      { left: 6.2%;  top: 27.1%; width: 79.1%; }
.hv-timeframe { left: 19.4%; top: 54.7%; width: 80.9%; }
.hv-discuss   { left: 6.8%;  top: 74.2%; width: 77.9%; }
/* The message pictures were trimmed (their old baked-in frame removed); these margins put each one
   back exactly where it sat inside the old picture. The shadow follows the message's own shape. */
.hv-item .hv-card { width: var(--w); margin-left: var(--l); margin-top: var(--t);
  filter: drop-shadow(0 10px 18px rgba(70, 25, 60, .13)) drop-shadow(0 1px 2px rgba(70, 25, 60, .08)); }
.hv-classic   { --w: 92.3%;  --l: 3.85%; --t: 3.85%; }
.hv-vote      { --w: 91.89%; --l: 4.06%; --t: 4.08%; }
.hv-timeframe { --w: 92.13%; --l: 3.92%; --t: 3.95%; }
.hv-discuss   { --w: 92.1%;  --l: 3.95%; --t: 3.98%; }

/* Each message floats gently, each on its own rhythm (a few pixels, like the original) */
.hv-classic   .hv-card { animation: drift-a 5.5s ease-in-out infinite; }
.hv-vote      .hv-card { animation: drift-b 6.5s ease-in-out infinite; }
.hv-timeframe .hv-card { animation: drift-c 6s ease-in-out infinite; }
.hv-discuss   .hv-card { animation: drift-d 7s ease-in-out infinite; }
@keyframes drift-a { 50% { transform: translate(3px, -3px); } }
@keyframes drift-b { 50% { transform: translate(-3px, 3px); } }
@keyframes drift-c { 50% { transform: translate(-3px, -2px); } }
@keyframes drift-d { 50% { transform: translate(3px, 2px); } }

/* Clouds (sizes and positions measured from the original at 1440px wide; they don't move) */
.cloud-front { z-index: 3; }
.cloud-back  { z-index: -1; }   /* tucked BEHIND the card for depth */
.cloud-top-right    { width: 313px; left: calc(100% - 116px); top: 56px; }
.cloud-left         { width: 210px; left: -161px;             top: 566px; }
.cloud-bottom-right { width: 279px; left: calc(100% - 111px); top: 575px; }

/* ---- Entrance when the page opens (timings copied from the original) ---- */
.site-header .header-inner { animation: enter-down .4s cubic-bezier(.44, 0, .56, 1) both; }
.hero-text h1  { animation: enter-up .8s cubic-bezier(.56, .02, .26, .99) both; }
.hero-sub      { animation: enter-up .9s cubic-bezier(.56, .02, .26, .99) both; }
.hero-form, .hero-note, .hero-points { animation: enter-up .9s cubic-bezier(.56, .02, .26, .99) .15s both; }
.hv-sidebar   { animation: enter-fade 1s cubic-bezier(.44, 0, .56, 1) .1s both; }
.hv-classic   { animation: enter-from-right 1s cubic-bezier(.22, 1, .36, 1) .2s both; }
.hv-vote      { animation: enter-from-right 1s cubic-bezier(.22, 1, .36, 1) .4s both; }
.hv-timeframe { animation: enter-from-right 1s cubic-bezier(.22, 1, .36, 1) .6s both; }
.hv-discuss   { animation: enter-from-right 1.6s cubic-bezier(.22, 1, .36, 1) .8s both; }
@keyframes enter-down { from { opacity: 0; transform: translateY(-20px); } }
@keyframes enter-up { from { opacity: 0; transform: translateY(30px); } }
@keyframes enter-fade { from { opacity: 0; } }
@keyframes enter-from-right { from { opacity: 0; transform: translateX(25px); } }


/* ---- Hero fits the window on computers (wider than 900px) ----
   The card takes the window's height (minus room for the menu on top and the
   "Watch a book club happen" button below), and the Slack pictures scale with it.
   The text keeps a comfortable width (up to 600px); the Slack pictures sit centred in the
   space that's left on the right. Phones and tablets keep the natural, taller layout.
   (".hero .hero-card" so these win over the older tablet rules further down.) */
@media (min-width: 901px) {
  .hero {
    --hero-top: clamp(96px, 12svh, 150px);      /* room for the floating menu */
    --card-h: clamp(440px, calc(100svh - var(--hero-top) - 88px), 900px);
    --card-pad: clamp(36px, 6.5svh, 72px);
    min-height: 100svh; padding: var(--hero-top) 0 88px;   /* 88px = room for the scroll button */
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero .hero-card {
    grid-template-columns: minmax(0, 600px) minmax(max-content, 1fr);
    height: var(--card-h); min-height: 0; padding-top: var(--card-pad); padding-bottom: var(--card-pad);
  }
  .hero .hero-visual { height: calc(var(--card-h) - 2 * var(--card-pad)); width: auto; max-width: none; justify-self: center; }
  .hero .hero-text h1 { text-wrap: balance; }   /* two even lines, never one word left alone */
}
/* short laptop screens: slightly smaller headline and spacing so the text fits the shorter card */
@media (min-width: 901px) and (max-height: 820px) {
  .hero .hero-text h1 { font-size: 52px; }
  .hero .hero-sub { margin: 18px 0 28px; }
  .hero .hero-points { margin-top: 24px; }
}
/* very short windows (e.g. a laptop with the browser not full height) */
@media (min-width: 901px) and (max-height: 680px) {
  .hero { --hero-top: 84px; }
  .hero .hero-text h1 { font-size: 42px; }
  .hero .hero-sub { margin: 12px 0 20px; font-size: 16px; }
  .hero .hero-points { margin-top: 14px; }
}


/* ==== 6. The story: a whole book club in one Slack channel =================
   The section is very tall; .story-sticky stays on screen while you scroll
   through it, and main.js switches between 5 stages (captions + messages). */
/* --story-screens = how many screens tall the story is (more on phones, see section 15).
   main.js turns this into a fixed height in pixels once the page has loaded, because on iPhone the
   screen height changes while you scroll (address bar) and the story would grow/shrink with it,
   throwing the page below it up or down. The CSS height is the starting value (and the fallback). */
.story { --story-screens: 5.2; position: relative; height: calc(var(--story-screens) * 100vh); overflow-anchor: none; }   /* overflow-anchor: stop the browser nudging the scroll when messages appear */
.story-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 80px; isolation: isolate; }
.story-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }

.story-kicker { font-size: 17px; font-weight: 500; color: var(--purple); margin-bottom: 20px; }
.story-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.story-step { grid-area: 1 / 1; }        /* all captions share one spot; only the active one is visible */
.story-step h2 { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 54px; font-weight: 520; line-height: 1.06; letter-spacing: -0.02em; }
.story-step p { margin-top: 20px; font-size: 19px; line-height: 1.55; max-width: 430px; color: rgba(26, 29, 33, .82); }
.story-dots { display: flex; gap: 8px; margin-top: 36px; }
.story-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(26, 29, 33, .16); transition: width .35s, background-color .35s; }
.story-dots i.is-on { width: 26px; background: var(--purple); }

/* With JavaScript: only the current caption shows (without it, all are listed) */
.story-js .story-step { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.story-js .story-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
html:not(.story-js) .story { height: auto; }
html:not(.story-js) .story-sticky { position: static; height: auto; padding: 120px 0; }
html:not(.story-js) .story-step { margin-bottom: 28px; }

/* The Slack window */
.slack {
  display: flex; flex-direction: column; height: min(580px, 72vh);
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 34px 80px rgba(70, 35, 100, .18), 0 2px 6px rgba(0, 0, 0, .06);
}
.slack-top { display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 16px; background: #3f0e40; color: #fff; flex: none; }
.slack-lights { display: flex; gap: 6px; }
.slack-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.slack-lights i:nth-child(2) { background: #febc2e; } .slack-lights i:nth-child(3) { background: #28c840; }
.slack-channel { font-weight: 700; font-size: 15px; }
.slack-people { margin-left: auto; display: flex; align-items: center; }
.slack-people .av { width: 24px; height: 24px; font-size: 11px; border-radius: 6px; margin-left: -6px; box-shadow: 0 0 0 2px #3f0e40; }
.slack-people em { font-style: normal; font-size: 13px; opacity: .8; margin-left: 8px; }

.slack-feed { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 18px 22px 22px; overflow: hidden; }
.msg { display: flex; gap: 12px; align-items: flex-start; }
.story-js .msg.is-hidden { display: none; }
.msg.is-new { animation: msg-in .5s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.av { flex: none; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; font-style: normal; }
.av-m { background: #e8a33d; } .av-j { background: #2eb67d; } .av-a { background: #4a9be8; }
.av-bot { background: #fff4ec; padding: 6px; object-fit: contain; }
.msg-body { min-width: 0; flex: 1; }
.msg-body p { font-size: 15px; line-height: 1.45; }
.msg-name { font-weight: 700; }
.app { font-size: 10px; font-weight: 700; color: #6b6b6b; background: #ececec; padding: 1px 4px; border-radius: 3px; vertical-align: 2px; }
.soft { color: #6b6b6b; }
.cmd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: #1264a3; background: #f2f2f5; padding: 2px 6px; border-radius: 4px; }
.msg-reply { margin-left: 26px; padding-left: 22px; border-left: 2px solid #ececf1; }

/* Poll with three books (covers drawn in code) */
.poll { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid #e8e8ee; border-radius: 10px; transition: border-color .4s, background-color .4s, box-shadow .4s; }
.cover {
  flex: none; width: 38px; height: 54px; padding: 5px 4px; display: flex; align-items: flex-end;
  border-radius: 2px 4px 4px 2px; color: #fff; font: 700 7.5px/1.12 var(--serif);
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, .2), 0 2px 5px rgba(0, 0, 0, .18);
}
.c1 { background: radial-gradient(circle at 70% 25%, #ffd166 0 6px, transparent 7px), linear-gradient(165deg, #23408e, #0b1640); }
.c2 { background: linear-gradient(165deg, #2f7d74, #0f3b3a); }
.c3 { background: linear-gradient(165deg, #f4f1ea, #d8d1c2); color: #1a1d21; }
.opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opt-text b { font-size: 14px; } .opt-text small { font-size: 12.5px; color: #777; }
.votes { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 60px; padding: 4px 10px; border-radius: 99px; background: #f4f4f8; font-weight: 700; font-size: 14px; }
.votes i { font-style: normal; }
.count.bump { animation: bump .3s ease; display: inline-block; }
@keyframes bump { 40% { transform: scale(1.35); } }
.story.is-decided .opt-win { border-color: rgba(255, 123, 0, .55); background: rgba(255, 123, 0, .06); box-shadow: 0 0 0 3px rgba(255, 123, 0, .12); }
.reacts span { display: inline-block; margin: 6px 6px 0 0; padding: 2px 9px; font-size: 13px; border: 1px solid #e8e8ee; border-radius: 99px; background: #f7f7fa; }


/* ==== 7. Why read together (real survey numbers + quotes) ==================== */
.why { position: relative; z-index: 1; padding: 140px 0 70px; }   /* above clouds drifting in from the sections around it */
.why-intro { max-width: 780px; }
.why-intro h2 { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 58px; font-weight: 520; line-height: 1.05; letter-spacing: -0.02em; }
.why-lede { margin-top: 26px; font-size: 24px; line-height: 1.5; color: rgba(26, 29, 33, .88); }
/* the numbers get a highlighter stroke, like notes in a book */
.why-lede strong { font-weight: 700; background: linear-gradient(transparent 60%, rgba(255, 123, 0, .3) 60%, rgba(255, 123, 0, .3) 92%, transparent 92%); }

.why-points { list-style: none; margin: 72px 0 0; padding: 32px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; border-top: 1px solid rgba(26, 29, 33, .12); }
.why-points h3 { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 26px; font-weight: 520; line-height: 1.2; }
.why-points p { margin-top: 10px; font-size: 17px; color: var(--muted); }

/* Quotes as paper slips taped into the sky */
.quotes { margin-top: 110px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; align-items: start; }
.slip { position: relative; margin: 0; padding: 30px 30px 24px; background: #fffdf9; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 20px 44px rgba(70, 40, 100, .11); }
.slip::before { /* a strip of tape */
  content: ""; position: absolute; top: -12px; left: 50%; width: 86px; height: 24px;
  transform: translateX(-50%) rotate(-3deg); background: rgba(255, 255, 255, .6); box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.slip blockquote { margin: 0; font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 23px; line-height: 1.38; font-weight: 420; }
.slip figcaption { margin-top: 16px; font-size: 15px; color: var(--muted); }
.slip figcaption::before { content: "— "; }
.slip-1 { grid-column: 1 / span 5; rotate: -2deg; }
.slip-2 { grid-column: 7 / span 6; rotate: 1.5deg; margin-top: 48px; }
.slip-3 { grid-column: 2 / span 6; rotate: 1deg; }
.slip-4 { grid-column: 8 / span 5; rotate: -1.6deg; margin-top: 14px; }
.quotes-note { margin-top: 30px; text-align: right; font-size: 14px; color: var(--muted); }


/* ==== 8. The sky: page background + drifting clouds ======================== */
body {
  /* morning lilac at the top → peach → daylight blue before the cloud banner → soft again at the end */
  background: linear-gradient(180deg,
    #f4f4fa 0%, #f6eef8 9%, #fbe8ef 20%, #fde9e2 32%, #fff0e4 43%,
    #f3eff6 52%, #e3eefb 62%, #cfe4f9 72%, #dbe9f8 84%, #f4f4fa 94%);
  /* No "overflow" trimming here or on .story: on iPhone it makes the pinned story panel shake.
     Things that poke out sideways are trimmed in their own small wrappers instead. */
}
.sky-cloud { position: absolute; z-index: -1; pointer-events: none; user-select: none; will-change: transform; }
.sc-story { width: 300px; left: -90px; top: 86%; }
.sc-why   { width: 330px; right: -150px; top: -30px; }
.sc-steps { width: 250px; left: 3%;  top: -70px; }
.steps { position: relative; }
/* clouds may stick out sideways but never widen the page ("clip" keeps the sticky story working) */
.why, .steps { overflow-x: hidden; }
.why, .steps { overflow-x: clip; isolation: isolate; }   /* isolate: clouds sit behind the text but above the sky */
.story { isolation: isolate; }
.story-clouds { position: absolute; inset: 0; z-index: -1; overflow-x: clip; pointer-events: none; }   /* the story's cloud may poke out sideways, trimmed here */
.story-sticky { overflow-x: clip; }   /* the spaceship flies off the edge: trimmed by the panel itself (fine for pinning) */

/* Headings everywhere in the bookish serif */
.hero-text h1 { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 500; font-size: 60px; line-height: 1.08; letter-spacing: -0.025em; max-width: 600px; }
.section-head h2, .modal-card h2 { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 520; letter-spacing: -0.015em; }
.section-head h2 { font-size: 46px; }
.step-foot h3 { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 480; font-size: 28px; }
.faq-list details { background: rgba(255, 255, 255, .6); }


/* ==== 9. How it works (steps) =============================================== */
.steps { padding: 100px 0 120px; }
.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 391px;
  border-radius: var(--radius); padding: 24px 14px 20px 16px;
}
.step-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--noise); opacity: .35; mix-blend-mode: soft-light; pointer-events: none; }
.step-1 { background: linear-gradient(39deg, rgba(255, 191, 227, .7) 0%, rgba(199, 233, 255, .7) 100%); }
.step-2 { background: linear-gradient(315deg, rgba(255, 222, 222, .61) 0%, rgb(242, 255, 191) 100%); }
.step-3 { background: linear-gradient(39deg, rgba(167, 241, 186, .7) 0%, rgba(199, 233, 255, .7) 100%); }

.step-art { flex: 1; display: flex; align-items: center; justify-content: center; transition: opacity .3s, transform .3s; }
.step-art svg { width: 100%; max-width: 260px; height: auto; }
.connect-pill { display: flex; align-items: center; gap: 18px; background: rgba(255, 255, 255, .78); border-radius: 15px; padding: 24px 26px; }
.connect-pill img:first-child { width: 47px; }
.connect-pill img:last-child { width: 43px; }
.connect-line { width: 66px; height: 1px; background: var(--purple); }

.step-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.step-foot h3 { font-size: 32px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.step-toggle {
  flex: none; width: 44px; height: 44px; margin-bottom: 2px;
  border: 0; border-radius: 50%; background: transparent; color: #fff;
  font: 300 34px/1 var(--font); cursor: pointer; transition: transform .3s, background-color .2s;
}
.step-toggle:hover { background: rgba(255, 255, 255, .25); }

/* The short explanation that replaces the drawing when + is pressed */
.step-detail {
  position: absolute; left: 20px; right: 20px; top: 24px; bottom: 130px;
  display: flex; align-items: center;
  font-size: 20px; font-weight: 500; line-height: 1.45;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s, transform .3s;
}
/* Hover (on devices with a mouse): the drawing grows, gets soft shadows and comes alive */
.step-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .45), transparent 60%); }
.step-art > * { transition: transform .5s cubic-bezier(.2, .9, .3, 1.15), filter .4s, box-shadow .4s; }
.connect-line { position: relative; overflow: hidden; transition: background-color .3s; }
.connect-shimmer { position: absolute; top: -1px; left: 0; width: 28px; height: 3px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--purple), transparent); }
.bc-pill { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); }
.bc-old, .bc-new { transform-box: fill-box; transform-origin: center; }
.bc-old { transition: opacity .25s, transform .3s cubic-bezier(.4, 0, .2, 1); }
.bc-new { opacity: 0; }
/* One 3.2 s loop: book-club flips away → fun-club bounces in → stays → flips away → book-club bounces back */
@keyframes club-old-loop {
  0%, 2%    { opacity: 1; transform: none; }
  12%       { opacity: 0; transform: translateY(-14px) scale(.6) rotate(10deg); }
  12.1%, 60%{ opacity: 0; transform: translateY(14px) scale(.3) rotate(-16deg); }
  72%       { opacity: 1; transform: translateY(-4px) scale(1.18) rotate(6deg); }
  79%       { opacity: 1; transform: translateY(1px) scale(.94) rotate(-3deg); }
  85%, 100% { opacity: 1; transform: none; }
}
@keyframes club-new-loop {
  0%, 10%   { opacity: 0; transform: translateY(14px) scale(.3) rotate(-16deg); }
  22%       { opacity: 1; transform: translateY(-4px) scale(1.18) rotate(6deg); }
  29%       { opacity: 1; transform: translateY(1px) scale(.94) rotate(-3deg); }
  35%, 50%  { opacity: 1; transform: none; }
  60%, 100% { opacity: 0; transform: translateY(-14px) scale(.6) rotate(10deg); }
}
.dot { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) {
  .step-card:hover::before { opacity: 1; }
  .step-card:hover .step-art > * { transform: scale(1.17); }
  .step-card:hover .connect-pill { box-shadow: 0 12px 30px rgba(40, 20, 70, .1); }
  .step-card:hover .connect-line { background-color: rgba(103, 48, 195, .15); }
  .step-card:hover .connect-shimmer { opacity: 1; animation: shimmer 1.1s ease-in-out infinite; }
  .step-card:hover .channel-art { filter: drop-shadow(0 8px 14px rgba(40, 20, 70, .12)); }
  .step-card:hover .bc-pill { transform: scale(1.08); }
  .step-card:hover .bc-old { animation: club-old-loop 3.2s ease-in-out .1s infinite both; }
  .step-card:hover .bc-new { animation: club-new-loop 3.2s ease-in-out .1s infinite both; }
  .step-card:hover .chat-art { filter: drop-shadow(0 8px 14px rgba(40, 20, 70, .12)); }
  .step-card:hover .dot { animation: typing 1s ease-in-out infinite; }
  .step-card:hover .d2 { animation-delay: .15s; }
  .step-card:hover .d3 { animation-delay: .3s; }
  .step-card:hover .step-toggle { background: #fff; color: #333; }
}
@keyframes shimmer { from { transform: translateX(-30px); } to { transform: translateX(70px); } }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3.5px); } }

.step-card.is-open .step-art { opacity: 0; transform: scale(.96); }
.step-card.is-open .step-detail { opacity: 1; transform: none; pointer-events: auto; }
.step-card.is-open .step-toggle { transform: rotate(45deg); }


/* ==== 10. Waitlist banner: "the last page" (sunrise + early member card) =====
   The morning after the story's night. Sun rises when the banner comes into view
   (.is-up, set by main.js section 13); joining stamps the card "EARLY MEMBER" (.is-stamped). */
.waitlist { padding: 40px 16px 110px; }
.waitlist-card {
  --card-paper: #f4e6c1;      /* old card stock (buff) */
  --card-print: #5b4630;      /* printed text on the card (brown ink) */
  --card-rule: rgba(150, 105, 50, .32);   /* the printed lines */
  --card-red: #c8372b;        /* red top rule, the button and the "EARLY MEMBER" stamp */
  --pen: #2c3f9c;             /* ballpoint-blue handwriting */
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 1408px; margin: 0 auto; min-height: 720px;
  border-radius: 24px;
  padding: 84px 24px 96px;
  /* morning sky: blue up top, warm peach and gold at the horizon */
  background: linear-gradient(#78a9ea 0%, #a9c1f0 30%, #f3c7c0 66%, #ffd89c 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.waitlist-card .cloud { z-index: -1; }
.wl-top-left     { left: -2%;   top: 3%;   width: 21%; }
.wl-top-right    { left: 74%;   top: 6%;   width: 28%; }
.wl-bottom-left  { left: 3%;    top: 66%;  width: 19%; }
.wl-bottom-right { left: 76%;   top: 62%;  width: 26%; }

/* The sun: a soft glow that sits on the bottom edge and rises a little into view */
.wl-sky { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.wl-sun {
  position: absolute; left: 50%; bottom: 0; width: min(900px, 120%); aspect-ratio: 1;
  translate: -50% 62%;
  background: radial-gradient(circle, #fffbea 0 13%, #ffe9a8 20%, rgba(255, 205, 120, .6) 34%, rgba(255, 190, 140, .22) 52%, rgba(255, 190, 140, 0) 70%);
  transition: translate 2.6s cubic-bezier(.2, .7, .2, 1);
}
.waitlist-card.is-up .wl-sun { translate: -50% 40%; }

/* The spaceship from Chapter 2 heading off into the morning (flies once, when the sun comes up) */
.wl-ship { position: absolute; left: 0; top: 20%; width: 58px; opacity: 0; }
.wl-ship .flame { transform-box: fill-box; transform-origin: right center; animation: flame .18s ease-in-out infinite alternate; }
.waitlist-card.is-up .wl-ship { animation: wl-ship-away 9s 1.2s cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes wl-ship-away {
  0%   { opacity: 0; transform: translate(-60px, 120px) rotate(-14deg) scale(1); }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(min(1100px, 92vw), -40px) rotate(-14deg) scale(.35); }
}

/* Heading above the card */
.wl-head { text-align: center; max-width: 640px; margin-bottom: 40px; }
.wl-head .the-end { order: 0; margin: 0 0 4px; font-size: 22px; color: rgba(26, 29, 33, .7); }
.wl-head h2 {
  font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 64px; font-weight: 500; line-height: 1.04; letter-spacing: -0.02em;
}
.wl-sub { margin-top: 16px; font-size: 18px; font-weight: 500; opacity: .82; text-wrap: balance; }

/* ---- The early member card ---- */
.member-card {
  position: relative; width: min(580px, 100%);
  padding: 22px 30px 22px;
  background: url("../img/grain.png") 0 0 / 64px 64px, var(--card-paper);
  border-top: 5px solid var(--card-red);
  border-radius: 3px;
  color: var(--card-print);
  rotate: -1.4deg;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 34px 60px -22px rgba(90, 45, 20, .45), 0 3px 8px rgba(90, 45, 20, .12);
}
/* a slightly darker corner, like a card that's been handled a lot */
.member-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 80% at 100% 100%, rgba(140, 95, 40, .14), transparent 55%);
}
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--card-rule); }
.mc-brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.mc-brand img { width: 24px; height: auto; }
.mc-kind { font-family: var(--serif); font-style: italic; font-size: 15px; opacity: .8; }

/* Handwriting (the email you write, pencil notes) */
.hand { font-family: "Nanum Pen Script", "Bradley Hand", cursive; font-style: normal; font-size: 27px; line-height: 1.1; color: var(--pen); }
.mc-pencil { color: rgba(91, 70, 48, .5); font-size: 25px; }   /* soft grey-brown, like pencil */

/* One printed line per field: a small label on the left, the value on the right */
.mc-line {
  position: relative;
  display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center;
  min-height: 54px; border-bottom: 1px solid var(--card-rule);
}
.mc-label { font-family: var(--serif); font-size: 14px; opacity: .8; }
.mc-perk { font-family: var(--serif); font-size: 17px; font-weight: 600; }

/* The email line: no box, you write straight on the card */
.member-card input {
  width: 100%; min-width: 0; padding: 8px 0 4px;
  border: 0; background: transparent; outline: none; border-radius: 0;
  font-size: 28px; color: var(--pen); caret-color: var(--pen);
}
.member-card input::placeholder { color: rgba(44, 63, 156, .75); opacity: 1; }   /* blue ink, a little lighter than typed text: "write here" (pencil notes are brown/grey) */
/* the line under the email gets thicker and blue while you write (red if the email is wrong) */
.mc-member::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background-color .2s; }
.mc-member:focus-within::after { background: var(--pen); }
.mc-invalid {
  position: absolute; right: 0; bottom: -19px;
  font: 600 12px var(--font-ui); color: var(--card-red);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.mc-form.is-invalid .mc-member::after { background: var(--card-red); }
.mc-form.is-invalid .mc-invalid { opacity: 1; }

/* "Since": a pencil note until the stamp lands on it */
.mc-since { position: relative; display: flex; align-items: center; min-height: 54px; }
.mc-since .mc-pencil { transition: opacity .2s; }

/* Bottom of the card: the fine print and the button (red ink, like the stamp) */
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; }
.mc-fine { font-family: var(--serif); font-style: italic; font-size: 14px; opacity: .75; }
.mc-btn {
  position: relative; min-width: 150px; height: 48px; padding: 0 22px;
  font-size: 15px; color: #fff7e6; border-radius: 6px;
  background: url("../img/grain.png") 0 0 / 64px 64px, var(--card-red);
  box-shadow: inset 0 0 0 3px var(--card-red), inset 0 0 0 4px rgba(255, 247, 230, .65);   /* inner edge, like the stamp */
}
.mc-btn:hover { background-color: #b02e23; box-shadow: inset 0 0 0 3px #b02e23, inset 0 0 0 4px rgba(255, 247, 230, .65); }

/* Ink stamps */
.stamp {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px 5px; border: 2.5px solid currentColor; border-radius: 7px;
  font: 600 14px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  /* patchy ink, like a real rubber stamp: a speckle pattern punches tiny gaps */
  -webkit-mask: var(--ink-mask) 0 0 / 90px 90px; mask: var(--ink-mask) 0 0 / 90px 90px;
}
.stamp::before { content: ""; position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: 4px; }   /* the stamp's inner edge */
.stamp small { font-size: 9px; letter-spacing: .1em; font-weight: 600; white-space: nowrap; }
.stamp small:empty { display: none; }
.stamp-member { position: absolute; left: -6px; top: 50%; translate: 0 -50%; color: var(--card-red); rotate: -5deg; opacity: 0; scale: 1.8; pointer-events: none; }

/* After joining: the stamp thumps down over the pencil note */
.member-card.is-stamped .stamp-member { animation: stamp-down .42s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.member-card.is-stamped .mc-since .mc-pencil { opacity: 0; }
.member-card.is-stamped { animation: card-thump .3s .16s ease-out; }
@keyframes stamp-down { 0% { opacity: 0; scale: 1.8; } 60% { opacity: 1; } 100% { opacity: .92; scale: 1; } }
@keyframes card-thump { 50% { translate: 0 3px; } }
.member-card input.is-long { font-size: 22px; }   /* long emails: smaller writing so they fit on the line */


/* ==== 11. FAQ =============================================================== */
.faq { padding: 80px 0 120px; }
.pill { display: inline-block; margin-bottom: 14px; padding: 2px 12px; border: 1px solid var(--purple); border-radius: 999px; color: var(--purple); font-size: 14px; font-weight: 500; }
.faq-list details { background: #f8f8f8; border-radius: 20px; margin-bottom: 8px; transition: background-color .2s; }
.faq-list details[open] { background: #fff; box-shadow: 0 1px 30px rgba(0, 0, 0, .1); }
.faq-list summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 60px 22px 24px; font-family: var(--font-ui); font-size: 16px; font-weight: 600;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font: 300 26px/1 var(--font); color: #666; transition: transform .25s; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-answer { overflow: hidden; }
.faq-list details p { padding: 0 24px 24px; font-family: var(--font-ui); color: #666; line-height: 1.6; }
.faq-list a { color: var(--purple); }


/* ==== 12. Footer ============================================================ */
.site-footer { padding: 40px 0 48px; }
.footer-top { display: grid; grid-template-columns: 1.2fr .8fr 1.3fr; gap: 40px; }
.footer-brand img { width: 125px; height: auto; }
.footer-brand p { margin-top: 14px; color: var(--muted); }
.footer-col h3 { font-size: 18px; font-weight: 500; margin-bottom: 14px; }
.footer-col a { display: block; margin-bottom: 10px; color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--text); }
.footer-signup p { color: var(--muted); margin-bottom: 36px; }
.signup-small { max-width: 400px; }
.signup-small .btn { height: 42px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 56px; color: var(--muted); font-size: 15px; }
.footer-mail { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.footer-mail svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }


/* ==== 13. Thank-you popup =================================================== */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(20, 16, 30, .45); backdrop-filter: blur(2px); animation: fade .25s ease; }
.modal-card {
  position: relative; width: min(456px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: #fff; border-radius: 24px; padding: 36px 32px 28px; text-align: center;
  box-shadow: 0 30px 80px rgba(20, 10, 40, .25); animation: pop .3s cubic-bezier(.2, .9, .3, 1.2);
}
.modal-close { position: absolute; top: 14px; left: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f1f1f4; color: #888; font-size: 20px; line-height: 1; cursor: pointer; }
.modal-close:hover { background: #e6e6ec; color: var(--text); }
.modal-logo {
  width: 150px; height: 96px; margin: -8px auto 12px; display: grid; place-items: center;
  background:
    radial-gradient(closest-side, rgba(255, 160, 90, .35), transparent),
    linear-gradient(rgba(255, 160, 90, .12) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, rgba(255, 160, 90, .12) 1px, transparent 1px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent);
  mask-image: radial-gradient(closest-side, #000 60%, transparent);
}
.modal-logo img { width: 60px; height: auto; }
.modal-kicker { color: var(--purple); font-weight: 500; }
.modal-card h2 { margin: 26px 0 28px; font-size: 32px; font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; }
.modal-card > p { color: var(--muted); }
.modal-small { margin-top: 14px; color: #a7a7a7 !important; }
.modal-cta { margin-top: 32px; width: 174px; height: 46px; }
.modal-share {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px auto 0;
  border: 0; background: none; color: var(--purple); font: 600 14px var(--font-ui); cursor: pointer;
}
.modal-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.modal-share:hover { text-decoration: underline; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }


/* ==== 14. Scroll animations ================================================= */
/* Only when JavaScript runs (main.js adds the "js" class), so nothing stays hidden without it */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Respect visitors who turned off animations on their device */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .cloud, .wl-ship, .haze, .hv-item, .hv-card, .site-header .header-inner,
  .hero-text h1, .hero-sub, .hero-form, .hero-note, .hero-points, .connect-shimmer, .dot, .bc-new, .bc-old { animation: none !important; }
  .hero-card::after { animation: none; }
  .wl-sun { transition: none; }
  .member-card, .member-card .stamp-member { animation-duration: .01s !important; animation-delay: 0s !important; }
}


/* ==== 15. Tablet & phone layouts ============================================ */
@media (max-width: 1100px) {
  .hero-card { grid-template-columns: minmax(0, 1fr) 330px; padding: 64px 40px 64px 32px; }
  .hero-text h1 { font-size: 54px; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* menu turns into a drop-down under the header */
  .menu-toggle { display: block; }
  .header-cta { display: none; }
  .site-header { padding: 12px; }
  .site-header.is-scrolled .header-inner, .nav-open .header-inner { max-width: none; background: #fff; box-shadow: 0 1px 30px rgba(0, 0, 0, .12); }
  .main-nav {
    position: absolute; left: 12px; right: 12px; top: calc(100% - 6px);
    flex-direction: column; gap: 0; padding: 8px 20px 16px;
    background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 20px 30px rgba(0, 0, 0, .08);
    opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s;
  }
  .main-nav a { padding: 12px 0; font-size: 18px; }
  .site-header.is-scrolled .main-nav { gap: 0; }   /* keep the drop-down links tight */
  .nav-open .main-nav { opacity: 1; transform: none; pointer-events: auto; }

  .hero { padding-top: 100px; }
  .hero-card { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 56px 28px 0; gap: 48px; }   /* minmax(0,…): Safari would otherwise let the column grow past the card */
  .hero-visual { justify-self: center; max-width: 360px; margin-bottom: 48px; }
  .cloud-top-right { width: 220px; left: calc(100% - 90px); top: 20px; }
  .hero-card::after { inset: 0; animation: none; }
  .hv-item .hv-card { animation: none; }
  .cloud-left { width: 160px; left: -70px; top: auto; bottom: 120px; }
  .cloud-bottom-right { width: 200px; left: calc(100% - 80px); top: auto; bottom: 40px; }
  .blob { width: 84%; }
  .section-head .display { font-size: 46px; }
  .feature-grid, .easy-grid, .step-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 340px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* minmax(0,…): Safari would otherwise let the email box widen the page */
  .footer-signup { grid-column: 1 / -1; }
  .waitlist-card { min-height: 0; padding: 72px 20px 84px; }
  .wl-head h2 { font-size: 50px; }
  .wl-top-left { width: 34%; top: 1%; left: -8%; } .wl-top-right { width: 38%; top: 2%; left: 72%; }
  .wl-bottom-left { width: 30%; top: 82%; left: -6%; } .wl-bottom-right { width: 36%; top: 80%; left: 74%; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .hero { padding-top: 92px; }
  .hero-card { padding: 40px 20px 0; border-radius: 18px; }
  .hero-text h1 { font-size: 40px; }
  .hero-sub { font-size: 17px; margin: 20px 0 32px; }
  .signup-note { text-align: left; font-size: 15px; }
  .hero-points { margin-top: 28px; }
  .signup input { font-size: 15px; padding: 0 10px; }
  .signup .btn { padding: 0 14px; }
  .cloud-left, .cloud-bottom-right { display: none; }
  .cloud-top-right { width: 120px; left: calc(100% - 64px); top: -26px; }
  .section-head { margin-bottom: 40px; }
  .section-head h2 { font-size: 30px; }
  .section-head .display { font-size: 36px; }
  .section-head p { font-size: 17px; }
  .features, .benefits, .easy, .steps, .faq { padding-top: 72px; }
  .features { padding-bottom: 80px; }
  .feature-card h3, .easy-card h3, .step-foot h3 { font-size: 26px; }
  .feature-media { height: 210px; padding: 18px 14px 0; }
  .feature-media img, .media-gradient img { max-width: 90%; }
  .benefit-grid { grid-template-columns: 1fr; }
  .waitlist { padding: 24px 12px 80px; }
  .waitlist-card { border-radius: 18px; padding: 60px 12px 72px; }
  .wl-head { margin-bottom: 28px; }
  .wl-head .the-end { font-size: 19px; }
  .wl-head h2 { font-size: 38px; }
  .wl-sub { font-size: 16px; margin-top: 12px; }
  .wl-ship { width: 40px; }
  /* the card on a phone: less tilt, narrower labels, the button under the fine print area */
  .member-card { padding: 18px 18px 18px; rotate: -1deg; }
  .mc-brand { font-size: 18px; }
  .mc-kind { font-size: 14px; }
  .mc-line { grid-template-columns: 76px minmax(0, 1fr); min-height: 50px; }
  .mc-since { min-height: 50px; }
  .member-card input { font-size: 25px; }
  .member-card input.is-long { font-size: 20px; }
  .mc-pencil { font-size: 22px; }
  .stamp { font-size: 12px; padding: 5px 8px 4px; }
  .stamp small { font-size: 8px; }
  .mc-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding-top: 22px; }
  .mc-fine { text-align: center; }
  .mc-btn { width: 100%; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .modal-card { padding: 32px 22px 24px; }
  .modal-card h2 { font-size: 26px; }
}

/* ---- version 2: story, why, sky on smaller screens ---- */
@media (max-width: 1100px) {
  .story-grid { gap: 40px; }
  .story-step h2 { font-size: 44px; }
}
@media (max-width: 900px) {
  .story { --story-screens: 5.6; }   /* a bit more scrolling per stage on phones */
  .story-sticky { align-items: flex-start; padding-top: 86px; }
  .story-grid { grid-template-columns: 1fr; gap: 18px; }
  .story-kicker { margin-bottom: 8px; font-size: 15px; }
  .story-step h2 { font-size: 30px; }
  .story-step p { margin-top: 8px; font-size: 16px; }
  .story-dots { margin-top: 14px; }
  .slack { height: min(470px, calc(100vh - 330px)); }
  .why-points { grid-template-columns: 1fr; gap: 26px; }
  .quotes { grid-template-columns: 1fr; }
  .slip-1, .slip-2, .slip-3, .slip-4 { grid-column: 1; margin-top: 0; }
  .slip-2, .slip-4 { margin-left: 6%; }
  .slip-1, .slip-3 { margin-right: 6%; }
}
@media (max-width: 560px) {
  .hero-text h1 { font-size: 42px; }
  .section-head h2 { font-size: 34px; }
  .why { padding-top: 90px; }
  .why-intro h2 { font-size: 40px; }
  .why-lede { font-size: 19px; }
  .slip blockquote { font-size: 20px; }
  .msg-body p { font-size: 14px; }
  .opt { gap: 10px; padding: 6px 8px 6px 6px; }
  .cover { width: 32px; height: 46px; font-size: 6.5px; }
  .sc-story, .sc-steps { display: none; }   /* fewer clouds on small screens */
  .sc-why { width: 170px; right: -70px; top: -70px; }
}
@media (prefers-reduced-motion: reduce) {
  .msg.is-new, .count.bump { animation: none !important; }
  .story-js .story-step { transition: none; }
}


/* ==== Story v2.1: the journey (pick → new world → night of reading → morning talk) ==== */

/* Hint under the hero card */
.scroll-cue {
  position: fixed; left: 50%; bottom: 28px; z-index: 40; transform: translateX(-50%);   /* always visible on arrival */
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px;
  background: #fff; color: var(--text); border-radius: 99px; text-decoration: none;
  font: 600 15px var(--font-ui); white-space: nowrap; box-shadow: 0 10px 30px rgba(70, 35, 100, .16);
  animation: cue-in .8s cubic-bezier(.2, .9, .3, 1.2) 1.6s both; transition: opacity .3s;
}
.scroll-cue svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: cue-bounce 1.4s ease-in-out infinite; }
.scroll-cue.is-gone { opacity: 0; pointer-events: none; }
@keyframes cue-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes cue-bounce { 50% { transform: translateY(4px); } }

/* Background moods behind the story */
.story-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.story-sky > div { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.night { background: radial-gradient(ellipse 70% 60% at 75% 15%, #3d3285 0%, transparent 65%), linear-gradient(180deg, #121738 0%, #221a4d 60%, #3a2a5f 100%); }
/* morning glow: sits a little above the bottom and fades out before the edge, so it blends into the
   next section instead of stopping in a hard line when the story scrolls away */
.dawn {
  background: radial-gradient(ellipse 85% 50% at 50% 80%, rgba(255, 168, 92, .5), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 60%, transparent 100%); mask-image: linear-gradient(#000 60%, transparent 100%);
}
.story.is-night .night, .story.is-night .stars { opacity: 1; }
/* Night order: arriving, the moon, astronaut and spaceship appear first and THEN the sky turns blue;
   leaving, the sky lightens first and they fade after it (see .space further down) */
.story.is-night .night, .story.is-night .stars { transition-delay: .7s; }
.story.is-dawn .dawn { opacity: 1; }
.star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); animation: twinkle var(--d) ease-in-out var(--delay) infinite; }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.6); } }
.story-captions, .story-step p, .story-kicker, code { transition: color .8s ease, background-color .8s ease; }
.story.is-night .story-captions { color: #fff; }
.story.is-night .story-step p { color: rgba(255, 255, 255, .82); }
.story.is-night .story-kicker { color: #cdb8ff; }
.story.is-night .story-dots i { background: rgba(255, 255, 255, .25); }
.story.is-night .story-dots i.is-on { background: #ffb36b; }
/* the text turns light only once the sky has turned dark (same delay as the sky) */
.story.is-night .story-captions, .story.is-night .story-step p, .story.is-night .story-kicker, .story.is-night code { transition-delay: .7s; }
.story.is-night .story-dots i { transition-delay: 0s, .7s; }

/* Stars and planets bursting out of the winning book */
.burst { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.particle {
  position: absolute; left: var(--x); top: var(--y); font-size: var(--size); color: var(--c); line-height: 1;
  animation: fly var(--t) cubic-bezier(.12, .75, .3, 1) forwards;
}
@keyframes fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
}

/* Typed command with a blinking cursor */
.caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: #1264a3; animation: blink 1s steps(1) infinite; }
.caret.is-done { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* Votes rolling in: bar fills behind each book, voter avatars pop in, emoji float up */
.opt { position: relative; overflow: hidden; isolation: isolate; }
.bar { position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--fill, 0%); background: rgba(103, 48, 195, .08); transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.opt-win .bar { background: rgba(255, 123, 0, .12); }
.voters { display: flex; height: 18px; margin-top: 4px; }
.voter { width: 18px; height: 18px; margin-right: -5px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; font: 700 9px/18px var(--font-ui); color: #fff; text-align: center; animation: pop-in .35s cubic-bezier(.2, .9, .3, 1.6); }
.voter.more { background: #e9e9ef; color: #666; width: auto; padding: 0 6px; border-radius: 9px; margin-left: 4px; }
.float-emoji { position: absolute; right: 22px; top: 50%; z-index: 2; font-size: 15px; pointer-events: none; animation: rise .9s ease-out forwards; }
@keyframes rise { from { opacity: 1; transform: translateY(-50%); } to { opacity: 0; transform: translateY(-260%) scale(1.3); } }
.opt { transition: border-color .4s, background-color .4s, box-shadow .4s, opacity .5s, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
.story.is-decided .opt:not(.opt-win) { opacity: .45; transform: scale(.97); }
.story.is-decided .opt-win { transform: scale(1.02); }

/* The winner message: the big moment */
.winner { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding: 10px; border-radius: 10px; background: linear-gradient(120deg, rgba(255, 123, 0, .1), rgba(103, 48, 195, .08)); }
.cover-lg { width: 62px; height: 90px; font-size: 10.5px; padding: 8px 6px; position: relative; overflow: hidden; }
.cover-lg::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); }
.m-win.is-new .cover-lg::after { animation: sheen 1.2s .5s ease-out; }
.m-win.is-new { animation: win-in .8s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes win-in { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@keyframes sheen { to { left: 140%; } }

/* Reading progress */
.progress { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 8px; }
.progress li { display: flex; align-items: center; gap: 10px; }
.progress .av { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }
.track { flex: 1; height: 8px; border-radius: 99px; background: #eef0f5; overflow: hidden; }
.track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--orange)); transition: width 1.6s cubic-bezier(.2, .8, .2, 1); }
.m-remind.is-filled .track i { width: var(--p); }
.progress em { width: 38px; text-align: right; font-style: normal; font-size: 13px; color: #555; }
.small { font-size: 13px !important; }

/* The discussion question */
.question { margin-top: 8px; padding: 12px 14px; border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0; background: #fff6ee; font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 16px !important; line-height: 1.45 !important; }

/* "… is typing" */
.typing { display: none; align-items: center; gap: 6px; margin-left: 26px; padding-left: 22px; font-size: 13px; color: #777; }
.typing.is-on { display: flex; animation: msg-in .3s ease both; }
.tdots { display: inline-flex; gap: 3px; }
.tdots i { width: 5px; height: 5px; border-radius: 50%; background: #9a9aa3; animation: typing 1s ease-in-out infinite; }
.tdots i:nth-child(2) { animation-delay: .15s; } .tdots i:nth-child(3) { animation-delay: .3s; }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } }

/* ==== Join in: the visitor votes in the poll and reacts to messages (main.js section 9) ==== */
/* the poll: books can be tapped until the winner is announced */
.story:not(.is-decided) .opt { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story:not(.is-decided) .opt:hover { border-color: rgba(103, 48, 195, .35); }
.story:not(.is-decided) .opt:active { transform: scale(.985); }
.opt.is-mine { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(103, 48, 195, .14); }
.story.is-decided .opt.is-mine:not(.opt-win) { opacity: .7; }                /* your (losing) pick stays a bit clearer */
.voter.you { width: auto; padding: 0 5px; border-radius: 9px; margin-right: 1px; background: var(--purple); font-size: 8.5px; position: relative; z-index: 1; }
/* handwritten "vote!" next to the Slack window: a quiet, light-grey note with a short arrow towards the poll
   (computers only). It sits in the Slack window's grid cell, pulled out to the left so it stays outside the window;
   the arrow tip stops just short of the window's edge, at the height of the poll. */
.story-grid { position: relative; }
.vote-note {
  grid-column: 2; grid-row: 1; align-self: end; justify-self: start;
  width: 170px; margin-bottom: 96px; translate: -152px 0; position: relative; z-index: 3;
  color: #a7a7b3; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.vote-note svg { display: block; width: 170px; height: 100px; overflow: visible; }
.vote-note path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vote-note .vn-arrow { stroke-dasharray: 70; stroke-dashoffset: 70; }
.vote-note .vn-head { stroke-dasharray: 30; stroke-dashoffset: 30; }
.vn-text { position: absolute; left: 6px; bottom: 10px; font: 40px/1 "Nanum Pen Script", "Bradley Hand", cursive; rotate: -7deg; }
.story.show-vote-note .vote-note { opacity: 1; }
.story.show-vote-note .vn-arrow { animation: vn-draw .45s .25s ease-out forwards; }      /* the arrow draws itself */
.story.show-vote-note .vn-head { animation: vn-draw .2s .65s ease-out forwards; }
@keyframes vn-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 900px) { .vote-note { display: none; } }                            /* not on phones */
/* computers: text and Slack window keep their own spots, so the note can share the Slack window's cell */
@media (min-width: 901px) { .story-captions { grid-column: 1; grid-row: 1; } .story-grid > .slack { grid-column: 2; grid-row: 1; } }

/* Easter egg: tap the astronaut during the night and it spins and says hi */
.story .story-grid, .story .story-captions, .story .story-captions * { pointer-events: none; }   /* let taps through the layout and text to the astronaut behind it */
.story .story-grid .slack { pointer-events: auto; }                                                  /* …but the Slack window stays tappable */
.story .story-captions .story-step.is-active { pointer-events: none; }                               /* (beats the older "active caption" rule) */
.story.is-night .astronaut { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.astronaut.is-spinning { animation: astro-float 11s ease-in-out infinite alternate, astro-spin 1.1s cubic-bezier(.3, .7, .3, 1); }
@keyframes astro-spin { 0% { rotate: 0deg; scale: 1; } 50% { scale: 1.25; } 100% { rotate: 360deg; scale: 1; } }
.astro-hi { position: absolute; z-index: 1; font: 30px/1 "Nanum Pen Script", "Bradley Hand", cursive; color: #fff; white-space: nowrap; pointer-events: none; animation: astro-hi 1.8s ease-out forwards; }
@keyframes astro-hi { 0% { opacity: 0; translate: 0 6px; } 15% { opacity: 1; translate: 0 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -18px; } }

/* the winner message's line about your pick */
.your-pick { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--purple); }
/* reactions: tap to add yours (Slack's blue = yours) */
.react { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.react:hover { border-color: #c9c9d6; }
.react.is-mine { background: #e8f1fb; border-color: #1d9bd1; color: #1264a3; }
.react.pop { animation: bump .3s ease; }
.msg-reply { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.reply-react { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .react.pop, .vote-note .vn-arrow, .vote-note .vn-head, .astronaut.is-spinning, .astro-hi { animation: none !important; }
}


/* ==== A year of books: a hand-built bookshelf ====================================
   Sizes use a unit (--u) so the whole shelf scales down on phones. */
.shelf { position: relative; padding: 130px 0 30px; text-align: center; overflow-x: clip; }   /* the plant may poke out sideways on small phones: trimmed here */
.shelf h2 { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 56px; font-weight: 520; line-height: 1.06; letter-spacing: -0.02em; max-width: 760px; margin: 0 auto; }
.shelf-lede { max-width: 620px; margin: 22px auto 0; font-size: 21px; line-height: 1.5; color: rgba(26, 29, 33, .82); }

.bookcase { --u: 1; width: fit-content; max-width: 100%; margin: 70px auto 0; }
.books { display: flex; align-items: flex-end; gap: calc(3px * var(--u)); padding: 0 calc(18px * var(--u)); }

/* one book spine */
.book {
  position: relative; flex: none;
  width: calc(var(--w) * 1px * var(--u)); height: calc(var(--h) * 1px * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(24px * var(--u)) 0 calc(30px * var(--u));
  border-radius: calc(3px * var(--u)) calc(3px * var(--u)) 2px 2px;
  color: var(--ink);
  /* round-looking spine: light from the left, shade on the right, fine paper grain */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .26) 0%, rgba(255, 255, 255, .16) 14%, rgba(255, 255, 255, 0) 36%, rgba(0, 0, 0, .06) 72%, rgba(0, 0, 0, .3) 100%),
    url("../img/grain.png") 0 0 / 64px 64px;
  background-color: var(--bg);
  box-shadow: 3px 0 5px -2px rgba(40, 25, 15, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: translate .35s cubic-bezier(.2, .9, .3, 1.2);
}
.book::before, .book::after {   /* decorative bands near the top and bottom */
  content: ""; position: absolute; left: 0; right: 0; height: calc(3px * var(--u)); background: var(--band); opacity: .75;
}
.book::before { top: 7%; }
.book::after { bottom: 9%; box-shadow: 0 calc(5px * var(--u)) 0 var(--band); }
.book b { writing-mode: vertical-rl; font: 600 calc(var(--fs, 13) * 1px * var(--u))/1.1 var(--serif); font-variation-settings: "SOFT" 100; white-space: nowrap; letter-spacing: .01em; max-height: 76%; overflow: hidden; }
.book i { font: 600 calc(8.5px * var(--u)) var(--font); font-style: normal; opacity: .75; writing-mode: vertical-rl; letter-spacing: .04em; }
.book-lean { rotate: 7deg; transform-origin: bottom left; margin-left: calc(10px * var(--u)); }
/* the book the team just read: an orange bookmark ribbon */
.ribbon { position: absolute; left: 70%; top: calc(-10px * var(--u)); width: calc(8px * var(--u)); height: calc(46px * var(--u)); background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
/* hover: the book lifts a little and shows its month */
.month { position: absolute; left: 50%; top: calc(-34px * var(--u)); translate: -50% 4px; padding: 3px 9px; border-radius: 99px; background: #fff; color: var(--text); font: 600 12px var(--font-ui); font-style: normal; white-space: nowrap; box-shadow: 0 6px 16px rgba(40, 25, 70, .14); opacity: 0; transition: opacity .25s, translate .25s; pointer-events: none; }
@media (hover: hover) {
  .book:hover { translate: 0 calc(-12px * var(--u)); }
  .book:hover .month { opacity: 1; translate: -50% 0; }
}

/* two books lying flat on the left, like a bookend */
.stack { display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; margin-right: calc(8px * var(--u)); }
.stack i { display: block; width: calc(96px * var(--u)); height: calc(18px * var(--u)); border-radius: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .2)), #8a5a44; box-shadow: inset calc(-6px * var(--u)) 0 0 rgba(255, 255, 255, .18); }
.stack i:first-child { width: calc(84px * var(--u)); margin-left: calc(6px * var(--u)); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .2)), #4c6c8c; }

/* the plant at the end grows as the shelf fills */
.plant { flex: none; width: calc(78px * var(--u)); margin-left: calc(14px * var(--u)); }
.plant svg { display: block; width: 100%; height: auto; overflow: visible; }
.leaf { transform-box: fill-box; transform-origin: bottom center; }

/* the wooden shelf */
.plank {
  height: calc(18px * var(--u)); border-radius: 3px;
  background: linear-gradient(180deg, #f0d4ad 0%, #dcb688 22%, #c49568 60%, #a7774f 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 22px 30px -10px rgba(90, 55, 25, .38);
}

/* arrival: books slide onto the shelf one by one, then the plant grows */
.js .shelf .book, .js .shelf .stack { opacity: 0; transform: translateX(-16px); }
.shelf.is-filling .book, .shelf.is-filling .stack { animation: shelve .65s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * .09s) forwards; }
@keyframes shelve { to { opacity: 1; transform: none; } }
.js .shelf .leaf { transform: scale(0); }
.shelf.is-filling .leaf { animation: grow 1s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.shelf.is-filling .l1 { animation-delay: 1.2s; } .shelf.is-filling .l2 { animation-delay: 1.4s; } .shelf.is-filling .l3 { animation-delay: 1.6s; }
@keyframes grow { to { transform: scale(1); } }

@media (max-width: 760px) {
  .bookcase { --u: .58; margin-top: 48px; }
  .month { display: none; }
}
@media (max-width: 420px) { .bookcase { --u: .48; } .stack { display: none; } }   /* fits a 375–390px phone */

/* ==== Project Hail Mary's night sky: moon, spaceship, astronaut ==== */
.space { opacity: 0; transition: opacity .9s ease .8s; }            /* leaving the night: fade after the sky */
.story.is-night .space { opacity: 1; transition-delay: 0s; }        /* arriving: appear first */
.space svg { position: absolute; }
.moon { right: 7%; top: 13%; width: 76px; filter: drop-shadow(0 0 18px rgba(255, 236, 190, .45)); }
.ship { left: 0; top: 18%; width: 96px; animation: ship-cross 26s linear infinite; }
.ship .flame { transform-box: fill-box; transform-origin: right center; animation: flame .18s ease-in-out infinite alternate; }
.astronaut { left: 6%; bottom: 9%; width: 70px; animation: astro-float 11s ease-in-out infinite alternate; }
@keyframes ship-cross { from { transform: translate(-140px, 40px) rotate(-6deg); } to { transform: translate(calc(100vw + 40px), -30px) rotate(-6deg); } }
@keyframes flame { to { transform: scaleX(.6); } }
@keyframes astro-float { 0% { transform: translate(0, 0) rotate(-12deg); } 100% { transform: translate(26px, -34px) rotate(14deg); } }
@media (max-width: 900px) {
  /* phones: in the open space around the chapter title, not hidden behind the Slack window */
  .moon { width: 44px; top: 112px; bottom: auto; right: 6%; }
  .astronaut { width: 40px; top: auto; bottom: auto; left: auto; right: 9%; top: calc(86px + 22%); }
  .ship { width: 56px; top: calc(70px + 26%); bottom: auto; }
}

/* ==== Chapters: the page reads like a short book ==== */
.chapter { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 19px; font-weight: 500; color: var(--purple); letter-spacing: .01em; margin-bottom: 14px; }
.section-head .chapter { margin-bottom: 10px; }
.story-kicker.chapter { margin-bottom: 18px; }
.story-kicker.is-turning { animation: page-turn .5s ease; }
@keyframes page-turn { 0% { opacity: 0; transform: translateX(-10px); } }
.the-end { order: -1; margin-bottom: 14px; font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 20px; color: rgba(26, 29, 33, .78); }

@media (max-width: 900px) {
  .story-sticky { align-items: flex-start; padding-top: 84px; }
  .shelf { padding-top: 90px; }
  .shelf h2 { font-size: 38px; }
  .shelf-lede { font-size: 18px; }
  .scroll-cue { font-size: 14px; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .particle, .star, .caret, .tdots i, .scroll-cue svg, .scroll-cue, .voter, .float-emoji, .m-win.is-new { animation: none !important; }
  .story-kicker.is-turning, .ship, .astronaut, .ship .flame { animation: none !important; }
  .js .shelf .book, .js .shelf .stack { opacity: 1; transform: none; animation: none !important; }
  .js .shelf .leaf { transform: none; animation: none !important; }
}

/* iPhone/Android: the address bar hides and shows while you scroll.
   - The story's background (night sky etc.) fills the TALLEST screen (lvh), so no strip flickers
     at the bottom when the bar hides.
   - The Slack window is sized to the SHORTEST screen (svh), so it's always fully visible. */
@supports (height: 100lvh) {
  .story-sticky { height: 100lvh; }
  @media (max-width: 900px) { .slack { height: min(470px, calc(100svh - 330px)); } }
}
@media (max-width: 900px) {
  /* the spaceships' flickering flame redraws constantly; keep it still on phones */
  .ship .flame, .wl-ship .flame { animation: none; }
}