/* style.css - hand-maintained, unlike index.html.

   Dark by default because the creatures are lit against dark terrain, and a
   GIF of a creature reads better on a ground that is not brighter than it.

   Cards run in ONE vertical column rather than a responsive grid: a bestiary
   entry is read, not scanned, and each entry owns a 384x240 viewer that a
   two-column layout would shrink below the resolution it was authored for.

   The tabs are radio inputs and labels. No script anywhere on this site. */

:root {
  --bg:      #0f1113;
  --panel:   #16191c;
  --panel2:  #1c2024;
  --ink:     #e8e6e1;
  --muted:   #8b9096;
  --rule:    #262b30;
  --accent:  #c9a227;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

header, main, footer { max-width: 900px; margin: 0 auto; }

header { padding: 3.5rem 0 2rem; border-bottom: 1px solid var(--rule); }
h1 { margin: 0; font-size: 2.6rem; letter-spacing: -0.02em; font-weight: 650; }
.tagline { margin: .5rem 0 0; color: var(--muted); font-size: 1.05rem; }
header .note { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; max-width: 62ch; }

main { padding: 2.5rem 0; }

/* one card per row */
.grid { display: flex; flex-direction: column; gap: 2rem; }

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}

.card .head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: 1.15rem 1.25rem .25rem;
}
.card h2 { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; }
.kind {
  margin: 0;
  color: var(--accent);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.blurb { margin: 0; padding: 0 1.25rem 1rem; color: var(--muted); max-width: 62ch; }

/* ---- tabs -------------------------------------------------------------- */
/* Inputs are visually hidden but still focusable, so the strip is reachable
   from the keyboard: arrow keys move through a radio group natively. */
.tabs > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.tabs > label {
  display: inline-block;
  padding: .5rem .95rem;
  margin: 0 .3rem .6rem 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel2);
  color: var(--muted);
  font-size: .85rem;
  cursor: pointer;
  user-select: none;
}
.tabs > label:first-of-type { margin-left: 1.25rem; }
.tabs > label:hover { color: var(--ink); border-color: #39414a; }

.panels { border-top: 1px solid var(--rule); background: #0b0d0f; }
.panel { display: none; margin: 0; padding: 1.25rem; }

.panel img {
  display: block;
  width: 100%;
  max-width: 768px;   /* 384 x 2: an exact doubling, so no resampling blur */
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
  background: #000;
  /* the render IS pixels; never let the browser smooth them */
  image-rendering: pixelated;
}

.panel figcaption {
  margin: .85rem auto 0;
  max-width: 768px;
  color: var(--ink);
  font-size: .92rem;
}
.shotnote {
  margin: .4rem auto 0;
  max-width: 768px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.55;
}

/* Which tab is lit, and which panel shows. Both are positional: the nth input
   lights the nth label and reveals the nth panel. MAX_TABS in assemble.py is
   kept in step with how many pairs are written out here -- a card with more
   renders than pairs would show tabs that select nothing, so assemble.py
   refuses to build one. */
.tabs > input:nth-of-type(1):checked ~ label:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ label:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ label:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ label:nth-of-type(4),
.tabs > input:nth-of-type(5):checked ~ label:nth-of-type(5),
.tabs > input:nth-of-type(6):checked ~ label:nth-of-type(6) {
  background: var(--accent);
  border-color: var(--accent);
  color: #17140a;
  font-weight: 600;
}

.tabs > input:nth-of-type(1):checked ~ .panels > .panel:nth-child(1),
.tabs > input:nth-of-type(2):checked ~ .panels > .panel:nth-child(2),
.tabs > input:nth-of-type(3):checked ~ .panels > .panel:nth-child(3),
.tabs > input:nth-of-type(4):checked ~ .panels > .panel:nth-child(4),
.tabs > input:nth-of-type(5):checked ~ .panels > .panel:nth-child(5),
.tabs > input:nth-of-type(6):checked ~ .panels > .panel:nth-child(6) {
  display: block;
}

/* keyboard focus has to be visible, since the input itself is not */
.tabs > input:focus-visible ~ label { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabs > input:nth-of-type(1):focus-visible ~ label:nth-of-type(1),
.tabs > input:nth-of-type(2):focus-visible ~ label:nth-of-type(2),
.tabs > input:nth-of-type(3):focus-visible ~ label:nth-of-type(3),
.tabs > input:nth-of-type(4):focus-visible ~ label:nth-of-type(4),
.tabs > input:nth-of-type(5):focus-visible ~ label:nth-of-type(5),
.tabs > input:nth-of-type(6):focus-visible ~ label:nth-of-type(6) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pending {
  margin: 0;
  padding: 0 1.25rem 1.5rem;
  color: var(--muted);
  font-style: italic;
}

footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}
footer .fine { max-width: 70ch; }
code { background: var(--panel2); padding: .1rem .35rem; border-radius: 3px; font-size: .85em; }

@media (max-width: 560px) {
  .tabs > label:first-of-type { margin-left: 1rem; }
  .panel { padding: 1rem .75rem; }
}