:root{--bg:#f7f3ed;--panel:#fff;--ink:#2a2622;--muted:#716960;--accent:#1f4f4a;--line:#ddd3c7;--shadow:0 8px 24px #3b302515}
*{box-sizing:border-box} body{margin:0;background:linear-gradient(145deg,#f7f3ed,#eee7dd);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.5}
.page{max-width:1560px;margin:auto;padding:2rem 1.25rem 4rem} .page[data-recipe]{max-width:1320px} .hero,.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.35rem;margin-bottom:1.25rem}
[data-recipe] .hero{max-width:none} .reader-grid{display:grid;grid-template-columns:minmax(22rem,1.1fr) minmax(0,.9fr);gap:1.25rem;align-items:start} .reader-grid>.card{margin:0} .chip,.tag{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem} .tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.2rem .55rem;margin:.15rem .2rem .15rem 0} h1,h2{line-height:1.15} h1{font-size:clamp(2rem,5vw,3.5rem);margin:.3rem 0} h2{font-size:1.35rem} a{color:var(--accent)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #c26b2c;outline-offset:2px}
.tools{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;align-items:end} input,select,button{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)} button{cursor:pointer} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%} th,td{padding:.55rem .65rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} th{white-space:nowrap} th button{padding:0;border:0;background:none;font-weight:700;text-align:left} [data-catalogue] tr[hidden]{display:none} [data-catalogue] th[aria-sort="ascending"] button::after{content:" ↑"} [data-catalogue] th[aria-sort="descending"] button::after{content:" ↓"} .metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.65rem} .metric{min-width:0;padding:.8rem;border:1px solid var(--line);border-radius:10px;background:#fff} .metric strong{display:block;font-size:1.2rem;overflow-wrap:anywhere} .ingredient-list{list-style:none;padding:0;margin:0} .ingredient-list li{padding:.55rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:.4rem;align-items:baseline} .ingredient-list .divider{display:block;font-weight:700;color:var(--accent);padding-top:1rem} .amount,.unit{font-variant-numeric:tabular-nums;white-space:nowrap} .unit{color:var(--muted)} .conversion,.note{display:block;color:var(--muted);font-size:.92em} .warning{padding:.8rem;border-left:4px solid #c26b2c;background:#fff4e8} .muted{color:var(--muted)} .breadcrumbs{margin-bottom:1rem} .pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem} .pagination button[hidden]{display:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} details{margin-top:1rem} summary{cursor:pointer;font-weight:700} .nutrition-table{min-width:620px} .nutrition-table th,.nutrition-table td{font-variant-numeric:tabular-nums} .component-details>summary{font-size:1.35rem} .component-details li{margin:.5rem 0} .instruction-body ol,.instruction-body ul{padding-left:1.5rem} .instruction-body li{margin:.45rem 0} .instruction-body h3,.instruction-body h4{margin-top:1.4rem} .toc{float:right;margin-left:1rem} .toc summary{padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px} .toc ul{margin:.5rem 0;padding-left:1.2rem}
@media(max-width:760px){.page{padding:.85rem .65rem 2rem} .hero,.card{padding:1rem;border-radius:12px} h1{font-size:2rem} .reader-grid{display:block} .reader-grid>.card{margin-bottom:1.25rem} [data-catalogue] .table-scroll{overflow:visible} [data-catalogue] table,[data-catalogue] thead,[data-catalogue] tbody,[data-catalogue] th,[data-catalogue] td,[data-catalogue] tr{display:block} [data-catalogue] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} [data-catalogue] tbody tr{border:1px solid var(--line);border-radius:10px;background:#fff;margin:.75rem 0;padding:.35rem .7rem;box-shadow:0 3px 10px #3b302510} [data-catalogue] tbody td{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.45rem 0} [data-catalogue] tbody td:last-child{border-bottom:0} [data-catalogue] tbody td::before{content:attr(data-label);font-weight:700;color:var(--muted);flex:0 0 38%} .pagination{align-items:stretch;flex-direction:column} .toc{float:none;margin:0 0 1rem}}
@media print{body{background:#fff} .hero,.card{box-shadow:none;border-color:#bbb} .tools,.pagination,.toc{display:none!important} .reader-grid{display:block} .reader-grid>.card{break-inside:avoid;margin-bottom:1rem} a{color:inherit;text-decoration:none}}