@charset "UTF-8";
/* A committed single look: a lacquered specimen cabinet. Doug's game grammar was
   literally (spirit or fruit) + (wild animal), which is a taxidermy hall crossed
   with a liquor cabinet, so every machine is built as that one object rather than
   a document that flips between themes. Colours are painted explicitly so the
   page holds on whatever ground the viewer's app puts behind 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:"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:1.6rem 1.15rem 4rem;}

nav{
  display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;
  margin-bottom:2.2rem;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);}
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;}

header{text-align:center;margin-bottom:2.25rem;}
.kicker{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass-dim);margin:0 0 .9rem;}
h1{
  font-family:"Bodoni Moda",Didot,"Times New Roman",serif;
  font-weight:900;font-size:clamp(2rem,7vw,3.7rem);
  line-height:.95;margin:0;color:var(--label);letter-spacing:-.01em;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.3rem auto 0;max-width:22rem;}
.standfirst{font-size:.78rem;color:var(--ink-soft);margin:1.1rem auto 0;
  max-width:34rem;line-height:1.7;}

.cabinet{background:var(--cabinet);border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(204,0,51,.10);padding:1.6rem 1.4rem;}
.dials{display:flex;flex-direction:column;gap:1.7rem;}
.dial{display:flex;flex-direction:column;gap:.5rem;}
.plate{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.4rem 1rem;flex-wrap:wrap;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin:0;line-height:1.5;
}
.plate span{letter-spacing:.06em;color:var(--ink-faint);text-transform:none;white-space:nowrap;}
select{
  width:100%;appearance:none;
  font-family:"Bodoni Moda",Didot,serif;font-size:1.12rem;font-weight:400;
  color:var(--label);background:var(--drawer);
  border:1px solid var(--edge);border-left:3px solid var(--brass-dim);
  padding:.72rem 2.2rem .72rem .85rem;border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),
                   linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.15rem,calc(100% - .8rem) 1.15rem;
  background-size:.35rem .35rem,.35rem .35rem;background-repeat:no-repeat;
}
select:hover{border-left-color:var(--brass);}
select:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

.levers{display:flex;gap:.7rem;margin-top:1.7rem;flex-wrap:wrap;}
button{
  font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.78rem 1.15rem;cursor:pointer;border-radius:0;
  background:var(--brass);color:var(--lacquer);border:1px solid var(--brass);flex:1 1 auto;
}
button.ghost{background:transparent;color:var(--brass);}
button:hover{background:var(--label);border-color:var(--label);color:var(--lacquer);}
button.ghost:hover{background:var(--brass);color:var(--lacquer);}
button:focus-visible{outline:2px solid var(--label);outline-offset:2px;}

/* Every dial owns its own chip row. One row driving two dials was an earlier
   version and it was broken by construction: narrowing to Cheese knocked the
   other dial off its mustard onto whatever sorted first. */
.chips{display:flex;flex-wrap:wrap;gap:.34rem;margin-bottom:.7rem;}
.chip{
  font-family:"Bodoni Moda",Didot,serif;font-size:.92rem;
  background:transparent;color:var(--ink-soft);border:1px solid var(--edge);
  padding:.3rem .6rem;cursor:pointer;border-radius:0;
  display:inline-flex;align-items:baseline;gap:.4rem;flex:0 0 auto;
  letter-spacing:0;text-transform:none;font-weight:400;
}
.chip .n{font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  color:var(--ink-faint);letter-spacing:.04em;}
.chip:hover{border-color:var(--brass-dim);color:var(--label);background:transparent;}
.chip[aria-pressed="true"]{background:var(--mustard);border-color:#C9A800;color:var(--black);}
.chip[aria-pressed="true"] .n{color:var(--black);opacity:.62;}
.chip:focus-visible{outline:2px solid var(--label);outline-offset:2px;}

.aside{font-size:.66rem;color:var(--ink-faint);line-height:1.7;margin:1.3rem 0 0;}

.built{margin:1.9rem 0 0;padding:1.5rem 1.4rem;background:var(--tan);
  border:1px solid var(--edge);}
.built p{margin:0;}
.built .name{font-family:"Bodoni Moda",Didot,serif;font-size:clamp(1.25rem,3.6vw,1.85rem);
  font-weight:700;line-height:1.18;color:var(--label);text-wrap:balance;}
.built .fix{color:var(--ink-soft);font-size:.88rem;margin-top:.55rem;line-height:1.6;}
.honoured{
  font-family:"Bodoni Moda",Didot,serif;font-style:italic;
  color:var(--brass);font-size:1rem;margin:0 0 .35rem;
}

.verdict{margin-top:1.4rem;border-top:1px solid var(--edge);padding-top:1.4rem;}
.stamp{display:inline-block;padding:.42rem .85rem;border:2px solid currentColor;
  font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  transform:rotate(-1.4deg);}
.hit .stamp{color:var(--seal-lit);}
.near .stamp{color:var(--blue);}
.miss .stamp{color:var(--ink-faint);}
.verdict h3{font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-style:italic;
  font-size:1.05rem;margin:.9rem 0 .3rem;color:var(--ink);}
.verdict p{margin:.35rem 0 0;font-size:.82rem;color:var(--ink-soft);line-height:1.65;}
.dates{margin-top:.7rem;font-size:.72rem;color:var(--brass);letter-spacing:.03em;
  word-spacing:.2em;}
.tag{
  display:inline-block;margin-top:.8rem;padding:.22rem .5rem;
  border:1px dashed var(--brass-dim);color:var(--brass);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
}
.odds{margin-top:1.5rem;font-size:.66rem;color:var(--ink-faint);letter-spacing:.05em;}
.stamped{animation:stamp .32s cubic-bezier(.2,1.5,.5,1);}
@keyframes stamp{
  0%{opacity:0;transform:rotate(-1.4deg) scale(1.6)}
  60%{opacity:1;transform:rotate(-1.4deg) scale(.96)}
  100%{transform:rotate(-1.4deg) scale(1)}
}
@media (prefers-reduced-motion:reduce){.stamped{animation:none}}

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 strong{color:var(--ink-soft);font-weight:500;}
footer a{color:var(--brass-dim);}

/* ---- hover: a crimson glow ----
   This was the sc.com glitch - a magenta/cyan chromatic split with a four-step
   jitter - and it worked while the ground was dark. On cream it reads as a
   rendering fault, and it puts two colours from another site on top of Doug's
   own two. Same job, done with the crimson that is already here. text-shadow
   inherits, so putting it on the control lights the label inside it too. */
.chip:hover,
.chip:focus-visible,
select:hover,
select:focus-visible,
nav a:hover,
nav a:focus-visible{
  text-shadow: 0 0 10px rgba(204,0,51,.45);
}
.chip:hover,
.chip:focus-visible{ border-color: var(--brass); color: var(--label); }
select:hover,
select:focus-visible{ border-left-color: var(--brass); }
/* the pressed chip is already mustard; a crimson glow on it only muddies it */
.chip[aria-pressed="true"]:hover{ text-shadow: none; }

/* ---- narrow screens ----
   The wall is the problem, not the font size. Sixteen animal chips and two rows
   of ten categories wrap into roughly fifteen lines on a 375px screen, so the
   first dropdown is below the fold and the page reads as a settings panel
   rather than a machine.
 *
   So on a phone each filter row becomes ONE line that scrolls sideways, with
   chips big enough to hit - around 44px, which is the smallest target worth
   shipping. Three rows instead of fifteen, nothing hidden, and a chip left
   half-cut at the edge is the only affordance needed to say there's more. */
@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;}

  .wrap{padding:1rem .85rem 3rem;}
  nav{gap:.25rem;margin-bottom:1.5rem;font-size:.6rem;}
  nav a{padding:.42rem .55rem;}

  header{margin-bottom:1.6rem;}
  .kicker{font-size:.6rem;letter-spacing:.24em;margin-bottom:.7rem;}
  h1{font-size:clamp(1.8rem,9vw,2.5rem);}
  .standfirst{font-size:.82rem;line-height:1.75;}
  .rule{margin-top:1rem;}

  .cabinet{padding:1.1rem .9rem;}
  .dials{gap:1.5rem;}
  .plate{letter-spacing:.1em;font-size:.66rem;}

  .chips{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-bottom:.45rem;margin-bottom:.55rem;
    /* bleed to the edges so the cut-off chip reads as "scroll me", not a bug */
    margin-left:-.9rem;margin-right:-.9rem;padding-left:.9rem;padding-right:.9rem;
    scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{display:none;}
  .chip{
    scroll-snap-align:start;flex:0 0 auto;
    font-size:1rem;padding:0 .85rem;min-height:2.75rem;align-items:center;
  }
  .chip .n{font-size:.68rem;}

  select{font-size:1.05rem;min-height:3rem;padding:.85rem 2.2rem .85rem .8rem;
    background-position:calc(100% - 1.15rem) 1.35rem,calc(100% - .8rem) 1.35rem;}
  .levers{gap:.5rem;margin-top:1.4rem;}
  button{font-size:.72rem;min-height:3rem;padding:.9rem .8rem;flex:1 1 100%;}

  .aside{font-size:.7rem;}
  .built{padding:1.15rem 1rem;}
  .built .name{font-size:1.32rem;}
  .built .fix{font-size:.92rem;}
  .verdict h3{font-size:1rem;}
  .verdict p,.dates{font-size:.84rem;}
  .odds,footer{font-size:.7rem;}
}

/* Between phone and desktop the chips can wrap again, but the targets stay
   generous - a tablet is still a thumb. */
@media (min-width:40.01rem) and (max-width:60rem){
  .chip{min-height:2.3rem;align-items:center;font-size:.95rem;}
  select{min-height:2.8rem;}
}