@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
     every one of the 220 archived captures, 2001 to 2014. Thirteen years and
     he never touched them. The other four are pixel-counted off the counter
     artwork: the sash yellow, the blue on the shoes, the bun, the panel. */
  --lacquer:#FFFFCC;      /* the ground, exact */
  --cabinet:#FFFDF0;      /* panels, one shade off the ground */
  --drawer:#FFFFFF;       /* drawer faces */
  --brass:#CC0033;        /* the crimson, exact - the primary now */
  --brass-dim:#9E0B27;
  --label:#8A0022;        /* display type */
  --ink:#4A1018;          /* body: the crimson pulled dark enough to read long */
  --ink-soft:#8A4048;
  --ink-faint:#8A6B3A;
  --seal-lit:#CC0033;
  --edge:#E0CE86;         /* hairlines, out of the cream family */
  --mustard:#F0D010;      /* the banner sash */
  --blue:#2050A0;         /* the shoes */
  --tan:#FFE0C0;          /* the bun */
  --peri:#E0E0FF;         /* the panel behind the art */
  --black:#1A1008;
}
*{box-sizing:border-box}
html{background:var(--lacquer);}
body{margin:0;background:var(--lacquer);color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;}
.wrap{max-width:44rem;margin:0 auto;padding:1.6rem 1.15rem 4rem;}

nav{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin-bottom:2.4rem;
  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:hover{color:var(--brass);border-color:var(--edge);
  text-shadow:0 0 10px rgba(204,0,51,.45);}
nav a[aria-current="page"]{color:var(--lacquer);background:var(--brass);border-color:var(--brass);}
nav a:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

.kicker{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass-dim);margin:0 0 1rem;}
h1{font-family:"Bodoni Moda",Didot,"Times New Roman",serif;font-weight:900;
  font-size:clamp(2rem,7vw,3.2rem);line-height:.98;margin:0 0 1.4rem;
  color:var(--label);letter-spacing:-.01em;text-wrap:balance;}
h2{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);
  margin:2.6rem 0 1rem;font-weight:600;}
h3{font-family:"Bodoni Moda",Didot,serif;font-weight:700;font-size:1.15rem;
  color:var(--label);margin:1.6rem 0 .4rem;}
p{font-size:.8rem;line-height:1.9;color:var(--ink-soft);margin:0 0 1rem;}
p strong{color:var(--label);font-weight:500;}
em{color:var(--ink);}
a{color:var(--brass);}

.lead{font-size:.92rem;color:var(--ink);line-height:1.85;}
/* The question the rest of the page answers. Set as an aside so it reads
   as someone speaking rather than as the first fact. */
.ask{font-family:"Bodoni Moda",Didot,serif;font-style:italic;
  font-size:1.15rem;line-height:1.6;color:var(--brass-dim);
  margin:0 0 1.6rem;max-width:34rem;}

table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.72rem;}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--edge);
  color:var(--ink-soft);}
th{color:var(--brass-dim);font-weight:600;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;}
td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums;}
td strong{color:var(--label);font-weight:500;}

blockquote{
  margin:1.4rem 0;padding:.9rem 1.1rem;border-left:2px solid var(--brass-dim);
  background:var(--cabinet);
  font-family:"Bodoni Moda",Didot,serif;font-style:italic;font-size:.95rem;
  color:var(--ink);line-height:1.6;
}
code{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  color:var(--brass);background:var(--cabinet);padding:.1rem .3rem;
}
ul{margin:0 0 1rem;padding-left:1.1rem;}
li{font-size:.8rem;line-height:1.9;color:var(--ink-soft);margin-bottom:.5rem;}
li strong{color:var(--label);font-weight:500;}

.credit{
  margin:2.6rem 0 0;border:1px solid var(--brass-dim);background:var(--cabinet);
  padding:1.4rem 1.3rem;
}
.credit p{margin:0 0 .9rem;}
.credit p:last-child{margin:0;}

footer{margin-top:2.6rem;border-top:1px solid var(--edge);padding-top:1.2rem;
  font-size:.66rem;line-height:1.8;color:var(--ink-faint);}
footer a{color:var(--brass-dim);}
@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;}
}