/* ── base.css — Two Truths · "First Light" ────────────────────────────────
   The horizon grammar: warm ground below, cool sky above, one luminous line
   between. Relative life renders on ground; ultimate truth renders on sky.
   The reader learns the grammar without being told.                       */

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--glow); color: var(--ink); }

/* ── skip link ────────────────────────────────────────────────────────── */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s2) var(--s3);
  background: var(--card);
  color: var(--accent);
  font-family: var(--font-util);
  border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

/* ── type ─────────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 350;
  line-height: var(--leading-tight);
  letter-spacing: -.011em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); margin-top: var(--s6); }
h3 { font-size: var(--t-md); font-weight: 550; margin-top: var(--s5); }

p { margin: 0 0 var(--s3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .2s var(--ease);
}
a:hover { text-decoration-color: currentColor; }

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

/* Utility type — nav, labels, honesty tags, eyebrows */
.util {
  font-family: var(--font-util);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  line-height: 1.4;
}
.eyebrow {
  font-family: var(--font-util);
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s2);
}

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.prose {
  width: min(100% - 2.5rem, var(--measure));
  margin-inline: auto;
}
.band { padding-block: var(--section); }
.band + .band { padding-top: 0; }

/* A sky band interrupting a ground page — used for The Turn and for every
   ultimate-truth passage. `.sky` rebinds the local ink tokens (tokens.css). */
.band.sky {
  padding-block: var(--section);
  margin-block: var(--section);
}
.band.sky + .band { padding-top: var(--section); }

/* ── the horizon ──────────────────────────────────────────────────────────
   The signature. A hairline of --first-light with a soft glow. On the home
   hero it is fixed and responds to scroll (tt-horizon.js); everywhere else
   it settles into section dividers.                                       */
.horizon {
  position: relative;
  height: var(--stroke);
  background: linear-gradient(
    90deg,
    transparent,
    var(--rule) 12%,
    var(--rule) 88%,
    transparent
  );
  border: 0;
  margin: 0;
  opacity: .85;
}
.horizon::after {
  content: '';
  position: absolute;
  inset: -20px 0;
  background: radial-gradient(
    ellipse 60% 100% at 50% 50%,
    var(--glow),
    transparent 70%
  );
  pointer-events: none;
}

/* The hero horizon: fixed, full-bleed, scroll-reactive. --horizon-y is
   written by tt-horizon.js; it degrades to a static line without JS. */
.horizon--hero {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--horizon-y, 62vh);
  z-index: 1;
  transition: top 1.1s var(--ease);
  will-change: top;
}
.horizon--hero::after { animation: breathe var(--breath) ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { opacity: .55; transform: scaleY(1); }
  43%      { opacity: 1;   transform: scaleY(1.25); }  /* inhale 3s */
  57%      { opacity: 1;   transform: scaleY(1.25); }  /* hold 1s */
}

/* ── the essence line — the shareable atom of the site ────────────────── */
.essence {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 350;
  line-height: 1.4;
  color: var(--ink);
  border-left: var(--stroke) solid var(--rule);
  padding: var(--s1) 0 var(--s1) var(--s3);
  margin: var(--s5) 0;
  max-width: 46ch;
}

/* ── practice block — 90 seconds / 10 minutes / a season ──────────────── */
.practice {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin: var(--s5) 0;
  box-shadow: var(--sh-1);
}
.practice__tabs {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s2);
}
/* These are jump links, not JS tabs — every size stays on the page and the
   block works with scripting disabled. They are styled as quiet chips rather
   than as controls, so nothing promises state they do not hold. */
.practice__tab {
  font-family: var(--font-util);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .2em .8em;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.practice__tab:hover {
  color: var(--accent);
  border-color: var(--rule);
}

/* The heading you jumped to gets the accent rule, so the link visibly landed. */
.practice h3:target {
  box-shadow: inset 3px 0 0 var(--rule);
  padding-left: var(--s2);
  margin-left: calc(var(--s2) * -1);
}

/* ── honesty tags (/science) — chips, never coloured like warnings ────── */
.tag {
  display: inline-block;
  font-family: var(--font-util);
  font-size: .75rem;
  letter-spacing: .07em;
  text-transform: lowercase;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .18em .7em;
  margin-right: var(--s1);
  vertical-align: .12em;
}

/* ── buttons — text + arrow, never a filled pill ──────────────────────── */
.go {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  font-family: var(--font-util);
  font-size: var(--t-sm);
  letter-spacing: .02em;
  color: var(--accent);
  text-decoration: none;
  padding: .3em 0;
}
.go::after {
  content: '→';
  transition: transform .25s var(--ease);
}
.go:hover::after { transform: translateX(.28em); }
.go:hover { text-decoration: underline; text-underline-offset: .3em; }

/* ── cards — doors on sky, domains on ground ──────────────────────────── */
.grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover {
  border-color: var(--rule);
  transform: translateY(-2px);
}
.card__name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 400;
  margin: var(--s2) 0 var(--s1);
}
.card__essence { color: var(--ink-2); font-size: var(--t-sm); margin: 0; }
.card__glyph { width: 40px; height: 40px; stroke: var(--rule); fill: none; stroke-width: var(--stroke); }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  flex-wrap: wrap;
}
.nav__mark { display: flex; align-items: center; gap: .6em; text-decoration: none; color: var(--ink); }
.nav__mark svg { width: 26px; height: 26px; }
.nav__wordmark { font-family: var(--font-display); font-size: var(--t-sm); letter-spacing: .01em; }
.nav__links { display: flex; gap: var(--s3); flex-wrap: wrap; margin-left: auto; }
.nav__link {
  font-family: var(--font-util);
  font-size: var(--t-xs);
  letter-spacing: .03em;
  color: var(--ink-2);
  text-decoration: none;
  padding: .2em 0;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current='page'] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--rule);
}
.nav__theme {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  width: 2rem; height: 2rem;
  color: var(--ink-2);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: .9rem;
}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  margin-top: var(--section);
  padding: var(--s5) 0 var(--s6);
  font-family: var(--font-util);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.foot__links { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot__ethic { max-width: 44ch; margin: 0; }

/* ── motion ───────────────────────────────────────────────────────────────
   Exactly one element per page may breathe. Everything else is still.     */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .horizon--hero { position: absolute; transition: none; }
}

/* ── print ────────────────────────────────────────────────────────────── */
@media print {
  .nav, .foot, .horizon--hero { display: none; }
  body { background: #fff; color: #000; }
}