:root {
  --blueprint: #2447D8;
  --blueprint-deep: #16308F;
  --ink: #0F1C4F;
  --paper: #F1F5FF;
  --paper-tint: #DFE8FF;
  --chalk: #FFFFFF;
  --marigold: #FFC42E;
  --scarf: #FF5470;

  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;

  --grid: rgba(255, 255, 255, .1);
  --grid-bold: rgba(255, 255, 255, .18);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.5;
}

h1, h2, h3, p, ol, figure { margin: 0; }

img, video, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 4px solid var(--marigold);
  outline-offset: 4px;
}

.wrap {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}
.wrap.narrow { width: min(100% - 2.5rem, 40rem); }

h2 {
  font-size: clamp(2rem, 1.2rem + 4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 96;
}

/* Blueprint paper, shared by the hero and the steps */
.hero, .steps {
  color: var(--chalk);
  background-color: var(--blueprint);
  background-image:
    linear-gradient(var(--grid-bold) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--grid-bold) 1.5px, transparent 1.5px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}

/* ---------- Hero ---------- */

.hero {
  min-height: min(100svh, 64rem);
  padding: clamp(2rem, 6vh, 4rem) 0 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: clip;
}

.hero-equation {
  font-family: var(--hand);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1;
  color: var(--marigold);
  transform: rotate(-3deg);
  margin-bottom: .5rem;
}

.word {
  display: flex;
  justify-content: center;
  align-items: baseline;
  white-space: nowrap;
  font-size: clamp(3.5rem, 18vw, 15rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  font-variation-settings: "opsz" 96;
}
.word .from-magic { color: var(--marigold); }
.word .drop {
  max-width: 0;
  opacity: 0;
  overflow-x: clip;
}
.word .plus { color: var(--scarf); }

.hero-credit {
  margin-top: 1rem;
  font-size: clamp(1.125rem, 1rem + 1vw, 1.75rem);
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .word { animation: settle 1.5s cubic-bezier(.75, 0, .2, 1) 1s both; }
  .word .drop { animation: collapse 1.5s cubic-bezier(.75, 0, .2, 1) 1s both; }
  .word .plus { animation-name: collapse-plus; }
  .hero-equation, .hero-credit, .hat-stage { animation: appear .6s ease-out 2.3s both; }
}

@keyframes settle {
  from { transform: scale(.5); }
  to   { transform: scale(1); }
}
@keyframes collapse {
  from { max-width: 2em; opacity: 1; }
  60%  { opacity: 0; }
  to   { max-width: 0; opacity: 0; }
}
@keyframes collapse-plus {
  from { max-width: 2em; opacity: 1; padding-inline: .2em; }
  60%  { opacity: 0; }
  to   { max-width: 0; opacity: 0; padding-inline: 0; }
}
@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Hat ---------- */

.hat-stage {
  position: relative;
  margin-top: clamp(1.5rem, 5vh, 3rem);
  width: min(78vw, 22rem);
}

.hat {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 1rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hat svg { width: 100%; height: auto; overflow: visible; }

.hat .fill    { fill: var(--blueprint-deep); stroke: var(--chalk); stroke-width: 3; stroke-linejoin: round; }
.hat .opening { fill: var(--ink); stroke: var(--chalk); stroke-width: 3; }
.hat .band    { fill: var(--scarf); stroke: var(--chalk); stroke-width: 3; stroke-linejoin: round; }
.hat .dim line { stroke: var(--chalk); stroke-width: 1.5; opacity: .6; }
.hat .wand-body { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
.hat .wand-tip  { stroke: var(--chalk); stroke-width: 9; stroke-linecap: round; }
.hat .note {
  font-family: var(--hand);
  font-size: 19px;
  fill: var(--chalk);
  opacity: .9;
}

.hat .hat-body, .hat .wand { transform-box: fill-box; transform-origin: 50% 100%; }
.hat.pop .hat-body { animation: hop .5s cubic-bezier(.3, 1.6, .5, 1); }
.hat.pop .wand { animation: tap .5s ease-out; }

@keyframes hop {
  30% { transform: translateY(6px) scale(1.06, .9); }
  60% { transform: translateY(-14px) scale(.96, 1.06); }
}
@keyframes tap {
  40% { transform: rotate(14deg); }
}

.hat-hint {
  margin-top: .25rem;
  font-family: var(--hand);
  font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem);
  line-height: 1.1;
  color: var(--marigold);
}

.spark {
  position: absolute;
  left: 48%;
  top: 22%;
  width: var(--size, 28px);
  height: var(--size, 28px);
  margin: calc(var(--size, 28px) / -2);
  pointer-events: none;
}

/* ---------- Story ---------- */

.story {
  padding: clamp(4rem, 10vw, 8rem) 0;
}
.story h2 { margin-bottom: 1.5em; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); }
.story p {
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.story p + p { margin-top: 1em; }
.story .quote {
  font-weight: 800;
  padding-left: 1rem;
  border-left: 8px solid var(--marigold);
}

/* ---------- Photo walls ---------- */

.wall { padding: clamp(3rem, 8vw, 6rem) 0; }
.wall-tinted { background: var(--paper-tint); }
.wall h2 { margin-bottom: clamp(1.5rem, 4vw, 3rem); }

.stage {
  background: var(--ink);
  color: var(--chalk);
}
.stage h2 { color: var(--marigold); margin-bottom: .4em; }
.lede {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.gallery {
  columns: 3 17rem;
  column-gap: 1.75rem;
}

.shot {
  display: inline-block; /* keeps the tape with its photo when columns break */
  width: 100%;
  break-inside: avoid;
  margin: .75rem 0 1rem;
  padding: .6rem .6rem .8rem;
  background: var(--chalk);
  color: var(--ink);
  box-shadow: 5px 6px 0 rgba(15, 28, 79, .18);
  position: relative;
}
.shot:nth-child(3n + 1) { rotate: -1.2deg; }
.shot:nth-child(3n + 2) { rotate: .9deg; }
.shot:nth-child(3n)     { rotate: -.4deg; }
.shot::before {
  content: "";
  position: absolute;
  top: -.7rem;
  left: 50%;
  width: 5.5rem;
  height: 1.5rem;
  translate: -50% 0;
  rotate: -2deg;
  background: var(--marigold);
  opacity: .88;
}
.shot:nth-child(even)::before { background: var(--scarf); rotate: 3deg; }
.stage .shot { box-shadow: 5px 6px 0 rgba(0, 0, 0, .45); }

.shot img, .shot video {
  width: 100%;
  height: auto;
  background: var(--paper-tint);
}
.shot-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.shot .shot-live {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  background: none;
  opacity: 0;
  transition: opacity .3s;
}
.shot .shot-live.playing { opacity: 1; }
.shot figcaption {
  font-family: var(--hand);
  font-size: 1.5rem;
  line-height: 1.15;
  padding: .6rem .25rem 0;
  text-align: center;
}

.empty {
  border: 3px dashed currentColor;
  border-radius: .5rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  max-width: 40rem;
  opacity: .8;
}
.empty strong { display: block; font-size: 1.25em; }
.empty code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .85em;
  overflow-wrap: anywhere;
}

/* ---------- Steps ---------- */

.steps { padding: clamp(4rem, 10vw, 8rem) 0; }
.steps h2 { margin-bottom: clamp(2rem, 5vw, 4rem); }
.steps ol {
  list-style: none;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2.5rem 2rem;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: block;
  font-size: clamp(4rem, 3rem + 4vw, 6.5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--marigold);
  margin-bottom: .15em;
}
.steps li:last-child::before { color: var(--scarf); }
.steps h3 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: .35em;
}
.steps p { max-width: 22ch; }

/* ---------- Letter ---------- */

.letter {
  background: var(--marigold);
  padding: clamp(4rem, 10vw, 8rem) 0;
}
.letter h2 { margin-bottom: .75em; }
.letter p {
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.4;
}
.letter p + p { margin-top: .8em; }
.letter .sign {
  font-family: var(--hand);
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  margin-top: 1em;
  rotate: -2deg;
  transform-origin: left;
}

.foot {
  background: var(--ink);
  color: var(--chalk);
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 1rem;
}

/* ---------- Photo viewer ---------- */

.viewer {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: rgba(15, 28, 79, .96);
  color: var(--chalk);
}
.viewer[open] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.viewer::backdrop { background: var(--ink); }
.viewer figure {
  display: grid;
  justify-items: center;
  gap: .75rem;
  padding: 4rem .5rem 1.5rem;
  min-width: 0;
}
.viewer img {
  max-height: calc(100dvh - 9rem);
  width: auto;
  object-fit: contain;
  border: 8px solid var(--chalk);
}
.viewer figcaption {
  font-family: var(--hand);
  font-size: 1.75rem;
  line-height: 1.1;
  text-align: center;
}
.viewer button {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--marigold);
  border: 0;
  cursor: pointer;
}
.viewer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: .5rem 1.1rem;
  border-radius: 99px;
}
.viewer-nav {
  width: 3rem;
  height: 3rem;
  margin: 0 .5rem;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
  padding-bottom: .2rem;
}
.viewer-nav[hidden] { display: block; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hat.pop .hat-body, .hat.pop .wand { animation: none; }
}