@layer page {

      :root {
        --bg: #fffaf3;
        --accent: #b86b3a;
        --accent: #7E482A;
        /* warm bread color */
        --accent-2: #3a6b4b;
        /* herb green */
        --muted: #7a6b5d;
        --card: #fffdf8;
        --shadow: 0 6px 20px rgba(54, 40, 24, 0.08);
        --radius: 14px;
        --glass: rgba(255, 255, 255, 0.6);
      }

      /* Hero */
      .hero {
        display: grid;
        grid-template-columns: 1fr 420px;
        gap: 28px;
        align-items: center;
        margin-top: 18px
      }

      .hero-card {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.95));
        padding: 28px;
        border-radius: 18px;
        box-shadow: var(--shadow)
      }

      p.lead {
        margin: 0 0 18px;
        color: var(--muted)
      }

      .cta-row {
        display: flex;
        gap: 12px;
        align-items: center
      }

      .btn.primary {
        background: var(--accent);
        color: white;
        padding: 12px 16px;
        border-radius: 12px;
        border: 0;
        font-weight: 700;
        cursor: pointer
      }

      .btn.secondary {
        background: transparent;
        border: 2px solid var(--accent);
        color: var(--accent);
      }

      /* Dog avatar */
      .mia-card {
        background: linear-gradient(180deg, #fff8f0, #fff);
        padding: 18px;
        border-radius: 18px;
        text-align: center
      }

      .apron {
        display: block;
        margin-top: 10px;
        font-weight: 600;
        color: var(--muted)
      }

      /* Menu */
      .menu {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 18px
      }

      .menu .item {
        flex: 1 1 180px;
        background: var(--card);
        padding: 12px;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(58, 107, 75, 0.06)
      }

      .item h4 {
        margin: 6px 0 0
      }

      .item p {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 14px
      }

      /* Gallery */
      .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 18px
      }

      .pill {
        padding: 6px 10px;
        border-radius: 999px;
        background: var(--glass);
        display: inline-block;
        margin-right: 8px;
        font-size: 13px
      }

      /* Responsive */
      @media (max-width:900px) {
        .hero {
          grid-template-columns: 1fr;
        }

        .gallery {
          grid-template-columns: repeat(2, 1fr)
        }
      }

      @media (max-width:480px) {
        .gallery {
          grid-template-columns: 1fr
        }

        h1 {
          font-size: 28px
        }
      }

      /* little flourishes */
      .note {
        font-size: 13px;
        color: var(--muted);
      }

      .sm {
        font-size: 13px
      }

      /* accessibility focus */
      a:focus,
      button:focus,
      input:focus {
        outline: 3px solid rgba(184, 107, 58, 0.18);
        outline-offset: 2px
      }

    }