/* ===== base.css — reset + tokens ===== */
:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.75rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Coastal palette — LIGHT */
  --color-bg: #fbfaf6;          /* warm sand white */
  --color-surface: #ffffff;
  --color-surface-2: #f4f1ea;   /* soft sand */
  --color-border: #e6e0d4;
  --color-text: #16323b;        /* deep harbor ink */
  --color-text-muted: #5c6b70;
  --color-text-faint: #9aa5a8;
  --color-text-inverse: #fbfaf6;

  --color-primary: #0d6a7c;     /* harbor teal */
  --color-primary-hover: #0a5361;
  --color-deep: #0d3644;        /* deep navy-teal */
  --color-aqua: #52b6c4;        /* bright aqua accent */
  --color-gold: #c99a4e;        /* warm brass/gold */
  --color-gold-hover: #b3853c;
  --color-sand: #e9e0cd;

  --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem;
  --radius-xl: 1.5rem; --radius-full: 9999px;

  --transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 3px rgba(13,54,68,.06);
  --shadow-md: 0 8px 24px rgba(13,54,68,.10);
  --shadow-lg: 0 24px 60px rgba(13,54,68,.16);

  --content: 1180px;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Switzer', 'Helvetica Neue', system-ui, sans-serif;

  --header-h: 74px;
}

[data-theme="dark"] {
  --color-bg: #0b1e24;
  --color-surface: #10272e;
  --color-surface-2: #14303a;
  --color-border: #23444e;
  --color-text: #e7eef0;
  --color-text-muted: #9db1b6;
  --color-text-faint: #6a8087;
  --color-text-inverse: #0b1e24;

  --color-primary: #4fb5c6;
  --color-primary-hover: #6cc6d5;
  --color-deep: #071519;
  --color-aqua: #6cc6d5;
  --color-gold: #d8ac63;
  --color-gold-hover: #e4bd7c;
  --color-sand: #1c3941;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
}

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

html {
  -webkit-text-size-adjust: none; text-size-adjust: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  min-height: 100dvh;
  line-height: 1.65;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 { text-wrap: balance; line-height: 1.1; font-family: var(--font-display); font-weight: 500; }
p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

::selection { background: color-mix(in oklab, var(--color-aqua) 30%, transparent); color: var(--color-text); }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

button { cursor: pointer; background: none; border: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.sr-only:focus {
  position: fixed; top: var(--space-3); left: var(--space-3); width: auto; height: auto;
  padding: var(--space-2) var(--space-4); clip: auto; background: var(--color-primary);
  color: #fff; border-radius: var(--radius-sm); z-index: 999;
}

.wrap { width: min(var(--content), 100% - 2.5rem); margin-inline: auto; }