/* Grandpa's Jars of Rain: an invented picture book, demo. Cut paper, risograph ink, a monsoon sky.
   Day is a summer afternoon on cream paper; night is the storm after dark, the jars lit. No em-dashes. */

:root {
  --paper: #F6EEDC;
  --paper-2: #EFE2C4;
  --ink: #2A2233;
  --ink-soft: #463B49;
  --indigo: #3B3F8C;
  --terra: #A2461F;
  --terra-hi: #D2693C;
  --sun: #F2C14E;
  --sage: #4F7A4A;
  --rain: #6FA8DC;
  --pink: #E86A92;
  --card: #FBF5E6;
  --shadow: rgba(42, 34, 51, .22);
  --theme-bar: #F6EEDC;
  --display: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --hand: "Caveat Brush", "Comic Sans MS", cursive;
  --body: "Literata", Georgia, serif;
  color-scheme: light;
}
html[data-time="night"] {
  --paper: #1C1E3F;
  --paper-2: #242757;
  --ink: #F4ECDA;
  --ink-soft: #C7BFD6;
  --indigo: #9EA6FF;
  --terra: #F08A5D;
  --terra-hi: #F6A27A;
  --sun: #F7CF6B;
  --sage: #8DBF86;
  --rain: #8EC5FF;
  --pink: #FF8FB4;
  --card: #262A5C;
  --shadow: rgba(0, 0, 0, .45);
  --theme-bar: #1C1E3F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.7 var(--body);
  transition: background-color .8s ease, color .8s ease;
}
main { overflow-x: clip; position: relative; z-index: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px dashed var(--terra); outline-offset: 4px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--ink); color: var(--paper); padding: .6rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }

/* Paper grain over everything, like a risograph print */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background-image: url("../../../assets/img/grain.svg"); background-size: 240px;
  mix-blend-mode: multiply; opacity: .35;
}
html[data-time="night"] body::after { mix-blend-mode: screen; opacity: .12; }

/* The sky behind the page: drawn by sky.js, changes with the story */
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.demo-bar { position: relative; z-index: 2; font: 500 .8rem/1.4 var(--body); text-align: center; padding: .4rem 1rem; background: var(--ink); color: var(--paper); }

/* Header: a strip of torn paper */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2.5rem) 1.1rem;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 96% 88%, 91% 80%, 85% 92%, 78% 84%, 71% 95%, 63% 85%, 55% 93%, 47% 82%, 40% 94%, 32% 84%, 24% 92%, 17% 81%, 9% 93%, 4% 84%, 0 92%);
  transition: background-color .8s ease;
}
.logo { font: 400 1.3rem/1 var(--display); text-decoration: none; letter-spacing: .01em; }
.logo span { color: var(--terra); }
.top nav { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.4rem); }
.top nav a { font: 400 1.25rem/1 var(--hand); text-decoration: none; color: var(--ink-soft); }
.top nav a[aria-current="page"] { color: var(--ink); text-decoration: underline wavy var(--terra) 2px; text-underline-offset: 6px; }
.dn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--sun); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
}
html[data-time="night"] .dn { background: var(--indigo); color: #1C1E3F; }
.dn svg { width: 1.2rem; height: 1.2rem; }
.dn .moon { display: none; }
html[data-time="night"] .dn .sun { display: none; }
html[data-time="night"] .dn .moon { display: block; }
.top nav a { white-space: nowrap; }
@media (max-width: 640px) { .top nav a.long { display: none; } .logo { font-size: 1.05rem; } }
@media (max-width: 480px) { .top nav a[href="index.html"] { display: none; } .logo { font-size: .98rem; max-width: 11rem; line-height: 1.05; } }

/* Riso ink: the second colour printed a hair off */
.riso { text-shadow: .045em .035em 0 var(--pink); }
html[data-time="night"] .riso { text-shadow: .045em .035em 0 rgba(255, 143, 180, .55); }

/* Buttons: stamped paper */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.35rem;
  font: 400 1.05rem/1 var(--display); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--sun); border: 2.5px solid var(--ink); border-radius: 4px 10px 6px 12px;
  box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1deg);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: rotate(0) translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.alt { background: var(--card); transform: rotate(1deg); }
.btn.rain { background: var(--rain); }
html[data-time="night"] .btn { color: #1C1E3F; border-color: #F4ECDA; box-shadow: 4px 4px 0 #F4ECDA; }
html[data-time="night"] .btn.alt { background: var(--card); color: var(--ink); }

/* Torn paper: edges cut by tear.js */
.torn { filter: drop-shadow(5px 7px 0 var(--shadow)); }
.torn > img, .torn > .face { clip-path: var(--tear, none); }
.tape {
  position: absolute; width: 6.5rem; height: 1.7rem; z-index: 3;
  background: rgba(242, 193, 78, .65); mix-blend-mode: multiply;
  clip-path: polygon(3% 0, 97% 8%, 100% 92%, 0 100%);
}
html[data-time="night"] .tape { mix-blend-mode: normal; background: rgba(247, 207, 107, .5); }

/* Hand labels */
.hand { font-family: var(--hand); }
.kicker { font: 400 1.6rem/1.1 var(--hand); color: var(--terra); margin: 0 0 .4rem; transform: rotate(-2deg); display: inline-block; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0 0 1rem; letter-spacing: .005em; }
h2 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1rem; }
.soft { color: var(--ink-soft); }

section { position: relative; padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 4vw, 2.5rem); }
.wrap { max-width: 72rem; margin: 0 auto; }

/* Opening */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; max-width: 76rem; margin: 0 auto; padding-top: clamp(1.5rem, 5vw, 4.5rem); }
.title { font-size: clamp(3.4rem, 9.5vw, 7.6rem); line-height: .9; margin: 0 0 1.2rem; }
.title .l1 { display: block; transform: rotate(-3deg); transform-origin: left; }
.title .l2 { display: block; color: var(--indigo); margin-left: .35em; transform: rotate(1.5deg); }
.title .l3 { display: block; color: var(--terra); transform: rotate(-1deg); }
.byline { font: 400 1.6rem/1.2 var(--hand); margin: 0 0 1.3rem; }
.byline b { font-weight: 400; color: var(--indigo); }
.lede { font-size: 1.15rem; max-width: 33rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 1.1rem; }
.facts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 400 1.2rem/1.2 var(--hand); color: var(--ink-soft); list-style: none; padding: 0; margin: 0; }
.facts li::before { content: "\2022  "; color: var(--terra); }
.cover-wrap { position: relative; justify-self: center; width: min(26rem, 88vw); transform: rotate(2.5deg); }
.cover-wrap .tape.a { top: -.7rem; left: 50%; transform: translateX(-50%) rotate(-4deg); }
.cover-wrap .sticker {
  position: absolute; right: -1.2rem; bottom: 12%; z-index: 4; width: 7rem; height: 7rem; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: .6rem;
  background: var(--terra); color: #FFF6E6; border: 2.5px solid var(--ink);
  font: 400 1.15rem/1.05 var(--hand); transform: rotate(12deg); box-shadow: 3px 3px 0 var(--ink);
}
#saguaro3d { position: absolute; left: -30%; bottom: -12%; width: 46%; aspect-ratio: 3 / 4; z-index: 5; pointer-events: auto; cursor: pointer; }
#saguaro3d canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .cover-wrap { order: -1; width: min(17rem, 70vw); margin-top: .5rem; }
  #saguaro3d { left: -34%; width: 50%; bottom: -10%; }
  .cover-wrap .sticker { width: 5.4rem; height: 5.4rem; font-size: .95rem; right: -.8rem; }
}

/* Peek inside: the four spreads */
.peek-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.spreads { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.spread { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.25rem, 3vw, 3rem); align-items: center; }
.spread:nth-child(even) { grid-template-columns: 1fr 1.5fr; }
.spread:nth-child(even) .art { order: 2; }
.spread .art { position: relative; }
.spread .art .tape { top: -.8rem; left: 12%; transform: rotate(-6deg); }
.spread .words { font: 400 clamp(1.25rem, 2.1vw, 1.55rem)/1.55 var(--body); }
.spread .words .page { display: block; font: 400 1.55rem/1 var(--hand); color: var(--terra); margin-bottom: .6rem; }
.spread .words .loud { font-family: var(--display); color: var(--indigo); letter-spacing: .03em; }
html[data-time="night"] .spread.storm .words .loud { color: var(--rain); }
@media (max-width: 860px) {
  .spread, .spread:nth-child(even) { grid-template-columns: 1fr; }
  .spread:nth-child(even) .art { order: 0; }
}

/* Grandpa's shelf, in 3D */
.shelf-sec { background: linear-gradient(transparent, color-mix(in srgb, var(--paper-2) 85%, transparent) 12%, color-mix(in srgb, var(--paper-2) 85%, transparent) 88%, transparent); }
.shelf-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 2rem; align-items: center; }
#shelf3d {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border: 3px solid var(--ink); border-radius: 6px;
  background: #3a2418; box-shadow: 7px 7px 0 var(--ink); overflow: hidden; touch-action: pan-y;
}
#shelf3d canvas { display: block; width: 100% !important; height: 100% !important; cursor: pointer; }
#shelf3d .loading { position: absolute; inset: 0; display: grid; place-items: center; color: #F6EEDC; font: 400 1.4rem/1 var(--hand); }
.tag-card {
  position: relative; background: var(--card); border: 2.5px solid var(--ink); padding: 1.6rem 1.5rem 1.4rem;
  border-radius: 4px 14px 4px 4px; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-1.5deg); min-height: 15rem;
}
.tag-card::before { content: ""; position: absolute; top: 1rem; right: 1rem; width: .9rem; height: .9rem; border-radius: 50%; border: 2.5px solid var(--ink); }
.tag-card .year { font: 400 3.2rem/1 var(--display); color: var(--indigo); margin: 0 0 .5rem; }
.tag-card .note { font: 400 1.5rem/1.3 var(--hand); margin: 0 0 1rem; }
.tag-card .hint { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.shelf-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
@media (max-width: 860px) { .shelf-grid { grid-template-columns: 1fr; } #shelf3d { aspect-ratio: 1 / 1; } }

/* Praise: paper slips */
.slips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.slip { background: var(--card); padding: 1.5rem; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.slip:nth-child(1) { transform: rotate(-1.5deg); }
.slip:nth-child(2) { transform: rotate(1deg) translateY(.6rem); }
.slip:nth-child(3) { transform: rotate(-.5deg); }
.slip blockquote { margin: 0 0 .8rem; font: 400 1.5rem/1.3 var(--hand); }
.slip figcaption { font-size: .9rem; color: var(--ink-soft); }
.sample { display: inline-block; font: 600 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: .3rem .5rem; border: 1.5px dashed currentColor; border-radius: 3px; color: var(--ink-soft); }
@media (max-width: 860px) { .slips { grid-template-columns: 1fr; } }

/* Find a copy */
.copy { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.5rem; align-items: center; }
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.4rem 0; }
.format { border: 2.5px solid var(--ink); background: var(--card); padding: 1rem; text-align: center; box-shadow: 3px 3px 0 var(--ink); }
.format b { display: block; font: 400 1.2rem/1.1 var(--display); }
.format span { font: 400 1.4rem/1 var(--hand); color: var(--terra); }
.where { display: flex; flex-wrap: wrap; gap: .8rem; }
.copy-art { position: relative; transform: rotate(-2deg); max-width: 22rem; justify-self: center; }
@media (max-width: 860px) { .copy { grid-template-columns: 1fr; } .formats { grid-template-columns: 1fr 1fr 1fr; } }

/* Author pages */
.author-hero { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: 72rem; margin: 0 auto; }
.portrait { position: relative; transform: rotate(-2.5deg); max-width: 24rem; justify-self: center; }
.portrait .tape { top: -.8rem; right: 14%; transform: rotate(8deg); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2rem; counter-reset: s; }
.step { position: relative; background: var(--card); border: 2.5px solid var(--ink); padding: 1.3rem 1.2rem; box-shadow: 4px 4px 0 var(--ink); }
.step::before { counter-increment: s; content: counter(s); position: absolute; top: -1.1rem; left: -.7rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--terra); color: #FFF6E6; font: 400 1.2rem/1 var(--display); border: 2.5px solid var(--ink); }
.step h3 { font-size: 1.25rem; margin-top: .4rem; }
.step p { font-size: .98rem; margin: 0; color: var(--ink-soft); }
.events { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.events li { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; background: var(--card); border: 2px solid var(--ink); }
.events .date { font: 400 1.6rem/1 var(--hand); color: var(--terra); }
.events .what b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.events .what span { font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 860px) { .author-hero { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; } .events li { grid-template-columns: 4.5rem 1fr; } .events li .btn { grid-column: 1 / -1; justify-self: start; } }

/* Forms (demo: nothing is sent) */
.form { display: grid; gap: .9rem; max-width: 32rem; }
.form label { display: grid; gap: .3rem; font: 400 1.25rem/1.1 var(--hand); }
.form input, .form select, .form textarea {
  font: 400 1rem/1.4 var(--body); color: var(--ink); background: var(--card);
  border: 2.5px solid var(--ink); border-radius: 4px; padding: .7rem .8rem;
}
.form textarea { min-height: 6rem; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form-note { font-size: .9rem; color: var(--ink-soft); }
.thanks { display: none; font: 400 1.5rem/1.3 var(--hand); color: var(--sage); }
.form.sent .thanks { display: block; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }

/* Grown-ups page */
.guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.guide article { background: var(--card); border: 2.5px solid var(--ink); padding: 1.5rem; box-shadow: 4px 4px 0 var(--ink); }
.guide ol, .guide ul { margin: 0; padding-left: 1.2rem; }
.guide li { margin-bottom: .5rem; }
.gauge { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.coloring {
  background: #fff; color: #222; border: 2.5px solid var(--ink); padding: 1.5rem; box-shadow: 6px 6px 0 var(--ink);
  max-width: 26rem; justify-self: center; transform: rotate(1.5deg);
}
.coloring svg { width: 100%; height: auto; }
.coloring p { font: 400 1.3rem/1.1 var(--hand); text-align: center; margin: .5rem 0 0; }
@media (max-width: 860px) { .guide, .gauge { grid-template-columns: 1fr; } }

/* Footer: the desert at the bottom of the page */
.foot { position: relative; z-index: 1; padding: 5rem clamp(1rem, 4vw, 2.5rem) 2.5rem; background: var(--ink); color: #F6EEDC; margin-top: 4rem; }
.foot .logo span { color: #F08A5D; }
html[data-time="night"] .cover-wrap .sticker, html[data-time="night"] .step::before { color: #1C1E3F; }
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2.4rem; height: 2.5rem; background: var(--ink);
  clip-path: polygon(0 100%, 0 60%, 6% 40%, 12% 62%, 20% 30%, 27% 55%, 35% 38%, 44% 64%, 52% 25%, 60% 52%, 68% 35%, 77% 60%, 85% 28%, 92% 50%, 100% 35%, 100% 100%);
}
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.foot .logo { font-size: 1.6rem; }
.foot p { margin: .3rem 0; font-size: .92rem; opacity: .85; }
.foot a { color: inherit; }
.foot .made a { color: var(--sun); }
html[data-time="night"] .foot { background: #0F1029; }
html[data-time="night"] .foot::before { background: #0F1029; }

/* Reveal: pieces of paper laid down */
.lay { opacity: 0; transform: translateY(24px) rotate(var(--r, 0deg)); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .9, .3, 1.2); }
.lay.in { opacity: 1; transform: rotate(var(--r, 0deg)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lay { opacity: 1; transform: none; }
}

@media print {
  body * { visibility: hidden; }
  .coloring, .coloring * { visibility: visible; }
  .coloring { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: 0; box-shadow: none; transform: none; }
  body::after, #sky { display: none; }
}