@font-face{font-family:Fredoka;src:url('/assets/fredoka.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/dm-sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{--oat:#fffcf6;--ink:#22232a;--lilac:#ede5ff;--mint:#dff3e9;--peach:#ffe5d6;--butter:#fff1bc;--line:#d9d4cc;--muted:#565458;--page:1232px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;color:var(--ink);background:var(--oat);font-family:'DM Sans',sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button,summary{cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,.chapter h3{font-family:Fredoka,sans-serif;font-weight:600;line-height:.99;letter-spacing:-.035em}
h1{font-size:clamp(2.8rem,6vw,5.15rem)}
h2{font-size:clamp(2.55rem,5.25vw,4.45rem)}
h2>span{color:#6c4d9c}
:focus-visible{outline:3px solid #684698;outline-offset:4px}
[hidden]{display:none!important}
.wrap{width:min(var(--page),calc(100% - 36px));margin-inline:auto}
.section{padding-block:clamp(58px,8vw,105px)}
.eyebrow,.topline,.art-index,.art-caption,.ticker,.small{font-size:.71rem;font-weight:700;letter-spacing:.13em;line-height:1.4;text-transform:uppercase}
.eyebrow{margin-bottom:16px}
.skip{position:fixed;left:14px;top:14px;background:white;padding:12px;z-index:5;transform:translateY(-150%)}
.skip:focus{transform:translateY(0)}
.topline{display:flex;justify-content:space-between;gap:10px;background:var(--ink);color:#fff;padding:9px max(18px,calc((100% - var(--page))/2))}
.site-header{position:sticky;top:0;z-index:4;background:var(--oat);border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;min-height:73px;gap:14px;position:relative}
.logo{width:99px;height:auto}
.nav nav{display:flex;gap:clamp(18px,3vw,43px);align-items:center;font-weight:700;font-size:.94rem}
.nav a:hover,footer a:hover,.crumbs a:hover{text-decoration:underline;text-underline-offset:5px}
.search-link{display:flex;gap:7px;align-items:center}
.menu-toggle{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:700;font-size:.92rem;min-height:48px;padding:11px 19px;border:1px solid var(--ink);border-radius:100px;line-height:1.25;text-align:center;transition:background-color .18s,color .18s}
.button.primary{color:white;background:var(--ink)}
.button.primary:hover{background:#443450}
.button.secondary{background:transparent}
.button.secondary:hover{background:var(--ink);color:white}
.button:disabled{opacity:.65;cursor:wait}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.hero{display:grid;gap:28px;padding-block:35px}
.hero-copy{align-self:center}
.hero h1{margin-bottom:20px}
.hero-copy>p:not(.eyebrow){font-size:clamp(1rem,2vw,1.2rem);margin-bottom:25px;color:var(--muted)}
.spark{display:inline-grid;place-items:center;border:1px solid var(--ink);background:var(--butter);width:27px;height:27px;border-radius:50%;margin-right:5px}
.hero-art{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.08;min-height:290px;border-radius:24px;background:var(--lilac);border:1px solid #d4c7ec}
.art-index,.art-caption{position:absolute;z-index:3;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:clamp(.5rem,1vw,.71rem);pointer-events:none}
.art-index{top:5%;padding-bottom:3%;border-bottom:1px solid #32274844}
.art-caption{bottom:5%;padding-top:3%;border-top:1px solid #32274844}
.art-type{position:absolute;inset:9% 0 auto;text-align:center;font-family:Fredoka,sans-serif;font-weight:600;font-size:clamp(68px,14vw,185px);line-height:1;color:#d8c5f6;letter-spacing:-.075em;z-index:-1}
.art-star{position:absolute;right:11%;top:25%;color:#6b4a97;font-size:clamp(35px,8vw,90px);line-height:1}
.cap-orbit{display:block;position:absolute;isolation:isolate;border-radius:50%;overflow:hidden;aspect-ratio:1;outline-offset:-4px;background:#fbf7f1;box-shadow:0 10px 20px #34235127;border:1px solid #39234b35;transition:transform .2s}
.cap-orbit:hover,.cap-orbit:focus-visible{z-index:3}
.cap-orbit img{height:100%;width:100%;object-fit:cover;mix-blend-mode:multiply}
.orbit-0{width:53%;top:24%;left:23%;z-index:2;transform:rotate(-10deg)}
.orbit-0:hover{transform:rotate(-6deg) scale(1.04)}
.orbit-1{width:34%;top:45%;left:5%;z-index:1;transform:rotate(-13deg);background:#fff3db}
.orbit-1:hover{transform:rotate(-9deg) scale(1.05)}
.orbit-2{width:35%;right:6%;top:48%;z-index:1;transform:rotate(12deg);background:#e9f4e8}
.orbit-2:hover{transform:rotate(8deg) scale(1.05)}
.ticker{background:var(--ink);color:var(--oat);padding-block:14px}
.ticker .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mint{background:var(--mint)}.lilac{background:var(--lilac)}.peach{background:var(--peach)}.butter{background:var(--butter)}
.shade{padding-block:clamp(58px,8vw,100px)}
.section-head{margin-bottom:30px}
.section-head>p:last-child:not(.eyebrow){margin-top:13px;color:var(--muted)}
.shade-display{display:none}
.chapters{display:grid;gap:14px}
.chapter{border:1px solid #aac8b9;border-radius:20px;padding:20px;background:#f6fbf7}
.chapter h3{font-size:2.7rem}
.chapter>p:not(.eyebrow){margin-block:10px 16px}
.chapter-photo{width:min(145px,37%);float:right;border-radius:50%;overflow:hidden;aspect-ratio:1;background:#e1f2e9;margin-left:10px}
.chapter-photo img,.shade-photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.style-grid,.product-grid{display:grid;gap:14px}
.style-grid{grid-template-columns:repeat(auto-fit,minmax(min(235px,100%),1fr))}
.style-card,.product-card{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--oat)}
.style-card{background:#f2ecfb}
.style-shot{position:relative;background:#e8def6;aspect-ratio:1.26;overflow:hidden}
.style-shot img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .2s}
.style-card:hover img,.style-card:focus-visible img{transform:scale(1.035)}
.style-number{position:absolute;top:12px;left:12px;display:grid;place-items:center;width:35px;height:35px;background:var(--oat);border:1px solid var(--ink);border-radius:50%;font-size:.75rem;font-weight:700}
.style-copy{position:relative;padding:16px 52px 16px 16px}
.style-copy h3,.product-info h3{font-size:clamp(1rem,2vw,1.35rem);line-height:1.2}
.style-copy p{margin-top:7px;font-size:.88rem;color:var(--muted);transition:opacity .18s}
.round-arrow{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--ink);border-radius:50%;flex:none}
.style-copy .round-arrow{position:absolute;top:14px;right:14px}
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-shot,.main-photo{aspect-ratio:1;overflow:hidden;background:#f0ede9}
.product-shot img,.main-photo img{width:100%;height:100%;object-fit:contain}
.product-grid .product-card{box-shadow:0 3px 7px rgb(34 35 42 / .08),0 9px 20px rgb(34 35 42 / .12)}
.product-grid .product-shot{position:relative;background:var(--lilac)}
.product-grid .product-card:nth-child(4n + 2 of :not([hidden])) .product-shot{background:var(--mint)}
.product-grid .product-card:nth-child(4n + 3 of :not([hidden])) .product-shot{background:var(--peach)}
.product-grid .product-card:nth-child(4n + 4 of :not([hidden])) .product-shot{background:var(--butter)}
.product-grid .product-shot canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.product-grid .product-shot:not([data-original-photo]) :is(img,canvas){transform:scale(.91);filter:drop-shadow(0 9px 9px rgb(34 35 42 / .23))}
.product-grid .product-shot[data-cutout] img{opacity:0}
.product-grid .product-shot[data-original-photo]{padding:9%}
.product-grid .product-shot[data-original-photo] img{border-radius:10px}
@media(prefers-reduced-motion:no-preference){
  .product-grid .product-card{transition:transform .2s ease,box-shadow .2s ease}
  .product-grid .product-card:focus-within{transform:translateY(-7px)}
}
.product-grid .product-card:focus-within{box-shadow:0 7px 12px rgb(34 35 42 / .12),0 17px 30px rgb(34 35 42 / .19)}
@media(hover:hover) and (pointer:fine){
  .product-grid .product-card:hover{box-shadow:0 7px 12px rgb(34 35 42 / .12),0 17px 30px rgb(34 35 42 / .19)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .product-grid .product-card:hover{transform:translateY(-7px)}
}
.product-info{display:flex;justify-content:space-between;gap:6px;padding:12px 10px 4px}
.product-info .small{display:block;color:var(--muted);font-size:.61rem;margin-bottom:6px}
.product-card .round-arrow{width:25px;height:25px;font-size:.8rem}
.product-card a:hover h3{text-decoration:underline;text-underline-offset:3px}
.card-colours{display:flex;align-items:center;gap:4px;padding:4px 9px 8px;font-size:.72rem}
.card-colours a{display:grid;place-items:center;width:24px;height:30px}
.dot{display:inline-block;width:15px;height:15px;border-radius:50%;border:1px solid #22232a66;flex:none}
.split{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:15px}
.bulk-panel{overflow:hidden;position:relative;display:flex;justify-content:space-between;align-items:center;border:1px solid #dacc94;border-radius:22px;padding:clamp(25px,6vw,78px)}
.bulk-panel p:not(.eyebrow){margin-block:16px;max-width:380px}
.bulk-deco{display:none;color:#7f641f;font-size:clamp(100px,25vw,290px);line-height:.7}
.faq-block{padding-top:0;display:grid;gap:15px}
.faq-block .button{margin-top:15px}
details{border-bottom:1px solid var(--line)}
details summary{font-weight:700;padding:15px 4px}
details p{margin:0 4px 17px;max-width:65ch}
.faq-page{max-width:850px}
footer{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--line);background:#f4efe5;padding-block:35px 15px}
footer::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/blank-caps-logo.png') center 37% / clamp(420px,76vw,1080px) auto no-repeat;opacity:.055}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  footer::before{opacity:0;mask-image:radial-gradient(circle clamp(115px,19vw,245px) at var(--footer-x,50%) var(--footer-y,50%),black 10%,transparent 100%);transition:opacity .22s ease}
  footer:hover::before,footer:focus-within::before{opacity:.24}
}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.footer-grid>div:first-child{grid-column:1/-1}
.footer-grid a:not(.brand){display:block;width:max-content;margin-top:7px}
.footer-grid p{margin-top:10px;color:var(--muted)}
.footer-bottom{margin-top:27px;padding-top:15px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:.81rem}
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;padding:14px 0;margin:0;gap:8px;font-size:.83rem;color:var(--muted)}
.crumbs li+li::before{content:'/';margin-right:8px}
.intro{padding-block:clamp(38px,6vw,73px)}
.intro h1{font-size:clamp(2.6rem,5.5vw,4.7rem)}
.intro p:last-child{margin-top:14px;max-width:62ch}
.collection-nav{display:flex;flex-wrap:wrap;gap:8px;padding-top:25px}
.collection-nav a{border:1px solid var(--line);padding:8px 14px;border-radius:60px;font-weight:700;font-size:.83rem}
.collection-nav a:hover{background:var(--lilac)}
.listing{padding-block:24px 75px}
.filters{border:1px solid var(--line);border-radius:15px;padding-inline:14px;background:white}
.filter-fields{display:grid;gap:12px;padding:2px 0 16px}
label{display:grid;gap:5px;font-size:.91rem;font-weight:700}
input,select,textarea{width:100%;min-width:0;padding:10px 12px;border:1px solid #87818a;border-radius:9px;background:#fff;min-height:44px;font-weight:400}
textarea{resize:vertical}
.result-count,.empty{margin-block:17px;color:var(--muted)}
.searchbox{margin-bottom:20px;max-width:530px}
.searchbox>div{display:flex;gap:8px;margin-top:5px}
.product-detail{display:grid;gap:27px;padding-top:10px}
.main-photo{border:1px solid var(--line);border-radius:20px}
.thumbs{display:flex;gap:8px;margin-top:10px}
.thumbs button{padding:0;background:white;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.thumbs button[aria-pressed=true]{border:2px solid var(--ink)}
.thumbs img{object-fit:contain}
.product-summary h1{font-size:clamp(2.7rem,5.5vw,4.7rem)}
.product-lead{margin-top:12px;color:var(--muted)}
.variant-block{margin-top:22px;border-block:1px solid var(--line);padding-block:15px}
.variant-block strong{margin-left:8px}
.swatches{display:flex;flex-wrap:wrap;gap:7px;margin-block:9px}
.swatch{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:60px;background:white;min-height:42px}
.swatch[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--lilac)}
.availability{font-size:.88rem;color:var(--muted)}
.product-quote{display:flex;align-items:end;gap:10px;margin-block:18px}
.product-quote label{width:88px}
.specs p{white-space:pre-line}
.related h2{margin-bottom:20px;font-size:clamp(2rem,4vw,3.4rem)}
.form-grid{display:grid;gap:24px;padding-block:clamp(36px,7vw,75px)}
.form-grid aside p:not(.eyebrow){margin-block:14px 18px}
.enquiry{background:white;border:1px solid var(--line);padding:clamp(16px,4vw,32px);border-radius:18px;display:grid;gap:14px}
.enquiry .button{justify-self:start}
.form-note{background:var(--lilac);padding:10px 13px;border-radius:8px;font-size:.86rem}
.form-pair{display:grid;gap:14px}
.form-status:empty{display:none}
@media(max-width:700px){
  .nav .logo{width:86px}
  .menu-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;background:var(--oat);border:1px solid var(--line);border-radius:50px;padding:6px 12px;font-weight:700}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:4;padding:12px;flex-direction:column;align-items:stretch;gap:3px;background:var(--oat);border:1px solid var(--line);box-shadow:0 5px 18px #22232a22;border-radius:0 0 12px 12px}
  .menu-toggle[aria-expanded=true]+nav{display:flex}
  .nav nav a{padding:10px}
}
@media(min-width:560px){
  .wrap{width:min(var(--page),calc(100% - 60px))}
  .bulk-deco{display:block}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .footer-grid>div:first-child{grid-column:auto}
  .form-pair{grid-template-columns:1fr 1fr}
  .filter-fields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
}
@media(min-width:760px){
  .hero{grid-template-columns:1fr 1.14fr;gap:clamp(24px,4vw,62px);padding-block:clamp(36px,5vw,66px)}
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .product-info{padding:14px 14px 5px}
  .card-colours{padding-inline:13px}
  .product-card .round-arrow{width:31px;height:31px}
  .filter-fields{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
  .product-detail{grid-template-columns:1.1fr 1fr;gap:clamp(25px,5vw,70px);padding-top:24px}
  .product-summary{padding-top:12px}
  .form-grid{grid-template-columns:1fr 1.7fr;gap:clamp(24px,7vw,90px)}
  .faq-block{grid-template-columns:1fr 1.35fr}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .style-copy p{opacity:0}
  .style-card:hover p,.style-card:focus-visible p{opacity:1}
}
@media(min-width:850px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .shade-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(30px,6vw,86px)}
  .shade-display{display:block;position:sticky;top:max(88px,9vh);align-self:start}
  .shade-photo{border:1px solid #aac8b9;background:#e9f5ed;aspect-ratio:1.18;overflow:hidden;border-radius:24px}
  .shade-label{display:flex;justify-content:space-between;font-weight:700;padding:10px 4px}
  .chapter{min-height:clamp(340px,55vh,510px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:25px 32px}
  .chapter-photo{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:0s!important;transition-duration:0s!important}}
