/* ============================================================
   GEONIRA — DESIGN SYSTEM
   Palette is fixed by brand spec. Ingredient hues are accents only.
   ============================================================ */
/* ============================================================
   GEONIRA — KRAFT GROUND, INK BANDS
   Warm paper carries the reading; four deep bands carry the powder.
   Gold is the mark's own #D19638 and is never re-mixed.
   ============================================================ */
:root{
  --display:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --gold-fill:#D19638;      /* sampled from the Geonira mark */
  --on-gold:#171308;        /* type sitting on the gold */
  --pad:clamp(20px,5vw,88px);
  --max:1440px;

  --bg:#E8E0D0;             /* page — kraft paper */
  --tint:#EFE8DA;           /* tinted band */
  --surf:#F6F2E8;           /* cards, panels */
  --ink:#1B1813;            /* type */
  --mute:#5F584C;           /* secondary type */
  --faint:#696255;          /* captions, spec labels */
  --line:rgba(27,24,19,.16);
  --line2:rgba(27,24,19,.32);
  --hover:#FBF8F1; --hover2:#E5DDCB; --well:#17140F;
  --moss:#5A6B4A;
  --gold:#7E5511;           /* gold as type, dark enough to read on paper */
  --gold-soft:#A87C24; --gold-deep:#5E3D06;
  --alert:#9A3618;
  --bg0:rgba(232,224,208,0);
  --nav1:rgba(232,224,208,.95); --nav2:rgba(232,224,208,.78);
  --glow1:rgba(209,150,56,.16); --glow2:rgba(120,140,110,.10);
}

/* Deep bands — the hero, the process, the lab, the footer.
   Re-declaring the tokens inverts every component inside for free. */
.band{
  --bg:#14120E; --tint:#191510; --surf:#211B13;
  --ink:#F4EFE3; --mute:#BEB2A0; --faint:#9A8E7C;
  --line:rgba(244,239,227,.15); --line2:rgba(244,239,227,.30);
  --hover:#1A150F; --hover2:#2A2317; --well:#100D09;
  --moss:#A79463;
  --gold:#E0AC55; --gold-soft:#F0C880; --gold-deep:#9C7128;
  --alert:#E39C82;
  --bg0:rgba(20,18,14,0);
  --nav1:rgba(20,18,14,.94); --nav2:rgba(20,18,14,.60);
  --glow1:rgba(209,150,56,.16); --glow2:rgba(150,110,50,.12);
  background:var(--bg); color:var(--ink);
}
.sec--tint{background:var(--tint);}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  font-size:16px;line-height:1.62;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px;}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* --- Type roles --- */
.eyebrow{
  font-size:10px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:14px;margin:0 0 clamp(28px,4vw,56px);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);}
.spec{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
  font-weight:400;
}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.015em;}
.d1{font-size:clamp(3.2rem,11.4vw,10.5rem);line-height:.86;text-transform:uppercase;}
.d2{font-size:clamp(2.1rem,6.2vw,5.4rem);line-height:.94;text-transform:uppercase;}
.d3{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.06;}
.lead{font-size:clamp(1rem,1.5vw,1.28rem);line-height:1.55;color:var(--mute);max-width:44ch;}
p{margin:0 0 1.15em;}
.muted{color:var(--mute);}
.serif-note{font-family:var(--display);font-style:italic;color:var(--mute);}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 28px;border:1px solid var(--line2);border-radius:1px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  transition:background .45s ease,color .45s ease,border-color .45s ease;
}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.btn--gold{border-color:var(--gold-fill);color:var(--gold);}
.btn--gold:hover{background:var(--gold-fill);color:var(--on-gold);}
.btn--ghost{border-color:transparent;padding-left:0;padding-right:0;}
.btn--ghost:hover{background:none;color:var(--gold);border-color:transparent;}
.btn--ghost .arw{transition:transform .4s ease;}
.btn--ghost:hover .arw{transform:translateX(6px);}

/* --- Sections --- */
section{position:relative;}
.sec{padding-block:clamp(88px,13vw,190px);}
.sec--surf{background:var(--surf);}
.hr{height:1px;background:var(--line);border:0;margin:0;}

/* ============================================================ NAV */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,var(--nav1),var(--nav2));
  border-bottom:1px solid transparent;transition:border-color .5s ease;
}
.nav.is-stuck{border-bottom-color:var(--line);}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:70px;}
.mark{
  font-family:var(--display);font-size:19px;letter-spacing:.42em;text-transform:uppercase;
  padding-left:.42em;
}
.nav__links{display:flex;gap:clamp(14px,2vw,30px);align-items:center;}
.nav__links a{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);transition:color .3s;}
.nav__links a:hover{color:var(--ink);}
.nav__end{display:flex;align-items:center;gap:20px;}
.navbtn{display:none;padding:8px;}
@media(max-width:1080px){
  .nav__links{display:none;}
  .navbtn{display:block;}
}
.drawer{
  position:fixed;inset:70px 0 0 0;z-index:55;background:var(--bg);
  padding:36px var(--pad);display:none;flex-direction:column;gap:2px;overflow-y:auto;
}
.drawer.is-open{display:flex;}
.drawer a{
  font-family:var(--display);font-size:clamp(1.9rem,9vw,3rem);text-transform:uppercase;
  padding:10px 0;border-bottom:1px solid var(--line);
}

/* ============================================================ HERO */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(36px,6vw,72px);padding-top:120px;}
#powder{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero__glow{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(120vw,1100px);aspect-ratio:1;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--glow1),var(--glow2) 38%,var(--bg0) 66%);
}
.hero__in{position:relative;z-index:2;width:100%;}
.hero__mark{
  font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);
  margin-bottom:clamp(20px,4vw,44px);
}
.hero h1{margin:0;}
.hero h1 .ln{display:block;color:transparent;transition:color 1.5s ease;}
.hero.is-formed h1 .ln{color:var(--ink);}
.hero__foot{
  display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,80px);align-items:flex-end;
  justify-content:space-between;margin-top:clamp(30px,5vw,60px);
}
.hero__copy{max-width:40ch;font-size:clamp(.95rem,1.2vw,1.08rem);color:var(--mute);}
.hero__copy strong{display:block;color:var(--ink);font-weight:400;margin-bottom:.5em;}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;}
.scrollcue{
  position:absolute;right:var(--pad);bottom:clamp(36px,6vw,72px);z-index:2;
  writing-mode:vertical-rl;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);
  display:flex;align-items:center;gap:12px;
}
.scrollcue i{display:block;width:1px;height:54px;background:linear-gradient(var(--gold),transparent);}
@media(max-width:760px){.scrollcue{display:none;}}

/* ============================================================ IDEA */
.idea__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,72px);}
@media(min-width:900px){.idea__grid{grid-template-columns:1.05fr .95fr;align-items:start;}}
.idea__body{max-width:52ch;color:var(--mute);font-size:clamp(1rem,1.25vw,1.15rem);}
.pillars{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);}
.pillar{background:var(--surf);padding:22px 0 22px 22px;display:flex;gap:20px;align-items:baseline;}
.pillar b{font-family:var(--display);font-size:1.15rem;font-weight:400;color:var(--ink);min-width:2.4ch;}
.pillar span{color:var(--mute);font-size:.94rem;}

/* ============================================================ COLLECTION */
.coll__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(36px,5vw,64px);}
.coll__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.card{
  position:relative;background:var(--surf);padding:26px 24px 22px;
  display:flex;flex-direction:column;gap:18px;min-height:340px;
  transition:background .5s ease;
}
.card:hover{background:var(--hover);}
.card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.card__badge{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line2);padding:5px 9px;border-radius:1px;white-space:nowrap;}
.card__badge--dual{color:var(--mute);border-color:var(--line);}

/* --- logo lockup --- */
.logo{display:block;height:26px;width:auto;}

.ft__logo{height:58px;width:auto;}
@media(max-width:520px){.logo{height:21px;}}

/* --- range filters --- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.filters button{
  padding:9px 16px;border:1px solid var(--line);border-radius:1px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  transition:color .35s,border-color .35s,background .35s;
}
.filters button:hover{color:var(--ink);border-color:var(--line2);}
.filters button[aria-pressed="true"]{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--on-gold);}
.filters em{font-style:normal;opacity:.55;margin-left:7px;}

/* --- first line / trade --- */
.line5{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
@media(min-width:700px){.line5{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1140px){.line5{grid-template-columns:repeat(5,1fr);}}
.line5__i{background:var(--surf);padding:24px 20px;display:flex;flex-direction:column;gap:16px;}
.line5__i h3{font-size:1.2rem;line-height:1.08;text-transform:uppercase;}
.line5__i h3 em{font-style:italic;font-size:.6em;display:block;color:var(--gold);text-transform:none;margin-top:7px;letter-spacing:.01em;}
.line5__d{display:flex;flex-direction:column;gap:0;margin-top:auto;}
.line5__d div{border-top:1px solid var(--line);padding:10px 0;}
.line5__d dt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.line5__d dd{margin:4px 0 0;font-size:.83rem;color:var(--mute);line-height:1.42;}
.card__idx{font-size:10px;letter-spacing:.2em;color:var(--faint);}
.dot{
  width:clamp(56px,7vw,78px);aspect-ratio:1;border-radius:50%;margin:6px 0 2px;
  background:radial-gradient(circle at 34% 30%,var(--hue),var(--bg0) 72%);
  filter:blur(.4px);
}
.card h3{font-size:clamp(1.3rem,2vw,1.62rem);line-height:1.05;}
.card h3 em{font-style:normal;display:block;font-size:.68em;color:var(--mute);letter-spacing:.02em;}
.card__meta{margin-top:auto;display:flex;flex-direction:column;gap:12px;}
.card__tags{display:flex;flex-wrap:wrap;gap:6px;}
.tag{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);padding:4px 8px;}
.card__acts{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;}
.card__acts span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.card__acts b{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--mute);}
.note{font-size:11.5px;letter-spacing:.04em;color:var(--faint);margin-top:20px;max-width:62ch;}

/* ============================================================ PROCESS */
.proc__track{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:38px;}
@media(max-width:900px){.proc__track{grid-template-columns:repeat(4,1fr);}}
@media(max-width:520px){.proc__track{grid-template-columns:repeat(2,1fr);}}
.step{
  background:var(--surf);padding:20px 14px 26px;text-align:left;
  display:flex;flex-direction:column;gap:10px;transition:background .4s ease;
}
.step:hover{background:var(--hover2);}
.step[aria-selected="true"]{background:var(--gold-fill);color:var(--on-gold);}
.step u{text-decoration:none;font-size:10px;letter-spacing:.2em;color:var(--gold);}
.step[aria-selected="true"] u{color:var(--on-gold);opacity:.65;}
.step b{font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;}
.proc__panel{display:grid;gap:22px;grid-template-columns:1fr;}
@media(min-width:820px){.proc__panel{grid-template-columns:.9fr 1.1fr;align-items:start;}}
.proc__panel h3{font-size:clamp(1.7rem,3.6vw,2.9rem);text-transform:uppercase;}
.proc__panel p{color:var(--mute);max-width:56ch;}

/* ============================================================ INGREDIENT INDEX */
.ix{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:1fr;}
@media(min-width:900px){.ix{grid-template-columns:270px 1fr;}}
.ix__list{background:var(--surf);display:flex;flex-direction:column;}
@media(min-width:900px){.ix__list{max-height:640px;overflow-y:auto;scrollbar-width:thin;}}
.ix__list button{
  text-align:left;padding:15px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:13px;transition:background .35s,padding-left .35s;
}
.ix__list button:last-child{border-bottom:0;}
.ix__list button:hover{background:var(--hover);padding-left:26px;}
.ix__list button[aria-selected="true"]{background:var(--hover);padding-left:26px;}
.ix__list button[aria-selected="true"] .ix__name{color:var(--ink);}
.ix__swatch{width:11px;height:11px;border-radius:50%;background:var(--hue);flex:none;}
.ix__name{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);transition:color .3s;}
.ix__panel{background:var(--surf);padding:clamp(24px,3.4vw,44px);display:grid;gap:28px;grid-template-columns:1fr;}
@media(min-width:1080px){.ix__panel{grid-template-columns:1fr 300px;}}
.ix__title{font-size:clamp(1.9rem,4vw,3.1rem);text-transform:uppercase;line-height:.98;}
.ix__latin{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1.02rem;margin-top:8px;}
.ix__desc{color:var(--mute);max-width:50ch;margin-top:18px;font-size:.98rem;}
.dl{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-block:1px solid var(--line);margin-top:26px;}
@media(min-width:560px){.dl{grid-template-columns:1fr 1fr;}}
.dl div{background:var(--surf);padding:13px 0 13px 2px;}
.dl dt{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);}
.dl dd{margin:5px 0 0;font-size:.95rem;color:var(--ink);}
.ix__vis{display:flex;flex-direction:column;gap:12px;}
#swatch{width:100%;height:230px;display:block;border:1px solid var(--line);background:#17140F;}
.ix__hint{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* ============================================================ RITUALS */
.rit{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:1fr;}
@media(min-width:820px){.rit{grid-template-columns:repeat(3,1fr);}}
.rit__col{background:var(--surf);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;gap:20px;min-height:290px;}
.rit__col h3{font-size:clamp(1.6rem,2.6vw,2.2rem);text-transform:uppercase;}
.rit__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.rit__col li{display:flex;align-items:center;gap:11px;font-size:.95rem;color:var(--mute);}
.rit__col li i{width:7px;height:7px;border-radius:50%;background:var(--hue);flex:none;}
.rit__col p{color:var(--mute);font-size:.94rem;margin:0;}
.rit__col .btn{margin-top:auto;align-self:flex-start;}

/* ============================================================ PURITY / STATEMENT */
.stmt{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr;}
@media(min-width:900px){.stmt{grid-template-columns:1.15fr .85fr;align-items:end;}}
.stmt p{color:var(--mute);max-width:50ch;}

/* ============================================================ LAB */
.lab__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,4vw,56px);}
.lab__item{background:var(--surf);padding:24px 22px;min-height:180px;display:flex;flex-direction:column;gap:14px;transition:background .45s;}
.lab__item:hover{background:var(--hover);}
.lab__item h3{font-family:var(--sans);font-weight:400;font-size:1.02rem;line-height:1.3;letter-spacing:.01em;text-transform:none;}
.lab__item p{font-size:.86rem;color:var(--mute);margin:0;}
.dev{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--moss);margin-top:auto;}

/* ============================================================ PHASES + TIMELINE */
.tl{border-top:1px solid var(--line);margin-top:clamp(34px,4vw,60px);}
.tl__row{display:grid;grid-template-columns:1fr;gap:8px;padding:26px 0;border-bottom:1px solid var(--line);}
@media(min-width:760px){.tl__row{grid-template-columns:150px 190px 1fr;gap:30px;align-items:baseline;}}
.tl__date{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.tl__t{font-family:var(--display);font-size:1.35rem;text-transform:uppercase;line-height:1.1;}
.tl__d{color:var(--mute);font-size:.95rem;margin:0;max-width:56ch;}
.tl__row--future .tl__date{color:var(--faint);}
.tl__row--future .tl__t{color:var(--mute);}

/* ============================================================ JOURNAL */
.jr{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-block:1px solid var(--line);}
@media(min-width:820px){.jr{grid-template-columns:repeat(3,1fr);}}
.jr__item{background:var(--surf);padding:26px 22px 24px;display:flex;flex-direction:column;gap:14px;min-height:210px;transition:background .45s;}
.jr__item:hover{background:var(--hover);}
.jr__item h3{font-size:1.28rem;line-height:1.16;}
.jr__k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--moss);}
.jr__s{margin-top:auto;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}

/* ============================================================ EARLY ACCESS */
.ea{display:grid;gap:clamp(30px,5vw,80px);grid-template-columns:1fr;}
@media(min-width:960px){.ea{grid-template-columns:1fr 1fr;align-items:start;}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.field label{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);}
.field input,.field select{
  font:inherit;font-size:.98rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line2);padding:11px 0;border-radius:0;
  transition:border-color .35s;
}
.field input::placeholder{color:var(--faint);}
.field input:focus,.field select:focus{outline:none;border-bottom-color:var(--gold);}
.field select option{background:var(--bg);color:var(--ink);}
.row2{display:grid;grid-template-columns:1fr;gap:0 26px;}
@media(min-width:620px){.row2{grid-template-columns:1fr 1fr;}}
.consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 26px;font-size:.84rem;color:var(--mute);line-height:1.5;}
.consent input{margin-top:3px;accent-color:var(--gold-fill);width:15px;height:15px;flex:none;}
.formnote{font-size:11px;color:var(--faint);margin-top:16px;line-height:1.55;}
.done{border:1px solid var(--gold-fill);padding:26px;display:none;}
.done.is-on{display:block;}
.done h3{font-size:1.5rem;text-transform:uppercase;margin-bottom:10px;}
.done p{color:var(--mute);font-size:.92rem;margin:0;}
form.is-done{display:none;}

/* ============================================================ FOOTER */
.ft{padding-block:clamp(56px,7vw,96px) 34px;border-top:1px solid var(--line);}
.ft__top{display:grid;grid-template-columns:1fr;gap:38px;margin-bottom:clamp(48px,6vw,84px);}
@media(min-width:820px){.ft__top{grid-template-columns:1.4fr repeat(3,1fr);gap:30px;}}
.ft__tag{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-top:14px;}
.ft h4{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:0 0 16px;font-weight:400;}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.ft ul a{font-size:.9rem;color:var(--ink);transition:color .3s;}
.ft ul a:hover{color:var(--gold);}
.ft__base{display:flex;flex-wrap:wrap;gap:16px 30px;justify-content:space-between;padding-top:26px;border-top:1px solid var(--line);font-size:11px;color:var(--faint);}


/* ============================================================ REVEAL */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);}
.rv.in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition-duration:.01ms!important;}
  .rv{opacity:1;transform:none;}
  .hero h1 .ln{color:var(--ink);}
}

/* ============================================================
   Templates added for the multi-page build
   ============================================================ */

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold-fill);color:var(--on-gold);padding:12px 20px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
.skip:focus{left:0;}

/* honeypot — hidden from people, visible to naive bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* breadcrumbs */
.crumbs{border-bottom:1px solid var(--line);padding:14px 0;margin-top:70px;}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.crumbs li:not(:last-child)::after{content:"/";margin-left:8px;opacity:.5;}
.crumbs a{color:var(--mute);}
.crumbs a:hover{color:var(--gold);}
.crumbs + main .sec--head{padding-top:clamp(48px,7vw,96px);}

/* pages that open without a band get their own top spacing */
.sec--head{padding-bottom:clamp(40px,5vw,70px);}
body > main > section:first-child:not(.band):not(.hero){padding-top:clamp(96px,11vw,150px);}
.hero, .band:first-of-type{margin-top:0;}
main > .band:first-child{padding-top:calc(70px + clamp(60px,8vw,120px));}

/* card titles are links now */
.card h3 a, .line5__i h3 a, .jr__item h3 a{color:inherit;}
.card h3 a:hover, .line5__i h3 a:hover, .jr__item h3 a:hover{color:var(--gold);}

/* static filter chips (server-rendered listing pages) */
.chip{
  display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--line);
  border-radius:1px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  transition:color .35s,border-color .35s,background .35s;
}
.chip:hover{color:var(--ink);border-color:var(--line2);}
.chip.is-on{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--on-gold);}
.chip em{font-style:normal;opacity:.55;margin-left:7px;}

/* product / botanical detail */
.pd{padding-block:clamp(60px,8vw,110px);}
.pd__hero{display:grid;gap:clamp(30px,5vw,70px);grid-template-columns:1fr;align-items:center;}
@media(min-width:900px){.pd__hero{grid-template-columns:1.1fr .9fr;}}
.pd__latin{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1.1rem;margin:10px 0 0;}
.pd__vis{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;}
.pd__vis img{width:100%;height:auto;border:1px solid var(--line);}
.pd__dot{
  width:min(64vw,300px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--hue),var(--bg0) 70%);
}
.pd__grid{display:grid;gap:clamp(30px,5vw,70px);grid-template-columns:1fr;align-items:start;}
@media(min-width:900px){.pd__grid{grid-template-columns:1.25fr .75fr;}}
.pd__h{
  font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:34px 0 12px;padding-top:16px;border-top:1px solid var(--line);
}
.pd__grid > div > .pd__h:first-child{margin-top:0;padding-top:0;border-top:0;}
.pd__grid p{color:var(--mute);max-width:62ch;}
.pd__warn{border-left:2px solid var(--gold-fill);padding-left:16px;}
.pd__spec{border:1px solid var(--line);padding:clamp(20px,3vw,30px);background:var(--surf);}
.dl--stack{grid-template-columns:1fr!important;}
.dl--stack div{background:transparent;}

/* prose pages */
.prose{max-width:70ch;}
.prose p{color:var(--mute);font-size:clamp(1rem,1.2vw,1.1rem);margin-bottom:1.3em;}
.prose .lead{color:var(--ink);}
.linklist{list-style:none;margin:0;padding:0;}
.linklist li{padding:11px 0;border-bottom:1px solid var(--line);}
.linklist a{color:var(--ink);}
.linklist a:hover{color:var(--gold);}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:14px 0;}
.faq summary{cursor:pointer;font-size:1rem;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--gold);flex:none;}
.faq details[open] summary::after{content:"–";}
.faq p{margin:12px 0 0;color:var(--mute);}