/* Home page */
body.home-page, body.home-page * { box-sizing: border-box; }

      body.home-page {
        --ink: #29221b;
        --paper: #f7f1e5;
        --blue: #7d9fbc;
        --coral: #d97060;
        --yellow: #e8bd54;
        --home-body-font: Georgia, "Times New Roman", serif;
        --home-display-font: Georgia, "Times New Roman", serif;
        --home-ui-font: Arial, Helvetica, sans-serif;
        --home-hand-font: "Segoe Print", cursive;
        --home-body-size: 16px;
        --home-title-scale: 1;
        --home-intro-size: 1.35rem;
        --home-nav-size: 0.85rem;
      }

      body.home-page {
        margin: 0;
        min-width: 320px;
        min-height: 100vh;
        background: var(--paper);
        color: var(--ink);
        font-family: var(--home-body-font);
        font-size: var(--home-body-size);
      }

      body.home-page header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: min(1120px, calc(100% - 40px));
        margin: 0 auto;
        padding: 24px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
      }

      body.home-page .wordmark {
        font-family: var(--home-ui-font);
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-decoration: none;
        text-transform: uppercase;
      }

      body.home-page nav a {
        color: inherit;
        font-family: var(--home-ui-font);
        font-size: var(--home-nav-size);
        font-weight: 700;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
      }

      body.home-page main {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
        gap: clamp(3rem, 8vw, 8rem);
        align-items: center;
        width: min(1120px, calc(100% - 40px));
        min-height: calc(100vh - 90px);
        margin: 0 auto;
        padding: clamp(4rem, 10vw, 8rem) 0;
      }

      body.home-page .eyebrow {
        margin: 0 0 1.25rem;
        color: var(--coral);
        font-family: var(--home-ui-font);
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      body.home-page h1 {
        max-width: 680px;
        margin: 0;
        font-family: var(--home-display-font);
        font-size: clamp(calc(4rem * var(--home-title-scale)), calc(9vw * var(--home-title-scale)), calc(8rem * var(--home-title-scale)));
        font-weight: 400;
        letter-spacing: -0.065em;
        line-height: 0.84;
      }

      body.home-page .intro {
        max-width: 490px;
        margin: 2rem 0 0;
        font-size: clamp(1.1rem, 2vw, var(--home-intro-size));
        line-height: 1.55;
      }

      body.home-page .about-link {
        display: inline-block;
        margin-top: 2rem;
        padding: 0.8rem 1.2rem;
        background: var(--ink);
        color: var(--paper);
        font-family: var(--home-ui-font);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-decoration: none;
        text-transform: uppercase;
      }

      body.home-page figure {
        position: relative;
        margin: 0;
        padding: 14px 14px 54px;
        background: #fff;
        box-shadow: 8px 12px 28px color-mix(in srgb, var(--ink) 16%, transparent);
        transform: rotate(2deg);
      }

      body.home-page figure::before {
        position: absolute;
        top: -16px;
        left: 50%;
        width: 120px;
        height: 32px;
        background: color-mix(in srgb, var(--blue) 58%, transparent);
        content: "";
        transform: translateX(-50%) rotate(-2deg);
      }

      body.home-page figure img {
        display: block;
        width: 100%;
        height: auto;
      }

      body.home-page figcaption {
        position: absolute;
        right: 12px;
        bottom: 14px;
        left: 12px;
        font-family: var(--home-hand-font);
        font-size: 0.8rem;
        text-align: center;
      }

      @media (max-width: 760px) {
        body.home-page main { grid-template-columns: 1fr; }
        body.home-page figure { width: min(88%, 480px); margin: 0 auto; }
      }

/* About page */
body.about-page, body.about-page *, body.about-page *::before, body.about-page *::after {
        box-sizing: border-box;
      }

      body.about-page {
        --ink: #2c1f0e;
        --ink-soft: #4a3728;
        --ink-faint: #7a6254;
        --desk: #e8e0d0;
        --paper: #f5f0e8;
        --paper-cream: #faf7f0;
        --blush: #e8b4a0;
        --sage: #8aad8c;
        --blue: #7d9fbc;
        --amber: #c8933a;
        --lavender: #b09dc4;
        --coral: #d97060;
        --shadow: color-mix(in srgb, var(--ink) 16%, transparent);
        --about-body-font: "Crimson Pro", Georgia, serif;
        --about-display-font: "Caveat", "Segoe Print", cursive;
        --about-hand-font: "Patrick Hand", "Segoe Print", cursive;
        --about-body-size: 18px;
        --about-title-scale: 1;
        --about-heading-scale: 1;
        --about-nav-size: 1.25rem;
        --about-story-size: 1.1rem;
      }

      html:has(body.about-page) {
        scroll-behavior: smooth;
      }

      body.about-page {
        margin: 0;
        min-width: 320px;
        overflow-x: hidden;
        background: var(--desk);
        color: var(--ink);
        font-family: var(--about-body-font);
        font-size: var(--about-body-size);
      }

      body.about-page img {
        display: block;
        width: 100%;
        height: auto;
      }

      body.about-page a {
        color: inherit;
      }

      body.about-page .paper-texture {
        background-color: var(--paper-cream);
        background-image:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
      }

      body.about-page .hero {
        position: relative;
        overflow: hidden;
        padding: clamp(2rem, 4vw, 3.5rem) 1.5rem clamp(3.5rem, 6vw, 4.5rem);
      }

      body.about-page .hero::before {
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, color-mix(in srgb, var(--blue) 13%, transparent) 27px, color-mix(in srgb, var(--blue) 13%, transparent) 28px);
        content: "";
      }

      body.about-page .hero::after {
        position: absolute;
        right: 0;
        bottom: -2px;
        left: 0;
        height: 38px;
        background: var(--desk);
        clip-path: polygon(0 100%, 0 55%, 2% 25%, 4% 65%, 6% 20%, 8% 62%, 10% 30%, 12% 70%, 14% 35%, 16% 66%, 18% 18%, 20% 55%, 22% 28%, 24% 68%, 26% 34%, 28% 72%, 30% 25%, 32% 62%, 34% 18%, 36% 58%, 38% 30%, 40% 66%, 42% 22%, 44% 58%, 46% 35%, 48% 72%, 50% 22%, 52% 55%, 54% 28%, 56% 67%, 58% 35%, 60% 62%, 62% 20%, 64% 54%, 66% 32%, 68% 70%, 70% 25%, 72% 62%, 74% 18%, 76% 57%, 78% 30%, 80% 68%, 82% 24%, 84% 62%, 86% 34%, 88% 70%, 90% 20%, 92% 58%, 94% 28%, 96% 66%, 98% 25%, 100% 55%, 100% 100%);
        content: "";
      }

      body.about-page .hero-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, max-content) 220px;
        gap: 1.5rem;
        align-items: center;
        justify-content: center;
        max-width: 960px;
        margin: 0 auto;
      }

      body.about-page h1,body.about-page h2,body.about-page h3,body.about-page p {
        margin-top: 0;
      }

      body.about-page .site-name {
        position: relative;
        display: inline-block;
        max-width: none;
        margin-bottom: 1.25rem;
        font-family: var(--about-display-font);
        font-size: clamp(calc(1.35rem * var(--about-title-scale)), calc(5vw * var(--about-title-scale)), calc(4.5rem * var(--about-title-scale)));
        font-weight: 700;
        letter-spacing: -0.04em;
        line-height: 0.82;
        white-space: nowrap;
      }

      body.about-page .site-name::after {
        position: absolute;
        right: 8%;
        bottom: -10px;
        left: 0;
        height: 5px;
        background: var(--coral);
        border-radius: 60% 30% 50% 30%;
        content: "";
        transform: rotate(-1deg);
      }

      body.about-page .hero-subtitle {
        max-width: 500px;
        margin: 0;
        color: var(--ink-soft);
        font-family: var(--about-hand-font);
        font-size: clamp(1.15rem, 2vw, 1.35rem);
        line-height: 1.45;
      }

      body.about-page .hero-notes {
        position: relative;
        min-height: 240px;
      }

      body.about-page .washi {
        position: absolute;
        padding: 0.3rem 0.9rem;
        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08);
        font-family: var(--about-hand-font);
        font-size: 0.9rem;
        white-space: nowrap;
      }

      body.about-page .washi:nth-child(1) {
        top: 12px;
        left: 16px;
        background: color-mix(in srgb, var(--sage) 50%, transparent);
        transform: rotate(-7deg);
      }

      body.about-page .washi:nth-child(2) {
        top: 72px;
        left: 0;
        background: color-mix(in srgb, var(--lavender) 48%, transparent);
        transform: rotate(4deg);
      }

      body.about-page .washi:nth-child(3) {
        top: 132px;
        left: 25px;
        background: color-mix(in srgb, var(--amber) 42%, transparent);
        transform: rotate(-3deg);
      }

      body.about-page .washi:nth-child(4) {
        top: 192px;
        left: 8px;
        background: color-mix(in srgb, var(--blue) 52%, transparent);
        transform: rotate(3deg);
      }

      body.about-page a.washi {
        color: var(--ink);
        text-decoration: none;
      }

      body.about-page a.washi:hover,body.about-page a.washi:focus-visible {
        box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.16);
        transform: rotate(3deg) translateY(-2px);
      }

      body.about-page nav {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        justify-content: center;
        background: var(--ink);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
      }

      body.about-page nav a {
        position: relative;
        padding: 0.65rem 1.7rem;
        color: var(--paper-cream);
        font-family: var(--about-display-font);
        font-size: var(--about-nav-size);
        font-weight: 600;
        text-decoration: none;
      }

      body.about-page nav a + a::before {
        position: absolute;
        left: -3px;
        color: var(--amber);
        content: "✦";
        font-size: 0.65rem;
        opacity: 0.75;
        top: 50%;
        transform: translateY(-50%);
      }

      body.about-page nav a:hover,body.about-page nav a:focus-visible {
        color: var(--blush);
      }

      body.about-page main {
        display: flex;
        flex-direction: column;
        gap: clamp(3rem, 6vw, 5rem);
        max-width: 1200px;
        margin: 0 auto;
        padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
      }

      body.about-page section[id] {
        scroll-margin-top: 80px;
      }

      body.about-page .section-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2.4rem;
      }

      body.about-page .section-heading {
        margin: 0;
        font-family: var(--about-display-font);
        font-size: clamp(calc(2.4rem * var(--about-heading-scale)), calc(5vw * var(--about-heading-scale)), calc(3.4rem * var(--about-heading-scale)));
        line-height: 1;
      }

      body.about-page .doodle-line {
        flex: 1;
        border: 0;
        border-top: 2px dashed currentColor;
        opacity: 0.35;
      }

      body.about-page .scrapbook-grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: clamp(2.25rem, 6vw, 5rem);
        align-items: start;
      }

      body.about-page .photo-card {
        position: relative;
        margin: 0;
        padding: 13px 13px 46px;
        background: var(--paper-cream);
        box-shadow: 4px 7px 18px var(--shadow);
        transform: rotate(-1.5deg);
      }

      body.about-page .photo-card::before {
        position: absolute;
        top: -16px;
        left: 50%;
        width: 112px;
        height: 31px;
        background: color-mix(in srgb, var(--blush) 68%, transparent);
        content: "";
        transform: translateX(-50%) rotate(2deg);
      }

      body.about-page .photo-card img {
        border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
      }

      body.about-page .photo-card figcaption {
        position: absolute;
        right: 12px;
        bottom: 10px;
        left: 12px;
        color: var(--ink-faint);
        font-family: var(--about-display-font);
        font-size: 1rem;
        text-align: center;
      }

      body.about-page .opening-photos {
        display: grid;
        grid-template-columns: 0.43fr 0.57fr;
        align-content: center;
        gap: 0.8rem;
        min-width: 0;
        padding: 0.75rem 0;
      }

      body.about-page .opening-photos .photo-card {
        width: auto;
        margin: 0;
      }

      body.about-page .studio-owner {
        z-index: 1;
        grid-column: 1;
        grid-row: 1;
        transform: rotate(-1.8deg);
      }

      body.about-page .studio-group {
        z-index: 2;
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        width: 118% !important;
        margin: 2.5rem 0 1.2rem -18% !important;
        transform: rotate(1deg);
      }

      body.about-page .closure-note {
        z-index: 3;
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: -1rem !important;
        padding: 9px 9px 42px;
        transform: rotate(-0.7deg);
      }

      body.about-page .studio-owner::before {
        background: color-mix(in srgb, var(--blush) 72%, transparent);
      }

      body.about-page .studio-group::before {
        background: color-mix(in srgb, var(--lavender) 68%, transparent);
      }

      body.about-page .closure-note::before {
        background: color-mix(in srgb, var(--blue) 65%, transparent);
      }

      body.about-page .story-paper {
        position: relative;
        padding: clamp(1.6rem, 4vw, 2.6rem);
        background: var(--paper-cream);
        box-shadow: 2px 4px 14px var(--shadow);
        transform: rotate(0.35deg);
      }

      body.about-page .story-paper::before {
        position: absolute;
        top: -9px;
        left: 50%;
        width: 18px;
        height: 18px;
        background: var(--amber);
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.45);
        content: "";
        transform: translateX(-50%);
      }

      body.about-page .story-paper p {
        margin-bottom: 0;
        color: var(--ink-soft);
        font-size: clamp(1rem, 1.5vw, var(--about-story-size));
        line-height: 1.68;
      }

      body.about-page .margin-note {
        display: block;
        margin-bottom: 1rem;
        color: var(--coral);
        font-family: var(--about-hand-font);
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      body.about-page .highlight {
        background: linear-gradient(transparent 58%, color-mix(in srgb, var(--amber) 30%, transparent) 58%);
      }

      body.about-page .middle-wrap {
        position: relative;
        padding: clamp(2rem, 5vw, 4rem);
        background: var(--paper);
        box-shadow: inset 0 0 40px color-mix(in srgb, var(--ink) 6%, transparent), 2px 4px 14px var(--shadow);
      }

      body.about-page .combined-story {
        display: flex;
        flex-direction: column;
        gap: clamp(3.5rem, 7vw, 5.5rem);
      }

      body.about-page .story-beat {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(2.5rem, 6vw, 5rem);
        align-items: center;
      }

      body.about-page .story-beat + .story-beat {
        padding-top: clamp(3rem, 6vw, 4.5rem);
        border-top: 2px dashed color-mix(in srgb, var(--blue) 28%, transparent);
      }

      body.about-page .middle-copy p {
        margin: 0;
        color: var(--ink-soft);
        font-size: clamp(1.05rem, 1.6vw, var(--about-story-size));
        line-height: 1.68;
      }

      body.about-page .middle-copy h3 {
        margin-bottom: 1.2rem;
        font-family: var(--about-display-font);
        font-size: clamp(calc(2rem * var(--about-heading-scale)), calc(4vw * var(--about-heading-scale)), calc(3rem * var(--about-heading-scale)));
        line-height: 1;
      }

      body.about-page .mask-card {
        transform: rotate(1.8deg);
      }

      body.about-page .mask-card::before {
        background: color-mix(in srgb, var(--sage) 68%, transparent);
        transform: translateX(-50%) rotate(-3deg);
      }

      body.about-page .painting-card {
        transform: rotate(-1.4deg);
      }

      body.about-page .painting-card::before {
        background: color-mix(in srgb, var(--lavender) 68%, transparent);
        transform: translateX(-50%) rotate(2deg);
      }

      body.about-page footer {
        position: relative;
        padding: 2.25rem 1.5rem;
        background: var(--paper);
        color: var(--ink-faint);
        font-family: var(--about-hand-font);
        text-align: center;
      }

      body.about-page footer::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        background: repeating-linear-gradient(90deg, var(--coral) 0 12px, var(--sage) 12px 24px, var(--lavender) 24px 36px, var(--blue) 36px 48px, var(--amber) 48px 60px);
        content: "";
      }

      body.about-page footer strong {
        color: var(--ink-soft);
        font-family: var(--about-display-font);
        font-size: 1.3rem;
      }

      body.about-page .footer-link {
        display: inline-block;
        margin-top: 0.65rem;
        color: var(--ink-soft);
        text-decoration-color: var(--coral);
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
      }

      body.about-page .footer-link:hover,body.about-page .footer-link:focus-visible {
        color: var(--coral);
      }

      body.privacy-page main {
        min-height: 46vh;
        justify-content: center;
      }

      body.privacy-page section {
        width: min(100%, 820px);
        margin: 0 auto;
      }

      body.privacy-page .privacy-policy-content > * + * {
        margin-top: 1rem;
      }

      body.privacy-page .privacy-policy-content h3 {
        margin-bottom: 0;
        padding-top: 1.25rem;
        color: var(--ink-soft);
        font-family: var(--about-display-font);
        font-size: clamp(1.7rem, 3vw, 2.2rem);
        line-height: 1.1;
      }

      body.privacy-page .privacy-policy-content ul {
        padding-left: 1.5rem;
        color: var(--ink-soft);
        font-size: clamp(1rem, 1.5vw, var(--about-story-size));
        line-height: 1.6;
      }

      body.privacy-page .privacy-policy-content li + li {
        margin-top: 0.25rem;
      }

      body.privacy-page .privacy-policy-content address {
        color: var(--ink-soft);
        font-size: clamp(1rem, 1.5vw, var(--about-story-size));
        font-style: normal;
        line-height: 1.6;
      }

      body.privacy-page .privacy-policy-content a {
        text-decoration-color: var(--coral);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
      }

      body.privacy-page .policy-updated {
        color: var(--ink-faint);
        font-family: var(--about-hand-font);
      }

      @media (max-width: 760px) {
        body.about-page .hero-inner,body.about-page .scrapbook-grid,body.about-page .story-beat {
          grid-template-columns: 1fr;
        }

        body.about-page .hero-notes {
          display: none;
        }

        body.about-page .scrapbook-grid {
          gap: 3.5rem;
        }

        body.about-page .photo-card {
          width: min(92%, 560px);
          margin: 0 auto;
        }

        body.about-page .opening-photos {
          width: min(100%, 580px);
          margin: 0 auto;
        }

        body.about-page .opening-photos .photo-card {
          width: auto;
        }

        body.about-page .studio-group {
          width: 116% !important;
          margin: 2rem 0 1rem -16% !important;
        }

        body.about-page .middle-copy {
          order: 2;
        }

        body.about-page .mask-card {
          order: 1;
        }
      }

      @media (max-width: 520px) {
        body.about-page nav a {
          padding: 0.6rem 0.8rem;
          font-size: 1.05rem;
        }

        body.about-page main {
          padding-right: 1rem;
          padding-left: 1rem;
        }

        body.about-page .middle-wrap {
          padding: 1.5rem;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html:has(body.about-page) {
          scroll-behavior: auto;
        }
      }

/* Long-form home story */
body.home-story-page .welcome-intro {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 2fr);
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

body.home-story-page .welcome-photo {
  width: 100%;
  max-width: 340px;
  justify-self: center;
  transform: rotate(-2deg);
}

body.home-story-page .welcome-photo::before {
  background: color-mix(in srgb, var(--coral) 55%, transparent);
}

body.home-story-page .opening-copy,
body.home-story-page .uncensored-copy,
body.home-story-page .closing-copy {
  max-width: 820px;
  margin: 0 auto;
}

body.home-story-page .story-paper p + p {
  margin-top: 1rem;
}

body.home-story-page blockquote {
  margin: 1.4rem 0;
  padding: 1rem 1.4rem;
  border-left: 4px solid var(--blush);
  background: color-mix(in srgb, var(--blush) 12%, transparent);
  color: var(--ink-soft);
  font-style: italic;
}

body.home-story-page blockquote p {
  margin: 0;
}

body.home-story-page blockquote p + p {
  margin-top: 0.45rem;
}

body.home-story-page sup a {
  color: var(--coral);
  font-family: var(--about-hand-font);
  text-decoration: none;
}

body.home-story-page .home-copy-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 0.8fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

body.home-story-page .rabbit-note {
  padding: 1.5rem;
  background: color-mix(in srgb, var(--amber) 36%, var(--paper-cream));
  box-shadow: 3px 5px 12px var(--shadow);
  transform: rotate(2.5deg);
}

body.home-story-page .rabbit-note span {
  color: var(--coral);
  font-family: var(--about-hand-font);
  font-size: 1rem;
  text-transform: uppercase;
}

body.home-story-page .rabbit-note p {
  margin: 0.7rem 0 0;
  font-family: var(--about-display-font);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.05;
}

body.home-story-page .work-story,
body.home-story-page .uncensored-copy {
  margin-top: clamp(4rem, 8vw, 6rem);
}

body.home-story-page .work-story {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
}

body.home-story-page .work-story .middle-copy {
  max-width: 720px;
  margin: 0;
}

body.home-story-page .work-story .middle-copy p + p {
  margin-top: 1rem;
}

body.home-story-page .hobby-scrapbook {
  position: relative;
  min-height: 580px;
}

body.home-story-page .hobby-photo {
  position: absolute;
}

body.home-story-page .hobby-photo img {
  display: block;
  width: 100%;
  height: auto;
}

body.home-story-page .hobby-photo-chocolates {
  z-index: 2;
  top: 1.25rem;
  right: 0;
  width: min(100%, 330px);
  transform: rotate(-4deg);
}

body.home-story-page .hobby-photo-chocolates::before {
  left: 28%;
  background: color-mix(in srgb, var(--amber) 66%, transparent);
  transform: translateX(-50%) rotate(-5deg);
}

body.home-story-page .hobby-photo-packaging {
  z-index: 1;
  top: 15.5rem;
  left: 0.75rem;
  width: min(80%, 260px);
  transform: rotate(4deg);
}

body.home-story-page .hobby-photo-packaging::before {
  left: 67%;
  background: color-mix(in srgb, var(--blush) 72%, transparent);
  transform: translateX(-50%) rotate(6deg);
}

body.home-story-page .big-feeling,
body.home-story-page .handwritten-pullquote {
  color: var(--coral) !important;
  font-family: var(--about-display-font);
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 700;
  line-height: 1.05 !important;
}

body.home-story-page .big-feeling {
  margin-top: 2rem !important;
  text-align: center;
  transform: rotate(-1deg);
}

body.home-story-page .handwritten-pullquote {
  margin: 1.5rem 0 !important;
}

body.home-story-page .section-intro {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.6vw, var(--about-story-size));
  line-height: 1.68;
}

body.home-story-page .section-intro + .section-intro {
  margin-top: 1rem;
}

body.home-story-page .painting-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-top: clamp(4rem, 8vw, 6rem);
}

body.home-story-page .painting-story + .painting-story {
  padding-top: clamp(4rem, 8vw, 6rem);
  border-top: 2px dashed color-mix(in srgb, var(--blue) 28%, transparent);
}

body.home-story-page .home-painting-card {
  transform: rotate(1.5deg);
}

body.home-story-page .home-painting-card::before {
  background: color-mix(in srgb, var(--blue) 60%, transparent);
}

body.home-story-page .aquarium-card {
  transform: rotate(-1.5deg);
}

body.home-story-page .aquarium-card::before {
  background: color-mix(in srgb, var(--lavender) 68%, transparent);
}

body.home-story-page .closing-copy a,
body.home-story-page .footnote a {
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

body.home-story-page .footnote {
  max-width: 760px;
  margin: 2rem auto 0;
  color: var(--ink-faint);
  font-family: var(--about-hand-font);
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  body.home-story-page .welcome-intro,
  body.home-story-page .home-copy-grid,
  body.home-story-page .work-story,
  body.home-story-page .painting-story {
    grid-template-columns: 1fr;
  }

  body.home-story-page .welcome-intro {
    gap: 2.5rem;
  }

  body.home-story-page .welcome-photo {
    width: min(78%, 340px);
  }

  body.home-story-page .rabbit-note {
    width: min(86%, 360px);
    margin: 0 auto;
  }

  body.home-story-page .hobby-scrapbook {
    width: min(100%, 470px);
    min-height: 580px;
    margin: 0 auto;
  }

  body.home-story-page .hobby-photo-chocolates {
    width: min(76%, 340px);
  }

  body.home-story-page .hobby-photo-packaging {
    left: 12%;
    width: min(64%, 270px);
  }

  body.home-story-page .painting-story-left .painting-copy {
    order: 1;
  }

  body.home-story-page .painting-story-left .home-painting-card {
    order: 2;
  }
}

@media (max-width: 520px) {
  body.home-story-page nav {
    flex-wrap: wrap;
  }

  body.home-story-page nav a {
    padding-right: 0.65rem;
    padding-left: 0.65rem;
    font-size: 0.95rem;
  }
}

/* The button */
body.button-page,body.button-page * {
  box-sizing: border-box;
}

body.button-page {
  --ink: #2c1f0e;
  --paper-cream: #faf7f0;
  --blue: #7d9fbc;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background-color: var(--paper-cream);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 27px, color-mix(in srgb, var(--blue) 13%, transparent) 27px, color-mix(in srgb, var(--blue) 13%, transparent) 28px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: "Crimson Pro", Georgia, serif;
}

body.button-page main {
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(3rem, 8vh, 5rem);
  min-height: 100vh;
  padding: 6rem 1.5rem;
}

body.button-page h1 {
  margin: 0;
  font-family: "Caveat", "Segoe Print", cursive;
  font-size: clamp(3.25rem, 10vw, 6.5rem);
  line-height: 0.95;
  text-align: center;
  transform: rotate(-1deg);
}

body.button-page .button-page-home {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 2;
  padding: 0.45rem 0.85rem;
  background: color-mix(in srgb, var(--blue) 45%, var(--paper-cream));
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08);
  color: var(--ink);
  font-family: "Patrick Hand", "Segoe Print", cursive;
  font-size: 1rem;
  text-decoration: none;
  transform: rotate(-2deg);
}

body.button-page .button-page-home:hover,body.button-page .button-page-home:focus-visible {
  transform: rotate(-2deg) translateY(-2px);
}

body.button-page .berry-bulb-button {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 118px;
  overflow: visible;
  border: none;
  border-radius: 55% 45% 52% 48% / 58% 54% 46% 42%;
  background: radial-gradient(circle at 38% 38%, #ff5fa2 0 20%, #ec407a 42%, #b51663 75%, #7b1748 100%);
  box-shadow:
    inset -10px -12px 0 rgba(92, 7, 48, 0.25),
    inset 8px 10px 0 rgba(255, 255, 255, 0.18),
    0 14px 0 #741145,
    0 22px 28px rgba(108, 24, 65, 0.28);
  color: #fffbea;
  cursor: pointer;
  font-family: "Patrick Hand", "Segoe Print", cursive;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  touch-action: manipulation;
  transform: scale(1);
  transform-origin: center bottom;
  transition:
    transform 180ms cubic-bezier(.2, .9, .25, 1.35),
    border-radius 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
  user-select: none;
}

body.button-page .berry-bulb-button::before {
  position: absolute;
  top: 22px;
  left: 50px;
  width: 32px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%, rgba(255, 250, 253, 0.95) 0%, rgba(255, 220, 235, 0.8) 45%, rgba(255, 190, 218, 0.45) 72%, transparent 100%);
  content: "";
  opacity: 0.95;
  pointer-events: none;
  transform: rotate(-15deg);
}

body.button-page .berry-bulb-button:hover {
  filter: saturate(1.12) brightness(1.04);
}

body.button-page .berry-bulb-button:focus-visible {
  outline: 4px solid color-mix(in srgb, var(--blue) 75%, white);
  outline-offset: 8px;
}

body.button-page .berry-bulb-button.is-squished {
  border-radius: 62% 38% 58% 42% / 40% 44% 56% 60%;
  box-shadow:
    inset -14px -8px 0 rgba(92, 7, 48, 0.3),
    inset 10px 7px 0 rgba(255, 255, 255, 0.14),
    0 4px 0 #741145,
    0 10px 18px rgba(108, 24, 65, 0.22);
  transform: scaleX(1.24) scaleY(0.68) translateY(18px);
}

body.button-page .juice-droplet {
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffe1ef 0 15%, #ff4f9a 35%, #c2185b 100%);
  animation: juice-pop 650ms ease-out forwards;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
}

body.button-page .juice-droplet:nth-child(3n) {
  width: 8px;
  height: 8px;
  background: #ff7ab8;
}

body.button-page .juice-droplet:nth-child(4n) {
  width: 16px;
  height: 16px;
  background: #ff5c96;
}

@keyframes juice-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3);
  }

  65% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.button-page .berry-bulb-button {
    transition-duration: 1ms;
  }

  body.button-page .juice-droplet {
    animation-duration: 1ms;
  }
}