/* Shared look for /food/ (hub) and every recipe page. Same Sunrise tokens as the link page. */
:root{--bg:#F7F3EC;--ink:#14213D;--sun:#FFB800;--coral:#FF6B4A;--muted:#5b6578;--card:#fff;--soft:#FFF4D6}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Alexandria',system-ui,sans-serif;line-height:1.5;padding:24px 16px 40px}
main{max-width:640px;margin:0 auto}
a{color:inherit}
.back{display:flex;width:fit-content;align-items:center;gap:6px;font-size:14px;font-weight:500;text-decoration:none;color:var(--muted)}
.back:hover{color:var(--ink)}
.kicker{display:inline-block;margin-top:22px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--sun);padding:3px 10px;border-radius:6px}
h1{margin-top:10px;font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.01em}
.lede{margin-top:10px;font-size:16px;color:var(--muted)}
h2{font-size:22px;font-weight:800;margin:36px 0 14px}
h2 span{background:var(--sun);padding:0 6px;border-radius:6px}
.box{background:var(--card);border:2px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink)}

/* Hub cards */
.grid{display:grid;gap:16px}
a.card{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center;padding:12px;text-decoration:none;transition:transform .12s,box-shadow .12s}
a.card:hover,a.card:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);outline:none}
a.card img{width:112px;height:112px;object-fit:cover;border-radius:10px;display:block}
.card .t{display:block;font-size:17px;font-weight:700;line-height:1.25}
.card .d{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--soft);border:1.5px solid var(--ink)}
.chip.hot{background:var(--sun)}
.soon{padding:16px 18px}
.soon ul{list-style:none;padding:0;display:grid;gap:10px;margin-top:4px}
.soon li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.soon li::before{content:"";flex:none;width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--coral)}
.soon p{font-size:13px;color:var(--muted);margin-top:12px}

/* Recipe page */
.hero{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin-top:18px;border-radius:16px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.stat{padding:12px 6px;text-align:center}
.stat b{display:block;font-size:20px;font-weight:800;line-height:1.1}
.stat span{display:block;margin-top:4px;font-size:11px;color:var(--muted);line-height:1.25}
.stat.hot{background:var(--sun)}
.stat.hot span{color:var(--ink)}
.note{font-size:12px;color:var(--muted);margin-top:10px}
.scale{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.scale p{font-size:14px;color:var(--muted)}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;flex:none}
.seg button{font:inherit;font-size:14px;font-weight:700;border:0;background:var(--card);color:var(--ink);padding:6px 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.ing{list-style:none;padding:6px 16px}
.ing li+li{border-top:1.5px dashed #d9d3c7}
.ing label{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer;font-size:15px}
.ing input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;border:2px solid var(--ink);border-radius:6px;background:var(--card);display:grid;place-content:center;cursor:pointer}
.ing input::after{content:"";width:10px;height:6px;border:solid var(--ink);border-width:0 0 3px 3px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.ing input:checked{background:var(--sun)}
.ing input:checked::after{opacity:1}
.ing .name{flex:1}
.ing input:checked~.name{text-decoration:line-through;opacity:.5}
.ing .amt{font-weight:700;white-space:nowrap}
.steps{list-style:none;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;font-size:15px;counter-increment:s}
.steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.steps b{display:block}
.coach{padding:20px 18px;background:var(--soft)}
.coach p+p{margin-top:10px}
.coach .sig{font-weight:700}
.tips{list-style:none;padding:0;display:grid;gap:12px}
.tips li{padding:14px 16px;font-size:15px}
.tips b{display:block}
.cta{display:grid;gap:14px;margin-top:8px}
a.btn{display:block;text-decoration:none;padding:16px 18px;transition:transform .12s,box-shadow .12s}
a.btn:hover,a.btn:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);outline:none}
a.btn.main{background:var(--sun)}
.btn .t{display:block;font-size:16px;font-weight:700}
.btn .d{display:block;margin-top:3px;font-size:13px;opacity:.8}
footer{margin-top:40px;text-align:center;font-size:12px;color:var(--muted)}

@media (min-width:768px){
  body{padding:48px 24px 56px}
  h1{font-size:44px}
  .lede{font-size:18px}
  h2{font-size:26px;margin-top:48px}
  a.card{grid-template-columns:150px 1fr;gap:20px;padding:14px}
  a.card img{width:150px;height:150px}
  .card .t{font-size:20px}
  .card .d{font-size:15px}
  .stat{padding:16px 8px}
  .stat b{font-size:26px}
  .stat span{font-size:13px}
  .ing label,.steps li,.tips li{font-size:16px}
}
@media (max-width:380px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){a.btn,a.card{transition:none}}
@media print{
  body{background:#fff;padding:0}
  .back,.cta,.scale .seg,footer,.hero{display:none}
  .box{box-shadow:none}
}