/* nude&shy global stylesheet
   minimal editorial — black/white + warm sun-kissed accent
*/

@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&family=Tenor+Sans&family=Big+Shoulders+Stencil+Display:wght@400;600;800&family=DM+Mono:wght@300;400;500&display=swap');

:root{
  --bg: #f6f3ee;       /* off-white, warm */
  --bg-2: #efeae2;     /* warmer card */
  --ink: #14110d;      /* near-black, warm */
  --ink-2: #2a2520;
  --muted: #7a7268;
  --line: rgba(20,17,13,.14);
  --line-2: rgba(20,17,13,.06);
  --accent: #d4a574;   /* sun-kissed (default, tweakable) */
  --accent-ink: #14110d;
  --shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 20px 60px rgba(20,17,13,.08);

  --serif: "Tenor Sans", "Times New Roman", serif;
  --sans: "Arimo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --stencil: "Big Shoulders Stencil Display", "Tenor Sans", serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* dark mode swap */
.theme-dark{
  --bg: #0e0c0a;
  --bg-2: #181410;
  --ink: #f4efe7;
  --ink-2: #d7cfc1;
  --muted: #948a7d;
  --line: rgba(244,239,231,.16);
  --line-2: rgba(244,239,231,.06);
  --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 20px 60px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","ss02","ss03","cv11";
  overflow-x:hidden;
}

img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

::selection{background:var(--ink);color:var(--bg)}

/* ── typography ──────────────────────────────────────── */
.h-display{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:.88;
  font-size:clamp(56px, 11vw, 168px);
  text-transform:lowercase;
}
.h-xl{font-family:var(--serif);font-size:clamp(40px,6vw,84px);letter-spacing:-.01em;line-height:.95;font-weight:400;text-transform:lowercase}
.h-lg{font-family:var(--serif);font-size:clamp(32px,4vw,56px);letter-spacing:-.01em;line-height:1;font-weight:400}
.h-md{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);letter-spacing:-.005em;line-height:1.1;font-weight:400}
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em}

/* ── layout helpers ──────────────────────────────────── */
.container{width:100%;max-width:1480px;margin:0 auto;padding:0 28px}
.section{padding:96px 0;position:relative}
.section-tight{padding:48px 0}
.divider{height:1px;background:var(--line);width:100%}
.divider-fade{height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}

/* ── nav ─────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-2);
  transition:padding .25s ease, background .25s ease;
}
.nav-links{display:flex;gap:28px}
.nav-link{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.78;transition:opacity .2s}
.nav-link:hover{opacity:1}
.nav-logo{display:flex;align-items:center;line-height:1}
.nav-logo img{height:22px;width:auto;display:block}
.nav-right{display:flex;gap:18px;align-items:center}
.cart-btn{
  display:flex;gap:8px;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;cursor:pointer;transition:all .2s;
}
.cart-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:600;font-family:var(--sans)}

/* ── hero ────────────────────────────────────────────── */
.hero{position:relative;padding:120px 0 60px;overflow:hidden}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;flex-wrap:wrap;gap:18px}
.hero-meta .tag{display:flex;gap:10px;align-items:center}
.hero-dot{width:8px;height:8px;border-radius:999px;background:var(--accent);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

.wordmark{
  display:block;
  width:min(100%, 1400px);
  margin:0 0 8px;
  position:relative;
  user-select:none;
}
.wordmark img{
  width:100%;height:auto;display:block;
  /* aspect ratio of logo png ≈ 5.4 : 1 */
}
.theme-dark .wordmark img{filter:invert(1) hue-rotate(180deg)}
.theme-dark .nav-logo img{filter:invert(1) hue-rotate(180deg)}

.hero-foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;margin-top:48px;align-items:end}
.hero-foot .lede{font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.25;letter-spacing:-.005em;max-width:48ch;color:var(--ink)}
.hero-foot .col{display:flex;flex-direction:column;gap:8px}
.hero-foot .col h6{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400}
.hero-foot .col p{margin:0;font-size:14px;color:var(--ink-2)}

.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ── sun ─────────────────────────────────────────────── */
.sun{
  position:absolute;
  width:min(80vw, 720px);height:min(80vw, 720px);
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, var(--accent) 0%, color-mix(in oklab, var(--accent) 50%, transparent) 55%, transparent 72%);
  filter:blur(2px);
  pointer-events:none;
  z-index:-1;
}

/* ── marquee ─────────────────────────────────────────── */
.marquee{
  width:100%;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;
  background:var(--bg);
}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marq 38s linear infinite}
.marquee.fast .marquee-track{animation-duration:22s}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{font-family:var(--stencil);font-weight:400;font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;gap:48px;white-space:nowrap}
.marquee-item .star{color:var(--accent);font-style:normal;font-size:.7em;font-family:var(--serif)}
.marquee.inv{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.marquee.inv .marquee-item .star{color:var(--accent)}

/* ── button ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-radius:999px;border:1px solid var(--ink);cursor:pointer;
  background:var(--ink);color:var(--bg);transition:all .25s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.tiny{padding:9px 14px;font-size:10px;letter-spacing:.14em}
.btn.huge{padding:18px 28px;font-size:12px}
.btn.icon{padding:14px 16px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── story ───────────────────────────────────────────── */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (max-width:880px){.story-grid{grid-template-columns:1fr}}
.story-lede{font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.01em}
.story-lede em{color:var(--accent);font-style:italic}
.story-body{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:48ch}
.story-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.story-stat .num{font-family:var(--serif);font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.02em}
.story-stat .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ── product grid ────────────────────────────────────── */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px;flex-wrap:wrap}
.section-head .left h2{margin:0;font-family:var(--serif);font-size:clamp(40px,6vw,88px);line-height:.95;letter-spacing:-.02em;text-transform:lowercase;font-weight:400}
.section-head .left h2 em{color:var(--accent);font-style:italic}
.section-head .left p{margin:14px 0 0;color:var(--ink-2);max-width:40ch;font-size:15px}
.section-head .right{display:flex;gap:8px;align-items:center}

.skin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1080px){.skin-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.skin-grid{grid-template-columns:1fr}}

.beach-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;grid-auto-flow:dense}
@media (max-width:880px){.beach-grid{grid-template-columns:repeat(2,1fr)}}

/* product card */
.pcard{
  position:relative;
  background:var(--bg-2);
  border-radius:8px;
  overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--line-2);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pcard .media{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--bg-2)}
.pcard .media.tall{aspect-ratio:3/4.5}
.pcard .media.wide{aspect-ratio:4/3}
.pcard .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg, var(--bg-2), var(--bg-2) 8px, color-mix(in oklab, var(--bg-2) 88%, var(--ink)) 8px, color-mix(in oklab, var(--bg-2) 88%, var(--ink)) 16px);
  color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:24px;line-height:1.5}
.pcard .placeholder.tonal{background:linear-gradient(160deg, color-mix(in oklab, var(--accent) 28%, var(--bg-2)) 0%, var(--bg-2) 100%)}
.pcard .placeholder.tonal-dark{background:linear-gradient(160deg, color-mix(in oklab, var(--ink) 60%, var(--bg-2)) 0%, color-mix(in oklab, var(--ink) 90%, var(--bg-2)) 100%); color:color-mix(in oklab, var(--bg) 80%, transparent)}
.pcard .placeholder em{font-style:normal;display:block;font-family:var(--serif);font-size:18px;letter-spacing:-.005em;text-transform:none;color:var(--ink);margin-bottom:8px}
.pcard .placeholder.tonal-dark em{color:var(--bg)}
.pcard .badge{position:absolute;top:12px;left:12px;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border-radius:999px;z-index:2}
.pcard .badge.accent{background:var(--accent);color:var(--accent-ink)}
.pcard .quick{
  position:absolute;left:12px;right:12px;bottom:12px;
  display:flex;gap:8px;
  opacity:0;transform:translateY(8px);transition:all .3s ease;
}
.pcard:hover .quick{opacity:1;transform:translateY(0)}
.pcard .info{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.pcard .info .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pcard .info .name{font-family:var(--serif);font-size:18px;letter-spacing:-.005em;line-height:1.1}
.pcard .info .price{font-family:var(--mono);font-size:12px;letter-spacing:.04em;white-space:nowrap}
.pcard .info .sub{font-size:12.5px;color:var(--muted);line-height:1.4}
.pcard .swatches{display:flex;gap:5px;margin-top:6px}
.swatch{width:14px;height:14px;border-radius:999px;border:1px solid var(--line);cursor:pointer;background:#000}
.swatch:hover{transform:scale(1.15)}

/* skin product specific */
.pcard.skin .media{aspect-ratio:1/1.15}
.pcard.skin .placeholder{font-size:11px}
.pcard.skin .spf{position:absolute;right:12px;top:12px;font-family:var(--serif);font-size:22px;color:var(--ink);background:var(--bg);padding:6px 10px;border-radius:999px;border:1px solid var(--line);line-height:1;font-style:italic}

/* beach grid spans */
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
@media (max-width:880px){.span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 1}}

/* ── bundles ─────────────────────────────────────────── */
.bundles{background:var(--ink);color:var(--bg);position:relative;overflow:hidden}
.bundles .eyebrow,.bundles .h-xl em,.bundles .section-head .left h2 em{color:var(--accent)}
.bundles .section-head .left p{color:color-mix(in oklab, var(--bg) 70%, transparent)}
.bundles .section-head .right .btn.ghost{color:var(--bg);border-color:var(--bg)}
.bundles .section-head .right .btn.ghost:hover{background:var(--bg);color:var(--ink)}
.bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1080px){.bundle-grid{grid-template-columns:1fr}}
.bcard{
  position:relative;border:1px solid color-mix(in oklab, var(--bg) 20%, transparent);
  border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:18px;
  background:color-mix(in oklab, var(--bg) 4%, transparent);
  transition:all .3s ease;cursor:pointer;
}
.bcard:hover{background:color-mix(in oklab, var(--bg) 8%, transparent);border-color:var(--accent)}
.bcard.featured{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bcard h3{margin:0;font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:-.01em;font-weight:400;text-transform:lowercase}
.bcard .b-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.bcard .b-items{display:flex;flex-direction:column;gap:6px;font-size:14px;list-style:none;padding:0;margin:0}
.bcard .b-items li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed color-mix(in oklab, currentColor 22%, transparent)}
.bcard .b-items li:first-child{border-top:0}
.bcard .b-items li span:last-child{font-family:var(--mono);font-size:12px;opacity:.55;text-decoration:line-through}
.bcard .b-foot{display:flex;align-items:end;justify-content:space-between;margin-top:auto;padding-top:18px;border-top:1px solid color-mix(in oklab, currentColor 18%, transparent)}
.bcard .b-foot .pricing{display:flex;flex-direction:column;gap:2px}
.bcard .b-foot .pricing .was{font-family:var(--mono);font-size:11px;opacity:.55;text-decoration:line-through}
.bcard .b-foot .pricing .now{font-family:var(--serif);font-size:32px;line-height:1}
.bcard .b-foot .save{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--bg)}
.bcard.featured .b-foot .save{background:var(--ink);color:var(--accent)}

/* build-your-own */
.byo{margin-top:64px;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
@media (max-width:1080px){.byo{grid-template-columns:1fr}}
.byo h3{margin:0 0 4px;font-family:var(--serif);font-size:clamp(28px,3.5vw,44px);line-height:1;letter-spacing:-.01em;font-weight:400;text-transform:lowercase}
.byo h3 em{color:var(--accent);font-style:italic}
.byo .byo-sub{color:color-mix(in oklab, var(--bg) 65%, transparent);font-size:14px;margin-bottom:24px}
.byo-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:680px){.byo-picker{grid-template-columns:repeat(2,1fr)}}
.byo-item{
  position:relative;border:1px solid color-mix(in oklab, var(--bg) 18%, transparent);
  border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:4px;cursor:pointer;
  transition:all .2s ease;background:color-mix(in oklab, var(--bg) 3%, transparent);
}
.byo-item:hover{border-color:color-mix(in oklab, var(--bg) 40%, transparent)}
.byo-item.on{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 14%, transparent)}
.byo-item .check{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:999px;border:1px solid color-mix(in oklab, var(--bg) 30%, transparent);display:flex;align-items:center;justify-content:center;font-size:11px}
.byo-item.on .check{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.byo-item .nm{font-family:var(--serif);font-size:16px;line-height:1.1;padding-right:24px}
.byo-item .ct{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:4px}
.byo-item .pr{font-family:var(--mono);font-size:12px;opacity:.8;margin-top:4px}

.byo-summary{
  background:var(--bg);color:var(--ink);border-radius:10px;padding:24px;
  position:sticky;top:88px;
  border:1px solid var(--line);
}
.byo-summary h4{margin:0 0 4px;font-family:var(--serif);font-size:26px;line-height:1;font-weight:400;text-transform:lowercase}
.byo-summary .sum-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-top:1px dashed var(--line)}
.byo-summary .sum-row:first-of-type{border-top:0}
.byo-summary .sum-row .lbl{font-size:14px}
.byo-summary .sum-row .val{font-family:var(--mono);font-size:13px}
.byo-summary .sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 4px;border-top:1px solid var(--ink);margin-top:8px}
.byo-summary .sum-total .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.byo-summary .sum-total .val{font-family:var(--serif);font-size:36px;line-height:1}
.byo-summary .save-badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:5px 10px;border-radius:999px;margin-top:6px}

/* ── lookbook ────────────────────────────────────────── */
.lookbook{padding:96px 0 96px}
.look-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,minmax(280px,38vh));gap:14px;margin-top:32px}
@media (max-width:880px){.look-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}}
.look-cell{border-radius:6px;overflow:hidden;position:relative}
.look-cell .placeholder{position:absolute;inset:0}
.look-cell .cap{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bg);background:color-mix(in oklab, var(--ink) 70%, transparent);padding:5px 8px;border-radius:999px;backdrop-filter:blur(8px)}
.look-cell.l-1{grid-column:span 2;grid-row:span 2}
.look-cell.l-2{grid-column:span 2}
.look-cell.l-3{grid-column:span 2}
.look-cell.l-4{grid-column:span 3}
.look-cell.l-5{grid-column:span 3}
@media (max-width:880px){.look-cell.l-1,.look-cell.l-2,.look-cell.l-3,.look-cell.l-4,.look-cell.l-5{grid-column:span 2;grid-row:auto;aspect-ratio:4/5}}

/* ── ritual ──────────────────────────────────────────── */
.ritual{background:var(--bg-2)}
.ritual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:24px}
@media (max-width:880px){.ritual-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ritual-grid{grid-template-columns:1fr}}
.ritual-step .num{font-family:var(--serif);font-size:clamp(60px,7vw,96px);line-height:1;color:var(--accent);font-style:italic}
.ritual-step h4{margin:14px 0 6px;font-family:var(--serif);font-size:24px;line-height:1.1;letter-spacing:-.005em;font-weight:400}
.ritual-step p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55}
.ritual-step .badge{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ── newsletter ──────────────────────────────────────── */
.news{padding:120px 0;text-align:center;position:relative;overflow:hidden}
.news .sun{left:50%;top:50%;transform:translate(-50%,-50%);opacity:.5}
.news h2{font-family:var(--serif);font-size:clamp(40px,7vw,108px);line-height:.95;letter-spacing:-.02em;font-weight:400;text-transform:lowercase;margin:0}
.news h2 em{font-style:italic;color:var(--accent)}
.news .sub{font-family:var(--serif);font-size:clamp(18px,1.8vw,24px);max-width:46ch;margin:20px auto 32px;color:var(--ink-2)}
.news-form{display:flex;gap:8px;max-width:480px;margin:0 auto;padding:6px;background:var(--bg);border:1px solid var(--ink);border-radius:999px}
.news-form input{flex:1;background:transparent;border:0;padding:12px 18px;font:inherit;color:var(--ink);outline:none}
.news-form input::placeholder{color:var(--muted)}

/* ── footer ──────────────────────────────────────────── */
.footer{background:var(--ink);color:var(--bg);padding:80px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
.footer h5{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in oklab, var(--bg) 60%, transparent);font-weight:400}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer ul a{font-size:14px;color:color-mix(in oklab, var(--bg) 90%, transparent)}
.footer ul a:hover{color:var(--accent)}
.footer .foot-logo{line-height:1;margin-bottom:14px}
.footer-bot{margin-top:64px;padding-top:24px;border-top:1px solid color-mix(in oklab, var(--bg) 20%, transparent);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-bot,.footer-bot a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:color-mix(in oklab, var(--bg) 60%, transparent)}

/* ── cart drawer ─────────────────────────────────────── */
.cart-overlay{position:fixed;inset:0;background:rgba(20,17,13,.5);z-index:998;opacity:0;pointer-events:none;transition:opacity .3s ease}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px, 100vw);
  background:var(--bg);z-index:999;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;border-left:1px solid var(--line);
}
.cart-drawer.open{transform:translateX(0)}
.cart-hd{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.cart-hd h3{margin:0;font-family:var(--serif);font-size:26px;line-height:1;font-weight:400;text-transform:lowercase}
.cart-hd .x{background:transparent;border:0;font-size:24px;cursor:pointer;color:var(--ink);width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.cart-hd .x:hover{background:var(--line-2)}
.cart-items{flex:1;overflow-y:auto;padding:8px 24px}
.cart-empty{padding:48px 24px;text-align:center;color:var(--muted);font-family:var(--serif);font-size:22px;line-height:1.2}
.cart-empty p{margin:0 0 18px}
.cart-row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px dashed var(--line);align-items:start}
.cart-row .ph{width:64px;height:80px;border-radius:5px;background:repeating-linear-gradient(135deg,var(--bg-2),var(--bg-2) 5px,color-mix(in oklab, var(--bg-2) 86%, var(--ink)) 5px,color-mix(in oklab, var(--bg-2) 86%, var(--ink)) 10px)}
.cart-row .ph.tonal{background:linear-gradient(160deg, color-mix(in oklab, var(--accent) 35%, var(--bg-2)) 0%, var(--bg-2) 100%)}
.cart-row .ph.dark{background:linear-gradient(160deg, color-mix(in oklab, var(--ink) 60%, var(--bg-2)) 0%, color-mix(in oklab, var(--ink) 90%, var(--bg-2)) 100%)}
.cart-row .meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.cart-row .meta .nm{font-family:var(--serif);font-size:16px;line-height:1.1;letter-spacing:-.005em}
.cart-row .meta .opt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cart-row .qty{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;width:max-content;margin-top:4px}
.cart-row .qty button{width:24px;height:24px;border:0;background:transparent;cursor:pointer;font-size:13px;color:var(--ink-2)}
.cart-row .qty button:hover{color:var(--ink)}
.cart-row .qty span{padding:0 6px;font-family:var(--mono);font-size:11px;min-width:18px;text-align:center}
.cart-row .right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cart-row .right .pr{font-family:var(--mono);font-size:13px}
.cart-row .right .rm{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:transparent;border:0;cursor:pointer;text-decoration:underline}
.cart-row .right .rm:hover{color:var(--ink)}
.cart-foot{padding:20px 24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;background:var(--bg-2)}
.cart-foot .row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-2)}
.cart-foot .total{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;border-top:1px solid var(--line)}
.cart-foot .total .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.cart-foot .total .val{font-family:var(--serif);font-size:34px;line-height:1}
.cart-foot .ship{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);z-index:1100;background:var(--ink);color:var(--bg);padding:14px 22px;border-radius:999px;display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 20px 40px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.7,0,.2,1)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast .dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}

/* ── responsive tweaks ───────────────────────────────── */
@media (max-width:880px){
  .section{padding:72px 0}
  .nav-links{display:none}
  .hero-foot{grid-template-columns:1fr}
  .nav{padding:12px 18px}
  .container{padding:0 18px}
}

/* hide tweaks on print etc */
@media print{.twk-panel,.cart-drawer,.cart-overlay,.nav{display:none}}