/* =====================================================================
   Now Cooking · the pinned, hand-drawn stage (home page only)
   Without JS, or with reduced motion, only the illustrated step list shows.
   With JS and motion, .nc-live pins the stage for (steps × 75)vh on mobile and (steps × 90)vh on desktop,
   and the list becomes the visually hidden text summary.
   ===================================================================== */
.nc { position: relative; background: var(--marble); }
.nc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Static list (no JS, reduced motion) ---------- */
.nc-list-wrap { padding-block: clamp(56px, 8vw, 110px); }
.nc-list-head { display: grid; gap: 12px; justify-items: start; margin-bottom: clamp(24px, 4vw, 40px); }
.nc-list-head .nc-title { display: flex; flex-direction: column; gap: 2px; }
.nc-title .script { font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1; }   /* Kaushan runs larger than the old copperplate: ~0.78x */
.nc-title .dish-label { font-size: clamp(1.1rem, 3vw, 1.8rem); letter-spacing: .2em; }
.nc-list { list-style: none; display: grid; gap: 16px; }
@media (min-width: 720px) { .nc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nc-li { position: relative; background: var(--marble-deep); border: 1px solid var(--rim); border-radius: 20px; padding: 14px 16px 18px; display: grid; gap: 10px; align-content: start; }
.nc-li__pic { width: 100%; height: auto; aspect-ratio: 1080 / 1060; }
.nc-li__photo { position: absolute; top: 18px; right: 18px; width: 34%; }
.nc-li__photo .nc-photo__f { aspect-ratio: 1; }
.nc-li .nc-no { font-size: 2.2rem; }
.nc-li__heat { margin-top: 8px; font-size: .8125rem; color: var(--ink-soft); }
.nc-list__end { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- Card pieces shared by the list and the stage ---------- */
.nc-no { font: 400 2.6rem/.9 var(--display); color: var(--kitchen); }
.nc-no__of { font-size: .34em; color: var(--ink-soft); margin-left: 3px; vertical-align: .9em; font-family: var(--sans); font-weight: 600; }
.nc-no__serve { font-family: var(--script); color: var(--kitchen); font-size: .82em; }
.nc-text { font: 440 1.05rem/1.42 var(--display); color: var(--ink); text-wrap: pretty; }
.nc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 4px; border-radius: 999px; background: var(--marble); box-shadow: inset 0 0 0 1.5px var(--rim);
  font: 500 .8125rem/1.25 var(--sans); color: var(--ink); }
.nc-ico { width: 26px; height: 26px; flex: none; overflow: visible; }
.nc-timer { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 13px 4px 4px; border-radius: 999px; background: var(--yellow); font: 600 .8125rem/1 var(--sans); color: var(--ink); }
.nc-timer > svg { width: 18px; height: 18px; margin-left: 6px; }
.nc-ring { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--marble); box-shadow: inset 0 0 0 3px rgb(42 51 48 / .16); }
.nc-ring i { position: absolute; inset: 0; }
.nc-ring i:first-child { clip-path: inset(0 0 0 50%); }
.nc-ring i:last-child { clip-path: inset(0 50% 0 0); }
.nc-ring b { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--kitchen); will-change: transform; }
.nc-ring i:first-child b { clip-path: inset(0 50% 0 0); }
.nc-ring i:last-child b { clip-path: inset(0 0 0 50%); }
.nc-clock { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--marble); box-shadow: inset 0 0 0 2.5px var(--kitchen); }
.nc-clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--kitchen); }
.nc-clock i { position: absolute; left: calc(50% - 1.25px); bottom: 50%; width: 2.5px; border-radius: 2px; background: var(--kitchen); transform-origin: 50% 100%; will-change: transform; }
.nc-clock__h { height: 26%; } .nc-clock__m { height: 38%; background: var(--ink) !important; }
.nc-note { display: flex; gap: 22px; margin-top: 6px; font: 400 1.65rem/1.1 var(--script); color: var(--kitchen); }
.nc-tick { display: inline-block; margin-left: 5px; font: 700 .9rem/1 var(--sans); color: var(--kitchen); }
.nc-photo__f { margin: 0; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 5px solid var(--marble); box-shadow: 0 0 0 2px var(--kitchen), 0 14px 30px -12px rgb(28 35 31 / .35); background: var(--marble-deep); }
.nc-photo__f img { width: 100%; height: 100%; object-fit: cover; }
.nc-photo__l { position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%) rotate(-5deg); padding: 0 .45em; border-radius: 999px; background: var(--marble);
  font: 400 clamp(1.05rem, 3.6vw, 2.1rem)/1.2 var(--script); color: var(--kitchen); white-space: nowrap; }

/* ---------- Live stage ---------- */
.nc-pin { display: none; }
.nc-live { height: calc(var(--n) * 75vh); }
.nc-live .nc-list-wrap { position: absolute !important; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nc-live .nc-pin { display: grid; position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.nc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px calc(var(--gutter) + 18px) 2px var(--gutter); }
.nc-head .nc-title { display: flex; flex-direction: column; margin: 0; }
.nc-head .nc-title .script { font-size: 1.5rem; }
.nc-head .nc-title .dish-label { font-size: .8rem; letter-spacing: .16em; white-space: nowrap; }
.nc-head .badge-new { flex: none; }
.nc-scene-wrap { position: relative; z-index: 1; min-height: 0; display: grid; place-items: center; container-type: size; grid-area: 2 / 1; margin-right: 26px; }
.nc-scene { position: relative; width: min(100vw, 44svh); aspect-ratio: 1 / 1; }
@supports (container-type: size) { .nc-scene { width: min(100cqw, 100cqh); } }
.nc-scene::before { content: ""; position: absolute; left: 13%; top: 15%; width: 78%; height: 78%; border-radius: 50%; background: var(--oak-tint); opacity: .55; filter: blur(22px); }   /* the soft blush shadow under the pan */
.nc-a { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.nc-a > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nc-photo { position: absolute; }
.nc-oven { position: absolute; inset: 0; z-index: 130; visibility: hidden; transform: translateY(160%); transition: transform .8s var(--ease), visibility 0s .8s; pointer-events: none; }
.nc-oven svg { width: 100%; height: 100%; overflow: visible; }
.nc.is-oven .nc-oven { visibility: visible; transform: none; transition: transform .8s var(--ease); }
.nc-heat { position: absolute; left: 86.2%; top: 96.2%; z-index: 122; transform: translateX(-50%); margin: 0; white-space: nowrap; font: 500 .75rem/1 var(--sans); color: var(--ink-soft); }
.nc-heat b { color: var(--kitchen); font-weight: 700; }

.nc-card { position: relative; z-index: 5; margin: 4px var(--gutter) max(12px, env(safe-area-inset-bottom)); padding: 14px 16px; border-radius: 20px; background: var(--marble-deep); border: 1.5px solid var(--rim-strong);
  box-shadow: 0 16px 34px -22px rgb(28 35 31 / .5); }
.nc-clip { position: absolute; top: -20px; right: 26px; width: 15px; height: 32px; }
.nc-blocks { display: grid; }
.nc-b { grid-area: 1 / 1; position: relative; padding-left: 3.3rem; will-change: transform, opacity; }
.nc-b .nc-no { position: absolute; left: 0; top: 2px; }
.nc-b--finale { padding-left: 0; }
.nc-b--finale .nc-no { position: static; font-size: 2rem; margin-bottom: 4px; }
.nc-b .nc-chip, .nc-b .nc-timer, .nc-tick { will-change: transform, opacity; }
.nc-toggle { display: inline-flex; margin-top: 12px; padding: 3px; border-radius: 999px; background: var(--marble); box-shadow: inset 0 0 0 1.5px var(--rim); }
.nc-toggle button { min-height: 40px; min-width: 76px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: 600 .9375rem/1 var(--sans); color: var(--kitchen); cursor: pointer; transition: background-color .2s, color .2s; }
.nc-toggle [aria-pressed="true"] { background: var(--kitchen); color: var(--marble); }
.nc-ovenchip { margin-left: 8px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.nc.is-oven .nc-ovenchip { opacity: 1; transform: none; }
.nc-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.nc-actions [data-reel] { grid-column: 1 / -1; justify-self: start; }
.nc-actions .btn, .nc-list__end .btn { min-height: 44px; padding: .6rem 1.05rem; font-size: .9375rem; }
.nc-b--finale .nc-text { font-size: .95rem; line-height: 1.36; }
.nc-b--finale .nc-chips { gap: 5px; margin-top: 8px; }
.nc-b--finale .nc-chip { font-size: .75rem; padding-right: 9px; }
.nc-b--finale .nc-ico { width: 20px; height: 20px; }
.nc-save[aria-pressed="true"] svg path { fill: currentColor; }

/* the step dots: each button is a 24px box (WCAG 2.2 target size) around an 8px dot, so the dots look as before */
.nc-rail { position: relative; grid-area: 2 / 1; justify-self: end; align-self: center; margin-right: 2px; z-index: 10; display: flex; flex-direction: column; }
.nc-rail button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.nc-rail button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--marble); box-shadow: inset 0 0 0 1.6px var(--kitchen); transition: transform .25s var(--ease), background-color .25s; }
.nc-rail button[aria-current]::before { background: var(--kitchen); transform: scale(1.4); }
.nc-rail button:hover::before { transform: scale(1.3); }
.nc-rail__line { position: absolute; left: 50%; top: 12px; bottom: 12px; width: 2px; margin-left: -1px; border-radius: 2px; background: rgb(42 51 48 / .16); overflow: hidden; }
.nc-rail__line i { position: absolute; inset: 0; background: var(--kitchen); transform-origin: 50% 0; will-change: transform; }

/* ---------- Loops: CSS only, and only while the stage is on screen (.nc-run) ---------- */
.nc-flick > svg { transform-origin: 50% 50%; animation: nc-flick 1.1s ease-in-out infinite alternate paused; }
.nc-flick--b > svg { animation-duration: .85s; animation-delay: -.4s; }
.nc-jit > svg { animation: nc-jit .32s steps(2) infinite paused; }
.nc-bub > svg { animation: nc-bub 2.2s ease-in-out infinite paused; animation-delay: calc(var(--d) * -1); }
.nc-drift > svg { transform-origin: 50% 100%; animation: nc-drift 3.4s ease-in-out infinite alternate paused; animation-delay: calc(var(--d) * -1); }
.nc-run .nc-flick > svg, .nc-run .nc-jit > svg, .nc-run .nc-bub > svg, .nc-run .nc-drift > svg { animation-play-state: running; }
@keyframes nc-flick { from { transform: scale(.985); } to { transform: scale(1.018); } }
@keyframes nc-jit { 50% { transform: translate(.35%, -.3%) rotate(.8deg); } }
@keyframes nc-bub { 0% { transform: scale(.2); opacity: 0; } 25% { opacity: 1; } 70% { transform: scale(1); opacity: 1; } 84% { transform: scale(1.3); opacity: 0; } 100% { transform: scale(.2); opacity: 0; } }
@keyframes nc-drift { from { transform: translateY(2%) skewX(-4deg); } to { transform: translateY(-4%) skewX(4deg); } }

/* ---------- Phones and portrait tablets: a short scroll, a compact card, a way out ----------
   ~30vh of scroll per step (was 75vh: nine screens before any recipe), the card is sized to the current step by
   now-cooking.js (.nc-blocks height), and "Skip to recipes" takes the badge's place in the header row. */
@media (max-width: 899px), (max-aspect-ratio: 5 / 4) {
  .nc-live { height: calc(var(--n) * 30vh); }
  .nc-live .nc-head .badge-new { display: none; }
  .nc-live .nc-skip { display: inline-flex; }
  .nc-blocks { align-content: start; }
  .nc-b { align-self: start; }
  /* the card floats at the bottom and takes the height of the current step; the pan keeps one size and one place
     (it reserves room for a typical card), so only the two or three tallest steps tuck the pan's lowest edge behind it */
  .nc-live .nc-scene-wrap { grid-area: 2 / 1 / 4 / 2; padding-bottom: 170px; }
  .nc-live .nc-card { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 var(--gutter) max(12px, env(safe-area-inset-bottom)); }
  .nc-live .nc-blocks { transition: height .25s var(--ease); }
  .nc-live .nc-rail { align-self: start; margin-top: 14px; }
}
.nc-skip { display: none; position: absolute; z-index: 11; top: 14px; right: var(--gutter); align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 999px;
  background: var(--yellow); color: var(--ink); font: 600 .8125rem/1 var(--sans); text-decoration: none; box-shadow: 0 1px 0 rgb(28 35 31 / .08); }
.nc-skip svg { width: 11px; height: 11px; }
.nc-skip:focus-visible { outline: 3px solid var(--kitchen); outline-offset: 2px; }

/* ---------- Desktop: scene left, card right ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 5 / 4) {
  .nc-live { height: calc(var(--n) * 90vh); }
  .nc-live .nc-pin { grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 600px); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(24px, 4vw, 96px);
    padding: clamp(14px, 2.4vh, 36px) calc(var(--gutter) + 44px) clamp(16px, 3vh, 44px) var(--gutter); }
  .nc-head { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 22px; padding: 0; }
  .nc-head .nc-title { flex-direction: row; align-items: baseline; gap: .35em; }
  .nc-head .nc-title .script { font-size: clamp(2rem, 2.8vw, 3.6rem); }
  .nc-head .nc-title .dish-label { font-size: clamp(1.05rem, 1.45vw, 1.9rem); }
  .nc-scene-wrap { grid-column: 1; grid-row: 2; margin-right: 0; }
  @supports (container-type: size) { .nc-scene { width: min(100cqw, 100cqh, 82vmin); } }
  .nc-card { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; padding: clamp(24px, 2.4vw, 44px) clamp(24px, 2.4vw, 44px) clamp(26px, 2.6vw, 46px); border-radius: 26px; }
  .nc-clip { width: 19px; height: 40px; top: -24px; right: 36px; }
  .nc-b { padding-left: 0; }
  .nc-b .nc-no { position: static; font-size: clamp(4.2rem, 6vw, 7.5rem); margin-bottom: 10px; }
  .nc-b--finale .nc-no { font-size: clamp(2.6rem, 3.4vw, 4rem); }
  .nc-text { font-size: clamp(1.25rem, 1.55vw, 1.95rem); }
  .nc-chips { gap: 8px; margin-top: 16px; }
  .nc-chip { font-size: clamp(.875rem, .95vw, 1.1rem); padding: 4px 14px 4px 5px; }
  .nc-ico { width: clamp(30px, 2.4vw, 44px); height: clamp(30px, 2.4vw, 44px); }
  .nc-timer { font-size: clamp(.875rem, .95vw, 1.1rem); margin-top: 16px; }
  .nc-note { font-size: clamp(1.8rem, 2.4vw, 2.8rem); }
  .nc-actions { margin-top: 20px; }
  .nc-actions { display: flex; flex-wrap: wrap; }
  .nc-b--finale .nc-text { font-size: clamp(1.15rem, 1.4vw, 1.75rem); line-height: 1.42; }
  .nc-b--finale .nc-chip { font-size: clamp(.8125rem, .9vw, 1.05rem); }
  .nc-b--finale .nc-ico { width: clamp(26px, 2vw, 38px); height: clamp(26px, 2vw, 38px); }
  .nc-heat { font-size: clamp(.75rem, .8vw, 1rem); }
  .nc-rail { position: absolute; grid-area: auto; right: clamp(14px, 1.6vw, 36px); top: 50%; transform: translateY(-50%); margin: 0; }
  .nc-head .nc-title .dish-label { letter-spacing: .2em; }
  .nc-rail button { width: 28px; height: 28px; }
  .nc-rail button::before { width: 10px; height: 10px; }
  .nc-rail__line { top: 14px; bottom: 14px; }
}

/* ---------- Short phone screens (Safari with its toolbars): let the pan keep the room ---------- */
@media (max-width: 899px) and (max-height: 760px) {
  .nc-card { padding: 12px 14px; }
  .nc-text { font-size: .98rem; line-height: 1.36; }
  .nc-b--finale .nc-chips { display: none; }            /* the three sides are drawn landing beside the pan instead */
  .nc-b--finale .nc-no { font-size: 1.6rem; margin-bottom: 2px; }
  .nc-b--finale .nc-text { font-size: .9rem; }
  .nc-actions { margin-top: 8px; gap: 6px; }
  .nc-actions .btn { min-height: 42px; padding-block: .5rem; }
  .nc-head { padding-top: 8px; }
}