/* Chopin's Shadow: a band homepage from 1996. Black velvet, gold type, and a table layout. */
:root {
  --black: #050505;
  --velvet: #1a0010;
  --wine: #4a0024;
  --gold: #c9a227;
  --bone: #efe7d2;
  --silver: #b8b8b8;
  --link: #e0b0ff;
  --visited: #b07cd0;
  --old: "Times New Roman", Times, serif;
  --gothic: "Old English Text MT", "UnifrakturMaguntia", "Blackletter", "Times New Roman", serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--black); }

/* A dark damask pattern, like a tiled background image. */
body {
  margin: 0;
  color: var(--bone);
  font: 17px/1.45 var(--old);
  background-color: var(--black);
  background-image:
    radial-gradient(circle at 25% 25%, var(--velvet) 0 8%, transparent 9%),
    radial-gradient(circle at 75% 75%, var(--velvet) 0 8%, transparent 9%),
    radial-gradient(circle at 75% 25%, #0d0008 0 4%, transparent 5%),
    radial-gradient(circle at 25% 75%, #0d0008 0 4%, transparent 5%);
  background-size: 64px 64px;
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--black); background: var(--gold); }

.page { max-width: 820px; margin: 0 auto; padding: 10px 12px 60px; }

.ticker {
  margin: 0;
  overflow: hidden;
  border: 2px ridge var(--gold);
  background: #000;
  color: var(--gold);
  font: bold 14px "Courier New", monospace;
  white-space: nowrap;
}

.ticker span { display: inline-block; padding-left: 100%; animation: scroll 30s linear infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }

.masthead { padding: 22px 0 10px; text-align: center; }
.presents { margin: 0; color: var(--silver); font-style: italic; }

.logo {
  margin: 6px 0;
  color: var(--gold);
  font: 400 clamp(46px, 11vw, 84px) / 0.95 var(--gothic);
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgb(201 162 39 / 0.6), 3px 3px 0 var(--wine);
}

.motto { margin: 8px 0 14px; color: var(--silver); font-style: italic; letter-spacing: 4px; text-transform: lowercase; }
.piano { width: min(100%, 280px); height: 40px; }

.player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 10px;
  border: 3px outset var(--silver);
  background: #111;
}

.now { color: var(--silver); font: 14px "Courier New", monospace; }

.bevel {
  padding: 6px 14px;
  border: 3px outset #dfdfdf;
  background: #c0c0c0;
  color: #000;
  font: bold 13px Arial, sans-serif;
  cursor: pointer;
}

.bevel:active { border-style: inset; }

.layout { width: 100%; border-collapse: separate; border-spacing: 8px; }
.layout td { vertical-align: top; }

.sidebar {
  width: 190px;
  padding: 10px;
  border: 3px ridge var(--gold);
  background: rgb(26 0 16 / 0.92);
  text-align: center;
}

.side-title { margin: 0 0 8px; color: var(--gold); font: bold 15px "Courier New", monospace; }
.menu { margin: 0 0 14px; padding: 0; list-style: none; text-align: left; }
.menu li { margin: 6px 0; }
.menu li::before { content: "\2020  "; color: var(--gold); }

/* A blurry concert photo, drawn with CSS. */
.photo {
  position: relative;
  height: 110px;
  overflow: hidden;
  border: 2px inset var(--silver);
  background: radial-gradient(ellipse at 50% 100%, #2a0a1a, #000 70%);
  filter: blur(1.2px) contrast(1.1);
}

.spot { position: absolute; top: -20px; left: 20%; width: 50px; height: 140px; background: linear-gradient(rgb(255 240 200 / 0.5), transparent); transform: rotate(18deg); }
.spot.two { left: 60%; transform: rotate(-18deg); }
.figure { position: absolute; bottom: 0; left: 30%; width: 16px; height: 44px; border-radius: 8px 8px 0 0; background: #000; box-shadow: 0 -16px 0 -3px #000; }
.figure.b { left: 50%; height: 52px; }
.figure.c { left: 68%; height: 40px; }

.caption { margin: 4px 0 12px; color: var(--silver); font-size: 12px; font-style: italic; }
.counter-label { margin: 6px 0 4px; font-size: 13px; }

.counter {
  display: inline-block;
  margin: 0;
  padding: 2px 6px;
  border: 2px inset var(--silver);
  background: #000;
  color: var(--gold);
  font: bold 22px "Courier New", monospace;
  letter-spacing: 3px;
}

.content {
  padding: 4px 14px 14px;
  border: 3px ridge var(--gold);
  background: rgb(10 0 6 / 0.9);
}

.content h2 { margin: 20px 0 8px; color: var(--gold); font: 400 26px var(--gothic); border-bottom: 1px solid var(--wine); }

.news dt { color: var(--gold); font-weight: bold; }
.news dd { margin: 0 0 12px 18px; }
.members { padding-left: 22px; }

.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.album { padding: 8px; border: 1px solid var(--wine); background: #0a0006; }
.album h3 { margin: 6px 0; font-size: 16px; color: var(--bone); }
.album h3 span { color: var(--silver); font-weight: normal; font-size: 13px; }
.album ol { margin: 0; padding-left: 20px; font-size: 14px; }
.album.soon { opacity: 0.8; }

.cover {
  display: grid;
  place-items: center;
  height: 120px;
  border: 2px solid #000;
  color: var(--gold);
  font-size: 54px;
}

.c1 { background: linear-gradient(135deg, #0b1440, #000 70%); }
.c2 { background: repeating-linear-gradient(0deg, #222 0 2px, #111 2px 4px); color: var(--bone); }
.c3 { background: linear-gradient(135deg, var(--wine), #000); }

.tour { width: 100%; border-collapse: collapse; font-size: 15px; }
.tour th { color: var(--gold); text-align: left; border-bottom: 2px solid var(--gold); }
.tour td, .tour th { padding: 5px 6px; }
.tour tbody tr:nth-child(odd) { background: rgb(74 0 36 / 0.35); }
.sold { padding: 0 4px; background: #a00; color: #fff; font: bold 11px Arial, sans-serif; }

.letter { margin: 8px 0; padding: 6px 12px; border-left: 4px solid var(--gold); background: #12000a; font-style: italic; }
.letter cite { display: block; color: var(--silver); font-size: 14px; font-style: normal; }

.webring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  border: 2px dotted var(--gold);
  font: bold 14px "Courier New", monospace;
}

.ring { color: var(--gold); }
.small { color: var(--silver); font-size: 13px; }

.construction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 10px;
  color: var(--gold);
}

.stripes { width: 60px; height: 14px; border: 1px solid #000; background: repeating-linear-gradient(-45deg, var(--gold) 0 8px, #000 8px 16px); }

.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 31px;
  border: 1px solid var(--gold);
  background: linear-gradient(#2a0018, #000);
  color: var(--bone);
  font: 9px/1.05 Verdana, Arial, sans-serif;
  text-align: center;
}

.footer { margin-top: 16px; color: var(--silver); font-size: 13px; text-align: center; }

/* The quiet way in, as in the film. */
.pi {
  position: fixed;
  right: 10px;
  bottom: 6px;
  color: rgb(239 231 210 / 0.28);
  font: 18px var(--old);
  text-decoration: none;
}

.pi:hover, .pi:focus-visible { color: var(--gold); background: none; outline: none; }

@media (max-width: 640px) {
  .layout, .layout tbody, .layout tr, .layout td { display: block; width: 100%; }
  .sidebar { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker span { animation: none; padding-left: 0; }
}