/* ==========================================================================
   Pakenham Barrel Racing Club
   Shared stylesheet — every page links this file.

   Direction: the arena at Koo Wee Rup. Sand underfoot, gum trees behind the
   rail, dusk over the flats, and one red barrel. Times are set in mono
   because in this sport the clock is the whole point.

   Contents
     1. Tokens
     2. Reset & base
     3. Typography
     4. Layout primitives
     5. Buttons & controls
     6. Header / navigation
     7. Hero
     8. Editorial blocks
     9. Photography
    10. Data, slots, map, forms
    11. Footer
    12. Motion
   Fonts are linked from each page's <head> rather than @import-ed here, so
   the stylesheet and the font CSS download in parallel.
   ========================================================================== */


/* 1. Tokens ---------------------------------------------------------------- */
:root {
    /* Neutrals pulled from the arena itself: graded sand through gum shade. */
    --bone:       #FBF8F2;
    --sand:       #EBE1D0;
    --sand-deep:  #C9B392;
    --sand-line:  #D8CAB2;
    --clay:       #A85A31;   /* worked-over arena dirt; warm secondary */
    --moss:       #5C6B4C;
    --gum:        #333D2C;   /* eucalypt shade; dark surfaces */
    --gum-line:   #55614A;
    --ink-soft:   #4A5140;
    --ink:        #14170F;   /* near-black with olive in it */

    --flag:       #B32127;   /* the barrel red. spend it sparingly */
    --flag-dark:  #8B171C;
    --flag-soft:  #E8A6A4;

    --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --body: 'Newsreader', Georgia, 'Times New Roman', serif;
    --mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --gutter: clamp(1.25rem, 5vw, 4.5rem);
    --rule: 1px solid var(--sand-line);
    --header-h: 76px;

    /* One grade for every photograph, so a phone snap of the rail and a
       press shot of a run read as one set. */
    --grade: saturate(0.92) contrast(1.05) brightness(1.02);
}

/* 2. Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--sand);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
    line-height: 1.62;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--flag); color: #fff; }

/* 3. Typography ------------------------------------------------------------ */
h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 120%;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 0.95;
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 6rem); }
h2 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.5rem); }
h3 { font-size: clamp(1.22rem, 1.1rem + 0.75vw, 1.6rem); font-stretch: 110%; letter-spacing: 0; }
h4 { font-size: 1rem; font-stretch: 110%; letter-spacing: 0.01em; }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* Mono label for section markers and anything the clock would care about. */
.eyebrow {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
}
.eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--flag);
    border-radius: 50%;
    flex: none;
}

.lede {
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.38rem);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 60ch;
}

.dark .eyebrow, .band .eyebrow { color: #C2CAB4; }
.dark .lede, .band .lede { color: rgba(255, 255, 255, .82); }

/* 4. Layout primitives ----------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 940px; }

section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head::before {
    content: '';
    display: block;
    width: 46px;
    height: 3px;
    background: var(--flag);
    margin-bottom: 1.5rem;
}
.section-head > .lede { margin-top: 1.25rem; }
.section-head--flush { margin-bottom: 0; }

.dark { background: var(--gum); color: #ECEFE5; }
.paper { background: var(--bone); }

/* Split: text one side, photograph the other. */
.split {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 880px) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--top { align-items: start; }
    .split--wide-media { grid-template-columns: 5fr 7fr; }
    .split--flip > *:first-child { order: 2; }
}

.stack-lg { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); }

/* 5. Buttons & controls ---------------------------------------------------- */
.btn {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn::after { content: '\2192'; font-size: 0.95em; }
.btn--primary { background: var(--flag); color: #fff; }
.btn--primary:hover { background: var(--flag-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn--ghost:hover { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.btn--block { width: 100%; justify-content: center; }

.dark .btn--ghost { color: #ECEFE5; }
.dark .btn--ghost:hover { background: #ECEFE5; color: var(--gum); }

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--flag);
    outline-offset: 3px;
}

/* 6. Header / navigation --------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    background: var(--sand);
    border-bottom: var(--rule);
    transition: box-shadow .25s ease;
}
.site-header.scrolled { box-shadow: 0 1px 24px rgba(20, 23, 15, .16); }

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex: none; }
.brand img {
    height: 44px;
    width: auto;
    /* Black-on-white mark: multiply drops the white ground onto the sand. */
    mix-blend-mode: multiply;
}
.brand span {
    font-family: var(--display);
    font-weight: 700;
    font-stretch: 110%;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.88rem;
    line-height: 1.05;
    max-width: 11ch;
}

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); }
.site-nav a {
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    padding-block: 0.4rem;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--flag); }

.menu-btn {
    display: none;
    background: none;
    border: 1px solid var(--ink);
    border-radius: 2px;
    padding: 0.55rem 0.7rem;
    color: var(--ink);
    cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; display: block; }

.mobile-nav { display: none; border-top: var(--rule); padding-block: 0.25rem 1.25rem; }
.mobile-nav.open { display: block; }
.mobile-nav a {
    display: block;
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85rem 0;
    border-bottom: var(--rule);
}
.mobile-nav .btn { margin-top: 1.25rem; }

@media (max-width: 900px) {
    .site-nav, .site-header__bar > .btn { display: none; }
    .menu-btn { display: block; }
}

main { padding-top: var(--header-h); }

/* 7. Hero ------------------------------------------------------------------ */
.hero {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding: 0;
    isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    filter: var(--grade);
}
.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(20, 23, 15, .85) 0%, rgba(20, 23, 15, .1) 32%, transparent 55%),
        linear-gradient(100deg,
            rgba(20, 23, 15, .94) 0%,
            rgba(20, 23, 15, .8) 36%,
            rgba(20, 23, 15, .3) 68%,
            rgba(20, 23, 15, .5) 100%);
}
.hero__inner {
    min-height: min(88vh, 820px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-block: clamp(5rem, 4rem + 8vw, 8rem) clamp(3rem, 2rem + 4vw, 5rem);
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lede { color: rgba(255, 255, 255, .87); margin-top: 1.5rem; max-width: 54ch; }
.hero .eyebrow { color: rgba(255, 255, 255, .74); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.hero .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Shorter variant for interior pages. */
.hero--interior .hero__inner { min-height: min(58vh, 520px); }

/* No photograph behind it — used where a crop would fight the type. */
.hero--plain { background: var(--gum); }
.hero--plain .hero__inner { min-height: min(46vh, 420px); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }
.hero--plain .lede { color: rgba(255, 255, 255, .84); }


/* 8. Editorial blocks ------------------------------------------------------ */
.cols {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cols--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.col-item { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.col-item h3 { margin-bottom: 0.7rem; }
.col-item > * + * { margin-top: 0.9rem; }
.col-item .datalist, .col-item .ticks { margin-top: 1.5rem; }
.col-item .btn { margin-top: 1.75rem; }
.col-item p { color: var(--ink-soft); }
.dark .col-item { border-top-color: var(--moss); }
.dark .col-item p { color: #CBD3BF; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.ticks svg { width: 17px; height: 17px; margin-top: 0.36em; color: var(--flag); flex: none; }
.ticks h4 { margin-bottom: 0.25rem; }
.ticks p { color: var(--ink-soft); font-size: 0.97em; }
.dark .ticks svg, .band .ticks svg { color: var(--flag-soft); }
.dark .ticks p, .band .ticks p { color: rgba(255, 255, 255, .78); }

.panel {
    background: var(--bone);
    border: var(--rule);
    border-radius: 3px;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.dark .panel { background: rgba(255, 255, 255, .055); border-color: var(--gum-line); }

/* Pull quote / statement block. */
.statement {
    font-family: var(--display);
    font-weight: 600;
    font-stretch: 110%;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    max-width: 22ch;
}

/* 9. Photography ----------------------------------------------------------- */
/* Every photograph on the site runs through .shot: one grade, a hairline
   frame, and a caption in the utility face. The frame clips the image so a
   hover zoom never spills, while the caption sits outside it. */
.shot { margin: 0; }
.shot__frame {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: var(--sand-deep);
}
.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--grade);
    transition: transform .8s cubic-bezier(.16, .84, .44, 1);
}
.shot--tall .shot__frame { aspect-ratio: 3 / 4; }
.shot--wide .shot__frame { aspect-ratio: 16 / 10; }
.shot--pano .shot__frame { aspect-ratio: 21 / 9; }
.shot--square .shot__frame { aspect-ratio: 1 / 1; }

.shot figcaption {
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-top: 0.75rem;
}
.dark .shot figcaption, .band .shot figcaption { color: #B4BCA6; }

/* Caption laid over the image, for feature shots. */
.shot--captioned .shot__frame figcaption {
    position: absolute;
    inset: auto 0 0 0;
    color: #fff;
    padding: 2.5rem 1.1rem 1rem;
    background: linear-gradient(to top, rgba(20, 23, 15, .82), transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .shot--zoom:hover img { transform: scale(1.04); }
}

/* Documentary strip: the grounds, in sequence, scrollable on small screens. */
.strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 1fr);
    gap: 1px;
    background: var(--sand-line);
    border-block: var(--rule);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}
.strip .shot { scroll-snap-align: start; background: var(--sand); }
.strip .shot__frame { border-radius: 0; aspect-ratio: 4 / 3; }
.strip figcaption { padding: 0.8rem 1rem 1rem; }

/* Offset pair: two shots, one dropped, for rhythm without a rigid grid. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.5rem); align-items: start; }
.pair > *:last-child { margin-top: clamp(1.5rem, 5vw, 4rem); }

/* Full-bleed band with a photograph behind it. */
.band {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: var(--ink);
}
.band__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.band__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
.band__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20, 23, 15, .93) 0%, rgba(20, 23, 15, .8) 45%, rgba(20, 23, 15, .74) 100%),
        linear-gradient(to top, rgba(20, 23, 15, .5), transparent 40%);
}


/* 10. Data, slots, map, forms ---------------------------------------------- */
.slots { list-style: none; margin: 0; padding: 0; }
.slots li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: var(--rule);
    font-family: var(--mono);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}
.slots li:last-child { border-bottom: 0; }
.slots li span:last-child { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: .68; }
.dark .slots li { border-bottom-color: var(--gum-line); }

.datalist { display: grid; gap: 1.35rem; margin: 0; }
.datalist > div { display: grid; gap: 0.3rem; }
.datalist dt {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.datalist dd { margin: 0; }
.datalist a { text-decoration: none; border-bottom: 1px solid var(--sand-deep); word-break: break-word; transition: color .15s ease, border-color .15s ease; }
.datalist a:hover { border-bottom-color: var(--flag); color: var(--flag); }
.dark .datalist dt { color: #B4BCA6; }
.dark .datalist a { border-bottom-color: var(--gum-line); }
.dark .datalist a:hover { color: var(--flag-soft); border-bottom-color: var(--flag-soft); }

.map-frame { border: var(--rule); border-radius: 3px; overflow: hidden; background: var(--sand-deep); }
.map-frame iframe { display: block; width: 100%; height: clamp(300px, 42vw, 470px); border: 0; }

.field { display: grid; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.dark .field label { color: #B8C0AB; }
.field input, .field select, .field textarea {
    font-family: var(--body);
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--sand-deep);
    border-radius: 2px;
    padding: 0.8rem 0.9rem;
    width: 100%;
    transition: border-color .15s ease;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }

/* 11. Footer --------------------------------------------------------------- */
.site-footer {
    background: var(--ink);
    color: #D6DBCB;
    padding-block: clamp(3rem, 2rem + 4vw, 4.5rem) 2rem;
    font-size: 0.96rem;
}
.site-footer h4 {
    color: #fff;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    font-stretch: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.site-footer__grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding-bottom: 2.5rem;
}
.site-footer a { text-decoration: none; transition: color .15s ease; }
.site-footer nav a { display: block; padding: 0.3rem 0; }
.site-footer a:hover { color: #fff; }
.site-footer__base {
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}
.site-footer__base img {
    height: 42px;
    width: auto;
    /* The mark is black on white. Inverting and screening drops the white
       ground so the logo sits on the dark footer without a visible box. */
    filter: invert(1);
    mix-blend-mode: screen;
    opacity: .9;
}
.site-footer__base p {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin: 0;
}

/* 12. Motion --------------------------------------------------------------- */
/* Reveals are opt-in: without the .js class on <html> nothing is ever
   hidden, so a failed script can't take the page down with it. */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
    .js .reveal.in { opacity: 1; transform: none; }
}

/* Utilities ---------------------------------------------------------------- */
.note { font-size: 0.92rem; color: var(--ink-soft); }
.dark .note { color: #B8C0AB; }
.stack { display: grid; gap: 1.5rem; }
.section-block { margin-top: clamp(2.5rem, 1rem + 5vw, 4.5rem); }
.section-block:first-child { margin-top: 0; }
.map-block { margin-top: clamp(2.5rem, 1rem + 5vw, 4.5rem); }
.slot-panel .eyebrow { margin: 0.9rem 0 1.5rem; }
.slot-panel .slots { margin-top: 1.5rem; }
.slot-panel .note { margin-top: 1.25rem; }
.form-panel h3 { margin-bottom: 1.75rem; }
.contact-block h3 { margin-bottom: 1.5rem; }
.contact-block .btn { margin-top: 2rem; }

/* Booking ------------------------------------------------------------------ */
.session-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.session-time {
    font-family: var(--mono);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}
.session-list h3 { margin-bottom: 0.4rem; }
.session-list .col-item p:last-child { color: var(--ink-soft); font-size: 0.95rem; }

.booking-panel { padding: clamp(0.75rem, 2vw, 1.5rem); }
.booking-panel .calendly-inline-widget { border-radius: 2px; overflow: hidden; }

.callout {
    border-top: var(--rule);
    padding-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
    display: grid;
    gap: 1.5rem;
    justify-items: start;
}
.callout__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Numbered list ------------------------------------------------------------ */
/* The numerals are part of the copy here — six points, counted — so they are
   set as real content, not decoration. */
.counted { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 1rem + 3vw, 2.75rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.counted > li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.counted .num {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--flag);
    padding-top: 0.28em;
}
.counted h3 { margin-bottom: 0.6rem; }
.counted p { color: var(--ink-soft); }
.dark .counted > li { border-top-color: var(--moss); }
.dark .counted p { color: #CBD3BF; }
.dark .counted .num { color: var(--flag-soft); }

/* Figures on a light ground ------------------------------------------------ */
.tally {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border-top: 2px solid var(--ink);
}
.tally > div { padding: 1.5rem 1.5rem 1.75rem 0; border-right: var(--rule); }
.tally > div:last-child { border-right: 0; }
.tally strong {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 120%;
    font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.tally span {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: block;
    margin-top: 0.7rem;
}
.dark .tally { border-top-color: var(--moss); }
.dark .tally > div { border-right-color: var(--gum-line); }
.dark .tally span { color: #B8C0AB; }

/* Gallery ------------------------------------------------------------------ */
.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
}
.gallery button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    width: 100%;
    text-align: left;
}
.gallery .shot__frame { aspect-ratio: 4 / 5; }

/* Lightbox ----------------------------------------------------------------- */
.lightbox { display: none; }
.lightbox[open] {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    max-width: 100%;
    max-height: 100%;
    /* The backdrop carries the scrim; the dialog itself stays clear so the
       two don't stack into a darker rectangle. */
    background: transparent;
    border: 0;
}
.lightbox[open]::backdrop { background: rgba(12, 14, 8, .94); }
.lightbox img { max-width: min(100%, 1100px); max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.lightbox__caption {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    text-align: center;
    margin-top: 1rem;
}
.lightbox__btn {
    position: absolute;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox__btn--close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__btn--prev { left: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }

/* Detail cards (visit summary) --------------------------------------------- */
.detail-cards { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.detail-cards .panel { display: grid; gap: 0.55rem; align-content: start; }
.detail-cards dt {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.detail-cards dd { margin: 0; }
.detail-cards a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sand-deep); word-break: break-word; }
.detail-cards a:hover { color: var(--flag); border-bottom-color: var(--flag); }

/* Long-form copy ----------------------------------------------------------- */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.1rem; }
.dark .prose, .band .prose { color: rgba(255, 255, 255, .84); }
.callout h3 { margin-bottom: 0.25rem; }
.callout p { max-width: 68ch; }

/* Narrow screens: the diagonal scrim has no room to work, so the hero and
   photo bands fall back to a vertical one. */
@media (max-width: 880px) {
    .hero__media::after {
        background: linear-gradient(to top,
            rgba(20, 23, 15, .92) 0%,
            rgba(20, 23, 15, .82) 45%,
            rgba(20, 23, 15, .62) 75%,
            rgba(20, 23, 15, .55) 100%);
    }
    .band__media::after {
        background: linear-gradient(to top, rgba(20, 23, 15, .92), rgba(20, 23, 15, .82));
    }
    .mobile-nav .btn { display: inline-flex; }
}

/* Interior heroes crop from wider source frames; hold the horizon lower so
   the riders stay in shot. */
.hero--interior .hero__media img { object-position: 50% 62%; }

/* Skip link ---------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--flag);
    color: #fff;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.9rem 1.4rem;
}
.skip-link:focus { left: 0; }