/*
 * Gharam — Noir Vault homepage stylesheet.
 *
 * Translates the React/Babel prototype (noir.jsx) into vanilla CSS.
 * Every section, hover state, and rule comes from DESIGN.md.
 * Token references via var(--c-*, --f-*, --s-*) declared in base.css.
 */

/* ===================================================================
 * Layout primitives
 * =================================================================== */

.page {
  background: var(--c-bg);
  color: var(--c-cream);
  font-family: var(--f-sans);
  min-height: 100vh;
}

.section {
  padding: var(--s-xl) var(--page-x);
  border-bottom: 1px solid var(--c-rule);
}

.section--paper { background: var(--c-paper); }
.section--ink   { background: var(--c-ink); }

/* ===================================================================
 * Navigation
 * =================================================================== */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--page-x);
  border-bottom: 1px solid var(--c-rule);
}

.nav__brand {
  font-family: var(--f-display);
  font-size: 32px;
  font-style: italic;
  color: var(--c-cream);
  /* No letter-spacing on Playfair — brand rule */
}
.nav__brand .dot { color: var(--c-gold); }

.nav__center,
.nav__right {
  display: flex;
  align-items: center;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
  color: var(--c-cream-70);
  white-space: nowrap;        /* prevent link text from wrapping */
}
.nav__center { gap: 40px; }
.nav__right  { gap: 18px; }

.nav__center a { transition: color 0.2s; }
.nav__center a:hover { color: var(--c-cream); }
.nav__center a.is-active { color: var(--c-cream); }
.nav__right .cart  { color: var(--c-gold); }
.nav__right .nav__lang { color: var(--c-gold); }
.nav__right a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Hamburger burger button — hidden on desktop, shown on mobile */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 18px;
  color: var(--c-cream);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Mobile nav drawer — hidden by default on all screens; JS opens it */
.nav__drawer {
  display: none;
}

/* ===================================================================
 * Ribbon — apothecary catalogue header
 * =================================================================== */

.ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  padding: 12px var(--page-x);
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-18);
}
.ribbon > * { flex: 1 1 calc(100% / 6); }
.ribbon > :last-child { text-align: right; }

/* ===================================================================
 * Hero
 * =================================================================== */

.hero {
  position: relative;
  padding: 88px var(--page-x) 64px;
  border-bottom: 1px solid var(--c-rule);
}

.hero__grid {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: 32px;
}

.hero__rail {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero__rail--l { border-right: 1px solid var(--c-rule); padding-right: 24px; }
.hero__rail--r { border-left:  1px solid var(--c-rule); padding-left:  24px;
                 align-items: flex-end; text-align: right; }

.hero__rail .label {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-18);
}
.hero__rail .roman {
  font-family: var(--f-display);
  font-size: 46px;
  font-style: italic;
  line-height: 0.95;
  color: var(--c-cream);
}
.hero__rail .gold-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-18);
}
.hero__rail .fine {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-cream-70);
  line-height: 1.6;
  letter-spacing: var(--tr-18);
}
.hero__rail--r .name {
  font-family: var(--f-serif);
  font-size: 18px;
  color: var(--c-gold);
  line-height: 1.1;
}

.hero__center { text-align: center; padding: 24px 0; }

.hero__kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-gold);
  letter-spacing: var(--tr-32);
  margin-bottom: 30px;
}

.hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 12vw, 10.75rem);
  line-height: 0.88;
  font-weight: 400;
  color: var(--c-cream);
  margin: 0;
}
.hero__title em { font-style: italic; }

/* Calligraphy logo variant — inverted + screen blend removes white bg */
.hero__logo {
  display: block;
  max-width: min(460px, 100%);
  height: auto;
  margin: 0 auto;                   /* center within hero__title */
  /* invert: black→white; sepia+saturate: warm cream-brown tint */
  filter: invert(1) sepia(0.65) saturate(1.1) brightness(0.88);
  mix-blend-mode: screen;           /* white bg of inverted image disappears */
  opacity: 0.95;
}

.hero__rule {
  margin: 40px auto 0;
  max-width: 560px;
  position: relative;
}
.hero__rule::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0; height: 1px;
  background: var(--c-rule);
}
.hero__rule > span {
  position: relative;
  background: var(--c-bg);
  padding: 0 24px;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--c-cream-70);
}

.hero__actions {
  margin-top: 48px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero bottle frame */
.hero__bottle {
  margin: 56px auto 0;
  display: flex;
  justify-content: center;
}
.bottle-frame {
  width: 580px;
  max-width: 100%;
  height: 340px;
  position: relative;
  border: 1px solid var(--c-rule);
  background:
    radial-gradient(60% 80% at 50% 60%, rgba(138, 106, 58, 0.18) 0%, transparent 70%),
    var(--c-ink);
  overflow: hidden;
  /* Mobile: height set to auto in @media(max-width:720px) */
}
.bottle-frame .center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.bottle-frame .meta-tl,
.bottle-frame .meta-tr,
.bottle-frame .meta-bl,
.bottle-frame .meta-br {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--tr-18);
}
.bottle-frame .meta-tl { top: 18px; left: 18px; color: var(--c-cream-50); }
.bottle-frame .meta-tr { top: 18px; right: 18px; color: var(--c-gold); }
.bottle-frame .meta-foot {
  position: absolute;
  bottom: 18px; left: 18px; right: 18px;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-70);
  letter-spacing: var(--tr-18);
}

/* ===================================================================
 * Buttons
 * =================================================================== */

.btn {
  padding: 16px 30px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tr-24);
  text-transform: uppercase;
  border-radius: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
}
.btn--primary {
  background: var(--c-gold);
  color: var(--c-ink);
  border: 1px solid var(--c-gold);
}
.btn--primary:hover {
  background: var(--c-gold-hover);
  border-color: var(--c-gold-hover);
  transform: translateY(-1px);
}
.btn--primary:disabled,
.btn--primary[disabled] {
  background: transparent;
  border-color: var(--c-rule);
  color: var(--c-cream-50);
  cursor: not-allowed;
  transform: none;
}
.btn--secondary {
  background: transparent;
  color: var(--c-cream);
  border: 1px solid var(--c-rule);
}
.btn--secondary:hover {
  border-color: var(--c-rule-32);
  transform: translateY(-1px);
}

/* ===================================================================
 * By-the-numbers strip
 * =================================================================== */

.numbers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--c-rule);
}
.numbers__cell {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid var(--c-rule);
}
.numbers__cell:last-child { border-right: none; }
.numbers__n {
  font-family: var(--f-display);
  font-size: 44px;
  color: var(--c-gold);
  line-height: 1;
  font-style: italic;
}
.numbers__l {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-cream-50);
  margin-top: 10px;
  letter-spacing: var(--tr-18);
  text-transform: uppercase;
}

/* ===================================================================
 * Section header (§ marker + display headline)
 * =================================================================== */

.sec__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 32px;
  flex-wrap: wrap;
}
.sec__marker {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sec__title {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 400;
  margin: 0;
  color: var(--c-cream);
  line-height: 0.98;
}
.sec__title em { font-style: italic; }

.sec__filter {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-18);
  text-align: right;
  line-height: 1.8;
}

/* ===================================================================
 * Catalogue (standing record)
 * =================================================================== */

.cat__cols {
  display: grid;
  grid-template-columns: 40px 80px 1.2fr 1fr 1fr 0.8fr 0.8fr 0.6fr 0.8fr;
  gap: 16px;
  align-items: center;
  min-width: 0;
}
.cat__cols > * { min-width: 0; }
.cat__header {
  padding: 14px 0;
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-18);
  text-transform: uppercase;
}
.cat__header > :last-child { text-align: right; }

.cat__row {
  padding: 24px 0;
  border-bottom: 1px solid var(--c-hairline);
  min-height: 56px;
  text-decoration: none;   /* rows are <a>; no underline, inherit cream */
  color: inherit;
}
.cat__no {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--c-gold);
  font-style: italic;
}
.cat__thumb {
  width: 64px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat__house {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-18);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cat__name {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--c-cream);
  line-height: 1.05;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat__line {
  font-family: var(--f-italic);
  font-size: 13px;
  color: var(--c-cream-50);
  font-style: italic;
  margin-top: 2px;
}
.cat__family {
  font-family: var(--f-serif);
  font-size: 15px;
  color: var(--c-cream);
}
.cat__gender {
  font-size: 11px;
  color: var(--c-cream-40);
}
.cat__perfumer {
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--c-cream-70);
}
.cat__year {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-cream-70);
}
.cat__conc {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-14);
  text-transform: uppercase;
}
.cat__avail {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--tr-14);
}
.cat__avail--in  { color: var(--c-gold); }
.cat__avail--low { color: var(--c-avail-out); } /* brightened for WCAG AA contrast */
.cat__price {
  text-align: right;
  min-width: 0;
  overflow: hidden;
}
.cat__price .v {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--c-cream);
}
.cat__price .from {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-cream-70);
  margin-top: 2px;
  letter-spacing: var(--tr-18);
}

/* ===================================================================
 * Taxonomy (by note)
 * =================================================================== */

.tax {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
}
.tax__intro p {
  font-family: var(--f-italic);
  font-size: 18px;
  font-style: italic;
  color: var(--c-cream-70);
  margin-top: 24px;
  line-height: 1.6;
}
.tax__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--c-rule);
}
.tax__cell {
  background: var(--c-bg);
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
}
.tax__cell .swatch {
  position: absolute;
  right: -12px; bottom: -12px;
  width: 48px; height: 48px;
  border-radius: 0;
  opacity: 0.6;
}
.tax__cell .note {
  font-family: var(--f-display);
  font-size: 30px;
  color: var(--c-cream);
  font-style: italic;
}
.tax__cell .count {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-18);
  margin-top: 6px;
}

/* ===================================================================
 * Reading room (editorial features)
 * =================================================================== */

.reading {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px;
}
.reading__col + .reading__col {
  border-left: 1px solid var(--c-rule);
  padding-left: 32px;
}
.reading__img {
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
}
.reading__kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
}
.reading__title {
  font-family: var(--f-display);
  color: var(--c-cream);
  line-height: 1.05;
  margin-top: 10px;
}
.reading__title--lead { font-size: clamp(2rem, 3.4vw, 2.625rem); }
.reading__title--side { font-size: 28px; line-height: 1.1; }
@media (max-width: 720px) {
  .reading__title--side { font-size: 22px; }
}
.reading__body {
  margin-top: 14px;
  line-height: 1.55;
}
.reading__body--italic {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 17px;
  color: var(--c-cream-70);
}
.reading__body--sans {
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--c-cream-55);
  line-height: 1.6;
}
.reading__all {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 6px;
  transition: opacity 0.2s;
}
.reading__all:hover { opacity: 0.75; }

/* ===================================================================
 * Concierge
 * =================================================================== */

.concierge {
  position: relative;
  overflow: hidden;
}
.concierge::before {
  content: '';
  position: absolute;
  right: -100px; top: -60px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 163, 90, 0.13), transparent 70%);
  pointer-events: none;
}
.concierge__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.concierge__title {
  font-family: var(--f-display);
  font-size: clamp(3rem, 5.5vw, 4.875rem);
  font-weight: 400;
  margin: 0;
  line-height: 0.98;
  color: var(--c-cream);
}
.concierge__title em { font-style: italic; color: var(--c-gold); }
.concierge__intro {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 18px;
  color: var(--c-cream-70);
  margin-top: 30px;
  max-width: 500px;
  line-height: 1.55;
}

.concierge__qs {
  display: grid;
  gap: 14px;
}
.concierge__q {
  padding: 18px 24px;
  border: 1px solid var(--c-rule);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: center;
  transition: border-color 0.2s, background 0.2s;
}
.concierge__q:hover {
  border-color: var(--c-rule-32);
  background: rgba(201, 163, 90, 0.04);
}
.concierge__qn {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--c-gold);
  font-style: italic;
}
.concierge__qt {
  font-family: var(--f-serif);
  font-size: 18px;
  color: var(--c-cream);
}
.concierge__qs2 {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--c-cream-55);
  margin-top: 2px;
}

/* ===================================================================
 * Footer
 * =================================================================== */

.footer {
  padding: 56px var(--page-x) 36px;
  border-top: 1px solid var(--c-rule);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--c-rule);
}
.footer__brand {
  font-family: var(--f-display);
  font-size: 54px;
  color: var(--c-cream);
  font-style: italic;
  line-height: 1;
}
.footer__tag {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--c-cream-55);
  margin-top: 14px;
  max-width: 280px;
  line-height: 1.55;
}
.footer__col h4 {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-gold);
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 400;
}
.footer__col a {
  display: block;
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 2;
  color: rgba(232, 217, 184, 0.85);
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--c-cream); }

.footer__bot {
  display: flex;
  justify-content: space-between;
  align-items: center;   /* keep copyright + 44px lang toggle on one baseline */
  padding-top: 22px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-70);
  letter-spacing: var(--tr-18);
}
.footer__lang-toggle {
  color: var(--c-gold);
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* was a 13px tap target */
}

/* Mobile: lift footer link tap targets toward the 44px standard (28px default). */
@media (max-width: 720px) {
  .footer__col a { padding: 6px 0; }
}

/* ===================================================================
 * Note placeholder + bottle silhouette
 * =================================================================== */

.npx {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(232, 217, 184, 0.04) 0 12px,
      rgba(13, 9, 7, 0.04) 12px 24px);
}
.npx::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(232, 217, 184, 0.10) 0%, transparent 55%),
    radial-gradient(80% 60% at 80% 100%, rgba(13, 9, 7, 0.30) 0%, transparent 55%);
  pointer-events: none;
}
.npx__label {
  position: relative;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 10px;
  color: var(--c-cream-70);
  mix-blend-mode: overlay;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottle silhouette: built from layered absolutely-positioned divs.
   See partials/_bottle.php for the markup. */
.bottle {
  position: relative;
  display: block;
}
.bottle__shadow {
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  width: 78%; height: 10px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, 0.35), transparent 70%);
}
.bottle__cap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 18%;
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.25),
    inset 0 4px 0 rgba(255, 255, 255, 0.18);
}
.bottle__neck {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 17%;
  height: 6%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bottle__body {
  position: absolute;
  left: 0;
  top: 24%;
  width: 100%;
  height: 76%;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.25)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.22));
}
.bottle__label {
  position: absolute;
  left: 0; right: 0; top: 42%;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-family: var(--f-mono);
  text-transform: uppercase;
}

/* ===================================================================
 * Product Detail Page (PDP) — Noir Vault
 * =================================================================== */

/* Folio header — the small mono ribbon under the main nav */
.folio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding: 20px var(--page-x);
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-18);
}
.folio > * { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.folio > :nth-child(2) { text-align: center; }
.folio > :nth-child(3) { text-align: right; }

/* Hero — gallery (left) + ledger (right) */
.pdp-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 880px;
  border-bottom: 1px solid var(--c-rule);
}

.pdp-gallery {
  position: relative;
  border-right: 1px solid var(--c-rule);
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(138, 106, 58, 0.094) 0%, transparent 70%),
    var(--c-ink);
}
.pdp-gallery__center {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Corner cross-hairs — pure ornament, marks the exhibit */
.pdp-gallery__corner {
  position: absolute;
  width: 24px; height: 24px;
}
.pdp-gallery__corner--tl { top: 24px;    left: 24px;
                            border-top: 1px solid var(--c-gold);
                            border-left: 1px solid var(--c-gold); }
.pdp-gallery__corner--tr { top: 24px;    right: 24px;
                            border-top: 1px solid var(--c-gold);
                            border-right: 1px solid var(--c-gold); }
.pdp-gallery__corner--bl { bottom: 24px; left: 24px;
                            border-bottom: 1px solid var(--c-gold);
                            border-left: 1px solid var(--c-gold); }
.pdp-gallery__corner--br { bottom: 24px; right: 24px;
                            border-bottom: 1px solid var(--c-gold);
                            border-right: 1px solid var(--c-gold); }

.pdp-gallery__meta-tl {
  position: absolute;
  top: 32px; left: 32px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-24);
}
.pdp-gallery__meta-tr {
  position: absolute;
  top: 32px; right: 32px;
  text-align: right;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-18);
  line-height: 1.7;
}

.pdp-gallery__thumbs {
  position: absolute;
  left: 32px;
  bottom: 32px;
  display: flex;
  gap: 8px;
}
.pdp-gallery__thumb {
  width: 48px;
  height: 60px;
  border: 1px solid var(--c-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 8px;
  color: var(--c-cream-40);
  letter-spacing: var(--tr-14);
  background: transparent;
  transition: border-color 0.2s, color 0.2s;
}
.pdp-gallery__thumb:hover {
  border-color: var(--c-rule-32);
  color: var(--c-cream-70);
}
.pdp-gallery__thumb.is-active {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

/* Ledger — right column of the PDP hero */
.pdp-ledger {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
}
.pdp-ledger__kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-24);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.pdp-ledger__title {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6.5vw, 5.25rem);
  font-weight: 400;
  margin: 0;
  line-height: 0.92;
  color: var(--c-cream);
}
.pdp-ledger__title em { font-style: italic; }
.pdp-ledger__line {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 32px;
  color: var(--c-gold);
  margin-top: 14px;
}

/* Specs */
.pdp-specs {
  margin-top: 36px;
  padding: 24px 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
.pdp-spec {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 10px 0;
}
.pdp-spec__k {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
  padding-top: 4px;
}
.pdp-spec__v {
  font-family: var(--f-serif);
  font-size: 17px;
  color: var(--c-cream);
}

.pdp-blurb {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 20px;
  color: rgba(232, 217, 184, 0.75);
  margin-top: 30px;
  line-height: 1.55;
}

/* Sizes */
.pdp-sizes-wrap { margin-top: 36px; }
.pdp-sizes-wrap .label {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pdp-sizes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.pdp-size {
  padding: 18px 16px;
  border: 1px solid var(--c-rule);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pdp-size:hover { border-color: var(--c-rule-32); }
.pdp-size.is-active,
.pdp-size:has(input:checked) {
  border-color: var(--c-gold);
  background: rgba(201, 163, 90, 0.06);
}
/* Keyboard focus ring on the chosen size (input itself is visually hidden). */
.pdp-size:has(input:focus-visible) {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}
.pdp-size__ml {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 26px;
  color: var(--c-cream);
}
.pdp-size__ml .u {
  font-size: 13px;
  margin-left: 2px;
}
.pdp-size__price {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-50);
  margin-top: 6px;
  letter-spacing: var(--tr-18);
}
.pdp-size.is-active .pdp-size__price,
.pdp-size:has(input:checked) .pdp-size__price { color: var(--c-gold); }
.pdp-size__label {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 11px;
  color: var(--c-cream-50);
  margin-top: 2px;
}

/* Actions */
.pdp-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.pdp-actions .btn--primary { flex: 1; padding: 20px; }
.pdp-actions .btn--icon {
  padding: 20px 22px;
  background: transparent;
  color: var(--c-cream);
  border: 1px solid var(--c-rule);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.pdp-actions .btn--icon:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

.pdp-meta {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
}
.pdp-meta__in { color: var(--c-gold); }
.pdp-meta__out { color: var(--c-avail-out); } /* AA: rust-soft fails at 9px (4.04:1) */

/* Shared two-col layout for § I and § II (intro left, content right) */
.pdp-2col {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 80px;
}
.pdp-2col__intro p {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 17px;
  color: var(--c-cream-55);
  margin-top: 24px;
  line-height: 1.6;
}

/* Note pyramid */
.pyramid__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--c-rule);
}
.pyramid__row:last-child { border-bottom: 1px solid var(--c-rule); }
.pyramid__label {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-55);
  letter-spacing: var(--tr-18);
  text-transform: uppercase;
  padding-top: 6px;
}
.pyramid__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.pyramid__note {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pyramid__dot {
  width: 22px;
  height: 22px;
  border-radius: 0;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.18);
}
.pyramid__name {
  font-family: var(--f-serif);
  font-size: 18px;
  color: var(--c-cream);
}

/* Accord bars */
.accord__row {
  display: grid;
  grid-template-columns: 120px 1fr 40px;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
}
.accord__name {
  font-family: var(--f-serif);
  font-size: 13px;
  color: var(--c-cream);
}
.accord__track {
  height: 10px;
  background: var(--c-hairline);
}
.accord__bar { height: 100%; }
.accord__pct {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-55);
  text-align: right;
}

/* Performance stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  border-top: 1px solid var(--c-rule);
  padding-top: 36px;
}
.stat__label {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-cream-45);
  letter-spacing: var(--tr-18);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat__value {
  font-family: var(--f-serif);
  font-size: 38px;
  line-height: 1;
  color: var(--c-cream);
  font-weight: 400;
}
.stat__unit {
  font-size: 14px;
  color: var(--c-cream-70);
  margin-left: 4px;
}

/* Season + Hour bars (the bottom of § III) */
.season-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--c-rule);
}
.season-col > .label {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-cream-50);
  margin-bottom: 16px;
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
}
.season-row {
  display: grid;
  grid-template-columns: 90px 1fr 50px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-hairline);
}
.season-row__name {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  color: var(--c-cream);
  text-transform: capitalize;
}
.season-row__track {
  height: 2px;
  background: rgba(232, 217, 184, 0.10);
}
.season-row__fill {
  height: 2px;
  background: var(--c-gold);
}
.season-row__pct {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  text-align: right;
}

/* Poll (§ IV) */
.poll-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.poll-title {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 400;
  margin: 0;
  line-height: 0.95;
  color: var(--c-cream);
}
.poll-title em { font-style: italic; }
.poll-title .gold { color: var(--c-gold); }

.poll-row {
  display: grid;
  grid-template-columns: 110px 1fr 90px;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-rule);
}
.poll-row__name {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 24px;
  color: var(--c-cream);
}
.poll-row__track {
  height: 8px;
  background: rgba(232, 217, 184, 0.06);
}
.poll-row__bar {
  height: 8px;
}
.poll-row__pct {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-cream);
  letter-spacing: var(--tr-14);
  text-align: right;
}

/* Neighbours (§ V) */
.neighbours {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.neighbour {
  border-top: 1px solid var(--c-rule);
  padding-top: 18px;
  display: block;
  transition: opacity 0.2s;
}
.neighbour:hover { opacity: 0.85; }
.neighbour__no {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-gold);
  letter-spacing: var(--tr-18);
  margin-bottom: 14px;
}
.neighbour__img {
  aspect-ratio: 4 / 5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.neighbour__house {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-cream-50);
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
  margin-top: 18px;
}
.neighbour__name {
  font-family: var(--f-display);
  font-size: 24px;
  font-style: italic;
  color: var(--c-cream);
  margin-top: 6px;
}
.neighbour__family {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--c-cream-55);
  margin-top: 2px;
}
.neighbour__price {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-gold);
  letter-spacing: var(--tr-14);
  margin-top: 10px;
}

/* Witnesses (§ VI — reviews) */
.witnesses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.witness {
  padding: 32px;
  border: 1px solid var(--c-rule);
  background: var(--c-bg);
}
.witness__stars {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--c-gold);
  margin-bottom: 14px;
  letter-spacing: 0.16em;
}
.witness__quote {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--c-cream);
  line-height: 1.2;
  font-style: italic;
}
.witness__body {
  font-family: var(--f-italic);
  font-size: 14px;
  font-style: italic;
  color: var(--c-cream-70);
  margin-top: 16px;
  line-height: 1.6;
}
.witness__byline {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-cream-70);
  margin-top: 22px;
  letter-spacing: var(--tr-22);
  text-transform: uppercase;
}

/* ===================================================================
 * Responsive — soften the desktop-heavy layouts at small viewports.
 * Mobile breakpoint refinement comes in a later pass; this is enough
 * to keep the homepage from breaking on a laptop.
 * =================================================================== */

@media (max-width: 1100px) {
  :root { --page-x: 40px; }
  /* Tighten nav so 6 links + right group all fit in one row */
  .nav__center { gap: 16px; letter-spacing: 0.14em; font-size: 10px; }
  .nav__right  { gap: 12px; letter-spacing: 0.14em; font-size: 10px; }
  .ribbon { font-size: 9px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__rail { display: none; }
  .cat__cols {
    grid-template-columns: 30px 60px 1.4fr 0.8fr 1fr 0.8fr;
    gap: 12px;
  }
  .cat__cols > :nth-child(6),
  .cat__cols > :nth-child(7),
  .cat__cols > :nth-child(8) { display: none; }
  .tax { grid-template-columns: 1fr; gap: 40px; }
  .reading { grid-template-columns: 1fr; }
  .reading__col + .reading__col { border-left: none; padding-left: 0; }
  .concierge__inner { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --page-x: 22px; }
  .section { padding: 56px var(--page-x); }
  .ribbon { row-gap: 6px; }
  .ribbon > * { flex: 1 1 50%; }
  .ribbon > :last-child { text-align: left; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .numbers__cell {
    border-right: none;
    border-bottom: 1px solid var(--c-rule);
  }
  .numbers__cell:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Nav: hide desktop center links and right-side text links; drawer carries them */
  .nav__center { display: none; }
  .nav__right a { display: none; }
  .nav__right .nav__search-icon { display: inline-flex; align-items: center; }
  .nav__burger { display: inline-flex; }

  /* Folio back-links: ensure 44px tap area */
  .folio a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Mobile drawer — grid-template-rows gives a composited height animation
     with no layout thrash. The inner wrapper holds overflow:hidden so
     content is clipped without affecting grid geometry. */
  .nav__drawer {
    display: grid;
    grid-template-rows: 0fr;
    background: var(--c-ink);
    transition: grid-template-rows 0.25s ease;
  }
  .nav__drawer.is-open { grid-template-rows: 1fr; }
  .nav__drawer-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--c-rule);
  }
  .nav__drawer a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--page-x);
    font-family: var(--f-sans);
    font-size: 11px;
    letter-spacing: var(--tr-22);
    text-transform: uppercase;
    color: var(--c-cream-70);
    border-bottom: 1px solid var(--c-hairline);
    transition: color 0.2s, background 0.2s;
  }
  .nav__drawer a:hover,
  .nav__drawer a.is-active { color: var(--c-cream); background: rgba(201, 163, 90, 0.04); }

  /* Hero kicker: tighten tracking so it stays single-line */
  .hero__kicker { font-size: 9px; letter-spacing: 0.18em; }

  /* Folio: two-column on mobile, hide middle cell */
  .folio { grid-template-columns: 1fr auto; }
  .folio > :nth-child(2) { display: none; }

  /* Catalogue grid: 3 cols — N°, thumb, name+price stacked */
  .cat__cols { grid-template-columns: 20px 44px minmax(0, 1fr); gap: 8px; }
  /* Constrain thumb to its column — fixed 64px desktop size overflows 44px cell */
  .cat__thumb { width: 44px; height: 56px; }
  .cat__cols > :nth-child(4),
  .cat__cols > :nth-child(5),
  .cat__cols > :nth-child(6),
  .cat__cols > :nth-child(7),
  .cat__cols > :nth-child(8) { display: none; }
  .cat__cols > :nth-child(9) { grid-column: 3; }
  .cat__price .price-block { align-items: flex-start; text-align: left; }

  /* Hero bottle */
  .bottle-frame { height: auto; aspect-ratio: 5 / 3; }

  .tax__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bot {
    flex-direction: column;
    gap: 8px;
  }
}

/* ===================================================================
 * PDP responsive adjustments
 * =================================================================== */

@media (max-width: 1100px) {
  /* PDP: stay 2-col on tablet — gallery shrinks, ledger stays beside it */
  .pdp-hero { grid-template-columns: 1fr 1fr; min-height: 560px; }
  .pdp-gallery { min-height: 0; }
  .pdp-ledger { padding: 40px 32px; }
  /* Tighten gaps but keep 2-col — don't collapse on tablets */
  .pdp-2col { gap: 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .season-grid { gap: 32px; }
  .poll-grid { gap: 24px; }
  .neighbours { grid-template-columns: repeat(2, 1fr); }
  .folio { grid-template-columns: 1fr; gap: 6px; }
  .folio > :nth-child(2),
  .folio > :nth-child(3) { text-align: left; }
}

@media (max-width: 720px) {
  /* PDP: collapse to 1-col only on mobile */
  .pdp-hero { grid-template-columns: 1fr; min-height: 0; }
  .pdp-gallery {
    min-height: 360px;
    border-right: none;
    border-bottom: 1px solid var(--c-rule);
  }
  .pdp-ledger { padding: 40px var(--page-x); }
  .pdp-2col { grid-template-columns: 1fr; gap: 40px; }
  .season-grid { grid-template-columns: 1fr; gap: 40px; }
  .poll-grid { grid-template-columns: 1fr; gap: 32px; }
  .witnesses { grid-template-columns: 1fr; }
  .pdp-gallery__corner { display: none; }
  .pdp-gallery__meta-tr { display: none; }
  .pdp-gallery__thumbs { display: none; }
  .pdp-specs { padding: 16px 0; }
  .pdp-spec { grid-template-columns: 110px 1fr; }
  .pdp-sizes { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 24px; }
  .neighbours { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .neighbour__name { font-size: 18px; }
  .poll-row { grid-template-columns: 70px 1fr 60px; }
  .pyramid__row { grid-template-columns: 70px 1fr; }
  .accord__row { grid-template-columns: 90px 1fr 36px; }
}

/* ===================================================================
 * Motion — homepage
 *
 * All entrance / reveal initial-hidden states are scoped to .has-motion
 * on <html>. An inline <script> in <head> adds that class synchronously
 * (skipped if prefers-reduced-motion), so elements are hidden from the
 * very first paint — no FOUC.
 *
 * .is-loaded is added by home.js on the first rAF after DOMContentLoaded,
 * which triggers the hero entrance keyframes.
 *
 * Easing:
 *   expo  = cubic-bezier(0.16, 1, 0.3, 1)   — confident, decisive
 *   quint = cubic-bezier(0.22, 1, 0.36, 1)  — slightly softer
 * =================================================================== */

/* ---------- Hero entrance keyframes ---------- */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-title-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes hero-rule-expand {
  from { clip-path: inset(0 50% 0 50%); }
  to   { clip-path: inset(0 0% 0 0%); }
}
@keyframes hero-bottle-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Initial hidden states (during delay, animation fill-mode:both covers these,
   but the :not(.is-loaded) rule guarantees safety before the module loads). */
.has-motion:not(.is-loaded) .hero__kicker          { opacity: 0; }
.has-motion:not(.is-loaded) .hero__title           { opacity: 0; transform: scale(0.97); }
.has-motion:not(.is-loaded) .hero__rule > span     { opacity: 0; }
.has-motion:not(.is-loaded) .hero__rule::before    { clip-path: inset(0 50% 0 50%); }
.has-motion:not(.is-loaded) .hero__actions .btn    { opacity: 0; }
.has-motion:not(.is-loaded) .hero__bottle          { opacity: 0; }

/* Cascade: kicker → logo → rule draws → CTAs → bottle */
.has-motion.is-loaded .hero__kicker {
  animation: hero-fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}
.has-motion.is-loaded .hero__title {
  animation: hero-title-in 620ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}
.has-motion.is-loaded .hero__rule::before {
  animation: hero-rule-expand 520ms cubic-bezier(0.16, 1, 0.3, 1) 310ms both;
}
.has-motion.is-loaded .hero__rule > span {
  animation: hero-fade-up 380ms cubic-bezier(0.16, 1, 0.3, 1) 390ms both;
}
.has-motion.is-loaded .hero__actions .btn:nth-child(1) {
  animation: hero-fade-up 380ms cubic-bezier(0.16, 1, 0.3, 1) 460ms both;
}
.has-motion.is-loaded .hero__actions .btn:nth-child(2) {
  animation: hero-fade-up 380ms cubic-bezier(0.16, 1, 0.3, 1) 520ms both;
}
.has-motion.is-loaded .hero__bottle {
  animation: hero-bottle-in 560ms cubic-bezier(0.22, 1, 0.36, 1) 620ms both;
}

/* ---------- Floating bottle ---------- */
/* Starts 1.4s after load — well after the entrance sequence settles.
   Applied only when has-motion is present (JS is running, motion is ok). */
@keyframes float-bottle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.has-motion .bottle-frame .center {
  animation: float-bottle 4.4s ease-in-out 1.4s infinite;
}

/* ---------- Scroll reveal keyframes ---------- */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal-left {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

/* Catalogue rows — header row always visible */
.has-motion .cat__row   { opacity: 0; transform: translateY(10px); }
.has-motion .cat__header { opacity: 1 !important; transform: none !important; }
.has-motion .cat__row.in-view {
  animation: reveal-up 380ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 42ms) both;
}

/* Taxonomy cells */
.has-motion .tax__cell { opacity: 0; transform: translateY(8px); }
.has-motion .tax__cell.in-view {
  animation: reveal-up 340ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 30ms) both;
}

/* Reading columns */
.has-motion .reading__col { opacity: 0; transform: translateY(12px); }
.has-motion .reading__col.in-view {
  animation: reveal-up 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 60ms) both;
}

/* Concierge questions slide in from left */
.has-motion .concierge__q { opacity: 0; transform: translateX(-12px); }
.has-motion .concierge__q.in-view {
  animation: reveal-left 360ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 48ms) both;
}

/* Numbers strip cells */
.has-motion .numbers__cell { opacity: 0; }
.has-motion .numbers__cell.in-view {
  animation: reveal-up 320ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 55ms) both;
}

/* ---------- Interaction polish ---------- */

/* Button active: brief press-down on click */
.btn:active {
  transform: scale(0.97) translateY(0) !important;
  transition: transform 80ms ease !important;
  box-shadow: none !important;
}

/* Primary button hover lift is carried by the gold-hover fill + translateY in
   base.css. No box-shadow — depth in this system is tonal, never painted
   (DESIGN.md No-Drop-Shadow Rule). */

/* Catalogue row: faint gold tint on hover (already has translateX from base) */
.cat__row:hover {
  background: rgba(201, 163, 90, 0.025);
}

/* Taxonomy swatch: brightens and expands outward on hover */
.tax__cell .swatch {
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.tax__cell:hover .swatch {
  opacity: 0.85;
  transform: scale(1.2) translate(2px, 2px);
}

/* Concierge question: micro-push on hover (adds transform to existing transition) */
.concierge__q {
  transition: border-color 0.2s, background 0.2s, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.concierge__q:hover {
  transform: translateX(3px);
}

/* ---------- Reduced motion overrides ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Hero — make everything immediately visible */
  .has-motion:not(.is-loaded) .hero__kicker,
  .has-motion:not(.is-loaded) .hero__title,
  .has-motion:not(.is-loaded) .hero__rule > span,
  .has-motion:not(.is-loaded) .hero__rule::before,
  .has-motion:not(.is-loaded) .hero__actions .btn,
  .has-motion:not(.is-loaded) .hero__bottle {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .has-motion.is-loaded .hero__kicker,
  .has-motion.is-loaded .hero__title,
  .has-motion.is-loaded .hero__rule::before,
  .has-motion.is-loaded .hero__rule > span,
  .has-motion.is-loaded .hero__actions .btn,
  .has-motion.is-loaded .hero__bottle {
    animation: none !important;
  }

  /* Scroll reveals — always visible */
  .has-motion .cat__row,
  .has-motion .tax__cell,
  .has-motion .reading__col,
  .has-motion .concierge__q,
  .has-motion .numbers__cell {
    opacity: 1 !important;
    transform: none !important;
  }

  /* No float, no reveals, no micro-animations */
  .has-motion .bottle-frame .center { animation: none !important; }
  .btn:active                       { transform: none !important; transition: none !important; }
  .btn--primary:hover               { box-shadow: none !important; }
  .tax__cell:hover .swatch          { opacity: 0.6 !important; transform: none !important; }
  .concierge__q:hover               { transform: none !important; }
}

/* ===================================================================
 * Motion — inner pages
 *
 * All .has-motion scoping follows the same pattern as the homepage:
 *   - :not(.is-loaded)   → initial hidden state before entrance fires
 *   - .is-loaded         → entrance animation (triggered by motion.js rAF)
 *   - .in-view           → scroll-reveal (added by motion.js IntersectionObserver)
 *
 * Easing:
 *   expo  = cubic-bezier(0.16, 1, 0.3, 1)  — confident, decisive
 *   quint = cubic-bezier(0.22, 1, 0.36, 1) — slightly softer
 * =================================================================== */

/* ---------- Page entrance: folio strip ---------- */
.has-motion:not(.is-loaded) .folio { opacity: 0; transform: translateY(-4px); }
.has-motion.is-loaded .folio {
  animation: hero-fade-up 340ms cubic-bezier(0.16, 1, 0.3, 1) 30ms both;
}

/* ---------- Page entrance: section header stagger ---------- */
.has-motion:not(.is-loaded) .con-head__inner .sec__marker { opacity: 0; }
.has-motion:not(.is-loaded) .con-head__inner .con-head__title { opacity: 0; transform: translateY(6px); }
.has-motion:not(.is-loaded) .con-head__inner .con-head__lead  { opacity: 0; }

.has-motion.is-loaded .con-head__inner .sec__marker {
  animation: hero-fade-up 320ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}
.has-motion.is-loaded .con-head__inner .con-head__title {
  animation: hero-fade-up 460ms cubic-bezier(0.22, 1, 0.36, 1) 170ms both;
}
.has-motion.is-loaded .con-head__inner .con-head__lead {
  animation: hero-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) 270ms both;
}

/* ---------- PDP entrance stagger ---------- */
.has-motion:not(.is-loaded) .pdp-gallery      { opacity: 0; transform: translateY(10px); }
.has-motion:not(.is-loaded) .pdp-ledger__kicker { opacity: 0; }
.has-motion:not(.is-loaded) .pdp-ledger__title  { opacity: 0; transform: translateY(8px); }
.has-motion:not(.is-loaded) .pdp-ledger__line   { opacity: 0; }
.has-motion:not(.is-loaded) .pdp-blurb          { opacity: 0; }

.has-motion.is-loaded .pdp-gallery {
  animation: hero-bottle-in 500ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}
.has-motion.is-loaded .pdp-ledger__kicker {
  animation: hero-fade-up 320ms cubic-bezier(0.16, 1, 0.3, 1) 110ms both;
}
.has-motion.is-loaded .pdp-ledger__title {
  animation: hero-fade-up 500ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}
.has-motion.is-loaded .pdp-ledger__line {
  animation: hero-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) 320ms both;
}
.has-motion.is-loaded .pdp-blurb {
  animation: hero-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
}

/* ---------- Scroll reveals: inner page grids ---------- */

/* Note cells (by-note) */
.has-motion .note-cell { opacity: 0; transform: translateY(8px); }
.has-motion .note-cell.in-view {
  animation: reveal-up 340ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 26ms) both;
}

/* House cards */
.has-motion .house-card { opacity: 0; transform: translateY(8px); }
.has-motion .house-card.in-view {
  animation: reveal-up 360ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 32ms) both;
}

/* Locator cards (atelier) */
.has-motion .locator-card { opacity: 0; transform: translateY(10px); }
.has-motion .locator-card.in-view {
  animation: reveal-up 400ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 55ms) both;
}

/* Form fieldsets (concierge, atelier) — slide from left like homepage concierge__q */
.has-motion .con-q { opacity: 0; transform: translateX(-10px); }
.has-motion .con-q.in-view {
  animation: reveal-left 360ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 48ms) both;
}

/* PDP: spec grid cells */
.has-motion .pdp-spec { opacity: 0; transform: translateY(6px); }
.has-motion .pdp-spec.in-view {
  animation: reveal-up 300ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 32ms) both;
}

/* PDP: note pyramid rows */
.has-motion .pyramid__row { opacity: 0; transform: translateY(6px); }
.has-motion .pyramid__row.in-view {
  animation: reveal-up 300ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 38ms) both;
}

/* PDP: accord bars */
.has-motion .accord__row { opacity: 0; transform: translateY(5px); }
.has-motion .accord__row.in-view {
  animation: reveal-up 280ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 32ms) both;
}

/* Orders list rows */
.has-motion .ord-list-row { opacity: 0; transform: translateY(6px); }
.has-motion .ord-list-row.in-view {
  animation: reveal-up 300ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 38ms) both;
}

/* ---------- Micro-interactions: inner page elements ---------- */

/* House cards: smooth transition for hover lift */
.house-card {
  transition: background 0.2s, border-color 0.2s, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.house-card:hover { transform: translateY(-2px); }

/* Locator cards: smooth border transition */
.locator-card { transition: border-color 0.22s ease, background 0.2s; }

/* Note cells: smooth background + swatch transitions */
.note-cell { transition: background 0.2s, border-color 0.2s; }
.note-cell__swatch { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s; }
.note-cell:hover .note-cell__swatch { transform: scale(1.15) translate(2px, 2px); opacity: 0.9; }

/* PDP size option: press feedback */
.pdp-size { transition: border-color 0.15s, background 0.15s; }

/* PDP gallery thumbnail: press feedback */
.pdp-gallery__thumb:active {
  transform: scale(0.94) !important;
  transition: transform 80ms ease !important;
}

/* PDP accord bar: fill animates in when in-view fires */
.accord__bar {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.has-motion .accord__row.in-view .accord__bar {
  transform: scaleX(1);
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}
/* Without motion: bars always at full width */
:root:not(.has-motion) .accord__bar { transform: none; }

/* ---------- Reduced motion overrides — inner pages ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Page entrances */
  .has-motion:not(.is-loaded) .folio,
  .has-motion:not(.is-loaded) .con-head__inner .sec__marker,
  .has-motion:not(.is-loaded) .con-head__inner .con-head__title,
  .has-motion:not(.is-loaded) .con-head__inner .con-head__lead,
  .has-motion:not(.is-loaded) .pdp-gallery,
  .has-motion:not(.is-loaded) .pdp-ledger__kicker,
  .has-motion:not(.is-loaded) .pdp-ledger__title,
  .has-motion:not(.is-loaded) .pdp-ledger__line,
  .has-motion:not(.is-loaded) .pdp-blurb {
    opacity: 1 !important;
    transform: none !important;
  }
  .has-motion.is-loaded .folio,
  .has-motion.is-loaded .con-head__inner .sec__marker,
  .has-motion.is-loaded .con-head__inner .con-head__title,
  .has-motion.is-loaded .con-head__inner .con-head__lead,
  .has-motion.is-loaded .pdp-gallery,
  .has-motion.is-loaded .pdp-ledger__kicker,
  .has-motion.is-loaded .pdp-ledger__title,
  .has-motion.is-loaded .pdp-ledger__line,
  .has-motion.is-loaded .pdp-blurb {
    animation: none !important;
  }

  /* Scroll reveals */
  .has-motion .note-cell,
  .has-motion .house-card,
  .has-motion .locator-card,
  .has-motion .con-q,
  .has-motion .pdp-spec,
  .has-motion .pyramid__row,
  .has-motion .accord__row,
  .has-motion .ord-list-row {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Accord bars: always full width */
  .accord__bar { transform: none !important; transition: none !important; }

  /* Hover transforms */
  .house-card:hover { transform: none !important; }
}

/* ===================================================================
 * Reveal safety net
 *
 * If the motion module fails to run, the inline script in _nav.php adds
 * .reveal-fallback (and .is-loaded) after a grace period so no reveal target
 * is ever left at opacity:0. Mirrors the reduced-motion "always visible" set.
 * =================================================================== */
.has-motion.reveal-fallback .cat__row,
.has-motion.reveal-fallback .tax__cell,
.has-motion.reveal-fallback .reading__col,
.has-motion.reveal-fallback .concierge__q,
.has-motion.reveal-fallback .numbers__cell,
.has-motion.reveal-fallback .note-cell,
.has-motion.reveal-fallback .house-card,
.has-motion.reveal-fallback .locator-card,
.has-motion.reveal-fallback .con-q,
.has-motion.reveal-fallback .pdp-spec,
.has-motion.reveal-fallback .pyramid__row,
.has-motion.reveal-fallback .accord__row,
.has-motion.reveal-fallback .ord-list-row {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.has-motion.reveal-fallback .accord__bar { transform: none !important; }

/* ===================================================================
 * Sub-380px — compact devices (Samsung Galaxy A-series, budget Android)
 *
 * Clamp minimums lock at 48px below 720px because the vw track is
 * below the floor — they don't scale. Override here to let them
 * shrink gracefully on 320–379px screens.
 * =================================================================== */
@media (max-width: 380px) {
  :root { --page-x: 16px; }

  /* Hero: cut the 88px top padding that consumes ~¼ of a 780px viewport */
  .hero { padding-top: 56px; padding-bottom: 40px; }

  /* Display heading clamps: unlock the 48px (3rem) floor */
  .hero__title       { font-size: clamp(1.75rem, 11vw, 2.5rem); }
  .sec__title        { font-size: clamp(1.75rem, 8vw, 3rem); }
  .concierge__title  { font-size: clamp(1.75rem, 8vw, 3rem); }
  .pdp-ledger__title { font-size: clamp(1.75rem, 8vw, 3rem); }
  .poll-title        { font-size: clamp(1.75rem, 8vw, 3rem); }

  /* Safety: single-word product names must not overflow their container */
  .hero__title, .sec__title, .concierge__title,
  .pdp-ledger__title, .poll-title { overflow-wrap: break-word; }

  /* PDP: 110px spec label eats 40% of the 288px content area — shrink */
  .pdp-spec { grid-template-columns: 80px 1fr; gap: 12px; }

  /* Poll row: tighten the fixed columns to give the bar more room */
  .poll-row { grid-template-columns: 60px 1fr 50px; gap: 12px; }

  /* Accord row: match the tightened spec column */
  .accord__row { grid-template-columns: 80px 1fr 32px; }
}