:root {
  --ink: #213028;
  --muted: #6d766f;
  --paper: #f8f5ee;
  --white: #fffdf9;
  --sage: #486b54;
  --sage-light: #e5ece3;
  --berry: #a4463e;
  --line: #dddcd4;
  --shadow: 0 18px 50px rgba(40, 55, 45, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Manrope", Arial, sans-serif; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 78px; padding: 0 clamp(20px, 5vw, 76px); display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 20;
  background: rgba(248, 245, 238, .94); border-bottom: 1px solid rgba(33,48,40,.08); backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 7px; }
.brand-picture { display: block; width: auto; height: 52px; object-fit: contain; }
.brand-word { color: #30312f; font-size: 29px; font-weight: 400; letter-spacing: -.04em; }
.desktop-nav { display: flex; gap: 34px; font-size: 14px; font-weight: 600; }
.desktop-nav a:hover { color: var(--berry); }
.header-actions, .language-switch { display: flex; align-items: center; }
.language-switch { gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.lang-button { padding: 0; border: 0; color: #929891; background: none; cursor: pointer; }
.lang-button.active { color: var(--ink); font-weight: 700; }
.menu-button { display: none; border: 0; background: none; font-size: 23px; }

.hero { min-height: 650px; margin: 0 clamp(12px, 2.5vw, 38px); padding: 55px clamp(24px, 5vw, 80px); border-radius: 0 0 34px 34px; overflow: hidden; position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr); align-items: center; gap: clamp(30px, 5vw, 80px); background: #f1ede3; }
.hero-content { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 13px; color: var(--berry); text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 700; }
h1, h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; line-height: 1.05; }
h1 { font-size: clamp(46px, 5.1vw, 78px); letter-spacing: -.035em; }
h2 { font-size: clamp(35px, 3.4vw, 52px); }
.hero-copy { max-width: 550px; margin: 24px 0 30px; color: #4e5b53; font-size: 17px; line-height: 1.7; }
.search { max-width: 590px; padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 10px; background: white; border-radius: 15px; box-shadow: var(--shadow); }
.search span { color: var(--sage); font-size: 28px; transform: rotate(-20deg); }
.search input { flex: 1; min-width: 0; padding: 12px 4px; border: 0; outline: none; background: transparent; }
.search button { padding: 13px 24px; border: 0; border-radius: 10px; color: white; background: var(--sage); cursor: pointer; }
.search button:hover { background: #365840; }
.featured-recipe { height: 530px; min-width: 0; position: relative; overflow: hidden; border-radius: 26px; color: white; background: #d7c3a0; box-shadow: var(--shadow); }
.featured-recipe > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s ease; }
.featured-recipe:hover > img { transform: scale(1.025); }
.featured-gradient { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,29,25,.86) 0%, rgba(23,29,25,.42) 42%, rgba(23,29,25,0) 74%); }
.featured-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px; }
.featured-badge { display: inline-block; margin-bottom: 13px; padding: 7px 11px; border-radius: 999px; color: var(--ink); background: rgba(255,253,249,.94); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.featured-content h2 { max-width: 540px; color: white; font-size: clamp(34px, 3.2vw, 52px); }
.featured-content > p { max-width: 560px; margin: 14px 0 22px; color: rgba(255,255,255,.86); line-height: 1.6; }
.featured-bottom { padding-top: 17px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(255,255,255,.28); font-size: 13px; }
.featured-bottom a { padding: 10px 15px; border-radius: 9px; color: var(--ink); background: white; font-weight: 700; }

.section { max-width: 1320px; margin: 0 auto; padding: 98px clamp(22px, 5vw, 62px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.section-heading > p { max-width: 430px; color: var(--muted); line-height: 1.7; }
.categories { padding-top: 78px; padding-bottom: 68px; }
.categories .section-heading { margin-bottom: 24px; }
.category-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.category-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); cursor: pointer; text-align: left; transition: .25s ease; }
.category-card:hover, .category-card.active { border-color: var(--sage); background: var(--sage-light); transform: translateY(-3px); }
.category-cover { display: block; overflow: hidden; flex: 0 0 auto; }
.category-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.category-card-copy { min-width: 0; display: flex; flex-direction: column; }
.category-name { font-weight: 700; line-height: 1.25; }
.category-count { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.category-arrow { margin-left: auto; color: var(--sage); font-size: 21px; opacity: 0; transform: translateX(-7px); transition: opacity .2s ease, transform .2s ease; }
.category-card:hover .category-arrow, .category-card:focus-visible .category-arrow { opacity: 1; transform: translateX(0); }
.style-horizontal .category-card { min-height: 96px; padding: 11px; display: flex; align-items: center; gap: 13px; }
.style-horizontal .category-cover { width: 72px; height: 72px; border-radius: 19px; }

.recipes { padding-top: 46px; }
.text-button { border: 0; color: var(--sage); background: none; cursor: pointer; font-weight: 700; }
.result-message { min-height: 20px; color: var(--muted); }
.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.recipe-card { overflow: hidden; border-radius: 22px; background: var(--white); box-shadow: 0 8px 28px rgba(40,55,45,.07); transition: .25s ease; }
.recipe-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.recipe-image { height: 255px; position: relative; overflow: hidden; background: #dfe5da; }
.recipe-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.recipe-card:hover img { transform: scale(1.04); }
.recipe-tag { position: absolute; left: 15px; top: 15px; padding: 7px 11px; border-radius: 999px; background: rgba(255,253,249,.92); font-size: 11px; font-weight: 700; }
.recipe-body { padding: 23px; }
.recipe-body h3 { margin: 0 0 11px; font: 700 26px "Playfair Display", serif; }
.recipe-body p { min-height: 47px; color: var(--muted); line-height: 1.55; font-size: 14px; }
.recipe-meta { display: flex; gap: 18px; padding-top: 16px; border-top: 1px solid #ebe9e2; color: #526057; font-size: 12px; font-weight: 600; }

.story { margin-bottom: 90px; display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: clamp(30px, 7vw, 100px); border-radius: 30px; background: var(--sage-light); }
.story-monogram { width: 180px; height: 180px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--sage); font: 700 95px "Playfair Display", serif; }
.story p:last-child { max-width: 720px; color: #526057; line-height: 1.8; }
footer { padding: 42px clamp(22px, 5vw, 76px); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(24px, 4vw, 55px); color: var(--muted); border-top: 1px solid var(--line); font-size: 13px; }
.footer-main { display: flex; align-items: center; justify-content: center; gap: 20px; }
.footer-main a { color: var(--muted); }
.footer-main a:hover { color: var(--berry); }
footer p:last-child { justify-self: end; }
.footer-socials { display: grid; gap: 9px; }
.footer-socials > span { color: var(--muted); font-size: 11px; }
.social-icons { display: flex; align-items: center; gap: 8px; }
.social-icon-link { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--white); transition: .2s ease; }
.social-icon-link:hover { color: white; border-color: var(--sage); background: var(--sage); transform: translateY(-2px); }
.social-icon-link svg, .social-icon svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.author-social-section { padding: 80px 22px; background: var(--sage-light); }
.author-social-inner { max-width: 1100px; margin: 0 auto; }
.author-social-inner h2 { margin-bottom: 32px; }
.author-social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.author-social-link { min-height: 82px; padding: 16px 18px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; border: 1px solid rgba(72,107,84,.16); border-radius: 16px; background: var(--white); transition: .2s ease; }
.author-social-link:hover { border-color: var(--sage); transform: translateY(-2px); }
.author-social-link .social-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--sage); }
.author-social-link strong, .author-social-link small { display: block; }
.author-social-link small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.author-social-arrow { color: var(--sage); font-size: 20px; }

@media (max-width: 920px) {
  .desktop-nav { display: none; }
  .site-header.menu-open .desktop-nav { position: absolute; top: 66px; left: 12px; right: 12px; padding: 20px; display: flex; align-items: center; flex-direction: column; gap: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
  .menu-button { display: block; margin-left: 14px; }
  .hero { min-height: auto; padding: 70px 28px 35px; grid-template-columns: 1fr; gap: 35px; }
  .hero-content { width: 100%; padding: 0; }
  .featured-recipe { height: 470px; }
  .category-list { grid-template-columns: repeat(2, 1fr); }
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  footer { grid-template-columns: 1fr 1fr; }
  footer p:last-child { justify-self: end; }
}

@media (max-width: 620px) {
  .site-header { height: 66px; }
  .brand-picture { height: 42px; }
  .brand-word { font-size: 24px; }
  .hero { min-height: auto; margin: 0; padding: 55px 20px 24px; border-radius: 0 0 25px 25px; }
  h1 { font-size: 43px; }
  .hero-copy { font-size: 15px; }
  .search { display: grid; grid-template-columns: 28px 1fr; }
  .search button { grid-column: 1 / -1; }
  .featured-recipe { height: 430px; border-radius: 18px; }
  .featured-content { padding: 24px; }
  .featured-content h2 { font-size: 35px; }
  .featured-content > p { font-size: 14px; }
  .featured-bottom { align-items: flex-start; flex-direction: column; }
  .section { padding: 72px 20px; }
  .section-heading { align-items: start; flex-direction: column; }
  .style-horizontal { grid-template-columns: 1fr; }
  .recipe-grid { grid-template-columns: 1fr; }
  .recipe-image { height: 280px; }
  .story { margin: 0 12px 60px; grid-template-columns: 1fr; }
  .story-monogram { width: 110px; height: 110px; font-size: 58px; }
  footer { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { justify-content: center; }
  .footer-main { flex-direction: column; }
  footer p:last-child { justify-self: center; }
  .social-icons { justify-content: center; flex-wrap: wrap; }
  .author-social-grid { grid-template-columns: 1fr; }
  .author-social-link { text-align: left; }
}
.data-unavailable{max-width:680px;margin:clamp(80px,14vh,160px) auto;padding:42px 32px;text-align:center;background:#fff;border:1px solid #dfe8df;border-radius:24px;box-shadow:0 16px 50px rgba(39,65,44,.08)}
.data-unavailable-mark{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 18px;border-radius:50%;background:#eef5ee;color:#35633d;font-size:26px;font-weight:700}.data-unavailable h1{margin:0 0 12px;font-size:clamp(28px,4vw,42px)}.data-unavailable p{margin:0 auto 24px;max-width:530px;color:#617064;line-height:1.6}.data-unavailable button{border:0;border-radius:999px;padding:12px 20px;background:#35633d;color:#fff;font:inherit;font-weight:700;cursor:pointer}