@layer reset, base, components, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; }
  body, h1, h2, p, figure { margin: 0; }
  button, input { font: inherit; }
  button { color: inherit; }
  img, svg { display: block; max-width: 100%; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --ink: #4b302b;
    --ink-muted: #775f59;
    --paper: #fff9ef;
    --paper-deep: #f4eadb;
    --berry: #b83a55;
    --berry-dark: #7e2639;
    --white-rabbit: #fffdfa;
    --brown-rabbit: #a56b47;
    --line: rgba(75, 48, 43, 0.2);
    --shadow: 0 18px 52px rgba(91, 56, 42, 0.16), 0 4px 14px rgba(91, 56, 42, 0.09);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    font-synthesis: none;
  }

  body {
    min-width: 320px;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--paper);
  }

  ::selection { color: var(--paper); background: var(--berry); }
  :focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; }

  .skip-link {
    position: fixed;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 100;
    padding: 12px 16px;
    border-radius: 999px;
    color: white;
    background: var(--ink);
    transform: translateY(-160%);
  }
  .skip-link:focus { transform: translateY(0); }

  .paper-grain {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0.22;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  }

  .story {
    position: relative;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
  }
  .story::-webkit-scrollbar { display: none; }
}

@layer components {
  .topbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 60;
    height: calc(72px + env(safe-area-inset-top));
    padding: calc(12px + env(safe-area-inset-top)) 18px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }

  .wordmark,
  .chapter-status {
    min-height: 48px;
    border: 1px solid rgba(75, 48, 43, 0.14);
    border-radius: 16px;
    background: rgba(255, 249, 239, 0.78);
    box-shadow: 0 8px 30px rgba(75, 48, 43, 0.08);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    pointer-events: auto;
  }

  .wordmark {
    appearance: none;
    padding: 5px 11px 5px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(75, 48, 43, 0.14);
    cursor: pointer;
    text-align: start;
  }
  .wordmark.is-hidden { display: none; }
  .wordmark__mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: var(--berry);
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
  }

  .chapter-status {
    padding: 0 13px;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
  }
  .chapter-status__number {
    min-width: 1.7em;
    font-family: var(--serif);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
  }
  .chapter-status__divider { width: 1px; height: 18px; background: var(--line); }
  .chapter-status__label {
    min-width: 3.5em;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-align: center;
    text-transform: uppercase;
  }

  .chapter {
    --accent: var(--berry);
    --wash: #f3cbd2;
    position: relative;
    isolation: isolate;
    height: 100dvh;
    min-height: 560px;
    padding: calc(80px + env(safe-area-inset-top)) 20px calc(92px + env(safe-area-inset-bottom));
    display: grid;
    align-items: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--paper);
  }
  .chapter::after {
    content: "";
    position: absolute;
    z-index: -2;
    width: min(72vw, 560px);
    aspect-ratio: 1;
    inset-block-start: -24%;
    inset-inline-end: -31%;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 34px color-mix(in srgb, var(--wash) 12%, transparent), 0 0 0 35px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .chapter:nth-child(even) { background-color: color-mix(in srgb, var(--paper) 90%, var(--wash)); }

  .chapter--intro {
    background:
      radial-gradient(circle at 86% 18%, rgba(239, 183, 193, 0.45), transparent 28%),
      radial-gradient(circle at 9% 88%, rgba(205, 220, 190, 0.5), transparent 32%),
      var(--paper);
  }
  .chapter--intro::before {
    content: "24";
    position: absolute;
    z-index: -1;
    inset-inline-end: -0.08em;
    inset-block-start: 46%;
    color: rgba(184, 58, 85, 0.055);
    font-family: var(--serif);
    font-size: clamp(220px, 68vw, 650px);
    font-weight: 800;
    line-height: 0.72;
  }

  .intro-shell {
    width: min(100%, 1180px);
    margin: auto;
    display: grid;
    align-items: center;
    gap: clamp(8px, 3vh, 30px);
  }
  .intro-copy { position: relative; z-index: 2; }
  .eyebrow,
  .chapter-kicker,
  .gallery-heading,
  .intro-stamp {
    font-size: 10px;
    font-weight: 820;
    letter-spacing: 0.19em;
    text-transform: uppercase;
  }
  .eyebrow { margin-block-end: 11px; color: var(--berry); }

  .reveal-title {
    max-width: 11ch;
    font-family: var(--serif);
    font-size: clamp(46px, 14.4vw, 96px);
    font-weight: 650;
    letter-spacing: -0.055em;
    line-height: 0.88;
    text-wrap: balance;
  }
  .chapter--intro .reveal-title__word:last-of-type { color: var(--berry); font-style: italic; }
  .intro-text {
    max-width: 45ch;
    margin-block-start: 20px;
    color: var(--ink-muted);
    font-family: var(--serif);
    font-size: clamp(16px, 4.4vw, 21px);
    line-height: 1.42;
  }

  .start-button {
    min-height: 58px;
    margin-block-start: 21px;
    padding: 6px 6px 6px 17px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    background: color-mix(in srgb, var(--berry-soft) 50%, var(--paper));
    box-shadow: 0 11px 28px rgba(75, 48, 43, 0.14);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  .start-button:hover { box-shadow: 0 14px 34px rgba(75, 48, 43, 0.19); transform: translateY(-2px); }
  .start-button:active { transform: translateY(0) scale(0.985); }
  .start-button__sound {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--berry-dark);
    font-size: 12px;
    font-weight: 840;
    letter-spacing: 0.01em;
  }
  .start-button__note {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--berry);
    box-shadow: 0 5px 15px rgba(181, 67, 87, 0.3);
    font-family: var(--serif);
    font-size: 23px;
    animation: music-note-bop 1.55s ease-in-out infinite;
  }
  .start-button strong {
    min-height: 44px;
    padding-inline: 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 820;
    letter-spacing: 0.01em;
  }

  @keyframes music-note-bop {
    0%, 100% { transform: translateY(1px) rotate(-8deg); }
    45% { transform: translateY(-5px) rotate(8deg) scale(1.08); }
    65% { transform: translateY(-2px) rotate(2deg); }
  }

  .intro-stamp {
    position: absolute;
    inset-inline-end: 22px;
    inset-block-end: calc(88px + env(safe-area-inset-bottom));
    padding-block-end: 4px;
    border-block-end: 1px solid currentColor;
    color: var(--ink-muted);
    transform: rotate(-3deg);
  }

  .year-shell {
    width: min(100%, 1280px);
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(12px, 2.6vh, 24px);
    align-items: center;
  }
  .year-copy { position: relative; z-index: 2; }
  .chapter-kicker {
    margin-block-end: 6px;
    display: flex;
    justify-content: space-between;
    color: var(--accent);
  }
  .chapter-kicker span:last-child { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .year-number {
    display: block;
    margin-block: 4px 2px;
    color: var(--accent);
    font-family: var(--serif);
    font-size: 14px;
    font-style: italic;
  }
  .chapter--year .reveal-title {
    max-width: 14ch;
    font-size: clamp(36px, 10vw, 72px);
    line-height: 0.94;
  }
  .chapter-story {
    max-width: 48ch;
    margin-block-start: 11px;
    color: var(--ink-muted);
    font-family: var(--serif);
    font-size: clamp(15px, 4.1vw, 19px);
    line-height: 1.42;
  }
  .signoff {
    margin-block-start: 8px;
    color: var(--accent);
    font-family: var(--serif);
    font-size: 16px;
    font-style: italic;
    font-weight: 700;
  }
  .soundtrack-card {
    width: min(100%, 430px);
    min-height: 58px;
    margin-block-start: 15px;
    padding: 6px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    border-radius: 17px;
    background: color-mix(in srgb, var(--paper) 86%, var(--wash));
    box-shadow: 0 8px 24px rgba(75, 48, 43, 0.08);
  }
  .soundtrack-card__note {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: var(--accent);
    font-family: var(--serif);
    font-size: 22px;
  }
  .soundtrack-card__copy { min-width: 0; display: grid; line-height: 1.12; }
  .soundtrack-card__label {
    color: var(--accent);
    font-size: 8px;
    font-weight: 820;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .soundtrack-card__title,
  .soundtrack-card__artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .soundtrack-card__title { color: var(--ink); font-family: var(--serif); font-size: 14px; }
  .soundtrack-card__artist { color: var(--ink-muted); font-size: 10px; }
  .soundtrack-card__button {
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--ink);
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
  }
  .soundtrack-card__button.is-playing { background: var(--accent); }
  .soundtrack-card__link { font-size: 19px; }

  .chapter--signoff {
    background:
      radial-gradient(circle at 84% 24%, rgba(239, 183, 193, 0.52), transparent 28%),
      radial-gradient(circle at 12% 84%, rgba(205, 220, 190, 0.48), transparent 32%),
      var(--paper);
  }
  .postcard {
    position: relative;
    width: min(100%, 1120px);
    max-height: 100%;
    margin: auto;
    padding: clamp(22px, 5vw, 54px);
    display: grid;
    align-items: center;
    gap: clamp(12px, 3vh, 28px);
    overflow: hidden;
    border: 1px solid rgba(75, 48, 43, 0.16);
    border-radius: 5px;
    background: rgba(255, 253, 248, 0.86);
    box-shadow: var(--shadow);
    transform: rotate(-0.35deg);
  }
  .postcard::after {
    content: "WITH LOVE · 2026";
    position: absolute;
    inset-block-start: 17px;
    inset-inline-end: 20px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--accent);
    font-size: 8px;
    font-weight: 820;
    letter-spacing: 0.16em;
  }
  .postcard__copy { position: relative; z-index: 2; }
  .chapter--signoff .reveal-title { max-width: 12ch; font-size: clamp(44px, 11vw, 86px); }
  .postcard__body {
    max-width: 58ch;
    margin-block-start: 14px;
    color: var(--ink-muted);
    font-family: var(--serif);
    font-size: clamp(15px, 3.9vw, 18px);
    line-height: 1.46;
  }
  .postcard__signature {
    margin-block-start: 14px;
    color: var(--accent);
    font-family: var(--serif);
    font-size: clamp(18px, 4.8vw, 24px);
    font-style: italic;
    font-weight: 700;
  }
  .postcard__heart {
    position: absolute;
    z-index: 0;
    width: min(58vw, 390px);
    inset-inline-end: -4%;
    inset-block-start: 4%;
    color: var(--berry);
    opacity: 0.13;
    transform: rotate(7deg);
  }
  .postcard__heart path { fill: currentColor; stroke: var(--berry-dark); stroke-width: 2; }
  .rabbit-scene--postcard {
    z-index: 1;
    width: min(74vw, 400px);
    justify-self: center;
  }
  .year-copy > .rabbit-scene {
    display: none;
    position: absolute;
    inset-inline-start: -10px;
    inset-block-start: calc(100% + 18px);
    width: 215px;
  }
  .year-watermark {
    position: absolute;
    z-index: -1;
    inset-inline-end: -0.08em;
    inset-block-end: 7%;
    color: color-mix(in srgb, var(--accent) 7%, transparent);
    font-family: var(--serif);
    font-size: clamp(150px, 40vw, 430px);
    font-weight: 700;
    letter-spacing: -0.09em;
    line-height: 0.7;
    pointer-events: none;
    transform: rotate(-90deg) translateX(12%);
    transform-origin: center;
  }

  .gallery-region { min-width: 0; align-self: stretch; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .gallery-heading {
    min-height: 25px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    color: var(--ink-muted);
  }
  .gallery-heading__hint { color: var(--accent); text-align: end; }
  .photo-gallery {
    min-width: 0;
    min-height: 0;
    margin-inline: -20px;
    padding: 6px 20px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-color: color-mix(in srgb, var(--accent) 48%, transparent) transparent;
    scrollbar-width: thin;
  }
  .photo-gallery:focus-visible { outline-offset: -4px; }
  .photo-gallery::after { content: ""; flex: 0 0 10vw; height: 1px; }
  .photo-gallery--empty::after { display: none; }

  .photo-frame {
    --tilt: -1.7deg;
    position: relative;
    flex: 0 0 min(77vw, 345px);
    align-self: center;
    padding: 10px 10px 30px;
    border: 1px solid rgba(75, 48, 43, 0.14);
    border-radius: 3px;
    background: #fffdf8;
    box-shadow: var(--shadow);
    opacity: 0;
    scroll-snap-align: center;
    transform: translateY(24px) rotate(var(--tilt)) scale(0.96);
  }
  .photo-frame:nth-child(3n + 2) { --tilt: 1.2deg; }
  .photo-frame:nth-child(3n) { --tilt: -0.4deg; }
  .photo-frame__mat {
    position: relative;
    width: 100%;
    height: clamp(238px, 39dvh, 420px);
    padding: 0;
    overflow: hidden;
    border: 0;
    color: inherit;
    background: color-mix(in srgb, var(--wash) 54%, var(--paper));
    cursor: zoom-in;
  }
  .photo-frame__mat::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(75, 48, 43, 0.08);
    pointer-events: none;
  }
  .photo-frame__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    background-size: cover;
    transition: opacity 480ms ease;
  }
  .photo-frame__image.is-loaded { opacity: 1; }
  .photo-frame__number {
    position: absolute;
    inset-inline-end: 12px;
    inset-block-end: 7px;
    color: var(--accent);
    font-family: var(--serif);
    font-size: 15px;
    font-style: italic;
  }

  .empty-frame {
    position: relative;
    flex: 1 0 min(82vw, 480px);
    min-height: min(38dvh, 340px);
    padding: 42px 24px;
    display: grid;
    place-content: center;
    gap: 8px;
    border: 1px dashed color-mix(in srgb, var(--accent) 58%, transparent);
    border-radius: 4px;
    color: var(--ink-muted);
    background: rgba(255, 253, 248, 0.62);
    text-align: center;
    transform: rotate(-0.7deg);
  }
  .empty-frame::before,
  .empty-frame::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: var(--accent);
    opacity: 0.68;
  }
  .empty-frame::before { inset: 14px auto auto 14px; border-block-start: 2px solid; border-inline-start: 2px solid; }
  .empty-frame::after { inset: auto 14px 14px auto; border-block-end: 2px solid; border-inline-end: 2px solid; }
  .empty-frame strong { color: var(--ink); font-family: var(--serif); font-size: 26px; }
  .empty-frame span:last-child { font-size: 12px; line-height: 1.55; }
  .empty-frame code { padding: 2px 4px; border-radius: 4px; color: var(--accent); background: color-mix(in srgb, var(--wash) 45%, transparent); }
  .empty-frame__tape {
    position: absolute;
    width: 78px;
    height: 23px;
    inset-block-start: -8px;
    inset-inline-start: 50%;
    background: rgba(223, 205, 169, 0.72);
    transform: translateX(-50%) rotate(2deg);
  }
  .empty-frame__paws { color: var(--accent); font-family: var(--serif); font-size: 52px; letter-spacing: 9px; line-height: 0.5; transform: rotate(90deg); }

  .rabbit-scene { position: relative; color: var(--ink); }
  .rabbit-scene--hero {
    width: min(80vw, 430px);
    justify-self: center;
    align-self: end;
  }
  .rabbit-pair { width: 100%; overflow: visible; }
  .rabbit-pair .bunny { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
  .rabbit-pair .bunny--lop .body,
  .rabbit-pair .bunny--lop .head,
  .rabbit-pair .bunny--lop .tail,
  .rabbit-pair .bunny--lop .ear { fill: var(--white-rabbit); }
  .rabbit-pair .bunny--upright .body,
  .rabbit-pair .bunny--upright .head,
  .rabbit-pair .bunny--upright .tail,
  .rabbit-pair .bunny--upright .ear { fill: var(--brown-rabbit); }
  .rabbit-pair .ear-inner { fill: #e9a7a5; stroke: none; opacity: 0.72; }
  .rabbit-pair .tail { stroke-width: 2.4; }

  .rabbit-pair .eye { fill: var(--ink); stroke: none; transform-box: fill-box; transform-origin: center; }
  .rabbit-pair .shine { fill: white; stroke: none; }
  .rabbit-pair .nose { fill: var(--berry); stroke: var(--ink); stroke-width: 2; }
  .rabbit-pair .mouth,
  .rabbit-pair .paw,
  .rabbit-pair .foot { fill: none; }
  .rabbit-pair .ground { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0.25; }
  .rabbit-pair .heart { fill: var(--berry); stroke: var(--berry-dark); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
  .rabbit-pair .spark { fill: none; stroke: var(--berry); stroke-width: 3; stroke-linecap: round; opacity: 0.65; }

  .photo-viewer {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: #fff;
    background: #171311;
  }
  .photo-viewer::backdrop { background: rgba(16, 12, 11, 0.94); }
  .photo-viewer__header {
    position: absolute;
    z-index: 3;
    inset: 0 0 auto;
    min-height: 72px;
    padding: calc(13px + env(safe-area-inset-top)) 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(to bottom, rgba(23, 19, 17, 0.94), transparent);
    pointer-events: none;
  }
  .photo-viewer__header div { display: grid; gap: 1px; }
  .photo-viewer__header strong { font-family: var(--serif); font-size: 18px; }
  .photo-viewer__header span { color: rgba(255,255,255,0.68); font-size: 10px; font-weight: 760; letter-spacing: 0.12em; }
  .photo-viewer__header button,
  .photo-viewer__arrow {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    pointer-events: auto;
  }
  .photo-viewer__header button { font-size: 27px; line-height: 1; }
  .photo-viewer__track {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .photo-viewer__track::-webkit-scrollbar { display: none; }
  .photo-viewer__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: calc(78px + env(safe-area-inset-top)) clamp(18px, 7vw, 100px) calc(68px + env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .photo-viewer__image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.48);
  }
  .photo-viewer__arrow {
    position: absolute;
    z-index: 3;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 20px;
  }
  .photo-viewer__arrow--previous { inset-inline-start: 12px; }
  .photo-viewer__arrow--next { inset-inline-end: 12px; }
  .photo-viewer__arrow:disabled { opacity: 0.2; cursor: default; }

  .embed-player {
    position: fixed;
    z-index: 80;
    width: min(360px, calc(100vw - 24px));
    inset-block-start: calc(76px + env(safe-area-inset-top));
    inset-inline-end: 12px;
    padding: 8px;
    border: 1px solid rgba(75, 48, 43, 0.18);
    border-radius: 18px;
    background: rgba(255, 249, 239, 0.96);
    box-shadow: 0 18px 54px rgba(75, 48, 43, 0.24);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }
  .embed-player__header {
    min-height: 48px;
    padding: 2px 2px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .embed-player__header div { min-width: 0; display: grid; }
  .embed-player__header span {
    color: var(--berry);
    font-size: 8px;
    font-weight: 820;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .embed-player__header strong { overflow: hidden; color: var(--ink); font-family: var(--serif); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .embed-player__header button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: var(--ink);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
  }
  .embed-player__frame { overflow: hidden; border-radius: 12px; background: #17110f; aspect-ratio: 16 / 9; }
  .embed-player__frame iframe { width: 100%; height: 100%; border: 0; }
  .embed-player > a {
    min-height: 34px;
    padding: 8px 7px 2px;
    display: inline-flex;
    align-items: center;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 760;
    text-underline-offset: 3px;
  }

  .pager {
    position: fixed;
    z-index: 70;
    inset-inline: 12px;
    inset-block-end: calc(12px + env(safe-area-inset-bottom));
    min-height: 62px;
    padding: 7px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(75, 48, 43, 0.14);
    border-radius: 21px;
    background: rgba(255, 249, 239, 0.84);
    box-shadow: 0 12px 44px rgba(75, 48, 43, 0.16);
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
  }
  .pager__button {
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: var(--ink);
    cursor: pointer;
    font-size: 19px;
  }
  .pager__button:disabled { color: var(--ink-muted); background: transparent; cursor: not-allowed; opacity: 0.45; }
  .pager__button-label { display: none; font-size: 11px; font-weight: 780; letter-spacing: 0.06em; text-transform: uppercase; }
  .pager__middle { min-width: 0; padding-inline: 4px; display: grid; gap: 7px; }
  .pager__dots { display: flex; align-items: center; justify-content: center; gap: 5px; }
  .pager__dot {
    width: 18px;
    height: 22px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .pager__dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(75, 48, 43, 0.3); transition: width 180ms ease, border-radius 180ms ease, background 180ms ease; }
  .pager__dot.is-active::before { width: 15px; border-radius: 99px; background: var(--berry); }
  .pager__track { height: 2px; overflow: hidden; border-radius: 99px; background: rgba(75, 48, 43, 0.16); }
  .pager__track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--berry); transition: width 300ms ease; }

  .loading-card {
    position: fixed;
    z-index: 90;
    inset: 50% auto auto 50%;
    width: min(82vw, 320px);
    padding: 24px;
    display: grid;
    justify-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--paper);
    box-shadow: var(--shadow);
    color: var(--ink-muted);
    font-size: 13px;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .loading-card__rabbit { font-size: 42px; }
  .loading-card--error strong { color: var(--berry); font-family: var(--serif); font-size: 28px; }
  .is-loading .topbar,
  .is-loading .pager { opacity: 0; pointer-events: none; }
}

@layer motion {
  .chapter.is-active .reveal-title__word,
  .chapter .reveal-title__word { display: inline-block; }
  .chapter .reveal-title__word { opacity: 0; transform: translateY(0.45em) rotate(2deg); }
  .chapter.is-active .reveal-title__word,
  .chapter:target .reveal-title__word,
  .chapter:first-child .reveal-title__word { animation: word-in 650ms cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(90ms + var(--word-index) * 70ms); }
  .photo-frame.is-revealed { animation: frame-in 620ms cubic-bezier(.2,.8,.2,1) forwards; }
  .rabbit-pair .bunny--lop { animation: bunny-bob 3.2s ease-in-out infinite; transform-origin: 90px 168px; }
  .rabbit-pair .bunny--upright { animation: bunny-bob 3.2s 350ms ease-in-out infinite; transform-origin: 250px 168px; }
  .rabbit-pair .ear--lop-front { animation: lop-flop 4.8s ease-in-out infinite; transform-origin: 123px 63px; }
  .rabbit-pair .ear--up-front { animation: ear-twitch 5.4s 1.4s ease-in-out infinite; transform-origin: 220px 67px; }
  .rabbit-pair .eye { animation: blink 5.8s infinite; }
  .rabbit-pair .heart { animation: heartbeat 1.8s ease-in-out infinite; }
  .rabbit-pair .spark { animation: sparkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .rabbit-pair .spark--two { animation-delay: 800ms; }
  .loading-card__rabbit { animation: loading-hop 900ms ease-in-out infinite; }

  @keyframes word-in { to { opacity: 1; transform: none; } }
  @keyframes frame-in { to { opacity: 1; transform: translateY(0) rotate(var(--tilt)) scale(1); } }
  @keyframes bunny-bob { 0%, 100% { transform: translateY(0) rotate(0); } 48% { transform: translateY(-3px) rotate(-0.4deg); } 54% { transform: translateY(-3px) rotate(0.5deg); } }
  @keyframes lop-flop { 0%, 82%, 100% { transform: rotate(0); } 88% { transform: rotate(7deg); } 93% { transform: rotate(-3deg); } }
  @keyframes ear-twitch { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-8deg); } 92% { transform: rotate(3deg); } }
  @keyframes blink { 0%, 45%, 48%, 100% { transform: scaleY(1); } 46.5% { transform: scaleY(0.08); } }
  @keyframes heartbeat { 0%, 100% { transform: scale(1) rotate(-4deg); } 45% { transform: scale(1.12) rotate(2deg); } }
  @keyframes sparkle { 0%, 100% { opacity: 0.25; transform: scale(0.75) rotate(0); } 50% { opacity: 0.85; transform: scale(1.08) rotate(8deg); } }
  @keyframes loading-hop { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(5deg); } }
}

@layer responsive {
  @media (min-width: 560px) {

    .chapter { padding-inline: 32px; }
    .photo-gallery { margin-inline: -32px; padding-inline: 32px; scroll-padding-inline: 32px; }
    .pager { inset-inline: 50%; width: min(620px, calc(100vw - 30px)); transform: translateX(-50%); grid-template-columns: 110px 1fr 110px; }
    .pager__button-label { display: inline; }
    .pager__button { padding-inline: 14px; }
    .pager__dot { width: 24px; height: 32px; }
  }

  @media (min-width: 900px) and (min-height: 650px) {
    .topbar { padding-inline: 34px; }
    .chapter { padding: 96px clamp(44px, 6vw, 94px) 92px; }
    .intro-shell { grid-template-columns: minmax(0, 0.98fr) minmax(380px, 0.9fr); gap: clamp(42px, 8vw, 120px); }
    .reveal-title { font-size: clamp(68px, 7.2vw, 108px); }
    .rabbit-scene--hero { width: min(42vw, 520px); justify-self: end; align-self: center; }
    .intro-stamp { inset-inline-end: 5vw; }

    .year-shell { grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.45fr); grid-template-rows: 1fr; gap: clamp(40px, 6vw, 100px); }
    .year-copy { align-self: center; }
    .chapter-kicker { display: block; }
    .chapter-kicker span { display: block; }
    .chapter-kicker span:last-child { margin-block-start: 5px; }
    .year-number { margin-block: 28px 8px; font-size: 16px; }
    .chapter--year .reveal-title { font-size: clamp(48px, 5.3vw, 82px); }
    .chapter-story { margin-block-start: 20px; font-size: clamp(17px, 1.45vw, 21px); }
    .year-copy > .rabbit-scene { display: block; }
    .gallery-region { max-height: 68dvh; }
    .gallery-heading { padding-inline: 5px; }
    .photo-gallery { margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; gap: 24px; }
    .photo-frame { flex-basis: min(31vw, 390px); padding: 13px 13px 34px; }
    .photo-frame__mat { height: min(56dvh, 550px); }
    .empty-frame { min-height: min(56dvh, 530px); }
    .year-watermark { inset-inline-end: -1%; inset-block-end: 13%; transform: none; }

    .postcard { grid-template-columns: minmax(0, 1.18fr) minmax(330px, 0.82fr); }
    .postcard__heart { width: min(32vw, 390px); inset-inline-end: 1%; inset-block-start: 5%; }
    .rabbit-scene--postcard { width: min(31vw, 410px); justify-self: end; align-self: end; }
  }

  @media (max-height: 690px) and (max-width: 899px) {
    .chapter { padding-block-start: calc(74px + env(safe-area-inset-top)); }
    .intro-shell { grid-template-columns: 1.1fr 0.8fr; gap: 10px; }
    .rabbit-scene--hero { width: min(46vw, 300px); }
    .intro-text { font-size: 15px; }
    .start-button { margin-block-start: 12px; }
    .year-shell { grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr); grid-template-rows: 1fr; gap: 22px; }
    .photo-frame__mat { height: min(48dvh, 330px); }
    .soundtrack-card { min-height: 52px; margin-block-start: 8px; }
    .soundtrack-card__note { width: 38px; height: 38px; }
    .soundtrack-card__button { width: 42px; height: 42px; }
    .postcard { padding: 20px; gap: 8px; }
    .postcard__body { margin-block-start: 8px; font-size: 14px; line-height: 1.35; }
    .postcard__signature { margin-block-start: 8px; }
    .rabbit-scene--postcard { width: min(54vw, 230px); }
  }

  @media (max-height: 700px) and (min-width: 900px) {
    .topbar { height: 68px; padding-block-start: 10px; }
    .chapter { padding-block-start: 78px; padding-block-end: 84px; }
    .chapter::after { width: min(46vw, 420px); inset-block-start: -42%; inset-inline-end: -18%; }

    .intro-shell { height: 100%; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.72fr); gap: clamp(32px, 6vw, 84px); }
    .chapter--intro .reveal-title { font-size: clamp(58px, 6.2vw, 80px); }
    .intro-text { margin-block-start: 15px; font-size: 17px; }
    .rabbit-scene--hero { width: min(34vw, 370px); align-self: center; }
    .intro-stamp { display: none; }
    .chapter--intro::before { inset-block-start: 52%; font-size: clamp(210px, 42vw, 390px); }

    .year-shell { height: 100%; grid-template-columns: minmax(390px, 0.82fr) minmax(0, 1.35fr); grid-template-rows: 1fr; gap: clamp(32px, 5vw, 72px); }
    .year-number { margin-block: 10px 4px; }
    .chapter--year .reveal-title { font-size: clamp(43px, 4.4vw, 62px); }
    .chapter-story { margin-block-start: 13px; font-size: 17px; }
    .year-copy > .rabbit-scene { display: block; position: relative; inset: auto; width: 180px; margin-block-start: 6px; }
    .gallery-region { height: 100%; max-height: none; overflow: hidden; }
    .photo-gallery { height: 100%; max-height: 100%; overflow-y: hidden; }
    .photo-frame__mat { height: calc(100dvh - 248px); }
    .empty-frame { min-height: 0; height: calc(100% - 36px); padding-block: 20px; }
    .year-watermark { inset-inline-end: 0; inset-block-end: 11%; font-size: clamp(150px, 23vw, 250px); }
    .pager { min-height: 58px; inset-block-end: calc(10px + env(safe-area-inset-bottom)); }

    .soundtrack-card { min-height: 50px; margin-block-start: 8px; }
    .soundtrack-card__note { width: 38px; height: 38px; }
    .soundtrack-card__button { width: 42px; height: 42px; }
    .postcard { height: 100%; padding: 22px 38px; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 28px; }
    .chapter--signoff .reveal-title { font-size: clamp(48px, 5vw, 66px); }
    .postcard__body { margin-block-start: 8px; font-size: 14px; line-height: 1.34; }
    .postcard__signature { margin-block-start: 8px; font-size: 19px; }
    .postcard__heart { width: min(27vw, 320px); inset-inline-end: 2%; }
    .rabbit-scene--postcard { width: min(26vw, 330px); justify-self: end; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .photo-frame { opacity: 1; transform: rotate(var(--tilt)); }
    .chapter .reveal-title__word { opacity: 1; transform: none; }
  }
}