/* ==========================================================================
   starrs.online — glassmorphism redesign
   --------------------------------------------------------------------------
   A warm, dark-first glassmorphism aesthetic: charcoal and gunmetal tones
   with warm khaki + sand accents, softly frosted glass panels floating
   above three slow-drifting colour blobs. Built on top of Bootstrap 5 but
   almost all of the visual language below is hand-rolled.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   Two themes live in the same variable names — dark below (the default)
   and light overridden under [data-theme="light"]. Colour, spacing,
   motion, typography all flow from here so the site can be reskinned in
   one place.
   -------------------------------------------------------------------------- */
:root {
    /* Core palette — dark by default */
    --c-bg:            #1A1D22;
    --c-bg-base:       #222831;   /* charcoal */
    --c-surface:       #393E46;   /* gunmetal */
    --c-surface-2:     #2B3037;
    --c-accent:        #948979;   /* warm khaki */
    --c-accent-soft:   #DFD0B8;   /* sand */

    /* Ink */
    --c-text:          #DFD0B8;
    --c-text-soft:     #B8AE9A;
    --c-text-muted:    #8A8175;
    --c-heading:       #FFFFFF;

    /* Glass — the single most important set of tokens on the page */
    --glass-bg:               rgba(57, 62, 70, 0.35);
    --glass-bg-hover:         rgba(57, 62, 70, 0.55);
    --glass-bg-strong:        rgba(34, 40, 49, 0.75);
    --glass-border:           rgba(223, 208, 184, 0.12);
    --glass-border-strong:    rgba(223, 208, 184, 0.28);
    --glass-shadow:           0 12px 40px rgba(0, 0, 0, 0.35);
    --glass-blur:             blur(24px) saturate(140%);

    /* Typography — Fraunces for display, Figtree for body */
    --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --ff-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Modular type scale */
    --fs-hero:   clamp(3rem, 7vw + 1rem, 6.5rem);
    --fs-h1:     clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
    --fs-h2:     clamp(1.75rem, 2vw + 1rem, 2.5rem);
    --fs-h3:     1.5rem;
    --fs-body:   1.0625rem;
    --fs-small:  0.9375rem;
    --fs-kicker: 0.8125rem;

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 1rem;
    --sp-4: 1.5rem;
    --sp-5: 2.5rem;
    --sp-6: 4rem;
    --sp-7: 6rem;
    --sp-8: 9rem;

    /* Radius — soft corners are important for a glassy feel */
    --r-card:   20px;
    --r-input:  14px;
    --r-button: 999px;

    /* Motion */
    --ease:      cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
    --dur-fast:  200ms;
    --dur-mid:   380ms;
    --dur-slow:  700ms;

    /* Layout */
    --nav-h:       72px;
    --content-max: 1200px;
}

/* Light mode — every token re-valued. Glass becomes a white frost on a
   warm cream scene, so the panels still read as translucent surfaces but
   against a bright background. */
[data-theme="light"] {
    --c-bg:            #F5EDE0;
    --c-bg-base:       #EFE5D3;
    --c-surface:       #E5D9C2;
    --c-surface-2:     #EADFCA;
    --c-accent:        #6E6455;
    --c-accent-soft:   #948979;

    --c-text:          #2A2E35;
    --c-text-soft:     #4E5660;
    --c-text-muted:    #7A7165;
    --c-heading:       #1A1D22;

    --glass-bg:               rgba(255, 255, 255, 0.55);
    --glass-bg-hover:         rgba(255, 255, 255, 0.75);
    --glass-bg-strong:        rgba(255, 255, 255, 0.85);
    --glass-border:           rgba(148, 137, 121, 0.28);
    --glass-border-strong:    rgba(110, 100, 85, 0.45);
    --glass-shadow:           0 12px 40px rgba(148, 137, 121, 0.22);
}


/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    /* Prevent the drifting blobs from causing a horizontal scrollbar */
    overflow-x: hidden;
    transition: background-color var(--dur-mid) var(--ease),
                color var(--dur-mid) var(--ease);
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--c-accent-soft);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--c-heading); }

::selection {
    background: var(--c-accent);
    color: var(--c-heading);
}


/* --------------------------------------------------------------------------
   3. BACKGROUND SCENE — three drifting colour blobs
   --------------------------------------------------------------------------
   Fixed to the viewport and heavily blurred, so every glass panel on the
   page has something meaningful to blur. Without this behind them, glass
   panels just look like grey boxes.
   -------------------------------------------------------------------------- */
.bg-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.bg-blob {
    position: absolute;
    width: 55vw;
    height: 55vw;
    max-width: 850px;
    max-height: 850px;
    border-radius: 50%;
    filter: blur(100px);
    will-change: transform;
}

/* Each blob sits in a different corner and drifts on its own timer so
   the background never feels static. */
.bg-blob--1 {
    background: #948979;
    top: -12%;
    left: -12%;
    opacity: 0.45;
    animation: drift-a 24s ease-in-out infinite;
}
.bg-blob--2 {
    background: #DFD0B8;
    top: 35%;
    right: -18%;
    opacity: 0.22;
    animation: drift-b 28s ease-in-out infinite;
}
.bg-blob--3 {
    background: #5D5143;
    bottom: -18%;
    left: 25%;
    opacity: 0.35;
    animation: drift-c 32s ease-in-out infinite;
}

/* In light mode the blobs need to be warmer and a touch brighter so they
   still punch through the cream background. */
[data-theme="light"] .bg-blob--1 { background: #C9B691; opacity: 0.5; }
[data-theme="light"] .bg-blob--2 { background: #EDE0C5; opacity: 0.6; }
[data-theme="light"] .bg-blob--3 { background: #A89B7F; opacity: 0.35; }

@keyframes drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(22vw, 28vh) scale(1.2); }
}
@keyframes drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-18vw, -22vh) scale(1.1); }
}
@keyframes drift-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-25vw, -30vh) scale(1.15); }
}

/* Users who've asked for reduced motion get a static scene */
@media (prefers-reduced-motion: reduce) {
    .bg-blob { animation: none; }
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--ff-display);
    font-weight: 400;         /* Fraunces is most beautiful at lighter weights */
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--c-heading);
    margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; }

p { margin: 0 0 var(--sp-3); color: var(--c-text); }

/* Small-caps kicker above section titles */
.kicker {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: var(--fs-kicker);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--sp-3);
}


/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container-custom {
    width: min(100% - 2rem, var(--content-max));
    margin-inline: auto;
}

.section {
    padding-block: var(--sp-7);
}
.section-tight { padding-block: var(--sp-6); }
.section-lg    { padding-block: var(--sp-8) var(--sp-7); }


/* --------------------------------------------------------------------------
   6. GLASS UTILITY
   --------------------------------------------------------------------------
   The `.glass` class is applied to any element that should render as a
   frosted panel. Backdrop-filter is the key here — it blurs whatever
   sits behind the element. Fallback: browsers that don't support
   backdrop-filter still see a semi-transparent surface, which reads fine.
   -------------------------------------------------------------------------- */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-card);
    box-shadow: var(--glass-shadow);
}

/* A denser variant for modal / important surfaces */
.glass-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}


/* --------------------------------------------------------------------------
   7. TOP NAV — fixed glass bar
   -------------------------------------------------------------------------- */
.navbar-glass {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    z-index: 1030;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100% - 2rem, var(--content-max));
    margin-inline: auto;
    gap: var(--sp-3);
}

.brand {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--c-heading);
    letter-spacing: -0.015em;
    text-decoration: none;
}
.brand-dot { color: var(--c-accent); }

.nav-links {
    display: flex;
    gap: var(--sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links a {
    color: var(--c-text);
    font-size: 0.9375rem;
    font-weight: 500;
    position: relative;
    padding: 0.4rem 0;
}
.nav-links a:hover { color: var(--c-heading); }

/* Active-page indicator is a small dot below the link */
.nav-links a.is-active { color: var(--c-heading); }
.nav-links a.is-active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-accent-soft);
}

.nav-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* Hide the desktop nav links under md, show the hamburger */
@media (max-width: 768px) {
    .nav-links { display: none; }
}
@media (min-width: 769px) {
    .hamburger { display: none; }
}

/* Push main below the fixed nav */
main { padding-top: var(--nav-h); }


/* --------------------------------------------------------------------------
   8. ICON BUTTONS — theme toggle, hamburger, back-to-top, social
   -------------------------------------------------------------------------- */
.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--c-text);
    cursor: pointer;
    font-size: 0.95rem;
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.icon-btn:hover {
    color: var(--c-heading);
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
    transform: translateY(-1px);
}

/* Theme toggle — swap sun/moon icons based on the active theme */
.theme-toggle .fa-moon { display: inline-block; }
.theme-toggle .fa-sun  { display: none; }
[data-theme="light"] .theme-toggle .fa-moon { display: none; }
[data-theme="light"] .theme-toggle .fa-sun  { display: inline-block; }


/* --------------------------------------------------------------------------
   9. MOBILE OFFCANVAS MENU
   -------------------------------------------------------------------------- */
.offcanvas.mobile-nav {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    color: var(--c-text);
    border-left: 1px solid var(--glass-border);
    width: min(85vw, 340px);
}
.offcanvas.mobile-nav .offcanvas-header {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--glass-border);
}
.offcanvas.mobile-nav .btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.7;
}
[data-theme="light"] .offcanvas.mobile-nav .btn-close { filter: none; }

.mobile-nav-links {
    list-style: none;
    padding: var(--sp-4);
    margin: 0;
    display: flex;
    flex-direction: column;
}
.mobile-nav-links a {
    display: block;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 1.75rem;
    color: var(--c-text);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--glass-border);
    transition: color var(--dur-fast) var(--ease),
                padding-left var(--dur-fast) var(--ease);
}
.mobile-nav-links a:hover {
    color: var(--c-heading);
    padding-left: var(--sp-2);
}


/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
.hero {
    padding-block: var(--sp-8) var(--sp-7);
    text-align: center;
    position: relative;
}
.hero-title {
    font-size: var(--fs-hero);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 0 0 var(--sp-4);
}
.hero-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--c-accent-soft);
}
.hero-deck {
    font-size: 1.2rem;
    max-width: 40rem;
    margin: 0 auto var(--sp-4);
    color: var(--c-text-soft);
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   11. CARD GRID + FEATURE CARDS
   -------------------------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-4);
}

/* A featured 2-col grid used on the home page for bigger cards */
.card-grid--featured {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-4);
}

.feature-card {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transition: transform var(--dur-mid) var(--ease),
                background var(--dur-mid) var(--ease),
                border-color var(--dur-mid) var(--ease);
}
.feature-card:hover {
    transform: translateY(-4px);
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
    color: inherit;
}
.feature-card-media {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: var(--sp-3);
    background: rgba(0,0,0,0.2);
}
.feature-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}
.feature-card:hover .feature-card-media img { transform: scale(1.06); }

.feature-card-meta {
    display: flex;
    gap: var(--sp-3);
    font-size: var(--fs-kicker);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--sp-2);
}
.feature-card-meta span + span::before {
    content: "·";
    margin-right: var(--sp-3);
    color: var(--c-text-muted);
}
.feature-card h3 {
    margin: 0 0 var(--sp-2);
    color: var(--c-heading);
}
.feature-card p {
    color: var(--c-text-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 0 var(--sp-3);
    flex: 1;                    /* push the link to the bottom */
}
.feature-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-accent-soft);
    letter-spacing: 0.02em;
    transition: gap var(--dur-fast) var(--ease);
}
.feature-card:hover .feature-card-link { gap: 0.75rem; }


/* --------------------------------------------------------------------------
   12. TESTIMONIAL / POSTCARD CAROUSEL
   -------------------------------------------------------------------------- */
.postcard-block {
    padding: var(--sp-6) var(--sp-5);
}
.postcard {
    text-align: center;
    padding: var(--sp-4) var(--sp-3);
}
.postcard-quote {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 1.5vw + 1rem, 1.875rem);
    line-height: 1.35;
    color: var(--c-heading);
    margin: 0 0 var(--sp-4);
    max-width: 44rem;
    margin-inline: auto;
}
.postcard-quote::before { content: "\201C"; color: var(--c-accent); margin-right: 0.1em; }
.postcard-quote::after  { content: "\201D"; color: var(--c-accent); margin-left: 0.1em; }
.postcard-attr {
    font-size: var(--fs-kicker);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-accent);
}

/* Bootstrap carousel — override to fit the glass aesthetic */
.carousel-inner { padding: var(--sp-3) 0; }

.carousel-control-prev,
.carousel-control-next {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    opacity: 0.9;
    transition: all var(--dur-fast) var(--ease);
}
.carousel-control-prev { left: var(--sp-2); }
.carousel-control-next { right: var(--sp-2); }
.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
    border-color: var(--glass-border-strong);
    background: var(--glass-bg-hover);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 14px;
    height: 14px;
    /* Use a custom-coloured chevron via filter */
    filter: invert(1) sepia(0.3) saturate(0);
}
[data-theme="light"] .carousel-control-prev-icon,
[data-theme="light"] .carousel-control-next-icon {
    filter: none;
}

.carousel-indicators {
    margin-bottom: -2rem;
    gap: 10px;
}
.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    opacity: 0.35;
    border: 0;
    margin: 0;
    transition: all var(--dur-fast) var(--ease);
}
.carousel-indicators .active {
    opacity: 1;
    background: var(--c-accent-soft);
    transform: scale(1.15);
}


/* --------------------------------------------------------------------------
   13. NEWSLETTER SIGNUP
   -------------------------------------------------------------------------- */
.newsletter {
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
}
.newsletter h2 { margin-bottom: var(--sp-3); }
.newsletter p  {
    color: var(--c-text-soft);
    max-width: 38rem;
    margin: 0 auto var(--sp-4);
}
.newsletter-form {
    display: flex;
    gap: var(--sp-2);
    max-width: 32rem;
    margin: 0 auto;
}
.newsletter-input {
    flex: 1;
    padding: 0.85rem 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-input);
    color: var(--c-heading);
    font-family: inherit;
    font-size: 0.9375rem;
    transition: border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
[data-theme="light"] .newsletter-input { background: rgba(255,255,255,0.6); }
.newsletter-input:focus {
    outline: none;
    border-color: var(--c-accent-soft);
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .newsletter-input:focus { background: rgba(255,255,255,0.9); }
.newsletter-input::placeholder { color: var(--c-text-muted); }

.newsletter-btn {
    padding: 0.85rem 1.5rem;
    background: var(--c-accent);
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    border: 0;
    border-radius: var(--r-input);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
    white-space: nowrap;
}
.newsletter-btn:hover {
    background: var(--c-accent-soft);
    color: var(--c-bg-base);
    transform: translateY(-1px);
}
[data-theme="light"] .newsletter-btn { background: var(--c-accent); color: #FFFFFF; }
[data-theme="light"] .newsletter-btn:hover { background: #514839; }

.newsletter-note {
    margin-top: var(--sp-3);
    font-size: var(--fs-small);
    color: var(--c-text-muted);
}

@media (max-width: 560px) {
    .newsletter-form { flex-direction: column; }
}


/* --------------------------------------------------------------------------
   14. MAP EMBED
   -------------------------------------------------------------------------- */
.map-block { padding: var(--sp-6); }
.map-frame {
    margin-top: var(--sp-4);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--glass-border);
}
.map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Darken Google Maps so it doesn't look out of place against our
       warm-dark palette */
    filter: grayscale(0.3) contrast(0.9) brightness(0.85);
}
[data-theme="light"] .map-frame iframe {
    filter: grayscale(0.15) contrast(0.95);
}


/* --------------------------------------------------------------------------
   15. PHOTO GALLERY
   -------------------------------------------------------------------------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
}
.gallery figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    cursor: zoom-in;
    background: rgba(0, 0, 0, 0.2);
    aspect-ratio: 1 / 1;
}
/* Break a few tiles into portraits so the grid has a more editorial feel */
.gallery figure:nth-child(5n+1) { aspect-ratio: 4 / 5; }
.gallery figure:nth-child(7n+3) { aspect-ratio: 4 / 5; }

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}
.gallery figure:hover img { transform: scale(1.05); }

.gallery figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    opacity: 0;
    transition: opacity var(--dur-mid) var(--ease);
}
.gallery figure:hover figcaption,
.gallery figure:focus-visible figcaption { opacity: 1; }
.gallery figure:focus-visible {
    outline: 2px solid var(--c-accent-soft);
    outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   16. LIGHTBOX — click a gallery image to view it large
   -------------------------------------------------------------------------- */
body.lightbox-open { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(10, 12, 15, 0.86);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-mid) var(--ease),
                visibility 0s linear var(--dur-mid);
}
.lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-mid) var(--ease),
                visibility 0s linear 0s;
}

.lightbox-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 380ms var(--ease) 100ms,
                transform 380ms var(--ease) 100ms;
}
.lightbox.is-open .lightbox-figure {
    opacity: 1;
    transform: translateY(0);
}
.lightbox-image {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
    color: #DFD0B8;
    font-family: var(--ff-body);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

.lightbox-counter {
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
    color: #DFD0B8;
    font-family: var(--ff-body);
    font-size: var(--fs-kicker);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}
.lightbox-current {
    color: var(--c-accent-soft);
    opacity: 1;
    font-weight: 500;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(223, 208, 184, 0.25);
    color: #DFD0B8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    border-color: #DFD0B8;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.lightbox-close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    gap: var(--sp-2);
    font-family: var(--ff-body);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.lightbox-prev { left: var(--sp-4); }
.lightbox-next { right: var(--sp-4); }

@media (max-width: 576px) {
    .lightbox { padding: var(--sp-5) var(--sp-2); }
    .lightbox-prev,
    .lightbox-next { width: 40px; height: 40px; }
    .lightbox-prev { left: var(--sp-2); }
    .lightbox-next { right: var(--sp-2); }
    .lightbox-close span { display: none; }
}


/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.site-foot {
    padding-block: var(--sp-4);
    margin-top: var(--sp-7);
    border-top: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .site-foot { background: rgba(255,255,255,0.3); }

.foot-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-small);
    color: var(--c-text-muted);
}
.foot-inner p { margin: 0; color: inherit; }

.foot-social {
    display: flex;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: 0;
}
.foot-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--c-text);
    font-size: 0.95rem;
    transition: all var(--dur-fast) var(--ease);
}
.foot-social a:hover {
    color: var(--c-heading);
    border-color: var(--glass-border-strong);
    background: var(--glass-bg-hover);
    transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   18. BACK-TO-TOP
   -------------------------------------------------------------------------- */
.to-top {
    position: fixed;
    bottom: var(--sp-4);
    right: var(--sp-4);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-strong);
    color: var(--c-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity var(--dur-mid) var(--ease),
                transform var(--dur-mid) var(--ease),
                color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
    z-index: 1020;
}
.to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.to-top:hover {
    color: var(--c-heading);
    background: var(--glass-bg-hover);
}


/* --------------------------------------------------------------------------
   19. SLIDE-UP REVEAL ON SCROLL
   --------------------------------------------------------------------------
   Elements marked `.reveal` begin 30px below their final position and
   fade up when they enter the viewport. Stagger siblings via inline
   `style="--d: 120ms"` so groups cascade.
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 700ms var(--ease-out) var(--d, 0ms),
                transform 700ms var(--ease-out) var(--d, 0ms);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html { scroll-behavior: auto; }
    .gallery img,
    .feature-card-media img,
    .feature-card,
    .carousel-control-prev,
    .carousel-control-next { transition: none; }
}


/* --------------------------------------------------------------------------
   20. ARTICLE PAGES — long-form posts like Esperance
   --------------------------------------------------------------------------
   Full-bleed cinematic hero + narrow centered prose column with bigger
   elements (images, stats, quotes, maps, infoboxes) breaking out wider.
   -------------------------------------------------------------------------- */

/* HERO — full-bleed photo + dark gradient + glass title panel at the bottom.
   The hero bleeds up BEHIND the fixed nav for the immersive opening shot. */
.article-hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-6);
    margin-top: calc(var(--nav-h) * -1);     /* bleed behind the nav */
    overflow: hidden;
    isolation: isolate;                       /* contain the pseudo stack */
}
.article-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
}
.article-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(12, 14, 17, 0.82) 0%,
        rgba(12, 14, 17, 0.45) 50%,
        rgba(12, 14, 17, 0.25) 100%);
    z-index: -1;
}

/* The hero panel stays dark-tinted in both themes — the hero photo behind
   it is always dark (dimmed + gradient) so light text reads best here
   regardless of the site theme. */
.article-hero-panel {
    max-width: 44rem;
    padding: var(--sp-5);
    background: rgba(26, 29, 34, 0.55);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(223, 208, 184, 0.22);
    border-radius: var(--r-card);
    box-shadow: var(--glass-shadow);
}

.article-kicker {
    display: inline-block;
    font-size: var(--fs-kicker);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-accent-soft);
    margin-bottom: var(--sp-3);
}
.article-title {
    font-family: var(--ff-display);
    font-weight: 300;
    font-size: clamp(2.25rem, 4.5vw + 1rem, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin: 0 0 var(--sp-4);
}
.article-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--c-accent-soft);
}
.article-deck {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--sp-4);
    line-height: 1.55;
}
.article-byline {
    font-size: var(--fs-kicker);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
.article-byline-sep {
    margin: 0 0.7em;
    color: rgba(255, 255, 255, 0.35);
}


/* META STRIP — small fact file directly under the hero.
   Negative margin pulls it up so it slightly overlaps the hero edge. */
.article-meta-wrap {
    max-width: 56rem;
    margin: calc(var(--sp-6) * -1) auto var(--sp-6);
    padding-inline: var(--sp-3);
    position: relative;
    z-index: 2;
}
.article-meta {
    padding: var(--sp-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3);
}
.article-meta-item { text-align: center; padding: var(--sp-2); }
.article-meta-label {
    display: block;
    font-size: var(--fs-kicker);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--sp-1);
}
.article-meta-value {
    display: block;
    font-family: var(--ff-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--c-heading);
}


/* BODY PROSE — narrow centered column, ~640px wide for ideal read length */
.article-prose {
    max-width: 40rem;
    margin-inline: auto;
    padding-inline: var(--sp-3);
}
.article-prose p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: var(--sp-3);
    color: var(--c-text);
}

/* Drop cap on the first paragraph of the article */
.article-prose .drop-cap::first-letter {
    font-family: var(--ff-display);
    font-weight: 500;
    float: left;
    font-size: 4.2rem;
    line-height: 0.85;
    padding: 0.4rem 0.7rem 0 0;
    color: var(--c-accent-soft);
}

/* Numbered section headings — "01 · The long bit before the good bit" */
.article-h2 {
    max-width: 40rem;
    margin: var(--sp-6) auto var(--sp-4);
    padding: var(--sp-4) var(--sp-3) 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--c-heading);
    border-top: 1px solid var(--glass-border);
}
.article-h2::before {
    content: attr(data-num) "  ·  ";
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}


/* WIDE IMAGE — breaks out wider than the prose column */
.article-image-wide {
    max-width: 56rem;
    margin: var(--sp-5) auto;
    padding-inline: var(--sp-3);
}
.article-image-wide img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.article-image-wide figcaption {
    margin-top: var(--sp-2);
    font-size: var(--fs-kicker);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
    text-align: center;
}


/* TWO-UP IMAGE PAIR — side by side at full content width */
.article-image-duo {
    max-width: var(--content-max);
    margin: var(--sp-5) auto;
    padding-inline: var(--sp-3);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}
.article-image-duo figure { margin: 0; }
.article-image-duo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.article-image-duo figcaption {
    margin-top: var(--sp-2);
    font-size: var(--fs-kicker);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
}
@media (max-width: 640px) {
    .article-image-duo { grid-template-columns: 1fr; }
}


/* PULL QUOTE — oversized curly quote mark above the italic text */
.article-quote {
    max-width: 48rem;
    margin: var(--sp-7) auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-5);
    text-align: center;
    position: relative;
}
.article-quote-text {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.375rem, 1.6vw + 1rem, 2rem);
    line-height: 1.3;
    color: var(--c-heading);
    margin: 0;
    position: relative;
}
.article-quote-text::before {
    content: "\201C";
    position: absolute;
    top: -1em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5rem;
    line-height: 1;
    color: var(--c-accent);
    opacity: 0.5;
    font-style: normal;
}


/* STATS STRIP — "by the numbers" */
.article-stats-wrap {
    max-width: 56rem;
    margin: var(--sp-6) auto;
    padding-inline: var(--sp-3);
}
.article-stats {
    padding: var(--sp-5) var(--sp-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--sp-4);
    text-align: center;
}
.article-stat-num {
    display: block;
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(2rem, 2.5vw + 1rem, 2.75rem);
    line-height: 1;
    color: var(--c-accent-soft);
    margin-bottom: var(--sp-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.article-stat-label {
    display: block;
    font-size: var(--fs-kicker);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}


/* ROUTE MAP — map iframe inside a glass frame */
.article-route-wrap {
    max-width: 56rem;
    margin: var(--sp-6) auto;
    padding-inline: var(--sp-3);
}
.article-route {
    padding: var(--sp-4);
}
.article-route .kicker { display: block; text-align: center; }
.article-route h3 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: var(--sp-3);
}
.article-route-caption {
    text-align: center;
    color: var(--c-text-soft);
    font-size: 0.9375rem;
    margin-bottom: var(--sp-4);
    max-width: 40rem;
    margin-inline: auto;
}


/* "IF YOU GO" INFOBOX — definition list with accent border-left */
.article-infobox-wrap {
    max-width: 44rem;
    margin: var(--sp-7) auto var(--sp-6);
    padding-inline: var(--sp-3);
}
.article-infobox {
    padding: var(--sp-5);
    border-left: 3px solid var(--c-accent-soft);
    border-radius: 10px;
}
.article-infobox h3 {
    margin: 0 0 var(--sp-4);
    font-size: 1.375rem;
}
.article-infobox dl {
    margin: 0;
    display: grid;
    gap: var(--sp-4);
}
.article-infobox dt {
    font-size: var(--fs-kicker);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--sp-1);
}
.article-infobox dd {
    margin: 0;
    color: var(--c-text);
    line-height: 1.6;
}


/* BACK-TO-PARENT — pill button at the article end */
.article-back {
    max-width: 40rem;
    margin: var(--sp-6) auto var(--sp-5);
    text-align: center;
    padding-inline: var(--sp-3);
}
.article-back a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.85rem 1.6rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-button);
    color: var(--c-text);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all var(--dur-fast) var(--ease);
}
.article-back a:hover {
    color: var(--c-heading);
    border-color: var(--glass-border-strong);
    background: var(--glass-bg-hover);
    gap: 0.75rem;
}