/* ============================================================
   SAVORSTUDIO.SHOP — "studio blush" design system
   Palette: blush (#F3D9D6) used as a surface / ink (#241F20)
            sage (#7E8F72) / shell (#FFF9F7) / rose-deep (#C98B85)
            graphite (#6E6466)
   Type: DM Serif Display (editorial) / Space Grotesk (body)
   Signature: the trial log — every recipe shows the versions we
   tested, what changed between them, and which one won, so you
   can see the reasoning rather than just the result.
   Distinct from every prior build: the only blush-dominant
   surface palette with sage and ink.
   ============================================================ */
:root{
  --blush:#F3D9D6;
  --blush-2:#EBC9C5;
  --rose:#C98B85;
  --sage:#7E8F72;
  --sage-pale:#E5EADF;
  --ink:#241F20;
  --ink-2:#3A3133;
  --shell:#FFF9F7;
  --shell-2:#FBEFEC;
  --graphite:#6E6466;
  --paper:#FFFFFF;
  --line:#EBDCD9;
  --radius:0px;
  --shadow:0 2px 4px rgba(36,31,32,.05), 0 16px 34px rgba(36,31,32,.11);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--shell); color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif; line-height:1.72; font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'DM Serif Display',Georgia,serif; font-weight:400; line-height:1.1; margin:0 0 .4em; color:var(--ink); }
h1{ font-size:clamp(2.5rem,6vw,4.2rem); }
h2{ font-size:clamp(1.8rem,3.8vw,2.6rem); }
h3{ font-size:1.35rem; }
h1 em, h2 em{ font-style:italic; color:var(--rose); }
p{ margin:0 0 1.1em; }
a{ color:var(--ink); text-decoration-color:var(--rose); text-decoration-thickness:2px; text-underline-offset:3px; }
img,svg{ display:block; max-width:100%; }
.container{ max-width:1060px; margin:0 auto; padding:0 24px; }
.narrow{ max-width:800px; }
.stamp{
  display:inline-block; border:1px solid var(--ink); color:var(--ink);
  font-weight:500; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  padding:7px 15px; margin-bottom:20px;
}
.stamp.filled{ background:var(--ink); color:var(--shell); }
.stamp.sage{ background:var(--sage-pale); border-color:var(--sage-pale); color:#4E5B44; }
.stamp.light{ border-color:rgba(255,249,247,.45); color:var(--shell); }
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.88rem;
  letter-spacing:.06em; padding:15px 30px; border-radius:var(--radius);
  transition:background .18s, transform .12s, color .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-ink{ background:var(--ink); color:var(--shell); }
.btn-ink:hover{ background:var(--ink-2); }
.btn-rose{ background:var(--rose); color:#fff; }
.btn-rose:hover{ background:#B87A74; }
.btn-line{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-line:hover{ background:var(--ink); color:var(--shell); }
.skip-link{ position:absolute; left:-999px; background:var(--ink); color:var(--shell); padding:10px 16px; z-index:300; }
.skip-link:focus{ left:0; top:0; }

/* Signature: trial log */
.trials{ margin-top:18px; border-top:1px solid var(--ink); }
.trial{
  display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line);
}
@media (max-width:560px){ .trial{ grid-template-columns:44px 1fr; } .trial .verdict{ grid-column:2; } }
.trial .v{
  font-family:'DM Serif Display',serif; font-size:.95rem; color:var(--rose);
}
.trial .what{ font-size:.87rem; color:var(--graphite); }
.trial .verdict{
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--graphite); white-space:nowrap;
}
.trial.won{ background:var(--sage-pale); }
.trial.won .v{ color:#4E5B44; }
.trial.won .what{ color:var(--ink); }
.trial.won .verdict{ color:#4E5B44; }
.card .trial{ padding:8px 0; }
.card .trial .what{ font-size:.81rem; }

/* ---------------- Header ---------------- */
header.site{ background:var(--shell); position:sticky; top:0; z-index:100; border-bottom:1px solid var(--ink); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:15px 0; gap:16px; }
.logo{
  font-family:'DM Serif Display',serif; font-size:1.42rem; color:var(--ink);
  text-decoration:none; display:flex; align-items:center; gap:10px;
}
.logo .sq{ flex-shrink:0; }
.logo span{ font-style:italic; color:var(--rose); }
nav.main ul{ list-style:none; display:flex; gap:2px; margin:0; padding:0; }
nav.main a{
  text-decoration:none; color:var(--ink); font-weight:500; font-size:.88rem;
  padding:9px 14px; transition:background .15s, color .15s;
}
nav.main a:hover, nav.main a[aria-current="page"]{ background:var(--ink); color:var(--shell); }
.nav-toggle{ display:none; background:none; border:0; color:var(--ink); font-size:1.7rem; cursor:pointer; }
@media (max-width:900px){
  .nav-toggle{ display:block; }
  nav.main{ position:absolute; top:100%; left:0; right:0; background:var(--shell); border-bottom:1px solid var(--ink); max-height:0; overflow:hidden; transition:max-height .25s; }
  nav.main.open{ max-height:460px; }
  nav.main ul{ flex-direction:column; padding:10px 24px 18px; }
  nav.main a{ display:block; padding:12px 8px; }
}

/* ---------------- Hero ---------------- */
.hero{ background:var(--blush); padding:88px 0 72px; position:relative; overflow:hidden; border-bottom:1px solid var(--ink); }
.hero::before{
  content:""; position:absolute; right:-70px; top:-70px; width:320px; height:320px;
  background:var(--shell); opacity:.5; border-radius:50%;
}
.hero::after{
  content:""; position:absolute; right:90px; bottom:-120px; width:240px; height:240px;
  border:1px solid var(--ink); opacity:.25; border-radius:50%;
}
@media (max-width:900px){ .hero::before, .hero::after{ display:none; } }
.hero > .container{ position:relative; z-index:1; }
.hero p.lede{ font-size:1.1rem; color:var(--ink-2); max-width:51ch; margin:20px 0 32px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-facts{ display:flex; gap:44px; margin-top:50px; flex-wrap:wrap; border-top:1px solid var(--ink); padding-top:20px; }
.hero-facts div{ font-size:.78rem; color:var(--ink-2); }
.hero-facts b{ display:block; font-family:'DM Serif Display',serif; font-size:1.9rem; line-height:1.1; color:var(--ink); }

/* ---------------- Cards ---------------- */
.section{ padding:70px 0; }
.section.pale{ background:var(--shell-2); border-bottom:1px solid var(--ink); }
.section.dark{ background:var(--ink); color:#CBBFC1; }
.section.dark h2, .section.dark h3{ color:var(--shell); }
.section.dark p{ color:#A99DA0; }
.section-head{ margin-bottom:46px; max-width:60ch; }
.section-head p{ color:var(--graphite); }
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--ink); }
@media (max-width:920px){ .card-grid{ grid-template-columns:1fr; } }
.card{
  background:transparent; padding:26px 26px 24px 0; border-right:1px solid var(--line);
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  transition:background .16s;
}
.card:last-child{ border-right:0; }
.card:hover{ background:var(--blush); }
@media (max-width:920px){
  .card{ border-right:0; border-bottom:1px solid var(--line); padding:26px 0 24px; }
  .card:last-child{ border-bottom:0; }
}
.card-art{ height:104px; display:flex; align-items:center; justify-content:flex-start; color:var(--rose); margin-bottom:16px; }
.card:nth-child(2) .card-art{ color:var(--sage); }
.card:nth-child(3) .card-art{ color:var(--ink); }
.card .kind{ font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--graphite); margin-bottom:10px; }
.card h3{ margin-bottom:10px; }
.card p.desc{ color:var(--graphite); font-size:.9rem; flex:1; }
.card .meta{
  display:flex; justify-content:space-between; margin-top:16px; padding-top:13px;
  border-top:1px solid var(--line); font-weight:600; font-size:.77rem; color:var(--graphite);
}
.card .meta .won-note{ color:var(--sage); }

/* ---------------- Feature band ---------------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
@media (max-width:820px){ .features{ grid-template-columns:1fr; } }
.feature .f-num{
  font-family:'DM Serif Display',serif; font-style:italic; font-size:1.7rem; color:var(--rose); display:block; margin-bottom:12px;
}
.feature h3{ font-size:1.2rem; }
.feature p{ font-size:.92rem; margin:0; }

/* ---------------- Ad slots ---------------- */
.ad-slot{
  background:var(--paper); border:1px solid var(--line); padding:18px; text-align:center;
  color:var(--graphite); font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  margin:48px auto; max-width:780px;
}

/* ---------------- Recipe page ---------------- */
.recipe-hero{ background:var(--blush); border-bottom:1px solid var(--ink); padding:54px 0 48px; }
.crumbs{ font-size:.78rem; color:var(--ink-2); margin-bottom:18px; }
.crumbs a{ font-weight:600; }
.fact-strip{ display:flex; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); margin-top:30px; }
.fact-strip div{ flex:1; padding:16px 16px 16px 0; border-right:1px solid rgba(36,31,32,.15); }
.fact-strip div:last-child{ border-right:0; }
.fact-strip b{ display:block; font-family:'DM Serif Display',serif; font-size:1.35rem; color:var(--ink); }
.fact-strip span{ display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); margin-top:4px; }
.recipe-body{ display:grid; grid-template-columns:.86fr 1.14fr; gap:46px; padding:56px 0 30px; align-items:start; }
@media (max-width:880px){ .recipe-body{ grid-template-columns:1fr; } }
.ing-card{ border-top:2px solid var(--ink); padding-top:22px; position:sticky; top:96px; }
.ing-card ul{ list-style:none; margin:0; padding:0; }
.ing-card li{ padding:9px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.ing-card li:last-child{ border-bottom:0; }
.ing-card .note{ font-size:.78rem; color:var(--graphite); margin-top:14px; }
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps li{ counter-increment:step; display:grid; grid-template-columns:40px 1fr; gap:18px; padding:21px 0; border-bottom:1px solid var(--line); }
.steps li:last-child{ border-bottom:0; }
.steps li::before{
  content:"0" counter(step); font-family:'DM Serif Display',serif; font-size:1.05rem;
  color:var(--rose); line-height:1.5;
}
.trial-box{ margin-top:32px; border:1px solid var(--ink); padding:24px 26px; }
.trial-box > b{ font-family:'DM Serif Display',serif; font-weight:400; font-size:1.3rem; display:block; margin-bottom:3px; }
.trial-box > p{ font-size:.87rem; color:var(--graphite); margin:0; }
.learned{ background:var(--sage-pale); padding:20px 24px; margin-top:22px; }
.learned b{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#4E5B44; display:block; margin-bottom:8px; font-weight:600; }
.learned p{ margin:0; font-size:.92rem; }
.tip{ background:var(--ink); color:#CBBFC1; padding:22px 26px; margin-top:20px; }
.tip b{ color:var(--blush); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; display:block; margin-bottom:8px; font-weight:600; }
.tip p{ margin:0; font-size:.92rem; }
.nutri-note{ color:var(--graphite); font-size:.8rem; margin-top:20px; }

/* ---------------- Static / legal pages ---------------- */
.page{ padding:60px 0 84px; }
.page h1{ margin-bottom:.4em; }
.page h2{ margin-top:1.7em; font-size:1.45rem; }
.page ul{ padding-left:1.3em; }
.page .updated{ color:var(--graphite); font-size:.88rem; }

/* Contact */
.contact-form{ display:grid; gap:17px; max-width:520px; margin-top:28px; }
.contact-form label{ font-weight:600; font-size:.85rem; display:block; margin-bottom:7px; }
.contact-form input,.contact-form textarea{
  width:100%; padding:13px 15px; border:1px solid var(--ink); border-radius:var(--radius);
  font-family:'Space Grotesk',sans-serif; font-size:.94rem; background:var(--paper);
}

/* ---------------- Newsletter ---------------- */
.mailer{ background:var(--blush); border:1px solid var(--ink); padding:46px 42px; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center; }
@media (max-width:760px){ .mailer{ grid-template-columns:1fr; } }
.mailer p{ color:var(--ink-2); margin:0; }
.mailer form{ display:flex; gap:10px; }
@media (max-width:560px){ .mailer form{ flex-direction:column; } }
.mailer input[type="email"]{ flex:1; padding:14px 17px; border:1px solid var(--ink); border-radius:var(--radius); font-family:'Space Grotesk',sans-serif; font-size:.94rem; }

/* ---------------- Footer ---------------- */
footer.site{ background:var(--ink); color:#A99DA0; padding:56px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; margin-bottom:38px; }
@media (max-width:780px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-grid h4{ color:var(--blush); font-family:'DM Serif Display',serif; font-weight:400; font-size:1.1rem; margin:0 0 12px; }
.foot-grid ul{ list-style:none; margin:0; padding:0; }
.foot-grid li{ margin-bottom:9px; font-size:.89rem; }
.foot-grid a{ color:#A99DA0; text-decoration:none; }
.foot-grid a:hover{ color:#fff; text-decoration:underline; }
.foot-grid p{ color:#A99DA0; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.14); padding-top:20px; font-size:.77rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#857A7C; }

/* ---------------- Cookie notice ---------------- */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  background:var(--shell); border:1px solid var(--ink); padding:19px 23px;
  box-shadow:8px 8px 0 var(--blush);
  display:none; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  max-width:720px; margin:0 auto;
}
.cookie-bar.show{ display:flex; }
.cookie-bar p{ margin:0; font-size:.84rem; color:var(--graphite); max-width:52ch; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }