/* =====================================================================
   Kindred — stylesheet (Musebook theme)
   Palette sampled from musebook.lol: cream paper, warm ink, rust,
   plum, lantern orange, garden green.
   ===================================================================== */

@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");font-weight:100 900;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#faf5ec;        /* page cream */
  --paper-lit:#fffdf8;    /* card cream */
  --edge:#e7ddcb;         /* hairline on cream */
  --ink:#39302b;          /* body */
  --ink-strong:#241a15;   /* headings */
  --muted:#7c7168;        /* secondary text */
  --rust:#b45130;         /* primary accent */
  --rust-ink:#c2592c;     /* links */
  --plum:#513042;         /* deep brand tone */
  --gold:#f2902a;         /* lantern / status */
  --green:#5f9e52;        /* leaf / live */

  --night:#251826;        /* the reveal — warm plum dusk */
  --night-2:#180f18;
  --moon:#f4ead9;         /* text on dark */
  --moon-soft:#b6a596;

  --display:"Fraunces","Georgia",serif;
  --text:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --script:"Caveat","Segoe Script",cursive;

  /* How long the film takes to scroll through (1 screen is always pinned). */
  --film-length:420vh;
  /* How much scrolling it takes for the paper to roll all the way up. */
  --roll-length:180vh;

  /* Set by main.js */
  --hole-top:26vh;
  --hole-bottom:74vh;
  --tile-phase:0px;
  --mast-h:clamp(3.2rem,7.5vh,4.6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:clamp(16px,calc(9px + .55vw),20px)}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--text);font-size:1.125rem;line-height:1.6;font-weight:400}
h1,h2,h3,h4,p,ol,dl,dd{margin:0}
ol{padding:0;list-style:none}
strong{font-weight:600;color:var(--ink-strong)}

#svh-probe{position:fixed;top:0;left:0;width:0;height:100vh;height:100svh;visibility:hidden;pointer-events:none}

/* shared cream surface (hero skin + the flat page) */
.paper--skin,.sheet__paper{
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,rgba(120,96,56,.10),rgba(120,96,56,0) 6%,rgba(120,96,56,0) 94%,rgba(120,96,56,.10)),
    url("../img/paper.webp");
  background-size:100% 100%,512px 512px;
  background-repeat:no-repeat,repeat;
}

/* the brand lockup, reused in the masthead and the footer */
.brand{display:flex;align-items:center;gap:.6rem}
.brand__mark{width:1.5em;height:1.5em;flex:none;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.brand__mark .leaf{fill:var(--green);stroke:none}
.brand__name{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;color:var(--rust);line-height:1}

/* =====================================================================
   1. HERO
   ===================================================================== */
.hero{position:relative;height:var(--film-length);background:var(--paper)}
.hero__stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}

#film{position:absolute;display:block;background:#6d7a6e}
.film-fallback{position:absolute;z-index:6;left:50%;top:50%;width:min(56vw,90%);transform:translate(-50%,-50%);border:6px solid var(--paper)}

.paper,.tear{position:absolute;inset:0;width:100%;height:100%}
.tear{pointer-events:none;overflow:visible}
.paper--fibre{
  background:
    linear-gradient(rgba(255,253,247,.86),rgba(255,253,247,.86)),
    url("../img/paper.webp") 0 0/512px 512px;
}
.paper--skin{
  background-image:
    linear-gradient(to bottom,rgba(120,96,56,.09),rgba(120,96,56,0) 12%),
    linear-gradient(to right,rgba(120,96,56,.10),rgba(120,96,56,0) 6%,rgba(120,96,56,0) 94%,rgba(120,96,56,.10)),
    url("../img/paper.webp");
  background-size:100% 100%,100% 100%,512px 512px;
  background-repeat:no-repeat,no-repeat,repeat;
}
.paper--fibre,.paper--skin{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}

/* the hero content is measured against the torn hole set by main.js */
.masthead{position:absolute;z-index:6;top:0;left:0;right:0}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:min(100% - 2.5rem,72rem);margin:0 auto;padding:clamp(.9rem,2.2vh,1.6rem) 0}
.status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--text);font-weight:600;font-size:.95rem;
  color:var(--plum);background:var(--paper-lit);border:1px solid var(--edge);border-radius:999px;
  padding:.5rem .95rem;box-shadow:0 1px 2px rgba(60,40,20,.06);text-decoration:none;white-space:nowrap}
.status::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(242,144,42,.18)}
a.status:hover{border-color:var(--rust);color:var(--rust)}

.hero__copy{position:absolute;z-index:5;left:0;right:0;top:0;height:var(--hole-top);
  display:flex;align-items:center;padding-top:var(--mast-h);pointer-events:none}
.hero__head{width:min(100% - 2.5rem,72rem);margin:0 auto}
.hero__copy h1{
  font-family:var(--display);font-weight:600;line-height:1;letter-spacing:-.025em;color:var(--ink-strong);
  font-size:min(6.6vw,calc(var(--hole-top) * .30),3.4rem);text-wrap:balance;
}

/* buy / burn / grow — the little icon+label row, ticked off by the film */
.features{position:absolute;z-index:5;left:0;right:0;top:var(--hole-bottom);
  height:calc(var(--svh,100vh) - var(--hole-bottom));
  width:min(100% - 2.5rem,72rem);margin:0 auto;gap:clamp(1.4rem,5vw,3.5rem);
  display:flex;flex-wrap:wrap;align-items:center;align-content:center}
.features li{display:flex;align-items:center;gap:.7rem;color:var(--ink);opacity:.45;transition:opacity .4s ease}
.features svg{width:min(2.1rem,calc((var(--svh,100vh) - var(--hole-bottom)) * .26));height:auto;flex:none;
  fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:96;stroke-dashoffset:96;transition:stroke-dashoffset .6s ease}
.features span{font-family:var(--display);font-weight:600;line-height:1.02;
  font-size:min(1.2rem,calc((var(--svh,100vh) - var(--hole-bottom)) * .17),4.4vw)}
.features li.is-done{opacity:1}
.features li.is-done svg{stroke-dashoffset:0}

.motto{position:absolute;z-index:5;bottom:clamp(.8rem,2.4vh,1.6rem);left:50%;transform:translateX(-50%);
  width:min(100% - 2.5rem,72rem);
  font-family:var(--script);font-size:clamp(1.5rem,3.2vw,2.1rem);color:var(--plum);opacity:.9;line-height:1}
.hint{position:absolute;z-index:5;left:50%;transform:translateX(-50%);bottom:clamp(.8rem,2.4vh,1.6rem);
  font-family:var(--text);font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:.5rem;transition:opacity .4s ease}
.hint i{display:block;width:1px;height:1.5em;background:currentColor;opacity:.55;transform-origin:top;animation:plumb 2.2s ease-in-out infinite}
.hint.is-gone{opacity:0}
@keyframes plumb{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* =====================================================================
   2. THE PAGE + roll-up
   ===================================================================== */
.unroll{position:relative;background:var(--night)}
.unroll::after{content:"";display:block;height:var(--roll-length)}

.night{position:sticky;top:0;z-index:1;height:100vh;height:100lvh;
  background:radial-gradient(120% 90% at 50% -10%,rgba(49,33,48,.55),transparent 60%),var(--night);
  color:var(--moon);display:flex;align-items:center;overflow:hidden}
.sheet{position:sticky;top:0;z-index:2;overflow:hidden;margin-top:-100vh;margin-top:-100lvh;
  min-height:100vh;min-height:100lvh;display:flex;flex-direction:column}
.sheet__paper{flex:1;display:flex;align-items:center;background-position:0 0,0 0,0 var(--tile-phase);will-change:clip-path}

.sheet__inner{width:min(100% - 2.5rem,72rem);margin:0 auto;padding:clamp(3.5rem,9vh,7rem) 0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vh,4rem)}
.sheet h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.03;
  letter-spacing:-.02em;color:var(--ink-strong);max-width:18ch;text-wrap:balance}
.sheet__lead{max-width:52rem}
.sheet__lead .lead{margin-top:1.1rem;font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--ink);max-width:40ch}
.sheet__lead p + p{margin-top:.9em}
.sheet__lead p:last-child{margin-top:.7em;color:var(--muted);max-width:46ch}

/* the three step cards — Musebook's rounded cream cards */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.card{background:var(--paper-lit);border:1px solid var(--edge);border-radius:1rem;
  padding:clamp(1.3rem,2.4vw,1.9rem);box-shadow:0 1px 2px rgba(70,45,20,.05),0 12px 30px rgba(70,45,20,.05)}
.card h3{font-family:var(--display);font-weight:600;font-size:1.4rem;line-height:1.15;color:var(--ink-strong);
  display:flex;align-items:center;gap:.55rem}
.card h3 svg{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card__meta{margin-top:.35rem;font-family:var(--text);font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--rust)}
.card > p:last-child{margin-top:.7rem;color:var(--muted);font-size:1.02rem;line-height:1.5}

/* the rolled-up part of the paper: painted on a canvas by main.js */
.roll{position:absolute;z-index:3;left:0;bottom:0;display:block;visibility:hidden;pointer-events:none;will-change:transform}

/* ---------- dark section under the paper ---------- */
.night__inner{width:min(100% - 2.5rem,72rem);margin:0 auto;padding-top:4.5rem}
.night h2,.after h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.03;
  letter-spacing:-.02em;color:var(--moon)}
.night__lede{max-width:34em;margin-top:1.1rem;color:var(--moon-soft);font-size:1.15rem}
.almanac{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.5rem,4vw,4rem);
  margin-top:clamp(2rem,6vh,4rem);border-top:1px solid rgba(244,234,217,.18)}
.almanac div{padding-top:1.1rem}
.almanac dt{display:flex;align-items:center;gap:.5rem;font-family:var(--text);font-weight:600;font-size:.92rem;color:var(--gold)}
.almanac dt i{width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(242,144,42,.16)}
.almanac dd{font-family:var(--display);font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.2;color:var(--moon);margin-top:.35rem}

/* =====================================================================
   3. MORE DARK
   ===================================================================== */
.after{position:relative;z-index:1;background:var(--night);color:var(--moon)}
.after__inner{width:min(100% - 2.5rem,72rem);margin:0 auto;padding:clamp(4rem,12vh,8rem) 0 clamp(3rem,8vh,6rem)}
.qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2rem,5vh,3.5rem)}
.card--night{background:#2f2130;border-color:rgba(244,234,217,.12);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.card--night h3{font-size:1.25rem;color:var(--moon);display:block}
.card--night p{margin-top:.6rem;color:var(--moon-soft);font-size:1.02rem;line-height:1.55}
.colophon{width:min(100% - 2.5rem,72rem);margin:0 auto;padding:1.9rem 0 3rem;border-top:1px solid rgba(244,234,217,.14);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;color:var(--moon-soft);font-size:1rem}
.brand--foot .brand__name{color:var(--moon)}

/* =====================================================================
   Small screens
   ===================================================================== */
@media (max-width:820px){
  body{font-size:1.0625rem}
  .sheet__inner{gap:2rem}
  .steps,.almanac,.qa{grid-template-columns:minmax(0,1fr)}
  .almanac div{padding:1rem 0;border-bottom:1px solid rgba(244,234,217,.12)}
  .almanac{border-top:1px solid rgba(244,234,217,.18)}
  .night__inner{padding-top:5rem}
  .features{gap:1.1rem 2rem}
  .motto{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hint i{animation:none;transform:none}
  .features li,.features svg,.hint{transition:none}
}