:root{
  --ink:#2a2623;
  --ink-soft:#4d463f;
  --paper:#f6f0e6;
  --paper-2:#efe5d5;
  --accent:#5c3d6e; /* фиолетовый акцент, как на эскизе */
  --stroke:#d2c4b0;
  --shadow:rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:'Cormorant Garamond', serif;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.55), rgba(255,255,255,0)),
    radial-gradient(900px 700px at 80% 20%, rgba(255,255,255,.35), rgba(255,255,255,0)),
    linear-gradient(180deg, #201a17, #0f0c0b);
}

/* Бумага с лёгкой текстурой */
.paper{
  min-height:100%;
  background:
    radial-gradient(circle at 20% 25%, rgba(0,0,0,.05), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 80% 75%, rgba(0,0,0,.04), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.015), rgba(0,0,0,.015) 1px, rgba(255,255,255,0) 3px, rgba(255,255,255,0) 7px),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  padding:20px 18px 34px;
}

.container{
  max-width:960px;
  margin:0 auto;
  padding:18px 10px 0;
}

.topbar{
  max-width:960px;
  margin:0 auto;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  padding:6px 10px 0;
}

.brand{
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  letter-spacing:.02em;
  font-size:18px;
}

.menu{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  justify-content:flex-end;
}

.menu a{
  text-decoration:none;
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
  padding:2px 0;
  font-weight:600;
}

.menu a:hover{color:var(--ink); border-bottom-color:var(--stroke)}
.menu a.active{color:var(--accent); border-bottom-color:var(--accent)}

.footer{
  margin-top:26px;
  padding:10px 0 0;
}
.footer-inner{
  max-width:960px;
  margin:0 auto;
  padding:0 10px;
  color:rgba(42,38,35,.65);
  font-size:14px;
}

.hero{
  padding:28px 0 36px;
}

.hero-frame{
  position:relative;
  border:2px solid var(--stroke);
  border-radius:22px;
  padding:42px 18px 30px;
  background:rgba(255,255,255,.35);
  box-shadow:0 16px 30px var(--shadow);
  overflow:hidden;
}

.hero-title{
  margin:0;
  text-align:center;
  font-weight:700;
  font-size:clamp(34px, 5vw, 56px);
  letter-spacing:.03em;
}

.hero-subtitle{
  margin:8px 0 0;
  text-align:center;
  font-family:'Marck Script', cursive;
  font-size:clamp(18px, 2.2vw, 26px);
  color:var(--ink-soft);
}

.divider{
  width:min(520px, 92%);
  height:10px;
  margin:18px auto 14px;
  background:
    radial-gradient(circle at 50% 50%, var(--stroke) 0 2px, rgba(0,0,0,0) 3px),
    linear-gradient(90deg, rgba(0,0,0,0), var(--stroke), rgba(0,0,0,0));
  opacity:.9;
}

.hero-menu{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  justify-content:center;
  padding:10px 6px 6px;
}

.hero-link{
  display:inline-block;
  text-decoration:none;
  color:var(--ink);
  font-family:'Marck Script', cursive;
  font-size:22px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(92,61,110,.35);
  background:rgba(255,255,255,.55);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition:transform .12s ease, box-shadow .12s ease;
}

.hero-link:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(0,0,0,.12);
}

.page{padding:16px 0 30px}
.page-frame{
  border:2px solid var(--stroke);
  border-radius:18px;
  padding:26px 18px;
  background:rgba(255,255,255,.40);
  box-shadow:0 16px 30px var(--shadow);
}

.page-title{
  margin:0;
  text-align:center;
  font-size:42px;
  letter-spacing:.02em;
}

.page-lead{
  margin:10px auto 0;
  max-width:820px;
  text-align:center;
  font-size:20px;
  color:var(--ink-soft);
  line-height:1.35;
}

.page-text{
  max-width:820px;
  margin:0 auto;
  font-size:19px;
  line-height:1.5;
}

.muted{
  text-align:center;
  color:rgba(42,38,35,.65);
  font-size:18px;
}

.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:16px;
}

.card{
  border:1px solid rgba(210,196,176,.9);
  border-radius:16px;
  background:rgba(255,255,255,.60);
  padding:16px 14px;
  box-shadow:0 12px 22px rgba(0,0,0,.08);
}

.card-title{
  margin:0;
  font-size:28px;
  letter-spacing:.01em;
}
.card-meta{
  margin-top:3px;
  color:rgba(42,38,35,.70);
  font-size:16px;
}

.card-photo{
  width:100%;
  margin:10px 0 8px;
  border-radius:14px;
  border:1px solid rgba(210,196,176,.95);
}

.card-quote{
  margin:10px 0 10px;
  padding:10px 12px;
  border-left:3px solid var(--accent);
  background:rgba(92,61,110,.06);
  border-radius:10px;
  font-size:18px;
}

.card-recipe{
  font-size:18px;
  line-height:1.45;
}

/* Винтажные завитки (SVG через CSS) */
.ornament{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:min(540px, 94%);
  height:34px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.85;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.03));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='60' viewBox='0 0 720 60'%3E%3Cpath d='M60 30c40 0 50-18 80-18s40 18 70 18 40-18 70-18 40 18 70 18 40-18 70-18 40 18 70 18 40-18 70-18 40 18 70 18 40-18 70-18 40 18 70 18' fill='none' stroke='%232a2623' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M360 10c10 10 10 30 0 40c-10-10-10-30 0-40Z' fill='none' stroke='%235c3d6e' stroke-width='2'/%3E%3C/svg%3E");
}

.ornament-top{top:10px}
.ornament-bottom{bottom:10px; transform:translateX(-50%) rotate(180deg)}

@media (min-width: 780px){
  .cards{grid-template-columns:1fr 1fr}
}

@media (max-width: 520px){
  .menu{display:none}
  .hero-frame{padding-top:48px}
}