@charset "UTF-8";
/* The one page on this site that is not a machine. Everywhere else the type is
   set for scanning - labels, counts, dials. This is set for reading, so the
   measure narrows, the leading opens up, and the brass gets used once at the top
   and then left alone. The story does the work; the page should get out of the
   way of it. */
: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:"Source Serif 4",Georgia,serif;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;}
.wrap{max-width:38rem;margin:0 auto;padding:1.6rem 1.15rem 4rem;}

nav{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin-bottom:3rem;
  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: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 1.1rem;}
h1{font-family:"Bodoni Moda",Didot,"Times New Roman",serif;font-weight:900;
  font-size:clamp(2.1rem,7vw,3.4rem);line-height:.98;margin:0 0 1.8rem;
  color:var(--label);letter-spacing:-.012em;text-wrap:balance;}

/* The story runs as one voice. No pull quotes, no callouts, no interruptions -
   it was written to be read straight through. */
.story p{font-size:1.06rem;line-height:1.85;color:var(--ink);margin:0 0 1.5rem;}
.story p:first-of-type{font-size:1.2rem;line-height:1.7;color:var(--label);}
/* The opening sentence sits on a single line.

   It stays flush left with the heading and every paragraph under it, and runs
   past the right edge of the reading column instead. The first attempt centred
   it on the viewport, which pulled it 190px left of everything else and read as
   a broken float rather than a wider line.

   Measured, not guessed: the line is 693px at 1.2rem, and 691px in the Georgia
   fallback, so a font swap cannot change the fit. 52rem was the first cut and
   it left 16px of clearance, which one scrollbar would have eaten. 56rem leaves
   40px at its tightest and more at every width above. Below that nothing fits
   and legibility wins, so it wraps like any other paragraph. */
@media (min-width:56rem){
  .story p:first-of-type{
    white-space:nowrap;width:max-content;max-width:none;
  }
}
.story p:last-of-type{
  font-family:"Bodoni Moda",Didot,serif;font-size:1.25rem;line-height:1.5;
  color:var(--brass);margin-top:2.4rem;
}
.story .beat{
  height:1px;width:4rem;background:var(--edge);border:0;
  margin:2.4rem 0;
}

.after{
  margin-top:3.4rem;border-top:1px solid var(--edge);padding-top:1.6rem;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;line-height:1.9;
  color:var(--ink-faint);
}
.after strong{color:var(--ink-soft);font-weight:500;}
.after a{color:var(--brass-dim);}
.after p{margin:0 0 .9rem;}
.after p:last-child{margin:0;}

footer{margin-top:2.4rem;border-top:1px solid var(--edge);padding-top:1.2rem;
  font-family:"IBM Plex Mono",monospace;
  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;}
}