@font-face{font-family:Barlow Condensed;src:url('/assets/barlow-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Barlow Condensed;src:url('/assets/barlow-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:DM Sans;src:url('/assets/dm-sans.woff2') format('woff2');font-weight:400 750;font-display:swap}

:root{--ink:#211f1a;--night:#191916;--muted:#655e53;--paper:#f7f3e9;--card:#fffcf5;--line:#ded6c8;--orange:#ff7846;--rust:#a63f21;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--body:'DM Sans',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:3px solid #3974bf;outline-offset:4px}
[hidden]{display:none!important}
.shell{width:min(100% - 88px,1280px);margin-inline:auto}
.skip-link{position:fixed;top:8px;left:8px;z-index:10;transform:translateY(-160%);background:var(--paper);padding:10px 16px;border-radius:6px}
.skip-link:focus{transform:none}

.header{background:var(--night);color:var(--paper);border-bottom:1px solid #39352d}
.header-inner{min-height:69px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
.brand{display:inline-flex;align-items:center;justify-self:start;gap:9px;font:900 29px/.9 var(--display);letter-spacing:-.022em;white-space:nowrap}
.brand span span{color:var(--orange)}
.header nav a{font-size:13px;font-weight:700;color:#e6ddcd;padding:12px}
.header nav a:hover,.footer a:hover{color:var(--orange)}
.header-lineup{justify-self:end;display:flex;align-items:center;gap:10px;background:#282721;border:1px solid #51483b;border-radius:6px;padding:7px 8px 7px 13px;font-size:13px;font-weight:750;white-space:nowrap}
.header-lineup:hover{border-color:var(--orange)}
.header-count{display:grid;place-items:center;min-width:25px;height:24px;border-radius:4px;background:var(--orange);color:var(--night);font-size:12px}

.hero{position:relative;isolation:isolate;background:#1e1a16;color:#fff8e9;overflow:hidden;border-bottom:4px solid var(--orange)}
.hero-photo,.hero-photo img,.hero::after{position:absolute;inset:0;width:100%;height:100%}
.hero-photo{z-index:-2;left:12%;width:88%}
.hero-photo img{object-position:65% 51%}
.hero::after{content:'';z-index:-1;background:linear-gradient(90deg,#1b1916 1%,#1b1916 14%,#1b1916e8 29%,#1b19167a 47%,transparent 67%),linear-gradient(0deg,#16110e65,transparent 30%)}
.hero-inner{min-height:490px;position:relative;display:flex;align-items:center;padding-block:52px 57px}
.hero-copy{position:relative;z-index:1}
.overline{display:flex;align-items:center;gap:9px;color:#f6d8ba;font-weight:750;font-size:11px;letter-spacing:.155em}
.signal{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px #ff78462f}
.hero h1{margin:12px 0 17px;font:900 clamp(76px,8.8vw,136px)/.79 var(--display);letter-spacing:-.029em}
.hero h1 em{color:var(--orange);font-style:normal}
.hero-summary{color:#e5dbcc;max-width:355px;font-size:15px;line-height:1.6;margin:0 0 23px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:11px;min-height:44px;border:1px solid transparent;border-radius:6px;padding:10px 16px;font-weight:750;font-size:13px;line-height:1.2}
.button-orange{background:var(--orange);color:#23190f}
.button-orange:hover{background:#ffa17e}
.hero-caption{position:absolute;bottom:26px;right:0;text-align:left;background:#1b1713db;color:#fff8e9;border:1px solid #fff4d944;border-radius:7px;padding:8px 13px 10px;line-height:1.2;backdrop-filter:blur(8px)}
.hero-caption:hover{border-color:var(--orange)}
.hero-caption>span{display:block;color:#ffd5ac;font-size:9px;letter-spacing:.12em;font-weight:750;margin-bottom:3px}
.hero-caption strong{font-size:14px}
.hero-caption strong span{color:var(--orange);margin-left:6px}

.board{padding-block:46px 73px}
.board:focus:not(:focus-visible){outline:none}
.board-heading{margin-bottom:22px}
.board-heading h2{font:900 clamp(48px,5.1vw,75px)/.9 var(--display);letter-spacing:-.018em;margin-bottom:9px}
.board-heading p{color:var(--muted)}
.board-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:23px;align-items:start}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;min-height:38px}
.filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.filter{background:transparent;border:1px solid var(--line);border-radius:5px;padding:6px 12px;min-height:35px;white-space:nowrap;font-size:12px;font-weight:750}
.filter:hover{border-color:var(--ink)}
.filter[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
#result-count{color:var(--muted);font-size:12px;font-weight:650;white-space:nowrap}
.recipes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.recipe{min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--card);box-shadow:0 2px 0 #20191108}
.recipe-image{display:block;position:relative;width:100%;padding:0;background:#372820;border:0;text-align:left;overflow:hidden}
.recipe-image:focus-visible{outline-offset:-4px;z-index:1}
.recipe-image img{width:100%;height:auto;aspect-ratio:1.63;transition:transform 200ms ease}
.recipe-image:hover img{transform:scale(1.04)}
.tag{background:#fffbf0;color:#33281e;font-weight:750;border-radius:4px;font-size:10px;letter-spacing:.055em;text-transform:uppercase;padding:4px 7px}
.recipe-image .tag{position:absolute;top:10px;left:10px}
.recipe-info{padding:12px 13px 13px;display:flex;flex:1;flex-direction:column;align-items:flex-start}
.recipe h3{font:800 clamp(23px,2.2vw,33px)/.94 var(--display);margin-bottom:6px}
.recipe h3 button{font:inherit;border:0;background:none;text-align:left;padding:0}
.recipe h3 button:hover{color:var(--rust)}
.recipe-description{font-size:12px;color:var(--muted);line-height:1.48;margin-bottom:12px}
.recipe-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 11px;font-size:11px;font-weight:700;color:var(--muted);margin-top:auto;margin-bottom:12px}
.recipe-meta span{display:inline-flex;align-items:center;gap:4px}
.icon{width:15px;height:15px;flex:none;vertical-align:middle}
.pick-button{width:100%;min-height:37px;border:1px solid #e8b49b;border-radius:5px;background:#fce9db;color:#712c19;font-size:12px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:7px}
.pick-button:hover{background:#ffdbca}
.pick-button[aria-pressed=true]{background:#e4ebd9;border-color:#c5d2b8;color:#304723}
.pick-button[aria-pressed=true]:hover{background:#d7e4c6}

.lineup{position:sticky;top:24px;background:var(--night);color:var(--paper);border-radius:9px;padding:16px;overflow:hidden}
.lineup-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid #494137}
.lineup-heading h3{font:900 33px/.85 var(--display)}
.lineup-count{padding:4px 8px;border-radius:4px;background:#3e2a20;color:#ffac8b;white-space:nowrap;font-weight:750;font-size:10px;letter-spacing:.08em}
.lineup-content{margin:12px 0}
.empty-lineup{min-height:132px;border:1px dashed #5c5144;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:13px;color:#ded2c0;font-size:12px}
.empty-lineup strong{color:#fff5e5;font-size:14px}
.empty-lineup .icon{color:#ff9d76;width:28px;height:28px;margin:0 0 5px}
.share{width:100%;background:#ffe1cd;color:#392017}
.share:hover:not(:disabled){background:var(--orange)}
.share:disabled{color:#c2b6a5;background:#302c25;border-color:#4a4135}
.pick-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pick-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:center;border-bottom:1px solid #494137;padding-block:5px}
.pick-list li:last-child{border-bottom:0}
.picked-recipe{display:flex;min-width:0;align-items:center;gap:8px;text-align:left;padding:3px 0;border:0;background:none;font-weight:750;font-size:12px}
.picked-recipe:hover{text-decoration:underline}
.picked-recipe img{width:42px;height:36px;border-radius:4px}
.icon-button{display:grid;place-items:center;border:1px solid transparent;background:transparent;border-radius:5px;min-width:34px;min-height:34px;padding:0;line-height:1;font-size:24px}
.icon-button:hover{border-color:currentColor}

.footer{border-top:1px solid #363227;background:var(--night);color:#dad1c0}
.footer-inner{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}
.footer .brand{color:var(--paper);font-size:25px}
.footer-inner>a:last-child{white-space:nowrap;font-weight:750}

dialog{width:min(650px,100% - 28px);max-height:calc(100dvh - 32px);padding:0;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 28px 90px #0008;overscroll-behavior:contain}
dialog::backdrop{background:#18140cc2}
body:has(dialog[open]){overflow:hidden}
.close-form{position:sticky;top:12px;height:0;z-index:2}
.close{margin-right:12px;margin-left:auto;background:var(--card);border-color:var(--line);width:40px;height:40px}
.detail-image{width:100%;height:clamp(150px,30vw,255px)}
.detail-body,.lineup-panel{padding:24px}
.detail-body h2,.lineup-panel h2{font:900 clamp(39px,8vw,56px)/.91 var(--display);margin:8px 0 10px}
.detail-body>p,.lineup-panel>p{color:var(--muted)}
.detail-body h3,.lineup-panel h3{font:800 29px/.95 var(--display);margin-top:25px}
.detail-body ul,.detail-body ol,.shopping-list{padding-left:23px;margin-block:9px 0}
.detail-body li,.shopping-list li{margin-bottom:6px}
.detail-body .recipe-meta{margin:12px 0}
.detail-body .pick-button{width:auto;min-height:44px;padding-inline:14px}
.back-lineup{margin-top:14px;padding:5px 0;border:0;background:none;color:var(--rust);font-weight:750;text-decoration:underline}
.lineup-panel h2{padding-right:34px}
.lineup-panel .empty-lineup{color:var(--muted);border-color:var(--line);margin-top:16px}
.lineup-panel .empty-lineup strong{color:var(--ink)}
.lineup-panel .pick-list li{border-color:var(--line)}
.lineup-panel .pick-list{margin-block:10px 15px}
.lineup-panel .picked-recipe{font-size:14px}
.lineup-panel .share{width:auto;margin-top:6px}
.shopping{margin-top:17px;border-top:1px solid var(--line);padding-top:12px}
.shopping summary{cursor:pointer;font-weight:750}
.shopping h3{font-size:21px;margin-top:13px}
.link-fallback{display:grid;gap:5px;margin-top:12px;font-size:13px;font-weight:700}
.link-fallback input{width:100%;font:inherit;padding:8px;border:1px solid var(--line);border-radius:4px;background:white}
.toast{position:fixed;z-index:3;right:20px;bottom:20px;max-width:calc(100% - 40px);padding:10px 14px;border-radius:6px;background:var(--ink);color:var(--paper);box-shadow:0 2px 12px #1f17152c;font-size:13px;font-weight:700;pointer-events:none}
.toast:empty{padding:0;box-shadow:none}
.panel-status{margin-top:9px;font-size:13px;color:#304723;font-weight:750}

@media (max-width:1120px){.shell{width:calc(100% - 56px)}.board-layout{grid-template-columns:minmax(0,1fr) 238px;gap:16px}.recipes{gap:12px}.filter{padding-inline:9px}}
@media (max-width:960px){.board-layout{display:block}.lineup{display:none}.hero-inner{min-height:440px}.hero h1{font-size:clamp(75px,10vw,104px)}}
@media (max-width:650px){
  .shell{width:calc(100% - 32px)}.header-inner{min-height:59px;grid-template-columns:1fr auto}.header nav{display:none}.brand{font-size:25px}.brand img{width:28px;height:28px}
  .hero-inner{display:block;min-height:0;padding-block:190px 28px}.hero-photo{inset:0;width:100%;height:300px}.hero-photo img{object-position:center 44%}
  .hero::after{background:linear-gradient(0deg,#1b1916 0%,#1b1916 42%,#1b1916ce 52%,transparent 77%)}
  .hero h1{font-size:clamp(47px,16vw,94px);margin-block:10px 13px;white-space:nowrap}.hero-summary{font-size:14px;margin-bottom:18px}.overline{font-size:10px}
  .hero-caption{top:12px;bottom:auto;font-size:12px;padding:6px 8px}.hero-caption>span{font-size:8px}.hero-caption strong{font-size:12px}
  .board{padding-block:30px 40px}.board-heading{margin-bottom:15px}.board-heading h2{font-size:clamp(42px,10vw,56px)}.board-heading p{font-size:14px}
  .toolbar{align-items:flex-start;flex-direction:column;margin-bottom:12px;gap:7px}.filter{padding-inline:8px;min-height:34px}.filters{gap:5px}
  .recipes{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.recipe-info{padding:9px}.recipe h3{font-size:23px}.recipe-description{font-size:11px}.recipe-meta{font-size:10px;gap:4px 6px}.recipe-meta .icon{width:13px;height:13px}
  .footer-inner{flex-wrap:wrap;padding-block:16px;gap:8px 12px}.footer p{order:1;flex-basis:100%}
  .detail-body,.lineup-panel{padding:17px}
}
@media (max-width:350px){.header-inner{gap:8px}.brand{font-size:23px}.brand img{width:25px;height:25px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
