/* ============================================================
   SITE CHROME  ·  Third Eye Fragrance Co.
   Lifted verbatim from index.html so every page off the home
   page inherits the same header, footer, type and buttons rather
   than carrying its own copy that can drift. The home pages keep
   their inline CSS; this file is for everything else.
   ============================================================ */

/* ============================================================
   DIRECTION 02 · "THE HOUSE"
   Built on the House of Cosmo frontend grammar:
     · centred two-line wordmark, nav pushed left, icons right
     · bold uppercase grotesque headlines against italic serif copy
     · full-bleed product heroes, each scent inside its own
       coloured atmosphere
     · thin outlined SHOP NOW rectangles
   Atmospheres are the five commissioned paintings, blurred out.
   ============================================================ */

:root{
  --script:var(--script-02);
  --black:#000;
  --off:#070707;
  --panel:#0b0b0b;
  --white:#fff;
  --grey:#9c9a97;
  --grey-2:#c9c6c2;
  --hair:rgba(255,255,255,.16);

  --sans:var(--brand-sans);
  --serif:var(--script);

  --pad:clamp(20px, 4vw, 56px);
  --ease:cubic-bezier(.22,1,.36,1);
  --headH:96px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
/* hidden means hidden, whatever display a class sets */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1}
p{margin:0}
button{font-family:inherit}

/* ---- the two type voices --------------------------------- */
.hd{                                   /* bold uppercase grotesque */
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.005em; line-height:1.04;
}
.script{                               /* script face, eyebrows + body */
  font-family:var(--serif); font-style:italic; font-weight:400;
}
.serif-body{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(17px,1.35vw,21px); line-height:1.62; color:var(--grey-2);
}

.btn-out{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:clamp(200px,17vw,278px); height:clamp(52px,4vw,62px);
  border:1px solid rgba(255,255,255,.85); color:var(--white); background:transparent;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer; transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn-out:hover{background:var(--white); color:#000}
.btn-gold{border-color:rgba(255,255,255,.85); color:var(--white)}
.btn-gold:hover{background:var(--white); border-color:var(--white); color:var(--gold-deep)}

.reveal{opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .drift{animation:none !important}
  .halo,.halo--2{animation:none !important}
}

/* ======================== TOP / HEADER ==================== */
.top{position:fixed; inset:0 0 auto 0; z-index:70}

/* ---- announcement bar: one line above the header ---- */
.promo{
  margin:0; padding:9px var(--pad); text-align:center; background:#000;
  font-size:10.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-lit); border-bottom:1px solid rgba(255,255,255,.08);
}
.head{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding:20px var(--pad); background:transparent;
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.top.stuck .head{background:var(--black); padding:14px var(--pad); border-bottom-color:rgba(255,255,255,.08)}
.head__nav{display:flex; gap:clamp(16px,2.2vw,34px); align-items:center}
.head__nav a{
  font-size:12px; font-weight:700; letter-spacing:.055em; text-transform:uppercase;
  position:relative; padding:4px 0; transition:color .35s ease;
}
.head__nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .45s var(--ease)}
.head__nav a:hover{color:var(--gold-lit)}
.head__nav a:hover::after{width:100%}

.wordmark{text-align:center; line-height:1}
.wordmark b{display:block; font-size:clamp(21px,2.1vw,30px); font-weight:700; letter-spacing:.16em}
.wordmark small{display:block; margin-top:5px; font-size:clamp(8px,.72vw,10px); font-weight:600; letter-spacing:.34em; color:#cfccc7}

.head__icons{display:flex; justify-content:flex-end; align-items:center; gap:clamp(14px,1.6vw,24px)}
.head__icons a{display:grid; place-items:center; width:26px; height:26px; opacity:.92; transition:opacity .3s ease, color .3s ease}
.head__icons a:hover{opacity:1; color:var(--gold-lit)}
.head__icons a.bag{color:var(--gold)}
.head__icons a.bag:hover{color:var(--gold-lit)}
.head__icons svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.burger{display:none}
@media(max-width:1100px){
  .head{grid-template-columns:auto 1fr auto}
  .head__nav{display:none}
  .burger{display:grid; place-items:center; width:26px; height:26px}
  .burger i{display:block; width:22px; height:1.5px; background:#fff; box-shadow:0 6px 0 #fff, 0 -6px 0 #fff}
  .head__icons a:not(.bag){display:none}
}


/* ========================== SHOP ========================== */
.shop{padding:clamp(70px,8vw,120px) 0 clamp(60px,7vw,100px); text-align:center; background:var(--black)}
.eyebrow-script{font-size:clamp(20px,1.8vw,26px); color:#efece7}
.shop h2{font-size:clamp(26px,3.5vw,50px); margin-top:18px; padding:0 var(--pad)}

.rail-wrap{position:relative; margin-top:clamp(38px,4.4vw,68px)}
.rail{
  display:flex; gap:clamp(10px,1.2vw,20px); overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:0 var(--pad); scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.tile{flex:0 0 clamp(230px,23vw,340px); scroll-snap-align:center; text-align:center}
.tile__fig{position:relative; overflow:hidden; background:#050505}
.tile__fig img{width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform 1.3s var(--ease)}
.tile:hover .tile__fig img{transform:scale(1.06)}
.tile__buy{
  position:absolute; left:0; right:0; bottom:0; padding:14px;
  background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-lit);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.tile:hover .tile__buy{transform:none}
.tile h3{margin-top:18px; font-size:clamp(14px,1.15vw,17px); font-weight:700; letter-spacing:.09em; text-transform:uppercase}
.tile .notes{margin-top:7px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey)}
.tile .price{margin-top:9px; font-size:14px; color:var(--gold-lit)}

.arrow{
  position:absolute; top:34%; z-index:7; width:44px; height:44px;
  display:grid; place-items:center; background:transparent; border:0; color:#fff; cursor:pointer;
  opacity:.75; transition:opacity .3s ease;
}
.arrow:hover{opacity:1}
.arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4}
.arrow--l{left:6px} .arrow--r{right:6px}
@media(max-width:760px){ .arrow{display:none} }


/* ======================= NEWSLETTER ======================= */
.news{text-align:center; padding:clamp(66px,8vw,120px) var(--pad); background:var(--black); border-top:1px solid rgba(255,255,255,.08)}
.news h2{font-size:clamp(24px,3vw,42px); margin:16px 0 18px}
.news .serif-body{max-width:460px; margin:0 auto}
.signup{display:flex; max-width:480px; margin:clamp(28px,3vw,40px) auto 0; border:1px solid var(--hair)}
.signup input{
  flex:1; background:transparent; border:0; color:#fff; padding:16px 18px;
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.12em;
}
.signup input::placeholder{color:var(--grey)}
.signup input:focus{outline:1px solid rgba(200,163,73,.6); outline-offset:-1px}
.signup button{
  background:var(--gold); border:0; color:#0a0805; padding:0 28px; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}

/* ========================= FOOTER ========================= */
.foot{padding:clamp(54px,6vw,86px) var(--pad) 24px; border-top:1px solid rgba(255,255,255,.08)}
.foot__grid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(26px,4vw,56px)}
.foot__brand img{width:52px; margin-bottom:18px}
.foot__brand p{color:var(--grey); font-size:13.5px; max-width:280px}
.foot__compliance{
  margin-top:14px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey);
}
.foot h4{font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 20px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:10px}
.foot li a{font-size:13.5px; color:var(--grey); transition:color .3s ease}
.foot li a:hover{color:var(--gold-lit)}
.foot__bar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(42px,5vw,72px); padding-top:22px; border-top:1px solid rgba(255,255,255,.08);
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--grey);
}
/* --- shared footer -------------------------------------------------
   Same structure on all four: the house block, then Navigation,
   Fragrances and Social Media, then the line. Only the colour tokens
   differ, so each direction keeps its own palette. */
.foot__grid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(26px,4vw,56px)}
.foot__brand img{width:52px; margin-bottom:18px}
.foot__brand p{color:var(--grey); font-size:13.5px; max-width:290px; margin:0}
.foot__compliance{
  margin-top:14px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey);
}
.foot__bar a.cc{
  color:inherit; text-transform:none; letter-spacing:.06em;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; transition:color .3s ease;
}
.foot__bar a.cc:hover{color:var(--gold-lit)}
@media(max-width:820px){ .foot__grid{grid-template-columns:1fr 1fr} }

@media(max-width:820px){ .foot__grid{grid-template-columns:1fr 1fr} }

/* ======================= OFFER TAB ======================== */

/* ======================= PROOF BAR ======================== */
body{padding-bottom:40px}


/* ============================================================
   BRAND PASS · real type, real metal
   Fragrance names take the label's script; gold is a gradient
   with a specular band, used sparingly.
   ============================================================ */

/* the label wordmark treatment */
.wordmark b{font-weight:500; letter-spacing:.2em}
.hd{font-weight:500; letter-spacing:.01em}

/* ---- the script is an ACCENT, nothing more ------------------------
   It carries fragrance names and section eyebrows. Body copy and
   subtext are set in the sans, where they are actually readable. */
.tile h3{
  font-family:var(--script); font-weight:400;
  text-transform:none; letter-spacing:0;
  font-size:clamp(23px,2vw,30px); line-height:1.3;
}
.eyebrow-script{
  font-family:var(--script); font-style:normal;
  font-size:clamp(24px,2.1vw,34px); line-height:1.2;
}

/* body copy: sans, always */
.script, .serif-body{
  font-family:var(--sans); font-style:normal; font-weight:300;
}
.serif-body{
  font-size:clamp(14px,1.05vw,16.5px); line-height:1.8;
  letter-spacing:.012em; color:var(--grey-2);
}
.hero__foot p{font-size:clamp(14px,1.05vw,16.5px); letter-spacing:.05em}

/* gold: gradient text where it carries meaning */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .slide__no, .tile .price, .stat b, .foot h4{
    background-image:var(--gilt); background-size:var(--sheen-size) 100%; background-position:var(--sheen) 0; -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
}
/* the price keeps its gold; the button itself does not */
/* White until you are on it. The gold arrives against the white fill,
   which is the only place on the page this button is gold. */
.btn-gold{border-color:rgba(255,255,255,.7); color:var(--white); -webkit-text-fill-color:var(--white)}
.btn-gold:hover{
  background:var(--white); border-color:var(--white);
  color:var(--gold-deep); -webkit-text-fill-color:var(--gold-deep);
}
.signup button{background-image:var(--gilt); background-size:100% 100%; color:#120e05; transition:opacity .4s ease}
.signup button:hover{opacity:.82}
.head__nav a::after{background:var(--gold)}



/* ============================================================
   PAGE CHROME FOR EVERYTHING OFF THE HOME PAGE
   Page titles are oversized display type flush to a left axis, the
   one thing kept from the Editorial direction. Everything below the
   title is shared with the home page.
   ============================================================ */

.sec{padding:clamp(48px,6vw,84px) var(--pad)}
.inner{max-width:1180px; margin:0 auto}
.inner--narrow{max-width:760px; margin:0 auto}

.pagehead{position:relative; padding:clamp(36px,4vw,56px) var(--pad) clamp(26px,3vw,40px); overflow:hidden}
.pagehead .inner{position:relative; z-index:1}
.pagehead h1{margin:0; color:var(--white)}
.pagehead .lede{margin:18px 0 0; color:#cdc9c3; font-size:clamp(15px,1.15vw,17px); line-height:1.75}
.pagehead .crumb{
  margin:0 0 14px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--grey);
}
.pagehead .crumb a{color:var(--grey)}
.pagehead .crumb a:hover{color:var(--white)}

/* ---- page titles: flush left, oversized, thin ---- */
.pagehead{text-align:left; border-bottom:1px solid var(--hair)}
.pagehead h1{
  font-weight:200; font-size:clamp(38px,6.6vw,96px); line-height:.88;
  letter-spacing:.045em; text-transform:uppercase;
}
.pagehead .lede{max-width:560px}
.sec > .inner > h2, .sec > .inner > .h2{text-align:left}
/* a block that is meant to sit centred, heading included */
.sec > .inner--centre, .sec > .inner--centre > h2, .sec > .inner--centre > .h2{text-align:center}

/* Both directions run 01's page head off the home page. The client
   picked the flush left setting for the sub pages, so 02 no longer
   centres its own; the two differ at the hero and nowhere else. */

/* section heading shared by both */
.h2{font-weight:500; letter-spacing:.02em; text-transform:uppercase;
    font-size:clamp(20px,2.1vw,30px); margin:0 0 26px; color:var(--white)}

/* ---- long form copy: policies, shipping, terms ---- */
.prose{color:#c6c2bd; font-size:15.5px; line-height:1.85}
.prose h2{
  color:var(--white); font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  font-size:15px; margin:46px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--hair);
}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 15px}
.prose ul{margin:0 0 15px; padding-left:20px}
.prose li{margin:0 0 8px}
.prose a{color:var(--white); text-decoration:underline; text-underline-offset:3px}
.prose .updated{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); margin-bottom:34px}

/* ---- accordion, used by the FAQ ---- */
.acc{border-top:1px solid var(--hair)}
.acc__item{border-bottom:1px solid var(--hair)}
.acc__q{
  width:100%; background:none; border:0; cursor:pointer; color:var(--white); text-align:left;
  font:inherit; font-size:16px; letter-spacing:.02em; padding:22px 44px 22px 0; position:relative;
}
.acc__q::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px; margin-top:-6px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); transition:transform .35s var(--ease); opacity:.75;
}
.acc__item.open .acc__q::after{transform:rotate(-135deg)}
.acc__q:hover{color:var(--gold)}
.acc__a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.acc__a > div{padding:0 40px 24px 0; color:#c6c2bd; font-size:15px; line-height:1.8}

/* ---- forms ---- */
.form{display:grid; gap:18px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field label{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); margin-bottom:8px}
.field input, .field select, .field textarea{
  width:100%; background:transparent; color:var(--white); font:inherit; font-size:15px;
  border:1px solid var(--hair); padding:14px 15px; border-radius:0; transition:border-color .3s ease;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus, .field select, .field textarea:focus{outline:none; border-color:rgba(255,255,255,.5)}
.field select{appearance:none; background-image:none}
.field select option{background:#0b0b0b}
.field .err{display:none; margin:7px 0 0; font-size:12px; color:#e08a7a; letter-spacing:.04em}
.field.bad input, .field.bad textarea, .field.bad select{border-color:#a55344}
.field.bad .err{display:block}
.form__note{font-size:12px; color:var(--grey); line-height:1.7}
.formsent{
  display:none; border:1px solid var(--hair); padding:26px 24px; text-align:center;
  background:rgba(201,170,96,.05);
}
.formsent b{display:block; font-weight:500; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px}
.formsent p{margin:0; color:#c6c2bd; font-size:14.5px}
.is-sent .form{display:none}
.is-sent .formsent{display:block}

/* ---- product grid, collection page ---- */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(18px,2.2vw,32px)}
.pgrid .tile{width:auto; flex:none}

/* ---- filter bar ---- */
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 34px}
.filters button{
  background:none; border:1px solid var(--hair); color:#c6c2bd; font:inherit; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; padding:9px 16px; cursor:pointer;
  transition:border-color .3s ease, color .3s ease;
}
.filters button:hover{color:var(--white); border-color:rgba(255,255,255,.45)}
.filters button.on{color:var(--black); background:var(--white); border-color:var(--white)}
.count{margin-left:auto; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey)}

/* ---- retail locations ---- */
.stores{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; background:var(--hair)}
.store{background:var(--black); padding:28px 26px}
.store h3{margin:0 0 4px; font-weight:500; font-size:16px; letter-spacing:.03em}
.store .city{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 14px}
.store p{margin:0 0 6px; color:#c6c2bd; font-size:14px; line-height:1.7}
.store .hours{margin-top:12px; font-size:13px; color:var(--grey)}

/* ---- bag ---- */
.bagwrap{display:grid; grid-template-columns:1fr 340px; gap:clamp(28px,4vw,60px); align-items:start}
.bagrow{display:grid; grid-template-columns:96px 1fr auto; gap:20px; padding:22px 0; border-bottom:1px solid var(--hair); align-items:center}
.bagrow img{width:96px; height:120px; object-fit:cover; display:block}
.bagrow{transition:opacity .25s ease}
.bagrow.busy{opacity:.5; pointer-events:none}
.bagnote{margin:14px 0 0; min-height:1.4em; text-align:center; font-size:12.5px; color:var(--gold-lit)}
.bagrow h3{margin:0 0 5px; font-weight:500; font-size:16px}
.bagrow .notes{margin:0; font-size:12.5px; color:var(--grey); letter-spacing:.02em}
.bagrow .bagsize{margin:4px 0 6px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.bagrow .rm{background:none; border:0; color:var(--grey); font:inherit; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer; padding:0; margin-top:12px}
.bagrow .rm:hover{color:#e08a7a}
.qty{display:inline-flex; align-items:center; border:1px solid var(--hair)}
.qty button{background:none;border:0;color:var(--white);font:inherit;width:34px;height:34px;cursor:pointer;font-size:16px;line-height:1}
.qty button:hover{color:var(--gold)}
.qty span{min-width:34px; text-align:center; font-size:14px}
.bagrow .line{text-align:right; min-width:86px; font-size:15px}
.summary{border:1px solid var(--hair); padding:26px 24px; position:sticky; top:112px}
.summary h3{margin:0 0 20px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:13px}
.summary .l{display:flex; justify-content:space-between; margin:0 0 12px; font-size:14px; color:#c6c2bd}
.summary .l.total{border-top:1px solid var(--hair); padding-top:16px; margin-top:18px; color:var(--white); font-size:17px}
.summary .btn-out{width:100%; text-align:center; margin-top:20px}
.bagempty{text-align:center; padding:60px 0}
.bagempty p{color:var(--grey); margin:0 0 22px}

/* ---- what the newsletter and contact forms say back ---- */
.signup__note{margin:14px auto 0; max-width:480px; text-align:center; font-size:13px; color:var(--gold-lit)}
.signup__note:empty{display:none}
.signup.is-done{opacity:.6}
.form__err{margin:12px 0 0; font-size:13px; color:#e39a8a}

/* ---- your account (account.js draws it) ---- */
.acct{max-width:1000px}
.acct__wait{color:var(--grey)}
.acct__card{max-width:460px; margin:0 auto; padding:clamp(28px,4vw,48px); border:1px solid var(--hair); text-align:center}
.acct__card p{color:#cdc9c3; margin:0 0 24px}
.acct__card .btn-out{min-width:220px}
.acct__card .acct__fine{margin:18px 0 0; font-size:12.5px; color:var(--grey)}
.acct__top{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-bottom:26px; margin-bottom:34px; border-bottom:1px solid var(--hair)}
.acct__hi{margin:0; font-family:var(--script); font-size:clamp(32px,3.4vw,46px); line-height:1.1}
.acct__mail{margin:6px 0 0; color:var(--grey); font-size:13.5px}
.acct__grid{display:grid; grid-template-columns:1fr 280px; gap:clamp(30px,5vw,64px); align-items:start}
.acct__order{padding:22px 0; border-top:1px solid var(--hair)}
.acct__ohead{display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; font-size:14px}
.acct__ohead b{font-weight:600; letter-spacing:.06em}
.acct__ohead span{color:var(--grey)}
.acct__ohead .acct__total{margin-left:auto; color:var(--white)}
.acct__items{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px}
.acct__items li{display:flex; align-items:center; gap:12px; font-size:14px; color:#d9d5cf}
.acct__items img{width:48px; height:60px; object-fit:cover; background:#111}
.acct__items i{font-style:normal; color:var(--grey)}
.acct__track, .acct__link{display:inline-block; margin-top:14px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lit)}
.acct__side{border:1px solid var(--hair); padding:24px}
.acct__side h3{margin:0 0 14px; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.acct__side p{margin:0 0 12px; color:#d9d5cf; font-size:14px; line-height:1.7}
.acct__none{color:var(--grey)}
@media (max-width:900px){ .acct__grid{grid-template-columns:1fr} }

/* ---- search ---- */
.searchbar{display:flex; border:1px solid var(--hair); margin:0 0 12px}
.searchbar input{flex:1; background:transparent; border:0; color:var(--white); font:inherit; font-size:17px; padding:17px 18px}
.searchbar input:focus{outline:none}
.searchbar svg{width:19px;height:19px;fill:none;stroke:var(--grey);stroke-width:1.5;align-self:center;margin:0 16px}
.noresult{padding:50px 0; text-align:center; color:var(--grey)}

@media(max-width:900px){
  .bagwrap{grid-template-columns:1fr}
  /* name and email stay side by side, so the form is short */
  .form{gap:14px}
  .form .row{gap:12px}
  .field textarea{min-height:120px}
  .summary{position:static}
}

/* the live count on the bag icon is in mobile.css, which every page loads */
[data-add].added{color:var(--gold) !important}

/* ============================================================
   The two directions, carried past the page title
   Discovery and Origin keep their own openings, which are better
   than a generic title band, so the distinction is carried in the
   headings instead: 01 sets them the way its hero is set, thin and
   wide and upper; 02 keeps the wordmark weight. Home pages have no
   d01/d02 class, so neither rule reaches them.
   ============================================================ */
body.d02 .hd{font-weight:200; letter-spacing:.055em; text-transform:uppercase}
body.d02 .disc__body .hd{font-size:clamp(26px,3.2vw,44px); line-height:1}

/* ============================================================
   STOCKIST MAP
   Drawn as a plain SVG path rather than pulled from a tile
   service, so it renders offline, carries no key, and reads as
   part of the page instead of a grey panel dropped into it.
   ============================================================ */
.findbar{display:flex; gap:12px; align-items:stretch; margin:0 0 12px}
.findbar .btn-out{white-space:nowrap; display:flex; align-items:center}
.findnote{margin:0 0 26px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey)}

.retailsec{padding-top:clamp(34px,4.4vw,58px)}
.findbar{margin-top:clamp(6px,1vw,14px)}

/* map and list run to the same length and end together; the map used to
   stick and follow the page, which left it hanging past the last shop */
.maprow{display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(20px,2.6vw,38px);
        align-items:stretch; height:clamp(430px,40vw,545px)}
.mapwrap{border:1px solid var(--hair); background:#050505; padding:10px; overflow:hidden}
.usmap{width:100%; height:100%; display:block; object-fit:contain}
.usmap .land{fill:rgba(255,255,255,.045); stroke:rgba(255,255,255,.22); stroke-width:1.1; stroke-linejoin:round}

.pin{cursor:pointer}
.pin .dot{fill:var(--gold); transition:r .3s var(--ease), fill .3s ease}
.pin .halo{fill:var(--gold); opacity:.13; transition:opacity .3s ease, r .3s var(--ease)}
.pin:hover .dot{r:5.6}
.pin:hover .halo{opacity:.3}
.pin.on .dot{fill:#fff; r:6}
.pin.on .halo{opacity:.42; r:15}
.pin.near .halo{opacity:.4}
.pin.dim{opacity:.16; pointer-events:none}

.storelist{height:100%; overflow-y:auto; border-top:1px solid var(--hair)}
.storelist .store{padding:18px 16px; border-bottom:1px solid var(--hair); background:none; cursor:pointer;
  transition:background .3s ease}
.storelist .store:hover{background:rgba(255,255,255,.03)}
.storelist .store.on{background:rgba(201,170,96,.09)}
.storelist .store h3{font-size:14.5px; margin:0 0 6px}
.storelist .store h3 em{font-style:normal; color:var(--grey); font-weight:400}
.storelist .store p{font-size:13px; margin:0 0 3px; line-height:1.6}
.storelist .city{display:flex; justify-content:space-between; gap:10px; font-size:10.5px; margin:0 0 6px}
.storelist .dist{color:var(--white); letter-spacing:.1em}
.storelist::-webkit-scrollbar{width:3px}
.storelist::-webkit-scrollbar-thumb{background:var(--hair)}

@media(max-width:900px){
  .maprow{grid-template-columns:1fr; height:auto}
  .mapwrap{height:60vh}
  .storelist{height:auto; max-height:60vh}
  .findbar{flex-direction:column}
}

/* ---- discovery: room to breathe, and reasons to buy under it ---- */
.disc.page-clear{padding-top:clamp(148px,120px + 2.6vw,172px)}
.disc{align-items:center}
.disc__body{max-width:560px}

.discmore{border-top:1px solid var(--hair)}
.dm__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,48px)}
.dm__n{display:block; font-size:11px; letter-spacing:.24em; color:var(--gold); margin:0 0 14px}
.dm h3{margin:0 0 10px; font-weight:500; font-size:17px; letter-spacing:.02em}
.dm p{margin:0; color:#c6c2bd; font-size:14.5px; line-height:1.8}
.dm__cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:clamp(34px,4.5vw,58px); padding-top:clamp(26px,3.4vw,40px); border-top:1px solid var(--hair);
}
.dm__cta p{margin:0}
@media(max-width:900px){ .dm__grid{grid-template-columns:1fr} }

/* ---- Will's statement on the origin page ---- */
.journey{border-top:1px solid var(--hair)}
.journey .eyebrow-script{display:block; margin:0 0 22px; font-size:clamp(24px,2.6vw,34px)}
.journey .prose p{font-size:16px; line-height:1.95; margin:0 0 20px}
.signoff{
  margin:30px 0 0; font-family:var(--script); font-size:clamp(26px,2.8vw,38px);
  color:var(--white); line-height:1;
}

/* ---- the select needs to look like a select ---- */
.field .sel{position:relative}
.field .sel::after{
  content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; margin-top:-6px;
  border-right:1px solid var(--grey); border-bottom:1px solid var(--grey);
  transform:rotate(45deg); pointer-events:none;
}
.field select{padding-right:42px; cursor:pointer}
.field select:focus{border-color:rgba(255,255,255,.5)}

/* ============================================================
   THE STATEMENT
   The layout The Vision used for "Seeing Things For What They
   Are": an eyebrow, a two line heading, the copy in two columns,
   and the mark ghosted off the right edge as texture.
   ============================================================ */
.house{position:relative; padding:clamp(56px,6.5vw,96px) var(--pad) clamp(84px,10vw,150px); overflow:hidden;
       border-top:1px solid var(--hair)}

/* Everything sits inside one centered container now. The mark used to be
   pinned to the section, so it bled off the right of the screen; pinned
   to the container instead it stays on the page with air around it. */
.house__in{position:relative; z-index:2; max-width:1180px; margin:0 auto;
           display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
           gap:clamp(30px,5vw,80px); align-items:center}
.house__copy{max-width:560px}
.house__mark{
  order:2; justify-self:center; align-self:center;
  width:min(46vw,540px); opacity:.09; pointer-events:none; padding:clamp(10px,2vw,30px);
}
.house__mark img{width:100%; display:block}

.house .eyebrow{margin:0; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold)}
.house__hd{
  margin:16px 0 0; font-weight:200; letter-spacing:.045em; text-transform:uppercase;
  font-size:clamp(26px,3.6vw,50px); line-height:1.1; color:var(--white);
}
.house__cols{display:block; margin:clamp(26px,3vw,40px) 0 0}
.house__cols p{color:#b3afa9; font-size:14.5px; line-height:1.85; margin:0 0 16px}
.house__cols p:last-child{margin-bottom:0}
.house__sub{margin:30px 0 14px; font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
.house .signoff{margin:clamp(26px,3vw,40px) 0 0}
@media(max-width:900px){
  /* on a phone the letter starts straight under the heading, and the mark
     moves behind it: large, faint, and half off the right edge, a half
     moon rising behind the words rather than a block between them */
  .house{padding-top:30px}
  .house__in{grid-template-columns:1fr}
  .house__copy{position:relative; z-index:1}
  .house__mark{position:absolute; z-index:0; top:-10px; right:calc(-60vw - var(--pad)); width:120vw; max-width:none; padding:0; opacity:.06}
}


/* ---- discovery: square it up rather than letting it sit as a band ---- */
.disc__img{min-height:clamp(520px,46vw,680px)}
.disc__body{padding-top:clamp(56px,7vw,104px); padding-bottom:clamp(56px,7vw,104px)}

/* the live basemap, and the drawn one it falls back to */
#map{width:100%; height:100%; background:#050505}
.mapwrap.live{padding:0}
.leaflet-container{background:#050505; font:inherit}
.leaflet-control-attribution{
  background:rgba(0,0,0,.6) !important; color:var(--grey) !important; font-size:10px !important;
}
.leaflet-control-attribution a{color:var(--grey) !important}
.leaflet-bar a{
  background:#0b0b0b !important; color:var(--white) !important;
  border-color:rgba(255,255,255,.16) !important;
}
.leaflet-bar a:hover{background:#161616 !important}
.leaflet-tooltip{
  background:#0b0b0b; border:1px solid var(--hair); color:var(--white);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; box-shadow:none;
}
.leaflet-tooltip::before{border-top-color:var(--hair)}

/* ---- the mark blinks when you reach for home ----
   Once, on the way in, and never restarted by a twitch of the cursor:
   site.js sets .is-blinking on mouseenter and clears it when the run
   ends. The lids are a mask, not a clip, so the link stays clickable
   through the whole blink, and the hit area is padded well past the
   type. Lids close to a slit, a gold seam shows where they meet, then
   they open, the seam sitting in the gap between the two lines. */
.wordmark{position:relative; padding:12px 24px; margin:-12px -24px}
.wordmark::after{
  content:""; position:absolute; left:22%; right:22%; top:59%; height:1px;
  background:var(--gold); opacity:0; transform:scaleX(.4); pointer-events:none;
}
@keyframes eyeblink{
  0%  {-webkit-mask-size:140% 170%; mask-size:140% 170%}
  38% {-webkit-mask-size:140% 7%;   mask-size:140% 7%}
  50% {-webkit-mask-size:140% 7%;   mask-size:140% 7%}
  100%{-webkit-mask-size:140% 170%; mask-size:140% 170%}
}
@keyframes eyeseam{
  0%,30%{opacity:0; transform:scaleX(.4)}
  40%,50%{opacity:1; transform:scaleX(1)}
  62%,100%{opacity:0; transform:scaleX(1)}
}
.wordmark.is-blinking{
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #000 99%, transparent 100%);
  mask-image:radial-gradient(50% 50% at 50% 50%, #000 99%, transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:50% 59%; mask-position:50% 59%;
  animation:eyeblink .52s cubic-bezier(.45,0,.25,1);
}
.wordmark.is-blinking::after{animation:eyeseam .52s cubic-bezier(.45,0,.25,1)}
@media (prefers-reduced-motion:reduce){ .wordmark.is-blinking, .wordmark.is-blinking::after{animation:none; -webkit-mask-image:none; mask-image:none} }

/* a line of space before the compliance line */
.foot__brand p{margin:0 0 14px}
.foot__compliance{margin-top:20px !important}

/* only where the header is in flow. On the pages whose header is
   fixed via .top, position:fixed is already a containing block for
   the panel, and forcing relative here dropped the header into flow
   and pushed the hero down by its own height. */
#top:not(.top){position:relative}

/* ============================================================
   SEARCH PANEL
   Off the header icon rather than a page of its own. Five
   products do not need somewhere to go to be found.
   ============================================================ */
.srch{
  position:absolute; top:100%; right:var(--pad); z-index:80;
  width:min(440px, calc(100vw - var(--pad) * 2));
  background:#0b0b0b; border:1px solid var(--hair);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.srch.on{opacity:1; visibility:visible; transform:none}
.srch__bar{display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--hair)}
.srch__bar svg{width:17px; height:17px; fill:none; stroke:var(--grey); stroke-width:1.5; flex:none}
.srch__bar input{
  flex:1; background:none; border:0; color:var(--white); font:inherit; font-size:15px; padding:16px 0;
}
.srch__bar input:focus{outline:none}
.srch__x{background:none; border:0; color:var(--grey); font-size:22px; line-height:1; cursor:pointer; padding:4px 2px}
.srch__x:hover{color:var(--white)}
.srch__out{max-height:min(60vh,460px); overflow-y:auto}
.srch__lbl{
  margin:0; padding:13px 16px 7px; font-size:9.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold);
}
.srch__hint{margin:0; padding:26px 16px; color:var(--grey); font-size:13.5px; text-align:center}
.srch__hit, .srch__pg{display:flex; align-items:center; gap:12px; padding:9px 16px; transition:background .25s ease}
.srch__hit:hover, .srch__pg:hover{background:rgba(255,255,255,.04)}
.srch__hit img{width:38px; height:48px; object-fit:cover; flex:none}
.srch__hit span, .srch__pg{min-width:0}
.srch__hit span{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.srch__hit b, .srch__pg b{font-weight:500; font-size:13.5px; color:var(--white); letter-spacing:.02em}
.srch__hit i, .srch__pg i{
  font-style:normal; font-size:11.5px; color:var(--grey);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.srch__hit em{font-style:normal; font-size:12.5px; color:var(--grey-2); flex:none}
.srch__pg{flex-direction:column; align-items:flex-start; gap:2px}
.srch__out::-webkit-scrollbar{width:3px}
.srch__out::-webkit-scrollbar-thumb{background:var(--hair)}

/* ============================================================
   PRODUCT PAGES
   One per fragrance, themed on its painting. The page sets --ink,
   --p1, --p2 and --p3 from the painting (see tools/content_product.py)
   and everything below reads them. The header floats over the hero
   here, the way it does on the home page.
   ============================================================ */
body.product{--ink:#000; --p1:#c9aa60; --p2:#c9aa60; --p3:#c9aa60; --p1l:#e4d3aa; --p2l:#e4d3aa; background:#000}
/* The house is white type on black; each fragrance tints that, rather
   than replacing it. Its colour runs through the eyebrows, the numerals,
   the rules, the glow behind the notes, and the button you press. */
body.product ::selection{background:var(--p2); color:#fff}
body.product #top .head__nav a:hover{color:var(--p2l)}
body.product #top .head__nav a::after{background:var(--p2)}
body.product #top .head__icons a:hover{color:var(--p2l)}
body.product #top .head__icons a.bag{color:var(--p2l)}
body.product .btn-gold{
  border-color:color-mix(in srgb, var(--p2) 62%, rgba(255,255,255,.45));
  color:var(--p2l); -webkit-text-fill-color:var(--p2l);
}
body.product .btn-gold:hover{
  background:var(--p2l); border-color:var(--p2l);
  color:var(--ink); -webkit-text-fill-color:var(--ink);
}
body.product #top{position:fixed; inset:0 0 auto 0; z-index:70}
body.product #top.stuck .head{background:rgba(0,0,0,.94); padding:14px var(--pad); border-bottom-color:rgba(255,255,255,.08)}
.peyebrow{margin:0 0 14px; font-size:10.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--p2)}

/* ---- hero: the bottle on the left, what you are buying on the right.
   The painting is here too, washed across the plate and framed small in
   the corner, but it is not the subject: the bottle is. ---- */
.phero{
  position:relative; isolation:isolate; overflow:hidden; background:var(--ink);
  min-height:100vh; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr);
}
.phero__wash{position:absolute; inset:0; z-index:0}
.phero__wash img{width:100%; height:100%; object-fit:cover; opacity:.6; transform:scale(1.08)}
.phero__wash::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(0,0,0,0) 30%, var(--ink) 72%),
    linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0) 34%, rgba(0,0,0,0) 76%, rgba(0,0,0,.6));
}
/* the gallery: the bottle, the pair, the painting. Picking a size brings
   its own frame up; the arrows browse all three either way. */
.pgal{position:relative; z-index:1; min-height:100vh; min-height:100svh}
.pgal__frames{position:absolute; inset:0}
.pgal__frames img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  opacity:0; transition:opacity .55s ease;
}
.pgal__frames img.on{opacity:1}
.pgal__frames::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(0,0,0,0) 70%, var(--ink)),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 78%, var(--ink));
}
.pgal__arrow{
  position:absolute; z-index:2; top:min(50%, 50svh); margin-top:-22px;
  width:44px; height:44px; display:grid; place-items:center;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.22); border-radius:50%;
  color:var(--white); cursor:pointer; opacity:.85;
  transition:opacity .3s ease, background .3s ease, border-color .3s ease;
}
.pgal__arrow:hover{opacity:1; background:rgba(0,0,0,.62); border-color:var(--p2l)}
.pgal__arrow svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5}
.pgal__arrow--l{left:clamp(12px,1.6vw,22px)}
.pgal__arrow--r{right:clamp(12px,1.6vw,22px)}
.pgal__dots{
  position:absolute; z-index:2; left:0; right:0; top:calc(min(100%, 100svh) - clamp(24px,3.4vh,38px));
  display:flex; justify-content:center; gap:8px;
}
.pgal__dots button{
  width:30px; height:2px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.3); transition:background .35s ease;
}
.pgal__dots button.on{background:var(--p2l)}
.phero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(48% 42% at 78% 44%, color-mix(in srgb, var(--p1) 24%, transparent), transparent 70%);
}
.phero__copy{
  position:relative; z-index:2; align-self:center;
  padding:clamp(150px,20vh,210px) var(--pad) clamp(70px,9vh,110px) clamp(28px,4.5vw,72px);
  max-width:680px;
}
.phero__no{margin:0; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--grey-2)}
.phero__no b{font-weight:400; color:var(--p2)}
.phero__name{
  font-family:var(--script); font-weight:400; letter-spacing:0; text-transform:none;
  font-size:clamp(56px,6.8vw,100px); line-height:1; margin:16px 0 20px;
  text-shadow:0 2px 40px rgba(0,0,0,.5), 0 0 80px color-mix(in srgb, var(--p1) 40%, transparent);
}
.phero__tag{margin:0 0 30px; font-size:clamp(15px,1.22vw,18px); font-weight:300; line-height:1.65; color:#ece8e2; max-width:44ch}

/* what is in the box, on hairlines beside the bottle */
.phero__spec{list-style:none; margin:0 0 32px; padding:0; max-width:430px}
.phero__spec li{
  display:flex; justify-content:space-between; gap:18px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.13);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.phero__spec li:first-child{border-top:1px solid color-mix(in srgb, var(--p2) 45%, rgba(255,255,255,.13))}
.phero__spec li span:first-child{color:var(--p2l); white-space:nowrap}
.phero__spec li span:last-child{color:var(--grey-2); font-weight:400; text-align:right}
/* ---- the three sizes: press one and the button repoints at it ---- */
.psize__lbl{margin:0 0 10px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--p2l)}
.psize{display:flex; gap:10px; margin:0 0 28px; max-width:430px}
.psize button{
  flex:1 1 0; min-width:0; appearance:none; cursor:pointer; text-align:left;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.2); color:var(--white);
  padding:12px 14px; font-family:inherit;
  transition:border-color .3s ease, background .3s ease;
}
.psize button b{display:block; font-weight:500; font-size:13.5px; letter-spacing:.06em}
.psize button span{display:block; margin-top:4px; font-size:11.5px; letter-spacing:.1em; color:var(--grey); white-space:nowrap}
.psize button span i{font-style:normal}
.psize button:hover{border-color:color-mix(in srgb, var(--p2) 60%, rgba(255,255,255,.3))}
.psize button.on{
  border-color:var(--p2l); background:color-mix(in srgb, var(--p1) 18%, rgba(0,0,0,.25));
}
.psize button.on span{color:var(--p2l)}
/* a size Shopify has run out of, and a button that is waiting on it */
.psize button.sold b, .psize button.sold span{text-decoration:line-through; opacity:.55}
[data-add].sold{opacity:.6; cursor:default}
[data-add].busy{opacity:.75; cursor:progress}

.phero__buy{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.phero__ship{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--p2l); opacity:.85}

/* On a short laptop screen the name and the spacing alone can push the
   price and the button under the fold. Nothing about what a bottle costs
   or how to buy one should need a scroll, so below about 810 pixels of
   screen the column tightens until the whole thing stands in one view. */
@media (min-width:901px) and (max-height:810px){
  .phero__copy{padding-top:clamp(132px,17vh,170px); padding-bottom:clamp(36px,5vh,64px)}
  .phero__name{font-size:min(clamp(56px,6.8vw,100px), 12vh); margin:10px 0 14px}
  .phero__tag{margin-bottom:20px; font-size:clamp(14px,1.05vw,16px); line-height:1.55}
  .phero__spec{margin-bottom:22px}
  .phero__spec li{padding:8px 0}
  .psize{margin-bottom:20px}
  .psize button{padding:10px 12px}
}
@media (min-width:901px) and (max-height:710px){
  .phero__spec li{padding:6px 0}
  .phero__tag{margin-bottom:16px}
  .psize{margin-bottom:16px}
}

/* ---- credits: who drew it, who blended it, who shot it ---- */
.pcreds{padding:clamp(56px,6.5vw,92px) var(--pad); background:#000; border-top:1px solid var(--hair)}
.pcreds .peyebrow{text-align:center; margin-bottom:clamp(24px,2.8vw,38px)}
.pcreds__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:1180px; margin:0 auto;
  background:color-mix(in srgb, var(--p2) 22%, rgba(255,255,255,.1));
  border:1px solid color-mix(in srgb, var(--p2) 22%, rgba(255,255,255,.1));
}
.pcred{position:relative; overflow:hidden; background:#000; padding:clamp(26px,3vw,44px)}
.pcred::before{
  content:""; position:absolute; right:-24%; bottom:-42%; width:74%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--p1) 52%, transparent), transparent 66%);
}
.pcred__k{
  position:relative; margin:0 0 clamp(16px,2vw,26px);
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--p2l);
}
.pcred__n, .pcred__h{
  position:relative; margin:0; padding:13px 0;
  border-top:1px solid color-mix(in srgb, var(--p2) 26%, rgba(255,255,255,.12));
  font-size:clamp(14.5px,1.15vw,16.5px); letter-spacing:.03em;
}
.pcred__n{font-weight:500; color:var(--white)}
.pcred__h{color:var(--grey-2); border-bottom:1px solid color-mix(in srgb, var(--p2) 26%, rgba(255,255,255,.12))}

/* ---- reviews, drawn by reviews.js ----
   Stars are one row of five glyphs, filled to the rating with a gradient,
   in the page's own accent; outside a product page, in gold. */
.stars{
  --r:0; display:inline-block; position:relative; line-height:1; letter-spacing:2px; font-size:14px;
  background:linear-gradient(90deg, var(--p2l, var(--gold-lit)) calc(var(--r) / 5 * 100%), rgba(255,255,255,.22) 0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stars::before{content:"\2605\2605\2605\2605\2605"}

.prate{display:inline-flex; align-items:center; gap:10px; margin:-6px 0 22px; color:var(--grey-2); font-size:12.5px; letter-spacing:.06em}
.prate:hover span:last-child{color:var(--white)}

.prevs{padding:clamp(56px,6.5vw,92px) var(--pad); background:#000; border-top:1px solid var(--hair)}
.prevs:focus{outline:none}
.prevs .inner{max-width:900px; margin:0 auto}
.prevs .peyebrow{text-align:center; margin-bottom:clamp(24px,2.8vw,38px)}
.prevs__head{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom:26px; border-bottom:1px solid color-mix(in srgb, var(--p2, var(--gold)) 26%, rgba(255,255,255,.12))}
.prevs__avg{display:flex; align-items:baseline; gap:14px}
.prevs__avg b{font-family:var(--script); font-weight:400; font-size:clamp(40px,4vw,56px); line-height:1}
.prevs__avg .stars{font-size:17px}
.prevs__avg span:last-child{color:var(--grey-2); font-size:13px; letter-spacing:.06em}
.prevs__none{margin:0; color:var(--grey-2)}
.prevs__write{padding:28px 0; border-bottom:1px solid var(--hair)}
.rstars{display:inline-flex; flex-direction:row-reverse; gap:4px}
.rstars input{position:absolute; opacity:0; pointer-events:none}
.rstars label{font-size:26px; line-height:1; cursor:pointer; color:rgba(255,255,255,.22); transition:color .15s ease;
  text-transform:none; letter-spacing:0; margin:0}
.rstars input:checked ~ label, .rstars label:hover, .rstars label:hover ~ label{color:var(--p2l, var(--gold-lit))}
.rstars input:focus-visible + label{outline:1px solid var(--p2l, var(--gold-lit)); outline-offset:2px}
.prev{padding:26px 0; border-bottom:1px solid var(--hair)}
.prev__top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.06em}
.prev__by{color:var(--white); font-weight:500}
.prev__by i{font-style:normal; font-weight:400; color:var(--p2l, var(--gold-lit)); margin-left:6px; font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.prev__date{color:var(--grey); margin-left:auto}
.prev__title{margin:14px 0 6px; font-size:16px; font-weight:500}
.prev__body{margin:10px 0 0; color:#d9d5cf; font-weight:300; line-height:1.7; white-space:pre-line}
.prevs__more{display:block; margin:30px auto 0}

/* ---- the rest of the house ---- */
.phouse{padding:clamp(60px,7vw,100px) var(--pad); border-top:1px solid var(--hair); text-align:center; background:#000}
.phouse__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,24px); max-width:1180px; margin:clamp(26px,3vw,40px) auto 0}
.phouse a{display:block; text-align:center}
.phouse img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform 1.2s var(--ease), opacity .5s ease}
.phouse a:hover img{transform:scale(1.03)}
.phouse a:hover b{color:var(--p2l)}
.phouse b{transition:color .4s ease}
.phouse b{display:block; margin-top:16px; font-family:var(--script); font-weight:400; font-size:clamp(20px,1.9vw,27px); line-height:1.2}
.phouse i{display:block; margin-top:5px; font-style:normal; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey)}


@media(max-width:900px){
  /* a phone opens on the picture, large; the name, the words, the notes
     and the sizes follow beneath it. It starts under the header, which is
     solid on a phone, so none of it is hidden behind it. */
  .phero{grid-template-columns:1fr; min-height:0; padding-top:110px}
  .pgal{min-height:64vh}
  .phero__copy{padding-top:32px}

  /* the three credits side by side, small */
  .pcreds{padding:44px var(--pad)}
  .pcreds__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pcred{padding:16px 10px}
  .pcred::before{display:none}
  .pcred__k{margin-bottom:10px; font-size:9.5px; letter-spacing:.14em; line-height:1.5; min-height:3em}   /* one line or two, the rows still line up */
  .pcred__n, .pcred__h{padding:9px 0; font-size:12px; overflow-wrap:break-word}
  .phouse__grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   THE REVOLVER
   The fragrances page. Five paintings stand on a cylinder inside a
   deep stage, 52 degrees apart so the neighbours read as cards rather
   than edges; the one facing you is in hand, one waits either side,
   the two behind are hidden by their own backs. The scroll drives it
   (see FRAG_JS), the world behind takes the colour of the painting
   in front, and the words for it sit under the wheel.
   ============================================================ */
.cyl{position:relative; background:#000}
body.wheel{overflow:hidden; padding-bottom:0}
.cyl__stage{
  position:relative; height:calc(100vh - 120px); overflow:hidden; touch-action:pan-y; user-select:none;
  display:grid; grid-template-rows:minmax(0,1fr) auto auto; isolation:isolate; cursor:grab;
  --w:clamp(230px,21vw,330px); --h:calc(var(--w) * 1.335); --r:calc(var(--w) * 1.3); --arc:52deg;
}
.cyl__bgs{position:absolute; inset:0; z-index:0}
.cyl__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.04);
  transition:opacity .34s ease, transform 1.1s ease;
}
.cyl__bg.on{opacity:.5; transform:none}
.cyl__bgs::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(62% 56% at 50% 38%, rgba(0,0,0,0), rgba(0,0,0,.7) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 52%, #000 92%);
}
.cyl__space{
  position:relative; z-index:1; display:grid; place-items:center;
  perspective:1500px; perspective-origin:50% 46%;
  padding:clamp(24px,4vh,44px) 0 clamp(10px,2vh,20px);
}
.cyl__stage:active{cursor:grabbing}
.cyl__ring{position:relative; width:var(--w); height:var(--h); transform-style:preserve-3d; transform:translateZ(calc(-1 * var(--r)))}
.cyl__card{
  position:absolute; inset:0; display:block; overflow:hidden; background:#000;
  transform:rotateY(calc(var(--i) * var(--arc))) translateZ(var(--r));
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid rgba(255,255,255,.22); box-shadow:0 40px 90px rgba(0,0,0,.65);
  cursor:pointer; transition:border-color .3s ease, box-shadow .4s ease;
}
.cyl__card::before{
  content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.18);
  z-index:1; pointer-events:none; transition:border-color .3s ease;
}
/* every card is a thing you can click: the one in front opens its page,
   the others turn to face you. The edge lights up to say so, only
   where there is a mouse: a finger has no hover, and a phone keeps
   the last tapped card lit, which read as the wheel taking a swipe for a
   press. */
@media (hover:hover) and (pointer:fine){
  .cyl__card:hover{
    border-color:var(--gold-lit);
    box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 34px rgba(201,170,96,.28);
  }
  .cyl__card:hover::before{border-color:rgba(201,170,96,.55)}
}
/* a long press on a picture or link must not open the phone's own menu
   or start dragging the image out of the page mid swipe */
.cyl__card, .cyl__card img{-webkit-touch-callout:none; -webkit-user-drag:none; user-select:none}
.cyl__card img{width:100%; height:100%; object-fit:cover; display:block}
.cyl__shade{position:absolute; inset:0; z-index:3; background:#000; opacity:0; pointer-events:none; will-change:opacity}
.cyl__card.on{box-shadow:0 50px 110px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12)}

.cyl__arrow{
  position:absolute; z-index:3; top:38%; width:48px; height:48px; display:grid; place-items:center;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.22); border-radius:50%;
  color:var(--white); cursor:pointer; opacity:.85; transition:opacity .3s ease, background .3s ease;
}
.cyl__arrow:hover{opacity:1; background:rgba(0,0,0,.6)}
.cyl__arrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4}
.cyl__arrow--l{left:clamp(14px,3vw,48px)} .cyl__arrow--r{right:clamp(14px,3vw,48px)}

/* the words fade between fragrances; the buttons under them never move */
.cyl__cap{position:relative; z-index:2; text-align:center; padding:0 var(--pad)}
.cyl__text{position:relative; height:clamp(112px,13vh,132px)}
.cyl__textin{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .38s ease, visibility .38s}
.cyl__textin.on{opacity:1; visibility:visible}
.cyl__name{font-family:var(--script); font-weight:400; letter-spacing:0; text-transform:none; font-size:clamp(34px,3.6vw,52px); line-height:1.05; margin:0 0 8px}
.cyl__tag{margin:0; font-size:clamp(15px,1.2vw,18px); font-weight:300; color:#e6e2dc}
.cyl__notes{margin:8px 0 0; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey)}
.cyl__cta{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:14px}
.cyl__cta .btn-out{min-width:0; padding:0 26px; height:48px}

.cyl__dots{position:relative; z-index:2; display:flex; justify-content:center; gap:8px; margin-top:clamp(20px,2.6vh,30px); padding:0 var(--pad) clamp(20px,3vh,32px)}
.cyl__dots button{
  appearance:none; background:none; border:1px solid rgba(255,255,255,.22); color:var(--grey-2);
  width:40px; height:30px; cursor:pointer; font-size:10px; letter-spacing:.18em; font-weight:600;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.cyl__dots button:hover{color:var(--white); border-color:rgba(255,255,255,.5)}
.cyl__dots button.on{color:#120e05; background:var(--gold); border-color:var(--gold)}

/* the phone keeps the cylinder: a thumb turns it, the numerals jump it,
   and everything is drawn in a little so the whole wheel, its words and
   its buttons still stand inside one screen. */
@media (max-width:900px){
  .cyl__stage{
    touch-action:none;
    --w:min(57vw,29.5svh,240px); --h:calc(var(--w) * 1.335); --r:calc(var(--w) * 1.32);
  }
  .cyl__space{padding:clamp(10px,2vh,20px) 0 clamp(6px,1vh,12px)}
  .cyl__arrow{display:none}
  .cyl__text{height:clamp(106px,18vh,124px)}
  .cyl__name{font-size:30px; margin:0 0 6px}
  .cyl__tag{font-size:14px; line-height:1.5}
  .cyl__notes{margin-top:6px; font-size:10px; letter-spacing:.16em}
  .cyl__cta{gap:10px; margin-top:10px}
  .cyl__cta .btn-out{height:44px; padding:0 20px; font-size:11px}
  .cyl__dots{margin-top:14px; gap:6px; padding-bottom:clamp(12px,2vh,20px)}
  .cyl__dots button{width:36px; height:27px}
}

@media (prefers-reduced-motion:reduce){
  body.wheel{overflow:auto}
  .cyl__stage{position:static; height:auto !important; touch-action:auto; overflow:visible; display:block; padding:clamp(28px,5vw,48px) var(--pad); cursor:default}
  .cyl__bgs, .cyl__arrow, .cyl__dots,   .cyl__space{perspective:none; display:block; padding:0}
  .cyl__ring{width:auto; height:auto; transform:none !important; display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
  .cyl__card{position:relative; inset:auto; transform:none !important; aspect-ratio:3/4; visibility:visible !important}
  .cyl__shade{display:none}
  .cyl__cap{padding:32px 0 0}
  .cyl__text{height:auto}
  .cyl__textin{position:static; opacity:1; visibility:visible; display:none}
  .cyl__textin.on{display:block}
}