/* Zibbo site. Colours are the app's five Okabe-Ito player colours (Palette.swift). */
:root {
  --blue: #0072b2;
  --vermillion: #d55e00;
  --green: #009e73;
  --yellow: #f0e442;
  --purple: #cc79a7;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #15171c;
  --muted: #566070;
  --rule: #d9dde4;
  --link: #005f93;
  --focus: #d55e00;

  --display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317;
    --surface: #1a1d23;
    --ink: #eef0f3;
    --muted: #9aa4b2;
    --rule: #2c313a;
    --link: #56b4e9;
    --focus: #f0e442;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/1.65 var(--text);
}
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* Five stripes: the player colours, in order */
.stripes {
  height: 10px;
  background: linear-gradient(90deg,
    var(--blue) 0 20%, var(--vermillion) 20% 40%, var(--green) 40% 60%,
    var(--yellow) 60% 80%, var(--purple) 80% 100%);
}

.bar, main, footer { width: min(100% - 2 * var(--gutter), 44rem); margin-inline: auto; }
.bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1.5rem; padding-block: 1.25rem;
}
.wordmark {
  font: 800 1.5rem/1 var(--display); letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
nav { display: flex; gap: 1.25rem; }
nav a { color: var(--ink); font-weight: 600; text-decoration-color: transparent; }
nav a:hover, nav a[aria-current="page"] { text-decoration-color: currentColor; }

main { padding-block: 1.5rem 4rem; }
h1 {
  font: 800 clamp(2rem, 7vw, 3rem)/1.1 var(--display);
  letter-spacing: -0.02em; margin: 0.5rem 0 0.5rem;
}
h2 { font: 700 1.5rem/1.25 var(--display); margin: 2.75rem 0 0.5rem; }
h3 { font: 700 1.1rem/1.3 var(--display); margin: 1.75rem 0 0.25rem; }
p, ul, ol { margin: 0.75rem 0; max-width: 40rem; }
li { margin: 0.35rem 0; }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--muted); max-width: 36rem; }
.meta { color: var(--muted); font-size: 0.95rem; }

/* Facts: a coloured edge per item, like a player section */
.facts { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.facts li {
  margin: 0; padding: 0.9rem 1rem; background: var(--surface);
  border-left: 8px solid var(--c, var(--blue));
}
.facts li:nth-child(1) { --c: var(--blue); }
.facts li:nth-child(2) { --c: var(--vermillion); }
.facts li:nth-child(3) { --c: var(--green); }
.facts li:nth-child(4) { --c: var(--yellow); }
.facts li:nth-child(5) { --c: var(--purple); }
.facts strong { font-family: var(--display); }

/* FAQ */
details { background: var(--surface); border-bottom: 1px solid var(--rule); max-width: 40rem; }
details:first-of-type { border-top: 1px solid var(--rule); }
summary { cursor: pointer; padding: 0.9rem 1rem; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 700 1.25rem/1 var(--display); color: var(--muted); }
details[open] summary::after { content: "\2212"; }
details > :not(summary) { margin-inline: 1rem; }
details > :last-child { margin-bottom: 1rem; }

.contact {
  background: var(--blue); color: #fff; padding: 1.25rem 1.5rem; max-width: 40rem; margin: 1rem 0;
}
.contact a { color: #fff; font-weight: 700; }
.contact p { margin: 0.25rem 0; }


footer {
  padding-block: 1.5rem 3rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 0.95rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}
footer a { color: var(--muted); }

.shot { margin: 2rem 0; max-width: 24rem; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.shot figcaption { color: var(--muted); font-size: 0.95rem; margin-top: 0.5rem; }