/* todorx.dev — "Broadsheet" design, recoloured with an orange accent
   (the design's cyan swapped out). On the light ground the accent is the
   deeper #c2410c so small accent text (tags, the Copy button) keeps 4.5:1.
   Tokens and component classes (.tag, .btn) come from the Claude Design
   Broadsheet system; the page classes below reproduce Todorx.dc.html's
   inline styles. Handwritten, no build step. */

/* Source Serif 4 (OFL), self-hosted. One variable file per subset serves
   both 400 and 600. Greek and Vietnamese subsets are not shipped. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/source-serif-4-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/source-serif-4-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-4-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-4-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-4-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-4-italic-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #c2410c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);
  --color-neutral-400: #bab6b6;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-accent-700: #9a3412;
  --font: "Source Serif 4", Georgia, serif;
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;
  --radius-sm: 1px;
  --radius-md: 2px;
  color-scheme: light dark;
}

/* Dark mode follows the device setting; no toggle. The page is inverted to
   ink ground and paper text, keeping the Broadsheet ramps' roles: each
   neutral step trades places with its mirror, and the accent becomes the
   brighter brand orange (#ff5e1e, lighter still on hover) to hold contrast
   on the dark ground. Every colour on the page reads these tokens, so this block is the
   whole theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #181716;
    --color-surface: #22201f;
    --color-text: #ebe8e6;
    --color-accent: #ff5e1e;
    --color-divider: color-mix(in srgb, #ebe8e6 16%, transparent);
    --color-neutral-400: #4a4646;
    --color-neutral-600: #9b9797;
    --color-neutral-700: #bab6b6;
    --color-neutral-800: #d7d3d3;
    --color-accent-700: #fdba74;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font); font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status-dot { animation: none !important; }
}

/* — Broadsheet components — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75);
}
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; font-family: var(--font); font-weight: 600; font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md);
}
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* — section rail — */
.rail {
  position: fixed; left: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: var(--space-2); z-index: 2;
}
.rail a { display: block; padding: var(--space-1) 0; }
.rail span {
  display: block; width: 3px; height: 12px; background: var(--color-neutral-400);
  border-radius: var(--radius-sm); transition: height .25s ease, background .25s ease;
}
.rail a[aria-current] span { height: 28px; background: var(--color-text); }

/* — page — */
main { max-width: 1080px; margin: 0 auto; padding: 0 clamp(40px, 8vw, 96px); }
.eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); }
.eyebrow-sm { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); }

.hero {
  min-height: 100vh; display: flex; flex-wrap: wrap; align-items: center; align-content: center;
  gap: var(--space-8) clamp(40px, 8vw, 120px); padding: var(--space-8) 0;
}
.hero-main { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.hero-main .eyebrow { color: var(--color-neutral-700); }
.hero h1 { font-size: clamp(56px, 8.5vw, 112px); line-height: .95; font-weight: 400; letter-spacing: -.02em; }
.lede { max-width: 30em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--color-neutral-800); text-wrap: pretty; }
.lede em { color: var(--color-text); }
.status { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 14px; color: var(--color-neutral-700); }
.status > span { display: flex; align-items: center; gap: var(--space-2); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); animation: pulse 2.4s ease-in-out infinite; }
.clock { font-variant-numeric: tabular-nums; }

.hero-aside { flex: 0 1 260px; display: flex; flex-direction: column; gap: var(--space-8); font-size: 15px; }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.strong { font-weight: 600; }
.muted { color: var(--color-neutral-700); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.links { display: flex; gap: var(--space-4); font-size: 14px; }

.section { display: flex; flex-wrap: wrap; gap: var(--space-6) clamp(40px, 8vw, 120px); padding: clamp(40px, 8vh, 80px) 0 clamp(80px, 14vh, 160px); }
.section-about { padding: clamp(80px, 14vh, 160px) 0; }
.section h2 { flex: 0 0 140px; font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); }
.section-body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }

.about-body { max-width: 36em; }
.about-lead { font-size: 22px; line-height: 1.5; text-wrap: pretty; }
.about-sub { font-size: 17px; line-height: 1.6; color: var(--color-neutral-700); text-wrap: pretty; }
.spoken { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 15px; color: var(--color-neutral-700); }

.projects { gap: var(--space-8); }
.project { display: flex; flex-direction: column; gap: var(--space-2); }
.project-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.project-name { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; }
.project-kind { font-size: 13px; font-style: italic; color: var(--color-neutral-600); }
.project-arrow { margin-left: auto; font-size: 16px; }
.project-desc { max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--color-neutral-700); text-wrap: pretty; }
.project-stack { font-size: 13px; color: var(--color-neutral-600); }

.job { display: flex; flex-direction: column; gap: var(--space-1); }
.job-title { font-size: 19px; }
.job-title span { color: var(--color-neutral-600); font-style: italic; }
.job-detail { font-size: 15px; color: var(--color-neutral-700); }

.contact { display: flex; flex-direction: column; gap: var(--space-6); padding: clamp(80px, 14vh, 160px) 0 var(--space-8); }
.contact-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); }
.email { font-size: clamp(28px, 4.5vw, 56px); line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.colophon {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  margin-top: clamp(80px, 12vh, 140px); font-size: 13px; color: var(--color-neutral-600);
}
.langs { display: flex; gap: var(--space-3); }
.langs a { color: var(--color-neutral-600); }
.langs a[aria-current] { color: var(--color-text); }
.langs a:hover { color: var(--color-accent-700); }

/* — 404 — */
.not-found { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); max-width: 36em; }
.not-found h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 400; letter-spacing: -.02em; }