/* ==========================================================================
   Sanjay Beans — site stylesheet
   Good Beans. Brighter Days.

   One stylesheet for the whole static site. Pages compose the classes defined
   here; they must not invent new global class names or ship <style> blocks, so
   that all four pages stay visually identical in their shared furniture.

   Contents
     1. Tokens (light + dark)
     2. Reset and base elements
     3. Layout: wrap, section, grid
     4. Type: display, eyebrow, lede, rules
     5. Buttons and form controls
     6. Site furniture: announcement bar, header, nav, footer
     7. Components: card, product card, review card, stat, poster, chip,
        marquee, ugc grid, faq, quote, notice
     8. Utilities
     9. Motion and print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------
   Palette is lifted from the physical can: cream label stock, brick-red
   wordmark, cocoa variety banner, leaf-green sprig, warm bean orange. */

:root {
  color-scheme: light dark;

  /* Brand constants — identical in both themes so the brand never shifts. */
  --brand-brick: #8e2a20;
  --brand-cocoa: #5a3a2e;
  --brand-leaf: #5f8b3e;
  --brand-bean: #c8702f;
  --brand-cream: #f6eedf;

  /* Themed surfaces and ink. */
  --paper: #fffbf3;
  --surface: #f6eedf;
  --surface-2: #efe3ca;
  --surface-sunk: #e7d9bc;
  --ink: #241b16;
  --ink-2: #5d4c40;
  --ink-3: #8a7765;
  --accent: #8e2a20;
  --accent-hover: #a8372a;
  --accent-ink: #fffbf3;
  --leaf: #4f7a33;
  --bean: #b85f22;
  --line: rgba(36, 27, 22, 0.14);
  --line-strong: rgba(36, 27, 22, 0.28);
  --shadow-sm: 0 1px 2px rgba(60, 40, 25, 0.08), 0 2px 8px rgba(60, 40, 25, 0.06);
  --shadow-md: 0 2px 4px rgba(60, 40, 25, 0.08), 0 12px 28px rgba(60, 40, 25, 0.12);

  /* Type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --wrap: 1140px;
  --wrap-narrow: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16120f;
    --surface: #1e1813;
    --surface-2: #272019;
    --surface-sunk: #120f0c;
    --ink: #f4e9d8;
    --ink-2: #c6b49c;
    --ink-3: #978573;
    --accent: #e2816d;
    --accent-hover: #ef9681;
    --accent-ink: #1a1310;
    --leaf: #a3cb77;
    --bean: #e0924f;
    --line: rgba(244, 233, 216, 0.16);
    --line-strong: rgba(244, 233, 216, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45);
  }
}

/* Viewer theme toggle must beat the media query in both directions. */
:root[data-theme="light"] {
  --paper: #fffbf3;
  --surface: #f6eedf;
  --surface-2: #efe3ca;
  --surface-sunk: #e7d9bc;
  --ink: #241b16;
  --ink-2: #5d4c40;
  --ink-3: #8a7765;
  --accent: #8e2a20;
  --accent-hover: #a8372a;
  --accent-ink: #fffbf3;
  --leaf: #4f7a33;
  --bean: #b85f22;
  --line: rgba(36, 27, 22, 0.14);
  --line-strong: rgba(36, 27, 22, 0.28);
  --shadow-sm: 0 1px 2px rgba(60, 40, 25, 0.08), 0 2px 8px rgba(60, 40, 25, 0.06);
  --shadow-md: 0 2px 4px rgba(60, 40, 25, 0.08), 0 12px 28px rgba(60, 40, 25, 0.12);
}

:root[data-theme="dark"] {
  --paper: #16120f;
  --surface: #1e1813;
  --surface-2: #272019;
  --surface-sunk: #120f0c;
  --ink: #f4e9d8;
  --ink-2: #c6b49c;
  --ink-3: #978573;
  --accent: #e2816d;
  --accent-hover: #ef9681;
  --accent-ink: #1a1310;
  --leaf: #a3cb77;
  --bean: #e0924f;
  --line: rgba(244, 233, 216, 0.16);
  --line-strong: rgba(244, 233, 216, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* 2. Reset and base ------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent-hover);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
}
h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
}
h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}
h4 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

ul,
ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.25em;
}

li {
  margin-bottom: var(--s-2);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}

small {
  font-size: 0.85rem;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--s-3) var(--s-4);
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* 3. Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.section {
  padding-block: var(--s-9);
}

.section--tight {
  padding-block: var(--s-7);
}

.section--surface {
  background: var(--surface);
}

.section--sunk {
  background: var(--surface-sunk);
}

.section--ink {
  background: var(--brand-cocoa);
  color: #f6eedf;
}

.section--ink h1,
.section--ink h2,
.section--ink h3 {
  color: #fffbf3;
}

.section--ink a {
  color: #f0c9a6;
}

.section__head {
  max-width: 62ch;
  margin-bottom: var(--s-6);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.grid {
  display: grid;
  gap: var(--s-5);
}

/* Every auto-fit floor is wrapped in min(..., 100%). A bare minmax(320px, 1fr)
   track cannot shrink below its floor, so on a 360px viewport — where .wrap's
   padding leaves only 312px — the track overflows and scrolls the whole body
   sideways. min() lets the track collapse to the container width instead. */
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* 4. Type helpers --------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}

.eyebrow--accent {
  color: var(--accent);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.slogan {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
}

.fineprint {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* 5. Buttons and controls -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--surface-2);
}

.btn--block {
  width: 100%;
}

/* Every purchase path on this site is intentionally dead: the product is sold
   out and the site is static. Disabled controls still have to read clearly. */
.btn--soldout,
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--ink-3);
  border-color: var(--line);
  cursor: not-allowed;
  transform: none;
}

.btn--soldout:hover,
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  transform: none;
  background: var(--surface-2);
  color: var(--ink-3);
}

.field {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.input {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  padding: 0.8em 1em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}

.input::placeholder {
  color: var(--ink-3);
}

.input:disabled {
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

/* 6. Site furniture -------------------------------------------------------- */

.announce {
  background: var(--brand-cocoa);
  color: #f6eedf;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-2) var(--s-4);
}

.announce a {
  color: #f0c9a6;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 68px;
  flex-wrap: wrap;
}

.nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.nav__brand span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav__links li {
  margin: 0;
}

.nav__links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding-block: var(--s-2);
}

.nav__links a:hover {
  color: var(--accent);
}

.nav__links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--s-7) var(--s-6);
  font-size: 0.92rem;
}

.site-footer h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent);
}

.site-footer__bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  color: var(--ink-3);
  font-size: 0.82rem;
}

/* The fiction disclaimer is set deliberately small — present for anyone who
   goes looking, never loud enough to step on the joke. It is the last child of
   the footer's bottom row on every page, so this needs no extra markup. */
.site-footer__bottom p + p,
.legal {
  font-size: 0.58rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  opacity: 0.62;
  max-width: 46ch;
}

/* 7. Components ------------------------------------------------------------ */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.card--quiet {
  background: var(--surface);
  box-shadow: none;
}

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}

.card__media img,
.card__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  padding: var(--s-5);
}

.card__body > :last-child {
  margin-bottom: 0;
}

/* Product card — the shop grid. Everything is sold out by design. */
.product {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  padding: var(--s-5);
}

.product__media svg,
.product__media img {
  max-height: 100%;
  width: auto;
  /* Sold-out stock reads as muted; the can itself stays legible. */
  filter: saturate(0.82);
}

.product__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.product__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  margin: 0;
}

.product__note {
  color: var(--ink-2);
  font-size: 0.92rem;
  margin: 0;
  flex: 1;
}

.product__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.price {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.price del {
  color: var(--ink-3);
  font-weight: 400;
  margin-right: var(--s-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4em 0.75em;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.badge--soldout {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.badge--leaf {
  background: color-mix(in srgb, var(--leaf) 16%, transparent);
  color: var(--leaf);
  border-color: color-mix(in srgb, var(--leaf) 40%, transparent);
}

.badge--float {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

/* Review card — echoes the shape of a Google Maps review without lifting
   Google's marks. The reviewer is never named; see source/reviews.md. */
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.review__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.review__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-cocoa);
  color: var(--brand-cream);
  font-size: 1.1rem;
}

.review__who {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.review__who small {
  display: block;
  font-weight: 400;
  color: var(--ink-3);
}

.stars {
  color: var(--bean);
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}

.review__place {
  font-size: 0.85rem;
  color: var(--ink-3);
}

.review__body {
  margin: 0;
  color: var(--ink-2);
}

.review__body p {
  margin-bottom: var(--s-3);
}

.review__body p:last-child {
  margin-bottom: 0;
}

.review__facts {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-3);
  display: grid;
  gap: var(--s-1);
}

.review__facts dt {
  display: inline;
  font-weight: 600;
}

.review__facts dt::after {
  content: ": ";
}

.review__facts dd {
  display: inline;
  margin: 0;
}

/* Stat block */
.stat {
  text-align: center;
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

.stat__label {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.4;
}

.section--ink .stat__num {
  color: #f0c9a6;
}

.section--ink .stat__label {
  color: #e6d6bd;
}

/* Location posters (hand-drawn SVG scenes) */
.poster {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.poster__img {
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
}

.poster__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poster__cap {
  padding: var(--s-4) var(--s-5) var(--s-5);
}

.poster__cap h3 {
  margin-bottom: var(--s-1);
  font-size: 1.1rem;
}

.poster__cap p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-2);
}

.poster__handle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: var(--s-2);
  display: block;
}

/* Marquee / ticker — "as seen in" strip. Pauses for reduced-motion users. */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--s-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--s-7);
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}

.marquee__item {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-3);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* The track holds the item list twice; shifting by half loops seamlessly. */
    transform: translateX(-50%);
  }
}

/* User-generated-content grid */
.ugc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--s-3);
}

.ugc__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.ugc__tile img,
.ugc__tile svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ugc__tag {
  position: absolute;
  left: var(--s-2);
  bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: rgba(20, 14, 10, 0.72);
  color: #f6eedf;
  padding: 0.25em 0.6em;
  border-radius: var(--radius-pill);
}

/* FAQ */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) 2rem var(--s-4) 0;
  font-weight: 600;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq__answer {
  padding-bottom: var(--s-4);
  color: var(--ink-2);
  max-width: 68ch;
}

.faq__answer > :last-child {
  margin-bottom: 0;
}

/* Pull quote */
.quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.35;
  text-wrap: balance;
}

.quote cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section--ink .quote cite {
  color: #cdb79a;
}

/* Inline notice / callout */
.notice {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  font-size: 0.93rem;
  color: var(--ink-2);
}

.notice > :last-child {
  margin-bottom: 0;
}

/* Chip row */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chips li {
  margin: 0;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  padding-block: var(--s-8);
}

.hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}

/* 8. Utilities ------------------------------------------------------------- */

.center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-5 {
  margin-top: var(--s-5);
}
.mt-6 {
  margin-top: var(--s-6);
}
.mb-6 {
  margin-bottom: var(--s-6);
}
.stack > * + * {
  margin-top: var(--s-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Wide content must scroll inside its own box; the page body never does. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 9. Motion and print ------------------------------------------------------ */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .marquee__track {
    animation: none;
    /* Without the loop the duplicated half would just be dead space. */
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-5);
  }
}

@media print {
  .site-header,
  .announce,
  .marquee,
  .site-footer {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}