/* Subpages: readable pages with the room's theme in the frame, never in the
   content (see POOVEY_REDESIGN_BRIEF.md, "Subpages"). Green means link and
   nothing else. js/subpage.js draws the art header, scratchy rules and frames,
   beer rings, and the floor-junk footer. */
:root {
  --bg: #000;
  --text: #c4c4c4;
  --bright: #ececec;
  --muted: #8a8a8a;
  --ink: #c9c9c9;
  --plane: #1b1b1b;
  --stain: #121212;
  --dead: #474747;
  --go: #3fe06a;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --neon: "Tilt Neon", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.65 var(--body);
  position: relative;
  overflow-x: hidden;
}

.page { max-width: 44rem; margin: 0 auto; padding: 0 16px 2rem; position: relative; z-index: 1; }

/* ---------- links: green, with a scratchy underline ---------- */
a { color: var(--go); text-decoration: none; }
.page a, .foot a {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'%3E%3Cpath d='M0 3.2Q8 1.6 15 3.4T30 2.9T45 3.6T60 3' fill='none' stroke='%233fe06a' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 60px 6px;
  padding-bottom: 3px;
}
a:hover, a:focus-visible { color: var(--bright); }
a:focus-visible { outline: 2px dashed var(--go); outline-offset: 3px; }

/* ---------- neon ---------- */
.neon {
  font-family: var(--neon);
  font-weight: 400;
  color: #fafafa;
  text-shadow: 0 0 2px #fff, 0 0 7px rgba(255, 255, 255, 0.45);
  letter-spacing: 0.03em;
}
.neon .dead { color: var(--dead); text-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .neon .flicker { animation: flicker 7s infinite steps(1, end); }
  /* Page titles: the dead letter sputters back on now and then, a couple of
     quick flashes, then dies again. js/subpage.js starts each at a random point. */
  .hero h1 .dead { animation: sputter 11s infinite steps(1, end); }
}
@keyframes sputter {
  0%, 100% { color: var(--dead); text-shadow: none; }
  71% { color: #fafafa; text-shadow: 0 0 2px #fff, 0 0 7px rgba(255, 255, 255, 0.45); }
  71.6% { color: var(--dead); text-shadow: none; }
  72.3% { color: #fafafa; text-shadow: 0 0 2px #fff, 0 0 7px rgba(255, 255, 255, 0.45); }
  74.5% { color: var(--dead); text-shadow: none; }
  90% { color: #fafafa; text-shadow: 0 0 2px #fff, 0 0 7px rgba(255, 255, 255, 0.45); }
  90.5% { color: var(--dead); text-shadow: none; }
}
@keyframes flicker {
  0%, 61%, 63%, 66%, 100% { opacity: 1; }
  62%, 64.5% { opacity: 0.15; }
  65% { opacity: 0.6; }
  88.4% { opacity: 0.2; }
}

/* Small neon in the corner: the way back to the room. */
.home-sign {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-size: 1.25rem; line-height: 1; background: none; padding: 0;
}
.home-sign:hover .neon-word, .home-sign:focus-visible .neon-word { color: var(--go); text-shadow: 0 0 2px var(--go), 0 0 7px rgba(63, 224, 106, 0.45); }

/* ---------- header: the object you clicked, drawn large ---------- */
/* Every header drawing shares one height (--art-h, a little more for tall,
   thin ones like the payphone); its width follows its own proportions (--ar,
   width / height, set on the page). */
.hero { padding: 2.5rem 0 0.75rem; text-align: center; }
.hero-art {
  height: calc(var(--art-h, clamp(4.75rem, 19vw, 7rem)) * var(--hk, 1)); aspect-ratio: var(--ar, 1);
  width: auto; max-width: 100%; margin: 0 auto;
}

/* The other pages' objects flank this page's, smaller, as links (js/subpage.js
   builds the row). They sit on the same floor line. */
.hero-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0.6rem, 3.5vw, 2.25rem); margin-bottom: 0.25rem; }
.hero-row .hero-art { margin: 0; flex: none; }
.hero-side { display: flex; align-items: flex-end; gap: clamp(0.6rem, 3vw, 1.75rem); }
/* min-width: thin objects (payphone, jersey) still get a thumb-sized target */
.page a.nav-obj { background: none; padding: 0; position: relative; display: flex; justify-content: center; flex: none; min-width: 2.75rem; }
.nav-obj .art {
  height: calc(clamp(2.3rem, 9.5vw, 3.5rem) * var(--hk, 1)); aspect-ratio: var(--ar, 1); width: auto;
}
.nav-obj .outline, .nav-obj .plane { transition: fill 0.12s; }
.nav-obj .line { transition: stroke 0.12s; }
.nav-obj:hover .outline, .nav-obj:hover .plane,
.nav-obj:focus-visible .outline, .nav-obj:focus-visible .plane { fill: var(--go); }
.nav-obj:hover .line, .nav-obj:focus-visible .line { stroke: #000; }
.label { font: 0.8rem/1 var(--mono); color: var(--muted); letter-spacing: 0.08em; margin: 0.75rem 0 0.25rem; }
.hero h1 { font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.05; margin: 0.5rem 0 0.25rem; }
.hero .label + h1 { margin-top: 0; }

/* ---------- traced art, inlined by js/subpage.js ---------- */
.art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.art .outline { fill: var(--bg); }
.art .plane { fill: var(--plane); }
.art .screen { fill: var(--bg); } /* the file's own fill is a debug color */
.art .line { fill: none; stroke: var(--ink); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- text ---------- */
.lead { font-size: 1.2rem; color: var(--bright); }
h2 { font: 600 1.35rem/1.3 var(--body); color: var(--bright); margin: 0 0 0.75rem; }
p { margin: 0 0 1rem; }
.mono { font-family: var(--mono); }
section { padding: 1.5rem 0; }

/* Facts still to be supplied: visible, so they can't ship unnoticed. */
.todo {
  font: 0.85rem/1.5 var(--mono); color: var(--bright);
  border: 1px dashed var(--muted); padding: 0.1rem 0.4rem;
}

/* ---------- scratchy pieces (drawn by js; plain fallbacks without js) ---------- */
.rule { height: 12px; margin: 0.5rem 0; border-top: 1px solid #333; }
.rule.drawn { border: 0; }
.framed { position: relative; padding: 1.25rem 1.25rem 0.5rem; border: 1px solid #333; }
.framed.drawn { border: 0; }
.scratch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scratch path { fill: none; stroke: var(--ink); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.scratch .faint { opacity: 0.5; }

/* Beer rings: faint, behind everything, placed per page by data-rings. */
.rings { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rings svg { position: absolute; overflow: visible; }
.rings path { fill: none; stroke: var(--stain); stroke-width: 5px; stroke-linecap: round; }

/* Wider pages (Ride Videos, Upcoming Rides): the art stays the same size. */
.page.wide { max-width: 60rem; }
.subtitle { font: 0.9rem/1.4 var(--mono); color: var(--muted); margin: 0 0 0.5rem; }
.muted, .ride-meta { color: var(--muted); }

/* ---------- sponsor logos: grey on a card, full color on hover ---------- */
.plate {
  display: block; background: #d6d6d6; padding: 12px;
  aspect-ratio: 16 / 9; position: relative;
}
.plate img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: grayscale(1) contrast(0.9); opacity: 0.8;
  transition: filter 0.2s, opacity 0.2s;
}
a:hover .plate img, a:focus-visible .plate img, .plate:hover img { filter: none; opacity: 1; }
a:hover .plate, a:focus-visible .plate { background: #fff; }
.page a:has(.plate) { background: none; padding: 0; }

/* ---------- Ride Videos ---------- */
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; margin: 0.5rem 0 1.25rem; }
.player .video-media, .player video { position: absolute; inset: 0; width: 100%; height: 100%; }
.player video { object-fit: contain; background: #000; }
.player .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.player .poster:not([src]), .player .poster[src=""] { display: none; }
.player .play-btn {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: rgba(0, 0, 0, 0.55); border: 0; border-radius: 50%; padding: 14px;
  color: var(--go); cursor: pointer; line-height: 0;
}
.player .play-btn svg { width: 56px; height: 56px; }
.player .play-btn:hover, .player .play-btn:focus-visible { color: var(--bright); }

.playlist { display: grid; gap: 4px; overflow: auto; padding-right: 4px; scrollbar-color: #444 #000; }
html { scrollbar-color: #333 #000; }
.play-item {
  display: grid; grid-template-columns: 9rem 1fr; gap: 14px; align-items: center;
  padding: 8px; cursor: pointer; position: relative;
}
.play-item:hover .play-name, .play-item:focus-visible .play-name { color: var(--go); }
.play-item:focus-visible { outline: 2px dashed var(--go); outline-offset: -2px; }
.play-item.active::before { content: "▶"; position: absolute; left: -1.1rem; top: 50%; translate: 0 -50%; font: 0.7rem var(--mono); color: var(--bright); }
.play-item.active .play-name { color: var(--bright); }
.play-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #111; }
.play-name { color: var(--text); font-weight: 600; line-height: 1.25; }
.play-sub { font: 0.8rem/1.4 var(--mono); color: var(--muted); margin-top: 2px; }
@media (max-width: 520px) { .play-item { grid-template-columns: 7rem 1fr; gap: 10px; } }

/* Mix tapes: the adapter gives each track a placeholder date so ridevideos.js
   can render it; show the track number instead. */
.mixtape .playlist { counter-reset: track; }
.mixtape .play-item { counter-increment: track; }
.mixtape .play-sub { display: none; }
.mixtape .play-meta::before { content: counter(track, decimal-leading-zero); display: block; font: 0.8rem/1.4 var(--mono); color: var(--muted); }

.mix-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 12px; }
.page .mix-links a { background: none; padding: 0; display: block; }
.mix-links img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; filter: grayscale(0.6); opacity: 0.85; transition: filter 0.2s, opacity 0.2s; }
.mix-links a:hover img, .mix-links a:focus-visible img { filter: none; opacity: 1; }
.error { color: var(--bright); font-family: var(--mono); font-size: 0.9rem; }

/* ---------- Upcoming Rides ---------- */
/* Rides (js/calendar.js): each opens in place to its calendar description. */
.upcoming-list { display: grid; gap: 4px; margin-bottom: 0.5rem; }
.ride summary {
  list-style: none; cursor: pointer; padding: 8px 0 8px 1.4rem; position: relative;
  display: grid; gap: 2px;
}
.ride summary::-webkit-details-marker { display: none; }
.ride summary::before {
  content: "+"; position: absolute; left: 0; top: 8px;
  font: 1rem/1.3 var(--mono); color: var(--muted);
}
.ride[open] summary::before { content: "–"; }
.ride-title { font: 600 1.1rem/1.3 var(--body); color: var(--go); }
.ride summary:hover .ride-title, .ride summary:focus-visible .ride-title { color: var(--bright); }
.ride summary:focus-visible { outline: 2px dashed var(--go); outline-offset: 2px; }
.ride-meta { font: 0.85rem/1.5 var(--mono); }
.ride-body { padding: 0 0 0.75rem 1.4rem; }
.ride-desc { white-space: pre-line; margin: 0.25rem 0 0.75rem; }
.ride-body p:last-child { margin-bottom: 0; }
/* Events (js/upcomingrides.js): a row each, a small full-color thumbnail beside
   the name, like the rides above. Event images are a mix of logos and photos
   (some small), so the frame shows the whole image and never blows it up much. */
.events-list { display: grid; gap: 16px; }
.event-card { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; align-items: center; }
.event-media {
  aspect-ratio: 4 / 3; background: #ececec; padding: 6px;
  display: flex; align-items: center; justify-content: center;
}
.event-media img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.event-media:empty { display: none; }
.event-card:has(.event-media:empty) { grid-template-columns: 1fr; }
@media (max-width: 420px) { .event-card { grid-template-columns: 6.5rem 1fr; gap: 12px; } }
.event-title { font: 600 1.05rem/1.3 var(--body); margin: 0; color: var(--bright); }
.event-meta { font: 0.85rem/1.5 var(--mono); color: var(--muted); margin: 0; }
.event-desc { margin: 0; }

/* ---------- Sponsors ---------- */
.sponsor-list { display: grid; gap: 28px; margin: 0.5rem 0 1.5rem; }
.sponsor { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 18px; align-items: center; }
.sponsor h2 { margin: 0 0 0.25rem; font-size: 1.15rem; }
.sponsor p { margin: 0; }
@media (max-width: 520px) { .sponsor { grid-template-columns: 1fr; gap: 10px; } .sponsor .plate { max-width: 16rem; } }

/* ---------- Contact ---------- */
.contact-form { display: grid; gap: 16px; margin-top: 0.5rem; }
.contact-form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .contact-form .pair { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field .label { margin: 0; }
.field input, .field textarea {
  width: 100%; font: 1rem/1.5 var(--body); color: var(--bright);
  background: #0c0c0c; border: 1px solid #3a3a3a; padding: 10px 12px;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--bright); }
.field input::placeholder, .field textarea::placeholder { color: #5c5c5c; }
.send {
  justify-self: start; font: 1rem/1 var(--mono); color: var(--go);
  background: none; border: 1px solid var(--go); padding: 10px 18px; cursor: pointer;
}
.send:hover, .send:focus-visible { background: var(--go); color: #000; }
.send:disabled { opacity: 0.5; cursor: default; }
.status { font: 0.9rem/1.5 var(--mono); color: var(--bright); margin: 0; }
.status.bad::before { content: "error: "; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* ---------- footer: a strip of floor junk ---------- */
.foot { position: relative; z-index: 1; margin-top: 2rem; padding: 0 16px 1.5rem; }
.foot-floor { position: relative; max-width: 44rem; height: 64px; margin: 0 auto; }
.foot-floor .art { position: absolute; bottom: 6px; }
.foot-floor .floorline { position: absolute; left: 0; right: 0; bottom: 4px; height: 8px; }
.foot-links { max-width: 44rem; margin: 0.75rem auto 0; display: flex; gap: 1.5rem; font: 0.9rem/1 var(--mono); }
.foot-links span { color: var(--muted); margin-left: auto; }