/* ==========================================================================
   Skin — Fanout-style look layered over the base components.
   Monochrome ink, grotesk text, IBM Plex Mono for every label/meta line,
   Departure Mono for the wordmark and big numerals, small radii, hairlines.
   Loaded last so it only overrides; delete this file to get the old look.
   ========================================================================== */

/* ---------- fonts (vendored, OFL — works offline) ---------- */
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Book.woff2) format("woff2"); font-weight: 350; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Roman.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-SemiBold.woff2) format("woff2"); font-weight: 550 600; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Bold.woff2) format("woff2"); font-weight: 650 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-500.woff2) format("woff2"); font-weight: 500 550; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Departure Mono"; src: url(../fonts/DepartureMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- base type ---------- */
body { letter-spacing: 0; line-height: 1.5; }
h1, h2, h3, h4, h5 { font-weight: 500; letter-spacing: -0.01em; }
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
a { color: var(--ink); }
a:hover { text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--ink); color: var(--ground); }
kbd { font-family: var(--mono); border-radius: var(--r-xs); box-shadow: none; }

/* every small uppercase label becomes a quiet mono meta line */
.eyebrow, .lv, .note-t, .code-lang, .p-group, .foot-col h2,
.tcard .tcard-track, .tcard .tcard-mins, .stage-track h4, .obj .obj-h, .rail-sec .rail-h,
.pager small, .reflink .rk, .ctl label, .lab-out .lo-l, .refcard .rc-meta {
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.eyebrow { font-size: var(--fs-fine); color: var(--ink-3); margin-bottom: 12px; }
.eyebrow::before { content: "// "; color: var(--ink-4); }

/* ---------- chrome ---------- */
.chrome {
  background: var(--veil);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.brand-mark { color: var(--ink); }
.brand-name { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: 0; }
.nav a { font-size: var(--fs-small); color: var(--ink-3); border-radius: var(--r-sm); }
.nav a:hover { background: var(--ground-deep); }
.nav a[aria-current="page"] { font-weight: 500; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.tool { border-radius: var(--r-sm); border-color: var(--line-2); font-family: var(--mono); font-size: var(--fs-fine); }
.tool:hover { background: var(--ground-deep); }
.chrome-progress > span { background: var(--ink); }

/* ---------- controls ---------- */
.btn { border-radius: var(--r-sm); font-weight: 500; letter-spacing: 0; background: var(--surface); border-color: var(--line-2); }
.btn:hover { background: var(--ground-deep); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink); filter: none; opacity: .86; }
.btn-ghost { background: transparent; }
.seg, .seg button { border-radius: var(--r-sm); }
.seg button { font-family: var(--mono); }
.seg button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--line-2); }
.field, .quiz-opt, .p-item { border-radius: var(--r-sm); }
.field:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.switch input:checked + .track { background: var(--ink); }
.switch input:checked + .track::after { background: var(--ground); }

/* pills: squarer, mono */
.pill { border-radius: var(--r-xs); font-family: var(--mono); font-weight: 400; letter-spacing: 0; background: var(--surface-sunk); }

/* ---------- cards & surfaces ---------- */
.card { border-radius: var(--r-md); border-color: var(--line-2); box-shadow: none; }
a.card:hover { transform: none; border-color: var(--line-strong); box-shadow: var(--lift-2); }
.card h3, .card .card-t { font-weight: 500; letter-spacing: -0.005em; }
.tcard::before { width: 2px; opacity: 1; border-radius: 0; top: 0; bottom: 0; }
a.tcard:hover::before { top: 0; bottom: 0; }
.tcard { overflow: hidden; }

.stats, .kv, .table-wrap, .num, .fig-box, .quiz, .to-card, .note, .code { border-color: var(--line-2); }
.stat b, .num-v { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.stat span, .num-l, .num-n { font-family: var(--mono); }
.meter, .meter > span { border-radius: 0; }
.meter { height: 4px; }

/* callouts: flat, mono title, no tint for the default */
.note { border-left-width: 2px; }
.note-principle { font-family: var(--sans); font-size: 1.08rem; font-weight: 400; border-left-width: 2px; }
.note-principle .note-t { font-family: var(--mono); }

/* code: a touch warmer mono block */
.code { background: var(--surface); font-size: var(--fs-fine); }
.prose code, .topic-body code { border-radius: var(--r-xs); font-size: .84em; }
table.t thead th, table.t thead td { font-family: var(--mono); font-weight: 400; }
.step::before { font-family: var(--mono); font-weight: 500; border-radius: var(--r-xs); }

/* ---------- home ---------- */
/* faint engineering-paper grid behind the hero, fading out toward the bottom */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 30%, transparent 75%);
}
.hero h1 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
.hero h1 .dim { color: var(--ink-4); }
.hero-sub { letter-spacing: 0; color: var(--ink-3); }
.hero-fine { font-family: var(--mono); font-size: var(--fs-fine); }
.hero-canvas { opacity: .35; }
.feat-txt h3 { font-weight: 500; letter-spacing: -0.015em; }
.feat-txt li::before { border-radius: 0; background: var(--ink); }

/* ---------- footer, palette, toasts ---------- */
.foot { background: var(--ground); }
.foot-mark { font-family: var(--display); font-weight: 400; }
.palette-box { border-radius: var(--r-lg); }
.palette-field input { letter-spacing: 0; }
.p-item .p-s { font-family: var(--mono); }
.toast { border-radius: var(--r-sm); font-family: var(--mono); font-weight: 400; }

/* ---------- small fixes for monochrome accent ---------- */
.rub-dot[aria-pressed="true"] { color: var(--accent-ink); }
.toc a[data-active="1"] { border-left-color: var(--ink); }