/* ============================================================
   Ettore Bellucci — design tokens & base
   Mirrors pencil design (untitled.pen): olive / cream palette,
   editorial typography, paper-texture overlay on cream sections.
   ============================================================ */

/* Lokálne fonty — žiadna sieťová závislosť, žiadny FOUT na fallback.
   `font-display: swap` necháva text viditeľný počas (krátkeho) načítania
   .woff2 zo `/assets/fonts/`. */

/* Playfair Display — heading + logo font. Single weight 400 (Regular + Italic),
   self-hosted, latin + latin-ext subsety s unicode-range (browser stiahne len
   tie, ktoré stránka reálne potrebuje). */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-400-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-400-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-400-ext-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/barlow-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/barlow-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/barlow-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/barlow-semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-semibold.woff2') format('woff2');
}
/* Bodoni Moda (Google Fonts, OFL) — roman + italic. Číselné akcenty
   (credential 01–04) a services page (hero/tituly upright, čísla/citáty italic).
   Latin subset (U+0000–00FF) obsahuje číslice. */
@font-face {
    font-family: 'Bodoni Moda';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/assets/fonts/bodoni-moda.woff2') format('woff2');
}
@font-face {
    font-family: 'Bodoni Moda';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('/assets/fonts/bodoni-moda-italic.woff2') format('woff2');
}

/* Cormorant Garamond — refined garalde serif pre eyebrow CAPS labels.
   Variable weight súbor (300–700). Caps-tracked s 0.18em letter-spacing
   pôsobí refined / editorial namiesto „tech startup" vibe Barlow Semibold. */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond.woff2') format('woff2');
}

:root {
    /* ──────────────────────────────────────────────────────────────
       Farby — 4-color systém (Style Guide bi8Au). Veľa premenných
       mapuje na rovnakú zo štyroch farieb (zámerne — zjednodušený
       systém). Zdroj pravdy: pencil variables.
         White     #F5F3EE  backgrounds & text-on-dark
         Black     #0d0e0b  primary text & footer
         Green     #6B7050  brand, dark sections & accents
         Secondary #B89968  warm accent & subtle borders
       ────────────────────────────────────────────────────────────── */
    --accent-primary: #6B7050;          /* Green */
    --accent-warm: #B89968;             /* Secondary */
    --border-strong: #6B7050;           /* Green */
    --border-subtle: #B89968;           /* Secondary */
    --foreground-inverse: #F5F3EE;      /* White */
    --foreground-inverse-muted: #F5F3EE;/* White */
    --foreground-muted: #6B7050;        /* Green */
    --foreground-primary: #0d0e0b;      /* Black */
    --foreground-secondary: #0d0e0b;    /* Black */
    --surface-inverse: #6B7050;         /* Green */
    --surface-inverse-deep: #0d0e0b;    /* Black */
    --surface-primary: #F5F3EE;         /* White */
    --surface-secondary: #F5F3EE;       /* White */

    /* Font families. Heading = Playfair; body/caption = Barlow;
       eyebrow = Cormorant Garamond (refined serif, editorial vibe pre
       CAPS labels — predtým Barlow, ten pôsobil prilis „tech"). */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Barlow', system-ui, sans-serif;
    --font-caption: 'Barlow', system-ui, sans-serif;
    --font-eyebrow: 'Cormorant Garamond', Georgia, serif;
    /* Číselný akcent (credential 01–04) — Bodoni Moda italic. */
    --font-numeral: 'Bodoni Moda', Georgia, serif;

    /* ──────────────────────────────────────────────────────────────
       Type scale — Style Guide bi8Au deklaruje 4 primárne veľkosti
       (50 / 40 / 24 / 16). Service karty majú navyše 30 (title) a 12
       (eyebrow) — viazané výhradne na ne. Nikdy nepoužívať číselný
       font-size mimo týchto premenných.

         --fs-h1      50  Hero H1 (Teaching, Consulting…)
         --fs-h2      40  Section headings, stats numbers, citát, Caro Ettore
         --fs-h3      24  Hero sub, blog/credential titles, about italic, "+"
         --fs-body    16  Body, nav, eyebrow labels, form
         --fs-card-title   30  Service card titles (Restaurant Consulting…)
         --fs-card-eyebrow 14  Service card eyebrows (CREATE DINING…)
       ────────────────────────────────────────────────────────────── */
    --fs-h1: 50px;
    --fs-h2: 40px;
    --fs-h3: 24px;
    --fs-body: 16px;
    --fs-card-title: 30px;
    --fs-card-eyebrow: 14px;

    /* Legacy aliasy — kým ostatné stránky (About/Services/Writing/…)
       neprejdú na nový systém. Mapujú na najbližší nový bucket, takže
       sa nerozbijú; doladia sa pri ich redizajne. */
    --fs-display: 50px;
    --fs-h4: 24px;
    --fs-em: 24px;
    --fs-bd-sm: 16px;
    --fs-meta: 16px;
    --fs-eyebrow: 16px;

    /* Weights — 3 hodnoty */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* Line-heights */
    --lh-tight: 1.1;     /* Headings */
    --lh-snug: 1.2;      /* Card titles */
    --lh-base: 1.5;      /* Form inputs, captions */
    --lh-relaxed: 1.7;   /* Body text */

    /* Letter-spacings */
    --ls-eyebrow: 0.15em;  /* CAPS labels (pencil 2.4px @ 16px) */
    --ls-cta: 0.108em;     /* CTA uppercase */
    --ls-footer: 0.019em;  /* Footer copyright (pencil 0.3px @ 16px) */
    --ls-nav: 0.0125em;    /* Nav links (pencil 0.2px @ 16px) */
    --ls-body: 0;          /* Default */
    --ls-heading: 0;       /* Všetky --font-heading (Playfair Display) texty */

    /* Motion — jednotná easing zásoba pre všetky animácie (scroll-reveal,
       header). Mäkký ease-out, zhodný s manifesto reveal. */
    --ease-editorial: cubic-bezier(.22, .61, .36, 1);

    /* Spacing rhythm.
       Pencil sekcie majú padding[…,70] — to je IBA indikátor max šírky
       contentu (1440 − 2·70 = 1300), nie fixný gutter. Preto:
         --content-max  = 1300  reálna max šírka obsahu (centrovaný)
         --container-pad-x = responsive gutter, max 70 na ≥1440, menší nižšie
       Sekcie sú full-bleed (pozadie cez celú šírku); obsah obaľuje .container,
       ktorý ho capne na 1300 a vycentruje. */
    --container-max: 1440px;
    --content-max: 1300px;
    --container-pad-x: clamp(24px, 5vw, 70px);
    --section-pad-y: 100px;
    --article-col: 880px;

    /* Paper texture (multiply, 0.45 alpha as in pencil) */
    --paper-texture: url('/assets/images/paper-texture.webp');
    --olive-farm: url('/assets/images/olive-farm.webp');

    /* Výška site-headera — fixne ~112px (logo 2 riadky + 32px paddingy
       hore/dole). Hero ju odpočítava aby celý zaplnil zvyšok viewportu. */
    --header-height: 112px;
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--foreground-primary);
    background: var(--surface-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { padding-left: 1.2em; }
/* Reset váh nadpisov (inak by <h1>–<h6> dostali UA bold 700). H1 = semibold
   (600), H2 = medium (500), zvyšok regular. font-synthesis: style necháva faux
   italic — Cormorant Garamond (roman variabilný súbor) nemá italic rez. */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-regular);
    font-synthesis: style;
}
h1 { font-weight: var(--fw-medium); }   /* 500 */
h2 { font-weight: var(--fw-medium); }      /* 500 */

/* ============================================================
   Typography — všetky veľkosti idú cez 10 typo tokens v :root.
   ============================================================ */
.h-display, .h1, .h2, .h3, .h4 {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);       /* 500 baseline pre nadpisy */
    color: var(--foreground-primary);
    margin: 0;
}
.h-display, .h1 { font-weight: var(--fw-medium); }   /* 500 */
.h-display { font-size: var(--fs-display); line-height: var(--lh-tight); }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

.lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-em);
    line-height: var(--lh-base);
    color: var(--foreground-secondary);
}

.eyebrow {
    font-family: var(--font-eyebrow);
    font-size: var(--fs-eyebrow);
    font-weight: 500;                 /* Cormorant medium — refined, nie chunky */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

.eyebrow-rule {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.eyebrow-rule::before,
.eyebrow-rule--double::after {
    content: '';
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.italic-quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--foreground-primary);
}

/* ============================================================
   Layout containers
   ============================================================ */
.container {
    width: 100%;
    max-width: calc(var(--content-max) + var(--container-pad-x) * 2);
    margin-inline: auto;
    padding-inline: var(--container-pad-x);
}
.container--narrow { max-width: calc(var(--article-col) + var(--container-pad-x) * 2); }
.container--article { max-width: var(--article-col); margin-inline: auto; }

/* Sekciový wrapper — full-bleed background na <section>, obsah obalený sem.
   Identické správanie ako .container (1300 max, centrovaný, responsive gutter). */
.wrap {
    width: 100%;
    max-width: calc(var(--content-max) + var(--container-pad-x) * 2);
    margin-inline: auto;
    padding-inline: var(--container-pad-x);
}

.section { padding-block: var(--section-pad-y); }
.section--compact { padding-block: 80px; }
.section--tall { padding-block: 160px; }
.section--cream { background: var(--surface-secondary); position: relative; }
.section--cream::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--paper-texture) center/cover;
    mix-blend-mode: multiply;
    opacity: 0.45;
    pointer-events: none;
}
.section--cream > * { position: relative; z-index: 1; }
.section--dark {
    background:
        var(--olive-farm) center/cover,
        var(--surface-inverse);
    background-blend-mode: multiply;
    color: var(--foreground-inverse);
    position: relative;
}
.section--dark .eyebrow,
.section--dark .lead { color: var(--foreground-inverse-muted); }
.section--dark .italic-quote { color: var(--foreground-inverse); }
.section--dark a { color: var(--foreground-inverse); }
.section--dark hr { border-color: rgba(237,237,216,0.21); }

.section--bordered-top { border-top: 1px solid var(--border-subtle); }
.section--bordered-bottom { border-bottom: 1px solid var(--border-subtle); }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
    background: var(--surface-secondary);
    /* Sticky + kondenzácia po scrolle (stavy v Motion sekcii). */
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border-subtle);
    transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--paper-texture) center/cover;
    mix-blend-mode: multiply;
    opacity: 0.45;
    pointer-events: none;
}
.site-header > * { position: relative; z-index: 1; }
/* Pencil j7m4o: padding [20,70], 3 skupiny space_between, logo v strede.
   Capnuté na content-max (1300) a centrované ako zvyšok stránky. */
.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: calc(var(--content-max) + var(--container-pad-x) * 2);
    margin-inline: auto;
    padding: 20px var(--container-pad-x);
    gap: 30px;
    transition: padding .3s var(--ease-editorial);
}
.site-logo { display: block; line-height: 1; text-align: center; }
.site-logo .logo-name {
    font-family: var(--font-heading);    /* logo zdieľa heading font (Playfair Display 400) */
    font-size: var(--fs-h2);             /* 40 — pencil logo 40 */
    color: var(--foreground-primary);
    display: block;
}
.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-menu--left  { justify-content: flex-start; }
.nav-menu--right { justify-content: flex-end; }
.nav-menu-link {
    font-family: var(--font-body);
    font-size: var(--fs-body);           /* 16 */
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-nav);
    color: var(--foreground-primary);
    transition: color 0.15s;
}
.nav-menu-link:hover { color: var(--accent-primary); }

.nav-toggle { display: none; }

/* Mobilný hamburger — pure-CSS toggle (checkbox #nav-toggle). Skrytý na
   desktope; zobrazený a aktívny až v @media (max-width:700px). */
.nav-burger {
    display: none;
    flex-direction: column; justify-content: center;
    gap: 5px; width: 30px; height: 24px;
    cursor: pointer; padding: 0;
}
.nav-burger span {
    display: block; height: 2px; width: 100%;
    background: var(--foreground-primary);
    transition: transform .3s ease, opacity .25s ease;
}
body.theme-dark .nav-burger span { background: var(--foreground-inverse); }

/* Inverse header (used on Contact page) */
body.theme-dark .site-header { background: transparent; border-bottom: 0; }
body.theme-dark .site-header::before { display: none; }
body.theme-dark .site-logo .logo-name,
body.theme-dark .nav-menu-link { color: var(--foreground-inverse); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background: var(--surface-inverse-deep);
    color: var(--foreground-inverse-muted);
}
.site-footer .container {
    padding-block: 36px;
    display: flex;
    justify-content: center;
}
.footer-copy {
    font-size: var(--fs-eyebrow);        /* 13 */
    letter-spacing: var(--ls-footer);
}
.footer-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(245, 243, 238, 0.35);
    text-underline-offset: 3px;
    opacity: 0.85;
    transition: text-decoration-color 160ms ease, opacity 160ms ease, color 160ms ease;
}
.footer-link:hover {
    opacity: 1;
    color: var(--accent-warm);
    text-decoration-color: currentColor;
}

/* ============================================================
   Buttons & links
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    font-family: var(--font-eyebrow);
    font-weight: 500;
    font-size: var(--fs-eyebrow);        /* 13 — CTA uppercase */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s;
}
.btn--solid {
    background: var(--surface-inverse);
    color: var(--foreground-inverse);
}
.btn--solid:hover { background: var(--surface-inverse-deep); }
.btn--ghost {
    background: transparent;
    color: var(--foreground-primary);
    border: 1px solid var(--foreground-primary);
    padding: 14px 28px;
}
.btn--ghost:hover { background: var(--foreground-primary); color: var(--surface-primary); }
.section--dark .btn--ghost { color: var(--foreground-inverse); border-color: var(--foreground-inverse); }
.section--dark .btn--ghost:hover { background: var(--foreground-inverse); color: var(--foreground-primary); }

/* Text + prípadná CTA šípka ostávajú na jednom riadku (link-underline je
   flex-column — bez wrappera by bola šípka druhý flex item a zalomila by sa
   pod text). Wrapper = jeden flex item, obsah plynie inline. */
.link-underline__row { display: inline-block; }
.link-underline {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);        /* 13 */
    font-weight: var(--fw-medium);
    color: var(--foreground-primary);
    width: max-content;
}
.link-underline::after {
    content: '';
    height: 1px;
    background: currentColor;
    width: 100%;
}
.section--dark .link-underline { color: var(--foreground-inverse); }

/* ============================================================
   Cards & lists
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; }

/* Service card on Home (3 small cards) */
.service-preview {
    display: flex; flex-direction: column; gap: 28px;
}
.service-preview__image {
    aspect-ratio: 4 / 3;
    background-position: center;
    background-size: cover;
    background-color: var(--border-subtle);
}
.service-preview__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);             /* 24 — card title */
    line-height: var(--lh-snug);
    color: var(--foreground-primary);
}
.service-preview__text {
    font-size: var(--fs-bd-sm);          /* 15 — service descriptions */
    line-height: var(--lh-relaxed);
    color: var(--foreground-secondary);
}

/* Stat block (Home "By the numbers") */
.stat { display: flex; flex-direction: column; gap: 18px; width: 200px; }
.stat__value {
    font-family: var(--font-heading);
    font-size: var(--fs-display);        /* 64 — Display D1 */
    line-height: 1;
    color: var(--foreground-primary);
}
.stat__label {
    font-family: var(--font-caption);
    font-size: var(--fs-eyebrow);        /* 13 */
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--foreground-muted);
}
.stat__text {
    font-size: var(--fs-meta);           /* 14 — italic stat notes */
    line-height: var(--lh-base);
    color: var(--foreground-secondary);
}

/* Writing list item (Earlier writing / Recent writing) */
.writing-item {
    display: grid;
    grid-template-columns: 140px 1fr 140px;
    gap: 48px;
    padding-block: 40px;
    border-top: 1px solid var(--border-subtle);
}
.writing-item__meta {
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--font-caption);
    font-size: var(--fs-eyebrow);        /* 13 */
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--foreground-muted);
}
.writing-item__date { color: var(--foreground-secondary); letter-spacing: var(--ls-footer); }
.writing-item__body { display: flex; flex-direction: column; gap: 12px; }
.writing-item__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);             /* 28 — sub heading */
    line-height: var(--lh-snug);
    color: var(--foreground-primary);
}
.writing-item__excerpt {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-em);             /* 20 — italic lead */
    line-height: var(--lh-base);
    color: var(--foreground-secondary);
}
.writing-item__read {
    align-items: flex-end;
    text-align: right;
    font-family: var(--font-caption);
    font-size: var(--fs-eyebrow);        /* 13 */
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--foreground-muted);
    display: flex; flex-direction: column; gap: 6px;
}

/* Featured article (Writing page top item) */
.writing-feature {
    display: grid;
    grid-template-columns: 660px 1fr;
    gap: 80px;
    padding-block: 80px;
    align-items: start;
}
.writing-feature__image {
    width: 100%; aspect-ratio: 660/520; background-position: center; background-size: cover;
}
.writing-feature__body { display: flex; flex-direction: column; gap: 28px; }
.writing-feature__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);             /* 36 — section heading */
    line-height: var(--lh-tight);
    color: var(--foreground-primary);
}

/* ============================================================
   Interlude (dark quote block)
   ============================================================ */
.interlude {
    text-align: center;
    padding-block: 140px;
}
.interlude__quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-h2);             /* 36 — section heading bucket */
    line-height: var(--lh-tight);
    color: var(--foreground-inverse);
    max-width: 960px;
    margin: 28px auto 28px;
}
.interlude__source {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-em);             /* 20 — italic emphasis */
    color: var(--foreground-inverse-muted);
}

/* ============================================================
   Article body (single writing/activity, manifesto)
   ============================================================ */
.article-hero {
    text-align: center;
    padding-block: 80px 60px;
}
.article-hero__back {
    display: inline-flex; gap: 8px; align-items: center;
    font-size: var(--fs-eyebrow);        /* 13 */
    font-weight: var(--fw-medium);
    margin-bottom: 16px;
}
.article-hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);             /* 56 — H1 bucket */
    line-height: var(--lh-tight);
    color: var(--foreground-primary);
    margin: 24px auto 0;
    max-width: 1000px;
}
.article-hero__subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-em);             /* 20 */
    line-height: var(--lh-base);
    color: var(--foreground-secondary);
    margin: 24px auto 0;
    max-width: 720px;
}
.article-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    font-family: var(--font-caption);
    font-size: var(--fs-eyebrow);        /* 13 */
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--foreground-muted);
}
.article-meta-list {
    display: inline-flex; align-items: center; gap: 32px;
    padding-top: 20px;
}
.article-meta-list__item {
    display: flex; flex-direction: column; gap: 4px;
    font-family: var(--font-caption);
    font-size: var(--fs-eyebrow);        /* 13 */
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--foreground-muted);
}
.article-meta-list__item strong {
    font-family: var(--font-heading);
    font-size: var(--fs-meta);           /* 14 — sub meta italic */
    font-style: italic;
    font-weight: var(--fw-regular);
    color: var(--foreground-primary);
    letter-spacing: 0;
    text-transform: none;
}
.article-meta-list__divider { width: 1px; height: 24px; background: var(--foreground-muted); opacity: 0.4; }

.article-figure {
    width: 100%;
    /* Full-bleed banner — stredná výška (medzi pôvodným 600 a slim 440). */
    aspect-ratio: 1440/500;
    max-height: 520px;
    background-position: center;
    background-size: cover;
}
.article-figure__caption {
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px var(--container-pad-x);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-meta);           /* 14 — photo caption */
    color: var(--foreground-muted);
}
.article-figure__caption .eyebrow { color: var(--foreground-muted); }

.article-body {
    padding-block: 100px 80px;
}
.article-body__lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-em);             /* 20 — italic lead */
    line-height: var(--lh-base);
    color: var(--foreground-primary);
    margin-bottom: 28px;
}
.article-body p {
    font-size: var(--fs-body);           /* 16 — body */
    line-height: var(--lh-relaxed);
    color: var(--foreground-secondary);
    margin: 0 0 28px;
}
.article-body blockquote {
    margin: 40px 0;
    padding: 24px 48px;
    border-left: 2px solid var(--accent-primary);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-em);             /* 20 — italic emphasis */
    line-height: var(--lh-base);
    color: var(--foreground-primary);
}
.article-body blockquote p { font-family: inherit; font-style: inherit; font-size: inherit; color: inherit; margin: 0; }
.article-body h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);             /* 28 — sub heading */
    line-height: var(--lh-snug);
    margin: 56px 0 24px;
    color: var(--foreground-primary);
}
.article-body h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);             /* 24 — card title bucket */
    margin: 48px 0 16px;
    color: var(--foreground-primary);
}
.article-body__signoff {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--foreground-muted);
}

/* ============================================================
   Hero (Home)
   ============================================================ */
.hero {
    position: relative;
    background-color: var(--surface-inverse);
    background-position: center;
    background-size: cover;
    /* Pencil tTqwr: fixná výška 700px. */
    height: 700px;
    color: var(--foreground-inverse);
    overflow: hidden;
}
/* Obsah hero capnutý na 1300 a centrovaný:
   vľavo portrét (Ettore cutout), vpravo text box. */
.hero__wrap {
    position: relative; z-index: 1;
    height: 100%;
    max-width: calc(var(--content-max) + var(--container-pad-x) * 2);
    margin-inline: auto;
    padding-inline: var(--container-pad-x);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}
.hero__portrait {
    align-self: flex-end;
    height: 100%;
    width: auto;
    max-width: 56%;
    object-fit: contain;
    object-position: bottom left;
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
    /* Jemný posun portrétu od ľavého okraja smerom do stredu (do voľnej
       zelenej plochy pred text boxom) — nie až na kraj obsahu. */
    margin-inline-start: clamp(20px, 5vw, 90px);
}
.hero__inner {
    align-self: stretch;
    max-width: 620px;
    padding-block: 80px;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 30px;
}
/* About / Services hero (page heroes) */
.page-hero { text-align: center; padding-block: 120px 80px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.page-hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);             /* 56 — Hero H1 bucket */
    line-height: var(--lh-tight);
    max-width: 1000px;
    color: var(--foreground-primary);
    margin: 0 auto;                      /* center within a block .container (generic page) */
}
.page-hero__lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-em);             /* 20 */
    line-height: var(--lh-base);
    color: var(--foreground-secondary);
    max-width: 720px;
    margin-inline: auto;                 /* center within a block .container (generic page) */
}

/* About — career chapters */
.career-chapter {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 80px;
    padding-block: 56px;
    border-top: 1px solid var(--border-subtle);
}
.career-chapter__years {
    display: flex; flex-direction: column; gap: 12px;
}
.career-chapter__year {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);             /* 28 */
    color: var(--foreground-primary);
}
.career-chapter__where {
    font-family: var(--font-caption);
    font-size: var(--fs-eyebrow);        /* 13 */
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--foreground-muted);
}
.career-chapter__body { display: flex; flex-direction: column; gap: 16px; }
.career-chapter__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);             /* 28 — sub heading */
    line-height: var(--lh-snug);
    color: var(--foreground-primary);
}
.career-chapter__text {
    font-size: var(--fs-body);           /* 16 — body */
    line-height: var(--lh-relaxed);
    color: var(--foreground-secondary);
}

/* Services — three rooms */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.room {
    display: flex; flex-direction: column; gap: 24px;
    padding: 40px 32px;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    position: relative;
}
.room__eyebrow { color: var(--foreground-muted); }
.room__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);             /* 24 — card title */
    line-height: var(--lh-snug);
    color: var(--foreground-primary);
}
.room__text {
    font-size: var(--fs-bd-sm);          /* 15 — service descriptions */
    line-height: var(--lh-relaxed);
    color: var(--foreground-secondary);
}

/* Services — formats list (dark section) */
.formats { display: flex; flex-direction: column; }
.format {
    display: grid;
    grid-template-columns: 180px 1fr 220px;
    gap: 64px;
    padding-block: 48px;
    border-top: 1px solid rgba(237,237,216,0.21);
    align-items: start;
}
.format:last-child { border-bottom: 1px solid rgba(237,237,216,0.21); }
.format__label {
    font-family: var(--font-caption);
    font-size: var(--fs-eyebrow);        /* 13 */
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--foreground-inverse-muted);
}
.format__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);             /* 24 — card title */
    color: var(--foreground-inverse);
    margin-bottom: 12px;
}
.format__text {
    font-size: var(--fs-bd-sm);          /* 15 */
    line-height: var(--lh-relaxed);
    color: var(--foreground-inverse-muted);
}
.format__price {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-em);             /* 20 — italic emphasis */
    color: var(--foreground-inverse-muted);
    text-align: right;
}

/* ============================================================
   Contact page (form)
   ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
}
.contact-info {
    display: flex; flex-direction: column; gap: 40px;
    color: var(--foreground-inverse);
}
.contact-info__item {
    display: flex; flex-direction: column; gap: 8px;
    padding-block: 22px;
    border-top: 1px solid var(--foreground-inverse-muted);
}
.contact-info__item:last-child { border-bottom: 1px solid rgba(237,237,216,0.4); }
.contact-info__label {
    font-family: var(--font-caption);
    font-size: var(--fs-eyebrow);        /* 13 */
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--foreground-inverse-muted);
}
.contact-info__value {
    font-family: var(--font-heading);
    font-size: var(--fs-em);             /* 20 — italic emphasis bucket */
    color: var(--foreground-inverse);
}
.contact-info__note {
    font-size: var(--fs-eyebrow);        /* 13 */
    color: var(--foreground-inverse-muted);
    font-style: italic;
}

.contact-form {
    background: var(--surface-primary);
    padding: 56px;
    position: relative;
    display: flex; flex-direction: column; gap: 32px;
}
.contact-form::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--paper-texture) center/cover;
    mix-blend-mode: multiply;
    opacity: 0.45;
    pointer-events: none;
}
.contact-form > * { position: relative; z-index: 1; }
.contact-form__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);             /* 40 — form heading "Caro Ettore" bucket */
    line-height: var(--lh-tight);
    color: var(--foreground-primary);
}
.contact-form__title--italic { font-style: italic; }
.contact-form__subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--foreground-primary);
    margin: 0;
}
.letter-form__head { display: flex; flex-direction: column; gap: 12px; }
.letter-form { display: flex; flex-direction: column; gap: 28px; }
.letter-form__foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 24px; flex-wrap: wrap; padding-top: 8px;
}
.letter-form__note {
    margin: 0; margin-right: auto;
    font-family: var(--font-heading); font-style: italic;
    font-size: var(--fs-body); color: var(--foreground-muted);
}
/* GDPR consent under both forms — inherits the form's text colour so it works
   on light and dark form backgrounds. */
.form-consent {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 18px;
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);      /* 13 — fine print */
    line-height: var(--lh-base);
    color: inherit; opacity: 0.85;
}
.form-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent-primary); }
.form-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-consent a:hover { color: var(--accent-warm); }
/* Primary button — plný (zelený) → hover outline (priehľadná výplň + zlatý
   okraj), zhodný jazyk s hero primary tlačidlom. Na svetlom pozadí text na
   hover stmavne (biely by zmizol). Zdieľa contact submit + actualities reg. */
.btn-letter {
    background: var(--accent-primary);
    color: var(--foreground-inverse);
    font-family: var(--font-eyebrow);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 16px 44px;
    border: 1px solid transparent; cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.btn-letter:hover { background: transparent; border-color: var(--accent-warm); color: var(--foreground-primary); }
.contact-form .row,
.letter-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label,
.field-label {
    font-family: var(--font-eyebrow);
    font-size: var(--fs-eyebrow);        /* 13 */
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}
.field-block { display: flex; flex-direction: column; gap: 16px; }
.form-field input,
.form-field textarea,
.form-field select {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-body);           /* 16 — body / form input */
    color: var(--foreground-primary);
    outline: none;
}
.form-field input:focus,
.form-field textarea:focus { border-bottom-color: var(--accent-primary); }
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field textarea::placeholder {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--foreground-muted);
}

.chip-group { display: flex; gap: 14px; }
.chip {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 18px;
    border: 1px solid var(--border-strong);
    font-family: var(--font-eyebrow);
    font-weight: 500;
    font-size: var(--fs-body);           /* 16 — sentence case */
    color: var(--foreground-primary);
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    transition: background .2s, color .2s, border-color .2s;
}
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chip:hover { border-color: var(--accent-primary); }
.chip:has(input:checked) {
    background: var(--accent-primary);
    color: var(--foreground-inverse);
    border-color: var(--accent-primary);
}

/* ============================================================
   Newsletter block (Writing)
   ============================================================ */
.newsletter {
    display: grid;
    grid-template-columns: 560px 1fr;
    gap: 96px;
    padding-block: 120px;
    align-items: center;
}
.newsletter__head { display: flex; flex-direction: column; gap: 24px; }
.newsletter__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);             /* 36 — section heading */
    line-height: var(--lh-tight);
    color: var(--foreground-inverse);
}
.newsletter__lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-em);             /* 20 — italic lead */
    line-height: var(--lh-base);
    color: var(--foreground-inverse-muted);
}
.newsletter__form { display: flex; flex-direction: column; gap: 20px; }
.newsletter__form .form-field input { color: var(--foreground-inverse); border-bottom-color: var(--foreground-inverse-muted); }
.newsletter__form .form-field label { color: var(--foreground-inverse-muted); }

/* ============================================================
   Pagination / showing X of Y
   ============================================================ */
.list-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding-block: 56px;
    border-top: 1px solid var(--border-subtle);
}
.list-footer__count {
    font-family: var(--font-body);
    font-size: var(--fs-meta);           /* 14 — sub-meta */
    color: var(--foreground-muted);
}

/* Generic horizontal rule used inside sections */
.hr {
    border: 0;
    height: 1px;
    background: var(--border-subtle);
    margin: 0;
}

/* ============================================================
   HOME REDESIGN 2026 — komponenty 1:1 z pencil CrBkh
   ============================================================ */

/* Hero (tTqwr) */
.hero__intro { display: flex; flex-direction: column; gap: 10px; }
.hero__motto {
    /* Cormorant Garamond italic (nie Playfair) — Playfair italic má ozdobný
       terminál na „N", ktorý presahuje nad nasledujúce „i" a číta sa ako druhá
       bodka („Nïhil"). Robí to aj originálny Playfair, tracking to nevyrieši.
       Cormorant italic vykreslí „Nihil" čisto s jednou bodkou + je to brand font. */
    font-family: var(--font-eyebrow);   /* 'Cormorant Garamond', Georgia, serif */
    font-style: italic;
    font-weight: var(--fw-regular);
    font-size: var(--fs-h3);             /* 24 */
    line-height: 1.7;
    color: var(--foreground-inverse);
    margin: 0;
}
.hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);             /* 50 */
    line-height: var(--lh-tight);
    color: var(--foreground-inverse);
    margin: 0;
}
.hero__foot { display: flex; flex-direction: column; gap: 28px; }
.hero__chips { display: flex; align-items: center; gap: 28px; }
.hero-chip {
    font-family: var(--font-eyebrow);
    font-weight: 500;
    font-size: var(--fs-body);           /* 16 */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--foreground-inverse);
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* Plný button (HOTELLERIE) — hover: outline (priehľadná výplň + zlatý okraj).
   Border 1px transparent v pokoji drží rozmer, na hover len zozlatne. */
.hero-chip--filled {
    background: #41432a;
    padding: 16px 26px;
    border: 1px solid transparent;
}
.hero-chip--filled:hover {
    background: transparent;
    border-color: var(--accent-warm);
}
/* Podčiarknutý button (FOOD & WINES) — biela linka pod textom; hover:
   zlatá 2px linka sa roztiahne zľava doprava cez ňu. */
.hero-chip:not(.hero-chip--filled) {
    position: relative;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(245, 243, 238, 0.7);
}
.hero-chip:not(.hero-chip--filled)::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--accent-warm);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s ease;
}
.hero-chip:not(.hero-chip--filled):hover::after { transform: scaleX(1); }
.hero-stats {
    display: flex; align-items: center; gap: 24px;
    padding-top: 16px;
    border-top: 2px solid rgba(245,243,238,0.3);
}
.hero-stats__divider { width: 1px; height: 60px; background: rgba(245,243,238,0.3); }
.hero-stat { display: flex; flex-direction: column; gap: 8px; }
.hero-stat__value {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);             /* 40 */
    line-height: 1;
    color: var(--foreground-inverse);
}
.hero-stat__suffix { font-size: var(--fs-h3); color: var(--foreground-inverse); margin-left: 4px; }
.hero-stat__label {
    font-size: var(--fs-body);           /* 16 */
    line-height: 1.4;
    color: var(--foreground-inverse);
    white-space: nowrap;
}

/* Services — image karty (HTXkv/cUoTA/feQRv, 412×442) */
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.service-card {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    height: 442px;
    padding: 32px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: var(--foreground-inverse);
    text-decoration: none;
}
.service-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,14,11,0) 35%, rgba(13,14,11,0.85) 100%);
    transition: background .4s ease;
    pointer-events: none;
}
.service-card:hover::before {
    background: linear-gradient(180deg, rgba(13,14,11,0.5) 0%, rgba(13,14,11,0.82) 100%);
}
/* Stretched-link cover — celá karta odkazuje na /services#slug; CTA vnútri má
   vlastný link na /#contact (HTML nedovoľuje vnorené <a>, preto tento vzor). */
.service-card__cover { position: absolute; inset: 0; z-index: 1; }
.service-card__body {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    gap: 14px;
    pointer-events: none;   /* kliky padajú cez text na cover */
}
.service-card__rule { height: 1px; background: rgba(245,243,238,0.6); width: 100%; }
.service-card__eyebrow { font-family: var(--font-eyebrow); font-weight: 500; letter-spacing: 0.12em; font-size: var(--fs-card-eyebrow); text-transform: uppercase; color: var(--foreground-inverse); }
.service-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-card-title);     /* 30 */
    letter-spacing: 0.067em;
    line-height: 1.2;
    color: #e3e3e3;
}
.service-card__reveal {
    display: flex; flex-direction: column; gap: 26px;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .45s ease, opacity .4s ease, margin-top .45s ease;
}
.service-card:hover .service-card__reveal {
    max-height: 320px; opacity: 1; margin-top: 4px;
}
.service-card__desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-inverse);
}
.service-card__cta {
    align-self: flex-end;
    border: 1px solid var(--border-subtle);
    color: var(--foreground-inverse);
    font-family: var(--font-eyebrow);
    font-weight: 500;
    font-size: var(--fs-body);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 14px 30px;
    text-decoration: none;
    pointer-events: auto;   /* CTA samotné je klikateľné (smeruje na #contact) */
    transition: background .3s ease, color .3s ease;
}
.service-card__cta:hover {
    background: var(--border-subtle);
    color: var(--surface-inverse-deep);
}

/* Manifesto (cvTXL) */
.manifesto-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.manifesto-cols p {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-secondary);
    margin: 0;
}
.manifesto-quote {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding-block: 24px;
}
.manifesto-quote__rule { width: 56px; height: 2px; background: var(--accent-warm); opacity: 0.6; }
.manifesto-quote__text {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-h2);             /* 40 */
    line-height: 1.25;
    text-align: center;
    color: var(--foreground-primary);
    max-width: 960px;
    margin: 0;
}

/* Manifesto inline accordion — namiesto prechodu na /manifesto sa rozbalí
   plná esej priamo v sekcii. Čistý CSS (checkbox toggle), JS len pre scroll.
   Intro teaser ostáva viditeľný; pod citátom sa rozvinie zvyšok eseje (prvý
   duplicitný odsek je odstránený v PHP). grid-template-rows 0fr↔1fr animuje
   výšku nezávisle od dĺžky obsahu. */
.manifesto-full {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .7s cubic-bezier(.22,.61,.36,1), opacity .55s ease;
}
.manifesto-full__inner { overflow: hidden; min-height: 0; }
.manifesto-toggle:checked ~ .manifesto-full { grid-template-rows: 1fr; opacity: 1; }
/* Centrovaný čitateľný stĺpec + jemný posun obsahu pri rozbalení. */
.manifesto-full__inner.article-body {
    padding-block: 0;
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    transform: translateY(10px);
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.manifesto-toggle:checked ~ .manifesto-full .manifesto-full__inner { transform: translateY(0); }
.manifesto-full__inner.article-body > :first-child { margin-top: 0; }
/* Blockquote v centrovanej esej — bez ľavého accent pruhu, vycentrovaný. */
.manifesto-full__inner.article-body blockquote {
    border-left: 0;
    padding-inline: 0;
    margin-inline: auto;
    max-width: 560px;
}
.manifesto-toggle__btn { cursor: pointer; user-select: none; }
.manifesto-toggle__less { display: none; }
.manifesto-toggle:checked ~ .manifesto-toggle__btn .manifesto-toggle__more { display: none; }
.manifesto-toggle:checked ~ .manifesto-toggle__btn .manifesto-toggle__less { display: inline; }

/* About Ettore (KEl7v) — radial green gradient */
.about-section {
    background-color: var(--surface-inverse);
    background-image: url('/assets/images/hero-bg.webp');
    background-size: cover;
    background-position: center;
    color: var(--foreground-inverse);
    padding-block: 100px;
}
.about-section > .wrap { display: flex; flex-direction: column; gap: 40px; }
.about-grid { display: grid; grid-template-columns: 380px 1fr; gap: 50px; align-items: end; }
/* Podkladový panel za portrétom — rovnaký fill/okraj/tieň ako credential
   karty dole; Ettore (výrez) "stojí" v ráme namiesto plávania na ploche. */
.about-grid__portrait {
    align-self: end;
    background: rgba(13, 14, 11, 0.55);
    border: 1px solid rgba(245, 243, 238, 0.16);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    /* Výrez je vpravo (vľavo ~10 % priehľadné) — viac paddingu vpravo to vyváži. */
    padding: 30px 40px 0 16px;
    overflow: hidden;
}
.about-grid__portrait img { width: 100%; height: auto; display: block; }
.about-grid__body { display: flex; flex-direction: column; gap: 32px; }
.about-grid__text { display: flex; flex-direction: column; gap: 20px; }
.about-grid__lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-h3);             /* 24 */
    line-height: 1.5;
    color: var(--foreground-inverse);
    margin: 0;
}
.about-grid__body-p {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-inverse);
    font-weight: var(--fw-medium);
    margin: 0;
    padding-left: 48px;
}
.credentials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.credential {
    display: flex; flex-direction: column; gap: 10px;
    height: 210px;
    padding: 32px;
    /* Jemný odklon od pencilu: tmavšia výplň + soft shadow, aby karty
       vystúpili zo zelenej plochy (pôvodne 30% fill + 3px green border splýval). */
    background: rgba(13,14,11,0.55);
    border: 1px solid rgba(245,243,238,0.16);
    box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
.credential__top { display: flex; align-items: center; justify-content: space-between; }
.credential__icon { width: 28px; height: 28px; display: inline-block; color: var(--foreground-inverse); }
.credential__icon svg { width: 28px; height: 28px; display: block; }
.credential__num {
    font-family: var(--font-numeral);
    font-style: italic;
    font-size: var(--fs-h3);             /* 24 */
    color: var(--foreground-inverse);
}
.credential__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);             /* 24 */
    line-height: 1.2;
    color: var(--foreground-inverse);
}
.credential__rule { width: 32px; height: 1px; background: rgba(245,243,238,0.4); }
.credential__text {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--foreground-inverse);
}

/* Thoughts on Hospitality (woOs7) */
.thought-item {
    display: grid;
    grid-template-columns: 140px 1fr 120px;
    gap: 48px;
    padding-block: 40px;
    border-top: 1px solid var(--border-subtle);
    align-items: start;
}
/* Variant s malým featured-image thumbnailom vpravo (Blog archív) — text
   ostáva dominantný, obrázok je nenápadný akcent. */
.thought-item--media { grid-template-columns: 140px 1fr 160px; }
.thought-item__thumb {
    display: block;
    align-self: center;
    aspect-ratio: 3 / 2;
    background-size: cover; background-position: center;
    border: 1px solid var(--border-subtle);
    opacity: 0.9;
    transition: opacity .25s ease;
}
.thought-item__thumb:hover { opacity: 1; }
.thought-item__meta {
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--font-caption);
    font-size: var(--fs-body);           /* 16 */
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;           /* dátum/čítanie — zdroj prirodzený */
    color: var(--foreground-muted);
}
.thought-item__body { display: flex; flex-direction: column; gap: 14px; }
.thought-item__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);             /* 24 */
    line-height: 1.15;
    color: var(--foreground-primary);
}
.thought-item__excerpt {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-secondary);
    margin: 0;
}
.thought-item__cat {
    text-align: right;
    font-family: var(--font-caption);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    color: var(--foreground-muted);
}

/* ── Partner logos marquee — slim cream band pred contact sekciou. Plnofarebné
   logá, continuous seamless scroll (track má zoznam zdvojený, animácia
   translateX 0 → -50%). Mask-image fade na okrajoch pre čistý vstup/odchod;
   pause-on-hover; reduced-motion respektovaný (statické, wrap). ── */
.partners-sec { padding-block: 64px; overflow: hidden; }
.partners-head { text-align: center; margin-bottom: 36px; }
.partners-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: partners-scroll 45s linear infinite;
}
.partners-marquee:hover .partners-track { animation-play-state: paused; }
.partner-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    max-width: 200px;
    flex-shrink: 0;
}
.partner-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
@keyframes partners-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .partners-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 48px;
    }
}

/* Contact (JRUke) — dark olive-farm overlay */
.contact-section {
    /* Zelený overlay #6b7050 cez foto — obrázok presvitá na ~16 % (overlay 84 %).
       Vrchný scrim stmaví len ľavú časť kvôli kontrastu krémového textu intro
       bloku; pravú stranu aj tak kryje biela karta formulára. */
    background:
        linear-gradient(90deg, rgba(13, 14, 11, 0.5) 0%, rgba(13, 14, 11, 0) 55%),
        linear-gradient(rgba(107, 112, 80, 0.84), rgba(107, 112, 80, 0.84)),
        var(--olive-farm) center/cover;
    padding-block: 100px;
    scroll-margin-top: 24px;   /* kotva #contact z menu/CTA */
}
.contact-home { display: grid; grid-template-columns: 560px 1fr; gap: 120px; align-items: start; }
.contact-home__intro { display: flex; flex-direction: column; gap: 64px; }
.contact-home__info { display: flex; flex-direction: column; }
.contact-home__row {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    padding-block: 22px;
    border-top: 1px solid var(--foreground-inverse);
}
.contact-home__row:last-child { border-bottom: 1px solid rgba(245,243,238,0.4); }
.contact-home__label { font-size: var(--fs-body); color: var(--foreground-inverse); }
.contact-home__value { font-size: var(--fs-body); color: var(--foreground-inverse); }
.contact-home__form {
    background: var(--surface-primary);
    position: relative;
    padding: 56px 64px;
    display: flex; flex-direction: column; gap: 32px;
}
.contact-home__form::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--paper-texture) center/cover;
    mix-blend-mode: multiply; opacity: 0.5; pointer-events: none;
}
.contact-home__form > * { position: relative; z-index: 1; }

/* Home section layout — extrahované z inline štýlov v home.php, aby boli
   responzívne (desktop hodnoty 1:1 s pôvodnými inline). */
.home-services-sec { padding-block: 100px 50px; }
.home-services { display: flex; flex-direction: column; gap: 96px; }
.home-services__head { display: flex; gap: 96px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.home-services__head-box { width: 640px; max-width: 100%; display: flex; flex-direction: column; gap: 5px; }

.home-manifesto-sec { padding-block: 50px; }
.home-manifesto { display: flex; flex-direction: column; gap: 30px; }
.home-manifesto__rule { display: flex; align-items: center; gap: 24px; }

.home-thoughts-sec { padding-block: 100px; }
.home-thoughts { display: flex; flex-direction: column; gap: 64px; }
.home-thoughts__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }

/* ============================================================
   Services page (pencil j7Vlk) — 1:1
   ============================================================ */
/* Zelený eyebrow — Cormorant Garamond medium, uppercase (16 = --fs-body). */
.svc-eyebrow {
    font-family: var(--font-eyebrow);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-primary);
}
.svc-eyebrow--rules { display: inline-flex; align-items: center; gap: 14px; }
.svc-eyebrow--rules::before,
.svc-eyebrow--rules::after { content: ''; width: 40px; height: 1px; background: var(--accent-primary); }

/* Hero — zelený band (rovnaké pozadie ako home kontakt sekcia) */
.svc-hero {
    padding-block: 100px;
    background:
        linear-gradient(rgba(107, 112, 80, 0.84), rgba(107, 112, 80, 0.84)),
        var(--olive-farm) center/cover;
}
.svc-hero__wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.svc-hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    text-align: center;
    color: var(--foreground-inverse);
    max-width: 1100px;
    margin: 0;
}
/* Voliteľný podnadpis pod hero titulkom (Blog archív) — bližšie k titulku. */
.svc-hero__sub {
    margin: -20px 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    text-align: center;
    color: var(--foreground-inverse);
    max-width: 620px;
}
/* Eyebrow + linky na zelenom → krémové */
.svc-hero .svc-eyebrow { color: var(--foreground-inverse); }
.svc-hero .svc-eyebrow--rules::before,
.svc-hero .svc-eyebrow--rules::after { background: var(--foreground-inverse); }

/* Service bloky */
.svc-blocks { padding-block: 100px; }
.svc-blocks__wrap { display: flex; flex-direction: column; align-items: center; gap: 96px; }
/* Pencil: obsah bloku capnutý na 1100 (zarovno s hero titulkom), centrovaný.
   Cap (nie padding) drží side-by-side použiteľný až po stack breakpoint 1100. */
.svc-block { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 40px; width: 100%; max-width: 1100px; }

/* Row 1: title-group (vľavo) ↔ description (~560 vpravo) */
.svc-block__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 80px; }
.svc-block__title-group { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.svc-block__meta { display: flex; align-items: center; gap: 14px; }
.svc-block__num {
    font-family: var(--font-numeral);
    font-style: italic;
    font-size: var(--fs-h3);
    color: var(--foreground-primary);
}
.svc-block__rule { width: 40px; height: 1px; background: var(--foreground-primary); }
.svc-block__caption {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    letter-spacing: 0.094em;
    text-transform: uppercase;
    color: var(--foreground-primary);
}
.svc-block__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    color: var(--foreground-primary);
    margin: 0;
}
.svc-block__desc {
    flex: 0 1 560px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-primary);
    margin: 0;
}

/* Row 2: includes (vľavo) ↔ image (vpravo). Image má rovnakú šírku (560) ako
   description nad ňou, aby ich ľavé okraje lícovali. */
.svc-block__body { display: flex; gap: 80px; align-items: stretch; }
.svc-block__image {
    flex: 0 1 560px;
    align-self: stretch;
    min-height: 400px;
    background-size: cover; background-position: center;
    overflow: hidden;
}
.svc-block__includes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.svc-includes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.svc-includes__item {
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-base);
    color: var(--foreground-primary);
}

/* Producers / workshops dvojstĺpec */
.svc-twocol { padding-block: 100px; border-top: 1px solid var(--border-subtle); }
.svc-twocol__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; }
.svc-twocol__col { display: flex; flex-direction: column; gap: 20px; }
.svc-twocol__text {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-h3);
    line-height: var(--lh-base);
    color: var(--foreground-primary);
    margin: 0;
}

/* CTA — zelený band s jemnou olive-farm textúrou */
.svc-cta {
    background: linear-gradient(rgba(107,112,80,0.92), rgba(107,112,80,0.92)), var(--olive-farm) center/cover;
    padding-block: 100px;
    display: flex; justify-content: center;
}
.svc-cta__inner {
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    max-width: 620px; text-align: center;
    padding-inline: var(--container-pad-x);
}
.svc-cta__title {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--foreground-inverse);
    margin: 0;
}
.svc-cta__text {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-inverse);
    margin: 0;
}
/* Typografia + hover zhodné s .about-btn (kánonické closing-CTA tlačidlo).
   Farby invertované pre zelený band: svetlá výplň (zelená by zanikla),
   hover = výplň zmizne → priehľadné + warm okraj + biely text. */
.svc-cta__btn {
    background: var(--surface-primary);
    color: var(--accent-primary);
    font-family: var(--font-eyebrow);
    font-weight: 500;
    font-size: var(--fs-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 16px 26px;
    border: 1px solid transparent; cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.svc-cta__btn:hover { background: transparent; border-color: var(--accent-warm); color: var(--foreground-inverse); }

/* ============================================================
   About page (pencil pZOLU) — hero + intro + striedavé kapitoly
   ============================================================ */
/* Eyebrow s jednou linkou vľavo (pencil: 40px rule + CAPS). */
.svc-eyebrow--rule-left { display: inline-flex; align-items: center; gap: 14px; }
.svc-eyebrow--rule-left::before { content: ''; width: 40px; height: 1px; background: var(--accent-primary); }

/* Hero — portrét (380×433) + bio + CTA */
.about-hero { padding-block: 100px; }
.about-hero__wrap { display: grid; grid-template-columns: 380px 1fr; gap: 96px; align-items: start; }
/* Olive panel za Ettorem — gold rámček + jemný shadow okolo portrétu.
   Image vypĺňa panel okraj-na-okraj, aby vlastné olive pozadie fotky
   nevytváralo „double-background" efekt s hero-bg textúrou pod ňou. */
.about-hero__portrait {
    border: 1px solid var(--border-subtle);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    overflow: hidden;                   /* image presne v ráme, žiadne presahy */
}
.about-hero__portrait img { width: 100%; height: 433px; object-fit: cover; display: block; border: none; }
.about-hero__body { display: flex; flex-direction: column; gap: 20px; }
.about-hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    color: var(--foreground-primary);
    margin: 0;
}
.about-hero__lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-h3);
    line-height: var(--lh-base);
    color: var(--foreground-primary);
    margin: 0;
}
.about-hero__text {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-primary);
    margin: 0;
}
.about-hero__actions { display: flex; align-items: center; gap: 28px; padding-top: 8px; flex-wrap: wrap; }
/* About hero buttons = home hero buttons. Primary (Get in touch) ako hero
   filled → outline hover; secondary (Back to home) ako hero underline → sweep. */
.about-btn {
    background: var(--accent-primary);
    color: var(--foreground-inverse);
    font-family: var(--font-eyebrow);
    font-weight: 500;
    font-size: var(--fs-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 16px 26px;
    border: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.about-btn:hover { background: transparent; border-color: var(--accent-warm); color: var(--foreground-primary); }
.about-back {
    position: relative;
    font-family: var(--font-eyebrow);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--foreground-primary);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(13, 14, 11, 0.5);
}
.about-back::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--accent-warm);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .35s ease;
}
.about-back:hover::after { transform: scaleX(1); }

/* Intro — zelený band (rovnaké pozadie ako home kontakt sekcia) */
.about-intro {
    padding-block: 100px;
    background:
        linear-gradient(rgba(107, 112, 80, 0.84), rgba(107, 112, 80, 0.84)),
        var(--olive-farm) center/cover;
}
.about-intro__wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.about-intro .svc-eyebrow { color: var(--foreground-inverse); }
.about-intro__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--foreground-inverse);
    margin: 0;
    max-width: 720px;
}
.about-intro__subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-inverse);
    margin: 0;
    max-width: 680px;
}

/* Kapitoly — text (600) + foto (350×400), striedavé strany */
.about-chapters { padding-block: 100px; }
.about-chapters__wrap { display: flex; flex-direction: column; gap: 72px; }
.about-chapter { display: flex; align-items: center; justify-content: center; gap: 72px; }
.about-chapter:nth-child(even) { flex-direction: row-reverse; }
.about-chapter__text { flex: 0 1 600px; display: flex; flex-direction: column; gap: 18px; }
.about-chapter__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    color: var(--foreground-primary);
    margin: 0;
}
.about-chapter__body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-primary);
    margin: 0;
}
.about-chapter__image {
    flex: 0 0 350px;
    height: 400px;
    background-size: cover; background-position: center;
}

/* ── Jemný rámik na fotky na bledom (cream) pozadí ──────────────────────
   Editoriálny rytmus zhodný s about kapitolami a event kartami: každá
   inset fotka na svetlej ploche dostane 1px warm border (--border-subtle).
   Full-bleed hero bannery (.hero, .event-hero, .article-figure), hero
   cutout portrét a fotky na tmavých sekciách (.about-grid__portrait) ho
   zámerne nemajú. Pri novej inset fotke na cream pozadí doplň jej selektor
   sem. */
.about-chapter__image,
.svc-block__image,
.writing-feature__image,
.related-thumb,
.service-card {
    border: 1px solid var(--border-subtle);
}

/* ============================================================
   Activities / Events — archív (karty + filter), detail, registrácia
   ============================================================ */
/* Hero foto (full-bleed) */
.event-hero {
    height: 460px;
    background-size: cover; background-position: center;
}

/* Detail — dátum-chip, titulok, meta (Location/Price/Capacity), popis */
.event-detail { padding-block: 100px; }
.event-detail__wrap { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: 28px; }
.event-detail__top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.event-detail__date {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--foreground-muted);
    padding: 10px 18px;
    border: 1px solid var(--border-subtle);
}
.event-detail__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    color: var(--foreground-primary);
    margin: 0;
}
.event-detail__meta {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
}
.event-detail__meta-item { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--surface-primary); }
.event-detail__meta-value { font-family: var(--font-body); font-size: var(--fs-h3); color: var(--foreground-primary); }
.event-detail__body { display: flex; flex-direction: column; gap: 18px; }
.event-detail__lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-h3);
    line-height: var(--lh-base);
    color: var(--foreground-primary);
    margin: 0;
}

/* Register — zelený band + biela karta (vzor ako home kontakt formulár) */
.event-register {
    padding-block: 100px;
    background:
        linear-gradient(rgba(107, 112, 80, 0.84), rgba(107, 112, 80, 0.84)),
        var(--olive-farm) center/cover;
}
.event-register__wrap { display: flex; justify-content: center; }
.event-register__card {
    position: relative;
    width: 100%; max-width: 760px;
    background: var(--surface-primary);
    padding: 56px 56px 48px;
    display: flex; flex-direction: column; gap: 32px;
}
.event-register__card::before {
    content: ''; position: absolute; inset: 0;
    background: var(--paper-texture) center/cover;
    mix-blend-mode: multiply; opacity: 0.5; pointer-events: none;
}
.event-register__card > * { position: relative; z-index: 1; }
.event-register__head { display: flex; flex-direction: column; gap: 12px; }
.event-register__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--foreground-primary);
    margin: 0;
}
.event-register__sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--foreground-secondary);
    margin: 0;
}

/* Formulár */
.event-form__form { display: flex; flex-direction: column; gap: 28px; }
.event-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.event-form__field--wide { grid-column: 1 / -1; }
.event-form__submit { align-self: flex-start; }
.event-form__success {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-h3);
    line-height: var(--lh-base);
    color: var(--accent-primary);
    margin: 0;
}

/* AJAX submit — inline error nad odoslať tlačidlom; success message
   reusuje existujúce .contact-form__title--italic / .event-form__success. */
.form-error-inline {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: #7a1a14;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #fdecea;
    border-left: 2px solid #b3261e;
    border-radius: 2px;
}

/* Archív — filter + karty */
.event-archive { padding-block: 100px; }
.event-filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }
.event-filter__link {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-nav);
    color: var(--foreground-primary);
    padding: 10px 22px;
    border: 1px solid var(--border-subtle);
    transition: background .2s ease, color .2s ease;
}
.event-filter__link:hover { border-color: var(--accent-primary); }
.event-filter__link.is-active { background: var(--accent-primary); color: var(--foreground-inverse); border-color: var(--accent-primary); }

.event-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.event-card { display: flex; flex-direction: column; text-decoration: none; background: var(--surface-primary); border: 1px solid var(--border-subtle); }
.event-card__image { height: 220px; background-size: cover; background-position: center; }
.event-card__body { display: flex; flex-direction: column; gap: 12px; padding: 28px; flex: 1; }
.event-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.event-card__date { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--foreground-muted); }
.event-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--foreground-primary);
    margin: 0;
}
.event-card__excerpt { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--foreground-secondary); margin: 0; }
.event-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.event-card__loc { font-family: var(--font-body); font-size: var(--fs-body); color: var(--foreground-secondary); }
.event-card__price { font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--accent-primary); }
.event-archive__empty { font-family: var(--font-body); font-size: var(--fs-body); color: var(--foreground-muted); }

/* Nadpisové spany (non-h prvky v --font-heading) — medium (500). Lead/subtitle
   texty sem zámerne nepatria. Hero motto NIE je v skupine — je italic a Playfair
   má italic len v 400 (500 by spustilo faux-bold). */
.hero-stat__value, .hero-stat__suffix,
.service-card__title,
.credential__title,
.manifesto-quote__text,
.thought-item__title {
    font-weight: var(--fw-medium);
}

/* ============================================================
   Letter-spacing 2px na VŠETKÝCH --font-heading (Cormorant Garamond) textoch.
   Aplikované len na text elementy (nie kontajnery), aby sa dedičná
   letter-spacing neprenášala na Barlow body text vnútri.
   ============================================================ */
.h-display, .h1, .h2, .h3, .h4,
.lead, .italic-quote,
.hero__motto, .hero__title,
.hero-stat__value, .hero-stat__suffix,
.service-card__title,
.manifesto-quote__text,
.about-grid__lead,
.credential__title,
.thought-item__title,
.page-hero__title, .page-hero__lead,
.career-chapter__year, .career-chapter__title,
.room__title, .format__title, .format__price,
.svc-cta__title,
.writing-item__title, .writing-item__excerpt, .writing-feature__title,
.interlude__quote, .interlude__source,
.article-hero__title, .article-hero__subtitle, .article-body__lead,
.article-body blockquote, .article-body h2, .article-body h3, .article-body__signoff,
.article-meta-list__item strong,
.contact-info__value,
.contact-form__title,
.newsletter__title, .newsletter__lead {
    letter-spacing: var(--ls-heading);
}

/* ============================================================
   Extrahované inline štýly (predtým style="" v šablónach).
   Dynamické background-image (z DB) ostávajú inline — sú dátové.
   ============================================================ */
/* Inverzné varianty na tmavých/foto sekciách */
.eyebrow--inverse { color: var(--foreground-inverse); }
.eyebrow--nowrap { white-space: nowrap; }
.h2--inverse { color: var(--foreground-inverse); }
.muted-note { color: var(--foreground-muted); }
.dot-sep { opacity: 0.5; }

/* Home — services intro odsek vedľa nadpisu */
.home-services__intro {
    flex: 1; min-width: 280px;
    font-size: var(--fs-body); line-height: var(--lh-relaxed);
    color: var(--foreground-secondary);
}
/* Home — manifesto eyebrow riadok (linka vedľa eyebrow) */
.home-manifesto__line { flex: 1; height: 2px; background: var(--border-subtle); }
.home-manifesto__title { max-width: 555px; }
/* link-underline zarovnaný doprava (manifesto "Read full…") / vlastná šírka */
.link-underline--end { align-self: flex-end; }
.home-thoughts__all { width: 90px; align-items: flex-start; }
/* posledná položka zoznamu blogov má spodnú linku (home + /writing) */
.home-thoughts .thought-item:last-child { border-bottom: 1px solid var(--border-subtle); }

/* Home — contact intro */
.contact-home__intro-head { display: flex; flex-direction: column; gap: 28px; }
.contact-home__text {
    font-size: var(--fs-body); line-height: var(--lh-relaxed);
    color: var(--foreground-inverse); font-weight: var(--fw-medium);
}

/* Article (single-writing) — head sekcia + continue reading */
.article-head { padding-block: 80px 60px; }
.article-head__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.article-head__lead { text-align: center; max-width: 720px; }
.continue-reading { display: flex; flex-direction: column; gap: 48px; }
.continue-reading__head { text-align: center; }

/* CTA blok (cream, About) */
.cta-block { text-align: center; }
.cta-block__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cta-block__text {
    max-width: 640px; text-align: center; font-style: normal;
    font-family: var(--font-body); font-size: var(--fs-body); color: var(--foreground-secondary);
}

/* Manifesto stránka — sekcie + meta */
.manifesto-head-sec { padding-block: 120px 60px; }
.manifesto-head-sec .page-hero { padding-block: 0; }
.manifesto-head-sec .article-meta-list { margin-top: 16px; }
.manifesto-body-sec { padding-block: 40px 120px; }

/* Article body bez paddingu (single-activity obsah, page top) */
.article-body--flush { padding: 0; }
.article-body--flush-top { padding-block-start: 0; }

/* Contact form success správa */
.form-success-note {
    font-family: var(--font-heading); font-style: italic;
    font-size: var(--fs-h3); color: var(--accent-primary);
}

/* 404 stránka */
.error-page { padding: 120px 0 140px; }
.error-page__inner { text-align: center; }
.error-page__code { margin-bottom: 24px; }
.error-page__title {
    font-family: var(--font-heading); font-size: var(--fs-h1);
    line-height: var(--lh-tight); margin-bottom: 20px;
}
.error-page__text { max-width: 540px; margin: 0 auto 36px; color: var(--foreground-secondary); }

/* ============================================================
   Responsive (mobile)
   ============================================================ */
@media (max-width: 1100px) {
    :root {
        --container-pad-x: 60px;
        --section-pad-y: 100px;
        /* Tablet: typo scale shrnujeme proporcionálne, ale držíme rytmus. */
        --fs-display: 48px;
        --fs-h1: 44px;
        --fs-h2: 32px;
        --fs-h3: 24px;
        --fs-h4: 22px;
    }
    .career-chapter, .writing-feature, .about-block, .contact-grid, .newsletter, .stats-row { grid-template-columns: 1fr; gap: 48px; display: grid; }
    .writing-item { grid-template-columns: 1fr; gap: 16px; }
    .writing-item__read { text-align: left; align-items: flex-start; }
    .grid-3, .rooms { grid-template-columns: 1fr 1fr; }
    .manifesto-cols { grid-template-columns: 1fr; gap: 32px; }
    /* Contact home dvojstĺpec (560 + form) sa na tablete nezmestí — stack. */
    .contact-home { grid-template-columns: 1fr; gap: 56px; }
    /* Services bloky: na tablete dvojstĺpec (560 + úzky stĺpec) nesedí —
       stackni riadky (title-group → popis → includes → obrázok). */
    .svc-block { gap: 28px; }
    .svc-block__head { flex-direction: column; align-items: flex-start; gap: 18px; }
    .svc-block__desc { flex-basis: auto; max-width: 640px; }
    .svc-block__body { flex-direction: column; gap: 24px; }
    .svc-block__image { flex-basis: auto; width: 100%; min-height: 440px; }
    /* About: hero a kapitoly stackni (dvojstĺpec sa na tablete nezmestí). */
    .about-hero__wrap { grid-template-columns: 1fr; gap: 40px; }
    .about-hero__portrait { max-width: 380px; }
    .about-chapter, .about-chapter:nth-child(even) { flex-direction: column; align-items: stretch; gap: 28px; }
    .about-chapter__text { flex-basis: auto; }
    .about-chapter__image { flex-basis: auto; width: 100%; max-width: 560px; height: 380px; }
    /* Events — tablet */
    .event-cards { grid-template-columns: 1fr 1fr; }
    .event-hero { height: 360px; }
    .format { grid-template-columns: 1fr; gap: 16px; }
    .format__price { text-align: left; }
    .stats-row__numbers { gap: 48px; flex-wrap: wrap; }
}

/* Header → hamburger už na tablete (plné menu sa pod ~1024 tiesni:
   „About me" sa zalamuje, logo sa tlačí). Nad 960 ostáva 3-stĺpcový header. */
@media (max-width: 960px) {
    .site-header__inner { grid-template-columns: 1fr auto; gap: 0; padding-block: 18px; align-items: center; }
    .site-logo { grid-column: 1; grid-row: 1; text-align: left; }
    .nav-burger { display: flex; grid-column: 2; grid-row: 1; justify-self: end; }
    .nav-menu {
        grid-column: 1 / -1; flex-direction: column; align-items: stretch;
        gap: 0; width: 100%;
        max-height: 0; opacity: 0; overflow: hidden;
        transition: max-height .35s ease, opacity .3s ease;
    }
    .nav-menu--left  { grid-row: 2; }
    .nav-menu--right { grid-row: 3; }
    .nav-toggle-cb:checked ~ .nav-menu { max-height: 60vh; opacity: 1; }
    .nav-toggle-cb:checked ~ .nav-menu--left { margin-top: 16px; }
    .nav-menu li { width: 100%; }
    .nav-menu-link { display: block; padding: 13px 0; text-align: center; border-top: 1px solid var(--border-subtle); }
    /* hamburger → X */
    .nav-toggle-cb:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle-cb:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle-cb:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 700px) {
    :root {
        --container-pad-x: 24px;
        --section-pad-y: 72px;
        --fs-display: 40px;
        --fs-h1: 36px;
        --fs-h2: 26px;
        --fs-h3: 22px;
        --fs-h4: 20px;
    }
    .grid-3, .rooms { grid-template-columns: 1fr; }
    /* Immersive hero: Ettore hore vo veľkom, gradient ho rozplýva do
       olivovej a v spodnej (opaque) zóne sa číta text. */
    .hero { height: auto; min-height: 560px; overflow: hidden; background-color: var(--surface-inverse); }
    .hero__wrap { display: block; height: auto; }
    .hero__portrait {
        display: block; position: absolute; z-index: 0;
        top: 0; left: 0; right: 0;
        width: 100%; height: 480px; max-width: none;
        object-fit: cover;
        object-position: center 20%;   /* face cca 20% od horného okraja */
        margin-inline-start: 0;
    }
    .hero__wrap::before {
        content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(180deg,
            rgba(107,112,80,0)    0px,
            rgba(107,112,80,0)    160px,
            rgba(107,112,80,0.72) 260px,
            rgba(107,112,80,0.98) 330px,
            rgba(107,112,80,1)    370px);
    }
    .hero__inner { position: relative; z-index: 2; max-width: 100%; width: 100%; padding-block: 310px 56px; gap: 22px; }
    /* Hero stats — bez deličiek, 3 v rade, label sa môže zalomiť. */
    .hero-stats { gap: 16px; }
    .hero-stats__divider { display: none; }
    .hero-stat__label { white-space: normal; }
    .contact-form { padding: 32px; }
    .contact-form .row, .letter-form .row { grid-template-columns: 1fr; gap: 16px; }
    .contact-home__form { padding: 36px 28px; }
    .chip-group { flex-wrap: wrap; }
    .chip { flex: 1 1 calc(50% - 7px); }
    .article-figure__caption { padding-inline: 24px; flex-direction: column; gap: 8px; align-items: flex-start; }

    /* ── Home sekcie ── */
    /* Services */
    .home-services-sec { padding-block: 64px 40px; }
    .home-services { gap: 48px; }
    .home-services__head { gap: 24px; }
    .home-services__head-box { width: 100%; }
    .service-cards { grid-template-columns: 1fr; gap: 18px; }
    .service-card { height: 420px; }
    /* Manifesto */
    .home-manifesto-sec { padding-block: 40px; }
    .home-manifesto { gap: 24px; }
    /* About + credentials */
    .about-section { padding-block: 64px; }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-grid__portrait { max-width: 250px; padding: 22px 26px 0 12px; }
    .about-grid__body-p { padding-left: 0; }
    .credentials { grid-template-columns: 1fr 1fr; gap: 14px; }
    .credential { height: auto; padding: 24px; }
    /* Thoughts */
    .home-thoughts-sec { padding-block: 64px; }
    .home-thoughts { gap: 40px; }
    .thought-item { grid-template-columns: 1fr; gap: 12px; padding-block: 28px; }
    .thought-item__meta { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
    .thought-item__thumb { display: none; } /* na telefóne text-only, obrázok skry */
    .thought-item__cat { text-align: left; }
    /* Contact */
    .contact-section { padding-block: 64px; }
    .contact-home { grid-template-columns: 1fr; gap: 44px; }
    .contact-home__intro { gap: 40px; }
    /* Stackovanie blokov dedí z @media ≤1100; tu len telefón-špecifické.
       Odsadenia symetrické 64px (proporcionálne k home na mobile). */
    .svc-hero { padding-block: 64px; }
    .svc-blocks { padding-block: 64px; }
    .svc-block { gap: 24px; }
    .svc-block__image { min-height: 260px; }
    .svc-twocol { padding-block: 64px; }
    /* About — telefón */
    .about-hero { padding-block: 64px; }
    .about-hero__wrap { gap: 28px; }
    .about-hero__portrait { max-width: none; }
    .about-hero__portrait img { height: auto; }
    .about-intro { padding-block: 64px; }
    .about-chapters { padding-block: 64px; }
    .about-chapters__wrap { gap: 56px; }
    .about-chapter__image { max-width: none; height: 280px; }
    /* Events — telefón */
    .event-hero { height: 240px; }
    .event-detail { padding-block: 64px; }
    .event-detail__meta { grid-template-columns: 1fr; }
    .event-register { padding-block: 64px; }
    .event-register__card { padding: 36px 28px; }
    .event-form__grid { grid-template-columns: 1fr; gap: 20px; }
    .event-archive { padding-block: 64px; }
    .event-cards { grid-template-columns: 1fr; gap: 24px; }
    .event-filter { margin-bottom: 36px; }
    .svc-twocol__wrap { grid-template-columns: 1fr; gap: 48px; }
    .svc-blocks__wrap { gap: 64px; }
}

/* ============================================================
   Motion — scroll-reveal · sticky header · page transitions.
   Decentné a neokázalé: malé vzdialenosti, mäkký easing
   (--ease-editorial), všetko raz. Beží len keď inline skript
   v <head> pridá `.anim` na <html> (t.j. JS je zapnuté a
   používateľ NEMÁ prefers-reduced-motion). Bez toho ostáva web
   úplne statický — opacity aj poloha sú v pôvodnom stave.
   ============================================================ */

/* ── Scroll-reveal ──────────────────────────────────────────
   Počiatočný skrytý stav drží CSS (gated `.anim`), aby pri prvom
   painte nebol flash. JS pridá `.is-visible` keď prvok vojde do
   viewportu. `:where()` má 0 špecificity → `.is-visible` ho ľahko
   prebije. POZN.: tento zoznam selektorov drž v synchu s `REVEAL`
   v main.js (tam sa prvky observujú). */
.anim :where(
    .home-services__head, .service-card,
    .home-manifesto, .about-grid, .credential,
    .thought-item, .contact-home,
    .about-intro__wrap, .about-chapter,
    .svc-block, .svc-twocol__col, .svc-cta__inner,
    .writing-feature, .event-card
) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s var(--ease-editorial), transform .7s var(--ease-editorial);
}
.anim .is-visible { opacity: 1; transform: none; }

/* ── Settle-zoom — pri odhalení sa fotka v ráme jemne usadí (scale → 1).
   Naviazané na `.is-visible` rodiča, nech je v dokonalom synchu s jeho
   fade-up (jeden observer trigger, žiadny desync). */
.anim .about-chapter .about-chapter__image,
.anim .svc-block .svc-block__image,
.anim .writing-feature .writing-feature__image {
    transform: scale(1.05);
    transition: transform 1s var(--ease-editorial);
}
.anim .about-chapter.is-visible .about-chapter__image,
.anim .svc-block.is-visible .svc-block__image,
.anim .writing-feature.is-visible .writing-feature__image {
    transform: none;
}

/* ── Hero — sekvenčný reveal na load ─────────────────────────
   `both` fill drží skrytý stav počas animation-delay → žiadny flash.
   Štruktúra masky (.hero__title-line/-rise) je vždy aktívna; samotný
   pohyb beží len pod `.anim`. */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroRise   { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes heroZoom   { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* H1 mask-up — každý riadok vyjde zdola spod overflow:hidden rámu.
   padding/margin trik chráni poddĺžnice (g, y, p) pred orezaním. */
.hero__title-line { display: block; overflow: hidden; padding-block: .08em; margin-block: -.08em; }
.hero__title-rise { display: block; }

.anim .hero__intro { animation: heroFadeUp .8s var(--ease-editorial) both; animation-delay: .15s; }
.anim .hero__title-rise { animation: heroRise .9s var(--ease-editorial) both; }
.anim .hero__title-line:nth-child(1) .hero__title-rise { animation-delay: .26s; }
.anim .hero__title-line:nth-child(2) .hero__title-rise { animation-delay: .38s; }
.anim .hero__title-line:nth-child(3) .hero__title-rise { animation-delay: .50s; }
.anim .hero__foot { animation: heroFadeUp .8s var(--ease-editorial) both; animation-delay: .58s; }
.anim .hero__portrait { animation: heroZoom 1s var(--ease-editorial) both; animation-delay: .1s; }

/* Podstránkové hero (About / Services) — jemný load fade-up + zoom portrétu. */
.anim .about-hero__body,
.anim .svc-hero__wrap { animation: heroFadeUp .8s var(--ease-editorial) both; animation-delay: .15s; }
.anim .about-hero__portrait img { animation: heroZoom 1s var(--ease-editorial) both; animation-delay: .05s; }

/* ── CTA šípky — jemný nudge pri hover odkazu/labelu/buttonu.
   Bez lift/scale na samotnej karte či fotke (nesmie pôsobiť klikateľne);
   pohyb len na šípke. Pod reduced-motion sa nehýbe. */
.cta-arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
    .cta-arrow { transition: transform .25s var(--ease-editorial); }
    :is(a, label, button):hover .cta-arrow--down  { transform: translateY(3px); }
    :is(a, label, button):hover .cta-arrow--up    { transform: translateY(-3px); }
    :is(a, label, button):hover .cta-arrow--left  { transform: translateX(-3px); }
    :is(a, label, button):hover .cta-arrow--right { transform: translateX(3px); }
}

/* ── Kondenzácia headera po scrolle ──────────────────────────
   Header je sticky (viď .site-header vyššie); po ~32px scrollu sa
   jemne stiahne (menší vertikálny padding + tichý tieň). Na contact
   (theme-dark) dostane v kondenzovanom stave priesvitné tmavé pozadie. */
.site-header.is-condensed { box-shadow: 0 6px 24px rgba(13, 14, 11, .07); }
.site-header.is-condensed .site-header__inner { padding-block: 11px; }
/* Header je sticky → in-page kotvy (#contact …) by inak podliezli pod neho. */
:target { scroll-margin-top: 120px; }
body.theme-dark .site-header.is-condensed {
    background-color: rgba(13, 14, 11, .78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ── Page transitions (View Transitions API, MPA) ────────────
   Jemný default cross-fade medzi stránkami; len kde prehliadač
   podporuje a používateľ neobmedzil pohyb. Inde normálny load. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}