:root {
        color-scheme: light;
        font-family: "Trebuchet MS", "Segoe UI", sans-serif;
        color: #263c39;
        background: #f5f0e4;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body { margin: 0; }
      a { color: inherit; }

      .page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: #f5f0e4;
      }

      main { display: flex; flex: 1; flex-direction: column; }

      .shell { width: min(100% - 3.5rem, 1240px); margin-inline: auto; }

      .site-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block: 1.4rem;
        position: relative;
        z-index: 2;
      }

      .wordmark {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        color: #264742;
        font: 800 1.75rem/1 Georgia, serif;
        letter-spacing: -.055em;
        text-decoration: none;
      }

      .wordmark-mark {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50% 46% 53% 44%;
        background: #d9a64f;
        color: #fffaf0;
        font: 1.4rem/1 Georgia, serif;
        transform: rotate(-12deg);
      }

      .header-note {
        color: #66736a;
        font-size: .8rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
      }

      .hero {
        display: grid;
        flex: 1;
        grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
        column-gap: clamp(1rem, 3vw, 3.5rem);
        align-items: center;
        padding-block: 2.5rem 3rem;
        position: relative;
      }

      .hero-text {
        grid-column: 1;
        min-width: 0;
      }

      .hero-copy {
        position: relative;
        z-index: 1;
      }

      .hero-details { min-width: 0; }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        margin: 0 0 1.35rem;
        color: #a2603e;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .17em;
        text-transform: uppercase;
      }

      .eyebrow::before {
        content: "";
        display: block;
        width: 1.3rem;
        height: 1.3rem;
        border: 2px solid #cc8a5c;
        border-radius: 50%;
        box-shadow: inset 0 0 0 3px #f5f0e4, inset 0 0 0 5px #cc8a5c;
      }

      h1 {
        max-width: 12ch;
        margin: 0;
        color: #284b44;
        font: 700 clamp(2.8rem, 5.2vw, 5.3rem)/1.03 Georgia, "Times New Roman", serif;
        letter-spacing: -.065em;
      }

      h1 em { color: #b96b45; font-style: normal; }

      .introduction {
        max-width: 35rem;
        margin: 1.6rem 0 0;
        color: #354640;
        font-size: clamp(1.06rem, 1.45vw, 1.3rem);
        font-weight: 700;
        line-height: 1.55;
      }

      .description {
        max-width: 34rem;
        margin: 1.35rem 0 0;
        color: #5b6b61;
        font-size: 1.04rem;
        line-height: 1.75;
      }

      .highlights {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        margin: 1.5rem 0 0;
        padding: 0;
        list-style: none;
      }

      .highlights li {
        padding: .65rem .9rem;
        border: 1px solid #d8d6c2;
        border-radius: 999px;
        background: #fff9ebbb;
        color: #45645b;
        font-size: .83rem;
        font-weight: 700;
      }

      .hero-art {
        min-width: 0;
        width: 100%;
      }

      .hero-art-mobile { display: none; }
      .hero-art-desktop { grid-column: 2; }

      .hero-art img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: min(72vh, 680px);
        margin-inline: auto;
      }

      .availability {
        position: relative;
        z-index: 1;
        border-top: 1px solid #d8d7c6;
        background: #ebe9d9;
      }

      .availability-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        padding-block: 2.25rem;
      }

      .availability h2 {
        margin: 0 0 .35rem;
        color: #284b44;
        font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 Georgia, serif;
        letter-spacing: -.04em;
      }

      .availability p { margin: 0; color: #647168; line-height: 1.5; }
      .store-list { display: flex; flex-wrap: wrap; gap: .75rem; }

      .store-badge {
        display: flex;
        align-items: center;
        gap: .72rem;
        min-width: 10.7rem;
        padding: .72rem 1rem;
        border-radius: .85rem;
        background: #283c39;
        color: #fffaf1;
        box-shadow: 0 4px 0 #c8c8b7;
      }

      .store-badge svg { width: 1.75rem; height: 1.75rem; flex: none; fill: currentColor; }
      .store-badge span { display: grid; gap: .08rem; }
      .store-badge small { font-size: .63rem; line-height: 1.1; letter-spacing: .04em; }
      .store-badge strong { font-size: 1.04rem; line-height: 1.15; }

      .site-footer {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding-block: 1.25rem 2rem;
        color: #69766d;
        font-size: .85rem;
      }

      .site-footer a { color: #365e54; text-underline-offset: .2em; }
      .site-footer a:hover { color: #a2603e; }

      .privacy-main {
        display: block;
        flex: 1;
        padding-block: clamp(2rem, 5vw, 4.5rem) 5rem;
      }
      .privacy-heading, .privacy-content { max-width: 48rem; margin-inline: auto; }
      .privacy-heading h1 { max-width: none; font-size: clamp(2.8rem, 6vw, 4.8rem); }
      .privacy-intro { margin: 1.5rem 0 .5rem; color: #354640; font-size: 1.18rem; line-height: 1.6; }
      .privacy-date { margin: 0; color: #66736a; font-size: .88rem; }
      .privacy-content { margin-top: 2.75rem; }
      .privacy-content section { padding-block: 1.5rem; border-top: 1px solid #d8d7c6; }
      .privacy-content h2 { margin: 0 0 .85rem; color: #284b44; font: 700 1.5rem/1.25 Georgia, serif; }
      .privacy-content p, .privacy-content li { color: #42554e; line-height: 1.75; }
      .privacy-content p { margin: 0 0 .85rem; }
      .privacy-content p:last-child { margin-bottom: 0; }
      .privacy-content ul { margin: 0; padding-left: 1.35rem; }
      .privacy-content li + li { margin-top: .7rem; }

      @media (max-width: 980px) {
        .hero {
          display: block;
          padding-block: 2.5rem 3rem;
        }
        .hero-text, .hero-copy, .hero-details { width: 100%; min-width: 0; }
        .hero-art-desktop { display: none; }
        .hero-art-mobile {
          display: block;
          width: 100%;
          max-width: 100%;
          margin-block: 1.25rem 0;
          padding-inline: clamp(.75rem, 3vw, 1.5rem);
        }
        .hero-art-mobile img {
          display: block;
          width: 100%;
          max-width: 100%;
          height: auto;
          max-height: none;
        }
        h1, .introduction, .description { max-width: none; }
        .description { margin-top: .75rem; }
        .highlights { margin-top: 1.5rem; }
      }

      @media (max-width: 600px) {
        .shell { width: calc(100% - 2rem); }
        .site-header { padding-block: 1.1rem; }
        .header-note { font-size: .67rem; letter-spacing: .1em; text-align: right; }
        .eyebrow { max-width: 100%; font-size: .69rem; letter-spacing: .1em; }
        .hero { padding-block: 1.7rem 2.5rem; }
        h1 { font-size: clamp(2.5rem, 10vw, 3.4rem); }
        .introduction { margin-top: 1.2rem; font-size: 1.06rem; }
        .description { font-size: 1rem; }
        .highlights { gap: .5rem; margin-top: 1.5rem; }
        .highlights li { font-size: .76rem; padding: .55rem .72rem; }
        .hero-art-mobile { margin-top: 1rem; }
        .availability-inner { align-items: flex-start; flex-direction: column; gap: 1.4rem; }
        .store-list { width: 100%; }
        .store-badge { flex: 1 1 10rem; }
      }

      @media (max-width: 390px) {
        .header-note { display: none; }
      }

      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
      }