/* ==========================================================================
   WASTED BOTTLES

   ONE TYPEFACE — Jost. The face the wordmark is set in, used for everything.
   Three weights do all the work: 300 reads, 400 labels, 500 speaks.

   ALIGNMENT — every measurement comes from the step scale below. No element
   carries its own margin; vertical rhythm is produced entirely by grid gap,
   so nothing can drift half a pixel out of true. Both panes of a split share
   identical padding, which means their content starts on the same optical
   line on the left and the right.
   ========================================================================== */

@font-face{font-family:"Jost";src:url("../fonts/jost.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;}

:root{
  --cream:#F7EBD8;
  --ink:#141210;
  --line-c:rgba(20,18,16,.28);
  --line-w:rgba(247,235,216,.38);
  /* measured: at .70 secondary text failed WCAG AA on moss, tobacco and clay.
     .88 and .80 clear 5.38 and 9.15 on the worst ground. */
  --dim-c:rgba(20,18,16,.80);
  --dim-w:rgba(247,235,216,.88);

  /* Taken from the label artwork: a pastel ground carrying the scent name
     set vertically, over a black band carrying the wordmark in acid yellow.
     --ground and --mark are overwritten per product from the catalogue. */
  --acid:#F8FF90;   /* sampled from the label wordmark */
  --black:#000000;
  --ground:#B7C0A4;
  --mark:#EFF283;

  --ui:"Jost","Futura","Century Gothic",system-ui,sans-serif;

  /* the only spacing values permitted anywhere in this file */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4rem;

  --pad:clamp(1.5rem,3.6vw,3.5rem);
  --bar:4.5rem;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;}
html{background:var(--black);scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;}
a,button,summary{-webkit-tap-highlight-color:transparent;}
body{margin:0;background:var(--black);color:var(--cream);
  font-family:var(--ui);font-weight:300;
  font-size:clamp(1rem,.32vw + .95rem,1.1rem);line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--cream);color:var(--ink);}

/* nothing carries its own margin — spacing is grid gap, always */
h1,h2,h3,h4,p,dl,dd,ul,figure,blockquote{margin:0;}
ul{padding:0;list-style:none;}

/* ---- the three type roles, all one face ------------------------------- */
.d1{font-weight:500;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.012em;}
.d2{font-weight:500;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.08;letter-spacing:-.008em;}
.d3{font-weight:500;font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.2;letter-spacing:-.004em;}
.lbl{font-weight:400;font-size:clamp(.74rem,.8vw,.8rem);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;}
.sm{font-weight:300;font-size:clamp(.9rem,.9vw,1rem);line-height:1.7;}
.dim{color:var(--dim-w);}
.pane.cream .dim,.on-cream .dim{color:var(--dim-c);}

/* every vertical stack uses the same mechanism */
.lede{font-weight:300;font-size:clamp(1.08rem,1.3vw,1.28rem);line-height:1.62;max-width:34ch;}

.stack{display:grid;gap:var(--s4);align-content:start;justify-items:start;}
.stack.g2{gap:var(--s2);} .stack.g3{gap:var(--s3);}
.stack.g5{gap:var(--s5);} .stack.g6{gap:var(--s6);}

/* ==========================================================================
   HEADER — quiet. One accent only: the sun mark. Everything else is cream,
   separated by space rather than by a hairline round every cell, and the
   page you are on is marked by a single underline.
   ========================================================================== */
.bar{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--bar);
  display:flex;align-items:center;gap:clamp(var(--s4),3vw,var(--s7));
  padding-inline:var(--pad);background:var(--black);
  border-bottom:1px solid rgba(247,235,216,.22);}
.bar a{color:var(--cream);text-decoration:none;}

.bar .logo{display:inline-flex;align-items:center;gap:var(--s2);flex:0 0 auto;}
.logo .sun{width:1.45rem;height:1.45rem;flex:0 0 auto;color:var(--acid);
  transition:transform 1.2s cubic-bezier(.19,1,.22,1);}
.bar .logo:hover .sun{transform:rotate(60deg);}
.logo .wm{font-weight:500;font-size:clamp(1.05rem,1.3vw,1.18rem);letter-spacing:-.004em;
  text-transform:lowercase;line-height:1;white-space:nowrap;color:var(--cream);}

.navlinks{margin-left:auto;display:flex;align-items:center;
  gap:clamp(var(--s4),2.4vw,var(--s6));}
.navlinks a{position:relative;font-weight:400;font-size:.92rem;letter-spacing:.02em;
  line-height:1;opacity:.72;padding-block:var(--s2);white-space:nowrap;
  transition:opacity .25s ease;}
.navlinks a:hover,.navlinks a:focus-visible{opacity:1;}
.navlinks a[aria-current]{opacity:1;}
.navlinks a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--cream);}
.navlinks a:focus-visible,.bar .logo:focus-visible{outline:1px solid var(--cream);
  outline-offset:4px;}

#cartBtn{flex:0 0 auto;background:none;border:1px solid rgba(247,235,216,.32);
  color:var(--cream);cursor:pointer;font-family:var(--ui);font-weight:400;
  font-size:.92rem;letter-spacing:.02em;line-height:1;
  padding:var(--s2) var(--s3);display:inline-flex;align-items:center;gap:var(--s2);
  white-space:nowrap;transition:background .25s ease,color .25s ease;}
#cartBtn span:not(.t){display:grid;place-items:center;min-width:1.5rem;height:1.5rem;
  border:1px solid currentColor;font-size:.78rem;line-height:1;}
#cartBtn.has span:not(.t){background:var(--cream);color:var(--black);border-color:var(--cream);}
#cartBtn:hover,#cartBtn:focus-visible{background:var(--cream);color:var(--black);}
#cartBtn.has:hover span:not(.t){background:var(--black);color:var(--cream);}
#cartBtn:focus-visible{outline:1px solid var(--cream);outline-offset:3px;}
/* ==========================================================================
   SPLIT — both panes share padding, so left and right start on one line
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr;}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr;}}
.pane{position:relative;overflow:hidden;isolation:isolate;
  padding:var(--s7) var(--pad);display:grid;align-content:center;gap:var(--s5);
  justify-items:start;min-height:clamp(22rem,58svh,34rem);}
.pane.cream{background:var(--cream);color:var(--ink);}
.pane.field{background:var(--black);color:var(--cream);}
.pane.fall{background:var(--black);color:var(--cream);}
.pane.tall{min-height:calc(100svh - var(--bar));}
.pane.split-between{align-content:space-between;}
.pane > *{position:relative;z-index:1;max-width:46ch;}
.pane > .full{max-width:none;width:100%;}

.page{margin-top:var(--bar);}

/* ==========================================================================
   INFO BLOCK — box and actions share one height, gaps from the scale
   ========================================================================== */
.block{display:flex;gap:var(--s2);align-items:stretch;width:100%;max-width:34rem;}
.infobox{flex:1;border:1px solid var(--line-w);padding:var(--s4);
  display:grid;gap:var(--s3);align-content:center;}
.pane.cream .infobox{border-color:var(--line-c);}
.infobox hr{border:0;border-top:1px solid var(--line-w);width:100%;margin:0;}
.pane.cream .infobox hr{border-color:var(--line-c);}
.acts{display:grid;gap:var(--s2);}
.sq{width:clamp(3rem,5.4vw,4.4rem);border:1px solid var(--line-w);background:none;
  color:inherit;cursor:pointer;display:grid;place-items:center;
  font-family:var(--ui);font-weight:300;font-size:1.25rem;line-height:1;
  text-decoration:none;min-height:clamp(3rem,5.4vw,4.4rem);
  transition:background .3s ease,color .3s ease,border-color .3s ease;}
.pane.cream .sq{border-color:var(--line-c);}
.sq:hover,.sq:focus-visible{background:var(--cream);color:var(--ink);border-color:var(--cream);}
.pane.cream .sq:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.sq:focus-visible{outline:1px solid currentColor;outline-offset:3px;}

/* ==========================================================================
   PRODUCT ROW
   ========================================================================== */
.card{display:grid;grid-template-columns:1fr;text-decoration:none;color:inherit;
  isolation:isolate;}
@media (min-width:860px){
  .card{grid-template-columns:1fr 1fr;}
  .card:nth-child(even) .card-art{order:2;}
}
.card-art{background:var(--ground);color:var(--black);padding:var(--s7) var(--pad);
  display:grid;align-content:space-between;gap:var(--s5);justify-items:start;
  min-height:clamp(22rem,58svh,34rem);}
.card-art > *{max-width:34ch;}
.card-side{position:relative;overflow:hidden;isolation:isolate;
  padding:var(--s7) var(--pad);display:grid;align-content:space-between;gap:var(--s5);
  justify-items:start;
  background:var(--black);color:var(--cream);}
.card-side > *{position:relative;z-index:1;}

/* ==========================================================================
   FILTERS
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:var(--s1);padding:var(--s5) var(--pad);
  border-bottom:1px solid rgba(247,235,216,.14);background:var(--black);}
.filters button{font-family:var(--ui);font-weight:400;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;color:var(--dim-w);background:none;cursor:pointer;
  border:1px solid var(--line-w);padding:var(--s2) var(--s3);
  transition:background .25s ease,color .25s ease;}
.filters button:hover{color:var(--cream);}
.filters button[aria-pressed="true"]{background:var(--cream);color:var(--ink);
  border-color:var(--cream);}
.filters button:focus-visible{outline:1px solid var(--cream);outline-offset:3px;}

/* ==========================================================================
   SIZES + DETAIL
   ========================================================================== */
.sizes{display:flex;flex-wrap:wrap;gap:var(--s1);}
.sizes button{background:none;border:1px solid var(--line-w);color:inherit;cursor:pointer;
  font-family:var(--ui);font-weight:300;font-size:clamp(.84rem,.9vw,.9rem);letter-spacing:.02em;
  line-height:1.3;
  padding:var(--s2) var(--s3);display:flex;gap:var(--s2);align-items:baseline;
  transition:background .25s ease,color .25s ease;}
.sizes button small{font-size:.8rem;opacity:.85;}
.sizes button[aria-pressed="true"]{background:var(--cream);color:var(--ink);
  border-color:var(--cream);}
.sizes button:focus-visible{outline:1px solid var(--cream);outline-offset:3px;}

.detail{width:100%;max-width:34rem;border-top:1px solid var(--line-w);}
.detail details{border-bottom:1px solid var(--line-w);}
.detail summary{cursor:pointer;list-style:none;padding-block:var(--s3);display:flex;
  justify-content:space-between;align-items:center;gap:var(--s4);
  font-weight:400;font-size:clamp(.78rem,.85vw,.84rem);letter-spacing:.1em;
  text-transform:uppercase;line-height:1.2;}
.detail summary::-webkit-details-marker{display:none;}
.detail summary::after{content:"+";font-size:1rem;line-height:1;transition:transform .3s ease;}
.detail details[open] summary::after{transform:rotate(45deg);}
.detail summary:focus-visible{outline:1px solid var(--cream);outline-offset:2px;}
.detail .body{display:grid;gap:var(--s2);padding-bottom:var(--s4);}
.detail p{font-size:clamp(.92rem,.95vw,1rem);line-height:1.7;color:var(--dim-w);max-width:44ch;}

/* ==========================================================================
   LEDGER + LISTS
   ========================================================================== */
.ledger{width:100%;max-width:34rem;border-top:1px solid var(--line-w);}
.ledger > div{display:grid;grid-template-columns:9rem 1fr;gap:var(--s4);
  padding-block:var(--s3);border-bottom:1px solid var(--line-w);align-items:baseline;}
.pane.cream .ledger,.pane.cream .ledger > div{border-color:var(--line-c);}
.ledger dt{font-weight:400;font-size:clamp(.72rem,.78vw,.78rem);letter-spacing:.13em;
  text-transform:uppercase;opacity:.82;line-height:1.6;}
.ledger dd{font-size:clamp(.95rem,1vw,1.02rem);line-height:1.7;}
@media (max-width:520px){.ledger > div{grid-template-columns:1fr;gap:var(--s1);}}

.steps{width:100%;max-width:34rem;display:grid;gap:0;border-top:1px solid var(--line-w);}
.steps > li{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s4);
  padding-block:var(--s4);border-bottom:1px solid var(--line-w);align-items:start;}
.pane.cream .steps,.pane.cream .steps > li{border-color:var(--line-c);}
.steps .n{font-weight:400;font-size:clamp(.72rem,.78vw,.78rem);letter-spacing:.13em;opacity:.82;
  padding-top:.35rem;line-height:1.6;}
.steps .t{display:grid;gap:var(--s1);}

/* ==========================================================================
   CART PAGE
   ========================================================================== */
.cartpage{padding:var(--s7) var(--pad);display:grid;gap:var(--s6);
  max-width:64rem;margin-inline:auto;}
.cartpage .lines{padding:0;}
.cart-summary{max-width:26rem;justify-self:end;}
.cartpage .line{grid-template-columns:3.5rem 1fr auto;}

/* ==========================================================================
   FORM
   ========================================================================== */
.form{width:100%;max-width:34rem;display:grid;gap:var(--s3);}
.field{display:grid;gap:var(--s1);}
.field label{font-weight:400;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.7;line-height:1.6;}
.field input,.field textarea{background:none;border:1px solid var(--line-w);color:inherit;
  font-family:var(--ui);font-weight:300;font-size:.95rem;padding:var(--s3);line-height:1.5;}
.pane.cream .field input,.pane.cream .field textarea{border-color:var(--line-c);}
.field input:focus-visible,.field textarea:focus-visible{outline:1px solid var(--cream);
  outline-offset:2px;}
.pane.cream .field input:focus-visible,.pane.cream .field textarea:focus-visible{
  outline-color:var(--ink);}

/* ==========================================================================
   BAG
   ========================================================================== */
.scrim{position:fixed;inset:0;z-index:300;background:rgba(6,6,5,.72);opacity:0;
  pointer-events:none;transition:opacity .35s ease;}
.scrim.on{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:310;width:min(26rem,100%);
  background:var(--cream);color:var(--ink);transform:translateX(101%);
  transition:transform .45s cubic-bezier(.19,1,.22,1);display:grid;
  grid-template-rows:auto 1fr auto;}
.drawer.on{transform:none;}
.drawer > header{display:flex;justify-content:space-between;align-items:center;
  padding:var(--s4) var(--pad);border-bottom:1px solid var(--line-c);}
.drawer .x{background:none;border:0;font-size:1.35rem;line-height:1;cursor:pointer;
  color:inherit;padding:var(--s1);}
.drawer .x:focus-visible{outline:1px solid var(--ink);outline-offset:2px;}
.lines{overflow-y:auto;padding-inline:var(--pad);}
.line{display:grid;grid-template-columns:3rem 1fr auto;gap:var(--s3);align-items:center;
  padding-block:var(--s4);border-bottom:1px solid var(--line-c);}
.line .sw{width:3rem;height:3.6rem;border:1px solid var(--line-c);}
.line .t{display:grid;gap:var(--s1);justify-items:start;}
.line .rm{background:none;border:0;cursor:pointer;font-family:var(--ui);font-weight:400;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-c);
  padding:0;line-height:1.6;}
.line .rm:hover{color:var(--ink);}
.drawer > footer{padding:var(--s4) var(--pad);border-top:1px solid var(--line-c);
  display:grid;gap:var(--s3);}
.total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem;}
.saved{font-weight:400;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim-c);line-height:1.6;}
.saved.live{color:var(--ink);}
.empty{padding-block:var(--s8);text-align:center;color:var(--dim-c);}
.btn{background:var(--ink);color:var(--cream);border:1px solid var(--ink);cursor:pointer;
  font-family:var(--ui);font-weight:400;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;line-height:1;padding-inline:var(--s5);height:2.9rem;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  transition:background .25s ease,color .25s ease;}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--ink);}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line-c);}
.btn.ghost:hover{background:var(--ink);color:var(--cream);}
.btn.wide{width:100%;}
.btn.onworld-ghost{background:none;color:var(--cream);border-color:var(--line-w);}
.btn.onworld-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}
.btn.onworld{background:var(--cream);color:var(--ink);border-color:var(--cream);}
.btn.onworld:hover{background:transparent;color:var(--cream);}

/* translate(-50%,150%) left ~0.5rem of an empty toast visible above the
   viewport edge — a small cream box with nothing in it. Hide it outright. */
.toast{position:fixed;left:50%;bottom:var(--s5);transform:translate(-50%,1rem);
  opacity:0;visibility:hidden;z-index:320;
  background:var(--cream);color:var(--ink);padding:var(--s2) var(--s4);
  font-weight:400;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  transition:transform .45s cubic-bezier(.19,1,.22,1),opacity .3s ease,visibility .45s;}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;}

/* ==========================================================================
   FOOTER — the black band off the label, laid out the way it is printed:
   the wordmark and rule on the left, the manufacturing block in the middle,
   the navigation where the net content sits. Full bleed, fixed ground, so
   it can never merge with or clash against the row above it.
   ========================================================================== */
.foot{background:var(--black);color:var(--cream);
  padding:var(--s7) var(--pad) var(--s6);}
.foot-in{max-width:none;margin:0;display:grid;gap:var(--s6);align-items:start;}
@media (min-width:900px){.foot-in{grid-template-columns:1.35fr 1.1fr 1fr 1fr;gap:var(--s7);}}

.foot .brandcol{display:grid;gap:var(--s3);align-content:start;justify-items:start;}
.foot .bigsun{width:clamp(2rem,2.8vw,2.5rem);height:auto;color:var(--acid);}
.foot .wordmark{font-weight:500;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1;
  letter-spacing:-.012em;color:var(--acid);}
.foot .tag{font-weight:300;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.3;
  color:var(--acid);}
/* the rule the label prints under the product name */
.foot .bar-rule{width:clamp(10rem,20vw,17rem);height:1px;background:rgba(237,240,122,.5);}
.foot .brandcol .code{color:var(--acid);opacity:.85;}

.foot .col{display:grid;gap:var(--s3);align-content:start;}
.foot h3{font-weight:400;font-size:clamp(.72rem,.78vw,.78rem);letter-spacing:.16em;
  text-transform:uppercase;color:var(--acid);opacity:.75;line-height:1.6;}
.foot ul{display:grid;gap:var(--s2);}
.foot a{color:var(--cream);text-decoration:none;opacity:.84;
  font-size:clamp(.92rem,.95vw,1rem);line-height:1.5;
  transition:color .25s ease,opacity .25s ease;}
.foot a:hover{opacity:1;color:var(--acid);}
.foot .legal{font-weight:300;font-size:clamp(.86rem,.9vw,.94rem);line-height:1.62;
  color:var(--dim-w);}

.colo{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s6);justify-content:space-between;
  padding:var(--s4) var(--pad);background:var(--black);color:var(--cream);
  border-top:1px solid rgba(237,240,122,.22);
  font-weight:400;font-size:clamp(.7rem,.75vw,.76rem);letter-spacing:.12em;
  text-transform:uppercase;opacity:.72;line-height:1.6;}
.rise{opacity:0;transform:translateY(16px);
  transition:opacity .85s cubic-bezier(.19,1,.22,1),transform .85s cubic-bezier(.19,1,.22,1);}
.rise.in{opacity:1;transform:none;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;}
  .rise{opacity:1;transform:none;}
}

/* ==========================================================================
   RAW — the surface, not the structure.
   Grain over everything, registration marks at every pane corner, and
   specimen codes where a finished site would put nothing. Alignment is
   untouched: rawness here is texture and exposed process, never drift.
   ========================================================================== */
:root{ --line-strong:rgba(247,235,216,.55); }

/* paper grain. warm, coarse, and sitting over the whole page */
#grain{position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.10;mix-blend-mode:overlay;}
/* a second, directional layer — fibre rather than noise */
body::after{content:"";position:fixed;inset:0;z-index:401;pointer-events:none;opacity:.05;
  background:
    repeating-linear-gradient(96deg,rgba(247,235,216,.55) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(4deg,rgba(20,18,16,.4) 0 1px,transparent 1px 5px);
  mix-blend-mode:overlay;}

/* registration marks — a printer's proof, one at each corner of every pane */
.pane,.card-art,.card-side{position:relative;}
.pane::before,.card-art::before,.card-side::before{
  content:"";position:absolute;inset:var(--s3);pointer-events:none;z-index:3;
  --mk:var(--line-w);
  background:
    linear-gradient(var(--mk),var(--mk)) left    top/14px 1px no-repeat,
    linear-gradient(var(--mk),var(--mk)) left    top/1px 14px no-repeat,
    linear-gradient(var(--mk),var(--mk)) right   top/14px 1px no-repeat,
    linear-gradient(var(--mk),var(--mk)) right   top/1px 14px no-repeat,
    linear-gradient(var(--mk),var(--mk)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--mk),var(--mk)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--mk),var(--mk)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--mk),var(--mk)) right bottom/1px 14px no-repeat;}
.pane.cream::before,.card-art::before{--mk:var(--line-c);}


/* specimen codes — batch marks, set in the numerals of the one typeface */
.code{font-weight:400;font-size:clamp(.68rem,.74vw,.74rem);letter-spacing:.16em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;opacity:.7;line-height:1.6;}

/* dividers inside the info box go dashed — drawn, not printed */
.infobox hr{border-top-style:dashed;}

/* hairline down both edges of the page, exposing the column */
.split{position:relative;}
.split::before,.split::after{content:"";position:absolute;top:0;bottom:0;width:1px;
  background:var(--line-w);opacity:.5;pointer-events:none;z-index:2;}
.split::before{left:0;} .split::after{right:0;}

@media (prefers-reduced-motion:reduce){ #grain{opacity:.07;} }
/* ==========================================================================
   THE LABEL, TRANSLATED
   Each product row is the label opened flat: the pastel ground carrying the
   scent name set vertically on the left, the black band carrying the
   wordmark and the detail on the right.
   ========================================================================== */
.pane.ground{background:var(--ground);color:var(--black);}
.pane.black{background:var(--black);color:var(--cream);}
.pane.ground .dim{color:rgba(0,0,0,.68);}
.pane.ground::before{--mk:rgba(0,0,0,.28);}
.pane.black::before{--mk:rgba(247,235,216,.3);}

/* the scent, set vertically, exactly as it is printed */
.scentmark{display:flex;gap:clamp(var(--s5),6vw,var(--s8));align-items:flex-start;
  height:100%;pointer-events:none;}
.scentmark span{writing-mode:vertical-rl;text-orientation:upright;
  font-weight:500;letter-spacing:.22em;line-height:1;color:var(--mark);
  font-size:clamp(1.6rem,4.4vw,3.4rem);}
/* the label sets the second word lower than the first. Expressed as padding
   so no element carries a margin, and in svh so iOS chrome cannot shift it. */
.scentmark span:nth-child(2){padding-block-start:clamp(var(--s6),12svh,10rem);}

/* the black band: wordmark in acid, product beneath, rule, then volume */
.labelfoot{display:grid;gap:var(--s3);justify-items:start;}
.labelfoot .wm{font-weight:500;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1;
  color:var(--acid);letter-spacing:-.008em;}
.labelfoot .prod{font-weight:300;font-size:clamp(1.05rem,2.2vw,1.6rem);line-height:1.15;
  color:var(--acid);}
.labelfoot .bar{width:clamp(9rem,18vw,16rem);height:1px;background:var(--mark);opacity:.8;}
.labelfoot .vol{font-weight:300;font-size:clamp(.9rem,1.4vw,1.1rem);letter-spacing:.12em;
  color:var(--acid);}

/* acid is the one accent, everywhere */
.pane.black .infobox{border-color:rgba(237,240,122,.42);}
.pane.black .infobox hr{border-color:rgba(237,240,122,.42);}
.pane.black .sq{border-color:rgba(237,240,122,.42);color:var(--acid);}
.pane.black .sq:hover,.pane.black .sq:focus-visible{background:var(--acid);color:var(--black);
  border-color:var(--acid);}
.pane.ground .sq{border-color:rgba(0,0,0,.3);}
.pane.ground .sq:hover{background:var(--black);color:var(--ground);border-color:var(--black);}
/* ==========================================================================
   GROUND SWATCHES — the five label colours, usable on any pane
   ========================================================================== */
.g1{--ground:#EE9299;--mark:#F4F48E;}   /* lemon ginger  */
.g2{--ground:#F2D194;--mark:#E08A61;}   /* grapefruit    */
.g3{--ground:#B7C0A4;--mark:#EFF283;}   /* lemongrass    */
.g4{--ground:#E08A61;--mark:#F2F28C;}   /* orange cedar  */
.g5{--ground:#A6BDC1;--mark:#F0F48A;}   /* citric oud    */

/* ==========================================================================
   ACID IS A DARK-GROUND COLOUR ONLY.
   #EDF07A on cream is a 1.03:1 contrast ratio — invisible. Anything set in
   acid must fall back to black the moment it lands on a light pane.
   ========================================================================== */
.pane.cream .wordmark,.pane.cream .wm,.pane.cream .prod,.pane.cream .vol,
.pane.ground .wordmark,.pane.ground .wm,.pane.ground .prod,.pane.ground .vol,
.card-art .wordmark,.card-art .wm,.card-art .prod,.card-art .vol{color:var(--black);}
.pane.ground .lbl,.pane.ground .code,.pane.ground .d1,.pane.ground .d2,
.pane.ground .d3,.pane.ground .lede{color:var(--black);}
.pane.ground .bigsun,.card-art .bigsun{color:var(--black);}
.pane.ground .infobox,.pane.ground .infobox hr{border-color:rgba(0,0,0,.3);}
.pane.ground .detail,.pane.ground .detail details{border-color:rgba(0,0,0,.22);}
.pane.ground .detail p,.pane.ground .sm{color:rgba(0,0,0,.72);}
.pane.ground .sizes button{border-color:rgba(0,0,0,.3);}
.pane.ground .sizes button[aria-pressed="true"]{background:var(--black);color:var(--ground);
  border-color:var(--black);}

/* the footer band is black, so acid is safe there and nowhere else */
.foot .wordmark,.foot .bigsun{color:var(--acid);}
/* ==========================================================================
   THE RANGE — five label grounds standing side by side, each carrying its
   scent set vertically. Hovering one opens it and closes the others, which
   is the one interaction the vertical type actually invites.
   ========================================================================== */
.range{display:flex;flex-direction:column;border-block:1px solid rgba(0,0,0,.25);}
@media (min-width:820px){
  /* no min-height here: inside .first this row is minmax(0,1fr) and any
     minimum forces the columns past the fold and clips the captions */
  .range{flex-direction:row;min-height:0;}
  /* size containment only where the column has a definite height. On a phone
     it collapses every card to a bare colour bar. */
  .range a{container-type:size;}
}
.range a{position:relative;flex:1 1 0;background:var(--ground);color:var(--black);
  text-decoration:none;overflow:hidden;min-height:0;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:start;
  gap:var(--s4);padding:var(--s4);
  border-left:1px solid rgba(0,0,0,.20);
  transition:flex-grow .65s cubic-bezier(.19,1,.22,1);}
@media (max-width:819px){.range a{min-height:15rem;}}
.range a:first-child{border-left:0;}
@media (max-width:819px){
  .range a{border-left:0;border-top:1px solid rgba(0,0,0,.20);}
  .range a:first-child{border-top:0;}
}
@media (min-width:820px){
  .range a:hover,.range a:focus-visible{flex-grow:2.6;}
}
.range a:focus-visible{outline:2px solid var(--black);outline-offset:-6px;}

.range .n{font-weight:400;font-size:clamp(.72rem,.78vw,.78rem);letter-spacing:.16em;
  text-transform:uppercase;opacity:.7;}
.range .vert{display:flex;gap:var(--s4);align-items:flex-start;
  min-height:0;overflow:hidden;}
/* the longest scent word here is six letters, and upright vertical type
   stacks at roughly 1.2x the font size per glyph. 6.8cqh keeps six letters
   inside the middle row at every viewport height down to 640px, verified
   against the arithmetic rather than eyeballed. */
.range .vert span{writing-mode:vertical-rl;text-orientation:upright;
  font-weight:500;letter-spacing:.2em;line-height:1;color:var(--mark);
  font-size:min(1.85rem,6.8cqh);}
@media (max-width:819px){
  .range .vert{writing-mode:horizontal-tb;gap:var(--s2);}
  .range .vert span{writing-mode:horizontal-tb;text-orientation:mixed;
    letter-spacing:.16em;font-size:clamp(1.4rem,7vw,2rem);}
}
.range .cap{display:grid;gap:var(--s1);justify-items:start;background:none;padding:0;}
.range .cap .nm{font-weight:500;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.15;}
.range .cap .sc{font-weight:300;font-size:clamp(.84rem,.9vw,.92rem);opacity:.78;}
.range .cap .go{font-weight:400;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateX(-.4rem);
  transition:opacity .45s ease,transform .55s cubic-bezier(.19,1,.22,1);}
.range a:hover .go,.range a:focus-visible .go{opacity:.85;transform:none;}
@media (max-width:819px){.range .cap .go{opacity:.7;transform:none;}}

/* a full-bleed statement, set as large as the page will take */
.claim{background:var(--black);color:var(--cream);padding:var(--s8) var(--pad);
  display:grid;justify-items:start;gap:var(--s5);}
.claim p{max-width:20ch;font-weight:500;line-height:1.02;letter-spacing:-.016em;
  font-size:clamp(2.4rem,8.5vw,7rem);}
.claim p em{font-style:normal;color:var(--acid);}
.claim .sub{max-width:44ch;font-weight:300;font-size:clamp(1rem,1.4vw,1.2rem);
  line-height:1.6;color:var(--dim-w);letter-spacing:0;}
/* ==========================================================================
   HERO BAND — a compact black masthead, sized so the range sits directly
   under it and the five colours are on screen before anyone scrolls.
   ========================================================================== */
/* The masthead and the range together are exactly one screen, minus the
   fixed header. Sizing them as two guessed percentages overflowed by the
   height of the bar and clipped the product names off the foot. */
.first{display:grid;}
@media (min-width:820px){
  .first{height:calc(100svh - var(--bar));grid-template-rows:auto minmax(0,1fr);}
}
.hero-band{background:var(--black);color:var(--cream);
  padding:var(--s6) var(--pad) var(--s5);
  display:grid;align-content:space-between;gap:var(--s4);
  overflow:hidden;}
/* every masthead element is capped in svh as well as vw, so a short window
   shrinks the type instead of pushing the range off the bottom */
.hero-band h1{font-size:min(clamp(2.2rem,6.2vw,5rem),9.5svh);}
.hero-band .strap{font-size:min(clamp(1rem,1.2vw,1.12rem),2.3svh);}
.hero-band .row{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  align-items:baseline;}
.hero-band h1{font-weight:500;font-size:clamp(2.2rem,6.2vw,5rem);line-height:.96;
  letter-spacing:-.016em;color:var(--acid);}
.hero-band .strap{max-width:52ch;font-weight:300;
  font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.5;color:var(--dim-w);}
.hero-band .code{color:var(--acid);opacity:.8;}

/* ==========================================================================
   FORM + ACCORDION ON A LIGHT GROUND
   So a pane never has to stay black purely because its contents were only
   styled for black.
   ========================================================================== */
.pane.ground .field label{color:rgba(0,0,0,.72);}
.pane.ground .field input,.pane.ground .field textarea{
  border-color:rgba(0,0,0,.3);color:var(--black);}
.pane.ground .field input:focus-visible,.pane.ground .field textarea:focus-visible{
  outline-color:var(--black);}
.pane.ground .btn.onworld{background:var(--black);color:var(--ground);border-color:var(--black);}
.pane.ground .btn.onworld:hover{background:transparent;color:var(--black);}
.pane.ground .detail summary{color:var(--black);}
.pane.ground .detail summary::after{color:var(--black);}
.pane.ground .detail summary:focus-visible{outline-color:var(--black);}
/* ==========================================================================
   CLOSING BAND — a ground-coloured ending, so no page runs black straight
   into the black footer.
   ========================================================================== */
.closer{background:var(--ground);color:var(--black);
  padding:var(--s7) var(--pad);display:grid;gap:var(--s5);
  justify-items:start;align-content:center;min-height:clamp(14rem,34svh,22rem);
  border-top:1px solid rgba(0,0,0,.22);}
.closer .inner{display:grid;gap:var(--s4);justify-items:start;max-width:46ch;}
.closer h2{font-weight:500;font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.04;
  letter-spacing:-.01em;}
.closer p{font-weight:300;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55;
  color:rgba(0,0,0,.74);}
.closer .go{display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid rgba(0,0,0,.32);padding:var(--s3) var(--s4);
  font-weight:400;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--black);
  transition:background .3s ease,color .3s ease,border-color .3s ease;}
.closer .go:hover,.closer .go:focus-visible{background:var(--black);color:var(--ground);
  border-color:var(--black);}
.closer .go:focus-visible{outline:1px solid var(--black);outline-offset:3px;}
/* ==========================================================================
   MENU — on a phone the navigation is a full sheet with large targets, not
   four 11px uppercase words squeezed into a bar.
   ========================================================================== */
.menuBtn{display:none;background:none;border:1px solid rgba(247,235,216,.32);
  color:var(--cream);cursor:pointer;font-family:var(--ui);font-weight:400;
  align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  font-size:.92rem;letter-spacing:.02em;flex:0 0 auto;}
.menuBtn .bars{display:grid;gap:4px;width:1.15rem;}
.menuBtn .bars i{display:block;height:2px;background:currentColor;
  transition:transform .3s ease,opacity .3s ease;}
.menuBtn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menuBtn[aria-expanded="true"] .bars i:nth-child(2){opacity:0;}
.menuBtn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.menuBtn:focus-visible{outline:1px solid var(--cream);outline-offset:3px;}

.menu{position:fixed;inset:var(--bar) 0 0 0;z-index:190;background:var(--black);
  overflow-y:auto;overscroll-behavior:contain;}
.menu[hidden]{display:none;}
.menu-in{display:grid;padding-bottom:var(--s8);}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:4.5rem;padding:var(--s4) var(--pad);
  border-bottom:1px solid rgba(247,235,216,.2);
  color:var(--cream);text-decoration:none;
  font-weight:500;font-size:1.5rem;line-height:1.2;letter-spacing:-.006em;}
.menu a::after{content:"\2192";opacity:.45;font-weight:300;}
.menu a:active{background:rgba(247,235,216,.1);}
.menu a:focus-visible{outline:2px solid var(--cream);outline-offset:-4px;}

/* words on every control, shown where there is room for them */
.sq .t{display:none;}
#cartBtn .t{display:inline;}

/* ==========================================================================
   PHONE
   Bigger type, one column, every target at least 48px, and no control that
   is only an arrow. svh throughout so iOS chrome never crops a block.
   ========================================================================== */
@media (max-width:859px){

  /* ---- type: 17px base, labels legible, tracking relaxed ---- */
  body{font-size:1.075rem;line-height:1.68;}
  .sm{font-size:1.02rem;line-height:1.65;}
  .lede{font-size:1.16rem;line-height:1.58;}
  .lbl{font-size:.86rem;letter-spacing:.08em;}
  .code{font-size:.82rem;letter-spacing:.08em;}
  .d3{font-size:1.22rem;}
  .detail summary{font-size:1rem;letter-spacing:.05em;}
  .foot h3{font-size:.86rem;letter-spacing:.08em;opacity:.8;}

  /* ---- header: logo, bag, menu. nothing else competing ---- */
  .navlinks{display:none;}
  .menuBtn{display:inline-flex;}
  #cartBtn{margin-left:auto;font-size:1rem;padding:var(--s3);}
  #cartBtn span:not(.t){min-width:1.8rem;height:1.8rem;font-size:.86rem;}
  .menuBtn{font-size:1rem;padding:var(--s3);}
  .logo .wm{display:inline;font-size:1.15rem;}
  .logo .sun{width:1.6rem;height:1.6rem;}

  /* ---- one column, generous, left aligned ---- */
  .pane,.pane.tall,.pdp .pane,.card-art,.card-side,.closer,.claim,.hero-band{
    min-height:auto;padding:var(--s6) var(--pad);}
  .split,.card{grid-template-columns:1fr;}
  .first{height:auto;}

  /* ---- the range becomes five plain cards ---- */
  .range{flex-direction:column;}
  .range a{min-height:auto;padding:var(--s5) var(--pad);
    grid-template-rows:auto auto auto;gap:var(--s3);
    border-left:0;border-top:1px solid rgba(0,0,0,.22);}
  .range a:first-child{border-top:0;}
  .scentmark,.range .vert{flex-direction:row;gap:var(--s4);height:auto;}
  .scentmark span,.range .vert span{writing-mode:horizontal-tb;text-orientation:mixed;
    font-size:clamp(1.5rem,7vw,2.2rem);letter-spacing:.14em;line-height:1.15;
    padding-block-start:0;}
  .range .cap .nm{font-size:1.3rem;}
  .range .cap .sc{font-size:1rem;opacity:.85;}
  .range .cap .go{opacity:.9;transform:none;font-size:.92rem;letter-spacing:.08em;}

  /* ---- every action is full width, at least 48px, and says what it does ---- */
  .block{flex-direction:column;max-width:none;gap:var(--s3);}
  .acts{width:100%;grid-auto-flow:row;}
  .sq{width:100%;min-height:3.4rem;display:flex;align-items:center;
    justify-content:center;gap:var(--s3);font-size:1.02rem;letter-spacing:.05em;
    padding-inline:var(--s4);}
  .sq .t{display:inline;}
  .sizes{gap:var(--s2);}
  .sizes button{min-height:3.2rem;font-size:1rem;padding-inline:var(--s4);flex:1 1 100%;
    justify-content:space-between;}
  .detail summary{padding-block:var(--s4);min-height:3.4rem;}
  .btn{height:3.4rem;font-size:.92rem;letter-spacing:.1em;}
  .closer .go{min-height:3.4rem;font-size:.98rem;letter-spacing:.06em;padding-inline:var(--s5);}
  .field input,.field textarea{font-size:1.05rem;padding:var(--s4);min-height:3.4rem;}
  .field label{font-size:.9rem;letter-spacing:.06em;}

  /* ---- footer: a plain stacked list, not four squeezed columns ---- */
  .foot{padding:var(--s6) var(--pad) var(--s5);}
  .foot-in{grid-template-columns:1fr;gap:var(--s5);}
  .foot .wordmark{font-size:2.1rem;}
  .foot .col{padding-left:0;border-left:0;
    border-top:1px solid rgba(237,240,122,.22);padding-top:var(--s4);}
  .foot ul{gap:0;}
  .foot ul a{display:flex;align-items:center;min-height:3.1rem;
    font-size:1.08rem;opacity:.95;}
  .foot .legal{font-size:.98rem;line-height:1.7;}
  .colo{flex-direction:column;gap:var(--s2);align-items:flex-start;
    font-size:.82rem;letter-spacing:.06em;}

  /* ---- less noise: the texture reads as dirt at this size ---- */
  #grain{opacity:.04;}
  body::after{display:none;}
  .pane::before,.card-art::before,.card-side::before{display:none;}
  .split::before,.split::after{display:none;}
}

@media (max-width:400px){
  .menuBtn{padding-inline:var(--s3);}
}

/* notch and rounded-corner safety */
@supports (padding:max(0px)){
  .bar,.pane,.card-art,.card-side,.closer,.claim,.foot,.colo,.hero-band,.range a,
  .cartpage,.mosaic,.menu a{
    padding-left:max(var(--pad),env(safe-area-inset-left));
    padding-right:max(var(--pad),env(safe-area-inset-right));
  }
  .colo{padding-bottom:max(var(--s4),env(safe-area-inset-bottom));}
  .drawer > footer{padding-bottom:max(var(--s4),env(safe-area-inset-bottom));}
  .menu-in{padding-bottom:max(var(--s8),env(safe-area-inset-bottom));}
}
/* ==========================================================================
   PHONE — CORRECTIONS
   Measured against a 390px render, not assumed.
   ========================================================================== */
@media (max-width:859px){

  /* ---- nothing may be wider than the screen. ch-based measures at a large
     font size were overflowing and pushing the menu button off the bar. ---- */
  .pane > *,.card-side > *,.hero-band > *,.claim > *,.closer > *,
  .prose,.lede,.strap,.infobox,.block,.detail,.ledger,.steps,.form,
  .foot .brandcol .sm,.sm,.legal{max-width:100%;}
  .claim p{font-size:clamp(1.85rem,7.6vw,2.6rem);line-height:1.08;max-width:100%;}
  .claim .sub{font-size:1.05rem;}
  .hero-band h1{font-size:clamp(2rem,9.5vw,2.9rem);}
  .d1{font-size:clamp(1.9rem,8.5vw,2.7rem);}
  .d2{font-size:clamp(1.5rem,6.5vw,2.1rem);}
  h1,h2,h3,p,a{overflow-wrap:break-word;}

  /* ---- the header must never crowd. logo, then bag, then menu. ---- */
  .bar{gap:var(--s3);padding-inline:var(--s4);}
  .logo .wm{font-size:1.05rem;}
  #cartBtn .t{display:none;}
  #cartBtn{margin-left:auto;padding:var(--s2) var(--s3);gap:0;}
  .menuBtn{padding:var(--s2) var(--s3);}

  /* ---- PRODUCTS, SHOWN AS PRODUCTS ----
     A colour block that reads as the label, the name, the scent, and a
     button. Not a stripe with a number on it. ---- */
  .range{flex-direction:column;}
  .range a{display:grid;grid-template-rows:none;grid-template-columns:5.5rem 1fr;
    align-items:center;gap:var(--s4);
    min-height:7.5rem;padding:var(--s4) var(--pad);
    background:var(--black);color:var(--cream);
    border-top:1px solid rgba(247,235,216,.18);border-left:0;}
  .range a:first-child{border-top:0;}
  .range .n{display:none;}
  /* the colour becomes a swatch, the way it sits on the bottle */
  .range .vert{display:grid;place-items:center;align-self:stretch;
    background:var(--ground);min-height:5.5rem;gap:0;padding:var(--s2);}
  .range .vert span{writing-mode:horizontal-tb;text-orientation:mixed;
    color:var(--black);font-weight:500;font-size:.72rem;letter-spacing:.06em;
    line-height:1.25;text-align:center;padding-block-start:0;}
  .range .cap{gap:var(--s1);align-content:center;}
  .range .cap .nm{font-size:1.28rem;line-height:1.2;color:var(--cream);}
  .range .cap .sc{font-size:1rem;color:var(--dim-w);opacity:1;}
  .range .cap .go{opacity:.75;transform:none;font-size:.86rem;letter-spacing:.08em;
    color:var(--acid);}

  /* ---- footer: short. two columns of links, legal folded away. ---- */
  .foot{padding:var(--s5) var(--pad) var(--s4);}
  .foot-in{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5);}
  .foot .brandcol{grid-column:1 / -1;gap:var(--s2);}
  .foot .bigsun{display:none;}
  .foot .wordmark{font-size:1.6rem;}
  .foot .brandcol .sm{font-size:.95rem;}
  .foot .brandcol .code,.foot .bar-rule{display:none;}
  .foot .col{border-top:1px solid rgba(247,235,216,.18);padding-top:var(--s3);}
  .foot .col:nth-of-type(2){grid-column:1 / -1;}   /* the legal block */
  .foot h3{font-size:.78rem;letter-spacing:.1em;opacity:.65;}
  .foot ul a{min-height:2.6rem;font-size:1rem;}
  .foot .legal{font-size:.88rem;line-height:1.55;opacity:.75;}
  .colo{padding:var(--s3) var(--pad);font-size:.74rem;gap:var(--s1);}
}
/* ==========================================================================
   PHONE — MEASURED CORRECTIONS
   From a real 390x844 and 375x667 emulation: there is no overflow and the
   menu does work. The real faults were targets under 44px and a 577px
   footer.
   ========================================================================== */
@media (max-width:859px){
  .bar .logo{min-height:2.75rem;align-items:center;}
  .bar .logo .wm{display:inline;}
  .logo .sun{width:1.7rem;height:1.7rem;}

  .menuBtn,#cartBtn{min-height:2.75rem;}
  .menu a{min-height:3.5rem;}
  .foot ul a{min-height:2.75rem;}

  .foot{padding:var(--s5) var(--pad) var(--s3);}
  .foot-in{gap:var(--s3) var(--s5);}
  .foot .brandcol{gap:var(--s1);}
  .foot .wordmark{font-size:1.45rem;}
  .foot .brandcol .sm{display:none;}
  .foot .col:nth-of-type(2){display:none;}
  .foot .col{padding-top:var(--s2);}
  .foot h3{font-size:.74rem;opacity:.6;}
  .foot ul a{font-size:.98rem;}
}

@media (max-width:359px){
  .logo .wm{display:none;}
  .menuBtn .t{display:none;}
}
/* ==========================================================================
   PHONE — THE LABEL, FULL BLEED

   A row with a colour chip in it is a list. The label is a pastel ground
   carrying the scent, over a black band carrying the wordmark. On a phone
   there is room to run that full width, one product per screen, so scrolling
   the range is scrolling a shelf of labels.
   ========================================================================== */
@media (max-width:859px){

  /* ---- the opening screen earns its height ---- */
  .hero-band{min-height:calc(100svh - var(--bar));
    align-content:space-between;padding:var(--s6) var(--pad) var(--s7);}
  .hero-band h1{font-size:clamp(2.6rem,13vw,4.2rem);line-height:.94;}
  .hero-band .strap{font-size:1.1rem;line-height:1.5;}
  .hero-band .row{gap:var(--s2);}

  /* ---- one product, one screen, built exactly like the bottle ---- */
  .range{flex-direction:column;border-block:0;}
  .range a{position:relative;display:grid;grid-template-columns:1fr;
    grid-template-rows:1fr auto;gap:0;padding:0;
    /* the desktop rule start-aligns its children; on a phone both halves
       must fill the width or the ground reads as a chip again */
    justify-items:stretch;align-items:stretch;
    min-height:64svh;background:var(--black);
    border:0;border-bottom:1px solid rgba(247,235,216,.16);}

  /* the pastel half: the scent, set large, with the plate number in the corner */
  .range .vert{background:var(--ground);display:grid;align-content:center;
    justify-items:start;gap:var(--s1);padding:var(--s7) var(--pad);min-height:0;}
  .range .vert span{writing-mode:horizontal-tb;text-orientation:mixed;
    color:var(--black);font-weight:500;
    font-size:clamp(2rem,10vw,3rem);letter-spacing:.12em;line-height:1.1;
    text-align:left;padding-block-start:0;}
  .range .n{display:block;position:absolute;top:var(--s4);right:var(--pad);z-index:2;
    color:var(--black);opacity:.55;font-size:.78rem;letter-spacing:.14em;}

  /* the black band: wordmark, product, rule, action — as it is printed */
  .range .cap{background:var(--black);padding:var(--s5) var(--pad) var(--s6);
    display:grid;gap:var(--s3);justify-items:start;}
  .range .cap::before{content:"wasted bottles";color:var(--acid);opacity:.55;
    font-weight:500;font-size:.92rem;letter-spacing:-.004em;}
  .range .cap .nm{color:var(--acid);font-size:1.75rem;line-height:1.1;}
  .range .cap .sc{display:none;}
  .range .cap .go{color:var(--cream);opacity:.9;font-size:.92rem;letter-spacing:.12em;
    border:1px solid rgba(247,235,216,.34);padding:var(--s3) var(--s5);
    min-height:2.75rem;display:inline-flex;align-items:center;transform:none;}

  /* ---- each label rises as it arrives ---- */
  .range a{opacity:0;transform:translateY(22px);
    transition:opacity .8s cubic-bezier(.19,1,.22,1),
               transform .8s cubic-bezier(.19,1,.22,1);}
  .range a.in{opacity:1;transform:none;}
}

@media (max-width:859px) and (prefers-reduced-motion:reduce){
  .range a{opacity:1;transform:none;}
}
/* ==========================================================================
   THE ILLUSTRATIONS

   Each label carries a botanical painting of what is actually in the bottle.
   They are cropped straight out of the artwork, ground and all, so they drop
   onto a panel of the same sampled colour with no seam.
   ========================================================================== */
.range .vert,
.card-art,
.pane.ground.art{
  background-color:var(--ground);
  background-image:var(--art);
  background-repeat:no-repeat;
}

/* desktop range column: the painting sits low, the scent reads over it */
@media (min-width:860px){
  .range .vert{background-position:center bottom -8%;background-size:118% auto;}
  .card-art{background-position:center center;background-size:auto 76%;}
}

/* phone label: painting to the right, scent to the left, as it is printed */
@media (max-width:859px){
  .range .vert{background-position:right -6% center;background-size:auto 92%;}
  .range .vert span{text-shadow:0 0 18px var(--ground),0 0 6px var(--ground);}
  .card-art{background-position:center center;background-size:auto 62%;
    min-height:16rem;}
}

/* product page: the painting is the product shot */
.pane.ground.art{background-position:center center;background-size:auto 66%;}
@media (max-width:859px){
  .pane.ground.art{background-size:auto 46%;background-position:center 32%;
    min-height:22rem;}
}
/* ==========================================================================
   THE ILLUSTRATION GETS ITS OWN ROW

   As a background sized to the panel it was being cut by the panel edge.
   It is now an element with reserved space and background-size:contain, so
   the whole painting is always visible whatever the card height.
   ========================================================================== */
.range .pic{position:relative;background:var(--ground);min-height:0;
  display:grid;gap:var(--s3);padding:var(--s5) var(--pad) var(--s5);}
.range .pic .n{position:absolute;top:var(--s4);right:var(--pad);z-index:2;margin:0;}
.range .art{background-image:var(--art);background-repeat:no-repeat;
  background-position:center;background-size:contain;min-height:0;display:block;}
/* the crop carries its own ground, so nothing shows a seam */
.range .vert{background:none;padding:0;min-height:0;}

@media (min-width:860px){
  .range .pic{grid-template-rows:1fr auto;align-content:stretch;}
  .range .art{min-height:6rem;}
  .range .vert{display:flex;gap:var(--s4);align-items:flex-start;justify-content:center;}
}
@media (max-width:859px){
  .range a{grid-template-rows:auto auto;}
  .range .pic{grid-template-rows:auto auto;justify-items:start;
    padding:var(--s5) var(--pad) var(--s6);}
  .range .art{width:100%;height:clamp(11rem,34svh,18rem);}
  .range .vert{display:flex;flex-direction:row;gap:var(--s4);flex-wrap:wrap;}
  .range .vert span{text-shadow:none;}
}

/* product page: the painting, whole, with room around it */
.pane.ground.art{background-size:contain;background-position:center;
  background-repeat:no-repeat;}
@media (min-width:860px){
  .pane.ground.art{background-size:auto 58%;background-position:center 46%;}
}
@media (max-width:859px){
  .pane.ground.art{background-size:contain;background-position:center 58%;
    min-height:clamp(20rem,52svh,28rem);padding-bottom:var(--s8);}
}

/* shop rows */
.card-art{background-size:contain;background-position:center;background-repeat:no-repeat;}
@media (min-width:860px){.card-art{background-size:auto 62%;}}
@media (max-width:859px){.card-art{background-size:auto 58%;min-height:15rem;}}
/* ==========================================================================
   RANGE — one construction at every size

   Every column is a small label: the ground carrying the scent and the
   painting, then the black band carrying the name. The old desktop rule
   still expected three rows and the markup now has two, which pushed the
   vertical scent off the top of the column.
   ========================================================================== */
.range a{display:grid;grid-template-rows:1fr auto;gap:0;padding:0;
  background:var(--black);align-content:stretch;justify-items:stretch;
  align-items:stretch;overflow:hidden;}
.range .pic{background:var(--ground);color:var(--black);overflow:hidden;}
.range .cap{background:var(--black);color:var(--cream);
  padding:var(--s4) var(--pad) var(--s5);display:grid;gap:var(--s2);
  justify-items:start;align-content:end;}
.range .cap .nm{color:var(--acid);}
.range .cap .sc{color:var(--dim-w);opacity:1;}

@media (min-width:860px){
  /* words first so they sit under the plate number, painting fills the rest */
  .range .pic{display:grid;grid-template-rows:auto minmax(0,1fr);
    gap:var(--s4);padding:var(--s6) var(--s4) var(--s4);justify-items:center;}
  .range .vert{order:1;display:flex;gap:var(--s3);align-items:flex-start;
    justify-content:center;}
  .range .vert span{writing-mode:vertical-rl;text-orientation:upright;
    font-size:min(1.5rem,5.4cqh);}
  .range .art{order:2;width:100%;min-height:0;background-size:contain;}
  .range .cap{align-content:end;}
  .range a{container-type:size;}
}

@media (max-width:859px){
  /* painting first, then the scent, then the black band */
  .range .pic{display:grid;grid-template-rows:auto auto;gap:var(--s4);
    padding:var(--s6) var(--pad) var(--s5);justify-items:start;}
  .range .art{order:1;width:100%;height:clamp(11rem,32svh,17rem);}
  .range .vert{order:2;display:flex;flex-direction:row;flex-wrap:wrap;
    gap:var(--s3);}
  .range .vert span{writing-mode:horizontal-tb;text-orientation:mixed;
    font-size:clamp(1.7rem,8.5vw,2.4rem);letter-spacing:.1em;line-height:1.1;
    text-shadow:none;padding-block-start:0;}
}
/* the bag close button was 21x30 — under the 44px minimum */
.drawer .x{min-width:2.75rem;min-height:2.75rem;display:grid;place-items:center;
  font-size:1.6rem;line-height:1;padding:0;}