/* The marketing site's wine footer and top nav, for the hand-written legal pages
   (privacy, terms, support, delete-account) until they move into the site
   generator. Rules copied from assets/css/site.css, with its tokens scoped
   to the footer, plus resets for page.css's global footer, a and button
   rules. Remove this file once those pages are generated. */
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-latin-italic.woff2") format("woff2"); }

.site-footer {
  --on-dark: #FDF7F4; --ink: #2E2124; --wine: #6B2A38; --dusty-rose: #D9A8A0; --night: #221719;
  --line-dark-strong: rgba(253, 247, 244, 0.3);
  --rose-i: rgba(217, 168, 160, 0.7); --rose-0: rgba(217, 168, 160, 0);
  --wine-e: rgba(107, 42, 56, 0.8); --wine-0: rgba(107, 42, 56, 0);
  --font-display: "Fraunces", Georgia, serif; --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
  --ls-cta: -0.04em; --ls-eyebrow: 0.14em; --r-card: 26px; --r-step: 28px; --frame: 1280px;
  /* undo page.css's footer rule; span the body's 24px side padding */
  width: calc(100% + 48px); max-width: none; margin: 72px -24px 0;
  border: 0; display: block; color: var(--on-dark); font: inherit;
  padding: 0 24px 24px;
}
.site-footer a { text-decoration: none; }
.site-footer .ic { width: 24px; height: 24px; flex: none; fill: currentColor; }

.cta {
  max-width: calc(var(--frame) - 48px); margin-inline: auto;
  padding: 104px 64px 36px; border-radius: var(--r-step);
  background: radial-gradient(600px 400px at 15% 20%, var(--rose-i), var(--rose-0) 70%), radial-gradient(600px 400px at 90% 90%, var(--wine-e), var(--wine-0) 70%), var(--wine);
  color: var(--on-dark);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px;
}
/* .site-footer prefix: beats page.css's .legal h2 / .legal p rules */
.site-footer .cta__title { color: var(--on-dark); max-width: 900px; margin: 0; font: 500 88px/0.96 var(--font-display); letter-spacing: var(--ls-cta); text-wrap: balance; }
.cta__stores { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cta__grid {
  margin-top: 56px; width: 100%; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px; padding-top: 32px; border-top: 1px solid var(--line-dark-strong); text-align: left;
}
.cta__col { display: flex; flex-direction: column; gap: 10px; }
.cta__brand { font: 500 22px/1 var(--font-display); }
.cta__tag { font: 400 14px/20px var(--font-ui); opacity: 0.85; max-width: 260px; }
.site-footer .cta__colt { color: var(--on-dark); margin: 0; font: 600 11px/16px var(--font-ui); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; opacity: 0.8; }
.cta__col a { font: 400 15px/22px var(--font-ui); color: var(--on-dark); }
.cta__col a:hover { color: var(--dusty-rose); }
.cta__cookie {
  height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: none;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.cta__cookie:hover, .cta__cookie:active { filter: none; transform: none; }
.cta__bottom { width: 100%; display: flex; justify-content: space-between; align-items: center; font: 400 13px/18px var(--font-ui); opacity: 0.85; }
.cta__socials { display: inline-flex; gap: 20px; }
.cta__social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -12px -12px 0; color: var(--on-dark); }
.cta__social .ic { width: 22px; height: 22px; }
.cta__social:hover { color: var(--dusty-rose); }

.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 24px; border-radius: 16px;
  border: 1px solid transparent; text-decoration: none;
}
.store-btn .store-btn__icon { width: 26px; height: 26px; }
.store-btn__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.store-btn__small { font: 500 11px/14px var(--font-ui); letter-spacing: 0.01em; opacity: 0.75; }
.store-btn__big { font: 600 18px/22px var(--font-ui); letter-spacing: -0.01em; white-space: nowrap; }
.store-btn--night { background: var(--night); color: var(--on-dark); border-color: rgba(255,255,255,0.14); }
.store-btn.is-soon { cursor: default; user-select: none; }

/* the header's logo, now a link home */
a.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }

@media (max-width: 1024px) {
  .site-footer .cta__title { font-size: 68px; }
  .cta__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .site-footer { padding: 10px; margin-top: 48px; }
}
/* page.css narrows the body's side padding to 16px here */
@media (max-width: 400px) {
  .site-footer { width: calc(100% + 32px); margin-inline: -16px; }
}
@media (max-width: 768px) {
  .cta { padding: 64px 22px 28px; border-radius: var(--r-card); align-items: stretch; text-align: left; gap: 24px; }
  .site-footer .cta__title { font-size: 46px; line-height: 1; letter-spacing: -0.03em; }
  .cta__stores { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta__stores .store-btn { width: 100%; height: 56px; border-radius: 14px; padding: 0 20px; justify-content: center; }
  .cta__brandcol { display: none; }
  .cta__grid { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-top: 24px; }
  .cta__col { gap: 8px; }
  .cta__col a { line-height: 24px; }
}

/* ---------- The marketing site's top nav and mobile menu sheet ----------
   Same idea as the footer above: rules copied from assets/css/site.css with
   tokens scoped to the header and sheet, plus resets for page.css's global
   header, a and button rules. site.js opens and closes the sheet. */
.site-header, .sheet {
  --canvas: #F7EEE9; --ink: #2E2124; --muted: #7A6660; --wine: #6B2A38; --wine-light: #B35A6A;
  --on-dark: #FDF7F4; --line-strong: rgba(46, 33, 36, 0.18);
  --font-display: "Fraunces", Georgia, serif; --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
  --ls-label: 0.12em; --r-pill: 999px; --press: 0.97; --t-press: 160ms; --t-base: 240ms;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: 64px; --gutter-m: 20px; --nav-h: 96px; --frame: 1280px;
}
/* undo page.css's header rule; span the body's side and top padding */
.site-header { display: block; max-width: none; width: calc(100% + 48px); margin: -28px -24px 0; }
.site-header a, .sheet a { text-decoration: none; }
.site-header .ic, .sheet .ic { width: 24px; height: 24px; flex: none; fill: currentColor; }
.site-header .wrap { width: 100%; max-width: var(--frame); margin-inline: auto; padding-inline: var(--gutter); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.site-header .brand, .sheet .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand__tile { width: 30px; height: 30px; border-radius: 9px; background: var(--wine); }
.brand__word { font: 500 21px/1 var(--font-display); color: var(--ink); }
.nav__links { display: flex; gap: 30px; }
.nav__link { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 14px/20px var(--font-ui); color: var(--muted); transition: color var(--t-base) var(--ease); }
.nav__link::after { content: ""; width: 5px; height: 5px; border-radius: var(--r-pill); background: transparent; }
.nav__link:hover { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__ctas { display: flex; gap: 8px; }
.site-header .btn, .sheet .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font: 600 12px/16px var(--font-ui); letter-spacing: var(--ls-label); text-transform: uppercase;
  white-space: nowrap; transition: transform var(--t-press) var(--ease);
}
.site-header .btn--primary, .sheet .btn--primary { background: var(--wine); color: var(--on-dark); }
.site-header .btn--primary:hover, .sheet .btn--primary:hover { color: var(--on-dark); }
.site-header .press:active, .sheet .press:active { transform: scale(var(--press)); }
.nav__cta { padding: 12px 20px; }
.sheet .btn--lg { height: 56px; padding: 0 26px; font-size: 13px; line-height: 18px; }
/* page.css styles every <button> as a tall uppercase gradient pill */
.nav__menu, .sheet__close {
  width: 44px; height: 44px; padding: 0; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: none; box-shadow: none; color: var(--ink);
  align-items: center; justify-content: center; text-transform: none; letter-spacing: normal;
}
.nav__menu { display: none; }
.sheet__close { display: flex; }
.nav__menu .ic { width: 22px; height: 22px; }
.nav__menu:hover, .sheet__close:hover { filter: none; }
.sheet {
  position: fixed; inset: 0; z-index: 50; background: var(--canvas);
  display: flex; flex-direction: column; padding: 18px var(--gutter-m) 28px;
  animation: sheetIn var(--t-base) var(--ease) both; overflow-y: auto;
}
.sheet[hidden] { display: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.sheet__head .brand__tile { width: 28px; height: 28px; border-radius: 8px; }
.sheet__head .brand__word { font-size: 19px; }
.sheet__links { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; }
.sheet__links a { display: block; padding: 8px 0; font: 500 28px/36px var(--font-display); color: var(--ink); }
.sheet__cta { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.sheet__cta .btn { width: 100%; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.menu-open, html.menu-open body { overflow: hidden; }
@media (min-width: 769px) { .site-header .m-only { display: none !important; } }
@media (max-width: 1024px) {
  .site-header { --gutter: 40px; }
  .nav__links { gap: 18px; }
}
@media (max-width: 768px) {
  .site-header { --gutter: var(--gutter-m); --nav-h: 80px; }
  .site-header .d-only { display: none !important; }
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
  .site-header .brand { gap: 8px; }
  .site-header .brand__tile { width: 28px; height: 28px; border-radius: 8px; }
  .site-header .brand__word { font-size: 19px; }
  .nav__cta { padding: 10px 14px; font-size: 11px; letter-spacing: 0.1em; }
}
@media (max-width: 400px) {
  .site-header { width: calc(100% + 32px); margin: -20px -16px 0; }
}
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }