/* M-15 Motor Club — gallery pages (gallery/ and gallery/<collection>/).
   Tokens and header/footer mirror index.html; keep the two in step. */
@font-face{
font-family:'OC Highway VAR2';
src:url('../fonts/OCHighwayVAR2.woff2') format('woff2-variations'),
url('../fonts/OCHighwayVAR2.woff2') format('woff2');
font-weight:100 900; font-stretch:75% 125%; font-display:swap;
}
:root{
--base:#16140E; --base-2:#1D1A12; --panel:#232014;
--gold:#E5B534; --gold-hover:#F2C965; --gold-dim:#A9822A; --on-gold:#16140E; --focus:#E5B534;
--cream:#F4EFE6; --cream-lede:#E3DBCB; --cream-soft:#DCD4C4; --muted:#B6AE9D; --faint:#8C8678;
--line:rgba(229,181,52,.22); --line-soft:rgba(244,239,230,.07); --control-border:rgba(244,239,230,.38);
--header-bg:rgba(22,20,14,.86); --gold-highlight:rgba(229,181,52,.35); --gold-wash:rgba(229,181,52,.05);
--font-sans:'OC Highway VAR2',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:48px; --space-8:64px; --space-9:88px;
--radius-sm:3px; --radius-md:5px; --ease:cubic-bezier(.37,0,.63,1); --maxw:1120px;
}
*{box-sizing:border-box}
body{
margin:0; background:var(--base); color:var(--cream); font-family:var(--font-sans);
font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
font-weight:normal; font-variation-settings:'wdth' 190;
}
h1,h2,h3{font-family:var(--font-sans); font-weight:normal; font-variation-settings:'wdth' 270; line-height:1.04; margin:0; letter-spacing:-.005em}
p{margin:0 0 var(--space-4)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--space-5)}

/* header (always visible here; the home page reveals it on scroll) */
header.top{position:sticky; top:0; z-index:50; background:var(--header-bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); height:78px}
.mark{display:flex; align-items:center; text-decoration:none}
.mark svg{height:38px; width:auto; flex:none; display:block}
.nav{display:flex; align-items:center; gap:var(--space-6)}
.navlink{font-size:15px; line-height:1.6; color:var(--muted); text-decoration:none; font-variation-settings:'wdth' 220; transition:color .15s ease}
.navlink:hover,.navlink[aria-current]{color:var(--gold)}
.btn{display:inline-block; padding:var(--space-3) var(--space-5); border-radius:var(--radius-sm); text-decoration:none; font-size:15px; line-height:1.6; font-variation-settings:'wdth' 220; letter-spacing:.02em; border:1px solid var(--gold); transition:background .16s ease, color .16s ease, border-color .16s ease}
.btn-solid{background:var(--gold); color:var(--on-gold)}
.btn-solid:hover{background:var(--gold-hover); border-color:var(--gold-hover)}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--control-border)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold)}

/* page intro */
.intro{padding:var(--space-8) 0 var(--space-7)}
.crumb{font-size:13px; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 220; color:var(--muted); margin:0 0 var(--space-4)}
.crumb a{color:var(--gold); text-decoration:none}
.crumb a:hover{text-decoration:underline; text-underline-offset:4px}
.intro h1{font-size:clamp(40px,6.4vw,76px); margin-bottom:var(--space-5)}
.intro h1 .hl{background:linear-gradient(to top,var(--gold-highlight) 36%,transparent 36%); padding:0 4px; margin:0 -4px}
.intro .lede{font-size:20px; line-height:1.55; color:var(--cream-lede); max-width:52ch; margin:0}
.meta{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin-top:var(--space-5); font-size:13px; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 220; color:var(--gold)}
.meta span+span{color:var(--muted)}

/* collection cards (gallery/) */
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); padding-bottom:var(--space-9)}
.card{display:flex; flex-direction:column; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:border-color .16s ease}
.card:hover{border-color:var(--gold)}
.card-img{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--base-2)}
.card-img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.card:hover .card-img img{transform:scale(1.03)}
.card-count{position:absolute; right:var(--space-3); bottom:var(--space-3); background:rgba(22,20,14,.82); border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--space-1) var(--space-3); font-size:13px; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 220; color:var(--cream)}
.card-body{padding:var(--space-5) var(--space-6) var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); flex:1}
.card-kicker{font-size:13px; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 220; color:var(--gold); margin:0}
.card h2{font-size:clamp(26px,3vw,34px)}
.card-date{color:var(--muted); font-size:15px; line-height:1.6; margin:0}
.card-go{white-space:nowrap;margin-top:auto; padding-top:var(--space-4); color:var(--gold); font-size:15px; line-height:1.6; font-variation-settings:'wdth' 220; text-decoration:underline; text-underline-offset:4px}

/* photo grid (gallery/<collection>/) */
.grid{columns:3 280px; column-gap:var(--space-4); padding-bottom:var(--space-8)}
.tile{display:block; margin:0 0 var(--space-4); break-inside:avoid; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); background:var(--panel); cursor:zoom-in}
.tile img{display:block; width:100%; height:auto; transition:opacity .2s ease}
.tile:hover img{opacity:.88}
.empty{border:1px dashed var(--line); border-radius:var(--radius-md); padding:var(--space-7); text-align:center; color:var(--muted)}

/* closing panel */
.next{border-top:1px solid var(--line); background:var(--base-2); padding:var(--space-8) 0}
.next .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-5)}
.next h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:var(--space-2)}
.next p{margin:0; color:var(--cream-soft)}
.next h2:last-child{margin-bottom:0}
.next-ctas{display:flex; flex-wrap:wrap; gap:var(--space-3)}

/* lightbox */
.lb{position:fixed; inset:0; z-index:100; display:none; background:#0C0B08; color:var(--cream)}
.lb.open{display:flex; flex-direction:column}
.lb-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-5); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 220; color:var(--muted)}
.lb-stage{position:relative; flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding:0 var(--space-8) var(--space-5); touch-action:pan-y}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--radius-sm); user-select:none; -webkit-user-drag:none}
.lb button,.lb-dl{font-family:inherit; background:rgba(35,32,20,.85); color:var(--cream); border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s ease, color .15s ease}
.lb button:hover,.lb-dl:hover{border-color:var(--gold); color:var(--gold)}
.lb-actions{display:flex; gap:var(--space-2)}
.lb-close,.lb-dl{display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); font-size:13px; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 220; text-decoration:none}
.lb-dl svg{width:14px; height:14px; flex:none}
.lb-prev,.lb-next{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:22px; line-height:1}
.lb-prev{left:var(--space-4)} .lb-next{right:var(--space-4)}
html.lb-lock,html.lb-lock body{overflow:hidden}

/* footer */
footer{border-top:1px solid var(--line); padding:var(--space-7) 0 var(--space-8); color:var(--muted); font-size:15px; line-height:1.6}
footer .frow{display:flex; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; align-items:flex-start}
footer .mark svg{height:32px}
footer address{font-style:normal; margin-top:var(--space-4); line-height:1.75}
footer a{color:var(--gold); text-decoration:none}
footer a:hover{text-decoration:underline}
.fblurb{max-width:34ch; margin-top:var(--space-7)}
.fblurb p{margin:0 0 var(--space-3)}
.small{font-size:13px; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 220; color:var(--faint); margin:var(--space-6) 0 0}

@media (max-width:820px){
header.top .wrap{height:68px}
.nav{gap:var(--space-4)}
.intro{padding:var(--space-7) 0 var(--space-6)}
.cards{grid-template-columns:1fr; gap:var(--space-5)}
.grid{columns:2 150px; column-gap:var(--space-3)}
.tile{margin-bottom:var(--space-3)}
.lb-stage{padding:0 var(--space-3) var(--space-4)}
.lb-prev,.lb-next{top:auto; bottom:var(--space-5); transform:none}
}
@media (max-width:420px){ .navlink{display:none} .navlink[aria-current]{display:inline} }
@media (prefers-reduced-motion: reduce){ .card-img img,.tile img{transition:none} }