/* Self-hosted display face (2026-08-18 polish pass, item 13): one heavy weight of a
   clean family so headlines look the same on every device; CSP font-src self. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* Palette 2026-08-16, client brief of 2026-08-14: warm near-black base,
     off-white secondary, gold accent kept minimal, purple only in the drink.
     Retired the grape/neon tokens (--bg, --bg-deep, --panel, --panel-soft,
     --cream, --muted, --grape, --grape-deep, --citrus, --banana, --ink,
     --border) in the same pass; nothing else references them. */
  --ink-warm: #17140F;
  --charcoal: #24211B;
  --panel-warm: #2B2721;
  --panel-warm-soft: #332E26;
  --off-white: #F3EEE4;
  --cream-warm: #EFE6D6;
  --gold: #B8923A;
  --gold-hover: #C9A552;
  --gold-deep: #7A5D1C;
  --gold-soft: rgba(184, 146, 58, 0.18);
  --syrup: #4B1A78;
  --syrup-gloss: #7A2FC2;
  --text-on-light: #1D1913;
  --text-on-dark: #F3EEE4;
  --muted-warm: #B9B0A2;
  --muted-on-light: #5E574C;
  --border-dark: rgba(243, 238, 228, 0.12);
  --border-light: rgba(29, 25, 19, 0.12);
  --display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --product: "Segoe UI", Arial, sans-serif;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--off-white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}
img, video { max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 10px 14px;
  color: var(--text-on-light);
  background: var(--gold);
  font-weight: 800;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding-block: clamp(80px, 10vw, 132px); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 0.98; letter-spacing: 0.005em; text-transform: uppercase; text-wrap: balance; }
h1 span, h2 span { color: var(--gold); }
h2 { font-size: clamp(2.4rem, 5.6vw, 4.9rem); }
p { margin-top: 0; }
.eyebrow { margin-bottom: 18px; color: var(--gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.33em; text-transform: uppercase; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  min-height: 84px;
  padding: 10px clamp(18px, 3vw, 40px);
  border-bottom: 1px solid rgba(243, 238, 228, 0.1);
  background: linear-gradient(180deg, rgba(23, 20, 15, 0.86), rgba(23, 20, 15, 0));
}
.site-header--solid { position: sticky; background: rgba(23, 20, 15, 0.94); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--off-white); font-family: var(--display); font-size: 1.02rem; font-weight: 800; letter-spacing: 0.04em; text-decoration: none; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand b { color: var(--gold); }
.site-header nav { display: flex; gap: clamp(14px, 2.4vw, 34px); }
.site-header nav a { color: var(--muted-warm); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.13em; text-decoration: none; text-transform: uppercase; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--gold); }
.checkout-status { justify-self: end; border: 1px solid rgba(184, 146, 58, 0.45); border-radius: 999px; padding: 8px 14px; color: var(--gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }

.hero { position: relative; min-height: 94vh; display: grid; align-items: end; overflow: hidden; background: var(--ink-warm); }
.hero__video, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__video { object-fit: cover; }
.hero__shade { background: linear-gradient(90deg, rgba(23, 20, 15, 0.94) 0%, rgba(23, 20, 15, 0.58) 49%, rgba(23, 20, 15, 0.28) 100%), linear-gradient(0deg, var(--ink-warm) 0%, transparent 38%); }
.hero__content { position: relative; z-index: 2; padding-bottom: clamp(68px, 9vw, 116px); padding-top: 150px; }
.hero h1 { max-width: 900px; font-size: clamp(4rem, 11vw, 9.5rem); text-shadow: 0 6px 35px rgba(0, 0, 0, 0.65); }
.hero__lede { max-width: 670px; margin: 24px 0 0; color: var(--off-white); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 0; border-radius: 999px; padding: 14px 24px; font-size: 0.84rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); }
.button:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); transition-duration: 80ms; }
@media (prefers-reduced-motion: reduce) { .button, .button:hover, .button:active { transition: none; transform: none; } }
.button--primary { background: var(--gold); color: var(--text-on-light); box-shadow: 0 2px 8px rgba(23, 20, 15, 0.25); }
.button--primary:hover, .button--primary:focus-visible { background: var(--gold-hover); box-shadow: 0 10px 24px rgba(184, 146, 58, 0.4); }
.button--primary:active { box-shadow: 0 3px 10px rgba(184, 146, 58, 0.3); }
.button--ghost { border: 1px solid rgba(243, 238, 228, 0.3); color: var(--off-white); background: rgba(23, 20, 15, 0.55); }
.button--ghost:hover, .button--ghost:focus-visible { background: rgba(243, 238, 228, 0.1); border-color: rgba(243, 238, 228, 0.55); }
.hero__notice { margin: 22px 0 0; color: var(--muted-warm); font-size: 0.82rem; }
.ticker { overflow: hidden; border-block: 2px solid var(--text-on-light); padding: 13px 20px; background: var(--charcoal); color: var(--off-white); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.18em; text-align: center; text-transform: uppercase; }
.ticker span { margin-inline: 12px; color: var(--gold); }

.intro { text-align: center; }
.intro h2 { max-width: 900px; margin-inline: auto; }
.intro > p:not(.eyebrow) { max-width: 720px; margin: 26px auto 0; color: var(--muted-warm); font-size: 1.08rem; }
.collection-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.collection-list span, .status-pill { border: 1px solid var(--border-dark); border-radius: 999px; padding: 8px 13px; color: var(--muted-warm); background: rgba(255, 255, 255, 0.025); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 46px; text-align: left; }
.route-card { position: relative; min-height: 260px; overflow: hidden; border: 1px solid var(--border-dark); border-radius: 24px; padding: 28px; color: var(--off-white); background: linear-gradient(145deg, var(--panel-warm-soft), var(--ink-warm)); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease; }
.route-card:hover { transform: translateY(-5px); border-color: rgba(184, 146, 58, 0.45); }
.route-card__number { display: block; margin-bottom: 48px; color: var(--gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.2em; }
.route-card h3 { font-size: 1.7rem; }
.route-card p { margin: 15px 0 24px; color: var(--muted-warm); font-size: 0.92rem; }
.route-card strong { color: var(--gold); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }

.catalog { background: var(--ink-warm); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.section-heading__note { max-width: 470px; margin: 0; color: var(--muted-warm); }
.catalog-controls { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; padding: 18px; border: 1px solid var(--border-dark); border-radius: 20px; background: var(--panel-warm); }
.catalog-controls label { display: grid; gap: 8px; color: var(--gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.catalog-controls input, .catalog-controls select { width: 100%; min-height: 48px; border: 1px solid rgba(243, 238, 228, 0.18); border-radius: 12px; padding: 0 14px; color: var(--off-white); background: #24211B; font-family: var(--body); font-size: 0.92rem; }
.catalog-controls select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27><path d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23B9B0A2%27 stroke-width=%272%27/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.catalog-controls input:focus-visible, .catalog-controls select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.catalog-controls input::placeholder { color: #9A9083; }
.catalog-summary { display: flex; justify-content: space-between; gap: 20px; margin: 22px 2px; color: var(--muted-warm); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.catalog-summary p { margin: 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-dark); border-radius: 20px; background: var(--panel-warm); box-shadow: 0 0 0 transparent; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.product-card:hover { transform: translateY(-5px); border-color: rgba(184, 146, 58, 0.45); box-shadow: var(--shadow); }
.product-card__link { display: block; color: inherit; text-decoration: none; }
.product-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #2B2721; }
.product-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 360ms ease; }
.product-card[data-collection="Clothing"] .product-card__media { background: #F4F1EA; }
.product-card[data-collection="Clothing"] .product-card__media img { object-fit: contain; object-position: center; }
.product-card:hover .product-card__media img { transform: scale(1.035); }
.badge { position: absolute; top: 12px; left: 12px; z-index: 2; border-radius: 999px; padding: 6px 11px; color: #F3EEE4; background: #17140F; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.badge--review { color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold); }
.badge--soldout { top: auto; bottom: 12px; color: #F3EEE4; background: #7A1F1F; }
/* Image pass 2026-08-27: soda photos are 3:4 in 4:5 cover boxes, so the crop
   costs ~6 percent of the height. Anchoring sodas to the top keeps bottle caps
   in frame and takes the loss at the base, which always has table margin.
   Clothing images are exact 4:5 and crop nothing. */
.product-card[data-product-type="soda"] .product-card__media img { object-position: center top; }
.product-detail[data-product-type="soda"] .detail-gallery__main img { object-position: center top; }
.detail-colorways { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.colorway-pill { border: 1px solid rgba(243, 238, 228, 0.25); border-radius: 999px; padding: 8px 14px; background: #24211B; color: var(--cream-warm); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.colorway-pill[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1D1913; }
.detail-soldout-note { margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-soft); font-size: 0.9rem; line-height: 1.5; }
.product-card__body { padding: 17px 17px 18px; }
.product-card__vendor { margin-bottom: 6px; color: var(--muted-warm); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.product-card h3 { min-height: 2.5em; font-family: var(--product); font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: 0; text-transform: none; }
.product-card__meta { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 18px; }
.price { color: var(--off-white); font-family: var(--product); font-size: 1.3rem; font-weight: 800; line-height: 1.15; }
.price small { display: block; margin-top: 5px; color: var(--muted-warm); font-family: var(--body); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.size { color: var(--muted-warm); font-size: 0.75rem; text-align: right; white-space: nowrap; }
/* Unconfirmed clothing prices: a status line, not a price. */
.price--pending { font-family: var(--body); font-size: 0.86rem; font-weight: 600; color: var(--muted-warm); line-height: 1.3; }
.checkout-button { width: calc(100% - 34px); min-height: 42px; margin: 0 17px 17px; border: 1px solid rgba(243, 238, 228, 0.14); border-radius: 999px; color: var(--muted-warm); background: #1F1B15; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; cursor: not-allowed; }
.empty-state { border: 1px dashed rgba(243, 238, 228, 0.22); border-radius: 20px; padding: 60px 24px; text-align: center; }
.empty-state h3 { font-size: 1.8rem; }
.empty-state p { color: var(--muted-warm); }
.catalog--preview .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Placeholder card (featured photo slot): the tile is generated art, so it
   sits flat with a dashed rule instead of a shadow, and does not lift on hover. */
@media (hover: hover) and (pointer: fine) {
  .product-grid:hover .product-card { opacity: 0.6; }
  .product-grid:hover .product-card:hover { opacity: 1; }
  .product-card { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 300ms ease; }
}
.product-card--placeholder { border-style: dashed; }
.product-card--placeholder:hover { transform: none; box-shadow: none; }
.product-card--placeholder .product-card__media img { object-fit: cover; }
.catalog-cta, .collection-directory__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; border: 1px solid var(--border-dark); border-radius: 20px; padding: 22px 24px; background: var(--panel-warm); }
.catalog-cta p, .collection-directory__cta p { margin: 0; color: var(--muted-warm); font-weight: 700; }

.inner-page { background: var(--ink-warm); }
.page-hero { padding-block: clamp(78px, 10vw, 132px) clamp(64px, 8vw, 100px); }
.page-hero h1 { max-width: 980px; font-size: clamp(3rem, 10vw, 8.7rem); }
.page-hero > p:last-child { max-width: 720px; margin: 28px 0 0; color: var(--muted-warm); font-size: 1.08rem; }
.catalog--shop { padding-top: 0; }
.collection-directory { padding-top: 0; background: var(--ink-warm); }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.collection-card { overflow: hidden; border: 1px solid var(--border-dark); border-radius: 24px; color: var(--off-white); background: var(--panel-warm); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.collection-card:hover { transform: translateY(-5px); border-color: rgba(184, 146, 58, 0.45); box-shadow: var(--shadow); }
.collection-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: #2B2721; }
.collection-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 360ms ease; }
.collection-card:hover .collection-card__media img { transform: scale(1.04); }
.collection-card__body { padding: 22px; }
.collection-card__body span { color: var(--gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.collection-card__body h2 { margin-top: 8px; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.collection-card__body p { margin: 18px 0 0; color: var(--muted-warm); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }

.motion-break { position: relative; min-height: 70vh; display: grid; align-items: center; overflow: hidden; background: var(--ink-warm); }
.motion-break video, .motion-break__shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.motion-break__shade { background: linear-gradient(90deg, rgba(23, 20, 15, 0.92), rgba(23, 20, 15, 0.35)), linear-gradient(0deg, var(--charcoal) 0%, transparent 35%); }
.motion-break__content { position: relative; z-index: 2; }
.motion-break h2 { max-width: 720px; }
.motion-break__content > p:last-child { max-width: 600px; margin-top: 24px; color: var(--off-white); font-size: 1.08rem; }
.clothing { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr); align-items: center; gap: clamp(40px, 7vw, 86px); }
.clothing__visual { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 520px; }
.clothing__visual img { width: 100%; height: 100%; display: block; object-fit: cover; border: 1px solid var(--border-dark); border-radius: 20px; background: #F4F1EA; }
.clothing__visual .clothing__lead { grid-row: 1 / span 2; }
.clothing p:not(.eyebrow) { max-width: 700px; margin-top: 24px; color: var(--muted-warm); }
.clothing__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.clothing__actions .status-pill { margin-top: 0; }
.status-pill { display: inline-block; margin-top: 8px; color: var(--gold); }

.site-footer { padding-top: 70px; background: var(--ink-warm); border-top: 1px solid var(--border-dark); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.9fr 0.9fr 0.7fr; gap: 40px; }
.brand--footer { margin-bottom: 18px; }
.brand--footer img { width: 62px; height: 62px; }
.site-footer h2 { margin-bottom: 14px; font-family: var(--body); font-size: 0.75rem; letter-spacing: 0.14em; }
.site-footer p, .site-footer address { color: var(--muted-warm); font-size: 0.88rem; font-style: normal; }
.site-footer a { color: var(--off-white); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--gold); }
.footer-policy-list { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.footer-policy-list li + li { margin-top: 2px; }
/* Inline-block plus vertical padding lifts each row to about 28px, so adjacent
   link targets clear the 24px minimum and the focus ring misses its neighbour. */
.footer-policy-list a { display: inline-block; padding-block: 3px; }
.footer-social-list { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.footer-social-list li + li { margin-top: 2px; }
.footer-social-list a { display: inline-flex; align-items: center; gap: 9px; padding-block: 3px; }
.footer-social-list svg { flex: 0 0 auto; color: var(--gold); }
.site-footer .brand img { width: 40px; height: 40px; }
.footer-grid > div:first-child .brand { margin-bottom: 8px; }
.footer-grid > div:first-child p { margin-top: 0; }
.footer-legal { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 50px; padding-block: 18px; border-top: 1px solid var(--border-dark); color: #9A9083; font-size: 0.75rem; }
.site-credit { display: inline-flex; align-items: center; gap: 9px; color: var(--muted-warm) !important; font-weight: 600; letter-spacing: 0.035em; white-space: nowrap; transition: color 180ms ease; }
.site-credit img { width: 32px; height: 32px; border: 1px solid rgba(184, 146, 58, 0.3); border-radius: 8px; background: #17140F; object-fit: contain; }
.site-credit strong { color: var(--off-white); font-weight: 800; }
.site-credit:hover, .site-credit:focus-visible { color: var(--gold) !important; }

.detail-page { background: var(--ink-warm); }
.detail-main { min-height: 72vh; padding-top: 42px; }
.back-link { display: inline-block; margin-bottom: 28px; color: var(--muted-warm); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.back-link:hover { color: var(--gold); }
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(34px, 7vw, 84px); align-items: start; }
.detail-gallery { min-width: 0; }
.detail-gallery__main { aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--border-dark); border-radius: 26px; background: var(--panel-warm); }
.detail-gallery__main img { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-detail[data-product-type="clothing"] .detail-gallery__main,
.product-detail[data-product-type="clothing"] .gallery-thumbs button { background: #F4F1EA; }
.gallery-focus { transition: transform 180ms ease; }
.product-detail[data-product-type="clothing"] .gallery-focus { object-fit: contain; object-position: center; }
.gallery-focus--full { transform: none !important; transform-origin: center; }
.gallery-focus--left { transform-origin: left center; }
.gallery-focus--right-top { transform-origin: right top; }
.gallery-focus--right-middle { transform-origin: right center; }
.gallery-focus--right-bottom { transform-origin: right bottom; }
.gallery-focus--left-top { transform-origin: left top; }
.gallery-focus--left-bottom { transform-origin: left bottom; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery-thumbs button { width: 76px; aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; border-radius: 12px; padding: 0; background: var(--panel-warm); cursor: pointer; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--gold); }
.gallery-thumbs img { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-detail[data-product-type="clothing"] .gallery-thumbs button { aspect-ratio: 4 / 5; }
.product-detail[data-product-type="clothing"] .gallery-thumbs img { object-fit: contain; object-position: center; }
.detail-info { padding-top: 16px; }
.detail-title { margin: 12px 0 22px; font-family: var(--product); font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: 0; text-transform: none; text-wrap: balance; }
.detail-price { color: var(--off-white); font-family: var(--product); font-size: 2.1rem; font-weight: 800; }
.detail-price span { margin-left: 8px; color: var(--muted-warm); font-family: var(--body); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.detail-copy { margin: 24px 0; color: var(--muted-warm); font-size: 1.02rem; }
.detail-pickup-flag { display: inline-block; margin: 12px 0 0; border-radius: 999px; padding: 6px 12px; color: var(--text-on-light); background: var(--gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.detail-pickup-note { margin: 0; color: var(--muted-warm); font-size: 0.95rem; }
.detail-pieces-note { margin: 0; color: var(--muted-warm); font-size: 0.95rem; }

/* Explainer stack: labeled blocks that answer "how does this purchase work"
   at the point of decision. The pickup callout is deliberately louder than
   the rest; it prevents a checkout failure the customer would blame on
   their address. */
.detail-explainers { display: grid; gap: 14px; margin: 0 0 26px; }
.explainer { padding: 16px 18px; border: 1px solid var(--border-dark); border-radius: 12px; }
.explainer--callout { border-color: rgba(184, 146, 58, 0.5); background: rgba(184, 146, 58, 0.07); }
.explainer__title { margin: 0 0 8px; color: var(--off-white); font-family: var(--body); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.explainer--callout .explainer__title { color: var(--gold); }
.explainer p { margin: 0; color: var(--muted-warm); font-size: 0.95rem; }
.explainer p + p { margin-top: 8px; }
.explainer a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.explainer-pieces { margin: 8px 0 0; padding: 0; list-style: none; }
.explainer-pieces li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border-dark); color: var(--off-white); font-size: 0.92rem; }
.explainer-pieces .piece-price { color: var(--muted-warm); }
.explainer-pieces__total { font-weight: 800; }
.explainer-pieces__total .piece-price { color: var(--off-white); }
.product-card__flag { margin-top: 6px; color: var(--gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.detail-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0; border-block: 1px solid var(--border-dark); }
.detail-facts div { padding: 14px 0; }
.detail-facts div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--border-dark); }
.detail-facts dt { color: #9A9083; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.detail-facts dd { margin: 3px 0 0; color: var(--off-white); font-size: 1.05rem; }
.review-note { border-left: 3px solid var(--gold); padding: 11px 14px; color: var(--off-white); background: var(--gold-soft); font-size: 0.82rem; }
.detail-checkout { width: 100%; min-height: 54px; margin-top: 18px; border: 1px solid rgba(243, 238, 228, 0.15); border-radius: 999px; color: var(--muted-warm); background: var(--panel-warm); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; cursor: not-allowed; }
.integration-note { margin-top: 10px; color: #9A9083; font-size: 0.75rem; text-align: center; }
.related { padding-top: 100px; }
.product-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.not-found { min-height: 100vh; display: grid; place-content: center; justify-items: start; }
.not-found h1 { max-width: 850px; font-size: clamp(3.8rem, 9vw, 8rem); }
.not-found > p:not(.eyebrow) { color: var(--muted-warm); font-size: 1.1rem; }
.not-found .button { margin-top: 16px; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { grid-column: 1 / -1; justify-content: center; overflow-x: auto; padding-bottom: 8px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog--preview .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-grid, .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 740px) {
  .wrap { width: min(100% - 28px, 1180px); }
  .site-header { min-height: 72px; padding-inline: 14px; gap: 10px; }
  .site-header nav { justify-content: flex-start; gap: 22px; padding: 5px 2px 9px; }
  .site-header nav a { white-space: nowrap; font-size: 0.75rem; }
  .site-header nav a[href$="collection=Clothing"] { display: none; }
  .brand { font-size: 0.86rem; }
  .brand img { width: 38px; height: 38px; }
  .checkout-status { padding: 7px 9px; font-size: 0.75rem; }
  .hero { min-height: 88vh; }
  .hero__shade { background: linear-gradient(0deg, rgba(23, 20, 15, 0.94) 0%, rgba(23, 20, 15, 0.46) 72%, rgba(23, 20, 15, 0.62) 100%); }
  .hero__content { padding-top: 190px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 6.6rem); }
  .page-hero h1 { font-size: clamp(2.6rem, 12.5vw, 6rem); }
  .chapter--film h1 { font-size: clamp(2.8rem, 13vw, 6.6rem); }
  .hero__lede { font-size: 1rem; }
  .ticker { overflow: hidden; line-height: 1.7; text-align: center; white-space: normal; }
  .section-heading { display: block; }
  .section-heading__note { margin-top: 20px; }
  .catalog-controls { grid-template-columns: 1fr; }
  .product-grid, .product-grid--related, .catalog--preview .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card { border-radius: 16px; }
  .product-card__body { padding: 13px; }
  .product-card h3 { min-height: 2.2em; font-size: 1.08rem; }
  .product-card__meta { display: block; margin-top: 14px; }
  .size { margin-top: 7px; text-align: left; }
  .checkout-button { width: calc(100% - 26px); margin: 0 13px 13px; padding-inline: 10px; font-size: 0.75rem; }
  .catalog-summary { display: block; }
  .catalog-summary p + p { margin-top: 5px; }
  .route-grid, .collection-grid { grid-template-columns: 1fr; }
  .route-card { min-height: 230px; }
  .catalog-cta, .collection-directory__cta { align-items: flex-start; flex-direction: column; }
  .catalog-cta .button, .collection-directory__cta .button { width: 100%; }
  .page-hero { padding-top: 64px; }
  .clothing { grid-template-columns: 1fr; }
  .clothing__visual { min-height: 460px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: auto; }
  .footer-legal { align-items: flex-start; flex-direction: column; gap: 14px; }
  .product-detail { grid-template-columns: 1fr; }
  .detail-info { padding-top: 0; }
  .detail-title { font-size: clamp(2.2rem, 10vw, 3rem); }
}

@media (max-width: 390px) {
  .brand span { white-space: nowrap; line-height: 1.05; }
  .checkout-status { max-width: 105px; text-align: center; line-height: 1.2; }
}
@media (max-width: 359px) {
  .product-grid, .product-grid--related, .catalog--preview .product-grid { grid-template-columns: 1fr; }
  .product-card h3 { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Long-form legal and contact pages. Honeypot fields reuse the existing .visually-hidden class, so no new hider is defined. */
.legal { max-width: 780px; margin-inline: auto; color: var(--muted-warm); font-size: 1rem; line-height: 1.75; }
.legal strong, .legal b { color: var(--off-white); font-weight: 700; }
.legal h2 { margin-top: 46px; color: var(--off-white); font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.legal h3 { margin-top: 30px; color: var(--off-white); font-family: var(--display); font-size: 1.15rem; line-height: 1.2; }
.legal p { margin: 0 0 18px; }
.legal address { font-style: normal; }
.legal ul, .legal ol { margin: 0 0 18px; padding-left: 24px; }
.legal ul { list-style: disc outside; }
.legal ol { list-style: decimal outside; }
.legal li { margin-bottom: 9px; }
.legal li::marker { color: var(--gold); }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--off-white); text-decoration-thickness: 2px; }
.legal a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.legal__meta { margin: 0 0 34px; color: var(--muted-warm); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }

.legal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: 38px; padding-bottom: 18px; border-bottom: 1px solid var(--border-dark); }
.legal-nav a { padding: 6px 0; color: var(--muted-warm); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; }
.legal-nav a + a::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px 4px; border-radius: 50%; background: var(--gold-deep); }
.legal-nav a:hover { color: var(--gold); }
.legal-nav a[aria-current="page"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(32px, 5vw, 64px); }

.contact-form { display: grid; gap: 16px; border: 1px solid var(--border-dark); border-radius: 24px; padding: clamp(22px, 3vw, 32px); background: var(--panel-warm-soft); }
.contact-form label { display: grid; gap: 8px; color: var(--muted-warm); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--border-dark); border-radius: 14px; padding: 14px 16px; color: var(--off-white); background: var(--panel-warm); font: inherit; font-size: 0.95rem; line-height: 1.5; }
.contact-form textarea { min-height: 168px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted-warm); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { border-color: var(--gold); outline: 3px solid var(--gold); outline-offset: 2px; }
.contact-form button[type="submit"] { justify-self: start; }
.contact-form__status { border: 1px solid var(--border-dark); border-left: 3px solid var(--gold); border-radius: 14px; padding: 14px 16px; color: var(--off-white); background: var(--panel-warm); font-size: 0.9rem; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* Chapter flow, 2026-07-26. The homepage reads as a sequence of full-viewport
   film beats alternating with editorial and product beats, replacing the single
   hero plus catalog layout. Numbered kickers carry the reader through it. */
.film-page { background: var(--ink-warm); }
.chapter { position: relative; }
.chapter__number { margin-bottom: 10px; color: var(--gold); font-family: var(--display); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.34em; }

.chapter--film { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: var(--ink-warm); }
.chapter--film.chapter--short { min-height: 78vh; min-height: 78svh; }
.chapter__video, .chapter__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.chapter__video { object-fit: cover; }
.chapter__shade { background: linear-gradient(90deg, rgba(23, 20, 15, 0.93), rgba(23, 20, 15, 0.42) 62%, rgba(23, 20, 15, 0.72)), linear-gradient(0deg, var(--ink-warm) 2%, transparent 34%); }
.chapter__content { position: relative; z-index: 2; padding-block: clamp(64px, 9vw, 120px); }
.chapter--film h1 { max-width: 15ch; font-size: clamp(3.6rem, 11vw, 9rem); }
.chapter--film h2 { max-width: 15ch; font-size: clamp(2.8rem, 8vw, 6.4rem); }
.chapter__lede { max-width: 54ch; margin: 26px 0 0; color: var(--off-white); font-size: clamp(1rem, 1.6vw, 1.18rem); }
.chapter__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.chapter__notice { margin: 20px 0 0; color: var(--gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; }

.chapter--editorial { background: var(--charcoal); }
/* The origin paragraph is body copy, not a one-line lede; give it the wider measure. */
#origin .chapter__lede { max-width: 60ch; }

.chapter--tease { background: var(--charcoal); }
/* The tease is a hint, not a section. The source images are 1200px squares, so
   left at full column width this chapter grew taller than the film beats around
   it and swamped the soda story it is meant to interrupt briefly. Capped to a
   4 by 5 portrait card, matching the catalog gallery standard. */
.tease-grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 64px); }
/* height: auto is load bearing. The img carries width and height attributes of
   1200, and without it the attribute height wins over aspect-ratio, leaving a
   380 by 1200 sliver. */
.tease-grid__media img { width: 100%; max-width: 380px; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--border-dark); border-radius: 24px; background: #F4F1EA; }
.tease-grid h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
.tease-grid p { max-width: 52ch; margin: 22px 0 28px; color: var(--muted-warm); }

@media (max-width: 860px) {
  .tease-grid { grid-template-columns: 1fr; }
  .chapter--film { min-height: 88vh; min-height: 88svh; }
  .chapter__shade { background: linear-gradient(0deg, rgba(23, 20, 15, 0.94) 12%, rgba(23, 20, 15, 0.55) 62%, rgba(23, 20, 15, 0.8)); }
}

/* No prefers-reduced-motion rule on the chapter videos, by Ra's decision on
   2026-07-26: the moving video is the design and it plays for everyone, the
   same as the original soda site. An earlier version hid the videos entirely
   under that preference, which blanked every film chapter. Do not reintroduce
   a display rule here. */

/* Closing chapter, 2026-07-26. The page previously stopped at the clothing line
   and the footer simply arrived. This is the ending beat, and it carries the
   Pour List signup because the brand line and the ask are one move, not two. */
.chapter--closing { background: var(--ink-warm); text-align: center; }
.closing h2 { max-width: 20ch; margin-inline: auto; font-size: clamp(2.2rem, 5.4vw, 4.6rem); }
.closing__kicker { margin: 0 0 18px; color: var(--gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; }
.closing__line { max-width: 44ch; margin: 22px auto 0; color: var(--muted-warm); font-size: clamp(1rem, 1.6vw, 1.18rem); }
.closing__logo { display: block; width: 140px; height: 140px; margin: 38px auto 0; object-fit: contain; }

.pour-form { max-width: 560px; margin: 44px auto 0; }
.pour-form__pitch { margin: 0 0 18px; color: var(--muted-warm); font-size: 1rem; }
.pour-form__pitch strong { color: var(--off-white); }
.pour-form__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pour-form input[type="email"] { flex: 1 1 260px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border-dark); border-radius: 14px; color: var(--off-white); background: var(--panel-warm); font: inherit; font-size: 0.95rem; }
.pour-form input[type="email"]::placeholder { color: #9A9083; }
.pour-form input[type="email"]:focus-visible { border-color: var(--gold); outline: 3px solid var(--gold); outline-offset: 2px; }
.pour-form button[type="submit"] { flex: 0 0 auto; }

/* Redesign pass C, 2026-08-16 (client brief 2026-08-14 items 2, 3, 6, 7). */

/* 02: three small value boxes under the statement. Equal width, hairline
   border, gold label. Static; the reveal comes from the section itself. */
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 38px 0 0; padding: 0; list-style: none; }
.value-card { position: relative; overflow: hidden; border: 1px solid var(--border-dark); border-radius: 18px; padding: 28px 24px 30px; background: var(--panel-warm-soft); }
.value-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: var(--gold); }
.value-card h3 { font-size: 0.86rem; letter-spacing: 0.2em; color: var(--gold); line-height: 1.3; }
.value-card p { margin: 12px 0 0; color: var(--muted-warm); font-size: 0.98rem; }

/* 03: two-panel pick. Left the fit, right the Wock pint beside the branded
   cup (one existing image carries both, HOMEPAGE-REDESIGN-PLAN section 2).
   Panels are 4:5, whole panel is the link, label rides a base gradient. */
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.pick-panel { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--border-dark); border-radius: 24px; background: var(--panel-warm); color: var(--off-white); text-decoration: none; }
.pick-panel img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 420ms ease; }
.pick-panel--fit img { object-fit: cover; object-position: center top; background: #F4F1EA; }
.pick-panel--pour img { object-position: center; }
.pick-panel:hover img { transform: scale(1.03); }
.pick-panel__label { position: absolute; inset: auto 0 0; padding: 72px 24px 22px; background: linear-gradient(0deg, rgba(23, 20, 15, 0.92) 0%, rgba(23, 20, 15, 0.55) 55%, transparent 100%); font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15; }
.pick-panel__kicker { display: block; margin-bottom: 8px; color: var(--gold); font-size: 0.75rem; letter-spacing: 0.3em; }

/* 06: three photo route cards on the dark page. Placeholders ship until the
   client photos land (ROUTE-CARDS-PLAN-2026-08-16.md); the frame does not
   change when they do. */
.route-grid--photo { gap: 20px; }
.route-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--border-dark); border-radius: 24px; background: var(--panel-warm); color: var(--off-white); text-decoration: none; transition: border-color 180ms ease; }
.route-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 420ms ease; }
.route-photo:hover { border-color: rgba(184, 146, 58, 0.55); }
.route-photo:hover img { transform: scale(1.03); }
.route-photo__label { position: absolute; inset: auto 0 0; padding: 72px 24px 22px; background: linear-gradient(0deg, rgba(23, 20, 15, 0.94) 0%, rgba(23, 20, 15, 0.5) 60%, transparent 100%); font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05; }
.route-photo__label::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 12px; background: var(--gold); transform: scaleX(0.55); transform-origin: left; transition: transform 240ms ease; }
.route-photo:hover .route-photo__label::after, .route-photo:focus-visible .route-photo__label::after { transform: scaleX(1); }
.route-photo__number { display: block; margin-bottom: 8px; color: var(--gold); font-size: 0.75rem; letter-spacing: 0.3em; }

/* 07: the full logo, transparent, behind the origin text. Decorative CSS
   background, right-aligned, clipped to the section; the text column stays
   fully readable because the mark sits at 7 percent. */
.origin--marked { position: relative; overflow: hidden; }
.origin--marked::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../allegiance-logo.png") no-repeat right 4vw center / min(36vw, 460px) auto; opacity: 0.09; pointer-events: none; }
.origin--marked > .wrap { position: relative; z-index: 1; }

@media (max-width: 860px) {
  .value-grid { grid-template-columns: 1fr; }
  .pick-grid { grid-template-columns: 1fr; gap: 14px; }
  .route-grid--photo { grid-template-columns: 1fr; }
  .origin--marked::before { background-position: right 16px bottom 16px; background-size: 52vw auto; }
}

/* Redesign pass D, 2026-08-16 (client brief item 4): ALWAYS IN MOTION.
   Background is the Move In Silence hallway clip from the Allegiance
   Lifestyle site (motion.mp4, byte copy of ch-outthedoor.mp4; motion-mobile
   is the 960px cut). Two marquee tracks of ALLEGIANCE / LIFESTYLE run
   behind the headline in gold and off-white; the headline words rise in
   when the chapter enters (storefront.js adds .is-in via the same
   IntersectionObserver that starts the video). Everything is transform and
   opacity only, no layout animation, no per-frame JS. Base state with JS
   off: words visible, tracks drifting, so the page never depends on the
   reveal. prefers-reduced-motion: tracks stop, words static (the chapter
   videos themselves keep playing by Ra's 2026-07-26 decision; the video is
   the design). */
.chapter--motion { background: var(--ink-warm); }
/* Grade E "warm kodak" (Ra 2026-08-18): a light film grade on the clip and a
   lighter shade, vignette instead of a flat side wash, so the figure and the
   hallway light show through while the lower-left headline keeps its ground. */
#wave .chapter__video { filter: contrast(1.12) saturate(1.1) brightness(0.95) sepia(0.2); }
.chapter__shade--motion { background:
  radial-gradient(ellipse at 50% 45%, rgba(23, 20, 15, 0) 38%, rgba(23, 20, 15, 0.62) 100%),
  linear-gradient(90deg, rgba(23, 20, 15, 0.62), rgba(23, 20, 15, 0.22) 55%, rgba(23, 20, 15, 0.5)),
  linear-gradient(0deg, var(--ink-warm) 2%, transparent 30%); }
/* Idea 4, 2026-08-16 (zero credits): the two tracks are set INTO the hallway
   as planes down each wall, converging toward the lamp, and blended into the
   wood so the letters read as light on the walls; the figure walks between
   them. Still transform-only: perspective + rotateY are static, the drift is
   the same translateX keyframe. */
.motion-type { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; perspective: 1100px; perspective-origin: 52% 46%; }
.motion-plane { position: absolute; height: 40%; width: 64%; display: flex; align-items: center; overflow: hidden; mix-blend-mode: screen; opacity: 0.6; }
.motion-plane--left { left: -6%; top: 50%; transform-origin: left center; transform: rotateY(56deg); mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 70%, transparent); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 70%, transparent); }
.motion-plane--right { right: -6%; top: 14%; transform-origin: right center; transform: rotateY(-56deg); mask-image: linear-gradient(270deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 70%, transparent); -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 70%, transparent); }
.motion-track { display: flex; width: max-content; white-space: nowrap; will-change: transform; animation: motion-drift 70s linear infinite; }
.motion-track span { padding-inline: 0.28em; font-family: var(--display); font-size: clamp(5rem, 15vw, 14rem); font-weight: 900; line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase; }
.motion-track--a span:nth-child(odd), .motion-track--b span:nth-child(even) { color: transparent; -webkit-text-stroke: 2px rgba(214, 176, 90, 0.9); }
.motion-track--a span:nth-child(even), .motion-track--b span:nth-child(odd) { color: rgba(243, 238, 228, 0.55); }
.motion-track--b { animation-direction: reverse; animation-duration: 90s; }
@keyframes motion-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Text sits in the lower third of this chapter so the ALLEGIANCE chest
   print on the figure (upper-middle of the frame in scene 1) stays clear of
   the headline. The chapter is a grid with align-items center; end-align
   only this content block. */
.chapter--motion .chapter__content { z-index: 2; align-self: end; padding-bottom: clamp(56px, 9vw, 120px); }
.chapter--motion .motion-title { max-width: 11ch; }
.motion-title { position: relative; }
/* Words are spans, and the site accent rule (h2 span) would gild all three;
   inherit the heading color and let only the accent word carry gold. */
.motion-word { display: inline-block; color: inherit; transform: translateY(0); opacity: 1; }
/* Stagger indices live here, not in style attributes: the site CSP is
   style-src self and blocks inline styles (caught on the live URL 2026-08-17). */
.motion-word:nth-child(1) { --i: 0; }
.motion-word:nth-child(2) { --i: 1; }
.motion-word:nth-child(3) { --i: 2; }
.motion-word--accent { color: var(--gold); }
.chapter--motion.is-armed .motion-word { transform: translateY(0.35em); opacity: 0; }
.chapter--motion.is-armed.is-in .motion-word { transform: translateY(0); opacity: 1; transition: transform 640ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 110ms), opacity 520ms ease calc(var(--i, 0) * 110ms); }
.chapter--motion.is-armed .motion-lede { opacity: 0; transform: translateY(12px); }
.chapter--motion.is-armed.is-in .motion-lede { opacity: 1; transform: translateY(0); transition: transform 600ms ease 420ms, opacity 600ms ease 420ms; }
@media (prefers-reduced-motion: reduce) {
  .motion-track { animation: none; }
  .chapter--motion.is-armed .motion-word, .chapter--motion.is-armed .motion-lede { transform: none; opacity: 1; transition: none; }
}
@media (max-width: 860px) {
  .motion-track span { font-size: clamp(3.4rem, 22vw, 6rem); }
  .motion-plane { height: 30%; width: 76%; }
  .motion-plane--left { top: 58%; }
  .motion-plane--right { top: 8%; }
  .motion-plane--left { transform: rotateY(48deg); }
  .motion-plane--right { transform: rotateY(-48deg); }
}

/* Redesign pass F, 2026-08-16 (client brief, drink): the syrup should read
   rich, deep purple, glossy, thick, vibrant against the dark frame. Zero-cost
   first attempt before any regeneration: a static CSS grade on the hero video
   (GPU composited, no per-frame work) plus a syrup-tinted vignette and a soft
   gloss highlight in the hero shade. Purple lives ONLY here, per the palette.
   Measured on frame 64 of pour.mp4: center region went from RGB(111,40,116)
   to a deeper, more saturated purple (see ITERATION-LOG for the after read). */
#pour .chapter__video { filter: saturate(1.4) contrast(1.14) brightness(0.9); }
#pour .chapter__shade {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 28%),
    radial-gradient(ellipse 70% 60% at 62% 45%, rgba(75, 26, 120, 0.06) 0%, rgba(75, 26, 120, 0.22) 55%, rgba(23, 20, 15, 0.7) 100%),
    linear-gradient(90deg, rgba(23, 20, 15, 0.9), rgba(23, 20, 15, 0.32) 62%, rgba(23, 20, 15, 0.6)),
    linear-gradient(0deg, var(--ink-warm) 2%, transparent 34%);
}
@media (max-width: 860px) {
  #pour .chapter__video { filter: saturate(1.3) contrast(1.1) brightness(0.92); }
  #pour .chapter__shade {
    background:
      radial-gradient(ellipse 80% 55% at 50% 42%, rgba(75, 26, 120, 0.05) 0%, rgba(75, 26, 120, 0.2) 55%, rgba(23, 20, 15, 0.75) 100%),
      linear-gradient(0deg, rgba(23, 20, 15, 0.94) 12%, rgba(23, 20, 15, 0.45) 62%, rgba(23, 20, 15, 0.7));
  }
}

/* Surfaces sit last on purpose: same specificity as .chapter--editorial,
   .catalog, .chapter--closing, so source order lets the surface win. */
/* Surfaces, 2026-08-16 (client brief 2026-08-14): the page alternates dark and
   light sections so it does not read flat or overly dark. A surface class on a
   section sets its ground and flips the text tokens; every child rule keys off
   the tokens, so nothing else needs a light variant. Gold on light drops to
   --gold-deep (5.3:1 on off-white, 5.0:1 on cream, both AA); gold on dark
   stays --gold (6.3:1 on ink-warm). Measured 2026-08-16. */
.surface--dark { background: var(--ink-warm); color: var(--text-on-dark); }
.surface--charcoal { background: var(--charcoal); color: var(--text-on-dark); }
/* Literal grounds on purpose: the block below re-points --off-white at the
   dark text color for children, and a var() here would pick that up too. */
.surface--light { background: #F3EEE4; color: var(--text-on-light); }
.surface--cream { background: #EFE6D6; color: var(--text-on-light); }
.surface--light, .surface--cream {
  --gold: var(--gold-deep);
  --gold-soft: rgba(122, 93, 28, 0.14);
  --muted-warm: var(--muted-on-light);
  --off-white: var(--text-on-light);
  --border-dark: var(--border-light);
  --panel-warm: #FFFFFF;
  --panel-warm-soft: #F8F4EC;
  --shadow: 0 18px 44px rgba(29, 25, 19, 0.12);
}
.surface--light .product-card__media, .surface--cream .product-card__media { background: #FFFFFF; }
.surface--light .checkout-button, .surface--cream .checkout-button { color: var(--muted-on-light); background: #F8F4EC; border-color: var(--border-light); }
.surface--light :focus-visible, .surface--cream :focus-visible { outline-color: var(--text-on-light); }
.surface--light .button--primary, .surface--cream .button--primary { background: var(--text-on-light); color: #F3EEE4; }
.surface--light .button--primary:hover, .surface--cream .button--primary:hover { background: var(--charcoal); box-shadow: 0 10px 24px rgba(23, 20, 15, 0.3); }

/* ---- Homepage realign, 2026-08-24 (client-approved mockup2 direction) ---- */
.pick-browse { margin: 26px 0 0; color: var(--muted-warm); font-weight: 700; }
.pick-browse a { color: var(--off-white); text-decoration-color: var(--gold); text-underline-offset: 4px; }
.pick-browse a:hover { color: var(--gold-hover); }
.shop-visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 44px; }
.shop-visit-picture { display: block; min-width: 0; }
.shop-visit-grid > img, .shop-visit-picture > img { width: 100%; height: auto; display: block; border: 1px solid var(--border-dark); border-radius: 24px; background: var(--panel-warm); }
.shop-visit-info h3 { margin: 0 0 14px; font-family: var(--display); font-size: 1.4rem; font-weight: 900; }
.shop-visit-info address { margin: 0 0 18px; font-style: normal; font-size: 1.12rem; line-height: 1.7; color: var(--text-on-dark); }
.shop-visit-hours { margin: 0 0 26px; color: var(--muted-warm); font-weight: 700; }
.shop-visit-hours a { color: var(--off-white); text-decoration-color: var(--gold); text-underline-offset: 4px; }
.shop-visit-hours a:hover { color: var(--gold-hover); }
@media (max-width: 860px) {
  .shop-visit-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* Statement cards keep literal colors: surface--light remaps the tokens. */
.statement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.statement-card { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--border-light); border-radius: 24px; background: var(--charcoal); }
.statement-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.statement-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 110px 22px 20px; background: linear-gradient(180deg, rgba(23, 20, 15, 0) 0%, rgba(23, 20, 15, 0.72) 45%, rgba(23, 20, 15, 0.96) 100%); color: #F3EEE4; }
.statement-card__number { display: block; margin-bottom: 8px; color: #C9A552; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.3em; }
.surface--light .statement-card h3, .statement-card h3 { color: #F3EEE4; margin: 0 0 6px; font-family: var(--display); font-size: 1.12rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.surface--light .statement-card p, .statement-card p { margin: 0; font-size: 0.95rem; color: #B9B0A2; }
@media (max-width: 860px) {
  .statement-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Mobile pass 2026-09-03 (MOBILE-AUDIT-2026-09-03 findings 1, 2, 3, 6, 7). Kept at the
   end so it wins over the earlier 740px block without touching tablet rules. */
@media (max-width: 740px) {
  .site-header { grid-template-columns: auto 1fr; align-items: center; gap: 8px; min-height: 60px; padding: 6px 12px; }
  .site-header .brand span { display: none; }
  .site-header .brand img { width: 42px; height: 42px; }
  .site-header nav { grid-column: auto; justify-content: flex-end; gap: 2px; padding: 0; overflow: visible; }
  .site-header nav a { padding: 13px 7px; letter-spacing: 0.09em; }
  .hero__content { padding-top: 150px; }
  .detail-info { display: flex; flex-direction: column; }
  .detail-info > * { min-width: 0; }
  .detail-explainers { order: 10; margin: 24px 0 0; }
  .legal-nav { gap: 2px 18px; }
  .legal-nav a { padding: 12px 0; }
  .legal-nav a + a::before { display: none; }
  .not-found { min-height: auto; padding: 56px 0 72px; }
}

/* Tablet pass 2026-09-03 (tablet sweep at 768x1024 and 1024x768). Nav anchors get a
   44px hit box at every width (the 84px header absorbs it); 741-980 gets the one-row
   header and the buy-block-first product column; 741-860 keeps the story cards in
   columns instead of 728px-wide stacks. */
.site-header nav a { padding: 13px 6px; }
@media (max-width: 980px) {
  .site-header { grid-template-columns: auto 1fr; gap: 12px; }
  .site-header nav { grid-column: auto; justify-content: flex-end; gap: clamp(2px, 1vw, 10px); padding: 0; overflow: visible; }
  .detail-info { display: flex; flex-direction: column; }
  .detail-info > * { min-width: 0; }
  .detail-explainers { order: 10; margin: 24px 0 0; }
  .catalog-controls { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 741px) and (max-width: 860px) {
  .statement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Phone story-card ratio 2026-09-03 (MOBILE-AUDIT finding 5, middle path): the origin and
   pick cards keep one column on phones but drop from 4:5 to 4:3, so each card sheds about
   170px and the shelf arrives roughly two screens sooner. Heads stay in frame via top
   anchoring; the caption gradient is shortened to match the shallower card. */
@media (max-width: 740px) {
  .statement-card { aspect-ratio: 4 / 3; }
  .statement-card img { object-position: center top; }
  .statement-card figcaption { padding-top: 72px; }
  .pick-panel { aspect-ratio: 4 / 3; }
  .pick-panel--fit img { object-position: center top; }
  .pick-panel__label { padding-top: 56px; }
}

/* Fast path to products 2026-09-03 (finding 5 follow-up, Ra approved all three): hero CTA
   on every device; on phones the two pick routes share one row and the motion chapter
   drops to 60 percent of the screen. Chapter numbering untouched. */
.chapter__cta { margin: 22px 0 0; }
.chapter__cta .button { min-height: 44px; padding: 10px 18px; font-size: 0.75rem; letter-spacing: 0.1em; background: transparent; border-color: rgba(243, 238, 228, 0.45); box-shadow: none; }
.chapter__cta .button:hover, .chapter__cta .button:focus-visible { background: rgba(243, 238, 228, 0.1); border-color: rgba(243, 238, 228, 0.7); box-shadow: none; }
@media (max-width: 740px) {
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pick-panel { aspect-ratio: 4 / 5; }
  .pick-panel__label { padding: 44px 12px 14px; font-size: 0.85rem; }
  .pick-panel__kicker { margin-bottom: 5px; font-size: 0.75rem; letter-spacing: 0.18em; }
  .chapter--motion { min-height: 60vh; min-height: 60svh; }
}

/* Phone length plan 2026-09-03, steps 1 and 2 (Ra approved): origin cards become a swipe
   row on phones, the hero drops to 80svh, and a sticky Shop the shelf bar rides the bottom
   of the screen once the hero scrolls away (storefront.js arms it; no-JS base = visible). */
.shelf-bar { display: none; }
@media (max-width: 740px) {
  #pour.chapter--film { min-height: 80vh; min-height: 80svh; }
  .statement-grid { display: flex; gap: 12px; margin-inline: -14px; padding: 0 14px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .statement-grid::-webkit-scrollbar { display: none; }
  .statement-card { flex: 0 0 82%; scroll-snap-align: start; }
  .shelf-bar { position: sticky; bottom: 14px; z-index: 90; display: flex; width: max-content; margin: 0 14px 24px auto; min-height: 44px; padding: 10px 18px; font-size: 0.75rem; letter-spacing: 0.1em; opacity: 0.94; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
  .shelf-bar.is-armed { opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity 260ms ease, transform 260ms ease; }
  .shelf-bar.is-armed.is-ready { opacity: 0.94; transform: none; pointer-events: auto; }
}

/* Poster fix 2026-09-03: Ra saw chapter 04 resize on his phone when scrolling back past it.
   WebKit paints a video poster without object-fit, so each pause/replay flashed a
   letterboxed poster inside a cover-fitted box. The posters now paint as cover
   backgrounds on the video element itself and the poster attributes are gone. */
#pour .chapter__video { background: var(--ink-warm) url("../posters/motion-poster.webp") center / cover no-repeat; }
#wave .chapter__video { background: var(--ink-warm) url("../posters/pour-poster.webp") center / cover no-repeat; }

/* Viewport-unit fix 2026-09-03: Ra recording (iOS Safari) shows chapter 04 changing height as the
   toolbars collapse and return during a fast scroll, with the hero/shelf pill CSS missing because the
   -68 stylesheet pin was reused (immutable cache). On phones the two film chapters now take their
   height from the screen width (aspect ratio) so no viewport unit is involved at all. */
@media (max-width: 740px) {
  #pour.chapter--film { min-height: 0; aspect-ratio: 9 / 16; }
  .chapter--motion { min-height: 0; aspect-ratio: 4 / 5; }
}

/* Image delivery pass 2026-09-03 (Lighthouse): logos ship as small webp through picture;
   picture wrappers use display: contents so the existing img rules keep sizing them. */
.brand picture, .site-credit picture, .closing picture { display: contents; }

/* Product index 2026-09-03: a plain, visible list of every product link at the foot of the
   shop page, so crawlers and no-JS visitors reach the product pages without the grid. */
.product-index { padding-top: 0; }
.product-index h2 span { color: var(--gold); }
.product-index__lede { max-width: 60ch; color: var(--muted-warm); }
.product-index h3 { margin: 30px 0 10px; color: var(--gold); font-family: var(--body); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.product-index__list { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 28px; font-size: 0.95rem; }
.product-index__list li { break-inside: avoid; padding: 5px 0; }
.product-index__list a { color: var(--off-white); text-decoration-color: rgba(184, 146, 58, 0.5); text-underline-offset: 4px; }
.product-index__list a:hover { color: var(--gold); }
@media (max-width: 980px) { .product-index__list { columns: 2; } }
@media (max-width: 740px) { .product-index__list { columns: 1; } .product-index__list li { padding: 9px 0; } }

/* Product index groups fold per collection (2026-09-03). */
.product-index__group { border-top: 1px solid var(--border-dark); }
.product-index__group:last-of-type { border-bottom: 1px solid var(--border-dark); }
.product-index__group summary { list-style: none; cursor: pointer; padding: 14px 0; }
.product-index__group summary::-webkit-details-marker { display: none; }
.product-index__group summary h3 { display: flex; justify-content: space-between; align-items: center; margin: 0; }
.product-index__group summary h3 span { color: var(--muted-warm); font-size: 0.72rem; letter-spacing: 0.08em; }
.product-index__group summary h3::after { content: "+"; margin-left: 14px; color: var(--muted-warm); font-size: 1rem; }
.product-index__group[open] summary h3::after { content: "-"; }
.product-index__group .product-index__list { padding-bottom: 16px; }
.product-index h3 { margin: 0; }