:root{
  --tape:#25282b; --ink:#15171a; --cream:#f3e9d2; --yellow:#f7d117; --orange:#ea7a1c;
  --red:#e12a33; --pink:#ee4a93; --lilac:#d9a6cb; --blue:#0e6a99; --sky:#27a9dc; --mint:#8fe3c3;
  --disp:'Caprasimo','Cooper Black','Georgia',serif;
  --blk:'Archivo Black','Arial Black','Impact',sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(1.1rem,4vw,2.5rem);
  --stripes:linear-gradient(to bottom,var(--lilac) 0 20%,var(--red) 0 40%,var(--orange) 0 60%,var(--yellow) 0 80%,var(--sky) 0 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{font:400 1.0625rem/1.55 var(--body);background:var(--ink);color:var(--cream);overflow-x:hidden}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit}
:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
.wrap{width:min(1280px,100% - 2*var(--pad));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.02;letter-spacing:-.005em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.5rem;font:700 1.05rem var(--body);border:3px solid var(--ink);background:var(--yellow);color:var(--ink);text-decoration:none;box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:5px 5px 0 var(--pink)}
.btn.ghost:hover{box-shadow:3px 3px 0 var(--pink)}

/* NAV */
.nav{position:sticky;top:0;z-index:60;background:var(--tape)}
.nav::after{content:"";display:block;height:6px;background:var(--stripes);background:linear-gradient(to bottom,var(--lilac) 0 20%,var(--red) 0 40%,var(--orange) 0 60%,var(--yellow) 0 80%,var(--sky) 0 100%)}
.nav-in{display:flex;align-items:center;gap:1.5rem;height:64px}
.logo{font:400 1.7rem/1 var(--disp);text-decoration:none;display:flex;align-items:baseline;gap:.05em;white-space:nowrap}
.logo .s{background:var(--stripes);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.25em;padding:0 .04em}
.logo small{font:600 .8rem var(--body);opacity:.7;margin-left:.15rem}
.links{display:flex;gap:.25rem;margin-left:auto;list-style:none}
.links a{display:block;padding:.5rem .8rem;font-weight:700;text-decoration:none;border-radius:2px}
.links a:hover,.links a[aria-current=page]{background:var(--cream);color:var(--ink)}
@media(max-width:760px){.links li:not(.keep){display:none}.nav-in{gap:.5rem}.logo{font-size:1.3rem}.logo small{display:none}.links a{padding:.5rem .6rem}}

/* HERO: neon grid floor, marquee title, scanlines */
.hero{position:relative;overflow:hidden;background:linear-gradient(#0c0d14 0,#241046 62%,#4a1a63 100%);padding:clamp(2.5rem,7vw,5.5rem) 0 0;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
.sun{position:absolute;left:50%;bottom:150px;width:min(560px,80vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;z-index:-2;
  background:linear-gradient(to bottom,var(--yellow) 0,var(--orange) 40%,var(--red) 70%,var(--pink) 100%);
  -webkit-mask:repeating-linear-gradient(to bottom,#000 0 62%,transparent 62% 66%,#000 66% 76%,transparent 76% 81%,#000 81% 100%);
  mask:linear-gradient(#000 0 55%,transparent 55% 59%,#000 59% 69%,transparent 69% 74%,#000 74% 82%,transparent 82% 88%,#000 88%);opacity:.9}
.grid{position:relative;height:190px;margin-top:2.5rem;perspective:260px;overflow:hidden;border-top:3px solid var(--pink);box-shadow:0 -6px 24px rgba(238,74,147,.55)}
.grid i{position:absolute;left:-50%;right:-50%;top:0;bottom:-100%;transform:rotateX(62deg);transform-origin:top;
  background:linear-gradient(var(--pink) 0 2px,transparent 2px) 0 0/100% 40px,linear-gradient(90deg,var(--sky) 0 2px,transparent 2px) 0 0/60px 100%;
  background-color:#14082b;animation:run 1.4s linear infinite}
@keyframes run{to{background-position:0 40px,0 0}}
.crumb{font-weight:700;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.crumb a{text-decoration:none;color:var(--lilac)}.crumb a:hover{color:var(--yellow);text-decoration:underline}
.hero .kick{display:inline-block;margin-top:1.4rem;font:400 .95rem var(--blk);letter-spacing:.18em;color:var(--mint);text-shadow:0 0 10px rgba(143,227,195,.7)}
.blink{animation:bl 1.1s steps(2,start) infinite}
@keyframes bl{to{visibility:hidden}}
.hero h1{font:400 clamp(3rem,11vw,8.6rem)/.92 var(--blk);text-transform:uppercase;letter-spacing:-.01em;margin:.4rem 0 1.1rem;
  background:var(--stripes);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(5px 5px 0 #000)}
.hero h1 small{display:block;font:400 clamp(1.2rem,3.4vw,2.2rem)/1.1 var(--disp);color:var(--cream);-webkit-text-fill-color:var(--cream);letter-spacing:0;margin-top:.8rem;filter:none;text-transform:none}
.hero p.lead{max-width:52ch;font-size:1.2rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;margin-top:1.8rem}
.score{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin-top:2rem;font:400 .95rem var(--blk);letter-spacing:.08em;text-transform:uppercase}
.score b{display:block;font-size:1.7rem;color:var(--yellow);text-shadow:0 0 12px rgba(247,209,23,.6);font-weight:400}

/* FLOOR */
.floor{background:var(--orange);color:var(--ink);padding:clamp(2.5rem,6vw,5rem) 0}
.bar{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.6rem}
.bar h2{font-size:clamp(2.2rem,5.4vw,4rem)}
.bar p{max-width:46ch;font-size:1.1rem}
.disc{font-weight:700;margin:0 0 1.6rem;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem}
.chip{padding:.5rem 1.1rem;font:700 1rem var(--body);background:var(--cream);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--yellow);box-shadow:none;transform:translate(3px,3px)}
.afl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:2.6rem 2.2rem}
.ac{display:flex;flex-direction:column;background:var(--cream);border:4px solid var(--ink);box-shadow:9px 9px 0 var(--ink)}
.ac[hidden]{display:none}
.ac .media{position:relative;border-bottom:4px solid var(--ink);background:#fff}
.ac .big{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#fff}
.ac .tagx{position:absolute;top:.7rem;left:.7rem;padding:.2rem .6rem;font:400 .8rem var(--blk);letter-spacing:.1em;background:var(--ink);color:var(--yellow);text-transform:uppercase}
.ac .strip{display:flex;gap:.45rem;padding:.6rem .8rem;background:var(--cream);border-top:4px solid var(--ink)}
.ac .strip button{padding:0;width:44px;height:44px;border:3px solid var(--ink);background:#fff;opacity:.85;box-shadow:2px 2px 0 var(--ink)}
.ac .strip button[aria-current=true]{opacity:1;outline:3px solid var(--pink)}
.ac .strip img{width:100%;height:100%;object-fit:cover}
.ac .body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.ac h3{font-size:1.45rem}
.ac .sp{list-style:none;display:grid;gap:.25rem;font-size:.98rem;font-weight:600}
.ac .sp li{padding-left:1.3rem;position:relative}
.ac .sp li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.7rem;background:var(--c,var(--pink));border:2px solid var(--ink)}
.ac .row{margin-top:auto;padding-top:1rem}

/* STORE CTA */
.store{background:var(--ink);padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:6px solid var(--pink)}
.store .box{display:grid;gap:1.4rem;justify-items:start;max-width:62ch}
.store h2{font-size:clamp(2rem,4.6vw,3.3rem)}
.store .btn{box-shadow:5px 5px 0 var(--pink)}

footer{background:var(--tape);padding:2.5rem 0 2rem}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;font-size:.92rem;color:#d8cfb8}
.legal a{text-decoration:none}.legal a:hover{color:var(--yellow);text-decoration:underline}
@media(prefers-reduced-motion:reduce){.grid i,.blink{animation:none}html{scroll-behavior:auto}}
.hero.small{padding-top:clamp(2rem,5vw,3.5rem)}
.hero.small h1{font-size:clamp(2.6rem,9vw,6.4rem)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:2.2rem}
.tile{display:flex;flex-direction:column;background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:9px 9px 0 var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s}
.tile:hover{transform:translate(3px,3px);box-shadow:6px 6px 0 var(--ink)}
.tile img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-bottom:4px solid var(--ink);background:#fff}
.tile div{padding:1rem 1.2rem 1.3rem;display:grid;gap:.4rem}
.tile h3{font-size:1.6rem}
.tile b{font:400 .85rem var(--blk);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.tile.soon{border-style:dashed;box-shadow:none;background:transparent;color:var(--cream);border-color:var(--cream);justify-content:center;min-height:200px;text-align:center}
.guide{background:var(--ink);padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:6px solid var(--pink)}
.guide h2{font-size:clamp(2rem,4.6vw,3.3rem);margin-bottom:1.4rem}
.guide dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.6rem 2rem}
.guide dt{font:400 1.35rem var(--disp);color:var(--yellow);margin-bottom:.3rem}
.faq{background:var(--tape);padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:6px solid var(--sky)}
.faq h2{font-size:clamp(2rem,4.6vw,3.3rem);margin-bottom:1.4rem}
.faq details{border:3px solid var(--cream);margin-bottom:.9rem;background:var(--ink)}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font:400 1.2rem var(--disp);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--yellow)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 1.2rem 1.2rem;max-width:70ch}

/* BENTO: brand picker. One big tile, one wide, two small (the "Pick an aisle" layout from the home page). */
.bento{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:minmax(300px,32vw) minmax(240px,26vw);gap:2rem;max-height:none}
.bento .bt{display:flex;flex-direction:column;min-height:0;background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:9px 9px 0 var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s;overflow:hidden}
.bento .bt:hover{transform:translate(3px,3px);box-shadow:6px 6px 0 var(--ink)}
.bento .bt img{flex:1 1 0;min-height:0;width:100%;height:0;object-fit:cover;background:#fff;border-bottom:4px solid var(--ink)}
.bento .lab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem .9rem;background:var(--lc)}
.bento .lab h3{font-size:clamp(1.4rem,2.6vw,2.3rem)}
.bento .lab em{font:700 .95rem var(--body);font-style:normal;white-space:nowrap}
.bento .bt:nth-child(1){grid-row:1/3;--lc:var(--yellow)}
.bento .bt:nth-child(2){grid-column:2/4;--lc:var(--sky)}
.bento .bt:nth-child(3){--lc:var(--mint)}
.bento .bt:nth-child(4){--lc:var(--lilac)}
.bento .bt:nth-child(n+5){--lc:var(--orange);grid-row:auto}
.bento[data-n="1"],.bento[data-n="2"],.bento[data-n="3"]{grid-template-rows:none}
@media(max-width:860px){.bento{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:1.4rem}.bento .bt:nth-child(1){grid-row:auto;grid-column:1/3}.bento .bt:nth-child(2){grid-column:1/3}.bento .bt img{flex:none;aspect-ratio:4/3;height:auto}.bento .bt:nth-child(1) img{aspect-ratio:1/1}}
@media(max-width:520px){.bento{grid-template-columns:1fr}.bento .bt:nth-child(n){grid-column:auto}}

/* SPOTLIGHT: tilted framed prints with a colour shadow (the "In the gallery" look from the home page) */
.gal{background:#202327 linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px;padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,5.5rem);color:var(--cream);overflow:hidden}
.gal .bar h2{color:var(--cream)}
.frames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem 2.6rem;align-items:start;padding-top:1rem}
.fr{display:block;color:inherit;text-decoration:none;transform:rotate(var(--t,-2deg));transition:transform .18s}
.fr:nth-child(1){--t:-2.4deg}.fr:nth-child(2){--t:1.4deg;margin-top:-1.2rem}.fr:nth-child(3){--t:-1deg;margin-top:1.6rem}.fr:nth-child(4){--t:2deg;margin-top:.4rem}
.fr:hover,.fr:focus-visible{transform:rotate(0) translateY(-6px)}
.fr .mat{display:block;background:var(--cream);padding:12px;border:4px solid var(--ink);box-shadow:12px 12px 0 var(--c);margin-bottom:1.5rem}
.fr .mat img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#fff;border:3px solid var(--ink)}
.fr b{display:block;font:400 1.3rem/1.1 var(--disp);margin-bottom:.35rem}
.fr .cap{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.98rem;color:#cfc8b4}
@media(max-width:900px){.frames{grid-template-columns:repeat(2,minmax(0,1fr))}.fr:nth-child(n){margin-top:0}}
@media(max-width:520px){.frames{grid-template-columns:1fr;gap:2rem}.fr:nth-child(n){--t:-1deg}}
@media(prefers-reduced-motion:reduce){.fr{transition:none}}

/* Skip link, footer nav, more brands */
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.7rem 1.1rem;background:var(--yellow);color:#000;font-weight:700;border:3px solid #000;text-decoration:none}
.skip:focus{top:1rem}
.fnav{display:flex;flex-wrap:wrap;gap:1.5rem 4rem;margin-bottom:1.8rem;padding-bottom:1.6rem;border-bottom:1px solid rgba(243,233,210,.2)}
.fnav b{display:block;font:400 .85rem var(--blk);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin-bottom:.6rem}
.fnav ul{list-style:none;display:grid;gap:.35rem}.fnav a{text-decoration:none}.fnav a:hover{color:var(--yellow);text-decoration:underline}
.morebr{background:var(--ink);padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:6px solid var(--sky)}
.morebr h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:1.6rem}
.bento.sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));grid-template-rows:none}
.bento.sm .bt:nth-child(n){grid-row:auto;grid-column:auto}
.bento.sm .bt img{flex:none;height:auto;aspect-ratio:4/3}
.bento.sm .bt:nth-child(1){--lc:var(--yellow)}.bento.sm .bt:nth-child(2){--lc:var(--sky)}.bento.sm .bt:nth-child(3){--lc:var(--mint)}.bento.sm .bt:nth-child(4){--lc:var(--lilac)}
.nf h1{font-size:clamp(5rem,22vw,15rem)}
.bento .bt:nth-child(5){grid-column:1/-1;--lc:var(--pink)}
.bento{grid-auto-rows:minmax(180px,20vw)}
@media(max-width:860px){.bento .bt:nth-child(5){grid-column:1/3}}@media(max-width:520px){.bento .bt:nth-child(5){grid-column:auto}}

/* Bento fit fixes: show product shots whole, crop only scene photos; keep small strips compact */
.bento .bt img{object-fit:contain}
.bento .bt.cov img{object-fit:cover}
.bento.sm{grid-auto-rows:auto;align-items:start}
.bento.sm .bt{align-self:start}
@media(max-width:860px){.bento .bt:nth-child(1) img{aspect-ratio:4/3}.bento .bt:nth-child(2) img{aspect-ratio:16/9}.bento .bt:nth-child(n+3) img{aspect-ratio:1/1}}

/* Square photo pages: wide products fill the frame instead of floating in a tall card */
.afl.sq .ac .big{aspect-ratio:1/1;object-fit:contain;background:#fff}
.gal.sq .fr .mat img{aspect-ratio:1/1;object-fit:contain}

/* Product cards: photo and title open the Amazon page */
.ac .photo{display:block;cursor:pointer}
.ac h3 a{color:inherit;text-decoration:none}
.ac h3 a:hover,.ac h3 a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.ac .photo:hover .big{filter:brightness(1.04)}

/* phones and tablets: rows follow the photos, not the desktop row height */
@media(max-width:860px){.bento{grid-auto-rows:auto}.bento .bt:nth-child(5){grid-column:1/3}}
@media(max-width:520px){.bento .bt:nth-child(5){grid-column:auto}}
@media(max-width:860px){.bento .bt:nth-child(5) img{aspect-ratio:16/9}}
@media(max-width:520px){.bento .bt:nth-child(5) img{aspect-ratio:4/3}}

/* very narrow phones (320px): nav fits without sideways scroll */
@media(max-width:360px){.logo{font-size:1.1rem}.nav-in{gap:.3rem}.links a{padding:.5rem .45rem}}