/* The Wall — built like a real 1997 personal homepage.
   See DESIGN.md for the reasoning.

   The lesson carried over from the last attempt at this brief: the old web
   was not art-directed. It looked the way it did because the browser's
   defaults did most of the work and the author had no design training.
   So: Times New Roman body copy, Comic Sans / Arial headings, a busy tiled
   wallpaper, garish clashing colour instead of a curated palette, real
   bordered tables, and beveled ridge/outset/inset borders everywhere.

   No webfonts. No JavaScript. Movement (the spinning record, the blinking
   construction sign, the twinkling stars) comes from SMIL inside the SVGs
   themselves, not from script.

   Selector order below runs low-to-high specificity within each shared
   simple selector (p, a, h1...) rather than by section, so stylelint's
   no-descending-specificity check stays honest end to end. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px 8px 40px;
  background-color: #909;
  background-image: url("./images/tile-shrine.svg");
  background-repeat: repeat;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.3;
}

/* Each page gets its own wallpaper tile rather than sharing one background
   end to end — a real ring of fan pages never used the same tile twice. */
.page-wall {
  background-color: #609;
  background-image: url("./images/tile-wall.svg");
}

.page-guestbook {
  background-color: #063;
  background-image: url("./images/tile-guestbook.svg");
}

.page-links {
  background-color: #930;
  background-image: url("./images/tile-links.svg");
}

/* The floating content panel every personal page needed to keep the wild
   wallpaper from swallowing the text. */
.shell {
  max-width: 720px;
  margin: 0 auto;
  border: 4px outset #ccc;
  background-color: #fffef2;
}

.shell__inner {
  padding: 14px 18px 20px;
}

/* ---- base type ------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
}

h2 {
  margin: 18px 0 8px;
  color: #c06;
  font-size: 20px;
}

h3 {
  margin: 12px 0 6px;
  color: #06c;
  font-size: 16px;
}

p {
  margin: 0 0 10px;
}

a {
  color: #00e;
}

a:visited {
  color: #609;
}

hr.rainbow {
  height: 4px;
  margin: 16px 0;
  border: 0;
  background-image: linear-gradient(
    90deg,
    #f00 0 16.6%,
    #f90 16.6% 33.3%,
    #ff0 33.3% 50%,
    #0f0 50% 66.6%,
    #06f 66.6% 83.3%,
    #90f 83.3% 100%
  );
}

.center {
  text-align: center;
}

.blink-text {
  color: #f00;
  font-weight: bold;
  text-shadow: 1px 1px 0 #ff0;
}

/* ---- masthead ----------------------------------------------------------- */

.marquee-bar {
  padding: 4px 0;
  background-color: #000;
  color: #0f0;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  font-weight: bold;
}

.masthead {
  padding: 10px 14px;
  border-bottom: 4px ridge #f0c;
  background-color: #309;
  color: #ff0;
  text-align: center;
}

.masthead h1 {
  margin: 0;
  color: #ff0;
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  font-size: 30px;
  letter-spacing: 0.03em;
  text-shadow: 2px 2px 0 #000;
}

.masthead p {
  margin: 4px 0 0;
  color: #0ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- nav ------------------------------------------------------------ */

nav.menu {
  margin: 10px 0;
  border: 3px outset #ff0;
  background-color: #000;
}

.menu table {
  width: 100%;
  border-collapse: collapse;
}

.menu td {
  padding: 0;
  border: 2px solid #000;
}

.menu a {
  display: block;
  padding: 6px 4px;
  background-color: #f60;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.menu a:visited {
  color: #fff;
}

.menu a[aria-current="page"] {
  background-color: #ff0;
  color: #000;
}

/* ---- hit counter -------------------------------------------------------- */

.counter-box {
  display: inline-block;
  margin: 10px 0;
  padding: 6px 10px;
  border: 3px inset #999;
  background-color: #000;
  text-align: center;
}

.counter-box p {
  margin: 0 0 2px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.counter {
  display: inline-flex;
  gap: 2px;
}

.counter span {
  padding: 1px 4px;
  background-color: #030;
  color: #0f0;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  font-weight: bold;
}

/* ---- under construction --------------------------------------------- */

.construction {
  display: block;
  margin: 12px auto;
  max-width: 320px;
}

/* ---- the record wall (table) ------------------------------------------- */

.wall {
  width: 100%;
  margin: 10px 0 16px;
  border: 3px outset #909;
  border-collapse: separate;
  border-spacing: 3px;
}

.wall caption {
  padding: 5px;
  background-color: #000;
  color: #0ff;
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

.wall__year {
  width: 3.4em;
  padding: 6px 4px;
  border: 2px ridge #333;
  background-color: #222;
  color: #ff0;
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.sleeve {
  padding: 8px 10px;
  border: 3px ridge #000;
  vertical-align: top;
}

.sleeve h3 {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.2;
}

.sleeve p {
  margin: 0;
  font-size: 15px;
}

.sleeve__row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.sleeve__cover {
  flex: none;
  border: 2px solid #000;
  background-color: #fff;
}

.sleeve__text {
  min-width: 0;
  flex: 1 1 auto;
}

.sleeve__artist {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Six clashing plate colours cycled down the wall — the gaudier, the more
   1997. Deliberately NOT a curated triad. */
.sleeve--1 {
  background-color: #fcf;
}

.sleeve--2 {
  background-color: #cff;
}

.sleeve--3 {
  background-color: #ffc;
}

.sleeve--4 {
  background-color: #cfc;
}

.sleeve--5 {
  background-color: #fcc;
}

.sleeve--6 {
  background-color: #ccf;
}

/* ---- guestbook ---------------------------------------------------------- */

.entry {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 2px groove #909;
  background-color: #fff;
}

.entry:nth-child(even) {
  background-color: #ffe;
}

.entry__who {
  margin: 0 0 2px;
  color: #c06;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
}

.entry__when {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: normal;
  color: #666;
}

.entry p {
  margin: 0;
}

.sign-box {
  margin: 14px 0;
  padding: 10px 12px;
  border: 3px inset #999;
  background-color: #eee;
  text-align: center;
}

.sign-box .fake-input {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 6px auto;
  padding: 4px 6px;
  border: 2px inset #999;
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #666;
  text-align: left;
}

.fake-button {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 16px;
  border: 3px outset #ccc;
  background-color: #ddd;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

/* ---- links / webring ----------------------------------------------------- */

.linklist {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}

.linklist li {
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 2px ridge #06c;
  background-color: #eff;
}

.linklist strong {
  color: #06c;
}

.buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}

.buttons-row img {
  display: block;
  border: 1px solid #000;
}

.badge {
  display: inline-block;
  margin: 8px 0;
  padding: 4px 8px;
  border: 2px outset #000;
  background-color: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

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

.foot {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 3px ridge #909;
  text-align: center;
}

.foot p {
  margin: 0 0 8px;
  font-size: 13px;
}

.foot__small {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  color: #666;
}

/* ---- welcome / intro box ------------------------------------------------
   Kept last among the "p"-bearing components: :last-child pushes its
   specificity above the plain "<class> p" rules above it, so it has to be
   declared after every one of them or stylelint reads it as descending. */

.welcome-box {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 3px ridge #f90;
  background-color: #ffc;
}

.welcome-box p:last-child {
  margin-bottom: 0;
}

/* Not era furniture — no reason to ship the keyboard path broken. */
.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 0;
  padding: 6px;
  background-color: #ff0;
  color: #000;
}