/*
  Les Lewis Consulting, shared base styles.
  Loaded on every page: design tokens, the tap-feedback reset, and the
  reduced-motion override. Cached once by the browser instead of being
  re-downloaded and re-parsed as inline CSS on every page navigation.
*/

/* Self-hosted subset of Fraunces + Manrope (latin, variable woff2), fetched
   from Google Fonts. Replaces the render-blocking third-party stylesheet and
   the fonts.googleapis/gstatic round trips; weight ranges reflect the
   variable axes actually used on the site. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/fraunces-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/fraunces.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/manrope.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --navy: #0a1929;
  --navy-mid: #122c47;
  --steel: #3a6188;
  --steel-light: #5d84ad;
  --gold: #c9a455;
  --gold-light: #e0c896;
  /* Darker gold for small gold text/markers on LIGHT backgrounds (cream/
     white). --gold is bright by design and only clears WCAG on the navy
     sections; on cream it lands near 2:1, so light-section labels use this
     instead (>=4.5:1 on white, cream, and cream-dim). */
  --gold-text: #755618;
  --cream: #f6f3ec;
  --cream-dim: #ece6d8;
  --ink: #16202c;
  --mid: #5c6873;
  --line: #ddd5c2;

  --navy-deep: #050d16;
  --gold-deep: #a9822f;
  --shadow-c: 10,25,41;
  --shadow-sm: 0 2px 10px -4px rgba(10,25,41,0.15);
  --shadow-md: 0 16px 40px -16px rgba(10,25,41,0.22);
  --shadow-lg: 0 30px 70px -24px rgba(10,25,41,0.3);
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --dur-fast: 200ms;
  --dur-base: 450ms;
  --dur-slow: 750ms;
}

/* Shared primitives that were byte-identical in every page's inline <style>.
   Hoisted here so they're defined and cached once. Page <style> blocks load
   after this file, so anything page-specific still overrides. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
.logo span { color: var(--gold); }

/* Subtle tactile grain used on the dark sections (hero, spotlight, CTA,
   booking header, thank-you). Static data-URI, no motion cost. */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tap feedback: default mobile browsers only show :hover (which barely
   fires on touch) so taps feel unresponsive. Each page pairs this with its
   own :active rules instead of the default blue flash. */
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Keyboard focus: steel-light clears the 3:1 non-text contrast minimum
   against navy, cream, and white, so one ring works on every surface. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--steel-light);
  outline-offset: 3px;
}

/* Visually hidden but available to screen readers (labels, context). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: visually hidden until focused, then drops in on-brand. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.7rem 1.2rem;
  border-radius: 2px;
  transition: top 150ms ease;
}
.skip-link:focus { top: 1rem; }

/* Respect reduced-motion site-wide: drop transitions/animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}