/* =====================================================================
   v7 · one system. Loaded after style.css; overrides only.
   Palette "ink / porcelain": one dark + one light mode, a faint cool cast instead of flat neutral grey,
   layered depth (top light, hairlines, ghost surfaces). All text >= AA (see REVIEW.md).
   One type scale · one section-header pattern · one radius pair (12 container / 6 small) · one column · one rhythm.
   ===================================================================== */

:root {
  /* type scale: 5 sizes, nothing else */
  --text-display: 2.5rem;   /* 40 name, post title */
  --text-body: 1.125rem;    /* 18 intro, post prose */
  --text-title: 1rem;       /* 16 card + row titles */
  --text-ui: 0.9375rem;     /* 15 nav, descriptions */
  --text-caption: 0.8125rem;/* 13 every mono label, meta, quote */
  --text-heading: var(--text-title); --text-desc: var(--text-ui);
  /* radius: two values */
  --r-lg: 0.75rem; --r-sm: 0.375rem;
  --radius-card: var(--r-lg); --radius-tile: var(--r-sm);
  /* rhythm */
  --gap-section: var(--s-8);
}

:root, html[data-theme='dark'] {
  --color-bg: #0a0b0d;
  --color-glow: rgb(150 165 200 / 0.07);
  --color-text: #ececee;               /* 16.7:1 */
  --color-text-secondary: #a6a9b0;     /* 8.4:1 */
  --color-text-tertiary: #7f838b;      /* 5.2:1 (4.9:1 on the glow) */
  --color-border: rgb(255 255 255 / 0.07);
  --color-border-strong: rgb(255 255 255 / 0.12);
  --color-hairline: rgb(255 255 255 / 0.08);
  --color-surface: transparent;
  --color-surface-hover: rgb(255 255 255 / 0.03);
  --color-tile: rgb(255 255 255 / 0.04);
  --color-selection: #2a2e37;          /* text on it 11.5:1 */
  --color-scrollbar: #2a2d33;
  --color-overlay: #111317;
  --color-scrim: rgb(5 6 8 / 0.6);
  --color-hill-edge: #3b3e45;
  --color-hill-line: #1e2025;
  --color-item-active: rgb(255 255 255 / 0.05);
  --orb-shade: rgb(0 0 0 / 0.18);
  --shadow-border: inset 0 0 0 1px var(--color-hairline);
  --shadow-border-hover: inset 0 0 0 1px var(--color-border-strong);
}
html[data-theme='light'] {
  --color-bg: #f4f5f7;
  --color-glow: rgb(255 255 255 / 0.85);
  --color-text: #0e0f12;               /* 17.6:1 */
  --color-text-secondary: #43464d;     /* 8.7:1 */
  --color-text-tertiary: #5f636b;      /* 5.5:1 */
  --color-border: rgb(14 15 18 / 0.07);
  --color-border-strong: rgb(14 15 18 / 0.13);
  --color-hairline: rgb(14 15 18 / 0.09);
  --color-surface: transparent;
  --color-surface-hover: rgb(255 255 255 / 0.7);
  --color-tile: #ffffff;
  --color-selection: #d5d9e0;          /* text on it 13.5:1 */
  --color-scrollbar: #cfd2d8;
  --color-overlay: #ffffff;
  --color-scrim: rgb(244 245 247 / 0.6);
  --color-hill-edge: #b9bdc4;
  --color-hill-line: #dde0e5;
  --color-item-active: rgb(14 15 18 / 0.05);
  --orb-shade: rgb(14 15 18 / 0.06);
  --shadow-border: inset 0 0 0 1px var(--color-hairline);
  --shadow-border-hover: inset 0 0 0 1px var(--color-border-strong);
}

/* depth: a soft light from above the column, fading out long before the footer, so the page bottom is plain bg and the art merges */
body { background-image: radial-gradient(60rem 36rem at 50% -8rem, var(--color-glow), transparent 70%); background-repeat: no-repeat; }
html, body { background-color: var(--color-bg); }

/* ---------- hero: the avatar is the boulder ---------- */
.avatar { box-shadow: none; overflow: visible; border-radius: 50%; cursor: grab; touch-action: pan-y; }
.avatar.grabbing, .avatar #sphere.grabbing { cursor: grabbing; }
.avatar #sphere { display: block; }
.avatar canvas { display: block; }
.who h1 { letter-spacing: -0.03em; }
.meta { color: var(--color-text-secondary); }

/* ---------- one section header: binary index + label ---------- */
.sec, .links { margin-block-start: var(--gap-section); }
.label { justify-content: flex-start; gap: var(--s-3); margin-block-end: var(--s-4); color: var(--color-text-secondary); }
.label .idx { color: var(--color-text-tertiary); letter-spacing: 0.04em; }

/* ---------- one surface: ghost card (hairline ring, 12px, no fill; hover fills) ---------- */
.card { padding: var(--s-4); border: 0; border-radius: var(--r-lg); background: var(--color-surface); box-shadow: var(--shadow-border); }
.cards { gap: var(--s-3); }
.card-name { margin-block-start: var(--s-4); font-size: var(--text-title); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.card-desc { margin-block-start: var(--s-1); font-size: var(--text-ui); line-height: 1.5; text-wrap: balance; color: var(--color-text-secondary); }
.card-meta { color: var(--color-text-tertiary); }
.stat, .tag { font-size: var(--text-caption); color: var(--color-text-tertiary); }
.card-now .tag { color: var(--color-text-secondary); }
.dot { background: currentColor; opacity: 1; }

/* one tile: 32px, 6px radius, hairline, glyph 16px in the secondary grey; brightens with its card */
.tile { width: 2rem; height: 2rem; border-radius: var(--r-sm); background: var(--color-tile); box-shadow: var(--shadow-border); color: var(--color-text-secondary); transition: color 150ms var(--ease-out); }
.tile svg, .logo-mask { width: 1rem; height: 1rem; }
.tile-initial { font-size: var(--text-ui); font-weight: 500; color: var(--color-text-secondary); }

/* row card: same surface, one line (writing) */
.card-row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.5rem; }
.card-row .card-name { margin: 0; font-weight: 500; }
.card-row .arr { width: 1rem; height: 1rem; }

@media (hover: hover) {
  .card:hover { background: var(--color-surface-hover); box-shadow: var(--shadow-border-hover); }
  .card:hover .tile, .card:hover .arr { color: var(--color-text); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .card-row:hover .arr-in { translate: 2px 0; } }
.card:focus-visible { outline-offset: 2px; border-radius: var(--r-lg); }
.card:focus-visible .tile, .card:focus-visible .arr { color: var(--color-text); }

/* small controls share the small radius */
.cmdk-btn, .icon-btn, .wrow { border-radius: var(--r-sm); }
.cmdk-btn kbd, .cmdk kbd { border-radius: 4px; border-color: var(--color-border-strong); }
.cmdk-panel { border-radius: var(--r-lg); }
.cmdk-item { border-radius: var(--r-sm); }

/* ---------- ending: links → art → quote + pause, one block on the column ---------- */
.links { margin-block-start: var(--gap-section); font-size: var(--text-caption); }
footer.sis .sis-in { grid-template-columns: minmax(0, 1fr) 2.5rem; padding-block: var(--s-3) var(--s-8); }
footer.sis .sis-q { margin: 0; justify-self: start; text-align: start; font-size: var(--text-caption); color: var(--color-text-tertiary); text-wrap: balance; }
footer.sis .sis-pause { color: var(--color-text-tertiary); }
@media (hover: hover) { footer.sis .sis-pause:hover { color: var(--color-text); } }

/* post + writing pages on the same scale */
.post h1 { font-size: var(--text-display); letter-spacing: -0.03em; }
.post p:not(.meta) { font-size: var(--text-body); }

@media (max-width: 40rem) {
  :root { --gap-section: var(--s-7); --text-body: 1.0625rem; --text-display: 2.25rem; }
  .sec, .links { margin-block-start: var(--gap-section); }
  footer.sis .sis-in { padding-block: var(--s-3) var(--s-7); }
  footer.sis .sis-q { padding: 0; }
}
@media (max-width: 40rem) { .card-desc { text-wrap: pretty; } }