/* Lucius sites - shared design base. Copy into each site as css/base.css (scripts/sync-shared.sh).
   Each site sets its own --accent / --accent-2 and overrides in css/site.css. */
@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; }
  img, video, svg { display: block; max-width: 100%; height: auto; }
  h1, h2, h3, p { margin: 0; }
  a { color: inherit; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
}

@layer base {
  :root {
    color-scheme: dark;
    --bg: #0b0a0c;
    --bg-2: #141217;
    --surface: #1b181f;
    --text: #ece7e2;
    --muted: #a39b94;
    --accent: #b3141f;
    --accent-2: #e8b04a;
    --radius: 14px;
    --max: 72rem;
    --font-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  body {
    background: var(--bg);
    color: var(--text);
    font: 1.0625rem/1.7 var(--font-body);
  }
  h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; letter-spacing: .02em; text-wrap: balance; }
  p { text-wrap: pretty; max-width: 65ch; }
  :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
}

@layer components {
  .wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
  .section { padding-block: clamp(3rem, 8vw, 6rem); }
  .section h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 1.25rem; }
  .eyebrow { color: var(--accent-2); text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; font-weight: 600; }

  .site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
  .site-header nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
  .site-header nav a { text-decoration: none; color: var(--muted); font-size: .95rem; }
  .site-header nav a:hover, .site-header nav a[aria-current] { color: var(--text); }

  .hero { position: relative; isolation: isolate; min-height: min(88svh, 52rem); display: grid; align-items: end; overflow: clip; }
  .hero > img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--bg) 4%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, transparent); }
  .hero .wrap { padding-block: clamp(3rem, 10vw, 7rem); display: grid; gap: 1.25rem; }
  .hero h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); }
  .hero p.lead { font-size: 1.25rem; color: var(--text); }

  .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600; text-decoration: none; background: var(--accent); color: #fff; border: 2px solid var(--accent); transition: transform .15s, background .15s; }
  .btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 80%, white); }
  .btn.ghost { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--text) 40%, transparent); }
  .btn-row { display: flex; gap: .75rem; flex-wrap: wrap; }

  .grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
  .card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
  .card p { color: var(--muted); }

  .gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .gallery a { display: block; border-radius: 10px; overflow: clip; aspect-ratio: 16 / 9; }
  .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
  .gallery a:hover img { transform: scale(1.04); }

  .video { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--radius); background: #000; }

  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
  .facts dt { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
  .facts dd { margin: 0; font-weight: 600; }

  .site-footer { border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); padding-block: 2.5rem; color: var(--muted); font-size: .9rem; }
  .site-footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
}

@layer utilities {
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
  .skip-link { position: absolute; left: .5rem; top: -4rem; background: var(--accent-2); color: #000; padding: .5rem 1rem; z-index: 100; }
  .skip-link:focus { top: .5rem; }
}