@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:54rem;margin:0 auto;padding:3rem 1.15rem 4rem;}

header{text-align:center;margin-bottom:2.6rem;}
.kicker{font-size:.66rem;letter-spacing:.34em;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(2.4rem,9vw,4.6rem);line-height:.92;margin:0;color:var(--label);
  letter-spacing:-.015em;text-wrap:balance;}
h1 em{font-style:italic;font-weight:400;color:var(--brass);}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--brass-dim),transparent);
  margin:1.5rem auto 0;max-width:24rem;}
.standfirst{font-size:.86rem;color:var(--ink-soft);margin:1.3rem auto 0;max-width:38rem;
  line-height:1.8;}
.standfirst + .standfirst{margin-top:1rem;}

/* Back to the rest of the estate. Small, top-left, out of the way of the
   masthead but the first thing under the thumb on a phone. */
.backlink{display:inline-block;text-decoration:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid transparent;padding:.34rem .6rem;
  margin-bottom:1.4rem;}
.backlink:hover{color:var(--brass);border-color:var(--edge);
  text-shadow:0 0 10px rgba(204,0,51,.45);}
.backlink:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

/* The two About pages sit on their own plates, right under the opening, because
   a visitor deciding whether to trust any of this should not have to hunt past
   six machines to find out where it came from. */
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:.9rem;margin:2.4rem 0 0;}
.plate-card{
  display:block;text-decoration:none;color:inherit;
  background:var(--cabinet);border:1px solid var(--brass-dim);padding:1.3rem 1.25rem;
}
.pl-eyebrow{display:block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-dim);margin-bottom:.5rem;}
.pl-title{font-family:"Bodoni Moda",Didot,serif;font-weight:700;font-size:1.45rem;
  margin:0 0 .5rem;color:var(--label);line-height:1.1;letter-spacing:0;
  text-transform:none;}
.plate-card p{margin:0;font-size:.74rem;color:var(--ink-soft);line-height:1.75;}
.plate-card:hover .pl-title,.plate-card:focus-visible .pl-title{font-weight:900;}
.plate-card:hover,.plate-card:focus-visible{
  border-color:var(--brass);
  background:linear-gradient(180deg,rgba(204,0,51,.07),rgba(204,0,51,.01) 70%);
  box-shadow:0 0 0 1px var(--brass),0 8px 26px rgba(204,0,51,.22);
  outline:none;
}
.plate-card:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

/* Borders on the cells rather than the old gap:1px-over-a-background trick.
   That trick paints any leftover cell in the hairline colour, which was
   invisible on the near-black ground and a khaki slab on cream. Three figures
   fill a row exactly today, but the grid is auto-fit and the count has changed
   once already, so this stays. */
.figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:0;border:1px solid var(--edge);border-width:1px 0 0 1px;margin:2.6rem 0;
}
.fig{background:var(--cabinet);padding:1.1rem .9rem;text-align:center;
  border:1px solid var(--edge);border-width:0 1px 1px 0;}
.fig b{
  display:block;font-family:"Bodoni Moda",Didot,serif;font-weight:700;
  font-size:1.9rem;color:var(--brass);line-height:1;font-variant-numeric:tabular-nums;
}
.fig span{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.5rem;line-height:1.5;}

h2{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);
  margin:2.8rem 0 1.1rem;font-weight:600;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem;}
.card{
  display:block;text-decoration:none;color:inherit;
  background:var(--cabinet);border:1px solid var(--edge);padding:1.25rem 1.2rem;
}
.card h3{font-family:"Bodoni Moda",Didot,serif;font-weight:700;font-size:1.3rem;
  margin:0 0 .4rem;color:var(--label);line-height:1.15;}
.card p{margin:0;font-size:.72rem;color:var(--ink-soft);line-height:1.75;}
.card .n{display:block;margin-top:.7rem;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass-dim);}
.card:hover h3,.card:focus-visible h3{font-weight:900;}
.card:hover,.card:focus-visible{
  border-color:var(--brass);
  background:linear-gradient(180deg,rgba(204,0,51,.07),rgba(204,0,51,.01) 70%);
  box-shadow:0 0 0 1px var(--brass),0 8px 26px rgba(204,0,51,.22);
  outline:none;
}
.card:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

.note{
  margin-top:2.8rem;border:1px solid var(--edge);background:var(--cabinet);
  padding:1.3rem 1.25rem;font-size:.72rem;line-height:1.85;color:var(--ink-soft);
}
.note strong{color:var(--label);font-weight:500;}
.note p{margin:0 0 .8rem;}
.note 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);}