/* Osobní web Martina Hejna · značka K1 · tmavý vzhled výchozí, světlý podle nastavení zařízení
   Prémiová vrstva (28. 9. 2026): jemné přechody mezi sekcemi, vystínované panely, mosazná tlačítka, hover v menu. */

@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader.fe8a475b3a.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-italic.3ed9747d74.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans.0fd33b6516.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
/* Náhradní písma s dorovnanou metrikou, aby se text při načítání nehýbal */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; }

:root {
  color-scheme: dark light;
  --serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* tmavý vzhled */
  --bg: #0F1D18; --night: #0A1511; --card: #142720; --emer: #1E3B30;
  --ink: #EDE8DC; --muted: #A7B2A9; --acc: #C8A465; --acc-hover: #E0C184;
  --line: rgba(237, 232, 220, 0.12); --line-strong: rgba(237, 232, 220, 0.24);
  --field: rgba(4, 10, 8, 0.38); --err: #F0A195;
  --glow: rgba(200, 164, 101, 0.09); --glow-2: rgba(46, 94, 76, 0.45);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 42%, rgba(255, 255, 255, 0));
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -32px rgba(0, 0, 0, 0.75), 0 12px 24px -16px rgba(0, 0, 0, 0.5);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px -36px rgba(0, 0, 0, 0.85), 0 16px 32px -18px rgba(0, 0, 0, 0.55);
  --seam: rgba(0, 0, 0, 0.28);
  --hover: rgba(237, 232, 220, 0.06);
  --hdr-shadow: 0 16px 36px -24px rgba(0, 0, 0, 0.7);
  /* mosaz: tlačítka a akcenty (stejné v obou vzhledech) */
  --brass: linear-gradient(135deg, #F2DDAA 0%, #D6B26F 40%, #B48C46 100%);
  --brass-line: linear-gradient(90deg, rgba(200, 164, 101, 0), #C8A465 50%, rgba(200, 164, 101, 0));
  /* úvod je vždy světlý (obloha) */
  --sky: #E4E9F2; --sky-ink: #0F1D18; --sky-muted: #4A5E54; --sky-acc: #6E5420;
  --pad: clamp(24px, 5vw, 72px);
  --sec: clamp(72px, 9vw, 128px);
  --radius: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F3EFE4; --night: #EAE3D2; --card: #FBF8F1;
    --ink: #0F1D18; --muted: #4A5E54; --acc: #6E5420; --acc-hover: #0F1D18;
    --line: rgba(15, 29, 24, 0.12); --line-strong: rgba(15, 29, 24, 0.24);
    --field: #FFFDF8; --err: #A3372A;
    --glow: rgba(200, 164, 101, 0.16); --glow-2: rgba(30, 59, 48, 0.07);
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%);
    --shadow-1: 0 1px 2px rgba(58, 44, 15, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 28px 56px -34px rgba(58, 44, 15, 0.45), 0 10px 20px -14px rgba(58, 44, 15, 0.22);
    --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 38px 70px -36px rgba(58, 44, 15, 0.55), 0 14px 28px -16px rgba(58, 44, 15, 0.28);
    --seam: rgba(80, 60, 20, 0.07);
    --hover: rgba(15, 29, 24, 0.05);
    --hdr-shadow: 0 14px 30px -24px rgba(58, 44, 15, 0.45);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 112px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.1875rem/1.55 var(--serif); font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
@media (max-width: 43.74875em) { body { font-size: 1.0625rem; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.3em; text-decoration-thickness: 1px; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
a:hover { color: var(--acc-hover); }
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 4px; }
.hero :focus-visible, .site-header :focus-visible { outline-color: var(--sky-acc); }
::selection { background: var(--acc); color: var(--bg); }

.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--sky-ink); color: var(--sky); padding: 12px 18px; font: 600 0.9375rem var(--sans); border-radius: 999px; text-decoration: none; }
.skip:focus { top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- tlačítka ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 0.9375rem/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; isolation: isolate;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, background-position 0.6s var(--ease); }
.btn-arrow { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn--primary { color: #16130C; background: var(--brass); background-size: 170% 170%; background-position: 0% 0%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(90, 64, 20, 0.35), 0 12px 26px -12px rgba(150, 110, 40, 0.75), 0 2px 5px -1px rgba(20, 14, 4, 0.25); }
.btn--primary:hover { color: #16130C; background-position: 100% 100%; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(90, 64, 20, 0.35), 0 18px 34px -14px rgba(150, 110, 40, 0.85), 0 3px 8px -2px rgba(20, 14, 4, 0.3); }
.btn--primary:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(80, 56, 16, 0.35), 0 4px 10px -6px rgba(150, 110, 40, 0.6); }
.btn--ghost { color: var(--sky-ink); background: rgba(255, 255, 255, 0.42); border-color: rgba(15, 29, 24, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 8px 20px -14px rgba(15, 29, 24, 0.45); }
.btn--ghost:hover { color: var(--sky-ink); background: rgba(255, 255, 255, 0.7); border-color: rgba(15, 29, 24, 0.36); transform: translateY(-2px); }
.btn[disabled] { opacity: 0.72; cursor: progress; transform: none; }
.hero .btn:focus-visible, .btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.hero .btn:focus-visible { outline-color: var(--sky-acc); }

/* ---------- pomocné prvky ---------- */
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--pad); }
.eyebrow { font: 600 0.75rem/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }
.sec-title { font-size: clamp(2.125rem, 2.2vw + 1.125rem, 3rem); line-height: 1.08; letter-spacing: -0.01em; margin-top: 16px; }
.sec-head .lede { margin-top: 20px; color: var(--muted); max-width: 30em; }
.label { display: block; font: 600 0.6875rem/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); margin-bottom: 6px; }
.num { color: var(--acc); font-size: 1.12em; }
.divider { display: flex; align-items: center; }
.divider span { flex: 1; height: 1px; background: var(--line); }
.divider span:first-child { background: linear-gradient(90deg, transparent, var(--line-strong)); }
.divider span:last-child { background: linear-gradient(90deg, var(--line-strong), transparent); }
.divider svg { flex: none; width: 24px; height: 24px; color: var(--line-strong); }
.divider .dot { fill: var(--acc); }
.split { display: grid; gap: 40px; }
@media (min-width: 68.75em) { .split { grid-template-columns: 360px minmax(0, 1fr); gap: 96px; align-items: start; } }
/* Společný vzhled panelů: jemný lesk shora, mosazná linka, měkký stín */
.card, .quote, .qgroup, .now-list li, .links-list a, .pager a, .form, .form-done {
  position: relative; background: var(--sheen), var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.card::before, .quote::before, .qgroup::before, .form::before, .form-done::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: var(--brass-line); opacity: 0.8; pointer-events: none; }

/* ---------- hlavička ---------- */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 10; color: var(--sky-ink); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 96px; }
.site-header .logo { height: 48px; width: auto; }
.site-header .home { display: block; flex: none; color: inherit; transition: opacity 0.2s ease; }
.site-header .home:hover { opacity: 0.8; }
.mh-acc { fill: var(--sky-acc); }
.nav-desktop { display: none; align-items: center; gap: 2px; font: 500 0.875rem/1 var(--sans); }
/* Jemný hover: světlá „pilulka“ pod položkou a mosazná linka, která se rozběhne od středu */
.nav-desktop > a { position: relative; text-decoration: none; padding: 12px 13px; border-radius: 999px; white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.2s ease; }
.nav-desktop > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 1.5px; border-radius: 2px; background: var(--sky-acc);
  transform: scaleX(0); transform-origin: 50% 50%; transition: transform 0.35s var(--ease); }
.nav-desktop > a:hover { background: rgba(15, 29, 24, 0.07); color: var(--sky-ink); }
.nav-desktop > a:hover::after, .nav-desktop > a[aria-current="page"]::after { transform: scaleX(1); }
.langs { display: flex; gap: 6px; font: 500 0.875rem/1 var(--sans); }
.langs a { text-decoration: none; color: var(--sky-muted); padding: 10px 8px; border-radius: 999px; transition: background-color 0.25s ease, color 0.2s ease; }
.langs a:hover { background: rgba(15, 29, 24, 0.07); color: var(--sky-ink); }
.langs a[aria-current="true"] { color: var(--sky-acc); text-decoration: underline; text-underline-offset: 7px; }
.nav-desktop .langs { margin-left: 14px; padding-left: 16px; border-left: 1px solid rgba(15, 29, 24, 0.18); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font: 500 0.9375rem/1 var(--sans); height: 44px; padding: 0 20px; display: flex; align-items: center; border: 1px solid var(--sky-muted); border-radius: 22px;
  background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 0.25s ease; }
.menu summary:hover { background: rgba(255, 255, 255, 0.6); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .close { display: none; }
.menu[open] summary .open { display: none; }
.menu[open] summary .close { display: inline; }
.menu-panel { position: absolute; right: 0; top: 56px; width: min(320px, calc(100vw - 40px)); background: linear-gradient(180deg, #FBF8F1, #F3EFE4); color: var(--sky-ink); border-radius: 16px; padding: 12px 20px 16px;
  border: 1px solid rgba(15, 29, 24, 0.08); box-shadow: 0 30px 60px -24px rgba(10, 21, 17, 0.45), 0 10px 20px -12px rgba(10, 21, 17, 0.25); }
.menu-panel nav a { display: block; padding: 12px 0; font: 500 1rem/1.3 var(--sans); text-decoration: none; border-bottom: 1px solid rgba(15, 29, 24, 0.1); transition: padding-left 0.25s var(--ease), color 0.2s ease; }
.menu-panel nav a:hover { padding-left: 6px; color: var(--sky-acc); }
.menu-panel .langs { padding-top: 10px; }
@media (min-width: 80em) { .nav-desktop { display: flex; } .menu { display: none; } }
/* Užší notebooky: položky menu blíž k sobě, aby se celé menu vešlo ve všech jazycích stejně
   (přepnutí jazyka pak nemění záhlaví). */
@media (min-width: 80em) and (max-width: 89.99875em) {
  .nav-desktop > a { padding-inline: 9px; }
  .nav-desktop > a::after { left: 9px; right: 9px; }
  .nav-desktop .langs { margin-left: 8px; padding-left: 10px; }
}
@media (max-width: 43.74875em) { .site-header .bar { height: 76px; } .site-header .logo { height: 46.5px; } }
/* Nejmenší telefony (320 px): menší logo a tlačítko Menu, fakty v úvodu se smí zalomit. */
/* Velké písmo nastavené v prohlížeči na úzké obrazovce (při výchozích 16 px jen pod 320 px šířky):
   dlouhá slova se zalomí a tlačítka mohou mít dva řádky, aby nic nepřeteklo do strany. */
@media (max-width: 19.99em) { body { overflow-wrap: anywhere; } .btn { white-space: normal; text-align: center; max-width: 100%; line-height: 1.15; } }
@media (max-width: 22.49875em) { .site-header .logo { height: 38px; } .menu summary { padding: 0 14px; } .hero p.facts span { white-space: normal; } }

/* ---------- úvod ---------- */
.hero { position: relative; background: var(--sky); color: var(--sky-ink); }
.hero-media { position: relative; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero h1 { font-size: clamp(1.875rem, 1.9vw + 1.125rem, 2.875rem); line-height: 1.14; letter-spacing: -0.005em; text-wrap: pretty; }
.hero h1 .soft { color: var(--sky-muted); }
.hero .body { max-width: 34em; }
.hero .facts span { white-space: nowrap; }
.hero .facts { font: 600 0.75rem/1.7 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-acc); }
.hero .links { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.hero-text { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 68.75em) {
  /* Úvod roste s textem (větší písmo, nízká okna notebooků); fotka ho vždy celý pokryje. */
  .hero { min-height: clamp(760px, 100svh, 960px); display: grid; }
  .hero-media { position: absolute; inset: 0; overflow: hidden; }
  .hero-media img { object-position: 100% 0; }
  /* Jemný závoj oblohy pod textem a stín na spodním okraji */
  .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(228, 233, 242, 0.78) 0%, rgba(228, 233, 242, 0.42) 32%, rgba(228, 233, 242, 0) 56%),
                linear-gradient(0deg, rgba(10, 21, 17, 0.16) 0%, rgba(10, 21, 17, 0) 22%); }
  /* Text začíná vždy ve stejné výšce, ať je nadpis v jakémkoli jazyce jakkoli dlouhý (nadpis při přepnutí jazyka neposkakuje). */
  .hero .wrap { position: relative; width: 100%; display: flex; align-items: flex-start; padding-block: clamp(150px, 19svh, 190px) 72px; }
  .hero-text { width: min(620px, 46%); }
}
@media (max-width: 68.74875em) {
  .hero-media { aspect-ratio: 16 / 10; }
  .hero-media img { object-position: 86% 0; }
  .hero-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(0deg, #F3EFE4, rgba(243, 239, 228, 0)); pointer-events: none; }
  .hero .wrap { background: #F3EFE4; padding-block: 40px 64px; }
  .hero-text { gap: 26px; max-width: 640px; }
}
@media (max-width: 43.74875em) {
  /* Na telefonu nižší fotka a řádek s fakty až pod tlačítky: nadpis, text i Napište mi jsou blíž začátku stránky. */
  .hero-media { aspect-ratio: 4 / 3; max-height: 420px; }
  .hero-media img { object-position: 50% 10%; }
  .hero .wrap { padding-block: 20px 56px; }
  .hero-text { gap: 20px; }
  .hero .facts { order: 5; }
  .hero .facts { font-size: 0.6875rem; }
  .hero .links .btn { flex: 1 1 auto; }
}

/* ---------- sekce: vrstvené přechody místo plochých ploch ---------- */
.section { padding-block: var(--sec); position: relative; isolation: isolate;
  background: radial-gradient(1100px 520px at 100% 0%, var(--glow), transparent 62%), radial-gradient(900px 520px at 0% 100%, var(--glow-2), transparent 65%), var(--bg); }
.section--night { background: radial-gradient(1000px 520px at 0% 0%, var(--glow-2), transparent 62%), radial-gradient(900px 480px at 100% 100%, var(--glow), transparent 60%), var(--night); }
/* Stín na švu mezi sekcemi */
.section::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 140px; background: linear-gradient(180deg, var(--seam), transparent); pointer-events: none; z-index: -1; }
.hero + .section::before, .sub main > .section:first-child::before { display: none; }
.section--tight-top { padding-top: 32px; }
.section--band { background: radial-gradient(1000px 560px at 88% 0%, rgba(200, 164, 101, 0.16), transparent 60%), radial-gradient(900px 520px at 0% 100%, rgba(8, 18, 14, 0.45), transparent 62%), linear-gradient(160deg, #22463A 0%, #1B3A2F 48%, #152F26 100%);
  color: #EDE8DC; --ink: #EDE8DC; --muted: #B3BDB5; --acc: #D2B072; --acc-hover: #E9CB8E; --line: rgba(237, 232, 220, 0.16); --line-strong: rgba(237, 232, 220, 0.3);
  --card: rgba(9, 22, 17, 0.32); --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%); --seam: rgba(0, 0, 0, 0.3);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 60px -32px rgba(0, 0, 0, 0.6), 0 12px 24px -16px rgba(0, 0, 0, 0.4); }

/* Teď */
.now { display: grid; gap: 40px; }
@media (min-width: 90em) { .now { grid-template-columns: 360px minmax(0, 1fr) 400px; gap: 72px; align-items: start; } }
@media (min-width: 43.75em) and (max-width: 89.99875em) { .now { grid-template-columns: minmax(0, 1fr) minmax(280px, 36%); gap: 40px 56px; } .now .sec-head { grid-column: 1 / -1; } }
.now-list { display: flex; flex-direction: column; gap: 14px; }
.now-list li { padding: 22px 26px 22px 30px; font-size: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem); max-width: 34em; box-shadow: var(--shadow-1); }
.now-list li::after { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--brass); }
.now .updated { margin-top: 20px; color: var(--muted); }
/* Nad čím teď přemýšlím: otevřená otázka s pozvánkou k rozhovoru */
.think { position: relative; margin-top: 24px; max-width: 34em; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: radial-gradient(420px 220px at 100% 0%, var(--glow), transparent 70%), var(--sheen), var(--card); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3); }
.think::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: var(--brass-line); }
.think-q { font-size: clamp(1.3125rem, 0.7vw + 1.0625rem, 1.625rem); line-height: 1.3; font-style: italic; }
.think .btn { margin-top: 6px; }
.now picture img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-3); }
@media (max-width: 43.74875em) { .now picture { order: -1; } .now .sec-head { order: -2; } .now-list li { padding: 18px 20px 18px 24px; } }

/* Má cesta */
.chapters { border-bottom: 1px solid var(--line); margin-top: clamp(32px, 4vw, 56px); }
.chapter { display: grid; gap: 16px; padding-block: clamp(32px, 3.4vw, 48px); border-top: 1px solid var(--line); }
@media (min-width: 68.75em) { .chapter { grid-template-columns: 360px minmax(0, 1fr); gap: 96px; } }
.chapter h3, .chapter h2 { font-size: clamp(1.625rem, 0.5vw + 1.375rem, 1.875rem); line-height: 1.15; margin-top: 8px; }
.chapter .role { font: 500 0.875rem/1.5 var(--sans); color: var(--muted); margin-top: 8px; }
.chapter .text { display: flex; flex-direction: column; gap: 18px; max-width: 40em; }
/* Časová osa: přerušovaná čára jako běh hráčky na tréninkové tabuli, kolečko u každé kapitoly */
.timeline .chapter { --mt: clamp(32px, 3.4vw, 48px); position: relative; padding-left: 36px; }
.timeline .chapter::before { content: ""; position: absolute; left: 0; top: calc(var(--mt) + 3px); width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--acc); background: var(--bg); z-index: 1;
  box-shadow: 0 0 0 4px var(--glow); }
.timeline .chapter:first-child::before { background: var(--brass); border-color: transparent; }
.timeline .chapter:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: calc(var(--mt) + 20px); bottom: calc(-1 * var(--mt) - 3px); border-left: 1.5px dashed var(--acc); opacity: 0.55; }
.season { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheen), var(--card); box-shadow: var(--shadow-1); font-size: 1.0625rem; }
@media (min-width: 43.75em) { .season { grid-template-columns: 96px minmax(0, 1fr); gap: 24px; } }
.season b { font: 600 0.875rem/1.9 var(--sans); color: var(--acc); }

/* Mé hřiště */
.cards { display: grid; gap: 28px; }
@media (min-width: 56.25em) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.card { display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 2.4vw, 36px); font-size: 1.0625rem; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.card h3, .card h2 { font-size: clamp(1.5rem, 0.4vw + 1.3125rem, 1.75rem); line-height: 1.2; }
.card .marker { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #16130C; background: var(--brass); font: 600 0.875rem/1 var(--sans);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 16px -8px rgba(150, 110, 40, 0.7); }
.card > div > p + p { margin-top: 14px; }
/* Lichý počet karet: poslední přes obě kolonky, text zůstává čitelně úzký */
@media (min-width: 56.25em) { .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; } .cards > .card:last-child:nth-child(odd) p { max-width: 40em; } }

/* Čemu věřím */
.quotes { display: grid; gap: 28px; }
@media (min-width: 56.25em) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.quote { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 2.6vw, 40px); overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.quote:hover { transform: translateY(-4px); }
.quote blockquote { font-style: italic; font-size: clamp(1.625rem, 0.8vw + 1.25rem, 2.125rem); line-height: 1.2; position: relative; }
.quote p { font-size: 1.0625rem; color: var(--muted); max-width: 30em; }
.quote figcaption { font: 600 0.6875rem/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); margin-top: auto; }
.translated { margin-top: 16px; font: 500 0.8125rem/1.5 var(--sans); color: var(--muted); }

/* Rozhovory */
.links-list { display: flex; flex-direction: column; gap: 14px; }
.links-list a { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px; text-decoration: none; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease; }
.links-list a:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.links-list .t { font-size: clamp(1.375rem, 0.5vw + 1.1875rem, 1.75rem); line-height: 1.25; }
.links-list .tx { display: flex; flex-direction: column; gap: 10px; }
.links-list .s { font-size: 1.0625rem; line-height: 1.5; color: var(--muted); max-width: 38em; }
.links-list .m { font: 500 0.875rem/1.4 var(--sans); color: var(--acc); flex: none; }
.links-list .m span { display: inline-block; transition: transform 0.3s var(--ease); }
.links-list a:hover .m span { transform: translateX(4px); }
@media (min-width: 56.25em) { .links-list a { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 40px; padding: 30px 34px; } }

/* Kvalifikace */
.quals { display: grid; gap: 28px; }
@media (min-width: 43.75em) { .quals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.qgroup { padding: clamp(24px, 2.2vw, 32px); }
.qgroup .eyebrow { display: flex; align-items: center; gap: 12px; }
.qicon { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  background: var(--glow); box-shadow: inset 0 0 0 1px var(--line-strong); }
.qgroup ul { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.qgroup li { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.qgroup .n { font-size: 1.125rem; line-height: 1.35; }
.qgroup .w { font: 500 0.875rem/1.45 var(--sans); color: var(--muted); }

/* ---------- kontakt ---------- */
.contact-grid { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 68.75em) { .contact-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.contact .inner { position: relative; container-type: inline-size; display: flex; flex-direction: column; gap: clamp(22px, 2vw, 30px); max-width: 640px; }
.contact .lead { font-size: clamp(1.375rem, 1vw + 1rem, 1.875rem); line-height: 1.25; }
.contact .text { color: var(--muted); max-width: 32em; }
.contact .after { font: 500 0.9375rem/1.5 var(--sans); color: var(--muted); }
.contact .li { color: var(--ink); text-decoration-color: var(--acc); white-space: nowrap; }
/* Textový odkaz pod obsahem sekce (na celou stránku Teď, na web FUN fáze). */
.more-link { margin-top: 18px; font: 500 0.9375rem/1.5 var(--sans); }
.more-link a { color: var(--ink); text-decoration-color: var(--acc); text-underline-offset: 3px; }
.more-link a span { display: inline-block; color: var(--acc); transition: transform 0.3s var(--ease); }
.more-link a:hover span { transform: translateX(4px); }
.sec-head .more-link { margin-top: 14px; }
/* Fotka ve středovém kruhu s půlicí čarou: stejná geometrie jako znak K1 */
.contact-photo, .page-circle { position: relative; padding: 10px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--night); box-shadow: var(--shadow-2); }
.contact-photo img, .page-circle img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
.contact-photo { width: min(220px, 60vw); }
.contact-photo::before, .contact-photo::after { content: ""; position: absolute; top: 50%; width: 100vw; border-top: 1px solid var(--line); }
.contact-photo::before { right: 100%; } .contact-photo::after { left: 100%; }
/* Ve dvou sloupcích končí čára za fotkou na okraji textového sloupce, ne pod formulářem */
@media (min-width: 68.75em) { .contact-photo::after { width: calc(100cqw - 100%); } }
.contact { overflow: hidden; }
.page-circle { width: min(280px, calc(100% - 64px)); margin: clamp(28px, 3vw, 44px) 0 0 32px; border-color: var(--acc); background: transparent; }
.page-circle::before, .page-circle::after { content: ""; position: absolute; top: 50%; width: 28px; border-top: 1.5px solid var(--acc); }
.page-circle::before { right: 100%; } .page-circle::after { left: 100%; }

/* Formulář */
.form { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; box-shadow: var(--shadow-3); }
.fields { display: grid; gap: 18px 20px; }
@media (min-width: 43.75em) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--wide { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font: 600 0.875rem/1.3 var(--sans); color: var(--ink); }
.field .opt { font-weight: 500; color: var(--muted); }
.field .hint { font: 500 0.8125rem/1.4 var(--sans); color: var(--muted); order: 2; }
.field .err { order: 3; }
.field input, .field textarea { width: 100%; font: 500 1rem/1.5 var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--line-strong); border-radius: 12px; padding: 13px 16px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); transition: border-color 0.2s ease, box-shadow 0.25s var(--ease), background-color 0.2s ease; appearance: none; -webkit-appearance: none; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--acc); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 4px var(--glow), 0 0 0 1px var(--acc); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field .err { font: 600 0.84375rem/1.4 var(--sans); color: var(--err); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.form-foot .privacy { flex: 1 1 260px; font: 500 0.84375rem/1.5 var(--sans); color: var(--muted); }
.form-status:empty { display: none; }
.form-status.is-error { font: 600 0.875rem/1.5 var(--sans); color: var(--err); }
.form.is-sending .btn-arrow { animation: nudge 0.9s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.form-done { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-3); outline: none; }
.form-done .done-title { font-size: clamp(1.5rem, 1vw + 1.125rem, 2rem); line-height: 1.2; }
.form-done p + p { color: var(--muted); }

/* Patička */
.site-footer { position: relative; background: var(--night); padding-block: 48px; font: 500 0.875rem/1.4 var(--sans); }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--brass-line); opacity: 0.6; }
.site-footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.site-footer .logo { height: 48px; width: auto; }
.site-footer .mh-acc { fill: var(--acc); }
.site-footer .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; color: var(--muted); }
.site-footer .langs a { color: var(--muted); }
.site-footer .langs a:hover { background: var(--hover); color: var(--ink); }
.site-footer .langs a[aria-current="true"] { color: var(--acc); }
.site-footer .legal-link { color: var(--muted); text-decoration: none; padding: 10px 0; }
.site-footer .legal-link:hover, .site-footer .legal-link[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--acc); }
.site-footer .up { color: var(--ink); text-decoration: none; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); transition: background-color 0.25s ease, border-color 0.25s ease; }
.site-footer .up:hover { background: var(--hover); border-color: var(--line-strong); color: var(--ink); }

/* ---------- stránky položek menu a stránka 404: záhlaví na tmavém (světlém) pozadí ---------- */
.sub { min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); }
.sub main { flex: 1; }
/* Záhlaví podstránek zůstává nahoře, průsvitné s rozmazaným pozadím; po posunu dostane stín. */
.sub .site-header { position: sticky; top: 0; z-index: 20; color: var(--ink); background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px); border-bottom: 1px solid transparent; transition: box-shadow 0.35s var(--ease), border-color 0.35s ease; }
.scrolled .sub .site-header { border-bottom-color: var(--line); box-shadow: var(--hdr-shadow); }
.sub .mh-acc { fill: var(--acc); }
.sub .langs a { color: var(--muted); }
.sub .langs a:hover, .sub .nav-desktop > a:hover { background: var(--hover); color: var(--ink); }
.sub .langs a[aria-current="true"] { color: var(--acc); }
.sub .nav-desktop .langs { border-left-color: var(--line-strong); }
.sub .nav-desktop > a::after { background: var(--brass); }
.sub .site-header :focus-visible { outline-color: var(--acc); }
.sub .menu summary { border-color: var(--line-strong); background: var(--hover); }
.sub .menu summary:hover { background: var(--line); }
/* Panel menu je vždy světlý: odkazy a obrys fokusu v barvách oblohy. */
.sub .menu-panel .langs a { color: var(--sky-muted); }
.sub .menu-panel .langs a[aria-current="true"] { color: var(--sky-acc); }
.sub .menu-panel :focus-visible { outline-color: var(--sky-acc); }
/* Záhlaví navazuje barvou na první sekci stránky. */
.tone-night .site-header { background: color-mix(in srgb, var(--night) 84%, transparent); }
.tone-band .site-header { background: #1E3B30; --ink: #EDE8DC; --muted: #B3BDB5; --acc: #D2B072; --acc-hover: #E9CB8E; --line: rgba(237, 232, 220, 0.16); --line-strong: rgba(237, 232, 220, 0.3); --hover: rgba(237, 232, 220, 0.08); }
.menu-panel nav a[aria-current="page"] { font-weight: 600; color: var(--sky-acc); }
/* Sekce jako hlavní obsah stránky */
.sub main > .section:first-child { padding-top: clamp(32px, 4vw, 64px); }
.page-title { font-size: clamp(2.625rem, 3.2vw + 1.375rem, 4.5rem); line-height: 1.04; letter-spacing: -0.015em; }

/* Ochrana osobních údajů: úzký sloupec textu */
.legal .wrap { max-width: calc(46em + 2 * var(--pad)); }
.legal .page-title { overflow-wrap: break-word; }
.legal .lead { margin-top: 20px; font-size: clamp(1.25rem, 0.6vw + 1.0625rem, 1.5rem); line-height: 1.35; }
.legal h2 { font-size: clamp(1.375rem, 0.4vw + 1.1875rem, 1.625rem); line-height: 1.2; margin-top: clamp(32px, 3vw, 44px); }
.legal h2 + p { margin-top: 10px; color: var(--muted); }
.legal .updated { margin-top: clamp(36px, 3vw, 48px); color: var(--muted); }
.form-foot .privacy a { color: var(--ink); text-decoration-color: var(--acc); }

/* Fotka stránky v levém sloupci */
.page-photo { margin-top: clamp(28px, 3vw, 40px); }
.page-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius); box-shadow: var(--shadow-3); }
@media (max-width: 68.74875em) { .page-photo { max-width: 640px; } .page-photo img { aspect-ratio: 3 / 2; } }
@media (min-width: 68.75em) and (min-height: 51.25em) { .sub .split > .sec-head { position: sticky; top: 128px; } }

/* Předchozí a další stránka */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-block: clamp(40px, 5vw, 72px); }
.pager a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; padding: 22px 24px; box-shadow: var(--shadow-1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease; }
.pager a:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.pager .next { grid-column: 2; align-items: flex-end; text-align: right; }
.pager small { font: 600 0.6875rem/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }
.pager .t { font-size: clamp(1.375rem, 1vw + 1rem, 1.875rem); line-height: 1.15; }

/* Rozcestník na úvodu */
#vic > .wrap > .eyebrow { margin-bottom: clamp(20px, 2.4vw, 32px); }
.idx { border-bottom: 1px solid var(--line); }
.idx-row { position: relative; display: grid; gap: 10px; padding-block: clamp(26px, 2.6vw, 38px); border-top: 1px solid var(--line); }
/* Při najetí se pod řádkem rozsvítí jemná plocha přesahující do okraje, text zůstává zarovnaný s nadpisem */
.idx-row::before { content: ""; position: absolute; inset: 6px calc(-1 * clamp(10px, 1.4vw, 22px)); border-radius: 14px; background: var(--hover); opacity: 0; transition: opacity 0.35s var(--ease); z-index: -1; pointer-events: none; }
@media (min-width: 56.25em) { .idx-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) 44px; gap: 32px; align-items: baseline; } }
@media (min-width: 68.75em) { .idx-row { grid-template-columns: 338px minmax(0, 1fr) 44px; gap: 40px; } }
.idx-row:hover::before { opacity: 1; }
.idx-row h3 { font-size: clamp(1.625rem, 0.9vw + 1.1875rem, 2.25rem); line-height: 1.12; }
.idx-row h3 a { text-decoration: none; }
.idx-row h3 a::after { content: ""; position: absolute; inset: 0; }
.idx-row ul { display: flex; flex-direction: column; gap: 4px; font-size: 1.0625rem; line-height: 1.45; color: var(--muted); }
.idx-row--quotes ul { font-style: italic; }
.idx-row .go { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; font: 500 1.25rem/1 var(--sans); color: var(--acc); justify-self: end; align-self: center;
  border: 1px solid var(--line-strong); transition: transform 0.35s var(--ease), background 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
@media (min-width: 56.25em) { .idx-row .go { display: grid; } }
.idx-row:hover .go { transform: translateX(4px); background: var(--brass); color: #16130C; border-color: transparent; }

/* ---------- stránka 404 a výsledek formuláře ---------- */
.nf main { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-block: 48px 96px; }
.nf .mark { width: min(280px, 60vw); height: auto; color: var(--line-strong); }
.nf .mark .mh-acc { fill: var(--acc); }
.nf h1 { font-size: clamp(2.125rem, 2.2vw + 1.125rem, 3rem); line-height: 1.1; }
.nf p { color: var(--muted); max-width: 32em; }
.nf .back { align-self: flex-start; }

/* ---------- pohyb: jemné odkrytí úvodu a sekcí ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Úvod se animuje jen při příchodu na web, ne při přechodu mezi stránkami nebo jazyky. */
  html:not(.js-nav) .hero-text > * { animation: rise 0.9s var(--ease) both; }
  html:not(.js-nav) .hero-text > *:nth-child(2) { animation-delay: 0.08s; }
  html:not(.js-nav) .hero-text > *:nth-child(3) { animation-delay: 0.16s; }
  html:not(.js-nav) .hero-text > *:nth-child(4) { animation-delay: 0.24s; }
  /* Plynulý přechod mezi stránkami (Chrome, Edge, Safari 18.2+): záhlaví zůstane na místě, obsah se jemně prolne. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.26s; }
  ::view-transition-group(site-header) { animation-duration: 0.26s; }
  .reveal { opacity: 0; }
  .reveal.in { opacity: 1; animation: rise 0.8s var(--ease) backwards; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media print {
  .site-header, .hero-media, .divider, .pager, .idx-row .go, .form, .contact-photo { display: none; }
  body, .section, .section--night, .section--band, .site-footer { background: #fff; color: #000; }
  .card, .quote, .qgroup, .now-list li, .links-list a { box-shadow: none; background: #fff; }
  .reveal { opacity: 1 !important; }
}