/* =========================================================
   Mynort Kitchen — Design System
   Simple, family-friendly recipe publication
   ========================================================= */

:root{
  --cream:#FBF6EF;
  --cream-alt:#F3EAD9;
  --card:#FFFFFF;
  --ink:#2B2117;
  --brown-700:#4A3B2A;
  --brown-500:#6E5B45;
  --brown-300:#A3927B;
  --line:#E6DAC3;
  --terracotta:#C1592B;
  --terracotta-dark:#9C4620;
  --terracotta-100:#FBE7DA;
  --olive:#6B7A4F;
  --olive-100:#E9EEE0;
  --gold:#D9A441;
  --gold-100:#FBF0D9;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:18px;

  --shadow-sm:0 1px 2px rgba(43,33,23,0.07);
  --shadow-md:0 10px 26px rgba(43,33,23,0.10);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--brown-700);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.18;
  margin:0 0 0.5em;
  font-weight:700;
}
h1{font-size:clamp(2rem, 1.55rem + 2.1vw, 3.1rem);}
h2{font-size:clamp(1.45rem, 1.25rem + 1vw, 2rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1.1em;}
a{color:var(--terracotta-dark); text-decoration:none;}
a:hover{color:var(--ink); text-decoration:underline;}
img{max-width:100%; display:block;}
ul,ol{padding-left:1.3rem;}
li{margin-bottom:0.45em;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:740px; margin:0 auto; padding:0 24px;}

/* ---------- Signature element: scallop divider ---------- */
.scallop{
  width:100%; height:14px; overflow:hidden; line-height:0;
}
.scallop svg{width:100%; height:14px; display:block;}

/* ---------- Header ---------- */
.site-header{
  background:var(--cream);
  border-bottom:2px solid var(--terracotta);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:1140px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:1.4rem; text-decoration:none;}
.brand:hover{text-decoration:none; color:var(--terracotta-dark);}
.brand-mark{width:36px; height:36px; flex-shrink:0;}
.brand-tag{display:block; font-family:var(--font-body); font-size:0.62rem; letter-spacing:0.09em; color:var(--olive); text-transform:uppercase; font-weight:600;}

.main-nav{display:flex; align-items:center; gap:2px;}
.main-nav a{color:var(--brown-700); font-size:0.95rem; font-weight:600; padding:9px 14px; border-radius:var(--radius-sm); text-decoration:none;}
.main-nav a:hover, .main-nav a[aria-current="page"]{color:var(--terracotta-dark); background:var(--terracotta-100); text-decoration:none;}

.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink); padding:8px 10px; cursor:pointer;}
.mobile-nav{display:none; flex-direction:column; background:var(--cream-alt); padding:8px 24px 18px;}
.mobile-nav a{color:var(--brown-700); padding:11px 4px; border-bottom:1px solid var(--line); font-size:1rem; font-weight:600;}
.mobile-nav a:last-child{border-bottom:none;}

@media (max-width:820px){
  .main-nav{display:none;}
  .nav-toggle{display:inline-flex; align-items:center; gap:6px;}
  .mobile-nav.open{display:flex;}
}

/* ---------- Buttons / tags ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:700; font-size:0.95rem; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--terracotta); color:#fff;}
.btn-primary:hover{background:var(--terracotta-dark); color:#fff; text-decoration:none;}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--brown-700);}
.btn-ghost:hover{border-color:var(--terracotta); color:var(--terracotta-dark); text-decoration:none;}

.eyebrow{display:inline-block; font-family:var(--font-body); font-size:0.7rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; padding:5px 11px; border-radius:999px; margin-bottom:10px;}
.eyebrow-dinner{background:var(--terracotta-100); color:var(--terracotta-dark);}
.eyebrow-breakfast{background:var(--gold-100); color:#8A6212;}
.eyebrow-onepot{background:var(--olive-100); color:#48542F;}
.eyebrow-general{background:var(--cream-alt); color:var(--brown-500);}

/* ---------- Hero ---------- */
.hero{ background:var(--cream-alt); padding:56px 0 60px; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:center; }
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}}
.hero p.lede{color:var(--brown-500); font-size:1.12rem; max-width:52ch;}
.hero-actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}

/* ---------- Cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; display:flex; flex-direction:column; height:100%;}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.card-media{aspect-ratio:4/3; background:var(--cream-alt);}
.card-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.card h3{font-size:1.18rem; margin-bottom:8px;}
.card h3 a{color:var(--ink);}
.card h3 a:hover{color:var(--terracotta-dark); text-decoration:none;}
.card p{color:var(--brown-500); font-size:0.96rem; margin-bottom:14px;}
.card-meta{margin-top:auto; font-family:var(--font-body); font-size:0.78rem; color:var(--brown-300); display:flex; gap:10px; border-top:1px solid var(--line); padding-top:12px;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3, .grid-2{grid-template-columns:1fr;}}

section.section{padding:54px 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:12px;}
.section-head p.section-sub{color:var(--brown-500); margin:6px 0 0; max-width:60ch;}
.section-alt{background:var(--cream-alt);}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:38px; display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;}
.newsletter h3{color:#fff; margin-bottom:6px;}
.newsletter p{color:#D9CFC0; margin-bottom:0; max-width:44ch;}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter-form input[type=email]{padding:12px 14px; border-radius:999px; border:1px solid #5C4A36; background:#3A2E20; color:#fff; min-width:220px; font-family:var(--font-body);}
.newsletter-form input::placeholder{color:#B4A48D;}
.form-note{font-size:0.78rem; color:#B4A48D; margin-top:10px; width:100%;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:#C9BDA9; padding:52px 0 26px; margin-top:56px;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:30px; margin-bottom:36px;}
@media (max-width:820px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h5{color:#fff; font-family:var(--font-body); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px;}
.site-footer a{color:#C9BDA9; font-size:0.9rem; display:block; margin-bottom:9px;}
.site-footer a:hover{color:#fff; text-decoration:none;}
.footer-brand p{color:#A5987F; font-size:0.9rem; max-width:32ch;}
.footer-bottom{border-top:1px solid #4A3B2A; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.82rem; color:#8F8065;}
.footer-disclosure{background:#3A2E20; border:1px solid #4A3B2A; border-radius:var(--radius-md); padding:16px 20px; font-size:0.84rem; color:#D9CFC0; margin-bottom:32px; line-height:1.6;}

/* ---------- Article page ---------- */
.breadcrumb{font-size:0.85rem; color:var(--brown-500); margin-bottom:18px;}
.breadcrumb a{color:var(--brown-500);}
.breadcrumb a:hover{color:var(--terracotta-dark);}
.article-header{padding:40px 0 28px; border-bottom:1px solid var(--line);}
.article-deck{font-size:1.15rem; color:var(--brown-500); max-width:70ch; margin-bottom:20px;}
.byline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:0.85rem; color:var(--brown-500);}
.byline .avatar{width:38px; height:38px; border-radius:50%; background:var(--terracotta); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:0.85rem;}
.byline strong{color:var(--ink); display:block; font-size:0.9rem;}
.byline .meta-sep{color:var(--line);}

.article-body{max-width:720px; margin:0 auto; padding:40px 24px 20px;}
.article-body h2{margin-top:1.8em; font-size:1.5rem;}
.article-body h3{margin-top:1.2em; font-size:1.15rem;}
.article-body p{font-size:1.05rem; color:var(--brown-700);}
.article-body ul, .article-body ol{font-size:1.02rem;}

.toc{background:var(--cream-alt); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 22px; margin:1.6em 0;}
.toc h4{margin-bottom:10px; font-size:0.85rem; font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.06em; color:var(--brown-500);}
.toc ol{margin:0; padding-left:1.1rem; font-size:0.92rem;}
.toc li{margin-bottom:6px;}

.hero-graphic-wrap{background:var(--cream-alt); padding:0;}
.hero-graphic-wrap svg{display:block; width:100%; height:auto; max-height:240px;}

.faq-item{border-bottom:1px solid var(--line); padding:18px 0;}
.faq-item:last-child{border-bottom:none;}
.faq-item h3{font-size:1.02rem; margin-bottom:8px;}

.editorial-disclosure{background:var(--cream-alt); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 20px; font-size:0.88rem; color:var(--brown-500); margin:2em 0;}
.related-section{background:var(--cream-alt); padding:48px 0 58px; margin-top:36px;}

.ad-slot{border:1px dashed var(--line); border-radius:var(--radius-md); background:var(--card); padding:14px 18px; margin:2em 0; text-align:center;}
.ad-slot .ad-label{font-family:var(--font-body); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brown-300); display:block; margin-bottom:2px;}

/* ---------- Recipe card ---------- */
.recipe-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 28px; margin:1.8em 0;}
.recipe-card h3{margin-top:0; font-size:1.4rem;}
.recipe-meta{display:flex; flex-wrap:wrap; gap:18px; margin:14px 0 20px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.recipe-meta div{font-size:0.85rem; color:var(--brown-500);}
.recipe-meta strong{display:block; color:var(--ink); font-family:var(--font-display); font-size:1.05rem;}
.recipe-columns{display:grid; grid-template-columns:1fr 1.4fr; gap:30px;}
@media (max-width:700px){.recipe-columns{grid-template-columns:1fr;}}
.recipe-columns h4{font-family:var(--font-body); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--terracotta-dark); margin-bottom:10px;}
.recipe-columns ul{padding-left:1.15rem;}
.recipe-columns ol{padding-left:1.25rem;}
.recipe-columns ol li{margin-bottom:0.8em;}
.recipe-note{background:var(--gold-100); border-left:4px solid var(--gold); padding:12px 16px; border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:0.92rem; margin-top:16px;}

.page-header{background:var(--cream-alt); border-bottom:2px solid var(--terracotta); padding:44px 0 36px;}
.page-header p{color:var(--brown-500);}
.legal-body{max-width:780px; margin:0 auto; padding:44px 24px 66px;}
.legal-body h2{margin-top:1.6em;}
.legal-body .updated{font-family:var(--font-body); font-size:0.8rem; color:var(--brown-500); margin-bottom:2em;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:38px;}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px; margin-bottom:16px;}
.contact-card h3{font-size:1rem; margin-bottom:6px;}
.contact-card p{color:var(--brown-500); font-size:0.92rem; margin-bottom:8px;}
.contact-card a.email{font-family:var(--font-body); font-weight:600; font-size:0.92rem;}

form.contact-form label{display:block; font-size:0.88rem; font-weight:700; margin-bottom:6px; color:var(--ink);}
form.contact-form input, form.contact-form select, form.contact-form textarea{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-md); font-family:var(--font-body); font-size:0.95rem; margin-bottom:18px; background:var(--card);}
form.contact-form textarea{min-height:130px; resize:vertical;}

.error-page{padding:96px 0; text-align:center;}
.error-page h1{font-size:5rem; margin-bottom:0.2em;}

.text-center{text-align:center;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip-link{position:absolute; left:-999px; top:0; background:#fff; color:var(--ink); padding:10px 16px; z-index:100; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}