/* ==========================================================================
   sieraad — main stylesheet
   Palette + type per Corporate Identity Guidelines (DESIGN.md)
   ========================================================================== */

/* ---- Fonts (self-hosted variable fonts) --------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-var.d80df8ff.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-var-italic.6f2f5c3b.woff2') format('woff2');
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-var.06b16db7.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --black: #181410;
  --ink: #111111;
  --stone: #2A2521;
  --stone-edge: #3a332c;
  --gold: #C9A870;
  --gold-dim: rgba(201, 168, 112, 0.45);
  --white: #FFFFFF;
  --off-white: #F5F3F0;
  --paper: #EFEDEA;
  --grey: #6E6A64; /* warm mid-grey, darkened from CI #888580 to pass WCAG AA (4.5:1) on off-white */
  --line-light: #DDD9D4;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', Helvetica, Arial, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(64px, 9vw, 120px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--black); }

body.has-overlay { overflow: hidden; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--narrow { max-width: 760px; }

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3, .display { font-weight: 400; }
.display-1 { font-family: var(--serif); font-size: clamp(38px, 6.5vw, 76px); line-height: 1.12; letter-spacing: 0.02em; }
.display-2 { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 48px); line-height: 1.16; letter-spacing: 0.02em; }
.display-3 { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: 0.02em; }
.display-1 em, .display-2 em, .display-3 em { font-style: italic; }

.label {
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.label--gold { color: var(--gold); }
.label--grey { color: var(--grey); }

.lede { font-size: 15px; line-height: 1.8; color: var(--grey); }
.body-copy { color: var(--grey); max-width: 62ch; }
.on-dark .body-copy, .on-dark .lede { color: rgba(245, 243, 240, 0.75); }

.sig { font-family: var(--serif); font-style: italic; font-size: 22px; letter-spacing: 0.04em; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-weight: 600; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 16px 38px; text-align: center;
  background: var(--ink); color: var(--white);
  border: 1px solid var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn:hover { background: var(--stone); border-color: var(--stone); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--light:hover { background: var(--off-white); border-color: var(--off-white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.on-dark .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.6); }
.on-dark .btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--sm { padding: 11px 22px; font-size: 11px; }
.btn--block { display: block; width: 100%; }

.text-link {
  font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: opacity 0.3s ease;
}
.text-link:hover { opacity: 0.6; }
/* .text-link is a standalone CTA: uppercase, tracked, its own line. Dropped
   into the middle of a sentence it shouts — an email address rendered as
   "LEKKER@SIERAAD.CO.ZA" mid-paragraph, or a "CREATE AN ACCOUNT." that breaks
   onto its own line and orphans the full stop. This variant keeps the
   underline-on-hover behaviour but inherits the surrounding type. */
.text-link--inline {
  font-weight: inherit; font-size: inherit; letter-spacing: inherit;
  text-transform: none; padding-bottom: 1px;
}

/* ---- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.skip-link:focus { left: 8px; }

/* ---- Announcement bar ---------------------------------------------------- */
.annc {
  position: relative; z-index: 60;
  background: var(--ink); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 48px;
}
.annc__msg {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  transition: opacity 0.25s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.annc__msg.is-out { opacity: 0; }
.annc__arrow {
  position: absolute; top: 0; bottom: 0; width: 44px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
}
.annc__arrow:hover { color: var(--white); }
.annc__arrow--prev { left: 4px; }
.annc__arrow--next { right: 4px; }
.annc__arrow svg { width: 14px; height: 14px; }

/* ---- Header --------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 55;
  background: var(--white); color: var(--ink);
  border-bottom: 1px solid var(--line-light);
}
.site-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 64px; padding: 0 clamp(16px, 3vw, 32px);
}
.site-header__left { display: flex; justify-content: flex-start; }
.site-header__right { display: flex; justify-content: flex-end; gap: 20px; align-items: center; }
.site-header__logo {
  font-family: var(--serif); font-weight: 400; font-size: 27px;
  letter-spacing: 0.14em; line-height: 1;
}
.icon-btn {
  position: relative;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s ease;
}
.icon-btn:hover { opacity: 0.55; }
.icon-btn svg { width: 21px; height: 21px; stroke-width: 1.4; }
.cart-count {
  position: absolute; top: 3px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--gold); color: var(--black);
  font-size: 9px; font-weight: 600; line-height: 15px; text-align: center;
  border-radius: 999px;
}
.cart-count.is-empty { display: none; }

/* Overlay header (homepage — transparent over hero, solid on scroll) */
.site-header--overlay {
  position: fixed; top: 36px; left: 0; right: 0;
  background: transparent; color: var(--white);
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
body.home { padding-top: 0; }
.site-header--overlay.is-solid {
  background: rgba(24, 20, 16, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,0.08);
}
body.home .annc { position: fixed; top: 0; left: 0; right: 0; }

/* ---- Panels: menu / search / cart ---------------------------------------- */
.backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(17, 17, 17, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.backdrop.is-on { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; top: 0; bottom: 0; z-index: 80;
  width: min(420px, 92vw);
  background: var(--white); color: var(--ink);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0s 0.5s;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.panel.is-open { transform: translateX(0); visibility: visible; transition: transform 0.5s var(--ease), visibility 0s; }
.panel--right { right: 0; }
.panel--left { left: 0; transform: translateX(-100%); }
.panel--left.is-open { transform: translateX(0); }
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; border-bottom: 1px solid var(--line-light);
}
.panel__title { font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.panel__close svg { width: 18px; height: 18px; }
.panel__body { padding: 28px; flex: 1; }

/* Menu panel */
.menu__list { list-style: none; }
.menu__list > li { border-bottom: 1px solid var(--line-light); }
.menu__link, .menu__group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 18px 0; text-align: left;
  font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: color 0.3s ease;
}
.menu__link:hover, .menu__group-toggle:hover { color: var(--grey); }
.menu__group-toggle svg { width: 12px; height: 12px; transition: transform 0.35s var(--ease); }
.menu__group.is-open .menu__group-toggle svg { transform: rotate(90deg); }
.menu__sub { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.menu__group.is-open .menu__sub { max-height: 240px; }
.menu__sub a {
  display: block; padding: 10px 0 10px 18px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey);
}
.menu__sub a:hover { color: var(--ink); }
.menu__sub li:last-child a { padding-bottom: 22px; }
.menu__foot { padding: 24px 28px; border-top: 1px solid var(--line-light); }

/* Search panel (full-width top sheet) */
.panel--search {
  top: 0; left: 0; right: 0; bottom: auto; width: auto;
  transform: translateY(-100%);
  border-bottom: 1px solid var(--line-light);
}
.panel--search.is-open { transform: translateY(0); }
.search__field {
  display: flex; align-items: center; gap: 16px;
  max-width: 760px; margin: 0 auto; padding: 34px var(--gutter) 26px;
}
.search__field svg { width: 20px; height: 20px; flex: none; color: var(--grey); }
.search__field input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
}
.search__field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search__field input::placeholder { color: var(--grey); }
.search__results { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) 34px; }
.search__cat {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--grey); margin: 18px 0 6px;
}
.search__hit {
  display: block; padding: 8px 0;
  font-family: var(--serif); font-size: 22px; letter-spacing: 0.02em;
  transition: color 0.3s ease;
}
.search__hit:hover { color: var(--grey); }

/* Cart panel */
.cart__items { display: flex; flex-direction: column; gap: 24px; }
.cart__item, .cart__upsell-card { display: flex; gap: 18px; }
.cart__item-img { flex: none; width: 88px; background: var(--off-white); }
.cart__item-img img { width: 88px; height: 118px; object-fit: contain; }
.cart__item-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cart__item-name { font-weight: 500; font-size: 12px; letter-spacing: 0.16em; }
.cart__item-meta { font-size: 11px; letter-spacing: 0.1em; color: var(--grey); }
.cart__item-controls { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line-light); }
.qty button { width: 32px; height: 32px; font-size: 15px; }
.qty span { min-width: 28px; text-align: center; font-size: 13px; }
.cart__remove {
  font-size: 11px; color: var(--grey); text-decoration: underline; text-underline-offset: 3px;
}
.cart__remove:hover { color: var(--ink); }
.cart__empty { text-align: center; color: var(--grey); padding: 48px 0; }
.cart__upsell { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-light); }
.cart__upsell-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 18px;
}
.cart__foot { padding: 24px 28px; border-top: 1px solid var(--line-light); }
.cart__ship { font-size: 11.5px; color: var(--grey); text-align: center; margin-bottom: 14px; }
.cart__note { font-size: 11px; color: var(--grey); text-align: center; margin-top: 12px; }
.cart__checkout span { margin-left: 10px; }

/* ---- Checkout step (inside the cart drawer) ------------------------------- */
.cart__co { display: flex; flex-direction: column; gap: 14px; }
.cart__co-back { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.cart__co-back:hover { color: var(--ink); }
.cart__co-summary { border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); padding: 10px 0; }
.cart__co-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--grey); padding: 3px 0; }
.cart__co-line--total { color: var(--ink); font-weight: 600; }
.cart__co-form { display: flex; flex-direction: column; gap: 10px; }
.cart__co-form label { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.cart__co-form input, .cart__co-form select, .cart__co-form textarea {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  font: inherit; font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--ink);
  background: var(--off-white); border: 1px solid var(--line-light); border-radius: 0;
}
.cart__co-form input:focus, .cart__co-form select:focus, .cart__co-form textarea:focus { outline: none; border-color: var(--gold); }
.cart__co-row { display: flex; gap: 10px; }
.cart__co-row label { flex: 1; }
/* Age + terms confirmation — a readable sentence with an inline checkbox, so it
   has to undo the stacked uppercase-label / full-width-input styling above. */
.cart__co-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 2px;
  font-size: 11.5px; line-height: 1.5; letter-spacing: normal; text-transform: none; color: var(--grey); cursor: pointer; }
.cart__co-form .cart__co-consent input[type="checkbox"] { display: inline-block; width: auto; flex: 0 0 auto; margin: 2px 0 0; padding: 0; }
.cart__co-consent a { color: var(--ink); text-decoration: underline; }
/* Coupon field + Apply on one row: the input grows, the button keeps its own
   width and sits on the input's baseline (the label text above pushes the
   input down, so align to the bottom edge, not the centre). Narrow phones
   stack them — a 40-character code beside a button leaves no room to read it. */
.cart__co-apply-row { display: flex; gap: 10px; align-items: flex-end; }
.cart__co-apply-row label { flex: 1 1 auto; min-width: 0; }
.cart__co-apply { flex: 0 0 auto; padding: 11px 18px; }
@media (max-width: 420px) {
  .cart__co-apply-row { flex-direction: column; align-items: stretch; }
}
/* role=status line under the coupon field — grey when informative, the form's
   own error red when the code was refused */
.cart__co-coupon-msg { font-size: 11.5px; line-height: 1.45; color: var(--grey); margin: -4px 0 0; }
/* it is always in the DOM (a live region must be, to be heard) — when empty,
   swallow the form's 10px gap so the row above and below still sit together */
.cart__co-coupon-msg:empty { margin-top: -10px; }
.cart__co-coupon-msg.is-error { color: #a33f2f; }
.cart__co-error { font-size: 12px; color: #a33f2f; text-align: center; margin: 0; }
.cart__co-done { font-size: 14px; color: var(--ink); }
.cart__co-done .cart__co-head { font-family: var(--serif); font-size: 20px; margin: 6px 0 10px; }
.cart__co-done p { margin: 0 0 10px; color: var(--grey); }
.cart__co-done .cart__co-head { color: var(--ink); }

/* ---- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(92vh, 860px);
  background: var(--black); color: var(--white); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media picture { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,20,16,0.35) 0%, rgba(24,20,16,0.15) 45%, rgba(24,20,16,0.72) 100%);
}
.hero__content {
  position: relative; z-index: 2; width: 100%;
  padding: 0 var(--gutter) clamp(56px, 9vh, 110px);
  text-align: center;
}
.hero__content .btn { margin-top: 34px; }

/* Page hero (inner pages — short photo band) */
.page-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 270px; background: var(--black); color: var(--white);
  text-align: center; overflow: hidden;
}
.page-hero--tall { min-height: min(72vh, 640px); }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media picture { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
img.pos-low { object-position: center 78%; }
.page-hero__media::after { content: ''; position: absolute; inset: 0; background: rgba(24,20,16,0.42); }
.page-hero__content { position: relative; z-index: 2; padding: 32px var(--gutter); }
.page-hero__kicker { font-size: 12px; letter-spacing: 0.16em; margin-bottom: 8px; opacity: 0.9; }
.page-hero__title { font-size: clamp(19px, 2.4vw, 26px); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; }

/* ---- Ambient hero video (injected post-load) -------------------------------- */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1);
  opacity: 0; transition: opacity 1.6s ease;
}
.hero__video.is-on { opacity: 1; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  width: 1px; height: 52px; background: rgba(255,255,255,0.5);
  overflow: hidden;
}
.hero__scroll::after {
  content: ''; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%; background: var(--gold);
  animation: scrollhint 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scrollhint { 0% { top: -50%; } 100% { top: 110%; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll::after { animation: none; } }

.intro-line {
  font-family: var(--serif); font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.55; letter-spacing: 0.02em; color: var(--ink);
}
.intro-line em { color: var(--grey); }

/* ---- Full-bleed editorial band ------------------------------------------------ */
/* Height tracks the image aspect (~21:9) so the full frame stays visible;
   images ship in colour, CSS holds them in B&W until hover reveals them. */
.band {
  position: relative; display: flex; align-items: center;
  min-height: clamp(460px, 42vw, 780px);
  background: var(--black); color: var(--off-white); overflow: hidden;
}
.band__media { position: absolute; inset: 0; }
.band__media picture { position: absolute; inset: 0; }
.band__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); opacity: 0.85;
  transition: filter 1s var(--ease), opacity 1s var(--ease);
}
.band:hover .band__media img, .band.in-color .band__media img { filter: grayscale(0); opacity: 1; }
.band__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(24,20,16,0.82) 0%, rgba(24,20,16,0.45) 48%, rgba(24,20,16,0.12) 100%);
  transition: opacity 1s var(--ease);
}
.band:hover .band__media::after, .band.in-color .band__media::after { opacity: 0.72; }
.band__copy { text-shadow: 0 1px 16px rgba(24,20,16,0.55); }
.band--right .band__media::after {
  background: linear-gradient(270deg, rgba(24,20,16,0.82) 0%, rgba(24,20,16,0.45) 48%, rgba(24,20,16,0.12) 100%);
}
img.pos-top { object-position: center top; }
.band__inner { position: relative; z-index: 2; width: 100%; padding-top: clamp(64px, 10vw, 120px); padding-bottom: clamp(64px, 10vw, 120px); }
.band__copy { max-width: 480px; }
.band--right .band__copy { margin-left: auto; }
.band__meta {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 22px;
}
.band__meta i { font-style: normal; opacity: 0.5; margin: 0 6px; }
.band__copy h2 { color: var(--white); margin-bottom: 20px; }
.band__kick {
  font-family: var(--serif); font-style: italic; font-size: 19px;
  color: rgba(245,243,240,0.9); margin-bottom: 14px;
}
.band__copy p:not(.band__kick) { font-size: 14px; line-height: 1.85; color: rgba(245,243,240,0.78); }
.band__copy--card {
  background: var(--white); color: var(--ink);
  padding: clamp(30px, 5vw, 56px); max-width: 560px;
}
.band__copy--card h2 { color: var(--ink); }
.band__copy--card p, .band__copy--card p:not(.band__kick) { color: var(--grey); }
@media (max-width: 700px) {
  .band { min-height: 0; }
  .band__media::after, .band--right .band__media::after {
    background: linear-gradient(0deg, rgba(24,20,16,0.88) 0%, rgba(24,20,16,0.55) 60%, rgba(24,20,16,0.25) 100%);
  }
}

/* ---- Wine row (Our Wine / collection) ------------------------------------------ */
.wine-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 80px); align-items: center;
}
.wine-row + .wine-row { margin-top: clamp(56px, 9vw, 110px); }
.wine-row--flip .wine-row__media { order: 2; }
.wine-row__media { background: transparent; }
.wine-row__media img { width: 20%; height: auto; display: block; margin: 0 auto; }
.wine-row__price {
  margin-top: 22px; font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.wine-row__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 860px) {
  .wine-row { grid-template-columns: 1fr; }
  .wine-row--flip .wine-row__media { order: 0; }
}

/* ---- Promise pillars (product pages) --------------------------------------------- */
.promise {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px); max-width: 1020px; margin: 0 auto;
}
.promise__item { padding-top: 26px; border-top: 1px solid rgba(201,168,112,0.35); }
.promise__item p { margin-top: 14px; font-size: 13px; line-height: 1.8; color: rgba(245,243,240,0.72); }
@media (max-width: 760px) { .promise { grid-template-columns: 1fr; } }

/* ---- PDP next-wine link ------------------------------------------------------------ */
.pdp-next {
  position: absolute; right: clamp(16px, 4vw, 56px); bottom: clamp(20px, 4vw, 44px); z-index: 3;
  text-align: right; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.75); line-height: 2;
  transition: color 0.3s ease;
}
.pdp-next em { font-family: var(--serif); font-style: italic; font-size: 17px; letter-spacing: 0.06em; text-transform: none; color: var(--white); }
.pdp-next:hover { color: var(--gold); }

/* ---- Sections -------------------------------------------------------------- */
.section { padding: var(--section-y) 0; }
.section--dark { background: var(--black); color: var(--off-white); }
.section--stone { background: var(--stone); color: var(--off-white); }
.section--light { background: var(--off-white); }
.section--paper { background: var(--paper); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 6vw, 64px); }
.section-head .label { display: block; margin-bottom: 18px; }
.section-head .display-2 + .lede, .section-head .display-3 + .lede { margin-top: 20px; }

/* Editorial two-column: image + copy */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 88px); align-items: center;
}
.duo--flip .duo__media { order: 2; }
.duo__media img { width: 100%; height: auto; }
.duo__media--frame { background: var(--stone); position: relative; min-height: 420px; }
.duo__media--frame picture { position: absolute; inset: 0; }
.duo__media--frame img { height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .duo__media--frame { min-height: 0; position: static; }
  .duo__media--frame picture { position: static; }
  .duo__media--frame img { height: auto; }
}
select.field { -webkit-appearance: none; appearance: none; border-radius: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888580' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
.duo__copy .label { display: block; margin-bottom: 16px; }
.duo__copy .display-2, .duo__copy .display-3 { margin-bottom: 22px; }
.duo__copy .body-copy + .body-copy { margin-top: 16px; }
.duo__copy .sig { display: block; margin-top: 26px; }
.duo__copy .text-link, .duo__copy .btn { margin-top: 30px; }

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo--flip .duo__media { order: 0; }
}

/* Product cards (Discover Our Wines) */
.wine-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 3vw, 28px);
}
.wine-card { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: var(--stone); overflow: hidden; }
.wine-card picture { width: 13%; aspect-ratio: 4 / 5; }
.wine-card img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 1.2s var(--ease), opacity 0.6s ease;
}
.wine-card:hover img { transform: scale(1.045); }
.wine-card__tag {
  position: absolute; top: 18px; right: 18px;
  writing-mode: vertical-rl;
  font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.wine-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 22px 22px;
  background: linear-gradient(0deg, rgba(24,20,16,0.88) 0%, rgba(24,20,16,0.55) 55%, rgba(24,20,16,0) 100%);
  color: var(--white);
  text-shadow: 0 1px 8px rgba(24,20,16,0.6);
}
.wine-card__name { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.wine-card__price { display: block; font-size: 11px; letter-spacing: 0.12em; color: rgba(255,255,255,0.75); margin-top: 6px; }

/* Journal cards */
.journal-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(24px, 4vw, 40px);
}
.journal-card__img { background: var(--stone); overflow: hidden; }
.journal-card__img img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(1);
  transition: transform 1.2s var(--ease);
}
.journal-card:hover .journal-card__img img { transform: scale(1.045); }
.journal-card__meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey); margin: 18px 0 10px;
}
.journal-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.journal-card__title { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; }
.journal-card__meta { display: flex; }
.journal-card .text-link { display: inline-block; margin-top: 16px; align-self: flex-start; }
.journal-card { display: flex; flex-direction: column; align-items: flex-start; }

.journal-feature { position: relative; display: block; background: var(--black); color: var(--white); overflow: hidden; }
.journal-feature img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; opacity: 0.92; }
.journal-feature__body { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 48px); max-width: 480px; }
.journal-feature__body .label { display: block; margin-bottom: 14px; }
.journal-feature__title { display: block; font-size: clamp(20px, 2.6vw, 30px); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.35; }
.journal-feature__body .btn { display: inline-block; margin-top: 24px; }
@media (max-width: 700px) {
  .journal-feature img { aspect-ratio: 4 / 3; }
}

/* Filter tabs (journal) + tabs */
.tabbar { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.tabbar button {
  font-size: 12px; letter-spacing: 0.08em; color: var(--grey);
  padding-bottom: 5px; border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.tabbar button:hover { color: var(--ink); }
.tabbar button.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.on-dark .tabbar button.is-active { color: var(--white); border-bottom-color: var(--white); }
.on-dark .tabbar button:hover { color: var(--white); }

[data-pane] { display: none; }
[data-pane].is-active { display: block; }

/* ---- USP strip -------------------------------------------------------------- */
.usp { padding: clamp(44px, 6vw, 72px) 0; background: var(--white); }
.usp--tint { background: var(--off-white); }
.usp__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  text-align: center;
}
.usp__item svg { width: 30px; height: 30px; margin: 0 auto 14px; stroke-width: 1.1; }
.usp__item .label { display: block; color: var(--grey); margin-bottom: 6px; letter-spacing: 0.16em; font-size: 10.5px; }
.usp__item-lead { font-size: 15px; }
.usp__dots { display: none; }
@media (max-width: 700px) {
  .usp__row { grid-template-columns: 1fr; }
  .usp__item { display: none; }
  .usp__item.is-active { display: block; }
  .usp__dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
  .usp__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-light); transition: background 0.3s ease; }
  .usp__dot.is-active { background: var(--ink); }
}

/* ---- Forms ------------------------------------------------------------------ */
.field {
  width: 100%;
  border: 1px solid var(--ink); background: transparent;
  padding: 15px 16px;
  /* The tracked-uppercase look belongs to the PLACEHOLDER, not to what the
     customer types. This used to uppercase the input itself, which meant the
     account page greeted people with "JANA DE WET" living at "12 VINEYARD
     ROAD", and shouted their own email address back at them. Same font-size in
     both states so the field never changes height as you type. */
  font-size: 13px; letter-spacing: normal; text-transform: none;
  outline: none;
}
.field::placeholder { color: var(--grey); text-transform: uppercase; letter-spacing: 0.12em; }
.field:focus { border-color: var(--gold); }
.field--area { min-height: 120px; resize: vertical; }
/* A field that holds real data needs a label that survives being filled in —
   a placeholder disappears the moment you type, which left the account page
   showing six anonymous boxes of somebody's own details. */
.field-row { display: block; }
.field-row > span {
  display: block; margin-bottom: 5px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey);
}
.form-grid { display: grid; gap: 14px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-grid--2 { grid-template-columns: 1fr; } }
.form__done { display: none; text-align: center; font-family: var(--serif); font-size: 22px; font-style: italic; padding: 24px 0; }

.on-dark .field { border-color: rgba(255,255,255,0.5); color: var(--white); }
.on-dark .field::placeholder { color: rgba(255,255,255,0.55); }
.on-dark .field:focus { border-color: var(--gold); }

/* ---- Accordion ---------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line-light); }
.accordion__item { border-bottom: 1px solid var(--line-light); }
.accordion__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 20px 2px; text-align: left;
  font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.accordion__head::after {
  content: '+'; font-family: var(--serif); font-size: 22px; font-weight: 300; line-height: 1;
  transition: transform 0.35s var(--ease);
}
.accordion__item.is-open .accordion__head::after { transform: rotate(45deg); }
.accordion__body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s var(--ease);
  color: var(--grey); font-size: 13px;
}
.accordion__item.is-open .accordion__body { max-height: 640px; }
.accordion__body-inner { padding: 2px 2px 24px; }

/* spec table inside accordion */
.spec { width: 100%; border-collapse: collapse; }
.spec td, .spec th { padding: 8px 0; border-bottom: 1px solid var(--line-light); font-size: 12.5px; }
.spec th { text-align: left; color: var(--ink); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.spec td:last-child { text-align: right; }

/* ---- Footer --------------------------------------------------------------------- */
.site-footer { background: #14100d; color: rgba(245,243,240,0.82); }
.site-footer__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.6fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(56px, 8vw, 88px) 0 clamp(28px, 4vw, 44px);
}
.site-footer h3 {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
}
.site-footer__links { list-style: none; }
.site-footer__links li { margin-bottom: 13px; }
.site-footer__links a {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; letter-spacing: 0.05em; color: rgba(233,222,205,0.85);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
  transition: color 0.3s ease, background-size 0.4s var(--ease);
  padding-bottom: 2px;
}
.site-footer__links a:hover { color: var(--gold); background-size: 100% 1px; }
.site-footer__news-card {
  border: 1px solid rgba(245,243,240,0.16); border-radius: 10px;
  padding: clamp(14px, 2vw, 22px);
  background: rgba(255,255,255,0.02);
}
.site-footer__brandrow {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 0 clamp(28px, 4vw, 40px);
}
.site-footer__brand { font-family: var(--serif); font-size: 32px; letter-spacing: 0.16em; color: var(--gold); }
.site-footer__social { display: flex; gap: 20px; }
.site-footer__social a { color: rgba(245,243,240,0.6); transition: color 0.3s ease, transform 0.3s var(--ease); }
.site-footer__social a:hover { color: var(--gold); transform: translateY(-2px); }
.site-footer__social svg { width: 19px; height: 19px; }
.site-footer__strip { background: #1d1814; padding: 16px 0 14px; }
.site-footer__strip-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,243,240,0.5);
}
.site-footer__strip-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-footer__secure { color: rgba(245,243,240,0.65); }
.site-footer__strip-right { display: flex; align-items: center; gap: 12px; }
.site-footer__strip-right a { color: rgba(245,243,240,0.5); transition: color 0.3s ease; }
.site-footer__strip-right a:hover { color: var(--gold); }
.site-footer__strip-right i { font-style: normal; opacity: 0.5; }
.pay-icons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pay-icons span {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 3px;
  font-size: 8px; font-weight: 600; letter-spacing: 0.06em;
  padding: 3px 6px; color: rgba(255,255,255,0.75); text-transform: none;
}
@media (max-width: 960px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__news-card { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .site-footer__brandrow { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---- Reveal animation -------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal--d1 { transition-delay: 0.12s; }
.reveal--d2 { transition-delay: 0.24s; }
.reveal--d3 { transition-delay: 0.36s; }

/* choreographed children: label -> heading -> copy -> cta rise in sequence */
.reveal > .band__meta, .reveal > .label,
.reveal > h1, .reveal > h2, .reveal > h3,
.reveal > p, .reveal > .lede, .reveal > .btn, .reveal > .text-link,
.reveal > .band__kick, .reveal > img, .reveal > .wine-row__actions, .reveal > .wine-row__price {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in > * { opacity: 1; transform: translateY(0); }
.reveal.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal.in > *:nth-child(2) { transition-delay: 0.15s; }
.reveal.in > *:nth-child(3) { transition-delay: 0.25s; }
.reveal.in > *:nth-child(4) { transition-delay: 0.35s; }
.reveal.in > *:nth-child(5) { transition-delay: 0.45s; }
.reveal.in > *:nth-child(n+6) { transition-delay: 0.55s; }

/* Ken Burns settle on full-bleed media (class added by JS) — kept subtle so
   band subjects are never cropped by the zoom */
.kb img { transform: scale(1.035); transition: transform 6.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1s var(--ease), opacity 1s var(--ease); }
.kb.in img { transform: scale(1); }
.kb .hero__video { transform: none; }

/* Hero entrance on load */
.hero__content > * { opacity: 0; transform: translateY(22px); animation: rise 1s var(--ease) forwards; }
.hero__content > *:nth-child(1) { animation-delay: 0.25s; }
.hero__content > *:nth-child(2) { animation-delay: 0.45s; }
.hero__content > *:nth-child(3) { animation-delay: 0.7s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.hero__media img { animation: heroSettle 2.4s var(--ease) both; }
@keyframes heroSettle { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Cross-document page transitions (progressive enhancement, Chromium) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 0.28s; }
  ::view-transition-new(root) { animation-duration: 0.28s; }
}

/* Menu drawer — staggered items */
.panel .menu__list > li { opacity: 0; transform: translateX(18px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.panel.is-open .menu__list > li { opacity: 1; transform: none; }
.panel.is-open .menu__list > li:nth-child(1) { transition-delay: 0.16s; }
.panel.is-open .menu__list > li:nth-child(2) { transition-delay: 0.24s; }
.panel.is-open .menu__list > li:nth-child(3) { transition-delay: 0.32s; }
.panel.is-open .menu__list > li:nth-child(4) { transition-delay: 0.4s; }
.panel.is-open .menu__list > li:nth-child(n+5) { transition-delay: 0.48s; }

/* Micro-interactions */
.btn { transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(24,20,16,0.55); }
.btn:active { transform: translateY(0); }
.text-link {
  border-bottom: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%;
  transition: opacity 0.3s ease, background-size 0.35s var(--ease);
}
.text-link:hover { opacity: 1; background-size: 35% 1px; }
.wine-row__media { overflow: hidden; }
.wine-row__media img { transition: transform 1.4s var(--ease); }
.wine-row:hover .wine-row__media img { transform: scale(1.03); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal > *, .panel .menu__list > li { opacity: 1; transform: none; transition: none; }
  .kb img, .wine-row__media img { transform: none; transition: none; }
  .hero__content > * { animation: none; opacity: 1; transform: none; }
  .hero__media img { animation: none; }
  .btn:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- PDP ------------------------------------------------------------------------------ */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 640px; }
.pdp__media { position: relative; background: var(--off-white); }
.pdp__media picture { position: absolute; inset: 17.5%; }
.pdp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pdp__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 88px);
  background: var(--off-white);
}
.pdp__vintage { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--grey); }
.pdp__name { font-family: var(--serif); font-size: clamp(40px, 5vw, 64px); line-height: 1.06; margin: 6px 0 14px; }
.pdp__price { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 24px; }

/* format selector: single bottle vs case of 6 */
.pdp__actions { display: grid; gap: 12px; max-width: 380px; }
.pdp__body { margin-top: 34px; max-width: 46ch; color: var(--grey); font-size: 13.5px; }
.pdp .accordion { margin-top: 38px; max-width: 460px; }
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__media { min-height: 60vw; position: relative; background: var(--off-white); }
  .pdp__media picture { position: absolute; inset: 20px 72px; }
  .pdp__media img { position: absolute; inset: 0; object-fit: contain; }
}

.pairs { display: flex; gap: 22px; align-items: center; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line-light); max-width: 460px; }
.pairs__img { flex: none; width: 74px; }
.pairs__img img { width: 74px; height: 98px; object-fit: cover; }
.pairs__body { flex: 1; }
.pairs__label { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.pairs__name { font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.pairs__price { font-size: 11px; color: var(--grey); letter-spacing: 0.1em; margin-top: 4px; }

/* ---- Tasting notes (home) -------------------------------------------------------- */
.tnotes { display: flex; flex-direction: column; gap: clamp(52px, 8vw, 92px); }
.tnotes__card { max-width: 620px; margin: 0 auto; }
.tnotes__head { display: flex; align-items: baseline; gap: 14px; }
.tnotes__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-light); max-width: 460px;
}
.tnotes__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.tnotes__icon { width: 26px; height: 26px; stroke: var(--gold); stroke-width: 1.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tnotes__item span { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.3; }
.tnotes__spec { margin-top: 22px; }
@media (max-width: 720px) {
  .tnotes__card { text-align: center; }
  .tnotes__head { justify-content: center; }
  .tnotes__grid { max-width: none; }
}

/* ---- Membership ------------------------------------------------------------------------- */
.monogram { width: 74px; height: 74px; margin: 0 auto 26px; }
.benefit-tabs { max-width: 860px; margin: 0 auto; }
.benefit-tabs .tabbar { margin-bottom: 44px; }
.benefit { text-align: center; max-width: 560px; margin: 0 auto; }
.benefit h3 { font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }
.benefit p { color: var(--grey); }
.benefit .text-link { display: inline-block; margin-top: 24px; }

.quote-band { text-align: center; }
.quote-band blockquote {
  font-family: var(--serif); font-size: clamp(22px, 3.2vw, 34px); font-style: italic;
  line-height: 1.5; letter-spacing: 0.02em; max-width: 880px; margin: 0 auto;
}
.quote-band cite { display: block; font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-top: 26px; }

/* ---- Journal article ----------------------------------------------------------------------- */
.article { max-width: 720px; margin: 0 auto; }
.article__meta { display: flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 18px; }
.article__title { text-align: center; font-size: clamp(26px, 4vw, 40px); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; line-height: 1.3; }
.article__body { margin-top: 44px; }
.article__body p { color: var(--grey); font-size: 14.5px; line-height: 1.9; margin-bottom: 24px; }
.article__body figure { margin: 40px 0; }
.article__pull {
  border-left: 2px solid var(--gold);
  padding: 6px 0 6px 28px; margin: 40px 0;
  font-family: var(--serif); font-size: clamp(20px, 2.6vw, 26px); font-style: italic; line-height: 1.5;
  color: var(--ink);
}

/* ---- Pillars (Our Legacy) --------------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.pillar { position: relative; overflow: hidden; background: var(--stone); color: var(--white); min-height: 520px; display: flex; align-items: flex-end; }
.pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.8; transition: transform 1.4s var(--ease); }
.pillar:hover img { transform: scale(1.05); }
.pillar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24,20,16,0.82), rgba(24,20,16,0.05) 55%); }
.pillar__body { position: relative; z-index: 2; padding: 30px; }
.pillar__body .label { display: block; color: var(--gold); margin-bottom: 10px; }
.pillar__name { display: block; font-family: var(--serif); font-size: 27px; margin-bottom: 10px; }
.pillar__line { display: block; font-size: 12.5px; color: rgba(255,255,255,0.8); max-width: 34ch; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } .pillar { min-height: 420px; } }

/* ---- Policy pages -------------------------------------------------------------------------------- */
.policy { display: grid; grid-template-columns: 220px 1fr; gap: clamp(32px, 6vw, 88px); }
.policy__nav { position: sticky; top: 24px; align-self: start; }
.policy__nav a {
  display: block; padding: 8px 0; font-size: 13px; color: var(--grey);
  transition: color 0.3s ease;
}
.policy__nav a:hover { color: var(--ink); }
.policy__nav a.is-active { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.policy__body { max-width: 74ch; }
.policy__body h2 { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 36px 0 14px; }
.policy__body h2:first-child { margin-top: 0; }
.policy__body p, .policy__body li { font-size: 13px; color: var(--grey); margin-bottom: 12px; line-height: 1.85; }
.policy__body ul { padding-left: 20px; margin-bottom: 14px; }
@media (max-width: 800px) {
  .policy { grid-template-columns: 1fr; }
  .policy__nav { position: static; display: flex; gap: 22px; flex-wrap: wrap; border-bottom: 1px solid var(--line-light); padding-bottom: 18px; }
}

/* ---- Utility -------------------------------------------------------------------------------------- */
.tc { text-align: center; }
.mt-0 { margin-top: 0; }
.hidden { display: none; }
.gold { color: var(--gold); }
.grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.66 0 0 0 0 0.44 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Staff order portal (/staff/) — the fulfilment surface.
   Scoped entirely to .staff-* so nothing here can leak into the shop. Uses
   the site tokens (--black/--gold/--paper/--grey) rather than new colours:
   staff should feel like they are inside Sieraad, not a separate admin tool.
   ========================================================================== */
.staff-topline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}

.staff-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px;
}
.staff-tile { border: 1px solid var(--line-light); padding: 18px 20px; background: #fff; }
.staff-tile--accent { border-color: var(--gold); }
.staff-tile__label {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grey);
}
.staff-tile__value {
  font-family: var(--serif); font-size: 34px; line-height: 1.1; margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
}
.staff-tile__sub { font-family: var(--sans); font-size: 12px; color: var(--grey); }

.staff-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.staff-tab {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--line-light); background: transparent;
  color: var(--ink); cursor: pointer; transition: all 0.25s var(--ease);
}
.staff-tab:hover { border-color: var(--gold); }
.staff-tab.is-active { background: var(--black); border-color: var(--black); color: var(--gold); }

.staff-filters {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; gap: 12px;
  align-items: end; margin-bottom: 16px;
}
.staff-filters .field-row { margin: 0; }

/* The table scrolls inside its own box — the page body never scrolls sideways. */
.staff-tablewrap { overflow-x: auto; border: 1px solid var(--line-light); background: #fff; }
.staff-table { width: 100%; min-width: 760px; border-collapse: collapse; font-family: var(--sans); font-size: 13px; }
.staff-table th {
  text-align: left; padding: 12px 14px; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grey); border-bottom: 1px solid var(--line-light);
  font-weight: 600; white-space: nowrap;
}
.staff-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-light); vertical-align: top; }
.staff-table tbody tr { cursor: pointer; transition: background 0.2s var(--ease); }
.staff-table tbody tr:hover { background: var(--paper); }
.staff-table tbody tr:last-child td { border-bottom: 0; }
.staff-ref { font-variant-numeric: tabular-nums; white-space: nowrap; }
.staff-sub { font-size: 11.5px; color: var(--grey); }
.staff-empty { text-align: center; padding: 34px 14px !important; color: var(--grey); cursor: default; }

.staff-pill {
  display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; white-space: nowrap; border: 1px solid;
}
.staff-pill.is-good { color: #2f6b3f; border-color: #b9d4c1; background: #eef5f0; }
.staff-pill.is-warn { color: #8a6314; border-color: #e4d0a4; background: #f8f1e2; }
.staff-pill.is-bad { color: #8c2320; border-color: #e2b9b7; background: #f8ecec; }
.staff-pill.is-dim { color: var(--grey); border-color: var(--line-light); background: var(--paper); }

.staff-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 16px; flex-wrap: wrap;
}
.staff-pager .label { color: var(--grey); }

/* Drawer — the same right-hand slide the cart uses, so it is already familiar. */
.staff-overlay {
  position: fixed; inset: 0; background: rgba(24, 20, 16, 0.5); z-index: 90;
}
.staff-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 96vw);
  background: #fff; z-index: 91; display: flex; flex-direction: column;
  box-shadow: -14px 0 40px rgba(24, 20, 16, 0.18);
}
/* display:flex above outranks the UA [hidden] rule, so say it again here or the
   drawer sits open over every page load. */
.staff-drawer[hidden] { display: none; }
.staff-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 22px 24px; background: var(--black); color: #fff;
}
.staff-drawer__ref {
  font-family: var(--serif); font-size: 26px; font-weight: 400; margin: 4px 0 0;
  letter-spacing: 0.04em; color: #fff;
}
.staff-drawer__close {
  background: none; border: 0; color: var(--gold); font-size: 30px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.staff-drawer__body { padding: 24px; overflow-y: auto; flex: 1; }
body.staff-drawer-open { overflow: hidden; }

.staff-pillrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.staff-h { margin: 26px 0 12px; }
.staff-pre { white-space: pre-wrap; font-size: 13px; margin: 0; }
.staff-kvlist { margin: 0; }
.staff-kv { display: grid; grid-template-columns: 8.5rem 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-light); }
.staff-kv dt { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.staff-kv dd { margin: 0; font-family: var(--sans); font-size: 13px; word-break: break-word; }
.staff-inv { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; }
.staff-inv td { padding: 8px 0; border-bottom: 1px solid var(--line-light); }
.staff-inv-total td { font-weight: 600; border-bottom: 0; padding-top: 12px; }

.staff-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 95;
  background: var(--black); color: #fff; font-family: var(--sans); font-size: 13px;
  padding: 13px 22px; box-shadow: 0 10px 30px rgba(24, 20, 16, 0.24); max-width: 90vw;
}
.staff-toast.is-error { background: #8c2320; }

@media (max-width: 980px) {
  .staff-tiles { grid-template-columns: repeat(2, 1fr); }
  .staff-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .staff-tiles { grid-template-columns: 1fr; }
  .staff-filters { grid-template-columns: 1fr; }
  .staff-kv { grid-template-columns: 1fr; gap: 2px; }
}