/* Brain Out Loud, the hub.
   Same visual language as BirdBrain: 1820s engraved star chart meeting a
   mid-century science textbook plate. Dark ground, warm ink, one measured
   accent. Token block, reset, masthead, and footer are duplicated from
   game.css rather than shared tonight (two files is not yet a DRY
   emergency; a shared base is later work). */

:root {
  --ground: #0d1020;
  --ground-lift: #151a30;
  --rule: #2b3252;
  --ink: #e8e4d9;
  --ink-quiet: #9aa0bd;
  --indigo: #6b7ccf;
  --indigo-bright: #94a4ee;
  --ember: #e0a458;
  --hit: #7fd1a5;
  --plate: #11162a;
  --measure: 40rem;
  /* The studio's own colour, used on the studio's own link and nowhere
     else. Everything else on this site is painted from the block above. */
  --studio-teal: #3DFFD0;
  /* Sampled off Jeff's 2018 painting rather than picked, so the site and the
     mark are drawing from one bucket. Hues are his, values are lifted to sit
     on the dark ground. --ember was already the amber band of that splatter,
     which is why it is not repeated here. */
  --paint-red: #e2593c;
  --paint-lime: #93c451;
  --paint-green: #43ba63;
  --paint-teal: #3fb89d;
  --paint-sky: #57b3e6;
  --paint-violet: #9a6ed2;
  --paint-magenta: #cf4a9e;

  --display: "Baumans", "Trebuchet MS", system-ui, sans-serif;
  --marquee: "Alfa Slab One", "Baumans", Georgia, serif;
  --text: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1b2140 0%, transparent 60%),
    var(--ground);
  color: var(--ink);
  font-family: var(--text);
  line-height: 1.55;
  min-height: 100vh;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--ink);
  color: var(--ground);
  padding: 0.5rem 0.9rem;
  border-radius: 0.3rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--indigo-bright);
  outline-offset: 2px;
}

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

.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 1rem 0.9rem;
  text-align: center;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  font-family: var(--display);
  font-size: clamp(1.15rem, 5vw, 1.6rem);
  letter-spacing: 0.06em;
  color: var(--indigo-bright);
  text-decoration: none;
}
.wordmark:hover,
.wordmark:focus-visible { color: var(--ink); }

.brain-o {
  /* Jeff's own 2018 artwork, cropped out of the original horizontal lockup.
     It is a painting, not a geometry, so it ships as the raster rather than
     as a trace that would throw away the texture. Sized to the proportion it
     holds in that lockup: about 1.5x the cap height of the letters either
     side of it. */
  width: 1.6em;
  height: 1.6em;
  margin: 0 -0.08em;
  flex: none;
  display: block;
}

/* ---------- shell ---------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.75rem 1rem 3rem;
}

/* ---------- hero ---------- */

.hero {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

/* The painting again, this time as light rather than as a picture. It ships
   pre-blurred and tiny, because what is wanted here is Jeff's colour and
   not his drawing... left legible it ghosts behind the headline, and masking
   the brain out of it just turns it into an obvious ring. Screen blending means
   the dark middle contributes nothing and only the splatter glows. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 82%;
  width: min(28rem, 100vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("/assets/brain-splash-glow.jpg?v=d466514553") center / contain no-repeat;
  opacity: 0.32;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero > * { position: relative; }

.hero h1 {
  font-family: var(--marquee);
  font-size: clamp(1.75rem, 8.5vw, 2.35rem);
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
  letter-spacing: 0.012em;
}

.mechanic-line {
  max-width: 32rem;
  margin: 0.9rem auto 0;
  color: var(--ink-quiet);
  font-size: 1rem;
}

.section-intro {
  max-width: 34rem;
  margin: -0.15rem auto 1rem;
  color: var(--ink-quiet);
  font-size: 0.9rem;
  text-align: center;
}

/* ---------- section labels ---------- */

.section-label {
  margin: 0 0 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-align: center;
}

/* ---------- the scorecard: a specimen collection plate ---------- */

.domains { margin-bottom: 2rem; }

.collection { margin-bottom: 2rem; }

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every game draws one hue out of the painting, so the collection reads as an
   arcade rather than as four copies of one card. The mapping lives here and
   nowhere else... no colour classes in the markup. */
.slot { --slot-paint: var(--indigo-bright); }
#buried-word-slot { --slot-paint: var(--ember); }
#signal-stack-slot { --slot-paint: var(--paint-sky); }
#birds-slot { --slot-paint: var(--paint-green); }
#dogs-slot { --slot-paint: var(--paint-magenta); }

.slot {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 0.55rem;
  padding: 1.5rem 1.3rem;
  text-align: center;
  /* Slots stretch to the tallest one in the row, and they do not carry the
     same lines: a domain with an edition name is one line taller than one
     without, and a played slot grows a streak and a title. The copy block
     takes the slack so the buttons sit on one baseline instead of floating
     wherever each slot's copy happened to end. */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* A wet edge of paint along the top of each plate. */
.slot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--slot-paint);
  opacity: 0.85;
}

.slot:hover,
.slot:focus-within {
  border-color: color-mix(in oklab, var(--slot-paint) 42%, var(--rule));
}

.slot-copy {
  flex: 1;
  width: 100%;
}

.slot-label {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--slot-paint);
}

.slot-edition {
  margin: 0 0 0.6rem;
  font-family: var(--marquee);
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  color: var(--ink);
}

.slot-state {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-quiet);
}

.streak-line {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.slot-title {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--ember);
}

.slot-action {
  display: inline-block;
  margin-top: 1.1rem;
  font: inherit;
  font-family: var(--display);
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  padding: 0.72rem 1.1rem;
  color: var(--ground);
  background: var(--ember);
  border: 1px solid var(--ember);
  border-radius: 0.35rem;
}
.slot-action:hover { background: var(--ink); border-color: var(--ink); }

/* A daily puzzle is not a Read the Crowd round, so the slot says so: indigo
   where a domain slot is ember. Same palette, different member of it. */
.arcade-slot {
  background: linear-gradient(135deg, #1b2140, transparent 55%), var(--plate);
  border-color: rgba(107, 124, 207, 0.45);
}
.arcade-slot .slot-label { color: var(--indigo-bright); }
.arcade-slot .slot-edition { color: var(--indigo-bright); }
.arcade-slot .slot-action {
  color: var(--ground);
  background: var(--indigo-bright);
  border-color: var(--indigo-bright);
}
.arcade-slot .slot-action:hover { background: var(--ink); border-color: var(--ink); }
.slot-score {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--ember);
}

/* The dimmed frame is the invitation slot. Same shape, no signal. */
.slot-coming {
  opacity: 0.55;
  border-style: dashed;
}

/* ---------- calibration read ---------- */

.calibration {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 0.55rem;
  padding: 1.5rem 1.3rem;
  text-align: center;
}

/* The dead end is the one page with nothing competing for attention, so the
   painting runs at full strength here instead of as a wash. */
.cal-splash {
  display: block;
  width: min(15rem, 56vw);
  height: auto;
  margin: 0.2rem auto 1rem;
}

.cal-title {
  margin: 0 0 0.4rem;
  font-family: var(--marquee);
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--ember);
}

.cal-note {
  margin: 0;
  color: var(--ink-quiet);
}

.cal-measured {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-quiet);
}

/* The 404 page reuses .calibration as its one plate, and its "back home"
   link needs the same quiet treatment the footer links get. */
.calibration a {
  color: var(--indigo-bright);
  text-decoration-color: var(--rule);
}
.calibration a:hover,
.calibration a:focus-visible { color: var(--ink); }

/* ---------- colophon ---------- */

.colophon {
  margin-top: 1.6rem;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 0.55rem;
  padding: 1.3rem 1.1rem;
}
.colophon h2 {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.6rem;
  color: var(--indigo-bright);
}
.colophon p { margin: 0 0 0.7rem; font-size: 0.9rem; color: var(--ink-quiet); }
.colophon .quiet { font-style: italic; margin-bottom: 0; }

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

.foot {
  border-top: 1px solid var(--rule);
  padding: 1rem;
  text-align: center;
}
.foot p { margin: 0; font-size: 0.78rem; color: var(--ink-quiet); }
.foot a { color: var(--ink-quiet); text-decoration-color: var(--rule); }
.foot a:hover, .foot a:focus-visible { color: var(--ink); }
.foot p.foot-brand { font-family: var(--display); letter-spacing: 0.04em; }
.foot p.foot-credit {
  max-width: var(--measure);
  margin: 0.5rem auto 0;
  line-height: 1.5;
}
.foot p.studio-credit { margin-top: 0.5rem; }
.studio-credit a { color: var(--studio-teal); }
.foot-social {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Small screens. Keep the first slot action reachable without horizontal
   scroll at a 320px viewport. */
@media (max-width: 400px), (max-height: 640px) {
  .masthead { padding: 0.7rem 0.75rem 0.6rem; }
  .wrap { padding: 1rem 0.75rem 2.25rem; }
  .hero { margin-bottom: 1.3rem; }
  .hero h1 { font-size: clamp(1.6rem, 9vw, 2.1rem); }
  .mechanic-line { font-size: 0.9rem; }
  .slot, .calibration, .colophon { padding: 1rem 0.9rem; }
}