/* ==================================================================
   A night journal. Content sits on the night between gold hairlines;
   photographs are taped-in prints and polaroids; the aunt's notes are
   handwritten. Peacock is a palette here, never an object.
================================================================== */
:root{
  --ink:#06171E; --ink-2:#0A2029; --teal-bloom:#0F3B4A; --plum-bloom:#2A1950;
  --gold:#D9B45A; --gold-soft:rgba(217,180,90,.45);
  --pearl:#EFE8DA; --pearl-2:#D8E4E0; --mist:#A9C2BD;
  --hand:#6FD3C6;
  /* washi tapes, in peacock colours */
  --tape-teal:rgba(19,163,163,.6); --tape-sapphire:rgba(47,92,190,.58); --tape-emerald:rgba(22,140,96,.58);
  --tape-violet:rgba(124,80,190,.58); --tape-bronze:rgba(190,120,52,.6);
  /* paper */
  --paper:#F6F1E6; --paper-ink:#1C3A4A; --vellum:#F1E2C2; --vellum-2:#E2CC9F; --scroll-ink:#2B2117; --scroll-soft:#5E4A35; --rubric:#7A2E1C;

  --serif:"Instrument Serif",Georgia,serif;
  --body:"Atkinson Hyperlegible",system-ui,sans-serif;
  --hand-font:"Homemade Apple",cursive;
  --scripture:"Gentium Book Plus",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;color:var(--pearl);font-family:var(--body);font-size:clamp(1rem,.96rem + .22vw,1.1rem);line-height:1.7;
  -webkit-font-smoothing:antialiased;background:var(--ink)}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
html{scrollbar-color:#24505E var(--ink);scrollbar-width:thin;caret-color:var(--gold)}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#24505E;border-radius:8px;border:3px solid var(--ink)}::-webkit-scrollbar-thumb:hover{background:var(--gold)}
a{color:var(--hand);text-underline-offset:3px}

/* ---------- the night behind the pages: blooms, stars, fireflies, grain ---------- */
.night{position:fixed;inset:-8%;pointer-events:none;z-index:0}
.night--blooms{background:var(--ink)}
.bloom{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85;animation:drift 26s ease-in-out infinite alternate}
.bloom:nth-child(1){width:62vmax;height:52vmax;right:-14vmax;top:-12vmax;background:radial-gradient(closest-side,var(--teal-bloom),transparent)}
.bloom:nth-child(2){width:56vmax;height:56vmax;left:-18vmax;bottom:-20vmax;background:radial-gradient(closest-side,var(--plum-bloom),transparent);animation-duration:32s}
.bloom:nth-child(3){width:36vmax;height:30vmax;left:34vw;top:42vh;background:radial-gradient(closest-side,rgba(14,80,64,.55),transparent);animation-duration:38s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3vmax,-2vmax,0) scale(1.07)}}
.night--stars{z-index:0;opacity:.75;
  background-image:
    radial-gradient(1.1px 1.1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(.9px .9px at 72% 9%,#dff 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 38% 63%,#ffe 50%,transparent 51%),radial-gradient(.9px .9px at 88% 74%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 55% 33%,#cff 50%,transparent 51%),radial-gradient(.8px .8px at 23% 86%,#fff 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 64% 91%,#ffd 50%,transparent 51%);background-size:540px 540px}
#fireflies{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.grain{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}

/* ---------- the journal ---------- */
.journal{position:relative;z-index:2;max-width:1220px;margin:0 auto;padding:0 clamp(1.2rem,3.4vw,3rem) 3rem}
.spread{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.4rem,3vw,3.4rem);align-items:start;
  padding-block:clamp(4rem,9vw,7.5rem)}
.spread + .spread{border-top:1px solid rgba(217,180,90,.18)}
.col-text{grid-column:1 / span 7}.col-side{grid-column:8 / span 5}
.flip .col-text{grid-column:6 / span 7;grid-row:1}.flip .col-side{grid-column:1 / span 5;grid-row:1}
.col-wide{grid-column:1 / -1}
@media(max-width:62rem){ .col-text,.col-side,.flip .col-text,.flip .col-side{grid-column:1 / -1;grid-row:auto} }

/* ---------- type ---------- */
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(4rem,2rem + 7.4vw,8.6rem);line-height:.86}
h2{font-size:clamp(2.6rem,1.6rem + 3.6vw,4.8rem);line-height:.95;margin-bottom:1.6rem}
h1 i,h2 i{color:var(--gold);font-style:italic}
h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.1;margin:0 0 .5rem;color:var(--pearl)}
p{margin:0 0 1.1rem;max-width:62ch}
.lede{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + .9vw,1.85rem);line-height:1.3;color:var(--pearl-2);max-width:30ch}
.soft{color:var(--mist)}
strong{font-weight:inherit;color:var(--pearl);background:linear-gradient(transparent 58%,rgba(217,180,90,.3) 58%,rgba(217,180,90,.22) 92%,transparent 92%);padding:0 .12em;margin:0 -.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
em{font-style:italic}
.eyebrowless{margin-top:0}
.small-italic{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--gold);letter-spacing:.01em;margin:0 0 1.4rem}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* handwriting: the aunt's notes in the margins, written in when they come into view */
.note{display:inline-block;font-family:var(--hand-font);color:var(--hand);font-size:clamp(.95rem,.88rem + .3vw,1.12rem);
  line-height:1.8;transform:rotate(var(--r,-1.5deg));max-width:46ch;transform-origin:left center;margin:.6rem 0 0}
.js .note:not(.written){clip-path:inset(0 100% 0 0)}
.note.written{animation:write 1.6s cubic-bezier(.6,.1,.3,1) both}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* a gold divider with a small drawn star */
.star-rule{display:flex;align-items:center;gap:1rem;margin:2.2rem 0;color:var(--gold)}
.star-rule::before,.star-rule::after{content:"";flex:1;height:1px;background:var(--gold-soft)}
.star-rule svg{width:14px;height:14px}

/* ---------- opening ---------- */
.opening{padding-top:clamp(4.5rem,8vw,7rem)}
.days{display:flex;align-items:baseline;gap:1.1rem;border-top:1px solid var(--gold-soft);padding-top:1.3rem;margin-top:2.2rem;max-width:34rem}
.days b{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,2rem + 2vw,3.6rem);line-height:1;color:var(--pearl)}
.days span{font-size:.98rem;color:var(--mist);line-height:1.5}
.moons{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;margin:2rem 0 0}
.moons > span{display:grid;place-items:center}
.moons svg{width:22px;height:22px;flex:none}
.moons .tonight{position:relative}
.moons .tonight::after{content:"";position:absolute;inset:-7px;border:1px solid var(--gold);border-radius:50%}
.moons figcaption{font-family:var(--serif);font-style:italic;color:var(--mist);font-size:1.02rem;margin-left:.5rem}
.sky-lines{position:absolute;right:2%;top:2.5rem;width:min(320px,30vw);pointer-events:none;opacity:.7}

/* ---------- prints and polaroids ---------- */
.print{position:relative;margin:0;background:var(--paper);padding:12px 12px 14px;
  box-shadow:0 26px 50px -20px rgba(0,0,0,.75),0 6px 14px rgba(0,0,0,.35);
  transform:rotate(var(--tilt,2deg));transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease}
.print:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 36px 64px -22px rgba(0,0,0,.8),0 10px 20px rgba(0,0,0,.35)}
.print img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover;object-position:var(--pos,50% 50%);
  background:#2a3a40;filter:saturate(.95) contrast(1.03)}
.print figcaption{font-family:var(--hand-font);color:var(--paper-ink);font-size:.98rem;line-height:1.6;margin:.85rem .2rem 0}
.print .tape{position:absolute;top:-15px;left:50%;width:110px;height:30px;transform:translateX(-50%) rotate(-4deg);
  background:var(--tape,var(--tape-teal));mix-blend-mode:multiply;opacity:.95}
.print .tape.corner{left:auto;right:-26px;top:10px;width:84px;transform:rotate(38deg)}
.print.polaroid{padding:14px 14px 20px}
.side-stack{display:grid;gap:3rem;padding-top:1rem}

/* ---------- the cheer squad: a stack of polaroids ---------- */
.squad{position:relative}
.deck{position:relative;aspect-ratio:1/1.16;perspective:1600px;margin-top:.6rem}
.card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.9,.25,1), opacity .5s ease}
.card .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper);
  padding:14px 14px 18px;display:flex;flex-direction:column;box-shadow:0 26px 50px -20px rgba(0,0,0,.75),0 6px 14px rgba(0,0,0,.35)}
.card .front img{display:block;width:100%;flex:1;min-height:0;object-fit:cover}
.card .reminder{font-family:var(--hand-font);color:var(--paper-ink);font-size:clamp(.98rem,.9rem + .35vw,1.18rem);line-height:1.55;margin:.9rem .2rem 0}
.card .back{transform:rotateY(180deg);padding:1.6rem 1.5rem 1.2rem;background:linear-gradient(170deg,#FBF7EE,#EFE6D2)}
.card .back h3{color:#0E3B4A;font-size:1.9rem;margin-bottom:.7rem}
.card .back .fact{font-size:1.04rem;line-height:1.65;color:#25343A;flex:1}
.card .back .credit{font-size:.8rem;color:#5B6A70;margin:0}
.card .back .credit a{color:#5B6A70}
.card.flipped{transform:rotate(var(--tilt,2.5deg)) rotateY(180deg)}
.card[data-depth="0"]{transform:rotate(var(--tilt,2.5deg))}
.card[data-depth="0"].flipped{transform:rotate(var(--tilt,2.5deg)) rotateY(180deg)}
.card[data-depth="1"]{transform:rotate(-3deg) translate(-10px,6px)}
.card[data-depth="2"]{transform:rotate(5deg) translate(12px,10px)}
.card[data-depth="3"]{transform:rotate(-1deg) translate(0,14px);opacity:0}
.card.leaving{transform:translateX(-125%) rotate(-16deg)!important;opacity:0!important}
.card > .tape{position:absolute;top:-15px;left:50%;width:116px;height:30px;transform:translateX(-50%) rotate(-4deg) translateZ(1px);z-index:3;
  background:var(--tape-teal);opacity:.92;pointer-events:none}
.deck-meta{display:flex;align-items:center;gap:1rem;margin-top:1.6rem;font-family:var(--serif);font-style:italic;color:var(--mist);font-size:1.08rem}
.deck-meta .count{margin-right:auto}
.link-btn{font:inherit;font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--pearl);background:none;border:0;padding:.3rem 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--gold-soft);transition:color .25s ease, border-color .25s ease}
.link-btn:hover{color:var(--gold);border-color:var(--gold)}
.link-btn svg{width:16px;height:16px}
.heart-btn{background:none;border:0;cursor:pointer;padding:.3rem;color:var(--mist);display:inline-grid;place-items:center;transition:color .25s ease, transform .25s ease}
.heart-btn svg{width:22px;height:22px}
.heart-btn[aria-pressed="true"]{color:#E86A86}
.heart-btn:hover{transform:scale(1.12)}
.heart-burst{position:absolute;left:50%;top:44%;width:0;height:0;pointer-events:none;z-index:30}
.heart-burst i{position:absolute;width:20px;height:20px;margin:-10px;background:no-repeat center/contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E86A86' d='M12 21s-7.5-4.6-9.6-9.2C.8 8.2 3 4.5 6.7 4.5c2.1 0 3.6 1.1 4.3 2.4.7-1.3 2.2-2.4 4.3-2.4 3.7 0 5.9 3.7 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E")}

/* ---------- globe + the three places ---------- */
.globe-wrap{position:relative;aspect-ratio:1/1;max-width:560px}
#globeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pin{position:absolute;transform:translate(-5.5px,-50%);z-index:4;cursor:pointer;display:flex;align-items:center;gap:.45rem;
  white-space:nowrap;background:none;border:0;padding:0;font:inherit;transition:opacity .35s ease}
.pin b{width:11px;height:11px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 4px rgba(217,180,90,.22),0 2px 6px rgba(0,0,0,.6);transition:transform .25s ease}
.pin:hover b,.pin:focus-visible b{transform:scale(1.35)}
.pin span{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--pearl);text-shadow:0 1px 8px rgba(0,0,0,.95)}
/* the dot, not the label, sits on the place: anchor at the dot's centre on whichever side it is */
.pin[data-side="left"]{flex-direction:row-reverse;transform:translate(calc(-100% + 5.5px),-50%)}
.globe-hint{position:absolute;left:50%;bottom:.4rem;transform:translateX(-50%);margin:0;font-family:var(--hand-font);font-size:.92rem;color:var(--hand);white-space:nowrap;transition:opacity .5s ease}
.touched .globe-hint{opacity:0}
.places{list-style:none;padding:0;margin:0}
.places li{display:grid;grid-template-columns:1fr auto;gap:.2rem 1.2rem;align-items:baseline;padding:1.1rem 0;border-top:1px solid var(--gold-soft)}
.places li:last-child{border-bottom:1px solid var(--gold-soft)}
.places .where{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--pearl)}
.places .t{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--gold)}
.places .who{grid-column:1 / -1;color:var(--mist);font-size:.98rem}
.places .tag{grid-column:1 / -1;font-family:var(--hand-font);color:var(--hand);font-size:.9rem;line-height:1.7}

/* ---------- a year in pixels: every week a dot, every year its own jewel ---------- */
.pixels{display:grid;grid-template-columns:2.4rem 1fr;gap:3px .8rem;margin:1.6rem 0 1rem;align-items:center}
.pixels .age{font-family:var(--serif);font-style:italic;color:var(--mist);font-size:.95rem;text-align:right;line-height:1}
.pixels .row{display:grid;grid-template-columns:repeat(52,1fr);gap:3px}
.pixels i{aspect-ratio:1;border-radius:50%;background:var(--gold);opacity:var(--a,.6);display:block;transform:scale(.62)}
.pixels i.year{background:var(--hand);opacity:1}
.pixels i.now{background:#FFF6DD;opacity:1;transform:scale(1);box-shadow:0 0 0 1.5px var(--gold),0 0 10px 2px rgba(217,180,90,.75)}

/* ---------- numbers as a ledger: label left, figure right, a gold hairline between ---------- */
.ticks{margin:1.6rem 0 1.8rem;border-bottom:1px solid var(--gold-soft)}
.tick{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 0;border-top:1px solid var(--gold-soft)}
.tick .l{order:0;font-family:var(--serif);font-size:1.4rem;line-height:1.2;color:var(--pearl)}
.tick .n{order:1;font-size:1.2rem;color:var(--pearl);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.journey{display:grid;grid-template-columns:repeat(2,1fr);column-gap:3.4rem;margin-top:2.4rem}
@media(max-width:52rem){.journey{grid-template-columns:1fr}}
.leg{display:grid;grid-template-columns:1fr auto;column-gap:1.4rem;align-items:baseline;border-top:1px solid var(--gold-soft);padding:1rem 0 1.2rem}
.leg h3{grid-column:1;grid-row:1;font-size:1.45rem;margin:0}
.leg .n{grid-column:2;grid-row:1;text-align:right;font-size:1.15rem;color:var(--pearl);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.leg .u{grid-column:2;grid-row:2;text-align:right;font-size:.85rem;color:var(--mist)}
.leg p{grid-column:1 / -1;font-size:.96rem;color:var(--mist);margin:.4rem 0 0;max-width:58ch}
@media(max-width:40rem){ .leg{grid-template-columns:1fr} .leg .n,.leg .u{grid-column:1;grid-row:auto;text-align:left} .leg .n{margin-top:.3rem} }
.figure-row{display:grid;grid-template-columns:1fr;margin-top:2.6rem;border-bottom:1px solid var(--gold-soft)}
.figure-row p{display:grid;grid-template-columns:8rem 1fr;gap:1.4rem;align-items:baseline;margin:0;max-width:none;padding:.9rem 0;border-top:1px solid var(--gold-soft);color:var(--mist)}
.figure-row .fig{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--gold)}
@media(max-width:40rem){ .figure-row p{grid-template-columns:5.6rem 1fr} .figure-row .fig{font-size:1.6rem} }

/* ---------- facts, with a small drawn star ---------- */
ul.facts{list-style:none;padding:0;margin:1.4rem 0 0}
ul.facts li{position:relative;padding:.85rem 0 .85rem 1.7rem;border-top:1px solid rgba(217,180,90,.16)}
ul.facts li:first-child{border-top:0}
ul.facts li::before{content:"";position:absolute;left:0;top:1.32rem;width:11px;height:11px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.4 9.6L24 12l-9.6 2.4L12 24l-2.4-9.6L0 12l9.6-2.4z' fill='%23D9B45A'/%3E%3C/svg%3E")}

/* ---------- gold line drawings: constellations, honeycomb, spiral ---------- */
.drawing{display:block;width:100%;height:auto;color:var(--gold)}
.drawing .ln{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.drawing .st{fill:currentColor}
.drawing .lbl{font-family:var(--serif);font-style:italic;font-size:15px;fill:var(--mist)}
.js .drawing:not(.drawn) .ln{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.drawing.drawn .ln{stroke-dasharray:var(--len,600);animation:draw 2.4s cubic-bezier(.5,0,.2,1) both}
@keyframes draw{from{stroke-dashoffset:var(--len,600)}to{stroke-dashoffset:0}}
.js .drawing:not(.drawn) .st{opacity:0}
.drawing.drawn .st{animation:twinkle .6s ease both}
@keyframes twinkle{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.drawing .st{transform-box:fill-box;transform-origin:center}

/* ---------- scrolls: a sealed roll she opens ---------- */
.shelf{display:grid;gap:2rem;padding-top:.6rem}
.scroll{position:relative;width:100%;max-width:27rem;filter:drop-shadow(0 14px 20px rgba(0,0,0,.55))}
.rod{position:relative;height:20px;border-radius:10px;margin:0 6px;z-index:2;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 14px,rgba(0,0,0,.14) 14px 15px),
    linear-gradient(180deg,#5C3210 0%,#C98A3C 28%,#F2CF7A 46%,#B8702E 64%,#4A260A 100%);background-size:30px 100%,100% 100%}
.rod::before,.rod::after{content:"";position:absolute;top:50%;width:20px;height:28px;border-radius:9px;transform:translateY(-50%);
  background:radial-gradient(circle at 40% 35%,#FFF0BE,#E8B649 35%,#8A5A1E 80%);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.rod::before{left:-14px}.rod::after{right:-14px}
.scroll.open .rod{animation:roll .9s cubic-bezier(.2,.8,.2,1)}
@keyframes roll{from{background-position:0 0,0 0}to{background-position:-180px 0,0 0}}
.scroll-face{all:unset;box-sizing:border-box;position:relative;display:grid;align-content:center;gap:.1rem;cursor:pointer;width:100%;
  margin:-10px 0;padding:1.3rem 1rem 1.1rem;min-height:4.6rem;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%,transparent 78%,rgba(0,0,0,.28)),
    linear-gradient(90deg,var(--vellum-2),var(--vellum) 18%,var(--vellum) 82%,var(--vellum-2))}
.scroll-face:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.scroll-label{font-family:var(--scripture);font-weight:700;font-size:1.12rem;color:var(--rubric)}
.scroll-hint{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--scroll-soft)}
.scroll.open .scroll-hint::before{content:"roll it back up"}
/* closed: a rolled vellum cylinder. The rod runs through its core and only its turned
   finials show at the ends; the spiral of paper layers shows on each rolled end;
   the ribbon wraps the roll and its cut tails hang below. */
.scroll:not(.open){display:grid;grid-template-columns:1fr}
.scroll:not(.open) > .rod:first-child,.scroll:not(.open) > .scroll-face,.scroll:not(.open) > .sheet{grid-area:1 / 1}
.scroll:not(.open) > .sheet{margin:0;align-self:start}
.scroll:not(.open) > .sheet ~ .rod{grid-area:2 / 1;height:0;opacity:0;margin:0;overflow:hidden}
.scroll:not(.open) > .hint-out{grid-area:3 / 1}
.scroll:not(.open) > .rod:first-child{position:relative;align-self:center;height:11px;margin:0 4px;z-index:0;border-radius:6px;
  background:linear-gradient(180deg,#24130a 0%,#6b4424 32%,#9a6a3c 46%,#5a361a 72%,#1e1008 100%)}
.scroll:not(.open) > .rod:first-child::before,.scroll:not(.open) > .rod:first-child::after{width:15px;height:23px;border-radius:46% / 50%;
  background:radial-gradient(circle at 38% 32%,#FBEBC0 0,#D9AE58 34%,#8C6224 72%,#4E3410 100%);box-shadow:0 2px 4px rgba(0,0,0,.55)}
.scroll:not(.open) > .rod:first-child::before{left:-9px}.scroll:not(.open) > .rod:first-child::after{right:-9px}
.scroll:not(.open) .scroll-face{width:auto;margin:0 20px;border-radius:20px;min-height:4.4rem;padding:.8rem 1.5rem;z-index:1;justify-items:start;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,253,240,.55),inset 0 -2px 3px rgba(60,35,10,.25);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='60' filter='url(%23f)' opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(180deg,transparent 64%,rgba(110,70,30,.38) 64.6%,rgba(255,250,232,.5) 66%,transparent 67.5%),
    linear-gradient(180deg,rgba(90,55,20,.5) 0%,rgba(255,248,225,0) 17%,rgba(255,255,246,.6) 32%,rgba(255,250,232,0) 50%,rgba(90,55,20,.22) 76%,rgba(52,28,8,.62) 100%),
    linear-gradient(90deg,rgba(130,88,36,.28),transparent 9%,transparent 91%,rgba(130,88,36,.28)),
    linear-gradient(90deg,#DCC18F,var(--vellum) 14%,var(--vellum) 86%,#DCC18F)}
.scroll:not(.open) .scroll-face::before,.scroll:not(.open) .scroll-face::after{content:"";position:absolute;top:0;bottom:0;width:21px;border-radius:50%;
  background:
    radial-gradient(ellipse 26% 12% at 50% 50%,#3a2110 92%,transparent 100%),
    linear-gradient(180deg,rgba(60,35,10,.42),rgba(60,35,10,0) 38%,rgba(60,35,10,0) 62%,rgba(40,22,6,.5)),
    repeating-radial-gradient(ellipse 100% 100% at 50% 50%,#F2E5C6 0 1.5px,#CFAF74 1.5px 2.2px,#E8D6AE 2.2px 3.4px);
  box-shadow:0 0 0 1px rgba(80,50,15,.45),inset 0 0 3px rgba(60,35,10,.4)}
.scroll:not(.open) .scroll-face::before{left:-10.5px}.scroll:not(.open) .scroll-face::after{right:-10.5px}
.scroll:not(.open) .scroll-hint{display:none}
.scroll:not(.open) .ribbon{top:-2px;bottom:-2px;left:72%;width:22px;border-radius:3px;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 22%,rgba(255,255,255,.2) 34%,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%),
    linear-gradient(90deg,#05323F,#0E7186 28%,#2FB3A8 50%,#0E7186 72%,#05323F)}
.scroll:not(.open) .ribbon::before,.scroll:not(.open) .ribbon::after{content:"";position:absolute;top:calc(100% - 4px);width:12px;height:30px;transform-origin:top center;
  background:linear-gradient(90deg,#063B4A,#11829B 50%,#0A5566);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.scroll:not(.open) .ribbon::before{left:-1px;transform:rotate(10deg)}
.scroll:not(.open) .ribbon::after{right:-1px;transform:rotate(-8deg);height:24px}
.scroll:not(.open) .seal{left:calc(72% + 11px)}
.scroll:not(.open) .scroll-face:hover .seal,.scroll:not(.open) .scroll-face:focus-visible .seal{transform:translate(-50%,-50%) rotate(-3deg) scale(1.07)}
.scroll:not(.open) .scroll-face:hover .scroll-label{color:#5E1F10}
.scroll:not(.open) .hint-out{margin-top:1rem}
.hint-out{display:block;text-align:center;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--mist);margin-top:.7rem}
.scroll.open .hint-out{display:none}
.ribbon{position:absolute;top:-3px;bottom:-3px;left:70%;width:26px;border-radius:2px;z-index:2;
  background:linear-gradient(90deg,#063B4A,#11829B 45%,#3FD4C4 52%,#11829B 60%,#063B4A);box-shadow:0 2px 4px rgba(0,0,0,.4);
  transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.scroll.open .ribbon{transform:translateY(40px) scaleY(.2);opacity:0}
.seal{position:absolute;left:calc(70% + 13px);top:50%;width:52px;height:52px;z-index:3;transform:translate(-50%,-50%) rotate(-10deg);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.seal svg{width:100%;height:100%;display:block}
.scroll.open .seal{transform:translate(-50%,-50%) rotate(40deg) scale(.3);opacity:0}
.sheet{display:grid;grid-template-rows:0fr;margin:0 0 -10px;transition:grid-template-rows 1s cubic-bezier(.2,.8,.2,1)}
.scroll.open .sheet{grid-template-rows:1fr}
.sheet-inner{overflow:hidden;color:var(--scroll-ink);
  background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 8%,transparent 92%,rgba(0,0,0,.16)),
    linear-gradient(90deg,var(--vellum-2),var(--vellum) 12%,var(--vellum) 88%,var(--vellum-2))}
.sheet-inner > div{padding:1.3rem 1.6rem 1.7rem}
.verse{font-family:var(--scripture);font-size:1.16rem;line-height:1.55;color:var(--scroll-ink);margin:0 0 .9rem}
.verse .vl{display:block;padding-left:1.2em;text-indent:-1.2em}
.ref{font-family:var(--scripture);font-weight:700;font-size:.92rem;color:var(--rubric);margin:0 0 .5rem}
.gloss{font-size:.95rem;color:var(--scroll-soft);line-height:1.6;margin:0}

/* ---------- things to try with Dad: a bullet-journal list ---------- */
.notebook{list-style:none;padding:0;margin:2rem 0 1.4rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem 3rem}
@media(max-width:52rem){.notebook{grid-template-columns:1fr}}
.notebook label{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;cursor:pointer;padding:1.1rem 0;border-top:1px dashed rgba(217,180,90,.35)}
.notebook input{position:absolute;opacity:0;width:1px;height:1px}
.notebook .box{width:26px;height:26px;margin-top:.15rem;display:grid;place-items:center;border:1.5px solid var(--gold);border-radius:3px;transform:rotate(-3deg);
  transition:background .3s ease}
.notebook .box svg{width:22px;height:22px;fill:none;stroke:var(--hand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1)}
.notebook input:checked + .box svg{stroke-dashoffset:0}
.notebook input:focus-visible + .box{outline:2px solid var(--gold);outline-offset:4px}
.notebook .what b{display:block;font-family:var(--serif);font-weight:400;font-size:1.65rem;line-height:1.1;color:var(--pearl);margin-bottom:.3rem}
.notebook .what{color:var(--mist);font-size:1rem;line-height:1.6}
.notebook input:checked ~ .what b{text-decoration:line-through;text-decoration-color:var(--hand);text-decoration-thickness:1.5px}

/* ---------- statements ---------- */
.say{grid-column:1 / -1;text-align:center;font-family:var(--serif);font-style:italic;color:var(--gold);
  font-size:clamp(2.4rem,1.4rem + 3.6vw,4.6rem);line-height:1.05;letter-spacing:-.015em;max-width:18ch;margin:0 auto;text-wrap:balance}

/* ---------- the letter, on paper ---------- */
.letter-paper{grid-column:2 / span 10;position:relative;background:var(--paper);color:#22343B;
  padding:clamp(2.2rem,5vw,4.4rem) clamp(1.6rem,5vw,4.6rem);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 10px 24px rgba(0,0,0,.35);transform:rotate(-.6deg)}
@media(max-width:62rem){.letter-paper{grid-column:1 / -1}}
.letter-paper .tape{position:absolute;top:-14px;width:110px;height:30px;background:var(--tape-violet);mix-blend-mode:multiply}
.letter-paper .tape.l{left:8%;transform:rotate(-6deg)}.letter-paper .tape.r{right:8%;transform:rotate(5deg);background:var(--tape-teal)}
.letter-paper .dear{font-family:var(--hand-font);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--paper-ink);margin:0 0 1.6rem}
.letter{white-space:pre-wrap;font-size:1.12em;line-height:1.85;max-width:62ch}
.sig{font-family:var(--hand-font);font-size:1.35rem;color:var(--paper-ink);margin-top:2rem;line-height:1.8}

/* ---------- small print ---------- */
.smallprint{position:relative;z-index:2;max-width:68ch;margin:0 auto;padding:2rem 1.4rem 5rem;font-size:.88rem;line-height:1.7;color:var(--mist)}
.smallprint h2{font-family:var(--serif);font-size:1.5rem;color:var(--gold);margin:0 0 .5rem}
.smallprint details{margin-top:1.4rem;border-top:1px solid var(--gold-soft);padding-top:1rem}
.smallprint summary{cursor:pointer;font-family:var(--serif);font-style:italic;color:var(--pearl);font-size:1.15rem}
.smallprint ul{padding-left:1.1rem;margin:.6rem 0 0}.smallprint li{margin:.2rem 0}

/* ---------- pause ---------- */
.still{position:fixed;right:clamp(.6rem,1.6vw,1.5rem);bottom:clamp(.8rem,2vw,1.4rem);z-index:20;width:44px;height:44px;padding:0;cursor:pointer;
  display:inline-grid;place-items:center;border-radius:50%;border:0;color:var(--pearl);background:rgba(6,23,30,.85);
  box-shadow:inset 0 0 0 1px var(--gold-soft),0 6px 18px rgba(0,0,0,.5)}
.still svg{width:15px;height:15px}.still:hover{color:var(--gold)}
.still span,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* calm means calm */
html.calm .bloom{animation:none}
html.calm .print,html.calm .card,html.calm .sheet,html.calm .seal,html.calm .ribbon,html.calm .notebook .box svg{transition:none!important}
html.calm .note{animation:none;clip-path:none!important}
html.calm .drawing .ln{animation:none;stroke-dashoffset:0!important}
html.calm .drawing .st{animation:none;opacity:1!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bloom{animation:none}
  .print,.card,.sheet,.seal,.ribbon{transition:none}
  .note{animation:none;clip-path:none!important}
  .drawing .ln{animation:none;stroke-dashoffset:0!important}.drawing .st{animation:none;opacity:1!important}
}

/* ---------- journal additions ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.opening .col-side{padding-top:1.4rem}
.squad .deck{max-width:440px;margin-inline:auto}
.deck-meta{flex-wrap:wrap;max-width:440px;margin-inline:auto}
.squad-note{max-width:440px;margin:.8rem auto 0;font-family:var(--serif);font-style:italic;color:var(--mist);font-size:1.02rem}
.card{cursor:grab}
.card .front img{border-radius:1px}
.pixels i.later{background:transparent;opacity:1;transform:scale(.5);box-shadow:inset 0 0 0 1px rgba(217,180,90,.3)}
@media(max-width:40rem){ .pixels{grid-template-columns:1.4rem 1fr;gap:2px .5rem} .pixels .row{gap:1.5px} }
@media(min-width:62.01rem){ .sticky{position:sticky;top:3rem} }
.shelf .scroll{margin-inline:auto}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
@media(max-width:62rem){ .row3{grid-template-columns:1fr} }
.star-maps{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto auto;column-gap:clamp(2rem,6vw,6rem);align-items:end}
.star-maps .orion-map{grid-column:1;grid-row:1;max-width:300px;justify-self:center}
.star-maps .pleiades-map{grid-column:2;grid-row:1;max-width:360px;justify-self:center}
.map-cap{grid-row:2;text-align:center;font-family:var(--serif);font-style:italic;color:var(--mist);font-size:1.15rem;margin-top:.8rem}
.map-cap b{font-family:var(--scripture);font-style:normal;font-weight:700;color:var(--gold)}
@media(max-width:40rem){ .star-maps{grid-template-columns:1fr} .star-maps .orion-map,.star-maps .pleiades-map,.map-cap{grid-column:1;grid-row:auto} .star-maps .orion-map{max-width:220px} .star-maps .pleiades-map{max-width:250px} }
.print.wide img{aspect-ratio:var(--ar)}
.moon-big{margin:0;display:grid;justify-items:center;gap:1.2rem}
.moon-big svg{width:min(220px,60vw);height:auto}
.moon-big .note{--r:-1deg;text-align:center}
.drawing.sky-lines{position:absolute;left:34%;top:2.4rem;width:min(225px,17vw);opacity:.8}
.drawing.sky-lines .lbl{font-size:18px}
.patterns .shapes{position:absolute;inset:0;width:100%;height:100%;opacity:.26;pointer-events:none;
  -webkit-mask-image:radial-gradient(60% 70% at 60% 42%,#000 20%,transparent 78%);mask-image:radial-gradient(60% 70% at 60% 42%,#000 20%,transparent 78%)}
.patterns .shapes .ln{stroke-width:1.1}
.patterns > div{position:relative}
.journal > .spread:first-child{border-top:0}
@media(max-width:62rem){ .drawing.sky-lines{left:auto;right:0;width:min(220px,50vw);opacity:.45;top:.6rem} }

/* ---------- prose spreads, the wide print, the two-column list ---------- */
.prose{margin-top:1.2rem}
.prose p{margin:0 0 1.15rem}
.two-col{columns:2;column-gap:3.4rem}
.two-col > *{break-inside:avoid}
@media(max-width:52rem){ .two-col{columns:1} }
ul.facts.two-col li{border-top:0;border-bottom:1px solid rgba(217,180,90,.16)}
.print-span{grid-column:2 / span 10}
@media(max-width:62rem){ .print-span{grid-column:1 / -1} }
.strange .prose{margin-top:.6rem}

/* ---------- the back of a polaroid ---------- */
.card .back .from{font-family:var(--hand-font);color:var(--paper-ink);font-size:1.05rem;line-height:1.7;margin:.4rem 0 1rem;transform:rotate(-2deg);text-align:right}

/* ---------- the letter, set like a book ---------- */
.letter{white-space:normal;font-family:var(--scripture);font-size:1.2rem;line-height:1.6;max-width:56ch}
.letter p{margin:0 0 .9em;max-width:none}

/* ---------- small print: drawn markers instead of the browser's ---------- */
.smallprint summary{list-style:none;display:flex;align-items:center;gap:.6rem}
.smallprint summary::-webkit-details-marker{display:none}
.smallprint summary::before{content:"";width:9px;height:9px;flex:none;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg);transition:transform .25s ease}
.smallprint details[open] summary::before{transform:rotate(45deg)}
.smallprint details ul{list-style:none;padding:0}
.smallprint details li{padding:.45rem 0;border-top:1px solid rgba(217,180,90,.18);margin:0}