/* ============================================================================
   Ducey's on the Lake — Bootstrap 5.3.8 theme layer
   ----------------------------------------------------------------------------
   The site is laid out with Bootstrap's grid, navbar, offcanvas, collapse and
   utilities. This file is the only place the brand is applied, and it works by
   re-pointing Bootstrap's own CSS custom properties rather than fighting its
   selectors with overrides. Change a token here and every component follows.

   Palette and type still come from the live basslake.com theme:
     navy  #134074   gold  #FFCD2A   Playfair Display / Lato / Mrs Saint Delafield

   Bootstrap 5.3 ships a dark mode driven by [data-bs-theme]. The document sets
   data-bs-theme="dark" and this file supplies the dark palette, so Bootstrap's
   components (dropdowns, borders, form controls) come out right without being
   individually restyled.
============================================================================ */

:root,
[data-bs-theme="dark"] {
  /* ---- brand ---- */
  --duceys-navy-950: #04101F;
  --duceys-navy-900: #06152C;
  --duceys-navy-850: #0A1D3B;
  --duceys-navy-700: #134074;
  --duceys-gold:     #FFCD2A;
  --duceys-gold-deep:#C99A16;
  --duceys-cream:    #F6F1E7;
  --duceys-stone:    #A9B4C4;

  --duceys-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --duceys-script:  'Mrs Saint Delafield', 'Snell Roundhand', cursive;
  --duceys-ease:    cubic-bezier(.16, 1, .3, 1);

  /* ---- Bootstrap's own tokens, re-pointed ---- */
  --bs-primary: var(--duceys-gold);
  --bs-primary-rgb: 255, 205, 42;

  --bs-body-bg: var(--duceys-navy-950);
  --bs-body-color: var(--duceys-cream);
  --bs-body-font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 300;
  --bs-body-line-height: 1.75;

  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--duceys-stone);
  --bs-tertiary-color: rgba(169, 180, 196, .7);

  --bs-border-color: rgba(246, 241, 231, .14);
  --bs-border-color-translucent: rgba(246, 241, 231, .1);
  --bs-border-radius: 2px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 3px;

  --bs-link-color: var(--duceys-gold);
  --bs-link-hover-color: #fff;
  --bs-link-color-rgb: 255, 205, 42;

  --bs-heading-color: var(--duceys-cream);
  --bs-headings-font-family: var(--duceys-display);

  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-bg: var(--duceys-navy-850);
  --bs-tertiary-bg: var(--duceys-navy-900);
}

/* Bootstrap sets headings from --bs-body-font-family unless told otherwise */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4 {
  font-family: var(--duceys-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
}

body { -webkit-font-smoothing: antialiased; }

/* The closed offcanvas is a fixed, visibility:hidden panel parked 335px to the
   right, and that still extends the document's scrollable width — the page
   could be dragged 12px sideways on a phone. `overflow-x: hidden` on body did
   not catch it because the scrolling happens on the root element.
   `clip` rather than `hidden` on purpose: `hidden` would make html a scroll
   container, which breaks `position: sticky` on the story image. */
html, body { overflow-x: clip; }

/* the fixed navbar has to clear anchor targets */
[id] { scroll-margin-top: 6rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- type bits */
.script {
  font-family: var(--duceys-script);
  color: var(--duceys-gold);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1; display: block;
}
.eyebrow {
  font-size: .74rem; letter-spacing: .34em; text-transform: uppercase;
  font-weight: 700; color: var(--duceys-gold); margin-bottom: 1.1rem;
}
.rule {
  width: 68px; height: 1px; border: 0; opacity: 1;
  background: linear-gradient(90deg, var(--duceys-gold), transparent);
  margin: 1.6rem 0;
}
.rule-center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--duceys-gold), transparent); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: #DCE4EF; }
.display-serif { font-family: var(--duceys-display); }

/* ------------------------------------------------------------------ buttons
   Bootstrap's .btn is driven entirely by --bs-btn-* variables, so the brand
   buttons are variable sets rather than new rules. */
.btn {
  --bs-btn-padding-y: 1.05rem;
  --bs-btn-padding-x: 2.1rem;
  --bs-btn-font-size: .78rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 2px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: transform .4s var(--duceys-ease), background-color .3s, color .3s, border-color .3s, box-shadow .4s;
}
.btn-gold {
  --bs-btn-bg: var(--duceys-gold);
  --bs-btn-border-color: var(--duceys-gold);
  --bs-btn-color: var(--duceys-navy-900);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: var(--duceys-navy-900);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--duceys-navy-900);
  box-shadow: 0 10px 34px -14px rgba(255, 205, 42, .8);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -16px rgba(255, 205, 42, .95); }

.btn-outline-cream {
  --bs-btn-color: var(--duceys-cream);
  --bs-btn-border-color: rgba(246, 241, 231, .38);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--duceys-gold);
  --bs-btn-hover-border-color: var(--duceys-gold);
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-color: var(--duceys-gold);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--duceys-gold);
}
.btn-outline-cream:hover { transform: translateY(-2px); }
.btn-sm { --bs-btn-padding-y: .78rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: .68rem; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* ------------------------------------------------------------------- navbar */
.navbar {
  --bs-navbar-padding-y: 1.35rem;
  --bs-navbar-color: rgba(246, 241, 231, .82);
  --bs-navbar-hover-color: var(--duceys-gold);
  --bs-navbar-active-color: var(--duceys-gold);
  --bs-navbar-toggler-border-color: rgba(246, 241, 231, .3);
  --bs-navbar-toggler-focus-width: 0;
  transition: background-color .5s var(--duceys-ease), padding .5s var(--duceys-ease),
              border-color .5s, backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  background: rgba(6, 21, 44, .93);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  --bs-navbar-padding-y: .85rem;
  border-bottom-color: rgba(255, 205, 42, .18);
}
.navbar-nav .nav-link {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  position: relative;
}
/* the gold underline that draws in from the left on hover */
@media (min-width: 992px) {
  .navbar-nav .nav-link::after {
    content: ''; position: absolute; left: var(--bs-nav-link-padding-x); right: var(--bs-nav-link-padding-x);
    bottom: .25rem; height: 1px; background: var(--duceys-gold);
    transform: scaleX(0); transform-origin: right;
    transition: transform .45s var(--duceys-ease);
  }
  .navbar-nav .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
}

.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 205, 42, .5); border-radius: 50%;
  font-family: var(--duceys-display); color: var(--duceys-gold); font-size: 1.05rem;
}
.brand-name { font-family: var(--duceys-display); font-size: 1.15rem; white-space: nowrap; }
.brand-sub {
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--duceys-stone); white-space: nowrap;
}

/* ---------------------------------------------------------------- offcanvas
   Bootstrap handles the panel, the backdrop, the scroll lock, focus trapping
   and Escape. All that is left is to dress it. */
/* Everything here is scoped below the navbar's lg breakpoint. Above it,
   .offcanvas is still on the element but Bootstrap has turned it back into an
   ordinary navbar — style it unscoped and the drawer's serif list and panel
   background leak onto the desktop header. */
@media (max-width: 991.98px) {
  .offcanvas {
    --bs-offcanvas-bg: rgba(4, 16, 31, .985);
    --bs-offcanvas-color: var(--duceys-cream);
    --bs-offcanvas-border-color: rgba(255, 205, 42, .2);
    --bs-offcanvas-width: min(360px, 86vw);
    backdrop-filter: blur(20px);
  }
  .offcanvas .navbar-nav .nav-link {
    font-family: var(--duceys-display); font-size: 1.45rem;
    letter-spacing: 0; text-transform: none; font-weight: 400;
    color: var(--duceys-cream);
    padding: 1.05rem 0; border-bottom: 1px solid rgba(246, 241, 231, .1);
  }
  .offcanvas .navbar-nav .nav-link:hover { color: var(--duceys-gold); }
}
/* the offcanvas header is drawer furniture and has no place in the desktop bar */
@media (min-width: 992px) { .offcanvas-header { display: none; } }
.nav-call span {
  display: block; font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--duceys-stone);
}
.nav-call strong {
  display: block; margin-top: .25rem; font-weight: 400;
  font-family: var(--duceys-display); font-size: 1.5rem; color: var(--duceys-gold);
}

/* ---------------------------------------------------------------- sections */
.section { padding-block: clamp(4.5rem, 11vw, 9rem); }
.bg-navy { background: var(--duceys-navy-900); }
.bg-deep { background: var(--duceys-navy-950); }

/* The history section: the darkest ground on the page, with a lamp that
   follows the cursor across it. --spot-x / --spot-y are written by site.js
   inside a single rAF, so moving the mouse only ever repaints a gradient.
   The light is on ::before at low opacity until the pointer arrives. */
/* No `overflow: hidden` here, however tempting. It makes the section a scroll
   container, and the sticky picture inside then sticks to a box that never
   scrolls — which looks exactly like sticky being ignored. The spotlight and
   the hairline are both `inset: 0` on pseudo-elements, so nothing overflows
   and nothing needs clipping. */
.bg-archive {
  --spot-x: 50%; --spot-y: 40%;
  position: relative; color: var(--duceys-cream);
  background: linear-gradient(180deg, #0A1526 0%, #070C14 72%);
}
.bg-archive::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38rem 30rem at var(--spot-x) var(--spot-y),
      rgba(255, 205, 42, .16), rgba(255, 205, 42, .05) 42%, transparent 68%),
    radial-gradient(80% 60% at 12% 0%, rgba(201, 154, 22, .1), transparent 62%);
  opacity: .55; transition: opacity .6s var(--duceys-ease);
}
.bg-archive.lit::before { opacity: 1; }
.bg-archive > * { position: relative; z-index: 1; }

/* the hairlines that mark it out as a different kind of section */
.bg-archive::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255, 205, 42, .3), transparent);
}

/* The picture holds while the timeline scrolls past it. `align-self: start`
   matters — a stretched grid item is as tall as the row and sticky then has
   nothing to travel within. */
@media (min-width: 992px) {
  .story-media { position: sticky; top: 7rem; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-archive::before { transition: none; }
}

/* ------------------------------------------------------------------- images */
.ratio > img, .img-cover { width: 100%; height: 100%; object-fit: cover; }
.badge-gold {
  background: var(--duceys-gold); color: var(--duceys-navy-900);
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; padding: .5rem .9rem; border-radius: 2px;
}