/* BabelBalls. Tokens first, then base, layout, components, pages. Font URLs carry an asset marker that scripts/build.py swaps for the hashed file name. */
@font-face{font-family:"Young Serif";src:url(/assets/fonts-young-serif.8e9e7939.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts-hanken-grotesk.38c3847f.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --black:#070707;
  --ink:#16130F;
  --white:#fff;
  --bone:#F4EFE6;
  --bone-2:#E9E2D4;
  --line:#D8D0C0;
  --mute:#5F594F;
  --mute-dk:#B7B0A4;
  --line-dk:#2C2924;
  --red:#A31621;
  --red-dk:#7C101A;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(1.25rem,4vw,3rem);
  --max:78rem;
  --sec:clamp(4rem,9vw,8rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--white);color:var(--black);padding:.6rem 1rem;z-index:100;border-radius:2px}
.skip:focus{top:1rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}

/* type */
.hero__h,.story__h,.sechead__h,.provi__h,.signup__h,.pagehead__h,.buy__h,.prose__h,.related__h,.hold__h,.fullset__name,.card__name{font-family:var(--serif);font-weight:400;text-wrap:balance}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.8rem;border:1px solid transparent;border-radius:2px;font-weight:600;font-size:.97rem;letter-spacing:.01em;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn--light{background:var(--white);color:var(--black)}
.btn--light:hover{background:var(--bone)}
.btn--dark{background:var(--black);color:var(--white)}
.btn--dark:hover{background:var(--red)}
.btn--block{width:100%}
.textlink{font-weight:600;font-size:.97rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;transition:text-decoration-color .2s}
.textlink:hover{text-decoration-color:var(--red)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--black);color:var(--white)}
.hdr__in{display:flex;align-items:center;height:4rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none}
.brand__mark{width:1.65rem;height:1.65rem}
.brand__name{font-family:var(--serif);font-size:1.3rem;letter-spacing:.005em}
.nav{display:flex;gap:2rem;margin-left:3rem}
.nav a{text-decoration:none;font-size:.95rem;font-weight:500;color:var(--mute-dk);transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--white)}
.cartlink{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-size:.95rem;font-weight:600}
.cartlink__n{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .35rem;border-radius:1rem;background:var(--white);color:var(--black);font-size:.78rem;font-weight:700}
.navbtn{display:none;margin-left:1.25rem;background:none;border:1px solid var(--line-dk);border-radius:2px;color:var(--white);min-height:2.5rem;padding:0 .9rem;font-size:.9rem;font-weight:600}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(60% 70% at 72% 46%,#2B2621 0%,#12100E 52%,var(--black) 78%);color:var(--white)}
.hero__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);min-height:min(46rem,calc(100svh - 4rem));padding-block:clamp(2.5rem,6vw,5rem)}
.hero__h{font-size:clamp(2.7rem,6.1vw,5.5rem);line-height:1.01;letter-spacing:-.012em;max-width:11.5em}
.hero__sub{margin-top:1.75rem;max-width:30rem;font-size:1.15rem;line-height:1.55;color:#D9D3C8}
.hero__cta{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2rem}
.stage{position:relative;width:100%;max-width:36rem;aspect-ratio:1/1;justify-self:end}
.stage__floor{position:absolute;left:18%;right:-2%;bottom:6%;height:14%;background:radial-gradient(50% 50% at 50% 50%,rgba(244,239,230,.16),rgba(244,239,230,0) 72%)}
.stage__ball{position:absolute;transform:translate3d(var(--dx,0px),var(--dy,0px),0);will-change:transform}
.stage__ball--a{left:26%;top:2%;width:72%}
.stage__ball--b{left:0;top:50%;width:34%}
/* a ball on the page: the rendered golf ball, with the print laid over it. Multiply lets the dimples and the light show through the ink. */
.ball{position:relative;display:block;width:100%;aspect-ratio:1/1;isolation:isolate}
.ball img{display:block;width:100%;height:100%}
.ball__print{position:absolute;inset:0;mix-blend-mode:multiply}
.zoom{display:block;width:100%;aspect-ratio:1/1;overflow:hidden}
.ball--zoom{transform:scale(1.667)}
.scene{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden}
.scene__bg{position:absolute;inset:0;width:100%;height:100%}
.ball--tee{position:absolute;left:22.5%;top:30%;width:55%}
.gallery__flat{width:100%;height:100%;object-fit:contain}
.stage__note{position:absolute;left:0;right:0;bottom:-.25rem;text-align:center;font-size:.9rem;color:var(--mute-dk)}

/* sections */
.band{padding-block:var(--sec)}
.band--tight{padding-block:clamp(2rem,5vw,4rem) var(--sec)}
.band--bone{background:var(--bone)}
.band--white{background:var(--white)}
.band--black{background:var(--black);color:var(--white)}
.textlink--ink{color:var(--ink)}

.story__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.story__h{font-size:clamp(2rem,4.4vw,3.9rem);line-height:1.06;letter-spacing:-.01em}
.story__body{display:grid;gap:1.1rem;max-width:30rem;color:var(--mute)}
.story__body .textlink{justify-self:start;margin-top:.5rem}

.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:clamp(1.75rem,4vw,3rem)}
.sechead__h{font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.08;letter-spacing:-.008em;max-width:15em}

/* grid and cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.75rem,3vw,2.75rem) clamp(1rem,2vw,1.75rem)}
.card{display:flex;flex-direction:column;gap:.9rem}
.card__link{display:flex;flex-direction:column;gap:.2rem;text-decoration:none}
.card__img{display:grid;place-items:center;aspect-ratio:1/1;margin-bottom:.8rem;background:var(--bone);overflow:hidden}
.card__img .ball{width:90%;transition:transform .6s var(--ease)}
.card__link:hover .card__img .ball,.card__link:focus-visible .card__img .ball{transform:translateY(-5px) scale(1.035)}
.card__name{font-size:1.3rem;line-height:1.15}
.card__short{color:var(--mute);font-size:.97rem;line-height:1.45}
.card__row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto}
.card__price{font-weight:600}
.card__add{min-height:2.4rem;padding:0 1rem;background:none;border:1px solid var(--ink);border-radius:2px;font-size:.88rem;font-weight:600;transition:background-color .2s,color .2s}
.card__add:hover{background:var(--black);color:var(--white)}

/* why a Pro V1 */
.provi__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:center}
.provi__copy{display:grid;gap:1.5rem;justify-items:start}
.provi__h{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.06;letter-spacing:-.01em}
.provi__copy p{max-width:32rem;color:#D9D3C8;font-size:1.1rem}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--line-dk);color:#D9D3C8}
.steps li:last-child{border-bottom:1px solid var(--line-dk)}
.steps li::before{content:counter(s);font-size:1.6rem;font-weight:500;line-height:1.2;color:var(--mute-dk)}
.steps strong{color:var(--white);font-weight:600}

/* reviews + signup */
.reviews__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2rem}
.review blockquote{margin:0;font-family:var(--serif);font-size:1.25rem;line-height:1.35}
.review figcaption{margin-top:.8rem;color:var(--mute);font-size:.95rem}
.signup__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.signup__h{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.1}
.signup__p{margin-top:.8rem;color:var(--mute)}
.wl__label{display:block;margin-bottom:.45rem;font-size:.9rem;font-weight:600}
.wl__row{display:flex;gap:.75rem}
.wl__input{flex:1;min-width:0;min-height:3rem;padding:0 1rem;background:var(--white);border:1px solid var(--ink);border-radius:2px}
.wl__input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.wl__msg{min-height:1.5rem;margin-top:.6rem;font-size:.95rem;color:var(--mute)}
.wl__msg.is-err{color:var(--red)}
.wl.is-done .wl__row,.wl.is-done .wl__label{display:none}
.wl.is-done .wl__msg{color:var(--ink);font-weight:600;font-size:1.05rem}

/* page heads, prose, faq */
.pagehead{padding-block:clamp(3rem,8vw,6rem) clamp(1.5rem,3vw,2.5rem)}
.pagehead__h{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.04;letter-spacing:-.012em}
.pagehead__h--xl{font-size:clamp(2.8rem,8vw,7rem);line-height:1;max-width:11em}
.pagehead__p{margin-top:1.1rem;max-width:36rem;color:var(--mute);font-size:1.1rem}
.pagehead__p .btn{margin-top:.5rem}
.pagehead--about{background:var(--black);color:var(--white);padding-bottom:clamp(3rem,7vw,6rem)}
.prose__col{display:grid;gap:1.3rem;max-width:38rem;align-content:start}
.prose{display:grid;gap:1.3rem}
.prose__lead{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3}
.prose__h{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15}
.prose--dark{color:#D9D3C8}
.prose--dark .prose__h{color:var(--white)}
.about__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2rem;margin-top:.5rem}
.about__lineup{margin-top:clamp(2.5rem,6vw,5rem)}
.about__lineup img{width:100%}

.faq__item{border-top:1px solid var(--line)}
.faq__item:last-of-type{border-bottom:1px solid var(--line)}
.faq__q{display:flex;justify-content:space-between;gap:1.5rem;padding:1.3rem 0;font-family:var(--serif);font-size:1.25rem;line-height:1.25;list-style:none;cursor:pointer}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";flex:none;font-family:var(--sans);font-size:1.5rem;line-height:1;transition:transform .3s var(--ease)}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__a{padding:0 3rem 1.5rem 0;color:var(--mute);max-width:40rem}
.faq__more{margin-top:2rem;color:var(--mute)}

/* product page */
.pdp{padding-block:1.25rem var(--sec)}
.crumbs{display:flex;gap:.6rem;margin-bottom:1.25rem;font-size:.9rem;color:var(--mute)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.pdp__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.gallery{display:grid;gap:.75rem}
.gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--bone)}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__slide{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;aspect-ratio:1/1}
.gallery__slide .gallery__flat{object-fit:contain}
.gallery__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.gallery__thumb{aspect-ratio:1/1;padding:0;background:var(--bone);border:2px solid transparent;border-radius:0;overflow:hidden}
.gallery__thumb .ball,.gallery__thumb .zoom,.gallery__thumb .scene{width:100%}
.gallery__thumb[aria-current="true"]{border-color:var(--ink)}
.buy{position:sticky;top:5.5rem;display:grid;gap:1.1rem}
.buy__h{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.04;letter-spacing:-.01em}
.buy__price{font-size:1.5rem;font-weight:600}
.buy__desc{font-size:1.12rem;line-height:1.55;max-width:34rem}
.buy__genuine{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.97rem}
.buy__genuine::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--red)}
.buyform{display:flex;gap:.75rem;margin-top:.4rem}
.qty{display:inline-flex;border:1px solid var(--ink);border-radius:2px}
.qty__b{width:2.9rem;background:none;border:0;font-size:1.25rem}
.qty__b:hover{background:var(--bone)}
.qty__n{width:3rem;border:0;text-align:center;background:none;font-weight:600}
.buy__ship{color:var(--mute);font-size:.95rem}
.passport{margin-top:.6rem;border-bottom:1px solid var(--line)}
.passport>div{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.8rem 0;border-top:1px solid var(--line)}
.passport dt{color:var(--mute);font-size:.93rem}
.passport dd{font-weight:500}
.stampnote{margin-top:.2rem}
.stampnote span{display:inline-block;padding:.35rem .9rem;border:2px solid var(--red);border-radius:3px;color:var(--red);font-weight:600;font-size:.98rem;letter-spacing:.02em;transform:rotate(-3deg)}
.inbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.5rem;padding-top:.4rem;border-top:1px solid var(--line)}
.inbox a{text-decoration:none;font-size:.95rem}
.inbox a:hover{text-decoration:underline}
.buy__fine{color:var(--mute);font-size:.82rem;line-height:1.45}
.related{margin-top:clamp(3.5rem,8vw,6.5rem)}
.related__h{margin-bottom:1.75rem;font-size:clamp(1.6rem,2.8vw,2.2rem)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* shop: the whole set */
.fullset{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(3rem,6vw,5rem);padding:clamp(1.25rem,3vw,2.5rem);background:var(--bone);text-decoration:none}
.fullset__img img{width:100%}
.fullset__copy{display:grid;gap:.7rem}
.fullset__name{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.08}
.fullset__short{color:var(--mute)}
.fullset__price{font-size:1.4rem;font-weight:600}
.fullset__save{display:block;margin-top:.2rem;font-size:.95rem;font-weight:400;color:var(--mute)}

/* cart */
.cart{display:block}
.cart__emptyp{margin-bottom:1.5rem;font-size:1.2rem}
.cart__full{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:clamp(2rem,5vw,4rem);align-items:start}
.line{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto auto;gap:1rem 1.5rem;align-items:center;padding:1.25rem 0;border-top:1px solid var(--line)}
.line:last-child{border-bottom:1px solid var(--line)}
.line__img{display:block;background:var(--bone)}
.line__name{font-family:var(--serif);font-size:1.15rem;text-decoration:none}
.line__unit{display:block;color:var(--mute);font-size:.92rem}
.line__rm{margin-top:.25rem;padding:0;background:none;border:0;color:var(--mute);font-size:.88rem;text-decoration:underline;text-underline-offset:.3em}
.line__rm:hover{color:var(--red)}
.line__total{font-weight:600;min-width:4rem;text-align:right}
.summary{position:sticky;top:5.5rem;padding:1.5rem;background:var(--bone);display:grid;gap:1rem}
.summary__rows{display:grid;gap:.6rem}
.summary__rows>div{display:flex;justify-content:space-between;gap:1rem}
.summary__total{padding-top:.8rem;border-top:1px solid var(--line);font-weight:700;font-size:1.15rem}
.summary__note{color:var(--mute);font-size:.9rem}
.summary__err{color:var(--red);font-size:.92rem;min-height:0}
.trust{display:grid;gap:.45rem;padding-top:.6rem;border-top:1px solid var(--line);color:var(--mute);font-size:.88rem}
.hold{max-width:34rem;padding:1.75rem;background:var(--bone)}
.hold__h{font-size:1.7rem;margin-bottom:.5rem}
.hold__p{margin-bottom:1.25rem;color:var(--mute)}

/* footer */
.ftr{background:var(--black);color:var(--mute-dk);padding-block:clamp(3rem,6vw,5rem) 2rem}
.ftr__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.ftr .brand{color:var(--white)}
.ftr__line{margin-top:1rem;max-width:20rem;font-family:var(--serif);font-size:1.15rem;color:var(--white)}
.ftr__nav{display:grid;gap:.5rem;align-content:start}
.ftr__nav a{text-decoration:none;font-size:.95rem}
.ftr__nav a:hover{color:var(--white);text-decoration:underline}
.ftr__fine{display:grid;gap:.6rem;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--line-dk);font-size:.82rem;line-height:1.5}
.ftr__fine p{max-width:60rem}

/* toast */
.toast{position:fixed;left:50%;bottom:1.5rem;z-index:80;max-width:calc(100% - 2rem);padding:.8rem 1.25rem;background:var(--black);color:var(--white);border-radius:2px;font-size:.95rem;font-weight:500;opacity:0;transform:translate(-50%,.75rem);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast a{margin-left:.9rem;text-decoration:underline}

/* nation page: the mystery line */
.buy__mystery{padding:.9rem 1rem;background:var(--bone);font-size:.97rem;line-height:1.5}

/* home: collect them all */
.collect__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.collect__h{font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.01em}
.collect__body{display:grid;gap:1.4rem;max-width:30rem;color:var(--mute)}
.collect__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}

/* the character page: reached only by scanning a ball */
.who__hero{background:radial-gradient(60% 80% at 28% 50%,#2B2621 0%,#12100E 52%,var(--black) 80%);color:var(--white)}
.who__in{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,5vw,5rem);padding-block:clamp(2.5rem,6vw,5rem)}
.who__ball{width:100%}
.who__found{margin-bottom:.8rem;color:var(--mute-dk);font-size:1rem;font-weight:600}
.who__h{font-size:clamp(3rem,8vw,6.5rem);line-height:.98;letter-spacing:-.015em}
.who__sub{margin-top:.9rem;color:#D9D3C8;font-size:1.15rem}
.who__tag{margin-top:1.5rem;max-width:30rem;font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.25}
.who__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);padding-block:clamp(2.5rem,6vw,5rem)}
.who__col{display:grid;gap:1.5rem;align-content:start}
.who__desc{font-size:1.15rem;line-height:1.6;max-width:34rem}
.who__h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15}
.phrases{display:grid;gap:0}
.phrase{display:grid;gap:.2rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.phrase:last-child{border-bottom:1px solid var(--line)}
.phrase__when{color:var(--mute);font-size:.92rem}
.phrase__say{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.2}
.phrase__means{color:var(--ink)}
.who__foot{display:grid;gap:1.25rem;padding-bottom:var(--sec)}
.who__count{font-size:1.15rem}
.who__links{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.who__code{display:flex;align-items:center;gap:1rem;max-width:34rem;color:var(--mute);font-size:.9rem}
.who__codeball{width:6rem;flex:none;background:var(--bone)}

/* scan page */

.scan__main{display:grid;gap:2.5rem;max-width:44rem}
.scan__steps{counter-reset:s;display:grid;gap:0}
.scan__steps li{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.3rem 0;border-top:1px solid var(--line);color:var(--mute)}
.scan__steps li:last-child{border-bottom:1px solid var(--line)}
.scan__steps li::before{content:counter(s);font-size:1.6rem;font-weight:500;line-height:1.2;color:var(--ink)}
.scan__steps strong{color:var(--ink);font-weight:600}
.scan__steps li>*{grid-column:2}
.scan__steps li::before{grid-column:1;grid-row:1 / span 2}
.scan__form{max-width:34rem}
.scan__input{text-transform:uppercase;letter-spacing:.35em;font-weight:600;max-width:12rem}
.scan__note{color:var(--mute);font-size:.95rem}

/* collection page */
.coll{display:grid;gap:2.25rem}
.coll__row{display:grid;gap:.9rem}
.coll__head{display:flex;align-items:baseline;gap:1rem 1.5rem;flex-wrap:wrap}
.coll__name{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.coll__n{color:var(--mute);font-size:.95rem}
.coll__shop{margin-left:auto;font-size:.92rem}
.coll__slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem}
.slot{display:grid;align-content:center;justify-items:center;gap:.25rem;aspect-ratio:1/1;padding:.4rem;background:var(--bone);text-align:center;overflow:hidden}
.slot__q{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--line)}
.slot a{display:grid;justify-items:center;gap:.2rem;text-decoration:none}
.slot .ball{width:78%}
.slot__name{font-family:var(--serif);font-size:.95rem;line-height:1.1}
.slot.is-found{outline:2px solid var(--red);outline-offset:-2px}
.coll__note{color:var(--mute);font-size:.92rem}

/* two-column pages: the second column is a real element (a panel, a picture), not empty space. One column on a phone. */
.split{display:grid;gap:clamp(1.5rem,5vw,5rem)}
.split__aside{align-self:start}
.faq__aside{padding:1.75rem;background:var(--bone);display:grid;gap:.9rem}
.faq__aside-h{font-size:1.5rem;line-height:1.15}
.faq__aside p{color:var(--mute)}
.faq__aside-sub{font-size:.95rem}
.scan__art{display:grid;gap:1rem;margin:0;color:var(--mute);font-size:.92rem}
.pagehead__art{max-width:22rem}
.prose__col--head{gap:1.75rem}
@media (min-width:60rem){
  .split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
  .faq{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
  .scan{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .split__aside{position:sticky;top:6rem}
  .split--center{align-items:center}
  .pagehead__art{justify-self:end;width:100%}
  .prose.split{align-items:start}
}

/* narrower screens */
@media (max-width:60rem){
  .hero__in,.story__in,.provi__in,.signup__in,.pdp__grid,.fullset,.cart__full,.collect__in,.who__in,.who__body{grid-template-columns:1fr}
  .who__ball{max-width:22rem}
  .hero__in{min-height:0}
  .stage{justify-self:center;max-width:26rem}
  .buy,.summary{position:static}
  .grid,.reviews__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__in{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
}
@media (max-width:44rem){
  .nav{display:none;position:absolute;left:0;right:0;top:4rem;margin:0;padding:.5rem var(--gut) 1.25rem;flex-direction:column;gap:0;background:var(--black);border-bottom:1px solid var(--line-dk)}
  .nav.is-open{display:flex}
  .nav a{padding:.9rem 0;font-size:1.05rem;border-bottom:1px solid var(--line-dk)}
  .navbtn{display:inline-flex;align-items:center}
  .sechead{flex-direction:column;align-items:flex-start}
  .wl__row{flex-direction:column}
  .grid--3>:nth-child(3){display:none}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews__grid{grid-template-columns:1fr}
  .card__row{flex-direction:column;align-items:stretch}
  .card__add{width:100%}
  .passport>div{grid-template-columns:1fr;gap:.1rem}
  .line{grid-template-columns:4.5rem minmax(0,1fr) auto;grid-template-areas:"img info total" "img qty qty"}
  .line__img{grid-area:img}
  .line__info{grid-area:info}
  .line__qty{grid-area:qty}
  .line__total{grid-area:total}
  .faq__a{padding-right:0}
  .ftr__in{grid-template-columns:1fr}
}
@media (max-width:44rem){
  .coll__slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .who__code{align-items:flex-start}
}
@media (max-width:26rem){
  .buyform{flex-direction:column}
  .qty{align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}