/* =========================================================================
   THE HALF WALL — Design System
   Colors are brand-exact (gold/maroon/black/white); everything else derives.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Fraunces:ital,opsz,wght@1,9..144,500&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Permanent+Marker&family=Lexend:wght@400;500;600;700&display=swap');

:root {
  /* Brand-exact */
  --gold: #F0B838;
  --maroon: #8B1E2D;
  --black: #000000;
  --white: #FFFFFF;

  /* Supporting neutrals (derived for warmth/contrast, never overriding the brief) */
  --cream: #FAF6EE;
  --cream-dim: #F1EAD9;
  --charcoal: #1A1512;
  --ink: #120D0B;
  --brick-1: #7A4A3A;
  --brick-2: #5C3A2E;
  --brick-mortar: #E8DDC8;
  --gold-dim: #C99A34;
  --maroon-dim: #6E1723;
  --maroon-deep: #4A0F18;
  --line: rgba(18, 13, 11, 0.12);
  --line-on-dark: rgba(255, 255, 255, 0.16);

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
  --step-5: clamp(3rem, 2.2rem + 3.6vw, 5rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 12px 40px -12px rgba(18, 13, 11, 0.28);
  --shadow-card: 0 2px 0 rgba(18,13,11,0.04), 0 18px 40px -20px rgba(18,13,11,0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.55;
  font-size: var(--step-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: var(--step-5); font-weight: 700; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 600; }
p { max-width: 62ch; }
:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--gold); color: var(--ink); }

.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 1000;
  background: var(--ink); color: var(--white); padding: 0.85rem 1.25rem;
  border-radius: var(--radius-sm); font-weight: 600; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1260px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container--narrow { max-width: 880px; }
main { display: block; }
section { position: relative; }
.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.section--dark { background: var(--ink); color: var(--cream); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--maroon { background: var(--maroon); color: var(--cream); }
.section--maroon h2, .section--maroon h3 { color: var(--white); }
.section--cream-dim { background: var(--cream-dim); }
.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; }
.cluster { display: flex; align-items: center; flex-wrap: wrap; }
.divider { height: 1px; background: var(--line); border: 0; margin-block: var(--space-lg); }
.divider--gold { height: 3px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); border: 0; width: 140px; margin: 0 auto var(--space-md); }
.divider--maroon { height: 3px; background: linear-gradient(90deg, transparent, var(--maroon) 20%, var(--maroon) 80%, transparent); border: 0; width: 140px; margin: var(--space-md) auto 0; }
.section--dark .divider--gold, .section--maroon .divider--gold { background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); }

/* ---------- Brick texture (used sparingly: hero / dividers / footer / accent panels) ---------- */
.brick {
  position: relative;
  background-color: #1a0f0c;
  background-image:
    linear-gradient(180deg, rgba(20,10,8,0.1) 0%, rgba(12,7,6,0.3) 55%, rgba(0,0,0,0.7) 100%),
    url("/assets/textures/brick-red.jpg");
  background-size: auto, auto 100%;
  background-position: center, left top;
  background-repeat: no-repeat, repeat-x;
}
.brick::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(0,0,0,0.4), transparent 55%);
  pointer-events: none;
}
.brick-dark {
  position: relative;
  background-color: #0b0b0b;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.72) 100%),
    url("/assets/textures/brick-black.jpg");
  background-size: auto, auto 100%;
  background-position: center, left top;
  background-repeat: no-repeat, repeat-x;
}
/* .brick--bright now matches the (brightened) base .brick — kept as a class so
   existing markup referencing it keeps working, with nothing left to override. */
.brick--bright {
  background-image:
    linear-gradient(180deg, rgba(20,10,8,0.1) 0%, rgba(12,7,6,0.3) 55%, rgba(0,0,0,0.7) 100%),
    url("/assets/textures/brick-red.jpg");
}
.brick-divider { height: 64px; }

/* Lock the brick tile to a fixed height on small screens — tall mobile sections
   (wrapped headlines, stacked CTAs) would otherwise stretch "auto 100%" into a
   single oversized brick instead of a repeating pattern. */
@media (max-width: 640px) {
  .brick, .brick-dark, .site-header {
    background-size: auto, auto 130px;
    background-repeat: no-repeat, repeat;
  }
}
.brick-panel { border-radius: var(--radius-md); overflow: hidden; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--maroon);
}
.section--dark .eyebrow, .section--maroon .eyebrow, .on-dark .eyebrow { color: var(--gold); }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; display: inline-block; }
.section-head { max-width: 720px; margin-bottom: var(--space-lg); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--space-sm); font-size: var(--step-1); color: var(--charcoal); opacity: 0.85; }
.section--dark .section-head p, .section--maroon .section-head p { color: var(--cream); opacity: 0.82; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.95em 1.7em; border-radius: 999px; font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.03em; text-transform: uppercase; border: 2px solid transparent;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow .25s var(--ease);
  min-height: 48px; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: var(--shadow-card); }
.btn-gold:hover { background: var(--white); border-color: var(--white); color: var(--maroon); }
.btn-maroon { background: var(--maroon); color: var(--white); border-color: var(--maroon); }
.btn-maroon:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn-outline:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-outline-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-dark:hover { background: var(--ink); color: var(--white); }
.btn-ghost { background: transparent; color: var(--maroon); border-color: transparent; padding-inline: 0.4em; text-transform: none; letter-spacing: 0; font-weight: 700; }
.btn-ghost:hover { color: var(--maroon-deep); transform: translateX(3px); }
.btn-sm { padding: 0.7em 1.3em; font-size: 0.78rem; min-height: 40px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200; color: var(--white);
  background-color: #0b0b0b;
  background-image: linear-gradient(rgba(0,0,0,0.48), rgba(0,0,0,0.48)), url("/assets/textures/brick-black.jpg");
  background-size: auto, auto 100%; background-repeat: no-repeat, repeat-x; background-position: center, left top;
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px -12px rgba(0,0,0,0.55); border-color: rgba(240,184,56,0.35); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: 0.85rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-weight: 700; }

.nav-primary { display: flex; align-items: center; gap: 1.3rem; }
.nav-links { display: flex; align-items: center; gap: 1.3rem; }
.nav-links > li { position: relative; }
.nav-link {
  font-weight: 600; font-size: 0.94rem; line-height: inherit; padding: 0.5rem 0; margin: 0; display: inline-flex; align-items: center; gap: 0.35rem;
  border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
  background: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; font-family: inherit; text-align: left; border-top: none; border-left: none; border-right: none;
  color: var(--white); white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }
.nav-link .chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; margin-top: -3px; }
.nav-link[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 3px; }
.nav-cta { display: flex; align-items: center; gap: 0.7rem; }
.nav-cta .btn { line-height: 1.25; white-space: normal; text-align: center; font-size: 0.72rem; padding: 0.65em 1.15em; min-height: 36px; }

/* The Breakers' own brand pink + hand-lettered font — used whenever we name-drop
   our sister restaurant so it visually stands out from our own gold/maroon type. */
.breakers-brand { font-family: 'Permanent Marker', cursive; color: #F78DA7; font-size: 1.15em; }

.mega-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px);
  width: min(760px, 86vw); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  border: 1px solid var(--line); padding: var(--space-md); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); z-index: 50;
}
.nav-links > li.is-open .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-menu--cols1 { width: min(220px, 86vw); }
.mega-menu--cols2 { width: min(420px, 86vw); }
.mega-menu-grid { display: grid; gap: var(--space-lg); }
.mega-menu-grid--cols1 { grid-template-columns: 1fr; }
.mega-menu-grid--cols2 { grid-template-columns: 1fr 1fr; }
.mega-menu-col h5 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--maroon); margin-bottom: 0.85rem; }
.mega-menu-col a { display: block; padding: 0.4rem 0; font-weight: 500; font-size: 0.94rem; color: var(--charcoal); border-radius: 6px; }
.mega-menu-col a:hover { color: var(--maroon); padding-left: 0.35rem; }

.nav-toggle { display: none; background: none; border: none; width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; position: relative; }
.nav-toggle span {
  position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: var(--white);
  transform: translateY(-50%); transition: transform 0.25s var(--ease), opacity 0.2s, background 0.2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--white);
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-primary .nav-cta { display: none; }
  .nav-toggle { display: block; }
}
.mobile-drawer {
  position: fixed; inset: 0; top: var(--header-h, 74px); z-index: 190; color: var(--white);
  /* Solid color + CSS gradient only — deliberately no background-image here.
     A large tiled image composited on a full-viewport position:fixed layer is a
     known trigger for a WebKit bug where the layer's backing store doesn't get
     fully rasterized before it's shown, leaving page content visible through
     part of the panel. Once it happens on a given page load it doesn't
     self-correct on later opens either. Solid colors/gradients have no image
     decode step and paint atomically, removing that failure mode entirely. */
  background-color: #0b0b0b;
  background-image: radial-gradient(120% 100% at 100% 0%, rgba(139,30,45,0.35), transparent 60%);
  /* No transition/animation on open, and display:none (not opacity/visibility)
     when closed — a fully instant, non-animated show/hide, so there's no
     transitional window for any compositing race to happen in either. */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--space-md); display: none;
}
.mobile-drawer.is-open { display: block; }
.mobile-drawer .nav-links { display: flex; flex-direction: column; gap: 0; width: 100%; }
.mobile-drawer .nav-link {
  display: flex; position: relative; width: 100%; justify-content: center;
  padding: 1rem 0; border-bottom: 1px solid var(--line-on-dark); border-top: 0 !important; color: var(--white);
}
.mobile-drawer .nav-link .chev {
  position: absolute; right: 0; top: 50%; margin-top: 0;
  transform: translateY(-50%) rotate(45deg);
}
.mobile-drawer .nav-link[aria-expanded="true"] .chev { transform: translateY(-50%) rotate(-135deg); }
.mobile-submenu { max-height: 0; margin: 0; padding: 0; border: none; overflow: hidden; transition: max-height 0.3s var(--ease); }
.mobile-submenu.is-open { max-height: 900px; }
.mobile-submenu a { display: block; padding: 0.65rem 0 0.65rem 1rem; font-weight: 500; opacity: 0.85; color: var(--white); }
.mobile-drawer .nav-cta { flex-direction: column; align-items: stretch; margin-top: var(--space-md); }

/* Headings and the eyebrow both set their own color (ink / maroon) as a base
   rule, so an ancestor's inline `color: white` gets overridden instead of
   inherited. Any non-hero section using .brick/.brick-dark for white-on-dark
   text needs these restated explicitly at higher specificity. */
.section.brick h1, .section.brick h2, .section.brick h3, .section.brick h4,
.section.brick-dark h1, .section.brick-dark h2, .section.brick-dark h3, .section.brick-dark h4 {
  color: var(--white);
}
.section.brick .eyebrow, .section.brick-dark .eyebrow { color: var(--gold); }

/* ---------- Hero ---------- */
.hero { color: var(--white); padding-block: clamp(4.5rem, 10vw, 8rem); position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(190deg, rgba(0,0,0,0.32), rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.58)); pointer-events: none; }
.hero.brick-dark::after { background: linear-gradient(190deg, rgba(74,15,24,0.2), rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.28)); }
.hero-inner { position: relative; z-index: 2; max-width: 780px; }

/* Non-hero sections using .brick/.brick-dark (e.g. mid-page CTAs) need the same
   darkening as the hero — otherwise white text sits on the lighter top portion
   of the texture's built-in fade and reads poorly, especially over brick-red. */
.section.brick::after, .section.brick-dark::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(0,0,0,0.32), rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.58));
  pointer-events: none;
}
.section.brick > .container, .section.brick-dark > .container { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--gold); text-shadow: 0 2px 12px rgba(0,0,0,0.55); }
.hero h1 { color: var(--white); margin-block: 0.5rem 1.1rem; text-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.hero p.lede { font-size: var(--step-1); color: var(--cream); opacity: 0.96; max-width: 56ch; margin-bottom: var(--space-md); text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); flex-wrap: wrap; }
.hero-stats .stat strong { display: block; font-family: var(--font-mono); font-size: var(--step-2); color: var(--gold); }
.hero-stats .stat span { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
.hero--page { padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.hero--page h1 { font-size: var(--step-4); }

/* Plain (non-brick, non-photo) hero — soft cream/gold gradient with dark text.
   A placeholder look for spots that will eventually hold a rotating photo
   slider; keeps the same markup/structure as the brick hero so a slider can
   drop in later without a rebuild. */
.hero--light {
  color: var(--charcoal);
  background:
    radial-gradient(65% 90% at 12% 8%, rgba(240,184,56,0.16), transparent 60%),
    radial-gradient(55% 70% at 100% 100%, rgba(139,30,45,0.07), transparent 65%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-dim) 100%);
}
.hero--light::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  pointer-events: none;
}
.hero--light .eyebrow { color: var(--maroon); text-shadow: none; font-size: 1rem; }
.hero--light h1 { color: var(--ink); text-shadow: none; font-size: clamp(2.6rem, 2rem + 3vw, 4.3rem); }
.hero--light p.lede { color: var(--charcoal); opacity: 0.8; text-shadow: none; }
.hero--light .hero-stats .stat strong { color: var(--maroon); }
.hero--light .hero-stats .stat span { color: var(--charcoal); opacity: 0.65; }

/* ---------- Hero photo slideshow (homepage) ---------- */
.hero-slideshow.hero {
  padding-block: 0;
  min-height: clamp(560px, 92vh, 840px);
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(4rem, 9vw, 6rem);
}
.hero-slideshow.hero::after { content: none; }
.hero-slideshow-track { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slideshow-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(190deg, rgba(10,7,6,0.38), rgba(10,7,6,0.3) 45%, rgba(10,7,6,0.68) 100%);
}
.hero-slideshow .hero-inner { padding-bottom: 2.5rem; }
.hero-slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(10,7,6,0.35); border: 1px solid rgba(255,255,255,0.35); color: var(--white);
  backdrop-filter: blur(2px); opacity: 0.75; transition: opacity 0.25s var(--ease), background-color 0.25s var(--ease);
}
.hero-slide-nav:hover { opacity: 1; background: rgba(10,7,6,0.55); }
.hero-slide-nav.prev { left: clamp(0.75rem, 3vw, 2rem); }
.hero-slide-nav.next { right: clamp(0.75rem, 3vw, 2rem); }
.hero-slide-nav.prev svg { transform: scaleX(-1); }
.hero-slide-dots { position: absolute; left: 50%; bottom: clamp(1.2rem, 3vw, 1.8rem); transform: translateX(-50%); z-index: 3; display: flex; gap: 0.55rem; }
.hero-slide-dot {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.6); padding: 0; transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero-slide-dot:hover { background: rgba(255,255,255,0.75); }
.hero-slide-dot.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.15); }
@media (max-width: 780px) {
  .hero-slideshow.hero { height: clamp(560px, 82vh, 700px); min-height: 0; align-items: center; padding-bottom: 0; }
  .hero-slideshow .hero-inner { padding-bottom: 0; text-align: center; }
  .hero-slideshow h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .hero-slideshow p.lede {
    font-size: 0.92rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .hero-slideshow .hero-actions { justify-content: center; }
  .hero-slideshow .hero-slideshow-overlay { background: linear-gradient(180deg, rgba(10,7,6,0.55), rgba(10,7,6,0.5) 40%, rgba(10,7,6,0.72) 100%); }
  /* Arrows crowd the centered text block on narrow screens — swipe + dots
     cover navigation there instead, so hide the buttons rather than layer
     them over the copy. */
  .hero-slide-nav { display: none; }
}
@media (max-width: 400px) {
  .hero-slideshow.hero { height: clamp(540px, 84vh, 640px); }
  .hero-slideshow p.lede { -webkit-line-clamp: 2; }
}

/* ---------- Photo placeholders ---------- */
.photo-slot {
  position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--brick-2);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85);
  background-image: linear-gradient(155deg, var(--maroon-dim), var(--brick-2) 55%, var(--ink));
  isolation: isolate;
}
.photo-slot::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 14px);
}
.photo-slot .slot-label {
  position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; padding: 1rem; opacity: 0.85; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.photo-slot .slot-icon { width: 34px; height: 34px; opacity: 0.9; }
.photo-slot.icon-only .slot-label { padding: 0; }
.photo-slot.icon-only .slot-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }
.photo-slot.icon-only .slot-icon svg { width: 52px !important; height: 52px !important; opacity: 1; color: var(--gold); }
.photo-slot.ratio-square { aspect-ratio: 1 / 1; }
.photo-slot.ratio-wide { aspect-ratio: 16 / 9; }
.photo-slot.ratio-tall { aspect-ratio: 3 / 4; }
.photo-slot.ratio-hero { aspect-ratio: 21 / 9; }
.photo-slot.tone-gold { background-image: linear-gradient(155deg, var(--gold-dim), var(--brick-2) 60%, var(--ink)); }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  border: 1px solid var(--line);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -22px rgba(18,13,11,0.4); }
.card-body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.card-body h3, .card-body h4 { margin: 0; }
.card-tag { align-self: flex-start; background: var(--cream-dim); color: var(--maroon); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; }

.beer-card { background: var(--ink); color: var(--cream); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); display:flex; flex-direction:column; }
.beer-card .photo-slot { border-radius: 0; }
.beer-badge { display: flex; align-items: center; justify-content: center; padding: 1.75rem 1rem 0.5rem; }
.beer-badge svg { width: 100%; max-width: 200px; height: auto; }
.beer-label-photo { overflow: hidden; }
.beer-label-photo img { width: 100%; height: auto; display: block; }
.two-col .beer-label-photo { max-width: 320px; margin-inline: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.beer-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
.beer-card-body h3 { color: var(--white); font-size: var(--step-1); }
.beer-specs { display: flex; gap: 1.2rem; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.05em; color: var(--gold); text-transform: uppercase; flex-wrap: wrap; border-top: 1px solid var(--line-on-dark); border-bottom: 1px solid var(--line-on-dark); padding-block: 0.65rem; }
.beer-specs span b { display: block; color: var(--white); font-size: 0.95rem; }
.beer-card-body p { opacity: 0.85; font-size: 0.92rem; }
.beer-card-body .pairing { font-size: 0.82rem; opacity: 0.7; font-style: italic; }

.menu-section { margin-bottom: var(--space-xl); }
.menu-section-head { text-align: center; margin-bottom: var(--space-md); }
.menu-section-head .note { font-size: 0.85rem; opacity: 0.75; font-style: italic; max-width: 60ch; margin-inline: auto; margin-top: 0.4rem; }
.menu-columns { display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--space-lg); }
.menu-columns .rule { background: linear-gradient(180deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent); }
@media (max-width: 780px) { .menu-columns { grid-template-columns: 1fr; } .menu-columns .rule { display: none; } }
.menu-col { display: flex; flex-direction: column; gap: var(--space-md); }
.menu-item { display: flex; flex-direction: column; gap: 0.3rem; padding-bottom: var(--space-md); border-bottom: 1px dashed var(--line); }
.menu-item:last-child { border-bottom: 0; padding-bottom: 0; }
.menu-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.menu-item-top h4 { font-size: 1.05rem; }
.menu-item-price { font-family: var(--font-mono); font-weight: 600; color: var(--maroon); white-space: nowrap; }
.menu-item p { font-size: 0.9rem; opacity: 0.8; font-style: italic; }
.menu-placeholder-badge { display: inline-block; margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--gold); color: var(--ink); padding: 0.15rem 0.45rem; border-radius: 4px; vertical-align: middle; }

/* ---------- Testimonials ---------- */
.testimonial-viewport { position: relative; max-width: 600px; margin-inline: auto; text-align: center; touch-action: pan-y; }
.testimonial-slide { display: none; }
.testimonial-slide.is-active { display: block; animation: fade-up 0.5s var(--ease); }
.star-row { display: flex; justify-content: center; gap: 0.2rem; margin-bottom: 0.8rem; }
.star-row svg { width: 18px; height: 18px; color: var(--gold); }
.testimonial-slide blockquote svg { width: 22px; height: 22px; opacity: 0.6; margin-inline: auto; margin-bottom: 0.4rem; }
.testimonial-slide blockquote p { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; font-style: italic; font-optical-sizing: auto; color: var(--white); line-height: 1.45; letter-spacing: 0.005em; margin: 0; }
.testimonial-slide cite { display: block; margin-top: 0.6rem; font-style: normal; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.testimonial-controls { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1rem; }
.testimonial-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); border: none; padding: 0; }
.testimonial-dot.is-active { background: var(--gold); }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Beer spotlight carousel ---------- */
.beer-spotlight-viewport { position: relative; max-width: 760px; margin-inline: auto; touch-action: pan-y; }
.beer-spotlight-slide { display: none; align-items: center; justify-content: center; gap: 2.5rem; }
.beer-spotlight-slide.is-active { display: flex; animation: fade-up 0.5s var(--ease); }
.beer-spotlight-badge { flex: 0 0 auto; width: 150px; }
.beer-spotlight-badge svg { width: 100%; height: auto; }
.beer-spotlight-badge.has-photo { border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card); }
.beer-spotlight-badge.has-photo img { width: 100%; height: auto; display: block; }
.beer-spotlight-body { flex: 0 1 480px; min-width: 0; }
.beer-spotlight-body h3 { color: var(--white); font-size: var(--step-2); margin: 0.2rem 0 1rem; }
.beer-spotlight-body p { opacity: 0.85; font-size: 0.95rem; margin-top: 1rem; }
.beer-spotlight-controls { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2rem; }
.beer-spotlight-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); border: none; padding: 0; }
.beer-spotlight-dot.is-active { background: var(--gold); }
@media (max-width: 640px) {
  .beer-spotlight-slide { flex-direction: column; text-align: center; gap: 1.2rem; }
  .beer-spotlight-badge { width: 120px; }
}

/* ---------- Accordion ---------- */
.accordion-group { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: none; border: none; text-align: left; padding: 1.3rem 0.2rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink);
}
.accordion-trigger .plus { width: 18px; height: 18px; position: relative; flex-shrink: 0; }
.accordion-trigger .plus::before, .accordion-trigger .plus::after { content:''; position: absolute; background: var(--maroon); transition: transform 0.25s var(--ease); }
.accordion-trigger .plus::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.accordion-trigger .plus::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.accordion-trigger[aria-expanded="true"] .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.accordion-panel-inner { padding-bottom: 1.4rem; opacity: 0.85; max-width: 68ch; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-md); }
.field label { font-weight: 600; font-size: 0.88rem; }
.field .hint { font-size: 0.78rem; opacity: 0.65; }
.field input, .field select, .field textarea {
  padding: 0.85em 1em; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-size: 0.98rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--maroon); box-shadow: 0 0 0 4px rgba(139,30,45,0.12); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--maroon); }
.field-error { color: var(--maroon); font-size: 0.8rem; display: none; }
.field.has-error .field-error { display: block; }
.form-success { display: none; text-align: center; padding: var(--space-lg); background: var(--cream-dim); border-radius: var(--radius-md); }
.form-success.is-visible { display: block; }
.form-success h3 { margin-bottom: 0.5rem; }
form.is-submitted .form-fields { display: none; }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; }
.checkbox-row input { margin-top: 0.2rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); position: relative; }
.footer-brick { height: 10px; }
.footer-top { padding-block: var(--space-xl); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1.5fr 1fr 0.9fr 1.1fr; gap: var(--space-lg); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h3 { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-weight: 600; }
.footer-grid ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-grid a { opacity: 0.82; font-size: 0.92rem; }
.footer-grid a:hover { opacity: 1; color: var(--gold); }
.footer-about p { opacity: 0.75; font-size: 0.92rem; margin-block: 0.9rem 1.2rem; }
.footer-hours { font-size: 0.86rem; opacity: 0.85; }
.footer-hours li { display: flex; justify-content: space-between; gap: 0.6rem; }
.footer-hours li span { white-space: nowrap; }
.footer-hours li span:first-child { flex-shrink: 0; }
.social-row { display: flex; gap: 0.7rem; }
.social-icon { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-on-dark); display: grid; place-items: center; transition: border-color 0.2s, background 0.2s; }
.social-icon:hover { border-color: var(--gold); background: rgba(240,184,56,0.1); }
.social-icon svg { width: 18px; height: 18px; fill: var(--cream); }
.footer-bottom { border-top: 1px solid var(--line-on-dark); padding-block: 1.4rem; font-size: 0.82rem; opacity: 0.7; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; }
.footer-bottom a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 180; display: none; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(0,0,0,0.25); }
.sticky-cta-row { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.sticky-cta a { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.7rem 0.4rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-right: 1px solid var(--line); color: var(--maroon); }
.sticky-cta a:last-child { border-right: 0; }
.sticky-cta svg { width: 20px; height: 20px; }
@media (max-width: 780px) { .sticky-cta { display: block; } body { padding-bottom: 64px; } }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- Misc components ---------- */
.badge-list { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.badge { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 600; }
.timeline { display: flex; flex-direction: column; gap: var(--space-lg); position: relative; }
.timeline::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.timeline-item { display: flex; gap: var(--space-md); position: relative; }
.timeline-marker { width: 56px; height: 56px; border-radius: 50%; background: var(--maroon); color: var(--white); font-family: var(--font-mono); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; z-index: 1; box-shadow: 0 0 0 6px var(--cream); }
.timeline-body h3 { margin-bottom: 0.3rem; }
.timeline-body .meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--maroon); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; display:block; }

.stat-row { display: flex; gap: var(--space-lg); flex-wrap: wrap; }

.info-list { display: flex; flex-direction: column; gap: 1rem; }
.info-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-list svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 0.15rem; color: var(--maroon); }
.section--dark .info-list svg, .section--maroon .info-list svg { color: var(--gold); }
.info-list strong { display: block; }
.info-list span, .info-list a { opacity: 0.85; font-size: 0.95rem; }

.map-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.gallery-grid .photo-slot:nth-child(3n+1) { grid-row: span 2; }
.gallery-photo { width: 100%; height: 100%; min-height: 140px; object-fit: cover; border-radius: var(--radius-md); }
.gallery-grid .gallery-photo:nth-child(3n+1) { grid-row: span 2; }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .photo-slot:nth-child(3n+1), .gallery-grid .gallery-photo:nth-child(3n+1) { grid-row: span 1; }
}

.chip-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--line); border-radius: 999px; padding: 0.5rem 1.1rem; font-weight: 600; font-size: 0.85rem; background: var(--white); transition: all 0.2s; }
.chip.is-active, .chip:hover { background: var(--maroon); color: var(--white); border-color: var(--maroon); }

.event-row { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.event-row:last-child { border-bottom: 0; }
.event-date { font-family: var(--font-mono); text-align: center; background: var(--maroon); color: var(--white); border-radius: var(--radius-sm); padding: 0.5rem 0.8rem; min-width: 64px; }
.event-date strong { display: block; font-size: 1.3rem; line-height: 1; }
.event-date span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.event-body { flex: 1; }
.event-body .meta { font-size: 0.82rem; opacity: 0.65; }

.gift-amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-block: 1rem 1.5rem; }
@media (max-width: 560px) { .gift-amount-grid { grid-template-columns: repeat(3, 1fr); } }
.gift-amount-btn { border: 1.5px solid var(--line); background: var(--white); border-radius: var(--radius-sm); padding: 1rem 0.5rem; font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; text-align: center; transition: all 0.2s; }
.gift-amount-btn.is-active { border-color: var(--maroon); background: var(--maroon); color: var(--white); }

.shipping-options { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.3rem; }
.shipping-option { display: flex; align-items: center; gap: 0.7rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem 1rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.shipping-option:has(input:checked) { border-color: var(--maroon); background: rgba(139,30,45,0.05); }
.shipping-option input { accent-color: var(--maroon); width: 16px; height: 16px; flex-shrink: 0; }
.shipping-option span { flex: 1; font-weight: 500; font-size: 0.92rem; }
.shipping-option strong { font-family: var(--font-mono); color: var(--maroon); font-size: 0.92rem; }

.gift-total-breakdown { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; }
.gift-total-breakdown .hint { display: flex; justify-content: space-between; gap: 1rem; opacity: 0.75; margin: 0; padding-block: 0.2rem; }
.gift-total-breakdown .gift-total-row { border-top: 1px dashed var(--line); margin-top: 0.4rem; padding-top: 0.55rem; opacity: 1; }
.gift-total-breakdown .gift-total-row strong { color: var(--maroon); font-size: 1.1rem; font-family: var(--font-mono); }

/* ---------- Shop (product gallery + size selector) ---------- */
.shirt-gallery-main {
  background: var(--cream-dim); border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card); padding: 1.2rem;
}
.shirt-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.shirt-thumb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 1rem; }
.shirt-thumb {
  border: 2px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--cream-dim);
  aspect-ratio: 1 / 1; padding: 0; transition: border-color 0.2s;
}
.shirt-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shirt-thumb.is-active { border-color: var(--maroon); }
.shirt-thumb:hover { border-color: var(--maroon); }
.shirt-size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; margin-block: 0.6rem 0.4rem; }
@media (max-width: 420px) { .shirt-size-grid { grid-template-columns: repeat(3, 1fr); } }

.pill-nav { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pill-nav a { border: 1.5px solid var(--line); border-radius: 999px; padding: 0.55rem 1.1rem; font-weight: 600; font-size: 0.86rem; background: var(--white); }
.pill-nav a.is-current, .pill-nav a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.notice-banner { background: var(--cream-dim); border: 1px dashed var(--brick-1); border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-size: 0.88rem; }
.notice-banner strong { color: var(--maroon); }

.back-to-top { position: fixed; right: 1.2rem; bottom: 1.6rem; z-index: 170; width: 46px; height: 46px; border-radius: 50%; background: var(--maroon); color: var(--white); display: none; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); }
.back-to-top.is-visible { display: flex; }
@media (max-width: 780px) { .back-to-top { bottom: 76px; } }

/* ---------- Accessibility widget ---------- */
.a11y-widget { position: fixed; left: 1.2rem; bottom: 1.6rem; z-index: 190; }
@media (max-width: 780px) { .a11y-widget { bottom: 76px; } }
.a11y-toggle { width: 46px; height: 46px; border-radius: 50%; background: var(--maroon); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); border: 0; }
.a11y-toggle:hover { background: var(--maroon-dim); }
.a11y-panel { position: absolute; left: 0; bottom: 58px; width: 305px; max-width: calc(100vw - 2.4rem); background: var(--white); color: var(--charcoal); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); border: 1px solid var(--line); padding: 1rem 1.1rem 1rem; display: flex; flex-direction: column; }
.a11y-panel[hidden] { display: none; }
.a11y-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; flex-shrink: 0; }
.a11y-panel-head h3 { font-size: 1rem; font-family: var(--font-body); font-weight: 700; color: var(--ink); }
.a11y-close { width: 26px; height: 26px; border: 0; background: transparent; color: var(--charcoal); font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0.6; }
.a11y-close:hover { opacity: 1; }
.a11y-panel-body { overflow-y: auto; max-height: min(60vh, 420px); padding-right: 0.3rem; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; padding-block: 0.55rem; border-bottom: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; }
.a11y-btn-group { display: flex; gap: 0.35rem; }
.a11y-btn-group button { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--cream); font-size: 0.76rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.a11y-btn-group button:hover { border-color: var(--maroon); color: var(--maroon); }
.a11y-toggle-row { display: flex; align-items: center; justify-content: space-between; padding-block: 0.55rem; border-bottom: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.a11y-toggle-row input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--maroon); }
.a11y-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--maroon); opacity: 0.85; margin-top: 0.9rem; margin-bottom: 0.35rem; }
.a11y-profile-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.a11y-profile-row button { padding: 0.4rem 0.65rem; border-radius: 999px; border: 1px solid var(--maroon); background: var(--white); color: var(--maroon); font-size: 0.72rem; font-weight: 700; }
.a11y-profile-row button:hover, .a11y-profile-row button.is-active { background: var(--maroon); color: var(--white); }
.a11y-action-row { width: 100%; display: flex; align-items: center; justify-content: space-between; padding-block: 0.55rem; border-bottom: 1px solid var(--line); background: transparent; border-left: 0; border-right: 0; border-top: 0; font-size: 0.86rem; font-weight: 600; text-align: left; }
.a11y-action-row:hover { color: var(--maroon); }
.a11y-chev { font-size: 0.7rem; opacity: 0.6; }
.a11y-headings-list { list-style: none; padding: 0.3rem 0 0.3rem 0.6rem; margin: 0; border-left: 2px solid var(--line); font-size: 0.8rem; max-height: 160px; overflow-y: auto; }
.a11y-headings-list[hidden] { display: none; }
.a11y-headings-list li { padding-block: 0.3rem; }
.a11y-headings-list a { opacity: 0.8; }
.a11y-headings-list a:hover { opacity: 1; color: var(--maroon); text-decoration: underline; }
.a11y-headings-list li[data-level="3"] { padding-left: 0.8rem; opacity: 0.85; }
.a11y-reset { width: 100%; margin-top: 0.85rem; padding: 0.55rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--cream); font-size: 0.82rem; font-weight: 700; text-align: center; flex-shrink: 0; }
.a11y-reset:hover { border-color: var(--maroon); color: var(--maroon); }

html.a11y-contrast { --cream: #FFFFFF; --cream-dim: #FFFFFF; --charcoal: #000000; --ink: #000000; --line: rgba(0,0,0,0.55); }
html.a11y-highlight-links main a:not(.btn):not(.gift-amount-btn):not(.shipping-option) { text-decoration: underline; text-underline-offset: 3px; background: rgba(240,184,56,0.35); border-radius: 2px; }
html.a11y-reduce-motion, html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
html.a11y-line-height body { line-height: 1.9 !important; }
html.a11y-text-spacing body { letter-spacing: 0.03em !important; word-spacing: 0.14em !important; }
html.a11y-text-align-left main :is(p, li, blockquote) { text-align: left !important; }
html.a11y-dyslexia-font body { font-family: 'Lexend', var(--font-body) !important; }
html.a11y-dyslexia-font h1, html.a11y-dyslexia-font h2, html.a11y-dyslexia-font h3, html.a11y-dyslexia-font h4 { font-family: 'Lexend', var(--font-body) !important; }
html.a11y-low-saturation { filter: saturate(0.45); }
html.a11y-hide-images main img { visibility: hidden; }
.a11y-reading-active { outline: 3px solid var(--gold) !important; outline-offset: 2px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: var(--space-lg); } }
.two-col.reverse { direction: rtl; } .two-col.reverse > * { direction: ltr; }

.text-center { text-align: center; }
/* Paragraphs are capped at 62ch (see the base `p` rule) with no auto margins,
   so text-align:center alone only centers the wrapped lines within a box
   that's still flush against the left edge. Re-center the box itself
   whenever a <p> is explicitly marked .text-center. */
p.text-center { margin-inline: auto; }
.mt-lg { margin-top: var(--space-lg); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }