@import url('https://fonts.googleapis.com/css2?family=Ultra&family=Inter:wght@400;500;600;700&display=swap');
:root{--paper:#f5f1e9;--ink:#111;--muted:#6f6b65;--line:#d8d1c7;--max:980px}
*{box-sizing:border-box} html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif} body{min-height:100vh}
a{color:inherit}.recipe{max-width:var(--max);margin:0 auto;background:var(--paper)}
.hero{width:100%;aspect-ratio:4/3;background:#222;overflow:hidden}.hero img{width:100%;height:100%;object-fit:cover;display:block}.hero.empty{display:grid;place-items:center;color:#aaa;font-size:14px}
.content{padding:34px 34px 70px}.title{font-family:Ultra,serif;font-weight:400;font-size:clamp(42px,7vw,74px);line-height:.98;letter-spacing:-.025em;margin:0 0 20px}.meta{font-size:12px;font-weight:700;letter-spacing:.08em;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:24px}.grid{display:grid;grid-template-columns:1fr 1.55fr;gap:36px}.section-title{font-size:13px;letter-spacing:.08em;margin:0 0 14px}.ingredients{margin:0;padding-left:20px}.ingredients li{margin:0 0 9px;line-height:1.35}.steps{list-style:none;margin:0;padding:0}.step{display:grid;grid-template-columns:28px 1fr;gap:10px;margin-bottom:18px}.step-num{font-weight:700;font-size:18px}.step h3{font-size:14px;margin:0 0 3px}.step p{font-size:14px;line-height:1.45;margin:0;color:#272727}
.home{width:100%;max-width:none;margin:0;padding:32px clamp(18px,3vw,48px) 70px}.home h1{font-family:Ultra,serif;font-size:clamp(42px,5vw,68px);font-weight:400;line-height:1;margin:0 0 34px}.cards{width:100%;columns:240px auto;column-gap:clamp(16px,2vw,28px)}.card{display:inline-block;width:100%;margin:0 0 clamp(24px,3vw,38px);break-inside:avoid;text-decoration:none;vertical-align:top}.card .thumb{width:100%;background:#222;overflow:hidden;border-radius:18px;display:grid;place-items:center;color:#aaa;font-size:14px;transition:transform .2s ease,box-shadow .2s ease}.card .thumb.has-image{min-height:160px}.card .thumb.placeholder{aspect-ratio:4/5;background:linear-gradient(145deg,#34312d,#171614)}.card img{width:100%;height:auto;display:block}.card h2{font-family:Ultra,serif;font-weight:400;font-size:clamp(23px,2vw,31px);line-height:1.06;margin:13px 8px 0}.card:hover .thumb,.card:focus-visible .thumb{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.16)}.recipe-footer{border-top:1px solid var(--line);margin-top:38px;padding-top:24px}.back{display:inline-block;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none}.back:hover{text-decoration:underline}.notice{padding:14px;border:1px solid #b35336;background:#fff3ed}.empty-state{color:var(--muted)}
@media (orientation:landscape) and (min-width:900px){body{overflow:hidden}.recipe{max-width:none;height:100vh;display:grid;grid-template-columns:42vw 1fr}.hero{height:100vh;aspect-ratio:auto;position:sticky;top:0}.content{height:100vh;overflow-y:auto;padding:48px 54px 80px}.title{font-size:clamp(48px,5vw,78px)}.grid{grid-template-columns:1fr;gap:26px}.ingredients{columns:2;column-gap:34px}.ingredients li{break-inside:avoid}.home{height:100vh;overflow:auto}}
@media (max-width:700px){.content{padding:26px 22px 60px}.grid{grid-template-columns:1fr}.title{font-size:42px}.ingredients{columns:1}.home{padding:26px 14px 50px}.home h1{margin-left:4px}.cards{columns:2 150px;column-gap:12px}.card{margin-bottom:22px}.card .thumb{border-radius:14px}.card h2{font-size:21px;margin:10px 5px 0}}