/* The digital recipe page, /<slug>/ (Direction B). The stage on the left holds the answer to "can I eat this, what is it, how long";
   the workspace on the right holds the doing. At 390 they stack and the stage is the first screen. Canon tokens only. */
.rdp{--pl-pop:var(--pl-gold);color:var(--pl-fg);padding:0 clamp(16px,3vw,32px) clamp(24px,4vw,48px)}
.rdp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(28px,5vw,72px);max-width:1280px;margin:0 auto;align-items:start}
.rdp .stage{padding:clamp(24px,4vw,56px) 0;position:sticky;top:0}
.rdp .stage h1{margin:0 0 20px;font:500 clamp(36px,4.6vw,60px)/1.04 var(--display);letter-spacing:-.015em;color:var(--pl-fg)}
.rdp .contains{margin:0 0 20px;padding:12px 16px;border:1px solid var(--pl-hair);border-left:4px solid var(--pl-fill);border-radius:10px;background:var(--pl-surf);
  font:600 18px/1.35 var(--sans);color:var(--pl-fg)}
.facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 22px;padding:0}
.facts div{min-width:0}
.facts dt{margin:0 0 4px;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--pl-gold)}
.facts dd{margin:0;font:400 26px/1.15 var(--display);color:var(--pl-fg)}
.stage-cta{margin:0 0 26px}
.shot{margin:0}.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--pl-hair);border-radius:16px}
.shot figcaption{margin-top:10px;font:400 13px/1.4 var(--sans);color:var(--pl-mut)}

.work{min-width:0}
.work .band{padding:clamp(28px,4vw,48px) 0;max-width:none}
.work .band:first-child{border-top:0}
.work .band-head{margin-bottom:22px}.work .band>*{max-width:none}
.work .band .band-head h2{font-size:clamp(30px,3.4vw,44px)}
.band-head .chip.mark{min-height:32px;padding:0 12px;color:var(--pl-gold)}

.tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.scaler{display:inline-flex;border:1px solid var(--pl-hair);border-radius:999px;background:var(--pl-surf);padding:3px}
.scaler button{min-width:64px;min-height:44px;border:0;border-radius:999px;background:none;font:500 14px/1 var(--mono);letter-spacing:.08em;color:var(--pl-champ);cursor:pointer}
.scaler button[aria-pressed="true"]{background:var(--pl-gold);color:var(--pl-on);box-shadow:var(--pl-glow)}
.progress{margin:0;font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--pl-mut)}
.progress [data-done]{color:var(--pl-gold)}
.ings{list-style:none;margin:0;padding:0}
.ings li{border-top:1px solid var(--pl-hair)}
.ings label{display:flex;align-items:flex-start;gap:14px;min-height:56px;padding:14px 0;cursor:pointer;font:400 20px/1.4 var(--sans)}
.ings input{position:absolute;opacity:0;width:44px;height:44px;margin:0}
.ings .box{flex:0 0 26px;height:26px;margin-top:1px;border:2px solid var(--pl-gold);border-radius:8px;display:grid;place-items:center;background:var(--pl-bg)}
.ings input:checked+.box{background:var(--pl-gold);box-shadow:var(--pl-glow)}
.ings input:checked+.box::after{content:"";width:6px;height:12px;border:solid var(--pl-on);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ings input:checked~.ing-text{color:var(--pl-mut);text-decoration:line-through;text-decoration-color:var(--pl-fill)}
.ings input:focus-visible+.box{outline:3px solid var(--pl-gold);outline-offset:3px}
.ing-text b{font-weight:700;color:var(--pl-fg);background:linear-gradient(transparent 62%,var(--pl-fill) 62%)}
.qty{font-variant-numeric:tabular-nums}
.gram{display:inline-block;margin-left:6px;padding:2px 8px;border:1px solid var(--pl-hair);border-radius:999px;font:500 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--pl-mut);white-space:nowrap}

.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{counter-increment:st;border-top:1px solid var(--pl-hair)}
.rstep{display:grid;grid-template-columns:60px minmax(0,1fr);gap:4px 10px;align-items:start;width:100%;min-height:64px;padding:20px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--pl-fg)}
.rstep .n::before{content:counter(st,decimal-leading-zero);display:block;font:500 28px/1.1 var(--mono);color:var(--pl-gold);}
.rstep .s-t{font:400 24px/1.5 var(--sans);letter-spacing:-.005em}
.rstep[aria-pressed="true"] .s-t{color:var(--pl-mut)}
.rstep[aria-pressed="true"] .n::before{content:"\2713";color:var(--pl-gold)}

.nutri{padding:clamp(18px,3vw,28px);background:var(--pl-console);border:1px solid var(--pl-hair);border-radius:16px;max-width:460px!important;margin-left:0!important}
.nutri .per{margin:0 0 10px;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pl-mut)}
.nutri .cal{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 8px;padding:0 0 10px;border-bottom:4px solid var(--pl-gold)}
.nutri .cal span{font:600 18px/1 var(--sans)}.nutri .cal b{font:400 64px/1 var(--display);color:var(--pl-fg)}
.nutri table{width:100%;border-collapse:collapse}
.nutri th,.nutri td{padding:9px 0;border-top:1px solid var(--pl-hair);font:400 17px/1.3 var(--sans);text-align:left}
.nutri th{font-weight:600}.nutri td{text-align:right;font-family:var(--mono);color:var(--pl-fg)}
.nutri tr.sub th{padding-left:20px;font-weight:400;color:var(--pl-mut)}
.notes{list-style:none;margin:0;padding:0;counter-reset:no}
.notes li{counter-increment:no;position:relative;padding:16px 0 16px 52px;border-top:1px solid var(--pl-hair);font:400 20px/1.5 var(--sans)}
.notes li::before{content:counter(no,decimal-leading-zero);position:absolute;left:0;top:18px;font:500 16px/1.4 var(--mono);color:var(--pl-gold);}
.story{margin:0 0 14px;font:italic 400 20px/1.6 var(--display);color:var(--pl-fg)}
.wait{margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--pl-mut)}
.share .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.share .by{margin:20px 0 0;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pl-mut)}

@media (max-width:899px){
  .rdp-grid{grid-template-columns:minmax(0,1fr)}.rdp .stage{position:static;padding:20px 0 8px}
  .rdp .stage h1{font-size:36px;margin-bottom:14px}.rdp .contains{font-size:17px;margin-bottom:14px}
  .facts{gap:10px 22px;margin-bottom:16px}.facts dd{font-size:22px}.stage-cta{margin-bottom:20px}.stage-cta .cta{width:100%}
  .rstep{grid-template-columns:48px minmax(0,1fr)}.rstep .n::before{font-size:22px}
  .share .actions .cta{width:100%}
}
@media print{
  body:has(.rdp){background:#fff!important;color:#000}.table-top,.site-top,.site-foot,.pl-foot,.tools,.stage-cta,.share,.skip{display:none!important}
  .rdp,.rdp *{color:#000!important;background:none!important;box-shadow:none!important;}.rdp-grid{display:block}.rdp .stage{position:static}
  .shot{display:none}
}

/* D-56 (was D-31) additions: the lessons taught through this recipe */
.learn{list-style:none;margin:0;padding:0}
.learn li{border-top:1px solid var(--pl-hair)}
.learn a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;min-height:56px;padding:12px 0;text-decoration:none;color:var(--pl-fg)}
.learn .crs{grid-column:1;font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--pl-gold)}
.learn .les{grid-column:1;font:400 18px/1.4 var(--sans)}
.learn .min{grid-column:2;grid-row:1/span 2;font:500 13px/1 var(--sans);color:var(--pl-mut)}
.learn a:hover .les{text-decoration:underline}
.rdp{padding-top:8px}

.origin-credit{margin:6px 0 0;font:italic 400 14px/1.45 var(--sans);color:var(--pl-mut)}
/* D-54: US / Metric toggle, the scaler's twin */
.units{display:inline-flex;border:1px solid var(--pl-hair);border-radius:999px;background:var(--pl-surf);padding:3px}
.units button{min-width:64px;min-height:44px;border:0;border-radius:999px;background:none;font:500 14px/1 var(--mono);letter-spacing:.08em;color:var(--pl-champ);cursor:pointer}
.units button[aria-pressed="true"]{background:var(--pl-gold);color:var(--pl-on);box-shadow:var(--pl-glow)}

/* D-56 W-6: the earned ribbons (D-52) and the lower-sodium number (D-35) live on the page head, not the card */
.stage .ribbons{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}.stage .ribbon{font:600 12px/1 var(--sans);color:#1F1D1A;background:var(--pl-fill);border-radius:3px;padding:5px 8px;white-space:nowrap}
.stage .sodium{margin:6px 0 0;font:400 14px/1.4 var(--sans);color:var(--pl-mut)}