/* filename: diorama.css */
:root{
  --cream:#f8f3e8;--ivory:#fffdf8;--ink:#1f2b26;--sage:#2f6a4a;--sage-deep:#245539;--sage-soft:#e4ede6;--oak:#c58b4a;
  --red:#d63a35;--red-soft:#fdeceb;--muted:#5d6a63;--line:#e6ddcd;--shadow:0 10px 30px rgba(90,60,20,.14);
  --serif:Georgia,"Times New Roman",serif;--sans:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --script:"Brush Script MT","Segoe Script","Snell Roundhand",cursive;
  --dur:.35s;--header-h:92px;
  /* Single mask for the approved art, in % of the image box (valid at any scale/offset):
     sloped top along the oak beam (also removes the baked nav dot), right wall x=1304 to y=628,
     floor x 77..1527 to y=780, left edge x=269 with a 4px notch (y 245..292) for the greeting stroke. */
  --scene-mask:polygon(16.1% 7.4%,46% 6.3%,78% 5.74%,78% 66.7%,91.3% 66.7%,91.3% 82.9%,4.6% 82.9%,4.6% 69.1%,16.1% 69.1%,16.1% 31%,16.36% 31%,16.36% 26%,16.1% 26%);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--cream);color:var(--ink);font-family:var(--serif);line-height:1.4;-webkit-text-size-adjust:100%}
html.has-dialog{overflow:hidden;padding-right:var(--sbw,0px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
main{flex:none;min-width:0}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default;opacity:.55}
a{color:inherit}
:focus-visible{outline:3px solid var(--sage);outline-offset:3px;border-radius:6px}
#main:focus,#library-count:focus,.page-title:focus,.recipe-title:focus,.method-current-title:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--sage);color:#fff;padding:10px 14px;z-index:100;border-radius:6px}
.skip-link:focus{top:12px}

/* motion follows the device setting: prefers-reduced-motion:reduce stops the kettle steam, the pendant-glow breathing and all transitions */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .scene-steam{display:none}
}

/* ---- header (rebuilt from mockup) ---- */
.site-header{position:relative;z-index:5;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:16px;padding:14px clamp(16px,3.6vw,64px) 0;min-height:var(--header-h)}
.brand{display:inline-flex;min-height:44px;align-items:center}
.brand img{height:clamp(52px,4.3vw,72px);width:auto}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:clamp(18px,3vw,44px)}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:1.15rem;position:relative;text-decoration:none;transition:color var(--dur)}
.nav-link.is-current::after{content:"";position:absolute;left:50%;bottom:0;width:8px;height:8px;border-radius:50%;background:var(--red);transform:translateX(-50%)}
.nav-link:hover{color:var(--sage)}
.header-tools{display:flex;align-items:center;gap:14px}
.channel-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;text-decoration:none;font-size:1.05rem}
.yt-badge{width:34px;height:24px;border:2px solid var(--red);border-radius:6px;display:grid;place-items:center}
.yt-tri{width:0;height:0;border-left:9px solid var(--red);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.ext{color:var(--muted)}

/* ================= KITCHEN STAGE: desktop composition mirrors the 1672x941 mockup ================= */
.stage{position:relative;width:min(100%,1672px);margin:0 auto}
.site-footer{margin-top:auto}
@media (min-width:1000px){
  .stage{aspect-ratio:1672/941;margin-top:calc(-1 * var(--header-h));margin-bottom:40px}
}
.scene{position:absolute;inset:0;pointer-events:none}
.scene-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;clip-path:var(--scene-mask);-webkit-clip-path:var(--scene-mask)}
/* continuous ambience: two warm pools under the painted pendants (27% and 71% of the light box) and a faint wisp of steam from the kettle */
.scene-light{position:absolute;left:35%;top:16%;width:30%;height:30%;
  background:radial-gradient(ellipse 34% 62% at 27% 22%,rgba(255,214,140,.5),rgba(255,214,140,0) 70%),radial-gradient(ellipse 34% 62% at 71% 22%,rgba(255,214,140,.5),rgba(255,214,140,0) 70%);
  mix-blend-mode:soft-light;transform:translate(var(--lx,0px),var(--ly,0px));transition:transform .6s ease,opacity .7s ease;animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.55}to{opacity:1}}
.scene-steam{position:absolute;left:63.4%;top:30.5%;width:3.2%;aspect-ratio:1/2.2;pointer-events:none;overflow:visible}
.scene-steam::before,.scene-steam::after{content:"";position:absolute;bottom:0;left:25%;width:50%;height:55%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.5),rgba(255,255,255,0) 70%);filter:blur(2px);opacity:0;animation:steam 5.5s ease-out infinite}
.scene-steam::after{left:40%;width:40%;animation-delay:2.7s;animation-duration:6.5s}
@keyframes steam{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:.45}100%{opacity:0;transform:translateY(-110%) translateX(-10%) scale(1.3)}}

/* overlay elements: percentage coordinates from the mockup */
.script-greeting{position:absolute;left:2.1%;top:20.5%;margin:0;font-family:var(--script);font-size:clamp(1.6rem,3.1vw,3.3rem);color:var(--red);line-height:1.05;transform:rotate(-7deg);width:15%}
.script-heart{display:block;font-family:var(--serif);font-size:.6em;margin-left:5.5em;line-height:1}

.welcome-panel{position:absolute;left:78.3%;top:12.3%;width:19.3%;padding:clamp(16px,2.3vw,38px) clamp(12px,1.35vw,22px) clamp(12px,1.5vw,24px);background:var(--ivory);border-radius:18px;box-shadow:var(--shadow);animation:rise .7s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{margin:0 0 .8em;font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.welcome-panel .eyebrow{font-size:clamp(.6rem,.68vw,.72rem)}
.welcome-panel .eyebrow::after{content:"";display:block;width:48px;height:2px;background:var(--sage);margin-top:14px}
.welcome-panel h2{margin:0 0 .4em;font-weight:400;font-size:clamp(1.3rem,2.25vw,2.35rem);line-height:1.05;letter-spacing:-.01em}
.welcome-sub{margin:0 0 1.1em;font-size:clamp(.82rem,1.02vw,1.1rem)}
.btn-primary{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 18px;background:var(--sage);color:#fff;border-radius:10px;text-decoration:none;font-size:clamp(.95rem,1.25vw,1.35rem);transition:background var(--dur)}
.btn-primary:hover{background:var(--sage-deep)}
.btn-inline{width:auto;display:inline-flex;font-size:1.05rem}
.panel-rule{border:0;border-top:1px solid var(--line);margin:1.1em 0 .5em}
.watch-link{display:flex;align-items:center;gap:14px;min-height:44px;text-decoration:none;font-size:clamp(.9rem,1.08vw,1.2rem)}
.play-circle{flex:none;width:36px;height:36px;border:2px solid var(--ink);border-radius:50%;position:relative}
.play-circle::after{content:"";position:absolute;left:13px;top:9px;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent}

/* homepage recipe banners: each whole banner is ONE link to its recipe (shared art frame, status, title).
   No nested controls; a subtle lift on hover and a clear focus ring for keyboard users. */
.previews{position:absolute;left:7.3%;right:3.3%;top:83.8%}
.preview-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.5%;align-items:stretch}
.preview-item{display:flex;min-width:0}
.preview-card{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:clamp(8px,1.6vw,26px);flex:1 1 auto;min-width:0;min-height:clamp(64px,6vw,100px);padding:clamp(6px,.6vw,10px) clamp(12px,1.6vw,26px);border-radius:10px;background:var(--ivory);color:inherit;text-decoration:none;transition:transform var(--dur),box-shadow var(--dur),background var(--dur)}
.preview-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(90,60,20,.2);background:#fff}
.preview-card:hover .preview-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.preview-card:active{transform:none}
.preview-card:focus-visible{outline:3px solid var(--sage);outline-offset:4px;border-radius:10px}
.preview-card.is-ready{border:1.5px solid var(--red);box-shadow:var(--shadow)}
.preview-card.is-soon{border:1.5px dashed var(--red);background:rgba(255,253,248,.6)}
.preview-num{font-family:var(--script);font-size:clamp(1.4rem,2.1vw,2.4rem);color:var(--red);font-style:italic}
.previews .preview-frame{width:clamp(114px,13.9vw,233px)}
.preview-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.preview-label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.is-soon .preview-label{color:var(--red)}
.preview-title{margin:0;font-weight:400;font-size:clamp(1rem,1.5vw,1.6rem);line-height:1.1}
.shell-notice{margin:10px 0 0;font-family:var(--sans);font-size:.8rem;color:var(--muted);text-align:center}
.site-footer{padding:20px;text-align:center;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.site-footer a{display:inline-block;padding:10px 2px}
.noscript{text-align:center;padding:16px}

/* ---- Responsive recomposition (<1000px): kitchen-only scene, UI flows as real text ---- */
@media (max-width:999px){
  .site-header{grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:2px 10px;padding:8px 12px 2px;min-height:0}
  .brand{grid-row:1;grid-column:1}
  .brand img{height:44px}
  .header-tools{grid-row:1;grid-column:2;gap:8px}
  .channel-text,.ext{display:none}
  .site-nav{grid-row:2;grid-column:1/-1;justify-self:center}
  .site-nav ul{gap:clamp(10px,4vw,28px)}
  .nav-link{font-size:1.05rem;padding:0 4px}

  .stage{display:grid;gap:16px;padding:0 16px 24px}
  /* Tight scene crop of the source: x 230..1340, y 54..782 (1110x728). The same mask still clips
     the slivers of baked greeting / welcome panel that fall inside this crop. */
  .scene{position:relative;grid-row:2;width:100%;aspect-ratio:1110/728;overflow:hidden;border-radius:14px;pointer-events:auto}
  .scene-art{inset:auto;width:150.63%;height:129.26%;left:-20.72%;top:-7.42%}
  .scene-light{left:32%;top:13.2%;width:45.2%;height:38.7%}
  .scene-steam{left:75.4%;top:32%;width:4.4%}
  .script-greeting{position:static;grid-row:1;transform:rotate(-3deg);width:auto;text-align:center;font-size:2rem;margin:4px 0 0}
  .script-heart{display:inline;margin-left:.3em}
  .welcome-panel{position:static;grid-row:3;width:100%;padding:22px 20px}
  .welcome-panel .eyebrow{font-size:.72rem}
  .welcome-panel h2{font-size:clamp(1.7rem,7vw,2.2rem)}
  .welcome-sub{font-size:1.05rem}
  .btn-primary{font-size:1.1rem}
  .watch-link{font-size:1.05rem}
  .previews{position:static;grid-row:4}
  .preview-list{grid-template-columns:1fr;gap:12px}
  .preview-card{min-height:76px;gap:12px;padding:10px 14px}
  .previews .preview-frame{width:160px}
}
@media (max-width:560px){
  .preview-card{grid-template-columns:minmax(0,42%) minmax(0,1fr)}
  .preview-num{display:none}
  .previews .preview-frame{width:100%}
  .preview-title{font-size:1.05rem}
}

/* ================= Shared controls & dialog ================= */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:none;max-height:none}
dialog::backdrop{background:rgba(40,30,20,.55)}
.about[open]{animation:dlg var(--dur) ease}
@keyframes dlg{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.icon-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:1.6rem;line-height:1;background:var(--cream);transition:background var(--dur)}
.icon-btn:hover{background:var(--line)}
.close-btn{position:absolute;right:12px;top:12px}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--ivory);font-family:var(--serif);text-decoration:none;white-space:nowrap;color:var(--ink);transition:background var(--dur),border-color var(--dur),transform .12s ease}
.btn-ghost:hover{background:var(--cream);border-color:var(--oak)}
.btn-ghost:active,.btn-primary:active,.btn-text:active{transform:scale(.98)}
.btn-back{flex:none}
.btn-text{min-height:44px;padding:0 10px;border-radius:8px;font-family:var(--sans);font-size:.85rem;color:var(--sage);text-decoration:underline;text-underline-offset:3px;transition:background var(--dur)}
.btn-text:hover{background:var(--sage-soft)}
.is-fresh{animation:fade-up .3s ease}
@keyframes fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fav-btn{width:44px;height:44px;flex:none;border-radius:50%;font-size:1.4rem;color:#b9b0a4;display:grid;place-items:center;transition:transform var(--dur),color var(--dur),background var(--dur)}
.fav-btn:hover{transform:scale(1.1);color:var(--red)}
.fav-btn[aria-pressed="true"]{color:var(--red)}
.fav-btn[aria-pressed="true"]>span:first-child{display:inline-block;animation:heart-pop .4s ease}
@keyframes heart-pop{0%{transform:scale(.6)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
.about{width:min(94vw,520px);margin:auto}
.about-frame{position:relative;background:var(--ivory);border-radius:18px;padding:28px 24px;box-shadow:var(--shadow)}
.about-frame .eyebrow{padding-right:48px}
.about-frame h2{margin:0 0 14px;font-weight:400;font-size:1.8rem}
.about-list{margin:0 0 16px}
.about-list dt{font-weight:700;margin-top:10px}
.about-list dd{margin:2px 0 0}
.about-frame a{display:inline-flex;align-items:center;min-height:44px}

/* ================= Full pages (library + recipe): normal document scroll under the persistent header ================= */
.page-library,.page-recipe{animation:fade-up .3s ease both}
.page-inner{width:min(100%,1400px);margin:0 auto;padding:clamp(12px,2vw,28px) clamp(16px,3.6vw,64px) 56px}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:0 0 22px}
.page-heading{flex:1 1 320px;min-width:0}
.page-heading .eyebrow{margin-bottom:.5em}
.page-title{margin:0;font-weight:400;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.01em}
.page-lede{margin:8px 0 0;font-family:var(--sans);font-size:.9rem;color:var(--muted)}
.page-lede:empty{display:none}

/* library controls */
.library-controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;padding:14px 16px;background:var(--cream);border:1px solid var(--line);border-radius:16px;margin:0 0 22px}
.field{display:flex;flex-direction:column;gap:4px;flex:1 1 180px;min-width:0}
.field-search{flex:2 1 260px}
.field-label{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.field input,.field select{min-height:44px;width:100%;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;color:inherit;transition:border-color var(--dur)}
.field input:hover,.field select:hover{border-color:var(--oak)}
.field input:focus-visible,.field select:focus-visible{outline-offset:1px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;white-space:nowrap}
.check input{width:22px;height:22px;accent-color:var(--sage)}
.filters{flex:3 1 520px;min-width:0}
.filters-summary{display:none}
.filters-badge{font-family:var(--sans);font-size:.72rem;color:var(--sage);background:var(--sage-soft);border-radius:999px;padding:2px 8px}
.filters-body{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.filters-body .field{flex:1 1 170px}
.library-body{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.library-main{min-width:0}
.library-count{margin:0 0 12px;font-family:var(--sans);font-size:.85rem;color:var(--muted);min-height:1.2em}
.recipe-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:18px}
.recipe-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(90,60,20,.06);transition:transform var(--dur),box-shadow var(--dur)}
.recipe-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.recipe-card.is-fresh{animation:fade-up .3s ease}
.recipe-card-link{display:flex;flex-direction:column;flex:1 1 auto;text-decoration:none;color:inherit;border-radius:16px}
.recipe-card-link:focus-visible{outline-offset:-4px}
/* collection preview: the same shared 262:92 illustrated frame as the homepage banners */
.recipe-card-art{display:block;padding:14px 14px 0}
.recipe-card-art:empty{display:none}
.recipe-card-art>*{width:100%}
/* one 4:3 thumbnail frame for every entry. Prepared recipes: a finished-food crop of the original card, contained and
   centred on card white (never stretched). Not yet prepared: the WHOLE original card contained in the same frame. */
.card-thumb{position:relative;display:block;width:100%;aspect-ratio:4/3;background:var(--cream);border-radius:10px;overflow:hidden}
.card-thumb>img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);max-width:none;object-fit:contain;object-position:center}
.card-thumb.is-food{display:grid;place-items:center;background:#fff;border:1px solid var(--line)}
.card-thumb.is-food .card-crop{width:min(100%,calc(100% * var(--crop-w,4) / var(--crop-h,3) * .75));border-radius:0}
/* derived WebP thumbnail: already exactly the region (masks applied), so it simply fills the same crop box */
.card-thumb.is-food .card-crop.is-derived img{left:0;top:0;width:100%;height:100%}
.recipe-card-body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;padding:14px 16px 14px}
.recipe-card-status{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.recipe-card[data-status="soon"] .recipe-card-status,.page-recipe[data-status="soon"] .recipe-status{color:var(--red)}
.recipe-card-title{font-size:1.3rem;line-height:1.15}
/* one status vocabulary: red pill with a play mark = verified Video recipe / episode; plain sage label = Recipe card */
.preview-badge,.recipe-card[data-status=video] .recipe-card-status,.page-recipe[data-status=video] .recipe-status{display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:2px 9px 2px 8px;border:1.5px solid var(--red);border-radius:999px;background:var(--red-soft);color:#a8231f;line-height:1.35}
.preview-badge::before,.recipe-card[data-status=video] .recipe-card-status::before,.page-recipe[data-status=video] .recipe-status::before{content:'';flex:none;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.recipe-card-meta{font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.recipe-card-meta:empty{display:none}
.recipe-card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;color:var(--sage);transition:gap var(--dur)}
.recipe-card-link:hover .recipe-card-cta{gap:12px}
.recipe-card-fav{position:absolute;top:10px;right:10px;background:rgba(255,253,248,.92);box-shadow:0 2px 8px rgba(90,60,20,.14)}
.library-empty{padding:40px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px;background:var(--ivory)}
.library-empty p{margin:0;font-size:1.05rem}
.library-more{display:flex;justify-content:center;padding:20px 0 4px}
.library-aside{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;padding:14px 20px;background:var(--ivory);border:1px solid var(--line);border-radius:16px}
.library-aside h2{margin:0;font-weight:400;font-size:1.3rem}
.library-aside p{flex:1 1 320px;margin:0;font-size:.95rem}
.aside-fav{font-family:var(--sans);font-size:.85rem;color:var(--sage)}
.aside-fav:empty{display:none}
.aside-link{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}
.aside-link .play-circle{width:32px;height:32px}
.aside-link .play-circle::after{left:11px;top:7px;border-left:10px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}

/* original-card viewport: the whole image positioned inside an overflow-hidden box (nothing redrawn, never regenerated) */
.card-crop{position:relative;overflow:hidden;aspect-ratio:calc(var(--crop-w,4) / var(--crop-h,3));background:#fff;border-radius:12px}
.card-crop img{position:absolute;max-width:none;width:calc(100% * var(--src-w,1) / var(--crop-w,1));height:auto;
  left:calc(-100% * var(--crop-x,0) / var(--crop-w,1));top:calc(-100% * var(--crop-y,0) / var(--crop-h,1));user-select:none;-webkit-user-drag:none}

/* ================= Recipe page ================= */
.recipe-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 20px}
.recipe-heading{flex:1 1 320px;min-width:0}
.recipe-status{margin:0 0 4px;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.recipe-status:empty{display:none}
.recipe-title{margin:0;font-weight:400;font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.08;overflow-wrap:anywhere}
.recipe-meta{margin:6px 0 0;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.recipe-meta:empty{display:none}
.fav-large{width:auto;margin-left:auto;padding:0 16px 0 12px;gap:8px;border:1px solid var(--line);border-radius:999px;background:var(--ivory);display:inline-flex;align-items:center;font-size:1rem;color:var(--ink)}
.fav-large:hover{transform:none;border-color:var(--red)}
.fav-large .fav-heart{font-size:1.4rem;line-height:1;color:#b9b0a4;transition:color var(--dur)}
.fav-large[aria-pressed="true"]{border-color:var(--red);background:var(--red-soft)}
.fav-large[aria-pressed="true"] .fav-heart{color:var(--red);animation:heart-pop .4s ease}
.recipe-missing{padding:24px;border:1px dashed var(--line);border-radius:12px;background:var(--ivory);font-size:1.05rem}
.recipe-hero{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:20px 32px;align-items:start}
.recipe-figure{margin:0}
.recipe-figure:has(.recipe-visual:empty){display:none}
.recipe-visual>*{width:100%}
.recipe-visual .card-crop{box-shadow:var(--shadow)}
.recipe-visual .art-juice,.recipe-visual .art-pizza{border-radius:12px;box-shadow:var(--shadow)}
.recipe-figure figcaption{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin-top:8px}
.recipe-figure figcaption:empty{display:none}
.recipe-figure figcaption .caption-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:.85rem;color:var(--sage);text-decoration:underline;text-underline-offset:3px}
.recipe-figure figcaption .caption-link:hover{color:var(--sage-deep)}
.recipe-summary{min-width:0}
.recipe-notice{margin:0 0 14px;padding:10px 12px;background:var(--cream);border-left:4px solid var(--red);border-radius:6px;font-family:var(--sans);font-size:.9rem}
.recipe-facts{margin:0 0 14px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:1rem}
.recipe-facts:empty{display:none}
.recipe-facts dt{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);align-self:center}
.recipe-facts dd{margin:0}
.recipe-video{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:8px 0 0}
.recipe-video:empty,.recipe-source:empty{display:none}
.recipe-video a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;background:var(--sage);color:#fff;border-radius:10px;text-decoration:none;transition:background var(--dur)}
.recipe-video a:hover{background:var(--sage-deep)}
.video-none{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.video-meta{font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.recipe-source{margin:12px 0 0;font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.recipe-section{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.section-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.section-head h2{margin:0;font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1}
.section-status{margin:0;font-family:var(--sans);font-size:.85rem;color:var(--sage);min-height:1.2em}
.section-head .btn-text{margin-left:auto}
.section-hint{margin:6px 0 18px;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.section-hint:empty{display:none}

/* ingredients: large original art per tile, a ring that fills with a tick */
.ingredient-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:16px}
.ingredient-tile{min-width:0}
.ingredient-toggle{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;height:100%;padding:12px 12px 14px;border:1.5px solid var(--line);border-radius:16px;background:#fff;text-align:left;transition:border-color var(--dur),background var(--dur),transform .12s ease,box-shadow var(--dur)}
.ingredient-toggle:hover{border-color:var(--sage);box-shadow:0 6px 16px rgba(90,60,20,.1)}
.ingredient-toggle:active{transform:scale(.98)}
.ingredient-art{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#fff}
.ingredient-art>*{width:100%}
/* square frame: the original crop is contained (never stretched), so every label sits at the same height */
.ingredient-art .card-crop{width:min(100%,calc(100% * var(--crop-w,1) / var(--crop-h,1)))}
.ingredient-art:empty{display:none}
.ingredient-check{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;border:2.5px solid var(--sage);background:rgba(255,253,248,.94);box-shadow:0 2px 8px rgba(90,60,20,.18);display:grid;place-items:center;transition:background var(--dur),transform var(--dur),box-shadow var(--dur)}
.ingredient-check::after{content:"";width:9px;height:15px;margin-top:-3px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.ingredient-toggle:hover .ingredient-check{box-shadow:0 0 0 5px rgba(47,106,74,.16)}
.ingredient-toggle[aria-pressed="true"]{border-color:var(--sage);background:var(--sage-soft)}
.ingredient-toggle[aria-pressed="true"] .ingredient-check{background:var(--sage);animation:check-pop .35s ease}
.ingredient-toggle[aria-pressed="true"] .ingredient-check::after{transform:rotate(45deg) scale(1)}
.ingredient-toggle[aria-pressed="true"] .ingredient-label{color:var(--sage)}
@keyframes check-pop{0%{transform:scale(.8)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.ingredient-label{font-size:1.1rem;line-height:1.25;padding-right:4px}
.ingredient-alt{margin-top:-4px;font-family:var(--sans);font-size:.82rem;line-height:1.3;color:var(--muted)}

/* method: step list, progress bar and one illustrated stage with the controls right beside the text */
.method-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:-6px 0 22px}
.method-bar-fill{display:block;height:100%;width:var(--progress,0%);border-radius:999px;background:var(--sage);transition:width .4s ease}
.method-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:24px 36px;align-items:start}
.method-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.method-step{min-width:0}
.method-step-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--ivory);text-align:left;font-family:var(--sans);font-size:.9rem;line-height:1.2;transition:background var(--dur),color var(--dur),border-color var(--dur),transform .12s ease}
.method-step-btn:hover{border-color:var(--sage);background:var(--sage-soft)}
.method-step-btn:active{transform:scale(.98)}
.method-step-num{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cream);font-weight:700;transition:background var(--dur),color var(--dur)}
.method-step-title{min-width:0;overflow-wrap:anywhere}
.method-step.is-done .method-step-num{background:var(--sage-soft);color:var(--sage)}
.method-step.is-done .method-step-n{display:none}
.method-step.is-done .method-step-num::after{content:"✓"}
.method-step.is-done .method-step-btn:not([aria-current="step"]) .method-step-title{color:var(--muted);text-decoration:line-through}
.method-step-btn[aria-current="step"]{background:var(--sage);color:#fff;border-color:var(--sage)}
.method-step-btn[aria-current="step"] .method-step-num{background:rgba(255,255,255,.22);color:#fff}
.method-stage{display:grid;gap:18px;padding:clamp(14px,2vw,28px);border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 4px 14px rgba(90,60,20,.06)}
.method-stage.is-fresh{animation:fade-up .35s ease}
.method-art{display:flex;gap:12px;align-items:flex-start}
.method-art:empty{display:none}
.method-art>*{flex:1 1 0;min-width:0;box-shadow:var(--shadow)}
.method-art>:nth-child(n+2){flex:0 0 clamp(90px,18%,170px)}
/* a small source crop is never blown up past 1.5x its source pixels; a lone crop sits centred */
.method-art>.card-crop{max-width:calc(var(--crop-w,2000) * 1.5px)}
.method-art>.card-crop:only-child{margin-inline:auto}
.method-current{min-width:0}
.method-current-label{margin:0 0 4px;font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.method-current-title{margin:0 0 10px;font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.1}
.method-current-text{margin:0 0 14px;font-size:1.1rem;line-height:1.5}
.method-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.recipe-method.is-complete .method-current{padding:16px 18px;border-radius:12px;background:var(--sage-soft);border-left:4px solid var(--sage);animation:fade-up .35s ease}
.recipe-method.is-complete .method-bar-fill{box-shadow:0 0 0 2px rgba(47,106,74,.25)}

/* pages: narrower screens */
/* step picker: the full side list on wide screens (summary hidden, always open); at <=900px the same list
   collapses into one compact 'Choose a step' disclosure so the active illustrated step stays right below */
.method-picker{min-width:0}
.method-picker-summary{display:none}
.method-steps{position:relative}
.method-stage{scroll-margin-top:12px}
@media (max-width:900px){
  .library-body{grid-template-columns:1fr}
  .method-layout{grid-template-columns:1fr;gap:14px}
  .method-picker{border:1px solid var(--line);border-radius:14px;background:var(--ivory)}
  .method-picker-summary{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-height:52px;padding:10px 48px 10px 16px;border-radius:13px;cursor:pointer;list-style:none;font-family:var(--sans);transition:background var(--dur)}
  .method-picker-summary::-webkit-details-marker{display:none}
  .method-picker-summary::after{content:'';position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(45deg);transition:transform var(--dur),margin var(--dur)}
  .method-picker[open]>.method-picker-summary::after{margin-top:-2px;transform:rotate(-135deg)}
  .method-picker-summary:hover{background:var(--sage-soft)}
  .method-picker-summary:focus-visible{outline-offset:2px;border-radius:13px}
  .method-picker[open]>.method-picker-summary{border-radius:13px 13px 0 0;border-bottom:1px solid var(--line)}
  .method-picker-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
  .method-picker-current{flex:1 1 12em;min-width:0;font-size:.95rem;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
  .method-steps{display:grid;gap:6px;max-height:min(60vh,520px);overflow-y:auto;overscroll-behavior:contain;padding:8px}
  .method-step-btn{min-height:48px}
}
@media (max-width:699px){
  .page-inner{padding:12px 16px 40px}
  .page-head{margin-bottom:16px}
  .page-title{font-size:2rem}
  .btn-ghost{padding:0 10px}
  .library-controls{padding:10px 12px;gap:8px;border-radius:12px}
  .field-search,.filters{flex-basis:100%}
  .filters-summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-family:var(--sans);font-size:.9rem;list-style:none}
  .filters-summary::-webkit-details-marker{display:none}
  .filters-summary::before{content:"▸";font-size:.8em;transition:transform var(--dur)}
  .filters[open] .filters-summary::before{transform:rotate(90deg)}
  .filters-body{padding-top:6px;gap:8px}
  .filters-body .field{flex:1 1 130px}
  .recipe-grid{grid-template-columns:1fr;gap:10px}
  /* compact rows: modest thumbnail + title/status/action; the whole row is the link, favorite stays a 44px sibling control */
  .recipe-card{border-radius:12px}
  .recipe-card-link{flex-direction:row;align-items:center;gap:12px;padding:8px 56px 8px 8px;border-radius:12px}
  .recipe-card-art{flex:none;width:clamp(96px,30vw,132px);padding:0}
  .recipe-card-body{flex:1 1 auto;padding:0;gap:2px}
  .recipe-card-status{font-size:.62rem}
  .recipe-card-title{font-size:1.1rem}
  .recipe-card-meta{font-size:.75rem}
  .recipe-card-cta{padding-top:4px;font-size:.9rem}
  .recipe-card-fav{top:50%;right:6px;margin-top:-22px;background:transparent;box-shadow:none}
  .recipe-head{gap:10px 12px}
  .recipe-heading{order:3;flex-basis:100%}
  .recipe-title{font-size:1.75rem}
  .recipe-hero{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:14px 18px}
  .recipe-figure{max-width:200px}
  .recipe-section{margin-top:30px;padding-top:20px}
  .section-head .btn-text{margin-left:0;flex-basis:100%;justify-content:flex-start;padding-left:0}
  .ingredient-grid{gap:12px}
  .method-art{flex-direction:column;align-items:stretch}
  .method-art>*{flex:none;width:100%}
  .method-art>:nth-child(n+2){width:min(45%,170px)}
}
@media (max-width:560px){
  .btn-back{font-size:.95rem}
  .recipe-hero{grid-template-columns:1fr}
  .ingredient-grid{grid-template-columns:1fr 1fr;gap:10px}
  .ingredient-toggle{gap:8px;padding:8px 8px 10px;border-radius:12px}
  .ingredient-art{border-radius:8px}
  .ingredient-check{top:14px;right:14px;width:28px;height:28px;border-width:2px}
  .ingredient-check::after{width:7px;height:12px;margin-top:-2px;border-right-width:2.5px;border-bottom-width:2.5px}
  .ingredient-label{font-size:.95rem;line-height:1.2}
  .method-controls>*{flex:1 1 auto;justify-content:center}
  .method-stage{padding:12px}
}

/* ---- CSS crops of the approved food artwork (homepage previews), recipe text excluded.
   juice: source x 190..375, y 800..892 · pizza dough: source x 918..1180, y 800..892.
   Each class owns its aspect ratio so background-position maps exactly to source pixels. ---- */
.art-juice,.art-pizza{display:block;background-color:var(--ivory);background-repeat:no-repeat;background-image:url("/assets/approved-diorama.png")}
.art-juice{aspect-ratio:185/92;background-size:calc(1672 / 185 * 100%) auto;background-position:calc(190 / (1672 - 185) * 100%) calc(800 / (941 - 92) * 100%)}
.art-pizza{aspect-ratio:262/92;background-size:calc(1672 / 262 * 100%) auto;background-position:calc(918 / (1672 - 262) * 100%) calc(800 / (941 - 92) * 100%)}

/* shared collection-preview frame (homepage banners and recipe-book cards): one 262:92 image area on ivory.
   Each crop keeps its exact source ratio and is sized against the widest crop, so both show the same source
   scale (the full 92px source height), centred, never stretched and never cropped further. */
.art-juice{--art-w:185}
.art-pizza{--art-w:262}
.preview-frame{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:262/92;background:var(--ivory);border-radius:8px;overflow:hidden}
.preview-frame>.art-juice,.preview-frame>.art-pizza{flex:none;width:calc(var(--art-w,262) / 262 * 100%);border-radius:6px}

/* ================= Original-card viewer: the unchanged PNG inline, fit to width, zoom inside a scroll/pan box (no modal) ================= */
.viewer-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,1fr);gap:24px 36px;align-items:start}
.viewer-main{min-width:0}
.viewer-parts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 12px}
.viewer-part-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;flex:1 1 220px;min-width:0}
.viewer-part-list li{min-width:0;max-width:100%}
.viewer-part-btn{max-width:100%;gap:8px;padding:4px 14px 4px 6px;white-space:normal;text-align:left;font-family:var(--sans);font-size:.9rem;line-height:1.2}
.viewer-part-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cream);font-weight:700;font-size:.8rem}
.viewer-part-btn[aria-current=step]{background:var(--sage);border-color:var(--sage);color:#fff}
.viewer-part-btn[aria-current=step] .viewer-part-n{background:rgba(255,255,255,.22)}
.viewer-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.viewer-zoom{width:44px;justify-content:center;padding:0;font-size:1.5rem;line-height:1}
.viewer-zoom-level{min-width:5ch;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.viewer-links{display:flex;flex-wrap:wrap;gap:0 6px;margin-left:auto}
.viewer-links a{display:inline-flex;align-items:center}
.viewer-viewport{--zoom:1;--native-w:1024;position:relative;overflow:auto;width:100%;max-width:min(100%,calc(var(--native-w) * 1px));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(90,60,20,.08)}
.viewer-viewport:focus-visible{outline-offset:2px}
.viewer-viewport.is-zoomed{height:min(80vh,1600px);overscroll-behavior:contain;cursor:grab}
.viewer-viewport.is-panning{cursor:grabbing;user-select:none}
.viewer-img{display:block;width:calc(100% * var(--zoom));max-width:none;height:auto;user-select:none;-webkit-user-drag:none}
.viewer-error{margin:10px 0 0;padding:10px 12px;border-left:4px solid var(--red);background:var(--red-soft);border-radius:6px;font-family:var(--sans);font-size:.9rem}
.viewer-help{margin:10px 0 0;font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.viewer-continue-wrap{display:flex;margin-top:14px}
.viewer-continue-wrap .btn-primary{white-space:normal;text-align:center}
/* compact source notes beside (or below) the card: provenance, not instructions */
.viewer-notes{min-width:0;padding:16px 18px 8px;background:var(--ivory);border:1px solid var(--line);border-radius:14px;font-family:var(--sans);font-size:.85rem;line-height:1.45}
.viewer-notes h3{margin:0 0 4px;font-family:var(--serif);font-weight:400;font-size:1.25rem}
.notes-intro{margin:0 0 10px;font-size:.8rem;color:var(--muted)}
.note-lead{margin:0 0 8px}
.note-lead a{display:inline-flex;align-items:center;min-height:44px;color:var(--sage);text-underline-offset:3px}
.note-part{padding:10px 0 4px;border-top:1px solid var(--line)}
.note-title{margin:0 0 6px;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sage)}
.note-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;margin:0 0 8px}
.note-facts dt{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.note-facts dd{margin:0;overflow-wrap:anywhere}
.note-text{margin:0 0 8px;white-space:pre-line;overflow-wrap:anywhere}
@media (max-width:1099px){
  .viewer-layout{grid-template-columns:minmax(0,1fr)}
  .viewer-main,.viewer-notes{max-width:760px}
}
@media (max-width:560px){
  .viewer-parts>.btn-ghost{flex:1 1 0;min-width:0;justify-content:center}
  .viewer-part-list{order:-1;flex-basis:100%}
  .viewer-links{margin-left:0}
  .viewer-continue-wrap .btn-primary{width:100%}
}

/* ---- prepared cook-alongs: original links, source notes, stages, ingredient groups, secondary original-card disclosure ---- */
.recipe-figure figcaption .caption-links{display:flex;flex-wrap:wrap;gap:0 14px}
.recipe-qualifiers{margin:10px 0 0;padding:0 0 0 18px;display:grid;gap:4px;font-family:var(--sans);font-size:.8rem;line-height:1.4;color:var(--muted)}
.recipe-qualifiers:empty{display:none}
.ingredient-group{margin-bottom:-6px;font-family:var(--sans);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.method-step-stage{display:block;margin:12px 0 4px 8px;font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.method-step:first-child .method-step-stage{margin-top:0}
.originals-summary{display:flex;align-items:center;gap:10px;min-height:44px;width:fit-content;padding:0 8px;border-radius:8px;cursor:pointer;font-family:var(--sans);font-size:.95rem;color:var(--sage);list-style:none;transition:background var(--dur)}
.originals-summary::-webkit-details-marker{display:none}
.originals-summary::before{content:'▸';font-size:.8em;transition:transform var(--dur)}
.recipe-originals[open] .originals-summary::before{transform:rotate(90deg)}
.originals-summary:hover{background:var(--sage-soft)}
.recipe-originals>.recipe-viewer{margin-top:14px;padding-top:0;border-top:0}
.recipe-originals{scroll-margin-top:12px}
/* hero caption: one short source line and a single control that opens the originals disclosure */
.recipe-figure figcaption .caption-text{display:block}
.recipe-figure figcaption button.caption-link{padding:0 2px;border-radius:6px;font-family:var(--sans);text-align:left;cursor:pointer}