/* Site chrome for the poster direction: warm paper page, quiet type, posters as the objects. */
:root{--paper:#f1ebdf;--paper2:#e8e0d0;--ink:#1c1a17;--mute:#6e675c;--red:#c8261a;--wood:#140d08}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* header: the wordmark is set like a poster name; search and filters stay quiet */
.top{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:10px 40px;padding:22px 36px 14px}
.mark{margin:0;font-weight:800;font-size:52px;letter-spacing:-.055em;line-height:.85}
.mark a{text-decoration:none}
.mark small{display:block;font-size:14px;font-weight:500;letter-spacing:0;line-height:1.3;margin-top:8px;color:var(--mute)}
.tools{display:flex;flex-wrap:wrap;align-items:end;justify-content:flex-end;gap:8px 18px}
.tools .q{flex:0 1 360px;display:flex;border-bottom:2px solid var(--ink)}
.tools input{flex:1;border:0;background:none;padding:6px 0;font-size:17px;min-width:0}
.tools input::placeholder{color:#8d8577}
.tools .q button{border:0;background:none;font-weight:700;padding:6px 0 6px 10px;cursor:pointer}
.tools label{font-size:13px;color:var(--mute);display:flex;flex-direction:column;gap:1px}
.tools select{border:0;border-bottom:1px solid #b8ae9c;background:none;padding:3px 0;font-size:14px;color:var(--ink);border-radius:0}

/* year picker: each year a little stack of posters, height = number of menus */
.years{padding:6px 36px 0}
.ystrip{display:grid;grid-template-columns:repeat(41,minmax(0,1fr));gap:4px;align-items:end;height:96px;border-bottom:2px solid var(--ink)}
.ycol{position:relative;height:100%;border:0;background:none;padding:0;cursor:pointer}
.ycol i{position:absolute;left:50%;width:min(18px,92%);aspect-ratio:5/7;transform:translateX(-50%) rotate(var(--r,0deg));box-shadow:0 1px 1px rgba(30,20,10,.35);overflow:hidden}
.ycol i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:var(--b)}
.ycol.zero::before{content:"";position:absolute;left:50%;bottom:0;width:2px;height:5px;background:#b8ae9c}
.ycol:hover i,.ycol:focus-visible i{transform:translate(-50%,-3px) rotate(var(--r,0deg))}
.ycol.on::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:4px;background:var(--red)}
.ylabels{display:grid;grid-template-columns:repeat(41,minmax(0,1fr));gap:4px;font-size:12px;font-weight:700;color:var(--mute);padding-top:8px}
.ylabels span{text-align:center;white-space:nowrap}
.ylabels .on{color:var(--ink);font-size:15px;font-weight:800}

/* the stage: featured poster and the table */
.stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;padding:26px 36px 40px;align-items:start}
.feature{display:flex;flex-direction:column;align-items:center}
.feature .pz{width:min(100%,calc((100vh - 290px) * .714));box-shadow:0 1px 2px rgba(40,25,10,.3),0 20px 34px -16px rgba(40,25,10,.55)}
.fnav{width:min(100%,calc((100vh - 290px) * .714));display:flex;gap:18px;align-items:baseline;margin-top:16px;font-size:15px;font-weight:700}
.fnav button{border:0;background:none;padding:0;cursor:pointer;font-weight:700;border-bottom:2px solid var(--ink)}
.fnav .pg{margin-left:auto;font-weight:500;color:var(--mute)}
.table{position:relative;height:calc(100vh - 250px);min-height:460px;background:var(--wood);overflow:hidden}
.table .canvas{position:absolute;inset:0}
.table .cap{position:absolute;left:22px;top:18px;z-index:2;color:#f1e6cf;pointer-events:none}
.table .cap b{display:block;font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1}
.table .cap span{font-size:13px;opacity:.75}
.table .unmapped{position:absolute;right:20px;top:22px;z-index:2;color:#d9ccb2;font-size:13px}
.tray{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 22px 18px;color:#f1e6cf;background:#140d08;border-top:1px solid #4a3523}
.tray h3{margin:0 0 10px;font-size:22px;font-weight:800;letter-spacing:-.04em}
.tray h3 span{font-size:14px;font-weight:500;letter-spacing:0;opacity:.8;margin-left:8px}
.tray .row{display:flex;gap:14px;align-items:flex-end;overflow-x:auto;padding-bottom:4px}
.tray .pz{flex:0 0 112px;box-shadow:0 2px 2px rgba(0,0,0,.4),0 12px 18px -6px rgba(0,0,0,.7);transform:rotate(var(--r))}
.tray .x{position:absolute;right:20px;top:14px;border:0;background:none;color:#f1e6cf;font-weight:700;border-bottom:1px solid currentColor;padding:0;cursor:pointer}
.tip{position:fixed;z-index:20;pointer-events:none;background:var(--ink);color:#f1ebdf;font-size:14px;padding:6px 10px;line-height:1.3}
.tip b{font-weight:800}

/* dish page */
.dishpage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding:26px 36px 50px;align-items:start}
.dishpage .pz{width:min(100%,calc((100vh - 170px) * .714));box-shadow:0 1px 2px rgba(40,25,10,.3),0 20px 34px -16px rgba(40,25,10,.55)}
.back{border:0;background:none;padding:0;font-weight:700;border-bottom:2px solid var(--ink);cursor:pointer;margin-bottom:16px}
.served h2{font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:.9;margin:0 0 6px}
.served p{margin:0 0 20px;color:var(--mute)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:22px 18px}
.thumbs figure{margin:0}
.thumbs .pz{box-shadow:0 1px 2px rgba(40,25,10,.3),0 10px 18px -10px rgba(40,25,10,.5)}
.thumbs figcaption{font-size:13px;margin-top:7px;line-height:1.3}
.thumbs figcaption b{font-weight:800;font-variant-numeric:tabular-nums}

@media (max-width:860px){
 .top{grid-template-columns:1fr;padding:16px 16px 10px}
 .mark{font-size:40px}
 .tools{justify-content:flex-start}.tools .q{flex:1 1 100%}
 .years{padding:4px 16px 0}
 .ystrip,.ylabels{gap:1px}.ystrip{height:64px}
 .ycol i{width:92%}
 .ylabels{font-size:9px}.ylabels .on{font-size:11px}
 .stage,.dishpage{grid-template-columns:1fr;padding:18px 16px 30px;gap:22px}
 .feature .pz,.fnav,.dishpage .pz{width:100%}
 .table{height:auto;min-height:0}
 .table .canvas{position:relative;height:82vw;min-height:300px}
 .table .unmapped{left:22px;right:auto;top:64px;margin:0}
 .tray{position:relative}
 .fnav{gap:12px;font-size:14px;flex-wrap:wrap}
 .fnav button{white-space:nowrap}
 .fnav .pg{white-space:nowrap}
 .table .cap b{font-size:22px}
 .tray .pz{flex-basis:86px}
 .served h2{font-size:34px}
 .thumbs{grid-template-columns:repeat(3,1fr);gap:14px 10px}
}

/* ---------- v4 data sections, same paper, ink and type as the stage ---------- */
.jump{display:flex;gap:16px;font-size:14px;font-weight:700}
.jump a{text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:1px}
.counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:4px 36px 14px}
.counts div{border-top:2px solid var(--ink);padding-top:8px}
.counts b{display:block;font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:.95}
.counts span{font-size:14px;color:var(--mute)}
.feature .pz{cursor:default}
.nomap{color:#d9ccb2;padding:80px 24px;text-align:center}
.tray .cnote{margin:-4px 0 10px;font-size:13px;opacity:.8}
.tray .tthumb{all:unset;cursor:pointer;flex:0 0 96px;transform:rotate(var(--r))}
.tray .tthumb .pz{width:100%;box-shadow:0 2px 2px rgba(0,0,0,.4),0 12px 18px -6px rgba(0,0,0,.7)}
.tray .tthumb:focus-visible{outline:2px solid #f1e6cf;outline-offset:3px}
.tip small{opacity:.8}
.kick{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--mute);letter-spacing:.02em}

/* liner notes for the featured menu */
.liner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;padding:0 36px 44px}
.lnotes h2{margin:0 0 14px;font-size:40px;font-weight:800;letter-spacing:-.05em;line-height:.92}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;margin:0 0 16px}
.facts div{border-top:1px solid #cfc5b2;padding-top:5px}
.facts dt{font-size:12px;color:var(--mute)}.facts dd{margin:0;font-size:15px;font-weight:600}
.desc{font-size:17px;line-height:1.5;margin:0 0 18px;max-width:60ch}
.range{border-top:2px solid var(--ink);padding-top:10px;margin-bottom:16px}
.range .then{margin:0;font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.range .now{margin:2px 0 0;font-size:20px;font-weight:700;color:var(--red);letter-spacing:-.02em}
.range .basis,.prices .basis{margin:6px 0 0;font-size:13px;color:var(--mute)}
.nypl a{font-weight:800;border-bottom:2px solid var(--ink);text-decoration:none}
.nypl span{display:block;font-size:13px;color:var(--mute);margin-top:6px}
.ldishes .nd{margin:0 0 10px;font-size:15px;font-weight:700}
.dishes{list-style:none;margin:0;padding:0;counter-reset:d}
.dishes li{border-top:1px solid #cfc5b2;padding:9px 0 10px 30px;position:relative;counter-increment:d;scroll-margin:80px}
.dishes li::before{content:counter(d);position:absolute;left:0;top:9px;font-weight:800;font-size:14px;color:var(--mute)}
.dishes li.on{background:linear-gradient(90deg,rgba(200,38,26,.08),transparent)}
.dishes .dl{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between}
.dishes .dl b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.dishes .pp{font-weight:800;white-space:nowrap}.dishes .pp i{font-style:normal;color:var(--mute);margin:0 6px;font-weight:500}
.dishes .pp small{font-weight:500;color:var(--mute)}
.dishes .def{margin:3px 0 0;font-size:14px;color:#4a443b;max-width:62ch}
.ai{margin:10px 0 0;font-size:12px;color:var(--mute);border-top:1px solid #cfc5b2;padding-top:8px}

/* section heads set like poster names */
.sec{padding:30px 36px 44px;border-top:2px solid var(--ink);margin:0 36px}
.sec{padding-left:0;padding-right:0}
.sh{margin:0 0 20px;font-size:52px;font-weight:800;letter-spacing:-.055em;line-height:.85}
.sh span{display:block;font-size:15px;font-weight:500;letter-spacing:0;color:var(--mute);margin-top:8px;line-height:1.3}

/* tour */
.stops{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.stops button{all:unset;cursor:pointer;display:block;border-top:4px solid #cfc5b2;padding-top:6px;width:100%}
.stops button b{display:block;font-size:22px;font-weight:800;letter-spacing:-.04em}
.stops button span{display:block;font-size:12px;line-height:1.25;color:var(--mute)}
.stops button.on{border-color:var(--red)}.stops button.on span{color:var(--ink);font-weight:700}
.stops button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.stop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;align-items:start}
.scover{display:flex;gap:18px;align-items:flex-end}
.scover>.topen{flex:0 0 min(320px,62%)}
.topen{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box}
.topen .pz{box-shadow:0 1px 2px rgba(40,25,10,.3),0 18px 30px -16px rgba(40,25,10,.55)}
.topen:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.sextra{display:flex;flex-direction:column;gap:14px;flex:0 0 120px}
.sextra figure{margin:0}.sextra figcaption{font-size:12px;color:var(--mute);margin-top:5px}
.stext h3{margin:0;font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:.92}
.sline{margin:8px 0 14px;font-weight:700}
.sbody{font-size:20px;line-height:1.45;margin:0 0 20px;max-width:46ch}
.snav{display:flex;flex-wrap:wrap;gap:12px 20px}
.snav button{border:0;background:none;padding:0;font-weight:700;border-bottom:2px solid var(--ink);cursor:pointer}
.snav button:disabled{opacity:.35;cursor:default}

/* wall */
.wfilters{display:flex;flex-wrap:wrap;align-items:end;gap:10px 22px;margin-bottom:22px;position:sticky;top:0;z-index:5;background:var(--paper);padding:10px 0;border-bottom:1px solid #cfc5b2}
.wfilters label{font-size:13px;color:var(--mute);display:flex;flex-direction:column;gap:1px}
.wfilters select,.wfilters input{border:0;border-bottom:1px solid #b8ae9c;background:none;padding:4px 0;font-size:15px;color:var(--ink);border-radius:0;min-width:0}
.wfilters .grow{flex:1 1 220px}
.wcount{margin:0 0 0 auto;font-size:15px}.wcount b{font-size:28px;font-weight:800;letter-spacing:-.04em}
.curiotag{font-size:14px;font-weight:700;background:var(--ink);color:var(--paper);padding:4px 6px 4px 10px}
.curiotag button{border:0;background:none;color:inherit;cursor:pointer;font-weight:800}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 20px}
.wgrid figure{margin:0}
.wgrid .slot{all:unset;cursor:pointer;display:block;width:100%;aspect-ratio:5/7;background:var(--paper2)}
.wgrid .slot .pz{box-shadow:0 1px 2px rgba(40,25,10,.3),0 10px 18px -10px rgba(40,25,10,.5)}
.wgrid .slot:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wgrid figcaption{font-size:13px;margin-top:7px;line-height:1.3}
.wgrid figcaption b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wgrid figcaption span{color:var(--mute)}
.none{color:var(--mute)}

/* curiosities */
#curBody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 36px}
.curio{border-top:1px solid #cfc5b2;padding-top:12px}
.chead{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.chead b{font-size:56px;font-weight:800;letter-spacing:-.06em;line-height:.85;color:var(--red)}
.chead h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-.04em}
.chead span{color:var(--mute);font-size:14px}
.crow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.crow .topen{transform:rotate(var(--r))}
.curio .more{margin-top:12px;border:0;background:none;padding:0;font-weight:700;border-bottom:2px solid var(--ink);cursor:pointer}

/* then & now */
.pkey{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-size:14px;margin-bottom:10px}
.pkey .k{display:inline-block;width:18px;height:4px;margin-right:7px;vertical-align:middle}
.pkey .k.then{background:var(--ink)}.pkey .k.now{background:var(--red)}
.pkey .pn{color:var(--mute)}
.pchart svg{width:100%;height:auto;display:block}
.pchart text{font-size:13px;fill:var(--mute);font-family:inherit}
.pchart .g{stroke:#d8cfbd;stroke-width:1}
.pchart .then{stroke:var(--ink);stroke-width:1.4;opacity:.75}
.pchart .now{stroke:var(--red);stroke-width:1.4;opacity:.8}
.pchart .pm{cursor:pointer}.pchart .pm:hover line{stroke-width:3;opacity:1}
.pline{margin:8px 0 0;font-size:15px;font-weight:600}

/* footer */
.foot{margin-top:20px;background:var(--wood);color:#e9dcc3;padding:34px 36px 44px}
.fmark{font-size:44px;font-weight:800;letter-spacing:-.055em;line-height:.85;margin-bottom:20px}
.fcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;font-size:13px;line-height:1.5}
.fcols p{margin:0}.fcols b{display:block;color:#fff;margin-bottom:4px}
.foot a{color:#fff}

@media (max-width:860px){
 .jump{flex-wrap:wrap;gap:8px 14px}
 .counts{grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 16px 12px;gap:12px}
 .counts b{font-size:34px}
 .liner{grid-template-columns:1fr;padding:0 16px 34px;gap:24px}
 .lnotes h2{font-size:32px}
 .sec{margin:0 16px;padding:24px 0 34px}
 .sh{font-size:40px}
 .stops{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:12px}
 .stop{grid-template-columns:1fr;gap:20px}
 .scover>.topen{flex-basis:58%}
 .sextra{flex:0 0 30%}
 .stext h3{font-size:34px}.sbody{font-size:18px}
 .wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
 .wcount{margin:0;flex-basis:100%}
 #curBody{grid-template-columns:1fr}
 .crow{grid-template-columns:repeat(4,minmax(0,1fr))}
 .fcols{grid-template-columns:1fr}
 .foot{padding:28px 16px 36px}
}
.snav .topen{display:inline;width:auto;font-weight:700;border-bottom:2px solid var(--ink)}