/* site.css — base styles + shared chrome. Consumes tokens.css only; no color
   literals here (the token-discipline rule, PHASE-CONTRACT W1). */

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background:
    radial-gradient(1100px 620px at 50% -240px, var(--glow) 0%, transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 26px 26px 72px;
  flex: 1;
}

/* ── Shared chrome: header ─────────────────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* nowrap, deliberately: the stacked layout is owned by the breakpoint below, not
     by flex wrapping. When both could stack, the header wrapped from ~481-530px
     while the nav's optical correction was keyed to 480px, leaving a 12px indent
     inconsistency in a ~50px band (round 4). One condition, not two. */
  flex-wrap: nowrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 56px;
}

.brand { display: flex; align-items: baseline; gap: 14px; }

.mark {
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink-max);
  font-weight: 650;
  text-decoration: none;
}
.mark .k { color: var(--accent); }

.tagline {
  color: var(--ink-dim);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  margin-top: 6px;
}

.site-nav { display: flex; gap: 8px; align-items: center; }

.site-nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.site-nav a:hover {
  color: var(--ink-max);
  border-color: var(--line-bright);
}
.site-nav a[aria-current="page"] {
  color: var(--ink-max);
  background: var(--well);
  border-color: var(--line);
}

/* ── Shared chrome: footer ─────────────────────────────────────────── */

/* The footer sits outside .wrap, so a border-top on the element itself spans the
   viewport while the header's border-bottom spans the content column — the two rules
   never aligned. Matching them is a decision, not a residue (round 4): the rule is
   drawn by a pseudo-element inside the same max-width and padding the header lives
   in, so both hairlines are the same width at every viewport. */
.site-footer {
  width: 100%;
  max-width: var(--max-width);
  margin: 30px auto 0;
  padding: 0 26px 30px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.9;
}
.site-footer::before {
  content: "";
  display: block;
  border-top: 1px solid var(--line);
  margin-bottom: 22px;
}
.site-footer .maker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
}

/* ── Prose & structure ─────────────────────────────────────────────── */

h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.05;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--ink-max);
  margin: 0 0 0.4em;
  max-width: 18ch;
}

h2 {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

p { margin: 0 0 1em; max-width: var(--measure); }

/* Every link ships a hover state; without this, keyboard users get no equivalent.
   W1 is the phase everything reuses, so the rule belongs here rather than at W4
   with the first form. */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--ink-max);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.lede {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: var(--measure);
}

section { margin-bottom: 72px; }

.hero { margin: 40px 0 88px; }

.principle {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 20px;
  margin: 0 0 1em;
  max-width: var(--measure);
  color: var(--ink);
}

/* ── Panels (the app's idiom, reused) ──────────────────────────────── */

/* The hairlines are drawn BY THE PANELS, not by a container background showing
   through 1px gaps. That earlier idiom is only invisible when the item count is an
   exact multiple of the resolved column count: with 4 panels, auto-fit gives 4 or 2
   columns at wide and narrow widths (both divisors) but 3 in the ~823-1077px band,
   and the two leftover cells painted as a solid --line block. Found at round 3.
   Borders on the items are count-agnostic, which matters because W6 reuses this grid
   with a different number of panels. */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 22px 26px;
}
.panel h3 {
  font-size: 0.95rem;
  color: var(--ink-max);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.panel p { font-size: 0.94rem; color: var(--ink-dim); margin-bottom: 0; }

/* ── Small screens ─────────────────────────────────────────────────── */

/* 560px, not 480px: the header used to wrap of its own accord from ~481-530px while
   this block (and the nav's -12px optical correction) only applied below 480. The
   stack and the correction are now the same condition, so no band exists where one
   is on and the other off. */
@media (max-width: 560px) {
  .wrap { padding: 18px 18px 48px; }
  .site-footer { padding: 0 18px 30px; }
  .site-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .site-nav { margin-left: -12px; }
  .hero { margin: 24px 0 56px; }
  section { margin-bottom: 56px; }
}