/* The shoe wall: the home page's hero. One 3:2 scene (the rendered brick wall, four downlights at 12.5/37.5/62.5/87.5%,
   eight oak shelves locked under them, the floor at the foot), sized by the hero's HEIGHT so the shelves always sit in
   the same place under the headline, whatever the screen. A screen wider than the scene sees the brick carry on past its
   edges, mirrored and falling into shadow; a screen narrower than it gets a shorter hero, so no shoe is ever cut off.
   Phones pan: the wall is two screens wide, two bays at a time. */
.hero{position:relative;overflow:hidden;container-type:size;background:var(--wall-base);
  height:min(clamp(520px,calc(100svh - var(--chrome,64px)),960px),66.67vw)}
.pan{position:absolute;inset:0;overflow:hidden}
/* no will-change: with it the browser draws the wall once at its zoomed-out size and stretches that picture when the camera
   walks in, which is what made the brick soft up close. Without it, it redraws from the full images once the camera stops. */
.cam{position:absolute;inset:0;transform-origin:0 0;transition:transform var(--cam,1100ms) var(--ease,cubic-bezier(.65,0,.2,1))}
.scene{--wimg:var(--plate);position:absolute;bottom:0;height:100cqh;width:150cqh;left:calc(50% - 75cqh);background:var(--wimg) center/100% 100% no-repeat;isolation:isolate}
/* the wall past the plate's edges: the same brick, mirrored so the seam is invisible, falling off into the shop's dark */
/* overlapping the plate by 3px: placed edge to edge at fractional pixel positions they left a hairline gap, a dark line
   down each seam. The mirrored copy's edge is the plate's own edge, so the overlap cannot show. Behind the scene's own layers (z-index -1 inside its isolated group), so the vignette and grain run across the seams */
.scene::before,.scene::after{content:"";position:absolute;top:0;bottom:0;width:100%;transform:scaleX(-1);pointer-events:none;z-index:-1}
/* Each copy is mirrored, so in its own coordinates the seam is its START edge: the shadow starts at nothing there and deepens
   away from it. The vignette below runs across the scene AND both copies, one layer, so the seam has no step. */
.scene::before{right:calc(100% - 3px);background:linear-gradient(to right,rgba(60,38,18,0),rgba(60,38,18,.22) 50%,rgba(60,38,18,.42)),var(--wimg) center/100% 100% no-repeat}
.scene::after{left:calc(100% - 3px);background:linear-gradient(to left,rgba(60,38,18,0),rgba(60,38,18,.22) 50%,rgba(60,38,18,.42)),var(--wimg) center/100% 100% no-repeat}
/* the light the page draws: each downlight's pool carried down its bay, and the room falling off at its corners */
.scene .pools{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:var(--pool-a,.85);
  background:radial-gradient(10.5% 46% at 12.5% 34%,var(--pool),transparent 72%),radial-gradient(10.5% 46% at 37.5% 34%,var(--pool),transparent 72%),
    radial-gradient(10.5% 46% at 62.5% 34%,var(--pool),transparent 72%),radial-gradient(10.5% 46% at 87.5% 34%,var(--pool),transparent 72%)}
/* up close the wall swaps to its 4096px version (Real-ESRGAN, 2026-11-05, with the original's colour and light put back),
   loaded by wall.js once the page has settled */
.zoomed .scene{--wimg:var(--plate-hi)}
.scene .vig{position:absolute;top:0;bottom:0;left:-100%;right:-100%;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(43.33% 100% at 50% 22%,transparent 52%,var(--vig) 100%)}
@media (max-width:760px){.scene .vig{left:0;right:0;background:radial-gradient(130% 100% at 50% 22%,transparent 52%,var(--vig) 100%)}}
/* the wall's surface up close: a real macro photograph of limewash on brick (studio, 2026-11-05), kept as a seamless
   detail map of its fine texture only (grey = no change), laid over the wall at the brick's own scale. It is what keeps
   the brick crisp when the camera walks in; the joints and the light stay the wall's own. */
.scene .grain{position:absolute;top:0;bottom:0;left:-100%;right:-100%;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:url(/shop/img/limewash.webp) 0 0/14.4cqh 14.4cqh}
.scene .dim{position:absolute;inset:0;background:#1a1410;opacity:0;pointer-events:none;transition:opacity 1100ms cubic-bezier(.3,0,.2,1)}

.racks{position:absolute;inset:0}
.slot{position:absolute;width:17%;transition:opacity 500ms ease}
.slot:nth-child(4n+1){left:4%}.slot:nth-child(4n+2){left:29%}.slot:nth-child(4n+3){left:54%}.slot:nth-child(4n+4){left:79%}
.slot:nth-child(-n+4){top:var(--row1,53%)}.slot:nth-child(n+5){top:var(--row2,77%)}
.slot .hit{position:absolute;left:-4%;right:-4%;top:calc(-1 * var(--hit-up,700%));bottom:calc(-1 * var(--hit-down,240%));z-index:6;background:none;border:0;cursor:pointer;padding:0}
.slot .hit:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.slot.empty .hit{display:none}

/* the shelf: rendered oak near eye level, its shadow on the wall, a light strip under its front */
.shelf{position:relative;width:100%;aspect-ratio:1458/100;z-index:3}
.slab{position:absolute;inset:0;background:url(/shop/img/oak-level.webp) 0 0/100% 100% no-repeat}
.drop{position:absolute;left:2%;right:2%;top:70%;height:clamp(18px,3.4cqw,52px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(40,28,16,.5),rgba(40,28,16,.2) 30%,transparent);filter:blur(3px);
  -webkit-mask:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.glow{position:absolute;left:-6%;right:-6%;top:92%;height:clamp(50px,9cqw,140px);pointer-events:none;opacity:0;transition:opacity 480ms ease;
  background:radial-gradient(52% 100% at 50% 0,color-mix(in srgb,var(--glow) 60%,transparent),color-mix(in srgb,var(--glow) 20%,transparent) 36%,transparent 72%);mix-blend-mode:screen}
.edge{position:absolute;left:4%;right:4%;bottom:-1px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--glow) 50%,#fff);opacity:0;transition:opacity 480ms ease}

/* the shoe: its sole on the shelf's top face, lit from above like the wall, a contact shadow on the oak, a cast on the brick */
.shoe{position:absolute;left:9%;width:82%;bottom:95.5%;z-index:4;pointer-events:none;transition:transform 520ms cubic-bezier(.3,.7,.2,1)}
.shoe img{display:block;width:100%;height:auto}
.shoe .pic{position:relative;z-index:2}
.shoe .cast{position:absolute;inset:0;z-index:0;filter:brightness(0) blur(9px);opacity:.3;transform:translate(2%,9%) scale(1.02,.97)}
.shoe .lit{position:absolute;inset:0;z-index:3;pointer-events:none;-webkit-mask:var(--src) 0 0/100% 100% no-repeat;mask:var(--src) 0 0/100% 100% no-repeat;
  background:linear-gradient(to bottom,rgba(255,232,200,.22) 0%,rgba(255,240,222,.14) 45%,rgba(80,52,26,.42) 100%);mix-blend-mode:multiply}
.shoe .contact{position:absolute;z-index:1;left:2%;right:3%;bottom:-3px;height:7px;border-radius:50%;background:radial-gradient(closest-side,rgba(24,14,6,.85),rgba(24,14,6,.35) 60%,transparent);filter:blur(1.2px)}
.shoe .contact::after{content:"";position:absolute;left:-6%;right:-8%;top:-4px;bottom:-6px;border-radius:50%;background:radial-gradient(closest-side,rgba(24,14,6,.3),transparent);filter:blur(4px)}

/* the bay's own light, turned up on hover */
.spot{position:absolute;left:-34%;right:-34%;bottom:40%;height:1100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 520ms ease;
  background:radial-gradient(42% 50% at 50% 66%,rgba(255,224,170,.95),transparent 72%);mix-blend-mode:soft-light}
.slot.on .spot{opacity:1}
.slot.on .glow{opacity:.85}
.slot.on .edge{opacity:1;box-shadow:0 0 4px 1px var(--glow),0 0 14px 3px color-mix(in srgb,var(--glow) 60%,transparent)}
.slot.on .shoe{transform:translateY(-1.5%)}
.zoomed .slot:not(.on){opacity:.28}
/* up close only the chosen pair keeps its name: the row above's paint would otherwise show in pieces round the tag */
.zoomed .slot:not(.on) .paint{opacity:0;transition:opacity 300ms ease}
/* on a wide screen the camera comes in close enough that the pair's own name is bigger than the tag and runs under it:
   the tag carries the name, so the paint steps back (a phone keeps it, smaller, under the shoe) */
.paint{transition:opacity 300ms ease}
@media (min-width:761px){.zoomed .slot .paint{opacity:0}
  /* the neighbours step right back: at the phone's .28 a pair half behind the tag still pulls the eye from the chosen one */
  .zoomed .slot:not(.on){opacity:.12}}

/* the name painted on the brick under each shelf, sign-writer style. Painted, so it never animates in. Three things put it ON
   the brick: a surface cut from the wall plate itself (img/paint-brick.webp: its relief in the letters, its joints and pits
   where the paint thins), pinned to the bricks behind each name by the fit in wall.js; multiply, so the wall's light carries
   through; and a brush filter on the letter edges. */
.paint{position:absolute;left:-40%;right:-40%;top:calc(100% + clamp(8px,1.5cqw,26px));z-index:2;text-align:center;white-space:nowrap;pointer-events:none;
  color:#3b2e24;mix-blend-mode:multiply;opacity:.95;
  -webkit-mask:url(/shop/img/paint-brick.webp) var(--mx,0) var(--my,0)/var(--mw,100%) var(--mh,100%) no-repeat;mask:url(/shop/img/paint-brick.webp) var(--mx,0) var(--my,0)/var(--mw,100%) var(--mh,100%) no-repeat}
.paint b,.paint small{display:block;color:transparent;background:url(/shop/img/paint-brick.webp) var(--bx,0) var(--by,0)/var(--mw,100%) var(--mh,100%) no-repeat,var(--c,#3b2e24);
  background-blend-mode:overlay;-webkit-background-clip:text;background-clip:text}
.paint b{font-family:var(--display);font-weight:400;font-size:clamp(12px,1.75cqw,27px);line-height:1.1;letter-spacing:-.005em;filter:url(#brush)}
.paint small{--c:#4a4038;font-family:var(--mono);font-size:clamp(8px,.72cqw,11px);letter-spacing:.08em;text-transform:uppercase;margin-top:.45em;filter:url(#brush-s)}
.paint small i{font-style:normal;color:#2c5a3c}

/* words over the wall */
.hud{position:absolute;inset:0;z-index:10;pointer-events:none}
.hud a,.hud button,.hud input,.hud form,.hud label{pointer-events:auto}
.intro{position:absolute;left:calc(50% - var(--span) / 2);right:calc(50% - var(--span) / 2);top:clamp(20px,4.5cqh,52px);transition:opacity 320ms ease,visibility 0s linear 0s}
.zoomed .intro{opacity:0;visibility:hidden;transition:opacity 240ms ease,visibility 0s linear 240ms}
.intro .kick{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);margin-bottom:12px}
.intro h1{font-family:var(--display);font-weight:400;font-size:calc(var(--hs,1) * clamp(32px,min(5.2cqw,8.6cqh),80px));line-height:.98;letter-spacing:-.018em;max-width:10.5em;color:#241e19;text-wrap:balance;text-transform:none}
/* the sentence on the left, the search pill on the right edge of the wall, level with each other */
.lede-row{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;margin-top:clamp(12px,2.2cqh,24px)}
.intro .lede{font-size:17px;max-width:30em;color:#3a322b;margin:0}
.intro .lede b{font-weight:600}
/* the headline never touches a shoe: wall.js steps these down until the words clear the top row, at any screen size */
.fit-1 .intro .kick{display:none}
.fit-2 .intro{--hs:.84}
.fit-3 .intro .lede{display:none}
.fit-4 .intro{--hs:.72}
.fit-5 .intro .ask{display:none}

/* the tag keeps to the same edges as the headline and the shelves */
.detail{position:absolute;left:calc(50% - var(--span) / 2);top:50%;width:min(36%,430px);transform:translateY(calc(-50% + 12px));opacity:0;visibility:hidden;transition:opacity 300ms ease,transform 300ms ease,visibility 0s linear 300ms}
.zoomed .detail{transform:translateY(-50%);opacity:1;visibility:visible;transition:opacity 440ms ease calc(var(--cam,1100ms) * .45),transform 440ms ease calc(var(--cam,1100ms) * .45),visibility 0s}
.detail-right .detail{left:auto;right:calc(50% - var(--span) / 2)}
.ctrl{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center;gap:10px;opacity:0;visibility:hidden;transition:opacity 300ms ease,visibility 0s linear 300ms}
.zoomed .ctrl{opacity:1;visibility:visible;transition:opacity 440ms ease calc(var(--cam,1100ms) * .45),visibility 0s}
.ctrl button{height:44px;min-width:44px;border:0;border-radius:999px;background:var(--card);color:var(--ink);box-shadow:0 4px 14px -6px rgba(60,40,20,.5);font:inherit;font-weight:600;font-size:14px;padding:0 16px;cursor:pointer}
.ctrl button:hover{background:#fff}

/* the swing tag a tapped pair wears */
.tag{position:relative;background:var(--card);border-radius:4px 4px 14px 14px;padding:34px 30px 26px;box-shadow:0 1px 0 rgba(40,25,10,.08),0 18px 40px -18px rgba(60,40,20,.45)}
.tag::before{content:"";position:absolute;top:13px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--wall-base);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 4px #efe6d8}
.tag .brand{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
.tag h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2cqw,46px);line-height:1;letter-spacing:-.015em;margin:6px 0;text-transform:none}
.tag .col{font-size:14px;color:var(--ink-2)}
.tag .stamp{display:inline-flex;align-items:center;gap:6px;margin:16px 0 4px;padding:5px 12px 5px 6px;border:1.5px solid var(--vegan);border-radius:999px;color:var(--vegan);font-size:13px;font-weight:700}
.tag .stamp i{font-style:normal;width:18px;height:18px;border-radius:50%;background:var(--vegan);color:#fff;display:grid;place-items:center;font-size:10px}
.care{margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--dash);display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-family:var(--mono);font-size:12.5px}
.care dt{color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-size:11px;padding-top:1px}
.care dd{color:var(--ink);margin:0}
.why{font-size:13px;color:var(--ink-2);margin-top:12px}
.tag-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.price{font-family:var(--display);font-size:30px;line-height:1}
.price small{display:block;font-family:var(--ui);font-size:11px;color:var(--ink-3);letter-spacing:.04em;margin-top:5px}

/* arrival: the shop's lights come up, then each pair settles. The painted names are on the wall from the start. */
.arriving .scene .dim{opacity:.55;transition:none}
.in .scene .dim{opacity:0}
.arriving .slot .shoe{opacity:0;transform:translateY(-10px)}
.in .slot .shoe{opacity:1;transform:none;transition:opacity 500ms ease calc(500ms + var(--n) * 70ms),transform 700ms cubic-bezier(.2,.8,.2,1) calc(500ms + var(--n) * 70ms)}
.arriving .intro>*{opacity:0;transform:translateY(8px)}
.in .intro>*{opacity:1;transform:none;transition:opacity 700ms ease 200ms,transform 700ms cubic-bezier(.2,.8,.2,1) 200ms}
.in .intro>*:nth-child(2){transition-delay:300ms}.in .intro>*:nth-child(3){transition-delay:420ms}
.pan-hint{display:none}

/* the phone: the wall is two screens wide and pans under the thumb, two bays at a time */
@media (max-width:760px){
  .hero{height:133.4vw}
  .pan{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .pan::-webkit-scrollbar{display:none}
  .cam{right:auto;width:200cqw}
  .scene{width:200cqw;height:auto;aspect-ratio:3/2;left:0}
  .scene::before,.scene::after{display:none}
  .scene .grain{left:0;right:0;background-size:19.2cqw 19.2cqw}
  .snap{position:absolute;top:0;left:0;height:1px;width:100cqw;scroll-snap-align:start}
  .snap.b{left:100cqw}
  .zoomed .pan{overflow-x:hidden}
  .slot{width:21%}
  .slot:nth-child(4n+1){left:2%}.slot:nth-child(4n+2){left:27%}.slot:nth-child(4n+3){left:52%}.slot:nth-child(4n+4){left:77%}
  .paint{top:calc(100% + 5px)}
  .paint b{font-size:12.5px;filter:url(#brush-s)}
  .intro{left:16px;right:16px;top:16px}
  .intro .kick{font-size:11px;margin-bottom:8px}
  .intro h1{font-size:calc(var(--hs,1) * clamp(28px,8.6vw,38px));max-width:9.5em}
  .intro .lede{font-size:14.5px}
  .lede-row{gap:10px;margin-top:10px}
  .intro .ask{width:100%}
  .detail{left:16px;right:16px;top:auto;bottom:84px;width:auto;transform:translateY(12px)}
  .zoomed .detail{transform:none}
  .detail-top .detail{top:14px;bottom:auto}
  .tag{padding:26px 18px 18px}
  .tag h2{font-size:27px}
  .tag .care,.tag .why{display:none}
  .tag .stamp{margin:10px 0 0}
  .tag-foot{margin-top:14px}
  .tag .brand{font-size:11px}
  .pan-hint{display:block;position:absolute;right:14px;bottom:12px;z-index:9;font-family:var(--mono);font-size:11px;color:var(--ink-2);background:rgba(251,248,242,.86);border-radius:999px;padding:5px 10px;transition:opacity 300ms ease}
  .zoomed .pan-hint,.panned .pan-hint{opacity:0}
}
@media (prefers-reduced-motion:reduce){.cam,.scene .dim{transition:none}}
/* the phone, 2026-11-05: the wall fills the screen under the header, the words over its top as on a laptop. Above the
   plate the brick carries on, mirrored at the seam (overlapping by 3px, as at the sides) and falling into shade. */
@media (max-width:760px){
  .hero{height:max(133.4vw,min(calc(100svh - 57px),190vw));--row1:44%;--row2:71%}
  .paint b{font-size:15px}
  .paint small{display:block;font-size:9px;letter-spacing:.06em}
  .scene::before{display:block;left:0;right:0;width:auto;top:auto;bottom:calc(100% - 3px);height:100%;transform:scaleY(-1);
    background:linear-gradient(to bottom,rgba(60,38,18,0),rgba(60,38,18,.2) 45%,rgba(60,38,18,.45)),var(--wimg) center/100% 100% no-repeat}
  .scene .grain{top:-100%}
  .tag .pillbtn{white-space:nowrap;padding:0 16px}
  /* up close the tag carries the verdict and price, so the painted line under the name steps back */
  .zoomed .paint small{opacity:0}
  /* EXPLORATION, B: the words on paper, the wall below them whole, like a shop window (class on <html>, for judging only) */
  .mB .hero{height:calc(133.4vw + var(--ih,250px));background:var(--paper)}
  .mB .scene::before{display:none}
  .mB .scene .grain{top:0}
  .mB .intro{top:20px}
}
/* the hero's search, answered as you type (ask.js): the matching models drop down under the pill */
.intro .ask{position:relative}
.hud .sug{pointer-events:auto}
.sug{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:var(--card);border-radius:18px;padding:6px;overflow-y:auto;overscroll-behavior:contain;text-align:left;
  box-shadow:0 1px 0 rgba(42,37,32,.06),0 24px 50px -18px rgba(60,40,20,.55)}
.sug[hidden]{display:none}
.sug-i{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 12px 6px 6px;border-radius:12px;text-decoration:none;color:var(--ink)}
.sug-i[aria-selected=true],.ask .sug-all[aria-selected=true],.ask .sug-all:hover{background:#f3ece2}
.sug-p{display:block;width:56px;height:42px;border-radius:8px;background:#ece6dc;overflow:hidden}
.sug-p img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.14)}
.sug-t{min-width:0}
.sug-t b{display:block;font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-t small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:3px}
.sv{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
.sv i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;font-style:normal;font-size:10px;color:#fff}
.sv.v{color:var(--vegan)}.sv.v i{background:var(--vegan)}
.sv.u{color:var(--maybe)}.sv.u i{background:var(--maybe)}
.sv.x{color:var(--ink-3);font-weight:500}
.ask .sug-all{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:auto;margin-top:4px;padding:12px;border:0;border-top:1px dashed var(--dash);border-radius:0 0 12px 12px;background:none;transform:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.sug-none{padding:14px;font-size:14px;line-height:1.45;color:var(--ink-2)}
@media (max-width:760px){.sug-i{grid-template-columns:48px minmax(0,1fr) auto;gap:10px}.sug-p{width:48px;height:36px}.sug-t b{font-size:14.5px}}