/* Marée Home — shared stylesheet for the non-scroll-world pages.
   Tokens are lifted from the live Marée theme so these pages and the
   scroll-world homepage read as one site. */
:root{
  --ink:#2C2A28;
  --ink-2:#393734;
  --cream:#F7F4EF;
  --cream-2:#FAF7F2;
  --clay:#B9AB99;
  --sand:#E8DED3;
  --sand-2:#D4C8BB;
  --taupe:#A4927B;
  --blush:#E6C7C2;
  /* the brand taupe is a background tone; this darker sibling is the text tone
     (taupe on cream lands under 4.5:1) */
  --taupe-ink:#6E5D48;

  --display:'Cormorant', Georgia, 'Times New Roman', serif;
  --body:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter:clamp(1.25rem, 5vw, 5rem);
  --measure:38rem;
  --section:clamp(4rem, 8vw, 9rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.72;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
/* Scoped away from the scroll engine: a bare `a{color:inherit}` was winning
   over the engine's own button colour on the homepage and rendering every
   "Shop" CTA as ink-on-ink, i.e. an unreadable blank pill. */
a:not([class*="sw-"]){color:inherit;}

h1,h2,h3,.display{font-family:var(--display);font-weight:600;letter-spacing:.02em;line-height:1.1;margin:0;}
h1{font-size:clamp(2.4rem,1.2rem + 4.4vw,4.6rem);}
h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);}
h3{font-size:clamp(1.25rem,1rem + 1vw,1.7rem);}
p{margin:0 0 1.15em;}
.lede{font-size:clamp(1.12rem,1rem + .5vw,1.4rem);line-height:1.62;color:var(--ink-2);}

.eyebrow{
  font-family:var(--body);font-weight:500;text-transform:uppercase;
  letter-spacing:.25em;font-size:.7rem;color:var(--taupe-ink);margin:0 0 1rem;
}
.wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--gutter);}
.narrow{max-width:var(--measure);}
section{padding-block:var(--section);}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--sand-2) 60%,transparent);
}
.site-head .bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem var(--gutter);max-width:74rem;margin-inline:auto;
}
/* Stacked two-part wordmark, matching the lockup on her own storefront:
   "Marée" as the mark, "Home" set small and letterspaced beneath it. */
.brand{
  display:inline-flex;flex-direction:column;align-items:center;
  text-decoration:none;line-height:1;gap:.22em;
}
.brand__mark{
  font-family:var(--display);font-weight:600;font-size:1.45rem;
  letter-spacing:.06em;color:var(--ink);
}
.brand__sub{
  font-family:var(--body);font-weight:500;font-size:.54rem;
  text-transform:uppercase;letter-spacing:.42em;
  /* the tracking adds a trailing gap on the right; pull it back so the two
     lines optically centre on each other */
  text-indent:.42em;color:var(--taupe-ink);
}
.brand:hover .brand__mark,.brand:focus-visible .brand__mark{color:var(--taupe-ink);}
.brand__mark,.brand__sub{transition:color .25s ease;}
.site-nav{display:flex;gap:clamp(.9rem,2.5vw,2rem);align-items:center;flex-wrap:wrap;}
.site-nav a{
  text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--taupe-ink);padding:.35rem 0;position:relative;transition:color .25s ease;
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--taupe);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s ease;
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--ink);}
.site-nav a:hover::after,.site-nav a:focus-visible::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1);}
.site-nav a[aria-current="page"]{color:var(--ink);}

/* At phone width the four nav items cannot share a row with the wordmark:
   CONTACT orphans onto a second line. Stack the bar and let the nav centre
   under the mark as one row. */
@media (max-width:40rem){
  .site-head .bar{flex-direction:column;gap:.7rem;padding-block:.8rem;}
  .brand__mark{font-size:1.3rem;}
  .site-nav{gap:1.15rem;justify-content:center;flex-wrap:nowrap;}
  .site-nav a{font-size:.68rem;letter-spacing:.1em;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--body);font-size:.78rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;
  padding:.95rem 1.9rem;border:1px solid var(--ink);background:var(--ink);color:var(--cream);
  transition:background .28s ease,color .28s ease,transform .28s ease;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--ink);transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--taupe) 70%,transparent);}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--ink);background:var(--ink);color:var(--cream);}
:where(a,button,input,textarea,summary):focus-visible{outline:2px solid var(--taupe-ink);outline-offset:3px;}

/* ---------- page hero ---------- */
.page-hero{padding-block:clamp(3rem,7vw,6.5rem) clamp(2rem,4vw,3.5rem);}
.page-hero h1{margin-bottom:.6rem;}
.page-hero .lede{max-width:34rem;}

/* ---------- product grid ---------- */
/* auto-fit fitted only 3 of the 4 SKUs at 1440px, dropping the Gift Set onto a
   row of its own beside a ~700x580 void. With a four-product range, 2-up is the
   premium read and takes the card image from 315px to ~496px. */
.grid{display:grid;gap:clamp(1.5rem,3.5vw,3rem);grid-template-columns:1fr;}
@media (min-width:38rem){.grid{grid-template-columns:repeat(2,1fr);}}
/* the PDP rail stays 3-up so "Other candles" keeps its smaller proportion */
@media (min-width:52rem){.related .grid{grid-template-columns:repeat(3,1fr);}}
.card{display:flex;flex-direction:column;text-decoration:none;group:card;}
.card .shot{
  background:var(--cream-2);border:1px solid color-mix(in srgb,var(--sand-2) 55%,transparent);
  aspect-ratio:4/5;overflow:hidden;display:grid;place-items:center;
}
.card .shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.card:hover .shot img,.card:focus-visible .shot img{transform:scale(1.045);}
.card h3{margin:1.05rem 0 .3rem;font-size:1.3rem;}
.card .price{font-size:.9rem;color:var(--taupe-ink);letter-spacing:.04em;}
.card .blurb{font-size:.95rem;color:var(--ink-2);margin-top:.5rem;}

/* ---------- product detail ---------- */
.pdp{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr;align-items:start;}
@media (min-width:56rem){.pdp{grid-template-columns:1.05fr .95fr;}}
.pdp .gallery{display:grid;gap:1rem;}
.pdp .gallery img{
  width:100%;background:var(--cream-2);
  border:1px solid color-mix(in srgb,var(--sand-2) 55%,transparent);
}
.pdp .price-row{display:flex;align-items:baseline;gap:1rem;margin:.4rem 0 1.4rem;}
.pdp .price{font-size:1.35rem;font-family:var(--display);font-weight:600;}
.pdp .stock{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--taupe-ink);}
.spec{list-style:none;margin:2rem 0 0;padding:1.5rem 0 0;border-top:1px solid color-mix(in srgb,var(--sand-2) 70%,transparent);}
/* space-between stretched each label/value pair across the whole column: at
   390px "Wick" and "Wooden" sat 267px apart and stopped reading as a pair. */
.spec li{display:grid;grid-template-columns:8.5rem 1fr;gap:1.5rem;padding:.5rem 0;font-size:.92rem;}
@media (max-width:40rem){.spec li{grid-template-columns:7rem 1fr;gap:1rem;}}
.spec li span:first-child{color:var(--taupe-ink);}
.buy{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.6rem;}
/* at 390px the purchase button was 172px in a 350px column, under half the
   width on the device most of her traffic will arrive from */
@media (max-width:40rem){
  .buy{display:grid;gap:.85rem;}
  .buy .btn{width:100%;text-align:center;}
}
.buy-note{font-size:.8rem;color:var(--taupe-ink);margin-top:1rem;}

/* ---------- editorial / story ---------- */
.story p{max-width:var(--measure);}

/* The founder essay is 14 paragraphs. Left-aligned inside the 74rem wrap it
   left half the page empty and read as a wall of text, so the column is
   centred and broken once with a full-measure image. */
.essay{max-width:calc(var(--measure) + 2 * var(--gutter));margin-inline:auto;}
.essay h2,.essay .eyebrow{text-align:center;}
.essay-break{margin:3rem 0;}
.essay-break img{width:100%;}
.pull{
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(1.4rem,1rem + 1.8vw,2.3rem);line-height:1.34;
  max-width:30rem;margin:0;color:var(--ink);
}
.pull cite{display:block;font-family:var(--body);font-style:normal;font-weight:400;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.22em;color:var(--taupe-ink);margin-top:1.4rem;}
.quote-band{background:var(--sand);}
/* centring two text columns of unequal height pushed their headings 9px out of
   alignment on /contact/. Only centre when one side is an image. */
.split{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:start;}
.split:has(img){align-items:center;}
@media (min-width:52rem){.split{grid-template-columns:1fr 1fr;}}
.split.reverse>:first-child{order:2;}
@media (max-width:51.99rem){.split.reverse>:first-child{order:0;}}
.signature{font-family:var(--display);font-size:1.5rem;font-style:italic;margin-top:1.5rem;}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--sand-2);}
.timeline li{position:relative;padding:0 0 2.4rem 2rem;}
.timeline li::before{
  content:"";position:absolute;left:-4.5px;top:.55rem;width:8px;height:8px;
  border-radius:50%;background:var(--taupe);
}
.timeline .when{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--taupe-ink);}
.timeline .where{font-family:var(--display);font-size:1.35rem;font-weight:600;margin:.3rem 0 .4rem;}
.timeline p{margin:0;font-size:.97rem;color:var(--ink-2);max-width:32rem;}

/* value cards */
.values{display:grid;gap:clamp(1.25rem,3vw,2.25rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.value{background:var(--cream-2);border:1px solid color-mix(in srgb,var(--sand-2) 55%,transparent);padding:1.75rem 1.5rem;}
.value h3{font-size:1.15rem;margin-bottom:.5rem;}
.value p{margin:0;font-size:.93rem;color:var(--ink-2);}

/* ---------- care / faq ---------- */
.care{list-style:none;margin:0;padding:0;}
.care li{padding:.65rem 0 .65rem 1.6rem;position:relative;border-bottom:1px solid color-mix(in srgb,var(--sand-2) 45%,transparent);}
.care li::before{content:"";position:absolute;left:0;top:1.35rem;width:.5rem;height:1px;background:var(--taupe);}
details{border-bottom:1px solid color-mix(in srgb,var(--sand-2) 60%,transparent);padding:1.1rem 0;}
details summary{
  cursor:pointer;list-style:none;font-family:var(--display);font-size:1.2rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  /* the row spanned 736px, parking the "+" 491px from its own question */
  max-width:var(--measure);
}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+";font-family:var(--body);font-weight:300;font-size:1.4rem;color:var(--taupe-ink);transition:transform .3s ease;}
details[open] summary::after{transform:rotate(45deg);}
details .answer{padding-top:.8rem;color:var(--ink-2);max-width:var(--measure);}

/* ---------- form ---------- */
.form{display:grid;gap:1.1rem;max-width:34rem;}
.field{display:grid;gap:.4rem;}
.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--taupe-ink);}
.field input,.field textarea{
  font-family:var(--body);font-size:1rem;font-weight:300;color:var(--ink);
  background:var(--cream-2);border:1px solid var(--sand-2);padding:.8rem .9rem;
  transition:border-color .25s ease;
}
.field input:focus,.field textarea:focus{border-color:var(--taupe-ink);outline:none;}
.field textarea{min-height:8rem;resize:vertical;}

/* ---------- policy prose ---------- */
.policy{max-width:46rem;}
.policy h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin:2.4rem 0 .8rem;}
.policy h3{font-size:1.2rem;margin:1.8rem 0 .6rem;}
.policy ul,.policy ol{padding-left:1.2rem;}
.policy li{margin-bottom:.5rem;}
.policy table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem;}
.policy th,.policy td{border:1px solid var(--sand-2);padding:.6rem .7rem;text-align:left;vertical-align:top;}
.policy-scroll{overflow-x:auto;}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--cream);padding-block:clamp(3rem,6vw,5rem) 2rem;margin-top:var(--section);}
.site-foot .cols{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));}
.site-foot h4{
  font-family:var(--body);font-size:.72rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;color:var(--sand-2);margin:0 0 1rem;
}
/* footer links measured 22px tall at 8.8px row-gap, under the 24x24 floor of
   WCAG 2.2 SC 2.5.8 with no spacing exception to rescue them */
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;}
.site-foot li a{display:inline-block;padding-block:.35rem;}
.site-foot a{color:color-mix(in srgb,var(--cream) 82%,transparent);text-decoration:none;font-size:.92rem;transition:color .25s ease;}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--cream);}
.site-foot .mark{display:flex;flex-direction:column;gap:.3em;line-height:1;margin:0 0 1.1rem;}
.site-foot .mark__name{font-family:var(--display);font-weight:600;font-size:1.9rem;letter-spacing:.06em;}
.site-foot .mark__sub{
  font-family:var(--body);font-weight:500;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.42em;text-indent:.42em;color:var(--sand-2);
}
.site-foot .tagline{font-size:.93rem;color:color-mix(in srgb,var(--cream) 70%,transparent);max-width:20rem;}
.site-foot .fine{
  margin-top:3rem;padding-top:1.5rem;font-size:.78rem;
  border-top:1px solid color-mix(in srgb,var(--cream) 18%,transparent);
  color:color-mix(in srgb,var(--cream) 60%,transparent);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--gutter);top:.5rem;z-index:100;background:var(--ink);color:var(--cream);padding:.6rem 1rem;}

/* Visually hidden but available to screen readers and crawlers. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}