/* Reset, text styles, shared atoms (wordmark, buttons, badges, chips, pills, fields), motion. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--color-surface-page); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-body-m); line-height: 1.55; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--color-action-ink); color: var(--color-action-on-ink); padding: 12px 16px; border-radius: var(--radius-md); text-decoration: none; }
.skip-link:focus { top: 16px; }
.container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--page-margin)); margin: 0 auto; padding-inline: var(--page-margin); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Text styles */
.t-display-xl, .t-display-l, .t-h2, .t-h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; }
.t-display-xl { font-size: var(--text-display-xl); line-height: 0.95; letter-spacing: -0.01em; }
.t-display-l { font-size: var(--text-display-l); line-height: 1; letter-spacing: -0.01em; }
.t-h2 { font-size: var(--text-h2); line-height: 1.05; letter-spacing: -0.005em; }
.t-h3 { font-size: var(--text-h3); line-height: 1.1; }
.t-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h4); line-height: 1.3; }
.t-kicker { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: var(--text-kicker); line-height: 1.15; font-variation-settings: "SOFT" 100; }
.t-body-l { font-size: var(--text-body-l); line-height: 1.5; }
.t-body-m { font-size: var(--text-body-m); line-height: 1.55; }
.t-body-s { font-size: var(--text-body-s); line-height: 1.5; }
.t-label { font-size: var(--text-label); font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; }
.t-badge { font-size: var(--text-badge); font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.c-secondary { color: var(--color-text-secondary); }
.c-muted { color: var(--color-text-muted); }
.c-accent { color: var(--color-text-accent); }
.c-inverse { color: var(--color-text-inverse); }
.u-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.u-link:hover { color: var(--color-text-accent); }

/* Section heading: caps heading with an italic kicker on the same line, stacked on mobile */
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; }
.section-heading .t-kicker { color: var(--color-text-secondary); }
@media (max-width: 767px) { .section-heading { flex-direction: column; align-items: flex-start; } }

/* Wordmark */
.wordmark { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; white-space: nowrap; color: var(--color-text-primary); }
.wordmark b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-h3); text-transform: uppercase; line-height: 1; }
.wordmark i { font-family: var(--font-accent); font-size: var(--text-kicker); line-height: 1; font-variation-settings: "SOFT" 100; }
.wordmark--cream { color: var(--color-text-inverse); background: var(--color-surface-inverse); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: var(--radius-md); border: var(--border-width) solid transparent; font-family: var(--font-body); font-size: var(--text-button); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) ease; }
.btn--m { min-height: 44px; padding: 0 20px; }
.btn--primary { background: var(--color-action-primary); color: var(--color-action-on-primary); }
.btn--primary:hover { background: var(--color-action-primary-hover); }
.btn--ink { background: var(--color-action-ink); color: var(--color-action-on-ink); }
.btn--ink:hover { background: var(--color-action-ink-hover); }
.btn--outline { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn--outline:hover { background: var(--color-surface-page); }
.btn--light { background: var(--color-surface-page); color: var(--color-text-primary); }
.btn--light:hover { background: var(--cream-200); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 2px; border-radius: var(--radius-md); }

/* Badges, chips, pills, sticker */
.badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: var(--radius-full); font-size: var(--text-badge); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: var(--color-text-primary); }
.badge--new { background: var(--color-badge-new); color: var(--color-text-inverse); }
.badge--best { background: var(--color-badge-best-seller); }
.badge--promo { background: var(--color-badge-promo); }
.badge--prebook { background: var(--color-badge-prebook); }
.date-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radius-xs); background: var(--color-surface-card); border: 1px solid var(--color-border-strong); font-size: var(--text-badge); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.date-chip svg { flex: none; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--radius-full); border: var(--border-width) solid var(--color-border-strong); background: var(--color-surface-card); color: var(--color-text-primary); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease; }
.pill:hover { background: var(--cream-200); }
.pill.is-active, .pill[aria-selected="true"] { background: var(--color-action-ink); border-color: var(--color-action-ink); color: var(--color-text-inverse); }
.sticker { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; background: var(--bubblegum-500); color: var(--color-text-primary); transform: rotate(-8deg); text-align: center; }
.sticker small { font-size: var(--text-badge); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sticker b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-h3); text-transform: uppercase; line-height: 1.1; }
@media (max-width: 767px) { .sticker { width: 120px; height: 120px; } }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: var(--text-label); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; background: var(--color-surface-card); color: var(--color-text-primary); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-body-m); line-height: 1.4; transition: box-shadow var(--dur-ui) ease; }
.field textarea { min-height: 144px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--spearmint-100); border-color: var(--color-focus-ring); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231F1712' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--cherry-700); box-shadow: 0 0 0 1px var(--cherry-700); }
.field__error { color: var(--cherry-700); font-size: var(--text-body-s); }
.field.is-flash input, .field.is-flash select, .field.is-flash textarea { box-shadow: 0 0 0 4px var(--spearmint-100); }

/* Reveal motion, once per page load */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; transition: opacity 200ms linear; transition-delay: 0ms; }
  .btn, .pill { transition: none; }
}