/* Under construction — a 1998 homepage. Shows off steps() animations (the blink, the counter) and tiled
   repeating gradients (the starfield and the construction stripes). Everything that moves stops for reduced motion.
   Designed by machine for the Slopwright. */
:root {
  color-scheme: light;
  --panel: #ffffcc;
  --ink: #000000;
  --link: #0000cc;
  --visited: #551a8b;
  --hot: #cc0000;
  --rainbow: linear-gradient(90deg, #ff0000, #ff8800, #ffee00, #00cc00, #0088ff, #4400cc, #cc00cc);
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0; min-width: 320px; color: var(--ink);
  font: 16px/1.5 "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  /* the tiled starfield: two layers of repeating dots over a navy tile */
  background-color: #000040;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, #ffff99 0 1.2px, transparent 2px),
    radial-gradient(circle at 50% 50%, #9999ff 0 1px, transparent 1.5px),
    linear-gradient(45deg, #000060 25%, transparent 25% 75%, #000060 75%),
    linear-gradient(45deg, #000060 25%, transparent 25% 75%, #000060 75%);
  background-size: 37px 37px, 53px 53px, 23px 23px, 40px 40px, 40px 40px;
  background-position: 0 0, 10px 20px, 5px 5px, 0 0, 20px 20px;
}
a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--hot); background: #ffff00; }
a:focus-visible { outline: 3px dashed var(--hot); outline-offset: 3px; background: #ffff00; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 10; padding: 8px 12px; background: #ffff00; color: #000; border: 3px outset #ffff66; }
.skip:focus { top: 8px; }
.page { max-width: 820px; margin: 0 auto; padding: 16px 12px 40px; }
.main:focus { outline: none; }

/* the masthead, in a beveled grey box like a 1998 toolbar */
.site-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
  padding: 8px 12px; background: #c0c0c0; border: 4px outset #e0e0e0;
  font-family: "Times New Roman", Times, serif;
}
.masthead { display: flex; align-items: center; gap: 10px; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 6px; background: #fff; border: 2px inset #e0e0e0; }
.masthead .brand img { display: block; height: 22px; width: auto; }
.site-name { display: inline-flex; align-items: center; min-height: 32px; font-weight: bold; font-size: 18px; color: #000; }
.site-name::after { content: "\00a0Homepage"; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; background: #c0c0c0; border: 3px outset #f0f0f0; color: #000; text-decoration: none; font-size: 14px; }
.site-nav a:active { border-style: inset; }

/* the title, in a big yellow panel with a rainbow under it */
.title-block { margin-top: 14px; padding: 18px 16px; text-align: center; background: var(--panel); border: 6px ridge #ff66cc; }
.edition { margin: 0 0 8px; font-weight: bold; color: var(--hot); }
.edition::before, .edition::after { content: " ★ "; }
.title {
  margin: 0; font: bold clamp(34px, 7vw, 60px)/1.05 "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  color: #990099; text-shadow: 3px 3px 0 #ffcc00;
}
.subtitle { margin: 10px auto 0; max-width: 40ch; font-style: italic; }
/* blink: on, off, on, 1 second a cycle (never faster than 3 flashes a second) */
.title-block::after {
  content: "NEW! Updated daily (or so)"; display: inline-block; margin-top: 12px; padding: 2px 8px;
  background: #ff0000; color: #ffffff; font: bold 14px Arial, sans-serif; letter-spacing: 1px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* every section is its own little page on a light panel */
.contents, .chapter, .outfits, .site-foot { margin-top: 18px; padding: 16px; background: #ffffff; border: 4px ridge #00cccc; }
.contents-title { margin: 0 0 6px; color: #006600; font-size: 22px; }
.contents-list { margin: 0; padding-left: 26px; list-style: square; columns: 2 220px; }
.contents-list li { min-height: 28px; }
.contents-list a { display: inline-block; min-height: 26px; }

/* rainbow rule between chapters */
.chapter { position: relative; }
.chapter::before { content: ""; display: block; height: 6px; margin: -16px -16px 14px; background: var(--rainbow); }
.chapter-title { margin: 0 0 10px; font-size: clamp(22px, 4vw, 30px); color: #000099; font-family: "Times New Roman", Times, serif; }
.chapter-num { display: inline-block; min-width: 1.6em; margin-right: 6px; padding: 0 4px; background: #000099; color: #ffff00; text-align: center; border: 2px outset #6666ff; }
.chapter-body > p, .chapter-body li, .chapter-body dd { max-width: 70ch; }
.first::first-letter { font-size: 2em; color: var(--hot); font-weight: bold; }
.plate { margin: 16px auto; padding: 8px; max-width: 520px; background: #ffffcc; border: 3px double #996600; text-align: center; }
.plate img { display: block; margin: 0 auto; border: 2px solid #000; }
.plate figcaption { margin-top: 6px; font-size: 14px; }

.tools { list-style: none; padding-left: 4px; }
.tools li { padding-left: 26px; position: relative; margin: 6px 0; }
.tools li::before { content: "»"; position: absolute; left: 4px; color: var(--hot); font-weight: bold; }

/* the warning: under construction stripes around a solid yellow box */
.note { margin: 16px 0; padding: 10px; background: repeating-linear-gradient(-45deg, #ffcc00 0 14px, #000 14px 28px); }
.note p { margin: 0; padding: 10px 12px; background: #ffff99; color: #000; font-weight: bold; }
.note p::before { content: "⚠ UNDER CONSTRUCTION ⚠"; display: block; color: var(--hot); letter-spacing: 1px; }

/* beveled table */
.table-wrap { overflow-x: auto; }
table { border: 4px outset #c0c0c0; border-spacing: 3px; background: #c0c0c0; font-family: "Times New Roman", Times, serif; min-width: 460px; }
caption { font-weight: bold; color: #000099; padding: 4px; background: #ffffff; }
th, td { padding: 6px 8px; border: 2px inset #e0e0e0; background: #ffffff; text-align: left; vertical-align: top; }
thead th { background: #000099; color: #ffffff; }
tbody th { background: #ffffcc; }

.rules { padding-left: 30px; }
.rules li { margin: 6px 0; }
.saying { margin: 16px 0 0; padding: 12px 16px; background: #ccffff; border: 3px dotted #0066cc; font-family: "Times New Roman", Times, serif; font-size: 20px; }
.saying p { margin: 0; font-style: italic; }
.saying footer { margin-top: 6px; font-size: 14px; }
.saying footer::before { content: "— "; }

.hazards { margin: 0; display: grid; gap: 8px; }
.hazard { padding: 8px 10px; background: #ffeeee; border: 2px solid var(--hot); }
.hazard dt { font-weight: bold; color: var(--hot); }
.hazard dt::before { content: "☠ "; }
.hazard dd { margin: 2px 0 0; }
.glossary dt { font-weight: bold; color: #006600; margin-top: 8px; }
.glossary dd { margin-left: 20px; }
.sign-off { font-weight: bold; text-align: center; }

/* the outfits: a web ring */
.outfits { border-color: #ff66cc; }
.outfits-title { margin: 0; color: #990099; font-size: clamp(22px, 4vw, 30px); text-align: center; }
.outfits-title::before, .outfits-title::after { content: " ~*~ "; color: #ff66cc; }
.outfits-lede { text-align: center; }
.outfit-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.outfit { padding: 6px 8px; background: #eeeeff; border: 2px outset #ccccff; font-size: 14px; }
.outfit-link { font-weight: bold; display: inline-block; min-height: 26px; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; font-size: 13px; color: #333; }
#th-geocities { background: #ffff00; border: 3px ridge #ff0000; }
#th-geocities .outfit-link::before { content: "★ YOU ARE HERE ★ "; color: var(--hot); }
#th-geocities .outfit-note { display: block; font-size: 13px; margin-top: 4px; }
#th-geocities .outfit-by { display: block; font-size: 12px; }

.site-foot { text-align: center; font-size: 14px; border-color: #c0c0c0; }
.site-foot p { margin: 6px 0; }

/* the extras: a hit counter, an email badge, a "best viewed" sticker and a marquee bar */
.extra-1, .extra-2 { position: relative; max-width: 820px; margin: 0 auto; }
.extra-1::before {
  content: "Visitors: 000427"; display: block; width: max-content; margin: 0 auto 10px; padding: 4px 10px;
  background: #000; color: #33ff33; font: bold 18px "Courier New", monospace; letter-spacing: 3px; border: 3px inset #666;
}
.extra-2 { overflow: hidden; margin-bottom: 30px; background: #000080; border: 2px solid #ffff00; height: 28px; }
.extra-2::before {
  content: "Welcome to my homepage ★ Sign my guestbook ★ Best viewed in any browser at 800 × 600 ★ Thanks for visiting";
  position: absolute; top: 3px; left: 0; white-space: nowrap; color: #ffff00; font: bold 15px "Comic Sans MS", cursive;
  animation: marquee 18s linear infinite;
}
@keyframes marquee { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
.extra-3, .extra-4 { display: none; }

@media (max-width: 600px) {
  .page { padding: 8px 8px 30px; }
  .contents, .chapter, .outfits, .site-foot { padding: 12px; }
  .chapter::before { margin: -12px -12px 12px; }
  .site-name::after { content: ""; }
}
@media (prefers-reduced-motion: reduce) {
  .title-block::after, .extra-2::before { animation: none; }
  .extra-2::before { transform: none; left: 8px; }
}

@media (max-width: 600px) { table { min-width: 0; } }

/* moving between outfits: a cross-document view transition where the browser has them (Chromium did, Firefox did not, when check.mjs last ran), with the
   masthead and the title carried across; an ordinary page load elsewhere, and under reduced motion */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.title { view-transition-name: manual-title; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }