/* =====================================================================
   Kindred — stylesheet
   Palette is sampled from the scroll film: parchment, walnut ink,
   moss, slate-roof blue, lantern gold.
   ===================================================================== */

@font-face{font-family:"Fondamento";src:url("../fonts/fondamento-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fondamento";src:url("../fonts/fondamento-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IM Fell English";src:url("../fonts/im-fell-english-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IM Fell English";src:url("../fonts/im-fell-english-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --parchment:#e5d0a0;
  --parchment-deep:#c4a468;
  --fibre:#f6ecd0;
  --ink:#2e2216;
  --ink-soft:#5a4630;
  --moss:#4e6b34;
  --slate:#3e5a82;
  --gold:#e2a93b;
  --night:#000;
  --moon:#eadbb5;
  --moon-soft:#b9a982;

  --display:"Fondamento","Palatino Linotype","Book Antiqua",Georgia,serif;
  --text:"IM Fell English","Iowan Old Style","Palatino Linotype",Georgia,serif;

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

  /* Set by main.js */
  --hole-top:26vh;
  --hole-bottom:74vh;
  --tile-phase:0px;
}

*,*::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.25rem;line-height:1.6}
h1,h2,h3,h4,p,ol,dl,dd{margin:0}
ol{padding:0;list-style:none}

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

/* ---------- shared parchment surface ---------- */
.paper--skin,.sheet__paper{
  background-color:var(--parchment);
  background-image:
    linear-gradient(to right,rgba(108,72,24,.38),rgba(108,72,24,0) 7%,rgba(108,72,24,0) 93%,rgba(108,72,24,.38)),
    url("../img/parchment.webp");
  background-size:100% 100%,1024px 1024px;
  background-repeat:no-repeat,repeat;
}

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

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

.paper,.tear{position:absolute;inset:0;width:100%;height:100%}
.tear{pointer-events:none;overflow:visible}
.paper--fibre{
  background:
    linear-gradient(rgba(255,250,234,.78),rgba(255,250,234,.78)),
    url("../img/parchment.webp") 0 0/1024px 1024px;
}
.paper--skin{
  background-image:
    linear-gradient(to bottom,rgba(108,72,24,.34),rgba(108,72,24,0) 13%),
    linear-gradient(to right,rgba(108,72,24,.38),rgba(108,72,24,0) 7%,rgba(108,72,24,0) 93%,rgba(108,72,24,.38)),
    url("../img/parchment.webp");
  background-size:100% 100%,100% 100%,1024px 1024px;
  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%;
}

.hero__above,.hero__below{position:absolute;left:0;right:0;z-index:5;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1.25rem}
.hero__above{top:0;height:var(--hole-top);justify-content:center}
.hero__below{top:var(--hole-bottom);height:calc(var(--svh,100vh) - var(--hole-bottom));justify-content:center;gap:.6em}

.wordmark{
  font-family:var(--display);font-weight:400;line-height:1;letter-spacing:.01em;color:var(--ink);
  font-size:min(15vw,calc(var(--hole-top) * .44),7rem);
  text-shadow:0 1px 0 rgba(255,246,220,.55);
}
.tagline{
  font-style:italic;color:var(--ink-soft);line-height:1.25;margin-top:.35em;
  font-size:min(1.35rem,calc(var(--hole-top) * .13),5vw);
}

/* the robot's note, ticked off as the film plays */
.ledger{display:flex;gap:clamp(1.1rem,4vw,2.75rem);font-family:var(--display);color:var(--ink);
  font-size:min(1.7rem,calc((var(--svh,100vh) - var(--hole-bottom)) * .2),6vw);line-height:1}
.ledger li{display:flex;align-items:center;gap:.4em;opacity:.5;transition:opacity .35s ease}
.ledger svg{width:1em;height:1em;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ledger path{stroke:var(--moss);stroke-width:2.6;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .45s ease}
.ledger li.is-done{opacity:1}
.ledger li.is-done path{stroke-dashoffset:0}

.hint{font-style:italic;font-size:min(1.05rem,4.2vw);color:var(--ink-soft);transition:opacity .4s ease}
.hint::after{content:"";display:block;width:1px;height:1.4em;margin:.35em auto 0;background:currentColor;opacity:.6;transform-origin:top;animation:plumb 2.2s ease-in-out infinite}
.hint.is-gone{opacity:0}
@keyframes plumb{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* =====================================================================
   2. THE SCROLL
   ===================================================================== */
.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: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 var(--tile-phase);will-change:clip-path}

.sheet__inner{width:min(100% - 3rem,70rem);margin:0 auto;padding:clamp(3.5rem,9vh,7rem) 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.sheet h2{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:.005em;max-width:15ch;text-wrap:balance}
.sprig{display:block;width:11rem;height:auto;margin:1.4rem 0 1.6rem;fill:none;stroke:var(--moss);stroke-width:1.6;stroke-linecap:round}
.sprig__leaf{fill:var(--moss);stroke:none}
.sheet__lead p{max-width:33em;font-size:1.3125rem}
.sheet__lead p + p{margin-top:1em}
.dropcap::first-letter{font-family:var(--display);float:left;font-size:4.1em;line-height:.82;padding:.06em .06em 0 0;color:var(--slate)}

.sheet__steps h3{font-family:var(--display);font-weight:400;font-size:1.65rem;line-height:1.2;color:var(--ink);padding-bottom:.6rem;border-bottom:1px solid rgba(46,34,22,.35)}
.steps{counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:1.15rem 0 1.15rem 3.4rem;border-bottom:1px solid rgba(46,34,22,.2)}
.steps li::before{content:counter(step,upper-roman);position:absolute;left:0;top:1.05rem;width:2.4rem;font-family:var(--display);font-size:1.7rem;line-height:1.2;color:var(--moss);text-align:left}
.steps h4{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.25}
.steps p{font-size:1.15rem;line-height:1.5;color:var(--ink-soft);margin-top:.2rem}

/* the rolled-up part of the parchment: 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}

/* ---------- black section under the parchment ---------- */
.night__inner{width:min(100% - 3rem,70rem);margin:0 auto;padding-top:4.5rem}
.night h2,.after h2{font-family:var(--display);font-weight:400;color:var(--gold);font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.08}
.night__lede{max-width:32em;margin-top:1.1rem;color:var(--moon)}
.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(234,219,181,.28)}
.almanac div{padding-top:1.1rem}
.almanac dt{font-style:italic;color:var(--moon-soft);font-size:1.05rem}
.almanac dd{font-family:var(--display);font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.25;color:var(--moon);margin-top:.2rem}

/* =====================================================================
   3. MORE BLACK
   ===================================================================== */
.after{position:relative;z-index:1;background:var(--night);color:var(--moon)}
.after__inner{width:min(100% - 3rem,70rem);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(1.75rem,4vw,4rem);margin-top:clamp(2rem,5vh,3.5rem)}
.qa h3{font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1.25;color:var(--moon)}
.qa p{margin-top:.6rem;font-size:1.1rem;line-height:1.55;color:var(--moon-soft)}
.colophon{width:min(100% - 3rem,70rem);margin:0 auto;padding:1.75rem 0 3rem;border-top:1px solid rgba(234,219,181,.22);font-style:italic;font-size:1.05rem;color:var(--moon-soft)}
.colophon a{color:var(--moon);text-decoration-thickness:1px;text-underline-offset:2px}
.colophon p+p{margin-top:.5rem}

/* =====================================================================
   Small screens
   ===================================================================== */
@media (max-width:820px){
  body{font-size:1.125rem}
  .sheet__inner{grid-template-columns:minmax(0,1fr);gap:2.75rem}
  .almanac,.qa{grid-template-columns:minmax(0,1fr)}
  .almanac div{padding:1rem 0;border-bottom:1px solid rgba(234,219,181,.16)}
  .almanac{border-top:1px solid rgba(234,219,181,.28)}
  .night__inner{padding-top:5rem}
}

@media (prefers-reduced-motion:reduce){
  .hint::after{animation:none;transform:none}
  .ledger li,.ledger path,.hint{transition:none}
}