/* BULLETIN — newsprint, ink, and the awning burgundy as the single spot colour. */
:root{
  --news:#F5F1E6; --news-2:#EBE5D6; --ink:#191713; --ink-soft:#5A554B;
  --wine:#7B1E2B; --wine-deep:#54121C;
  --rule:#191713; --hair:rgba(25,23,19,.28);
  --mast:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --deck:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --gut:clamp(1rem,3.5vw,2.5rem); --page:74rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:2rem}
body{
  margin:0;background:var(--news);color:var(--ink);font-family:var(--body);
  font-size:clamp(.92rem,.88rem + .16vw,1rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--wine)}
:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
p{margin:0 0 .85rem;text-align:justify;hyphens:auto}
/* Justification needs roughly 45 characters to avoid rivers. A single column
   on a 390px phone gets about 38, so below the two-column breakpoint the
   broadsheet sets ragged-right instead. */
@media (max-width:679px){p{text-align:left;hyphens:manual}}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--news);
      padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.paper{max-width:var(--page);margin:0 auto;padding:0 var(--gut) 3rem;
       background:var(--news)}

/* ---- masthead ----------------------------------------------------------- */
.mast{border-bottom:3px double var(--rule);padding:1.4rem 0 .7rem;text-align:center}
.mast .above{
  font-family:var(--deck);font-weight:600;font-size:.66rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .5rem;
}
.mast h1,.mast .name{
  font-family:var(--mast);font-weight:900;line-height:.9;margin:0;
  font-size:clamp(2.3rem,1rem + 6.4vw,5.6rem);letter-spacing:-.018em;
}
.mast .name a{color:inherit;text-decoration:none}
.mast .below{
  font-family:var(--deck);font-weight:500;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin:.6rem 0 0;
}
.dateline{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.2rem;
  border-bottom:1px solid var(--rule);padding:.42rem 0;
  font-family:var(--deck);font-weight:600;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;
}
.dateline span{white-space:nowrap}
.state{color:var(--wine)}
.state[data-open="no"]{color:var(--ink-soft)}
nav.bar{border-bottom:3px double var(--rule);padding:.5rem 0}
nav.bar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
           justify-content:center;gap:.2rem 1.6rem}
nav.bar a{
  font-family:var(--deck);font-weight:600;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
}
nav.bar a:hover{color:var(--wine)}
nav.bar a[aria-current]{color:var(--wine);border-bottom:2px solid var(--wine)}

/* ---- stories ------------------------------------------------------------ */
.lead{padding:1.6rem 0 0}
.hed{
  font-family:var(--mast);font-weight:800;line-height:1.02;margin:0 0 .6rem;
  font-size:clamp(1.9rem,1.1rem + 3.6vw,4rem);letter-spacing:-.02em;text-align:center;
}
.subhed{
  font-family:var(--body);font-style:italic;font-size:clamp(1rem,.94rem + .4vw,1.25rem);
  line-height:1.4;text-align:center;color:var(--ink-soft);margin:0 auto 1.2rem;
  max-width:44rem;
}
.byline{
  font-family:var(--deck);font-weight:600;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;text-align:center;color:var(--ink-soft);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:.4rem 0;margin:0 0 1.4rem;
}
.cols3{columns:1;column-gap:2rem;column-rule:1px solid var(--hair)}
@media (min-width:680px){.cols3{columns:2}}
@media (min-width:1050px){.cols3{columns:3}}
.cols2{columns:1;column-gap:2rem;column-rule:1px solid var(--hair)}
@media (min-width:760px){.cols2{columns:2}}
.cols3 p:first-of-type::first-letter,.dropcap::first-letter{
  float:left;font-family:var(--mast);font-weight:900;font-size:3.4em;
  line-height:.78;padding:.06em .1em 0 0;color:var(--wine);
}
.story{border-top:1px solid var(--rule);margin-top:2rem;padding-top:1.2rem}
.story h2{
  font-family:var(--mast);font-weight:800;font-size:clamp(1.4rem,1.1rem + 1.4vw,2.3rem);
  line-height:1.06;margin:0 0 .5rem;letter-spacing:-.014em;
}
.story h3{
  font-family:var(--deck);font-weight:700;font-size:.98rem;letter-spacing:.06em;
  text-transform:uppercase;margin:1.2rem 0 .4rem;
}
.kick{
  font-family:var(--deck);font-weight:700;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--wine);margin:0 0 .35rem;text-align:left;
}
.pull{
  font-family:var(--mast);font-weight:700;font-size:clamp(1.2rem,1rem + 1vw,1.75rem);
  line-height:1.2;color:var(--wine);border-top:2px solid var(--wine);
  border-bottom:2px solid var(--wine);padding:.7rem 0;margin:1.2rem 0;
  text-align:left;break-inside:avoid;
}
.pull cite{display:block;font-family:var(--deck);font-style:normal;font-weight:600;
           font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
           color:var(--ink-soft);margin-top:.5rem}

/* ---- halftone plates ---------------------------------------------------- */
figure{margin:0 0 1.2rem;break-inside:avoid}
figure img{
  width:100%;filter:grayscale(1) contrast(1.16) brightness(1.03);
  border:1px solid var(--rule);
}
figcaption{
  font-family:var(--deck);font-size:.7rem;line-height:1.45;letter-spacing:.03em;
  color:var(--ink-soft);padding-top:.4rem;border-bottom:1px solid var(--hair);
  padding-bottom:.4rem;
}
figcaption b{display:block;font-weight:700;color:var(--ink);text-transform:uppercase;
             letter-spacing:.12em;font-size:.62rem;margin-bottom:.2rem}
.plate-wide{grid-column:1/-1}
/* align-items:start, not the default stretch: a boxed notice sitting beside a
   tall plate would otherwise grow to the plate's height and open a hole under
   its own text. */
.grid{display:grid;gap:1.2rem;grid-template-columns:1fr;align-items:start}
@media (min-width:700px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1050px){.grid.three{grid-template-columns:repeat(3,1fr)}}

/* ---- boxed classified --------------------------------------------------- */
.box{
  border:2px solid var(--rule);padding:1rem 1.1rem;margin:1.4rem 0;
  background:var(--news-2);break-inside:avoid;
}
.box h3{
  font-family:var(--deck);font-weight:700;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 .7rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--rule);
}
.box dl{margin:0;font-size:.88rem}
.box dl div{display:flex;justify-content:space-between;gap:1rem;padding:.26rem 0;
            border-bottom:1px dotted var(--hair)}
.box dt{font-family:var(--deck);font-weight:600;letter-spacing:.08em;
        text-transform:uppercase;font-size:.68rem;color:var(--ink-soft);padding-top:.18rem}
.box dd{margin:0;text-align:right}
.box p{text-align:left;font-size:.86rem}
.box.wine{border-color:var(--wine);background:#F6E9E9}
.box.wine h3{color:var(--wine);border-color:var(--wine)}
.callbox{text-align:center;border:2px solid var(--wine);padding:1rem;margin:1.4rem 0}
.callbox a{
  font-family:var(--mast);font-weight:900;font-size:clamp(1.4rem,1.1rem + 1.5vw,2.2rem);
  text-decoration:none;letter-spacing:-.01em;
}
.callbox span{display:block;font-family:var(--deck);font-weight:600;font-size:.66rem;
              letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
              margin-top:.3rem}

/* ---- bill of fare ------------------------------------------------------- */
.fare{margin-top:1.6rem}
.fare .msec{break-inside:avoid;margin-bottom:1.6rem}
.fare h3{
  font-family:var(--mast);font-weight:800;font-size:1.12rem;letter-spacing:-.01em;
  text-transform:none;margin:0 0 .1rem;padding-bottom:.2rem;
  border-bottom:1px solid var(--rule);
}
.fare .n{font-family:var(--deck);font-size:.62rem;letter-spacing:.14em;
         text-transform:uppercase;color:var(--ink-soft);margin:.3rem 0 .5rem}
.fare .snote{font-size:.78rem;font-style:italic;color:var(--ink-soft);
             margin:0 0 .5rem;text-align:left}
.dishes{list-style:none;margin:0;padding:0}
.dish{padding:.16rem 0;font-size:.84rem;line-height:1.4}
.dish .dn{
  display:inline;background:var(--news);padding-right:.25em;position:relative;z-index:1;
}
.dish .row{display:flex;align-items:baseline;gap:.2rem}
.dish .lead-dots{flex:1;border-bottom:1px dotted var(--hair);transform:translateY(-.22em)}
.dish .dp{font-family:var(--deck);font-weight:600;white-space:nowrap;
          font-variant-numeric:tabular-nums;padding-left:.25em}
.dish .dd{display:block;font-size:.75rem;font-style:italic;color:var(--ink-soft);
          line-height:1.35;padding-left:.6rem}
.pnote{
  font-family:var(--deck);font-size:.76rem;line-height:1.5;text-align:left;
  border:1px solid var(--rule);border-left:5px solid var(--wine);
  padding:.7rem .85rem;margin:1.2rem 0;background:var(--news-2);
}
.index{columns:2;column-gap:1.6rem;list-style:none;margin:.8rem 0 0;padding:0;
       font-family:var(--deck);font-size:.78rem}
@media (min-width:820px){.index{columns:4}}
.index li{padding:.12rem 0;break-inside:avoid}
.index a{text-decoration:none;color:var(--ink)}
.index a:hover{color:var(--wine);text-decoration:underline}
.ticks{list-style:none;margin:.5rem 0 0;padding:0;font-size:.84rem;columns:2;
       column-gap:1.4rem}
.ticks li{padding:.14rem 0;break-inside:avoid}
.ticks li::before{content:"▪ ";color:var(--wine)}
.ticks.no li::before{content:"□ ";color:var(--ink-soft)}
.qs{margin:.5rem 0 0;padding-left:1.1rem;font-size:.86rem}
.qs li{padding:.16rem 0}

footer{border-top:3px double var(--rule);margin-top:2.4rem;padding-top:1rem;
       font-family:var(--deck);font-size:.72rem;color:var(--ink-soft)}
footer .fr{display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;font-weight:600;
           letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem}
footer p{text-align:left;font-size:.72rem;line-height:1.6;margin:0}

/* Ink bleed on entry. A transition, not a tween: if it never runs the page is
   already at its final state. */
.rise{opacity:1}
html.js .rise{opacity:0;transition:opacity .7s ease}
html.js .rise.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  html.js .rise{opacity:1;transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important;
  }
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:fade .18s linear both}
::view-transition-new(root){animation:fade .28s linear reverse both}
@keyframes fade{from{opacity:1}to{opacity:0}}

@media print{
  nav.bar,.callbox{display:none}
  body{background:#fff;font-size:9.5pt}
  .paper{max-width:none}
  figure img{filter:grayscale(1) contrast(1.3)}
}