/* ============================================================
   The Vineyard Wine Market — site stylesheet
   Palette: charcoal / deep burgundy / aged gold / warm cream
   ============================================================ */

:root {
  --ink: #171114;          /* near-black plum */
  --ink-soft: #221a1e;     /* card backgrounds */
  --ink-lift: #2d2227;     /* lifted surfaces */
  --wine: #7d2939;         /* deep burgundy */
  --wine-bright: #a03a4d;  /* hover burgundy */
  --gold: #c9a35c;         /* aged gold accent */
  --gold-soft: #e0c893;
  --cream: #f3ead9;        /* primary text on dark */
  --cream-dim: #cbbfae;    /* secondary text */
  --line: rgba(201, 163, 92, 0.25);
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--gold); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--gold-soft); }

/* ---------- typography ---------- */

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--cream);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: 1.45rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.lede { font-size: 1.15rem; color: var(--cream-dim); max-width: 62ch; }

/* ---------- layout helpers ---------- */

.wrap { width: min(1120px, 92%); margin: 0 auto; }

section { padding: 5.5rem 0; }

.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

.rule {
  width: 64px; height: 1px;
  background: var(--gold);
  margin: 1.6rem 0;
  border: 0;
}
.center .rule { margin-left: auto; margin-right: auto; }

/* ---------- header / nav ---------- */

header.site {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(125, 41, 57, 0.18), transparent 60%),
    var(--ink);
}

.masthead {
  position: relative;
  display: flex; justify-content: center;
  padding: 2.2rem 0 1.4rem;
  overflow: hidden;
}

.masthead .flourish {
  position: absolute; top: 52%;
  width: clamp(180px, 25vw, 430px);
  opacity: 0.65;
  pointer-events: none;
}
.masthead .flourish.left {
  left: 1.5%;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 55%, transparent 97%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 55%, transparent 97%);
}
.masthead .flourish.right {
  right: 1.5%;
  transform: translateY(-50%) scale(-1, -1);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 55%, transparent 97%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 55%, transparent 97%);
}
.masthead a { display: block; line-height: 0; }
.masthead svg.wordmark { height: 168px; width: auto; display: block; }

.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(23, 17, 20, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex; align-items: center; justify-content: center;
  padding: 0.55rem 0;
}

.nav-phone {
  position: absolute; left: clamp(1rem, 2.2vw, 2.6rem); top: 50%;
  transform: translateY(-50%);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  color: var(--cream-dim);
}
.nav-phone:hover { color: var(--gold); }

nav.links { display: flex; gap: 1.3rem; align-items: center; }
nav.links a {
  color: var(--cream-dim);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
}
nav.links a:hover { color: var(--gold); border-bottom-color: var(--gold); }
nav.links a.active {
  color: var(--gold);
  font-weight: 600;
  border-bottom: 2px solid var(--gold);
}
nav.links a.hideout-link { color: var(--gold); font-weight: 400; }
nav.links a.hideout-link:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }

.nav-social {
  position: absolute; right: clamp(1rem, 2.2vw, 2.6rem); top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 0.9rem;
}
.nav-social a { color: var(--cream-dim); border-bottom: none !important; display: flex; }
.nav-social a:hover { color: var(--gold); }
.nav-social svg { display: block; }

@media (max-width: 1280px) and (min-width: 901px) {
  nav.links { gap: 0.9rem; }
  nav.links a { font-size: 0.76rem; letter-spacing: 0.07em; }
  .nav-phone { font-size: 0.78rem; letter-spacing: 0.12em; }
}
@media (max-width: 1120px) and (min-width: 901px) {
  nav.links { gap: 0.75rem; }
  nav.links a { font-size: 0.72rem; letter-spacing: 0.04em; }
  .nav-phone { display: none; }
}

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line);
  color: var(--gold); font-size: 1.3rem;
  padding: 0.3rem 0.7rem; border-radius: 4px;
  cursor: pointer;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.95rem 2.2rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn:hover { background: var(--gold); color: var(--ink); }

.btn.solid { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.btn.solid:hover { background: var(--wine-bright); border-color: var(--wine-bright); color: #fff; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 72vh;
  display: flex; align-items: center;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(125, 41, 57, 0.35), transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(201, 163, 92, 0.12), transparent 50%),
    linear-gradient(175deg, #1d1418 0%, #171114 60%, #14100f 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(243, 234, 217, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; padding: 5.5rem 0; }
.hero h1 { max-width: 16ch; }
.hero .lede { margin: 1.8rem 0 2.6rem; max-width: 46ch; }
.hero .actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero .glass {
  position: absolute; right: 6%; top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  width: clamp(180px, 24vw, 330px);
  pointer-events: none;
}

/* The photo blends INTO the hero: no border, no card, no shadow.
   Its edges feather out to transparent so it dissolves into the
   dark background instead of sitting on top of it. */
.hero .hero-photo-wrap {
  position: absolute; right: 28%; top: 50%;
  transform: translateY(-50%);
  width: clamp(220px, 26vw, 380px);
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
}
.hero .hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* feather all four edges into transparency so there is no hard boundary */
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 88%);
          mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 88%);
  pointer-events: none;
}

/* ---------- stat band ---------- */

.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-soft);
  padding: 2.6rem 0;
}
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat .num { font-family: var(--serif); font-size: 2.4rem; color: var(--gold); line-height: 1; }
.stat .label { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); margin-top: 0.5rem; }

/* ---------- cards / grids ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

.card {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(201, 163, 92, 0.5); }
.card img { height: 220px; width: 100%; object-fit: cover; }
.card .body { padding: 1.8rem; }
.card h3 { margin-bottom: 0.7rem; }
.card p { color: var(--cream-dim); font-size: 0.98rem; }
.card .body a { display: inline-block; margin-top: 1.1rem; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; }

figure.framed {
  border: 1px solid var(--line);
  padding: 0.8rem;
  background: var(--ink-soft);
  border-radius: 4px;
}
figure.framed img { border-radius: 2px; width: 100%; object-fit: cover; }
figure.framed figcaption {
  padding: 0.9rem 0.4rem 0.2rem;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream-dim); text-align: center;
}

/* ---------- wine club tiers ---------- */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: stretch; }

.tier {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2.4rem 2rem;
  display: flex; flex-direction: column;
  text-align: center;
  position: relative;
}
.tier.featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(125,41,57,0.22), var(--ink-soft) 55%); }
.tier .flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--ink);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.3rem 1rem; border-radius: 2px;
}
.tier h3 { font-size: 1.5rem; }
.tier .price { font-family: var(--serif); font-size: 3rem; color: var(--gold); margin: 1rem 0 0.2rem; }
.tier .price span { font-size: 1.05rem; color: var(--cream-dim); font-family: var(--sans); }
.tier .bottles { font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 1.6rem; }
.tier ul { list-style: none; text-align: left; margin: 0 0 2rem; flex: 1; }
.tier ul li { padding: 0.55rem 0; border-bottom: 1px solid rgba(243,234,217,0.07); font-size: 0.95rem; color: var(--cream-dim); }
.tier ul li::before { content: "◆"; color: var(--wine-bright); font-size: 0.6rem; margin-right: 0.7rem; vertical-align: 2px; }

.paypal-slot { min-height: 52px; }
.paypal-fallback {
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 1rem;
  font-size: 0.88rem;
  color: var(--cream-dim);
}
.paypal-fallback a { white-space: nowrap; }

/* ---------- benefits list ---------- */

.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 3rem; margin-top: 2.5rem; }
.benefit { display: flex; gap: 1rem; align-items: flex-start; }
.benefit .mark { color: var(--gold); font-size: 1.1rem; line-height: 1.6; }
.benefit p { color: var(--cream-dim); font-size: 0.98rem; }
.benefit strong { color: var(--cream); font-weight: 500; }

/* ---------- tables (hours) ---------- */

table.hours { width: 100%; border-collapse: collapse; }
table.hours td {
  padding: 0.7rem 0.3rem;
  border-bottom: 1px solid rgba(243,234,217,0.08);
  color: var(--cream-dim); font-size: 0.98rem;
}
table.hours td:last-child { text-align: right; color: var(--cream); }

/* ---------- forms ---------- */

form.styled { display: grid; gap: 1.1rem; }
form.styled .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
form.styled label { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); display: block; margin-bottom: 0.4rem; }
form.styled input, form.styled select, form.styled textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--cream);
  padding: 0.85rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
}
form.styled input:focus, form.styled select:focus, form.styled textarea:focus {
  outline: none; border-color: var(--gold);
}

.notice {
  background: rgba(201, 163, 92, 0.08);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.1rem 1.4rem;
  font-size: 0.92rem;
  color: var(--cream-dim);
}

/* events page: calendar wider than the form on desktop, stacked on mobile */
.cal-grid { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) {
  .cal-grid { grid-template-columns: 1fr; }
}

/* ---------- embeds ---------- */

.embed {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-soft);
}
.embed iframe { display: block; width: 100%; height: 620px; border: 0; }
.embed.map iframe { height: 440px; filter: grayscale(35%) contrast(95%); }

/* ---------- CTA band ---------- */

/* ---------- friends of the market ---------- */
.friends-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
}
.friend-card {
  width: 300px;
  text-align: center;
  background: var(--ink-lift);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 5px;
  padding: 1.8rem 1.5rem 1.7rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
}
/* push the Visit Site button to the bottom so buttons align across cards */
.friend-card .friend-btn {
  margin-top: auto;
  align-self: center;
}
.friend-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.friend-name {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 0.25rem;
}
.friend-cat {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.friend-desc {
  color: var(--cream-dim);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1.4rem;
  min-height: 2.9em;
}
.btn.friend-btn { font-size: 0.74rem; padding: 0.6rem 1.5rem; letter-spacing: 0.18em; }
@media (max-width: 700px) {
  .friend-card { width: min(300px, 100%); }
}

/* ---------- events: styled upcoming list ---------- */
.ev-heading {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: 1.4rem;
}
.ev-list { display: flex; flex-direction: column; gap: 1rem; }
.ev-card {
  display: flex; align-items: stretch; gap: 1.4rem;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.15rem 1.4rem;
  color: inherit;
  transition: border-color 0.25s, transform 0.25s;
}
a.ev-card { border-bottom: 1px solid var(--line) !important; }
.ev-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.ev-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 92px;
  border-right: 1px solid var(--line);
  padding-right: 1.4rem;
  text-align: center;
}
.ev-month {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.ev-day {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--cream);
}
.ev-body h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 0.15rem;
}
.ev-meta {
  font-family: var(--sans);
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.ev-loc { color: var(--cream-dim); font-size: 0.88rem; margin-top: 0.2rem; }
.ev-desc {
  color: var(--cream-dim);
  font-size: 0.92rem;
  margin-top: 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-empty { color: var(--cream-dim); }
@media (max-width: 560px) {
  .ev-card { gap: 1rem; padding: 1rem; }
  .ev-date { min-width: 72px; padding-right: 1rem; }
  .ev-day { font-size: 2rem; }
}

/* ---------- menu page ---------- */
.menu-wrap { max-width: 980px; }
.menu-section { margin-bottom: 4.5rem; }
.menu-h {
  font-size: clamp(2.2rem, 4.5vw, 3.1rem);
  text-align: center;
  margin-bottom: 0.6rem;
}
.menu-priceband {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
  margin: 0 auto 2.2rem;
  max-width: 560px;
}
.menu-section > .menu-cols { margin-top: 1.6rem; }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.5rem; }
.menu-cols.center-cols {
  grid-template-columns: max-content max-content;
  justify-content: center;
  gap: 0 6.5rem;
  text-align: center;
}
.menu-cols.center-cols .menu-list li { padding: 0.45rem 1.2rem; }
.menu-sub {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.menu-list { list-style: none; }
.menu-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(201, 163, 92, 0.12);
  color: var(--cream);
  font-size: 1.02rem;
}
.menu-list li:last-child { border-bottom: none; }
.menu-list .add { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.08em; margin-left: 0.5rem; }
.menu-note {
  text-align: center;
  color: var(--cream-dim);
  font-size: 0.95rem;
  max-width: 44em;
  margin: 2rem auto 0;
}
.menu-note em { color: var(--gold-soft); font-style: italic; }
.mi { margin-bottom: 1.7rem; }
.mi-line { display: flex; align-items: baseline; gap: 0.8rem; }
.mi-line h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--cream);
}
.mi-line .dots { flex: 1; border-bottom: 1px dotted rgba(201, 163, 92, 0.45); transform: translateY(-5px); }
.mi-line .price {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.mi p { color: var(--cream-dim); font-size: 0.95rem; margin-top: 0.25rem; }
.menu-fine {
  text-align: center;
  color: var(--cream-dim);
  font-size: 0.82rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  max-width: 46em;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .menu-cols, .menu-cols.center-cols { grid-template-columns: 1fr; }
  .menu-cols > div + div { margin-top: 0.5rem; }
  .menu-cols.center-cols .menu-list li { padding: 0.45rem 0; }
}

.hideout-band {
  text-align: center;
  padding: 5rem 0;
  background:
    radial-gradient(ellipse 60% 100% at 50% 120%, rgba(125, 41, 57, 0.35), transparent 65%),
    radial-gradient(ellipse 50% 80% at 80% -20%, rgba(180, 99, 47, 0.12), transparent 60%),
    #120e10;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hideout-band svg { display: block; margin: 0 auto 1rem; }
.hideout-band h2 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin-bottom: 1rem; }
.hideout-band .lede { max-width: 40em; margin: 0 auto 2.2rem; }

.cta-band {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(201,163,92,0.14), transparent 55%),
    linear-gradient(120deg, #4a1822, var(--wine));
  text-align: center;
  padding: 4.5rem 0;
}
.cta-band h2 { margin-bottom: 0.8rem; }
.cta-band p { color: rgba(243,234,217,0.85); margin-bottom: 2rem; }
.cta-band .btn { border-color: var(--cream); color: var(--cream); }
.cta-band .btn:hover { background: var(--cream); color: var(--wine); }

/* ---------- footer ---------- */

footer.site {
  border-top: 1px solid var(--line);
  background: #120d10;
  padding: 4rem 0 2rem;
  font-size: 0.92rem;
  color: var(--cream-dim);
}
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2.5rem; margin-bottom: 3rem; }
footer.site h4 {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1rem;
}
footer.site ul { list-style: none; }
footer.site li { padding: 0.25rem 0; }
footer.site a { color: var(--cream-dim); }
footer.site a:hover { color: var(--gold); }
footer.site .fine {
  border-top: 1px solid rgba(243,234,217,0.08);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.8rem;
}

/* ---------- page hero (interior pages) ---------- */

.page-hero {
  padding: 6rem 0 4rem;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(125,41,57,0.3), transparent 55%),
    linear-gradient(180deg, #1d1418, var(--ink));
  border-bottom: 1px solid var(--line);
}

/* ---------- prose (privacy etc.) ---------- */

.prose { max-width: 72ch; }
.prose h2 { font-size: 1.6rem; margin: 2.4rem 0 0.8rem; }
.prose p { color: var(--cream-dim); margin-bottom: 1rem; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .grid-3, .tiers { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .grid-2 { grid-template-columns: 1fr; gap: 2rem; }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); }
  .benefits { grid-template-columns: 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }

  nav.links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #171114;
    border-bottom: 1px solid var(--line);
    padding: 1rem 4%;
  }
  nav.links.open { display: flex; }
  nav.links a { padding: 0.9rem 0; width: 100%; border-bottom: 1px solid rgba(243,234,217,0.07); }
  .nav-social { position: static; transform: none; padding: 1rem 0 0.4rem; }
  .nav-social a { width: auto; border-bottom: none; }
  .nav { justify-content: flex-end; }
  .nav-toggle { display: block; }
  .masthead { padding: 1.6rem 0 1rem; }
  .masthead svg.wordmark { height: 118px; }
  .masthead .flourish { display: none; }
  .hero .glass { display: none; }
  .hero .hero-photo-wrap {
    position: static;
    transform: none;
    width: 100%;
    max-width: 440px;
    margin: 1.5rem auto 0;
    aspect-ratio: 4 / 3;
  }
  .hero .hero-photo { aspect-ratio: 4 / 3; }
  .hero { min-height: auto; }
  .hero .wrap { padding-bottom: 2.5rem; }
}

@media (max-width: 560px) {
  form.styled .row2 { grid-template-columns: 1fr; }
  footer.site .cols { grid-template-columns: 1fr; }
  .stats .wrap { grid-template-columns: 1fr 1fr; }
}

/* ---------- Constant Contact inline form, restyled to match the site ---------- */
#cc-inline-slot .ctct-inline-form,
#cc-inline-slot .ctct-form-defaults {
  background: transparent !important;
  padding: 0 !important;
}
#cc-inline-slot .ctct-form-container { max-width: 560px; margin: 0 auto; }
#cc-inline-slot .ctct-form-header,
#cc-inline-slot .ctct-form-text,
#cc-inline-slot h2,
#cc-inline-slot p {
  color: var(--cream) !important;
  font-family: var(--serif) !important;
}
#cc-inline-slot .ctct-form-text, #cc-inline-slot p {
  font-family: var(--sans) !important;
  color: var(--cream-dim) !important;
  font-size: 0.95rem !important;
}
#cc-inline-slot .ctct-form-label,
#cc-inline-slot label {
  color: var(--gold) !important;
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
#cc-inline-slot .ctct-form-element,
#cc-inline-slot input[type="text"],
#cc-inline-slot input[type="email"] {
  background: var(--ink-lift) !important;
  border: 1px solid var(--line) !important;
  border-radius: 3px !important;
  color: var(--cream) !important;
  font-family: var(--sans) !important;
  padding: 0.8rem 1rem !important;
  height: auto !important;
}
#cc-inline-slot .ctct-form-element:focus,
#cc-inline-slot input:focus {
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: none !important;
}
#cc-inline-slot .ctct-form-button,
#cc-inline-slot button[type="submit"] {
  background: var(--wine) !important;
  border: 1px solid var(--wine) !important;
  border-radius: 2px !important;
  color: var(--cream) !important;
  font-family: var(--sans) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0.95rem 2.2rem !important;
  transition: background 0.3s ease !important;
}
#cc-inline-slot .ctct-form-button:hover,
#cc-inline-slot button[type="submit"]:hover {
  background: var(--wine-bright) !important;
  border-color: var(--wine-bright) !important;
}
#cc-inline-slot .ctct-gdpr-text,
#cc-inline-slot .ctct-form-footer,
#cc-inline-slot .ctct-form-footer a {
  color: var(--cream-dim) !important;
  font-size: 0.72rem !important;
  font-family: var(--sans) !important;
}
#cc-inline-slot .ctct-form-errorMessage { font-family: var(--sans) !important; }

/* ============================================================
   DARK MAP CARD (replaces the Google iframe on the Visit page)
   A styled, on-brand "map" graphic that opens Google Maps.
   ============================================================ */
.map-card {
  position: relative;
  display: block;
  width: 100%;
  height: 440px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.map-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 163, 92, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.map-card .map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-card .map-pill {
  position: absolute;
  left: 1.3rem;
  bottom: 1.3rem;
  right: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.2rem;
  background: rgba(20, 16, 15, 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 163, 92, 0.28);
  border-radius: 6px;
}
.map-card .map-pill-title {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-size: 1.25rem;
  color: var(--cream, #f3ead9);
  letter-spacing: 0.01em;
}
.map-card .map-pill-sub {
  font-size: 0.85rem;
  color: var(--cream-dim, #c7b9ab);
  letter-spacing: 0.02em;
}
.map-card .map-pill-cta {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c9a35c);
}

/* ============================================================
   EVENT CALENDAR FALLBACK CARD
   Shown only if the live styled events fail to load — on-brand
   dark card linking to the public Google Calendar (no white box).
   ============================================================ */
.cal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 3rem 2rem;
  min-height: 420px;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(141, 51, 69, 0.18), transparent 60%),
    linear-gradient(175deg, #1d1418 0%, #171114 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cal-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 163, 92, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.cal-card .cal-art { width: 96px; height: 96px; margin-bottom: 0.4rem; }
.cal-card .cal-title {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-size: 1.8rem;
  color: var(--cream, #f3ead9);
}
.cal-card .cal-sub {
  font-size: 0.95rem;
  color: var(--cream-dim, #c7b9ab);
  max-width: 34ch;
}
.cal-card .cal-cta {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c9a35c);
}


/* ============================================================
   ACCESSIBILITY + FORM POLISH
   ============================================================ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--gold); color: #14100f;
  padding: 0.75rem 1.2rem; font-weight: 500; text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }

/* native form controls (party-size dropdown, etc.) follow the dark theme */
form.styled select, form.styled input, form.styled textarea { color-scheme: dark; }

/* Events page: photo above the private-event form */
figure.events-photo { margin: 0 0 1.6rem; }
figure.events-photo img { height: 360px; display: block; }
@media (max-width: 700px) { figure.events-photo img { height: 280px; } }


/* Menu page: one static photo on the right of the header band, fading in from the left */
.page-hero.has-photo { position: relative; overflow: hidden; }
.page-hero.has-photo .wrap { position: relative; z-index: 1; }
.page-hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(44vw, 640px); height: 100%;
  object-fit: cover; object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
          mask-image: linear-gradient(to right, transparent 0%, #000 38%);
  pointer-events: none;
}
@media (max-width: 900px) {
  /* phones/tablets: a soft strip under the text instead, fading in from the top */
  .page-hero.has-photo { padding-bottom: 0; }
  .page-hero-photo {
    position: relative; display: block; width: 100%; height: 200px; margin-top: 2rem;
    object-position: 50% 35%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  }
}

/* keep the band's text clear of the photo (all pages that use .has-photo) */
.page-hero.has-photo .wrap > * { max-width: min(40rem, 54vw); }
.page-hero.has-photo .wrap > .lede { max-width: min(62ch, 54vw); }
@media (max-width: 900px) { .page-hero.has-photo .wrap > *, .page-hero.has-photo .wrap > .lede { max-width: none; } }


/* ============================================================
   PHONE POLISH (found by testing real phone-size renders)
   ============================================================ */
@media (max-width: 900px) {
  /* Home hero: stack the text and photo (on desktop the hero is a side-by-side row) */
  .hero { flex-direction: column; align-items: stretch; padding-bottom: 3rem; }
  .hero .wrap { width: 92%; margin: 0 auto; padding-bottom: 0.5rem; }
  .hero .hero-photo-wrap { width: min(440px, 92%); margin: 1rem auto 0; }

  /* bigger, easier-to-hit buttons and links */
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .nav-phone { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-social { display: flex; gap: 0.3rem; }
  .nav-social a { width: 44px; height: 44px; align-items: center; justify-content: center; }
  footer.site li { padding: 0; }
  footer.site li a { display: block; padding: 0.65rem 0; }          /* whole row is tappable */
  footer.site .cols p a { display: inline-block; padding: 0.65rem 0; }
  footer.site .fine a { display: inline-block; padding: 0.7rem 0; }
  .card .body a { padding: 0.75rem 0; margin-top: 0.3rem; }
  .btn.friend-btn { font-size: 0.8rem; padding: 0.75rem 1.5rem; }
}


/* ============================================================
   HOME HERO, DESKTOP/LAPTOP: size the photo and the glass to the window and
   reserve their space, so the text can never run into them (found by
   measuring the real page at many window widths).
   ============================================================ */
@media (min-width: 901px) {
  .hero {
    --edge: 4vw;                                   /* gap from the window edge to the glass */
    --glass-w: clamp(130px, 17vw, 330px);
    --photo-w: clamp(160px, 17vw, 380px);
    --gap: clamp(1.5rem, 5vw, 9rem);               /* between the photo and the glass */
    --text-left: max(4vw, calc((100vw - 1120px) / 2));
    --text-room: calc(100vw - var(--text-left) - var(--edge) - var(--glass-w) - var(--gap) - var(--photo-w) - 1.5rem);
  }
  .hero .glass { right: var(--edge); width: var(--glass-w); }
  .hero .hero-photo-wrap { right: calc(var(--edge) + var(--glass-w) + var(--gap)); width: var(--photo-w); }
  .hero .eyebrow, .hero .actions { max-width: var(--text-room); }
  .hero h1 { max-width: min(16ch, var(--text-room)); }
  .hero .lede { max-width: min(46ch, var(--text-room)); }
}

/* "Soon" tag on the Merch link (nav + footer). Remove the <span class="soon-tag"> from the pages when merch launches. */
.soon-tag {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.1em 0.42em 0.08em;
  font-size: max(0.68em, 9px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  vertical-align: 0.35em;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
}
nav.links a.active .soon-tag { font-weight: 600; }

/* ---------- FAQ accordion (faq.html) — native <details>, no JS ---------- */
.faq-section { padding-top: 3.5rem; }
.faq-wrap { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.35rem 2.6rem 1.35rem 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 500;
  color: var(--cream);
  transition: color 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.3rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--gold);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover, .faq-item[open] summary { color: var(--gold-soft); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.faq-answer { padding: 0 0 1.6rem; color: var(--cream-dim); max-width: 68ch; }
.faq-answer p { margin: 0 0 0.9rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer .faq-list { margin: 0 0 0.9rem 1.2rem; padding: 0; }
.faq-answer .faq-list li { margin-bottom: 0.35rem; }
.faq-answer .faq-list li::marker { color: var(--gold); }
.faq-answer table.faq-hours { width: auto; margin: 0 0 0.9rem; border-collapse: collapse; }
.faq-answer table.faq-hours td:last-child { text-align: left; }
.faq-answer table.faq-hours td { padding: 0.25rem 1.6rem 0.25rem 0; }
.faq-more { padding-top: 1rem; }

/* keep phone numbers from breaking across lines */
a[href^="tel:"] { white-space: nowrap; }

/* ---------- Event card actions + reservation pop-up (events.html) ---------- */
.ev-actions { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.9rem; flex-wrap: wrap; }
.ev-actions .btn { padding: 0.55rem 1.3rem; font-size: 0.78rem; }
.reserve-cta { margin-top: 1.4rem; }

html.rd-lock { overflow: hidden; }
.reserve-dialog {
  margin: auto;
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 2.2rem 2rem 2rem;
  background: var(--ink-soft);
  color: var(--cream);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.reserve-dialog::backdrop { background: rgba(10, 6, 8, 0.78); backdrop-filter: blur(3px); }
.reserve-dialog[open]:not(:modal) { position: fixed; inset: 0; margin: auto; z-index: 1000; }
.reserve-dialog h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0.2rem 0 0.6rem; }
.rd-close {
  position: absolute; top: 0.7rem; right: 0.9rem;
  background: none; border: 0; color: var(--cream-dim);
  font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.3rem 0.5rem;
}
.rd-close:hover { color: var(--gold); }
.rd-event { color: var(--gold-soft); font-family: var(--serif); font-size: 1.15rem; margin: 0 0 1.2rem; }
.rd-fine { color: var(--cream-dim); font-size: 0.88rem; margin: 0.4rem 0 1.1rem; }
.rd-thanks { color: var(--cream-dim); margin: 0.4rem 0 1.6rem; }
@media (max-width: 560px) {
  .reserve-dialog { padding: 2rem 1.2rem 1.4rem; }
  .reserve-dialog form.styled .row2 { grid-template-columns: 1fr; }
}

/* ---------- Wine Club tastings section + calendar extras (events.html) ---------- */
.wc-section { padding-bottom: 0; }
.wc-head { max-width: 720px; margin-bottom: 2rem; }
.wc-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0.3rem 0 0.8rem; }
.wc-intro { color: var(--cream-dim); }
.wc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.wc-card {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--wine);
  border-radius: 4px;
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.wc-dates { font-family: var(--serif); font-size: 1.7rem; color: var(--cream); line-height: 1.15; margin: 0; }
.wc-days { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; }
.wc-sched { color: var(--cream-dim); font-size: 0.92rem; margin: 0.3rem 0 0.9rem; }
.wc-card .btn { align-self: flex-start; margin-top: auto; padding: 0.6rem 1.5rem; font-size: 0.78rem; }
.ev-card-club { border-color: rgba(125, 41, 57, 0.7); }
.ev-day-range { font-size: 1.7rem; white-space: nowrap; }
.ev-more { margin-top: 1.2rem; text-align: center; }
.rd-intro { color: var(--cream-dim); font-size: 0.95rem; margin: 0 0 1.3rem; }
@media (max-width: 560px) { .ev-day-range { font-size: 1.35rem; } }

/* Wine Club page: tasting-night band sits below the perks with its own breathing room */
.wc-on-club { padding: 5.5rem 0; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.wc-intro-center { max-width: 620px; margin: 1.6rem auto 2.6rem; }

/* Wine Club cards: placeholders hold the space, real cards fade in (no jump) */
.wc-skel { pointer-events: none; }
.wc-skel .sk {
  display: block; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: wc-shimmer 1.4s ease-in-out infinite;
}
.wc-skel .sk-lg  { height: 1.7rem; width: 72%; margin: 0.1rem 0 0.35rem; }
.wc-skel .sk-sm  { height: 0.8rem; width: 46%; margin-bottom: 0.4rem; }
.wc-skel .sk-md  { height: 0.92rem; width: 85%; margin: 0.3rem 0 0.9rem; }
.wc-skel .sk-btn { height: 2.35rem; width: 6.3rem; margin-top: auto; }
@keyframes wc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.wc-list.wc-ready .wc-card { animation: wc-fade 0.45s ease both; }
@keyframes wc-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wc-skel .sk, .wc-list.wc-ready .wc-card { animation: none; }
}