:root {
  --bg: #14091f;
  --bg-deep: #0c0514;
  --panel: #1d0f2e;
  --panel-soft: #26133b;
  --cream: #faf5ec;
  --muted: #c9bfd6;
  --grape: #9b4dff;
  --grape-deep: #6d24b0;
  --citrus: #ff4fd8;
  --banana: #61e7ff;
  --ink: #221133;
  --border: rgba(250, 245, 236, 0.13);
  --display: "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(4, 0, 10, 0.32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  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(--banana); 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(--ink);
  background: var(--banana);
  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: 900; line-height: 0.98; letter-spacing: 0.018em; text-transform: uppercase; }
h1 span, h2 span { color: var(--grape); }
h2 { font-size: clamp(2.5rem, 6vw, 5.3rem); }
p { margin-top: 0; }
.eyebrow { margin-bottom: 18px; color: var(--banana); font-size: 0.72rem; 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(250, 245, 236, 0.1);
  background: linear-gradient(180deg, rgba(12, 5, 20, 0.86), rgba(12, 5, 20, 0));
}
.site-header--solid { position: sticky; background: rgba(12, 5, 20, 0.94); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--cream); font-family: var(--display); font-size: 1rem; letter-spacing: 0.06em; text-decoration: none; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand b { color: var(--grape); }
.site-header nav { display: flex; gap: clamp(14px, 2.4vw, 34px); }
.site-header nav a { color: var(--muted); font-size: 0.76rem; 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(--banana); }
.checkout-status { justify-self: end; border: 1px solid rgba(97, 231, 255, 0.45); border-radius: 999px; padding: 8px 14px; color: var(--banana); font-size: 0.7rem; 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(--bg-deep); }
.hero__video, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__video { object-fit: cover; }
.hero__shade { background: linear-gradient(90deg, rgba(12, 5, 20, 0.94) 0%, rgba(12, 5, 20, 0.58) 49%, rgba(12, 5, 20, 0.28) 100%), linear-gradient(0deg, var(--bg-deep) 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(--cream); 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: 12px 22px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.07em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.button--primary { background: var(--banana); color: var(--ink); }
.button--primary:hover { background: #8ceeff; }
.button--ghost { border: 1px solid rgba(250, 245, 236, 0.3); color: var(--cream); background: rgba(12, 5, 20, 0.55); }
.hero__notice { margin: 22px 0 0; color: var(--muted); font-size: 0.82rem; }
.ticker { overflow: hidden; border-block: 2px solid var(--ink); padding: 13px 20px; background: var(--grape-deep); color: var(--cream); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.18em; text-align: center; text-transform: uppercase; }
.ticker span { margin-inline: 12px; color: var(--banana); }

.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); 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); border-radius: 999px; padding: 8px 13px; color: var(--muted); background: rgba(255, 255, 255, 0.025); font-size: 0.74rem; 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); border-radius: 24px; padding: 28px; color: var(--cream); background: linear-gradient(145deg, var(--panel-soft), var(--bg-deep)); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease; }
.route-card:hover { transform: translateY(-5px); border-color: rgba(97, 231, 255, 0.7); }
.route-card__number { display: block; margin-bottom: 48px; color: var(--banana); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.2em; }
.route-card h3 { font-size: 1.7rem; }
.route-card p { margin: 15px 0 24px; color: var(--muted); font-size: 0.92rem; }
.route-card strong { color: var(--banana); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }

.catalog { background: var(--bg-deep); }
.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); }
.catalog-controls { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); }
.catalog-controls label { display: grid; gap: 7px; color: var(--muted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.catalog-controls input, .catalog-controls select { width: 100%; min-height: 48px; border: 1px solid rgba(250, 245, 236, 0.18); border-radius: 12px; padding: 0 14px; color: var(--cream); background: var(--bg-deep); }
.catalog-controls input::placeholder { color: #8a7a9a; }
.catalog-summary { display: flex; justify-content: space-between; gap: 20px; margin: 22px 2px; color: var(--muted); 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); border-radius: 20px; background: var(--panel); 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(155, 77, 255, 0.72); 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: #281440; }
.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: #f4f1ed; }
.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: 5px 10px; color: var(--ink); background: var(--banana); font-size: 0.64rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.badge--review { color: var(--cream); background: var(--citrus); }
.product-card__body { padding: 17px 17px 18px; }
.product-card__vendor { margin-bottom: 6px; color: var(--muted); font-size: 0.68rem; 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(--citrus); 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); font-family: var(--body); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.size { color: var(--muted); font-size: 0.72rem; text-align: right; }
.checkout-button { width: calc(100% - 34px); min-height: 42px; margin: 0 17px 17px; border: 1px solid rgba(250, 245, 236, 0.14); border-radius: 999px; color: #a99ab8; background: #160a23; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; cursor: not-allowed; }
.empty-state { border: 1px dashed rgba(250, 245, 236, 0.22); border-radius: 20px; padding: 60px 24px; text-align: center; }
.empty-state h3 { font-size: 1.8rem; }
.empty-state p { color: var(--muted); }
.catalog--preview .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-cta, .collection-directory__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; border: 1px solid var(--border); border-radius: 20px; padding: 22px 24px; background: var(--panel); }
.catalog-cta p, .collection-directory__cta p { margin: 0; color: var(--muted); font-weight: 700; }

.inner-page { background: var(--bg-deep); }
.page-hero { padding-block: clamp(78px, 10vw, 132px) clamp(64px, 8vw, 100px); }
.page-hero h1 { max-width: 980px; font-size: clamp(4rem, 10vw, 8.7rem); }
.page-hero > p:last-child { max-width: 720px; margin: 28px 0 0; color: var(--muted); font-size: 1.08rem; }
.catalog--shop { padding-top: 0; }
.collection-directory { padding-top: 0; background: var(--bg-deep); }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.collection-card { overflow: hidden; border: 1px solid var(--border); border-radius: 24px; color: var(--cream); background: var(--panel); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.collection-card:hover { transform: translateY(-5px); border-color: rgba(97, 231, 255, 0.7); box-shadow: var(--shadow); }
.collection-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: #281440; }
.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(--banana); font-size: 0.68rem; 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); font-size: 0.72rem; 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(--bg-deep); }
.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(12, 5, 20, 0.92), rgba(12, 5, 20, 0.35)), linear-gradient(0deg, var(--bg) 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(--cream); 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); border-radius: 20px; background: #f4f1ed; }
.clothing__visual .clothing__lead { grid-row: 1 / span 2; }
.clothing p:not(.eyebrow) { max-width: 700px; margin-top: 24px; color: var(--muted); }
.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(--banana); }

.site-footer { padding-top: 70px; background: var(--bg-deep); border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 50px; }
.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.72rem; letter-spacing: 0.14em; }
.site-footer p, .site-footer address { color: var(--muted); font-size: 0.88rem; font-style: normal; }
.site-footer a { color: var(--banana); text-decoration: none; }
.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-legal { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 50px; padding-block: 18px; border-top: 1px solid var(--border); color: #8a7a9a; font-size: 0.72rem; }
.site-credit { display: inline-flex; align-items: center; gap: 9px; color: #a99ab8 !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(155, 77, 255, 0.3); border-radius: 8px; background: #09070d; object-fit: contain; }
.site-credit strong { color: var(--cream); font-weight: 800; }
.site-credit:hover, .site-credit:focus-visible { color: var(--banana) !important; }

.detail-page { background: var(--bg-deep); }
.detail-main { min-height: 72vh; padding-top: 42px; }
.back-link { display: inline-block; margin-bottom: 28px; color: var(--muted); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.back-link:hover { color: var(--banana); }
.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); border-radius: 26px; background: var(--panel); }
.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: #f4f1ed; }
.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); cursor: pointer; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--banana); }
.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: 14px 0 22px; font-family: var(--product); font-size: clamp(2.7rem, 6.2vw, 5.5rem); font-weight: 800; line-height: 1.08; letter-spacing: 0; text-transform: none; }
.detail-price { color: var(--citrus); font-family: var(--product); font-size: 2.1rem; font-weight: 800; }
.detail-price span { margin-left: 8px; color: var(--muted); font-family: var(--body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.detail-copy { margin: 24px 0; color: var(--muted); font-size: 1.02rem; }
.detail-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0; border-block: 1px solid var(--border); }
.detail-facts div { padding: 14px 0; }
.detail-facts div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--border); }
.detail-facts dt { color: #8f7ca3; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.detail-facts dd { margin: 3px 0 0; color: var(--cream); }
.review-note { border-left: 3px solid var(--citrus); padding: 11px 14px; color: var(--cream); background: rgba(255, 79, 216, 0.09); font-size: 0.82rem; }
.detail-checkout { width: 100%; min-height: 54px; margin-top: 18px; border: 1px solid rgba(250, 245, 236, 0.15); border-radius: 999px; color: #a99ab8; background: var(--panel); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; cursor: not-allowed; }
.integration-note { margin-top: 10px; color: #8a7a9a; font-size: 0.72rem; 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); 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(3, 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.65rem; }
  .brand { font-size: 0.76rem; }
  .brand img { width: 38px; height: 38px; }
  .checkout-status { padding: 7px 9px; font-size: 0.58rem; }
  .hero { min-height: 88vh; }
  .hero__shade { background: linear-gradient(0deg, rgba(12, 5, 20, 0.94) 0%, rgba(12, 5, 20, 0.46) 72%, rgba(12, 5, 20, 0.62) 100%); }
  .hero__content { padding-top: 190px; }
  .hero h1 { font-size: clamp(3.65rem, 18vw, 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.58rem; }
  .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(3rem, 15vw, 5rem); }
}

@media (max-width: 390px) {
  .brand span { max-width: 110px; line-height: 1.05; }
  .checkout-status { max-width: 105px; text-align: center; line-height: 1.2; }
  .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); font-size: 1rem; line-height: 1.75; }
.legal strong, .legal b { color: var(--cream); font-weight: 700; }
.legal h2 { margin-top: 46px; color: var(--cream); font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.legal h3 { margin-top: 30px; color: var(--cream); 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(--banana); }
.legal a { color: var(--banana); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--cream); text-decoration-thickness: 2px; }
.legal a:focus-visible { outline: 3px solid var(--banana); outline-offset: 3px; }
.legal__meta { margin: 0 0 34px; color: var(--muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }

.legal-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.legal-nav a { border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; color: var(--muted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.legal-nav a:hover { border-color: var(--banana); color: var(--banana); }
.legal-nav a[aria-current="page"] { border-color: var(--banana); color: var(--ink); background: var(--banana); }

.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); border-radius: 24px; padding: clamp(22px, 3vw, 32px); background: var(--panel-soft); }
.contact-form label { display: grid; gap: 8px; color: var(--muted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; color: var(--cream); background: var(--panel); 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); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { border-color: var(--banana); outline: 3px solid var(--banana); outline-offset: 2px; }
.contact-form button[type="submit"] { justify-self: start; }
.contact-form__status { border: 1px solid var(--border); border-left: 3px solid var(--banana); border-radius: 14px; padding: 14px 16px; color: var(--cream); background: var(--panel); 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(--bg-deep); }
.chapter { position: relative; }
.chapter__number { margin-bottom: 10px; color: var(--banana); 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(--bg-deep); }
.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(12, 5, 20, 0.93), rgba(12, 5, 20, 0.42) 62%, rgba(12, 5, 20, 0.72)), linear-gradient(0deg, var(--bg-deep) 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(--cream); 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(--banana); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; }

.chapter--editorial { background: var(--bg); }
.editorial-grid { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.editorial-grid__aside { position: sticky; top: 120px; }
.editorial-grid h2 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); }
.editorial-grid p { max-width: 60ch; margin: 26px 0 0; color: var(--muted); font-size: 1.06rem; }

.chapter--tease { background: var(--bg); }
/* 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); border-radius: 24px; background: #f4f1ed; }
.tease-grid h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
.tease-grid p { max-width: 52ch; margin: 22px 0 28px; color: var(--muted); }

@media (max-width: 860px) {
  .editorial-grid, .tease-grid { grid-template-columns: 1fr; }
  .editorial-grid__aside { position: static; top: auto; }
  .chapter--film { min-height: 88vh; min-height: 88svh; }
  .chapter__shade { background: linear-gradient(0deg, rgba(12, 5, 20, 0.94) 12%, rgba(12, 5, 20, 0.55) 62%, rgba(12, 5, 20, 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(--bg-deep); text-align: center; }
.closing h2 { max-width: 20ch; margin-inline: auto; font-size: clamp(2.2rem, 5.4vw, 4.6rem); }
.closing__place { margin: 22px 0 0; color: var(--muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; }

.pour-form { max-width: 560px; margin: 44px auto 0; }
.pour-form__pitch { margin: 0 0 18px; color: var(--muted); font-size: 1rem; }
.pour-form__pitch strong { color: var(--cream); }
.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); border-radius: 14px; color: var(--cream); background: var(--panel); font: inherit; font-size: 0.95rem; }
.pour-form input[type="email"]::placeholder { color: #8a7a9a; }
.pour-form input[type="email"]:focus-visible { border-color: var(--banana); outline: 3px solid var(--banana); outline-offset: 2px; }
.pour-form button[type="submit"] { flex: 0 0 auto; }