@font-face{font-family:"Hypermarket";src:url("../fonts/Hypermarket-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Hypermarket";src:url("../fonts/Hypermarket-Regular.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  --paper:#0d0f0c;
  --paper-2:#161914;
  --ink:#ebe6da;
  --ink-soft:#9b968a;
  --line:rgba(235,230,218,.16);
  --glass:rgba(235,230,218,.14);
  --glass-hover:rgba(235,230,218,.26);
  --glass-mark:rgba(235,230,218,.3);
  --shade:rgba(13,15,12,.35);
  --tan:#a5622f;
  --cognac:#6f3f1f;
  --espresso:#1d140d;
  --olive:#56682a;
  --pad:clamp(16px,3vw,40px);
  --lw:clamp(120px,13vw,170px);
  --bar-top:30px;
  --bar-h:42px;
  /* the logo and the + sit one and a half text lines (33px) above the middle of the old Menu bar; the page content keeps its place */
  --nav-lift:33px;
  --logo-top:calc(var(--bar-top) + (var(--bar-h) - var(--lw)*272/1920)/2 - var(--nav-lift));
  --gap:clamp(10px,1.2vw,16px);
}
/* light mode: the same page with paper and ink swapped */
:root[data-theme="light"]{
  --paper:#fff;  /* pure white, the same as the product photo backgrounds, so the bags sit on the page with no visible square */
  --paper-2:#f2f2f2;
  --ink:#0d0f0c;
  --ink-soft:#625d53;
  --line:rgba(13,15,12,.18);
  --glass:rgba(235,230,218,.62);
  --glass-hover:rgba(235,230,218,.82);
  --glass-mark:rgba(13,15,12,.2);
  --shade:rgba(235,230,218,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
/* intro: a full-screen video that plays before the home page, then fades away */
/* the background is the sky colour of the video, so the strips Safari keeps for its own bars blend into the clouds instead of showing black;
   the frame is as tall as the largest screen (lvh), so it still fills everything when Safari shrinks its bars */
.intro{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:200;background:#8ea3cf;transition:opacity .6s,visibility 0s .6s}
.intro video{display:block;width:100%;height:100%;object-fit:cover}
.intro.done{opacity:0;visibility:hidden}
/* PASE USTED: small, centred left-to-right in the upper quarter of the screen, white, same letter spacing as the reference; it fades in two seconds after the video starts */
.intro__text{position:absolute;left:50%;top:24.7%;transform:translate(-50%,-50%);padding-left:.23em;font-family:"Hypermarket",Helvetica,Arial,sans-serif;font-weight:400;font-size:5.94vw;line-height:1;letter-spacing:.23em;word-spacing:-.105em;white-space:nowrap;color:#fff;pointer-events:none;animation:intro-text .8s 2s both}
@keyframes intro-text{from{opacity:0}}
html.intro-on,html.intro-on body{overflow:hidden}
html.intro-on{background:#8ea3cf}
html.no-intro .intro{display:none}
/* thin strips of the video's top and bottom sky colours along the screen edges: Safari tints its bars from what touches the edges */
.intro::before,.intro::after{content:"";position:fixed;left:0;right:0;height:2px;z-index:1}
.intro::before{top:0;background:#99acd6}
.intro::after{bottom:0;background:#7c93c2}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{position:relative;font-family:"Hypermarket",Helvetica,Arial,sans-serif;font-weight:300;font-size:15px;line-height:1.45;color:var(--ink);background:var(--paper);transition:background .35s,color .35s;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,.panel__links a,.materials__list button{text-transform:uppercase;letter-spacing:.1em}
h1,h2,h3{font-weight:400;line-height:1.08}
ul{list-style:none}

.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.75em 1.15em;font-size:13px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:transparent;color:var(--ink)}
.link{border-bottom:1px solid currentColor;padding-bottom:1px}

/* logo drawn as a mask so it can take any colour */
.logo{display:block;aspect-ratio:1920/272;background:currentColor;-webkit-mask:url(../logo.svg) center/contain no-repeat;mask:url(../logo.svg) center/contain no-repeat}
.mono{display:block;aspect-ratio:1920/632;background:currentColor;-webkit-mask:url(../monogram.svg) center/contain no-repeat;mask:url(../monogram.svg) center/contain no-repeat}

/* placeholder imagery — swap each .ph for a real <img> */
.ph{position:relative;background:var(--c,var(--tan));overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.22),transparent 55%),radial-gradient(90% 80% at 80% 100%,rgba(0,0,0,.35),transparent 60%)}
.ph::after{content:attr(data-label);position:absolute;left:10px;bottom:8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ── navigation: logo left, menu bar right, slide-in panel ── */
.brand{position:fixed;z-index:61;top:var(--logo-top);left:12px;width:var(--lw);aspect-ratio:1920/272}
.lcol{position:absolute;top:0;left:12px;width:var(--lw);height:100%;pointer-events:none;padding-top:calc(var(--fy)*100vh - var(--cy)/1920*var(--lw));padding-top:calc(var(--fy)*100svh - var(--cy)/1920*var(--lw))}
.lcol svg{position:sticky;top:var(--logo-top);z-index:60;display:block;width:100%;overflow:visible;fill:#fff;mix-blend-mode:difference}
/* menu button: a bare X at the top right, white with the same difference blend as the logo, so it flips to stay visible over light or dark */
.navbtn,.navlabel{position:fixed;z-index:60;top:calc(var(--bar-top) + var(--bar-h)/2 - 22px - var(--nav-lift));right:-1px;width:44px;height:44px}
.navlabel{display:grid;place-items:center;color:#fff;mix-blend-mode:difference;pointer-events:none;transition:opacity .2s}
.navlabel svg{display:block;width:18px;height:18px;transform:rotate(-45deg);transition:transform .35s cubic-bezier(.3,.7,.2,1);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square}
.navbtn:hover+.navlabel{opacity:.6}
/* frosted glass: see-through tint + blur of whatever is behind */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.shade{position:fixed;inset:0;z-index:70;background:var(--shade);opacity:0;pointer-events:none;transition:opacity .4s}
.panel{position:fixed;z-index:80;top:10px;right:10px;bottom:10px;width:min(430px,calc(100vw - 20px));display:flex;flex-direction:column;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);-webkit-clip-path:inset(0 0 100% 100%);clip-path:inset(0 0 100% 100%);visibility:hidden;transition:clip-path .55s cubic-bezier(.3,.7,.2,1),-webkit-clip-path .55s cubic-bezier(.3,.7,.2,1),visibility 0s .55s}
body.nav-open .navlabel svg{transform:rotate(-90deg)}
body.nav-open .shade{opacity:1;pointer-events:auto;transition-delay:.25s}
/* unfolds diagonally from the top-right corner down to the bottom-left */
body.nav-open .panel{-webkit-clip-path:inset(0);clip-path:inset(0);visibility:visible;transition:clip-path .55s cubic-bezier(.3,.7,.2,1) .25s,-webkit-clip-path .55s cubic-bezier(.3,.7,.2,1) .25s,visibility 0s .25s}
.panel__head{display:flex;justify-content:space-between;align-items:center;padding:6px}
.panel__close,.panel__bag{position:relative;display:grid;place-items:center;width:46px;height:46px;color:var(--ink);transition:opacity .2s}
.panel__close{font-size:21.6px;line-height:1}
/* the reverse of the panel ✕: the menu button rests as a + and turns into an X on open; the ✕ inside the panel starts as a + and turns into an X as the panel unfolds */
.panel__close{transform:rotate(-45deg);transition:opacity .2s,transform .45s cubic-bezier(.3,.7,.2,1)}
body.nav-open .panel__close{transform:none;transition-delay:0s,.55s}
.panel__close,.panel__bag{outline:none}
.panel__close:hover,.panel__bag:hover,.panel__close:focus-visible,.panel__bag:focus-visible{opacity:.55}
.panel__bag svg{width:24px;height:24px;display:block}
.panel__bag sup{position:absolute;top:4px;right:2px;font-size:10.8px;line-height:1}
.panel__links{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;justify-content:center}
.panel__links>*{font-size:clamp(24px,4vh,36.8px)}
/* a bit more than one empty row between items */
.panel__links>*+*{margin-top:calc(1.45em + 29px)}
.panel__links .big{display:flex;justify-content:space-between;align-items:baseline;width:100%;padding:10px 0;font-weight:400;line-height:1.05;letter-spacing:0;transition:opacity .3s}
.panel__links:hover .big{opacity:.4}
.panel__links .big:hover,.panel__links .big[aria-expanded="true"]{opacity:1}
/* SHOP BY: its categories open as small justified rows in the gap underneath, so nothing else moves */
.grp{position:relative}
.cats{position:absolute;left:0;right:0;top:100%}
.cats__row{display:flex;justify-content:space-between;font-size:16.5px;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.cats__row.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s,visibility 0s}
.cats__row>*,.cats__track>*{flex:none;padding:6px 0;white-space:nowrap;letter-spacing:inherit;text-transform:inherit;transition:opacity .2s}
.cats__subs{position:relative}
.cats__row--sub{position:absolute;left:0;right:0;top:0;color:var(--ink-soft)}
.cats__row>*:hover,.cats__track>*:hover{opacity:.55}
/* a row too long for the panel becomes an endless sideways loop that can also be dragged */
.cats__row.loop{display:block;overflow:hidden;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.cats__row.loop.dragging{cursor:grabbing}
/* a row marked data-finite does not loop: it slides sideways from its first item to its last and stops */
.cats__row.slide{justify-content:flex-start;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;cursor:grab}
.cats__row.slide::-webkit-scrollbar{display:none}
.cats__row>.cats__track{display:flex;gap:22px;width:max-content;padding:0 22px 0 0;opacity:1;will-change:transform}
.cats__track>*{-webkit-user-drag:none}
.cats__row [aria-expanded="true"]{text-decoration:underline;text-underline-offset:4px}
.panel__sub{display:flex;align-items:center;gap:18px;padding:0 18px;font-size:10.4px;color:var(--ink-soft)}
.panel__sub a:hover{color:var(--ink)}
.panel__sub,.panel__foot{text-transform:uppercase;letter-spacing:.1em}
.panel__foot{display:flex;justify-content:space-between;align-items:center;margin:6px;padding:11px 12px;font-size:13px;background:var(--ink);color:var(--paper)}
.panel__foot:hover{opacity:.85}
.panel__theme{display:grid;place-items:center;width:46px;height:46px;margin:0 -12px 0 auto;color:var(--ink);outline:none;transition:opacity .2s}
.panel__theme:hover,.panel__theme:focus-visible{opacity:.55}
.panel__theme svg{width:22px;height:22px;display:block;transition:transform .45s}
:root[data-theme="light"] .panel__theme svg{transform:rotate(180deg)}

/* ── hero ────────────────────────────────────── */
.hero{position:relative;height:100vh;height:100dvh;min-height:520px;background:#0a0b0a;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* the photo is portrait: on wide screens show it whole and melt its sides into the background */
@media (min-aspect-ratio:3/4){
  .hero img{object-fit:contain;-webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent)}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── sections ────────────────────────────────── */
section{padding:clamp(56px,9vw,130px) var(--pad)}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:12px}
.head h2{font-size:clamp(22px,2.4vw,32px)}

/* DROP 01: built to the mock-up. Every size is a multiple of --u (1% of the screen width, capped), so it scales as one piece */
.drop{--u:min(1vw,4.3px);padding:calc(var(--u)*48.1) calc(var(--u)*2.16) calc(var(--u)*5.7)}
.drop__title{font-weight:400;font-size:calc(var(--u)*7.07);line-height:1;letter-spacing:.355em;text-transform:uppercase;white-space:nowrap;margin-left:calc(var(--u)*.27)}
.drop p{max-width:21em;font-weight:400;font-size:calc(var(--u)*3.49);line-height:1.145}
.drop__title+p{margin-top:calc(var(--u)*4.27)}
.drop p+p{margin-top:1.145em}
.drop__photo{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 70%;margin-top:calc(var(--u)*15.8)}
.drop__name{display:flex;align-items:flex-end;align-items:last baseline;margin:calc(var(--u)*7.3) 0 0 calc(var(--u)*.6)}
.drop__name h3{font-weight:400;font-size:calc(var(--u)*5.36);line-height:1;letter-spacing:.95em;text-transform:uppercase;white-space:nowrap}
.drop__tag{display:grid;font-weight:400;font-size:calc(var(--u)*2);line-height:1.3;letter-spacing:.19em;text-transform:uppercase}

/* product reel: same --u scale as DROP 01. Photos sit in a row that starts at the left margin and runs off the right edge; swipe it to the left */
.product{--u:min(1vw,4.3px);padding:calc(var(--u)*46.3) 0 calc(var(--u)*25)}
.product__reel{display:flex;gap:calc(var(--u)*.55);padding-inline:calc(var(--u)*6) calc(var(--u)*2.16);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:calc(var(--u)*6) calc(var(--u)*2.16);scrollbar-width:none}
.product__reel::-webkit-scrollbar{display:none}
.product__reel img{flex:none;width:calc(var(--u)*63.6);height:auto;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:start}
.product__info{font-weight:400}
.product__name{margin:calc(var(--u)*14.45) 0 0 calc(var(--u)*2.16)}
.product__name .drop__tag{margin-left:calc(var(--u)*1.95)}
/* INTERIORS / - RED: two lines of the same width, lined up under the small tag */
.product__int{width:calc(var(--u)*21.9);margin:calc(var(--u)*4.04) 0 0 calc(var(--u)*57.1);font-size:calc(var(--u)*3.69);line-height:1;text-transform:uppercase;white-space:nowrap}
.product__int span{display:block;letter-spacing:.229em}
.product__int span+span{display:flex;justify-content:space-between;margin-top:calc(var(--u)*.75);letter-spacing:0}
.product__int i{font-style:normal}
/* ATB = Add To Bag: three big dotted initials, each finished by a tiny word beside it */
.atb{position:relative;display:inline-block;margin:calc(var(--u)*23.65) 0 0 calc(var(--u)*2.3);font-size:calc(var(--u)*21);line-height:1;letter-spacing:.115em;text-transform:uppercase;white-space:nowrap;transition:opacity .2s}
.atb:hover{opacity:.6}
.atb small{position:absolute;font-family:"Hypermarket",Helvetica,Arial,sans-serif;font-size:calc(var(--u)*2);line-height:1;letter-spacing:.19em}
.atb__add{left:calc(var(--u)*12.9);top:calc(var(--u)*9.32)}
.atb__to{left:calc(var(--u)*26.1);top:calc(var(--u)*15.82)}
.atb__ag{left:calc(var(--u)*46.5);top:calc(var(--u)*7.48)}

/* feature banner */
.banner{padding:0}
.banner img{display:block;width:100%;height:auto}

/* footer: a frosted panel like the menu, with spread headings and justified rows of links */
footer{margin:clamp(40px,6vw,80px) 10px 10px;padding:26px 18px 18px;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);color:var(--ink);text-transform:uppercase}
.foot{display:grid;gap:34px}
.foot__h{display:flex;justify-content:space-between;font-weight:300;font-size:10.4px;line-height:1.2;letter-spacing:0;color:var(--ink-soft)}
.foot__row{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-weight:400;font-size:16.5px;letter-spacing:.1em;color:var(--ink)}
.foot__row a{padding:6px 0;white-space:nowrap;transition:opacity .2s}
.foot__row a:hover{opacity:.55}
.foot__base{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:56px;font-size:10.4px;letter-spacing:.1em;color:var(--ink-soft)}
.foot__base p{display:grid;gap:4px}
.foot__base .logo{flex:none;width:50%;color:var(--ink)}
@media (min-width:900px){.foot{grid-template-columns:repeat(3,1fr);gap:60px}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .intro,.materials{grid-template-columns:1fr}
  .set,.set:nth-child(even){grid-template-columns:1fr}
  .set:nth-child(even) .set__info{order:0}
  .materials__panel{position:static}
  .card__buy{opacity:1;transform:none}
}
@media (max-width:560px){
  .numbers__row{grid-template-columns:1fr}
  .voices__foot{flex-direction:column;align-items:start}
}

/* ── home: every bag in one grid; the visitor picks 5, 3, 2 or 1 across ── */
.logo-static .lcol{padding-top:0}  /* the logo sits assembled on the home and product pages */
.bags{padding:calc(var(--bar-top) + var(--bar-h) + 28px) 16px 72px}
/* grid size switch: ••••• ••• •• • spread from side to side above the bags (5, 3, 2 or 1 across).
   Dots in a group sit as far apart as they can while the gaps between groups stay clearly wider, so each group still reads as its count */
.bags__view{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.bags__view button{display:flex;gap:clamp(14px,4.8vw,40px);padding:10px 0;opacity:.3;transition:opacity .2s}
.bags__view button:hover,.bags__view button[aria-pressed="true"]{opacity:1}
.bags__view i{display:block;width:4px;height:4px;border-radius:50%;background:var(--ink)}
.bags{touch-action:pan-y}
.bags__grid{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:22px 16px;list-style:none}
.bags__grid[data-cols="5"]{--cols:5;gap:14px 8px}
.bags__grid[data-cols="2"]{--cols:2;gap:30px 16px}
.bags__grid[data-cols="1"]{--cols:1;gap:44px}
.bag{display:block;text-align:center}
/* the photos have white backgrounds; multiply lets the off-white page show through them */
.bag img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
:root:not([data-theme="light"]) .bag img{mix-blend-mode:normal;background:#fff}
.bag span{display:block;margin-top:8px;font-size:14px;letter-spacing:.1em}
.bags__grid[data-cols="5"] .bag span{margin-top:5px;font-size:9px}
.bags__grid[data-cols="1"] .bag span{margin-top:12px;font-size:15px}

/* ── product page (one template for every bag, modelled on a classic fashion product page) ── */
.pdp{padding-top:calc(var(--bar-top) + var(--bar-h) + 20px)}
.pdp__gallery{position:relative}
.pdp__slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.pdp__slides::-webkit-scrollbar{display:none}
.pdp__slides img{flex:none;width:100%;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:start}
.pdp__slides img.on-white{object-fit:contain;padding:0 16px;mix-blend-mode:multiply}
:root:not([data-theme="light"]) .pdp__slides img.on-white{mix-blend-mode:normal;background:#fff}
.pdp__count{position:absolute;right:16px;bottom:12px;font-size:11px;letter-spacing:.1em;color:#fff;mix-blend-mode:difference}
.pdp__info{padding:22px 16px 0}
.pdp__name{font-size:20px;line-height:1.15}
.pdp__price{margin-top:6px;font-size:20px}
.pdp__colour{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pdp__swatch{width:14px;height:14px;border-radius:50%;background:var(--sw,#888)}
.pdp__swatch[data-colour="blue"]{--sw:#5f7493}.pdp__swatch[data-colour="green"]{--sw:#4f5e2c}.pdp__swatch[data-colour="orange"]{--sw:#c46a1f}
.pdp__buy{display:flex;justify-content:center;width:100%;margin-top:22px;padding:14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);transition:opacity .2s}
.pdp__buy:hover{opacity:.85}
.pdp__help{margin-top:16px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pdp__help a{text-decoration:underline;text-underline-offset:3px}
.pdp__desc{margin-top:40px}
.pdp__desc details{padding:12px 0}
.pdp__desc summary{display:flex;justify-content:space-between;list-style:none;cursor:pointer;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.pdp__desc summary::-webkit-details-marker{display:none}
.pdp__desc summary::after{content:"+"}
.pdp__desc details[open] summary::after{content:"\2212"}
.pdp__desc details p{margin-top:12px;font-size:14px;line-height:1.45;max-width:40ch}
.pdp__desc .pdp__code{margin-top:10px;font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}
.pdp__more{padding:80px 0 72px}
.pdp__more h2{padding:0 16px 18px;font-size:13px}
.pdp__more-row{display:flex;gap:12px;padding:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;overscroll-behavior-x:contain;scrollbar-width:none}
.pdp__more-row::-webkit-scrollbar{display:none}
.pdp__more-row .bag{flex:none;width:40%;scroll-snap-align:start}

/* home: the logo, the menu X and the grid dots are frosted glass, the same see-through blur as the menu panel, cut to their shapes */
.home .letters{display:none}
/* the shapes are small, so they use a smoky tint of the glass (--glass-mark) that still shows against the plain page */
.home .brand,.home .navlabel::before,.home .bags__view i{background:var(--glass-mark);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.home .brand{-webkit-mask:url(../logo.svg) center/contain no-repeat;mask:url(../logo.svg) center/contain no-repeat}
.home .navlabel{mix-blend-mode:normal}
.home .navlabel svg{display:none}
.home .navlabel::before{content:"";width:18px;height:18px;-webkit-mask:url(../x.svg) center/contain no-repeat;mask:url(../x.svg) center/contain no-repeat;transform:rotate(-45deg);transition:transform .35s cubic-bezier(.3,.7,.2,1)}
body.home.nav-open .navlabel::before{transform:rotate(-90deg)}
.home .bags__view i{width:3px;height:3px}
.home .bags__view button{opacity:.45}
.home .bags__view button[aria-pressed="true"],.home .bags__view button:hover{opacity:1}

/* product page: the photo frame runs up to the top of the screen, under the logo and the +.
   Over a studio photo they turn plain white; while the photos are being swiped they fade back so they don't get in the way */
.pdp{padding-top:0}
.pdp__slides img{aspect-ratio:auto;height:calc(100vw*5/4 + var(--bar-top) + var(--bar-h) + 20px)}
.pdp__slides img.on-white{padding:calc(var(--bar-top) + var(--bar-h) + 20px) 16px 0}
.pdp-page .lcol svg,.pdp-page .navlabel{transition:opacity .3s}
.pdp-page.on-photo .lcol svg,.pdp-page.on-photo .navlabel{mix-blend-mode:normal}
.pdp-page.swiping .lcol svg,.pdp-page.swiping .navlabel{opacity:.2}
.pdp__slides{cursor:zoom-in}
.pdp__slides img{transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.pdp__slides img.zoom{transform:scale(2.2);cursor:zoom-out;transition:transform .35s cubic-bezier(.3,.7,.2,1),transform-origin .08s linear}
/* while zoomed the row can't be swiped, so moving the finger only looks around the photo */
.pdp__slides.zooming{overflow:hidden;touch-action:none}
.pdp__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.pdp__head .pdp__price{margin-top:0}
/* sits behind the photos (hidden by them), only while a studio photo is under the logo */
.topband{display:none;position:fixed;top:0;left:0;right:0;height:40vh;max-height:40vh;z-index:-1;background:#1f2220;pointer-events:none}
.pdp-page.on-photo .topband{display:block}
/* iPhone Safari draws a swipeable row on its own layer, so the white-background photos can only blend (multiply) with the row itself:
   give the rows the page colour, otherwise the bag shows inside a white square */
.pdp__slides,.pdp__more-row{background:var(--paper);transition:background .35s}
/* dark mode is switched off for now: the light/dark button in the menu is hidden (the dark styles stay in this file for later) */
.panel__theme{display:none}
/* footer: one thin frosted bar with three links spread across it; a neutral light grey instead of the cream glass */
footer{margin-top:clamp(40px,6vw,80px);padding:6px 18px;background:rgba(13,15,12,.05)}
footer .foot__row{margin-top:0}
.panel__sub{padding-top:14px;padding-bottom:22px}

/* ── archive: every drop as a drop-down, newest open. The name sits on the left with a small arrow after it that turns down when open ── */
.acc+.acc{margin-top:2px}
.acc h2{font:inherit}
.acc__head{display:inline-flex;align-items:center;gap:8px;padding:12px 0;font-size:16.5px;font-weight:400;line-height:1;letter-spacing:.1em;text-transform:uppercase;transition:opacity .3s}
.acc:not(.open) .acc__head{opacity:.4}
.acc__head:hover{opacity:1}
.acc__arrow{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.acc.open .acc__arrow{transform:rotate(90deg)}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.3,.7,.2,1)}
.acc.open .acc__body{grid-template-rows:1fr}
.acc__inner{min-height:0;overflow:hidden}
.acc__inner .bags__grid{padding:10px 0 40px}

/* ── simple text pages (nosotros, contact): placeholders for now ── */
.page{min-height:70vh;padding:calc(var(--bar-top) + var(--bar-h) + 28px) 16px 40px}
.page__title{display:flex;justify-content:space-between;font-size:clamp(24px,4vh,36.8px);font-weight:400;line-height:1.05}
.page__text{margin-top:48px;display:grid;gap:1.2em;max-width:34ch;font-size:16px;line-height:1.45}
.page__list{margin-top:48px;display:grid;gap:22px}
.page__list dt{font-size:10.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.page__list dd{margin-top:6px;font-size:16px;line-height:1.4;max-width:34ch}
.page__list a{text-decoration:underline;text-underline-offset:3px}
.archive .bags__view i{width:3px;height:3px}
/* the footer always sits at the bottom of the screen, even when a page is short (archive with every drop closed, nosotros, contact) */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1 0 auto}
/* footer links: letters spaced apart, white until pressed (then ink); on a computer they also darken on hover */
footer .foot__row a{color:#fff;font-size:15px;letter-spacing:.3em;margin-right:-.3em;transition:color .2s}
footer .foot__row a:hover,footer .foot__row a:active,footer .foot__row a:focus-visible{color:var(--ink);opacity:1}
/* product page: a lot of room above Size and fit, and the same room between Contact us and the other-bags row (one value for both) */
.pdp{--pdp-gap:150px}
.pdp__buy{font:inherit;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.pdp__desc{margin-top:var(--pdp-gap)}
.pdp__desc+.pdp__help{margin-top:22px}
/* other bags: no title, bigger photos, drag sideways */
.pdp__more{padding-top:var(--pdp-gap)}
.pdp__more-row{cursor:grab;-webkit-user-select:none;user-select:none}
.pdp__more-row.dragging{cursor:grabbing;scroll-snap-type:none}
.pdp__more-row .bag{width:68%}
.pdp__more-row img{-webkit-user-drag:none}
/* the price + name line sits lower, just above the colour; the colour and Add to bag stay where they were */
.pdp__info{padding-top:34px}
.pdp__colour{margin-top:6px}
/* composition from the user's mock-up: the photo frame is 40px taller, then a wide white gap (~90px) before the price / name line */
.pdp__slides img{height:calc(100vw*5/4 + var(--bar-top) + var(--bar-h) + 60px)}
.pdp__info{padding-top:90px}
.pdp__colour{margin-top:8px}
/* Size and fit sits as far below Add to bag as the top of Add to bag sits below the photo (≈165px, measured to the Size and fit text) */
.pdp__desc{margin-top:153px}

/* ── home: a sideways reel of the studio photos after the last bag. Every photo is the same height and keeps its own shape ── */
.reel{padding:0 0 8px}
.reel__row{display:flex;gap:0;padding:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none}
.reel__row::-webkit-scrollbar{display:none}
.reel__row.dragging{cursor:grabbing;scroll-snap-type:none}
.reel__row img{flex:none;display:block;height:min(105vw,70vh);width:auto;scroll-snap-align:start;-webkit-user-drag:none}