/* ------------------------------------------------------------
   Colors. Change these to your own and the whole site follows.
   ------------------------------------------------------------ */
:root {
  --bg: #10151a;         /* page background, night sky */
  --bg-2: #182028;       /* slightly lighter sections and cards */
  --line: #27313b;       /* thin borders */
  --text: #efe6d4;       /* main text, warm off-white */
  --muted: #a9a08f;      /* quieter text */
  --gold: #f4a9c8;       /* cherry blossom pink: links, numbers, buttons */
  --gold-ink: #2a1320;   /* text on pink buttons */
  --splash: #ffe066;     /* the yellow splash text */

  /* thin pride stripe at the very top, left to right */
  --pride: #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body::before {
  content: ""; position: fixed; z-index: 10; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--pride));
}

h1, h2, h3, .logo, .splash, .address { font-family: "Pixelify Sans", monospace; font-weight: 500; }
h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.2; margin: 0 0 .6em; }
h3 { font-size: 1.25rem; margin: 0 0 .25em; }

a { color: var(--gold); text-underline-offset: 3px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* header floats over the hero */
header { position: absolute; z-index: 5; top: 4px; left: 0; right: 0; }
header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 28px; padding-top: 18px; padding-bottom: 18px;
}
.logo img { width: 40px; height: 40px; border-radius: 8px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.5rem; color: var(--text); text-decoration: none; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: .98rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
nav a:hover, nav a[aria-current] { color: var(--gold); }

/* the big picture at the top */
.hero {
  position: relative; overflow: hidden;
  min-height: 92vh; display: flex; align-items: flex-end;
  background: #2a3a4a;
}
.hero.small { min-height: 46vh; }
.hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1%, -1%); } }
.hero::after {
  /* fade into the page so text is readable */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, rgba(16,21,26,.55) 35%, rgba(16,21,26,0) 70%);
}
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: 56px; }
.hero h1 {
  font-size: clamp(3rem, 11vw, 7rem); line-height: 1; margin: 0 0 .15em;
  text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.hero.small h1 { font-size: clamp(2.4rem, 7vw, 4rem); }
.hero p { margin: .3em 0; max-width: 48ch; font-size: 1.1rem; }
.splash {
  display: inline-block; color: var(--splash); font-size: 1.25rem;
  transform: rotate(-6deg); margin: 0 0 .6em 6px;
  animation: pulse .7s ease-in-out infinite alternate;
}
@keyframes pulse { to { transform: rotate(-6deg) scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .splash, .hero > img { animation: none; } }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.address {
  display: inline-block; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px; padding: 2px 12px; font-size: 1.15rem; user-select: all;
}

.button {
  display: inline-block; padding: 12px 22px; border-radius: 6px;
  background: var(--gold); color: var(--gold-ink); text-decoration: none; font-weight: 600;
  transition: transform .15s;
}
.button:hover { transform: translateY(-2px); }
.button.ghost { background: rgba(0,0,0,.35); color: var(--text); border: 1px solid rgba(255,255,255,.3); }

section.block { padding: 64px 0; }
section.block + section.block { border-top: 1px solid var(--line); }
.lead { font-size: 1.15rem; max-width: 60ch; }

/* things you still need to write */
.todo {
  background: #3b3214; color: #ffe9a8;
  border-left: 3px solid var(--gold);
  padding: 4px 10px; font-style: italic; border-radius: 0 4px 4px 0;
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 28px 0 0; border-top: 1px solid var(--line); }
.facts div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.facts dd { margin: 0; font-size: 1.1rem; }

/* screenshot slots: drop a file into /images with the name shown and it appears */
.shot {
  position: relative; margin: 0; border-radius: 6px; overflow: hidden;
  background: var(--bg-2); border: 1px dashed #3d4a43; aspect-ratio: 16 / 9;
}
.shot::before {
  content: "screenshot: images/" attr(data-file);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center; color: var(--muted); font-size: .9rem;
}
.shot img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.shot:hover img { transform: scale(1.04); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 28px 14px 10px; font-size: .9rem;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
}
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.gallery .shot { grid-column: span 2; }
.gallery .shot.wide { grid-column: span 4; aspect-ratio: auto; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery .shot, .gallery .shot.wide { grid-column: auto; aspect-ratio: 16 / 9; }
}

/* numbered lists: rules and apply steps */
.numbered { list-style: none; padding: 0; margin: 0; counter-reset: n; }
.numbered li {
  counter-increment: n; position: relative;
  padding: 22px 0 22px 72px; border-bottom: 1px solid var(--line);
}
.numbered li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 18px;
  font-family: "Pixelify Sans", monospace; font-size: 2rem; color: var(--gold);
}
.numbered p { margin: 0; color: var(--muted); }

/* members, with a 3D skin render */
.members { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.members li { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 18px 12px 14px; text-align: center; }
.members img { height: 150px; display: block; margin: 0 auto 10px; }
.members .name { font-family: "Pixelify Sans", monospace; font-size: 1.2rem; display: block; }
.members .pronouns { color: var(--muted); font-size: .9rem; }

footer { border-top: 1px solid var(--line); padding: 26px 0 34px; color: var(--muted); font-size: .92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
footer a { color: var(--text); }

@media (max-width: 560px) {
  .hero { min-height: 82vh; }
  .hero.small { min-height: 40vh; }
  .button { flex: 1 1 100%; text-align: center; }
  .numbered li { padding-left: 56px; }
  .numbered li::before { font-size: 1.6rem; }
}
.gallery .shot.wide:only-child { grid-column: 1 / -1; }
.hero.small + main > section.block:first-child { padding-top: 24px; }

/* guide page */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.toc a {
  color: var(--text); text-decoration: none; font-size: .9rem;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 4px 12px;
}
.toc a:hover { border-color: var(--gold); color: var(--gold); }
section.guide { padding: 48px 0; scroll-margin-top: 16px; }
.howto { margin: 0; padding-left: 1.2em; }
.howto li { margin-bottom: .7em; max-width: 72ch; }
.howto li::marker { color: var(--gold); }
code.cmd {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: .9em;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 6px; color: var(--gold); white-space: nowrap;
}
.uses { margin: -.4em 0 .8em; color: var(--muted); font-size: .9rem; }