:root{
  --ink:#0C1E24; --ink-2:#3E5C64; --ink-3:#829BA1;
  --paper:#E7EDEB; --paper-2:#F5F8F7;
  --mustard:#F2B705; --mustard-soft:rgba(242,183,5,.26);
  --rule:rgba(12,30,36,.16);
  --rule-night:rgba(231,237,235,.18);
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.6;
  background-image:radial-gradient(rgba(12,30,36,.06) 1px,transparent 1px);
  background-size:22px 22px;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
a{color:inherit}

/* ------------------------------------------------ masthead */
.topnav{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0 0;flex-wrap:wrap;gap:8px}
.topnav a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;margin-left:22px
}
.topnav a:first-child{margin-left:0;color:var(--ink)}
.topnav a:hover{color:var(--ink);text-decoration:underline}

header{padding:0 0 34px}
.eyebrow{color:var(--ink-2);margin:0 0 16px}
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,8vw,5.6rem);line-height:.9;letter-spacing:-.035em;margin:44px 0 16px;
}
h1 em{font-style:normal;-webkit-text-stroke:1.5px var(--ink);color:transparent}
.dek{max-width:54ch;margin:0;color:var(--ink-2);font-size:1.05rem}

/* ------------------------------------------------ THE ROLL (signature) */
.roll{background:var(--ink);color:var(--paper);padding:34px 0 40px;margin:0 0 4px}
.rollhead{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--rule-night);
  color:var(--ink-3)
}
.rollhead b{
  font-family:var(--display);font-weight:800;font-size:1.5rem;
  letter-spacing:-.02em;color:var(--paper)
}
.rollhead b i{font-style:normal;color:var(--mustard)}
#roll{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(.92rem,1.55vw,1.2rem);line-height:1.5;letter-spacing:.005em;
}
#roll .n{
  color:rgba(231,237,235,.62);cursor:pointer;background:none;border:0;padding:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;transition:color .12s
}
#roll .n:hover,#roll .n:focus-visible{color:var(--paper)}
#roll .n.eaten{color:var(--mustard);text-decoration:line-through;text-decoration-thickness:2px}
#roll .sep{color:rgba(231,237,235,.24);padding:0 .45em}
.rollfoot{margin:24px 0 0;color:var(--ink-3);font-size:.95rem;max-width:48ch}

/* ------------------------------------------------ view toggle */
.viewtabs{display:flex;margin:44px 0 0}
.viewtabs button{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 18px;cursor:pointer;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--rule);border-bottom:0;
}
.viewtabs button + button{border-left:0}
.viewtabs button[aria-selected=true]{background:var(--mustard);color:var(--ink)}
.view[hidden]{display:none}
.chart-frame{background:var(--paper-2);border:1px solid var(--rule);padding:8px}
.chart-frame svg{display:block;width:100%;height:auto}
.zone{cursor:pointer}
.zone rect.hit{fill:transparent}
.zone:hover rect.tile{stroke-width:2.5}
.zone:focus-visible{outline:none}
.zone:focus-visible rect.tile{stroke:var(--mustard);stroke-width:3}

/* ------------------------------------------------ readout */
.readout{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-top:0;
}
.stat{background:var(--paper-2);padding:16px 18px}
.stat b{display:block;font-family:var(--display);font-weight:600;font-size:2rem;line-height:1.05;letter-spacing:-.02em}
.stat span{color:var(--ink-2)}
.bar{height:7px;background:var(--paper);border:1px solid var(--rule);margin-top:10px}
.bar i{display:block;height:100%;background:var(--mustard);min-width:2px}

/* ------------------------------------------------ map */
#leaf{height:560px;background:var(--paper-2)}
@media(max-width:640px){#leaf{height:420px}}
#leaf .leaflet-tile-pane{filter:grayscale(1) contrast(.86) brightness(1.06) sepia(.35) hue-rotate(140deg) saturate(.55)}
#leaf .leaflet-control-zoom a{border-radius:0;color:var(--ink);border-color:var(--rule);background:var(--paper-2);font-weight:400}
#leaf .leaflet-control-zoom a:hover{background:var(--mustard)}
#leaf .leaflet-popup-content-wrapper,#leaf .leaflet-popup-tip{
  border-radius:0;background:var(--paper-2);border:1px solid var(--ink);box-shadow:none;color:var(--ink)
}
#leaf .leaflet-popup-content{margin:14px 16px;font-family:var(--body)}
#leaf .leaflet-popup-content h4{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:0 0 2px}
#leaf .leaflet-popup-content .pmeta{color:var(--ink-2);font-size:.85rem;margin:0 0 8px}
#leaf .leaflet-popup-content .pscore{font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1;margin:0 0 6px}
#leaf .leaflet-popup-content .pnone{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0}
#leaf .leaflet-popup-content a{color:var(--ink);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
#leaf .leaflet-control-attribution{background:rgba(245,248,247,.85);font-size:9px}
.maplegend{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:12px 14px;
  border:1px solid var(--rule);border-top:0;background:var(--paper-2);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)
}
.maplegend i{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink);margin-right:7px;vertical-align:-2px}
.maplegend i.done{background:var(--mustard)}
.maplegend i.todo{background:var(--paper)}
.maplegend .warn{margin-left:auto;color:var(--ink)}

/* ------------------------------------------------ controls */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:44px 0 18px;border-bottom:1px solid var(--rule)}
input[type=search],select,button.clear{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;padding:10px 12px;
  background:var(--paper-2);color:var(--ink);border:1px solid var(--rule);border-radius:0;
}
input[type=search]{flex:1;min-width:200px;letter-spacing:0;font-size:.85rem}
button.clear{cursor:pointer;text-transform:uppercase}
button.clear:hover{background:var(--mustard)}
:is(input,select,button,g[tabindex],a):focus-visible{outline:2px solid var(--mustard);outline-offset:2px}
.count{margin-left:auto;color:var(--ink-2)}

/* ------------------------------------------------ archive */
.entry{
  display:grid;grid-template-columns:78px 92px 1fr 92px;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--rule);align-items:center;
}
.entry.flash{background:var(--mustard-soft)}
.cat{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.06em;align-self:start;padding-top:4px}
.plate{
  width:92px;height:92px;border:1px solid var(--rule);background:var(--paper-2);
  object-fit:cover;display:block
}
.plate.none{
  background-image:repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(12,30,36,.07) 5px,rgba(12,30,36,.07) 6px);
}
.entry h3{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;margin:0 0 3px}
.entry h3 a{text-decoration:none;border-bottom:2px solid var(--mustard)}
.entry h3 a:hover{background:var(--mustard-soft)}
.addr{margin:0;color:var(--ink-2);font-size:.9rem}
.tags{margin-top:8px;display:flex;gap:7px;flex-wrap:wrap}
.tag{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);padding:3px 7px;color:var(--ink-2)
}
.tag.pub{border-color:var(--mustard);background:var(--mustard-soft);color:var(--ink)}
.score{text-align:right;font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.03em}
.score.todo{font-family:var(--mono);font-weight:400;font-size:1.3rem;color:var(--ink-3);letter-spacing:0}
.empty{padding:60px 0;text-align:center;color:var(--ink-2)}
@media(max-width:700px){
  .entry{grid-template-columns:72px 1fr;gap:14px}
  .plate{display:none}
  .score{text-align:left;grid-column:2}
}

/* ------------------------------------------------ signup */
.signup{border:1px solid var(--ink);background:var(--paper-2);padding:28px 30px;margin:0;display:grid;gap:14px}
.signup h3{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin:0}
.signup p{margin:0;color:var(--ink-2);font-size:.98rem;max-width:52ch}
.signup .row{display:flex;flex-wrap:wrap;gap:10px}
.signup input[type=email]{flex:1;min-width:220px;font-family:var(--mono);font-size:.85rem;padding:11px 12px;background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.signup button{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:11px 22px;cursor:pointer;background:var(--mustard);color:var(--ink);border:1px solid var(--ink)}
.signup button:hover{background:var(--ink);color:var(--paper)}
.signup .fine{font-size:.78rem}
.hp{position:absolute;left:-9999px}

/* ------------------------------------------------ field notes */
section.notes{padding:66px 0 90px}
h2{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.02em;margin:0 0 8px}
.fieldnote{border-left:3px solid var(--mustard);padding:2px 0 2px 20px;margin:28px 0}
.fieldnote a{font-family:var(--display);font-weight:600;font-size:1.2rem;text-decoration:none;display:inline-block;margin:4px 0 6px}
.fieldnote a:hover{text-decoration:underline}
.fieldnote p{margin:0;color:var(--ink-2)}
footer{border-top:1px solid var(--rule);padding:26px 0 60px;color:var(--ink-2)}

/* ------------------------------------------------ post pages */
.backlink{display:inline-block;margin:34px 0 0;color:var(--ink-2);text-decoration:none}
.backlink:hover{color:var(--ink);text-decoration:underline}
article.post{max-width:66ch;padding:8px 0 40px}
article.post h1{font-size:clamp(2rem,5vw,3.2rem);margin:18px 0 12px}
article.post .byline{color:var(--ink-2);margin:0 0 30px}
article.post h2{font-size:1.5rem;margin:34px 0 8px}
article.post h3{font-family:var(--display);font-weight:600;font-size:1.2rem;margin:26px 0 6px}
article.post p{margin:0 0 20px}
article.post blockquote{margin:26px 0;padding:2px 0 2px 20px;border-left:3px solid var(--mustard);color:var(--ink-2);font-style:italic}
article.post ul,article.post ol{margin:0 0 20px;padding-left:22px}
article.post li{margin-bottom:6px}
article.post code{font-family:var(--mono);font-size:.85em;background:var(--paper-2);padding:1px 5px;border:1px solid var(--rule)}
article.post hr{border:0;border-top:1px solid var(--rule);margin:36px 0}
.draftbar{background:var(--mustard);padding:10px 0}
.whereat{color:var(--ink-2);font-size:.95rem;margin:0 0 30px}

/* ------------------------------------------------ THE CHECK (signature) */
.check{
  border:1px solid var(--ink);background:var(--paper-2);
  padding:24px 26px 20px;margin:0 0 34px;max-width:400px;
  font-family:var(--mono);font-size:.8rem;color:var(--ink)
}
.check .chead{
  display:flex;justify-content:space-between;gap:12px;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--rule)
}
.check .line{display:flex;align-items:baseline;gap:6px;margin-bottom:9px}
.check .line .lbl{text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--ink-2);white-space:nowrap}
.check .line .dots{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-3px)}
.check .line .val{font-variant-numeric:tabular-nums}
.check .total{
  display:flex;align-items:baseline;gap:6px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--ink)
}
.check .total .lbl{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.02em;text-transform:uppercase}
.check .total .val{font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;letter-spacing:-.03em;margin-left:auto}
.check .paid{
  margin:18px -26px -20px;padding:11px 26px;background:var(--mustard);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:10px
}
.check .unscored{color:var(--ink-3);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}

/* ------------------------------------------------ PLATES (photography) */
figure.plate-fig{margin:34px 0;padding:0}
figure.plate-fig img{width:100%;height:auto;display:block;border:1px solid var(--ink)}
figure.plate-fig figcaption{
  display:flex;gap:12px;align-items:baseline;
  margin-top:9px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;color:var(--ink-2);line-height:1.5
}
figure.plate-fig figcaption b{
  color:var(--ink);text-transform:uppercase;letter-spacing:.14em;
  white-space:nowrap;border-bottom:2px solid var(--mustard)
}
.posthero{margin:0 0 30px}
.posthero img{width:100%;height:auto;display:block;border:1px solid var(--ink)}

/* ------------------------------------------------ 404 / thanks */
.mid{max-width:52ch;padding:90px 0}
.mid h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.02em;margin:0 0 14px}
.mid p{color:var(--ink-2);margin:0 0 22px}

/* ------------------------------------------------ 404 */

.error404{
    min-height:calc(100vh - 170px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.error404 .content{
    max-width:42rem;
}

.error404 ul{
    margin:2rem 0;
    padding-left:1.4rem;
}

.error404 li{
    margin:.6rem 0;
}

.error404 li a{
    text-decoration:none;
    border-bottom:2px solid var(--mustard);
}

.error404 li a:hover{
    background:var(--mustard-soft);
}

.error404 .actions{
    margin-top:2rem;
}

.error404 .button{
    display:inline-block;
    text-decoration:none;
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:12px 20px;
    background:var(--mustard);
    color:var(--ink);
    border:1px solid var(--ink);
    transition:.15s ease;
}

.error404 .button:hover{
    background:var(--ink);
    color:var(--paper);
}