/* ============================================================
   Aromatherapy Blends — site stylesheet
   Self-contained (tokens inlined) so it deploys without the
   design-system folder. Calm, clinical apothecary system:
   warm paper neutrals, sage green, amber bottle-glass accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,400..500&family=Public+Sans:ital,wght@0,400..700;1,400..500&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Neutrals (paper / ink) */
  --neutral-0:#FFFFFF; --neutral-50:#FAF7F1; --neutral-100:#F1ECE1; --neutral-200:#E4DDCC;
  --neutral-300:#CFC6B0; --neutral-400:#ABA08A; --neutral-500:#8C8270; --neutral-600:#6B6355;
  --neutral-700:#4F4A3F; --neutral-800:#34312A; --neutral-900:#211F1B;
  /* Sage */
  --sage-50:#F4F6F1; --sage-100:#E6EBDE; --sage-200:#CFDAC2; --sage-300:#AFC29C; --sage-400:#8CA878;
  --sage-500:#6C8C5C; --sage-600:#55704A; --sage-700:#435A3C; --sage-800:#34452F; --sage-900:#253321;
  /* Amber */
  --amber-50:#FBF3E7; --amber-100:#F5E2C4; --amber-200:#EAC896; --amber-300:#DCA765; --amber-400:#CC8B41;
  --amber-500:#B5732B; --amber-600:#955C22; --amber-700:#74461A; --amber-800:#563414; --amber-900:#3A230D;
  /* Clay */
  --clay-100:#F1DCD3; --clay-400:#C77D5F; --clay-600:#A6432E; --clay-800:#732E20;

  /* Semantic */
  --surface-page:var(--neutral-50); --surface-card:var(--neutral-0); --surface-sunken:var(--neutral-100);
  --surface-inverse:var(--sage-900); --surface-overlay:rgba(33,31,27,0.48);
  --text-primary:var(--neutral-900); --text-secondary:var(--neutral-600); --text-tertiary:var(--neutral-500);
  --text-on-brand:var(--neutral-50); --text-inverse:var(--neutral-50);
  --border-subtle:var(--neutral-200); --border-default:var(--neutral-300); --border-strong:var(--neutral-400);
  --border-on-inverse:rgba(250,247,241,0.24);
  --brand-primary:var(--sage-600); --brand-primary-hover:var(--sage-700); --brand-primary-active:var(--sage-800);
  --brand-tint:var(--sage-100); --accent:var(--amber-500); --accent-hover:var(--amber-600); --accent-tint:var(--amber-100);
  --success:var(--sage-700); --success-tint:var(--sage-100); --warning:var(--amber-500); --warning-tint:var(--amber-100);
  --danger:var(--clay-600); --danger-tint:var(--clay-100);
  --link:var(--sage-700); --link-hover:var(--sage-800); --focus-ring:var(--sage-400);

  /* Type */
  --font-display:'Newsreader','Iowan Old Style',Georgia,serif;
  --font-body:'Public Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Space Mono','SF Mono',monospace;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  /* Radius / shadow / motion */
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-xl:22px; --radius-full:999px;
  --shadow-sm:0 1px 2px rgba(52,44,30,0.06);
  --shadow-md:0 4px 14px rgba(52,44,30,0.08),0 1px 2px rgba(52,44,30,0.06);
  --shadow-lg:0 16px 40px rgba(52,44,30,0.12),0 2px 6px rgba(52,44,30,0.06);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --texture-paper:radial-gradient(circle at 1px 1px,rgba(52,44,30,0.05) 1px,transparent 0);
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background:var(--surface-page); color:var(--text-primary);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:500; margin:0; color:var(--text-primary); line-height:1.15; }
p { margin:0; }
img { max-width:100%; display:block; }
a { color:var(--link); text-decoration:none; }
a:hover { color:var(--link-hover); text-decoration:underline; }
button { font-family:inherit; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ---- Layout ---- */
.container { max-width:1120px; margin:0 auto; padding:0 40px; width:100%; }
.section { padding:72px 0; }
.section--sunken { background:var(--sage-50); }
.section--tight { padding:48px 0; }
.eyebrow {
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--sage-600); margin:0 0 16px;
}
.lede { font-size:18px; line-height:1.6; color:var(--text-secondary); }
.section-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.section-head h2 { font-size:28px; }

/* ---- Skip link ---- */
.skip-link {
  position:absolute; left:-9999px; top:0; background:var(--sage-700); color:var(--neutral-50);
  padding:10px 16px; border-radius:var(--radius-md); z-index:100;
}
.skip-link:focus { left:16px; top:16px; }

/* ---- Header ---- */
.site-header {
  position:sticky; top:0; z-index:30; background:var(--surface-card);
  border-bottom:1px solid var(--border-subtle);
}
.site-header__inner { display:flex; align-items:center; justify-content:space-between; height:120px; gap:24px; }
.brand { font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--text-primary); white-space:nowrap; }
.brand:hover { text-decoration:none; color:var(--text-primary); }
.brand em { font-style:normal; color:var(--sage-600); }
.nav { display:flex; gap:32px; align-items:center; }
.nav a { font-size:14px; color:var(--text-secondary); }
.nav a:hover { color:var(--text-primary); text-decoration:none; }
.nav a.is-active { color:var(--text-primary); font-weight:600; }
.nav__actions { display:flex; gap:8px; align-items:center; }
.nav-toggle { display:none; }
.hamburger {
  display:none; width:44px; height:44px; border:1px solid var(--border-default); background:transparent;
  border-radius:var(--radius-md); cursor:pointer; align-items:center; justify-content:center; color:var(--sage-700);
}

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; font-size:16px; font-family:var(--font-body); font-weight:500;
  border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer;
  transition:background var(--ease-standard) 120ms, color 120ms; white-space:nowrap; text-decoration:none;
}
.btn:hover { text-decoration:none; }
.btn--sm { height:36px; padding:0 14px; font-size:14px; }
.btn--lg { height:52px; padding:0 28px; }
.btn--primary { background:var(--brand-primary); color:var(--text-on-brand); }
.btn--primary:hover { background:var(--brand-primary-hover); color:var(--text-on-brand); }
.btn--secondary { background:transparent; color:var(--sage-700); border-color:var(--border-default); }
.btn--secondary:hover { background:var(--sage-50); color:var(--sage-700); }
.btn--ghost { background:transparent; color:var(--sage-700); }
.btn--ghost:hover { background:var(--sage-50); color:var(--sage-700); }
.btn--accent { background:var(--accent); color:var(--text-on-brand); }
.btn--accent:hover { background:var(--accent-hover); color:var(--text-on-brand); }
.btn svg { width:18px; height:18px; }

/* ---- Card ---- */
.card {
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:var(--space-5); box-shadow:var(--shadow-sm);
  transition:box-shadow var(--ease-standard) 200ms, transform var(--ease-standard) 200ms;
}
.card--hover:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* ---- Label / mono ---- */
.label {
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-tertiary);
}
.latin { font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); font-style:italic; }

/* ---- Badge ---- */
.badge {
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.04em; text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-full);
  background:var(--surface-sunken); color:var(--text-secondary);
}
.badge--success { background:var(--success-tint); color:var(--sage-800); }
.badge--warning { background:var(--warning-tint); color:var(--amber-800); }
.badge--accent { background:var(--accent-tint); color:var(--amber-800); }

/* ---- Tag / chip (filter) ---- */
.tag {
  display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; padding:7px 14px; border-radius:var(--radius-full);
  border:1px solid var(--border-default); background:transparent; color:var(--text-secondary); cursor:pointer;
  transition:all var(--ease-standard) 120ms;
}
.tag:hover { border-color:var(--sage-400); color:var(--sage-700); }
.tag.is-active { background:var(--sage-700); border-color:var(--sage-700); color:var(--neutral-50); }
.chip-row { display:flex; gap:10px; flex-wrap:wrap; }

/* ---- Image placeholder ---- */
.ph {
  position:relative; width:100%; border-radius:var(--radius-md); overflow:hidden;
  background:var(--surface-sunken); background-image:var(--texture-paper); background-size:4px 4px;
  border:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:center;
  color:var(--text-tertiary); font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; text-align:center; padding:16px;
}
.ph--amber { background-color:var(--amber-50); }
.ph--sage { background-color:var(--sage-50); }

/* ---- Inputs ---- */
.field {
  width:100%; height:44px; padding:0 14px; border-radius:var(--radius-md);
  border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-primary);
  font-size:15px; font-family:var(--font-body);
}
.field::placeholder { color:var(--text-tertiary); }
.field:focus { outline:2px solid var(--focus-ring); outline-offset:1px; border-color:var(--sage-400); }
.search-wrap { position:relative; }
.search-wrap svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-tertiary); pointer-events:none; }
.search-wrap .field { padding-left:42px; }

/* ---- Media ---- */
.media { width:100%; border-radius:var(--radius-lg); object-fit:cover; display:block; box-shadow:var(--shadow-sm); }

/* ---- Hero ---- */
.hero { padding:72px 0 64px; }
.hero__grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.hero h1 { font-size:64px; line-height:1.05; margin-bottom:20px; }
.hero .lede { max-width:460px; margin-bottom:32px; }
.hero__cta { display:flex; gap:12px; flex-wrap:wrap; }

/* ---- Grids ---- */
.grid { display:grid; gap:20px; }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }

/* ---- Product card ---- */
.product__top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-top:14px; }
.product__name { font-family:var(--font-display); font-size:18px; margin-bottom:3px; line-height:1.25; }
.product__desc { font-size:13.5px; color:var(--text-secondary); margin:10px 0 16px; line-height:1.55; }
.product__foot { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.product__sku { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; color:var(--text-tertiary); }
.is-hidden { display:none !important; }

/* ---- Recipe card ---- */
.recipe { display:flex; flex-direction:column; height:100%; }
.recipe__title { font-family:var(--font-display); font-size:20px; margin-bottom:4px; }
.recipe__oils { list-style:none; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.recipe__oils li {
  display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px dashed var(--border-subtle); font-size:14px;
}
.recipe__oils li:last-child { border-bottom:none; }
.recipe__oils .drops { font-family:var(--font-mono); font-size:12px; color:var(--sage-700); white-space:nowrap; }
.recipe__carrier {
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--text-tertiary); padding-top:10px; border-top:1px solid var(--border-subtle);
}
.recipe__note { font-size:13.5px; color:var(--text-secondary); margin-top:12px; font-style:italic; }

/* ---- Callout / safety ---- */
.callout {
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:var(--space-6);
}
.callout--warn { background:var(--amber-50); border-color:var(--amber-200); }
.safety-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.safety-item h4 { font-size:16px; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.safety-item p { font-size:14px; color:var(--text-secondary); }
.prose p { margin-bottom:16px; }
.prose p:last-child { margin-bottom:0; }
.prose strong { font-weight:600; }

/* ---- Article list ---- */
.link-list { list-style:none; margin:0; padding:0; columns:2; column-gap:40px; }
.link-list li { margin-bottom:12px; break-inside:avoid; }
.link-list a { font-size:15px; color:var(--link); }

/* ---- Footer ---- */
.site-footer { background:var(--surface-inverse); color:var(--text-inverse); padding:56px 0 28px; margin-top:0; }
.site-footer a { color:var(--text-inverse); }
.site-footer a:hover { color:var(--neutral-50); text-decoration:underline; }
.footer__top { display:flex; gap:64px; flex-wrap:wrap; }
.footer__brandcol { flex:1 1 300px; }
.footer__brandcol .brand { color:var(--text-inverse); font-size:22px; }
.footer__brandcol .brand em { color:var(--sage-300); }
.footer__blurb { font-size:14px; color:rgba(250,247,241,0.72); margin:12px 0 0; max-width:340px; }
.footer__cols { display:flex; gap:56px; flex:2 1 480px; justify-content:flex-end; flex-wrap:wrap; }
.footer__col h4, .footer__col .label { color:var(--border-on-inverse); margin-bottom:14px; display:block; }
.footer__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer__col a { font-size:14px; }
.footer__bottom {
  border-top:1px solid var(--border-on-inverse); margin-top:40px; padding-top:20px;
  font-size:12px; color:var(--border-on-inverse); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer__sisters { display:flex; gap:18px; flex-wrap:wrap; }

/* ---- Disclosure ---- */
.affiliate-note {
  font-size:12.5px; color:var(--text-tertiary); background:var(--surface-sunken);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:12px 16px;
}

/* ---- Responsive ---- */
@media (max-width:900px) {
  .container { padding:0 24px; }
  .section { padding:56px 0; }
  .hero { padding:48px 0; }
  .hero__grid { grid-template-columns:1fr; gap:32px; }
  .hero h1 { font-size:44px; }
  .grid--3, .grid--4 { grid-template-columns:repeat(2,1fr); }
  .safety-grid { grid-template-columns:1fr; }
  .nav, .nav__actions .btn { display:none; }
  .hamburger { display:inline-flex; }
  .nav-toggle:checked ~ .nav {
    display:flex; position:absolute; top:120px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--surface-card); border-bottom:1px solid var(--border-subtle); padding:8px 24px 16px;
  }
  .nav-toggle:checked ~ .nav a { padding:12px 0; border-bottom:1px solid var(--border-subtle); font-size:16px; }
  .link-list { columns:1; }
  .footer__cols { justify-content:flex-start; gap:40px; }
}
@media (max-width:560px) {
  .hero h1 { font-size:36px; }
  .grid--3, .grid--4, .grid--2 { grid-template-columns:1fr; }
  .footer__bottom { flex-direction:column; }
  .section-head h2 { font-size:24px; }
}

/* ---- Article ---- */
.article { max-width:720px; margin:0 auto; }
.article__banner { width:100%; height:400px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.byline { display:flex; gap:10px; align-items:center; font-size:14px; color:var(--text-secondary); margin-top:16px; flex-wrap:wrap; }
.byline .dot { width:4px; height:4px; border-radius:999px; background:var(--border-default); }
.article__body p { font-size:18px; line-height:1.75; color:var(--text-primary); margin-bottom:22px; }
.article__body p.standfirst { font-size:21px; line-height:1.6; color:var(--text-secondary); font-family:var(--font-display); font-weight:400; }
.author-card { display:flex; gap:16px; align-items:flex-start; margin-top:40px; }
.author-card .avatar { width:48px; height:48px; border-radius:999px; background:var(--sage-100); color:var(--sage-700); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:20px; flex:none; }
@media (max-width:900px){ .article__banner{ height:260px; } .article__body p{ font-size:17px; } }

/* ---- Brand logo + recipe banner ---- */
.brand-logo { height:100px; width:auto; display:block; }
.recipe-banner { width:100%; height:340px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); margin-top:28px; }
@media (max-width:900px){ .recipe-banner{ height:220px; } .brand-logo{ height:76px; } }