:root{
  --mustard:#F9B233;
  --wine:#6d2731;
  --brown:#4b3427;
  --paper:#f8f0df;
  --ink:#33271f;
  --cream:#fffaf0;
  --line:#d8c6a6;
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  background:radial-gradient(circle at 15% 15%,#fff9e9 0 2px,transparent 3px),linear-gradient(90deg,rgba(120,80,40,.035) 1px,transparent 1px),var(--paper);
  background-size:31px 31px,8px 8px;
}
.wrap{max-width:960px;margin:auto;padding:22px 18px 70px}
.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}
.brand{font-family:Arial,sans-serif;font-weight:900;letter-spacing:.06em;font-size:13px}
.brand b{color:var(--wine)}
.navlink{font:700 12px Arial;color:var(--wine);padding:8px;text-decoration:none}
.eyebrow{text-align:center;margin:28px 0 7px;font:700 11px Arial;letter-spacing:.22em;color:var(--wine)}
h1{text-align:center;font-size:clamp(38px,9vw,66px);line-height:.95;margin:0;color:var(--brown);font-weight:600}
.lead{text-align:center;max-width:560px;margin:15px auto 24px;font-size:17px;line-height:1.55}
.hero,.photoSlot{border-radius:18px;background:rgba(255,255,255,.35);overflow:hidden}
.hero img,.photoSlot img{display:block;width:100%;height:auto;object-fit:cover}
.hero img{max-height:560px}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 34px}
.meta div{background:#fff8e8;border:1px solid var(--line);border-radius:13px;padding:12px 8px;text-align:center}
.ico{width:23px;height:23px;fill:none;stroke:var(--wine);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.meta strong{display:block;font:800 12px Arial;margin-top:5px}
.chapter{display:flex;align-items:center;gap:10px;margin:34px 0 14px}
.chapter span{font:900 11px Arial;letter-spacing:.18em;color:var(--wine)}
.chapter:after{content:"";height:1px;background:var(--line);flex:1}
.step{padding:24px 0;border-bottom:1px solid var(--line)}
.stepGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.step.with-photo .stepGrid{grid-template-columns:minmax(0,1fr)}
.stepText{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:start}
.num{font-size:34px;color:var(--mustard);font-weight:700;line-height:1}
.step h3{font-size:21px;margin:0 0 7px;color:var(--brown)}
.step p{font-size:16px;line-height:1.6;margin:0}
.stepMedia img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#fff8e8;border:1px solid rgba(216,198,166,.55)}
.chef{margin:32px 0;background:var(--wine);color:#fff8e8;border-radius:20px;padding:24px}
.chef small{font:900 11px Arial;letter-spacing:.16em;color:#ffd77c}
.chef h2{margin:7px 0 9px;font-size:25px}
.chef p{margin:0;line-height:1.6}
.note{border-left:5px solid var(--mustard);padding:4px 0 4px 17px;margin:30px 0;line-height:1.55}
.note b{color:var(--wine)}
.caption{text-align:center;font-style:italic;line-height:1.5;margin:10px 20px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.gallery img{width:100%;border-radius:14px;display:block}
.video{width:100%;border-radius:18px;background:#2c251f}
.order{display:block;margin:34px auto 0;width:100%;border:0;border-radius:16px;background:var(--mustard);color:#3b291d;padding:17px 20px;font:900 16px Arial;text-align:center;text-decoration:none;box-shadow:0 7px 0 #d89219}
.footer{text-align:center;margin-top:36px;font:11px Arial;color:#816d58}
.contents{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.card{background:#fff8e8;border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);min-height:120px;display:flex;flex-direction:column;justify-content:space-between}
.card small{font:800 10px Arial;color:var(--wine);letter-spacing:.12em}
.card h2{margin:8px 0 0;font-size:22px;color:var(--brown)}
.bookTitle{text-align:center;font-size:clamp(38px,8vw,60px);margin:28px 0 0;color:var(--brown)}
.introBook{text-align:center;max-width:560px;margin:16px auto 26px;font-size:18px;line-height:1.55}
@media(max-width:520px){
  .wrap{padding-left:14px;padding-right:14px}
  .meta{gap:5px}
  .meta div{padding:10px 4px}
  .stepText{grid-template-columns:48px 1fr}
  .contents{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .stepMedia img{aspect-ratio:auto}
}