/* The Garden Grump - gardengrump.co.uk
   Design: Christopher Turner's parchment panels + v47 mockup structure. Copy v48. */

:root { --ink: #2D3F2B; --ink-deep: #1F3320; --parch: #F2E3C2; --page: 1320px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; position: relative; overflow-x: hidden;
  color: var(--ink);
  font-family: Garamond, Georgia, serif;
  font-size: clamp(18px, 2.4vw, 32px);
  line-height: 1.45;
  text-align: center;
  background-color: var(--parch);
  background-image: url("assets/texture.jpg");
  background-size: 600px 380px;
  background-blend-mode: soft-light;
}
/* continuous amber side shading, full page height (iOS-safe: no fixed backgrounds) */
.vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to right,
    rgba(190,166,112,0.85) 0, rgba(198,176,124,0.5) 4%, rgba(206,186,140,0.18) 9%, rgba(206,186,140,0) 15%,
    rgba(206,186,140,0) 85%, rgba(206,186,140,0.18) 91%, rgba(198,176,124,0.5) 96%, rgba(190,166,112,0.85) 100%);
  mix-blend-mode: multiply;
}
.hero, main, footer { position: relative; }

.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Nav ---------- */
nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; width: 100%;
  padding: 0.5em 2.5% 0.4em;
  background: rgba(242,227,194,0.94);
  border-bottom: 1px solid rgba(120,100,60,0.12);
}
nav .brand img { height: clamp(44px, 6.5vw, 86px); width: auto; display: block; }
nav ul { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: clamp(0.6em, 1.8vw, 1.5em); }
nav a {
  color: var(--ink-deep); text-decoration: none;
  font-variant: small-caps; font-feature-settings: "smcp";
  font-weight: 600; font-size: 0.74em; letter-spacing: 0.015em; white-space: nowrap;
}
nav a:hover, nav a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; outline: none; }
#menu-toggle, .hamburger { display: none; }

/* ---------- Hero ---------- */
.hero { max-width: var(--page); margin: 0 auto; }
.hero-art {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.hero .divider { margin-top: -0.3em; }
.coming { margin: 0.2em 0 0; font-size: 1.05em; line-height: 1.5; }
.coming .sprig { height: 1.6em; width: auto; vertical-align: middle; margin: 0 0.6em; }
.coming-sub { font-size: 0.92em; }

/* ---------- Structure ---------- */
main { max-width: var(--page); margin: 0 auto; padding: 0 3%; }
section { padding: 1.2em 0 1.0em; scroll-margin-top: 5.5em; }
.divider { display: block; width: min(34%, 450px); height: auto; margin: 0.8em auto; }

/* hand-lettered section titles (canon PNGs, white ground removed by multiply) */
h2.heading { display: flex; align-items: center; justify-content: center; gap: 2%; margin: 0.2em 0 0.5em; }
h2.heading .title { width: min(50%, 620px); height: auto; mix-blend-mode: multiply; }
h2.heading .title.short { width: min(32%, 400px); }
h2.heading .title.wide { width: min(58%, 720px); }
h2.heading .hsprig { width: 8%; max-width: 100px; height: auto; mix-blend-mode: multiply; }

.intro p, .prose p { max-width: 30em; margin: 0 auto 0.9em; }
.tagline { max-width: 30em; margin: 0.2em auto 0.9em; }
.standfirst { margin: 0.6em auto; }
.poem p { margin: 0 auto 1.2em; line-height: 1.5; }
.email a { color: var(--ink-deep); font-size: 1.05em; text-decoration: none; }
.email a:hover, .email a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

/* animated spreads */
.scene, .daisy {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 84%, transparent), radial-gradient(ellipse 78% 78% at 50% 50%, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 84%, transparent), radial-gradient(ellipse 78% 78% at 50% 50%, #000 55%, transparent 100%);
}
.scene { display: block; width: min(100%, 1000px); height: auto; margin: 0.6em auto 0.4em; object-fit: cover; }
.scene.r43 { aspect-ratio: 4 / 3; }
.scene.r169 { aspect-ratio: 16 / 9; }
.daisy {
  aspect-ratio: 834 / 1112; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26%, #000 74%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 26%, #000 74%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 86%, transparent);
}
.poster { display: block; width: min(70%, 620px); height: auto; margin: 0.4em auto 0.8em; }

/* ---------- Neighbours grid (labels are in the PNGs) ---------- */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2em 2%; max-width: 1040px; margin: 0.6em auto 0; align-items: end; justify-items: center;
}
.grid img { width: min(100%, 280px); height: auto; }

/* ---------- Daisy ---------- */
.daisy { width: min(66%, 440px); height: auto; display: block; margin: 0 auto; }

/* ---------- Shop prints ---------- */
.prints { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; max-width: 1160px; margin: 0.6em auto 0; align-items: end; }
.prints figure { margin: 0; }
.prints img { width: 100%; height: auto; display: block; }
.prints figcaption { font-style: italic; font-size: 0.82em; margin-top: 0.7em; line-height: 1.3; }

/* ---------- Footer ---------- */
footer {
  max-width: var(--page); margin: 1.5em auto 0; padding: 0.9em 3% 1.4em;
  border-top: 3px dotted rgba(90,75,40,0.55);
  font-size: 0.78em; line-height: 1.35;
}
footer .cols { display: flex; justify-content: space-between; align-items: center; gap: 2em; }
footer .cols > div { flex: 1; padding: 0.4em 1.2em; white-space: nowrap; }
footer .cols > div + div { border-left: 2px dotted rgba(90,75,40,0.45); }
footer .cols .sprig { height: 1.3em; width: auto; vertical-align: middle; margin: 0 0.4em; }
footer a { color: var(--ink); text-decoration: none; }
footer .copyright { margin: 1.1em 0 0; font-size: 0.9em; }

/* ---------- Mobile ---------- */

/* ---------- Multi-page sheet ---------- */
.sheet { max-width: var(--page); margin: 0 auto; position: relative; }
.framed { position: relative; padding: 0 12%; }
.framed .side { position: absolute; bottom: 0; width: 12%; height: auto; z-index: 0; -webkit-mask-composite: source-in; mask-composite: intersect; }
.framed .side-l { left: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%), linear-gradient(to right, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%), linear-gradient(to right, #000 55%, transparent); }
.framed .side-r { right: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%), linear-gradient(to left, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%), linear-gradient(to left, #000 55%, transparent); }
.framed > section { position: relative; z-index: 1; }
.page-home .intro { padding-top: 0.4em; }
.page-home .intro p { max-width: 28em; }
.page-home .scene { width: min(100%, 860px); margin-bottom: 0; }
.page-home footer { margin-top: 0.4em; }

/* ---------- Poster pages (canon background) ---------- */
.poster-page { background: #E9D6AC; }
.poster-page .vignette { display: none; }
.poster-page .sheet { max-width: var(--page); margin: 0 auto; background: #F5E5C3; box-shadow: 0 0 40px rgba(60,40,10,0.25); }
.band-top img { width: 100%; height: auto; display: block; }
.band-mid {
  position: relative; padding: 1.2em 12% 2.2em;
  background: #F5E5C3 var(--page-base, none) bottom center / 100% auto no-repeat;
  min-height: calc(min(100vw, 1320px) * 0.598);
}
.band-mid section { padding: 0.4em 0 0.6em; }
.band-mid .intro p { max-width: 30em; }
.band-mid .scene { width: min(100%, 780px); }
.band-mid .grid { max-width: 900px; }
.band-mid .grid img { width: min(100%, 270px); }
.band-mid .prints { max-width: 960px; }
.band-mid .daisy {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34%, #000 66%, transparent), linear-gradient(to bottom, transparent, #000 20%, #000 84%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 34%, #000 66%, transparent), linear-gradient(to bottom, transparent, #000 20%, #000 84%, transparent);
  width: min(74%, 520px);
}
.band-foot { position: relative; padding: 0; margin: 0; border: 0; }
.band-foot img { width: 100%; height: auto; display: block; }
.band-foot .foot-mail { position: absolute; left: 58%; top: 50%; width: 20%; height: 38%; }
.band-foot .copyright { margin: 0; padding: 0.6em 0 0.9em; font-size: 0.72em; background: #F5E5C3; }
nav a.current { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Art pages (generated page art, text in the clear area) ---------- */
.art-page { background: #F3E4C2; }
.art-top {
  background-size: 100% 100%; background-repeat: no-repeat;
  padding: 1.6em 10% 0.6em; min-height: 12em;
}
.art-top h1.heading { display: flex; align-items: center; justify-content: center; gap: 2%; margin: 0.1em 0 0.5em; }
.art-top h1.heading .title { width: min(50%, 620px); height: auto; mix-blend-mode: multiply; }
.art-top h1.heading .title.short { width: min(32%, 400px); }
.art-top h1.heading .hsprig { width: 8%; max-width: 100px; height: auto; mix-blend-mode: multiply; }
.art-live { position: relative; width: 100%; aspect-ratio: 1320 / 1202; overflow: hidden; }
.art-live video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.art-live.still video { top: 0; }

/* ---------- Generated-art pages ---------- */
.lockup { display: block; width: min(38%, 480px); height: auto; margin: 0 auto 0.4em; mix-blend-mode: multiply; }
.art { position: relative; }
.art-img { display: block; width: 100%; height: auto; }
.art .overlay { position: absolute; left: 12%; right: 12%; top: var(--top, 4%); text-align: center; }
.art .overlay h1.heading { display: flex; align-items: center; justify-content: center; gap: 2%; margin: 0 0 0.35em; }
.art .overlay h1.heading .title { width: min(50%, 620px); height: auto; mix-blend-mode: multiply; }
.art .overlay h1.heading .title.short { width: min(32%, 400px); }
.art .overlay h1.heading .title.wide { width: min(60%, 720px); }
.art .overlay h1.heading .hsprig { width: 8%; max-width: 100px; height: auto; mix-blend-mode: multiply; }
.art .overlay .prose p, .art .overlay .tagline { max-width: 32em; margin-left: auto; margin-right: auto; }
.art .overlay .prose p { font-size: 0.92em; margin-bottom: 0.7em; }
.art .overlay .prints { grid-template-columns: repeat(2, 1fr); max-width: 58%; margin-left: auto; margin-right: auto; gap: 4% 10%; }
.art .overlay .prints figcaption { font-size: 0.72em; }
.v-mid { width: min(56%, 740px) !important; }
.v-wrap { position: relative; }
.v-wrap .scene { margin-top: 0.4em; }
.copy { padding: 1.4em 12% 1.2em; }
.copy .prose p { max-width: 32em; margin-left: auto; margin-right: auto; }
.art-top.plain { background: none; padding: 1.4em 10% 0.4em; }
.poster-art { display: block; width: min(70%, 700px); height: auto; margin: 0.6em auto 0.4em;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); }
.mute {
  display: inline-block; margin: 0.5em auto 0; padding: 0.25em 0.9em; cursor: pointer;
  font-family: inherit; font-variant: small-caps; font-feature-settings: "smcp"; font-size: 0.8em; letter-spacing: 0.03em;
  color: var(--ink-deep); background: rgba(242,227,194,0.85); border: 1.5px solid rgba(90,75,40,0.5); border-radius: 2em;
}
.mute:hover { background: rgba(232,215,175,0.95); }
.mute[aria-pressed="true"] { background: #2D3F2B; color: #F2E3C2; border-color: #2D3F2B; }

/* ---------- Canon pages: Meet Daisy background, laptop/iPad first ---------- */
body.canon { background: #F3E4C2; }
body.canon .vignette { display: none; }
body.canon .sheet { max-width: 1600px; margin: 0 auto; background: #F3E4C2; box-shadow: none; }
body.canon .page {
  position: relative; padding: 0 0 0.25em; display: flex; flex-direction: column;
  background:
    url("assets/bg-top.jpg") top center / 100% auto no-repeat,
    var(--page-base, none) bottom center / 100% auto no-repeat,
    url("assets/bg-mid.jpg") center / 100% 100% no-repeat;
  min-height: calc(min(100vw, 1600px) * 1.34);
}
body.canon .hero-trans { display: block; width: 92%; height: auto; margin: 0 auto; }
body.canon .intro { padding: 0 10% 0.4em; margin-top: 0.5em; }
body.canon .intro p { max-width: 34em; margin: 0 auto 0.8em; font-weight: 600; }
body.canon .page > * { flex-shrink: 0; }
body.canon .hero-coming { display: block; width: 92%; height: auto; margin: auto auto 0; padding-top: 1.2em; }
body.canon .v-mid { width: min(94%, 1240px) !important; }
body.canon .band-foot { display: none; }
body.canon .band-foot { position: relative; }
body.canon .lockup { width: min(24%, 320px); margin: 0.3em auto 0.1em; }
body.canon h1.heading { display: flex; align-items: center; justify-content: center; gap: 2%; margin: 0.2em 0 0.4em; }
body.canon h1.heading .title { width: min(62%, 780px); height: auto; mix-blend-mode: multiply; }
body.canon h1.heading .title.short { width: min(40%, 500px); }
body.canon h1.heading .title.wide { width: min(70%, 860px); }
body.canon h1.heading .hsprig { width: 7%; max-width: 90px; height: auto; mix-blend-mode: multiply; }
body.canon .poem p { font-weight: 600; line-height: 1.5; margin: 0 auto 1em; }
body.canon .grid { max-width: 820px; gap: 1.2em 4%; margin: 0.2em auto 1.6em; }
body.canon .grid img { width: min(100%, 220px); }
body.daisy-page .daisy-band .hero-coming { position: absolute; left: 4%; right: 4%; bottom: 0.4%; width: 92%; margin: 0; padding: 0; }
body.daisy-page .page { padding-bottom: 0; }
body.canon .tagline { font-weight: 600; max-width: 34em; margin: 0.2em auto 0.6em; }
body.spread-page .intro { padding: 0 4% 0; }
body.spread-page .v-mid { width: 96% !important; }
body.spread-page .intro .tagline { margin-bottom: 0.2em; }
body.spread-page .v-wrap .mute { margin-top: 0.2em; }

body.daisy-page .page { min-height: 0; padding-bottom: 0;
  background-image: url("assets/bg-top.jpg"), url("assets/bg-mid.jpg"); background-position: top center, center; background-size: 100% auto, 100% 100%; background-repeat: no-repeat; }
body.daisy-page .daisy-band { position: relative; width: 100%; margin-top: auto; aspect-ratio: 1320 / 1162; background: var(--page-base, none) top center / 100% auto no-repeat; }
body.daisy-page .daisy-band video { position: absolute; left: 30.3%; top: 22.4%; width: 40.9%; height: auto; display: block;
  -webkit-mask-image: url("assets/daisy-matte.png"); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
  mask-image: url("assets/daisy-matte.png"); mask-size: 100% 100%; mask-repeat: no-repeat; mask-mode: alpha; -webkit-mask-mode: alpha; }
body.daisy-page .daisy-band .hero-coming { position: absolute; left: 4%; right: 4%; bottom: 0.4%; width: 92%; margin: 0; padding: 0; }
body.daisy-page .poem p { font-size: 1.18em; line-height: 1.55; }
body.book-page .intro { padding: 0 10% 0; }
body.book-page .intro p { max-width: 34em; margin: 0 auto 0.7em; font-weight: 600; }
body.book-page .standfirst { font-size: 1.05em; }
body.book-page .book-poster { display: block; width: min(60%, 760px); height: auto; margin: 0.4em auto 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent); }
body.narrator-page .intro { padding: 0 10% 0; }
body.narrator-page .intro p { max-width: 34em; margin: 0 auto 0.7em; font-weight: 600; }
body.narrator-page .intro .tagline { font-weight: 500; }
body.narrator-page .intro { display: flex; flex-direction: column; flex: 1; }
body.narrator-page .ladybird-foot { display: block; width: min(15%, 200px); height: auto; margin: auto auto 0; }

body.narrator-page .intro .opening { font-size: 1.28em; font-weight: 600; line-height: 1.4; max-width: 30em; margin: 0.2em auto 0.9em; }
body.author-page .intro p { max-width: 34em; margin: 0 auto 0.7em; font-weight: 600; padding: 0 6%; }
body.author-page .v-wrap { margin-top: 0.4em; }
body.author-page .v-mid { width: 84% !important; }
body.shop-page .prints { grid-template-columns: repeat(2, 1fr); max-width: 780px; gap: 2% 10%; margin: 0.4em auto 0; align-items: end; }
body.shop-page .prints figure { margin: 0 0 0.4em; }
body.shop-page .prints figcaption { font-weight: 600; font-style: italic; font-size: 0.8em; margin-top: 0.6em; }
body.hello-page .email a { font-size: 1.25em; font-weight: 600; }

body.daisy-still .page { min-height: 0; padding-bottom: 0; background-image: url("assets/bg-top.jpg"), url("assets/bg-mid.jpg"); background-position: top center, center; background-size: 100% auto, 100% 100%; background-repeat: no-repeat; }
body.daisy-still .daisy-band { position: relative; width: 100%; margin-top: auto; aspect-ratio: 1320 / 1162; background: var(--page-base, none) top center / 100% auto no-repeat; }
body.daisy-still .daisy-band .hero-coming { position: absolute; left: 4%; right: 4%; bottom: 0.4%; width: 92%; margin: 0; padding: 0; }

html { background: #F3E4C2; }

/* ---- snag fixes 2 Sept ---- */
nav .brand { display: flex; align-items: center; gap: 0.5em; text-decoration: none; }
nav .home-label { font-variant: small-caps; font-feature-settings: "smcp"; font-weight: 600; color: var(--ink-deep); letter-spacing: 0.015em; }
nav .brand:hover .home-label { text-decoration: underline; text-underline-offset: 0.2em; }
nav ul { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.1em; }
nav a, nav .home-label { font-size: clamp(13px, 1.42vw, 22px) !important; }
nav ul { gap: clamp(0.4em, 1vw, 1em); }
body.canon .page { background-size: 100% auto, 100% auto, 100% auto; background-repeat: no-repeat, no-repeat, repeat-y; }
body.narrator-page .secret-block { margin-top: auto; padding-bottom: 0.6em; }
body.author-page .v-mid { -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent); }

body.daisy-page .daisy-band video { opacity: 0; pointer-events: none; -webkit-mask-image: none; mask-image: none; }
body.daisy-page .daisy-band canvas { position: absolute; left: 30.3%; top: 22.4%; width: 40.9%; height: auto; aspect-ratio: 340 / 490; display: block; }

nav .brand { flex-direction: column; gap: 0.05em; }
nav .home-label { font-size: clamp(11px, 1.0vw, 16px) !important; line-height: 1; }
body.canon .grid img[alt="Robin"] { width: min(62%, 150px); }
body.author-page .v-mid { -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 2%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent); }

body.hello-page .robin-wrap { margin-top: auto; margin-bottom: -6%; }
body.hello-page .robin { width: min(34%, 450px) !important; aspect-ratio: 704 / 1308; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 84%, transparent), radial-gradient(ellipse 70% 78% at 50% 50%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 84%, transparent), radial-gradient(ellipse 70% 78% at 50% 50%, #000 55%, transparent 100%); }

body.hello-page .robin { width: min(26%, 340px) !important;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%); }
body.hello-page .robin-wrap { margin-bottom: -4%; }

body.daisy-page .daisy-mute { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12%; z-index: 3; }
body.hello-page .robin { width: min(44%, 580px) !important; }
body.hello-page .robin-wrap { margin-top: auto; margin-bottom: -2%; }
body.hello-page .intro { padding-bottom: 0; }

/* Narrator ladybird: walks in from the left, settles centre, blinks */
body.narrator-page .ladybird-walk { width: min(15%, 200px); margin: auto auto 0; position: relative; animation: lb-walk 6s ease-out 0.4s both; }
body.narrator-page .ladybird-bob { position: relative; animation: lb-bob 0.32s ease-in-out 0.4s 18 alternate; }
body.narrator-page .ladybird-foot { display: block; width: 100%; height: auto; margin: 0; }
body.narrator-page .lid { position: absolute; background: #95928d; border-radius: 50%; transform: scaleY(0); transform-origin: 50% 0; animation: lb-blink 4.5s ease-in-out 6.5s infinite; }
body.narrator-page .lid-big { left: 74.7%; top: 39.8%; width: 8.3%; height: 12.9%; }
body.narrator-page .lid-small { left: 89.7%; top: 38.6%; width: 4.0%; height: 10.2%; }
@keyframes lb-walk { from { transform: translateX(-42vw); } to { transform: translateX(0); } }
@keyframes lb-bob { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes lb-blink { 0%, 92% { transform: scaleY(0); } 95%, 97% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
nav ul { margin-left: 1.6em; justify-content: flex-start; }
nav a { font-size: clamp(15px, 1.75vw, 27px) !important; }
nav .home-label { font-size: clamp(11px, 1.05vw, 16px) !important; }
body.author-page .v-mid { -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 2%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 96%, transparent); }
nav a { font-size: clamp(15px, 1.6vw, 25px) !important; }
nav ul { gap: clamp(0.4em, 0.9vw, 0.9em); }

body.narrator-page .ladybird-walk, body.narrator-page .ladybird-bob { animation: none !important; }

body.daisy-page .page, body.daisy-still .page { background-size: 100% auto, 100% auto; background-repeat: no-repeat, repeat-y; background-position: top center, top center; }

/* final fixes */
body.narrator-page .lid { animation-duration: 2.6s; }
body.author-page .intro p { font-size: 0.86em; margin-bottom: 0.45em; line-height: 1.45; }
body.author-page .v-wrap { margin-top: -0.2em; }
body.author-page .v-mid { width: 90% !important; }
body.shop-page .prints { max-width: 624px; }
body.hello-page .robin-wide { width: min(62%, 820px) !important; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 50% 40%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 50%, transparent 100%); }
body.hello-page .robin-wrap { margin-bottom: -3%; }

/* fixes round 2 */
@keyframes lb-blink { 0%, 84% { transform: scaleY(0); } 88%, 94% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
body.narrator-page .lid { animation: lb-blink 2.6s ease-in-out 1s infinite !important; }
body.shop-page .prints { align-items: start; grid-template-rows: auto auto; }
body.shop-page .prints figure { display: flex; flex-direction: column; align-items: center; height: 100%; }
body.shop-page .prints figure img { height: 250px; width: auto; max-width: 100%; object-fit: contain; }
body.shop-page .prints figcaption { margin-top: 0.4em; }
body.hello-page .robin-frame { position: relative; width: min(62%, 820px); aspect-ratio: 4 / 3; margin: 0 auto; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 48%, transparent 100%); }
body.hello-page .robin-frame video { position: absolute; width: 150%; height: auto; left: -28%; top: -68%; -webkit-mask-image: none; mask-image: none; display: block; }



/* ===== NAV (approved): translucent parchment, stacked two-line items, both bold, same size ===== */
nav { background: url("assets/bg-top.jpg") top center / 100% auto no-repeat, #F3E4C2 !important; opacity: 0.94; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 0.5em 2.5% !important;
  box-shadow: 0 6px 14px rgba(84, 62, 24, 0.18), 0 1px 0 rgba(84, 62, 24, 0.12) !important; border-bottom: 0 !important; }
nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; pointer-events: none; background: linear-gradient(to bottom, rgba(120, 92, 40, 0), rgba(120, 92, 40, 0.10)); }
nav ul { flex-wrap: nowrap; justify-content: center; column-gap: clamp(1em, 2.2vw, 2.4em); margin-left: 2em; }
nav a { display: flex; flex-direction: column; align-items: center; line-height: 1.05; text-decoration: none; }
nav a .l1, nav a .l2 { font-size: clamp(18px, 2.1vw, 32px) !important; font-weight: 700; letter-spacing: 0.015em; opacity: 1; }
nav a.current .l2 { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
nav a.current { text-decoration: none; }
nav .brand { flex: 0 0 auto; }
nav .brand img { width: clamp(60px, 5.6vw, 90px) !important; height: auto !important; max-width: none !important; flex: 0 0 auto; aspect-ratio: auto; object-fit: contain; }
nav .home-label { font-size: clamp(13px, 1.2vw, 18px) !important; }
/* ===== Say Hello: the softened drawing, animated, in one oval ===== */
body.hello-page .robin-wrap { margin-top: auto; margin-bottom: auto; }
body.hello-page .robin-spread { display: block; width: min(78%, 1000px); height: auto; aspect-ratio: 1326 / 1360; object-fit: cover; margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
body.hello-page .v-wrap .mute { margin-top: -2.2em; position: relative; z-index: 2; }

/* ===== Rhymes: a different voice from the prose ===== */
body.canon .poem p { font-family: "EB Garamond Italic", Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.12em; line-height: 1.6; letter-spacing: 0.01em; max-width: 30em; margin: 0 auto 0.8em; }
body.canon .poem p::first-line { }
/* Meet Daisy: close the gap between the rhyme and Daisy */
body.daisy-page .daisy-band { margin-top: 0.4em; }
body.daisy-page .page { justify-content: flex-start; }
body.daisy-page .daisy-band .hero-coming { margin-top: 0; }
/* The Grump's Garden: invitation on four lines; spread sits low, just above the page foot */
body.garden-page .intro .tagline.invite { font-family: "EB Garamond Italic", Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.12em; line-height: 1.55; margin: 0.2em auto 0.4em; }
body.garden-page .intro { display: flex; flex-direction: column; flex: 1 1 auto; }
body.garden-page .intro .v-wrap { margin-top: auto; margin-bottom: 0.2em; }
body.daisy-page .poem-block { margin-top: 2.2em; margin-bottom: 0; }
body.daisy-page .daisy-band { margin-top: -1.2em; }
body.daisy-page .poem-block { margin-top: 3.6em; position: relative; z-index: 2; }
body.daisy-page .daisy-band { margin-top: -7.5em; }
/* Author spread: deeper fade all round */
body.author-page .v-mid {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%) !important; }
body.author-page .v-mid {
  -webkit-mask-image: radial-gradient(ellipse 56% 58% at 50% 50%, #000 58%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 56% 58% at 50% 50%, #000 58%, transparent 100%) !important; }
/* Garden invitation: normal weight/style, larger */
body.garden-page .intro .tagline.invite { font-family: Georgia, serif; font-style: normal; font-weight: 600; font-size: 1.28em; line-height: 1.5; }
/* Author spread: softer sides */
body.author-page .v-mid {
  -webkit-mask-image: radial-gradient(ellipse 50% 58% at 50% 50%, #000 50%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 50% 58% at 50% 50%, #000 50%, transparent 100%) !important; }

body.book-page .isbn, .isbn { font-size: 0.72em; font-weight: 500; letter-spacing: 0.04em; margin: -0.4em auto 0.6em; opacity: 0.85; }
/* Accessibility: visible keyboard focus, reduced motion */
a:focus-visible, button:focus-visible, .mute:focus-visible { outline: 2px solid #2D3F2B; outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}
/* Sound button: parchment tab with body, not a flat pill */
.mute { background: url("assets/bg-top.jpg") center / 600px auto, #EFDDB8 !important; color: #2D3F2B !important; border: 1px solid rgba(84,62,24,0.45) !important; border-radius: 999px;
  padding: 0.42em 1.35em 0.4em !important; font-size: 0.78em; letter-spacing: 0.06em;
  box-shadow: 0 2px 0 rgba(84,62,24,0.25), 0 4px 10px rgba(84,62,24,0.22), inset 0 1px 0 rgba(255,250,235,0.7), inset 0 -2px 0 rgba(120,92,40,0.14) !important;
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s; }
.mute::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.55em; border-radius: 50%; background: #B5A07A; box-shadow: inset 0 0 0 1px rgba(84,62,24,0.5); vertical-align: 0.05em; }
.mute:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(84,62,24,0.25), 0 6px 14px rgba(84,62,24,0.26), inset 0 1px 0 rgba(255,250,235,0.7) !important; }
.mute:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(84,62,24,0.25), 0 2px 6px rgba(84,62,24,0.2) !important; }
.mute[aria-pressed="true"] { background: #2D3F2B !important; color: #F2E3C2 !important; border-color: #1f2c1e !important;
  box-shadow: 0 2px 0 rgba(20,30,18,0.5), 0 4px 10px rgba(45,63,43,0.35), inset 0 1px 0 rgba(255,255,255,0.12) !important; }
.mute[aria-pressed="true"]::before { background: #9FD48A; box-shadow: 0 0 6px rgba(159,212,138,0.9), inset 0 0 0 1px rgba(20,30,18,0.4); }
/* Coming block: soft parchment halo so the lettering reads over the meadow */
.hero-coming { filter: drop-shadow(0 0 2px rgba(247,236,210,0.95)) drop-shadow(0 0 6px rgba(247,236,210,0.9)) drop-shadow(0 0 14px rgba(247,236,210,0.7)); }

/* Say Hello final: Chris's reduced framing (980x812), oval, robin + ladybird untouched */
body.hello-page .robin-spread { width: min(80%, 1040px) !important; aspect-ratio: 754 / 624 !important; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%) !important; }

/* ===== Site voice (3 Sept): all page copy in the rhyme font - sizes unchanged ===== */
body.canon .intro p, body.canon .tagline, body.canon .standfirst, body.canon .prose p, body.canon .email a, body.canon .prints figcaption {
  font-family: "EB Garamond Italic", Georgia, serif; font-style: italic; font-weight: 500; }
body.canon .intro p strong, body.canon .tagline strong, body.canon .standfirst strong { font-weight: 700; }

/* ===== Phones (3 Sept): stretch the parchment page to fill tall screens - meadow foot at the true bottom ===== */
body.canon .page { min-height: max(calc(min(100vw, 1600px) * 1.34), calc(100vh - 96px)); }
@supports (height: 100svh) {
  body.canon .page { min-height: max(calc(min(100vw, 1600px) * 1.34), calc(100svh - 96px)); }
}
body.daisy-page .page, body.daisy-still .page { min-height: 0; }

/* ===== Shade pools (3 Sept): darker pool behind text blocks, Aged34 tone ===== */
body.canon .poem, body.canon .pool {
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(214,190,140,0.50) 0%, rgba(214,190,140,0.265) 55%, rgba(214,190,140,0) 98%);
  padding: 2.2em 3em; }

/* ===== Meet Daisy on phones (4 Sept): fill tall screens, band sits on the true bottom; laptops unchanged ===== */
@media (max-aspect-ratio: 4/5) {
  body.daisy-page .page { min-height: calc(100vh - 96px); }
  body.daisy-page .page { min-height: calc(100svh - 96px); }
  body.daisy-page .daisy-band { margin-top: auto; }
}

/* ===== Site sound control (4 Sept): original pill in the nav, two-line, lamp at left; menu tucked in by the ladybird ===== */
nav ul { margin-left: 0.8em; justify-content: flex-start; column-gap: clamp(0.7em, 1.6vw, 1.8em); }
nav .nav-sound { margin: 0 0 0 auto; align-self: center; flex: 0 0 auto; position: relative;
  font-size: clamp(13px, 1.42vw, 22px); white-space: nowrap; text-align: center; line-height: 1.12;
  padding: 0.32em 0.95em 0.3em 1.75em !important; }
nav .nav-sound .l1, nav .nav-sound .l2 { display: block; }
nav .nav-sound::before { position: absolute; left: 0.75em; top: 50%; transform: translateY(-50%); margin-right: 0; }

/* ===== Page turn (4 Sept v4): in-page leaf turn - sheet wipes away over the parchment, next page settles in ===== */
html { background: #F2E3C2; }
body.canon { background: transparent; }
body.canon::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: url("assets/bg-mid.jpg") center / 100% 100% no-repeat #F3E4C2; }
@media (prefers-reduced-motion: no-preference) {
  body.canon .sheet { animation: gg-page-in 0.35s ease-out; }
  body.canon.gg-leave .sheet { animation: gg-leaf-out 0.32s cubic-bezier(0.5, 0.05, 0.55, 0.2) both; }
  @keyframes gg-leaf-out {
    0%   { clip-path: inset(0 0 0 0); filter: brightness(1); }
    70%  { filter: brightness(0.9); }
    100% { clip-path: inset(0 100% 0 0); filter: brightness(0.85); }
  }
  @keyframes gg-page-in {
    from { filter: brightness(0.92); }
    to   { filter: brightness(1); }
  }
}

/* ===== Page numbers (4 Sept): the book's pages, counted - small print, ink green, site voice ===== */
body.canon .page-no { text-align: center; font-family: "EB Garamond Italic", Georgia, serif;
  font-style: italic; font-weight: 600; font-size: 0.6em; letter-spacing: 0.04em; color: #2D3F2B;
  margin: 0.5em 0 0.7em; }
body.daisy-page .daisy-band .hero-coming { bottom: 3%; }
body.daisy-page .daisy-band .page-no { position: absolute; left: 0; right: 0; bottom: 0.7%; margin: 0; }

/* ===== The cover (4 Sept): a real book - soft shadow, rounded boards, edge shading, hint of spine ===== */
body.cover-page .cover-link { position: relative; display: block; width: min(88%, 1080px); margin: 1.8em auto;
  border-radius: 9px;
  box-shadow: 0 16px 44px rgba(60, 40, 10, 0.30), 0 4px 12px rgba(60, 40, 10, 0.18); }
body.cover-page .cover { display: block; width: 100%; height: auto; border-radius: 9px; }
body.cover-page .cover-link::after { content: ""; position: absolute; inset: 0; border-radius: 9px; pointer-events: none;
  background:
    linear-gradient(to right, rgba(60,40,10,0.15) 0, rgba(60,40,10,0.05) 2.5%, rgba(255,255,255,0.06) 4.5%, rgba(0,0,0,0) 7%),
    radial-gradient(ellipse 125% 125% at 50% 44%, rgba(0,0,0,0) 60%, rgba(60,40,10,0.13) 100%); }

/* ===== The Gate (5 Sept): full-page gate spread - title in the sky, snail on the path ===== */
body.gate-page .page { padding: 0; }
body.gate-page .gate-art { margin-top: auto; }
body.gate-page .gate-art { position: relative; }
body.gate-page .gate-img { display: block; width: 100%; height: auto; }
body.gate-page .gate-lockup { position: absolute; top: 2.6%; left: 50%; transform: translateX(-50%);
  width: 66%; height: auto; mix-blend-mode: multiply; }
body.gate-page .gate-art .page-no { position: absolute; left: 0; right: 0; bottom: 0.6%; margin: 0; }
body.gate-page .gate-coming { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 5.6%; width: 59%; height: auto; margin: 0;
  filter: drop-shadow(0 0 14px rgba(251,245,228,.95)) drop-shadow(0 0 34px rgba(251,245,228,.8)) drop-shadow(0 0 60px rgba(251,245,228,.6)); }

/* ===== The Gate as a standard page (5 Sept, late): large soft-edged spread ===== */
body.canon .lockup.gate-title { width: min(62%, 820px); margin: 1.2em auto 0; }
body.canon .gate-scene { display: block; width: 96%; max-width: 1270px; height: auto; margin: -7% auto 0; position: relative; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 34%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 34%, #000 96%, transparent 100%);
  mask-composite: intersect; }

/* ===== The Gate stage (5 Sept, final): meadow as top layer, foot pinned to the artwork ===== */
body.gate-page .page { padding: 0; background-image: url("assets/bg-top.jpg"), url("assets/bg-mid.jpg"); background-position: top center, center; background-size: 100% auto, 100% 100%; background-repeat: no-repeat; }
body.gate-page .gate-stage { position: relative; width: 100%; margin-top: auto; padding-bottom: 13%; }
body.gate-page .gate-meadow { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 73%, #000 77%); mask-image: linear-gradient(to bottom, transparent 73%, #000 77%); }
body.gate-page .gate-stage .hero-coming { position: absolute; left: 4%; right: 4%; bottom: 3.8%; width: 92%; margin: 0; padding: 0; z-index: 2; }
body.gate-page .gate-stage .page-no { position: absolute; left: 0; right: 0; bottom: 0.6%; margin: 0; z-index: 2; }


/* ===== The landing page (21 Sept): spread 1, the garden wakes - the landscape clip under the title, the note beneath ===== */
body.canon .lockup.landing-title { width: min(36%, 480px); margin: 0.5em auto 0; }
body.landing-page .landing-scene { display: block; width: min(94%, 1240px); height: auto; aspect-ratio: 16 / 9; margin: 0.5em auto 0; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 90%, transparent 100%);
  mask-composite: intersect; }
body.landing-page .landing-note { margin: 1.1em auto 0; padding: 0; text-align: center; }
body.landing-page .landing-note img { display: block; width: min(50%, 680px); height: auto; margin: 0 auto; mix-blend-mode: multiply; }
body.landing-page .landing-credits { display: block; width: min(30%, 400px); height: auto; margin: 1.5em auto 0; mix-blend-mode: multiply; }
/* the hedgehog on the meadow: the canon animation drawn through its own matte on a canvas (the Daisy page's method); the still shows until the clip plays */
body.landing-page .landing-foot { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1320 / 1162; pointer-events: none; z-index: 1; }
body.landing-page .landing-foot { overflow: hidden; }
body.landing-page .landing-foot .hog-walk { position: absolute; left: 63%; bottom: 17.5%; width: 16%; aspect-ratio: 600 / 476; }
body.landing-page .landing-foot .hog-still, body.landing-page .landing-foot .hog-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
body.landing-page .landing-foot .hog-canvas { opacity: 0; }
body.landing-page .landing-foot.hog-js .hog-still { opacity: 0; }
body.landing-page .landing-foot.hog-static .hog-still { opacity: 1; }
body.landing-page .landing-foot.hog-live .hog-canvas { opacity: 1; }
body.landing-page .landing-foot.hog-live .hog-still { opacity: 0; }
/* he walks in from the right edge of the page, crosses to the left and is gone, then comes round again: 20.8 s to cross (the pace his feet set in the clip), 4.2 s out of sight */
body.landing-page .landing-foot.hog-live .hog-walk { left: 100%; animation: hog-cross 25s linear infinite; }
@keyframes hog-cross { 0% { transform: translateX(0); } 83.2% { transform: translateX(-725%); } 100% { transform: translateX(-725%); } }
body.landing-page .landing-foot .hog-video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
body.landing-page .hero-coming, body.landing-page .page-no { position: relative; z-index: 2; }

/* ===== Pages being replanted (21 Sept): the Gate and the Garden keep their place; the words stand where the spread was and the bee flies round them ===== */
body.replant-page .replant-wrap { margin: auto; width: 100%; padding: 2.5em 0; }
body.replant-page .replant-wrap.in-flow { margin: 1.2em auto 0.6em; padding: 6em 0 6.5em; }
body.replant-page .replant { position: relative; width: min(46%, 620px); margin: 0 auto; }
body.replant-page .replant-words { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
body.replant-page .bee-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
body.replant-page .bee-turn { position: absolute; left: max(-3.4vw, -48px); top: max(-3.9vw, -56px); width: min(6.8vw, 96px); aspect-ratio: 300 / 348; }
body.replant-page .bee-still, body.replant-page .bee-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
body.replant-page .bee-canvas { opacity: 0; }
body.replant-page .replant.bee-js .bee-still { opacity: 0; }
body.replant-page .replant.bee-static .bee-still { opacity: 1; }
body.replant-page .replant.bee-live .bee-canvas { opacity: 1; }
body.replant-page .replant.bee-live .bee-still { opacity: 0; }
body.replant-page .bee-video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
/* still bee (no motion, or the clip will not play): he hovers at the top right of the words */
body.replant-page .bee-x { transform: translateX(min(27vw, 360px)); }
body.replant-page .bee-y { transform: translateY(max(-9vw, -125px)); }
/* flying: across and back in 16 s, up and down a quarter turn out of step, so he goes round the words; he faces the way he flies */
body.replant-page .replant.bee-live .bee-x { animation: bee-x 8s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
body.replant-page .replant.bee-live .bee-y { animation: bee-y 8s cubic-bezier(0.37, 0, 0.63, 1) -4s infinite alternate; }
body.replant-page .replant.bee-live .bee-turn { animation: bee-turn 16s steps(1) infinite, bee-bob 1.3s ease-in-out infinite alternate; }
@keyframes bee-x { from { transform: translateX(max(-29vw, -390px)); } to { transform: translateX(min(29vw, 390px)); } }
@keyframes bee-y { from { transform: translateY(max(-11.5vw, -157px)); } to { transform: translateY(min(11.5vw, 157px)); } }
@keyframes bee-turn { 0% { scale: -1 1; } 50% { scale: 1 1; } }
@keyframes bee-bob { from { translate: 0 -5px; rotate: -3deg; } to { translate: 0 5px; rotate: 3deg; } }

/* ===== The landing page as the whole Title Spread (21 Sept, later): the clip runs edge to edge under the menu; the title and credits are in the clip itself (the one allowed exception to the no-baked-text rule, as in the book's own Title Spread) ===== */
body.landing-page.landing-full .landing-scene { width: 100%; max-width: none; margin: 0 auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 96%, transparent 100%); -webkit-mask-composite: source-over;
  mask-image: linear-gradient(to bottom, #000 0%, #000 96%, transparent 100%); mask-composite: add; }
body.landing-page.landing-full .landing-note { margin-top: 1.6em; }

/* Author spread, 25 Sept 2026: the corners kept (the robin lands on the post at the top left); a light straight feather at the edges instead of the ellipse */
body.author-page .v-mid {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 88%, transparent) !important;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 88%, transparent) !important; }

/* Gate and author spread edges, 26 September 2026.
   Fade into the existing parchment without recolouring or cropping the artwork.
   Keep the author scene's gate-post/robin area inside the opaque centre. */
body.gate-page .gate-scene,
body.author-page video#va.scene {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

body.gate-page .gate-scene {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent 0.5%, rgba(0,0,0,.12) 3%, rgba(0,0,0,.5) 7%, rgba(0,0,0,.88) 11%, #000 15%, #000 85%, rgba(0,0,0,.88) 89%, rgba(0,0,0,.5) 93%, rgba(0,0,0,.12) 97%, transparent 99.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 7%, rgba(0,0,0,.5) 17%, rgba(0,0,0,.88) 27%, #000 34%, #000 84%, rgba(0,0,0,.88) 88%, rgba(0,0,0,.5) 92%, rgba(0,0,0,.12) 97%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, transparent 0.5%, rgba(0,0,0,.12) 3%, rgba(0,0,0,.5) 7%, rgba(0,0,0,.88) 11%, #000 15%, #000 85%, rgba(0,0,0,.88) 89%, rgba(0,0,0,.5) 93%, rgba(0,0,0,.12) 97%, transparent 99.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 7%, rgba(0,0,0,.5) 17%, rgba(0,0,0,.88) 27%, #000 34%, #000 84%, rgba(0,0,0,.88) 88%, rgba(0,0,0,.5) 92%, rgba(0,0,0,.12) 97%, transparent 100%);
}

body.author-page video#va.scene {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 1%, rgba(0,0,0,.5) 3%, rgba(0,0,0,.88) 5%, #000 7%, #000 88%, rgba(0,0,0,.88) 90.5%, rgba(0,0,0,.5) 94%, rgba(0,0,0,.12) 97.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 2%, rgba(0,0,0,.5) 5%, rgba(0,0,0,.88) 8%, #000 11%, #000 82%, rgba(0,0,0,.88) 87%, rgba(0,0,0,.5) 92%, rgba(0,0,0,.12) 97%, transparent 100%) !important;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 1%, rgba(0,0,0,.5) 3%, rgba(0,0,0,.88) 5%, #000 7%, #000 88%, rgba(0,0,0,.88) 90.5%, rgba(0,0,0,.5) 94%, rgba(0,0,0,.12) 97.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 2%, rgba(0,0,0,.5) 5%, rgba(0,0,0,.88) 8%, #000 11%, #000 82%, rgba(0,0,0,.88) 87%, rgba(0,0,0,.5) 92%, rgba(0,0,0,.12) 97%, transparent 100%) !important;
}

/* A distinct canon botanical base for each page. The original lettering,
   parchment, navigation and media remain in their existing positions. */
body[data-page="index"] { --page-base: url("assets/canon-base-index.webp"); }
body[data-page="welcome"] { --page-base: url("assets/canon-base-welcome.webp"); }
body[data-page="neighbours"] { --page-base: url("assets/canon-base-neighbours.webp"); }
body[data-page="daisy"] { --page-base: url("assets/canon-base-daisy.webp"); }
body[data-page="garden"] { --page-base: url("assets/canon-base-garden.webp"); }
body[data-page="book"] { --page-base: url("assets/canon-base-book.webp"); }
body[data-page="narrator"] { --page-base: url("assets/canon-base-narrator.webp"); }
body[data-page="author"] { --page-base: url("assets/canon-base-author.webp"); }
body[data-page="shop"] { --page-base: url("assets/canon-base-shop.webp"); }
body[data-page="hello"] { --page-base: url("assets/canon-base-hello.webp"); }

body.canon .page {
  isolation: isolate;
  background-image: url("assets/bg-top.jpg"), url("assets/bg-mid.jpg");
  background-position: top center, top center;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, repeat-y;
}

body.canon .page::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  z-index: -1;
  pointer-events: none;
  background-image: var(--page-base, none);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.88) 28%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.88) 28%, #000 38%);
}

/* These two pages already own a foreground stage; avoid a second base. */
body.gate-page .page::before,
body.daisy-page .page::before,
body.daisy-still .page::before { content: none; }

body.gate-page .gate-meadow {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.88) 28%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.88) 28%, #000 38%);
}

body.daisy-page .daisy-band,
body.daisy-still .daisy-band {
  background-image: var(--page-base, none);
  background-position: bottom center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}


/* BEGIN bounded foliage-bottom correction, 26 September 2026.
   Paint the existing base lower inside its unchanged pseudo-element.
   No box position, dimensions, masks, content or media are changed.
   Offsets come from source-image rows and stop growing at 1600px. */
body[data-page="index"] { --foliage-drop: calc(min(100vw, 1600px) * 0.02880859375); }
body[data-page="neighbours"] { --foliage-drop: calc(min(100vw, 1600px) * 0.08984375000); }
body[data-page="garden"] { --foliage-drop: calc(min(100vw, 1600px) * 0.09814453125); }
body[data-page="book"] { --foliage-drop: calc(min(100vw, 1600px) * 0.05175781250); }
body[data-page="narrator"] { --foliage-drop: calc(min(100vw, 1600px) * 0.08935546875); }
body[data-page="author"] { --foliage-drop: calc(min(100vw, 1600px) * 0.08056640625); }
body[data-page="shop"] { --foliage-drop: calc(min(100vw, 1600px) * 0.05322265625); }
body[data-page="hello"] { --foliage-drop: calc(min(100vw, 1600px) * 0.12158203125); }
body[data-page="index"] .page::before,
body[data-page="neighbours"] .page::before,
body[data-page="garden"] .page::before,
body[data-page="book"] .page::before,
body[data-page="narrator"] .page::before,
body[data-page="author"] .page::before,
body[data-page="shop"] .page::before,
body[data-page="hello"] .page::before {
  background-position: center calc(100% + var(--foliage-drop));
}
/* END bounded foliage-bottom correction. */

/* Gate: crop the cream margin inside the existing image box.
   The spread, foreground mask, page height and lettering stay registered. */
body.gate-page .gate-meadow {
  object-fit: cover;
  object-position: center calc(100% + min(5.64vw, 90.24px));
}

/* Daisy only: bring the side foliage to the bottom of its existing stage.
   The 32:17 window crops the source's last 5.6% of blank lower paper;
   background-size preserves the artwork's original proportions.
   The full lower ground links the planted root strip to the bottom foliage.
   Append after the existing Daisy styles. No content-box geometry changes. */
body.canon.daisy-page .daisy-band::before {
  bottom: 0;
  aspect-ratio: 32 / 17;
  background-position: center top;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.88) 28%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.88) 28%, #000 38%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Keep the established root occlusion at bottom:8% and its original scale.
   Exclude the side flowers/stones from this upper registered strip and let
   its lower ground dissolve naturally rather than ending in a cut edge. */
body.canon.daisy-page .daisy-band::after {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 78%, #000 82.5%, #000 88%, rgba(0,0,0,.65) 92%, transparent 100%),
    linear-gradient(to right, transparent 33%, #000 44%, #000 57%, transparent 67%);
  mask-image:
    linear-gradient(to bottom, transparent 78%, #000 82.5%, #000 88%, rgba(0,0,0,.65) 92%, transparent 100%),
    linear-gradient(to right, transparent 33%, #000 44%, #000 57%, transparent 67%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* The Book had a second inline fade that hid its final 21% of foliage.
   Retain the top blend while letting the shifted planting reach the bottom. */
body.canon.book-page .page::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.88) 28%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.88) 28%, #000 38%);
}


/* ===== iPhone landscape, 27 Sept 2026 (Olly): the page now fills the screen edge to edge.
   Every page's viewport meta carries viewport-fit=cover, so Safari no longer confines the page to the
   safe area and paints a flat band either side in landscape. In portrait the nav and the content stay
   clear of the status bar and Dynamic Island through the top inset; in landscape and on every desktop
   the insets are zero, so nothing else changes. The parchment behind (body.canon::before, fixed) already
   covers the whole screen. This file is the 27 Sept perf stylesheet plus this block only; the perf file
   is cached immutable for a year, so it is left untouched and the pages point here instead. ===== */
body.canon { padding-top: env(safe-area-inset-top, 0px); }
nav { top: env(safe-area-inset-top, 0px); }
body.canon .page { min-height: max(calc(min(100vw, 1600px) * 1.34), calc(100svh - 96px - env(safe-area-inset-top, 0px))); }
body.daisy-page .page { min-height: calc(100svh - 96px - env(safe-area-inset-top, 0px)); }