/* =====================================================================
   TAKE 5 — COLLECTION PAGE
   Loaded only by /work/take-5-oil-change.html. Uses the site tokens from
   tokens.css and the shared chrome from main.css; adds nothing global.

   One brand, five sites. A single carousel engine (.t5-car) rendered in
   five presentations chosen per location via data-layout:
     cine       full-bleed crossfade, the widest frame on the page
     editorial  asymmetric — stage left, running caption column right
     thumbs     stage with a thumbnail filmstrip beneath
     rail       native scroll-snap rail, swipe-first
     single     one static frame (used where only one photo exists)
   ===================================================================== */

/* ---- hero ---- */
.t5-hero{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg-dark)}
.t5-hero__media{position:absolute;inset:0}
.t5-hero__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.t5-hero__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,26,.86),rgba(26,26,26,.22) 58%,rgba(26,26,26,.46))}
.t5-hero__inner{position:relative;z-index:2;width:100%;color:var(--ink-inverse);padding-block:clamp(38px,7vh,86px)}
.t5-hero__kicker{margin:0 0 clamp(14px,2.4vh,26px);font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:rgba(245,242,237,.72)}
.t5-hero__title{font-family:var(--font-display);font-weight:300;font-size:clamp(2.5rem,8.6vw,7.5rem);line-height:.88;letter-spacing:var(--tracking-display);margin:0}
.t5-hero__statement{margin:clamp(20px,3.4vh,38px) 0 0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.05rem,2.1vw,1.85rem);line-height:1.24;letter-spacing:var(--tracking-display);max-width:22ch;color:rgba(245,242,237,.92)}
.t5-hero__meta{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,70px);margin:clamp(26px,4vh,46px) 0 0;padding-top:clamp(16px,2.4vh,24px);border-top:1px solid rgba(245,242,237,.24)}
.t5-hero__meta div{display:flex;flex-direction:column;gap:5px}
.t5-hero__meta dt{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:rgba(245,242,237,.6)}
.t5-hero__meta dd{margin:0;font-size:var(--text-small);letter-spacing:.04em}

/* ---- page intro ---- */
.t5-intro{padding-block:clamp(56px,11vh,140px)}
.t5-intro__num{grid-column:1/2;font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2vw,2rem);color:var(--accent);line-height:1}
.t5-intro__body{grid-column:2/-1}
.t5-intro__title{font-family:var(--font-display);font-weight:300;font-size:clamp(1.9rem,4vw,3.4rem);letter-spacing:var(--tracking-display);line-height:1.02;margin:.35em 0 .7em;max-width:18ch}
.t5-intro__text{max-width:62ch}
.t5-intro__text p+p{margin-top:1.15em}
@media (max-width:900px){.t5-intro__num,.t5-intro__body{grid-column:1/-1}}

/* ---- floating location navigation ---- */
.t5-nav{
  position:fixed;right:clamp(14px,2.2vw,34px);top:50%;transform:translateY(-50%);
  z-index:var(--z-toolbar);display:flex;flex-direction:column;gap:12px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.t5-nav.is-on{opacity:1;visibility:visible}
.t5-nav__item{
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
  background:none;border:0;padding:3px 0;cursor:pointer;color:var(--muted);
  font-family:var(--font-body);font-weight:500;font-size:var(--text-micro);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  transition:color .3s var(--ease);
}
.t5-nav__label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .45s var(--ease),opacity .3s var(--ease)}
.t5-nav__item:hover .t5-nav__label,.t5-nav__item:focus-visible .t5-nav__label,.t5-nav__item.is-active .t5-nav__label{max-width:190px;opacity:1}
.t5-nav__num{font-variant-numeric:tabular-nums}
.t5-nav__dash{display:block;width:13px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.t5-nav__item.is-active{color:var(--ink)}
.t5-nav__item.is-active .t5-nav__dash{width:30px;background:var(--accent)}

/* ---- one location chapter ---- */
.t5-loc{padding-block:clamp(48px,9vh,116px);scroll-margin-top:72px}
.t5-loc__head{margin-bottom:clamp(22px,3.6vh,44px)}
.t5-loc__rule{display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);border-top:1px solid var(--line);padding-top:clamp(14px,2vh,22px)}
.t5-loc__num{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,7vw,5.6rem);line-height:.82;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;flex:0 0 auto}
.t5-loc__id{flex:1 1 auto;min-width:0}
.t5-loc__name{display:block;font-family:var(--font-body);font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);margin-bottom:.5em}
.t5-loc__city{font-family:var(--font-display);font-weight:300;font-size:clamp(1.4rem,3.1vw,2.6rem);letter-spacing:var(--tracking-display);line-height:1.04;margin:0}
.t5-loc__desc{max-width:56ch;margin:clamp(14px,2.2vh,22px) 0 0;color:var(--ink-soft)}
.t5-loc__note{margin:1em 0 0;font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}

/* ---- the carousel engine ---- */
.t5-stage{position:relative;overflow:hidden;background:var(--bg-media);aspect-ratio:3/2}
.t5-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .85s var(--ease),visibility .85s var(--ease)}
.t5-slide.is-active{opacity:1;visibility:visible}
.t5-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.045);transition:transform 1.35s var(--ease)}
.t5-slide.is-active img{transform:scale(1)}
.t5-stage--zoom{cursor:zoom-in}

.t5-bar{display:flex;align-items:center;gap:clamp(12px,1.8vw,22px);margin-top:clamp(12px,1.8vh,20px)}
.t5-bar__count{flex:0 0 auto;font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);color:var(--muted);font-variant-numeric:tabular-nums}
.t5-bar__count b{font-weight:500;color:var(--ink)}
.t5-bar__cap{flex:1 1 auto;min-width:0;font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t5-bar__rail{flex:1 1 auto;height:1px;background:var(--line);position:relative;overflow:hidden}
.t5-bar__rail i{position:absolute;inset:0;background:var(--accent);transform-origin:left center;transform:scaleX(0);transition:transform .5s var(--ease)}
.t5-bar__nav{flex:0 0 auto;display:flex;gap:8px}
.t5-btn{
  width:46px;height:46px;min-width:44px;min-height:44px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease);
}
.t5-btn:hover:not([disabled]){border-color:var(--accent);background:rgba(0,0,0,.03)}
.t5-btn[disabled]{opacity:.28;cursor:default}
.t5-btn svg{width:22px;height:9px;display:block}

/* editorial — stage left, running caption column right */
.t5-side{min-width:0}
.t5-side__cap{font-family:var(--font-display);font-weight:300;font-size:clamp(1.1rem,1.8vw,1.55rem);letter-spacing:var(--tracking-display);line-height:1.15;margin:0 0 .6em}
.t5-side__idx{font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:1023px){.t5-side{display:none}}
@media (min-width:1024px){
  .t5-car[data-layout="editorial"] .t5-car__row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:var(--gutter);align-items:end}
  .t5-car[data-layout="editorial"] .t5-stage{aspect-ratio:4/3}
  .t5-car[data-layout="editorial"] .t5-side{padding-bottom:clamp(8px,1.4vh,18px)}
  .t5-car[data-layout="editorial"] .t5-bar__cap{display:none}
}

/* cine — the widest frame on the page */
.t5-car[data-layout="cine"] .t5-stage{aspect-ratio:16/9}

/* thumbs — filmstrip beneath the stage */
.t5-thumbs{display:flex;gap:8px;margin-top:14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.t5-thumbs::-webkit-scrollbar{display:none}
.t5-thumb{flex:0 0 clamp(66px,8.5vw,116px);aspect-ratio:4/3;padding:0;border:0;background:var(--bg-media);cursor:pointer;opacity:.4;transition:opacity .35s var(--ease);position:relative}
.t5-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.t5-thumb.is-active{opacity:1}
.t5-thumb.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent)}
.t5-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* rail — native scroll-snap, swipe first */
.t5-rail{display:flex;gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-block:2px}
.t5-rail::-webkit-scrollbar{display:none}
.t5-rail__item{flex:0 0 min(80vw,740px);scroll-snap-align:center;margin:0}
.t5-rail__frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-media);cursor:zoom-in}
.t5-rail__item img{width:100%;height:100%;object-fit:cover;display:block}
.t5-rail__cap{margin-top:9px;font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.t5-rail__cap b{font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}

/* stack — a full-bleed sequence; the widest the page ever gets */
.t5-car[data-layout="stack"]{width:100%}
.t5-car[data-layout="stack"] .t5-stage{aspect-ratio:16/9}
@media (min-width:900px){
  .t5-car[data-layout="stack"] .t5-stage{height:80vh;aspect-ratio:auto}
}

/* single — one frame, no controls (kept for locations with one photograph) */
.t5-car[data-layout="single"] .t5-stage{aspect-ratio:16/9}

/* ---- collection summary ---- */
.t5-sum{padding-block:clamp(56px,11vh,140px);border-top:1px solid var(--line)}
.t5-sum__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(20px,3vw,48px);margin:0}
.t5-sum__cell dt{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);margin-bottom:.5em}
.t5-sum__cell dd{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.2rem,2.2vw,1.9rem);letter-spacing:var(--tracking-display);line-height:1.1}

/* ---- full-screen viewer ---- */
.t5-lb{position:fixed;inset:0;z-index:var(--z-transition);background:rgba(20,19,18,.97);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(12px,2vw,26px)}
.t5-lb.is-open{opacity:1;visibility:visible}
.t5-lb__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);color:rgba(245,242,237,.78);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.t5-lb__where b{font-weight:500;color:var(--ink-inverse)}
.t5-lb__close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,242,237,.3);background:none;color:var(--ink-inverse);display:grid;place-items:center;cursor:pointer}
.t5-lb__close:hover{border-color:var(--ink-inverse)}
.t5-lb__close svg{width:16px;height:16px}
.t5-lb__figure{margin:0;display:grid;place-items:center;min-height:0;padding-block:clamp(10px,2vh,22px)}
.t5-lb__figure img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.t5-lb__bot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);color:rgba(245,242,237,.7);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.t5-lb__nav{display:flex;gap:10px}
.t5-lb .t5-btn{border-color:rgba(245,242,237,.3);color:var(--ink-inverse)}
.t5-lb .t5-btn:hover:not([disabled]){border-color:var(--ink-inverse);background:rgba(245,242,237,.08)}
body.t5-lb-open{overflow:hidden}

/* ---- responsive ---- */
@media (max-width:1023px){
  .t5-nav{
    top:auto;bottom:0;right:0;left:0;transform:none;flex-direction:row;justify-content:flex-start;
    gap:0;overflow-x:auto;scrollbar-width:none;
    background:var(--header-bg);border-top:1px solid var(--line);
    padding:9px var(--pad-x);
  }
  .t5-nav::-webkit-scrollbar{display:none}
  .t5-nav__item{flex:0 0 auto;padding:6px 12px;gap:7px;justify-content:flex-start}
  .t5-nav__dash{display:none}
  .t5-nav__label{max-width:none;opacity:1;overflow:visible}
}
@media (max-width:767px){
  .t5-hero{min-height:82vh;min-height:82svh}
  .t5-stage,
  .t5-car[data-layout="cine"] .t5-stage,
  .t5-car[data-layout="single"] .t5-stage{aspect-ratio:4/3}
  .t5-rail__item{flex:0 0 86vw}
  .t5-bar__cap{display:none}
  .t5-bar__rail{min-width:40px}
  .t5-loc__rule{flex-wrap:wrap;gap:10px}
  .t5-sum__grid{grid-template-columns:1fr 1fr}
  /* keep the page end clear of the fixed mobile location bar */
  .t5-tail{padding-bottom:66px}
}
@media (prefers-reduced-motion:reduce){
  .t5-slide img,.t5-slide.is-active img{transform:none}
}