/* VanIsleNet — site styles v2 (design pass).
   WCAG 2.1 AA: all text/background pairs meet 4.5:1 (3:1 large text & UI). */

/* Atkinson Hyperlegible — self-hosted (Braille Institute, accessibility-first) */
@font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2'),url('/fonts/AtkinsonHyperlegible-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2'),url('/fonts/AtkinsonHyperlegible-Italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2'),url('/fonts/AtkinsonHyperlegible-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2'),url('/fonts/AtkinsonHyperlegible-BoldItalic.woff') format('woff');font-weight:700;font-style:italic;font-display:swap}
:root{
  /* ---------- Color Tokens (HSL format) ---------- */
  /* Primary — Moody Coastal Gothic palette */
  --color-ocean: hsl(205, 75%, 25%);
  --color-ocean-light: hsl(205, 65%, 45%);
  --color-ocean-dark: hsl(207, 71%, 18%);
  --color-ocean-deep: hsl(209, 71%, 15%);

  /* Accent — Forest green */
  --color-forest: hsl(145, 35%, 35%);
  --color-forest-dark: hsl(147, 38%, 28%);

  /* Accent — Rich gold/copper */
  --color-gold: hsl(40, 78%, 60%);
  --color-gold-dark: hsl(35, 76%, 44%);
  --color-dusk: hsl(40, 90%, 72%);

  /* Neutral — Backgrounds & text */
  --color-surface: hsl(0, 0%, 100%);
  --color-mist: hsl(194, 43%, 97%);
  --color-ink: hsl(209, 27%, 17%);
  --color-ink-soft: hsl(204, 18%, 36%);
  --color-line: hsl(197, 28%, 85%);

  /* Semantic */
  --color-success: hsl(160, 84%, 39%);
  --color-danger: hsl(12, 71%, 41%);

  /* ---------- Responsive Design Tokens (Task #7) ---------- */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Legacy fallback variables (mapped to new tokens) */
  --ocean: var(--color-ocean);
  --ocean-dark: var(--color-ocean-dark);
  --ocean-deep: var(--color-ocean-deep);
  --forest: var(--color-forest);
  --forest-dark: var(--color-forest-dark);
  --sand: var(--color-gold);
  --sand-dark: var(--color-gold-dark);
  --dusk: var(--color-dusk);
  --mist: var(--color-mist);
  --surface: var(--color-surface);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --line: var(--color-line);
  --success: var(--color-success);
  --danger: var(--color-danger);

  /* ---------- Spacing Tokens ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 72px;
  --space-6xl: 96px;

  /* ---------- Transition Tokens ---------- */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-slower: 400ms;
  --transition-none: 0ms;

  /* Easing functions (CSS variables for transitions) */
  --ease-linear: linear;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Border Radius Tokens ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Legacy fallback variables */
  --radius: var(--radius-lg);
  --radius-sm: var(--radius-sm);

  /* ---------- Shadow Tokens ---------- */
  --shadow-sm: 0 1px 2px rgba(9, 58, 76, 0.06);
  --shadow: 0 1px 2px rgba(9, 58, 76, 0.06), 0 6px 20px rgba(9, 58, 76, 0.08);
  --shadow-md: 0 4px 12px rgba(9, 58, 76, 0.12);
  --shadow-lg: 0 8px 24px rgba(9, 58, 76, 0.14);
  --shadow-lift: 0 2px 6px rgba(9, 58, 76, 0.10), 0 18px 40px rgba(9, 58, 76, 0.16);
  --shadow-xl: 0 12px 40px rgba(9, 58, 76, 0.18);

  /* ---------- Typography Scale Tokens (Task #8: rem-based) ---------- */
  --type-xs: 0.75rem;    /* 12px */
  --type-sm: 0.875rem;   /* 14px */
  --type-base: 1rem;     /* 16px */
  --type-lg: 1.125rem;   /* 18px */
  --type-xl: 1.25rem;    /* 20px */
  --type-2xl: 1.5rem;    /* 24px */
  --type-3xl: 1.875rem;  /* 30px */
  --type-4xl: 2.25rem;   /* 36px */
  --type-5xl: 3rem;      /* 48px */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:62.5%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}
body{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif;font-size:1.6rem;line-height:1.65;color:var(--ink);background:var(--mist)}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;line-height:1.12;color:var(--ink);letter-spacing:-.01em}
a{color:var(--ocean)}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- Task #10: Image Optimization (CSS-side) ---------- */
/* Aspect-ratio containers replace fixed heights for responsive images */
img[loading="lazy"]{
  opacity:0;
  animation:fade-in var(--transition-slow) ease-out forwards;
}

@keyframes fade-in{
  to{opacity:1}
}

/* Image containers with aspect-ratio instead of fixed heights */
.img-container{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--mist);
}

.img-container.aspect-video{
  aspect-ratio:16/9;
}

.img-container.aspect-square{
  aspect-ratio:1;
}

.img-container.aspect-portrait{
  aspect-ratio:3/4;
}

.img-container.aspect-wide{
  aspect-ratio:21/9;
}

.img-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Responsive image sizing with background-image optimization */
.bg-image{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.bg-image.bg-contain{
  background-size:contain;
}

.bg-image.bg-fixed{
  background-attachment:fixed;
}

/* Picture element support for multiple background-size values */
picture img{
  width:100%;
  height:auto;
  display:block;
}

/* Gallery image enhancements */
.listing-gallery img{
  aspect-ratio:4/3;
  object-fit:cover;
}

.listing-gallery .gallery-lead{
  aspect-ratio:16/9;
}

.biz-photo{
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center;
}

/* Buttons — modern color + scale transitions (2024) */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--space-sm);min-height:4.8rem;padding:var(--space-md) 2.6rem;border-radius:var(--radius-full);font-weight:600;font-size:1.6rem;text-decoration:none;border:none;cursor:pointer;transition:background var(--transition-base) ease-out,color var(--transition-base) ease-out,transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.btn:hover{transform:scale(1.02);box-shadow:0 var(--space-lg) 16px rgba(0,0,0,.15)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.btn-primary{background:linear-gradient(180deg,#F0B355,var(--sand));color:#231604;box-shadow:0 var(--space-sm) 10px rgba(232,163,61,.4)}
.btn-primary:hover{background:color-mix(in srgb, #F0B355 60%, var(--sand-dark) 40%)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:color-mix(in srgb, transparent, rgba(255,255,255,.18));border-color:rgba(255,255,255,.8)}
.btn-outline{background:transparent;color:var(--ocean);border:1.5px solid var(--ocean)}
.btn-outline:hover{background:color-mix(in srgb, var(--ocean) 8%, transparent);color:var(--ocean)}
.btn-solid{background:var(--ocean);color:#fff;box-shadow:0 var(--space-sm) 10px rgba(14,77,100,.35)}
.btn-solid:hover{background:color-mix(in srgb, var(--ocean) 80%, var(--ocean-dark) 20%)}
:focus-visible{outline:3px solid var(--sand);outline-offset:var(--space-sm)}
::placeholder{color:#5E7079;opacity:1}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:var(--space-sm) var(--space-lg);z-index:1000;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}

/* ---------- Form Validation & Accessibility (Task #5) ---------- */
.field input:invalid{border-color:var(--danger)}
.field input:invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent)}
.field input:invalid::after{content:"✕ Invalid";display:block;font-size:0.875rem;color:var(--danger);margin-top:0.5rem}
.field input:valid{border-color:var(--color-success)}
.field input:valid:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-success) 15%, transparent)}
.field input:required::after{content:" *";color:var(--danger);font-weight:700}
.field input:disabled{opacity:0.65;cursor:not-allowed;background:var(--mist)}
.form-error{position:relative;display:flex;align-items:flex-start;gap:var(--space-md)}
.form-error::before{content:"✕";flex:none;font-size:1.25rem;font-weight:700;color:var(--danger)}
.form-ok{position:relative;display:flex;align-items:flex-start;gap:var(--space-md)}
.form-ok::before{content:"✓";flex:none;font-size:1.25rem;font-weight:700;color:var(--color-success)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Scroll reveal (JS adds .reveal; .in when visible) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--transition-slower) ease-out,transform var(--transition-slower) ease-out}
.reveal.in{opacity:1;transform:none}

/* ---------- Task #9: Skeleton Loading & Animation ---------- */
@keyframes skeleton-pulse{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@keyframes skeleton-shimmer{
  0%{background-position:-1000px 0}
  100%{background-position:1000px 0}
}

.skeleton{
  background:linear-gradient(
    90deg,
    var(--mist) 25%,
    rgba(232,163,61,.15) 50%,
    var(--mist) 75%
  );
  background-size:200% 100%;
  animation:skeleton-pulse 2s var(--ease-in-out) infinite;
  border-radius:var(--radius-md);
  pointer-events:none;
  user-select:none;
}

.skeleton.skeleton-text{
  height:1rem;
  margin-bottom:var(--space-sm);
  min-width:80%;
}

.skeleton.skeleton-heading{
  height:1.5rem;
  margin-bottom:var(--space-md);
  min-width:60%;
  border-radius:var(--radius-sm);
}

.skeleton.skeleton-card{
  height:180px;
  border-radius:var(--radius-lg);
  margin-bottom:var(--space-lg);
}

.skeleton.skeleton-image{
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
}

.skeleton.skeleton-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  display:inline-block;
}

.skeleton.skeleton-button{
  height:4.8rem;
  width:140px;
  border-radius:var(--radius-full);
}

/* Reduce motion respects */
@media (prefers-reduced-motion:reduce){
  .skeleton{animation:none;background:var(--mist)}
}

/* Loading states for forms and data sections */
.loading-state{
  position:relative;
  pointer-events:none;
}

.loading-state::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(2px);
  border-radius:inherit;
  z-index:10;
}

.loading-spinner{
  display:inline-block;
  width:24px;
  height:24px;
  border:3px solid var(--line);
  border-top-color:var(--ocean);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.loading-text{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  color:var(--ink-soft);
  font-size:0.9375rem;
}

.form-loading{
  opacity:0.6;
  pointer-events:none;
}

.form-loading .field input,
.form-loading .field select,
.form-loading .field textarea{
  border-color:var(--line);
  background:var(--mist);
  cursor:wait;
}

.form-loading .btn{
  opacity:0.7;
  cursor:wait;
}

/* Data page loading overlay */
.data-loading{
  position:relative;
  min-height:200px;
}

.data-loading::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:20px 20px;
  background-position:0 0,10px 10px;
  animation:none;
  z-index:5;
  pointer-events:none;
}

/* Enhance transitions usage throughout key elements */
.btn,
a.chip,
.region,
.cat,
.event-card,
.biz-card,
.listing-row{
  transition:background var(--transition-base) ease-out,
              color var(--transition-base) ease-out,
              border-color var(--transition-base) ease-out,
              transform var(--transition-base) ease-out,
              box-shadow var(--transition-base) ease-out
}

/* ---------- Task #9: Subtle scroll parallax for hero (optional but appreciated) ---------- */
.hero-scene{
  background-attachment:fixed;
  background-size:cover;
  perspective:1000px;
}

@supports (animation-timeline:view()){
  .hero-scene{
    animation:hero-parallax linear forwards;
    animation-timeline:view(60% 0%);
  }
  @keyframes hero-parallax{
    to{transform:translateY(50px)}
  }
}

/* ---------- Accessibility preferences (toolbar in header) ---------- */
.a11y-wrap{position:relative}
.a11y-btn[hidden],.a11y-panel[hidden]{display:none!important}
.a11y-btn{display:inline-flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;border-radius:var(--radius-sm);background:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:background var(--transition-base) ease-out,border-color var(--transition-base) ease-out}
.a11y-btn:hover{background:var(--mist);border-color:var(--ocean)}
.a11y-btn:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.a11y-btn[aria-expanded="true"]{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.a11y-panel{position:absolute;right:0;top:52px;z-index:200;width:240px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lift);padding:var(--space-lg);display:grid;gap:var(--space-lg)}
.a11y-panel fieldset{border:none;display:grid;gap:var(--space-sm)}
.a11y-panel legend{font-weight:700;font-size:0.875rem;margin-bottom:var(--space-xs)}
.a11y-panel label{display:flex;align-items:center;gap:var(--space-md);min-height:3.2rem;font-size:0.9375rem;cursor:pointer}
.a11y-panel input[type=radio],.a11y-panel input[type=checkbox]{width:20px;height:20px;accent-color:var(--ocean)}
.a11y-check{font-weight:600}
@media(max-width:768px){.a11y-panel{position:fixed;right:12px;left:12px;top:76px;width:auto}}

/* Text size (zoom keeps layout proportions) */
html.a11y-lg body{zoom:1.15}
html.a11y-xl body{zoom:1.3}

/* Reduce motion (user toggle — mirrors prefers-reduced-motion) */
html.a11y-motion-off *,html.a11y-motion-off *::before,html.a11y-motion-off *::after{animation:none!important;transition:none!important}
html.a11y-motion-off{scroll-behavior:auto}
html.a11y-motion-off .reveal{opacity:1!important;transform:none!important}

/* ---------- Task #6: Expanded Accessibility Toolbar ---------- */
/* Letter-spacing toggle: normal → 1.5x → 2x */
html.a11y-letter-spacing-1 body{letter-spacing:1.5px}
html.a11y-letter-spacing-2 body{letter-spacing:2px}
html.a11y-letter-spacing-1 h1,html.a11y-letter-spacing-1 h2,html.a11y-letter-spacing-1 h3{letter-spacing:1px}
html.a11y-letter-spacing-2 h1,html.a11y-letter-spacing-2 h2,html.a11y-letter-spacing-2 h3{letter-spacing:1.5px}

/* Font-family swap: use sans-serif alternative */
html.a11y-font-swap body,html.a11y-font-swap h1,html.a11y-font-swap h2,html.a11y-font-swap h3{font-family:'Arial','Helvetica',sans-serif!important}

/* Link underline toggle for colorblind users */
html.a11y-link-underline a:not(.btn):not(.navlink){text-decoration:underline!important}

/* Focus mode: larger, more visible focus ring */
html.a11y-focus-mode :focus-visible{outline:4px solid var(--sand);outline-offset:4px}
html.a11y-focus-mode *:not(input):not(textarea):not(select){position:relative}
html.a11y-focus-mode a:not(.btn):not(:focus-visible),html.a11y-focus-mode button:not(:focus-visible){opacity:0.55}
html.a11y-focus-mode a:focus-visible,html.a11y-focus-mode button:focus-visible{opacity:1;background:color-mix(in srgb, var(--sand) 20%, transparent);border-radius:var(--radius-sm)}

/* High contrast */
html.a11y-contrast{--ink:#000000;--ink-soft:#1E2A31;--line:#49606B;--ocean:#093A4C;--sand-dark:#8A5A0B}
html.a11y-contrast body{background:#fff}
html.a11y-contrast a{text-decoration:underline}
html.a11y-contrast .btn,html.a11y-contrast nav a.navlink,html.a11y-contrast .chip{text-decoration:none}
html.a11y-contrast header.site{background:#fff;backdrop-filter:none}
html.a11y-contrast .hero-scrim{background:linear-gradient(105deg,rgba(2,20,28,.93) 0%,rgba(2,20,28,.82) 55%,rgba(2,20,28,.6) 100%)}
html.a11y-contrast .page-head{background:#062A38}
html.a11y-contrast .ph-bay,html.a11y-contrast .ph-headland,html.a11y-contrast .ph-events,html.a11y-contrast .ph-listing{background:linear-gradient(170deg,rgba(2,20,28,.92),rgba(2,20,28,.85)),none #062A38}
html.a11y-contrast .region::after{background:linear-gradient(180deg,rgba(2,20,28,.35) 10%,rgba(2,20,28,.92))}
html.a11y-contrast .kicker{background:rgba(2,20,28,.85)}
html.a11y-contrast .hero-stats div span,html.a11y-contrast .page-head p{color:#EAF3F6}

/* ---------- Nav ---------- */
header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--ocean),var(--forest) 50%,var(--sand))}
.nav{display:flex;align-items:center;justify-content:space-between;height:7rem}
.logo{display:flex;align-items:center;gap:var(--space-md);text-decoration:none;color:var(--ink);font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.375rem}
.logo svg{flex:none;transition:transform var(--transition-base) ease-out}
.logo:hover svg{transform:rotate(-10deg) scale(1.08)}
.logo:focus-visible{outline:3px solid var(--sand);outline-offset:2px;border-radius:var(--radius-sm)}
.logo span em{font-style:normal;color:var(--ocean)}
nav ul{display:flex;gap:var(--space-xs);list-style:none}
nav a.navlink{position:relative;display:inline-flex;align-items:center;min-height:4.4rem;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink-soft);font-weight:500;font-size:0.9375rem;transition:color var(--transition-fast) ease-out}
nav a.navlink::after{content:"";position:absolute;left:var(--space-lg);right:var(--space-lg);bottom:7px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--sand),var(--forest));transform:scaleX(0);transform-origin:left;transition:transform var(--transition-base) ease-out}
nav a.navlink:hover{color:var(--ink)}
nav a.navlink:hover::after{transform:scaleX(1)}
nav a.navlink:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
nav a.navlink[aria-current]::after{display:none}
nav a.navlink[aria-current]{color:var(--ocean);font-weight:600;box-shadow:inset 0 -3px 0 var(--sand)}
.nav .btn{min-height:4.4rem;padding:var(--space-sm) var(--space-xl);font-size:0.9375rem}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-sm);width:44px;height:44px;cursor:pointer;color:var(--ink)}
.nav-cta-mobile{display:none}
@media(max-width:768px){
  nav ul,.nav .btn-outline{display:none}
  nav ul.open{display:flex;flex-direction:column;position:absolute;top:73px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:var(--space-md) var(--space-xl);box-shadow:var(--shadow)}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  nav ul.open .nav-cta-mobile{display:block;margin-top:var(--space-sm);padding-top:var(--space-lg);border-top:1px solid var(--line)}
  nav ul.open .nav-cta-mobile .btn-outline{display:inline-flex;width:100%;justify-content:center}
}

/* ---------- Hero (illustrated scene lives in home.php as inline SVG) ---------- */
.hero{position:relative;color:#fff;background:linear-gradient(180deg,#0B4055 0%,var(--ocean) 45%,#136079 100%);overflow:hidden;isolation:isolate}
.hero-scene{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.hero-scene svg,.hero-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(6,42,56,.84) 0%,rgba(6,42,56,.6) 42%,rgba(6,42,56,.22) 72%,rgba(6,42,56,.12) 100%),linear-gradient(180deg,rgba(6,42,56,0) 60%,rgba(6,42,56,.45) 100%)}
.hero-inner{position:relative;padding:88px 0 190px;max-width:800px}
.kicker{display:inline-flex;align-items:center;gap:var(--space-sm);font-size:0.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#DCEEE3;margin-bottom:var(--space-xl);background:rgba(6,42,56,.45);border:1px solid rgba(255,255,255,.18);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);backdrop-filter:blur(4px)}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)}
.hero h1{color:#fff;font-size:clamp(2.5rem,7vw,4.75rem);letter-spacing:-.02em;margin-bottom:var(--space-lg);text-shadow:0 2px 24px rgba(6,42,56,.45)}
.hero h1 em{font-style:italic;color:var(--dusk)}
.hero p.lead{font-size:clamp(1.0625rem,2vw,1.3125rem);color:#E4F0F3;max-width:54ch;margin-bottom:var(--space-2xl);text-shadow:0 1px 12px rgba(6,42,56,.5)}
.search{display:flex;gap:var(--space-md);background:#fff;padding:var(--space-sm);border-radius:var(--radius-full);box-shadow:0 12px 40px rgba(6,42,56,.4);max-width:660px;flex-wrap:wrap}
.search input,.search select{border:none;font:inherit;font-size:1.6rem;color:var(--ink);background:transparent;min-height:4.8rem}
.search input{flex:2 1 200px;padding:0 var(--space-md) 0 var(--space-lg)}
.search select{flex:1 1 150px;border-left:1px solid var(--line);padding:0 var(--space-md);cursor:pointer}
.search input:focus,.search select:focus{outline:none}
.search:focus-within{outline:3px solid var(--sand);outline-offset:var(--space-sm)}
.hero-stats{display:flex;gap:var(--space-lg);margin-top:var(--space-2xl);flex-wrap:wrap}
.hero-stats div{background:rgba(6,42,56,.4);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl)}
.hero-stats div strong{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.875rem;font-variant-numeric:tabular-nums;color:#fff}
.hero-stats div span{font-size:0.875rem;color:#D6E7EC}

.hero::after{content:"";position:absolute;inset:auto 0 -2px 0;height:110px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 110" preserveAspectRatio="none"><path d="M0 70 C240 110 480 20 720 45 C960 70 1200 105 1440 55 L1440 110 L0 110 Z" fill="%23F4F7F8"/></svg>') bottom/100% 100% no-repeat}
.page-head::after{content:"";position:absolute;inset:auto 0 -2px 0;height:60px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0 38 C240 60 480 12 720 25 C960 38 1200 57 1440 30 L1440 60 L0 60 Z" fill="%23F4F7F8"/></svg>') bottom/100% 100% no-repeat}

/* ---------- Page header (inner pages) ---------- */
.page-head{position:relative;background:linear-gradient(170deg,var(--ocean-deep),var(--ocean) 70%,#136079);color:#fff;padding:60px 0 var(--space-6xl);overflow:hidden}
.page-head::before{content:"";position:absolute;inset:auto 0 0 0;height:70%;background:
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 300" preserveAspectRatio="none"><path d="M0 190 C240 170 480 200 720 210 C960 220 1200 200 1440 215 L1440 300 L0 300 Z" fill="%23FFFFFF" opacity=".06"/><path d="M0 245 C280 225 560 250 840 258 C1080 264 1280 252 1440 260 L1440 300 L0 300 Z" fill="%23FFFFFF" opacity=".08"/><path d="M1258 200 C1265 168 1276 156 1285 150 C1294 156 1305 168 1312 200 C1294 190 1276 190 1258 200 Z" fill="%23FFFFFF" opacity=".1"/><path d="M1310 208 C1316 182 1325 172 1332 167 C1339 172 1348 182 1354 208 C1340 200 1324 200 1310 208 Z" fill="%23FFFFFF" opacity=".08"/></svg>') bottom/100% 100% no-repeat}
.page-head.has-photo{background-size:cover;background-position:center}
.page-head.has-photo::before{display:none}
.ph-bay{background:linear-gradient(100deg,rgba(6,42,56,.92) 0%,rgba(6,42,56,.9) 48%,rgba(6,42,56,.5) 68%,rgba(6,42,56,.16) 100%),url('/assets/img/bay.webp') center/cover no-repeat}
.ph-headland{background:linear-gradient(100deg,rgba(6,42,56,.92) 0%,rgba(6,42,56,.9) 48%,rgba(6,42,56,.5) 68%,rgba(6,42,56,.16) 100%),url('/assets/img/headland.webp') center/cover no-repeat}
.ph-events{background:linear-gradient(100deg,rgba(6,42,56,.92) 0%,rgba(6,42,56,.9) 48%,rgba(6,42,56,.5) 68%,rgba(6,42,56,.16) 100%),url('/assets/img/events.webp') center/cover no-repeat}
.ph-listing{background:linear-gradient(100deg,rgba(6,42,56,.92) 0%,rgba(6,42,56,.9) 48%,rgba(6,42,56,.5) 68%,rgba(6,42,56,.16) 100%),url('/assets/img/harbour.webp') center 40%/cover no-repeat}
@media(max-width:768px){
  .ph-bay{background:linear-gradient(rgba(6,42,56,.93),rgba(6,42,56,.9)),url('/assets/img/bay.webp') center/cover no-repeat}
  .ph-headland{background:linear-gradient(rgba(6,42,56,.93),rgba(6,42,56,.9)),url('/assets/img/headland.webp') center/cover no-repeat}
  .ph-events{background:linear-gradient(rgba(6,42,56,.93),rgba(6,42,56,.9)),url('/assets/img/events.webp') center/cover no-repeat}
  .ph-listing{background:linear-gradient(rgba(6,42,56,.93),rgba(6,42,56,.9)),url('/assets/img/harbour.webp') center/cover no-repeat}
}
.page-head>.wrap{position:relative}
.page-head h1{color:#fff;font-size:clamp(1.875rem,4.4vw,2.875rem);text-shadow:0 2px 18px rgba(6,42,56,.4)}
.page-head p{color:#DCEAEE;margin-top:10px;max-width:60ch;font-size:17px}
.page-head .badge{margin-left:12px}

/* ---------- Task #11: Semantic HTML5 Elements Support ---------- */
/* Semantic sections and articles */
section{padding:var(--space-5xl) 0;position:relative}

article{display:block;margin-bottom:var(--space-4xl)}

article header{margin-bottom:var(--space-2xl)}

article footer{margin-top:var(--space-2xl);padding-top:var(--space-2xl);border-top:1px solid var(--line);color:var(--ink-soft);font-size:0.90625rem}

/* Semantic nav element styling */
nav{position:relative}

nav[aria-label]{margin-bottom:var(--space-2xl)}

/* Semantic aside element (sidebar, supplementary content) */
aside{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-2xl);margin-bottom:var(--space-2xl)}

aside h3{font-size:1.125rem;margin-bottom:var(--space-lg);color:var(--ink)}

aside p{font-size:0.90625rem;color:var(--ink-soft);line-height:1.6}

aside ul,aside ol{margin-left:var(--space-lg);margin-bottom:var(--space-lg)}

aside li{margin-bottom:var(--space-sm);color:var(--ink-soft)}

/* Header element styling */
header[role="banner"]{position:relative;margin-bottom:var(--space-2xl)}

header h1{margin-bottom:var(--space-md)}

header p{color:var(--ink-soft);font-size:1.0625rem}

/* Main element semantics */
main{display:block;position:relative}

/* Figure and figcaption for images with captions */
figure{margin:var(--space-2xl) 0;padding:0}

figure img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);margin-bottom:var(--space-md)}

figcaption{
  padding:var(--space-md) var(--space-lg);
  background:var(--mist);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  font-size:0.875rem;
  color:var(--ink-soft);
  font-style:italic;
  line-height:1.5;
}

figcaption strong{
  color:var(--ink);
  font-style:normal;
  font-weight:700;
}

figcaption a{
  color:var(--ocean);
  text-decoration:underline;
}

figcaption a:hover{
  color:var(--ocean-dark);
}

/* Semantic containers and grouping */
.semantic-container{
  display:block;
  position:relative;
}

.article-body{
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--ink);
  max-width:65ch;
}

.article-body h2{
  margin:var(--space-2xl) 0 var(--space-lg);
  font-size:1.875rem;
}

.article-body h3{
  margin:var(--space-xl) 0 var(--space-md);
  font-size:1.25rem;
}

.article-body blockquote{
  border-left:4px solid var(--sand);
  padding:var(--space-lg) var(--space-2xl);
  margin:var(--space-2xl) 0;
  background:var(--mist);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  font-style:italic;
  color:var(--ink-soft);
  font-size:1.125rem;
}

.article-body code{
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:2px 6px;
  font-family:'Courier New',monospace;
  font-size:0.875em;
  color:var(--ocean);
}

.article-body pre{
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-xl);
  overflow-x:auto;
  margin:var(--space-xl) 0;
}

.article-body pre code{
  background:none;
  border:none;
  padding:0;
  color:inherit;
}

/* ---------- Sections ---------- */
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-2xl);flex-wrap:wrap}
.eyebrow{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#96610B;margin-bottom:var(--space-sm)}
.sec-head h2{font-size:clamp(1.875rem,4vw,2.75rem)}
.sec-head h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--sand),var(--forest));margin-top:var(--space-lg)}
.sec-head p{color:var(--ink-soft);max-width:60ch;margin-top:var(--space-lg)}
.sec-link{font-weight:600;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px}
.sec-link:hover{text-decoration:underline}
.sec-link svg{transition:transform var(--transition-base) ease-out}
.sec-link:hover svg{transform:translateX(3px)}

/* ---------- Region cards (bento layout: first card hero-sized) ---------- */
.grid-regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-lg)}
@media(min-width:1024px){
  .grid-regions{grid-template-columns:repeat(4,1fr);grid-auto-rows:175px}
  .grid-regions>:first-child{grid-column:span 2;grid-row:span 2}
  .grid-regions>:first-child h3{font-size:2rem}
  .grid-regions>:first-child span{font-size:0.9375rem}
}
.region{position:relative;display:flex;flex-direction:column;justify-content:end;min-height:200px;padding:var(--space-xl);border-radius:var(--radius-lg);text-decoration:none;color:#fff;overflow:hidden;box-shadow:var(--shadow);transition:transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.region:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.region:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.region::before{content:"";position:absolute;inset:0;background:
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" preserveAspectRatio="none"><circle cx="330" cy="40" r="22" fill="%23FFFFFF" opacity=".3"/><path d="M28 122 C33 100 40 92 46 88 C52 92 59 100 64 122 C52 116 40 116 28 122 Z" fill="%23FFFFFF" opacity=".16"/><path d="M64 128 C70 98 80 88 88 82 C96 88 106 98 112 128 C96 120 80 120 64 128 Z" fill="%23FFFFFF" opacity=".2"/><path d="M110 124 C115 102 122 94 128 90 C134 94 141 102 146 124 C134 118 122 118 110 124 Z" fill="%23FFFFFF" opacity=".14"/><path d="M0 138 C80 128 180 140 260 148 C320 154 370 156 400 152 L400 200 L0 200 Z" fill="%23FFFFFF" opacity=".12"/><path d="M0 160 C90 150 200 160 300 168 L400 172 L400 200 L0 200 Z" fill="%23FFFFFF" opacity=".1"/><path d="M0 137 C80 127 180 139 260 147 C320 153 370 155 400 151" stroke="%23FFFFFF" stroke-width="2.5" fill="none" opacity=".35" stroke-linecap="round"/></svg>') center/cover no-repeat;transition:transform var(--transition-base) ease-out}
.region:hover::before{transform:scale(1.06)}
.region::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,42,56,.05) 30%,rgba(6,42,56,.78));}
.region.has-photo{background-size:cover;background-position:center}
.region.has-photo::before{display:none}
.region.has-photo::after{background:linear-gradient(0deg,rgba(6,42,56,.94) 0,rgba(6,42,56,.92) 80px,rgba(6,42,56,.4) 160px,rgba(6,42,56,.1) 100%)}
.region>*{position:relative;z-index:1}
.region h3{color:#fff;font-size:1.3125rem;margin-bottom:var(--space-xs);text-shadow:0 1px 8px rgba(6,42,56,.5);transition:transform var(--transition-slow) ease-out}
.region span{font-size:0.84375rem;color:#DCEAEE;font-weight:500;transition:opacity var(--transition-slow) ease-out,transform var(--transition-slow) ease-out}
@media (hover:hover){
  .region span{opacity:0;transform:translateY(10px)}
  .region:hover h3,.region:focus-visible h3{transform:translateY(-4px)}
  .region:hover span,.region:focus-visible span{opacity:1;transform:none}
}
.r1{background:linear-gradient(150deg,#1A7295,#0E4D64)}
.r2{background:linear-gradient(150deg,#3E8465,#1E4A36)}
.r3{background:linear-gradient(150deg,#527FA0,#2C5670)}
.r4{background:linear-gradient(150deg,#6E9A75,#3A573F)}
.r5{background:linear-gradient(150deg,#A07C4E,#5C4630)}
.r6{background:linear-gradient(150deg,#3F7C72,#22443F)}

/* ---------- Category cards ---------- */
/* Task #7: Container queries for responsive card layouts */
.grid-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--space-lg);--container-name:card}
.cat{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-lg);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-xl);text-decoration:none;color:var(--ink);font-weight:600;font-size:0.96875rem;box-shadow:var(--shadow);transition:border-color var(--transition-base) ease-out,transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out;container-type:inline-size}
@container (max-width: 200px){.cat{padding:var(--space-lg);font-size:0.875rem}}
@container (min-width: 250px){.cat{padding:var(--space-xl)}}
.cat:hover{border-color:var(--ocean);transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.cat:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.cat .cat-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--radius-md);background:linear-gradient(150deg,#E7F1F4,#F4F7F8);color:var(--ocean);border:1px solid var(--line);transition:background var(--transition-base) ease-out,color var(--transition-base) ease-out,transform var(--transition-base) ease-out}
.grid-cats .cat:nth-child(4n+2) .cat-icon{color:var(--forest);background:linear-gradient(150deg,#E9F3ED,#F4F7F8)}
.grid-cats .cat:nth-child(4n+3) .cat-icon{color:var(--sand-dark);background:linear-gradient(150deg,#FBF1DC,#F4F7F8)}
.grid-cats .cat:nth-child(4n) .cat-icon{color:#2C6E7E;background:linear-gradient(150deg,#E3F1F3,#F4F7F8)}
.cat:hover .cat-icon{background:linear-gradient(150deg,var(--ocean),#136079)!important;color:#fff!important;border-color:var(--ocean);transform:rotate(-6deg) scale(1.12)}
.cat small{font-weight:500;color:var(--ink-soft);font-size:13px}

/* ---------- Events ---------- */
.events-band{background:var(--surface) radial-gradient(rgba(14,77,100,.07) 1.5px,transparent 1.5px);background-size:22px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.events-band .event{background:var(--surface)}
.grid-events{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-lg)}
.event{display:flex;gap:var(--space-lg);background:var(--mist);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg);text-decoration:none;color:var(--ink);transition:border-color var(--transition-base) ease-out,transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.event:hover{border-color:var(--ocean);transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.event:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.date{flex:none;width:58px;height:66px;background:linear-gradient(170deg,#136079,var(--ocean-dark));color:#fff;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transition:background var(--transition-base) ease-out,color var(--transition-base) ease-out,transform var(--transition-base) ease-out}
.event:hover .date{background:linear-gradient(170deg,#F0B355,var(--sand-dark));color:#231604;transform:rotate(-5deg) scale(1.06)}
.date b{font-size:23px;font-family:'Fraunces',Georgia,serif}
.date span{font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.event h3{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif;font-size:0.96875rem;font-weight:600;margin-bottom:var(--space-xs)}
.event p{font-size:0.84375rem;color:var(--ink-soft)}

/* Events page: intro + CTA */
.ev-intro{display:flex;align-items:center;gap:var(--space-2xl);margin-bottom:var(--space-2xl);flex-wrap:wrap}
.ev-intro .region-intro{flex:1;min-width:280px}
.ev-intro-cta{flex:none}
.ev-intro-cta .btn{font-size:16.5px;padding:var(--space-lg) var(--space-2xl)}

/* Events page: region filter + weekend band */
.ev-filter{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-2xl)}
.ev-filter .chip{font-size:0.875rem}
.chip-active{background:var(--ocean);color:#fff;border-color:var(--ocean);font-weight:700;transition:background var(--transition-base) ease-out,transform var(--transition-base) ease-out}
a.chip-active:hover{background:color-mix(in srgb, var(--ocean) 85%, var(--ocean-dark) 15%);color:#fff;transform:translateY(-5px)}
.weekend-band{background:linear-gradient(150deg,#E7F1F4,#F4F7F8);border:1px solid #C9DDE4;border-radius:20px;padding:30px var(--space-2xl);margin-bottom:var(--space-2xl)}
.weekend-band .event-card{border-color:#C9DDE4}

/* ---------- Event cards — full events page ---------- */
/* Task #7: Container queries for responsive event cards */
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-xl)}
.event-card{display:flex;flex-direction:column;gap:var(--space-sm);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out,border-color var(--transition-base) ease-out;container-type:inline-size}
@container (max-width: 250px){.event-card{padding:var(--space-lg)}}
@container (min-width: 300px){.event-card{padding:var(--space-xl)}}
a.event-card:hover h3{color:var(--ocean);text-decoration:underline}
.event-card:hover{transform:translateY(-5px);border-color:var(--ocean);box-shadow:var(--shadow-lift)}
.event-card:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.event-card:hover .date{background:linear-gradient(170deg,#F0B355,var(--sand-dark));color:#231604;transform:scale(1.06)}
.ev-top{display:flex;align-items:center;gap:var(--space-lg)}
.ev-top .date{width:54px;height:62px}
.ev-when{font-size:0.875rem;font-weight:700;color:var(--ocean)}
.ev-region{font-size:0.8125rem;color:var(--ink-soft);margin-top:2px}
.chip-now{margin-left:auto;align-self:flex-start;background:var(--forest);color:#fff;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);white-space:nowrap}
.event-card h3{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif;font-size:1.125rem;font-weight:700;line-height:1.35}
.ev-notice{background:#FBEAE8;border:1px solid #E5B3AD;color:#7C271C;border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:0.875rem;line-height:1.5}
.event-card h3 a{color:var(--ink);text-decoration:none}
.event-card h3 a:hover{color:var(--ocean);text-decoration:underline}
.event-card .sum{color:var(--ink-soft);font-size:0.90625rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ev-meta{margin-top:auto;padding-top:var(--space-md);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);font-size:0.84375rem;color:var(--ink-soft)}
.ev-meta .go{color:var(--sand-dark);font-weight:700;font-size:18px;transition:transform var(--transition-base) ease-out}
.event-card:hover .ev-meta .go{transform:translateX(5px)}
.event-card.is-featured{border-color:var(--sand);box-shadow:6px 6px 0 rgba(232,163,61,.18)}
.event-card.is-featured:hover{box-shadow:8px 8px 0 rgba(232,163,61,.26)}

/* ---------- Listing rows ---------- */
.listing-list{display:grid;gap:var(--space-lg)}
.listing-row{position:relative;display:block;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-xl) var(--space-2xl) var(--space-xl) var(--space-xl);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:border-color var(--transition-base) ease-out,transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.listing-row::after{content:"\2192";position:absolute;right:var(--space-xl);top:50%;margin-top:-14px;font-size:20px;font-weight:700;color:var(--sand-dark);opacity:0;transform:translateX(-8px);transition:opacity var(--transition-base) ease-out,transform var(--transition-base) ease-out}
.listing-row:hover{border-color:var(--ocean);border-left-color:var(--sand);transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.listing-row:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.listing-row:hover::after{opacity:1;transform:none}
.listing-row h3{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif;font-size:1.0625rem;font-weight:600;margin-bottom:var(--space-xs)}
.listing-row p{color:var(--ink-soft);font-size:0.90625rem}

/* ---------- Business cards — 3-up grid on region/category/search pages ---------- */
/* Task #7: Container queries for responsive business cards */
.biz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--space-xl)}
.biz-card{position:relative;display:flex;flex-direction:column;gap:var(--space-sm);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-2xl);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out,border-color var(--transition-base) ease-out;container-type:inline-size}
@container (max-width: 280px){.biz-card{padding:var(--space-lg)}}
@container (min-width: 320px){.biz-card{padding:var(--space-2xl)}}
.biz-card:hover{transform:translateY(-5px);border-color:var(--ocean);box-shadow:var(--shadow-lift)}
.biz-card:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.biz-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-sm);margin-bottom:2px}
.biz-mono{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-md);font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:700;background:linear-gradient(150deg,#E7F1F4,#F4F7F8);color:var(--ocean);border:1px solid var(--line)}
.biz-grid>:nth-child(4n+2) .biz-mono{color:var(--forest);background:linear-gradient(150deg,#E9F3ED,#F4F7F8)}
.biz-grid>:nth-child(4n+3) .biz-mono{color:#96610B;background:linear-gradient(150deg,#FBF1DC,#F4F7F8)}
.biz-grid>:nth-child(4n) .biz-mono{color:#2C6E7E;background:linear-gradient(150deg,#E3F1F3,#F4F7F8)}
.biz-card h3{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif;font-size:1.09375rem;font-weight:700;line-height:1.35}
.biz-card .sum{color:var(--ink-soft);font-size:0.90625rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.biz-meta{margin-top:auto;padding-top:var(--space-lg);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:0.84375rem;color:var(--ink-soft)}
.biz-meta .go{color:var(--sand-dark);font-weight:700;font-size:18px;transition:transform var(--transition-base) ease-out}
.biz-card:hover .biz-meta .go{transform:translateX(5px)}
.biz-card.is-featured{border-color:var(--sand);box-shadow:6px 6px 0 rgba(232,163,61,.18)}
.biz-card.is-featured:hover{box-shadow:8px 8px 0 rgba(232,163,61,.26)}
.biz-card .badge{margin-left:0}
@media(min-width:1024px){.biz-grid .is-featured{grid-column:span 2}}

.biz-photo{width:calc(100% + 48px);margin:-24px -24px 4px;height:170px;object-fit:cover;border-radius:15px 15px 0 0;border-bottom:1px solid var(--line)}

/* Listing page photo gallery */
.listing-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-md);margin-bottom:var(--space-2xl)}
.listing-gallery img{width:100%;height:150px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--line)}
.listing-gallery .gallery-lead{grid-column:1/-1;height:clamp(220px,38vw,380px)}

/* Photo manager (account + admin edit forms) */
.photo-manager{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-lg);padding:0}
.photo-manager li{display:grid;gap:var(--space-sm);background:var(--mist);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-md)}
.photo-manager img{width:100%;height:120px;object-fit:cover;border-radius:var(--radius-sm)}
.photo-alt{display:flex;gap:var(--space-sm);align-items:center}
.photo-alt input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-sm);font:inherit;font-size:0.84375rem}
.photo-upload{display:grid;gap:var(--space-md)}

/* Sponsored placement card (self-hosted, one per page) */
.sponsor-card{display:flex;align-items:center;gap:var(--space-xl);background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ocean);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-2xl);box-shadow:var(--shadow);flex-wrap:wrap;transition:transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.sponsor-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.sponsor-card:focus-within{outline:3px solid var(--sand);outline-offset:2px}
.sponsor-img{width:110px;height:74px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line);flex:none}
.sponsor-body{flex:1;min-width:220px}
.sponsor-tag{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#5E7079;margin-bottom:var(--space-xs)}
.sponsor-head{font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif;font-size:1.125rem;font-weight:700;color:var(--ink)}
.sponsor-text{font-size:0.90625rem;color:var(--ink-soft);margin-top:2px}
.sponsor-btn{flex:none}
.sponsor-house{border:1.5px dashed #A9BCC4;border-left:4px solid var(--sand);background:linear-gradient(150deg,#FDFBF6,var(--surface))}

/* Featured spotlight band on region pages */
.spotlight-band{background:linear-gradient(150deg,#FBF1DC,#FDF8EE);border:1px solid #EFD9AE;border-radius:20px;padding:30px var(--space-2xl);margin-bottom:var(--space-2xl)}
.spotlight-band .biz-card{border-color:#EFD9AE}

/* Region/category page furniture */
.count-pill{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;padding:0 var(--space-md);border-radius:var(--radius-full);background:var(--mist);border:1px solid var(--line);color:var(--ocean);font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif;font-size:15px;font-weight:700;vertical-align:middle;margin-left:var(--space-sm)}
.region-intro{max-width:70ch;font-size:1.0625rem;line-height:1.75;color:var(--ink-soft);margin-bottom:var(--space-2xl);padding-left:var(--space-xl);border-left:3px solid var(--sand)}
.region-guide p{margin-bottom:var(--space-lg)}
.region-guide h3{margin-top:var(--space-2xl);margin-bottom:var(--space-lg)}
.badge{display:inline-block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:linear-gradient(180deg,#F0B355,var(--sand));color:#231604;border-radius:var(--radius-full);padding:var(--space-xs) var(--space-md);margin-left:var(--space-sm);vertical-align:middle;transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(201,135,31,.35)}
.empty-state{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius-lg);padding:var(--space-2xl);text-align:center;color:var(--ink-soft)}

/* ---------- CTA ---------- */
.cta{position:relative;background:linear-gradient(100deg,rgba(22,56,42,.95) 0%,rgba(22,56,42,.93) 56%,rgba(22,56,42,.5) 74%,rgba(22,56,42,.22) 100%),url('/assets/img/cta.webp') center/cover no-repeat;border-radius:24px;color:#fff;padding:var(--space-2xl) var(--space-2xl);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-2xl);align-items:center;overflow:hidden;box-shadow:12px 12px 0 rgba(47,107,79,.18),var(--shadow-lift)}
.cta::before{content:"";position:absolute;inset:0;background:
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 300" preserveAspectRatio="none"><path d="M0 215 C140 200 280 220 420 228 C560 236 700 226 800 232 L800 300 L0 300 Z" fill="%23FFFFFF" opacity=".05"/><path d="M0 258 C160 246 320 260 480 266 C620 271 720 265 800 270 L800 300 L0 300 Z" fill="%23FFFFFF" opacity=".07"/><path d="M52 212 C60 172 74 158 85 150 C96 158 110 172 118 212 C96 200 74 200 52 212 Z" fill="%23FFFFFF" opacity=".08"/><path d="M116 220 C123 188 134 176 143 170 C152 176 163 188 170 220 C152 210 134 210 116 220 Z" fill="%23FFFFFF" opacity=".06"/></svg>') bottom/100% 100% no-repeat}
.cta>*{position:relative}
.cta h2{color:#fff;font-size:clamp(1.5625rem,3vw,2.125rem);margin-bottom:var(--space-sm)}
.cta p{color:#DAE9E0}
.cta form{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.cta input{flex:1 1 220px;min-height:4.8rem;border:none;border-radius:var(--radius-full);padding:0 var(--space-xl);font:inherit;font-size:1.6rem}
@media(max-width:768px){.cta{grid-template-columns:1fr;padding:var(--space-2xl) var(--space-lg);background:linear-gradient(rgba(22,56,42,.94),rgba(22,56,42,.9)),url('/assets/img/cta.webp') center/cover no-repeat}}
html.a11y-contrast .cta{background:linear-gradient(150deg,rgba(2,20,28,.95),rgba(2,20,28,.92)),none #16382A}

/* ---------- Featured band (homepage, below hero) ---------- */
.featured-band{background:linear-gradient(180deg,var(--mist) 0%,#FAEFD9 22%,#FAEFD9 78%,var(--mist) 100%);padding:var(--space-2xl) 0}
.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
@media(max-width:768px){.featured-grid{grid-template-columns:1fr}}
.featured-card{border-left:4px solid var(--sand);box-shadow:8px 8px 0 rgba(232,163,61,.22);transition:transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out,border-left-color var(--transition-base) ease-out}
.featured-card:hover{border-left-color:var(--sand-dark);transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.featured-card:focus-visible{outline:3px solid var(--sand);outline-offset:2px}

/* ---------- Listing detail page ---------- */
.listing-head{padding-bottom:80px}
.crumbs{display:flex;gap:var(--space-sm);align-items:center;font-size:0.875rem;margin-bottom:var(--space-lg)}
.crumbs a{color:#C7E2EA;text-decoration:none;font-weight:600}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{color:#7FA9B5}
.listing-head .lede{font-size:clamp(1.0625rem,2vw,1.25rem);color:#E4F0F3;max-width:56ch;margin-top:var(--space-md)}
.chip-row{display:flex;gap:var(--space-sm);flex-wrap:wrap;list-style:none;margin-top:var(--space-xl)}
.chip{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:3.6rem;padding:var(--space-xs) var(--space-lg);border-radius:var(--radius-full);font-size:0.875rem;font-weight:600;text-decoration:none;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px);transition:background var(--transition-base) ease-out,transform var(--transition-base) ease-out}
a.chip:hover{background:rgba(255,255,255,.26);transform:translateY(-5px)}
a.chip:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.chip-place{background:var(--sand);color:#231604;border-color:transparent}
.listing-page{padding-top:var(--space-2xl)}
.listing-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--space-2xl);align-items:start}
@media(max-width:768px){.listing-grid{grid-template-columns:1fr}}
.sub-head{font-size:clamp(1.5rem,2.8vw,1.875rem);margin-bottom:var(--space-lg)}
.sub-head::after{content:"";display:block;width:44px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--sand),var(--forest));margin-top:var(--space-sm)}
.prose{font-size:1.0625rem;line-height:1.75;max-width:65ch}
.prose.muted{color:var(--ink-soft)}
.own-this{margin-top:var(--space-2xl);background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--sand);border-radius:var(--radius-sm);padding:var(--space-xl) var(--space-2xl);display:grid;gap:var(--space-lg);justify-items:start;transition:border-color var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.own-this:focus-within{border-color:var(--ocean);box-shadow:var(--shadow-lift)}
.own-this p{color:var(--ink-soft)}
.contact-card{position:sticky;top:94px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-2xl);box-shadow:var(--shadow);transition:border-color var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.contact-card:focus-within{border-color:var(--ocean);box-shadow:var(--shadow-lift)}
.contact-card::before{content:"";display:block;height:5px;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--ocean),var(--forest) 55%,var(--sand));margin:-var(--space-sm) 0 var(--space-xl)}
.contact-rows{list-style:none;display:grid;gap:var(--space-lg)}
.contact-rows li{display:flex;gap:var(--space-lg);align-items:flex-start}
.c-icon{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-md);background:linear-gradient(150deg,#E7F1F4,#F4F7F8);border:1px solid var(--line);color:var(--ocean)}
.c-body{display:grid;gap:2px;font-size:0.96875rem;word-break:break-word;padding-top:1px}
.c-label{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.c-body a{font-weight:600}
.contact-cta{width:100%;justify-content:center;margin-top:var(--space-xl)}
.listing-map{height:260px;border-radius:var(--radius-sm);border:1px solid var(--line);margin-top:var(--space-xl);z-index:0}
.listing-map:focus-within{outline:3px solid var(--sand);outline-offset:var(--space-sm)}
.map-links{margin-top:var(--space-sm);font-size:0.90625rem}
.map-links a{font-weight:600}

/* ---------- Upgrade / pricing ---------- */
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);margin-bottom:var(--space-2xl)}
@media(max-width:768px){.tier-grid{grid-template-columns:1fr}}
.tier-card{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow);display:grid;gap:var(--space-lg);align-content:start}
.tier-best{border-color:var(--sand);border-width:2px;box-shadow:var(--shadow-lift)}
.tier-flag{position:absolute;top:-1.4rem;left:2.4rem;background:linear-gradient(180deg,#F0B355,var(--sand));color:#231604;font-size:0.78125rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-full);padding:var(--space-xs) var(--space-lg)}
.tier-card h2{font-size:1.625rem}
.tier-price{font-family:'Fraunces',Georgia,serif;font-size:1.875rem;color:var(--ocean);font-variant-numeric:tabular-nums;margin-bottom:-0.5rem}
.tier-alt{font-size:0.90625rem;color:var(--ink-soft)}
.tier-per{font-size:1rem;color:var(--ink-soft);font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif}
.tier-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.tier-grid-3{grid-template-columns:1fr}}

/* Plan comparison chart (pricing page) */
.compare{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.compare th,.compare td{padding:0.8125rem var(--space-lg);text-align:center;border-bottom:1px solid var(--line);font-size:0.9375rem}
.compare thead th{background:var(--ocean);color:#fff;font-size:0.96875rem}
.compare thead th:last-child{background:linear-gradient(180deg,#136079,var(--ocean));position:relative}
.compare tbody th{text-align:left;font-weight:600;color:var(--ink)}
.compare tbody tr:nth-child(even){background:var(--mist)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
.compare td:last-child{background:rgba(232,163,61,.08)}
.cmp-yes{color:var(--forest);font-weight:700;font-size:17px}
.cmp-no{color:#8A9BA3}
.tier-alt strong{color:var(--forest)}
.pp-label{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:-0.375rem}
.tier-list{list-style:none;display:grid;gap:var(--space-sm);color:var(--ink-soft)}
.tier-list li{padding-left:26px;position:relative}
.tier-list li::before{content:"✓";position:absolute;left:2px;color:var(--forest);font-weight:700}
.pp-btn{margin-top:var(--space-xs);min-height:48px}
.pay-note{color:var(--ink-soft);font-size:0.9375rem;max-width:64ch;margin-top:var(--space-lg)}

/* ---------- Admin ---------- */
.admin-nav{background:var(--ocean-deep);border-bottom:3px solid var(--sand)}
.admin-nav ul{display:flex;gap:2px;list-style:none;align-items:center;overflow-x:auto}
.admin-nav a,.admin-nav .linklike{display:inline-flex;align-items:center;min-height:4.8rem;padding:var(--space-sm) var(--space-lg);color:#C7DDE4;text-decoration:none;font-weight:600;font-size:0.9375rem;background:none;border:none;cursor:pointer;font-family:inherit}
.admin-nav a:hover,.admin-nav .linklike:hover{color:#fff}
.admin-nav a[aria-current]{color:#fff;box-shadow:inset 0 -3px 0 var(--sand)}
.admin-nav-end{margin-left:auto}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-lg)}
.stat{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-xl);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out,border-color var(--transition-base) ease-out}
a.stat:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
a.stat:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.stat strong{display:block;font-family:'Fraunces',Georgia,serif;font-size:2.125rem;font-variant-numeric:tabular-nums}
.stat span{color:var(--ink-soft);font-size:0.90625rem}
.stat-alert{border-color:var(--sand);border-width:2px}
a.stat:hover{border-color:var(--ocean)}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:border-color var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.table-wrap:focus-within{border-color:var(--ocean);box-shadow:var(--shadow-lift)}
.admin-table{width:100%;border-collapse:collapse;font-size:0.9375rem}
.admin-table th{text-align:left;padding:var(--space-lg) var(--space-lg);border-bottom:2px solid var(--line);font-size:0.8125rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.admin-table td{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--line);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--mist)}
.row-actions{display:flex;gap:var(--space-lg);align-items:center;white-space:nowrap}
.row-actions form{display:inline}
.linklike{background:none;border:none;padding:var(--space-xs) 0;min-height:32px;font:inherit;font-weight:600;color:var(--ocean);cursor:pointer;text-decoration:underline;transition:color var(--transition-base) ease-out}
.linklike:hover{color:var(--ocean-dark)}
.linklike:focus-visible{outline:3px solid var(--sand);outline-offset:2px;border-radius:var(--radius-sm)}
.linklike.danger{color:var(--danger)}
.linklike.approve{color:var(--forest)}
.status{display:inline-block;font-size:12.5px;font-weight:700;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);text-transform:capitalize}
.status-published{background:#DCF3E8;color:#14532D}
.status-pending{background:#FDF0D9;color:#7A4E10}
.status-draft,.status-archived{background:#E8EEF1;color:#3D4F58}
.panel-form{display:grid;gap:var(--space-lg);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-2xl);box-shadow:var(--shadow);transition:border-color var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.panel-form:focus-within{border-color:var(--ocean);box-shadow:var(--shadow-lift)}
.field{display:grid;gap:var(--space-xs)}
.field label,.field legend{font-weight:700}
.field .hint,.panel-form .hint{font-weight:400;color:var(--ink-soft);font-size:0.875rem}
.field .req{color:var(--danger)}
.field input:not([type=checkbox]),.field select,.field textarea{width:100%;min-height:4.8rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font:inherit;background:#fff;color:var(--ink);transition:border-color var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out}
.field textarea{resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ocean)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ocean);box-shadow:0 0 0 3px color-mix(in srgb, var(--ocean) 15%, transparent)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
fieldset.field{border:none;padding:0;margin:0}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-sm)}
.check{display:flex;align-items:center;gap:var(--space-sm);font-weight:500;min-height:32px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--ocean)}
.form-error{background:#FBEAE8;border:1px solid #E5B3AD;color:#7C271C;border-radius:var(--radius-sm);padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-lg)}
.form-ok{background:#E9F3ED;border:1px solid #B5D4C2;color:#1E4A36;border-radius:var(--radius-sm);padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-lg)}

/* ---------- Admin message cards + in-panel replies ---------- */
.msg-list{display:grid;gap:var(--space-lg);max-width:820px}
.msg-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-xl);box-shadow:var(--shadow);transition:transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out,border-color var(--transition-base) ease-out}
.msg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.msg-card:focus-within{border-color:var(--ocean);box-shadow:var(--shadow-lift)}
.msg-head{display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-sm)}
.msg-email{display:block;font-size:0.84375rem;color:var(--ink-soft)}
.msg-meta{display:flex;align-items:center;gap:var(--space-sm);font-size:0.84375rem;color:var(--ink-soft)}
.msg-body{color:var(--ink);line-height:1.6;margin-bottom:var(--space-lg)}
.chip-replied{background:#E9F3ED;border:1px solid #B5D4C2;color:#1E4A36;font-size:0.75rem;font-weight:700;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);white-space:nowrap}
.msg-replies{display:grid;gap:var(--space-sm);margin-bottom:var(--space-lg)}
.msg-reply{background:var(--mist);border-left:3px solid var(--forest);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:var(--space-md) var(--space-lg);font-size:0.90625rem;line-height:1.6}
.msg-reply-meta{font-size:0.78125rem;font-weight:700;color:var(--forest);margin-bottom:var(--space-xs)}
.reply-box{margin-bottom:var(--space-md)}
.reply-box summary{cursor:pointer;font-weight:700;color:var(--ocean);padding:var(--space-xs) 0;list-style-position:inside;transition:color var(--transition-base) ease-out;border-radius:var(--radius-sm)}
.reply-box summary:hover{text-decoration:underline;color:var(--ocean-dark)}
.reply-box summary:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.reply-form{display:grid;gap:var(--space-sm);margin-top:var(--space-sm)}
.reply-form textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-md) var(--space-lg);font:inherit;min-height:120px;resize:vertical}
.reply-form textarea:hover,.reply-form textarea:focus{border-color:var(--ocean)}
.reply-form .btn{justify-self:start}
.msg-actions{display:flex;gap:var(--space-lg);border-top:1px solid var(--line);padding-top:var(--space-md)}

/* ---------- Footer ---------- */
footer.site{position:relative;background-color:var(--ocean-deep);background-image:linear-gradient(180deg,rgba(6,42,56,.35) 0%,rgba(6,42,56,.5) 22%,rgba(6,42,56,.93) 46%,rgba(6,42,56,.95) 100%),url('/assets/img/footer.webp');background-position:center 30%;background-size:cover;background-repeat:no-repeat;color:#C6DCE4;padding:var(--space-4xl) 0 var(--space-2xl);font-size:0.90625rem;overflow:hidden}
html.a11y-contrast footer.site{background-image:none}
footer.site::before{content:"";position:absolute;inset:0 0 auto 0;height:12rem;background:
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0 40 C240 90 480 10 720 45 C960 80 1200 20 1440 55 L1440 0 L0 0 Z" fill="%23F4F7F8"/></svg>') top/100% 100% no-repeat}
footer.site .wrap{position:relative;padding-top:15rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-2xl);margin-bottom:var(--space-2xl)}
footer.site h2{color:#fff;font-family:'Atkinson Hyperlegible','Inter',system-ui,sans-serif;font-size:0.875rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-lg)}
footer.site ul{list-style:none}
footer.site li{margin-bottom:var(--space-sm)}
footer.site a{color:#C6DCE4;text-decoration:none;display:inline-block;padding:2px 0;min-height:28px;background:linear-gradient(currentColor,currentColor) left bottom/0 1.5px no-repeat;transition:color var(--transition-base) ease-out,background-size var(--transition-base) ease-out}
footer.site a:hover{color:#fff;background-size:100% 1.5px}
footer.site a:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.foot-bottom{border-top:1px solid #14455A;padding-top:var(--space-xl);display:flex;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap}
@media(max-width:768px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ---------- How-it-works steps ---------- */
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-bottom:var(--space-2xl)}
.howto-step{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-lg)}
.howto-num{display:inline-flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--ocean);color:#fff;font-weight:700;font-size:1rem;margin-bottom:var(--space-sm)}
.howto-step h3{font-size:1.03125rem;margin-bottom:var(--space-xs);color:var(--ink)}
.howto-step p{font-size:0.90625rem;color:var(--ink-soft);line-height:1.55}
@media(max-width:768px){.howto{grid-template-columns:1fr}}

/* ---------- DARK MODE SUPPORT (prefers-color-scheme: dark) ---------- */
@media (prefers-color-scheme: dark){
  :root{
    /* Dark mode color tokens — maintain WCAG AA contrast (4.5:1 normal, 3:1 large text/UI) */
    --color-ocean: hsl(201, 50%, 52%);
    --color-ocean-light: hsl(201, 60%, 62%);
    --color-ocean-dark: hsl(202, 45%, 38%);
    --color-ocean-deep: hsl(203, 48%, 28%);

    --color-forest: hsl(148, 38%, 48%);
    --color-forest-dark: hsl(148, 35%, 38%);

    --color-gold: hsl(42, 85%, 60%);
    --color-gold-dark: hsl(40, 80%, 50%);
    --color-dusk: hsl(41, 92%, 68%);

    --color-surface: hsl(211, 25%, 14%);
    --color-mist: hsl(211, 28%, 10%);
    --color-ink: hsl(210, 18%, 92%);
    --color-ink-soft: hsl(208, 15%, 72%);
    --color-line: hsl(210, 20%, 28%);

    --color-success: hsl(160, 75%, 48%);
    --color-danger: hsl(12, 75%, 55%);
  }

  body{
    background:var(--mist);
    color:var(--ink)
  }

  /* Text and links adapt naturally from new :root vars */
  a{color:var(--ocean-light)}
  h1,h2,h3{color:var(--ink)}

  /* Nav — dark mode treatment */
  header.site{
    background:rgba(15,20,25,.95);
    border-bottom-color:var(--line)
  }
  header.site::before{
    background:linear-gradient(90deg,var(--ocean-light),var(--forest) 50%,var(--gold))
  }

  nav a.navlink{
    color:var(--ink-soft)
  }
  nav a.navlink:hover{
    color:var(--ink)
  }
  nav a.navlink::after{
    background:linear-gradient(90deg,var(--gold),var(--forest))
  }
  nav a.navlink[aria-current]{
    color:var(--ocean-light);
    box-shadow:inset 0 -3px 0 var(--gold)
  }

  .a11y-btn{
    background:none;
    border-color:var(--line);
    color:var(--ink)
  }
  .a11y-btn:hover{
    background:rgba(255,255,255,.08);
    border-color:var(--ocean-light)
  }
  .a11y-btn[aria-expanded="true"]{
    background:var(--ocean);
    color:#fff;
    border-color:var(--ocean)
  }

  .a11y-panel{
    background:var(--color-surface);
    border-color:var(--line)
  }
  .a11y-panel legend{
    color:var(--ink)
  }
  .a11y-panel label{
    color:var(--ink)
  }
  .a11y-panel input[type=radio],.a11y-panel input[type=checkbox]{
    accent-color:var(--ocean-light)
  }

  /* Hero section */
  .hero{
    background:linear-gradient(180deg,#062536 0%,#083545 45%,#0a4659 100%)
  }
  .hero-scrim{
    background:linear-gradient(105deg,rgba(6,42,56,.92) 0%,rgba(6,42,56,.75) 42%,rgba(6,42,56,.4) 72%,rgba(6,42,56,.25) 100%),linear-gradient(180deg,rgba(6,42,56,0) 60%,rgba(6,42,56,.6) 100%)
  }
  .kicker{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.15);
    color:#e8ecf0
  }

  .search{
    background:var(--color-surface);
    border:1px solid var(--line);
    box-shadow:0 12px 40px rgba(0,0,0,.6)
  }
  .search input,.search select{
    color:var(--ink);
    background:transparent
  }
  .search select{
    border-left-color:var(--line)
  }
  .search:focus-within{
    outline-color:var(--gold)
  }

  /* Page header (inner pages) */
  .page-head{
    background:linear-gradient(170deg,#0a3d52,#0d4d62 70%,#0f5570)
  }

  .hero::after,.page-head::after{
    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 110" preserveAspectRatio="none"><path d="M0 70 C240 110 480 20 720 45 C960 70 1200 105 1440 55 L1440 110 L0 110 Z" fill="%230f1419"/></svg>') bottom/100% 100% no-repeat
  }

  .page-head::after{
    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0 38 C240 60 480 12 720 25 C960 38 1200 57 1440 30 L1440 60 L0 60 Z" fill="%230f1419"/></svg>') bottom/100% 100% no-repeat
  }

  /* Buttons */
  .btn-primary{
    background:linear-gradient(180deg,#f0d566,#e8c447);
    color:#231604;
    box-shadow:0 var(--space-sm) 10px rgba(232,163,61,.3)
  }
  .btn-primary:hover{
    background:color-mix(in srgb, #f0d566 60%, #d6a820 40%)
  }

  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border-color:rgba(255,255,255,.3)
  }
  .btn-ghost:hover{
    background:color-mix(in srgb, transparent, rgba(255,255,255,.18));
    border-color:rgba(255,255,255,.8)
  }

  .btn-outline{
    background:transparent;
    color:var(--ocean-light);
    border-color:var(--ocean-light)
  }
  .btn-outline:hover{
    background:color-mix(in srgb, var(--ocean-light) 8%, transparent);
    color:var(--ocean-light)
  }

  .btn-solid{
    background:var(--ocean);
    color:#fff;
    box-shadow:0 var(--space-sm) 10px rgba(127,179,204,.3)
  }
  .btn-solid:hover{
    background:color-mix(in srgb, var(--ocean) 80%, var(--ocean-light) 20%)
  }

  :focus-visible{
    outline-color:var(--gold)
  }

  ::placeholder{
    color:#7a8a94
  }

  .skip{
    background:var(--ink);
    color:var(--mist)
  }

  /* Region cards */
  .region{
    color:#f0f4f7;
    box-shadow:0 2px 8px rgba(0,0,0,.5)
  }
  .region:hover{
    box-shadow:var(--shadow-lift)
  }

  .r1{background:linear-gradient(150deg,#1a6a8a,#0d3d52)}
  .r2{background:linear-gradient(150deg,#3a7a5a,#1e4a36)}
  .r3{background:linear-gradient(150deg,#4a7a9a,#2a5070)}
  .r4{background:linear-gradient(150deg,#608a6a,#35573f)}
  .r5{background:linear-gradient(150deg,#8a704a,#54402a)}
  .r6{background:linear-gradient(150deg,#3a704a,#1e3a2f)}

  /* Category cards */
  .cat{
    background:var(--color-surface);
    border-color:var(--line);
    color:var(--ink);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .cat:hover{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }

  .cat-icon{
    background:linear-gradient(150deg,rgba(127,179,204,.15),rgba(127,179,204,.08));
    color:var(--ocean-light);
    border-color:var(--line)
  }
  .grid-cats .cat:nth-child(4n+2) .cat-icon{
    color:var(--forest);
    background:linear-gradient(150deg,rgba(90,148,113,.15),rgba(90,148,113,.08))
  }
  .grid-cats .cat:nth-child(4n+3) .cat-icon{
    color:var(--gold);
    background:linear-gradient(150deg,rgba(232,196,71,.15),rgba(232,196,71,.08))
  }
  .grid-cats .cat:nth-child(4n) .cat-icon{
    color:var(--ocean-light);
    background:linear-gradient(150deg,rgba(127,179,204,.15),rgba(127,179,204,.08))
  }
  .cat:hover .cat-icon{
    background:linear-gradient(150deg,var(--ocean),#0d4d62)!important;
    color:#fff!important;
    border-color:var(--ocean)
  }

  .cat small{
    color:var(--ink-soft)
  }

  /* Events */
  .events-band{
    background:var(--color-surface) radial-gradient(rgba(127,179,204,.08) 1.5px,transparent 1.5px);
    background-size:22px 22px;
    border-color:var(--line)
  }
  .events-band .event{
    background:var(--color-surface)
  }

  .event{
    background:rgba(30,42,51,.8);
    border-color:var(--line);
    color:var(--ink);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .event:hover{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }

  .date{
    background:linear-gradient(170deg,#0d4d62,var(--color-ocean-dark));
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1)
  }
  .event:hover .date{
    background:linear-gradient(170deg,#f0d566,#e8c447);
    color:#231604
  }

  .event h3{
    color:var(--ink)
  }
  .event p{
    color:var(--ink-soft)
  }

  /* Weekend band */
  .weekend-band{
    background:linear-gradient(150deg,#1a4a5a,#0f2d3a);
    border-color:var(--line);
    color:var(--ink)
  }
  .weekend-band .event-card{
    border-color:var(--line)
  }

  /* Event cards */
  .event-card{
    background:var(--color-surface);
    border-color:var(--line);
    color:var(--ink);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .event-card:hover{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }
  .event-card:hover .date{
    background:linear-gradient(170deg,#f0d566,#e8c447);
    color:#231604
  }

  .ev-when{
    color:var(--ocean-light)
  }
  .ev-region{
    color:var(--ink-soft)
  }
  .chip-now{
    background:var(--forest);
    color:#fff
  }

  .ev-notice{
    background:rgba(188,71,55,.15);
    border-color:rgba(188,71,55,.4);
    color:#ffb3a8
  }

  .event-card h3 a{
    color:var(--ink)
  }
  .event-card h3 a:hover{
    color:var(--ocean-light)
  }

  .event-card .sum{
    color:var(--ink-soft)
  }
  .ev-meta{
    border-top-color:var(--line);
    color:var(--ink-soft)
  }
  .ev-meta .go{
    color:var(--gold)
  }

  .event-card.is-featured{
    border-color:var(--gold);
    box-shadow:6px 6px 0 rgba(232,196,71,.12)
  }
  .event-card.is-featured:hover{
    box-shadow:8px 8px 0 rgba(232,196,71,.18)
  }

  /* Listing rows */
  .listing-row{
    background:var(--color-surface);
    border-color:var(--line);
    color:var(--ink);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .listing-row::after{
    color:var(--gold)
  }
  .listing-row:hover{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }

  .listing-row h3{
    color:var(--ink)
  }
  .listing-row p{
    color:var(--ink-soft)
  }

  /* Business cards */
  .biz-card{
    background:var(--color-surface);
    border-color:var(--line);
    color:var(--ink);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .biz-card:hover{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }

  .biz-mono{
    background:linear-gradient(150deg,rgba(127,179,204,.15),rgba(127,179,204,.08));
    color:var(--ocean-light);
    border-color:var(--line)
  }
  .biz-grid>:nth-child(4n+2) .biz-mono{
    color:var(--forest);
    background:linear-gradient(150deg,rgba(90,148,113,.15),rgba(90,148,113,.08))
  }
  .biz-grid>:nth-child(4n+3) .biz-mono{
    color:var(--gold);
    background:linear-gradient(150deg,rgba(232,196,71,.15),rgba(232,196,71,.08))
  }
  .biz-grid>:nth-child(4n) .biz-mono{
    color:var(--ocean-light);
    background:linear-gradient(150deg,rgba(127,179,204,.15),rgba(127,179,204,.08))
  }

  .biz-card h3{
    color:var(--ink)
  }
  .biz-card .sum{
    color:var(--ink-soft)
  }
  .biz-meta{
    border-top-color:var(--line);
    color:var(--ink-soft)
  }
  .biz-meta .go{
    color:var(--gold)
  }

  .biz-card.is-featured{
    border-color:var(--gold);
    box-shadow:6px 6px 0 rgba(232,196,71,.12)
  }
  .biz-card.is-featured:hover{
    box-shadow:8px 8px 0 rgba(232,196,71,.18)
  }

  .biz-photo{
    border-bottom-color:var(--line)
  }

  /* Listing gallery */
  .listing-gallery img{
    border-color:var(--line)
  }

  /* Photo manager */
  .photo-manager li{
    background:rgba(30,42,51,.8);
    border-color:var(--line)
  }
  .photo-alt input{
    border-color:var(--line);
    background:transparent;
    color:var(--ink)
  }

  /* Sponsor card */
  .sponsor-card{
    background:var(--color-surface);
    border-color:var(--line);
    border-left-color:var(--ocean);
    box-shadow:0 2px 6px rgba(0,0,0,.4);
    transition:transform var(--transition-base) ease-out,box-shadow var(--transition-base) ease-out
  }
  .sponsor-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lift)
  }
  .sponsor-img{
    border-color:var(--line)
  }
  .sponsor-tag{
    color:var(--ink-soft)
  }
  .sponsor-head{
    color:var(--ink)
  }
  .sponsor-text{
    color:var(--ink-soft)
  }
  .sponsor-house{
    border-color:#4a6a7a;
    border-left-color:var(--gold);
    background:linear-gradient(150deg,rgba(232,196,71,.08),var(--color-surface))
  }

  /* Spotlight band */
  .spotlight-band{
    background:linear-gradient(150deg,#1e3a2a,#1a2a3a);
    border-color:var(--line)
  }
  .spotlight-band .biz-card{
    border-color:var(--line)
  }

  /* Region/category furniture */
  .count-pill{
    background:rgba(127,179,204,.1);
    border-color:var(--line);
    color:var(--ocean-light)
  }
  .region-intro{
    color:var(--ink-soft);
    border-left-color:var(--gold)
  }
  .badge{
    background:linear-gradient(180deg,#f0d566,#e8c447);
    color:#231604;
    box-shadow:2px 2px 0 rgba(0,0,0,.3)
  }
  .empty-state{
    background:var(--color-surface);
    border-color:var(--line);
    color:var(--ink-soft)
  }

  /* CTA section */
  .cta{
    background:linear-gradient(100deg,rgba(22,56,42,.9) 0%,rgba(22,56,42,.85) 56%,rgba(22,56,42,.4) 74%,rgba(22,56,42,.15) 100%),url('/assets/img/cta.webp') center/cover no-repeat;
    color:#fff;
    box-shadow:12px 12px 0 rgba(47,107,79,.15),0 4px 12px rgba(0,0,0,.5)
  }
  .cta h2{
    color:#fff
  }
  .cta p{
    color:#c0dcd0
  }
  .cta input{
    background:var(--color-surface);
    color:var(--ink);
    border-color:var(--line)
  }

  /* Featured band */
  .featured-band{
    background:linear-gradient(180deg,var(--mist) 0%,#1a3a3a 22%,#1a3a3a 78%,var(--mist) 100%)
  }
  .featured-card{
    border-left-color:var(--gold);
    box-shadow:8px 8px 0 rgba(232,196,71,.12)
  }
  .featured-card:hover{
    border-left-color:var(--gold);
    box-shadow:var(--shadow-lift)
  }

  /* Section headers */
  .eyebrow{
    color:#c8a448
  }

  /* Listing detail page */
  .crumbs a{
    color:#a8c4d0;
    text-decoration:none
  }
  .crumbs a:hover{
    color:#e8ecf0;
    text-decoration:underline
  }
  .crumbs span{
    color:#7a8a9a
  }
  .listing-head .lede{
    color:#d0e0e8
  }
  .chip{
    background:rgba(255,255,255,.12);
    color:#f0f4f7;
    border-color:rgba(255,255,255,.25)
  }
  .chip:hover{
    background:rgba(255,255,255,.22)
  }
  .chip-place{
    background:var(--gold);
    color:#231604;
    border-color:transparent
  }

  .sub-head{
    color:var(--ink)
  }
  .prose{
    color:var(--ink)
  }
  .prose.muted{
    color:var(--ink-soft)
  }
  .own-this{
    background:var(--color-surface);
    border-color:var(--line);
    border-left-color:var(--gold);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .own-this:focus-within{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }
  .own-this p{
    color:var(--ink-soft)
  }

  .contact-card{
    background:var(--color-surface);
    border-color:var(--line);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .contact-card:focus-within{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }
  .contact-card::before{
    background:linear-gradient(90deg,var(--ocean),var(--forest) 55%,var(--gold))
  }

  .c-icon{
    background:linear-gradient(150deg,rgba(127,179,204,.15),rgba(127,179,204,.08));
    border-color:var(--line);
    color:var(--ocean-light)
  }
  .c-body{
    color:var(--ink)
  }
  .c-label{
    color:var(--ink-soft)
  }
  .c-body a{
    color:var(--ocean-light)
  }

  .listing-map{
    border-color:var(--line)
  }
  .map-links a{
    color:var(--ocean-light)
  }

  /* Pricing/upgrade */
  .tier-card{
    background:var(--color-surface);
    border-color:var(--line);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .tier-best{
    border-color:var(--gold);
    box-shadow:var(--shadow-lift)
  }
  .tier-flag{
    background:linear-gradient(180deg,#f0d566,#e8c447);
    color:#231604
  }
  .tier-card h2{
    color:var(--ink)
  }
  .tier-price{
    color:var(--ocean-light)
  }
  .tier-alt{
    color:var(--ink-soft)
  }
  .tier-per{
    color:var(--ink-soft)
  }

  /* Pricing comparison table */
  .compare{
    background:var(--color-surface);
    border-color:var(--line);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .compare th,.compare td{
    border-bottom-color:var(--line)
  }
  .compare thead th{
    background:var(--ocean);
    color:#fff
  }
  .compare thead th:last-child{
    background:linear-gradient(180deg,#0d4d62,var(--color-ocean-dark))
  }
  .compare tbody th{
    color:var(--ink)
  }
  .compare tbody tr:nth-child(even){
    background:rgba(30,42,51,.6)
  }
  .compare tbody tr:last-child th,.compare tbody tr:last-child td{
    border-bottom-color:transparent
  }
  .compare td:last-child{
    background:rgba(232,196,71,.08)
  }
  .cmp-yes{
    color:var(--forest)
  }
  .cmp-no{
    color:#7a8a9a
  }
  .tier-alt strong{
    color:var(--forest)
  }
  .pp-label{
    color:var(--ink-soft)
  }
  .tier-list{
    color:var(--ink-soft)
  }
  .tier-list li::before{
    color:var(--forest)
  }
  .pay-note{
    color:var(--ink-soft)
  }

  /* Admin panel */
  .admin-nav{
    background:var(--color-ocean-deep);
    border-bottom-color:var(--gold)
  }
  .admin-nav a,.admin-nav .linklike{
    color:#a8c4d0
  }
  .admin-nav a:hover,.admin-nav .linklike:hover{
    color:#fff
  }
  .admin-nav a[aria-current]{
    color:#fff;
    box-shadow:inset 0 -3px 0 var(--gold)
  }

  .stat{
    background:var(--color-surface);
    border-color:var(--line);
    color:var(--ink);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .stat strong{
    color:var(--ink)
  }
  .stat span{
    color:var(--ink-soft)
  }
  .stat-alert{
    border-color:var(--gold)
  }
  a.stat:hover{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }

  .table-wrap{
    background:var(--color-surface);
    border-color:var(--line);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .table-wrap:focus-within{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }
  .admin-table th{
    border-bottom-color:var(--line);
    color:var(--ink-soft)
  }
  .admin-table td{
    border-bottom-color:var(--line);
    color:var(--ink)
  }
  .admin-table tr:last-child td{
    border-bottom-color:transparent
  }
  .admin-table tr:hover td{
    background:rgba(127,179,204,.08)
  }

  .linklike{
    color:var(--ocean-light)
  }
  .linklike.danger{
    color:var(--danger)
  }
  .linklike.approve{
    color:var(--forest)
  }

  .status-published{
    background:rgba(90,148,113,.2);
    color:#7fbfa0
  }
  .status-pending{
    background:rgba(232,196,71,.15);
    color:#f0d566
  }
  .status-draft,.status-archived{
    background:rgba(127,179,204,.12);
    color:#a8c4d0
  }

  /* Forms */
  .panel-form{
    background:var(--color-surface);
    border-color:var(--line);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .panel-form:focus-within{
    border-color:var(--ocean-light);
    box-shadow:var(--shadow-lift)
  }
  .field label,.field legend{
    color:var(--ink)
  }
  .field .hint,.panel-form .hint{
    color:var(--ink-soft)
  }
  .field .req{
    color:var(--danger)
  }
  .field input:not([type=checkbox]),.field select,.field textarea{
    border-color:var(--line);
    background:rgba(255,255,255,.05);
    color:var(--ink)
  }
  .field input:hover,.field select:hover,.field textarea:hover{
    border-color:var(--ocean-light)
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    border-color:var(--ocean-light);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--ocean-light) 15%, transparent)
  }

  .form-error{
    background:rgba(188,71,55,.15);
    border-color:rgba(188,71,55,.4);
    color:#ffb3a8
  }
  .form-ok{
    background:rgba(90,148,113,.15);
    border-color:rgba(90,148,113,.4);
    color:#7fbfa0
  }

  /* Messages */
  .msg-card{
    background:var(--color-surface);
    border-color:var(--line);
    box-shadow:0 2px 6px rgba(0,0,0,.4)
  }
  .msg-card:hover{
    box-shadow:var(--shadow-md)
  }
  .msg-email{
    color:var(--ink-soft)
  }
  .msg-meta{
    color:var(--ink-soft)
  }
  .msg-body{
    color:var(--ink)
  }

  .chip-replied{
    background:rgba(90,148,113,.15);
    border-color:rgba(90,148,113,.4);
    color:#7fbfa0
  }

  .msg-reply{
    background:rgba(127,179,204,.08);
    border-left-color:var(--ocean-light);
    color:var(--ink)
  }
  .msg-reply-meta{
    color:var(--ocean-light)
  }

  .reply-box summary{
    color:var(--ocean-light)
  }
  .reply-box summary:hover{
    color:var(--ocean-light);
    text-decoration:underline
  }
  .reply-form textarea{
    border-color:var(--line);
    background:rgba(255,255,255,.05);
    color:var(--ink)
  }
  .reply-form textarea:hover,.reply-form textarea:focus{
    border-color:var(--ocean-light)
  }

  .msg-actions{
    border-top-color:var(--line)
  }

  /* Footer */
  footer.site{
    background-color:var(--color-ocean-deep);
    background-image:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.5) 22%,rgba(0,0,0,.8) 46%,rgba(0,0,0,.9) 100%),url('/assets/img/footer.webp');
    background-position:center 30%;
    color:#a8c4d0
  }
  footer.site::before{
    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0 40 C240 90 480 10 720 45 C960 80 1200 20 1440 55 L1440 0 L0 0 Z" fill="%230f1419"/></svg>') top/100% 100% no-repeat
  }

  footer.site h2{
    color:#f0f4f7
  }
  footer.site a{
    color:#a8c4d0;
    background:linear-gradient(currentColor,currentColor) left bottom/0 1.5px no-repeat
  }
  footer.site a:hover{
    color:#f0f4f7;
    background-size:100% 1.5px
  }
  .foot-bottom{
    border-top-color:#1a4a5a
  }

  /* How-it-works steps */
  .howto-step{
    background:rgba(30,42,51,.8);
    border-color:var(--line)
  }
  .howto-num{
    background:var(--ocean);
    color:#fff
  }
  .howto-step h3{
    color:var(--ink)
  }
  .howto-step p{
    color:var(--ink-soft)
  }

  /* Shadows — darker base for dark mode */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.6);
  --shadow-xl: 0 12px 40px rgba(0,0,0,.7);

  /* High contrast mode adjustments for dark mode */
}

html.a11y-contrast{--ink:#000000;--ink-soft:#1E2A31;--line:#49606B;--ocean:#093A4C;--sand-dark:#8A5A0B}
@media (prefers-color-scheme: dark){
  html.a11y-contrast{
    --ink:#f0f4f7;
    --ink-soft:#c8d8e0;
    --line:#5a7a8a;
    --ocean:#7fb3cc;
    --sand-dark:#f0d566
  }
}

/* ========== Task #12: CSS Utility Patterns ========== */
/* Common flexbox & layout utilities with CSS custom properties */
:root{
  /* Flexbox utilities */
  --flex-center: flex;
  --flex-between: space-between;
  --flex-start: flex-start;
  --flex-end: flex-end;
  --flex-col: column;
  --flex-row: row;

  /* Gap utilities for common spacings */
  --gap-auto: auto;

  /* Centering helpers */
  --center-content: center;
  --center-items: center;
}

/* Utility classes for quick layout patterns (opt-in, no bloat) */
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.grid-cols-2{display:grid;grid-template-columns:1fr 1fr}
.gap-sm{gap:var(--space-sm)}
.gap-md{gap:var(--space-md)}
.gap-lg{gap:var(--space-lg)}

/* ========== Task #12: :has() Selector Support ========== */
/* Forms with validation state :has() selectors */
.field:has(input:invalid){
  --field-border-color: var(--danger);
}
.field:has(input:valid){
  --field-border-color: var(--color-success);
}
.field:has(input:focus){
  --field-border-color: var(--ocean);
}

/* Cards with hover/focus state transitions */
.event-card:has(.date:hover){
  border-color: var(--ocean);
}

.biz-card:has(a:focus-visible){
  border-color: var(--ocean);
}

/* Message cards with reply state */
.msg-card:has(.reply-box[open]){
  box-shadow: var(--shadow-lift);
}

/* ========== Task #13: PRINT STYLESHEET ========== */
@media print{
  /* Hide interactive elements */
  header.site,
  footer.site,
  nav,
  .menu-btn,
  .a11y-wrap,
  .a11y-panel,
  .skip,
  .btn,
  .nav-cta-mobile,
  .admin-nav,
  .page-navigation,
  [role="complementary"],
  aside,
  .sidebar{
    display: none !important;
  }

  /* Page setup */
  @page{
    margin: 2cm;
    orphans: 3;
    widows: 3;
  }

  /* Body and layout */
  body{
    background: #fff;
    color: #000;
    font-size: 12pt;
    line-height: 1.6;
  }

  /* Typography */
  h1,h2,h3,h4,h5,h6{
    page-break-after: avoid;
    orphans: 3;
    widows: 3;
    color: #000;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
  }

  h1{ font-size: 24pt; }
  h2{ font-size: 20pt; }
  h3{ font-size: 16pt; }

  p{
    page-break-inside: avoid;
    margin-bottom: 0.5em;
  }

  /* Links */
  a{
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #666;
  }
  a[href]::after{
    content: " (" attr(href) ")";
    font-size: 80%;
    color: #666;
  }

  /* Cards and boxes */
  .event-card,
  .biz-card,
  .listing-row,
  .region,
  .contact-card,
  .tier-card{
    page-break-inside: avoid;
    border: 1px solid #999;
    background: #fff;
    box-shadow: none;
    margin-bottom: 1em;
    padding: 1em;
  }

  /* Events page print styles */
  .event{
    page-break-inside: avoid;
    border: 1px solid #999;
    background: #fff;
    margin-bottom: 1em;
    padding: 1em;
  }

  .date{
    background: #f5f5f5 !important;
    color: #000 !important;
    border: 1px solid #999;
    width: 60px;
    height: auto;
    padding: 0.5em;
    text-align: center;
    margin-right: 1em;
    display: inline-block;
  }

  /* Listings page print styles */
  .listing-list{
    page-break-inside: avoid;
  }

  .listing-gallery{
    display: none;
  }

  /* Directory/listing detail */
  .listing-grid{
    grid-template-columns: 1fr;
    gap: 1em;
  }

  .contact-card{
    position: static;
    margin-top: 1em;
  }

  /* Business card print layout */
  .biz-card{
    border-left: 3px solid #333;
  }

  .biz-photo{
    display: none;
  }

  .biz-mono{
    background: #f5f5f5 !important;
    color: #000 !important;
    border: 1px solid #999;
  }

  /* Image optimization for print */
  img{
    max-width: 100%;
    height: auto;
    page-break-inside: avoid;
  }

  /* Hide decorative elements */
  .hero-scene,
  .hero-scrim,
  .region::before,
  .region::after,
  .page-head::before,
  .page-head::after,
  .cta::before,
  .footer-decoration,
  .bg-image{
    display: none !important;
  }

  /* Tables print friendly */
  table{
    width: 100%;
    border-collapse: collapse;
    page-break-inside: avoid;
  }

  th,
  td{
    border: 1px solid #999;
    padding: 0.5em;
    text-align: left;
  }

  thead{
    background: #f5f5f5;
    color: #000;
    font-weight: bold;
  }

  /* Spacing for readability */
  section{
    page-break-inside: avoid;
    margin-bottom: 2em;
  }

  /* Forms don't print well, hide submission elements */
  form,
  input[type="submit"],
  input[type="button"],
  button{
    display: none !important;
  }

  /* Code blocks */
  pre,
  code{
    background: #f5f5f5 !important;
    color: #000;
    border: 1px solid #999;
    page-break-inside: avoid;
  }
}

/* ========== Task #13: Improved Admin Interface ========== */
/* Admin nav enhanced with better visual hierarchy */
.admin-nav{
  background: var(--ocean-deep);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.admin-nav ul{
  display: flex;
  gap: 2px;
  list-style: none;
  align-items: stretch;
  overflow-x: auto;
  padding: 0;
  margin: 0;
}

.admin-nav a,
.admin-nav .linklike{
  display: inline-flex;
  align-items: center;
  min-height: 4.8rem;
  padding: var(--space-sm) var(--space-lg);
  color: #a8c4d0;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-base) ease-out,
              color var(--transition-base) ease-out,
              border-bottom-color var(--transition-base) ease-out;
  border-bottom: 3px solid transparent;
  position: relative;
}

.admin-nav a:hover,
.admin-nav .linklike:hover{
  color: #fff;
  background: rgba(255,255,255,0.05);
}

.admin-nav a[aria-current]{
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-bottom-color: var(--gold);
  font-weight: 700;
}

/* Admin stat cards with better hierarchy */
.stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.stat{
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform var(--transition-base) ease-out,
              box-shadow var(--transition-base) ease-out,
              border-color var(--transition-base) ease-out;
}

a.stat:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--ocean);
}

a.stat:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.stat strong{
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ocean);
  margin-bottom: var(--space-xs);
}

.stat span{
  color: var(--ink-soft);
  font-size: 0.90625rem;
  font-weight: 500;
}

.stat-alert{
  border-color: var(--gold);
  border-width: 2px;
}

/* Admin table with improved styling */
.table-wrap{
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: border-color var(--transition-base) ease-out,
              box-shadow var(--transition-base) ease-out;
}

.table-wrap:focus-within{
  border-color: var(--ocean);
  box-shadow: var(--shadow-lift);
}

.admin-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--surface);
}

.admin-table th{
  text-align: left;
  padding: var(--space-lg) var(--space-lg);
  border-bottom: 2px solid var(--line);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  background: rgba(0,0,0,0.02);
  font-weight: 700;
}

.admin-table td{
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
}

.admin-table tr:last-child td{
  border-bottom: none;
}

.admin-table tr:hover td{
  background: var(--mist);
}

/* Better row action links */
.row-actions{
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  white-space: nowrap;
}

.row-actions form{
  display: inline;
}

.linklike{
  background: none;
  border: none;
  padding: var(--space-xs) 0;
  min-height: 32px;
  font: inherit;
  font-weight: 600;
  color: var(--ocean);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-base) ease-out;
  position: relative;
}

.linklike:hover{
  color: var(--ocean-dark);
  text-decoration: underline;
}

.linklike:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.linklike.danger{
  color: var(--danger);
}

.linklike.danger:hover{
  color: #8a2a20;
}

.linklike.approve{
  color: var(--forest);
}

.linklike.approve:hover{
  color: var(--forest-dark);
}

/* Status badges with improved styling */
.status{
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  text-transform: capitalize;
  font-variant: small-caps;
}

.status-published{
  background: linear-gradient(180deg, #e8f5e9, #f1f8f6);
  color: #1b5e20;
  border: 1px solid #81c784;
}

.status-pending{
  background: linear-gradient(180deg, #fff8e1, #fffde7);
  color: #7a4e10;
  border: 1px solid #ffd54f;
}

.status-draft,
.status-archived{
  background: linear-gradient(180deg, #eceff1, #f5f5f5);
  color: #37474f;
  border: 1px solid #90a4ae;
}