/* ============================================================
   Ben Nguyen — field sketchbook
   paper · pencil · watercolor. Everything drawn is inline SVG;
   washes use the #wash filters, contours use #pencil.
   ============================================================ */

/* ---------- Computer Modern (CM Unicode, SIL OFL) ---------- */
@font-face { font-family: "CMU Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/cmu-serif-500-roman.woff2") format("woff2"); }
@font-face { font-family: "CMU Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/cmu-serif-500-italic.woff2") format("woff2"); }
@font-face { font-family: "CMU Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/cmu-serif-700-roman.woff2") format("woff2"); }
@font-face { font-family: "CMU Serif"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/cmu-serif-700-italic.woff2") format("woff2"); }
@font-face { font-family: "CMU Typewriter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/cmu-typewriter-text-500-roman.woff2") format("woff2"); }

:root {
  --paper: #f6f1e7;
  --paper-2: #fbf8f1;
  --paper-3: #ede6d6;
  --ink: #2f2c29;
  --ink-soft: #5d5751;
  --pencil: #6b655e;

  --sky: #a9cce0;
  --sky-deep: #6f9fc4;
  --leaf: #a3c58f;
  --leaf-deep: #6f9a63;
  --moss: #c2c37c;
  --coral: #f08a78;
  --pink: #f3b5c3;
  --butter: #f5d565;
  --water: #7dbcc3;
  --water-deep: #4f97a3;
  --lavender: #b6add6;
  --sienna: #c8783f;

  --font-hand: "CMU Serif", "Latin Modern Roman", "Computer Modern", Georgia, serif;   /* headings */
  --font-body: "CMU Serif", "Latin Modern Roman", "Computer Modern", Georgia, serif;
  --font-scribble: "CMU Serif", "Latin Modern Roman", "Computer Modern", Georgia, serif; /* marginalia */
  --font-mono: "CMU Typewriter", "Latin Modern Mono", "Courier New", monospace;

  --draw: 1;   /* pencil draw-on progress, 0..1 (inherited into <use> shadow trees) */
  --wet: 1;    /* wash opacity, 0..1 */
  --delay: 0s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(211,196,160,.25), transparent 50%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: rgba(245,213,101,.6); }

/* ---------- layers ---------- */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  mix-blend-mode: multiply; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.40  0 0 0 0 0.33  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#paint {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
}
#plane-layer {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; overflow: visible;
}
#plane-path {
  stroke: var(--pencil); stroke-width: 1.4; stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke; opacity: .4;
}
#plane {
  position: fixed; left: 0; top: 0; z-index: 30; width: 46px; height: 31px; margin: -15px 0 0 -23px;
  pointer-events: none; will-change: transform; transform: translate(-200px, -200px);
}
#plane svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- pencil + wash primitives ---------- */
.line, .line * {
  fill: none;
  stroke: var(--pencil);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.line { filter: url(#pencil); }
.line path, .line circle, .line use {
  stroke-dasharray: 1 1.2;
  stroke-dashoffset: calc(1 - var(--draw));
  transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .3, 1) var(--delay);
}
.line .partial {
  stroke-dasharray: .84 1;
  stroke-dashoffset: calc(.84 * (1 - var(--draw)));
}
.wash {
  filter: url(#wash);
  mix-blend-mode: multiply;
  opacity: var(--wet);
  transition: opacity 1.4s ease var(--delay);
}
.c-sky        { fill: var(--sky); }
.c-sky-deep   { fill: var(--sky-deep); }
.c-leaf       { fill: var(--leaf); }
.c-moss       { fill: var(--moss); }
.c-coral      { fill: var(--coral); }
.c-pink       { fill: var(--pink); }
.c-butter     { fill: var(--butter); }
.c-water      { fill: var(--water); }
.c-water-deep { fill: var(--water-deep); }
.c-lavender   { fill: var(--lavender); }
.c-sienna     { fill: var(--sienna); }
.c-ink        { fill: var(--ink-soft); }
.c-paper      { fill: #ffffff; }
.c-cloud      { fill: #fdfbf6; }
.c-cloud-shadow { fill: #b7bfd0; }
.cloud-body   { mix-blend-mode: normal; }

/* reveal state: everything starts undrawn and dry */
[data-reveal] { --draw: 0; --wet: 0; }
[data-reveal].is-in { --draw: 1; --wet: 1; }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--font-hand); font-weight: 700; line-height: 1.1; margin: 0; }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -.01em; }
h3 { font-size: 1.5rem; font-weight: 700; }
p { margin: 0; }
em { font-style: normal; }   /* no italics anywhere on the page */
.scribble {
  font-family: var(--font-scribble);
  font-size: 1.15rem;
  color: var(--ink-soft);
}
/* section numbers, the way a paper does it */
main { counter-reset: sec; }
.sec-head h2::before {
  counter-increment: sec; content: "§" counter(sec);
  font-family: var(--font-mono); font-weight: 400; font-size: .5em;
  color: var(--sienna); margin-right: .9em; vertical-align: .35em; letter-spacing: .05em;
}
.sec-head { max-width: 1100px; margin: 0 auto 2.5rem; padding: 0 clamp(1.25rem, 5vw, 4rem); }
.sec-head h2 { position: relative; display: inline-block; }
.sec-head h2::after {            /* a loose brush underline */
  content: ""; position: absolute; left: -.2em; right: -.3em; bottom: -.12em; height: .42em;
  background: var(--butter); opacity: .55; z-index: -1;
  border-radius: 45% 55% 40% 60% / 60% 40% 60% 40%;
  transform: rotate(-.8deg) scaleX(var(--wet));
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.3, 0, .2, 1) .3s;
}
.sec-head .scribble { margin-top: .4rem; }
section { position: relative; z-index: 2; padding: clamp(4rem, 9vw, 7rem) 0; }
section > .sec-head { position: relative; z-index: 2; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem clamp(1rem, 4vw, 2.5rem);
  font-family: var(--font-hand); font-size: 1.1rem; font-variant: small-caps; letter-spacing: .04em;
  transition: background .4s, box-shadow .4s;
}
.nav.is-scrolled {
  background: rgba(246,241,231,.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(61,57,53,.08);
}
.nav a { text-decoration: none; color: var(--ink); }
.nav-home { font-weight: 700; font-size: 1.35rem; }
.nav nav { display: flex; gap: clamp(.9rem, 2.5vw, 1.6rem); }
.nav nav a {
  text-decoration: underline wavy transparent; text-underline-offset: .35em; text-decoration-thickness: 1.5px;
  transition: text-decoration-color .3s, transform .3s;
}
.nav nav a:hover, .nav nav a:focus-visible { text-decoration-color: var(--coral); transform: rotate(-2deg); }

/* ============================================================
   SKY
   ============================================================ */
.sky {
  min-height: 100svh; max-height: 980px;
  display: grid; place-items: center;
  padding: 6rem 1.5rem 9rem;
  overflow: hidden;
}
.sky-wash { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; --wet: .9; }
.sky-wash .wash { transition: none; }
.hills { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: clamp(160px, 26vw, 320px); z-index: 1; }
.sun {
  position: absolute; top: 9%; right: 8%; width: clamp(110px, 12vw, 170px); z-index: 1;
  animation: breathe 9s ease-in-out infinite;
}
.sun svg, .cloud svg { display: block; width: 100%; height: auto; overflow: visible; }
.cloud { position: absolute; z-index: 1; will-change: transform; --wet: .85; }
.cloud-1 { top: 12%; width: clamp(200px, 22vw, 320px); animation: drift 120s linear infinite; }
.cloud-2 { top: 30%; width: clamp(130px, 14vw, 200px); animation: drift 95s linear infinite -30s; }
.cloud-3 { top: 52%; width: clamp(160px, 18vw, 260px); animation: drift 150s linear infinite -80s; opacity: .8; }
.cloud-4 { top: 6%;  width: clamp(110px, 12vw, 170px); animation: drift 110s linear infinite -60s; opacity: .7; }
@keyframes drift {
  from { transform: translate3d(-40vw, 0, 0); }
  to   { transform: translate3d(110vw, 0, 0); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.04) rotate(3deg); }
}

.hero { position: relative; z-index: 3; text-align: center; max-width: 900px; }
.hello { font-size: 1.5rem; transform: rotate(-4deg) translateX(-2.5em); display: inline-block; opacity: 0; animation: settle .8s ease .3s forwards; }
.name {
  position: relative;
  font-size: clamp(2.8rem, 11.5vw, 8.5rem);
  letter-spacing: -.01em; white-space: nowrap;
  margin: -.1em 0 .1em;
}
.name::before {                    /* the wet swash behind the name */
  content: ""; position: absolute; left: 4%; right: 2%; top: 22%; bottom: 8%;
  background: linear-gradient(100deg, var(--butter), var(--pink) 75%);
  opacity: .5; z-index: -1;
  border-radius: 48% 52% 40% 60% / 55% 45% 60% 40%;
  filter: url(#wash-big);
  transform: rotate(-1.5deg) scaleX(0);
  transform-origin: left center;
  animation: swash 1.2s cubic-bezier(.3, 0, .2, 1) .5s forwards;
}
.name span {
  display: inline-block; opacity: 0;
  transform: translateY(.25em) rotate(-6deg);
  animation: settle .7s cubic-bezier(.2, .8, .3, 1) forwards;
  animation-delay: calc(.55s + .06s * var(--i, 0));
}
.name span:nth-child(1)  { --i: 0; }  .name span:nth-child(2)  { --i: 1; }
.name span:nth-child(3)  { --i: 2; }  .name span:nth-child(4)  { --i: 3; }
.name span:nth-child(5)  { --i: 4; }  .name span:nth-child(6)  { --i: 5; }
.name span:nth-child(7)  { --i: 6; }  .name span:nth-child(8)  { --i: 7; }
.name span:nth-child(9)  { --i: 8; }  .name span:nth-child(10) { --i: 9; }
.name .sp { width: .28em; }
.tagline {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); color: var(--ink);
  opacity: 0; animation: settle .9s ease 1.4s forwards;
}
.where { margin-top: .9rem; opacity: 0; animation: settle .9s ease 1.8s forwards; }
@keyframes settle { to { opacity: 1; transform: none; } }
@keyframes swash { to { transform: rotate(-1.5deg) scaleX(1); } }

.cue {
  position: absolute; left: 50%; bottom: clamp(5rem, 13vw, 8rem); z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  text-decoration: none; font-family: var(--font-scribble); font-size: 1.2rem; color: var(--ink-soft);
  opacity: 0; animation: settle 1s ease 2.4s forwards;
}
.cue svg { width: 34px; height: 50px; overflow: visible; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ============================================================
   WONDER — the meadow
   ============================================================ */
.meadow { padding-bottom: 0; z-index: 3; }   /* above the river so a phone note card paints on top */
.field {
  position: relative; height: 440px; max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
}
.ground { position: absolute; left: 50%; bottom: 0; width: 100vw; height: 120px; z-index: 0; transform: translateX(-50%); }
.butterfly {
  position: absolute; left: 6%; top: 40px; width: 46px; z-index: 3;
  offset-path: path("M0,0 C150,-40 300,60 450,10 C600,-50 750,50 900,0 C980,-30 1040,10 1100,-20");
  offset-rotate: 0deg;
  animation: flutter 46s ease-in-out infinite alternate;
}
.butterfly svg { display: block; width: 100%; height: auto; overflow: visible; }
.wing { transform-origin: 0 0; animation: flap .55s ease-in-out infinite alternate; }
.wing-r { animation-delay: -.55s; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes flutter { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.birds { position: absolute; top: 14%; left: 44%; width: clamp(90px, 9vw, 150px); z-index: 1; overflow: visible; opacity: .8; }
.flower {
  position: absolute; left: var(--x); bottom: 40px; z-index: 1;
  width: calc(150px * var(--s, 1));
  transform: translateX(-50%);
  display: block; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  --delay: var(--d, 0s);
}
.flower svg {
  display: block; width: 100%; height: auto; aspect-ratio: 80 / 110; overflow: visible;
  transform-origin: 50% 100%;
  animation: sway 6s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -4);
  transition: scale .5s cubic-bezier(.2, .8, .3, 1);
}
.flower:hover svg, .flower:focus-visible svg, .flower[aria-expanded="true"] svg { scale: 1.08; }
.flower:focus-visible { outline: none; }
.flower:focus-visible svg { filter: drop-shadow(0 0 0 2px var(--coral)); }
@keyframes sway {
  0%, 100% { rotate: -2.2deg; }
  50%      { rotate: 2.2deg; }
}
.note {
  position: absolute; left: 50%; bottom: calc(100% + .4rem); z-index: 5;
  width: 250px; transform: translateX(-50%) rotate(-1.5deg) translateY(8px) scale(.96);
  padding: .8rem .95rem .85rem;
  background: var(--paper-2);
  border: 1.5px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 3px 4px 0 rgba(61,57,53,.08);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
  line-height: 1.35;
}
.note b { font-family: var(--font-hand); font-weight: 700; font-size: 1.12rem; display: block; margin-bottom: .3rem; }
.note small { font-size: .98rem; color: var(--ink-soft); display: block; }
.note a { color: var(--sienna); }
.flower:focus-visible .note, .flower[aria-expanded="true"] .note {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) rotate(-1.5deg) translateY(0) scale(1);
}
.flower[aria-expanded="true"] { z-index: 7; }
.flower:nth-child(6) .note { left: auto; right: 0; transform: translateX(0) rotate(1.5deg) translateY(8px) scale(.96); }
.flower:nth-child(6)[aria-expanded="true"] .note { transform: translateX(0) rotate(1.5deg); }
@media (hover: hover) {
  .flower:hover .note { opacity: 1; pointer-events: auto; transform: translateX(-50%) rotate(-1.5deg) translateY(0) scale(1); }
  .flower:nth-child(6):hover .note { transform: translateX(0) rotate(1.5deg); }
  .flower:hover { z-index: 6; }
}

/* ============================================================
   FIELD NOTES — the river
   ============================================================ */
.river { position: relative; max-width: 1100px; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 3rem) 2rem; }
.river-svg { position: absolute; left: 50%; top: 0; width: 240px; margin-left: -120px; height: 100%; z-index: 0; overflow: visible; }
.river-wash {
  fill: none; stroke: var(--water); stroke-width: 34; stroke-linecap: round;
  filter: url(#wash); mix-blend-mode: multiply; opacity: .8;
}
.river-line { --draw: var(--river, 0); transition: none; }
.stops { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; gap: clamp(3rem, 8vw, 6rem); }
.stop {
  display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; gap: 1rem;
}
.stop .sketch { grid-column: 1; justify-self: end; position: relative; width: clamp(130px, 18vw, 190px); }
.stop .card   { grid-column: 3; }
.stop:nth-child(even) .sketch { grid-column: 3; justify-self: start; }
.stop:nth-child(even) .card   { grid-column: 1; grid-row: 1; text-align: right; }
.sketch svg { display: block; width: 100%; height: auto; overflow: visible; }
.card { max-width: 420px; }
.stop:nth-child(even) .card { justify-self: end; }
.card .when { font-size: 1.15rem; }
.card h3 { margin: .1rem 0 .15rem; }
.card .role { font-family: var(--font-mono); color: var(--ink-soft); font-size: .95rem; margin-bottom: .55rem; }
.card > p:last-child { font-size: 1.08rem; }

/* watercolor stamps (used on the summit and the QC sheet) */
.stamp {
  position: relative; display: inline-block;
  font-family: var(--font-mono); font-weight: 400; font-size: .95rem; letter-spacing: .08em;
  padding: .25em .7em; color: var(--stamp, var(--coral));
  border: 2px solid currentColor; border-radius: 45% 55% 50% 50% / 55% 45% 60% 40%;
  transform: rotate(var(--rot, -6deg)); opacity: .9;
  transition: transform .4s;
}
.stamp::before {
  content: ""; position: absolute; inset: -3px; z-index: -1;
  background: currentColor; opacity: .32; filter: url(#wash);
  border-radius: inherit;
}
.stamp-first  { --stamp: var(--sienna); position: absolute; right: -14px; top: 6px; font-size: 1.2rem; --rot: 12deg; }
.stamp-pass   { --stamp: var(--leaf-deep); --rot: -5deg; }
.stamp-adjust { --stamp: #c9a227; --rot: 3deg; }
.stamp-flag   { --stamp: #d8624f; --rot: -8deg; }

/* ============================================================
   MAKING — sheets taped in
   ============================================================ */
.sheets {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1100px; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 3rem);
}
.sheet {
  position: relative;
  background: var(--paper-2);
  border: 1.5px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 2.4rem 1.5rem 1.6rem;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 4px 6px 0 rgba(61,57,53,.07);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), box-shadow .5s;
}
.sheet:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 6px 12px 0 rgba(61,57,53,.09); }
.tape {
  position: absolute; top: -13px; left: 50%; width: 96px; height: 28px;
  background: rgba(245,213,101,.5);
  border-left: 1px dashed rgba(61,57,53,.25); border-right: 1px dashed rgba(61,57,53,.25);
  transform: translateX(-50%) rotate(-3deg);
  mix-blend-mode: multiply;
}
.sheet:nth-child(2) .tape { transform: translateX(-50%) rotate(4deg); background: rgba(126,188,195,.4); }
.sheet:nth-child(3) .tape { transform: translateX(-50%) rotate(-1deg); background: rgba(243,181,195,.45); }
.sheet .sketch { width: 150px; margin: 0 auto .8rem; }
.sheet .label { font-size: 1.05rem; margin-bottom: .35rem; }
.sheet h3 { margin-bottom: .5rem; }
.sheet > p:not(.label) { font-size: 1.05rem; }
.sheet:hover .stamp { transform: rotate(0deg); }
.stamps { display: flex; gap: .7rem; margin-top: 1rem; flex-wrap: wrap; }

/* ============================================================
   OFF THE PAGE
   ============================================================ */
.also { padding-top: 2rem; }
.doodles {
  list-style: none; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem);
  max-width: 1100px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 2.5rem;
}
.doodles li { width: 170px; text-align: center; --delay: calc(.12s * var(--i, 0)); }
.doodles li:nth-child(2) { --i: 1; } .doodles li:nth-child(3) { --i: 2; }
.doodles li:nth-child(4) { --i: 3; } .doodles li:nth-child(5) { --i: 4; }
.doodles svg { display: block; width: 130px; height: auto; margin: 0 auto .3rem; overflow: visible; transition: transform .4s; }
.doodles li:hover svg { transform: rotate(-4deg) scale(1.06); }
.doodles span { font-family: var(--font-scribble); font-size: 1.1rem; color: var(--ink-soft); }

/* ============================================================
   SAY HI — the pond
   ============================================================ */
.pond { padding-bottom: 0; overflow: hidden; }
.pond .lead { max-width: 30ch; margin-top: .6rem; font-size: 1.2rem; }
.links {
  list-style: none; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem);
  max-width: 1100px; display: flex; flex-wrap: wrap; gap: 1rem 1.4rem;
  position: relative; z-index: 2;
}
.links a {
  display: inline-flex; flex-direction: column; gap: .05rem;
  padding: .6rem 1.1rem .7rem; text-decoration: none;
  font-family: var(--font-mono); font-size: 1.05rem;
  background: var(--paper-2); border: 1.5px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transform: rotate(var(--r, -1deg));
  transition: transform .4s cubic-bezier(.2, .8, .3, 1), background .4s;
}
.links li:nth-child(2) a { --r: 1.2deg; } .links li:nth-child(3) a { --r: -.6deg; }
.links a:hover, .links a:focus-visible { transform: rotate(0deg) translateY(-3px); background: #fff; }
.links .scribble { font-size: .95rem; line-height: 1; }
.water { position: relative; height: clamp(200px, 30vw, 320px); margin-top: 3rem; }
.water-svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.boat {
  position: absolute; left: 58%; bottom: 46%; width: clamp(80px, 9vw, 120px); z-index: 2;
  animation: float 5s ease-in-out infinite;
}
.boat svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-7px) rotate(2.5deg); }
}

/* ---------- footer ---------- */
.foot {
  position: relative; z-index: 2; text-align: center;
  padding: 1.8rem 1rem 2.2rem; font-size: .98rem; color: var(--ink-soft);
  background: rgba(125,188,195,.10);
}
.foot .scribble { font-size: 1.05rem; margin-top: .2rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .sheets { grid-template-columns: 1fr; max-width: 560px; }
  .stop { grid-template-columns: 1fr; gap: .4rem; padding-left: 3.2rem; }
  .stop .sketch, .stop:nth-child(even) .sketch { grid-column: 1; justify-self: start; width: 130px; }
  .stop .card, .stop:nth-child(even) .card { grid-column: 1; grid-row: auto; text-align: left; justify-self: start; }
  .river-svg { width: 70px; left: 0; margin-left: 0; }
  .stamp-first { right: -8px; }
}
@media (max-width: 720px) {
  body { font-size: 1.05rem; }
  .nav nav { gap: .8rem; font-size: 1rem; }
  .field {
    height: auto; padding-bottom: 46px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .5rem; align-items: end;
  }
  .butterfly { top: -20px; left: 0; width: 34px; }
  .birds { top: 16%; left: 30%; }
  .flower {
    position: relative; left: auto; bottom: auto; transform: none;
    width: 100%; max-width: 120px; min-width: 0; justify-self: center;
  }
  .flower .note { min-width: 0; }
  /* on a phone the note becomes a card pinned to the bottom of the screen */
  .flower .note, .flower:nth-child(6) .note {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; width: auto; z-index: 150;
    transform: translateY(14px) rotate(0deg); box-shadow: 4px 6px 0 rgba(61,57,53,.1);
  }
  .flower[aria-expanded="true"] .note, .flower:nth-child(6)[aria-expanded="true"] .note { transform: none; }
  .ground { height: 90px; }
  .sun { top: 6%; right: 5%; }
  .cue { bottom: 7rem; }
  .doodles li { width: 140px; }
  .doodles svg { width: 110px; }
}

/* ---------- reduced motion: draw everything at once, no drifting ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { --draw: 1; --wet: 1; }
  .name span, .hello, .tagline, .where, .cue { opacity: 1; transform: none; }
  .name::before { transform: rotate(-1.5deg) scaleX(1); }
  .river-line { --draw: 1; }
  #plane-layer, #paint { display: none; }
}

/* screenshot helper: freeze motion, show everything */
html.static *, html.static *::before, html.static *::after { animation-play-state: paused !important; transition: none !important; }
html.static [data-reveal] { --draw: 1; --wet: 1; }
html.static .river-line { --draw: 1; }
html.static .name span, html.static .hello, html.static .tagline, html.static .where, html.static .cue { opacity: 1; transform: none; }
html.static .name::before { transform: rotate(-1.5deg) scaleX(1); }