/* ===========================================================
   Flower — paper & seed site styles
   =========================================================== */
:root{
  --paper-top:#ece5d7; --paper-mid:#f0e9dd; --paper-bot:#f5f0e7;
  --sheet:#f8f4ec;                 /* page surface, a touch lighter */
  --ink:#1f1d1a; --ink2:#6b665d; --ink3:#9a948a;
  --deep:#0c1119;                  /* footer navy */
  --blue:#1488d8; --blue-soft:#5db4ee; --green:#2f7a4d; --green-soft:#7cc295;
  --sage:#aebfa6; --line:rgba(31,29,26,.14);
  --fr:'Fraunces',Georgia,serif; --ns:'Newsreader',Georgia,serif; --mn:'JetBrains Mono',monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; color:var(--ink); font-family:var(--ns);
  background:linear-gradient(180deg, var(--paper-top) 0%, var(--paper-mid) 30%, var(--paper-bot) 100%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased; }

/* paper grain — felt, not seen */
body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  mix-blend-mode:multiply; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"); }

/* dandelion seed — tinted mask */
.seed{ position:absolute; pointer-events:none; z-index:1;
  -webkit-mask:url('assets/logo/seed-dark.png') center/contain no-repeat;
  mask:url('assets/logo/seed-dark.png') center/contain no-repeat; }
@keyframes drift{ 0%{ transform:translate(0,0) rotate(var(--r,0deg)); }
  50%{ transform:translate(14px,-18px) rotate(calc(var(--r,0deg) + 4deg)); }
  100%{ transform:translate(0,0) rotate(var(--r,0deg)); } }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .seed-sm1,.seed-sm2{ animation:none !important; }
}

/* B · progress bar */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--blue); z-index:60;
  box-shadow:0 0 0 .5px rgba(20,40,70,.15); }

/* ---------------- top bar ---------------- */
.topbar{ position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center; padding:34px clamp(28px,5vw,72px); }
.wm{ display:flex; align-items:center; gap:11px; font-family:var(--fr); font-weight:500;
  font-size:23px; letter-spacing:-.01em; }
.wm img{ width:26px; height:26px; display:block; }
.wm .flow{ color:var(--blue); } .wm .er{ color:var(--green); }
.nav{ display:flex; align-items:center; gap:22px; font-family:var(--mn); font-size:13px;
  letter-spacing:.04em; color:var(--ink2); }
.nav .lang{ display:inline-flex; align-items:center; gap:7px; }
.lang-btn{ font-family:var(--mn); font-size:13px; letter-spacing:.04em; color:var(--ink2);
  background:none; border:none; cursor:pointer; padding:4px 2px; line-height:1; transition:color .2s; }
.lang-btn:hover{ color:var(--ink); }
.lang-btn.on{ color:var(--ink); font-weight:700; }
.lang-sep{ opacity:.4; }
.nav a{ color:inherit; text-decoration:none; display:flex; }
.nav .ig{ width:18px; height:18px; border:1.5px solid currentColor; border-radius:5px; position:relative; }
.nav .ig::after{ content:""; position:absolute; inset:4px; border:1.5px solid currentColor; border-radius:50%; }

/* ---------------- device ---------------- */
.device-wrap{ position:relative; }
.device-wrap::after{ content:""; position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  width:74%; height:48px; z-index:-1; filter:blur(18px);
  background:radial-gradient(ellipse at center, rgba(28,42,64,.28), rgba(28,42,64,0) 72%); }
.device{ background:var(--blue); border-radius:16px; position:relative; width:472px; padding:13px 14px;
  box-shadow:0 2px 4px rgba(20,40,70,.18), 0 30px 70px -28px rgba(20,40,70,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.device::after{ content:""; position:absolute; inset:13px 14px; border-radius:4px;
  box-shadow:inset 0 0 0 3px #11161f; pointer-events:none; }
.device rsvp-screen{ display:block; height:152px; border-radius:3px; overflow:hidden; }

.controls{ display:flex; align-items:center; gap:18px; font-family:var(--mn);
  font-size:12px; color:var(--ink2); letter-spacing:.03em; }
.ctl{ display:flex; align-items:center; gap:9px; }
.slider{ width:96px; height:3px; background:rgba(31,29,26,.18); border-radius:2px; position:relative; }
.slider::after{ content:""; position:absolute; left:38%; top:50%; width:11px; height:11px;
  transform:translate(-50%,-50%); background:var(--blue); border-radius:50%; }
.dots{ display:flex; gap:6px; }
.dots i{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--ink2); }
.dots i.on{ background:var(--ink); border-color:var(--ink); }
.lt{ display:flex; gap:7px; align-items:center; }
.lt b{ color:var(--ink); } .lt span{ opacity:.5; }

/* interactive controls (hero + RSVP) */
.ctl label,.ctl{ cursor:default; }
input.c-wpm{ -webkit-appearance:none; appearance:none; width:92px; height:3px; border-radius:2px;
  background:rgba(31,29,26,.18); outline:none; cursor:pointer; }
input.c-wpm::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border:none;
  border-radius:50%; background:var(--blue); cursor:pointer; }
input.c-wpm::-moz-range-thumb{ width:13px; height:13px; border:none; border-radius:50%; background:var(--blue); cursor:pointer; }
.c-wpm-val{ color:var(--ink); font-variant-numeric:tabular-nums; min-width:3ch; }
.seg{ display:flex; gap:7px; }
.seg button{ width:13px; height:13px; padding:0; border-radius:50%; border:1.5px solid var(--ink2);
  background:none; cursor:pointer; transition:box-shadow .18s; }
.seg button[data-th="paper"]{ background:#f3eee4; border-color:var(--ink2); }
.seg button[data-th="eink"]{ background:#c7ccc2; border-color:var(--ink2); }
.seg button[data-th="dark"]{ background:#0b111c; border-color:#0b111c; }
.seg button.on{ box-shadow:0 0 0 2px var(--paper-bot), 0 0 0 3.5px var(--blue); }
.c-lang{ font-family:var(--mn); font-size:12px; color:var(--ink2); background:none; border:none;
  cursor:pointer; padding:2px 3px; letter-spacing:.04em; }
.c-lang.on{ color:var(--ink); font-weight:600; }

/* RSVP read-mode controls */
.rsvp-controls{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center;
  font-family:var(--mn); font-size:12px; color:var(--ink2); letter-spacing:.03em; }
.c-play{ font-family:var(--mn); font-size:12px; letter-spacing:.04em; color:var(--ink);
  background:none; border:1px solid var(--line); padding:8px 16px; cursor:pointer; transition:border-color .2s; }
.c-play:hover{ border-color:var(--ink); }

/* ---------------- buttons ---------------- */
.btn{ font-family:var(--mn); font-size:13.5px; letter-spacing:.02em; padding:14px 22px;
  border:1px solid var(--ink); color:var(--ink); background:none; border-radius:0;
  text-decoration:none; display:inline-block; cursor:pointer; transition:background .25s, color .25s; }
.btn:hover{ background:var(--ink); color:var(--paper-bot); }
.btn.ghost{ border-color:transparent; color:var(--blue); padding-left:4px; padding-right:4px; }
.btn.ghost:hover{ background:none; color:var(--blue); text-decoration:underline; text-underline-offset:4px; }

/* ---------------- hero ---------------- */
.hero{ position:relative; min-height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:30px; padding:120px clamp(28px,6vw,60px) 90px; }
.hero > *:not(.seed){ position:relative; z-index:2; }
.hero .seed-big{ z-index:1; left:-150px; bottom:-140px; width:560px; height:560px;
  background:var(--sage); opacity:.34; --r:-9deg; transform:rotate(var(--r)); }
.hero .seed-sm1{ z-index:1; right:9%; top:16%; width:88px; height:88px;
  background:var(--sage); opacity:.2; --r:22deg; animation:drift 19s ease-in-out infinite; }
.hero .seed-sm2{ z-index:1; right:21%; top:30%; width:52px; height:52px;
  background:#9fb6c9; opacity:.16; --r:-30deg; animation:drift 25s ease-in-out infinite 3s; }
.hero h1.lead{ font-family:var(--fr); font-weight:300; line-height:1.02; letter-spacing:-.02em;
  margin:0; font-size:clamp(46px,7vw,80px); max-width:14ch; text-wrap:balance; }
.hero p.sub{ margin:0; line-height:1.5; color:var(--ink2); font-size:clamp(18px,2.2vw,22px); max-width:32ch; }
.hero .btnrow{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.scrollcue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--mn); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2);
  text-decoration:none; }
.scrollcue:hover{ color:var(--ink); }

/* =========================================================
   HISTORIA — the book
   ========================================================= */
.book-sec{ position:relative; z-index:2; padding:clamp(90px,12vh,150px) clamp(24px,5vw,80px) clamp(90px,12vh,150px); }
.kicker{ font-family:var(--mn); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--green); }
.book-intro{ max-width:720px; margin:0 auto clamp(40px,6vh,68px); text-align:center; }
.book-intro h2{ font-family:var(--fr); font-weight:300; font-size:clamp(34px,4.6vw,56px); line-height:1.08;
  letter-spacing:-.02em; margin:18px 0 0; text-wrap:balance; }
.book-hint{ margin:18px 0 0; color:var(--ink2); font-size:18px; line-height:1.5; }

.book{ position:relative; max-width:1060px; margin:0 auto; }
.book-stage{ position:relative; background:var(--sheet); min-height:440px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 40px 80px -46px rgba(35,40,55,.5), 0 2px 6px rgba(35,40,55,.06);
  border:1px solid rgba(31,29,26,.07);
  transition:height .5s cubic-bezier(.4,0,.2,1); overflow:hidden; }
/* faint book spine */
.book-stage::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:5px;
  background:linear-gradient(90deg, rgba(31,29,26,.10), rgba(31,29,26,0)); pointer-events:none; z-index:6; }

.page{ position:absolute; top:0; left:0; right:0;
  padding:clamp(44px,5.2vw,72px) clamp(40px,6vw,92px);
  display:grid; grid-template-columns:1fr; gap:34px; align-items:center;
  opacity:0; transform:translateX(46px) scale(.99); pointer-events:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.4,0,.2,1); }
.page.has-photo{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(36px,4.5vw,64px); }
.page.is-active{ opacity:1; transform:none; pointer-events:auto; }
.page.is-prev{ transform:translateX(-46px) scale(.99); }

.page-bignum{ position:absolute; top:clamp(20px,2.4vw,34px); left:clamp(16px,2.2vw,30px);
  font-family:var(--fr); font-weight:300; font-size:clamp(46px,6vw,84px); line-height:1;
  color:var(--ink); opacity:.07; pointer-events:none; }
.page-no{ position:absolute; bottom:clamp(16px,2vw,26px); left:0; right:0; text-align:center;
  font-family:var(--mn); font-size:11px; letter-spacing:.14em; color:var(--ink3); }

.ch-meta{ font-family:var(--mn); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); }
.ch-title{ font-family:var(--fr); font-weight:400; font-size:clamp(32px,4.4vw,52px); line-height:1.04;
  letter-spacing:-.02em; margin:14px 0 22px; }
.ch-body{ max-width:60ch; }
.ch-body p{ margin:0 0 18px; font-size:clamp(17px,1.35vw,19.5px); line-height:1.62; color:#2b2823; }
.ch-body p:last-child{ margin-bottom:0; }
.ch-body > p:first-of-type::first-letter{ font-family:var(--fr); font-weight:400; color:var(--blue);
  float:left; font-size:3.1em; line-height:.78; padding:8px 11px 0 0; }
.ch-credo{ font-style:italic; color:var(--green) !important; font-size:clamp(18px,1.5vw,21px) !important; }
.ch-credo::first-letter{ all:unset; }

.page-photo{ margin:0; }
.page-photo img,.page-photo image-slot{ width:100%; height:clamp(280px,34vw,400px); object-fit:cover; display:block;
  box-shadow:0 22px 50px -30px rgba(35,40,55,.6); }
.page-photo figcaption{ margin-top:12px; font-family:var(--mn); font-size:11px; letter-spacing:.1em;
  color:var(--ink3); text-transform:uppercase; }

/* A · RSVP read mode overlay */
.rsvp-mode{ position:absolute; inset:0; z-index:8; background:var(--sheet);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s ease; }
.rsvp-mode.on{ opacity:1; pointer-events:auto; }
.rsvp-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:40px; }
.rsvp-label{ font-family:var(--mn); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); }
.device--rsvp{ width:min(560px,76vw); padding:14px 15px; }
.device--rsvp rsvp-screen{ height:clamp(120px,15vw,168px); }
.rsvp-back{ font-family:var(--mn); font-size:13px; letter-spacing:.03em; color:var(--ink);
  background:none; border:1px solid var(--ink); padding:12px 20px; cursor:pointer; transition:background .25s,color .25s; }
.rsvp-back:hover{ background:var(--ink); color:var(--sheet); }

/* arrows */
.arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:12;
  width:54px; height:54px; border-radius:50%; border:1px solid var(--line); background:var(--sheet);
  font-family:var(--ns); font-size:22px; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 10px 24px -14px rgba(35,40,55,.5); transition:transform .2s, background .2s, opacity .2s; }
.arrow:hover{ background:var(--ink); color:var(--sheet); }
.arrow-prev{ left:-27px; } .arrow-next{ right:-27px; }
.arrow:disabled{ opacity:.32; cursor:default; }
.arrow:disabled:hover{ background:var(--sheet); color:var(--ink); }

/* book bar — rail + read-flower */
.book-bar{ max-width:1060px; margin:clamp(30px,4vh,46px) auto 0; display:flex; flex-direction:column;
  align-items:center; gap:22px; }
.rail{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.rail button{ font-family:var(--mn); font-size:12.5px; letter-spacing:.02em; color:var(--ink2);
  background:none; border:1px solid transparent; padding:9px 14px; cursor:pointer; transition:color .2s, border-color .2s; }
.rail button b{ color:var(--ink3); font-weight:600; margin-right:7px; transition:color .2s; }
.rail button:hover{ color:var(--ink); }
.rail button.on{ color:var(--ink); border-color:var(--line); }
.rail button.on b{ color:var(--blue); }
.read-flower{ font-family:var(--mn); font-size:13.5px; letter-spacing:.02em; color:#fff;
  background:var(--blue); border:1px solid var(--blue); padding:15px 26px; cursor:pointer;
  transition:background .25s, transform .15s; }
.read-flower:hover{ background:#0f6fb3; }
.read-flower:active{ transform:translateY(1px); }

/* =========================================================
   SIGNUP
   ========================================================= */
.signup{ position:relative; z-index:2; overflow:hidden;
  padding:clamp(100px,14vh,170px) clamp(24px,5vw,80px); }
.signup .seed-form{ left:auto; right:-130px; top:-90px; width:440px; height:440px;
  background:var(--sage); opacity:.22; --r:18deg; transform:rotate(var(--r)); }
.signup-col{ position:relative; z-index:2; max-width:560px; margin:0 auto; text-align:center; }
.signup-col h2{ font-family:var(--fr); font-weight:300; font-size:clamp(32px,4.4vw,52px); line-height:1.08;
  letter-spacing:-.02em; margin:18px 0 0; text-wrap:balance; }
.signup-col > p{ margin:18px 0 0; color:var(--ink2); font-size:18px; line-height:1.55; }

.form-box{ margin:38px 0 0; background:#fffdf8; border:1px solid var(--ink2); padding:30px;
  display:flex; flex-direction:column; gap:14px; text-align:left; }
.form-box label{ font-family:var(--mn); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.form-box input{ font-family:var(--ns); font-size:18px; color:var(--ink); background:none;
  border:0; border-bottom:1px solid var(--line); padding:10px 2px; outline:none; transition:border-color .2s; }
.form-box input:focus{ border-color:var(--blue); }
.form-box input::placeholder{ color:var(--ink3); }
.form-box button{ margin-top:8px; font-family:var(--mn); font-size:14px; letter-spacing:.02em; color:#fff;
  background:var(--ink); border:1px solid var(--ink); padding:16px; cursor:pointer; transition:background .25s; }
.form-box button:hover{ background:var(--blue); border-color:var(--blue); }
.form-ig{ display:inline-block; margin-top:24px; font-family:var(--mn); font-size:13px; letter-spacing:.02em;
  color:var(--blue); text-decoration:none; }
.form-ig:hover{ text-decoration:underline; text-underline-offset:4px; }
.form-msg{ margin:4px 0 0; font-family:var(--mn); font-size:12.5px; line-height:1.5; letter-spacing:.01em; }
.form-msg.is-ok{ color:var(--green); }
.form-msg.is-err{ color:#b4442f; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ position:relative; z-index:2; background:var(--deep); color:#e9ebe6;
  padding:clamp(60px,8vh,90px) clamp(28px,5vw,80px) 44px;
  display:flex; flex-direction:column; gap:34px; }
.foot .wm-dark{ font-size:24px; }
.foot .wm-dark .flow{ color:var(--blue-soft); } .foot .wm-dark .er{ color:var(--green-soft); }
.foot-top{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:30px; }
.foot-made{ margin:0; font-size:18px; color:#b9bdc4; max-width:32ch; }
.makers{ display:flex; gap:48px; flex-wrap:wrap; }
.maker{ display:flex; flex-direction:column; gap:4px; }
.maker b{ font-family:var(--fr); font-weight:500; font-size:19px; color:#eef0ea; }
.maker span{ font-family:var(--mn); font-size:12px; letter-spacing:.04em; color:#8b92a0; }
.foot-links{ display:flex; gap:28px; flex-wrap:wrap; font-family:var(--mn); font-size:13px; letter-spacing:.03em; }
.foot-links a{ color:#b9bdc4; text-decoration:none; transition:color .2s; }
.foot-links a:hover{ color:#fff; }
.foot-base{ font-family:var(--mn); font-size:11px; letter-spacing:.1em; color:#5b6472; }

/* =========================================================
   RESPONSIVE
   Desktop mechanics are untouched; these only adapt layout,
   spacing and touch targets at narrower widths.
   ========================================================= */

/* ---- tablet / small laptop ---- */
@media (max-width:860px){
  .device{ width:min(440px,86vw); }
  .device rsvp-screen{ height:clamp(118px,30vw,152px); }
  .page.has-photo{ grid-template-columns:1fr; }
  .page.has-photo .page-photo{ order:-1; }      /* photo above the text when stacked */
  .page-photo img,.page-photo image-slot{ height:clamp(200px,42vw,300px); }
  .arrow{ width:48px; height:48px; }
  .arrow-prev{ left:-8px; } .arrow-next{ right:-8px; }
}

/* ---- phone ---- */
@media (max-width:600px){
  .topbar{ padding:18px 20px; }
  .wm{ font-size:20px; } .wm img{ width:23px; height:23px; }
  .nav{ gap:16px; }

  .hero{ min-height:100svh; gap:24px; padding:96px 20px 84px; }
  .hero h1.lead{ font-size:clamp(38px,10.5vw,52px); max-width:16ch; }
  .hero p.sub{ font-size:17px; }
  .hero .seed-big{ width:clamp(340px,90vw,460px); left:-90px; bottom:-110px; }
  .hero .seed-sm1{ right:6%; top:13%; width:62px; height:62px; }
  .hero .seed-sm2{ right:18%; top:25%; width:40px; height:40px; }

  /* controls wrap into neat rows; bigger touch targets */
  .controls{ flex-wrap:wrap; justify-content:center; gap:14px 20px; }
  input.c-wpm{ width:108px; }
  .seg button{ width:16px; height:16px; }
  .c-lang{ padding:6px 9px; font-size:13px; }

  .btnrow{ width:100%; }
  .btn{ padding:14px 20px; }

  /* book */
  .book-sec{ padding:64px 18px 72px; }
  .book-intro{ margin-bottom:34px; }
  .book-hint{ font-size:16px; }
  .book-stage{ min-height:0; }
  .page{ padding:40px 24px 52px; gap:24px; }
  .page-photo img,.page-photo image-slot{ height:clamp(190px,56vw,260px); }
  .page-bignum{ font-size:54px; top:18px; left:16px; }
  .ch-title{ margin:12px 0 16px; }
  .ch-body p{ font-size:16.5px; line-height:1.6; }
  .ch-body > p:first-of-type::first-letter{ font-size:2.7em; padding:6px 9px 0 0; }

  /* side arrows would cover the text on a phone — swipe + the rail
     below cover navigation instead */
  .arrow{ display:none; }

  .book-bar{ gap:18px; }
  .rail{ gap:5px; }
  .rail button{ padding:8px 11px; font-size:12px; }
  .read-flower{ width:100%; padding:16px; text-align:center; }

  /* read-on-Flower overlay */
  .rsvp-inner{ padding:26px 18px; gap:18px; }
  .device--rsvp{ width:min(440px,84vw); }
  .rsvp-controls{ gap:14px 18px; }

  /* signup */
  .signup{ padding:80px 20px; }
  .signup .seed-form{ right:-110px; top:-70px; width:340px; height:340px; }
  .form-box{ padding:22px; }
  .signup-col > p{ font-size:17px; }

  /* footer */
  .foot{ padding:56px 22px 40px; gap:28px; }
  .foot-top{ flex-direction:column; gap:14px; }
  .makers{ gap:30px 40px; }
}

/* ---- very small phones ---- */
@media (max-width:380px){
  .hero h1.lead{ font-size:34px; }
  .controls{ gap:12px 14px; }
  .rail button{ padding:7px 9px; }
}

/* devices that can't hover: make the swipe affordance obvious by
   keeping the active page edges soft (mechanic itself is unchanged) */
@media (hover:none){
  .arrow:hover{ background:var(--sheet); color:var(--ink); }
}