/* The scroll page: a pinned canvas and text that scrolls past it. Phone first: the graphic holds the top of the screen
   and the text runs in the band below it; each step's card sticks at the top of the band while its step plays, then
   slides up under the graphic as the next one arrives, so a card never covers the picture. From 820px wide: text
   column on the left, graphic pinned on the right. --trig is where a step starts, a fraction of the viewport height
   from the top, the line the cards stick to; scroll.js reads it, and the anchors (#step-5) land a step's top on it. */
@import url("fonts.css");
:root {
  --paper: #f3ede0; --ink: #2b2520; --soft: #6a6258; --red: #e5402f; --night: #04060a; --rule: #d8ccb4;
  --graphic-h: 60svh; --trig: .62;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 19px/1.5 "EB Garamond", Georgia, serif; }
a { color: inherit; text-decoration-color: var(--red); text-underline-offset: .15em; }
b { font-weight: 500; }
.red { color: var(--red); }

.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 5; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--red); transform-origin: 0 0; transform: scaleX(0); }

.hero { min-height: 92svh; padding: 18svh 16px 8svh; max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.kicker { font: 500 14px/1.2 "Oswald", "Arial Narrow", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin: 0 0 12px; }
h1 { font: 600 clamp(56px, 16vw, 120px)/.95 "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 20px; }
.dek { font-size: 23px; line-height: 1.35; margin: 0 0 16px; }
.more { color: var(--soft); font-size: 17px; margin: 0; }
.cue { font: 500 28px "Oswald", sans-serif; color: var(--red); margin: 6svh 0 0; }

.scrolly { position: relative; }
.graphic { position: sticky; top: 0; height: var(--graphic-h); margin: 0; z-index: 2; background: var(--night); }
.graphic::after { /* the band's top edge: text slides under a soft rule, not a hard cut */
  content: ""; position: absolute; inset: auto 0 -14px; height: 14px; background: linear-gradient(var(--paper), rgba(243, 237, 224, 0)); }
.graphic canvas { display: block; width: 100%; height: 100%; }
/* the paper's grain and vignette, over the canvas; scroll.js sets its opacity to how much paper is on screen */
.graphic .grain { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-corner at 50% 50%, rgba(26, 18, 8, 0) 50%, rgba(26, 18, 8, .4) 100%); mix-blend-mode: multiply; }
.graphic .grain::before { content: ""; position: absolute; inset: 0; background: url(../img/paper.webp) center / 100% 100%; opacity: .4; }
.steps { position: relative; z-index: 1; padding: 2svh 0 50svh; }
.step { min-height: 100svh; max-width: 34rem; margin: 0 auto; scroll-margin-top: calc(var(--trig) * 100svh); }
.card { position: sticky; top: calc(var(--trig) * 100svh); padding: 4px 20px 0; }
.step p { margin: 0 0 .7em; }
.step blockquote { margin: 0 0 .7em; padding-left: 14px; border-left: 3px solid var(--red); font-style: italic; }
.step mark { background: linear-gradient(transparent 55%, rgba(229, 64, 47, .35) 55%); color: inherit; }
.step .src { font-size: 15px; color: var(--soft); }

.credits { max-width: 40rem; margin: 0 auto; padding: 12svh 16px 20svh; font-size: 16px; color: var(--soft); }
.credits h2 { font: 500 15px/1.2 "Oswald", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.credits li { margin-bottom: .4em; }
.credits code { font-size: .9em; }

@media (max-width: 819px) and (max-height: 720px) {   /* a short phone: a smaller graphic and type, so a card fits the band */
  :root { --graphic-h: 52svh; --trig: .54; }
  body { font-size: 17px; }
}
@media (min-width: 820px) {
  :root { --trig: .3; }
  .scrolly { display: grid; grid-template-columns: minmax(320px, 36fr) 64fr; }
  .graphic { grid-column: 2; grid-row: 1; height: 100vh; }
  .graphic::after { display: none; }
  .steps { grid-column: 1; grid-row: 1; padding: 30vh 0 60vh; }
  .step { min-height: 110vh; padding: 0 max(28px, 3vw); scroll-margin-top: calc(var(--trig) * 100vh); }
  .card { top: calc(var(--trig) * 100vh); padding: 0; }
  .step:first-child { margin-top: 0; }
  body { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }