/* ==========================================================================
   A Cacao Affair - home page
   Typography: Geist (primary) / Inter Tight (fallback) - neo-grotesque with
   tight negative tracking at display sizes, matching the reference design.
   ========================================================================== */

:root{
  --cream:      #f5f1ea;
  --cream-2:    #efe9de;
  --paper:      #fbf9f5;
  --espresso:   #2c2419;
  --ink:        #12130f;
  --tan:        #c4884d;
  --tan-2:      #ba8147;
  --tan-soft:   #e6cdab;
  --ghost:      #e4ded2;
  --muted:      #8b857a;
  --muted-2:    #6f6a60;
  --line:       rgba(44, 36, 25, .13);
  --line-soft:  rgba(44, 36, 25, .07);

  --sans: "Geist", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 4.5vw, 88px);
  --maxw: 1560px;
  --r-md: 20px;
  --r-lg: 28px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* the sticky header animates its own flow height as it compacts, and scroll
   anchoring answers that by tugging the scroll position back, which reads as
   the logo shaking under the cursor mid-transition */
body{ overflow-anchor:none; }

body{
  margin:0;
  background:var(--cream);
  color:var(--espresso);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  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; }

svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* the brand-mark sprite is referenced, never drawn where it sits */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* brand glyphs are solid shapes, against this sheet's stroked-line default */
.ico{ width:1em; height:1em; flex:none; fill:currentColor; stroke:none; }

/* --- faint blueprint grid ------------------------------------------------- */
.grid-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:clamp(90px, 8.4vw, 132px) clamp(90px, 8.4vw, 132px);
  -webkit-mask-image:linear-gradient(to bottom, #000 0 92%, transparent);
  mask-image:linear-gradient(to bottom, #000 0 92%, transparent);
}
main, .nav, .foot, .announce{ position:relative; z-index:1; }

/* --- vertical side rail --------------------------------------------------- */
.rail{
  position:absolute; top:700px; left:20px; z-index:2;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(44,36,25,.28);
}

/* ==========================================================================
   Shared type
   ========================================================================== */

.display{
  font-size:clamp(32px, 4.4vw, 68px);
  font-weight:800; line-height:.98; letter-spacing:-.042em;
  margin:0 0 22px; text-wrap:balance;
}
.display--lg{ font-size:clamp(34px, 5vw, 82px); letter-spacing:-.046em; line-height:.96; }

.lede{
  max-width:56ch; color:var(--muted-2);
  font-size:clamp(15px, 1.05vw, 17.5px); margin:0;
}

.eyebrow{
  display:flex; align-items:center; gap:10px; margin:0 0 22px;
  font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--espresso);
}
.eyebrow i{ width:7px; height:7px; border-radius:50%; background:var(--tan); flex:none; }
.eyebrow--plain{ color:var(--muted); }
.eyebrow--plain i{ display:none; }
.eyebrow--tan{ color:var(--tan); }
.eyebrow--tan i{ background:currentColor; }
.eyebrow--center{ justify-content:center; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:13px 13px 13px 30px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn__arrow{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; transition:transform .35s var(--ease);
}
.btn__arrow svg{ width:16px; height:16px; }
.btn:hover .btn__arrow{ transform:translateX(3px); }

.btn--glass{
  background:linear-gradient(115deg,#fff 0%, #f2eee6 38%, #d9d3c7 62%, #fbf9f5 100%);
  color:var(--espresso);
  box-shadow:0 1px 0 #fff inset, 0 10px 28px -14px rgba(44,36,25,.5);
}
.btn--glass .btn__arrow{ background:var(--tan); color:#fff; }

.btn--tan{
  background:linear-gradient(180deg, #cd9358, var(--tan-2)); color:#fff;
  box-shadow:0 10px 26px -14px rgba(186,129,71,.9);
}
.btn--tan .btn__arrow{ background:rgba(255,255,255,.22); color:#fff; }
.btn--tan:hover{ background:linear-gradient(180deg,#d69c60,#c1884b); }

.btn--outline{
  padding:13px 30px; border:1px solid var(--line); color:var(--espresso);
}
.btn--outline:hover{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); }

.btn--outline-light{
  padding:13px 30px; border:1px solid rgba(245,241,234,.32); color:var(--cream);
}
.btn--outline-light:hover{ background:rgba(245,241,234,.1); }

.linkarrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap;
}
.linkarrow i{
  width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--tan); color:#fff;
  display:grid; place-items:center;
  transition:transform .35s var(--ease);
}
.linkarrow i svg{ width:16px; height:16px; }
.linkarrow:hover{ color:var(--espresso); }
.linkarrow:hover i{ transform:translateX(4px); }

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.announce{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px, 2vw, 28px); flex-wrap:wrap;
  padding:11px var(--pad);
  background:var(--espresso); color:var(--cream);
  font-size:12px; letter-spacing:.04em;
}
.announce p{ margin:0; }
.announce b{ font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:11px; }
.announce a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tan-soft); white-space:nowrap;
}
.announce a i{ display:grid; place-items:center; transition:transform .3s var(--ease); }
.announce a i svg{ width:14px; height:14px; }
.announce a:hover i{ transform:translateX(4px); }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--pad);
  background:transparent;
  box-shadow:0 1px 0 transparent;
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease),
             padding .45s var(--ease), backdrop-filter .45s var(--ease);
}
.nav.is-stuck{
  padding-top:9px; padding-bottom:9px;
  background:rgba(245,241,234,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--line-soft);
}

/* circular mark on load, horizontal wordmark once the header compacts */
.nav__logo{
  position:relative; z-index:2; flex:none;
  width:clamp(116px, 11.5vw, 168px);
  height:clamp(116px, 11.5vw, 168px);
  /* negative pull keeps the bar short so the mark overhangs below it */
  margin-bottom:clamp(-72px, -4.8vw, -46px);
  transition:width .5s var(--ease), height .5s var(--ease),
             margin-bottom .5s var(--ease);
}
.nav__logo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:left center;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.nav__logo-wide{ opacity:0; transform:scale(.92); }
.nav.is-stuck .nav__logo{
  width:clamp(164px, 14.5vw, 212px); height:58px; margin-bottom:0;
}
.nav.is-stuck .nav__logo-mark{ opacity:0; transform:scale(.88); }
.nav.is-stuck .nav__logo-wide{ opacity:1; transform:none; }

.nav__menu{ display:flex; align-items:center; gap:6px; }

.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.pill--dark{ background:var(--ink); color:var(--cream); }
.pill--dark:hover{ background:var(--espresso); }
.pill--ghost:hover{ background:rgba(44,36,25,.07); }

/* --- Collections: the pill opens a panel of the page's own sections ------- */
.nav__drop{ position:relative; display:inline-flex; }
.nav__drop > .pill{ gap:7px; }
.nav__caret{ width:11px; height:11px; transition:transform .35s var(--ease); }
.nav__drop:hover .nav__caret,
.nav__drop:focus-within .nav__caret{ transform:rotate(180deg); }

.nav__panel{
  position:absolute; top:100%; left:50%; z-index:2;
  margin-top:12px; padding:12px;
  display:grid; grid-template-columns:repeat(2, minmax(max-content, 1fr)); gap:2px;
  background:var(--paper); border-radius:var(--r-lg);
  box-shadow:0 30px 60px -30px rgba(44,36,25,.55);
  opacity:0; visibility:hidden;
  transform:translate(-50%, 8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             visibility .3s var(--ease);
}
/* the gap between pill and panel would otherwise drop the hover mid-travel */
.nav__panel::before{
  content:""; position:absolute; left:0; right:0; top:-16px; height:16px;
}
.nav__drop:hover .nav__panel,
.nav__drop:focus-within .nav__panel{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
.nav__panel a{
  padding:11px 15px; border-radius:12px; white-space:nowrap;
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--espresso);
  transition:background-color .3s var(--ease);
}
.nav__panel a:hover{ background:rgba(44,36,25,.07); }

.nav__burger{ display:none; width:44px; height:44px; border-radius:12px; }
.nav__burger span{
  display:block; width:20px; height:1.6px; background:var(--espresso);
  margin:5px auto; transition:transform .3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

.drawer{
  position:fixed; z-index:59; inset:var(--navh, 120px) 12px auto 12px;
  background:var(--paper); border-radius:var(--r-lg);
  padding:16px; display:grid; gap:2px;
  max-height:calc(100vh - var(--navh, 120px) - 24px);
  overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 30px 60px -30px rgba(44,36,25,.55);
}
.drawer[hidden]{ display:none; }
.drawer a{
  padding:14px 18px; border-radius:14px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.drawer a:hover{ background:rgba(44,36,25,.06); }
.drawer__cta{ background:var(--tan-2); color:#fff; text-align:center; margin-top:6px; }

/* collapsed by default so ten section links do not bury the rest of the menu */
/* the links are not grid items of .drawer, so blockify them here */
.drawer__group{ display:grid; gap:2px; }
.drawer__group summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-radius:14px; cursor:pointer; list-style:none;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.drawer__group summary::-webkit-details-marker{ display:none; }
.drawer__group summary::after{
  content:""; width:9px; height:9px; flex:none;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .3s var(--ease);
}
.drawer__group[open] summary::after{ transform:translateY(2px) rotate(-135deg); }
.drawer__group summary:hover{ background:rgba(44,36,25,.06); }
.drawer__group a{ padding-left:34px; font-size:11px; letter-spacing:.12em; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative; overflow:hidden;
  padding:clamp(60px, 8vw, 110px) var(--pad) clamp(60px, 8vw, 120px);
}

.hero__ghost{
  position:absolute; left:50%; top:clamp(300px, 32vw, 470px);
  transform:translateX(-50%);
  margin:0; white-space:nowrap; pointer-events:none;
  font-size:clamp(140px, 20.5vw, 390px);
  font-weight:800; letter-spacing:-.05em; line-height:.8;
  color:#6b6152;
}

.hero__inner{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(300px, 34%) 1fr minmax(230px, 21%);
  gap:clamp(24px, 3vw, 56px); align-items:start;
}

.hero__copy{ position:relative; z-index:3; }
.hero__title{
  margin:0 0 20px;
  font-size:clamp(30px, 3vw, 50px);
  font-weight:800; line-height:1.03; letter-spacing:-.04em;
  text-wrap:balance;
}
.hero__sub{
  margin:0 0 clamp(30px, 4vw, 54px);
  font-size:clamp(16px, 1.2vw, 19px); line-height:1.5; letter-spacing:-.015em;
  color:var(--muted-2); max-width:34ch;
}

/* fanned photo stack */
.fan{
  position:relative; z-index:2;
  height:clamp(340px, 42vw, 640px);
  display:grid; place-items:center;
}
.fan__card{
  position:absolute; margin:0; border-radius:22px; overflow:hidden;
  box-shadow:0 40px 70px -34px rgba(30,22,12,.72);
  transition:transform .8s var(--ease);
}
.fan__card img{ width:100%; height:100%; object-fit:cover; }
.fan__card--1{
  width:clamp(200px, 24vw, 360px); aspect-ratio:5/7; z-index:3;
  transform:rotate(1deg) translateY(-4%);
}
.fan__card--2{
  width:clamp(180px, 22vw, 330px); aspect-ratio:5/7; z-index:2;
  transform:rotate(-10deg) translate(-58%, 3%);
}
.fan__card--3{
  width:clamp(180px, 22vw, 330px); aspect-ratio:5/7; z-index:1;
  transform:rotate(11deg) translate(56%, -8%);
}

.glasscard{
  position:relative; z-index:3;
  margin-top:clamp(120px, 20vw, 290px);
  padding:26px;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(255,255,255,.72), rgba(215,209,197,.42) 55%, rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 30px 60px -34px rgba(44,36,25,.6);
}
.glasscard__dot{
  display:block; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #8a6a52, #3a2a20 60%, #6d5a45);
  margin-bottom:26px;
}
.glasscard p{ margin:0; font-size:19px; font-weight:600; letter-spacing:-.028em; }
.glasscard__sub{
  margin-top:8px !important;
  font-size:13px !important; font-weight:400 !important;
  line-height:1.45; color:var(--muted-2);
}

/* ==========================================================================
   Categories
   ========================================================================== */

.cats{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad); }
.cats ul{
  list-style:none; margin:0; padding:28px 0;
  border-block:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px, 3vw, 48px);
}
.cats li{
  display:flex; align-items:center; gap:clamp(16px, 3vw, 48px);
  font-size:clamp(15px, 1.5vw, 23px); font-weight:600; letter-spacing:-.028em;
}
.cats li:not(:last-child)::after{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--tan); flex:none;
}

/* ==========================================================================
   Craft band
   ========================================================================== */

.craft{
  position:relative; overflow:hidden;
  padding:clamp(50px, 8vw, 120px) var(--pad) clamp(70px, 10vw, 150px);
}
.craft__ghost{
  position:absolute; left:50%; top:6%; transform:translateX(-50%);
  margin:0; white-space:nowrap; pointer-events:none;
  font-size:clamp(90px, 14.5vw, 270px);
  font-weight:800; letter-spacing:-.05em; line-height:1;
  color:var(--ghost);
}
.craft__copy{
  position:relative;
  max-width:840px; margin-inline:auto;
  padding-top:clamp(70px, 11vw, 190px);
  text-align:center;
}
.craft__copy p{
  margin:0; font-size:clamp(17px, 1.5vw, 23px); line-height:1.5;
  letter-spacing:-.02em; color:var(--espresso);
}
.craft__kicker{
  margin-top:26px !important;
  font-size:clamp(14px, 1.1vw, 16px) !important;
  font-weight:700; letter-spacing:.06em; color:var(--tan-2) !important;
}

/* ==========================================================================
   Section shell
   ========================================================================== */

.sec{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad) clamp(70px, 9vw, 130px); }
.sec__head{ margin-bottom:clamp(36px, 4.5vw, 66px); }
.sec__head--center{ text-align:center; max-width:900px; margin-inline:auto; }
.sec__head--center .lede{ margin-inline:auto; }
.sec__cta{
  margin-top:clamp(34px, 4vw, 58px);
  display:flex; justify-content:center; align-items:center;
  gap:14px; flex-wrap:wrap;
}

/* pillars */
.pillars{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 2vw, 32px);
}
.pillar{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pillar:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -38px rgba(44,36,25,.6); }
.pillar figure{ margin:0; overflow:hidden; }
.pillar img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1s var(--ease); }
.pillar:hover img{ transform:scale(1.05); }
.pillar h3{
  margin:26px clamp(20px,2vw,30px) 10px;
  font-size:clamp(20px, 1.8vw, 27px); font-weight:700; letter-spacing:-.032em;
}
.pillar p{
  margin:0 clamp(20px,2vw,30px) 28px;
  font-size:14.5px; line-height:1.55; color:var(--muted-2);
}

/* ==========================================================================
   Gallery marquee
   ========================================================================== */

.gallery{ padding:0 0 clamp(70px, 9vw, 130px); overflow:hidden; }
.marquee{
  overflow:hidden; padding-block:30px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{
  display:flex; gap:clamp(16px, 1.8vw, 30px); width:max-content;
  animation:slide 60s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }

.marquee figure{
  margin:0; width:clamp(180px, 17vw, 280px); aspect-ratio:3/4;
  border-radius:20px; overflow:hidden; flex:none;
  box-shadow:0 30px 56px -34px rgba(30,22,12,.6);
}
.marquee figure img{ width:100%; height:100%; object-fit:cover; }
.marquee figure:nth-child(odd){ transform:rotate(-2.4deg); }
.marquee figure:nth-child(even){ transform:rotate(2deg) translateY(26px); }

/* ==========================================================================
   Our story / gifting
   ========================================================================== */

.story{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(70px, 9vw, 130px);
}
.story__float{
  position:absolute; right:4%; top:-30px; margin:0;
  width:clamp(120px, 13vw, 210px); aspect-ratio:4/3;
  border-radius:18px; overflow:hidden; transform:rotate(5deg);
  box-shadow:0 34px 60px -36px rgba(30,22,12,.7);
}
.story__float img{ width:100%; height:100%; object-fit:cover; }

.gifts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 2vw, 32px);
}
.gift{
  border-radius:var(--r-lg); padding:clamp(26px, 2.6vw, 42px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  box-shadow:0 34px 64px -42px rgba(30,22,12,.6);
}
.gift:hover{ transform:translateY(-6px); }
.gift__icon{ display:block; font-size:34px; line-height:1; margin-bottom:24px; }
.gift h3{
  margin:0 0 14px; font-size:clamp(21px, 1.9vw, 29px);
  font-weight:800; letter-spacing:-.034em; line-height:1.06;
}
.gift p{ margin:0; font-size:14.5px; line-height:1.55; opacity:.76; }

.gift--brown{ background:var(--espresso); color:var(--cream); }
.gift--ink{ background:var(--ink); color:var(--cream); }
.gift--tan{ background:var(--tan); color:#231a10; }

/* ==========================================================================
   Bonbons page
   ========================================================================== */

.bonhead{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(46px, 6vw, 90px) var(--pad) clamp(28px, 3vw, 44px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
}
.bonhead .display{ margin:0; }
.bonhead__meta p{
  margin:0; display:flex; align-items:baseline; gap:12px;
}
.bonhead__meta b{
  font-size:clamp(38px, 4vw, 62px); font-weight:800;
  letter-spacing:-.045em; line-height:1; color:var(--tan-2);
}
.bonhead__meta span{
  font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}

.bonfilter{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(30px, 3.5vw, 50px);
}
.filters{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-top:24px; border-top:1px solid var(--line);
}
.filter{
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--line);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2);
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.filter em{ font-style:normal; opacity:.55; margin-left:6px; }
.filter:hover{ border-color:var(--tan); color:var(--espresso); }
.filter.is-active{ background:var(--espresso); border-color:var(--espresso); color:var(--cream); }
.filter.is-active em{ opacity:.6; }

.bons{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px, 1.8vw, 28px);
}
.bon{
  position:relative;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(24px, 2.4vw, 36px);
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  column-gap:clamp(20px, 2.2vw, 32px);
  align-items:start;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             opacity .3s var(--ease);
}
.bon:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -38px rgba(44,36,25,.55); }
.bon[hidden]{ display:none; }

.bon__no{
  position:absolute; top:clamp(20px,2vw,30px); right:clamp(22px,2.2vw,32px);
  margin:0; font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--tan); opacity:.7;
}
/* source art is 87px square, so this is the practical ceiling before it softens */
.bon__shot{
  grid-column:1; grid-row:1 / span 3;
  margin:0;
  width:clamp(104px, 9vw, 132px);
  height:clamp(104px, 9vw, 132px);
  border-radius:22px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 14px 28px -16px rgba(44,36,25,.6);
  transition:transform .4s var(--ease);
}
.bon__shot img{ width:100%; height:100%; object-fit:cover; }
.bon:hover .bon__shot{ transform:scale(1.05) rotate(-2deg); }

.bon__tags{
  grid-column:2;
  list-style:none; margin:0 0 14px; padding:0;
  display:flex; flex-wrap:wrap; gap:6px; padding-right:34px;
}
.bon__tags li{
  padding:5px 12px; border-radius:999px;
  background:rgba(196,136,77,.14); color:var(--tan-2);
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.bon h3{
  grid-column:2;
  margin:0 0 10px; font-size:clamp(21px, 1.9vw, 29px);
  font-weight:800; letter-spacing:-.036em; line-height:1.06;
}
.bon > p:last-child{
  grid-column:2;
  margin:0; font-size:14.5px; line-height:1.6; color:var(--muted-2);
}

.bons__empty{
  margin:40px 0 0; text-align:center; color:var(--muted);
  font-size:15px;
}

/* ==========================================================================
   Collections page
   ========================================================================== */

/* category jump nav - scrolls sideways on small screens like .filters does */
.collnav{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(30px, 3.6vw, 52px);
  display:flex; gap:10px; flex-wrap:wrap;
}
.collnav a{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper);
  font-size:12.5px; font-weight:600; letter-spacing:-.01em;
  color:var(--muted-2);
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.collnav a:hover{
  background:var(--espresso); border-color:var(--espresso);
  color:var(--cream); transform:translateY(-2px);
}
.collnav b{
  font-size:10.5px; font-weight:700; color:var(--tan-2);
  letter-spacing:.06em;
}
.collnav a:hover b{ color:var(--tan-soft); }

.collgroup{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(64px, 8vw, 116px);
  scroll-margin-top:100px;
}
.collgroup__head{ margin-bottom:clamp(28px, 3.4vw, 50px); }
.collgroup__head .display{ margin:0 0 12px; }
.collgroup__head .lede{ margin:0; max-width:60ch; }

.collgrid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(16px, 1.8vw, 28px);
}

.collcard{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.collcard:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -38px rgba(44,36,25,.6); }
.collcard__link{ display:block; color:inherit; text-decoration:none; }
.collcard figure{ margin:0; overflow:hidden; background:#fff; }
.collcard img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform 1s var(--ease);
}
.collcard:hover img{ transform:scale(1.05); }
.collcard h3{
  margin:0; padding:20px clamp(16px,1.4vw,22px) 22px;
  font-size:clamp(14px, 1.15vw, 16.5px); font-weight:600;
  letter-spacing:-.022em; line-height:1.35;
}

@media (max-width:1080px){
  .collgrid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:760px){
  .collgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .collnav{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .collnav::-webkit-scrollbar{ display:none; }
  .collnav a{ flex:0 0 auto; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px, 2.4vw, 36px); align-items:stretch;
}
.contact__details{ display:grid; gap:clamp(12px, 1.4vw, 18px); align-content:start; }

.crow{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  padding:clamp(22px, 2.2vw, 30px);
  border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--line-soft);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.crow:hover{ transform:translateY(-3px); box-shadow:0 26px 46px -32px rgba(44,36,25,.5); }
.crow > span{ font-size:24px; line-height:1.1; }
.crow b{
  display:block; font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  margin-bottom:8px;
}
.crow p, .crow address{
  margin:0; font-style:normal;
  font-size:clamp(16px, 1.3vw, 19px); font-weight:600;
  letter-spacing:-.022em; line-height:1.45;
}
.crow a{ color:var(--espresso); }
.crow p a:hover, .crow address a:hover{ color:var(--tan-2); }

.crow__link{
  display:inline-flex; align-items:center; gap:10px; margin-top:14px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tan-2) !important;
}
.crow__link i{ display:grid; place-items:center; transition:transform .3s var(--ease); }
.crow__link i svg{ width:14px; height:14px; }
.crow__link:hover i{ transform:translateX(4px); }

.crow--hours{ background:var(--espresso); border-color:var(--espresso); color:var(--cream); }
.crow--hours b{ color:var(--tan-soft); }

.hours{ margin:0; display:grid; gap:8px; }
.hours > div{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; padding-bottom:8px;
  border-bottom:1px solid rgba(245,241,234,.12);
}
.hours > div:last-child{ border-bottom:0; padding-bottom:0; }
.hours dt{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,241,234,.6); white-space:nowrap;
}
.hours dd{
  margin:0; font-size:15.5px; font-weight:600; letter-spacing:-.02em;
  text-align:right;
}
.hours__closed{ color:rgba(245,241,234,.45) !important; font-weight:500 !important; }

.contact__map{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-soft);
  box-shadow:0 40px 70px -46px rgba(30,22,12,.6);
  min-height:clamp(360px, 46vw, 620px);
  background:var(--cream-2);
}
.contact__map iframe{
  display:block; width:100%; height:100%;
  min-height:clamp(360px, 46vw, 620px);
  border:0;
}

.contact .fqcta{ margin-top:clamp(20px, 2.4vw, 36px); }

/* ==========================================================================
   FAQs page
   ========================================================================== */

.fqs{ border-top:1px solid var(--line); }
.fq{ border-bottom:1px solid var(--line); }
.fq[hidden]{ display:none; }
.fq summary{
  cursor:pointer; list-style:none;
  display:grid; grid-template-columns:auto 1fr auto;
  gap:clamp(14px, 2vw, 28px); align-items:center;
  padding:24px 0;
}
.fq summary::-webkit-details-marker{ display:none; }
.fq__no{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--tan); padding-top:2px;
}
.fq__q{
  font-size:clamp(16.5px, 1.45vw, 21px); font-weight:600;
  letter-spacing:-.026em; line-height:1.3;
}
.fq summary i{ position:relative; width:18px; height:18px; flex:none; }
.fq summary i::before, .fq summary i::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--espresso);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.fq summary i::before{ width:15px; height:1.6px; transform:translate(-50%,-50%); }
.fq summary i::after{ width:1.6px; height:15px; transform:translate(-50%,-50%); }
.fq[open] summary i::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.fq[open] .fq__q{ color:var(--espresso); }

.fq__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.fq[open] .fq__panel{ grid-template-rows:1fr; }
.fq__panel > div{ overflow:hidden; }
.fq__panel p{
  margin:0 0 16px; max-width:72ch; color:var(--muted-2); font-size:15.5px;
  padding-left:clamp(0px, 3.4vw, 48px);
}
.fq__panel > div > :last-child{ margin-bottom:26px; }
.fq__panel a{ color:var(--tan-2); border-bottom:1px solid rgba(186,129,71,.4); }
.fq__panel a:hover{ color:var(--espresso); border-bottom-color:var(--espresso); }

.fq__address{
  margin:0 0 16px; padding:16px 22px;
  margin-left:clamp(0px, 3.4vw, 48px);
  border-left:3px solid var(--tan); background:var(--paper);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-style:normal; font-size:15.5px; line-height:1.55; color:var(--espresso);
}

.fq__list{
  list-style:none; margin:0 0 16px; padding:0;
  padding-left:clamp(0px, 3.4vw, 48px);
  display:flex; flex-wrap:wrap; gap:8px;
}
.fq__list li{
  padding:8px 16px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line);
  font-size:13.5px; font-weight:500; color:var(--espresso);
}

.fqcta{
  margin-top:clamp(40px, 5vw, 70px);
  padding:clamp(28px, 3vw, 46px);
  border-radius:var(--r-lg);
  background:var(--espresso); color:var(--cream);
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
}
.fqcta h2{
  margin:0 0 8px; font-size:clamp(22px, 2.2vw, 32px);
  font-weight:800; letter-spacing:-.034em;
}
.fqcta p{ margin:0; color:rgba(245,241,234,.7); font-size:15.5px; }
.fqcta a{ color:var(--tan-soft); border-bottom:1px solid rgba(230,205,171,.45); }
.fqcta a:hover{ color:#fff; }
.fqcta .btn{ flex:none; }

/* ==========================================================================
   About page
   ========================================================================== */

.pill.is-current{ background:rgba(44,36,25,.09); }

.ahero{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(50px, 7vw, 100px) var(--pad) clamp(50px, 7vw, 100px);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px, 5vw, 80px); align-items:center;
}
.ahero__copy .display{ margin:0; max-width:14ch; }
.ahero__shots{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 1.6vw, 24px); }
.ahero__shots figure{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  background:var(--paper); border:1px solid var(--line-soft);
  box-shadow:0 34px 60px -40px rgba(30,22,12,.6);
}
.ahero__shots img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.ahero__shots figcaption{
  padding:16px 18px; text-align:center;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
}

.prose{ max-width:70ch; }
.prose .display{ margin-bottom:24px; }
.prose p{ margin:0 0 18px; font-size:clamp(15.5px, 1.1vw, 18px); color:var(--muted-2); }
.prose p:last-child{ margin-bottom:0; }
.prose__lead{ color:var(--espresso) !important; font-weight:600; margin-bottom:14px !important; }
.prose__note{
  margin-top:26px !important; padding:18px 22px;
  border-left:3px solid var(--tan); background:var(--paper);
  border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--espresso) !important; font-size:15px !important;
}

.pairs{ list-style:none; margin:0 0 4px; padding:0; display:grid; gap:10px; }
.pairs li{
  position:relative; padding-left:26px;
  font-size:15.5px; font-weight:500; color:var(--espresso);
}
.pairs li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:11px; height:6px; border-left:2px solid var(--tan);
  border-bottom:2px solid var(--tan); transform:rotate(-45deg);
}
.pairs--wide{ margin-top:22px; }

.split{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px, 4vw, 70px); align-items:center;
}
.split__media{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 40px 70px -44px rgba(30,22,12,.7);
}
.split__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }

.products{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px, 2vw, 32px);
}
.product{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -38px rgba(44,36,25,.55); }
.product figure{ margin:0; overflow:hidden; }
.product img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1s var(--ease); }
.product:hover img{ transform:scale(1.05); }
.product__body{
  padding:clamp(22px, 2.2vw, 32px);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.product__body h3{
  margin:0; font-size:clamp(18px, 1.5vw, 23px);
  font-weight:700; letter-spacing:-.028em;
}
.product .linkarrow{ align-self:auto; }

.local{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px, 4vw, 70px); align-items:start;
}
.local__head .display{ margin-bottom:18px; }
.local__head .eyebrow{ margin-bottom:18px; }
.local__head .lede{ margin-bottom:22px; }

.areas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.areas li{
  padding:9px 18px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line);
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
}

.local__meta{ display:grid; gap:14px; }
.local__row{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:22px 24px; border-radius:var(--r-md);
  background:var(--espresso); color:var(--cream);
}
.local__row span{ font-size:22px; line-height:1.2; }
.local__row b{
  display:block; font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tan-soft);
  margin-bottom:6px;
}
.local__row p{ margin:0; font-size:15.5px; }
.local__row a:hover{ color:var(--tan-soft); }

.local__note{
  margin:clamp(30px, 3.5vw, 50px) 0 0;
  font-size:15px; color:var(--muted-2); max-width:80ch;
}
.local__close{
  margin:22px 0 0; padding-top:22px; border-top:1px solid var(--line);
  font-size:clamp(16px, 1.4vw, 21px); font-weight:600;
  letter-spacing:-.026em; color:var(--espresso);
}

/* ==========================================================================
   Shipping
   ========================================================================== */

.ship{
  background:var(--espresso); color:var(--cream);
  padding:clamp(60px, 8vw, 120px) var(--pad);
  margin-bottom:clamp(70px, 9vw, 130px);
}
.ship__inner{ max-width:var(--maxw); margin-inline:auto; }
.ship__head{ max-width:900px; margin-bottom:clamp(34px, 4vw, 56px); }
.ship__head .display{ margin-bottom:20px; }
.ship__head > p:last-child{
  margin:0; color:rgba(245,241,234,.68); font-size:clamp(15px, 1.05vw, 17.5px);
  max-width:70ch;
}
.ship__label{
  margin:0 0 20px; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tan-soft);
}
.ship__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 1.8vw, 28px);
}
.shipcard{
  background:rgba(245,241,234,.06);
  border:1px solid rgba(245,241,234,.12);
  border-radius:var(--r-md);
  padding:clamp(22px, 2.2vw, 34px);
}
.shipcard span{ display:block; font-size:28px; line-height:1; margin-bottom:18px; }
.shipcard h3{
  margin:0 0 10px; font-size:clamp(18px, 1.5vw, 23px);
  font-weight:700; letter-spacing:-.028em;
}
.shipcard p{ margin:0; font-size:14.5px; line-height:1.55; color:rgba(245,241,234,.66); }

.ship__note{
  margin:clamp(26px, 3vw, 40px) 0 0;
  font-size:13.5px; color:rgba(245,241,234,.5); max-width:80ch;
}
.ship .sec__cta{ justify-content:flex-start; }

/* ==========================================================================
   Features + reviews
   ========================================================================== */

.feats{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(60px, 8vw, 110px);
  display:grid; gap:clamp(40px, 5vw, 80px);
}
.feat{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px, 3.5vw, 64px); align-items:center;
}
.feat--flip .feat__media{ order:2; }
.feat__media{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 40px 70px -44px rgba(30,22,12,.7);
}
.feat__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.feat__body h2{
  margin:0 0 14px; font-size:clamp(26px, 2.8vw, 44px);
  font-weight:800; letter-spacing:-.04em; line-height:1.02;
}
.feat__body > p{ margin:0 0 26px; color:var(--muted-2); font-size:15.5px; max-width:56ch; }

.feat blockquote{
  margin:0; padding:clamp(22px, 2.2vw, 32px);
  background:var(--paper); border:1px solid var(--line-soft);
  border-left:3px solid var(--tan);
  border-radius:var(--r-md);
}
.feat blockquote p{
  margin:0 0 14px; font-size:15px; line-height:1.6;
  letter-spacing:-.012em; font-style:italic; color:var(--espresso);
}
.feat blockquote cite{
  font-style:normal; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ==========================================================================
   Brand trio
   ========================================================================== */

.trio{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 2vw, 32px);
}
.trio__card{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:clamp(26px, 2.6vw, 42px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.trio__card:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -38px rgba(44,36,25,.55); }
.trio__card h3{
  margin:0 0 16px; font-size:clamp(22px, 2.1vw, 32px);
  font-weight:800; letter-spacing:-.038em; line-height:1.04;
}
.trio__card p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--muted-2); }

/* ==========================================================================
   Nationwide
   ========================================================================== */

.nation{
  position:relative; overflow:hidden; isolation:isolate;
  margin:0 var(--pad) clamp(70px, 9vw, 130px);
  border-radius:40px;
  padding:clamp(50px, 7vw, 110px) clamp(24px, 4vw, 80px);
  background:var(--ink); color:var(--cream);
}
.nation__bg{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover; opacity:.4; transform:scale(1.06);
}
.nation::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(15,14,10,.94) 30%, rgba(15,14,10,.45));
}
.nation__inner{ max-width:720px; }
.nation__inner .display{ margin-bottom:20px; }
.nation__inner > p{ margin:0 0 20px; color:rgba(245,241,234,.7); font-size:15.5px; }
.nation__local{
  padding:18px 22px; border-radius:var(--r-md);
  background:rgba(245,241,234,.07); border:1px solid rgba(245,241,234,.14);
  font-size:14px !important; color:rgba(245,241,234,.72) !important;
  margin-bottom:30px !important;
}
.nation__local b{ color:var(--tan-soft); }

/* ==========================================================================
   Social
   ========================================================================== */

.social{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad) clamp(60px, 8vw, 110px); }
.social__url{ margin:22px 0 0; }
.social__url a{
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tan-2); border-bottom:1px solid rgba(186,129,71,.4); padding-bottom:2px;
}
.social__grid{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:clamp(10px, 1.2vw, 18px);
}
.social__grid figure{
  margin:0; border-radius:16px; overflow:hidden; aspect-ratio:1/1;
  box-shadow:0 24px 44px -32px rgba(30,22,12,.6);
}
.social__grid img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.social__grid figure:hover img{ transform:scale(1.07); }

.social__also{
  margin-top:clamp(34px, 4vw, 56px); padding-top:26px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.social__also .eyebrow{ margin:0; }
.social__links{ display:flex; gap:clamp(16px, 2.5vw, 40px); flex-wrap:wrap; }
.social__links a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:500;
  transition:color .25s var(--ease);
}
.social__links a i{ font-style:normal; color:var(--muted); font-size:13px; }
.social__links .ico{ font-size:17px; }
.social__links a:hover{ color:var(--tan-2); }

/* ==========================================================================
   Newsletter
   ========================================================================== */

.news{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(70px, 9vw, 120px);
}
.news__inner{
  background:var(--cream-2); border:1px solid var(--line-soft);
  border-radius:40px;
  padding:clamp(36px, 5vw, 76px);
  text-align:center;
}
.news__inner .display{
  margin-inline:auto; max-width:22ch;
  font-size:clamp(26px, 3.2vw, 50px);
}
.news__inner > p{
  margin:0 auto 32px; max-width:58ch; color:var(--muted-2); font-size:15.5px;
}
.news__form{
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; justify-content:center;
}
.news__form input{
  flex:0 1 340px; min-width:0;
  padding:15px 24px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line);
  color:var(--espresso); font-family:inherit; font-size:15px;
  transition:border-color .3s var(--ease);
}
.news__form input::placeholder{ color:var(--muted); }
.news__form input:focus{ outline:none; border-color:var(--tan); }
.news__msg{
  flex:1 1 100%; margin:6px 0 0; min-height:20px;
  font-size:13.5px; color:var(--tan-2);
}

/* ==========================================================================
   Legal pages - terms of sale, privacy policy, terms of use
   ========================================================================== */

.legal{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(70px, 8vw, 130px);
}
.legal__body{ max-width:80ch; }

/* the anchors sit under the sticky header, so leave it room to land */
.legal__sec{ scroll-margin-top:120px; padding-top:clamp(30px, 3.4vw, 46px); }
.legal__sec + .legal__sec{ border-top:1px solid var(--line-soft); }
.legal__sec--intro{ padding-top:0; }
.legal__sec--intro p:first-child{
  font-size:clamp(17px, 1.35vw, 21px); font-weight:500; color:var(--espresso);
  letter-spacing:-.015em; line-height:1.5;
}

.legal h2{
  margin:0 0 18px;
  font-size:clamp(20px, 1.7vw, 27px); font-weight:700;
  letter-spacing:-.028em; line-height:1.2; color:var(--espresso);
}
.legal h3{
  margin:30px 0 12px;
  font-size:clamp(14.5px, 1.1vw, 17px); font-weight:700;
  letter-spacing:-.012em; color:var(--espresso);
}
.legal p{
  margin:0 0 17px;
  font-size:clamp(15px, 1.05vw, 16.5px); line-height:1.72; color:var(--muted-2);
}
.legal__sec a{ color:var(--tan-2); text-decoration:underline; text-underline-offset:3px; }
.legal__sec a:hover{ color:var(--espresso); }
.legal__sec > :last-child{ margin-bottom:0; }

.legal__list{ margin:0 0 17px; padding:0; list-style:none; display:grid; gap:11px; }
.legal__list li{
  position:relative; padding-left:26px;
  font-size:clamp(15px, 1.05vw, 16.5px); line-height:1.65; color:var(--muted-2);
}
.legal__list li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:7px; height:7px; border-radius:50%; background:var(--tan);
}

/* the all-caps warranty and allergen blocks - set small so they stay readable */
.legal .legal__caps{
  margin:0 0 14px; padding:20px 24px;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  font-size:12.5px; line-height:1.7; letter-spacing:.005em;
  color:var(--espresso);
}

.legal .legal__addr{
  font-style:normal; color:var(--espresso); font-weight:600;
  line-height:1.6;
}

.legal__contact{
  margin:0 0 17px; display:grid; gap:2px;
  border-left:3px solid var(--tan); padding:6px 0 6px 22px;
}
.legal .legal__contact p{
  margin:0; display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
}
.legal__contact p > span:first-child{
  min-width:82px;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.legal__sec .legal__contact a{ color:var(--espresso); text-decoration:none; font-weight:600; }
.legal__sec .legal__contact a:hover{ color:var(--tan-2); }
.legal .legal__contact .legal__addr{ font-weight:600; }

.legal__more{
  max-width:80ch; margin-top:clamp(46px, 5vw, 72px);
  padding-top:28px; border-top:1px solid var(--line);
}
.legal__more .eyebrow{ margin:0 0 16px; }
.collnav--flush{ padding:0; margin:0; max-width:none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad) 40px; }
.foot__wordmark{
  margin:0 0 clamp(30px, 4vw, 60px);
  font-size:clamp(56px, 12.6vw, 232px);
  font-weight:900; letter-spacing:-.055em; line-height:.9;
  color:var(--espresso); text-align:center;
}
.foot__cols{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(24px, 3vw, 50px);
  padding-top:clamp(30px, 3vw, 46px);
  border-top:1px solid var(--line);
}
.foot__brand p:not(.eyebrow){ margin:0; font-size:15px; color:var(--muted-2); line-height:1.6; }
.foot__brand a:hover{ color:var(--tan-2); }

.foot__social{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.foot__social a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  border:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--espresso);
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.foot__social a:hover{
  background:var(--espresso); border-color:var(--espresso); color:var(--cream);
}
/* the pill label is 11px, so lift the mark clear of it */
.foot__social .ico{ font-size:14px; }

/* the Instagram section heading doubles as a link to the profile */
.social h2 a{ transition:color .25s var(--ease); }
.social h2 a:hover{ color:var(--tan-2); }
.social .eyebrow a:hover{ color:var(--tan-2); }

.foot__nav{ display:grid; align-content:start; gap:2px; }
.foot__nav a{
  padding:8px 0; font-size:15px;
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.foot__nav a:hover{ color:var(--tan-2); padding-left:5px; }

.foot__bar{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:clamp(34px, 4vw, 60px); padding-top:22px;
  border-top:1px solid var(--line-soft);
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}

.foot__legal{
  display:flex; flex-wrap:wrap; gap:6px 20px;
}
.foot__legal a{ color:var(--muted); transition:color .3s var(--ease); }
.foot__legal a:hover{ color:var(--espresso); }

/* ==========================================================================
   Reveal
   ========================================================================== */

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px){
  .contact__grid{ grid-template-columns:1fr; }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__ghost{ top:auto; bottom:4%; font-size:clamp(90px, 26vw, 260px); }
  .fan{ order:-1; height:clamp(300px, 62vw, 470px); margin-bottom:20px; }
  .glasscard{ margin-top:8px; max-width:440px; }
  .rail{ display:none; }
  .pillars{ grid-template-columns:1fr 1fr; }
  .gifts{ grid-template-columns:1fr; }
  .story__float{ display:none; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
  .ship__grid{ grid-template-columns:1fr; }
  .trio{ grid-template-columns:1fr; }
  .feat{ grid-template-columns:1fr; }
  .feat--flip .feat__media{ order:0; }
  .social__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ahero{ grid-template-columns:1fr; }
  .ahero__copy .display{ max-width:none; }
  .split{ grid-template-columns:1fr; }
  .products{ grid-template-columns:1fr; }
  .local{ grid-template-columns:1fr; }
}

@media (max-width: 900px){
  .nav__menu{ display:none; }
  .bons{ grid-template-columns:1fr; }
  .nav__burger{ display:block; }
  .announce{ font-size:11px; }
  .nav__logo{ width:104px; height:104px; margin-bottom:-38px; }
  .nav.is-stuck .nav__logo{ width:150px; height:50px; }
}

@media (max-width: 640px){
  body{ font-size:16px; }
  .fan__card--2{ transform:rotate(-9deg) translate(-32%, 3%); }
  .fan__card--3{ transform:rotate(10deg) translate(30%, -6%); }
  .pillars{ grid-template-columns:1fr; }
  .cats li{ font-size:15px; }
  .foot__cols{ grid-template-columns:1fr; }
  .bons{ grid-template-columns:1fr; }
  .social__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .news__form .btn, .news__form input{ width:100%; flex:1 1 100%; justify-content:center; }
  .sec__cta .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   Mobile refinements
   Touch targets are brought to the 44px minimum, and anything that ate
   excessive vertical space on a phone is tightened.
   ========================================================================== */

@media (max-width: 900px){

  /* --- filters: one swipeable row instead of a 300px stack of chips ------ */
  .filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    /* bleed to the screen edges so the row reads as scrollable */
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    padding-bottom:14px;
    scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .filter{ flex:none; scroll-snap-align:start; }

  /* --- 44px minimum touch targets --------------------------------------- */
  .filter,
  .foot__social a,
  .announce a{
    display:inline-flex; align-items:center;
    min-height:44px;
  }
  .filter{ padding-block:0; }
  .foot__social a{ padding:0 18px; }

  .foot__nav a{ padding-block:12px; }
  .social__links a,
  .social__url a,
  .crow__link{
    display:inline-flex; align-items:center;
    min-height:44px;
  }
  .crow__link{ margin-top:6px; }
  /* standalone contact lines in the footer sit on their own row, so they can
     safely take a full-size target without disturbing the text flow */
  .foot__brand p a{ display:inline-block; padding-block:11px; }
  .social .eyebrow a{ display:inline-flex; align-items:center; min-height:44px; }
  /* phone and email are the primary actions on a phone - make them full targets */
  .crow p a,
  .local__row p a{ display:inline-flex; align-items:center; min-height:44px; }
  .linkarrow{ min-height:44px; }
  .foot__social a{ min-height:44px; }
  .fq summary{ padding-block:20px; }
  .drawer a{ min-height:48px; display:flex; align-items:center; }
  .drawer__cta{ justify-content:center; }

  /* --- category strip: dangling separator dots on wrap look like typos --- */
  .cats ul{
    display:grid; grid-template-columns:1fr 1fr;
    gap:14px 18px; padding:22px 0;
  }
  .cats li{ gap:0; font-size:15px; }
  .cats li:not(:last-child)::after{ display:none; }

  /* --- the sticky header would otherwise cover an anchored section -------
     The compact header is 68px, and the bar loses ~30px of flow height as it
     compacts part-way through the jump, so the landing needs both plus a gap. */
  #top, #collections, #gifting, #shipping, #chocolates, #visit{
    scroll-margin-top:114px;
  }
}

@media (max-width: 640px){
  /* give the flavour text more room beside its photograph */
  .bon{ padding:20px; column-gap:16px; }
  .bon h3{ font-size:20px; }
  /* a collection name like "Chocolate Dipped Strawberries" cannot fit the text
     column beside the photo, so the tag row takes the full width of the card
     and the photo keeps its place alongside the name and description */
  .bon__tags{
    grid-column:1 / -1; grid-row:1;
    padding-right:36px; margin-bottom:16px;
  }
  .bon__shot{
    grid-row:2 / span 2;
    width:88px; height:88px; border-radius:18px;
  }

  .cats ul{ grid-template-columns:1fr; gap:12px; }

  /* stop long addresses and emails forcing a wide line */
  .crow p, .crow address, .foot__brand p:not(.eyebrow){ overflow-wrap:anywhere; }

  .fqcta, .social__also{ flex-direction:column; align-items:flex-start; }
  .fqcta .btn{ width:100%; justify-content:center; }

  /* iOS Safari zooms the whole page in when a focused field is under 16px */
  .news__form input{ font-size:16px; }
}

@media (max-width: 360px){
  /* the fanned photos are wider than the narrowest phones, so the outer two
     get shaved by the hero's clip - pull them back over the centre card */
  .fan__card--2{ transform:rotate(-9deg) translate(-26%, 3%); }
  .fan__card--3{ transform:rotate(10deg) translate(24%, -6%); }

  /* the longest collection name still needs a little more room to stay on
     one line once the card has given it the full width */
  .bon{ padding:16px; }
  .bon__tags{ padding-right:32px; }
  .bon__tags li{ letter-spacing:.06em; padding:5px 10px; }
}

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