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

   🔴 A SEPARATE FILE FROM kiyued.com's, NOT AN IMPORT OF IT. Kiyu and Kiyu Ed
   are two products with two audiences and deliberately two design languages —
   the same separation `@kiyu/ui-kiyu` and `@kiyu/ui-native` keep in the apps.
   The structure below is shared because the PAGE is the same shape; the palette
   is not, and it is not meant to converge.

   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: #b4531a;
  --accent-soft: #fbf0e7;
  --measure: 42rem;
}

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

*,
*::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;
}