/* The essay, in the felabuyi.com design language: dark ground, Inter for prose,
   JetBrains Mono for labels, exhibits and machine output. The figures are drawn
   with stroke="currentColor", so the whole diagram system follows `color`. */

@font-face {
  font-family: 'Signature Ink';
  font-style: normal;
  font-display: block;
  font-weight: 400;
  src: url('fonts/signature.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #0A0A0A;
  --text: rgba(255, 255, 255, 0.80);
  --bright: #ffffff;
  --muted: rgba(255, 255, 255, 0.52);
  --faint: rgba(255, 255, 255, 0.34);
  --rule: rgba(255, 255, 255, 0.13);
  --rule-soft: rgba(255, 255, 255, 0.07);
  --accent: #a8c5b5;

  --measure: 68ch;
  --gutter: 20px;
  --line: 26px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(168, 197, 181, 0.26); color: #fff; }

.sheet {
  max-width: min(calc(var(--measure) + 2 * var(--gutter)), 720px);
  margin: 0 auto;
  padding: 28px var(--gutter) 56px;
}

/* Prose links: sage, quiet underline. Pinned :visited so returning readers
   do not see a purple page. */
.sheet p a,
.sheet li a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(168, 197, 181, 0.35);
  text-underline-offset: 3px;
}
.sheet p a:visited, .sheet li a:visited { color: var(--accent); }
.sheet p a:hover, .sheet li a:hover { text-decoration-color: var(--accent); }

/* Fixed affordances, styled as the site's pills */
.topbar {
  text-align: right;
  padding: 20px max(20px, env(safe-area-inset-right, 0px)) 0 20px;
}
.topbar a { display: inline-block; }

.btn,
.topbar a,
.floater {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  padding: 10px 15px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bright);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:visited, .topbar a:visited, .floater:visited { color: var(--bright); }
.btn:hover, .topbar a:hover, .floater:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn:focus-visible, .topbar a:focus-visible, .floater:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   AMBIENT DISC PLAYER
   The homepage's record player, hung in the left margin so it is present
   the whole way down the essay. Never autoplays.
   ============================================ */
.disc-dangle {
  position: fixed;
  top: 0;
  left: clamp(20px, 4.5vw, 110px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  animation: disc-sway 7s ease-in-out infinite;
}

@keyframes disc-sway {
  0%, 100% { transform: rotate(-1.4deg); }
  50%      { transform: rotate(1.4deg); }
}

.disc-cord {
  width: 1px;
  height: 72px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28));
}

.disc-player {
  position: relative;
  width: 100px;
  height: 100px;
  background: rgba(28, 28, 30, 0.9);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  overflow: visible;
  border: none;
  padding: 0;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.disc-player:hover { transform: scale(1.04); }
.disc-player:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.disc {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.disc.spinning { animation: disc-spin 3s linear infinite; }
@keyframes disc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.disc-grooves { position: absolute; width: 100%; height: 100%; border-radius: 50%; }
.disc-grooves .groove {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%);
}
.disc-grooves .groove:nth-child(1) { width: 85%; height: 85%; }
.disc-grooves .groove:nth-child(2) { width: 75%; height: 75%; }
.disc-grooves .groove:nth-child(3) { width: 65%; height: 65%; }
.disc-grooves .groove:nth-child(4) { width: 55%; height: 55%; }
.disc-grooves .groove:nth-child(5) { width: 45%; height: 45%; }
.disc-grooves .groove:nth-child(6) { width: 38%; height: 38%; }
.disc-grooves .groove:nth-child(7) { width: 32%; height: 32%; }
.disc-grooves .groove:nth-child(8) { width: 28%; height: 28%; }

.disc-center {
  width: 24%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, #666 0%, #1a1a1a 70%);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.disc-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.needle-arm {
  position: absolute;
  top: 8px;
  right: -8px;
  width: 40px;
  height: 10px;
  transform-origin: right center;
  transform: rotate(15deg);
  transition: transform 0.8s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 10;
}
.needle-arm.playing { transform: rotate(0deg); }

.needle-pivot {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #666;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.needle-bar {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 85%;
  height: 3px;
  background: #666;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.needle-head {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3680ce;
}

.disc-hint {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 10px 0 0;
  max-width: 108px;
  text-align: center;
  line-height: 1.5;
  color: var(--faint);
}

/* Below this the page has no side margin left to hang it in, so it tucks
   into the bottom-left corner instead, opposite the floater. */
@media (max-width: 1100px) {
  .disc-dangle {
    top: auto;
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    left: max(16px, env(safe-area-inset-left, 0px));
    animation: none;
    transform: scale(0.74);
    transform-origin: bottom left;
  }
  .disc-cord { display: none; }
  .disc-hint { display: none; }
}

/* Floating link to the other version. The page has no JS routing, so it is
   always present; .sheet-floater reserves room so it never covers the end.
   KEEP THIS BLOCK: it has twice been deleted by edits that removed a range
   ending at "Title block". It is opaque because it sits over running text. */
.floater {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 30;
  background: rgba(18, 18, 18, 0.94);
  border-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.floater:hover {
  background: rgba(38, 38, 38, 0.97);
  border-color: rgba(255, 255, 255, 0.45);
}
.sheet-floater { padding-bottom: 104px; }

/* Title block */
.titleblock { margin: 24px 0 48px; }
h1 {
  font-family: var(--sans);
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--bright);
  margin: 0 0 12px;
}
.subtitle {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0 0 16px;
}
.dateline {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.dateline span { white-space: nowrap; }

/* Body copy */
p { margin: 0 0 var(--line); text-wrap: pretty; }
h2 {
  font-family: var(--sans);
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bright);
  margin: 56px 0 14px;
}

.thesis {
  margin: 36px 0;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
  font-size: 1.1875rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--bright);
}

.epigraph {
  margin: var(--line) 0 0;
  padding-left: 18px;
  border-left: 1px solid var(--rule);
}
.epigraph p { margin: 0 0 6px; color: rgba(255, 255, 255, 0.88); }
.epigraph .who {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--faint);
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }

/* Figures: full bleed so the exhibits render near 1:1.
   color drives every stroke, label and hatch inside the SVG. */
figure {
  margin: 52px calc(-1 * var(--gutter));
  overflow-x: auto;
}
figure svg {
  width: 100%;
  min-width: 600px;
  height: auto;
  display: block;
  color: rgba(255, 255, 255, 0.88);
}
figure svg text { font-family: var(--mono); letter-spacing: 0; fill: currentColor; }
figure svg .lbl { font-size: 11.5px; }
figure svg .lbl-s { font-size: 10.5px; }
figure svg .cap { font-size: 10px; letter-spacing: 0.06em; }
figure svg .strong { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
figure svg .soft { fill: rgba(255, 255, 255, 0.5); }
figure svg .dim { fill: rgba(255, 255, 255, 0.5); }
figure svg .ln { stroke: currentColor; fill: none; stroke-width: 1.25; }
figure svg .ln-soft { stroke: rgba(255, 255, 255, 0.38); fill: none; stroke-width: 1; }
figure svg .ln-rule { stroke: rgba(255, 255, 255, 0.22); fill: none; stroke-width: 1; }
figure svg .dot { fill: currentColor; stroke: none; }
figure svg .ring { fill: none; stroke: currentColor; stroke-width: 1.5; }
figure svg .dash { stroke-dasharray: 3 4; }

figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--faint);
  margin: 12px var(--gutter) 0;
}
figcaption .fig-no { font-weight: 700; color: var(--accent); letter-spacing: 0.08em; }

/* Spec box: machine output */
.spec {
  margin: 52px calc(-1 * var(--gutter));
  padding: 20px var(--gutter);
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0;
  overflow-x: auto;
}
.spec pre { margin: 0; font-family: inherit; }
.spec .cm { color: var(--faint); }
.spec .kw { font-weight: 700; color: var(--accent); }
.spec .spec-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Signature */
.signoff { margin: 44px 0 0; }
.sig-ink {
  font-family: 'Signature Ink', cursive;
  font-size: 2rem;
  /* the script ascenders overflow a line-height of 1 and get clipped */
  line-height: 1.45;
  color: #93b4ff;
  transform: rotate(-1.5deg);
  transform-origin: left bottom;
  margin: 0 0 10px 2px;
  width: fit-content;
}
.signoff .typed { margin: 0; color: var(--bright); }
.signoff .role { color: var(--muted); font-weight: 400; }
.signoff .backline { font-size: 0.9375rem; margin-top: 14px; }

/* Read-on block (one-pager) */
.readon {
  margin: 52px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--line);
}
.readon .facts { font-size: 1rem; color: var(--text); margin: 0 0 var(--line); }
.readon .action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 14px;
}
.readon .action:last-child { margin-bottom: 0; }
.readon .note { font-size: 0.875rem; color: var(--faint); }

/* About + sources */
.about { font-size: 1rem; color: var(--muted); }
.about strong { color: var(--bright); }
.sources { font-size: 0.875rem; line-height: 1.65; letter-spacing: 0; color: var(--muted); }
.sources p strong {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bright);
}
.sources ol { padding-left: 3ch; margin: var(--line) 0 0; }
.sources li { margin-bottom: 12px; }
.sources li::marker { color: var(--faint); }

/* Footer */
footer.colophon {
  border-top: 1px solid var(--rule);
  margin-top: 56px;
  padding-top: 20px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
footer.colophon a { color: inherit; text-decoration: none; }
footer.colophon a:visited { color: inherit; }
footer.colophon a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
footer.colophon .spacer { flex: 1; }

@media (max-width: 480px) {
  :root { --gutter: 16px; --line: 24px; }
  body { font-size: 1rem; line-height: 1.68; }
  .sheet { padding: 28px var(--gutter) 44px; }
  .subtitle { font-size: 1rem; }
  h2 { font-size: 1.1875rem; margin-top: 44px; }
  .thesis { font-size: 1.0625rem; }
  .sig-ink { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .topbar a, .floater { transition: none; }
  .disc-dangle { animation: none; }
  .disc.spinning { animation: none; }
}

/* Print: back to ink on paper */
@media print {
  body { background: #ffffff; color: #111111; }
  h1, h2, .thesis, .signoff .typed, .about strong { color: #000000; }
  .subtitle, .dateline, figcaption, .sources, .about { color: #333333; }
  figure svg { color: #000000; min-width: 0; }
  figure svg .soft, figure svg .dim { fill: #555555; }
  figure svg .ln-soft { stroke: #555555; }
  figure svg .ln-rule { stroke: #999999; }
  .spec { background: #fafafa; border-color: #999999; }
  .sheet p a, .sheet li a { color: #000000; text-decoration: none; }
  .readon, footer.colophon, .topbar, .floater, .disc-dangle { display: none; }
  figure, .spec { break-inside: avoid; overflow-x: visible; }
}