/* The header and the footer, once.
   Every surface of this site wears the same bar and the same footer — the homepage, the rulebook,
   the wholesale and affiliate pages, the thank-you page, the 404 and the affiliate's own portal.
   They used to be written out three times, in three stylesheets, which is how three headers start
   drifting apart. This is the one copy. Each host stylesheet supplies the palette by setting the
   --chrome-* tokens below; the defaults here are the site's own, so the file stands on its own. */
:root {
  --chrome-paper: #f4eee1;
  --chrome-ink: #1d1913;
  --chrome-ink-soft: #4a4034;
  --chrome-accent: #6b1e2e;
  --chrome-gold: #ab8b4e;
  --chrome-gold-soft: #d3b071;
  --chrome-hair: #cdbb96;
  --chrome-dark: #1d1913;
  --chrome-dark-ink: #f2e9d8;
  --chrome-dark-body: #d8cdb9;
  --chrome-dark-muted: #a99c85;
  --chrome-dark-faint: #8d8271;
  --chrome-dark-rule: rgba(201, 171, 110, 0.22);
  --chrome-display: 'Cinzel', Georgia, serif;
  --chrome-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 60; isolation: isolate; min-height: var(--header-h, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-inline: var(--gutter, clamp(1.35rem, 5vw, 5rem));
  background: var(--chrome-paper); border-bottom: 1px solid var(--chrome-hair);
}
/* the official mark beside the name — one lockup, in the brand gold, in the bar and in the foot */
.site-header > .wordmark, .site-footer .wordmark {
  display: inline-flex; align-items: center; gap: 0.72rem;
}
.site-header > .wordmark img { height: 2.05rem; width: auto; flex: none; }
.site-footer .wordmark img { height: 2.2rem; width: auto; flex: none; }
.site-header > .wordmark {
  font-family: var(--chrome-display); font-size: clamp(0.95rem, 1.35vw, 1.15rem); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--chrome-ink);
  text-decoration: none;
}
.site-nav { display: flex; gap: clamp(1.4rem, 3vw, 2.9rem); }
.site-nav a {
  font-family: var(--chrome-display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--chrome-ink-soft); padding-block: 0.4rem;
  text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav a:hover { color: var(--chrome-accent); border-color: var(--chrome-accent); }
.site-nav a[aria-current='page'], .site-nav a[aria-current='true'] { color: var(--chrome-accent); border-color: var(--chrome-gold); }
.header-cta { display: flex; align-items: center; gap: 1.1rem; }
.header-cta .btn { padding: 0.72rem 1.3rem; font-size: 0.72rem; letter-spacing: 0.16em; white-space: nowrap; }
.header-cta form { margin: 0; }
.nav-toggle {
  display: none; width: 34px; height: 34px; align-items: center; justify-content: center;
  flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 1.5px; background: var(--chrome-ink); content: '';
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ------------------------------------------------------------------ over a hero
   A page that opens on a photograph puts the bar on the picture rather than on a cream strip above
   it. Only that page opts in, with `has-hero` on the body, so every other surface keeps the solid
   header. The page then adds `is-scrolled` once the hero has gone past — see home.js, which watches
   the hero with an IntersectionObserver rather than listening to scroll.

   Two things this has to survive. Without JavaScript the class never arrives, so the transparent
   state carries its own gradient: light type always has a ground under it, even if the bar ends up
   over a cream band. And when the small-screen menu opens, the panel is cream — so a transparent
   bar above it would look broken. `:has()` puts the bar back to solid for as long as it is open. */
body.has-hero .site-header {
  background: transparent; border-bottom-color: transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
/* The bar stays sticky — turning it fixed would take it out of flow and every band below would
   need padding to make up for it. Instead the hero is pulled up by exactly the bar's height, so
   the picture starts at the top of the screen and runs the full height of it with the bar on top. */
body.has-hero > main > .hero:first-child { margin-top: calc(var(--header-h, 72px) * -1); }
body.has-hero .site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 8, 6, .55), rgba(11, 8, 6, 0));
  transition: opacity .35s ease;
}
body.has-hero .site-header > .wordmark { color: #f6efe2; }
body.has-hero .site-nav a { color: rgba(246, 239, 226, .82); }
body.has-hero .site-nav a:hover { color: #fff; border-color: var(--chrome-gold-soft); }
body.has-hero .site-nav a[aria-current='page'] { color: #fff; border-color: var(--chrome-gold); }
body.has-hero .nav-toggle span,
body.has-hero .nav-toggle span::before,
body.has-hero .nav-toggle span::after { background: #f6efe2; }
/* wine on a dark photograph is barely a button; the brand's metal is, and it is the one thing in
   the bar that has to be unmissable */
body.has-hero .header-cta .btn {
  background: var(--chrome-gold); border-color: var(--chrome-gold); color: #17120d;
  box-shadow: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
body.has-hero .header-cta .btn:hover { background: var(--chrome-gold-soft); border-color: var(--chrome-gold-soft); color: #17120d; }

/* past the hero, and whenever the menu is open, the bar is itself again */
body.has-hero.is-scrolled .site-header,
body.has-hero:has(.site-nav[data-open='true']) .site-header {
  background: var(--chrome-paper); border-bottom-color: var(--chrome-hair);
}
body.has-hero.is-scrolled .site-header::before,
body.has-hero:has(.site-nav[data-open='true']) .site-header::before { opacity: 0; }
body.has-hero.is-scrolled .site-header > .wordmark,
body.has-hero:has(.site-nav[data-open='true']) .site-header > .wordmark { color: var(--chrome-ink); }
body.has-hero.is-scrolled .site-nav a,
body.has-hero:has(.site-nav[data-open='true']) .site-nav a { color: var(--chrome-ink-soft); }
body.has-hero.is-scrolled .site-nav a:hover,
body.has-hero:has(.site-nav[data-open='true']) .site-nav a:hover { color: var(--chrome-accent); border-color: var(--chrome-accent); }
body.has-hero.is-scrolled .nav-toggle span,
body.has-hero.is-scrolled .nav-toggle span::before,
body.has-hero.is-scrolled .nav-toggle span::after,
body.has-hero:has(.site-nav[data-open='true']) .nav-toggle span,
body.has-hero:has(.site-nav[data-open='true']) .nav-toggle span::before,
body.has-hero:has(.site-nav[data-open='true']) .nav-toggle span::after { background: var(--chrome-ink); }
body.has-hero.is-scrolled .header-cta .btn,
body.has-hero:has(.site-nav[data-open='true']) .header-cta .btn {
  background: var(--chrome-accent); border-color: var(--chrome-accent); color: #f6efe2;
  box-shadow: inset 0 0 0 1px rgba(201, 171, 110, .55);
}
@media (prefers-reduced-motion: reduce) {
  body.has-hero .site-header, body.has-hero .site-header::before, body.has-hero .header-cta .btn { transition: none; }
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  background: var(--chrome-dark); color: var(--chrome-dark-body);
  border-top: 1px solid var(--chrome-dark-rule);
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter, clamp(1.35rem, 5vw, 5rem)) 2rem;
}
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--chrome-dark-rule);
}
.site-footer .wordmark {
  font-family: var(--chrome-display); color: var(--chrome-dark-ink);
  font-size: clamp(0.95rem, 1.35vw, 1.15rem); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.footer-top p { font-family: var(--chrome-ui); font-size: 0.84rem; margin-top: 0.9rem; color: var(--chrome-dark-muted); }
.footer-links { display: grid; gap: 0.8rem; font-family: var(--chrome-ui); font-size: 0.9rem; list-style: none; margin: 0; padding: 0; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--chrome-gold-soft); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.6rem; font-family: var(--chrome-ui); font-size: 0.78rem; color: var(--chrome-dark-faint);
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--chrome-gold-soft); }

/* ------------------------------------------------------------------ small screens
   The links fold into a panel under the bar. The marketing button goes with them — every page
   repeats it further down — but a button that signs you out has nowhere else to live, so it stays. */
@media (max-width: 1023px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-nav[data-open='true'] {
    display: grid; position: absolute; top: var(--header-h, 72px); left: 0; right: 0; gap: 0; z-index: 59;
    background: var(--chrome-paper); border-bottom: 1px solid var(--chrome-hair);
    padding: 0.5rem var(--gutter, clamp(1.35rem, 5vw, 5rem)) 1.25rem;
  }
  .site-nav[data-open='true'] a { padding-block: 0.85rem; border-bottom: 1px solid var(--chrome-hair); }
  .header-cta > a.btn { display: none; }
  .header-cta .btn { padding: 0.6rem 0.9rem; font-size: 0.66rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
}
/* between the menu breakpoint and a roomy desktop there is just enough width for the bar, and
   only just: without this the five links wrapped onto two lines and the button broke in half */
@media (min-width: 1024px) and (max-width: 1200px) {
  .site-header { gap: 1rem; }
  .site-header > .wordmark { font-size: 0.92rem; letter-spacing: 0.08em; }
  .site-header > .wordmark img { height: 1.85rem; }
  .site-nav { gap: 1.15rem; }
  .site-nav a { font-size: 0.66rem; letter-spacing: 0.13em; }
  .header-cta { gap: 0.8rem; }
  .header-cta .btn { padding: 0.62rem 0.85rem; font-size: 0.64rem; letter-spacing: 0.12em; }
}
@media (max-width: 520px) {
  .site-header { gap: 0.75rem; }
  .site-header > .wordmark { font-size: 0.82rem; letter-spacing: 0.08em; white-space: normal; gap: 0.55rem; }
  .site-header > .wordmark img { height: 1.75rem; }
  .footer-top { grid-template-columns: 1fr; }
}