/* ============================================================
   DESIGN TOKENS — warm editorial
   ============================================================ */
:root {
  /* Paper & linen surfaces — each section band gets its own tint */
  --paper: #FDFBF7;
  --greige: #F1EDE4;
  --card: #FFFFFF;
  --line: #E5E2DA;
  --line-on-greige: #DCD5C6;
  --line-crisp: #DFDACD;

  /* Deep charcoal slate — dark grounded band for the booking anchor.
     --slate-3 only exists for dark mode's --card (see DARK MODE below);
     nothing in the light theme or the booking band uses it directly. */
  --slate: #1C1E26;
  --slate-2: #262935;
  --slate-3: #363B48;
  --slate-ink: #F4F2EC;
  --slate-mid: #C2C4CC;
  --slate-lo: #90939E;

  /* Ink scale */
  --ink-hi: #242528;
  --ink-mid: #55534E;
  --ink-lo: #8B877D;

  /* Primary accent — warm royal amber. Reserved for action.
     --accent-text is the deepened shade used when amber must read as text. */
  --accent: #E0A458;
  --accent-deep: #C98D42;
  --accent-ink: #2A2118;
  --accent-text: #A8642E;
  --accent-wash: #FAF1E3;

  /* Secondary accent — deep muted sage. For checks and callouts. */
  --accent2: #4A5D4E;
  --accent2-deep: #3A4A3E;
  --accent2-soft: #A9B8AA;

  /* PT Serif + PT Sans (ParaType), chosen by Olga on 2026-09-28: drawn for
     Cyrillic first, so Russian, Finnish and English all look native. Both
     come in 400 and 700 only; 500/600 in the rules below resolve to those. */
  --serif: 'PT Serif', Georgia, serif;
  --sans: 'PT Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.06);

  --radius-card: 12px;
  --nav-h: 74px;

  interpolate-size: allow-keywords; /* smooth pure-CSS accordion sizing */
}

/* ============================================================
   DARK MODE — reuses the slate band's colors for the whole page
   instead of inventing a new palette. The booking section already
   proves cream-on-slate, amber-on-slate and sage-on-slate all read
   fine, so the same combination becomes the page-wide dark theme.

   Light mode tells surfaces apart with three shades (paper, greige,
   card are each a different near-white) — dark mode needs the same
   three-way distinction in near-blacks, which is why --card gets its
   own subtly lighter step (--slate-3).

   Toggled by JS setting data-theme="dark" on <html> (see script.js).
   ============================================================ */
:root[data-theme="dark"] {
  --paper: var(--slate);
  --greige: var(--slate-2);
  --card: var(--slate-3);
  --line: rgba(244, 242, 236, 0.16);
  --line-on-greige: rgba(244, 242, 236, 0.2);
  --line-crisp: rgba(244, 242, 236, 0.18);

  --ink-hi: var(--slate-ink);
  --ink-mid: var(--slate-mid);
  --ink-lo: var(--slate-lo);

  /* --accent-text (a deepened amber brown) is meant for text on cream paper;
     on slate it would go nearly invisible, so text-context amber falls back
     to the same plain --accent already used for text on the slate band. */
  --accent-text: var(--accent);
  --accent-wash: rgba(224, 164, 88, 0.12);

  /* Same problem, same fix, for sage: the dark sage meant for cream paper
     reads as a murky grey on slate, so fall back to the light sage. */
  --accent2: var(--accent2-soft);
  --accent2-deep: var(--accent2-soft);

  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.4);
}

/* In dark mode the page itself is slate, so the slate bands need the next
   step up to still read as a band. */
:root[data-theme="dark"] .cta-band { background: var(--slate-2); }
:root[data-theme="dark"] .booking-shell { background: var(--slate-3); }

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }

body {
  background: var(--paper);
  color: var(--ink-hi);
  font-family: var(--sans);
  font-size: 17px; /* PT Sans runs smaller than Inter did */
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }

img { max-width: 100%; display: block; }

.wrap { width: min(1180px, 92vw); margin-inline: auto; }
.wrap.narrow { width: min(760px, 92vw); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Keyboard users can jump past the nav. Invisible until focused. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Text still waiting for Olga's own words: [[...]] in the content files.
   Deliberately loud, so nobody mistakes it for finished copy. */
.placeholder {
  font-style: normal;
  color: var(--ink-mid);
  background: var(--accent-wash);
  outline: 1px dashed var(--accent-deep);
  outline-offset: 1px;
  border-radius: 3px;
  padding: 1px 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============================================================
   SCROLL REVEAL — one-time entrance, transform + opacity only
   ============================================================ */
/* Hidden only when JavaScript is running (the inline script in <head> adds
   .js), so with scripts blocked or failed the page is still readable. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ============================================================
   NAV — brand, page links, language links, theme, Book button.
   Below 880px the page and language links fold into the
   <details> menu, which opens without any JavaScript.
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.brand {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-hi);
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
  margin-left: auto;
}
.nav-links a,
.menu-panel > a {
  color: var(--ink-mid);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.2s linear;
}
.nav-links a:hover { color: var(--accent-text); }
.nav-links a[aria-current="page"] {
  color: var(--ink-hi);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch { display: flex; gap: 2px; }
.lang-switch a {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-lo);
  text-decoration: none;
  padding: 6px 7px;
  border-radius: 4px;
}
.lang-switch a:hover { color: var(--accent-text); }
.lang-switch a[aria-current="true"] { color: var(--ink-hi); background: var(--greige); }

.icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink-hi);
  cursor: pointer;
  list-style: none;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.icon-btn::-webkit-details-marker { display: none; }

/* Only one of the two icons shows at a time — whichever matches the
   theme currently in effect (sun while light, moon while dark). */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.2s linear;
}
.nav-cta:hover { background: var(--accent-deep); }
.nav-cta .short { display: none; }

.menu { display: none; position: relative; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 230px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
}
.menu-panel > a { padding: 10px 12px; border-radius: 6px; font-size: 1rem; }
.menu-panel > a:hover { background: var(--greige); color: var(--ink-hi); }
.menu-panel > a[aria-current="page"] { color: var(--ink-hi); background: var(--greige); }
.menu-langs {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.menu-langs a {
  flex: 1;
  text-align: center;
  font-size: 0.82rem;
  padding: 8px 4px;
  border-radius: 6px;
  color: var(--ink-mid);
  text-decoration: none;
}
.menu-langs a[aria-current="true"] { background: var(--greige); color: var(--ink-hi); font-weight: 600; }

/* ============================================================
   BUTTONS & LINKS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 6px;
  transition: background 0.2s linear, transform 0.2s linear;
}
.btn-primary:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
}
.btn-primary svg { transition: transform 0.2s linear; }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-ghost,
.text-link {
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-hi);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 0.2s linear, border-color 0.2s linear;
}
.btn-ghost:hover,
.text-link:hover { color: var(--accent-text); border-color: var(--accent-deep); }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero {
  padding: calc(var(--nav-h) + clamp(56px, 9vh, 110px)) 0 clamp(64px, 9vh, 110px);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 26px;
}
.hero h1 .accent-line {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-text);
  padding-bottom: 0.08em;
}
.hero-sub {
  font-size: clamp(1.04rem, 1.35vw, 1.15rem);
  color: var(--ink-mid);
  max-width: 48ch;
  margin-bottom: 38px;
}
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.portrait-frame {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--greige);
  box-shadow: var(--shadow-card);
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Static card anchored to the hero portrait ("€0 · First trial lesson"). */
.portrait-zone { position: relative; }
.float-chip {
  position: absolute;
  bottom: 8%;
  left: -8%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 22px;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card-hover);
}
.float-chip .num {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.float-chip .lbl {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  line-height: 1.5;
  max-width: 16ch;
  /* but never narrower than its longest word: in Finnish that is
     TUTUSTUMISPUHELU, which ran out of the card at 16ch */
  min-width: min-content;
}

/* ============================================================
   INNER PAGE HEAD (about, lessons, book, 404)
   ============================================================ */
.page-head {
  padding: calc(var(--nav-h) + clamp(48px, 8vh, 96px)) 0 clamp(56px, 8vh, 96px);
}
.page-head h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.lede-prose { font-size: clamp(1.04rem, 1.3vw, 1.14rem); color: var(--ink-mid); max-width: 56ch; }
.not-found .hero-actions { margin-top: 36px; }

/* ============================================================
   SHARED SECTION SCAFFOLD
   ============================================================ */
.section { padding: clamp(72px, 11vh, 128px) 0; }
.section.tight { padding: clamp(56px, 8vh, 88px) 0; }
.band-greige { background: var(--greige); }
.band-card { background: var(--card); border-block: 1px solid var(--line); }

/* Heading on the left, content on the right. Collapses to one column on
   narrow screens. Used for most sections, instead of a row of cards. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.split-head h2,
h2.split-head,
.cta-band h2,
.booking-shell h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
}
.split-head .lede { margin-top: 14px; color: var(--ink-mid); max-width: 36ch; }

.prose { color: var(--ink-mid); max-width: 62ch; }
.prose p + p { margin-top: 1em; }
.prose strong { color: var(--ink-hi); }
.prose.small { font-size: 0.9rem; margin-top: 18px; }
.band-greige .prose { font-size: 1.06rem; }

/* Title/description rows separated by hairlines. */
.rows { display: grid; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(12px, 3vw, 40px);
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.band-greige .row { border-color: var(--line-on-greige); }
.row:last-child { border-bottom: 1px solid var(--line); }
.band-greige .row:last-child { border-color: var(--line-on-greige); }
.row dt {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}
.row dd { color: var(--ink-mid); }

/* Short list with a drawn sage tick (no icon font, no emoji). */
.ticks { list-style: none; display: grid; gap: 14px; }
.ticks li {
  position: relative;
  padding-left: 34px;
  font-size: 1.05rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.42em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent2);
  border-bottom: 2px solid var(--accent2);
  transform: rotate(-45deg);
}

/* ============================================================
   EDITORIAL DETAILS — italic amber words inside headings (<em> in
   the content files), and a quiet italic line above a heading.
   The line is only used where the heading needs it for context
   ("How I teach", "About me"). It used to be the uppercase,
   letter-spaced sage label with a rule, on nearly every section,
   and on 2026-10-03 Pavel cut it for reading as AI-made. Don't
   bring that style back, and don't add the line above a heading
   that already says the same thing.
   ============================================================ */
.kicker {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-mid);
  margin-bottom: 10px;
}

h1 em,
h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-text);
}
.cta-band h2 em { color: var(--accent); }

/* Centred or left-aligned section intro: kicker, heading, one line. */
.sec-head { max-width: 640px; margin-bottom: clamp(40px, 6vh, 64px); }
.sec-head.centered { margin-inline: auto; text-align: center; }
.sec-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.14;
  margin-bottom: 14px;
}
.sec-head p { color: var(--ink-mid); font-size: 1.04rem; }

/* ============================================================
   HOME — trust strip under the hero
   ============================================================ */
.trust {
  border-block: 1px solid var(--line);
  background: var(--card);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.trust-item {
  padding: 30px clamp(16px, 3vw, 44px);
  text-align: center;
}
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.trust-item .t-title {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 600;
  font-style: italic;
  margin-bottom: 4px;
}
.trust-item .t-sub {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-lo);
}

/* ============================================================
   HOME — lesson cards, each with a small Russian caption
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
}
.pillar {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 40px) clamp(24px, 2.8vw, 36px);
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--line-on-greige);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s linear, box-shadow 0.2s linear;
}
/* The cards in a row share their three rows (title, text, Russian
   caption), so a title that wraps to two lines no longer starts only its
   own card's text a line lower. */
.pillars .pillar {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.pillar h3 {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 12px;
}
.pillar h3::before {
  content: "";
  display: block;
  width: 30px; height: 1px;
  margin-bottom: 20px;
  background: var(--accent);
}
.pillar p { font-size: 0.96rem; color: var(--ink-mid); }
.pillar .ru {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent2);
  transition: color 0.2s linear;
}
.pillar:hover .ru { color: var(--accent2-deep); }

/* ============================================================
   PRICE CARDS — home and lessons. Deliberately no "most popular"
   badge: there's nothing to base one on yet.
   ============================================================ */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
}
.tier {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 32px);
  border-radius: var(--radius-card);
  background: var(--paper);
  border: 1px solid var(--line-crisp);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s linear, box-shadow 0.2s linear, border-color 0.2s linear;
}
.tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--accent); }
.tier h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: lining-nums;
}
.tier .t-tag { font-size: 0.86rem; color: var(--ink-lo); margin: 4px 0 26px; }
.tier .amount {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier .per { font-size: 0.86rem; color: var(--ink-lo); margin-top: 8px; }
.tier-cta {
  margin-top: 28px;
  text-align: center;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 13px 18px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--ink-hi);
  transition: border-color 0.2s linear, background 0.2s linear, color 0.2s linear;
}
.tier-cta:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-wash); }
.tiers-foot { margin: 28px auto 0; text-align: center; max-width: 62ch; }
/* Names the format the cards below belong to ("Individual lessons"), so a
   second format such as a mini-group can sit under its own label later. */
.tiers-label {
  margin-bottom: 18px;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ink-mid);
}
.tiers + .tiers-label { margin-top: clamp(40px, 6vh, 64px); }

/* ============================================================
   CTA BAND — the dark slate close at the bottom of most pages
   ============================================================ */
.cta-band {
  background: var(--slate);
  padding: clamp(72px, 11vh, 120px) 0;
  text-align: center;
}
.cta-inner { max-width: 640px; }
.cta-band h2 { color: var(--slate-ink); margin-bottom: 14px; }
.cta-band p { color: var(--slate-mid); margin-bottom: 32px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.about-grid .portrait-frame {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}
.about-section { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.about-section h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* ============================================================
   FAQ — pure-CSS smooth accordions
   ============================================================ */
.faq-list { display: grid; gap: 12px; max-width: 780px; margin-inline: auto; }
.faq {
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.2s linear;
}
.faq:hover { border-color: var(--line-crisp); }
.faq[open] { border-color: var(--accent); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  user-select: none;
}
.faq summary h3 {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .toggle {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s linear, border-color 0.2s linear, color 0.2s linear;
  color: var(--ink-mid);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
}
.faq[open] summary .toggle { transform: rotate(45deg); border-color: var(--accent); color: var(--accent-text); }
.faq::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease-out, content-visibility 0.3s allow-discrete;
}
.faq[open]::details-content { block-size: auto; }
.faq .a {
  padding: 0 24px 22px;
  font-size: 0.96rem;
  color: var(--ink-mid);
  max-width: 64ch;
}

/* ============================================================
   BOOK — steps, then the full-width dark slate form band
   ============================================================ */
.small-h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.steps { list-style: none; counter-reset: step; display: grid; gap: 18px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 48px;
  color: var(--ink-mid);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: lining-nums;
}

#booking { background: var(--slate); }
.booking-shell {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(32px, 4.5vw, 56px);
  border-radius: var(--radius-card);
  background: var(--slate-2);
  border: 1px solid rgba(244, 242, 236, 0.08);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.45);
}
.booking-shell h2 {
  color: var(--slate-ink);
  text-align: center;
  margin-bottom: 30px;
}

/* Booking form — posts to Web3Forms, no backend of our own */
.booking-form {
  display: grid;
  gap: 16px;
  max-width: 520px;
  margin-inline: auto;
}
.booking-form .field { display: grid; gap: 7px; }
.booking-form label,
.booking-form .label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
}
.booking-form input,
.booking-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--slate-ink);
  background: var(--slate);
  border: 1px solid rgba(244, 242, 236, 0.14);
  border-radius: 6px;
  transition: border-color 0.2s linear, box-shadow 0.2s linear;
}
.booking-form textarea { resize: vertical; min-height: 118px; }
.booking-form input::placeholder,
.booking-form textarea::placeholder { color: var(--slate-lo); opacity: 0.7; }
.booking-form input:focus-visible,
.booking-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 164, 88, 0.18);
}
/* Direct child only — the submit button. The slot chips are buttons too, and
   they need their borders. */
.booking-form > button { border: none; cursor: pointer; margin-top: 4px; justify-content: center; }
.booking-form > button[disabled] { opacity: 0.6; cursor: default; }

/* Slot picker — placeholder availability, built and revealed by script.js.
   Chips deliberately reuse the input treatment above so the two read as one
   form: same surface, same hairline border, same amber focus ring. */
.slotpicker { display: grid; gap: 16px; }
.slot-hint {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--slate-lo);
}
.label-note {
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

/* One calendar week at a time, paged with the arrows. */
.weeknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.weeklabel {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--slate-ink);
}
.weekarrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--slate-ink);
  background: var(--slate);
  border: 1px solid rgba(244, 242, 236, 0.14);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s linear, opacity 0.2s linear;
}
.weekarrow:hover:not([disabled]) { border-color: rgba(244, 242, 236, 0.36); }
.weekarrow:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 164, 88, 0.18);
}
/* Greyed out at the ends of the range — still focusable order, but inert. */
.weekarrow[disabled] { opacity: 0.26; cursor: default; }

/* Weekday headings and the day chips share one 6-column track so they line up.
   Sunday has no column because Olga doesn't teach then. */
.dayhead,
.daygrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.dayhead span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-lo);
  text-align: center;
}
/* Placeholder for a weekday with nothing on offer — holds the column open so
   the dates stay under the right headings. */
.daycell-empty {
  border: 1px dashed rgba(244, 242, 236, 0.09);
  border-radius: 6px;
}

.chipwrap { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  font-family: var(--sans);
  color: var(--slate-ink);
  background: var(--slate);
  border: 1px solid rgba(244, 242, 236, 0.14);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s linear, background 0.2s linear, color 0.2s linear;
}
.chip:hover { border-color: rgba(244, 242, 236, 0.36); }
.chip:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 164, 88, 0.18);
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* The week label above carries the month, so a chip only needs its number. */
.chip-day {
  padding: 10px 0 11px;
  font-family: var(--serif);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: lining-nums; /* Cormorant's default old-style digits look undersized in a chip */
}

.chip-time {
  padding: 9px 15px;
  font-size: 0.9rem;
  font-weight: 500;
}

.slot-confirm {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--accent2-soft);
  min-height: 1.4em;
}

/* Honeypot — bots fill it, humans never see it */
.booking-form .botcheck {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Inline submit feedback, replaces a redirect to a third-party thank-you page */
.form-status {
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: 1.4em;
  text-align: center;
}
.form-status.ok { color: var(--accent2-soft); }
.form-status.err { color: var(--accent); }
.form-privacy { margin-top: 18px; font-size: 0.8rem; color: var(--slate-lo); text-align: center; }

/* ============================================================
   HOME additions (2026-09-28): the note under the hero buttons, the
   three-card method row, and second buttons in the slate CTA band
   ============================================================ */
.hero-sub p + p { margin-top: 0.8em; }

/* Cyrillic italic (Cormorant then, PT Serif now) is a cursive hand: т reads
   as m, п as n, which looked odd in the logo. On the
   Russian pages the accent words and the italic labels
   keep their colour but stand upright. Latin italic stays as designed.
   (The brand surname was italic too until 2026-10-03, now plain.) */
:lang(ru) h1 em,
:lang(ru) h2 em,
:lang(ru) .hero h1 .accent-line,
:lang(ru) .trust-item .t-title,
:lang(ru) .tiers-label { font-style: normal; }
.hero-note { margin-top: 18px; font-size: 0.86rem; color: var(--ink-lo); max-width: 48ch; }
.pillars.three { grid-template-columns: repeat(3, 1fr); }
.after-list { margin-top: 26px; }
.cta-actions { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.btn-on-slate {
  font-weight: 500;
  text-decoration: none;
  color: var(--slate-ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 0.2s linear;
}
.btn-on-slate:hover { color: var(--accent); }

/* The "not the right teacher" list: same drawn mark as .ticks, but a cross. */
.ticks.crosses li::before {
  width: 12px;
  height: 12px;
  top: 0.35em;
  border: none;
  transform: none;
  background:
    linear-gradient(45deg, transparent 45%, var(--accent-text) 45%, var(--accent-text) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--accent-text) 45%, var(--accent-text) 55%, transparent 55%);
}

/* ============================================================
   REELS — Olga's vertical videos beside a block of text.
   preload="none" + a poster, so nothing heavy loads until play.
   ============================================================ */
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.media-split.media-first { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); }
.media-split .split-head { margin-bottom: 18px; }
.reel { max-width: 320px; width: 100%; margin-inline: auto; }
.reel video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--greige);
  box-shadow: var(--shadow-card);
}
.reel figcaption { margin-top: 12px; font-size: 0.84rem; color: var(--ink-lo); text-align: center; }
.about-section .reel { margin-inline: 0; }

/* ============================================================
   TWO PATHS — "know your level" / "not sure", on lessons and book
   ============================================================ */
.paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
}
.path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 32px);
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--line-on-greige);
  box-shadow: var(--shadow-card);
}
.path h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.path .small-h2 { margin-bottom: 0; }
.path p { color: var(--ink-mid); }
.path .btn-primary,
.path .btn-ghost { margin-top: auto; }
.contact-list { list-style: none; display: grid; gap: 10px; margin-top: 22px; }

/* ============================================================
   LEGAL PAGES — lesson terms and privacy policy
   ============================================================ */
.legal-updated { font-size: 0.86rem; color: var(--ink-lo); margin-bottom: 18px; }
.legal { padding-top: 0; }
.legal-section { padding: 28px 0; border-top: 1px solid var(--line); }
.legal-section h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 12px;
}
.bullets { padding-left: 1.2em; display: grid; gap: 6px; }
.prose .bullets + p,
.prose p + .bullets { margin-top: 1em; }
.bullets li::marker { color: var(--accent-text); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  background: var(--greige);
  padding: 52px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
  align-items: start;
}
.footer .brand { font-size: 1.2rem; }
.footer .fine { font-size: 0.84rem; color: var(--ink-lo); margin-top: 6px; }
.footer-links,
.footer-langs { display: grid; gap: 8px; justify-items: start; }
.footer-links a,
.footer-langs a {
  font-size: 0.9rem;
  color: var(--ink-mid);
  text-decoration: none;
}
.footer-links a:hover,
.footer-langs a:hover { color: var(--accent-text); }
.footer-langs a[aria-current="true"] { color: var(--ink-hi); font-weight: 600; }
.footer .copyright {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line-on-greige);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  .nav-links,
  .lang-switch { display: none; }
  .menu { display: block; }
  .nav-tools { margin-left: auto; }

  .hero-grid,
  .about-grid,
  .split { grid-template-columns: 1fr; }
  .hero-grid { gap: 48px; }
  .hero .portrait-zone,
  .about-grid .portrait-frame { max-width: 400px; width: 100%; }
  .hero .portrait-zone { margin-inline: auto; }
  .float-chip { left: -4%; }
  .pillars,
  .pillars.three,
  .tiers,
  .paths,
  .media-split,
  .media-split.media-first,
  .trust-grid { grid-template-columns: 1fr; }
  .media-split.media-first .reel { order: 2; }
  .trust-item { padding: 20px 16px; }
  .trust-item + .trust-item { border-left: none; border-top: 1px solid var(--line); }
  .about-grid .portrait-frame { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :root { --nav-h: 64px; }
  .brand { font-size: 1.2rem; }
  .nav-tools { gap: 8px; }
  .nav-cta .long { display: none; }
  .nav-cta .short { display: inline; }
  .nav-cta { padding: 9px 12px; }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .float-chip { left: 12px; bottom: 12px; padding: 12px 16px; }
  .hero-actions { gap: 20px; }
  .hero .btn-primary,
  .cta-band .btn-primary { width: 100%; justify-content: center; }
  .booking-shell { padding: 28px 18px; }
  .booking-form input, .booking-form textarea { font-size: 16px; } /* stops iOS zoom-on-focus */
}