/* =========================================================
   Peter Bielik — Enhancements + visual fixes (overrides)
   Loaded after site.css, so wins on tie.
   ========================================================= */

/* ─── 0. UNIFIED DARK-CONTEXT TREATMENTS ───────────────
   The base CSS scopes dark-mode treatments to `.dark`.
   These sections are dark too but never carry that class.
   Cover them explicitly so ghost buttons, eyebrows, lede,
   subhead, etc. read correctly. */
.hero, .about-hero, .contact, .athletes, .cta-band,
.timeline, .refs-section--dark, .pillar--dark {
  color-scheme: dark;
}

/* Ghost button visibility on dark backgrounds */
.hero .btn--ghost,
.about-hero .btn--ghost,
.contact .btn--ghost,
.athletes .btn--ghost,
.cta-band .btn--ghost,
.timeline .btn--ghost,
.refs-section--dark .btn--ghost,
.pillar--dark .btn--ghost {
  color: var(--paper);
  border-color: var(--line-2);
}
.hero .btn--ghost:hover,
.about-hero .btn--ghost:hover,
.contact .btn--ghost:hover,
.athletes .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.timeline .btn--ghost:hover,
.refs-section--dark .btn--ghost:hover,
.pillar--dark .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--gold);
  color: var(--gold);
}
.hero .btn--ghost .btn__icon,
.about-hero .btn--ghost .btn__icon,
.contact .btn--ghost .btn__icon,
.cta-band .btn--ghost .btn__icon,
.timeline .btn--ghost .btn__icon {
  background: rgba(255, 255, 255, 0.10);
}

/* Eyebrows on dark sections */
.hero .eyebrow,
.about-hero .eyebrow,
.contact .eyebrow,
.athletes .eyebrow,
.timeline .eyebrow,
.refs-section--dark .eyebrow,
.pillar--dark .eyebrow,
.cta-band .eyebrow {
  color: var(--muted);
}

/* Subhead/lede on dark sections (white-ish) */
.hero .subhead, .about-hero .subhead, .contact .subhead,
.athletes .subhead, .timeline .subhead, .refs-section--dark .subhead,
.cta-band .subhead {
  color: var(--muted);
}

/* ─── 1. HERO SCORECARD — fix illegible white-on-photo  ─
   The scorecard now sits inside a frosted dark panel and
   is anchored to the bottom of the image with the caption
   alongside it, so we don't fight Peter's face for space. */
.hero__media::before {
  /* Subtle full-image desaturating wash + edge vignette */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.50) 0%, rgba(10,10,11,0) 28%, rgba(10,10,11,0) 60%, rgba(10,10,11,0.88) 100%),
    linear-gradient(270deg, rgba(10,10,11,0.15) 0%, rgba(10,10,11,0) 40%);
  z-index: 1;
  pointer-events: none;
}
.hero__media::after { display: none; } /* base rule's gradient now lives in ::before */

/* Re-anchor caption + scorecard so they share the bottom panel */
.hero__scorecard {
  top: auto !important;
  bottom: 110px !important;          /* leave room for caption beneath */
  left: var(--s-5) !important;
  right: auto !important;
  padding: 14px 18px 16px;
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  max-width: 320px;
  grid-template-columns: auto 1fr !important;
  gap: .35rem 1rem !important;
}
.hero__scorecard::before {
  letter-spacing: .22em;
  font-size: 9.5px;
  margin-bottom: .15rem;
  padding-bottom: .35rem;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.hero__scorecard dd {
  font-size: 12.5px;
}
.hero__caption {
  padding: var(--s-4) var(--s-5) !important;
}
.hero__caption-name {
  font-size: 1.15rem;
}
@media (max-width: 1024px) {
  .hero__scorecard { display: none !important; }
}

/* Image: prefer face area visible */
.hero__media img {
  object-position: 50% 30%;
}

/* ─── 2. HERO META — fix narrow-column breakage ────────
   At 4-up the right-most cell "reprezentantov SR" wraps
   the previous one. Drop "SR" suffix visually and lighten
   the 4-up to allow more room; on medium widths use 2 cols. */
.hero__meta { gap: 0; }
.hero__meta div {
  padding: 0 1rem;
  min-width: 0;
}
.hero__meta div:first-child { padding-left: 0; }
.hero__meta div:last-child { padding-right: 0; }
.hero__meta strong {
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.15;
  white-space: normal;
  margin-top: 8px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
@media (max-width: 1180px) {
  .hero__meta { grid-template-columns: 1fr 1fr !important; }
  .hero__meta div { padding: 1rem 1.1rem; border-right: none !important; border-top: 1px solid var(--line); }
  .hero__meta div:nth-child(odd) { border-right: 1px solid var(--line) !important; }
  .hero__meta div:nth-child(-n+2) { border-top: none; }
}

/* ─── 3. STATUS PILL — quieter, real meaning ──────────
   Was visually loud + dubious copy. Soften, and the host
   patches the label to "Voľný · 2026". */
.site-nav__status {
  font-size: 10px;
  letter-spacing: .18em;
  padding: .35rem .65rem .35rem .6rem;
  border-color: var(--paper-line);
  color: var(--paper-muted);
  opacity: .92;
}
.site-nav__status:hover { opacity: 1; }
.is-dark .site-nav__status { border-color: var(--line); }

/* ─── 4. ATHLETES — fix grid border bottom ─────────── */
.athletes__grid {
  border-bottom: 1px solid var(--line);
}

/* ─── 5. PILLARS — sharper "1 / 2" numerals  ─────────
   Move numeral to the bottom-right corner so it doesn't
   crash into title block at the top. */
.pillar::before {
  top: auto;
  bottom: -2vw;
  right: -.2vw;
  font-size: clamp(11rem, 18vw, 22rem);
  line-height: 0.8;
}

/* ─── 6. PAGE-HEROES — unify side-rule decoration ────
   The enhance file added a horizontal rule that fights the
   content. Replace it with a slim left side-rule that
   doubles as a page index for the inner pages. */
.page-hero::before {
  content: none;
}
.page-hero {
  border-top: 1px solid var(--paper-line);
}
.page-hero .container {
  position: relative;
  padding-left: calc(var(--gutter) + 60px);
}
.page-hero .container::before {
  content: '';
  position: absolute;
  left: var(--gutter);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--paper-line);
}
.page-hero .container::after {
  content: '';
  position: absolute;
  left: calc(var(--gutter) - 4px);
  top: 0;
  width: 9px;
  height: 9px;
  background: var(--gold);
  border-radius: 50%;
}
@media (max-width: 760px) {
  .page-hero .container { padding-left: var(--gutter); }
  .page-hero .container::before, .page-hero .container::after { display: none; }
}

/* ─── 7. CONTACT — make the dark hero feel finished ── */
.contact__form {
  background: rgba(255,255,255,0.025);
}
.contact__form input,
.contact__form select,
.contact__form textarea {
  font-size: 1.02rem;
}
.contact__form select option { color: #111; }

/* ─── 8. PRESS row — single source of truth ─────────
   Press already breaks wide on mobile. Cap row gap. */
.press__list { gap: 1.5rem; }

/* ─── 9. BOOK / KNIHA — book art needs darker backdrop ─ */
.book__art img {
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.18));
}

/* ─── 10. REFS-HERO — gold rule for consistency ─────── */
.refs-hero {
  border-top: 1px solid var(--paper-line);
  position: relative;
}
.refs-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60px;
  height: 1px;
  background: var(--gold);
  transform: translateX(-30px);
}

/* ─── 11. TIMELINE — sharper alignment ───────────── */
.timeline__what { line-height: 1.3; }
.timeline__who  { font-size: 13px; }

/* ─── 12. SECTION MARKERS — dim the labels on dark bg ─ */
.section-marker__dot {
  background: rgba(26,24,21,0.18);
}
.section-marker__dot.is-active { background: var(--gold); }
.section-marker__dot::after {
  background: var(--ink-2);
  border: 1px solid var(--line);
}

/* ─── 13. SCROLL PROGRESS — over nav border ─────────
   Sit it just below the nav so it doesn't crash the logo. */
.scroll-progress { top: 0; }

/* ─── 14. GLOBAL — tighten body line + reduce default
   transition flashing on big page entries */
body { font-size: clamp(14.5px, 0.42vw + 0.78rem, 16.5px); }

/* ─── 15. CTA-BAND — fix paragraph color in dark ─── */
.cta-band p { color: var(--muted); }

/* ─── 16. ABOUT-HERO portrait — match face position ── */
.about-hero__media img {
  object-position: 50% 25%;
}

/* ─── 17. STAT/STATS BREAKPOINT — keep readable ──── */
@media (max-width: 760px) {
  .stat { padding: 1.25rem; }
}

/* ─── 18. SECTION MARKERS — hide on contact (no need) */
body.page-kontakt .section-marker { display: none; }

/* ─── 19. KNIHA HERO — make book title visible above book art panel  */
.page-kniha .book h1 em { font-size: 1.2em; line-height: 1; display: inline-block; }

/* ─── 20. NAV — keep nav above scroll progress when at top */
.site-nav { z-index: 50; }
.scroll-progress { z-index: 49; pointer-events: none; }

/* =========================================================
   PASS 3 — Typography refresh, readability, large-monitor
   layout, nav phone-button fix, alignment rhythm.
   ========================================================= */

/* ─── Type stack — keep Fraunces for display, but swap
   the body to Instrument Sans (more refined than Inter,
   pairs well with the editorial Fraunces). Inter stays as
   the second fallback so legacy CSS that named it still
   resolves to something sensible. */
:root {
  --font-body: 'Instrument Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --maxw: 1480px;           /* up from 1320 — better at big monitors */
  --gutter: clamp(1.5rem, 3.5vw, 3rem);
}
html, body {
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv11' on;  /* nicer ‘a’ / ‘g’ */
}
body {
  font-family: var(--font-body);
  /* Bump baseline ~1.5px for readability on big screens */
  font-size: clamp(15.5px, 0.32vw + 0.92rem, 17.5px);
  line-height: 1.62;
  color: var(--paper-ink);
  letter-spacing: -0.005em;
}
.dark, .hero, .about-hero, .contact, .athletes, .cta-band,
.timeline, .refs-section--dark, .pillar--dark {
  color: var(--paper);
}

/* Paragraphs in long-form bio/sections — bigger and more
   breathable */
.bio__body p, .lede,
section .container p:not(.subhead):not(.lede):not(.eyebrow):not(.athlete__note) {
  text-wrap: pretty;
}
.bio__body p {
  font-size: 1.12rem;
  line-height: 1.78;
}

/* Slightly more weight on body strong */
body strong { font-weight: 600; }

/* Eyebrow — Instrument Sans uppercase needs a bit more
   tracking and weight to read like a proper label */
.eyebrow {
  font-weight: 500;
  letter-spacing: .2em;
  font-size: 11px;
}

/* Subhead muted color was a bit washed out — tighten */
.subhead { color: var(--paper-muted); opacity: .92; }
.dark .subhead, .athletes .subhead, .timeline .subhead,
.refs-section--dark .subhead, .cta-band .subhead, .hero .subhead {
  color: #a8a59f;
}

/* Lede: refine the editorial display lede a touch */
.lede {
  font-weight: 400;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* ─── Nav phone button — give it a proper pill fill
   so it doesn't look like loose text. */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-nav__cta { gap: .55rem; flex-shrink: 0; }
.site-nav__cta .btn--ghost {
  background: rgba(26, 24, 21, 0.04);
  border-color: var(--paper-line-2);
  padding-left: 1rem;
}
.site-nav__cta .btn--ghost:hover {
  background: rgba(26, 24, 21, 0.07);
  border-color: var(--paper-ink);
}
.site-nav__cta .btn--ghost .btn__icon {
  background: var(--paper-ink);
  color: var(--paper);
}
.is-dark .site-nav__cta .btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-2);
}
.is-dark .site-nav__cta .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--paper);
}
.is-dark .site-nav__cta .btn--ghost .btn__icon {
  background: var(--paper);
  color: var(--ink);
}

/* ⛔ Contrast bug, found 31.8.2026 while shooting the hero variants and present on the
   LIVE homepage, not just on them. The `.is-dark` nav restyled the two CTA buttons'
   background and border and never their text, so both kept their light-mode colours:
   the phone number stayed #1A1815 (near-black on near-black — a 1.0 contrast ratio, i.e.
   gone) and „Kontakt" stayed a --ink pill on an --ink hero. It looked fine at the very top
   only because the nav's 78% black sits over the light body there; the moment a dark
   section scrolls under it, the header loses its phone number. The `.dark .btn--ghost`
   rule in site.css would have covered it, but the nav marks itself `.is-dark`. */
.is-dark .site-nav__cta .btn--ghost { color: var(--paper); }
.is-dark .site-nav__cta .btn--solid { background: var(--paper); color: var(--ink); }
.is-dark .site-nav__cta .btn--solid:hover { background: var(--gold); color: var(--ink); }

/* ─── Nav menu links — Instrument Sans is a touch narrower,
   give them more breathing room and a clearer active state */
.site-nav__menu { gap: 2rem; }
.site-nav__menu a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.site-nav__menu a.is-active::after {
  height: 1.5px;
  background: var(--gold-2);
  bottom: -4px;
}

/* Brand wordmark — Instrument doesn't have Fraunces' soft
   serif curves, so the brand mark is even more anchored */
.brand-wordmark__name { font-weight: 500; letter-spacing: -0.005em; }
.brand-wordmark__role { letter-spacing: .18em; }

/* ─── Large-monitor layout — true wide rhythm ────────
   The container goes to 1480 (above), but the hero and the
   page-hero patterns benefit from breathing space on either
   side. We also widen the gutter a touch on really big screens. */
@media (min-width: 1600px) {
  :root { --maxw: 1520px; }
  .hero__grid { gap: clamp(3rem, 6vw, 6.5rem); }
}
@media (min-width: 1900px) {
  :root { --maxw: 1600px; --gutter: clamp(2rem, 3vw, 4rem); }
}

/* ─── Athletes grid — at 1600+, allow 4 cols so the wall
   reads more like a roster than a row */
@media (min-width: 1600px) {
  .athletes__grid { grid-template-columns: repeat(4, 1fr); }
  .athletes__grid .athlete:nth-child(3n) { border-right: 1px solid var(--line); }
  .athletes__grid .athlete:nth-child(4n) { border-right: none; }
  .refs-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ─── HERO — display title balance + better baseline ─ */
.hero__title {
  text-wrap: balance;
  letter-spacing: -0.032em;
  font-weight: 350;
}
.hero__sub {
  font-weight: 350;
  color: #d8d4c8;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.7vw + 0.95rem, 1.5rem);
  line-height: 1.5;
}
.hero__sub strong { color: var(--paper); font-weight: 500; }

/* ─── Page-hero h1 across inner pages — unify scale ── */
.page-hero h1 {
  text-wrap: balance;
  letter-spacing: -0.028em;
}
.page-hero__lede {
  text-wrap: pretty;
  line-height: 1.45;
  color: var(--paper-muted);
}

/* ─── Display headlines globally — slightly less heavy
   so the page reads premium-editorial, not poster-blocky */
.headline, .pillar__title, .service__title, .level__title,
.value__title, .stat__num {
  letter-spacing: -0.022em;
}
.headline em, .pillar__title em, .hero__title em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}

/* ─── Stat numbers — Fraunces' tabular alt for alignment */
.stat__num {
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-weight: 500;
}
.stat__label {
  font-size: 14px;
  line-height: 1.6;
  margin-top: .85rem;
}
.stat__index {
  font-size: 10.5px;
  letter-spacing: .24em;
  font-weight: 600;
}

/* ─── Pillars — tighten the body copy for better rhythm */
.pillar__desc {
  font-size: 1.04rem;
  line-height: 1.65;
}
.pillar__list li {
  font-size: 0.96rem;
  padding-top: 0.95rem;
  line-height: 1.45;
}
.pillar__list li::before { color: var(--gold); }

/* ─── Athletes — name reads sharper */
.athlete__name {
  font-weight: 500;
  font-size: clamp(1.15rem, 1.4vw, 1.55rem);
}
.athlete__sport { font-weight: 600; }
.athlete__note { line-height: 1.5; font-size: 12.5px; }

/* ─── CTA-band — text-wrap balance reads cleaner */
.cta-band h2 { text-wrap: balance; letter-spacing: -0.028em; }
.cta-band p { line-height: 1.55; max-width: 52ch; }

/* ─── Footer — better hierarchy */
.site-foot__tag {
  font-size: 1.1rem;
  font-weight: 350;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
}
.site-foot__cols a { font-size: 14px; }
.site-foot__cols h4 { font-weight: 600; letter-spacing: .2em; }

/* ─── Container alignment unify — refs-hero was the only
   centered page-hero; that's an intentional editorial
   choice. Just make sure the line below the headline aligns
   to the centered title. */
.refs-hero h1 { font-size: clamp(2.2rem, 4.5vw, 4.8rem); }
.refs-hero .subhead { margin-left: auto; margin-right: auto; max-width: 56ch; }

/* ─── Bio (O mne) — drop-cap retained but smaller */
.bio__body p:first-child::first-letter {
  font-size: 3.4em;
  line-height: 0.9;
  padding-right: .25rem;
  padding-top: .05rem;
}

/* ─── Quote band — tighter editorial */
.quote-band blockquote {
  font-weight: 400;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* ─── Timeline — wider middle column on big screens */
@media (min-width: 1200px) {
  .timeline__item { grid-template-columns: 110px 1fr 220px; gap: 2.5rem; }
}

/* ─── Service / Level cards — typography polish */
.service__title, .level__title {
  font-weight: 500;
  font-size: clamp(1.5rem, 1.8vw, 2rem);
}
.service__desc { font-size: 1.02rem; line-height: 1.65; }

/* ─── Method values — bigger card titles */
.value__title {
  font-size: 1.55rem;
  font-weight: 500;
}
.value__desc { font-size: .94rem; }

/* ─── Hero meta — slightly different label hierarchy:
   make the eyebrow-prefix more present, label readable */
.hero__meta div {
  font-size: 10px;
  letter-spacing: .22em;
  font-weight: 600;
}
.hero__meta strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 22px);
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

/* ─── Hero score-card panel — refine type */
.hero__scorecard {
  font-size: 10px;
  letter-spacing: .12em;
}
.hero__scorecard dd {
  letter-spacing: 0;
  font-family: var(--font-display);
  font-weight: 350;
  font-style: italic;
  font-size: 13px;
  line-height: 1.3;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* ─── Big screens: make hero portrait larger */
@media (min-width: 1400px) {
  .hero__media { max-height: 80vh; }
}

/* ─── Contact form — labels more readable */
.contact__form label { font-weight: 600; }
.contact__form input,
.contact__form select,
.contact__form textarea {
  font-size: 1.05rem;
  padding: .95rem 0 .8rem;
}

/* ─── Refs cards — better caption hierarchy */
.refs-card__name { font-weight: 500; font-size: 1.18rem; }
.refs-card__sport { font-weight: 600; }
.refs-card__chip { font-weight: 600; }

/* ─── Site-foot — better visual rhythm at big widths */
@media (min-width: 1400px) {
  .site-foot__top { grid-template-columns: 1.4fr 2.4fr; gap: 6rem; }
  .site-foot__cols { gap: 3rem; }
}

/* ─── Visual rhythm: alternate section dividers w/ rule */
.section-pad + .section-pad,
section.section-pad { position: relative; }

/* ─── Sticky offset for sticky panels (--nav-h ~72px) */
.method__head, .bio__head { top: calc(var(--nav-h, 72px) + 24px); }

/* ─── Body wrapper: small max-readable width for narrow text
   blocks (used in /o-mne/) */
.container--text { max-width: 720px; }
.container--narrow { max-width: 1040px; }

/* ─── KEEP eyebrow rule visible on dark sections */
.hero .eyebrow::before,
.about-hero .eyebrow::before,
.contact .eyebrow::before {
  opacity: 1;
  background: var(--gold);
}

/* ─── Better fallback while Instrument Sans loads */
body { font-synthesis: weight style; }

/* ─── Original enhance-layer rules retained below ──── */

/* (rest of file is the same as before — re-included verbatim
   so older browsers and the asset-pinned URL still work.) */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  pointer-events: none;
  background: transparent;
}
.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold) 50%, var(--gold-2));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .12s linear;
  box-shadow: 0 0 12px rgba(196, 166, 113, 0.55);
}

.site-nav__status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem .35rem .65rem;
  margin-left: .5rem;
  border: 1px solid var(--paper-line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-muted);
  font-weight: 500;
  background: transparent;
  transition: border-color .25s ease, color .25s ease;
}
.is-dark .site-nav__status { border-color: var(--line-2); color: var(--muted); }
.site-nav__status:hover { border-color: var(--gold); color: var(--gold-2); }
.is-dark .site-nav__status:hover { color: var(--gold); }
.site-nav__status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6BCB77;
  box-shadow: 0 0 0 0 rgba(107, 203, 119, 0.55);
  animation: pulseDot 2.4s ease-out infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0   rgba(107, 203, 119, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(107, 203, 119, 0); }
  100% { box-shadow: 0 0 0 0   rgba(107, 203, 119, 0); }
}
@media (max-width: 1280px) {
  .site-nav__status { display: none; }
}

.hero__content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn .9s cubic-bezier(.18,.7,.2,1) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: .05s; }
.hero__content > *:nth-child(2) { animation-delay: .15s; }
.hero__content > *:nth-child(3) { animation-delay: .28s; }
.hero__content > *:nth-child(4) { animation-delay: .42s; }
.hero__content > *:nth-child(5) { animation-delay: .58s; }
.hero__media {
  opacity: 0;
  animation: heroMedia 1.1s cubic-bezier(.18,.7,.2,1) .15s forwards;
}
@keyframes heroIn  { to { opacity: 1; transform: none; } }
@keyframes heroMedia { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero__content > *, .hero__media { animation: none; opacity: 1; transform: none; }
}

/* Zlatá linka pod kartou je nakreslená rovno tu. Predtým začínala na scaleX(0) a
   dokresľovala sa, keď karta prišla do záberu — spolu s dopočítavaním čísla. Oboje je
   od 31. 8. 2026 preč. */
.stat::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
}

/* Dlaždice atlétov a referencií nikde nezačínajú neviditeľné — postupné vysúvanie
   „po jednej, ako doskrolujete“ je zrušené 31. 8. 2026. */

.section-marker { display: none; }

/* ─── 19. KNIHA HERO — make book title visible above book art panel  */
.page-kniha .book h1 em { font-size: 1.2em; line-height: 1; display: inline-block; }

/* ─── 20. NAV — keep nav above scroll progress when at top */
.site-nav { z-index: 50; }
.scroll-progress { z-index: 49; pointer-events: none; }

/* =========================================================
   PASS 3 — Typography refresh, readability, large-monitor
   layout, nav phone-button fix, alignment rhythm.
   ========================================================= */

/* ─── Type stack — keep Fraunces for display, but swap
   the body to Instrument Sans (more refined than Inter,
   pairs well with the editorial Fraunces). Inter stays as
   the second fallback so legacy CSS that named it still
   resolves to something sensible. */
:root {
  --font-body: 'Instrument Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --maxw: 1480px;           /* up from 1320 — better at big monitors */
  --gutter: clamp(1.5rem, 3.5vw, 3rem);
}
html, body {
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv11' on;  /* nicer ‘a’ / ‘g’ */
}
body {
  font-family: var(--font-body);
  /* Bump baseline ~1.5px for readability on big screens */
  font-size: clamp(15.5px, 0.32vw + 0.92rem, 17.5px);
  line-height: 1.62;
  color: var(--paper-ink);
  letter-spacing: -0.005em;
}
.dark, .hero, .about-hero, .contact, .athletes, .cta-band,
.timeline, .refs-section--dark, .pillar--dark {
  color: var(--paper);
}

/* Paragraphs in long-form bio/sections — bigger and more
   breathable */
.bio__body p, .lede,
section .container p:not(.subhead):not(.lede):not(.eyebrow):not(.athlete__note) {
  text-wrap: pretty;
}
.bio__body p {
  font-size: 1.12rem;
  line-height: 1.78;
}

/* Slightly more weight on body strong */
body strong { font-weight: 600; }

/* Eyebrow — Instrument Sans uppercase needs a bit more
   tracking and weight to read like a proper label */
.eyebrow {
  font-weight: 500;
  letter-spacing: .2em;
  font-size: 11px;
}

/* Subhead muted color was a bit washed out — tighten */
.subhead { color: var(--paper-muted); opacity: .92; }
.dark .subhead, .athletes .subhead, .timeline .subhead,
.refs-section--dark .subhead, .cta-band .subhead, .hero .subhead {
  color: #a8a59f;
}

/* Lede: refine the editorial display lede a touch */
.lede {
  font-weight: 400;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* ─── Nav phone button — give it a proper pill fill
   so it doesn't look like loose text. */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-nav__cta { gap: .55rem; flex-shrink: 0; }
.site-nav__cta .btn--ghost {
  background: rgba(26, 24, 21, 0.04);
  border-color: var(--paper-line-2);
  padding-left: 1rem;
}
.site-nav__cta .btn--ghost:hover {
  background: rgba(26, 24, 21, 0.07);
  border-color: var(--paper-ink);
}
.site-nav__cta .btn--ghost .btn__icon {
  background: var(--paper-ink);
  color: var(--paper);
}
.is-dark .site-nav__cta .btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-2);
}
.is-dark .site-nav__cta .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--paper);
}
.is-dark .site-nav__cta .btn--ghost .btn__icon {
  background: var(--paper);
  color: var(--ink);
}

/* ⛔ Contrast bug, found 31.8.2026 while shooting the hero variants and present on the
   LIVE homepage, not just on them. The `.is-dark` nav restyled the two CTA buttons'
   background and border and never their text, so both kept their light-mode colours:
   the phone number stayed #1A1815 (near-black on near-black — a 1.0 contrast ratio, i.e.
   gone) and „Kontakt" stayed a --ink pill on an --ink hero. It looked fine at the very top
   only because the nav's 78% black sits over the light body there; the moment a dark
   section scrolls under it, the header loses its phone number. The `.dark .btn--ghost`
   rule in site.css would have covered it, but the nav marks itself `.is-dark`. */
.is-dark .site-nav__cta .btn--ghost { color: var(--paper); }
.is-dark .site-nav__cta .btn--solid { background: var(--paper); color: var(--ink); }
.is-dark .site-nav__cta .btn--solid:hover { background: var(--gold); color: var(--ink); }

/* ─── Nav menu links — Instrument Sans is a touch narrower,
   give them more breathing room and a clearer active state */
.site-nav__menu { gap: 2rem; }
.site-nav__menu a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.site-nav__menu a.is-active::after {
  height: 1.5px;
  background: var(--gold-2);
  bottom: -4px;
}

/* Brand wordmark — Instrument doesn't have Fraunces' soft
   serif curves, so the brand mark is even more anchored */
.brand-wordmark__name { font-weight: 500; letter-spacing: -0.005em; }
.brand-wordmark__role { letter-spacing: .18em; }

/* ─── Large-monitor layout — true wide rhythm ────────
   The container goes to 1480 (above), but the hero and the
   page-hero patterns benefit from breathing space on either
   side. We also widen the gutter a touch on really big screens. */
@media (min-width: 1600px) {
  :root { --maxw: 1520px; }
  .hero__grid { gap: clamp(3rem, 6vw, 6.5rem); }
}
@media (min-width: 1900px) {
  :root { --maxw: 1600px; --gutter: clamp(2rem, 3vw, 4rem); }
}

/* ─── Athletes grid — at 1600+, allow 4 cols so the wall
   reads more like a roster than a row */
@media (min-width: 1600px) {
  .athletes__grid { grid-template-columns: repeat(4, 1fr); }
  .athletes__grid .athlete:nth-child(3n) { border-right: 1px solid var(--line); }
  .athletes__grid .athlete:nth-child(4n) { border-right: none; }
  .refs-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ─── HERO — display title balance + better baseline ─ */
.hero__title {
  text-wrap: balance;
  letter-spacing: -0.032em;
  font-weight: 350;
}
.hero__sub {
  font-weight: 350;
  color: #d8d4c8;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.7vw + 0.95rem, 1.5rem);
  line-height: 1.5;
}
.hero__sub strong { color: var(--paper); font-weight: 500; }

/* ─── Page-hero h1 across inner pages — unify scale ── */
.page-hero h1 {
  text-wrap: balance;
  letter-spacing: -0.028em;
}
.page-hero__lede {
  text-wrap: pretty;
  line-height: 1.45;
  color: var(--paper-muted);
}

/* ─── Display headlines globally — slightly less heavy
   so the page reads premium-editorial, not poster-blocky */
.headline, .pillar__title, .service__title, .level__title,
.value__title, .stat__num {
  letter-spacing: -0.022em;
}
.headline em, .pillar__title em, .hero__title em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}

/* ─── Stat numbers — Fraunces' tabular alt for alignment */
.stat__num {
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-weight: 500;
}
.stat__label {
  font-size: 14px;
  line-height: 1.6;
  margin-top: .85rem;
}
.stat__index {
  font-size: 10.5px;
  letter-spacing: .24em;
  font-weight: 600;
}

/* ─── Pillars — tighten the body copy for better rhythm */
.pillar__desc {
  font-size: 1.04rem;
  line-height: 1.65;
}
.pillar__list li {
  font-size: 0.96rem;
  padding-top: 0.95rem;
  line-height: 1.45;
}
.pillar__list li::before { color: var(--gold); }

/* ─── Athletes — name reads sharper */
.athlete__name {
  font-weight: 500;
  font-size: clamp(1.15rem, 1.4vw, 1.55rem);
}
.athlete__sport { font-weight: 600; }
.athlete__note { line-height: 1.5; font-size: 12.5px; }

/* ─── CTA-band — text-wrap balance reads cleaner */
.cta-band h2 { text-wrap: balance; letter-spacing: -0.028em; }
.cta-band p { line-height: 1.55; max-width: 52ch; }

/* ─── Footer — better hierarchy */
.site-foot__tag {
  font-size: 1.1rem;
  font-weight: 350;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
}
.site-foot__cols a { font-size: 14px; }
.site-foot__cols h4 { font-weight: 600; letter-spacing: .2em; }

/* ─── Container alignment unify — refs-hero was the only
   centered page-hero; that's an intentional editorial
   choice. Just make sure the line below the headline aligns
   to the centered title. */
.refs-hero h1 { font-size: clamp(2.2rem, 4.5vw, 4.8rem); }
.refs-hero .subhead { margin-left: auto; margin-right: auto; max-width: 56ch; }

/* ─── Bio (O mne) — drop-cap retained but smaller */
.bio__body p:first-child::first-letter {
  font-size: 3.4em;
  line-height: 0.9;
  padding-right: .25rem;
  padding-top: .05rem;
}

/* ─── Quote band — tighter editorial */
.quote-band blockquote {
  font-weight: 400;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* ─── Timeline — wider middle column on big screens */
@media (min-width: 1200px) {
  .timeline__item { grid-template-columns: 110px 1fr 220px; gap: 2.5rem; }
}

/* ─── Service / Level cards — typography polish */
.service__title, .level__title {
  font-weight: 500;
  font-size: clamp(1.5rem, 1.8vw, 2rem);
}
.service__desc { font-size: 1.02rem; line-height: 1.65; }

/* ─── Method values — bigger card titles */
.value__title {
  font-size: 1.55rem;
  font-weight: 500;
}
.value__desc { font-size: .94rem; }

/* ─── Hero meta — slightly different label hierarchy:
   make the eyebrow-prefix more present, label readable */
.hero__meta div {
  font-size: 10px;
  letter-spacing: .22em;
  font-weight: 600;
}
.hero__meta strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 22px);
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

/* ─── Hero score-card panel — refine type */
.hero__scorecard {
  font-size: 10px;
  letter-spacing: .12em;
}
.hero__scorecard dd {
  letter-spacing: 0;
  font-family: var(--font-display);
  font-weight: 350;
  font-style: italic;
  font-size: 13px;
  line-height: 1.3;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* ─── Big screens: make hero portrait larger */
@media (min-width: 1400px) {
  .hero__media { max-height: 80vh; }
}

/* ─── Contact form — labels more readable */
.contact__form label { font-weight: 600; }
.contact__form input,
.contact__form select,
.contact__form textarea {
  font-size: 1.05rem;
  padding: .95rem 0 .8rem;
}

/* ─── Refs cards — better caption hierarchy */
.refs-card__name { font-weight: 500; font-size: 1.18rem; }
.refs-card__sport { font-weight: 600; }
.refs-card__chip { font-weight: 600; }

/* ─── Site-foot — better visual rhythm at big widths */
@media (min-width: 1400px) {
  .site-foot__top { grid-template-columns: 1.4fr 2.4fr; gap: 6rem; }
  .site-foot__cols { gap: 3rem; }
}

/* ─── Visual rhythm: alternate section dividers w/ rule */
.section-pad + .section-pad,
section.section-pad { position: relative; }

/* ─── Sticky offset for sticky panels (--nav-h ~72px) */
.method__head, .bio__head { top: calc(var(--nav-h, 72px) + 24px); }

/* ─── Body wrapper: small max-readable width for narrow text
   blocks (used in /o-mne/) */
.container--text { max-width: 720px; }
.container--narrow { max-width: 1040px; }

/* ─── KEEP eyebrow rule visible on dark sections */
.hero .eyebrow::before,
.about-hero .eyebrow::before,
.contact .eyebrow::before {
  opacity: 1;
  background: var(--gold);
}

/* ─── Better fallback while Instrument Sans loads */
body { font-synthesis: weight style; }

/* ─── Original enhance-layer rules retained below ──── */

/* (rest of file is the same as before — re-included verbatim
   so older browsers and the asset-pinned URL still work.) */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  pointer-events: none;
  background: transparent;
}
.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold) 50%, var(--gold-2));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .12s linear;
  box-shadow: 0 0 12px rgba(196, 166, 113, 0.55);
}

.site-nav__status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem .35rem .65rem;
  margin-left: .5rem;
  border: 1px solid var(--paper-line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-muted);
  font-weight: 500;
  background: transparent;
  transition: border-color .25s ease, color .25s ease;
}
.is-dark .site-nav__status { border-color: var(--line-2); color: var(--muted); }
.site-nav__status:hover { border-color: var(--gold); color: var(--gold-2); }
.is-dark .site-nav__status:hover { color: var(--gold); }
.site-nav__status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6BCB77;
  box-shadow: 0 0 0 0 rgba(107, 203, 119, 0.55);
  animation: pulseDot 2.4s ease-out infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0   rgba(107, 203, 119, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(107, 203, 119, 0); }
  100% { box-shadow: 0 0 0 0   rgba(107, 203, 119, 0); }
}
@media (max-width: 1280px) {
  .site-nav__status { display: none; }
}

.hero__content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn .9s cubic-bezier(.18,.7,.2,1) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: .05s; }
.hero__content > *:nth-child(2) { animation-delay: .15s; }
.hero__content > *:nth-child(3) { animation-delay: .28s; }
.hero__content > *:nth-child(4) { animation-delay: .42s; }
.hero__content > *:nth-child(5) { animation-delay: .58s; }
.hero__media {
  opacity: 0;
  animation: heroMedia 1.1s cubic-bezier(.18,.7,.2,1) .15s forwards;
}
@keyframes heroIn  { to { opacity: 1; transform: none; } }
@keyframes heroMedia { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero__content > *, .hero__media { animation: none; opacity: 1; transform: none; }
}

/* Zlatá linka pod kartou je nakreslená rovno tu. Predtým začínala na scaleX(0) a
   dokresľovala sa, keď karta prišla do záberu — spolu s dopočítavaním čísla. Oboje je
   od 31. 8. 2026 preč. */
.stat::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
}

/* (Postupné vysúvanie dlaždíc bolo aj tu — zrušené 31. 8. 2026, pozri vyššie.) */

.section-marker {
  position: fixed;
  right: clamp(.6rem, 2vw, 1.25rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  pointer-events: none;
}
.section-marker__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(26,24,21,0.22);
  pointer-events: auto;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
  position: relative;
}
.section-marker__dot.is-active { background: var(--gold); transform: scale(1.4); }
.section-marker__dot::after {
  content: attr(data-label);
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  padding: .3rem .55rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.section-marker__dot:hover::after { opacity: 1; transform: translate(-2px, -50%); }
@media (max-width: 1100px) { .section-marker { display: none; } }

.stat__num { font-variant-numeric: tabular-nums; }

/* =========================================================
   PASS 4 — Client revisions (2026-06)
   · Real logo image (nav + footer)
   · Refined sans-serif display type (drop the serif)
   · Single-colour headings (no two-tone gold emphasis)
   · Podcast section · business references · misc mobile
   ========================================================= */

/* ─── A. Display type → refined sans-serif ─────────────
   The brand reads cleaner and more "normal" without the
   Fraunces serif. Everything that used --font-display now
   resolves to Instrument Sans, so we re-balance weights. */
:root {
  --font-display: 'Instrument Sans', 'Inter', system-ui, -apple-system, sans-serif;
}
.hero__title, .page-hero h1, .cta-band h2, .display,
.refs-hero h1, .about-hero h1, .contact__head h1, .book h1 {
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  font-variation-settings: normal;
}
.headline, .pillar__title, .service__title, .level__title,
.value__title, .timeline__what, .quote-band blockquote,
.refs-card__name, .athlete__name {
  font-weight: 600;
  font-variation-settings: normal;
}
.stat__num { font-weight: 700; letter-spacing: -0.04em; font-variation-settings: normal; }
.lede, .hero__sub, .page-hero__lede, .site-foot__tag, .marquee__track {
  font-weight: 500;
  font-variation-settings: normal;
}
/* Editorial italics that were Fraunces flourishes read odd in a
   neo-grotesque — keep them upright and quiet. */
.marquee__track, .site-foot__tag, .press__list,
.hero__caption-name, .quote-band blockquote { font-style: normal; }

/* ─── B. Single-colour headings (no gold em) ───────────
   Section headings are now one colour; the emphasised word
   sits in the same ink, upright, just part of the line. */
.hero__title em, .headline em, .pillar__title em, .pillar--dark .pillar__title em,
.service__title em, .cta-band h2 em, .page-hero h1 em, .display em,
.level__title em, .value__title em, .quote-band blockquote em,
.athletes__head h2 em, .timeline__head h2 em, .refs-section--dark h2 em,
.about-hero h1 em, .contact__head h1 em, .book h1 em, .refs-hero h1 em,
.bio__head .headline em, .method__head .headline em {
  color: inherit !important;
  font-style: normal;
  font-variation-settings: normal;
}
/* the gold underline swoosh under the hero em is two-tone too */
.hero__title em::after { display: none; }

/* ─── C. Logo image — nav + footer ─────────────────────
   Replaces the constructed wordmark with the real
   peterbielik.sk logo. Black on the light nav, white when
   the nav flips dark over a dark hero, and in the footer. */
.site-nav__brand { gap: 0; }
.site-nav__logo {
  height: 50px;
  width: auto;
  display: block;
}
.site-nav__logo--light { display: none; }
.site-nav.is-dark .site-nav__logo--dark { display: none; }
.site-nav.is-dark .site-nav__logo--light { display: block; }
@media (max-width: 600px) { .site-nav__logo { height: 38px; } }

.site-foot__logo { height: 34px; width: auto; display: block; }
.site-foot__role {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: .9rem 0 0;
}

/* ─── D. Podcast section ───────────────────────────────  */
.podcast {
  background: var(--ink);
  color: var(--paper);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--line);
}
.podcast__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.podcast__head .headline { color: var(--paper); }
.podcast__lede { color: var(--muted); margin-top: 1.25rem; max-width: 44ch; }
.podcast__platforms {
  display: flex; flex-direction: column; gap: .75rem;
}
.podcast__link {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.podcast__link:hover {
  border-color: var(--gold);
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
}
/* Klient 9.10.2026: logá platforiem čiernobielo, aby farby nerušili. */
.podcast__link svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--paper); }
.podcast__link-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.05rem; color: var(--paper);
}
.podcast__link-meta {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.podcast__link .podcast__arrow { margin-left: auto; color: var(--gold); font-size: 1.1rem; }
@media (max-width: 860px) {
  .podcast__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ─── E. Business references (testimonials + logo wall) ─ */
.biz-refs { padding: var(--section-y) 0; background: var(--paper-2); }
.biz-refs__quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: var(--s-7);
}
.biz-quote {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.biz-quote__text {
  font-family: var(--font-display);
  font-size: 1.2rem; line-height: 1.45; font-weight: 500;
  color: var(--paper-ink); margin: 0;
}
.biz-quote__who {
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--paper-line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-2);
}
.biz-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: var(--s-7);
}
.biz-logos__item {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  padding: 1.25rem;
}
.biz-logos__item img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(100%); opacity: .62;
  transition: filter .25s ease, opacity .25s ease;
}
.biz-logos__item:hover img { filter: grayscale(0); opacity: 1; }
@media (max-width: 900px) { .biz-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .biz-logos { grid-template-columns: repeat(2, 1fr); } }

/* ─── F. Responsive split helpers + mobile fixes ───────
   Replace one-off inline two-column grids so they reliably
   stack on phones (inline grid-template-columns could not
   be overridden by a media query, so these are classes). */
.r-split        { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 3rem); align-items: center; }
.r-split--media { display: grid; grid-template-columns: 0.95fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.r-split--narrow{ display: grid; grid-template-columns: 0.5fr 1fr;  gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.r-cards2       { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 820px) {
  .r-split, .r-split--media, .r-split--narrow { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .method__values { grid-template-columns: 1fr; }
  .r-cards2 { grid-template-columns: 1fr; }
}

/* ─── G. Mobile menu panel — escape the backdrop-filter trap
   .site-nav uses backdrop-filter, which establishes a
   containing block for its position:fixed child panel and
   clips the full-screen menu to the nav's height. Drop the
   filter while the menu is open so the panel fills the
   viewport, and belt-and-braces pin it to 100dvh. */
body.is-menu-open .site-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-nav__panel { min-height: 100vh; min-height: 100dvh; }

/* ─── 2026-08-29 · client copy update (Texty I.) ────────────────────
   Longer hero statement headline, six-up track record, seven-item nav.
   (31.8.2026: the "Obsah individuálnej spolupráce" cards got photos,
   so the text-only card variant is gone.) */

/* Hero H1 is now a full sentence, not three short lines. */
.hero__title--statement {
  font-size: clamp(2.05rem, 3.5vw + 0.5rem, 4.05rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.hero__content .hero__sub + .hero__sub { margin-top: 1rem; }

/* Track record scoreboard: six cards instead of four. */
.stats__grid--six { grid-template-columns: repeat(3, 1fr); }
.stats__grid--six .stat { border-right: 1px solid var(--paper-line); }
.stats__grid--six .stat:nth-child(3n) { border-right: none; }
.stats__grid--six .stat:nth-child(-n+3) { padding-bottom: 2rem; }
.stats__grid--six .stat:nth-child(n+4) {
  padding-top: 2rem;
  border-top: 1px solid var(--paper-line);
}
.stat__num--sm { font-size: clamp(1.35rem, 2vw, 1.9rem) !important; white-space: nowrap; }


/* Seven nav items need a little more room than five. */
@media (min-width: 1025px) {
  .site-nav__menu { gap: 1.15rem; }
  .site-nav__menu a { font-size: 13.5px; }
}
@media (min-width: 1180px) {
  .site-nav__menu { gap: 1.5rem; }
  .site-nav__menu a { font-size: 14.5px; }
}
@media (max-width: 1279px) {
  .site-nav__phone { display: none; }
}
/* Klient 27.10.2026 (CRM 2586, intx 30552 — foto z notebooku syna, okno ~1390 px): „Bielikov
   inštitút“ a „O mne“ v lište na dva riadky. U nás sa lišta zmestila s rezervou 26 px; u neho
   sa písmo vykreslilo širšie — keď sa Instrument Sans nenačíta (blokovač Google Fonts), náhradné
   písmo je o ~15 % širšie a s Arialom sa pri 1280–1394 px lámu presne tieto dve položky.
   Položka sa preto nezalomí nikdy a telefón v lište ustúpi až pod 1500 px (ostáva v pätičke,
   na Kontakte aj v mobilnom menu), aby sa celé menu zmestilo aj so širším písmom. */
.site-nav__menu a { white-space: nowrap; }
@media (max-width: 1499px) {
  .site-nav__phone { display: none; }
}

@media (max-width: 1024px) {
  .stats__grid--six { grid-template-columns: repeat(2, 1fr); }
  .stats__grid--six .stat:nth-child(3n) { border-right: 1px solid var(--paper-line); }
  .stats__grid--six .stat:nth-child(2n) { border-right: none; }
  .stats__grid--six .stat:nth-child(-n+3) { padding-bottom: 1.5rem; }
  .stats__grid--six .stat:nth-child(n+3) {
    padding-top: 1.5rem;
    border-top: 1px solid var(--paper-line);
  }
}
@media (max-width: 640px) {
  .stats__grid--six .stat { padding-left: .85rem; padding-right: .85rem; }
}

/* A page-hero H1 that is a whole sentence, not a three-word stack. */
.page-hero__h1--long {
  font-size: clamp(1.95rem, 3.1vw + 0.4rem, 3.6rem) !important;
  line-height: 1.05 !important;
}

/* Mobile hero: keep the portrait a portrait. The 16/12 letterbox sliced the
   2026 photo across the chest and pushed the caption onto a white shirt,
   which is also where the bottom gradient has not started yet. */
@media (max-width: 1024px) {
  .hero__media { aspect-ratio: 4/5; max-height: 66vh; }
  .hero__media img { object-position: 50% 18%; }
}
@media (max-width: 520px) {
  .hero__caption { padding: var(--s-4) 1.1rem 1.15rem !important; }
  .hero__caption-label { font-size: 9.5px; letter-spacing: .12em; }
  .hero__caption-name { font-size: 1.02rem; line-height: 1.3; }
}

/* Two-up track record: every card below the first row gets the divider,
   every card in a row that has one below it gets the breathing room. */
@media (max-width: 1024px) {
  .stats__grid--six .stat:nth-child(-n+4) { padding-bottom: 1.5rem; }
  .stats__grid--six .stat:nth-child(n+3) {
    padding-top: 1.5rem;
    border-top: 1px solid var(--paper-line);
  }
}

/* The hero figure carries `aspect-ratio: 4/5` AND `align-self: stretch`, so on a
   tall-but-narrow desktop its height drives a width wider than its own grid
   column — 540px into a ~420px track at 1025px, clipped by `.hero{overflow:hidden}`.
   Cap it to the track; the aspect ratio then follows the width. */
.hero__media { max-width: 100%; }

/* "1:1 · 1:N · N:N" measured 115px inside a 114.8px content box at 320px — it fits
   by a rounding hair with `nowrap`. Give it real headroom instead. */
@media (max-width: 400px) {
  .stat__num--sm { font-size: 1.12rem !important; letter-spacing: -0.01em; }
}

/* The mailto form's honesty note. */
.contact__form-note {
  margin: .75rem 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ─── Titulka: tóny sekcií po prehodení poradia (31. 8. 2026) ──────────────
   Metóda išla hore a šesť kariet track recordu dole, čím obe sadli vedľa suseda
   s rovnakým podkladom: Metóda na tú istú bonu ako Piliere pod ňou, karty na tú istú
   ako Kniha pod nimi. Tóny sú preto prehodené — každá sekcia berie ten, ktorý ju na jej
   NOVOM mieste odlišuje: Metóda hlbšiu bonu medzi čiernym pásom a Piliermi, karty
   svetlú medzi čiernou sekciou Ľudia a Knihou. */
.page-home .method {
  background: var(--paper-3);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.page-home .stats { background: var(--paper); }

/* ─── Titulka: „Z portfólia“ — šport + firmy v jednej mriežke (31. 8. 2026) ─────────
   Sekcia niesla šesť športovcov a nič iné, hoci šport je dvadsať rokov histórie a firmy
   sú prítomnosť. Teraz je to 4 + 4: horný riadok fotky, dolný firmy — v štyroch stĺpcoch,
   lebo v troch boli dlaždice zbytočne veľké.
   Vlastná mriežka, nie .athletes__grid — tá sa nad 1600 px sama láme na štyri stĺpce a pod
   tým drží tri, čo by z kompozície 4 + 4 spravilo 3 + 3 + 2 a rozbilo by to význam riadkov.
   Linky nekreslím po bunkách (nth-child sa pri každom breakpointe láme), ale medzerou:
   gap 1px cez podfarbenú mriežku drží rovnaké vlasové čiary v ľubovoľnom počte stĺpcov.
   Osem buniek sa pritom delí načisto aj na dva stĺpce — šport, šport, firmy, firmy. */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.portfolio__grid + .portfolio__grid { margin-top: var(--s-7); }
.portfolio__grid .athlete { border-right: none; border-bottom: none; }
/* Užší stĺpec znesie menšie písmo — v pôvodnej veľkosti sa „Andrejčík + Balcová“ láme
   na dva riadky a poznámka pod ním na štyri. */
.portfolio__grid .athlete__name { font-size: clamp(1.02rem, 0.5vw + 0.72rem, 1.3rem); }
.portfolio__grid .athlete__note { font-size: 12px; margin-top: 6px; }
.portfolio__grid .athlete__chip { font-size: 9px; padding: .3rem .55rem; }
@media (max-width: 1179px) { .portfolio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .portfolio__grid { grid-template-columns: 1fr; } }

/* Firemná dlaždica — značka, veta klienta, meno. Rovnaké popisky ako fotka nad ňou, len
   namiesto obrázka to, čo o spolupráci povedali oni sami. */
.pfirm {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Zámerne NIE 4/5 ako fotka nad ňou: dvadsať slov v štvorpätinovej dlaždici je
     tristo pixelov prázdna. Riadok citátov je nižší než riadok fotiek — z toho vzniká
     rytmus sekcie, nie chyba mriežky. */
  min-height: clamp(300px, 23vw, 360px);
  padding: 1.5rem;
  background: var(--ink-2);
  overflow: hidden;
  transition: background .3s ease;
}
.pfirm::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.pfirm:hover { background: var(--ink-3); }
.pfirm:hover::before { transform: scaleX(1); }

/* Značka. Súbory v mark/ sú biela kresba na priehľadnom pozadí, takže sa tón riadi
   odtiaľto a nie je zapečený v obrázku.
   ⚠️ Rovnaká VÝŠKA pre všetky značky nefunguje: Continental je pomer 5:1, Hydro skoro
   štvorec. Pri výške 34 px bol Continental 173 px široký a Hydro 35 — vedľa seba to
   vyzerá ako dve rôzne veľkosti, hoci sú rovnako vysoké. Výšky sú preto nastavené na oko
   podľa tvaru značky, aby mali podobnú optickú váhu. */
/* Značky majú rôznu výšku, tak by pod nimi každý citát začínal inde. Slot má preto pevnú
   výšku a značka sa v ňom vycentruje — tri dlaždice vedľa seba tak začínajú textom na
   jednom riadku. */
.pfirm__brand {
  display: flex;
  align-items: center;
  height: 58px;
  flex: none;
}
.pfirm__mark {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: .72;
  transition: opacity .3s ease;
  flex: none;
  align-self: flex-start;
}
.pfirm__mark--samsung { max-height: 46px; }
.pfirm__mark--hydro   { max-height: 58px; }
.pfirm__mark--conti   { max-height: 30px; }
.pfirm:hover .pfirm__mark { opacity: .95; }
.pfirm__quote {
  position: relative;
  margin: 1.4rem 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.98rem, 0.42vw + 0.78rem, 1.16rem);
  line-height: 1.36;
  letter-spacing: -0.012em;
  color: var(--paper);
  text-wrap: pretty;
}
.pfirm--plain .pfirm__quote { color: #cfcbc1; }
.pfirm__who { position: relative; margin-top: auto; }
.pfirm__who .athlete__name { margin-top: 4px; }

/* Štvrtá bunka dolného riadku — šesť menších značiek namiesto jedného citátu. Sú to tie
   isté logá, aké má na svojom webe pod „Spolupracoval som aj“; sem sa dostali preto, že
   riadok potreboval štvrtú bunku a zoznam mien pod mriežkou bol slabšie riešenie. */
.pfirm--wall { justify-content: flex-start; }
.pfirm__wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.25rem;
  align-items: center;
  margin-top: auto;
  padding-top: 1.5rem;
}
.pfirm__wall span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.pfirm__wall img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .66;
  transition: opacity .3s ease;
}
/* Tá istá vec ako pri veľkých značkách, len o poschodie nižšie — širokánsky DATALAN
   a skoro štvorcové OVB potrebujú inú výšku, aby v mriežke vážili rovnako. */
.pfirm__wall .m-datalan   { max-height: 17px; }
.pfirm__wall .m-weishaupt { max-height: 20px; }
.pfirm__wall .m-infinity  { max-height: 27px; }
.pfirm__wall .m-cogniware { max-height: 44px; }
.pfirm__wall .m-lr        { max-height: 46px; }
.pfirm__wall .m-ovb       { max-height: 46px; }
.pfirm--wall:hover .pfirm__wall img { opacity: .82; }

/* Chvost sekcie — kluby a reprezentácie sú tu výslovne ako archív; na stránke Referencie
   sú uvedené rovnako, a inak by to odporovalo tomu, že dnes pracuje individuálne. */
.portfolio__more {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.portfolio__more p {
  margin: .7rem 0 0;
  font-size: .95rem;
  line-height: 1.65;
  color: #b9b5ac;
}

/* Formát v číslach: pôvodné „1:1 · 1:N · N:N“ nikto neprečítal, tak tam je
   „Jednotlivci · skupiny · tímy“ — lenže nowrap bol písaný pre ten krátky zápis a dlhší
   reťazec ním na mobile roztlačil stĺpec mriežky tak, že vedľajší lámal text po slove. */
.stat__num--sm { white-space: normal; }

/* Predstavenie pod úvodom /v6. Tá istá skladba ako „O mne“, ale nižšia a s textom na
   stred: nabieha hneď po celoobrazovkovom videu, takže nesmie pôsobiť ako druhá titulka.
   Na „O mne“ je zarovnanie na spodok správne — tam je to prvá vec na stránke. */
.about-hero--intro { padding-top: var(--s-8); }
.about-hero--intro .about-hero__grid { align-items: center; }
/* Uzsi stlpec, nie nizsia fotka: max-height by fotku zmensil vnutri stlpca a vedla nej
   by ostala diera. */
@media (min-width: 1025px) {   /* rovnaky zlom ako site.css, kde sa .about-hero stlpi */
  .about-hero--intro .about-hero__grid { grid-template-columns: 0.62fr 1fr; }
}

/* ─── Titulka · „Hosť v médiách“ ako aktívne logá ───────────
   Klient 13.10.2026: „sú tam len uvedené média … je to len text“. Tie isté jednofarebné
   logá ako na /o-mne (assets/img/media, čierny atrament na priehľadnom pozadí), každé je
   odkaz na jeho vystúpenie; na konci odkaz na celý zoznam (/o-mne#media). */
.press--logos .press__inner { row-gap: 1.5rem; }
.press__marks {
  list-style: none; margin: 0 0 0 auto; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem 2.25rem;
}
.press__marks a { display: block; padding: .35rem 0; }
.press__marks img {
  display: block; height: var(--h, 22px); width: auto;
  opacity: .62; transition: opacity .2s ease;
}
.press__marks a:hover img, .press__marks a:focus-visible img { opacity: 1; }
.press__all {
  color: var(--paper-ink); text-decoration: none;
  border-bottom: 1px solid var(--gold-2); padding-bottom: 2px;
  white-space: nowrap;
}
.press__all:hover { color: var(--gold-2); }
@media (max-width: 900px) {
  .press__marks { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .press__marks { gap: 1rem 1.6rem; }
  .press__marks img { height: calc(var(--h, 22px) * .8); }
}

/* AbbVie (klient 13.10.2026: „do firiem by sme mohli dať logo AbbVie“). Je medzi
   vybranými klientmi, preto stojí v stene sám v prvom riadku cez oba stĺpce — 1 + 2×3,
   nie siedme logo, ktoré by mriežke nechalo dieru. Značka je oficiálny wordmark
   (Wikimedia Commons, AbbVie_logo.svg) prefarbený na bielo ako ostatné v mark/. */
.pfirm__wall .pfirm__wall-lead { grid-column: 1 / -1; }
.pfirm__wall .m-abbvie { max-height: 22px; }

/* ═══ Texty III. — klient 19. 10. 2026 (CRM 2586, intx 27806) ═══════════════════════════ */

/* „Zjednotiť font na tučné“ (pri desiatke nadpisov). Zvýraznené slovo v nadpise (<em>) malo
   z site.css font-weight 400, takže polovica nadpisu bola tenká. Teraz celý nadpis jednou
   váhou — tou, ktorú má sám nadpis. (O mne h1 je zámerne tenší; em ide s ním.) */
.hero__title em, .headline em, .pillar__title em, .pillar--dark .pillar__title em,
.service__title em, .cta-band h2 em, .page-hero h1 em, .display em,
.level__title em, .value__title em, .quote-band blockquote em,
.athletes__head h2 em, .timeline__head h2 em, .refs-section--dark h2 em,
.about-hero h1 em, .contact__head h1 em, .book h1 em, .refs-hero h1 em,
.bio__head .headline em, .method__head .headline em, .podcast__head .headline em {
  font-weight: inherit !important;
}

/* Biznis: fotka medzi úvodom a citátom „Game Day Every Day“ — klient chcel úvodné texty
   predeliť fotkou. Záber z prednášky, tvár je v hornej tretine, ruky v dolnej. */
.biz-photo { padding: 0 0 var(--s-8); background: var(--paper); }
.biz-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: 52% 12%;
  filter: grayscale(1);
}
@media (max-width: 760px) {
  .biz-photo img { aspect-ratio: 4 / 3; object-position: 55% 30%; }
}

/* Biznis „Spolupracoval som aj“: sedem značiek (pribudlo AbbVie, Infinity → Invelity). Sedem
   do mriežky nesadne bez diery, preto flex so zarovnaním na stred — na desktope jeden rad. */
.biz-logos { display: flex; flex-wrap: wrap; justify-content: center; }
.biz-logos__item { flex: 0 0 calc((100% - 6rem) / 7); }
@media (max-width: 900px) { .biz-logos__item { flex-basis: calc((100% - 3rem) / 4); } }
@media (max-width: 480px) { .biz-logos__item { flex-basis: calc((100% - 2rem) / 3); padding: .9rem; } }
/* Dlaždice zo starého webu sú biely štvorec so značkou v strede; vektorové značky dostanú ten
   istý biely štvorec (rovnaká opacita, takže vyzerajú rovnako), značka v ňom s okrajom. */
.biz-logos__item--svg img {
  width: 100%; height: auto; max-height: none;
  aspect-ratio: 1; object-fit: contain;
  box-sizing: border-box; padding: 0 17%;
  background: #fff;
}

/* Titulka, stena „Spolupracoval som aj“: AbbVie a Invelity (súčasní klienti) v prvom rade
   vedľa seba, pod nimi pôvodných šesť — 2 × 4 bez diery. */
.pfirm__wall .m-invelity { max-height: 15px; }

/* Ochrana osobných údajov — dlhý text, čitateľná šírka a hierarchia. */
.legal__body { max-width: 72ch; }
.legal__body h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 1.6vw, 1.55rem); letter-spacing: -0.015em;
  margin: 2.6rem 0 .8rem;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p, .legal__body li { font-size: 1.02rem; line-height: 1.75; color: var(--paper-ink, inherit); }
.legal__body ul { padding-left: 1.2rem; margin: 0; }
.legal__body li + li { margin-top: .55rem; }
.legal__body a { text-decoration: underline; text-underline-offset: .2em; }
.site-foot__bottom a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* Podcast: jeho text z 19. 10. má štyri vety — v plnej veľkosti .lede bol ťažký blok. */
.podcast__lede.lede { font-size: clamp(1.05rem, 1.2vw, 1.28rem); line-height: 1.6; }
/* Kniha: „ako“ v nadpise bolo o 20 % väčšie (pozostatok kurzívy). Pri jednotnom tučnom písme
   pôsobilo ako chyba — klient chce nadpis „A vy sa ako máte?“ jednotný. */
.page-kniha .book h1 em { font-size: 1em; display: inline; }

/* ─── Texty IV. (klient 22. 10. 2026, CRM 2586, intx 28826–28829) ─────────────────── */
/* Horná lišta nad tmavým úvodom (titulka, O mne, Kontakt) „do čiernej farby, aby sme to
   zosúladili“. Bola polopriehľadná čierna nad svetlým pozadím stránky, takže na oko sivá.
   Po odskrolovaní na svetlé sekcie sa vracia svetlá lišta ako doteraz. (/v5 má vlastný spád.) */
.site-nav.is-dark { background: var(--ink); border-bottom-color: var(--ink); }

/* O mne a Šport: meno / nadpis a text „vyššie vedľa fotky, aby sa to na monitore PC zobrazilo
   ako kompaktný celok“ (jeho dva printscreeny). Fotka je na počítači vysoká najviac na výšku
   okna, text je zvislo na stred vedľa nej — celý úvod je na jednej obrazovke. Telefón bez zmeny. */
@media (min-width: 1025px) {
  .about-hero:not(.about-hero--intro) { padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
  .about-hero:not(.about-hero--intro) .about-hero__grid {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .about-hero:not(.about-hero--intro) .about-hero__media {
    height: clamp(440px, calc(100vh - var(--nav-h, 86px) - 7rem), 760px);
    width: auto;
    aspect-ratio: 4 / 5;
  }
}

/* Kontakt: „Hovorme o tom, čo potrebujete.“ — veľkosť ostáva, nie tučným. */
.contact__head h1 { font-weight: 400 !important; }

/* Veróny OAS a Press Play — logá z ich webov (22. 10. 2026). Široké Veróny ako DATALAN,
   vysoké Press Play ako Cogniware, aby v mriežke vážili rovnako. */
.pfirm__wall .m-verony    { max-height: 20px; }
.pfirm__wall .m-pressplay { max-height: 40px; }
.biz-logos__item { flex-basis: calc((100% - 8rem) / 9); }
@media (max-width: 900px) { .biz-logos__item { flex-basis: calc((100% - 3rem) / 4); } }
@media (max-width: 480px) { .biz-logos__item { flex-basis: calc((100% - 2rem) / 3); } }

/* ─── Kniha: celá obálka aj obe tlačidlá na prvej obrazovke (klient 25.10.2026, Texty V.) ───
   Na jeho notebooku končila obálka aj tlačidlá pod okrajom okna: 9rem nad sekciou + obálka
   vysoká 614 px. Na počítači je teraz menej miesta nad sekciou a obálka sa zmestí do výšky okna. */
.page-kniha .book--hero { padding-top: clamp(5rem, 9vw, 9rem); }
@media (min-width: 1025px) {
  .page-kniha .book--hero {
    padding-top: clamp(1.5rem, 4svh, 3rem);
    padding-bottom: clamp(2.5rem, 6svh, 4.5rem);
  }
  .page-kniha .book--hero .book__art img {
    width: auto; max-width: min(100%, 460px);
    max-height: calc(100svh - var(--nav-h, 72px) - clamp(3.5rem, 9svh, 6rem));
  }
}

/* Kniha · O knihe v médiách — karty sú odkazy (klient 25.10.2026, Texty V.). */
.book-press__card {
  display: flex; flex-direction: column;
  padding: 1.75rem; background: var(--paper-2); border: 1px solid var(--paper-line);
  color: inherit; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.book-press__card:hover, .book-press__card:focus-visible { border-color: var(--paper-ink); transform: translateY(-2px); }
.book-press__foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: auto; padding-top: 1rem;
  color: var(--paper-muted); font-size: .9rem;
}
.book-press__cta { color: var(--paper-ink); border-bottom: 1px solid var(--gold-2); white-space: nowrap; }

/* Biznis · úvod s jeho fotkou (klient 25.10.2026, „Biznis úvodná fotka“). Nahradil dočasný
   široký pás .biz-photo. Telefón: text, pod ním fotka. Počítač: text vľavo, fotka vpravo,
   vysoká najviac na výšku okna — ako úvod na O mne a Športe. */
.biz-intro { display: grid; gap: var(--s-7, 2.5rem); }
.biz-intro .page-hero__lede { margin-top: var(--s-6, 1.75rem); max-width: 46ch; }
.biz-intro__media { aspect-ratio: 4 / 5; overflow: hidden; max-width: 520px; }
.biz-intro__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 1025px) {
  .page-hero--photo { padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
  .biz-intro { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
  .biz-intro__media {
    height: clamp(420px, calc(100vh - var(--nav-h, 86px) - 7rem), 720px);
    width: auto; max-width: none;
  }
}