/* ============================================================
   PortRx — BUTTYR™  |  Shared design system
   Warm editorial · cream-dominant · herbal green + bronze gold
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* surfaces — warm cream family */
  --cream:        oklch(0.962 0.014 82);   /* page bg */
  --cream-2:      oklch(0.945 0.018 80);   /* alt section */
  --cream-3:      oklch(0.925 0.022 78);   /* deeper sand */
  --ivory:        oklch(0.985 0.008 86);   /* cards / paper */

  /* greens — herbal forest */
  --green:        oklch(0.345 0.038 152);  /* primary deep green */
  --green-deep:   oklch(0.285 0.034 154);  /* darkest */
  --green-soft:   oklch(0.55  0.045 150);  /* muted sage for accents */
  --green-tint:   oklch(0.90  0.030 150);  /* pale green wash */

  /* bronze / gold */
  --bronze:       oklch(0.640 0.072 66);   /* metallic accent */
  --bronze-deep:  oklch(0.560 0.070 60);
  --bronze-soft:  oklch(0.82  0.045 72);

  /* ink / text */
  --ink:          oklch(0.275 0.018 80);   /* warm near-black */
  --ink-2:        oklch(0.405 0.016 78);   /* secondary text */
  --ink-3:        oklch(0.560 0.014 78);   /* muted / captions */
  --line:         oklch(0.875 0.018 80);   /* hairlines on cream */
  --line-green:   oklch(0.45 0.03 152 / 0.22);

  /* radii + shadow */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 34px;  --r-pill: 999px;
  --shadow-sm: 0 1px 2px oklch(0.3 0.02 80 / .05), 0 4px 14px oklch(0.3 0.03 80 / .06);
  --shadow-md: 0 2px 6px oklch(0.3 0.02 80 / .06), 0 18px 40px oklch(0.3 0.03 80 / .10);
  --shadow-lg: 0 8px 22px oklch(0.3 0.02 80 / .08), 0 40px 80px oklch(0.3 0.03 80 / .14);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --serif: 'Cormorant', 'Georgia', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', ui-monospace, monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--bronze-soft); color:var(--green-deep); }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.01em; margin:0; color:var(--ink); }
.display{ font-size:clamp(3rem, 7.2vw, 6.4rem); font-weight:500; line-height:.98; letter-spacing:-.02em; }
.h1{ font-size:clamp(2.5rem, 5vw, 4.3rem); }
.h2{ font-size:clamp(2rem, 3.8vw, 3.3rem); }
.h3{ font-size:clamp(1.5rem, 2.4vw, 2.1rem); }
.serif-italic{ font-style:italic; }
p{ margin:0 0 1em; }
.lede{ font-size:clamp(1.12rem, 1.6vw, 1.4rem); line-height:1.5; color:var(--ink-2); font-weight:400; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze-deep);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--bronze); display:inline-block; }
.eyebrow.center::after{ content:""; width:24px; height:1px; background:var(--bronze); display:inline-block; }
.eyebrow.center{ justify-content:center; }

.muted{ color:var(--ink-3); }
.tm{ font-size:.5em; vertical-align:super; font-family:var(--sans); letter-spacing:0; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px, 10vw, 144px); }
.section-tight{ padding-block:clamp(48px, 6vw, 88px); }
.bg-cream-2{ background:var(--cream-2); }
.bg-cream-3{ background:var(--cream-3); }
.bg-green{ background:var(--green); color:var(--cream); }
.bg-green .eyebrow{ color:var(--bronze-soft); }
.bg-green .eyebrow::before,.bg-green .eyebrow.center::after{ background:var(--bronze-soft); }
.bg-green h1,.bg-green h2,.bg-green h3,.bg-green h4{ color:var(--cream); }
.bg-green .lede,.bg-green p{ color:oklch(0.88 0.02 84); }
.center-col{ max-width:780px; margin-inline:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--green); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-weight:600; font-size:.94rem; letter-spacing:.01em;
  padding:.95em 1.7em; border:1px solid transparent; border-radius:var(--r-pill);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s, color .25s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn .arrow{ transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-bronze{ --bg:var(--bronze); --fg:var(--ink); }
.btn-bronze:hover{ --bg:var(--bronze-deep); --fg:var(--cream); }
.btn-ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--ivory); border-color:var(--ink-3); }
.btn-on-green{ --bg:var(--cream); --fg:var(--green-deep); }
.btn-on-green:hover{ --bg:var(--bronze-soft); }
.btn-lg{ padding:1.1em 2.1em; font-size:1rem; }
.btn-block{ width:100%; }

.link-underline{ position:relative; font-weight:600; color:var(--green); }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(.4); transform-origin:left; opacity:.5; transition:transform .3s, opacity .3s; }
.link-underline:hover::after{ transform:scaleX(1); opacity:1; }

/* ---------- Pills / tags ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green); background:var(--green-tint);
  padding:.5em .9em; border-radius:var(--r-pill); border:1px solid var(--line-green);
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--bronze); }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  padding-block:14px;
  transition:background .35s, box-shadow .35s, padding .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:oklch(0.962 0.014 82 / .82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line);
  padding-block:9px;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:baseline; gap:.08em; font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:.04em; color:var(--ink); }
.brand .rx{ font-family:var(--mono); font-size:.62rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-deep); transform:translateY(-.7em); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:.92rem; font-weight:500; color:var(--ink-2); transition:color .2s; position:relative; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:0; }
@media (max-width: 920px){
  .nav-links{ display:none; }
}

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Image slots ---------- */
image-slot{
  --is-bg: linear-gradient(135deg, oklch(0.93 0.02 80), oklch(0.965 0.012 84));
  background:var(--is-bg);
  display:block;
}
.slot-striped{
  background-image:
    repeating-linear-gradient(135deg, oklch(0.88 0.025 80) 0 1px, transparent 1px 11px);
  border:1px solid var(--line);
}

/* ---------- Footer ---------- */
.footer{ background:var(--green-deep); color:oklch(0.86 0.02 84); padding-block:72px 40px; }
.footer h4{ color:var(--cream); font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin-bottom:1.1em; }
.footer a{ color:oklch(0.82 0.02 84); font-size:.95rem; line-height:2.1; transition:color .2s; }
.footer a:hover{ color:var(--bronze-soft); }

/* ---------- Form ---------- */
.field{ position:relative; }
.input{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:1.05em 1.4em; transition:border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder{ color:var(--ink-3); }
.input:focus{ outline:none; border-color:var(--green-soft); box-shadow:0 0 0 4px var(--green-tint); background:#fff; }
.input.invalid{ border-color:oklch(0.55 0.16 28); box-shadow:0 0 0 4px oklch(0.55 0.16 28 / .12); }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; }
.marquee-track{ display:flex; gap:0; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:inline-flex; align-items:center; gap:.7em; padding-inline:34px; font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.marquee-item .star{ color:var(--bronze); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ---------- Accordion ---------- */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{ width:100%; background:none; border:0; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:1.5em 0; font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.6rem); font-weight:500; color:var(--ink); }
.acc-head .ic{ flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; position:relative; transition:background .25s, border-color .25s; }
.acc-head .ic::before,.acc-head .ic::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--ink-2); transition:transform .3s, background .25s; }
.acc-head .ic::before{ width:13px; height:1.5px; }
.acc-head .ic::after{ width:1.5px; height:13px; }
.acc-item.open .acc-head .ic{ background:var(--green); border-color:var(--green); }
.acc-item.open .acc-head .ic::before,.acc-item.open .acc-head .ic::after{ background:var(--cream); }
.acc-item.open .acc-head .ic::after{ transform:scaleY(0); }
.acc-body{ overflow:hidden; height:0; transition:height .4s cubic-bezier(.4,0,.2,1); }
.acc-body-inner{ padding-bottom:1.6em; max-width:64ch; color:var(--ink-2); }

/* ---------- Utility ---------- */
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } }
.flex{ display:flex; }
.items-center{ align-items:center; }
.gap-sm{ gap:12px; } .gap-md{ gap:20px; } .gap-lg{ gap:36px; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.hairline{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Cards ---------- */
.card{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,38px);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.card.hoverable:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--bronze-soft); }

/* ingredient emblem (simple shapes only) */
.emblem{
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--line-green);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--green);
  background:radial-gradient(circle at 35% 30%, var(--ivory), var(--green-tint));
  position:relative;
}
.emblem::after{ content:""; position:absolute; inset:6px; border-radius:50%; border:1px solid var(--line-green); opacity:.6; }

/* number badge */
.numbadge{ font-family:var(--serif); font-size:1.1rem; color:var(--bronze-deep); width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; flex:none; }