/* ==========================================================================
   MOIRÉ — design №32 · 2026-06-10 · lane: generative
   --------------------------------------------------------------------------
   One ink, two frequencies. Every texture on this site is generated by the
   browser: pairs of repeating line/ring fields a few hertz apart, layered so
   they interfere. Constraints: single hue only · everything overlaps something.
   Display: Unbounded · Body: Schibsted Grotesk · Mono: Fragment Mono
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — one indigo hue, light by default, dark by preference
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #f3f3fc;
  --color-fg: #16164a;
  --color-accent: #3a3aff;
  --color-muted: #6b6ba8;
  --color-border: #c9c9ec;

  --font-display: "Unbounded", "Avenir Next", sans-serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --font-mono: "Fragment Mono", "Courier New", monospace;

  /* generated-line inks, all mixed from the same hue */
  --line-strong: color-mix(in srgb, var(--color-fg) 52%, transparent);
  --line-soft: color-mix(in srgb, var(--color-fg) 30%, transparent);
  --line-faint: color-mix(in srgb, var(--color-fg) 14%, transparent);
  --line-accent: color-mix(in srgb, var(--color-accent) 60%, transparent);
  --raise: color-mix(in srgb, var(--color-bg) 96%, var(--color-fg));
  --shadow-ink: rgba(12, 12, 46, 0.22);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0a26;
    --color-fg: #dcdcf8;
    --color-accent: #8a8aff;
    --color-muted: #9292ca;
    --color-border: #33336d;
    --shadow-ink: rgba(2, 2, 14, 0.5);
    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scrollbar-color: var(--color-accent) var(--color-bg);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 999px;
  border: 2px solid var(--color-bg);
}

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

img { max-width: 100%; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

/* huge outlined words — the theme's recurring "ghost frequency" treatment */
.section-label,
.year-heading,
.philosophy-heading {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-border);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .section-label,
  .year-heading,
  .philosophy-heading { color: var(--line-faint); }
}

/* --------------------------------------------------------------------------
   3. Banner — thin data strip
   -------------------------------------------------------------------------- */
.site-banner { border-bottom: 1px solid var(--color-border); }

.banner-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: 0.55rem clamp(1rem, 4vw, 2rem);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.banner-no { color: var(--color-fg); }

.banner-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

.banner-link {
  margin-left: auto;
  color: var(--color-fg);
  text-decoration: none;
}

.banner-link:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   4. Header — title chip that overlaps whatever comes next
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 6;
  display: flex;
  padding: 1.1rem clamp(1rem, 4vw, 2rem);
  margin-bottom: -76px; /* everything below slides up underneath it */
}

.site-title {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--color-fg);
}

.site-title-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  border: 1px solid currentColor;
  background:
    repeating-radial-gradient(circle at 50% 50%, currentColor 0 1px, transparent 1px 4px);
  transition: background 0.3s ease;
}

.site-title:hover .site-title-mark {
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--color-accent) 0 1px, transparent 1px 3.4px);
  border-color: var(--color-accent);
}

.site-title-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: var(--color-bg);
  padding: 0.2rem 0.5rem;
}

/* --------------------------------------------------------------------------
   5. Nav — orbital rail of ring nodes, fixed to the right edge
   -------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  right: clamp(10px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.nav-item a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--color-fg);
}

.nav-node {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-muted);
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--line-soft) 0 1px, transparent 1px 4.5px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.nav-text {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
}

.nav-item a:hover .nav-text,
.nav-item a:focus-visible .nav-text,
.nav-item a.active .nav-text {
  opacity: 1;
  transform: none;
}

.nav-item a:hover .nav-node {
  border-color: var(--color-accent);
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--line-accent) 0 1px, transparent 1px 4px);
}

.nav-item a.active .nav-node {
  border-color: var(--color-accent);
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--color-accent) 0 1.5px, transparent 1.5px 4.5px);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.nav-item a.active .nav-text {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   6. Main shell
   -------------------------------------------------------------------------- */
.site-main { min-height: 62vh; }

.content-area { width: 100%; }

/* --------------------------------------------------------------------------
   7. Hero — the interference field
   -------------------------------------------------------------------------- */
.home { padding-bottom: 2rem; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: min(86vh, 54rem);
  display: flex;
  align-items: center;
  padding: 10rem clamp(1.5rem, 7vw, 7rem) 5rem;
}

.hero-field {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 28%, transparent 74%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 28%, transparent 74%);
}

.hero-field--base {
  background:
    repeating-radial-gradient(circle at 50% 44%, var(--line-soft) 0 1px, transparent 1px 9px);
}

.hero-field--drift {
  background:
    repeating-radial-gradient(circle at 50% 44%, var(--line-soft) 0 1px, transparent 1px 10.6px);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-field--drift { animation: hero-drift 26s ease-in-out infinite alternate; }
}

.hero-field--drift.is-live { animation: none; } /* pointer takes over */

@keyframes hero-drift {
  from { translate: -22px -12px; }
  to { translate: 26px 18px; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  margin: 0 0 1.4rem;
}

.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background:
    repeating-radial-gradient(circle, currentColor 0 1px, transparent 1px 3px);
  margin-right: 0.6rem;
  vertical-align: -1px;
}

.hero-title {
  font-weight: 800;
  font-size: clamp(2.7rem, 9.5vw, 7.8rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 14ch;
  text-shadow:
    0 0 16px var(--color-bg),
    0 0 34px var(--color-bg),
    0 2px 8px var(--color-bg);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.4rem;
}

.hero-meta span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
}

.hero-meta span + span { margin-left: -10px; } /* chips overlap */

/* --------------------------------------------------------------------------
   8. Home section scaffolding — ghost labels overlap their own content
   -------------------------------------------------------------------------- */
.home-section {
  position: relative;
  max-width: 1140px;
  margin: 5.5rem auto 0;
  padding: 3.4rem clamp(1.5rem, 6vw, 5rem) 0;
}

.section-label {
  position: absolute;
  top: -0.18em;
  font-size: clamp(3.6rem, 10vw, 8.5rem);
  z-index: 0;
}

.home-section--apps .section-label { left: 0.2rem; }
.home-section--writing .section-label { right: 0.2rem; }
.home-section--reading .section-label { left: 0.2rem; }

.section-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.4rem;
}

.section-title {
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin: 0;
}

.view-all {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.2rem;
  white-space: nowrap;
}

.view-all:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   9. Apps — three overlapping ripple discs on a diagonal cascade
   -------------------------------------------------------------------------- */
.app-list {
  list-style: none;
  margin: 0;
  padding: 1rem 0 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.app-list > li { position: relative; }
.app-list > li:nth-child(1) { z-index: 1; }
.app-list > li:nth-child(2) { z-index: 2; margin-left: clamp(-90px, -6vw, -36px); margin-top: 84px; }
.app-list > li:nth-child(3) { z-index: 3; margin-left: clamp(-90px, -6vw, -36px); margin-top: 18px; }

.app-list > li:hover { z-index: 9; }

.app-card {
  position: relative;
  display: block;
  width: clamp(248px, 27vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  text-decoration: none;
  color: var(--color-fg);
  transition: transform 0.35s ease;
}

.app-card:hover { transform: translateY(-8px); }

/* the two ring frequencies */
.app-ring,
.app-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.app-ring {
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--line-soft) 0 1px, transparent 1px 8px);
}

.app-card::after {
  background:
    repeating-radial-gradient(circle at 53% 47%, var(--line-soft) 0 1px, transparent 1px 9.4px);
  transition: transform 0.5s ease;
}

.app-card:hover::after { transform: translate(9px, -7px) scale(1.03); }

.app-info {
  position: absolute;
  inset: 18%;
  z-index: 1;
  border-radius: 50%;
  background: var(--raise);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1.4rem;
  transition: border-color 0.3s ease;
}

.app-card:hover .app-info { border-color: var(--color-accent); }

.app-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--raise), 0 0 0 5px var(--color-border);
}

.app-icon--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  border: 1px solid var(--color-border);
}

.app-name {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0.4rem 0 0;
}

.app-desc {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--color-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. Writing — frequency bands, each row its own angle and pitch
   -------------------------------------------------------------------------- */
.post-list {
  counter-reset: freq;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.post-row {
  counter-increment: freq;
  position: relative;
  display: block;
  padding: 2rem 2.2rem 2rem clamp(5.4rem, 10vw, 8.5rem);
  text-decoration: none;
  color: var(--color-fg);
  --row-line: var(--line-faint);
  transition: transform 0.3s ease;
}

.post-row + .post-row { margin-top: -0.9rem; } /* bands overlap */

.post-row:nth-child(1) { --band-angle: 86deg; --band-gap: 8px; }
.post-row:nth-child(2) { --band-angle: 95deg; --band-gap: 11px; }
.post-row:nth-child(3) { --band-angle: 79deg; --band-gap: 9px; }
.post-row:nth-child(4) { --band-angle: 99deg; --band-gap: 12px; }
.post-row:nth-child(5) { --band-angle: 84deg; --band-gap: 10px; }

.post-band {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(var(--band-angle, 88deg), var(--row-line) 0 1px, transparent 1px var(--band-gap, 10px));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}

.post-row::before {
  content: "0" counter(freq);
  position: absolute;
  left: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-muted);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.3s ease;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .post-row::before { color: var(--line-faint); }
}

.post-row:hover {
  --row-line: var(--line-accent);
  transform: translateX(10px);
  z-index: 2;
}

.post-row:hover::before { -webkit-text-stroke-color: var(--color-accent); }

.post-title {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  line-height: 1.25;
  text-shadow: 0 0 10px var(--color-bg), 0 0 18px var(--color-bg);
}

.post-row:hover .post-title { color: var(--color-accent); }

.post-date {
  position: relative;
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   11. Reading — fanned, overlapping cover strip
   -------------------------------------------------------------------------- */
.book-grid {
  list-style: none;
  margin: 0;
  padding: 2.5rem 0 7.5rem clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 4.5rem;
  position: relative;
  z-index: 1;
}

.book-grid > li {
  margin-left: clamp(-56px, -4.5vw, -40px);
  transition: transform 0.35s ease;
}

.book-grid > li:nth-child(4n + 1) { transform: rotate(-7deg) translateY(6px); }
.book-grid > li:nth-child(4n + 2) { transform: rotate(4deg); }
.book-grid > li:nth-child(4n + 3) { transform: rotate(-2deg) translateY(10px); }
.book-grid > li:nth-child(4n) { transform: rotate(7deg) translateY(2px); }

.book-grid > li:hover,
.book-grid > li:focus-within {
  transform: rotate(0deg) translateY(-12px) scale(1.04);
  z-index: 12;
  position: relative;
}

.book-card {
  display: block;
  position: relative;
  width: clamp(104px, 11vw, 138px);
  text-decoration: none;
  color: var(--color-fg);
}

.book-card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--color-border);
  box-shadow: -14px 12px 26px var(--shadow-ink);
}

/* caption plate slides out under the cover on hover/focus */
.book-card-plate {
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  transform: translate(-50%, 100%);
  width: max-content;
  max-width: 220px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 20;
}

.book-card:hover .book-card-plate,
.book-card:focus-visible .book-card-plate {
  opacity: 1;
  transform: translate(-50%, calc(100% + 8px));
}

/* coverless books: the plate becomes the face */
.book-card:not(:has(.book-card-cover)) {
  aspect-ratio: 2 / 3;
  border: 1px solid var(--color-border);
  background:
    repeating-radial-gradient(circle at 50% 32%, var(--line-faint) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 54% 28%, var(--line-faint) 0 1px, transparent 1px 8.2px);
  box-shadow: -14px 12px 26px var(--shadow-ink);
}

.book-card:not(:has(.book-card-cover)) .book-card-plate {
  position: absolute;
  inset: auto 0 0 0;
  transform: none;
  opacity: 1;
  max-width: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: var(--raise);
  pointer-events: auto;
}

.book-card-status {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.book-card-title {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.3;
}

.book-card-author {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   12. Article shell (page / post / book / app layouts)
   -------------------------------------------------------------------------- */
.ticket-rip { display: none; } /* legacy span in sub-layouts; not this theme */

.article {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  padding: 7.5rem clamp(1.5rem, 6vw, 5rem) 4rem;
}

.article-header {
  position: relative;
  padding-bottom: 2.2rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--color-border);
}

/* ring ornament overlapping the title from the corner */
.article-header::before {
  content: "";
  position: absolute;
  top: -4rem;
  right: -2.5rem;
  width: clamp(190px, 27vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--line-soft) 0 1px, transparent 1px 8px),
    repeating-radial-gradient(circle at 54% 46%, var(--line-soft) 0 1px, transparent 1px 9.3px);
  -webkit-mask-image: radial-gradient(circle, #000 36%, transparent 72%);
  mask-image: radial-gradient(circle, #000 36%, transparent 72%);
}

.article-kicker {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

.article-kicker::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: repeating-radial-gradient(circle, currentColor 0 1px, transparent 1px 3px);
  margin-right: 0.55rem;
  vertical-align: -1px;
}

.article-title {
  position: relative;
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.08;
  margin: 0.8rem 0 0;
  text-shadow: 0 0 14px var(--color-bg), 0 0 26px var(--color-bg);
}

.article-description {
  position: relative;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 1rem 0 0;
  max-width: 60ch;
}

.article-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 1.4rem;
}

.meta-item {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.meta-item::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--color-muted);
  margin-right: 0.5rem;
  vertical-align: 1px;
}

.meta-item a { color: var(--color-accent); }

.article-body { font-size: 1.02rem; }

/* prose stays readable; structured divs (galleries, stats…) run full width */
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > h2,
.article-body > h3,
.article-body > h4,
.article-body > blockquote,
.article-body > pre,
.article-body > table { max-width: 68ch; }

.article-body h2 {
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.3;
  margin: 2.6rem 0 1rem;
}

/* ghost headings draw their own treatment — no prose ring dot */
.article-body .year-heading::before,
.article-body .philosophy-heading::before { content: none; }

.article-body h2::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  background: repeating-radial-gradient(circle, var(--line-accent) 0 1px, transparent 1px 3.5px);
  margin-right: 0.7rem;
}

.article-body h3 {
  font-weight: 600;
  font-size: 1.12rem;
  margin: 2.2rem 0 0.8rem;
}

.article-body a {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.article-body a:hover { color: var(--color-accent); }

/* component links inside page bodies are not prose links */
.article-body a.post-index-row,
.article-body a.book-line,
.article-body a.book-card,
.article-body a.archive-card,
.article-body a.app-showcase-card,
.article-body a.stack-card,
.article-body a.sort-link,
.article-body .post-index-row *,
.article-body .book-line *,
.article-body .app-showcase-card * { text-decoration: none; }

.article-body li { margin-bottom: 0.35rem; }
.article-body li::marker { color: var(--color-accent); }

.article-body img {
  border: 1px solid var(--color-border);
  box-shadow: -12px 10px 24px var(--shadow-ink);
}

.article-body table {
  border-collapse: collapse;
  width: 100%;
}

.article-body th,
.article-body td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 0.8rem 0.5rem 0;
  text-align: left;
}

.article-body th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   13. Content elements
   -------------------------------------------------------------------------- */
pre {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-fg) 4%, var(--color-bg));
  overflow-x: auto;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: color-mix(in srgb, var(--color-fg) 7%, var(--color-bg));
  padding: 0.12em 0.35em;
  border-radius: 4px;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

blockquote {
  margin: 1.8rem 0;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--color-accent);
  background:
    repeating-linear-gradient(96deg, var(--line-faint) 0 1px, transparent 1px 11px);
  font-style: italic;
}

blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }

/* an hr is two line frequencies interfering */
hr {
  border: 0;
  height: 14px;
  margin: 2.8rem 0;
  background:
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 6.8px);
}

.pull-quote {
  position: relative;
  margin: 2.4rem 0;
  padding: 1.4rem 0 1.4rem 4.6rem;
  border: 0;
  background: none;
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.6;
  max-width: 60ch;
}

.pull-quote-mark {
  position: absolute;
  left: 0;
  top: -0.18em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 5rem;
  line-height: 1;
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-accent);
}

@supports not (-webkit-text-stroke: 1px #000) {
  .pull-quote-mark { color: var(--color-accent); }
}

/* --------------------------------------------------------------------------
   14. Reading page — stats as overlapping interference targets
   -------------------------------------------------------------------------- */
.reading-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2.5rem 0 3rem;
}

.stat-item {
  width: clamp(150px, 19vw, 200px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background:
    radial-gradient(circle, var(--color-bg) 0 51%, transparent 51%),
    repeating-radial-gradient(circle at 50% 50%, var(--line-soft) 0 1px, transparent 1px 6.5px),
    repeating-radial-gradient(circle at 53% 47%, var(--line-soft) 0 1px, transparent 1px 7.6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: 1rem;
}

.stat-item + .stat-item { margin-left: -26px; } /* targets overlap */
.stat-item:nth-child(even) { transform: translateY(20px); }

.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  line-height: 1;
}

.stat-item[data-stat="reading-now"] .stat-value { color: var(--color-accent); }

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  max-width: 12ch;
}

.sort-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin: 3rem 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.sort-link {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sort-link::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid currentColor;
  margin-right: 0.45rem;
  transition: background 0.2s ease;
}

.sort-link:hover { color: var(--color-fg); }

.sort-link.active { color: var(--color-accent); }
.sort-link.active::before { background: currentColor; }

.book-list {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.book-line {
  display: grid;
  grid-template-columns: 12px 44px minmax(0, 1fr) auto;
  gap: 0 1.1rem;
  align-items: center;
  padding: 0.65rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-fg);
  transition: background 0.25s ease, transform 0.25s ease;
}

.book-line:hover {
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  transform: translateX(8px);
}

.book-line-flag {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

/* five-star reads broadcast on the accent frequency */
.book-line[data-rating="5"] .book-line-flag {
  border-color: var(--color-accent);
  background: repeating-radial-gradient(circle, var(--color-accent) 0 1px, transparent 1px 3px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.book-line-cover {
  width: 44px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background:
    repeating-radial-gradient(circle at 50% 30%, var(--line-faint) 0 1px, transparent 1px 5px);
}

.book-line-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-line-title {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
}

.book-line:hover .book-line-title { color: var(--color-accent); }

.book-line-author {
  display: block;
  font-size: 0.84rem;
  color: var(--color-muted);
}

.book-line-rating {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  white-space: nowrap;
}

.year-section {
  position: relative;
  padding-top: 4.6rem;
  margin-top: 1.8rem;
}

h2.year-heading {
  position: absolute;
  top: 0;
  left: -0.03em;
  margin: 0;
  font-size: clamp(3.4rem, 8vw, 5.6rem);
  z-index: 0;
}

/* --------------------------------------------------------------------------
   15. Writing page — index numerals overlap their own rows
   -------------------------------------------------------------------------- */
.post-index {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

.post-index-header { /* reserved by contract; index rows carry their own headers */
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.post-index-row {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 1.6rem;
  padding: 1.6rem clamp(3rem, 9vw, 7.5rem) 1.6rem 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-fg);
}

.post-index-row::after {
  content: attr(data-index);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-border);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.25s ease;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .post-index-row::after { color: var(--line-faint); }
}

.post-index-row:hover::after { -webkit-text-stroke-color: var(--color-accent); }

.post-index-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  padding-top: 0.5rem;
}

.post-index-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.65rem);
  line-height: 1.25;
  transition: color 0.25s ease;
}

.post-index-row:hover .post-index-title { color: var(--color-accent); }

.post-index-desc {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 58ch;
}

.post-index-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.post-index-topic {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}

.post-index-row:hover .post-index-topic { border-color: var(--color-accent); }

/* --------------------------------------------------------------------------
   16. Apps page — showcase discs + staggered philosophy
   -------------------------------------------------------------------------- */
.app-showcase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2.5rem 0 2rem;
}

.app-showcase-card {
  width: clamp(210px, 24vw, 270px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background:
    radial-gradient(circle, var(--color-bg) 0 48%, transparent 48%),
    repeating-radial-gradient(circle at 50% 50%, var(--line-soft) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 53% 47%, var(--line-soft) 0 1px, transparent 1px 8.2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 2rem;
  text-decoration: none;
  color: var(--color-fg);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.app-showcase-card + .app-showcase-card { margin-left: -34px; } /* discs overlap */
.app-showcase-card:nth-child(even) { transform: translateY(26px); }

.app-showcase-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-accent);
  position: relative;
  z-index: 5;
}

.app-showcase-name {
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
}

.app-showcase-card:hover .app-showcase-name { color: var(--color-accent); }

.app-showcase-detail {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.philosophy-section {
  position: relative;
  margin-top: 5rem;
  padding-top: 4rem;
}

h2.philosophy-heading {
  position: absolute;
  top: 0;
  left: -0.03em;
  margin: 0;
  font-size: clamp(3rem, 8vw, 5.4rem);
  z-index: 0;
}

.philosophy-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.philosophy-item {
  position: relative;
  padding: 1.6rem 0 1.6rem 3rem;
  border-bottom: 1px solid var(--color-border);
  max-width: 62ch;
}

.philosophy-item:nth-child(even) { margin-left: clamp(2rem, 14vw, 10rem); }

.philosophy-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  background: repeating-radial-gradient(circle, var(--line-accent) 0 1px, transparent 1px 3.5px);
}

.philosophy-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.philosophy-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   17. Now page
   -------------------------------------------------------------------------- */
.currently-reading {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1.6rem 0;
}

.reading-card {
  position: relative;
  padding: 1rem 1.4rem 1rem 3rem;
  border: 1px solid var(--color-border);
  width: fit-content;
  max-width: 56ch;
  background: var(--raise);
}

.reading-card:nth-child(even) { margin-left: clamp(1.5rem, 8vw, 4rem); margin-top: -0.4rem; }

.reading-card::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.3rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  background: repeating-radial-gradient(circle, var(--line-accent) 0 1px, transparent 1px 3px);
}

.reading-card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}

.reading-card-author {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.page-footer-note {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   18. Archive page
   -------------------------------------------------------------------------- */
.archive-today {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  padding: clamp(1.8rem, 4vw, 3rem);
  margin: 2rem 0 2.5rem;
  background: var(--raise);
}

.archive-today::before {
  content: "";
  position: absolute;
  right: -12%;
  top: -50%;
  width: clamp(300px, 42vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--line-soft) 0 1px, transparent 1px 7.5px),
    repeating-radial-gradient(circle at 53% 47%, var(--line-soft) 0 1px, transparent 1px 8.7px);
  -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 72%);
  mask-image: radial-gradient(circle, #000 38%, transparent 72%);
}

.archive-today-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-accent);
}

.archive-today-theme {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.08;
  margin: 0.6rem 0;
}

.archive-today-manifesto {
  position: relative;
  max-width: 58ch;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0;
}

.archive-today-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-top: 1.3rem;
}

.archive-meta-item {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.archive-meta-item::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  margin-right: 0.45rem;
}

.archive-palette { display: inline-flex; }

.archive-palette i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.archive-palette i + i { margin-left: -6px; } /* swatches overlap */

.archive-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
}

.archive-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.archive-surprise {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  background: transparent;
  border: 1px solid var(--color-fg);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.archive-surprise:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.archive-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem 1.6rem;
  padding-bottom: 1rem;
}

.archive-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  background: var(--raise);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.archive-card:nth-child(even) { transform: translateY(14px); } /* offset rhythm */

a.archive-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent);
  box-shadow: -10px 12px 28px var(--shadow-ink);
}

a.archive-card:nth-child(even):hover { transform: translateY(6px); }

.archive-card--lost {
  border-style: dashed;
  opacity: 0.75;
}

.archive-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background:
    repeating-radial-gradient(circle at 50% 40%, var(--line-faint) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 54% 36%, var(--line-faint) 0 1px, transparent 1px 8.1px);
}

.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.archive-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.archive-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem 1.1rem;
}

.archive-date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.archive-theme {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

a.archive-card:hover .archive-theme { color: var(--color-accent); }

.archive-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   19. App layout features (inside app content)
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 2.5rem;
  margin: 2rem 0;
}

.feature {
  position: relative;
  padding: 1.3rem 0 1.3rem 2.4rem;
  border-top: 1px solid var(--color-border);
}

.feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.7rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  background: repeating-radial-gradient(circle, var(--line-accent) 0 1px, transparent 1px 3px);
}

.feature h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.feature p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-muted);
}

.stack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.8rem 0;
}

.stack-card {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  color: var(--color-fg);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.stack-card::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  border: 1px solid var(--color-accent);
  background: repeating-radial-gradient(circle, var(--line-accent) 0 1px, transparent 1px 3px);
}

.stack-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

.stack-card-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.stack-card-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   20. 404 — the numerals ARE the interference
   -------------------------------------------------------------------------- */
.error-page {
  position: relative;
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 1060px;
  margin: 0 auto;
  padding: 9rem clamp(1.5rem, 6vw, 5rem) 5rem;
}

.error-code {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 24vw, 15rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: transparent;
  background:
    repeating-radial-gradient(circle at 30% 50%, var(--color-fg) 0 2px, transparent 2px 8px),
    repeating-radial-gradient(circle at 34% 46%, var(--color-fg) 0 2px, transparent 2px 9.4px);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 200%;
}

@media (prefers-reduced-motion: no-preference) {
  .error-code { animation: lost-signal 14s ease-in-out infinite alternate; }
}

@keyframes lost-signal {
  from { background-position: 0% 0%, 0% 0%; }
  to { background-position: 6% 4%, -5% -3%; }
}

.error-page h2 {
  margin: 0.5rem 0 0;
  font-weight: 700;
  font-size: 1.4rem;
}

.error-message {
  color: var(--color-muted);
  max-width: 46ch;
  margin: 0.4rem 0 1rem;
}

.error-page a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg);
  text-decoration: none;
  border: 1px solid var(--color-fg);
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.error-page a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   21. Footer — columns overlap a giant static interference disc
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: 7rem;
  border-top: 1px solid var(--color-border);
  padding: 4rem 0 6.5rem;
}

.footer-field {
  position: absolute;
  right: -180px;
  bottom: -280px;
  width: 640px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--line-soft) 0 1px, transparent 1px 8px),
    repeating-radial-gradient(circle at 53% 47%, var(--line-soft) 0 1px, transparent 1px 9.2px);
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%);
  mask-image: radial-gradient(circle, #000 40%, transparent 72%);
}

.footer-grid {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  margin-bottom: 0.9rem;
}

.footer-col--mark .footer-col-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-fg);
}

.footer-monogram {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 0.9rem;
  background: var(--color-accent);
  -webkit-mask: url("/assets/images/monogram.svg") no-repeat center / contain;
  mask: url("/assets/images/monogram.svg") no-repeat center / contain;
}

.footer-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.footer-col > a {
  display: block;
  width: fit-content;
  padding: 0.22rem 0;
  color: var(--color-fg);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-col > a:hover,
.social-list a:hover {
  color: var(--color-accent);
  transform: translateX(5px);
}

.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-list a {
  display: block;
  width: fit-content;
  padding: 0.22rem 0;
  color: var(--color-fg);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* --------------------------------------------------------------------------
   22. Responsive — the dock, the stack, the tightened fields
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  body { padding-bottom: 92px; } /* room for the dock */

  /* nav becomes a bottom dock of ring nodes with always-on labels */
  .site-nav {
    right: auto;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
    padding: 0.6rem 0.5rem calc(0.6rem + env(safe-area-inset-bottom));
  }

  .nav-list {
    flex-direction: row;
    justify-content: space-around;
  }

  .nav-item a {
    flex-direction: column;
    gap: 4px;
  }

  .nav-node { width: 24px; height: 24px; }

  .nav-text {
    opacity: 1;
    transform: none;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.55rem;
  }

  .nav-item a.active .nav-text { color: var(--color-accent); }

  .site-header { margin-bottom: -64px; }

  .hero { padding-top: 8rem; min-height: 72vh; }

  /* ripple discs stack and overlap vertically instead */
  .app-list { flex-direction: column; align-items: center; }
  .app-list > li:nth-child(2) { margin: -36px 0 0 0; transform: translateX(13%); }
  .app-list > li:nth-child(3) { margin: -36px 0 0 0; transform: translateX(-10%); }
  .app-card { width: min(78vw, 320px); }

  .post-row { padding-left: 4.4rem; padding-right: 1rem; }

  .book-grid { padding-left: 2.2rem; padding-bottom: 6rem; }
  .book-grid > li { margin-left: -34px; }

  .post-index-row {
    grid-template-columns: 1fr;
    gap: 0.3rem 0;
    padding-right: clamp(2.5rem, 14vw, 4.5rem);
  }

  .post-index-date { padding-top: 0; }

  .stat-item + .stat-item { margin-left: -18px; }

  .app-showcase-card + .app-showcase-card { margin-left: -22px; }
  .philosophy-item:nth-child(even) { margin-left: clamp(1rem, 6vw, 3rem); }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-field { right: -260px; bottom: -340px; }

  .banner-note { display: none; }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(2.4rem, 13vw, 3.4rem); }
  .stat-item { width: 46vw; }
  .stat-item:nth-child(even) { transform: translateY(12px); }
  .app-showcase { flex-direction: column; align-items: center; }
  .app-showcase-card + .app-showcase-card { margin: -26px 0 0 0; }
  .app-showcase-card:nth-child(even) { transform: translateX(8%); }
  .app-showcase-card:hover { transform: translateY(-4px); }
}

/* --------------------------------------------------------------------------
   23. Reduced motion — everything settles
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}