@charset "UTF-8";
:root{
  /* ---- Hot Doug's palette, measured off the site itself ----
     #FFFFCC and #CC0033 are the literal <body bgcolor> and <body text> from
     all 220 archived captures, 2001 to 2014, unchanged the whole time. */
  --ground:#FFFFCC; --raised:#FFFDF0; --ink:#4A1018;
  --ink-soft:#8A4048; --ink-faint:#8A6B3A; --rule:#E0CE86;
  --red:#CC0033; --brass:#9E7B10;
  /* the three-colour key: how many of a day's three menus we actually hold.
     One and two are the site's own crimson and the blue off the shoes. Purple
     is the only invented colour on this page - it is those two mixed, because
     three-of-three has to read as both at once. */
  --one:#CC0033; --two:#2050A0; --three:#7B2D8E;
  --bar:#E0CE86; --bar-on:#F0D010; --bar-ink:#1A1008;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;}
.wrap{max-width:60rem;margin:0 auto;padding:1.6rem 1.25rem 4rem;}

nav{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin-bottom:2rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;}
nav a{color:var(--ink-faint);text-decoration:none;padding:.34rem .6rem;
  border:1px solid transparent;}
nav a[aria-current="page"]{color:var(--ground);background:var(--ink);border-color:var(--ink);}
nav a:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
nav a:hover,.yr:hover{text-shadow:0 0 10px rgba(204,0,51,.45);}
nav a:hover{color:var(--red);border-color:var(--rule);}

header{border-bottom:2px solid var(--ink);padding-bottom:1.1rem;margin-bottom:1.5rem;}
h1{font-family:Archivo,"Helvetica Neue",sans-serif;font-weight:700;font-stretch:condensed;
  font-size:clamp(1.9rem,6vw,3rem);line-height:1.02;margin:0;letter-spacing:-.015em;
  text-wrap:balance;}
.sub{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.76rem;
  color:var(--ink-soft);margin:.6rem 0 0;letter-spacing:.02em;}

/* ---- the year strip ----
   Built like the Wayback Machine's, because it answers the same question at a
   glance: which years is there anything for. Bar height is days on record that
   year, so 2010 towering over 2003 is the actual shape of what survived. */
/* Three separate things were stopping these bars from having any height.

   The strip set height:7.5rem, .yr took height:100% of that, and the bar was
   sized in per cent of .yr: a chain of three values that all have to resolve
   before a bar is anything, and on some browsers they do not.

   flex:none on the bar is the one that actually mattered. Without it the bar
   is a flex item carrying the default flex-shrink:1, so a browser may squash
   it to its min-height whatever height is written on it, and the strip comes
   out as twelve flat lines. .yr also carries its own height in rem now, so
   nothing here depends on a percentage resolving.

   The tallest bar was 4.6rem against the 4.38rem actually left once the count
   above and the label below have taken theirs, which is what invited the
   squashing in the first place. It is 4.4rem now, and it fits. */
.years{display:flex;align-items:flex-end;gap:2px;
  background:var(--raised);border:1px solid var(--rule);
  padding:.5rem .5rem 0;overflow-x:auto;}
.yr{flex:1 1 0;min-width:2.7rem;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:7.5rem;
  background:none;border:0;padding:0 0 .1rem;cursor:pointer;font:inherit;}
.yr .bar{flex:none;width:58%;background:var(--bar);min-height:3px;
  transition:background .15s ease;}
/* Bar heights, one class per whole percent of the ceiling.

   These were inline styles until the site went up, and the CSP here is
   style-src 'self', which blocks a style attribute written through
   innerHTML. Every bar fell to its min-height and the console carried
   twelve violations, one per year. A local server sends no CSP, so it
   looked right every single time until it was on the real host.

   The ceiling is 100 records and the tallest bar is 4.4rem, which is what
   is left of the 7.5rem strip once the count above and the label below
   have taken theirs. Change either and regenerate this block. */
.b0{height:0rem}.b1{height:0.044rem}.b2{height:0.088rem}.b3{height:0.132rem}.b4{height:0.176rem}.b5{height:0.22rem}.b6{height:0.264rem}
.b7{height:0.308rem}.b8{height:0.352rem}.b9{height:0.396rem}.b10{height:0.44rem}.b11{height:0.484rem}.b12{height:0.528rem}.b13{height:0.572rem}
.b14{height:0.616rem}.b15{height:0.66rem}.b16{height:0.704rem}.b17{height:0.748rem}.b18{height:0.792rem}.b19{height:0.836rem}.b20{height:0.88rem}
.b21{height:0.924rem}.b22{height:0.968rem}.b23{height:1.012rem}.b24{height:1.056rem}.b25{height:1.1rem}.b26{height:1.144rem}.b27{height:1.188rem}
.b28{height:1.232rem}.b29{height:1.276rem}.b30{height:1.32rem}.b31{height:1.364rem}.b32{height:1.408rem}.b33{height:1.452rem}.b34{height:1.496rem}
.b35{height:1.54rem}.b36{height:1.584rem}.b37{height:1.628rem}.b38{height:1.672rem}.b39{height:1.716rem}.b40{height:1.76rem}.b41{height:1.804rem}
.b42{height:1.848rem}.b43{height:1.892rem}.b44{height:1.936rem}.b45{height:1.98rem}.b46{height:2.024rem}.b47{height:2.068rem}.b48{height:2.112rem}
.b49{height:2.156rem}.b50{height:2.2rem}.b51{height:2.244rem}.b52{height:2.288rem}.b53{height:2.332rem}.b54{height:2.376rem}.b55{height:2.42rem}
.b56{height:2.464rem}.b57{height:2.508rem}.b58{height:2.552rem}.b59{height:2.596rem}.b60{height:2.64rem}.b61{height:2.684rem}.b62{height:2.728rem}
.b63{height:2.772rem}.b64{height:2.816rem}.b65{height:2.86rem}.b66{height:2.904rem}.b67{height:2.948rem}.b68{height:2.992rem}.b69{height:3.036rem}
.b70{height:3.08rem}.b71{height:3.124rem}.b72{height:3.168rem}.b73{height:3.212rem}.b74{height:3.256rem}.b75{height:3.3rem}.b76{height:3.344rem}
.b77{height:3.388rem}.b78{height:3.432rem}.b79{height:3.476rem}.b80{height:3.52rem}.b81{height:3.564rem}.b82{height:3.608rem}.b83{height:3.652rem}
.b84{height:3.696rem}.b85{height:3.74rem}.b86{height:3.784rem}.b87{height:3.828rem}.b88{height:3.872rem}.b89{height:3.916rem}.b90{height:3.96rem}
.b91{height:4.004rem}.b92{height:4.048rem}.b93{height:4.092rem}.b94{height:4.136rem}.b95{height:4.18rem}.b96{height:4.224rem}.b97{height:4.268rem}
.b98{height:4.312rem}.b99{height:4.356rem}.b100{height:4.4rem}

.yr .lab{font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  color:var(--ink-faint);margin-top:.35rem;padding:.1rem .28rem;}
.yr .cnt{font-family:"IBM Plex Mono",monospace;font-size:.56rem;color:var(--ink-faint);
  margin-bottom:.2rem;font-variant-numeric:tabular-nums;}
.yr:hover .bar{background:var(--ink-faint);}
.yr[aria-pressed="true"] .bar{background:var(--bar-on);}
.yr[aria-pressed="true"] .lab{background:var(--bar-on);color:var(--bar-ink);font-weight:500;}
.yr:focus-visible{outline:2px solid var(--red);outline-offset:-2px;}

.key{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;align-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:var(--ink-faint);
  margin:.7rem 0 1.6rem;}
.key b{display:inline-flex;align-items:center;gap:.35rem;font-weight:400;}
.key i{width:.62rem;height:.62rem;border-radius:50%;display:inline-block;}
.k1{background:var(--one)} .k2{background:var(--two)} .k3{background:var(--three)}
.k0{background:none;border:1px dashed var(--ink-faint);}

/* ---- the calendar ---- */
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.5rem 1rem;}
.mon h3{font-family:Archivo,sans-serif;font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;
  color:var(--ink-soft);margin:0 0 .5rem;text-align:center;}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
.dow{font-family:"IBM Plex Mono",monospace;font-size:.52rem;color:var(--ink-faint);
  text-align:center;padding-bottom:.2rem;}
.daybtn{font-family:"IBM Plex Mono",monospace;font-size:.66rem;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;background:none;border:0;
  padding:0;color:var(--ink-faint);cursor:default;border-radius:50%;
  font-variant-numeric:tabular-nums;}
.daybtn.has{cursor:pointer;color:#fff;font-weight:500;}
.daybtn.n1{background:var(--one);}
.daybtn.n2{background:var(--two);}
.daybtn.n3{background:var(--three);}
.daybtn.n0{border:1px dashed var(--ink-faint);color:var(--ink-soft);cursor:pointer;}
.daybtn.sel{outline:2px solid var(--ink);outline-offset:1px;}
.daybtn:focus-visible{outline:2px solid var(--red);outline-offset:1px;}
.daybtn.closed{opacity:.3;}

/* ---- the day's board ---- */
.board{border-top:2px solid var(--ink);margin-top:2.4rem;}
.datehead{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:1.4rem 0 .25rem;}
.datehead h2{font-family:Archivo,sans-serif;font-weight:700;font-stretch:condensed;
  font-size:clamp(1.35rem,4vw,2rem);margin:0;letter-spacing:-.01em;}
.coverage{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.04em;
  text-transform:uppercase;padding:.2rem .5rem;border:1px solid currentColor;
  white-space:nowrap;}
.cov-3{color:var(--three);} .cov-2{color:var(--two);} .cov-1{color:var(--one);}
.cov-inf{color:var(--ink-soft);border-style:dashed;}
.cov-none{color:var(--ink-faint);}

li.inferred .dish,li.inferred .parts,li.inferred .who{opacity:.72;}
li.inferred{border-left:2px dashed var(--rule);padding-left:.7rem;margin-left:-.7rem;}
.src-inf{color:var(--ink-soft);font-style:italic;}

section.block{border-top:1px solid var(--rule);padding:1.25rem 0;}
.blocklabel{font-family:Archivo,sans-serif;font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;margin:0 0 .8rem;
  display:flex;align-items:center;gap:.55rem;}
.blocklabel::before{content:"";width:.5rem;height:.5rem;flex:none;background:currentColor;}
.b-gotw .blocklabel{color:var(--red);}
.b-celeb .blocklabel{color:var(--brass);}
.b-spec .blocklabel{color:var(--ink-soft);}

ul.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem;}
.dish{font-size:1.08rem;font-weight:600;line-height:1.3;margin:0;}
.parts{color:var(--ink-soft);font-size:.95rem;margin:.15rem 0 0;}
.who{font-family:Archivo,sans-serif;font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;
  color:var(--brass);margin:0 0 .15rem;}
.src{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--ink-faint);
  margin:.3rem 0 0;letter-spacing:.02em;}
.none{font-family:"IBM Plex Mono",monospace;font-size:.85rem;color:var(--ink-faint);margin:0;}

footer{margin-top:2.5rem;border-top:1px solid var(--rule);padding-top:1.1rem;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;line-height:1.65;
  color:var(--ink-faint);}
footer strong{color:var(--ink-soft);font-weight:500;}
footer a{color:var(--ink-soft);}

.fade{animation:in .22s ease-out;}
@keyframes in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}}
@media (max-width:40rem){
  /* Eight nav links wrap to four rows on a phone and eat the top 270px, so the
     machine starts below the fold on the page whose whole point is the machine.
     Same treatment as the chip rows: one line, scrolled sideways, and the
     current page shoved to the front so you always land on your own label. */
  nav{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    margin-bottom:1.4rem;
    margin-left:-.85rem;margin-right:-.85rem;padding:0 .85rem .4rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  nav::-webkit-scrollbar{display:none;}
  nav a{flex:0 0 auto;white-space:nowrap;padding:.5rem .6rem;}
  nav a[aria-current="page"]{order:-1;}
}