/* ==========================================================================
   WHISPER WATERFOWL CO.
   "Cold Open" — black, white, and early mornings.
   ========================================================================== */

/* ---- tokens ---------------------------------------------------------- */
:root{
  --ink:        #050607;   /* page black                */
  --ink-1:      #0B0D0F;   /* raised surface            */
  --ink-2:      #14171A;   /* cards / wells             */
  --bone:       #F2F3F4;   /* primary type              */
  --ash:        #9AA1A7;   /* secondary type            */
  --ash-dim:    #6B7278;   /* tertiary / meta           */
  --line:       rgba(255,255,255,.13);
  --line-soft:  rgba(255,255,255,.07);

  --hdr-h: 132px;          /* measured by JS at runtime */
  --hero-ar: 1.8;          /* cropped hero video AR (1080×600) */

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1440px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-d: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-b: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- reset ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* `clip`, not `hidden` — `hidden` turns body into a scroll container
     and silently breaks the sticky header */
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-d);
  font-weight:900;
  line-height:.94;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0;
}

::selection{ background:var(--bone); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:3px;
  border-radius:2px;
}

/* ---- shared utilities ------------------------------------------------ */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.kicker{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ash-dim);
  margin:0 0 1.1rem;
}
.kicker--line{ display:flex; align-items:center; gap:1rem; }
.kicker--line::after{
  content:''; flex:1; height:1px;
  background:var(--line);
}

.lede{
  font-size:clamp(1rem, .95rem + .35vw, 1.18rem);
  line-height:1.65;
  color:var(--ash);
  max-width:60ch;
}

.oblique{ font-style:italic; }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  padding:1.05rem 2.1rem;
  font-family:var(--font-d);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  border:1px solid var(--bone);
  background:var(--bone);
  color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background:transparent; color:var(--bone); }
.btn:active{ transform:translateY(1px); }

.btn--ghost{
  background:transparent;
  color:var(--bone);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--bone); background:var(--bone); color:var(--ink); }

.btn--full{ width:100%; }

/* ==========================================================================
   HEADER — centred logo, nav beneath, utilities flanking
   ========================================================================== */
.hdr{
  position:sticky;
  top:0;
  z-index:120;
  background:var(--ink);
  border-bottom:1px solid var(--line-soft);
}

.hdr__bar{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  padding:1.35rem var(--pad) .9rem;
  max-width:var(--maxw);
  margin-inline:auto;
}

.hdr__logo{
  grid-column:2;
  justify-self:center;
  display:block;
  transition:opacity .3s var(--ease);
}
.hdr__logo:hover{ opacity:.72; }
/* wordmark is ~4:1 — sized so the "WATERFOWL CO." subline stays legible
   without the header growing past the old two-row height */
.hdr__logo img{
  width:clamp(178px, 27vw, 330px);
  height:auto;
}

.hdr__util{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.hdr__util--l{ grid-column:1; justify-self:start; }
.hdr__util--r{ grid-column:3; justify-self:end; }

.icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  color:var(--ash);
  transition:color .3s var(--ease);
}
.icon-btn:hover{ color:var(--bone); }
.icon-btn svg{ width:19px; height:19px; }

.bag-count{
  position:absolute;
  top:6px; right:4px;
  min-width:16px; height:16px;
  padding:0 4px;
  display:grid; place-items:center;
  background:var(--bone);
  color:var(--ink);
  border-radius:9px;
  font-size:.6rem;
  font-weight:800;
  line-height:1;
  opacity:0;
  transform:scale(.5);
  transition:opacity .3s var(--ease), transform .35s var(--ease-out);
}
.bag-count.is-on{ opacity:1; transform:scale(1); }

.hdr__nav{
  display:flex;
  justify-content:center;
  gap:clamp(1.6rem, 4vw, 3.4rem);
  padding:0 var(--pad) 1.05rem;
}
.hdr__nav a{
  position:relative;
  font-family:var(--font-d);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ash);
  padding-bottom:.3rem;
  transition:color .3s var(--ease);
}
.hdr__nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--bone);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.hdr__nav a:hover{ color:var(--bone); }
.hdr__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hdr__nav a[aria-current="page"]{ color:var(--bone); }
.hdr__nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* ==========================================================================
   HERO — full-frame video, letterbox already cropped out of the source
   ========================================================================== */
.hero{ position:relative; background:var(--ink); }

.hero__media{
  position:relative;
  width:100%;
  /* full frame wherever it fits; gently cropped only on very wide screens */
  height:min(calc(100vw / var(--hero-ar)), 92svh);
  overflow:hidden;
  background:#000;
}
.hero__media video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* legibility scrim only at the very bottom, so the frame stays clean */
.hero__scrim{
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(to top, rgba(5,6,7,.92), rgba(5,6,7,0));
  pointer-events:none;
}

.hero__cap{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  padding:0 var(--pad) clamp(1.25rem, 3vw, 2.75rem);
  max-width:var(--maxw);
  margin-inline:auto;
}
.hero__cta{ display:none; }   /* phones only — desktop keeps the film clean */
.hero__tag{
  font-family:var(--font-d);
  font-size:clamp(.62rem,.55rem + .3vw,.74rem);
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--bone);
  text-shadow:0 2px 18px rgba(0,0,0,.9);
  margin:0;
}
/* hero sound / restart control */
.hero__ctrl{
  position:absolute;
  right:var(--pad);
  top:clamp(1rem,2.5vw,1.75rem);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(5,6,7,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.hero__ctrl:hover{ background:rgba(5,6,7,.75); border-color:var(--bone); }
.hero__ctrl svg{ width:13px; height:13px; }

/* ==========================================================================
   PAGE HEADERS  (shop / story)
   ========================================================================== */
.phero{
  padding-block:clamp(3rem, 7vw, 6.5rem) clamp(2rem, 4vw, 3.25rem);
  border-bottom:1px solid var(--line-soft);
}
.phero__title{
  font-size:clamp(3rem, 1.4rem + 7vw, 8rem);
  font-style:italic;
  margin:0 0 1.5rem;
}

/* story hero — image with the title sitting on it */
.shero{
  position:relative;
  min-height:min(62svh, 620px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#000;
}
.shero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.shero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,6,7,.96) 4%, rgba(5,6,7,.35) 55%, rgba(5,6,7,.55) 100%);
}
.shero__body{ position:relative; padding-bottom:clamp(2rem, 5vw, 4rem); width:100%; }
.shero__title{
  font-size:clamp(2.6rem, 1.2rem + 6vw, 6.5rem);
  font-style:italic;
  text-shadow:0 4px 40px rgba(0,0,0,.75);
}

/* ==========================================================================
   FILTER CHIPS
   ========================================================================== */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  padding-top:clamp(1.5rem, 3vw, 2.5rem);
  scroll-margin-top:calc(var(--hdr-h) + 1.5rem);
}
.chip{
  padding:.72rem 1.4rem;
  border:1px solid var(--line);
  font-family:var(--font-d);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ash);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.chip:hover{ color:var(--bone); border-color:var(--bone); }
.chip.is-on{ background:var(--bone); border-color:var(--bone); color:var(--ink); }

.shop-note{
  margin:clamp(3rem, 6vw, 5rem) 0 0;
  padding-top:1.75rem;
  border-top:1px solid var(--line-soft);
  font-size:.82rem;
  line-height:1.7;
  color:var(--ash-dim);
  max-width:62ch;
}

/* ==========================================================================
   PROSE  (story long-form)
   ========================================================================== */
.prose{ max-width:74ch; }
.prose .lede + .lede{ margin-top:1.2rem; }
.lede--lead{
  font-size:clamp(1.15rem, 1rem + .8vw, 1.6rem);
  line-height:1.5;
  color:var(--bone);
  font-weight:500;
}
.prose__h{
  font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  font-style:italic;
  margin:clamp(2.5rem, 5vw, 4rem) 0 1.25rem;
}

/* ---- story beats -------------------------------------------------------
   The founders' copy is written with deliberate line breaks — the staccato
   lists keep their <br>s, and the three standing lines get display weight.  */
.story-beat{
  font-size:clamp(1.02rem, .96rem + .42vw, 1.3rem);
  line-height:1.9;
  color:var(--bone);
  margin:1.7rem 0 0;
}
.story-mark{
  font-family:var(--font-d);
  font-size:clamp(1.25rem, 1rem + 1.35vw, 2.2rem);
  font-weight:900;
  font-style:italic;
  line-height:1.12;
  letter-spacing:-.015em;
  text-transform:uppercase;
  color:var(--bone);
  margin:2.3rem 0 0;
  text-wrap:balance;
}
.story-kick{ margin:2.8rem 0 1rem; }
.story-mark--goal{ margin-top:0; }
.story-mark--end{
  margin-top:2.8rem;
  padding-top:2.1rem;
  border-top:1px solid var(--line-soft);
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(1rem, 2.5vw, 2rem);
}
.gal__item{ margin:0; overflow:hidden; background:var(--ink-2); }
.gal__item img{
  width:100%; height:100%;
  object-fit:cover;
  aspect-ratio:3/4;
  filter:grayscale(1) contrast(1.05);
  transition:transform 1.1s var(--ease-out);
}
.gal__item:hover img{ transform:scale(1.04); }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  border-block:1px solid var(--line-soft);
  padding:1.05rem 0;
  overflow:hidden;
  background:var(--ink-1);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:slide 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__grp{ display:flex; flex-shrink:0; }
.marquee span{
  display:inline-flex;
  align-items:center;
  gap:1.6rem;
  padding-right:1.6rem;
  font-family:var(--font-d);
  font-size:.8rem;
  font-weight:800;
  font-style:italic;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ash-dim);
  white-space:nowrap;
}
.marquee span::after{
  content:'';
  width:5px; height:5px;
  background:var(--ash-dim);
  border-radius:50%;
}
.marquee span.hl{ color:var(--bone); }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{ padding-block:clamp(4rem, 9vw, 8.5rem); }
.sec--tight{ padding-block:clamp(3rem, 6vw, 5.5rem); }

.sec__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  margin-bottom:clamp(2.25rem, 5vw, 4rem);
}
.sec__title{
  font-size:clamp(2.4rem, 1.2rem + 5.2vw, 5.6rem);
  font-style:italic;
}
.sec__title em{ font-style:italic; color:var(--ash-dim); }

/* ==========================================================================
   PRODUCT GRID — two per row, staggered
   ========================================================================== */
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.25rem, 3.5vw, 3.25rem) clamp(1rem, 3vw, 3rem);
}
/* the stagger: every second card drops */
.grid > *:nth-child(even){ transform:translateY(clamp(1.5rem, 5vw, 5.5rem)); }

.card{ display:block; }

.card__media{
  position:relative;
  aspect-ratio:4/5;
  background:
    radial-gradient(ellipse 78% 58% at 50% 34%, #171B1F 0%, #101316 46%, #06080A 100%);
  border:1px solid var(--line-soft);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.card__media::after{           /* floor shadow */
  content:'';
  position:absolute;
  left:50%; bottom:7%;
  width:58%; height:8%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}
/* ---- product photo, teased ----------------------------------------------
   Drop 01 isn't purchasable yet, so the shots run blurred. Everything that
   makes that happen lives in these three custom properties — drop --soon-blur
   to 0 and --soon-dim to 1 and the photos come up sharp and full colour.     */
.card__photo{
  position:relative;
  z-index:1;                    /* above .card__media::after */
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:
    grayscale(var(--soon-gray, 1))
    contrast(1.06)
    brightness(var(--soon-dim, .58))
    blur(var(--soon-blur, clamp(10px, 1.5vw, 20px)));
  /* the blur feathers past the edges — overscale so the card stays full-bleed */
  transform:scale(1.14);
  transition:transform .9s var(--ease-out), filter .7s var(--ease);
}
.card:hover .card__photo{
  transform:scale(1.18);
  --soon-dim:.66;
}

/* ---- garment flats (unused since the photos landed — kept for the revert) ---- */
.garment{
  position:relative;
  z-index:1;
  transition:transform .8s var(--ease-out);
}
.card:hover .garment{ transform:scale(1.04); }

/* colourways — black garments get a rim light, the way they'd be lit in studio */
.g-white{
  --gc:#EDEEEF; --gseam:rgba(0,0,0,.20);
  --grib:#E2E3E4; --ghood:#DCDDDE; --gedge:rgba(0,0,0,.10);
}
.g-black{
  --gc:#252A2F; --gseam:rgba(255,255,255,.22);
  --grib:#1C2024; --ghood:#171A1E; --gedge:rgba(255,255,255,.34);
}

.garment--tee { width:72%; --pw:38%; --pt:47%; }
.garment--hood{ width:80%; --pw:35%; --pt:50%; }
.garment--cap { width:88%; --pw:42%; --pt:48%; }

.card__art{ width:100%; height:auto; display:block; }

.gb    { fill:var(--gc); }
/* only the base silhouette carries the edge — the two overlays set fill="url(…)" */
.gb:not([fill]){ stroke:var(--gedge); stroke-width:2.4; stroke-linejoin:round; }
.ghood { fill:var(--ghood); }
.grib,
.grib2 { fill:var(--grib); }
.gbrim { fill:var(--ghood); }
.gdot  { fill:var(--gseam); }
.gs{
  fill:none;
  stroke:var(--gseam);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.gd{ stroke-dasharray:6 6; }

.garment__print{
  position:absolute;
  left:50%;
  top:var(--pt);
  translate:-50% -50%;
  width:var(--pw);
  height:auto;
  pointer-events:none;
}

.card__flag{
  position:absolute;
  top:.9rem; left:.9rem;
  z-index:2;
  padding:.4rem .7rem;
  background:var(--bone);
  color:var(--ink);
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.card__add{
  position:absolute;
  left:.9rem; right:.9rem; bottom:.9rem;
  z-index:2;
  padding:.9rem;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-d);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .45s var(--ease-out), background .3s var(--ease);
}
.card:hover .card__add,
.card:focus-within .card__add{ opacity:1; transform:translateY(0); }
.card__add:hover{ background:#fff; }

.card__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-top:1rem;
}
.card__name{
  font-family:var(--font-d);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0;
}
.card__sub{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ash-dim);
  margin:.3rem 0 0;
}
.card__price{
  font-family:var(--font-d);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.06em;
  white-space:nowrap;
}
/* pre-launch status in place of the price — must follow .card__price to win */
.card__price--soon{
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ash);
}
/* sits beside the name on tablet+, drops to its own line on phones where the
   fabric line already fills the row */
.card__meta{ flex-wrap:wrap; }

/* touch devices: no hover, always show the add bar */
@media (hover:none){
  .card__add{ opacity:1; transform:none; }
}

/* ==========================================================================
   SPLIT / STORY
   ========================================================================== */
.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(2rem, 6vw, 6rem);
}
.split--flip .split__media{ order:2; }

.split__media{
  position:relative;
  overflow:hidden;
  background:var(--ink-2);
}
.split__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06);
}
.split__body h2{
  font-size:clamp(2rem, 1rem + 4.4vw, 4.6rem);
  font-style:italic;
  margin-bottom:1.5rem;
}
/* scoped to .lede so the story beats keep their own rhythm */
.split__body .lede + .lede{ margin-top:1.1rem; }

/* full-bleed quote band */
.band{
  position:relative;
  padding-block:clamp(4.5rem, 11vw, 10rem);
  background:var(--ink-1);
  border-block:1px solid var(--line-soft);
  overflow:hidden;
}
.band__bg{
  position:absolute; inset:0;
  opacity:.2;
}
.band__bg img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1);
}
.band__inner{ position:relative; text-align:center; }
.band__quote{
  font-family:var(--font-d);
  font-size:clamp(1.5rem, .9rem + 2.9vw, 3.4rem);
  font-weight:900;
  font-style:italic;
  line-height:1.06;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0 auto;
  max-width:32ch;
  text-wrap:balance;
}
/* the closing clause takes its own line once there's room for it, so the
   quote breaks on its sentences instead of mid-phrase */
.band__tail{ display:inline; }
@media (min-width: 780px){
  .band__tail{ display:block; }
}
.band__by{
  margin:1.6rem 0 0;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ash-dim);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(3rem,6vw,5rem) 2rem;
  background:var(--ink-1);
}
.ftr__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line-soft);
}
.ftr__logo img{ width:clamp(180px,22vw,280px); height:auto; margin-bottom:1.35rem; }
.ftr__blurb{ font-size:.9rem; color:var(--ash-dim); max-width:34ch; margin:0; }

.ftr__h{
  font-family:var(--font-d);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--bone);
  margin:0 0 1.15rem;
}
.ftr__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.ftr__list a{
  font-size:.85rem;
  color:var(--ash);
  transition:color .3s var(--ease);
}
.ftr__list a:hover{ color:var(--bone); }


.ftr__btm{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  padding-top:2rem;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ash-dim);
}

/* ==========================================================================
   OVERLAYS — search + cart
   ========================================================================== */
.scrim{
  position:fixed;
  inset:0;
  z-index:190;
  background:rgba(3,4,5,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.scrim.is-open{ opacity:1; visibility:visible; }

/* search */
.search{
  position:fixed;
  inset:0 0 auto 0;
  z-index:200;
  background:var(--ink);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  transition:transform .55s var(--ease-out);
  max-height:100svh;
  overflow-y:auto;
}
.search.is-open{ transform:translateY(0); }
.search__in{ padding:clamp(1.5rem,4vw,3rem) var(--pad) clamp(2rem,4vw,3rem); max-width:var(--maxw); margin-inline:auto; }
.search__row{
  display:flex;
  align-items:center;
  gap:1rem;
  border-bottom:1px solid var(--line);
  padding-bottom:1rem;
}
.search__row svg{ width:20px; height:20px; color:var(--ash-dim); flex:none; }
.search input{
  flex:1;
  background:none;
  border:0;
  color:var(--bone);
  font-family:var(--font-d);
  font-size:clamp(1.15rem,.9rem + 1.4vw,2rem);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.01em;
  padding:.25rem 0;
}
.search input::placeholder{ color:var(--ash-dim); opacity:1; }
.search input:focus{ outline:none; }
.search__res{ margin-top:1.75rem; display:grid; gap:.4rem; }
.search__hit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.95rem .25rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--ash);
  transition:color .25s var(--ease), padding-left .3s var(--ease);
}
.search__hit:hover{ color:var(--bone); padding-left:.7rem; }
.search__hit strong{
  font-family:var(--font-d);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.85rem;
}
.search__none{ color:var(--ash-dim); font-size:.9rem; padding:1rem .25rem; }

/* cart */
.cart{
  position:fixed;
  top:0; right:0; bottom:0;
  z-index:200;
  width:min(430px, 100vw);
  background:var(--ink);
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .55s var(--ease-out);
}
.cart.is-open{ transform:translateX(0); }
.cart__hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 1.5rem;
  border-bottom:1px solid var(--line-soft);
}
.cart__hd h2{ font-size:1rem; letter-spacing:.16em; font-style:italic; }
.cart__body{ flex:1; overflow-y:auto; padding:1.25rem 1.5rem; }
.cart__empty{ color:var(--ash-dim); font-size:.9rem; text-align:center; padding:3.5rem 0; }

.line{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:1rem;
  align-items:center;
  padding:1rem 0;
  border-bottom:1px solid var(--line-soft);
}
.line__thumb{
  width:64px; aspect-ratio:4/5;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  display:grid; place-items:center;
  overflow:hidden;
}
.line__thumb svg{ width:78%; height:auto; }
.line__nm{ font-family:var(--font-d); font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0; }
.line__vr{ font-size:.7rem; color:var(--ash-dim); margin:.3rem 0 .45rem; letter-spacing:.1em; text-transform:uppercase; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); }
.qty button{ width:26px; height:26px; display:grid; place-items:center; color:var(--ash); font-size:.9rem; line-height:1; }
.qty button:hover{ color:var(--bone); }
.qty span{ min-width:26px; text-align:center; font-size:.76rem; font-weight:700; }
.line__pr{ font-family:var(--font-d); font-size:.8rem; font-weight:700; }

.cart__ft{ padding:1.25rem 1.5rem 1.6rem; border-top:1px solid var(--line-soft); }
.cart__sum{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-d); font-size:.85rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.4rem;
}
.cart__note{ font-size:.68rem; color:var(--ash-dim); margin:0 0 1.15rem; letter-spacing:.06em; }

/* ==========================================================================
   REVEAL
   ========================================================================== */
.rv{ opacity:0; transform:translateY(26px); }
.rv.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.grid > *:nth-child(even).rv.is-in{
  transform:translateY(clamp(1.5rem, 5vw, 5.5rem));
}
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; }
  .grid > *:nth-child(even){ transform:none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .ftr__top{ grid-template-columns:1fr 1fr; }
  .ftr__logo{ grid-column:1 / -1; }
}

@media (max-width: 900px){
  .split{ grid-template-columns:1fr; }
  .split--flip .split__media{ order:0; }
  .split__media{ aspect-ratio:4/3; }
}

@media (max-width: 700px){
  .hdr__bar{ padding:1rem var(--pad) .7rem; }
  .hdr__nav{ gap:1.6rem; padding-bottom:.9rem; }
  .hdr__nav a{ font-size:.66rem; letter-spacing:.2em; }
  .icon-btn{ width:40px; height:40px; }

  /* the top of the page reads the same as desktop: caption sits ON the film,
     no CTA underneath it */
  .hero__cap{ padding-bottom:1rem; gap:1rem; }
  .hero__tag{ font-size:.58rem; letter-spacing:.2em; }

  /* marquee runs tighter on a phone — and faster, since the shorter track
     would otherwise crawl at the same duration */
  .marquee{ padding:.72rem 0; }
  .marquee span{
    font-size:.62rem;
    letter-spacing:.15em;
    gap:1rem;
    padding-right:1rem;
  }
  .marquee span::after{ width:4px; height:4px; }
  .marquee__track{ animation-duration:26s; }

  .sec__head{ align-items:flex-start; }
  .ftr__btm{ flex-direction:column; align-items:flex-start; gap:.6rem; }
}

/* true phones — still 2 up, just condensed */
@media (max-width: 560px){
  .grid{ gap:1.1rem .7rem; }
  .grid > *:nth-child(even){ transform:translateY(1.4rem); }
  .grid > *:nth-child(even).rv.is-in{ transform:translateY(1.4rem); }

  .card__meta{ padding-top:.7rem; gap:.15rem .6rem; }
  .card__name{ font-size:.7rem; letter-spacing:.08em; }
  .card__sub{ font-size:.58rem; letter-spacing:.1em; margin-top:.22rem; }
  .card__price--soon{ font-size:.55rem; letter-spacing:.1em; }
  .card__flag{ font-size:.48rem; padding:.32rem .5rem; top:.55rem; left:.55rem; }

  .gal{ grid-template-columns:1fr; }
  .ftr__top{ grid-template-columns:1fr; }
}