/* korga — www.korga.app layout.
   Tokens only. Every colour, radius, shadow, space and duration comes from
   palette.css; every type style from typography.css. A rebrand is a one-file
   edit and it is not this file. Do not hardcode a hex here. */

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

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

body {
  margin: 0;
  background: var(--korga-bg);          /* Cream. Never white. */
  color: var(--korga-text);
  font: var(--korga-t-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--korga-gutter);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--korga-gutter);
  top: var(--korga-space-3);
  z-index: 10;
  background: var(--korga-card);
  color: var(--korga-text);
  padding: var(--korga-space-3) var(--korga-space-5);
  border-radius: var(--korga-radius-full);
  box-shadow: var(--korga-shadow);
}

:focus-visible {
  outline: 3px solid var(--korga-link);
  outline-offset: 3px;
  border-radius: var(--korga-radius-sm);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-head { padding-block: var(--korga-space-6); }

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--korga-space-4);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--korga-space-3);
  color: var(--korga-text);
  text-decoration: none;
  min-height: var(--korga-tap-min);
}

.lockup .mark { width: 34px; height: 34px; flex: none; }

/* Lowercase korga, always. Never let a capitalize near it. */
.korga-wordmark { text-transform: lowercase; font-size: 30px; }

.pill {
  font: var(--korga-t-label);
  color: var(--korga-on-accent);          /* Ink on Tangerine — 5.9:1, deliberate. */
  background: var(--korga-accent);
  border-radius: var(--korga-radius-full);
  padding: var(--korga-space-2) var(--korga-space-4);
  white-space: nowrap;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  gap: var(--korga-space-8);
  align-items: center;
  padding-block: var(--korga-space-8) var(--korga-space-12);
}

.hero h1 { margin: 0 0 var(--korga-space-5); }

.hero .korga-lead {
  margin: 0;
  color: var(--korga-text-muted);
  max-width: 34ch;
}

.note {
  margin: var(--korga-space-6) 0 0;
  color: var(--korga-text-muted);
  border-left: 3px solid var(--korga-accent);
  padding-left: var(--korga-space-4);
}

/* The illustrations ship with flat Cream baked in, so they are given a Cream
   tile rather than a white card: invisible on the light page, and a deliberate
   rounded cream panel in dark mode instead of a bright square floating on
   Night. Same rule either way, no image swapping. */
.hero-art, .beat-art { margin: 0; }

.hero-art img, .beat-art img {
  margin-inline: auto;
  background: var(--korga-cream);
  border-radius: var(--korga-radius-lg);  /* Nothing has a sharp corner. */
}

/* ── Claim cards ────────────────────────────────────────────────────────── */

.claims {
  display: grid;
  gap: var(--korga-space-5);
  padding-block: var(--korga-space-4) var(--korga-space-12);
}

.card {
  background: var(--korga-card);          /* White, lifted off cream. */
  border-radius: var(--korga-radius-md);
  box-shadow: var(--korga-shadow);        /* The one shadow. */
  padding: var(--korga-space-6);
}

.card h2 { margin: 0 0 var(--korga-space-2); }
.card p  { margin: 0; color: var(--korga-text-muted); }

/* ── Feature beats ──────────────────────────────────────────────────────── */

.beat {
  display: grid;
  gap: var(--korga-space-6);
  align-items: center;
  padding-block: var(--korga-space-10);
}

.beat h2 { margin: 0 0 var(--korga-space-4); }
.beat .korga-body { margin: 0; color: var(--korga-text-muted); max-width: 42ch; }

/* The offline state, quoted as it appears in the app: a small ink pill, no
   spinner and no red banner. */
.offline-pill {
  display: inline-block;
  margin: var(--korga-space-5) 0 0;
  background: var(--korga-ink);
  color: var(--korga-cream);
  border-radius: var(--korga-radius-full);
  padding: var(--korga-space-2) var(--korga-space-4);
}

/* Two flex children only — the member chip and one unbroken run of text. Give
   the text its own span or the flex gap lands between "412" and its full stop. */
.split-line {
  display: flex;
  align-items: center;
  gap: var(--korga-space-3);
  margin: var(--korga-space-5) 0 0;
  background: var(--korga-money);         /* Butter — money. Ink text. */
  color: var(--korga-ink);
  border-radius: var(--korga-radius-sm);
  padding: var(--korga-space-3) var(--korga-space-4);
}

/* Member colour is never the only signal — the chip always carries an initial. */
.split-line .dot {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: var(--korga-radius-full);
  background: var(--korga-member-1);
  font: var(--korga-t-caption);
  color: var(--korga-ink);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-foot {
  background: var(--korga-ink);
  color: var(--korga-cream);
  border-radius: var(--korga-radius-lg) var(--korga-radius-lg) 0 0;
  margin-top: var(--korga-space-10);
  padding-block: var(--korga-space-10);
  text-align: center;
}

.foot-line { margin: 0; }
.foot-line .korga-wordmark { font-size: inherit; }

.foot-meta {
  margin: var(--korga-space-3) 0 0;
  color: var(--korga-stone);
}
.foot-meta .korga-wordmark { font-size: inherit; }

/* ── Dark mode ──────────────────────────────────────────────────────────── */
/* palette.css flips the tokens on its own. Only the two surfaces that are
   painted Ink by hand need a note: Ink on Night is invisible. */

@media (prefers-color-scheme: dark) {
  .site-foot   { background: var(--korga-card); color: var(--korga-text); }
  .foot-meta   { color: var(--korga-text-muted); }
  .offline-pill { background: var(--korga-seam); color: var(--korga-snow); }
}

/* ── Wider than a phone ─────────────────────────────────────────────────── */

@media (min-width: 720px) {
  .claims { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.05fr 1fr;
    padding-block: var(--korga-space-10) var(--korga-space-12);
  }
  .beat { grid-template-columns: 1fr 1.1fr; gap: var(--korga-space-10); }
  .beat-art  { grid-column: 1; grid-row: 1; }
  .beat-copy { grid-column: 2; grid-row: 1; }
  .beat-flip .beat-art  { grid-column: 2; }
  .beat-flip .beat-copy { grid-column: 1; }
  .beat-art img { max-width: 420px; }
}