@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  img { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --paper: oklch(97% 0.014 79);
    --paper-deep: oklch(93% 0.023 77);
    --cream: oklch(89% 0.035 79);
    --blush: oklch(87% 0.045 33);
    --pistachio: oklch(75% 0.065 112);
    --butter: oklch(86% 0.078 88);
    --ink: oklch(25% 0.026 61);
    --ink-soft: oklch(39% 0.025 61);
    --muted: oklch(53% 0.024 64);
    --line: oklch(82% 0.025 72);
    --walnut: oklch(41% 0.054 58);
    --walnut-mid: oklch(37% 0.052 56);
    --walnut-dark: oklch(30% 0.04 58);
    --success: oklch(47% 0.085 143);
    --error: oklch(49% 0.14 29);
    --display: "Iowan Old Style", "Baskerville", "Noto Serif TC", "Songti TC", serif;
    --body: "Avenir Next", "Avenir", "PingFang TC", "Noto Sans TC", sans-serif;
    --step--1: 0.78rem;
    --step-0: 1rem;
    --step-1: clamp(1.15rem, 1.5vw, 1.35rem);
    --step-2: clamp(1.45rem, 2.5vw, 2rem);
    --step-3: clamp(2rem, 4vw, 3.45rem);
    --step-4: clamp(3.15rem, 7.5vw, 6.9rem);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --measure: 66ch;
    --page: min(92vw, 88rem);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-toggle: cubic-bezier(0.65, 0, 0.35, 1);
    --header-h: 4.8rem;
  }
}

@layer base {
  html { background: var(--paper); }
  body {
    min-width: 20rem;
    color: var(--ink);
    background:
      radial-gradient(circle at 12% 8%, oklch(97% 0.025 36 / 0.58), transparent 27rem),
      radial-gradient(circle at 88% 30%, oklch(96% 0.025 108 / 0.4), transparent 34rem),
      var(--paper);
    font-family: var(--body);
    font-size: var(--step-0);
    line-height: 1.65;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.06;
    text-wrap: balance;
  }

  h1 { font-size: var(--step-4); letter-spacing: -0.04em; }
  h2 { font-size: var(--step-3); letter-spacing: -0.025em; }
  h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
  p { max-width: var(--measure); }
  a { color: inherit; text-decoration: none; }
  a, button, input, select, textarea, summary { outline: none; }
  :focus-visible {
    outline: 2px solid var(--walnut);
    outline-offset: 4px;
  }
  ::selection { color: var(--paper); background: var(--walnut); }
}

@layer layout {
  .page-shell { width: var(--page); margin-inline: auto; }
  .section { padding-block: clamp(4.5rem, 9vw, 9rem); }
  .section--compact { padding-block: clamp(3rem, 6vw, 5rem); }
  .section--tint { background: var(--paper-deep); }
  .section--ink { color: var(--paper); background: var(--walnut-dark); }
  .section--dialogue { padding-block: clamp(4rem, 6vw, 6rem); }
  .section-head {
    display: grid;
    gap: var(--space-4);
    align-items: end;
    margin-bottom: clamp(2rem, 5vw, 4.5rem);
  }
  .section-head p { color: var(--muted); }
  .section--ink .section-head p { color: var(--cream); }
  .split {
    display: grid;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
  }
  .stack { display: grid; gap: var(--space-6); }
  .stack--tight { gap: var(--space-3); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .rule { height: 1px; border: 0; background: var(--line); }
}

@layer components {
  [data-site-header] { height: var(--header-h); }

  .skip-link {
    position: fixed;
    z-index: 100;
    top: var(--space-4);
    left: var(--space-4);
    padding: 0.75rem 1rem;
    color: var(--paper);
    background: var(--walnut-dark);
    transform: translateY(-180%);
  }
  .skip-link:focus { transform: translateY(0); }

  .site-header {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: var(--header-h);
    border-bottom: 1px solid color-mix(in oklch, var(--line) 72%, transparent);
    background: color-mix(in oklch, var(--paper) 91%, transparent);
    backdrop-filter: blur(16px);
  }
  .header-inner {
    width: var(--page);
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .brand { display: inline-grid; line-height: 1; }
  .brand__name {
    font-family: var(--display);
    font-size: 1.7rem;
    font-style: italic;
    letter-spacing: -0.045em;
  }
  .brand__small {
    margin-top: 0.2rem;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.34em;
  }
  .nav-toggle {
    min-width: 3rem;
    min-height: 3rem;
    border: 1px solid var(--line);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
  }
  .nav-toggle span { display: block; font-size: var(--step--1); letter-spacing: 0.08em; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    display: grid;
    max-height: calc(100dvh - var(--header-h));
    overflow: auto;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 350ms var(--ease-out), opacity 220ms var(--ease-toggle);
  }
  .site-nav[data-open="true"] { transform: translateY(0); opacity: 1; }
  .site-nav a {
    min-height: 3.8rem;
    padding: 1rem 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
  }
  .site-nav a::after { content: "↗"; color: var(--muted); }
  .site-nav a[aria-current="page"] { color: var(--walnut); background: var(--paper-deep); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    width: fit-content;
    color: var(--walnut);
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
  .section--ink .eyebrow { color: var(--butter); }

  .button {
    min-height: 3.25rem;
    padding: 0.78rem 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    border: 1px solid var(--walnut-dark);
    color: var(--paper);
    background: var(--walnut-dark);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 160ms var(--ease-out), color 160ms, background 160ms;
    cursor: pointer;
  }
  .button:hover { transform: translateY(-2px); background: var(--walnut); }
  .button:active { transform: translateY(0); }
  .button--ghost { color: var(--ink); background: transparent; }
  .button--ghost:hover { color: var(--paper); }
  .button--light { color: var(--walnut-dark); border-color: var(--paper); background: var(--paper); }
  .button--light:hover { color: var(--paper); border-color: var(--walnut); background: var(--walnut); }
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    width: fit-content;
    padding-block: 0.45rem;
    border-bottom: 1px solid currentColor;
    font-size: 0.86rem;
    font-weight: 650;
  }
  .text-link span { transition: transform 180ms var(--ease-out); }
  .text-link:hover span { transform: translateX(0.3rem); }

  .hero {
    position: relative;
    min-height: calc(100svh - var(--header-h));
    display: grid;
    grid-template-areas: "hero-layer";
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    background: var(--paper-deep);
  }
  .hero__copy {
    z-index: 2;
    grid-area: hero-layer;
    align-self: end;
    width: calc(100% - 2rem);
    margin: 0 1rem 1rem;
    padding: clamp(1.5rem, 6vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-6);
    background: color-mix(in oklch, var(--paper) 92%, transparent);
    backdrop-filter: blur(12px);
  }
  .hero__copy h1 { max-width: 10ch; }
  .hero__lead { max-width: 33rem; color: var(--ink-soft); font-size: var(--step-1); }
  .hero__aside {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: end;
    margin-top: var(--space-6);
  }
  .hero__note { max-width: 25ch; color: var(--muted); font-size: var(--step--1); }
  .hero__image {
    position: relative;
    z-index: 0;
    grid-area: hero-layer;
    min-height: calc(100svh - var(--header-h));
    overflow: hidden;
  }
  .hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
  .hero__image::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, transparent 38%, color-mix(in oklch, var(--paper) 22%, transparent) 68%, color-mix(in oklch, var(--paper) 68%, transparent) 100%);
    pointer-events: none;
  }
  .hero__image::after {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid color-mix(in oklch, var(--paper) 50%, transparent);
    pointer-events: none;
  }
  .hero__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.85rem 1.2rem;
    color: var(--ink);
    background: var(--paper);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .page-hero { padding-block: 0 clamp(4rem, 10vw, 6rem); overflow: hidden; }
  .page-hero__grid {
    display: grid;
    grid-template-areas: "page-media" "page-copy";
    gap: 0;
    align-items: end;
  }
  .page-hero__copy {
    position: relative;
    z-index: 2;
    grid-area: page-copy;
    width: calc(100% - 2rem);
    margin: -4.5rem 1rem 0;
    padding: clamp(1.5rem, 6vw, 2.5rem);
    display: grid;
    gap: var(--space-6);
    background: color-mix(in oklch, var(--paper) 94%, transparent);
    backdrop-filter: blur(12px);
  }
  .page-hero__copy h1 {
    max-width: 12ch;
    font-size: clamp(3rem, 6vw, 5.65rem);
    line-height: 1.08;
  }
  .page-hero__lead { max-width: 36rem; color: var(--ink-soft); font-size: var(--step-1); }
  .page-hero__media {
    position: relative;
    z-index: 0;
    grid-area: page-media;
    min-height: 62svh;
    overflow: hidden;
    background: var(--paper-deep);
  }
  .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
  .page-hero__media::after {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid color-mix(in oklch, var(--paper) 48%, transparent);
    pointer-events: none;
  }
  .page-hero__media--slice img { object-position: 70% center; }

  /* Product-first commerce hero: the copy occupies the calm linen area while
     the finished tart collection remains unobstructed and immediately visible. */
  .page-hero--product {
    padding-block: 0 clamp(3rem, 8vw, 5rem);
  }
  .page-hero--product .page-hero__grid {
    position: relative;
    grid-template-areas: "product-media" "product-copy";
    min-height: 0;
    isolation: isolate;
  }
  .page-hero--product .page-hero__media {
    grid-area: product-media;
    min-height: min(52svh, 30rem);
  }
  .page-hero--product .page-hero__media img {
    object-position: 61% 58%;
  }
  .page-hero--product .page-hero__media::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, color-mix(in oklch, var(--paper) 36%, transparent) 74%, var(--paper) 100%);
    pointer-events: none;
  }
  .page-hero--product .page-hero__copy {
    grid-area: product-copy;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin: -3.75rem 0 0;
    padding: 0 clamp(1.25rem, 7vw, 4rem) 1rem;
    display: grid;
    gap: var(--space-5);
    background: transparent;
    backdrop-filter: none;
  }
  .page-hero--product .page-hero__copy h1 {
    max-width: 10.5ch;
    font-size: clamp(2.9rem, 10vw, 4.8rem);
    line-height: 1.02;
  }
  .page-hero--product .page-hero__lead {
    max-width: 31rem;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    line-height: 1.8;
  }
  .page-hero__proof {
    max-width: 31rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: var(--space-6);
    border-top: 1px solid color-mix(in oklch, var(--walnut) 28%, transparent);
  }
  .page-hero__proof li {
    display: grid;
    gap: 0.15rem;
    padding-inline: var(--space-4);
    border-left: 1px solid color-mix(in oklch, var(--walnut) 24%, transparent);
  }
  .page-hero__proof li:first-child { padding-left: 0; border-left: 0; }
  .page-hero__proof strong { font-family: var(--display); font-size: var(--step-1); font-weight: 500; }
  .page-hero__proof span { color: var(--muted); font-size: var(--step--1); }

  .value-rail { overflow: hidden; border-block: 1px solid var(--line); background: var(--paper-deep); }
  .value-rail__track {
    width: max-content;
    display: flex;
    gap: 3.5rem;
    padding-block: 1rem;
    animation: rail 32s linear infinite;
    font-family: var(--display);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
  }
  .value-rail__track span::before { content: "✦"; margin-right: 3.5rem; color: var(--walnut); }
  @keyframes rail { to { transform: translateX(-50%); } }

  .category-grid { display: grid; gap: var(--space-4); }
  .category-card {
    position: relative;
    min-height: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--paper-deep);
  }
  .category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--ease-out);
  }
  .category-card:hover img { transform: scale(1.025); }
  .category-card__copy {
    position: absolute;
    inset: auto var(--space-4) var(--space-4);
    padding: var(--space-4);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: end;
    color: var(--ink);
    background: var(--paper);
  }
  .category-card__copy p { color: var(--muted); font-size: var(--step--1); }

  .image-panel { position: relative; min-height: 28rem; overflow: hidden; background: var(--paper-deep); }
  .image-panel img { width: 100%; height: 100%; object-fit: cover; }
  .image-panel--arch { border-radius: 45% 45% 0 0; }
  .image-panel--tall { min-height: 38rem; }
  .image-panel--slice img { object-position: 68% center; }

  .editorial-blend {
    gap: 0;
    align-items: center;
  }
  .editorial-blend > .image-panel {
    order: 1;
    width: 100%;
    min-height: clamp(28rem, 68svh, 40rem);
  }
  .editorial-blend > .stack {
    position: relative;
    z-index: 2;
    order: 2;
    width: calc(100% - 2rem);
    margin: -3.5rem 1rem 0;
    padding: clamp(1.5rem, 6vw, 2.75rem);
    background: linear-gradient(145deg, color-mix(in oklch, var(--paper) 98%, transparent), color-mix(in oklch, var(--paper) 91%, transparent));
    box-shadow: 0 1.5rem 4rem color-mix(in oklch, var(--walnut-dark) 9%, transparent);
    container-type: inline-size;
  }

  .editorial-dialogue { gap: clamp(2.5rem, 7vw, 5rem); }
  .editorial-dialogue > .stack {
    padding-top: var(--space-8);
    border-top: 1px solid color-mix(in oklch, var(--paper) 24%, transparent);
  }

  .principle-list { list-style: none; border-top: 1px solid var(--line); }
  .principle-list li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--line);
  }
  .principle-list__number { color: var(--walnut); font-family: var(--display); font-style: italic; }
  .principle-list p { margin-top: var(--space-2); color: var(--muted); font-size: 0.92rem; }

  .flavor-grid { display: grid; gap: var(--space-6); }
  .flavor-card {
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
    container-type: inline-size;
  }
  .flavor-card__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    color: var(--muted);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .flavor-card h3 { margin-block: var(--space-6) var(--space-3); }
  .flavor-card p { color: var(--muted); }
  .flavor-card[data-hidden="true"] { display: none; }

  .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-12); }
  .filter-button {
    min-height: 2.8rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    background: transparent;
    cursor: pointer;
  }
  .filter-button[aria-pressed="true"] { color: var(--paper); border-color: var(--walnut-dark); background: var(--walnut-dark); }

  .signature-grid { display: grid; gap: var(--space-4); }
  .signature-item {
    min-height: 17rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--paper-deep);
  }
  .signature-item:nth-child(3n + 2) { background: var(--blush); }
  .signature-item:nth-child(3n + 3) { background: var(--cream); }
  .signature-item__tag { color: var(--walnut); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; }
  .signature-item p { margin-top: var(--space-4); color: var(--ink-soft); }

  /* Compact decision cards inside an overlaid editorial panel. The global
     three-column card grid is intentionally not inherited in this context. */
  .editorial-blend .signature-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .editorial-blend .signature-item {
    min-height: 8.5rem;
    padding: clamp(1.25rem, 5cqi, 1.75rem);
  }
  .editorial-blend .signature-item h3 {
    font-size: clamp(1.55rem, 6cqi, 1.85rem);
    line-height: 1.14;
  }
  .editorial-blend .signature-item p {
    max-width: 18ch;
    margin-top: var(--space-3);
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .quote-block { display: grid; gap: var(--space-8); }
  .quote-block blockquote {
    max-width: 22ch;
    font-family: var(--display);
    font-size: clamp(2rem, 5vw, 4.7rem);
    line-height: 1.16;
    letter-spacing: -0.03em;
  }
  .quote-block cite { font-style: normal; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }

  .process-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .process-step {
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--space-4);
  }
  .process-step__number { font-family: var(--display); font-style: italic; color: var(--walnut); }
  .process-step p { margin-top: var(--space-3); color: var(--muted); }

  .fact-strip {
    display: grid;
    gap: var(--space-8);
    padding: clamp(2rem, 5vw, 4rem);
    color: var(--paper);
    background: var(--walnut-dark);
  }
  .fact strong { display: block; font-family: var(--display); font-size: var(--step-3); font-weight: 400; }
  .fact span { display: block; margin-top: var(--space-2); color: var(--cream); font-size: var(--step--1); }

  .occasion-grid { display: grid; gap: var(--space-4); }
  .occasion {
    min-height: 16rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
  }
  .occasion:nth-child(2), .occasion:nth-child(5) { background: var(--paper-deep); }
  .occasion__icon { font-family: var(--display); font-size: 2rem; color: var(--walnut); }
  .occasion p { margin-top: var(--space-3); color: var(--muted); }

  .timeline { list-style: none; border-left: 1px solid var(--line); }
  .timeline li { position: relative; padding: 0 0 var(--space-12) var(--space-8); }
  .timeline li::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -0.38rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--walnut);
  }
  .timeline time { color: var(--walnut); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; }
  .timeline p { margin-top: var(--space-3); color: var(--muted); }

  .journal-grid { display: grid; gap: var(--space-12) var(--space-6); }
  .journal-card { display: grid; gap: var(--space-4); }
  .journal-card__image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
  .journal-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
  .journal-card:hover img { transform: scale(1.025); }
  .journal-card__meta { color: var(--muted); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; }
  .journal-card p { color: var(--muted); }

  .order-layout { display: grid; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .order-form { display: grid; gap: var(--space-6); padding: clamp(1.5rem, 4vw, 3rem); background: var(--paper-deep); }
  .form-grid { display: grid; gap: var(--space-4); }
  .field { display: grid; gap: var(--space-2); }
  .field label { font-size: 0.82rem; font-weight: 650; }
  .field input, .field select, .field textarea {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.8rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    background: transparent;
  }
  .field textarea { min-height: 8rem; resize: vertical; }
  .field small { color: var(--muted); }
  .field__error { color: var(--error); font-size: 0.8rem; }
  .form-note { color: var(--muted); font-size: var(--step--1); }

  .faq-list { border-top: 1px solid var(--line); }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list summary {
    min-height: 4.5rem;
    padding-block: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-family: var(--display);
    font-size: var(--step-1);
    cursor: pointer;
    list-style: none;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; font-family: var(--body); color: var(--walnut); }
  .faq-list details[open] summary::after { content: "−"; }
  .faq-list details p { padding: 0 2rem var(--space-6) 0; color: var(--muted); }

  .cta-band {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4rem, 9vw, 8rem);
    border-top: 1px solid oklch(52% 0.038 61);
    color: var(--paper);
    background: var(--walnut-mid);
  }
  .cta-band::after {
    content: "A";
    position: absolute;
    right: -0.02em;
    bottom: -0.35em;
    color: color-mix(in oklch, var(--paper) 7%, transparent);
    font-family: var(--display);
    font-size: min(70vw, 38rem);
    line-height: 1;
    pointer-events: none;
  }
  .cta-band__inner { position: relative; z-index: 1; display: grid; gap: var(--space-8); }
  .cta-band .eyebrow { color: var(--butter); }
  .cta-band h2 { max-width: 14ch; }
  .cta-band p { color: var(--cream); }

  .site-footer { padding-block: var(--space-16) var(--space-8); border-top: 1px solid var(--line); }
  .footer-grid { display: grid; gap: var(--space-12); }
  .footer-brand p { margin-top: var(--space-4); color: var(--muted); }
  .footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-8); }
  .footer-nav a { width: fit-content; padding-block: 0.25rem; color: var(--ink-soft); }
  .footer-nav a:hover { color: var(--walnut); }
  .footer-bottom {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--step--1);
  }

  .toast {
    position: fixed;
    z-index: 90;
    right: var(--space-4);
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    max-width: 23rem;
    padding: 1rem 1.2rem;
    color: var(--paper);
    background: var(--walnut-dark);
    transform: translateY(140%);
    opacity: 0;
    transition: transform 300ms var(--ease-out), opacity 180ms;
  }
  .toast[data-show="true"] { transform: translateY(0); opacity: 1; }

  .reveal { opacity: 0; transform: translateY(1.5rem); }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
}

@layer utilities {
  .muted { color: var(--muted); }
  .lead { font-size: var(--step-1); line-height: 1.55; }
  .display { font-family: var(--display); }
  .caps { font-size: var(--step--1); font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 48rem) {
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr); }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__copy {
    align-self: stretch;
    justify-self: start;
    width: min(64rem, 73vw);
    margin: 0;
    padding: clamp(4rem, 8vw, 7rem) clamp(8rem, 13vw, 14rem) clamp(3rem, 6vw, 6rem) max(4vw, calc((100vw - 88rem) / 2));
    background: linear-gradient(90deg, var(--paper) 0%, color-mix(in oklch, var(--paper) 92%, transparent) 52%, color-mix(in oklch, var(--paper) 52%, transparent) 78%, transparent 100%);
    backdrop-filter: none;
  }
  .hero__copy h1 { max-width: 8ch; }
  .hero__image { min-height: calc(100svh - var(--header-h)); }
  .hero__image::before {
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--paper) 82%, transparent) 0%, color-mix(in oklch, var(--paper) 38%, transparent) 43%, transparent 72%),
      linear-gradient(180deg, transparent 62%, color-mix(in oklch, var(--paper) 28%, transparent) 100%);
  }
  .page-hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(5rem, 8vw, 7rem); }
  .page-hero__grid {
    min-height: 0;
    grid-template-areas: "page-media" "page-copy";
    align-items: start;
  }
  .page-hero__copy {
    grid-area: page-copy;
    align-self: start;
    justify-self: start;
    width: min(50rem, 90%);
    margin: clamp(-4.5rem, -5vw, -3.5rem) 0 0 clamp(1rem, 4vw, 4rem);
    padding: clamp(2rem, 4vw, 3.25rem);
    background: var(--paper);
    box-shadow: 0 1.5rem 4rem color-mix(in oklch, var(--walnut-dark) 9%, transparent);
    backdrop-filter: none;
  }
  .page-hero__media {
    grid-area: page-media;
    align-self: auto;
    justify-self: stretch;
    width: 100%;
    min-height: min(76svh, 48rem);
  }
  body[data-page="tarts"] .page-hero__copy,
  body[data-page="moments"] .page-hero__copy,
  body[data-page="order"] .page-hero__copy {
    justify-self: end;
    margin: clamp(-4.5rem, -5vw, -3.5rem) clamp(1rem, 4vw, 4rem) 0 0;
    padding: clamp(2rem, 4vw, 3.25rem);
    background: var(--paper);
  }
  body[data-page="tarts"] .page-hero__media,
  body[data-page="moments"] .page-hero__media,
  body[data-page="order"] .page-hero__media { justify-self: stretch; }
  body[data-page="story"] .page-hero__copy {
    align-self: start;
    width: min(50rem, 90%);
    margin-left: clamp(1rem, 4vw, 4rem);
  }
  body[data-page="story"] .page-hero__media { width: 100%; }
  .page-hero--product { padding-top: 0; }
  .page-hero--product .page-hero__grid {
    min-height: clamp(42rem, calc(100svh - var(--header-h)), 50rem);
    grid-template-areas: "product-stage";
  }
  .page-hero--product .page-hero__copy {
    align-self: center;
    justify-self: start;
    width: min(37rem, 46vw);
    margin: 0;
    padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2.5rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: none;
    box-shadow: none;
  }
  .page-hero--product .page-hero__copy > * { grid-area: auto; }
  .page-hero--product .page-hero__copy h1 {
    max-width: 10.5ch;
    font-size: clamp(3.4rem, 4.3vw, 4.75rem);
  }
  .page-hero--product .page-hero__media {
    grid-area: product-stage;
    min-height: inherit;
  }
  .page-hero--product .page-hero__media img { object-position: 61% center; }
  .page-hero--product .page-hero__media::before {
    background: linear-gradient(90deg, var(--paper) 0%, color-mix(in oklch, var(--paper) 92%, transparent) 20%, color-mix(in oklch, var(--paper) 58%, transparent) 35%, transparent 52%);
  }
  .editorial-blend {
    min-height: min(76svh, 54rem);
    grid-template-columns: 1fr;
    grid-template-areas: "editorial-canvas";
  }
  .editorial-blend > .image-panel {
    grid-area: editorial-canvas;
    order: initial;
    align-self: stretch;
    width: min(84%, 70rem);
    min-height: min(72svh, 50rem);
  }
  .editorial-blend > .stack {
    grid-area: editorial-canvas;
    order: initial;
    align-self: center;
    width: min(40rem, 48vw);
    margin: 0;
    padding: clamp(2rem, 4.5vw, 4.25rem);
  }
  .editorial-blend--copy-left > .image-panel { justify-self: end; }
  .editorial-blend--copy-left > .stack {
    justify-self: start;
    padding-right: clamp(4rem, 8vw, 8rem);
    background: linear-gradient(90deg, var(--paper) 0%, color-mix(in oklch, var(--paper) 96%, transparent) 56%, color-mix(in oklch, var(--paper) 68%, transparent) 80%, transparent 100%);
  }
  .editorial-blend--copy-right > .image-panel { justify-self: start; }
  .editorial-blend--copy-right > .stack {
    justify-self: end;
    padding-left: clamp(4rem, 8vw, 8rem);
    background: linear-gradient(90deg, transparent 0%, color-mix(in oklch, var(--paper) 68%, transparent) 20%, color-mix(in oklch, var(--paper) 96%, transparent) 44%, var(--paper) 100%);
  }
  .editorial-dialogue {
    grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
    grid-template-areas: "dialogue-quote dialogue-copy";
    gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
  }
  .editorial-dialogue > .quote-block {
    grid-area: dialogue-quote;
    width: auto;
    padding-right: 0;
    align-self: start;
  }
  .editorial-dialogue > .quote-block blockquote {
    max-width: 13ch;
    font-size: clamp(2.6rem, 4.35vw, 4.25rem);
    line-height: 1.16;
  }
  .editorial-dialogue > .stack {
    grid-area: dialogue-copy;
    align-self: end;
    justify-self: stretch;
    width: auto;
    padding: var(--space-8) 0 0 clamp(2rem, 3vw, 3rem);
    border-top: 0;
    border-left: 1px solid color-mix(in oklch, var(--paper) 24%, transparent);
    background: transparent;
  }
  .editorial-dialogue > .stack h2 {
    max-width: 12ch;
    font-size: clamp(2rem, 3.1vw, 3.25rem);
    line-height: 1.14;
  }
  .editorial-dialogue > .stack p { max-width: 32rem; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flavor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-blend .signature-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-step:nth-child(odd) { padding-right: var(--space-8); }
  .process-step:nth-child(even) { padding-left: var(--space-8); border-left: 1px solid var(--line); }
  .fact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .occasion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .occasion { min-height: 0; aspect-ratio: 4 / 3; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: minmax(16rem, 1fr) minmax(22rem, 1fr); }
}

@media (min-width: 70rem) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    display: flex;
    flex: 1;
    justify-content: flex-end;
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
    transform: none;
    opacity: 1;
    transition: none;
  }
  .site-nav a {
    min-height: 2.8rem;
    padding: 0.45rem 0.62rem;
    border: 0;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
  }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current="page"] { background: transparent; }
  .site-nav a[aria-current="page"]::before { content: "•"; margin-right: 0.35rem; }
  .page-hero__copy {
    width: min(68rem, 92%);
    grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr);
    grid-template-areas:
      "hero-eyebrow hero-eyebrow"
      "hero-title hero-lead"
      "hero-title hero-actions";
    column-gap: clamp(3rem, 6vw, 5rem);
    row-gap: var(--space-6);
  }
  .page-hero__copy > .eyebrow { grid-area: hero-eyebrow; }
  .page-hero__copy > h1 {
    grid-area: hero-title;
    align-self: start;
    max-width: 8ch;
    font-size: clamp(3.6rem, 5.5vw, 5.2rem);
  }
  .page-hero__copy > .page-hero__lead { grid-area: hero-lead; }
  .page-hero__copy > :last-child {
    grid-area: hero-actions;
    align-self: end;
  }
  body[data-page="story"] .page-hero__copy { width: min(68rem, 92%); }
  .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
  .flavor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .occasion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journal-card:nth-child(2) { margin-top: var(--space-16); }
  .journal-card:nth-child(5) { margin-top: calc(var(--space-16) * -1); }
  .order-layout { grid-template-columns: minmax(18rem, 0.65fr) minmax(32rem, 1.35fr); }
}

/* All subpage heroes use the same image-led composition as the homepage. */
body:not([data-page="home"]) .page-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  padding: 0;
  display: grid;
  grid-template-areas: "subpage-hero";
  overflow: hidden;
  isolation: isolate;
  background: var(--paper-deep);
}
body:not([data-page="home"]) .page-hero .page-hero__grid {
  grid-area: subpage-hero;
  width: 100%;
  min-height: calc(100svh - var(--header-h));
  margin: 0;
  display: grid;
  grid-template-areas: "subpage-layer";
  align-items: stretch;
}
body:not([data-page="home"]) .page-hero .page-hero__media {
  position: relative;
  z-index: 0;
  grid-area: subpage-layer;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-height: calc(100svh - var(--header-h));
  margin: 0;
}
body:not([data-page="home"]) .page-hero .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}
body:not([data-page="home"]) .page-hero .page-hero__media::before {
  content: none;
  display: none;
  background: none;
}
body:not([data-page="home"]) .page-hero .page-hero__media::after {
  content: none;
  display: none;
}
body:not([data-page="home"]) .page-hero .page-hero__copy {
  position: relative;
  z-index: 2;
  grid-area: subpage-layer;
  align-self: end;
  justify-self: start;
  width: calc(100% - 2rem);
  max-width: none;
  margin: 0 1rem 1rem;
  padding: clamp(1.5rem, 6vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:not([data-page="home"]) .page-hero .page-hero__copy > * { grid-area: auto; }
body:not([data-page="home"]) .page-hero .page-hero__copy h1 {
  max-width: 10ch;
  font-size: var(--step-4);
  line-height: 1.06;
}
body:not([data-page="home"]) .page-hero .page-hero__lead {
  max-width: 33rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.65;
}

@media (min-width: 48rem) {
  body:not([data-page="home"]) .page-hero .page-hero__copy {
    align-self: stretch;
    width: min(64rem, 73vw);
    margin: 0;
    padding: clamp(4rem, 8vw, 7rem) clamp(8rem, 13vw, 14rem) clamp(3rem, 6vw, 6rem) max(4vw, calc((100vw - 88rem) / 2));
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body:not([data-page="home"]) .page-hero .page-hero__copy h1 { max-width: 8ch; }
  body:not([data-page="home"]) .page-hero .page-hero__media::before {
    content: none;
    display: none;
    background: none;
  }
}

/* Every subpage opens with the same scroll rhythm as the homepage: the image
   stays staged beneath the fixed header while the hero copy exits upward. */
body:not([data-page="home"]) .page-hero[data-scroll-scene] {
  height: 158svh;
  min-height: 0;
  display: block;
  overflow: visible;
  background: var(--paper);
}
body:not([data-page="home"]) .page-hero[data-scroll-scene] .page-hero__grid[data-scroll-stage] {
  --scroll-progress: 0;
  position: sticky;
  top: var(--header-h);
  width: 100%;
  max-width: none;
  height: calc(100svh - var(--header-h));
  min-height: 0;
  margin: 0;
  grid-area: auto;
  overflow: hidden;
  isolation: isolate;
}
body:not([data-page="home"]) .page-hero[data-scroll-scene] .page-hero__media {
  height: 100%;
  min-height: 0;
}
body:not([data-page="home"]) .page-hero[data-scroll-scene] .page-hero__copy {
  opacity: 1;
  transform: none;
}
body:not([data-page="home"]) .page-hero[data-scroll-scene] + * {
  position: relative;
  z-index: 2;
}

@media (min-width: 48rem) {
  body:not([data-page="home"]) .page-hero[data-scroll-scene] { height: 165svh; }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-page="home"]) .page-hero[data-scroll-scene] {
    height: auto;
    overflow: hidden;
  }
  body:not([data-page="home"]) .page-hero[data-scroll-scene] .page-hero__grid[data-scroll-stage] {
    position: relative;
    top: auto;
  }
  body:not([data-page="home"]) .page-hero[data-scroll-scene] .page-hero__copy {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* Journal: a contained two-column editorial rhythm prevents card content from
   forcing the page wider than the viewport. */
body[data-page="journal"] #stories { overflow: clip; }
body[data-page="journal"] .journal-grid {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  gap: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 4rem);
}
body[data-page="journal"] .journal-card {
  min-width: 0;
  overflow: hidden;
  align-content: start;
  grid-template-rows: auto auto auto 1fr auto;
}
body[data-page="journal"] .journal-card > * { min-width: 0; max-width: 100%; }
body[data-page="journal"] .journal-card h3,
body[data-page="journal"] .journal-card p,
body[data-page="journal"] .journal-card__meta { overflow-wrap: anywhere; }
body[data-page="journal"] .journal-card__image { aspect-ratio: 3 / 2; }

@media (min-width: 48rem) {
  body[data-page="journal"] .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="journal"] .journal-card:nth-child(2),
  body[data-page="journal"] .journal-card:nth-child(5) { margin-top: 0; }
}

/* Story principles: four equal panels in a deliberate 2 x 2 composition. */
body[data-page="story"] .signature-grid {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
body[data-page="story"] .signature-item {
  min-width: 0;
  min-height: 17rem;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--paper);
}
body[data-page="story"] .signature-item:nth-child(2) { background: var(--blush); }
body[data-page="story"] .signature-item:nth-child(3) { background: var(--cream); }
body[data-page="story"] .signature-item:nth-child(4) {
  background: color-mix(in oklch, var(--paper-deep) 76%, var(--butter));
}
body[data-page="story"] .signature-item h3 { max-width: 15ch; }
body[data-page="story"] .signature-item p { max-width: 38ch; }

/* Homepage scroll scene — the photograph is the entire stage. There is no
   overlay, gradient, blur or copy panel; motion only changes transform/opacity. */
body[data-page="home"] .hero-scroll {
  position: relative;
  height: 158svh;
  background: var(--paper);
}
body[data-page="home"] .hero--cinematic {
  --hero-progress: 0;
  position: sticky;
  top: var(--header-h);
  width: 100%;
  height: calc(100svh - var(--header-h));
  min-height: 0;
  display: grid;
  grid-template-areas: "hero-stage";
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
}
body[data-page="home"] .hero--cinematic .hero__image {
  position: relative;
  z-index: 0;
  grid-area: hero-stage;
  min-height: 0;
  overflow: hidden;
}
body[data-page="home"] .hero--cinematic .hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
  transform: none;
}
body[data-page="home"] .hero--cinematic .hero__image::before,
body[data-page="home"] .hero--cinematic .hero__image::after { display: none; }
body[data-page="home"] .hero--cinematic .hero__copy {
  position: relative;
  z-index: 1;
  grid-area: hero-stage;
  align-self: start;
  justify-self: start;
  width: min(84vw, 43rem);
  margin: 0;
  padding: clamp(3rem, 9vh, 5rem) 0 0 max(1.5rem, 6vw);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  color: var(--ink);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  transform: none;
}
body[data-page="home"] .hero__topline {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  width: fit-content;
}
body[data-page="home"] .hero__topline .eyebrow { color: var(--walnut-dark); }
body[data-page="home"] .hero__index {
  flex: 0 0 auto;
  color: var(--walnut);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.13em;
}
body[data-page="home"] .hero--cinematic h1 {
  max-width: none;
  font-size: clamp(3.15rem, 13vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
body[data-page="home"] .home-celebrate {
  position: relative;
  z-index: 2;
  background: var(--paper);
}
body[data-page="home"] .home-celebrate .section-head.reveal {
  opacity: 1;
  transform: none;
}

@media (min-width: 48rem) {
  body[data-page="home"] .hero-scroll { height: 165svh; }
  body[data-page="home"] .hero--cinematic .hero__copy {
    width: min(45vw, 46rem);
    padding-top: clamp(5rem, 10vh, 7rem);
    padding-left: max(4vw, calc((100vw - 88rem) / 2));
  }
  body[data-page="home"] .hero--cinematic h1 {
    max-width: none;
    font-size: clamp(4.75rem, 6.45vw, 7.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero-scroll { height: auto; }
  body[data-page="home"] .hero--cinematic {
    position: relative;
    top: auto;
  }
  body[data-page="home"] .hero--cinematic .hero__copy {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

@media (min-width: 48rem) {
  body[data-page="story"] .signature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}