/*
Theme Name: KP
Description: Kitchen Punk theme. Bold hero, two columns, reviews beside the facts. Needs the KP Reviews plugin for scorecards.
Version: 0.1.0
Author: Dutch
Text Domain: kp
*/
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Josefin Slab";src:url("fonts/josefin-slab.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Josefin Slab";src:url("fonts/josefin-slab-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{--gold:#EBCB8B;--good:#A3BE8C;--bad:#BF616A;--ember:#D08770;--on:#0b0b0c;--paper:#fff;--strip:#ECEFF4;--ink:#0b0b0c;--body:#20242c;--muted:#59616f;--line:#E5E9F0;--wash:rgba(208,135,112,.22);--mark:rgba(235,203,139,.5);--markline:rgba(235,203,139,.85);
--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--slab:"Josefin Slab",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--s:1.2}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#2E3440;--strip:#3B4252;--ink:#ECEFF4;--body:#D8DEE9;--muted:#A9B3C4;--line:#434C5E;--wash:rgba(208,135,112,.26);--mark:rgba(235,203,139,.24);--markline:rgba(235,203,139,.55);color-scheme:dark}}
:root[data-theme=dark]{--paper:#2E3440;--strip:#3B4252;--ink:#ECEFF4;--body:#D8DEE9;--muted:#A9B3C4;--line:#434C5E;--wash:rgba(208,135,112,.26);--mark:rgba(235,203,139,.24);--markline:rgba(235,203,139,.55);color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.wrap{max-width:1168px;margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-right,0px))}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.12em}

.strip{background:var(--strip);font-size:15px;font-weight:500;color:var(--ink);overflow-x:auto}
.strip .wrap{display:flex;justify-content:space-between;gap:24px;min-width:max-content}
.strip nav{display:flex}
.tab{display:flex;align-items:center;gap:8px;min-height:44px;padding-inline:13px;text-decoration:none;white-space:nowrap}
.tab:hover,.tab.on{background:var(--paper)}
.tab.on{font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.pill{display:inline-flex;align-items:center;gap:8px;align-self:center;height:32px;padding-inline:13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 15px var(--sans);cursor:pointer}

.head{border-bottom:2px solid var(--line)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);font:700 clamp(24px,3vw,30px)/1.1 var(--serif);letter-spacing:-.01em}
.brand img{display:block;width:56px;height:auto}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:.12em 20px 0;border-radius:999px;background:var(--gold);color:var(--on);font:italic 700 calc(19px*var(--s))/1 var(--slab);text-decoration:none;border:0;white-space:nowrap}
.btn:hover{background:var(--ember)}
.btn .icon{font-size:.85em;vertical-align:baseline;margin-top:-.15em}
.btns{display:flex;flex-wrap:wrap;gap:8px}

.hero .wrap,.kp-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px 64px;padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,88px)}
.hero h1,.kp-hero h1{margin:0;flex:1 1 600px;min-width:0;max-width:780px;color:var(--ink);font-family:var(--serif);font-weight:600;font-optical-sizing:auto;font-size:clamp(46px,7.4vw,106px);line-height:1.18;letter-spacing:-.028em;text-wrap:balance}
.hero h1 .l{display:block}
.mark,.kp-hero h1 mark,.entry h1 mark{display:inline-block;line-height:1.04;padding:0 .13em .11em;border-radius:.14em;background:var(--mark);box-shadow:inset 0 0 0 1px var(--markline)}
.lede{flex:1 1 300px;max-width:400px;margin:0;font:italic 400 calc(clamp(22px,2.2vw,28px)*var(--s))/1.3 var(--slab);color:var(--ink);text-wrap:pretty}
.hero.post .wrap{padding-block:clamp(40px,5vw,72px) clamp(32px,4vw,56px);gap:28px 56px}
.hero.post .title{flex:1 1 620px;min-width:0;display:flex;flex-direction:column;gap:16px}
.hero.post h1{flex:none;max-width:none;font-size:clamp(40px,5.4vw,76px)}
.hero.post .lede{flex:1 1 260px;max-width:330px;font-size:calc(clamp(20px,2vw,24px)*var(--s))}
.topimg{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:14px}
.hero.small .wrap{padding-block:clamp(36px,5vw,64px) clamp(24px,3vw,40px)}
.hero.small h1{font-size:clamp(40px,5.6vw,76px)}

.meta{font:400 14px/1.4 var(--sans);color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flag{display:block;width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 1px var(--line)}
h2{margin:0;color:var(--ink);font:600 clamp(30px,3.3vw,40px)/1.15 var(--serif);letter-spacing:-.018em}

.main{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:64px 80px;padding-bottom:88px;align-items:start}
.col{display:flex;flex-direction:column;gap:56px;min-width:0}
.sec{display:flex;flex-direction:column;gap:24px}
.sec p{margin:0}

.chip{display:inline-flex;align-items:center;gap:5px;height:32px;padding:.2em 11px 0;border-radius:999px;font:700 calc(17px*var(--s))/1 var(--slab);font-variant-numeric:tabular-nums;white-space:nowrap}
.chip .icon{font-size:.72em;margin-top:-.25em}
.chip.hot{background:var(--good);color:var(--on)}
.chip.mid{background:var(--wash);color:var(--ink)}
.chip.low{box-shadow:inset 0 0 0 2px var(--bad);color:var(--ink)}
.chip.hot .icon,.chip.low .icon{font-size:.8em;margin-top:-.12em}
.chip.low .icon{color:var(--bad)}
.chip.big{height:64px;padding-inline:18px;border-radius:18px;font-size:calc(34px*var(--s));flex:none}

.lead{display:flex;flex-direction:column;gap:14px;text-decoration:none;position:relative}
.lead img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px}
.lead .chip{position:absolute;top:12px;right:12px}
.lead h3{margin:0;color:var(--ink);font:600 clamp(26px,2.5vw,30px)/1.18 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.leadtext{display:block}
.rows{display:flex;flex-direction:column;gap:22px}
.rows.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px 40px}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:4px 16px;align-items:start;text-decoration:none}
.row img,.row .noimg{display:block;width:64px;height:64px;object-fit:cover;border-radius:12px;grid-row:1 / span 2;margin-top:3px;background:var(--strip)}
.row .t{color:var(--ink);font-weight:600;line-height:1.3;font-size:18px}
.row .t .flag{display:inline-block;vertical-align:-2px;margin-left:2px}
.row .chip{height:28px;font-size:calc(15px*var(--s));padding-inline:9px}
.row .d{grid-column:2 / -1;font-size:16px;line-height:1.45}
.lead:hover h3,.row:hover .t{text-decoration:underline;text-decoration-color:var(--ember);text-decoration-thickness:2px;text-underline-offset:3px}

.hello p{margin:0 0 16px;font-size:18px;line-height:1.65}
.hello figure{float:right;width:clamp(170px,18vw,240px);margin:-16px 0 8px 16px}
.hello figure img{display:block;width:100%;height:auto}
.hello h2{margin-bottom:18px}
.hello p.sig,.sig{margin:0 0 20px;font:700 calc(24px*var(--s))/1.2 var(--slab);color:var(--ink)}
/* Handwritten sign-off under posts: a mask filled with --ink, so it follows dark mode */
.signature{width:min(250px,65%);aspect-ratio:640/407;margin:1.4em 0 0 auto;background:var(--ink);-webkit-mask:url(assets/signature.png) right center/contain no-repeat;mask:url(assets/signature.png) right center/contain no-repeat}
.inl,.entry a{text-decoration-color:var(--ember);text-decoration-thickness:2px;text-underline-offset:3px}
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.num{font:600 clamp(36px,4vw,48px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.num small{font:400 calc(.46em*var(--s)) var(--slab);letter-spacing:0;margin-left:.14em}
.lab{font-size:15px;color:var(--muted);margin-top:4px}
.scalekey{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:15px;color:var(--muted)}
.scalekey span:not(.chip){display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.links{display:flex;flex-direction:column;gap:4px}
.lnk{display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.lnk:hover{border-bottom-color:var(--ember)}

.art{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"text score" "text visit";grid-template-rows:auto 1fr;gap:48px 72px;padding-block:56px 72px;align-items:start}
.art.plain{grid-template-areas:"text side";grid-template-rows:auto}
.side{grid-area:side;display:flex;flex-direction:column;gap:48px;min-width:0}
.side h2{font-size:30px}
.side .hello{display:flow-root}
.side .hello h2{margin-bottom:10px}
.side .hello figure{width:130px;margin:-8px 0 8px 12px}
.side .row .chip{height:26px;font-size:calc(14px*var(--s));padding-inline:8px}
.entry{grid-area:text;min-width:0;max-width:66ch;font-family:var(--serif);font-size:20px;line-height:1.6;hyphens:auto}
.entry h2,.entry h3,.entry h4,.entry a{hyphens:manual}
.entry>*{margin-block:0 1.05em}
.entry>:first-child{margin-top:0}
.entry>:last-child{margin-bottom:0}
.entry h2,.entry h3,.entry h4{margin-block:1.3em .5em;color:var(--ink);font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:-.012em}
.entry h2{font-size:32px}.entry h3{font-size:26px}.entry h4{font-size:22px}
.entry figure{margin-inline:0}
.entry img{display:block;border-radius:14px}
.entry figcaption{font:400 14px/1.4 var(--sans);color:var(--muted);margin-top:8px}
.entry blockquote:not([class*=is-style-kp]):not(.wp-block-pullquote blockquote){margin-inline:0;font:italic 400 calc(clamp(26px,3.2vw,36px)*var(--s))/1.22 var(--slab);color:var(--ink)}
.entry blockquote p{margin:0}
/* KP Pullquote (kp-design): slab like other quotes, but sized for a half-width float */
.entry figure.is-style-kp-pullquote.is-style-kp-pullquote blockquote p{font:italic 400 calc(21px*var(--s))/1.32 var(--slab);color:var(--ink)}
.entry table{width:100%;border-collapse:collapse;font:400 16px/1.45 var(--sans)}
.entry .wp-block-table{overflow-x:auto}
.entry table thead{border:0}
.entry table th,.entry table td{padding:10px 14px 10px 0;border:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.entry table thead th{border-bottom:2px solid var(--ink);color:var(--ink)}
.entry table td:last-child,.entry table th:last-child{padding-right:0}
.entry code{font-size:.85em}

.score{grid-area:score;display:flex;flex-direction:column;gap:20px;min-width:0}
.score .hd{display:flex;align-items:center;gap:16px}
.score h2{font-size:28px}
.rate{display:flex;flex-direction:column;gap:6px;margin:0}
.sr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:36px}
.sr dt{font-weight:500;color:var(--ink)}
.sr dd{margin:0}
.pips{display:flex;gap:4px}
/* Quality: bare gold asterisks, same footprint as the amount symbols */
.pip{display:flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:20px}
.pip.on{color:var(--gold)}
.pip.on .ol{stroke:var(--ink)}
.pip.off{color:var(--line)}
.cost{display:flex;gap:4px;font:700 21px/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums}
.cost span{width:26px;text-align:center}
.cost .off{color:var(--line)}
.symbols .icon{font-size:22px;vertical-align:middle}
.scale{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.scale .lb{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:500;color:var(--ink)}
.track{position:relative;height:2px;background:var(--muted);margin-block:9px}
.track span{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink);transform:translate(-50%,-50%)}
.note{font-size:15px;color:var(--muted)}
.note a{text-underline-offset:3px}
.bill{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.visit{grid-area:visit;display:flex;flex-direction:column;gap:18px;min-width:0}
.addr{margin:0;font-weight:500;color:var(--ink)}
.hours{margin:0;padding:0;list-style:none;font-size:16px;font-variant-numeric:tabular-nums}

.more{border-top:2px solid var(--line)}
.more .wrap{display:flex;flex-direction:column;gap:28px;padding-block:56px 72px}
.pager{display:flex;flex-wrap:wrap;gap:8px;padding-block:32px 72px}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding-inline:12px;border-radius:999px;text-decoration:none;font-weight:500}
.pager a.page-numbers:hover{background:var(--strip)}
.pager .current{background:var(--gold);color:var(--on)}
.foot{border-top:2px solid var(--line);font-size:15px;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-block:24px}
.foot a{text-underline-offset:3px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}

@media (min-width:901px){
.art.plain .side{align-self:stretch}
.side-stick{position:sticky;top:24px}
.admin-bar .side-stick{top:56px}
}
@media (max-width:900px){
.art{grid-template-columns:minmax(0,1fr);grid-template-areas:"score" "text" "visit";grid-template-rows:auto;gap:40px;padding-block:32px 56px}
.art.plain{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "side"}
.entry{font-size:19px}
}

/* Block-built pages */
.kp-hero h1 mark,.entry h1 mark{background-color:var(--mark)!important;color:inherit!important;box-shadow:inset 0 0 0 1px var(--markline)}
.kp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:64px 80px;margin:0;padding-bottom:88px;align-items:start}
.kp-cols>.wp-block-column{display:flex;flex-direction:column;gap:56px;min-width:0;margin:0}
.wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:.12em 20px 0;border-radius:999px;background:var(--gold);color:var(--on);font:italic 700 calc(19px*var(--s))/1 var(--slab);text-decoration:none;white-space:nowrap}
.wp-block-button .wp-block-button__link:hover{background:var(--ember);color:var(--on)}
.wp-block-button__link::after{content:"";width:.8em;height:.8em;margin-top:-.15em;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:8px}
.kp-links{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.kp-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.kp-links a:hover{border-bottom-color:var(--ember)}
.kp-links a::after{content:"";flex:none;width:1em;height:1em;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat}
.kp-notice{display:flex;flex-direction:column;gap:12px;padding:22px 24px;border-radius:14px;background:var(--mark);color:var(--ink)}
.kp-notice h2{font-size:clamp(26px,2.6vw,32px)}

/* WordPress's layout classes outrank single-class rules on groups. */
.wp-block-group.kp-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px 64px}
.wp-block-group.sec{display:flex;flex-direction:column;gap:24px}
.wp-block-group.kp-notice{display:flex;flex-direction:column;gap:12px}
.wp-block-group.hello{display:flow-root}
.kp-hero h1{flex:1 1 600px}
.kp-hero .lede{flex:1 1 300px;max-width:400px}

/* Classic themes get an extra inner div in every group; take it out of the layout. */
.kp-hero>.wp-block-group__inner-container,.sec>.wp-block-group__inner-container,.kp-notice>.wp-block-group__inner-container{display:contents}
.kp-home .wp-block-group__inner-container>*,.kp-notice .wp-block-group__inner-container>*{margin-block:0}
.kp-home .hello .wp-block-group__inner-container>p{margin-block:0 16px}
.kp-home .hello .wp-block-group__inner-container>h2{margin-block:0 18px}
.kp-home .hello .wp-block-group__inner-container>p.sig{margin-block:0 20px}
.side .hello>p{margin-block:0 16px}
.side .hello>h2{margin-block:0 10px}
.kp-hero{padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,88px)}

/* Buttons sit under the outlaw, not squeezed beside him, however short the text is. */
.hello .wp-block-buttons,.hello .btns{clear:both;padding-top:4px}

/* Reviews that also ran on BBQMag */
.tag{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--muted);font:600 12px/1.4 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
a.tag:hover{box-shadow:inset 0 0 0 1px var(--ember)}
.row .t .tag{margin-left:4px;vertical-align:2px}

/* Phones: logo, wordmark and button shrink together; if the button still can't fit, it wraps. */
.head .wrap{flex-wrap:wrap}
@media (max-width:480px){
.head .wrap{gap:10px 12px;padding-block:14px}
.brand{gap:10px;font-size:22px}
.brand img{width:42px}
.head .btn{min-height:40px;padding-inline:14px;font-size:19px}
}
@media (max-width:380px){
.brand{font-size:20px;gap:8px}
.brand img{width:38px}
.head .btn{padding-inline:12px;font-size:17px}
}

.side-stick{display:flex;flex-direction:column;gap:48px;min-width:0}