/* MARQUEE
   The loud one, which is the register the writing is actually in. This is a site
   that opened with "kiss my entire ass", billed itself as "redesign number
   32,196" and claimed to be one of the longest-enduring dot-coms on the web. A
   quiet design would be a mistranslation.

   So: type as the hero. The wordmark is set enormous and tight in Impact -- a
   core web font since 1996, the face of every loud page of the period -- against
   a saturated indigo rather than the black this kind of layout usually defaults
   to. Blocks get hard offset shadows, the flat kind a zine or a sticker has,
   never the soft grey blur.

   The pictures section it was built around is not part of this recreation, so
   what remains is the type, the colour and the hard-edged blocks. */

:root {
  --indigo:  #232052;
  --deep:    #191640;
  --mustard: #F0C33C;
  --coral:   #E85D4A;
  --mint:    #7FD1C1;
  --well:    #FFFFFF;
  --ink:     #1A1830;
  --dim:     #56527A;
}

* { box-sizing: border-box; }

img { max-width: 100%; }

/* Wide content opts out of the reading measure and scrolls on its own. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Skip link, visible only once focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 8px 12px;
  background: var(--well);
  color: var(--ink);
  z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

body {
  margin: 0;
  padding: 0 0 70px;
  background: var(--indigo);
  color: var(--ink);
  font: 14px/1.7 Verdana, Geneva, sans-serif;
}

a         { color: #1F3FA8; }
a:visited { color: #7B2E86; }
a:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

.stage { max-width: 830px; margin: 0 auto; padding: 0 20px; }

/* ---- the hero is the wordmark ---- */

.banner { padding: 46px 0 30px; }
.banner .wordmark {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: normal;
  font-size: clamp(52px, 12.5vw, 118px);
  line-height: 0.82;
  letter-spacing: -0.025em;
  color: var(--mustard);
  text-transform: lowercase;
}
.banner .kicker {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mint);
}

/* ---- nav: chunky blocks with a hard shadow ---- */

.blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-bottom: 26px;
}
.blocks a, .blocks .here {
  font: bold 12px/1 Verdana, Geneva, sans-serif;
  padding: 10px 14px;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.blocks a        { background: var(--well); color: var(--ink); }
.blocks a:visited{ color: var(--ink); }
.blocks a:hover  { background: var(--mustard); }
.blocks .here    { background: var(--coral); color: var(--well); }

/* ---- content well ---- */

.well {
  background: var(--well);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--coral);
  padding: 30px 32px 36px;
}
.content { min-width: 0; }
/* The measure applies to prose. Picture grids and record tables are wider than
   a reading column by nature and use the full width of the page. */
.content > p,
.content > h2,
.content > h3,
.content > ul,
.content > ol,
.content > blockquote { max-width: 64ch; }
.content p { margin: 0 0 1.1em; }
.content h2 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  margin: 1.9em 0 0.6em;
  color: var(--indigo);
}
.content h2:first-child { margin-top: 0; }
.era { font-family: Verdana, sans-serif; font-size: 12px; color: var(--dim); }
.lede {
  font-size: 13px;
  color: var(--dim);
  border-left: 5px solid var(--mustard);
  padding-left: 14px;
  font-style: normal;
}
.backlink { font-size: 12px; margin: 0 0 1.4em; }

.subs {
  font-size: 12px;
  background: var(--indigo);
  color: var(--well);
  padding: 9px 14px;
  margin: 0 0 24px;
}
.subs a { color: var(--mustard); margin-left: 12px; }
.subs a:visited { color: var(--mustard); }

/* ---- records ---- */

.era-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  margin: 1.2em 0;
}
.era-table th {
  text-align: left;
  background: var(--indigo);
  color: var(--well);
  padding: 7px 9px;
  position: sticky;
  top: 0;
}
.era-table td {
  padding: 5px 9px;
  border-bottom: 1px solid #DDDCE8;
  vertical-align: top;
}

/* ---- footer ---- */

.copyline, .updated, .provenance, .reassembled {
  font-size: 12px;
  color: var(--mint);
}
.reassembled { padding-top: 4px; }
.copyline {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 2px solid var(--mustard);
  color: var(--well);
}
.copyline a, .provenance a { color: var(--mustard); }
.copyline a:visited, .provenance a:visited { color: var(--mustard); }
.provenance a { word-break: break-all; }

@media (max-width: 620px) {
  .stage { padding: 0 12px; }
  .banner { padding: 28px 0 20px; }
  .well { padding: 20px 16px 24px; box-shadow: 5px 5px 0 var(--coral); }
  .content h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}