/* ---------------------------------------------------------------------------
   kiyued.com — the whole stylesheet.

   NO @import, NO url(), NO web font. Every rule here is self-contained, which
   is not minimalism for its own sake: a single @import of a font CDN would put
   a third party's server on the critical path of the domain that shares a
   registrable name — and therefore a cookie jar — with the API serving student
   records. The Content-Security-Policy on this distribution forbids it anyway
   (`default-src 'self'`), so an external reference here would not load; it
   would just break the page silently.

   The type stack is the reader's own system UI font. It is already on their
   machine, so it costs zero bytes and zero requests and never flashes.
--------------------------------------------------------------------------- */

:root {
  --ink: #14181f;
  --ink-soft: #4a5361;
  --paper: #ffffff;
  --paper-soft: #f5f6f8;
  --rule: #dfe3e8;
  --accent: #1f5f4f;
  --accent-soft: #eaf2ef;
  --measure: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1f5;
    --ink-soft: #a8b2c0;
    --paper: #14181f;
    --paper-soft: #1b212a;
    --rule: #2c3542;
    --accent: #6fd0b3;
    --accent-soft: #1c2a28;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0 1.5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

/* --- Masthead ------------------------------------------------------------ */

header {
  padding: 3.5rem 0 2rem;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
}

.brand span {
  color: var(--accent);
}

.tagline {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* --- Sections ------------------------------------------------------------ */

main {
  padding: 2.5rem 0 1rem;
}

section + section {
  margin-top: 2.75rem;
}

h1 {
  font-size: 1.875rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 650;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

p {
  margin: 0 0 1rem;
}

.lead {
  font-size: 1.1875rem;
  color: var(--ink-soft);
}

ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
}

li strong {
  font-weight: 600;
}

/* --- Callout ------------------------------------------------------------- */

.note {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.125rem 1.25rem;
}

.note :last-child {
  margin-bottom: 0;
}

.note--flag {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* --- Links --------------------------------------------------------------- */

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Footer -------------------------------------------------------------- */

footer {
  margin-top: 3rem;
  padding: 1.75rem 0 3.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

footer p {
  margin: 0 0 0.5rem;
}

footer nav a + a {
  margin-left: 1rem;
}

/* --- Error page ---------------------------------------------------------- */

.centered {
  padding: 5rem 0 4rem;
}