/* Canterbury: the original file from the licence zip, served unchanged (the licence forbids modifying it). Hero name, make names, footer signature only. */
@font-face{font-family:"Canterbury";src:url(fonts/Canterbury.ttf) format("truetype");font-weight:400;font-display:swap}
/* Palette, each with its job:
   page   #F2F1EE  warm off-white floor, so the chrome greys read as metal, not as a cold UI
   chrome #C9CCD0  the bumper-chrome grey: the fabric, the open menu, tags
   steel  #8C9096  lines and borders only (2.8:1 on page, never text)
   ink    #111214  all reading text
   muted  #4F535A  secondary text (6.8:1 on page, 4.8:1 on chrome)
   blue   #1E6FD9  the soundwave in the shop's logo: the beat rim on the fabric and focus rings
   blue-ink #1959B0 the same blue darkened to 6.0:1 for links and buttons that carry text */
:root{
  --page:#F2F1EE; --chrome:#C9CCD0; --steel:#8C9096; --ink:#111214; --muted:#4F535A; --soft:#DADCDF;
  --blue:#1E6FD9; --blue-ink:#1959B0; --grey-lg:#5F636A; --edge:#767A80;   /* edge: control borders, 3.8:1 on page, 4.4:1 on white (non-text 3:1). grey-lg: names off the rail centre, 5.3:1 so any size passes */
  --go:#1D6B35; --low:#8A5A00; --red:#B3261E;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Canterbury","Old English Text MT",serif;
  --hh:56px; --top:calc(var(--hh) + env(safe-area-inset-top,0px));
  --ease:cubic-bezier(.16,1,.3,1);   /* fast start, soft stop, no bounce */
  color-scheme:light;
  font-synthesis:none;   /* no faux bold or italic */
}
*,*::before,*::after{box-sizing:border-box;touch-action:manipulation}   /* no double-tap zoom on iPhone; pinch zoom still works */
html{scroll-padding-top:calc(var(--top) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.5 var(--body);font-stretch:100%;overflow-x:clip}
@media (min-width:1024px){body{font-size:1.125rem}}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue-ink);text-underline-offset:.2em;text-decoration-thickness:1px}
@media (hover:hover){a:hover{text-decoration-thickness:2px}}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a[href],button:not(:disabled),label,select,summary,input[type=radio],input[type=checkbox],input[type=range]{cursor:pointer}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:8px;top:8px;z-index:60;padding:12px 16px;background:var(--ink);color:var(--page);transform:translateY(-300%)}
.skip:focus{transform:none}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:620px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
@media (min-width:1024px){.wrap{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}

/* type: 1.25 scale from a 17px body. caption, body, h3, h2, display: five levels */
h2{font:700 clamp(2rem,1.3rem + 3.2vw,3.6rem)/1 var(--body);font-stretch:112%;letter-spacing:-.015em;text-wrap:balance}
h3{font:650 1.33rem/1.15 var(--body);text-wrap:balance}
p{text-wrap:pretty}
.lead{max-width:44ch;color:var(--muted)}
.cap{font-size:.875rem;line-height:1.4;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
/* open items the owner still has to give: dashed chrome tag naming what is missing */
.need{display:inline-block;padding:1px 7px;border:1.5px dashed var(--muted);background:var(--soft);color:var(--ink);font:600 .85rem/1.4 var(--body);font-stretch:90%;white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:2px;background:var(--blue-ink);color:#fff;
  font:650 1rem/1.1 var(--body);font-stretch:108%;text-decoration:none;text-align:center;transition:background .15s,transform .1s}
@media (hover:hover){.btn:hover{background:#134A94;text-decoration:none}}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:hover){.btn.ghost:hover{background:var(--soft)}}
.btn:disabled{background:var(--soft);color:var(--muted);transform:none}

/* header: A1's bar, mirrored. The name on the left, cart and menu on the right */
.hdr{position:fixed;inset:0 0 auto;z-index:30;padding-top:env(safe-area-inset-top,0px);background:var(--page);border-bottom:1px solid var(--chrome);transition:background .3s var(--ease),border-color .3s var(--ease)}
.bar{display:flex;align-items:center;gap:2px;height:var(--hh)}
.brand{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;font:800 1.15rem/1 var(--body);font-stretch:118%;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.icon-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:none;color:var(--ink);transition:color .15s,transform .1s}
@media (hover:hover){.icon-btn:hover{color:var(--blue-ink)}}
.icon-btn:active{transform:scale(.93)}
.burger{margin-right:-12px}
.bars{display:grid;gap:6px;width:24px}
.bars i{display:block;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* cart: open-top basket with the count inside, two digits at most (99) */
.cart{width:52px}
.cart svg{width:36px;height:32px;overflow:visible}
.cart .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:miter;stroke-linecap:square}
.cart text{fill:currentColor;font:700 15px var(--body);font-variant-numeric:tabular-nums;text-anchor:middle}
.cart text.two{font-size:12px;letter-spacing:-.6px}

/* menu: drops from the bar and turns chrome; the header joins it */
.menu{position:fixed;left:0;right:0;top:var(--top);bottom:0;z-index:29;overflow-y:auto;overscroll-behavior:contain;background:var(--chrome);color:var(--ink);
  padding-bottom:env(safe-area-inset-bottom,0px);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .4s var(--ease),visibility 0s linear .4s}
.menu[data-open="true"]{clip-path:inset(0);visibility:visible;transition:clip-path .4s var(--ease)}
@media (min-width:1024px){.menu{bottom:auto;border-bottom:1px solid var(--steel)}}
.menu-in{display:grid;gap:32px;padding-block:12px 40px}
@media (min-width:1024px){.menu-in{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:64px;padding-block:24px 48px}}
.menu-main a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:12px;border-bottom:1px solid rgba(17,18,20,.22);text-decoration:none;color:var(--ink);
  font:750 clamp(1.7rem,1.2rem + 2vw,2.4rem)/1.1 var(--body);font-stretch:115%;transition:padding .2s var(--ease)}
@media (hover:hover){.menu-main a:hover{padding-left:8px}}
.menu-main small{font:500 .9rem/1.3 var(--body);font-stretch:100%;color:#3C4046;text-align:right}
@media (max-width:619px){.menu-main a{flex-direction:column;align-items:flex-start;gap:2px}.menu-main small{text-align:left}}
.menu-side{display:grid;gap:8px;align-content:start;color:#3C4046}
.menu-side a{color:var(--ink);font-weight:650}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
body:has(.menu[data-open="true"]) .hdr{background:var(--chrome);border-bottom-color:rgba(17,18,20,.22)}
@media (prefers-reduced-motion:reduce){.menu,.menu[data-open="true"],.hdr{transition:none}}

main{padding-top:var(--top)}

/* 1. hero: the name pressed up through a rubber sheet */
.hero{position:relative;height:calc(100svh - var(--top));min-height:440px;overflow:hidden;background:var(--page)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s var(--ease)}
.hero.gl canvas{opacity:1}
/* without WebGL (or before it starts): the same name as letterpress */
.press{position:absolute;inset:0 16px 22%;display:grid;place-content:center;text-align:center;font:400 clamp(3.4rem,1rem + 11vw,11rem)/.95 var(--script);
  color:#3C4046;text-shadow:0 1px 0 #fff,0 -1px 0 rgba(17,18,20,.35);transition:opacity .6s var(--ease)}
.press span{display:block}
@media (min-width:620px) and (min-aspect-ratio:13/10){.press span{display:inline}}
.hero.gl .press{opacity:0}
.tagline{position:absolute;left:0;right:0;bottom:10%;z-index:2;text-align:center;padding-inline:16px;
  font:750 clamp(1.35rem,.9rem + 2.4vw,2.6rem)/1.05 var(--body);font-stretch:122%;letter-spacing:-.01em;text-wrap:balance}

/* 2. the image that rises: slot for the owner's sound-logo animation */
.rise{position:relative;z-index:1;padding-top:12px}
.rising .rise{margin-bottom:-12svh}   /* a2.js lifts the photo up to 12svh as it enters; this closes the space it leaves */
.rise-fig{position:relative;margin-inline:auto;width:min(100% - 32px,1200px);will-change:transform}
.rise-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 60%}
@media (max-width:619px){.rise-fig{width:100%}.rise-fig img{aspect-ratio:4/5}}
.rise-fig figcaption{margin-top:10px;padding-inline:16px 0}
@media (min-width:620px){.rise-fig figcaption{padding-inline:0}}

/* 3. intro */
.intro{padding-block:72px 56px}
@media (min-width:1024px){.intro{padding-block:120px 96px}}
.intro p{max-width:34ch;font:500 clamp(1.4rem,1rem + 1.6vw,2.15rem)/1.25 var(--body);font-stretch:104%;letter-spacing:-.005em}
.intro .cap{margin-top:20px;max-width:none;font-size:.95rem}

/* 4. marquee: three bands, one speed, alternating directions */
.marq{position:relative;padding-block:8px 0;border-block:1px solid var(--chrome)}
.band{overflow:hidden;padding-block:6px;border-bottom:1px solid var(--chrome)}
.band:last-of-type{border-bottom:0}
.track{display:flex;width:max-content}
.track>div{display:flex;align-items:baseline;gap:.42em;padding-right:.42em;font-size:clamp(2.2rem,1.4rem + 3.6vw,4.8rem);line-height:1.08;white-space:nowrap;text-transform:uppercase}
.track b{font-weight:inherit}
.js .track{animation:marq var(--dur,40s) linear infinite}
.js .band.rev .track{animation-direction:reverse}
@keyframes marq{to{transform:translateX(-50%)}}
@media (hover:hover){.marq:hover .track{animation-play-state:paused}}
.marq:focus-within .track{animation-play-state:paused}   /* keyboard focus inside pauses too */
@media (prefers-reduced-motion:reduce){
  .js .track{animation:none;width:auto}
  .track{flex-wrap:wrap}.track>div{flex-wrap:wrap;white-space:normal}.track>div[aria-hidden]{display:none}
}

/* 5. five makes, synced to scroll */
.makes{position:relative}
.mk-head{padding-block:56px 20px}
.mk-head .lead{margin-top:10px}
.mk-name{display:block;padding:0;border:0;background:none;text-align:left;font:400 clamp(3.1rem,1.6rem + 5.4vw,6.4rem)/1 var(--script);color:var(--ink);transition:color .35s var(--ease)}
.mk-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:8px}
.mk-models{font:600 1.05rem/1.3 var(--body);font-stretch:108%;color:var(--muted)}
.mk-info a{display:inline-flex;align-items:center;min-height:44px;font-weight:650}
.mk-fig{position:relative;margin:0}
.mk-fig img,.mk-fig .slot{width:100%;aspect-ratio:4/3;object-fit:cover}
.slot{display:grid;place-content:center;justify-items:center;gap:10px;padding:16px;background:var(--soft);text-align:center;box-shadow:inset 0 0 0 1.5px var(--edge)}
.slot .need{font-size:1rem;white-space:normal}
.mk-fig figcaption{margin-top:8px}
/* plain list: no JS, reduced motion, or before the script runs */
.mk-list{display:grid;gap:56px;padding-bottom:72px}
@media (min-width:768px){.mk-list>li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:'name fig' 'info fig';column-gap:40px}
  .mk-list .mk-name{grid-area:name;align-self:end}.mk-list .mk-info{grid-area:info;align-self:start}.mk-list .mk-fig{grid-area:fig}}
@media (max-width:767px){.mk-list>li{display:flex;flex-direction:column;gap:8px}.mk-list .mk-fig{order:-1;margin-bottom:8px}}
/* synced: sticky stage, the rail notches one name at a time. a2.js sets each name's offset from the scroll position */
.sync .makes{height:540svh}   /* 0.35 screen of pre-roll, then 4.35 notches, so Pontiac holds as long as the rest */
.sync .mk-stage{position:sticky;top:var(--top);height:calc(100svh - var(--top));overflow:hidden}
.sync .mk-grid{display:grid;height:100%;grid-template-rows:auto minmax(0,1fr);gap:12px;padding-block:16px 12px}
.sync .mk-head{padding:0}
.sync .mk-head .lead{display:none}
.sync .mk-list{position:relative;display:block;height:100%;padding:0}
.sync .mk-list>li{display:block}
.sync .mk-name{position:absolute;left:0;top:0;z-index:2;white-space:nowrap;transform-origin:0 0;will-change:transform,opacity}
.sync .mk-name:not(.on){color:var(--grey-lg)}
.sync .mk-info{position:absolute;left:0;top:0;z-index:2;margin:0;opacity:0;visibility:hidden}
.sync .mk-fig{position:absolute;left:0;right:0;top:0;height:44%;display:flex;flex-direction:column;opacity:0;will-change:transform,opacity}
.sync .mk-fig img,.sync .mk-fig .slot{flex:1;min-height:0;height:auto;aspect-ratio:auto}
@media (min-width:768px){.sync .mk-fig{left:46%;top:6%;height:88%}}
#parts{padding-top:32px}

/* 6. shop: grid, sort, 3/4 per row toggle (2/3 on phones) */
.sec{padding-block:72px}
@media (min-width:1024px){.sec{padding-block:112px}}
.sec-head{display:grid;gap:12px;margin-bottom:28px}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:60px;margin-bottom:20px;border-block:1px solid var(--chrome)}
.count{margin-right:auto;font:600 .95rem/1 var(--body);color:var(--muted)}
.sort{display:flex;align-items:center;gap:8px}
.lab{font:600 .95rem/1.3 var(--body);color:var(--muted)}
.select{appearance:none;min-height:46px;padding:0 34px 0 12px;border:1.5px solid var(--edge);border-radius:2px;color:var(--ink);font:500 1rem var(--body);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111214' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center}
@media (hover:hover){.select:hover{border-color:var(--ink)}}
.grid-btn{width:46px;height:46px;border:1.5px solid var(--edge);border-radius:2px;background:#fff}
.grid-btn svg{width:22px;height:22px;fill:currentColor}
.grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:36px 14px}
@media (min-width:768px){.grid{gap:48px 24px}}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;transform-origin:0 0;min-width:0}
.card h3{font-size:1.1rem;min-height:2.3em}
.tile{position:relative;width:100%;aspect-ratio:4/3;margin-bottom:6px;background:var(--soft);overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
@media (hover:hover){.card:hover .tile img{transform:scale(1.04)}}
.card .cat{font:600 .85rem/1.3 var(--body);color:var(--muted)}
.stock{display:inline-flex;align-items:center;gap:8px;min-height:24px;font:600 .9rem/1 var(--body)}
.stock::before{content:"";flex:none;width:10px;height:10px}
.stock.in{color:var(--go)}.stock.in::before{background:var(--go)}
.stock.low{color:var(--low)}.stock.low::before{box-shadow:inset 0 0 0 1.5px var(--low);background:linear-gradient(90deg,var(--low) 50%,transparent 50%)}
.stock.special{color:var(--go)}.stock.special::before{box-shadow:inset 0 0 0 1.5px var(--go)}
.stock.out{color:var(--red)}   /* red is only ever out of stock */
.card .need{margin-bottom:8px}
.card .btn{margin-top:auto;width:100%;min-height:44px;padding:0 10px;font-size:.95rem}
.grid.dense{gap:28px 10px}
.grid.dense .card h3{font-size:.98rem}
.grid.dense .card .btn{font-size:.85rem}
@media (max-width:767px){.grid.dense .card .cat{display:none}.grid.dense .stock,.grid.dense .need{font-size:.8rem}}
.empty-grid{grid-column:1/-1;padding:32px 0;color:var(--muted)}
.all{margin-top:40px}
.fitband{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:20px;padding:14px 16px;background:var(--soft)}
.fitband p{margin-right:auto}

/* 7. builds: one photo centred, the next and last peeking */
.builds{overflow:hidden;padding-bottom:40px}
@media (min-width:1024px){.builds{padding-bottom:40px}}
.builds .sec-head{margin-bottom:24px}
/* about 70vw on phones, so roughly 45px of each neighbour shows past an 8px gap */
.car-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  --sw:min(70vw,940px,(100svh - var(--top) - 230px) * 1.5);padding-inline:calc((100% - var(--sw)) / 2);padding-block:4px 0}
@media (min-width:620px){.car-track{gap:16px}}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline-offset:-2px}
.car-track.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.slide{flex:0 0 var(--sw);scroll-snap-align:center;margin:0}
.slide-in{transform-origin:50% 50%;will-change:transform}
.slide figcaption{transition:opacity .25s}
.js .slide:not(.on) figcaption{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}   /* only the centred slide's caption shows, so no faded text */
.slide img{width:100%;aspect-ratio:3/2;object-fit:cover;-webkit-user-drag:none;user-select:none}
@media (max-width:619px){.slide img{aspect-ratio:4/5}}
/* caption: the title wraps on the left, "See the post" always sits on the right, never on top of it */
.slide figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;margin-top:6px}
.slide figcaption span{padding-top:12px;font:500 .95rem/1.3 var(--body)}
.slide figcaption a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;white-space:nowrap}
.car-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
/* the gallery button: nine upright blocks, three by three */
.gal-btn{width:52px;height:52px}
.blocks{display:grid;grid-template-columns:repeat(3,5px);grid-auto-rows:7px;gap:2px}
.blocks i{display:block;background:currentColor}
.arrow{width:52px;height:52px;border:1.5px solid var(--ink);border-radius:50%;background:none}
@media (hover:hover){.arrow:hover{background:var(--ink);color:var(--page)}}
.arrow:disabled{border-color:var(--chrome);color:var(--steel);background:none}
.arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}

/* 6b. CAROUSEL TEST (start): curved, looping, auto-spinning row. Delete this block with the test code in a2.js.
   Square corners, no filters, no fades. The arc is a small rotateY plus depth per card, set in a2.js. */
.ctest .car-ctl{margin-top:8px}
.ct{--gap:8px;--cw:62vw;position:relative;height:calc(var(--cw) * 1.25 + 72px);margin-top:4px;perspective:1200px;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}
@media (min-width:620px){.ct{--gap:12px;--cw:300px}}
.ct:focus-visible{outline-offset:-2px}
.ct.drag{cursor:grabbing}
.ct-card{position:absolute;left:calc(50% - var(--cw) / 2);top:0;width:var(--cw);aspect-ratio:4/5;margin:0;overflow:hidden;border-radius:0;background:var(--soft);backface-visibility:hidden}
.ct-card img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none}
/* the caption sits inside the photo on a solid page-colour strip: no gradient scrim, so the contrast is exact */
.ct-strip{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 10px 0 12px;background:var(--page);color:var(--ink);font:600 .95rem/1.2 var(--body)}
.ct-strip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-strip a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue-ink);text-decoration:underline;white-space:nowrap}
/* CAROUSEL TEST (end) */

/* 7b. full gallery: the Wall Layout Kit's wall and photo flight on a logo-blue floor. The header stays on top */
html.gal-open{overflow:hidden}
.gal{position:fixed;left:0;right:0;top:var(--top);bottom:0;z-index:25;background:var(--blue);color:#fff;overflow:hidden}
.wall{position:absolute;left:0;right:0;top:0;height:calc(100vh - var(--top));height:calc(100lvh - var(--top));overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.wall:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.wall-plane{position:absolute;inset:0;transform-origin:50% 50%;perspective:520px;will-change:transform}
/* explicit resets, never all:unset (the kit measured that it doubles the per-frame cost) */
.wall-cell{appearance:none;margin:0;border:0;outline:0;font:inherit;color:inherit;text-align:inherit;letter-spacing:inherit;text-transform:inherit;cursor:inherit;box-sizing:border-box;
  position:absolute;left:0;top:0;display:flex;flex-direction:column;width:var(--cw);height:var(--ch);padding:calc(var(--ch) * .05) calc(var(--cw) * .06) 0;
  border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);background:var(--blue);-webkit-tap-highlight-color:transparent;transition:background-color .5s;backface-visibility:hidden}
.wall-cell.on{background:#1A62C4}   /* white text 5.9:1 */
.wall-img{flex:1;min-height:0;overflow:hidden;border-radius:0;background:var(--c,#174f9c)}
.wall-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.wall-img img.ld{opacity:1}
.wall-cell.out img{visibility:hidden}
.wall-cap{display:flex;justify-content:space-between;align-items:center;gap:8px;height:calc(var(--ch) * .19);font:500 12px/1 var(--body);color:#fff;white-space:nowrap}
.wall-cap b{overflow:hidden;text-overflow:ellipsis;font-weight:650}
.wall-cap span{flex:none}
.wall-load{position:absolute;left:0;right:0;top:40%;text-align:center;color:#fff;font-size:1rem}
@media (max-width:619px){.wall-cap span{display:none}}
/* the Back notch: an SVG at the bottom edge, flat and empty on both sides, rising in the middle */
.notch{position:absolute;left:0;right:0;bottom:0;z-index:3;height:calc(64px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:flex-start;gap:4px;padding-top:12px;pointer-events:none}
.notch-bg{position:absolute;left:0;right:0;top:0;width:100%;height:64px;fill:var(--page)}
.notch::after{content:"";position:absolute;left:calc(50% - 132px);right:calc(50% - 132px);top:63px;bottom:0;background:var(--page)}   /* safe-area strip under the notch */
.back{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 8px;border:0;background:none;color:var(--ink);font:650 1.05rem/1 var(--body);pointer-events:auto}
@media (hover:hover){.back:hover .word{text-decoration:underline;text-underline-offset:.2em}}
.back:active{transform:translateY(1px)}
.back-arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.morph{position:relative;display:inline-grid;align-items:center;justify-items:start}
.morph>*{grid-area:1/1}
.morph .blocks{transition:opacity .2s}
.morph .blocks i{transition:transform .32s cubic-bezier(.16,1,.3,1)}
.morph .word{clip-path:inset(0 100% 0 0);transition:clip-path .3s cubic-bezier(.16,1,.3,1)}
/* grid -> line: each block slides into one row (offsets per block below) -> word: the line wipes open into "Back" */
.notch[data-s="line"] .morph .blocks i,.notch[data-s="word"] .morph .blocks i{transform:translate(var(--lx),var(--ly)) scaleY(.4)}
.notch[data-s="word"] .morph .blocks{opacity:0}
.notch[data-s="word"] .morph .word{clip-path:inset(0)}
.morph .blocks i:nth-child(1){--lx:0px;--ly:9px}.morph .blocks i:nth-child(2){--lx:-2px;--ly:9px}.morph .blocks i:nth-child(3){--lx:-4px;--ly:9px}
.morph .blocks i:nth-child(4){--lx:15px;--ly:0px}.morph .blocks i:nth-child(5){--lx:13px;--ly:0px}.morph .blocks i:nth-child(6){--lx:11px;--ly:0px}
.morph .blocks i:nth-child(7){--lx:30px;--ly:-9px}.morph .blocks i:nth-child(8){--lx:28px;--ly:-9px}.morph .blocks i:nth-child(9){--lx:26px;--ly:-9px}
.ghost-next{display:grid;place-items:center;width:44px;height:44px;color:var(--ink);opacity:0;transition:opacity .25s}
.ghost-next svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.notch[data-s="grid"] .ghost-next{opacity:1}
.notch[data-s="word"] .ghost-next{visibility:hidden}
/* the clones that fly between the carousel and the wall */
.fly{position:fixed;left:0;top:0;z-index:26;overflow:hidden;transform-origin:0 0;will-change:transform,clip-path;pointer-events:none}
.fly img{width:100%;height:100%;object-fit:cover}
/* the open photo (kit .pop*), with its caption on a page-colour strip under it */
.pop{position:fixed;inset:0;z-index:300;touch-action:none;-webkit-tap-highlight-color:transparent}
.pop[hidden]{display:none}
.pop-shield{position:fixed;inset:0;z-index:301;touch-action:none;-webkit-tap-highlight-color:transparent}
.pop-shield[hidden]{display:none}
.pop::before{content:"";position:absolute;inset:0;background:rgba(13,17,28,.72);opacity:0;transition:opacity .45s}
.pop.in::before{opacity:1}
.pop-frame{position:absolute;margin:0;overflow:hidden;background:#174f9c;transform-origin:0 0;will-change:transform,clip-path}
.pop-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pop-frame .hi{opacity:0;transition:opacity .35s}
.pop-frame .hi.ld{opacity:1}
.pop-cap{position:fixed;z-index:302;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;margin:0;padding:4px 14px;background:var(--page);color:var(--ink);
  font:600 1rem/1.25 var(--body);opacity:0;translate:0 -10px;transition:opacity .2s,translate .2s}
.pop-cap a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue-ink);text-decoration:underline;white-space:nowrap}
.pop-cap.in{opacity:1;translate:0 0;transition:opacity .35s .2s,translate .45s .2s cubic-bezier(.2,.7,0,1)}
@media (prefers-reduced-motion:reduce){.pop-cap,.pop-cap.in,.pop::before,.morph *,.ghost-next{transition:none}}

/* 8. book: one action block, a soft panel with the white inputs on it */
.split{display:grid;gap:32px}
.book-panel{padding-block:32px 40px;background:var(--soft)}
@media (min-width:1024px){.book-panel{padding-block:56px}}
.book-panel .day.appt{background:var(--page)}
.book-panel .deposit{border-color:var(--steel)}
#book{padding-block:0}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:72px;align-items:start}.split>.side{position:sticky;top:calc(var(--top) + 32px)}}
.side figure{margin-top:24px}
.side figure img{aspect-ratio:4/3;object-fit:cover}
.side figcaption{margin-top:8px}
.form{display:grid;gap:32px}
fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
legend,.field>label{padding:0;margin-bottom:10px;font:650 1.15rem/1.2 var(--body);font-stretch:108%}
.input{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--edge);border-radius:2px;background:#fff;font-size:1rem;transition:border-color .15s}
textarea.input{min-height:96px;padding:12px 14px;resize:vertical}
@media (hover:hover){.input:hover{border-color:var(--ink)}}
.input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--ink)}
.input[aria-invalid="true"]{border-color:var(--red)}
.two{display:grid;gap:20px}
@media (min-width:620px){.two{grid-template-columns:1fr 1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;flex:none}
.chip input{position:absolute;inset:0;opacity:0;margin:0}
.chip span{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 13px;border:1.5px solid var(--edge);border-radius:2px;background:#fff;font:500 1rem/1 var(--body);transition:border-color .15s,background .15s}
.chip span::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid currentColor}
@media (hover:hover){.chip:hover span{border-color:var(--ink)}}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--page)}
.chip input:checked+span::before{background:var(--page);border-color:var(--page)}
.chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
/* calendar */
.cal{max-width:30rem}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal-top h3{font-size:1.1rem}
.cal-nav{width:44px;height:44px;border:1.5px solid var(--edge);border-radius:2px;background:#fff}
.cal-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover){.cal-nav:not(:disabled):hover{border-color:var(--ink)}}
.cal-nav:disabled{color:var(--steel);border-color:var(--chrome)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-dow{padding-block:4px;text-align:center;font:600 .85rem/1 var(--body);color:var(--muted)}
.day{position:relative;display:grid;place-items:center;min-height:46px;padding:0;border:1.5px solid transparent;border-radius:2px;background:#fff;font-weight:600;font-variant-numeric:tabular-nums}
@media (hover:hover){.day:not(:disabled):hover{border-color:var(--ink)}}
.day:disabled{background:none;color:#9A9EA4;font-weight:400}
.day.appt{background:var(--soft);color:var(--ink)}
.day.appt::after{content:"";position:absolute;left:50%;bottom:6px;width:14px;height:2px;margin-left:-7px;background:var(--muted)}
.day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--page)}
.cal-key{margin-top:10px}
/* time slider */
.time{display:grid;gap:10px;max-width:30rem}
.time output{font:700 1.6rem/1 var(--body);font-stretch:112%;font-variant-numeric:tabular-nums}
.range{width:100%;height:44px;margin:0;background:none;-webkit-appearance:none;appearance:none}
.range::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--ink) var(--p,0%),var(--edge) var(--p,0%))}
.range::-moz-range-track{height:4px;background:var(--edge)}
.range::-moz-range-progress{height:4px;background:var(--ink)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border:3px solid var(--page);border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.range::-moz-range-thumb{width:24px;height:24px;border:3px solid var(--page);border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.range:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ticks{display:flex;justify-content:space-between}
.deposit{padding:14px 0;border-block:1px solid var(--chrome)}
.msg:empty{display:none}
.msg{padding:12px 14px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue-ink)}
.msg.err{box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red)}
.form .btn{justify-self:start}
.field-err{color:var(--red);font-size:.95rem}
.field-err:empty{display:none}

/* 9. visit: phone reads heading, photo (inside the margins), facts. Desktop keeps the photo left, facts right */
#visit{padding-top:56px}
.visit{display:grid;gap:24px;grid-template-areas:"h" "fig" "facts"}
.visit>h2{grid-area:h}.visit>figure{grid-area:fig}.visit-facts{grid-area:facts}
.visit figure img{aspect-ratio:1;object-fit:cover}
@media (min-width:1024px){.visit{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:auto 1fr;grid-template-areas:"h h" "fig facts";column-gap:72px;row-gap:24px;align-items:start}.visit>h2{align-self:end}}
.facts{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);border-top:1.5px solid var(--ink)}
.facts dt,.facts dd{padding-block:14px;border-bottom:1px solid var(--chrome)}
.facts dt{font-weight:600;color:var(--muted)}
.facts dd a{display:inline-flex;align-items:center;min-height:44px;margin-block:-10px;font-weight:600}
.visit figcaption{margin-top:8px}

/* 10. stories: placeholders until the shop writes them */
.stories{display:grid;gap:20px}
@media (min-width:620px){.stories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.stories{grid-template-columns:5fr 4fr 4fr}}
.story{display:grid;gap:10px;align-content:start}
.story .ph{display:grid;place-items:center;aspect-ratio:16/9;background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--edge)}
@media (min-width:1024px){.story .ph{aspect-ratio:4/3}.story:first-child .ph{aspect-ratio:4/3.4}}
.more{margin-top:32px}

/* 11. footer */
footer{padding-block:72px calc(40px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--chrome)}
footer .mark{font:400 clamp(3rem,1rem + 10vw,10rem)/.9 var(--script);color:var(--page);margin-bottom:36px}
.foot{display:grid;gap:24px}
@media (min-width:768px){.foot{grid-template-columns:repeat(3,minmax(0,1fr))}}
footer a{color:var(--page);display:inline-flex;align-items:center;min-height:44px}
footer :focus-visible{outline-color:#6EA8FF}
.sig{margin-top:40px;color:var(--steel)}
.sig a{color:var(--chrome)}

/* cart sheet: native modal dialog */
.sheet{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100%);max-width:none;height:100%;max-height:none;padding:0;border:0;border-left:1px solid var(--chrome);background:var(--page);color:var(--ink)}
.sheet[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.sheet::backdrop{background:rgba(17,18,20,.55)}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:env(safe-area-inset-top,0px) 8px 0 20px;border-bottom:1px solid var(--chrome)}
.sheet-top h2{font-size:1.6rem}
.x svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8}
.lines{overflow:auto;padding:4px 20px 16px}
.line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;border-bottom:1px solid var(--chrome)}
.line .nm{display:grid;gap:4px;margin-right:auto;min-width:0}
.line .thumb{flex:none;width:64px;aspect-ratio:4/3;object-fit:cover}
.qty{display:flex;align-items:center;gap:4px}
.qty button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--edge);border-radius:2px;background:#fff;font-size:1.2rem;transition:border-color .15s,transform .1s}
@media (hover:hover){.qty button:hover{border-color:var(--ink)}}
.qty button:active{transform:translateY(1px)}
.qty span{min-width:2.2ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.empty{display:grid;gap:14px;justify-items:start;padding-top:20px}
.sheet-bottom{display:grid;gap:14px;padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--chrome);background:var(--soft)}
.sheet-bottom legend{font-size:1rem;margin-bottom:8px}
.sheet-bottom .btn{width:100%}
.subtotal{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600}
.toast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;max-width:420px;margin-inline:auto;padding:16px 18px;background:var(--ink);color:var(--page);font-weight:600}

.page-top{padding-top:44px}
.page-h{font:750 clamp(2.4rem,1.4rem + 4vw,4.2rem)/1 var(--body);font-stretch:118%;letter-spacing:-.015em}

/* tap areas: rail names next to the selected one get 6px more above and below (still 44px+ once scaled to .78); only the centred Carousel Test card's link is live */
.sync .mk-name::before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.ct-card:not(.on) .ct-strip a{pointer-events:none}

/* section titles as page breakers: big condensed caps */
h2.brk{font:800 clamp(4.2rem,1.4rem + 13vw,13.5rem)/.84 "Big Shoulders Display",var(--body);letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
#book h2.brk{margin-bottom:28px}