/* ==========================================================================
   Dominik Hinov - site styles
   Aesthetic: premium editorial. Source Sans 3 Light for display, Source Code Pro
   for metadata. No design-system package: plain CSS, tokens below.

   Rules this file follows
   - One accent (emerald), cool neutral greys. No gradients on text.
   - One radius: 8px (--r) for buttons, inputs, media, panels, tags.
     Documented exceptions, transitions only: section layers have a 32px arched top edge, and the
     Tutoring portal is a full pill (both echo the reference site, see js/motion.js).
   - Light by default (Dominik's preference), dark via [data-theme="dark"].
   - Motion animates transform / opacity only, never on a scroll listener,
     and is disabled under prefers-reduced-motion.
   - Z-index scale: sticky CV tabs 5, nav 10, menus 20, skip link 30. Nothing else is layered.
   - Scroll choreography (smooth scroll, line reveals, scrubbed parallax) lives in js/motion.js.
   ========================================================================== */

:root {
  --bg: #f6f7f6;
  --surface: #fcfdfc;
  --tint: #e9f2ed;               /* accent-tinted surface */
  --border: #dfe3e0;
  --border-strong: #858d88;   /* 3:1 on --surface, form-control edges */
  --text: #121614;
  --muted: #545e58;              /* 6.3:1 on --bg */
  --faint: #626b66;              /* 5.2:1 on --bg, metadata only */
  --accent: #0e7350;             /* 5.6:1 on --bg */
  --accent-hover: #0a5e41;
  --on-accent: #f6f7f6;
  --danger: #b42318;
  --dot: #cdd3cf;
  --shadow: 0 12px 32px -16px rgb(18 40 30 / 0.22);
  --edge-shadow: 0 -1px 0 var(--border), 0 -28px 56px -36px rgb(18 40 30 / 0.22);

  --font: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 8px;
  --maxw: 1240px;
  --gutter: 32px;
  --nav-h: 60px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0d100f;
  --surface: #131816;
  --tint: #13241c;
  --border: #252c29;
  --border-strong: #626d67;
  --text: #e6ebe8;
  --muted: #a0aaa4;
  --faint: #8a948e;
  --accent: #52c99c;
  --accent-hover: #74d8b2;
  --on-accent: #0d100f;
  --danger: #f97066;
  --dot: #2b3330;
  --shadow: 0 12px 32px -16px rgb(0 0 0 / 0.7);
  --edge-shadow: 0 -1px 0 var(--border), 0 -28px 56px -30px rgb(0 0 0 / 0.75);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance; }
h1, h2 { font-weight: 300; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* Skip link: hidden until focused with the keyboard (z-index 30, above the nav) */
.skip-link { position: absolute; left: var(--gutter); top: 12px; z-index: 30; padding: 10px 16px; border-radius: var(--r); background: var(--accent); color: var(--on-accent); font-weight: 600; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus-visible { transform: none; }
/* Touch: no double-tap zoom delay on controls; a soft accent tap flash instead of the default grey */
html { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 14%, transparent); }
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
.ph { font-size: 1.1em; line-height: 1; vertical-align: -0.12em; }

.container {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));   /* notch-safe in landscape */
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sections are separated by a container-width rule that draws in on arrival (see Motion) */
.section { position: relative; padding: 136px 0; background: var(--bg); }   /* opaque: covers the portrait that sinks into it */
.section::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--border);
  left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  transform-origin: left;
}
.section-title { font-size: clamp(2.25rem, 4.4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.06; max-width: 20ch; }
.section-lead { color: var(--muted); max-width: 56ch; margin-top: 20px; font-size: 1.125rem; }
.section-head { margin-bottom: 72px; }

/* Inline text link with an arrow icon */
.link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 500;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.link:hover { text-decoration-color: currentColor; }
.link .ph { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.link:hover .ph-arrow-right, .link:hover .ph-arrow-up-right { transform: translateX(3px); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px;
  font: 600 0.98rem/1 var(--font); letter-spacing: 0.005em; white-space: nowrap;
  border-radius: var(--r); border: 1px solid transparent; cursor: pointer;
  transition: border-color .3s ease, color .3s ease, transform .15s ease;
}
/* Hover: a fill sweeps in from the left (transform only), the arrow steps forward */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.btn:hover::before { transform: scaleX(1); }
.btn .ph { transition: transform .4s var(--ease); }
.btn:hover .ph-arrow-right, .btn:hover .ph-paper-plane-tilt { transform: translateX(3px); }
.btn:hover .ph-download-simple { transform: translateY(2px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary::before { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary::before { background: var(--tint); }
.btn-secondary:hover { border-color: var(--accent); }
.btn[disabled] { opacity: .6; cursor: progress; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border-radius: var(--r); border: 1px solid transparent; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 1.05rem;
  transition: color .2s ease, border-color .2s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--border); }
.icon-btn:active { transform: translateY(1px); }

.tag {
  display: inline-block; padding: 3px 9px;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.5;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav .container { height: 100%; display: flex; align-items: center; gap: 32px; }
.logo { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }
.nav-links { display: flex; gap: 8px; list-style: none; margin: 0 auto 0 16px; padding: 0; }
.nav-links a {
  position: relative; display: block; padding: 6px 10px;
  font-size: 0.95rem; color: var(--muted); white-space: nowrap;
  transition: color .25s ease;
}
/* Underline grows from the left on hover and stays on the section in view */
.nav-links a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
/* Reading-progress hairline under the nav (CSS scroll timeline; absent where unsupported) */
.nav .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.theme-toggle .ph-sun { display: none; }
[data-theme="dark"] .theme-toggle .ph-sun { display: inline; }
[data-theme="dark"] .theme-toggle .ph-moon { display: none; }
.menu-toggle { display: none; }

/* Language switcher (built by i18n.js) */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border-radius: var(--r); border: 1px solid transparent; background: transparent;
  color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 0.8125rem;
}
.lang-btn:hover, .lang-switch.open .lang-btn { color: var(--text); border-color: var(--border); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 168px;
  padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu button {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  padding: 8px 10px; border: 0; background: transparent; border-radius: 6px;
  font: 0.9rem var(--font); color: var(--text); cursor: pointer; text-align: left;
}
.lang-menu button:hover { background: var(--tint); }
.lang-menu small { font-family: var(--mono); color: var(--faint); }
.lang-menu [aria-checked="true"] { color: var(--accent); font-weight: 500; }

/* ---------- Hero ---------- */
.hero { padding: 56px 0 0; }
.hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.hero-copy { grid-column: 1 / span 7; align-self: start; padding-bottom: 120px; }
/* The portrait sinks below the hero into the About section, which is drawn on top of it:
   Dominik looks over the next section's (arched) top edge, and the drawing's frame-cut
   very bottom stays hidden behind it. (Grid items resolve % margins against their own column
   span, so -14% sinks the figure by about 12% of its height.) */
.hero-figure { grid-column: 8 / span 5; align-self: end; margin-bottom: -14%; }
.availability { position: relative; display: inline-flex; align-items: center; gap: 12px; color: var(--muted); margin-bottom: 36px; }
.availability::before {           /* real state: open for tutoring students */
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.availability::after {            /* slow ring around the status dot */
  content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; border: 1px solid var(--accent); opacity: 0;
}
.hero h1 { font-size: clamp(3.5rem, 9vw, 7.75rem); letter-spacing: -0.045em; line-height: 0.92; }
/* The name rises out of a mask; padding reserves room for Cyrillic descenders (Д) */
.mask { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mask > span { display: block; }
/* SplitText line masks (js/motion.js): room for descenders so g, y, p and Cyrillic д are never clipped */
[class*="line-mask"] { padding-bottom: 0.12em; margin-bottom: -0.12em; }
/* Lenis smooth scroll base rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.hero-lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--muted); max-width: 40ch; margin: 36px 0 44px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Portrait: no panel, fully opaque (no fades). The paper rim is removed in the image itself, so the
   ink outline is the edge. The drawing's straight frame-cut sides are hidden by painted shrubs in
   front of it (.hero-front, tools/front.py), and its bottom by the About section. */
.portrait { position: relative; aspect-ratio: 1000 / 1156; }
.portrait picture { position: absolute; inset: 0; display: block; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
/* Shrub strip: 1400x600 canvas, the portrait spans its middle 1000 units, so 140% wide from -20% */
.portrait .hero-front { inset: auto; left: -20%; bottom: 0; width: 140%; max-width: none; height: auto; object-fit: fill; }
:root[data-theme="dark"] .portrait .hero-front { opacity: 1; }   /* must stay opaque to hide the cut edges */
/* In dark mode the bright paper tones are eased slightly so the figure doesn't glow */
:root[data-theme="dark"] .portrait img:not(.art) { filter: brightness(0.88) saturate(0.95); }
/* Cover panel used by the reveal (scaled away with a transform; invisible when motion is off) */
.portrait::after, .featured-media::after {
  content: ""; position: absolute; inset: 0; background: var(--bg);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* ---------- About ---------- */
.about-body { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 56px; }
.about-body .col { grid-column: span 6; color: var(--muted); max-width: 56ch; }
.about-body strong { color: var(--text); font-weight: 600; }
.figures {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin: 96px 0 0; padding-top: 40px; border-top: 1px solid var(--border);
}
.figure .num { font-size: clamp(3rem, 5.6vw, 4.5rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.figure .label { color: var(--muted); font-size: 0.98rem; margin-top: 14px; max-width: 22ch; }

/* ---------- Projects: one featured + four entries ---------- */
.featured { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.featured-media { grid-column: 1 / span 7; position: relative; overflow: hidden; border-radius: var(--r); background: var(--tint); }
.featured-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.featured-body { grid-column: 9 / span 4; }
.featured-body h3 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); font-weight: 300; letter-spacing: -0.025em; margin: 16px 0 16px; }
.featured-body p { color: var(--muted); }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--faint); }
.entries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 64px; margin-top: 104px; }
.entry { padding: 36px 0 40px; border-top: 1px solid var(--border); }
.entry h3 { font-size: 1.4rem; font-weight: 400; letter-spacing: -0.015em; margin: 14px 0 10px; }
.entry p { color: var(--muted); margin-bottom: 14px; max-width: 52ch; }

/* ---------- CV: tabs + changelog timeline ---------- */
.cv-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
/* The tab bar sticks under the nav while the timeline is read (a quiet, CSS-only pin) */
.tabs { position: sticky; top: var(--nav-h); z-index: 5; background: var(--bg); display: flex; gap: 28px; border-bottom: 1px solid var(--border); margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.tab-btn {
  position: relative; padding: 12px 0; border: 0; background: none; cursor: pointer;
  font: 500 0.9375rem var(--font); color: var(--muted); white-space: nowrap;
}
.tab-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--text); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.tab-btn[aria-selected="true"] { color: var(--text); }
.tab-btn[aria-selected="true"]::after { transform: scaleX(1); }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: fade .35s ease both; }

.log-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 40px 0; }
.log-row + .log-row, .more .log-row:first-child { border-top: 1px solid var(--border); }
.log-row .when { color: var(--faint); padding-top: 3px; }
.log-row h3 { font-size: 1.3rem; font-weight: 400; letter-spacing: -0.01em; }
.log-row .org { color: var(--muted); font-size: 0.9375rem; margin-top: 4px; }
.log-row ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--muted); max-width: 70ch; }
.log-row li { margin-bottom: 6px; }
.log-row li::marker { color: var(--faint); }

.more { border-top: 1px solid var(--border); }
.more summary {
  list-style: none; cursor: pointer; padding: 20px 0; display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 500;
}
.more summary::-webkit-details-marker { display: none; }
.more summary .ph { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.more[open] summary .ph { transform: rotate(180deg); }

.skills-panel { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-top: 32px; }
.skills-panel > div:first-child { grid-column: span 5; }
.skills-panel > div:last-child { grid-column: 7 / span 6; }
.skills-panel h3 { font-size: 1.125rem; margin-bottom: 16px; }
.lang-levels { margin: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 12px; column-gap: 24px; }
.lang-levels dt { color: var(--text); }
.lang-levels dd { margin: 0; color: var(--faint); font-family: var(--mono); font-size: 0.8125rem; align-self: center; }
.key-skills { margin: 0; padding-left: 1.1em; color: var(--muted); columns: 2; column-gap: 32px; }
.key-skills li { margin-bottom: 8px; break-inside: avoid; }
.key-skills li::marker { color: var(--faint); }

/* ---------- Tutoring: subject bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cell {
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  padding: 32px; display: flex; flex-direction: column; gap: 10px;
}
.cell h3 { font-size: 1.125rem; }
.cell p { color: var(--muted); margin: 0; font-size: 0.96875rem; }
.cell .ph { font-size: 1.5rem; color: var(--accent); margin-bottom: 8px; }
.cell-exams { grid-column: span 2; grid-row: span 2; padding: 0; overflow: hidden; }
.cell-exams img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--tint); padding: 6% 10% 0; flex: 1 1 auto; min-height: 0; }
.cell-exams .cell-text { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.cell-exams h3 { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.02em; }
.cell-math { grid-column: span 2; background: var(--tint); border-color: transparent; }
.cell-debate { grid-column: span 2; background-color: var(--surface); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 14px 14px; }
.cell-chem { grid-column: span 2; }

.rates { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 96px; }
.rates-intro { grid-column: span 4; }
.rates-intro h3 { font-size: 2rem; font-weight: 300; letter-spacing: -0.025em; margin-bottom: 14px; }
.rates-intro p { color: var(--muted); margin-bottom: 24px; }
.rate-list { grid-column: 6 / span 7; margin: 0; padding: 0; list-style: none; }
.rate { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0; }
.rate + .rate { border-top: 1px solid var(--border); }
.rate h4 { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.rate p { margin: 4px 0 0; color: var(--muted); font-size: 0.9375rem; }
.rate .price { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rate .price small { color: var(--faint); font-size: 0.8125rem; margin-left: 6px; }

.faq { max-width: 760px; margin: 96px 0 0; }
.faq h3 { font-size: 2rem; font-weight: 300; letter-spacing: -0.025em; margin-bottom: 20px; }
.faq details { border-top: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 0; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ph { color: var(--faint); transition: transform .3s cubic-bezier(.16, 1, .3, 1); flex: none; }
.faq details[open] summary .ph { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin: -4px 0 22px; max-width: 62ch; }

/* ---------- Writing: index list ---------- */
.writing-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.post-list { border-bottom: 1px solid var(--border); }
.post-row {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px 48px; align-items: baseline;
  padding: 36px 0; border-top: 1px solid var(--border);
}
/* Hover: an accent rule runs along the row's top edge */
.post-row::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.post-row:hover::before { transform: scaleX(1); }
.post-row h3 { overflow-wrap: anywhere; font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 400; letter-spacing: -0.02em; transition: color .25s ease; }
.post-row h3 .ph { font-size: 0.8em; margin-left: 6px; opacity: 0; transform: translateX(-4px); display: inline-block; transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1); }
.post-row:hover h3 { color: var(--accent); }
.post-row:hover h3 .ph { opacity: 1; transform: none; }
.post-row p { overflow-wrap: anywhere; grid-column: 1; margin: 0; color: var(--muted); max-width: 64ch; }
.post-row .meta { grid-column: 2; grid-row: 1; color: var(--faint); white-space: nowrap; text-align: right; }
.post-row .tags { grid-column: 1; margin-top: 6px; }
.empty-state { padding: 48px 0; color: var(--muted); }
.empty-state strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 4px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.contact-info { grid-column: span 5; }
.contact-info .section-lead { margin-bottom: 40px; }
.contact-list { margin: 0; display: grid; gap: 20px; }
.contact-list div { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; }
.contact-list dt { grid-column: 2; color: var(--faint); font-family: var(--mono); font-size: 0.8125rem; }
.contact-list dd { grid-column: 2; margin: 0; }
.contact-list .ph { grid-row: span 2; color: var(--accent); font-size: 1.25rem; margin-top: 2px; }
.contact-list a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.contact-list a:hover { text-decoration-color: currentColor; }

.form { grid-column: 7 / span 6; display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.9375rem; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; font: 1rem/1.5 var(--font); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r);
  padding: 10px 12px; transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field .help { font-size: 0.875rem; color: var(--faint); }
.field .error { font-size: 0.875rem; color: var(--danger); display: none; }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }
.field.invalid .error { display: block; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-status { font-size: 0.9375rem; color: var(--muted); }
.form-status.ok { color: var(--accent); }
.form-status.err { color: var(--danger); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 32px 0 40px; color: var(--faint); font-size: 0.9rem; }
.footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.footer nav { display: flex; gap: 20px; align-items: center; }
.footer a:hover { color: var(--text); }

/* ---------- Blog page ---------- */
.page-head { padding-top: 72px; padding-bottom: 48px; }
.page-head h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); letter-spacing: -0.04em; line-height: 1; max-width: 16ch; }
.blog-tools { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 24px; align-items: end; margin-bottom: 32px; }
.search { display: grid; gap: 8px; }
.search label { font-size: 0.9375rem; font-weight: 500; }
.search .input-wrap { position: relative; }
.search .ph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search input {
  width: 100%; height: 44px; padding: 0 12px 0 38px; font: 1rem var(--font); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r);
}
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip {
  height: 32px; padding: 0 12px; border-radius: var(--r); cursor: pointer;
  font: 0.8125rem var(--mono); color: var(--muted);
  background: transparent; border: 1px solid var(--border);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

.article { max-width: 720px; margin: 0 auto; padding: 56px var(--gutter) 104px; }
.article .back { margin-bottom: 40px; }
.article h1 { overflow-wrap: anywhere; font-size: clamp(2.4rem, 5vw, 3.5rem); letter-spacing: -0.035em; line-height: 1.04; margin: 20px 0 20px; }
.article .lead { font-size: 1.1875rem; color: var(--muted); }
.notice { padding: 12px 16px; border-radius: var(--r); background: var(--tint); color: var(--text); font-size: 0.9375rem; }
.prose { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border); font-size: 1.0625rem; }
.prose h2 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 2em 0 0.5em; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose blockquote { margin: 2em 0; padding-left: 20px; border-left: 2px solid var(--accent); color: var(--text); font-size: 1.1875rem; }
.prose blockquote p { color: var(--text); }
.share { display: flex; align-items: center; gap: 4px; margin-top: 48px; color: var(--faint); }
.share span { margin-right: 8px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.pager a { display: grid; gap: 4px; }
.pager a:last-child:not(:first-child), .pager .next { text-align: right; justify-items: end; }
.pager small { color: var(--faint); font-family: var(--mono); font-size: 0.8125rem; }
.pager strong { font-weight: 500; transition: color .2s ease; }
.pager a:hover strong { color: var(--accent); }

/* ---------- Illustrations (assets/art) ----------
   Painted to match the portrait drawing: loose ink, watercolour washes, blue hatching.
   .art = any illustration (decorative, never interactive); .deco = positioned behind content.
   Dark mode inverts them (ink becomes pale lines, washes become deep tints) instead of
   letting dark ink vanish on a dark page. The portrait itself is never inverted. */
.art { display: block; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.deco { position: absolute; z-index: 0; }
:root[data-theme="dark"] .art { filter: invert(1) hue-rotate(180deg) saturate(0.75) brightness(0.95); opacity: 0.6; }
:root[data-theme="dark"] .cell-exams .cell-art { background: transparent; }   /* the inversion would turn the tint light */

.hero { position: relative; isolation: isolate; overflow-x: clip; }   /* the landscape may extend past the screen edge */
.hero > .container { position: relative; z-index: 1; }
.deco-landscape { right: 0; bottom: -28px; width: min(62vw, 1060px); }   /* Dominik stands in it */

#about > .container { position: relative; z-index: 1; }
/* Scales after the HK25 logo: five stacked layers on one 900-unit canvas (80 KB, loaded eagerly
   so the layers arrive together). The beam pivots at
   (450, 260); each pan hangs from a beam end 270 units from the pivot and is moved, not rotated,
   so it always hangs plumb. Default: tilted 7deg like the logo; js/motion.js rocks it with the
   scroll (-14deg to +14deg) and lets it sway and settle when scrolling stops. */
.deco-scales { position: relative; aspect-ratio: 1; }
/* About: in the right column under the skills, right-aligned. This part of the section stays on
   screen while About holds still for the next section, so the header can't cover the scales. */
.deco-scales-about { width: 210px; margin: 40px 0 0 auto; }
.deco-scales img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scales-beam { transform-origin: 50% 28.889%; transform: rotate(-7deg); }
.scales-pan-left { transform: translate(0.22%, 3.66%); }
.scales-pan-right { transform: translate(-0.22%, -3.66%); }

.featured { position: relative; isolation: isolate; }
.deco-wash { z-index: -1; left: -7%; top: -24%; width: 36%; }

.art-plant { width: 140px; margin-top: 40px; }
#contact { padding-bottom: 0; }
.art-horizon { width: 100%; max-width: 2000px; margin: 96px auto 0; }
:root[data-theme="dark"] .art-horizon { opacity: 0.45; }

.page-head { position: relative; }
.deco-scales-blog { position: absolute; top: 16px; right: var(--gutter); width: 170px; }

@media (max-width: 767px) {
  .deco-scales-blog, .deco-wash, .art-plant { display: none; }   /* phones: keep it calm */
  .deco-scales-about { width: 170px; margin: 32px auto 0; }
  .deco-landscape { width: 150vw; right: -30vw; bottom: -12px; }
  .art-horizon { margin-top: 56px; }
}

/* ---------- Section transitions (js/motion.js adds .layer at 768px and up) ----------
   Each layer is opaque and isolated so the next one can slide over it; the incoming
   top edge is a soft arch (static radius + hairline + tinted shadow, nothing animated). */
.layer { position: relative; isolation: isolate; background: var(--bg); }
.layer:not(.hero) { border-radius: 32px 32px 0 0; box-shadow: var(--edge-shadow); }
.has-gsap .layer.section::before { display: none; }   /* the arch replaces the drawn rule */
/* The section the portrait looks over always has the arched edge, also on phones and with
   reduced motion (where sections are not layered), so the figure is never cut by an invisible line */
.hero + .section:not(.layer) { border-radius: 24px 24px 0 0; box-shadow: var(--edge-shadow); }
.hero + .section::before { display: none; }

/* Portal before Tutoring: hidden unless the motion layer is running on a wide screen */
.portal { display: none; }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .has-gsap .portal { display: block; height: 100dvh; }
}
.portal-stage { position: relative; height: 100%; display: grid; place-items: center; overflow: hidden; }
.portal-pill { position: absolute; inset: 9vh 7vw; border-radius: 999px; background: url(../assets/art/portal-wash.webp) center / 100% 100% no-repeat; will-change: transform; }
:root[data-theme="dark"] .portal-pill { filter: invert(1) hue-rotate(180deg) saturate(0.75); opacity: 0.55; }
.portal-word {
  position: relative; margin: 0; color: var(--accent);
  font-size: clamp(4.5rem, 13vw, 11rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1;
  padding-bottom: 0.08em;   /* descender room for Cyrillic y, p and Czech diacritics */
}

/* ---------- Motion ----------
   Lightweight on purpose: CSS animations, CSS scroll timelines and one IntersectionObserver
   (main.js adds .in). Each effect and what it is for:
   - Hero: name rises out of a mask, then label, sentence, actions, portrait (reading order)
   - Section rule draws in from the left as each section arrives (marks the new chapter)
   - Content fades up once on arrival (hierarchy); featured images wipe open (storytelling)
   - Images drift a few pixels against the scroll (depth; GSAP in js/motion.js, CSS view timeline as fallback)
   - Nav hairline tracks reading progress (orientation, CSS scroll timeline)
   - Status dot ring pulses twice, then stops (real availability state; under 5s per WCAG 2.2.2)
   - Figures count up once when seen (draws the eye to the numbers)
   All of it is off under prefers-reduced-motion. */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-mask { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes uncover { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes drift { from { transform: translateY(-4%) scale(1.08); } to { transform: translateY(4%) scale(1.08); } }
@keyframes progress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .hero .enter { animation: rise 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
  .hero .mask > span { animation: rise-mask 1.2s var(--ease) both; animation-delay: 80ms; }
  .page-head h1, .article h1 { animation: rise 1s var(--ease) both; animation-delay: 80ms; }
  .hero-figure.enter .portrait::after { animation: uncover 1.4s var(--ease) both; animation-delay: 450ms; }
  .hero-done .hero .enter, .hero-done .hero .mask > span, .hero-done .hero-figure.enter .portrait::after { animation: none; }
  .availability::after { animation: ring 2.4s ease-out 2 1.6s; }

  .js .section::before { transform: scaleX(0); transition: transform 1.4s var(--ease); }
  .js .section.in::before { transform: scaleX(1); }

  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .featured .featured-media::after { transform: scaleX(1); transition: transform 1.4s var(--ease) .1s; }
  .js .featured.in .featured-media::after { transform: scaleX(0); }

  @supports (animation-timeline: view()) {
    html:not(.has-gsap) .featured-media img, html:not(.has-gsap) .cell-exams img {
      animation: drift linear both; animation-timeline: view(); animation-range: cover;
    }
  }
  @supports (animation-timeline: scroll()) {
    .nav .progress { animation: progress linear both; animation-timeline: scroll(root); }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}body.lang-fade main, body.lang-fade header { opacity: .35; transition: opacity .15s ease; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero-figure { grid-column: 8 / span 5; }
  .featured-body { grid-column: 8 / span 5; }
  .rates-intro { grid-column: span 12; }
  .rate-list { grid-column: span 12; }
  .blog-tools { grid-template-columns: 1fr; }
  .chips { justify-content: flex-start; }
}

@media (max-width: 899px) {
  .menu-toggle { display: inline-grid; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0; z-index: 20;
    flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 16px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; font-size: 1rem; }
}

/* Below 768px every multi-column layout collapses to one column */
@media (max-width: 767px) {
  :root { --gutter: 16px; --nav-h: 56px; }
  body { font-size: 17px; }
  .section { padding: 88px 0; }
  .section-head { margin-bottom: 48px; }
  .hero { min-height: 0; padding: 40px 0 0; }
  .hero-copy { padding-bottom: 8px; }
  .hero-lead { margin: 28px 0 36px; }
  .entries { gap: 0; }
  .figures { margin-top: 64px; }
  .hero-grid, .about-body, .featured, .contact-grid, .skills-panel, .rates { grid-template-columns: 1fr; }
  .hero-copy, .hero-figure, .about-body .col, .featured-media, .featured-body,
  .contact-info, .form, .skills-panel > div, .rates-intro, .rate-list { grid-column: 1 / -1 !important; }
  .hero-figure { width: 240px; justify-self: end; margin: 0 0 -32px; }   /* looks over About on phones too */
  .availability { margin-bottom: 20px; }
  .about-body { gap: 0; margin-top: 28px; }
  .figures { grid-template-columns: 1fr 1fr; row-gap: 32px; margin-top: 40px; }
  .entries { grid-template-columns: 1fr; margin-top: 48px; }
  .log-row { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .key-skills { columns: 1; }
  .bento { grid-template-columns: 1fr; }
  .cell, .cell-exams, .cell-math, .cell-debate, .cell-chem { grid-column: 1 / -1; grid-row: auto; }
  .rates { margin-top: 64px; }
  .faq { margin-top: 64px; }
  .post-row { grid-template-columns: 1fr; }
  .post-row .meta { grid-column: 1; grid-row: auto; text-align: left; order: -1; }
  .form-row { grid-template-columns: 1fr; }
  .contact-info { margin-bottom: 40px; }
  .blog-tools { grid-template-columns: 1fr; }
  .chips { justify-content: flex-start; }
  .page-head { padding-top: 48px; padding-bottom: 32px; }
  .pager { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell-exams, .cell-math { grid-column: span 2; }
  .cell-debate, .cell-chem { grid-column: span 1; }
  .cell-exams { grid-row: auto; }
  .cell-exams img { max-height: 280px; }
  .figures { grid-template-columns: repeat(2, 1fr); }
}