/* =====================================================================
   Michal Brix – styl podle publikace „Michal Brix 80“
   Barvy z obálky: cihlová #A44C37, krémová #E1E0CF
   Písmo: Old Standard TT (volně dostupná náhrada za Benton Modern One z katalogu), hostované na webu
   ===================================================================== */
/* Old Standard TT – hostováno na webu (SIL OFL 1.1, viz /assets/fonts/OFL.txt), latin + latin-ext */
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/old-standard-tt-400-latin.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: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/old-standard-tt-400-latin-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/old-standard-tt-400italic-latin.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: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/old-standard-tt-400italic-latin-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --terra: #a44c37;
  --terra-dark: #833b2a;
  --cream: #e1e0cf;
  --paper: #fff;
  --ink: #1f1d1a;
  --ink-soft: #4d4a44;
  --muted: #6e6a62;
  --line: #d3d1bd;
  --font: "Old Standard TT", "Century Schoolbook", "Century", Georgia, serif;
  --maxw: 1200px;
  --nav-h: 84px;
  --space: clamp(4.5rem, 9vw, 8rem);
  --ease: .3s ease;
  /* velikosti drobného textu – jediná škála pro celý web */
  --fs-label: 12px;   /* verzálkové popisky (podtitulek značky, KONTAKT – ADRESA…) */
  --fs-ui: 14px;      /* verzálkové ovládací prvky (menu, tlačítka, přepínače) */
  --fs-small: 15px;   /* popisky fotek, údaje děl, poznámky */
  --fs-text: 17px;    /* názvy děl, časové osy, popisy projektů, zápatí */
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terra); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--terra-dark); }
h1, h2 { font-family: var(--font); font-weight: 400; line-height: 1.12; margin: 0 0 .7em; text-transform: uppercase; letter-spacing: .03em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
:focus-visible { outline: 1px solid var(--terra); outline-offset: 4px; }

/* drobné popisky verzálkami s prostrkáním – jako „KRESBY MALBY PROJEKTY“ na obálce */
.nav__link, .btn, .filter__btn, .contact__label, .lang-switch button, .link-arrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-ui);
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.narrow { max-width: 820px; }
.section { padding: var(--space) 0; }
/* obsah za pásem s nadpisem – na všech stránkách stejně */
.page-head + .section { padding-top: clamp(3rem, 6vw, 5rem); }
.section--alt { background: var(--cream); }
.section .container > :last-child, .section .narrow > p:last-child { margin-bottom: 0; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; color: #fff; }

/* ---------------------------------------------------------- Hlavička (cihlová jako obálka) */
.header { position: sticky; top: 0; z-index: 50; background: var(--terra); color: #fff; }
.header__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; flex-direction: column; line-height: 1.15; color: #fff; }
.brand:hover { color: #fff; }
.brand strong { font-weight: 400; font-size: 26px; text-transform: uppercase; letter-spacing: .06em; }
.brand span { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .2em; color: var(--cream); margin-top: 4px; }
.nav { list-style: none; display: flex; gap: clamp(20px, 3vw, 44px); margin: 0; padding: 0; }
.nav__link { position: relative; display: block; padding: 6px 0; color: var(--cream); }
.nav__link::after { content: ""; position: absolute; left: 0; right: .14em; bottom: 0; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform var(--ease); }
.nav__link:hover, .nav__link.is-active { color: #fff; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; height: 1px; background: #fff; margin: 6px 0; transition: transform var(--ease), opacity var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
  :root { --nav-h: 72px; }
  .brand strong { font-size: 22px; }
  .brand span { display: none; }
  .nav-toggle { display: block; order: 2; margin-right: -10px; position: relative; top: -3px; } /* úplně vpravo; čárky na výšku verzálek „MICHAL BRIX“ */
  .header__inner > nav { order: 1; margin-left: auto; }
  .nav { position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--terra); padding: 4px clamp(16px, 4vw, 48px) 24px; display: none; }
  .nav.is-open { display: flex; }
  .nav__link { padding: 14px 0; border-bottom: 1px solid rgba(225, 224, 207, .25); }
  .nav__link::after { display: none; }
}

/* ---------------------------------------------------------- Tlačítka a odkazy */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; border: 1px solid currentColor; transition: background var(--ease), color var(--ease), border-color var(--ease); }
.btn--primary { background: var(--cream); border-color: var(--cream); color: var(--terra); }
.btn--primary:hover { background: #fff; border-color: #fff; color: var(--terra-dark); }
.btn--outline { color: #fff; }
.btn--outline:hover { background: #fff; border-color: #fff; color: var(--terra); }
.link-arrow { display: inline-flex; align-items: center; gap: .6em; }
.link-arrow::after { content: "→"; letter-spacing: 0; transition: transform var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------- Úvod (přední strana obálky) */
.hero { background: var(--terra); color: #fff; padding: 0 0 clamp(3.5rem, 7vw, 6rem); }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.hero__text { padding-top: clamp(3rem, 6vw, 5rem); }
.hero__title { font-size: clamp(3.6rem, 9.5vw, 8.2rem); line-height: .92; letter-spacing: .01em; margin: 0 0 .35em; color: #fff; }
.hero__title span { display: block; }
.hero__subtitle { font-size: clamp(14px, 1.4vw, 17px); text-transform: uppercase; letter-spacing: .22em; color: var(--cream); margin-bottom: 2.4rem; }
.hero__subtitle span + span::before { content: ""; display: inline-block; width: 1.4em; }
.lead { margin: 0; max-width: 46ch; font-size: 18px; color: #fff; }
.lead p { margin: 0 0 .5em; font-style: italic; }
.lead footer { font-size: var(--fs-small); color: var(--cream); text-align: right; }
.lead footer::before { content: "— "; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.6rem; }
.hero__media { margin: 0; justify-self: center; }
.hero__media img { width: auto; height: auto; max-width: 100%; max-height: calc(88vh - var(--nav-h)); }
.hero__media figcaption { font-size: var(--fs-small); font-style: italic; color: var(--cream); margin-top: 12px; }

/* ---------------------------------------------------------- Kresby z obálky jako ornament */
.sketch { display: block; background-color: var(--ink-soft); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

/* ---------------------------------------------------------- Souhrn */
.about__head { text-align: center; margin-bottom: 3rem; }
.about__head .sketch { width: 130px; margin: 0 auto 2rem; background-color: var(--terra); }
.about__head h2 { margin-bottom: .6em; }
.lang-switch { display: inline-flex; gap: 6px; }
.lang-switch button { border: 0; background: none; padding: 4px 6px; font-family: var(--font); color: var(--muted); cursor: pointer; }
.lang-switch button + button::before { content: "/"; margin-right: 12px; color: var(--line); }
.lang-switch button.is-active { color: var(--terra); }
.prose p { text-align: justify; hyphens: auto; text-indent: 1.5em; margin: 0; }
.prose p:first-child { text-indent: 0; }
.prose .muted { text-indent: 0; margin-top: 1.2em; text-align: right; font-style: italic; }
.about__text > p:last-child { margin: 2.6rem 0 0; text-align: center; }

/* ---------------------------------------------------------- Pás s nadpisem (předělové strany katalogu) */
.page-head { background: var(--cream); text-align: center; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
/* pevná výška pásu na všech stránkách – kresba se do ní vejde celá (mask-size: contain) */
.page-head .sketch { width: min(320px, 70vw); height: 130px; margin: 0 auto; }
/* obraz hrušky o něco větší než kresby – přesah ubírá z okrajů, takže pás zůstává stejně vysoký */
.page-head .sketch-img { display: block; width: auto; height: 160px; margin: -12px auto -18px; }

/* ---------------------------------------------------------- Přepínač kategorií */
.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(18px, 3vw, 40px); margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.filter__btn { position: relative; padding: 6px 0; color: var(--ink-soft); }
.filter__btn::after { content: ""; position: absolute; left: 0; right: .14em; bottom: 0; height: 1px; background: var(--terra); transform: scaleX(0); transition: transform var(--ease); }
.filter__btn:hover { color: var(--terra); }
.filter__btn.is-active { color: var(--terra); }
.filter__btn.is-active::after, .filter__btn:hover::after { transform: scaleX(1); }
.filter__count { font-size: var(--fs-label); letter-spacing: 0; vertical-align: super; margin-left: 3px; color: var(--muted); }

/* ---------------------------------------------------------- Díla (Kresba, Malba) */
.work { margin: 0; display: flex; flex-direction: column; }
.work .frame { overflow: hidden; }
.work a { display: block; cursor: zoom-in; }
.work img { transition: opacity var(--ease); }
.work a:hover img { opacity: .88; }
.work figcaption { padding: 14px 0 0; font-size: var(--fs-small); line-height: 1.45; }
.work figcaption strong { display: block; font-weight: 400; font-size: var(--fs-text); }
.work figcaption span { color: var(--muted); font-style: italic; }
/* každé dílo = 2 řádky mřížky (obraz, popisek) sdílené přes subgrid → popisky v řadě vždy na stejné lince */
.masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: clamp(28px, 4vw, 56px); row-gap: 0; }
.masonry { margin-bottom: calc(-1 * clamp(48px, 6vw, 72px)); }   /* poslední řada bez spodní mezery */
.masonry .work { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; padding-bottom: clamp(48px, 6vw, 72px); }
/* celé obrazy bez rámečku; v řadě zarovnané dolů, aby popisky začínaly na stejné lince */
.masonry .work .frame { flex: 1; display: flex; align-items: flex-end; justify-content: flex-start; }
.masonry .work .composite { width: min(100%, calc(380px * var(--r))); }
.masonry .work > .frame > a > img { width: auto; height: auto; max-width: 100%; max-height: 380px; }

/* Díla složená z více obrázků – rozložení jako v katalogu */
.composite { position: relative; width: 100%; }
.composite__piece { position: absolute; display: block; overflow: hidden; cursor: zoom-in; mix-blend-mode: multiply; }
.composite__piece img { width: 100%; height: 100%; object-fit: fill; transition: opacity var(--ease); }
.composite__piece:hover img { opacity: .85; }
/* koláž z vnitřní strany obálky: díly se prolínají jako v tisku a ořezává je okraj strany */
.composite--page { overflow: hidden; background: #fff; isolation: isolate; }

/* ---------------------------------------------------------- Projekty a Design */
.project { padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 72px); }
.project:first-of-type { border-top: 0; padding-top: 0; }
.project:last-of-type { padding-bottom: 0; }
.project__head { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.project__title { font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.2; margin-bottom: .7em; }
.project__meta { color: var(--terra); font-style: italic; margin-bottom: 1.1em; }
.project__note { color: var(--ink-soft); font-size: var(--fs-text); line-height: 1.5; margin: 0 0 .75em; }
.project__gallery { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); align-items: start; }
.project__gallery--1 { grid-template-columns: 1fr; }
.pimg { margin: 0; }
.pimg--wide { grid-column: 1 / -1; }
.pimg-pair { grid-column: 1 / -1; display: grid; gap: 28px; align-items: start; }
/* šířka podle poměru stran: vysoké obrázky max. 760 px na výšku, bez podkladu kolem */
.pimg > a { display: block; width: min(100%, calc(760px * var(--r, 1))); cursor: zoom-in; overflow: hidden; }
/* zmenšená fotka: podíl šířky řady podle katalogu */
.pimg--scaled > a { width: calc(100% * var(--scale)); }
.pimg > a > img { width: 100%; height: auto; transition: opacity var(--ease); }
.pimg > a:hover img { opacity: .88; }
.pimg figcaption { font-size: var(--fs-small); font-style: italic; color: var(--muted); padding-top: 10px; line-height: 1.45; }

/* ---------------------------------------------------------- Životopis */
.bio { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 6vw, 88px); align-items: start; }
.bio__portrait { margin: 0; position: sticky; top: calc(var(--nav-h) + 32px); }
.bio__portrait img { width: 100%; filter: grayscale(1); }
.bio__portrait figcaption { font-size: var(--fs-small); font-style: italic; color: var(--muted); margin-top: 10px; }
.timeline { list-style: none; margin: 1.6rem 0 0; padding: 0; border-left: 1px solid var(--terra); }
.timeline__item { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 0 0 1.2rem 28px; }
.timeline__item::before { content: ""; position: absolute; left: -4px; top: .62em; width: 7px; height: 7px; background: var(--terra); border-radius: 50%; }
.timeline__year { color: var(--terra); font-variant-numeric: lining-nums; }
.timeline__text { margin: 0; font-size: var(--fs-text); }
.timeline--plain { border-left: 0; }
.timeline--plain .timeline__item { grid-template-columns: 1fr; }
.bio__main .timeline { margin-top: 0; }

/* ---------------------------------------------------------- Kontakt */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__list { list-style: none; margin: 0; padding: 0; }
.contact__item { padding: 0 0 1.8rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.contact__item:last-child { border-bottom: 0; }
.contact__label { display: block; color: var(--terra); font-size: var(--fs-label); margin-bottom: .5em; }
.contact__value { display: block; font-size: 1.35rem; line-height: 1.5; }
.contact__value a { color: var(--ink); }
.contact__value a:hover { color: var(--terra); }
.contact__value a[target] { font-size: var(--fs-small); font-style: italic; color: var(--terra); }
.contact__media { margin: 0; }

/* ---------------------------------------------------------- Zápatí (zadní strana obálky) */
.footer { background: var(--terra); color: var(--cream); padding: clamp(3rem, 6vw, 4.5rem) 0 28px; font-size: var(--fs-text); }
.footer a { color: var(--cream); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.footer__brand { font-size: 28px; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-bottom: .1em; }
.footer .muted { color: var(--cream); text-transform: uppercase; letter-spacing: .2em; font-size: var(--fs-label); margin: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: right; }
.footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(225, 224, 207, .3); font-size: var(--fs-small); color: var(--cream); }

/* ---------------------------------------------------------- Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(31, 29, 26, .96); display: flex; align-items: center; justify-content: center; padding: 56px 72px; }
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
.lightbox__figure figcaption { color: var(--cream); text-align: center; padding-top: 16px; font-size: var(--fs-small); font-style: italic; max-width: 760px; }
.lightbox__figure figcaption strong { display: block; font-size: var(--fs-text); color: #fff; font-weight: 400; font-style: normal; }
.lightbox button { position: absolute; background: none; border: 0; color: var(--cream); cursor: pointer; font: 400 44px/1 var(--font); padding: 10px 16px; opacity: .8; transition: opacity var(--ease); }
.lightbox button:hover { opacity: 1; }
.lightbox__close { top: 8px; right: 12px; }
.lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }
body.no-scroll { overflow: hidden; }

/* ---------------------------------------------------------- Responzivita */
@media (max-width: 1080px) {
  .project { grid-template-columns: 1fr; }
  .project__head { position: static; }
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 440px; }
  .hero__text { padding-top: 0; }
  .bio, .contact { grid-template-columns: 1fr; }
  .bio__portrait { position: static; max-width: 320px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer ul { text-align: left; }
}
@media (max-width: 560px) {
  body { font-size: var(--fs-text); }
  /* podtitulek v úvodu vždy na jednom řádku: písmo se zmenší podle šířky displeje (max. 14 px) */
  .hero__subtitle { white-space: nowrap; font-size: min(14px, calc((100vw - 32px) / 25.6)); }
  .project__gallery, .pimg-pair { grid-template-columns: 1fr !important; }
  .project__gallery > .pimg:not(.pimg--scaled) { width: auto !important; }   /* na telefonu vše na plnou šířku */
  .timeline__item { grid-template-columns: 1fr; gap: 2px; }
  .prose p { text-align: left; }
  .lightbox { padding: 48px 8px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 4px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}