/* Recipe pages share the site's typography, colors, and motion. */
.recipe-page [hidden] { display:none!important; }
.editorial.recipe-page .page-intro h1 { font-size:clamp(38px,5vw,54px); line-height:1.1; }
.editorial.recipe-page .page-intro p { font:400 17px/1.8 var(--sans); max-width:530px; }
.kitchen-intro { position:relative; padding-right:130px; }
.kitchen-mark { position:absolute; right:0; top:8px; width:96px; height:106px; color:var(--link); }
.kitchen-mark { overflow:visible; }
.steam-wisp { animation:steam-arrive 1800ms var(--ease) both; }
.steam-wisp:nth-child(2) { animation-delay:220ms; } .steam-wisp:nth-child(3) { animation-delay:440ms; }
.kitchen-intro:hover .steam-wisp { animation:steam-rise 1800ms ease-in-out infinite; }
.kitchen-intro:hover .steam-wisp:nth-child(2) { animation-delay:-600ms; } .kitchen-intro:hover .steam-wisp:nth-child(3) { animation-delay:-1200ms; }
.pot-lid { transform-origin:50px 41px; transition:transform 500ms var(--ease); }
.kitchen-intro:hover .pot-lid { transform:translateY(-3px) rotate(-2deg); }
@keyframes steam-arrive { from {opacity:0;transform:translateY(6px)} to {opacity:.8;transform:translateY(0)} }
@keyframes steam-rise { 0%,100% {opacity:.4;transform:translateY(3px)} 50% {opacity:1;transform:translateY(-4px)} }
.input-section { border-top:1px solid var(--line); padding-top:28px; }
.input-section label { display:block; font:500 14px/1.6 var(--sans); margin-bottom:12px; }
.input-section textarea { box-sizing:border-box; width:100%; min-height:125px; resize:vertical; padding:17px 19px; border:1px solid var(--line); border-radius:5px; background:var(--wash); color:var(--text); font:400 16px/1.75 var(--sans); transition:border-color 220ms var(--ease); }
.input-section textarea::placeholder { color:var(--muted); opacity:1; }
.input-section textarea:focus { border-color:var(--link); }
.editorial.recipe-page .field-hint { font-size:12px; color:var(--muted); margin:8px 0 22px; }
.recipe-actions { display:flex; gap:13px; flex-wrap:wrap; align-items:center; }
.editorial.recipe-page .generate-btn, .editorial.recipe-page .surprise-btn { min-height:46px; padding:11px 20px; border-radius:4px; border:1px solid var(--text); background:var(--text); color:var(--bg); font:500 14px/1.6 var(--sans); transition:opacity 200ms var(--ease),transform 200ms var(--ease); }
.generate-btn > span { margin-left:14px; display:inline-block; transition:transform 300ms var(--ease); }
.generate-btn:hover > span { transform:translate(2px,-2px); }
.editorial.recipe-page .surprise-btn { border-color:var(--line); color:var(--text); background:transparent; }
.editorial.recipe-page button:disabled { opacity:.5; cursor:wait; }
.generate-btn:active, .surprise-btn:active { transform:translateY(1px); }
.recipe-status { font-size:13px; color:var(--muted); min-height:22px; margin:14px 0 0; }
.error-msg { margin:16px 0; padding:14px 18px; border-left:2px solid var(--clay,#a77543); background:var(--wash); font-size:14px; }
.result-section { margin:38px 0 55px; padding-top:30px; border-top:1px solid var(--line); animation:recipe-arrive 420ms var(--ease); }
@keyframes recipe-arrive { from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:translateY(0)} }
.editorial.recipe-page .eyebrow { font:400 11px/1.6 var(--sans); color:var(--link); margin:0 0 12px; }
.editorial.recipe-page .result-heading h2 { font:400 36px/1.2 var(--serif); letter-spacing:-.03em; margin:0 0 15px; }
.result-heading > p:not(.eyebrow) { color:var(--muted); font-size:15px; }
.recipe-meta { display:flex; flex-wrap:wrap; gap:7px 20px; margin:18px 0 24px; font:400 12px/1.7 var(--sans); color:var(--muted); }
.recipe-meta span { white-space:normal; }
.recipe-image-wrap, .step-image-wrap { margin:24px 0; background:var(--wash); border-radius:5px; overflow:hidden; }
.recipe-image-wrap img { display:block; width:100%; max-height:440px; object-fit:cover; }
.step-image-wrap img { display:block; width:100%; max-height:300px; object-fit:cover; }
.recipe-image-wrap img, .step-image-wrap img { animation:recipe-arrive 400ms var(--ease); }
.image-loading { margin:0; padding:28px 18px; color:var(--muted); font:400 13px/1.7 var(--sans); }
.recipe-method { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:38px; margin:32px 0; }
.editorial.recipe-page h3 { font:400 25px/1.3 var(--serif); margin:0 0 19px; letter-spacing:-.025em; }
.editorial.recipe-page h4 { font:500 14px/1.6 var(--sans); margin:25px 0 12px; }
.recipe-method ol { margin:0; padding-left:22px; }
.recipe-method ol > li { padding-left:6px; margin:0 0 23px; font:400 15px/1.85 var(--sans); }
.recipe-method ol > li::marker { color:var(--link); }
.recipe-method ol > li::before { content:none; }
.editorial.recipe-page .shopping-list { list-style:none; padding:0; margin:0; }
.editorial.recipe-page .shopping-list li { display:flex; gap:11px; align-items:baseline; padding:0; margin:0 0 10px; font:400 14px/1.75 var(--sans); }
.editorial.recipe-page .shopping-list li::before { content:none; }
.shopping-list input { accent-color:var(--link); flex-shrink:0; width:15px; height:15px; margin:0; cursor:pointer; }
.shopping-list label { padding:5px 0; cursor:pointer; }
.shopping-list input:checked + label { color:var(--muted); text-decoration:line-through; }
.recipe-nutrition { border-top:1px solid var(--line); padding-top:23px; }
.recipe-nutrition h3 > span { font:400 11px var(--sans); color:var(--muted); margin-left:10px; }
.nutrition-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.nutrition-item { font:400 12px/1.8 var(--sans); color:var(--muted); overflow-wrap:anywhere; }
.nutrition-item strong { display:block; color:var(--text); font:400 23px/1.5 var(--serif); }
.past-recipes { border-top:1px solid var(--line); margin-top:35px; padding-top:27px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:15px; }
.editorial.recipe-page .section-heading h2 { font:400 29px/1.3 var(--serif); margin:0 0 20px; }
#savedStatus { font-size:13px; color:var(--muted); }
.editorial.recipe-page .quiet-button { color:var(--link); background:none; border:0; padding:10px 0; font:400 13px var(--sans); }
.editorial.recipe-page .past-recipe-item { display:flex; width:100%; align-items:center; gap:16px; padding:17px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); text-align:left; }
.past-recipe-item:hover .past-recipe-name { color:var(--link); }
.past-recipe-thumb { width:52px; height:52px; object-fit:cover; border-radius:3px; }
.past-recipe-info { flex:1; min-width:0; }
.past-recipe-name { font:400 22px/1.4 var(--serif); transition:color 220ms var(--ease); }
.past-recipe-date { font:400 11px/1.5 var(--sans); color:var(--muted); margin-top:5px; }
.library-note { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:25px 0; margin-top:37px; font-size:13px; }
.library-note > span { color:var(--muted); }
.editorial.recipe-page .library-entry { display:grid; grid-template-columns:150px minmax(0,1fr) 16px; gap:27px; align-items:center; padding:28px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--text); }
.library-entry img { display:block; width:150px; height:120px; object-fit:cover; border-radius:4px; }
.editorial.recipe-page .library-entry h2 { font:400 28px/1.3 var(--serif); margin:0 0 9px; }
.library-entry p { font-size:14px; color:var(--muted); margin:0 0 10px; }
.library-entry div > span { font-size:11px; color:var(--muted); }
.library-arrow { color:var(--link); transition:transform 250ms var(--ease); }
.library-entry:hover .library-arrow { transform:translate(2px,-2px); }
.recipe-photo { margin:0 0 40px; }
.recipe-photo img { display:block; width:100%; height:auto; max-height:440px; object-fit:cover; border-radius:5px; }
.editorial.recipe-page .recipe { padding:30px 0; margin:0; border:0; border-top:1px solid var(--line); background:transparent; border-radius:0; }
.recipe > ul, .ingredients > ul { list-style:disc; padding-left:22px; }
.recipe li { margin:10px 0; padding-left:3px; font-size:15px; }
.recipe li::before { content:none; }
@media(max-width:600px) {
 .kitchen-intro { padding-right:0; }
 .kitchen-mark { position:static; width:65px; height:72px; margin:12px 0 -15px; }
 .editorial.recipe-page .page-intro h1 { font-size:39px; }
 .editorial.recipe-page .page-intro p { font-size:16px; }
 .recipe-method { grid-template-columns:1fr; gap:30px; }
 .nutrition-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .editorial.recipe-page .result-heading h2 { font-size:30px; }
 .editorial.recipe-page .library-entry { grid-template-columns:80px minmax(0,1fr); gap:17px; }
 .library-entry img { width:80px; height:90px; }
 .editorial.recipe-page .library-entry h2 { font-size:23px; }
 .library-arrow { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .recipe-page *, .recipe-page *::before, .recipe-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

.editorial.recipe-page .recipe > h2 { font:400 29px/1.3 var(--serif); margin:0 0 23px; letter-spacing:-.025em; }
.editorial.recipe-page .recipe h3 { font:500 14px/1.6 var(--sans); margin:25px 0 12px; letter-spacing:0; }

/* Keep the method steady while optional photos arrive. */
.recipe-image-wrap, .step-image-wrap { display:grid; align-items:center; }
.recipe-image-wrap { aspect-ratio:16 / 9; }
.step-image-wrap { aspect-ratio:4 / 3; }
.recipe-image-wrap > *, .step-image-wrap > * { grid-area:1 / 1; }
.recipe-image-wrap img, .step-image-wrap img { height:100%; max-height:none; min-height:0; }
