/* ==========================================================================
   Kruh umělců houslařů – styles
   Dark gallery: near-black, warm light text, amber (varnish) accent.
   Portraits and instruments are shown like exhibits in a dark room.
   ========================================================================== */

@font-face { font-family: 'Hanken'; src: url('../fonts/hanken.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('../fonts/hanken-italic.woff') format('woff'); font-weight: 100 900; font-style: italic; font-display: swap; }
/* Gelasio (SIL OFL) – free Georgia look-alike, used only where Georgia is not installed (e.g. Android) */
/* latin-ext */
@font-face {
  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/gelasio-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;
}
/* latin */
@font-face {
  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/gelasio-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;
}
/* EB Garamond (SIL OFL) – title on the home page */
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/ebgaramond-italic-latin-ext-4.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;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/ebgaramond-italic-latin-5.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;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/ebgaramond-normal-latin-ext-6.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;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/ebgaramond-normal-latin-7.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: 'Luminari';   /* from the original kuh.housle.cz */
  src: url(../fonts/luminari-webfont.woff2) format('woff2'), url(../fonts/luminari-webfont.woff) format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* dark theme: deep walnut brown rather than black */
  --bg: #251b14;
  --bg-2: #30241b;
  --bg-3: #3b2d22;
  --ink: #f0e6d8;
  --ink-2: #cfc0ad;
  --muted: #a08f7b;
  --line: #45372b;
  --line-2: #574536;
  --amber: #d99d52;
  --amber-2: #e9b26c;
  --on-amber: #1e1309;
  --bg-rgb: 37 27 20;          /* --bg as RGB channels, for transparent gradients */
  --hi: #fff;                  /* text colour on hover */
  --quote-num: #46372b;
  --empty-hi: #352a20;
  --shadow: rgba(10, 6, 3, .75);
  --lightbox: rgba(18, 13, 9, .96);
  --header-bg: rgba(37, 27, 20, .85);
  --header-line: rgba(69, 55, 43, .7);
  --tile-filter: grayscale(1) brightness(.62) contrast(1.1) url(#duo-dark);   /* dark: duotone in the site palette (shadows deep brown, lights cream), see SVG filters in layout.mjs */
  --tile-lit-filter: grayscale(1) brightness(.86) contrast(1.08) url(#duo-dark);
  --tile-hover-filter: grayscale(1) brightness(1) contrast(1.08) url(#duo-dark);
  --portrait-filter: grayscale(1) brightness(.9) contrast(1.05) url(#duo-dark);
  --portrait-hover-filter: grayscale(1) brightness(1.1) contrast(1.05) url(#duo-dark);  /* hover: same tone, a touch lighter */
  --seal-filter: none;
  --art-filter: invert(1) grayscale(1) contrast(1.1) url(#duo-dark);  /* dark: positive engraving (paper light, lines dark) tinted in the site palette, like the other background photos */
  --art-blend: screen;
  --art-opacity: .2;
  --dilna-blend: screen;
  --dilna-filter: grayscale(1) url(#duo-dark);   /* faint workshop photos tinted in the site palette, not plain grey */
  --slide-filter: grayscale(1) brightness(.62) contrast(1.1) url(#duo-dark);
  --dilna-opacity: .17;

  --f: 'Hanken', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 700px) { .page-head-art { opacity: calc(var(--art-opacity) * .45); } }

/* ---------- light theme: warm paper, dark ink, deeper varnish ---------- */
:root[data-theme="light"] {
  --bg: #f4efe6;
  --bg-2: #ebe4d8;
  --bg-3: #e1d8c9;
  --ink: #1d1a16;
  --ink-2: #4a433a;
  --muted: #776e62;
  --line: #ddd4c5;
  --line-2: #cbc0ae;
  --amber: #9a5c19;
  --amber-2: #b06b22;
  --on-amber: #fff8ee;
  --bg-rgb: 244 239 230;
  --hi: #000;
  --quote-num: #e0d6c6;
  --empty-hi: #f8f4ed;
  --shadow: rgba(60, 40, 20, .35);
  --lightbox: rgba(20, 17, 14, .94);
  --header-bg: rgba(244, 239, 230, .85);
  --header-line: rgba(203, 192, 174, .7);
  --tile-filter: grayscale(1) brightness(.62) contrast(1.1) url(#duo-light);   /* light: duotone in the site palette (shadows brown ink, lights paper) */
  --tile-lit-filter: grayscale(1) brightness(.86) contrast(1.08) url(#duo-light);
  --tile-hover-filter: grayscale(1) brightness(1) contrast(1.06) url(#duo-light);
  --portrait-filter: grayscale(1) contrast(1.02) url(#duo-light);
  --portrait-hover-filter: grayscale(1) contrast(1.02) brightness(1.1) url(#duo-light);
  --seal-filter: brightness(0);
  --art-filter: invert(1) sepia(.35);
  --art-blend: multiply;
  --dilna-blend: multiply;
  --dilna-filter: grayscale(1) url(#duo-light);
  --slide-filter: grayscale(1) contrast(1.02) url(#duo-light);
  --dilna-opacity: .15;
  --art-opacity: .24;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-weight: 350;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-decoration: none; transition: color .2s; }
a:hover { color: var(--amber-2); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(212, 151, 74, .35); color: var(--hi); }

h1, h2, h3, h4 { font-weight: 200; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h1 strong, h2 strong { font-weight: 600; }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; }
address { font-style: normal; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--amber); color: var(--on-amber); padding: .5em 1em; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.measure { max-width: 56ch; }

.eyebrow { font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); margin: 0 0 1.25rem; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink-2); max-width: 58ch; font-weight: 300; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--header-line);
}
.header-inner { display: flex; align-items: center; gap: 2rem; min-height: 80px; }
.brand { display: flex; align-items: center; gap: .9rem; color: var(--ink); margin-right: auto; }
.brand:hover { color: var(--hi); }
.brand-seal { width: 46px; height: auto; opacity: .9; filter: var(--seal-filter); transition: transform .6s var(--ease), opacity .3s; }
.brand:hover .brand-seal { transform: rotate(-10deg); opacity: 1; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: 'Luminari', 'EB Garamond', Georgia, serif; font-size: 1.3rem; font-weight: 400; letter-spacing: 0; line-height: 1.1; }   /* same face as the home title */
.brand-sub { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }

.site-nav { display: flex; align-items: center; gap: 2rem; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
.nav-list a { position: relative; display: block; padding: .4rem 0; font-size: .92rem; color: var(--ink-2); }
.nav-list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-list a:hover { color: var(--hi); }
.nav-list a:hover::after, .nav-list a[aria-current]::after { transform: scaleX(1); }
.nav-list a[aria-current] { color: var(--ink); }

.lang-switch { display: flex; align-items: center; gap: .3rem; font-size: .74rem; letter-spacing: .16em; font-weight: 600; }
.lang-switch a { color: var(--muted); padding: .3rem .25rem; }
.lang-switch a:hover { color: var(--ink); }
.lang-current { color: var(--ink); padding: .3rem .25rem; }
.lang-sep { color: var(--line-2); }

.site-nav { order: 2; }
.theme-toggle {
  order: 3; flex: none; display: none; place-items: center; width: 38px; height: 38px; margin-left: -.75rem;
  background: none; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink-2); cursor: pointer;
  transition: color .2s, border-color .2s, transform .5s var(--ease);
}
.js .theme-toggle { display: grid; }
.theme-toggle:hover { color: var(--amber); border-color: var(--amber); }
.theme-toggle:active { transform: rotate(-25deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

.nav-toggle { display: none; }
@media (max-width: 1040px) {
  .theme-toggle { margin-left: 0; }
  .nav-toggle {
    order: 4;
    display: inline-flex; align-items: center; gap: .6rem;
    background: none; border: 1px solid var(--line-2); border-radius: 999px;
    padding: .55rem 1rem; font: inherit; font-size: .85rem; color: var(--ink); cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; transition: transform .3s var(--ease); }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -5px; }
  .nav-toggle-bars::after { top: 5px; }
  .nav-open .nav-toggle-bars { background: transparent; }
  .nav-open .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 80px); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); padding: 1rem var(--gutter) 2rem;
  }
  .js .site-nav { display: none; }
  .js .nav-open .site-nav { display: flex; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list a { padding: 1rem 0; font-size: 1.9rem; font-weight: 200; letter-spacing: -.02em; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav-list a[aria-current] { color: var(--amber); }
  .nav-list a::after { display: none; }
  .lang-switch { padding: 1.5rem 0 0; font-size: .9rem; }
}
@media (max-width: 480px) {
  .brand-name { font-size: .9rem; white-space: nowrap; }
  .brand-seal { width: 40px; }
  .nav-toggle-label { display: none; }
  .nav-toggle { padding: .7rem .75rem; }
}

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.75rem; border-radius: 999px;
  background: var(--amber); color: var(--on-amber); border: 1px solid var(--amber);
  font-size: .95rem; font-weight: 500;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover { background: var(--amber-2); border-color: var(--amber-2); color: var(--on-amber); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: transparent; border-color: var(--ink); color: var(--hi); }
.arrow-link { display: inline-block; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.arrow-link:hover { color: var(--amber-2); }
.small-link { font-size: .85rem; }

/* ---------- sections ---------- */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-flush { padding-top: 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.section-title { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 200; margin-bottom: 1.5rem; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.section-head .section-title { margin-bottom: .6rem; }
.section-head p { margin: 0; }

.ornament { width: 64px; height: 1px; background: var(--amber); margin-top: 2.5rem; }
.ornament > * { display: none; }

/* page head */
.page-head { position: relative; isolation: isolate; padding: clamp(3rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; overflow: clip; overflow-y: visible; }
.page-head h1 { max-width: 16ch; margin-bottom: .4em; }
.page-head .lead { margin-bottom: 0; }
.page-head-art {
  position: absolute; right: 0; top: 58%; transform: translateY(-50%); width: min(50%, 700px); opacity: var(--art-opacity); pointer-events: none;
  mix-blend-mode: var(--art-blend); filter: var(--art-filter);
  /* flush to the right edge like the other background photos; dissolves towards the text and at the top and bottom */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%), linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%), linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 92%);
  mask-composite: intersect;
}
@media (max-width: 760px) { .page-head-art { width: 80%; right: 0; opacity: calc(var(--art-opacity) * .5); } }

.crumbs ol { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--line-2); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

/* ---------- home hero with portrait mosaic ---------- */
.hero { position: relative; overflow: hidden; min-height: min(92vh, 860px); display: flex; align-items: center; padding: 4rem 0; }
.mosaic { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: 62%; pointer-events: none; overflow: hidden; }
.mosaic::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 6%, rgb(var(--bg-rgb) / .82) 30%, rgb(var(--bg-rgb) / 0) 62%),
    linear-gradient(0deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 28%),
    linear-gradient(180deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 14%);
}
.hero-slide { position: absolute; inset: 0; z-index: 1; background: center / cover no-repeat; opacity: 0; transition: opacity 2.4s cubic-bezier(.45, 0, .55, 1); filter: var(--slide-filter); will-change: opacity; }
.hero-slide.on { opacity: 1; z-index: 3; }
.hero-slide.prev { opacity: 1; z-index: 2; transition: none; }
.slide-on .tile { pointer-events: none; }
.mosaic-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  transform: rotate(-4deg) translateY(-6%); transform-origin: center;
  width: 112%; margin-left: -6%;
  animation: drift 60s linear infinite alternate;
}
@keyframes drift { from { transform: rotate(-4deg) translateY(-6%); } to { transform: rotate(-4deg) translateY(-14%); } }
.tile { display: block; pointer-events: auto; }
.tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; border-radius: 2px; filter: var(--tile-filter); transition: filter .6s var(--ease); }
.tile-lit img { filter: var(--tile-lit-filter); }
.tile:hover img { filter: var(--tile-hover-filter); }
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-inner > * { max-width: 680px; }
.hero-title { font-size: clamp(3.2rem, 8vw, 6.8rem); font-weight: 200; line-height: .95; letter-spacing: -.045em; margin-bottom: .45em; }
.hero-title strong { display: block; font-weight: 600; letter-spacing: -.035em; }
/* home title in Luminari (the face of the original site) */
.hero-inner .eyebrow { margin-bottom: 3.4rem; }   /* breathing room above the Luminari title */
.hero-title { font-family: 'Luminari', 'EB Garamond', Georgia, serif; font-weight: 400; letter-spacing: 0; line-height: 1.04; font-size: clamp(3rem, 7.2vw, 6.1rem); }
.hero-title strong { font-weight: 400; font-style: normal; letter-spacing: 0; }
.hero-lead { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.65; color: var(--ink-2); font-weight: 350; max-width: 36em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.75rem; }
@media (max-width: 860px) {
  .hero { min-height: 0; padding: 0 0 3.5rem; flex-direction: column; align-items: stretch; }
  .mosaic { position: relative; width: 100%; right: 0; height: 300px; overflow: hidden; }
  .mosaic::after { background: linear-gradient(0deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 60%), linear-gradient(180deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 20%); }
  .mosaic-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; transform: rotate(-4deg) translateY(-10%); animation: none; }
  .hero-inner { margin-top: -3rem; }
}

/* facts */
.facts-band { border-block: 1px solid var(--line); background: var(--bg-2); }
.facts { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.facts li { padding: 2.25rem 1.5rem 2.25rem 0; display: flex; flex-direction: column; gap: .5rem; }
.facts li + li { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.fact-k { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 200; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: lining-nums; }
.fact-v { font-size: .85rem; color: var(--muted); line-height: 1.45; max-width: 22ch; }
@media (max-width: 860px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li, .facts li + li { padding: 1.5rem 1rem 1.5rem 0; border-left: 0; }
  .facts li:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.empty-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem; color: var(--muted); background: var(--bg-2); }
.empty-card p { margin: 0; }
.empty-note { color: var(--muted); }

/* members on home */
/* members carousel on home */
.carousel-nav { display: flex; align-items: center; gap: .6rem; }
.carousel-nav .arrow-link { margin-left: 1rem; }
.car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; cursor: pointer; display: grid; place-items: center; transition: border-color .2s, color .2s, background .2s; }
.car-btn:hover { border-color: var(--amber); color: var(--amber); }
.js .car-btn { display: grid; }
.car-btn { display: none; }
.carousel { position: relative; }
.member-carousel {
  --gap: 1.75rem; --per: 4;
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.member-carousel::-webkit-scrollbar { display: none; }
.member-carousel > li { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start; }
.strip-card { display: flex; flex-direction: column; color: var(--ink); }
.strip-photo { display: block; overflow: hidden; border-radius: 3px; margin-bottom: 1.1rem; }
.strip-card .portrait { aspect-ratio: 4 / 5; }
.strip-name { font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.strip-meta { font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.strip-card:hover { color: var(--hi); }
@media (max-width: 960px) { .member-carousel { --per: 2.3; --gap: 1.1rem; } .strip-name { font-size: 1.1rem; } }
@media (max-width: 560px) { .member-carousel { --per: 1.6; } .carousel-nav .car-btn { display: none; } .carousel-nav .arrow-link { margin-left: 0; } }
.js [data-shuffle] { opacity: 0; transition: opacity .8s var(--ease); }
.js [data-shuffle].shuffled { opacity: 1; }

/* quote */
.quote-section { border-top: 1px solid var(--line); position: relative; isolation: isolate; overflow: hidden; }
/* workshop photo, barely visible, tinted to the background (left side, behind the quote) */
.quote-section::before {
  content: ''; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: min(62%, 980px);
  background: url('../img/dilna-police.jpg') 0% 100% / cover no-repeat;
  filter: var(--dilna-filter); mix-blend-mode: var(--dilna-blend); opacity: calc(var(--dilna-opacity) * 2.2);
  /* clearest in the bottom-left corner, dissolving up and right towards the quote */
  -webkit-mask-image: radial-gradient(ellipse 84% 72% at 12% 100%, #000 34%, rgb(0 0 0 / .35) 64%, transparent 94%);
  mask-image: radial-gradient(ellipse 84% 72% at 12% 100%, #000 34%, rgb(0 0 0 / .35) 64%, transparent 94%);
  pointer-events: none;
}
/* one column (≤860 px): the photo moves to the bottom-right corner (mirrored, so its sharp side with the paint tubes
   is in the corner) and dissolves towards the text; on phones it is only a faint hint */
@media (max-width: 860px) {
  .quote-section::before {
    left: auto; right: 0; top: auto; bottom: 0; width: 78%; height: 78%;
    background-position: 0% 100%; transform: scaleX(-1);
    opacity: calc(var(--dilna-opacity) * 1.8);
    -webkit-mask-image: radial-gradient(ellipse 95% 90% at 0% 100%, #000 22%, rgb(0 0 0 / .3) 55%, transparent 85%);
    mask-image: radial-gradient(ellipse 95% 90% at 0% 100%, #000 22%, rgb(0 0 0 / .3) 55%, transparent 85%);
  }
  .quote-year { color: color-mix(in srgb, var(--quote-num) 30%, var(--muted)); opacity: .8; }
}
@media (max-width: 560px) {
  .quote-section::before { width: 100%; height: 55%; opacity: calc(var(--dilna-opacity) * .8); }
}
.quote-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.big-quote { margin: 0; }
.big-quote p { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.15; font-weight: 200; letter-spacing: -.02em; margin: 0; }
.big-quote em { font-style: normal; color: var(--amber); font-weight: 400; }
.quote-year { display: block; font-size: clamp(6rem, 14vw, 12.5rem); font-weight: 100; line-height: .8; letter-spacing: -.06em; color: var(--quote-num); margin-bottom: 1.5rem; }
.quote-side p { max-width: 40ch; }
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }

/* ---------- portraits ---------- */
.portrait {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%;
  background: var(--bg-3); border-radius: 3px;
  filter: var(--portrait-filter);
  transition: filter .5s var(--ease), transform .8s var(--ease);
}
a:hover .portrait, a:focus-visible .portrait { filter: var(--portrait-hover-filter); }
.portrait-empty { display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, var(--empty-hi), var(--bg-2) 70%); filter: none; }
.portrait-empty span { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 200; color: var(--amber); letter-spacing: .06em; opacity: .7; }

/* ---------- members directory ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 3rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.search { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 400px; }
.search svg { position: absolute; left: 1rem; color: var(--muted); }
.search input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px;
  padding: .8rem 1.1rem .8rem 2.8rem; -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--amber); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font: inherit; font-size: .86rem; color: var(--ink-2); cursor: pointer; background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: .45rem 1rem; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip-n { font-size: .75em; opacity: .6; margin-left: .2rem; }

.member-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 3rem 1.75rem; }
.member-card { display: flex; flex-direction: column; color: var(--ink); height: 100%; }
.member-card:hover { color: var(--hi); }
.member-photo { display: block; overflow: hidden; border-radius: 3px; margin-bottom: 1.1rem; }
.member-card:hover .portrait { transform: scale(1.03); }
.member-meta { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; }
.member-name { font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.member-role { font-size: .88rem; color: var(--ink-2); }
.member-city { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.member-item[hidden] { display: none; }
@media (max-width: 520px) {
  .member-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .member-name { font-size: 1.05rem; }
  .member-role { font-size: .8rem; }
}

.tag { display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .25rem .6rem; border: 1px solid rgba(212, 151, 74, .5); color: var(--amber); border-radius: 999px; margin-top: .55rem; }
.tag-strong { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.tag-draft { border-color: var(--ink-2); color: var(--ink-2); margin: 0 0 1rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.tags .tag { margin: 0; }

/* member detail */
.member-hero { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.member-hero-grid { display: grid; grid-template-columns: minmax(220px, 380px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.member-portrait { margin: 0; position: relative; }
.member-portrait .portrait { filter: grayscale(.2) brightness(.95); box-shadow: 0 40px 80px -30px var(--shadow); }
.member-portrait::before { content: ''; position: absolute; inset: -15% -25% auto; height: 70%; background: radial-gradient(closest-side, rgba(212, 151, 74, .12), transparent); z-index: -1; }
.member-head h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: .35em; }
.member-head .lead { margin-bottom: 1.5rem; }
.member-contact { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.contact-list { margin: 0; }
.contact-row { display: grid; grid-template-columns: 22px 9.5rem 1fr; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.contact-row .ic { width: 20px; height: 20px; color: var(--amber); margin-top: .2rem; }
.contact-row dt { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: .3rem; }
.contact-row dd { margin: 0; color: var(--ink); }
.contact-row dd a { color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .2s, color .2s; }
.contact-row dd a:hover { color: var(--amber); border-color: var(--amber); }
.contact-row dd .small-link { color: var(--amber); border: 0; }
@media (max-width: 760px) {
  .member-hero-grid { grid-template-columns: 1fr; }
  .member-portrait { max-width: 280px; }
  .contact-row { grid-template-columns: 22px 1fr; row-gap: .2rem; }
  .contact-row dt, .contact-row dd { grid-column: 2; }
  .contact-row dt { padding: 0; }
}
.member-body { display: grid; gap: 4rem; }
.prev-next { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-block: 3rem 4.5rem; }
.pn { display: flex; flex-direction: column; color: var(--ink); }
.pn-next { text-align: right; align-items: flex-end; }
.pn-label { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pn-name { font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; }
.pn:hover .pn-name { color: var(--amber); }
.pn-back { font-size: .85rem; color: var(--muted); }
.pn-back:hover { color: var(--ink); }
@media (max-width: 640px) { .prev-next { grid-template-columns: 1fr 1fr; } .pn-back { grid-column: 1 / -1; grid-row: 2; text-align: center; } }

/* gallery */
.gallery { list-style: none; padding: 0; margin: 0; columns: 3 260px; column-gap: 1rem; }
.gallery li { break-inside: avoid; margin-bottom: 1rem; }
.gallery-item { display: block; position: relative; overflow: hidden; border-radius: 3px; background: var(--bg-3); }
.gallery-item img { width: 100%; transition: transform .8s var(--ease), opacity .4s; }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-cap { display: block; padding: .7rem 0 .2rem; font-size: .85rem; color: var(--ink-2); background: var(--bg); }

.lightbox { position: fixed; inset: 0; z-index: 200; overflow: hidden; touch-action: none; overscroll-behavior: contain; background: var(--lightbox); display: grid; place-items: center; padding: 4rem 1rem 3rem; opacity: 0; transition: opacity .25s; }
.lightbox.open { opacity: 1; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lightbox figcaption { color: rgb(243 236 226 / .78); font-size: .95rem; text-align: center; }   /* the viewer is always dark, so its text and buttons are always light */
.lightbox button { position: absolute; background: rgb(0 0 0 / .25); border: 1px solid rgb(243 236 226 / .35); color: #f3ece2; width: 48px; height: 48px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { border-color: #f3ece2; background: rgb(0 0 0 / .45); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- events ---------- */
.event-list { list-style: none; padding: 0; margin: 0 0 3.5rem; display: grid; gap: 1.25rem; }
.event-list-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-bottom: 0; }
.event-card { display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; align-items: start; padding: 2rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); height: 100%; transition: border-color .25s, transform .3s var(--ease), background .3s; }
.event-card:hover { border-color: var(--line-2); background: var(--bg-3); transform: translateY(-2px); color: var(--ink); }
.event-cover { grid-column: 1 / -1; margin: -2rem -2rem 0; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.event-cover img { width: 100%; height: 100%; object-fit: cover; }
.date-badge { display: flex; flex-direction: column; min-width: 4.5rem; line-height: 1; color: var(--amber); }
.db-day { font-size: 3.4rem; font-weight: 200; letter-spacing: -.04em; }
.db-month { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; }
.db-year { font-size: .7rem; letter-spacing: .2em; color: var(--muted); margin-top: .3rem; }
.event-meta { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.event-title { font-size: 1.45rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.event-card:hover .event-title { color: var(--hi); }
.event-when { font-size: .92rem; color: var(--ink-2); }
.event-place { font-size: .88rem; color: var(--muted); }
.event-summary { margin-top: .6rem; color: var(--ink-2); font-size: .98rem; }
.event-list-past .date-badge { color: var(--muted); }
.event-list-past .event-card { background: transparent; }
.events-wrap > * { max-width: 960px; }
.events-wrap .section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }

.event-facts { display: flex; flex-wrap: wrap; gap: 1rem 3.5rem; margin: 1.75rem 0 0; }
.event-facts dt { font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.event-facts dd { margin: .35rem 0 0; font-size: 1.05rem; }
.event-body { display: grid; gap: 2rem; }
.event-body > * { max-width: 820px; }
.event-body > .gallery-section { max-width: none; margin-top: 2rem; }
.section-title .count { font-size: .45em; color: var(--muted); vertical-align: super; margin-left: .3em; letter-spacing: 0; }
.page-head-compact { padding-bottom: 0; }
/* workshop photo faintly on the left of a page head (Organizace: tonewood wedges) */
.page-head-photo { overflow: visible; }
.page-head-photo::before {
  content: ''; position: absolute; z-index: -1; left: 0; top: 0; height: calc(100% + 26rem); width: min(66%, 1040px);
  background: var(--head-photo) 50% 40% / cover no-repeat;
  filter: var(--dilna-filter); mix-blend-mode: var(--dilna-blend); opacity: var(--dilna-opacity);
  -webkit-mask-image: radial-gradient(ellipse 62% 54% at 38% 40%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 54% at 38% 40%, #000 25%, transparent 100%);
  pointer-events: none;
}
.page-head-photo + .section { position: relative; z-index: 1; }
/* Stanovy: violin construction drawing (photo 11, turned 90° left) in the site colours, top right of the page head */
.page-head-drawn + .section { position: relative; z-index: 1; }
.page-head-drawing { position: absolute; z-index: -1; top: .5rem; height: calc(100% + 15rem); right: max(-2%, calc((100% - var(--wrap)) / 2 - 6rem)); aspect-ratio: 1600 / 921; max-width: 78%; pointer-events: none; opacity: var(--drawing-opacity, .22); }
.page-head-drawing span { position: absolute; inset: 0; -webkit-mask: var(--m) 100% 50% / contain no-repeat; mask: var(--m) 100% 50% / contain no-repeat; }
.dr-ink { --m: url('../img/stanovy-ink.png'); background: var(--ink); }
.dr-red { --m: url('../img/stanovy-red.png'); background: var(--amber); }
:root[data-theme="light"] .page-head-drawing { --drawing-opacity: .32; }
@media (max-width: 860px) { .page-head-drawing { max-width: 80%; right: -6%; --drawing-opacity: .14; } :root[data-theme="light"] .page-head-drawing { --drawing-opacity: .2; } }

/* Stanovy: violin bridges (photo 22) under the table of contents, pressed to the left edge of the window;
   it lives on the sticky .toc, so it stays in place together with the contents while the statutes scroll */
.section-statutes { overflow-x: clip; }
.section-statutes + .site-footer, .site-footer { position: relative; z-index: 2; }   /* the photo may slide under the footer at the very end */
.section-statutes .statutes { position: relative; }
.toc::before {
  --toc-x: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter) + 24px);
  content: ''; position: absolute; z-index: -1; top: calc(100% + .5rem); height: max(260px, calc(100vh - 110px - 100% - .5rem));   /* from under the contents to the bottom of the window, never under any text */
  left: calc(-1 * var(--toc-x)); width: calc(var(--toc-x) + 330px);
  background: url('../img/dilna-kobylky2.jpg') 0% 100% / cover no-repeat;
  filter: var(--dilna-filter); mix-blend-mode: var(--dilna-blend); opacity: var(--dilna-opacity);
  -webkit-mask-image: radial-gradient(ellipse 100% 115% at 0% 100%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 115% at 0% 100%, #000 45%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 860px) { .toc::before { display: none; } }

/* Stanovy: rib moulds (photo 4) bottom right, pressed to the right and bottom edge of the window (clear of the violin drawing above), staying in place while the text scrolls */
.statutes-side { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: calc(max(0px, (100vw - var(--wrap)) / 2) + 250px); pointer-events: none; }
.statutes-side span {
  position: sticky; top: 81px; display: block; height: calc(100vh - 81px);
  background: url('../img/dilna-formy.jpg') 50% 100% / cover no-repeat;
  filter: var(--dilna-filter); mix-blend-mode: var(--dilna-blend); opacity: calc(var(--dilna-opacity) * 1.45);
  -webkit-mask-image: radial-gradient(ellipse 100% 92% at 100% 100%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 92% at 100% 100%, #000 50%, transparent 100%);
}
@media (max-width: 1100px) { .statutes-side { display: none; } }

/* Historie: flamed maple (photo 23, turned upright) repeated down the right edge of the window from „Vznik Kruhu“ to the footer,
   sharpest at the edge, dissolving towards the text and at the top and bottom */
.history-body { position: relative; isolation: isolate; }
.history-body::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: min(34vw, 560px);
  background: url('../img/javor-pruh.jpg') 100% 0 / 100% auto repeat-y;
  filter: var(--dilna-filter); mix-blend-mode: var(--dilna-blend); opacity: calc(var(--dilna-opacity) * 1.3);
  -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 100%), linear-gradient(180deg, transparent 0, #000 6rem, #000 calc(100% - 22rem), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 26%, #000 100%), linear-gradient(180deg, transparent 0, #000 6rem, #000 calc(100% - 22rem), transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}
@media (max-width: 860px) { .history-body::before { width: 38vw; opacity: calc(var(--dilna-opacity) * .8); } }

/* Členové: tonewood wedges (photo 1) to the right of the „Adresář členů“ title, treated like the photos in the home hero:
   full strength in the site's duotone, melting into the page on the left, top and bottom */
.page-head-photo-r::before {
  content: ''; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; aspect-ratio: 1.43; max-width: 62%;
  background: var(--head-photo) 50% 50% / cover no-repeat;
  filter: var(--slide-filter);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .18) 30%, #000 62%), linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .18) 30%, #000 62%), linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}
@media (max-width: 860px) { .page-head-photo-r::before { max-width: 100%; opacity: .35; } }

/* Členové: violin scroll construction (photo 10, second drawing, mirrored so the scroll is on the right) beside the title — crisp lines on the page background */
.page-head-scroll { position: absolute; z-index: -1; top: 50%; transform: translateY(-46%) scaleX(-1); right: max(1rem, calc((100% - var(--wrap)) / 2 + var(--gutter))); width: min(34vw, 490px); aspect-ratio: 1210 / 560; pointer-events: none; }
.page-head-scroll span { position: absolute; inset: 0; }
.sc-ink { background: var(--ink); -webkit-mask: url('../img/zavitek-ink.png') 0 0 / 100% 100% no-repeat; mask: url('../img/zavitek-ink.png') 0 0 / 100% 100% no-repeat; opacity: .85; }
.sc-col { background: url('../img/zavitek-col.png') 0 0 / 100% 100% no-repeat; opacity: .9; }
/* narrower screens: the whole scroll moves to the top-right corner (never cut by the window edge), gets smaller and fainter,
   and its long tail dissolves so the lines do not run through the heading and the lead */
@media (max-width: 1100px) {
  .page-head-scroll {
    top: clamp(1rem, 3vw, 2rem); right: var(--gutter); transform: scaleX(-1); width: clamp(190px, 42vw, 440px); opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 100%); mask-image: linear-gradient(90deg, #000 45%, transparent 100%);
  }
}
@media (max-width: 860px) { .page-head-scroll { opacity: .38; } }
@media (max-width: 480px) { .page-head-scroll { top: .75rem; width: 58vw; opacity: .3; } }

/* Odkazy: pencil construction drawing (photo 13) to the right of the title, lines in the site's ink, fading out at the edges */
.page-head-sketch {
  position: absolute; z-index: -1; top: .25rem; height: calc(100% + 3rem); right: max(0px, calc((100% - var(--wrap)) / 2 - 2rem)); width: min(54%, 720px); pointer-events: none; transform: rotate(-12deg); transform-origin: 50% 50%;
  background: var(--ink); opacity: var(--sketch-opacity, .42);
  -webkit-mask: url('../img/odkazy-rys.png') 50% 50% / contain no-repeat, linear-gradient(90deg, transparent 0%, #000 8%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask: url('../img/odkazy-rys.png') 50% 50% / contain no-repeat intersect, linear-gradient(90deg, transparent 0%, #000 40%) intersect, linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
}
:root[data-theme="light"] .page-head-sketch { --sketch-opacity: .5; }
@media (max-width: 860px) { .page-head-sketch { width: 100%; --sketch-opacity: .14; } :root[data-theme="light"] .page-head-sketch { --sketch-opacity: .18; } }

/* Organizace, Vedení: violin bridges and sound posts faintly on the right */
.section-vedeni { position: relative; isolation: isolate; overflow: hidden; }
.section-vedeni::before {
  content: ''; position: absolute; z-index: -1; right: 0; top: 0; height: 770px; width: min(62%, 980px);   /* same size as in Organizace – Vedení, reaching under the first event */
  background: url('../img/dilna-kobylky.jpg') 50% 50% / cover no-repeat;
  filter: var(--dilna-filter); mix-blend-mode: var(--dilna-blend); opacity: calc(var(--dilna-opacity) * .55);
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 66% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 66% at 66% 50%, #000 25%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 860px) { .section-vedeni::before { width: 100%; } }
@media (max-width: 860px) { .page-head-photo::before { width: 100%; } }
.events-page { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.tag-upcoming { margin: 0 0 .5rem; background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.event-body .lead { margin: 0; }
.event-hero-img { margin: 0; }
.event-hero-img img { width: 100%; border-radius: var(--radius); }

/* ---------- prose ---------- */
.prose { max-width: 68ch; color: var(--ink-2); }
.prose-lg { font-size: 1.12rem; }
.prose strong { color: var(--ink); }
.prose h2 { margin-top: 2.25em; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75em; }
.prose a { border-bottom: 1px solid rgba(212, 151, 74, .4); }
.prose ol, .prose ul { padding-left: 1.4em; margin: 0 0 1.25em; }
.prose li { margin-bottom: .6em; padding-left: .3em; }
.prose li::marker { color: var(--amber); font-weight: 500; }
.prose blockquote { margin: 2em 0; padding: .3em 0 .3em 1.5em; border-left: 1px solid var(--amber); font-size: 1.3em; font-weight: 200; line-height: 1.45; color: var(--ink); letter-spacing: -.01em; }
.prose blockquote p:last-child { margin: 0; }
.prose .note, .note { font-size: .9rem; color: var(--muted); border-left: 1px solid var(--line-2); padding-left: 1rem; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 3em 0; }
.prose ul.alpha { list-style: none; padding-left: .25em; margin: .7em 0 .2em; }
.prose ul.alpha li { margin-bottom: .35em; padding-left: 1.8em; text-indent: -1.8em; }
.alpha-mark { color: var(--amber); display: inline-block; width: 1.8em; text-indent: 0; }

/* org */
.org-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; }
.card-title { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 1rem; }
.contact-card address { margin-bottom: 1.25rem; color: var(--ink-2); }
.contact-card address strong { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .org-grid { grid-template-columns: 1fr; } }

.leaders { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; max-width: 900px; }
.leader-card { display: flex; flex-direction: column; color: var(--ink); }
.leader-card .portrait { margin-bottom: 1.1rem; }
.leader-role { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.leader-name { font-size: 1.4rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.2; margin-top: .25rem; }
.leader-city { font-size: .85rem; color: var(--muted); }
.leader-card:hover .leader-name { color: var(--hi); }
@media (max-width: 600px) { .leaders { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .leader-name { font-size: 1.15rem; } }

.committee { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 2.5rem; border-top: 1px solid var(--line); }
.committee li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.committee a { font-size: 1.15rem; font-weight: 400; color: var(--ink); }
.committee a:hover { color: var(--amber); }
.committee span { font-size: .8rem; color: var(--muted); text-align: right; }

/* statutes */
.doc-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.toc { position: sticky; top: 110px; font-size: .9rem; }
.toc-title { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 1rem; }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.toc li { line-height: 1.35; }
.toc a { display: block; padding: .4rem 0 .4rem 1rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--ink); border-left-color: var(--amber); }
.statutes h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); padding-top: 2rem; border-top: 1px solid var(--line); color: var(--ink); }
.statutes h2:first-of-type { border-top: 0; padding-top: 0; }
.statutes .note { margin-bottom: 2.5rem; }
.signature { margin-top: 3rem; color: var(--ink-2); }
@media (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr; }
  .toc { position: static; padding: 1.25rem 1.5rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
  .toc ol { columns: 2 200px; border: 0; }
  .toc a { padding-left: 0; border: 0; }
}

/* history */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 3.9rem; height: 1px; background: var(--line-2); }
.timeline li { position: relative; padding: 0 1.25rem 0 0; }
.timeline li::before { content: ''; position: absolute; top: calc(3.9rem - 4px); left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--amber); }
.timeline li:nth-child(4)::before { background: var(--amber); box-shadow: 0 0 0 6px rgba(212, 151, 74, .15); }
.tl-year { display: block; font-size: 2.6rem; font-weight: 200; letter-spacing: -.04em; color: var(--ink); line-height: 1; margin-bottom: 2.4rem; }
.timeline li:nth-child(4) .tl-year { color: var(--amber); }
.timeline p { font-size: .88rem; line-height: 1.55; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: 1.75rem; padding-left: 1.75rem; }
  .timeline::before { left: 4px; right: auto; top: .6rem; bottom: .6rem; width: 1px; height: auto; }
  .timeline li { padding: 0; }
  .timeline li::before { left: -1.75rem; top: .9rem; }
  .tl-year { margin-bottom: .4rem; font-size: 2rem; }
}
.history { max-width: 70ch; }
.history > h2:first-child + p::first-line { color: var(--ink); }
.manifesto { margin: 5rem 0 0; padding: clamp(1.75rem, 5vw, 3.75rem); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.manifesto-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; margin-top: 0 !important; color: var(--ink); }
.manifesto-sub { font-size: 1.2rem; color: var(--amber); font-weight: 300; margin-bottom: 2.5rem; }
.manifesto-date { margin-top: 2.5rem; color: var(--ink); }
.signatories { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: .88rem; line-height: 1.7; color: var(--muted); }
.signatories h3 { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.signatories-orgs { font-style: italic; }

/* links */
.link-grid { list-style: none; padding: 0; margin: 0 0 4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.link-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; transition: border-color .25s, background .3s; }
.link-card:hover { border-color: var(--line-2); background: var(--bg-3); }
.link-card h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.link-card p { font-size: .93rem; color: var(--muted); margin-bottom: 1rem; }
.link-urls { margin-top: auto !important; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .88rem; margin-bottom: 0 !important; }
.section-tight .section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* 404 */
.notfound { padding-block: clamp(4rem, 12vw, 9rem); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: .92rem; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--amber); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding-block: 4.5rem 3rem; }
.footer-brand img { width: 96px; height: auto; margin-bottom: 1.5rem; opacity: .7; filter: var(--seal-filter); }
.footer-brand p { max-width: 36ch; }
.footer-h { font-family: 'Luminari', 'EB Garamond', Georgia, serif; font-size: 1.6rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; color: var(--ink); margin-bottom: 1.1rem; }   /* same face as the home title and header */
.footer-nav { list-style: none; padding: 0; margin: 0; columns: 2; }
.footer-nav li { margin-bottom: .4rem; }
.site-footer address { line-height: 1.75; }
.site-footer { position: relative; overflow: hidden; }
/* frieze of flamed maple along the very bottom, barely visible, tinted to the background */
.footer-bottom { position: relative; isolation: isolate; }
.footer-bottom::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw;
  background: url('../img/dilna-javor-frieze.jpg') left center / auto 160px repeat-x;
  filter: var(--dilna-filter); mix-blend-mode: var(--dilna-blend); opacity: calc(var(--dilna-opacity) * .35); pointer-events: none;
}
.footer-bottom::after { content: ''; position: absolute; top: -1px; height: 1px; left: -100vw; right: -100vw; background: var(--line); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 0; padding-block: 1.5rem 2rem; font-size: .8rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .toc, .prev-next, .filters, .mosaic, .page-head-art { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose, .lead, .muted { color: #000; }
  a { color: inherit; }
}

/* events on phones: date above the title instead of a side column */
@media (max-width: 560px) {
  .event-card { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; }
  .event-cover { margin: -1.5rem -1.5rem 0; }
  .date-badge { flex-direction: row; align-items: baseline; gap: .6rem; }
  .db-day { font-size: 2.4rem; }
  .db-month, .db-year { margin-top: 0; }
}

/* KUH seal in the header of the Organisation page */
.page-head-seal-wrap { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: flex-end; align-items: center; }
.page-head-seal { width: clamp(200px, 19vw, 275px); height: auto; opacity: .8; filter: var(--seal-filter); margin: 2.5rem 3% 0 0; }
@media (max-width: 760px) { .page-head-seal-wrap { display: none; } }

/* abbreviation after a page title, e.g. "Organizace (KUH)" */
.title-abbr { font-weight: 100; color: var(--muted); letter-spacing: -.02em; white-space: nowrap; }

/* member work: even grid read left to right, so photos of one instrument stay together */
.gallery-grid { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.gallery-grid li { margin: 0; }
.gallery-grid .gallery-item img { aspect-ratio: 3 / 4; object-fit: cover; }
.gallery-grid .gallery-cap { font-size: .8rem; color: var(--muted); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- member works: one mosaic per instrument ---------- */
.works .work { margin-top: 3rem; }
.works .work:first-of-type { margin-top: 1.5rem; }
.work-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.work-title { font-family: 'Luminari', 'EB Garamond', Georgia, serif; font-weight: 400; font-size: 1.55rem; letter-spacing: 0; margin: 0; color: var(--ink); }
.work-sub { margin: 0; color: var(--muted); font-size: .95rem; }
.work-mosaic { display: flex; flex-direction: column; gap: .6rem; }
/* justified rows: each photo keeps its own proportions (nothing is cropped); a row fills the width, its photos share one height */
.work-row { display: flex; gap: .6rem; max-width: calc(var(--sum) * 300px + (var(--n) - 1) * .6rem); }   /* rows never taller than ~300px */
.work-row .gallery-item { flex: calc(var(--r) * 100) 1 0; min-width: 0; border-radius: 2px; background: none; }
.work-row .gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: var(--r); object-fit: contain; }
/* hand-composed mosaic (gallery.json "span": "WxH" on a 12-column grid) – compact, photos cropped to their tiles */
.work-grid { container-type: inline-size; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: .6rem;
  grid-auto-rows: calc((100cqw - 11 * .6rem) / 12 * 1.25); }
.work-grid li { min-height: 0; grid-column: span var(--c); grid-row: span var(--r); }
.work-grid .gallery-item { height: 100%; border-radius: 2px; }
.work-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 45%); }
@media (max-width: 700px) { .work-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - 5 * .5rem) / 6 * 1.25); gap: .5rem; } }
/* feature layout: big front + back, details column; whole photos, nothing cropped */
.works:has(.work-feature) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); column-gap: 2.5rem; align-items: start; }
.works:has(.work-feature) > .section-title, .works:has(.work-feature) .work:has(.work-mosaic) { grid-column: 1 / -1; }
.works:has(.work-feature) .work, .works:has(.work-feature) .work:first-of-type { margin-top: 1.5rem; }
.work-feature { display: flex; gap: .5rem; width: 100%; max-width: calc(var(--T) * 520px); aspect-ratio: var(--T); }
/* a single instrument: whole width, block centred and a fifth larger */
.works:has(.work-feature) .work:only-of-type { grid-column: 1 / -1; }
.work:only-of-type .work-feature { margin-inline: auto; max-width: calc(var(--T) * 624px); }
.work-feature > .gallery-item, .wf-col { flex: var(--r) 1 0; min-width: 0; }
.wf-col { display: flex; flex-direction: column; gap: .5rem; }
.wf-row { flex: var(--h) 1 0; min-height: 0; display: flex; gap: .5rem; }
.wf-row .gallery-item { flex: var(--r) 1 0; min-width: 0; }
.work-feature .gallery-item { background: none; border-radius: 2px; }
.work-feature .gallery-item { display: flex; align-items: center; justify-content: center; }
.work-feature .gallery-item img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.work-view { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .6rem; font-size: .78rem; letter-spacing: .04em; color: #fff; background: linear-gradient(0deg, rgb(20 14 9 / .6), transparent); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.gallery-item:hover .work-view, .gallery-item:focus-visible .work-view { opacity: 1; transform: none; }
/* phones: the rows melt into one wrapping list at a fixed height, still uncropped */
@media (max-width: 700px) {
  .work-mosaic { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
  .work-row { display: contents; }
  .work-row .gallery-item { flex: 0 0 auto; width: calc(var(--r) * 150px); max-width: 100%; }
}
.member-body > * { min-width: 0; }   /* wide work photos must not stretch the column on phones */

/* galleries where every work is just front + back: lay the works side by side */
.works-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 2.5rem; align-items: start; }
.works-pairs > .section-title { grid-column: 1 / -1; }
.works-pairs .work, .works-pairs .work:first-of-type { margin-top: 1.5rem; }
.works-pairs .work-head { min-height: 4.6rem; align-content: flex-end; }
.works-pairs .work-title { font-size: 1.4rem; }
@media (max-width: 700px) { .works-pairs .work-row .gallery-item { width: calc(50% - .25rem); } }

/* lightbox zoom */
.lightbox img { cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; position: relative; z-index: 1; }
.lightbox.zoomed img { cursor: grab; }
.lightbox.zoomed img:active { cursor: grabbing; }
.lightbox figcaption { transition: opacity .25s; }
.lightbox.zoomed figcaption { opacity: 0; }
.lightbox button { z-index: 2; }
.lb-zoom { right: 1rem; bottom: 1rem; }
.lb-zoom svg { display: block; }
.lightbox.zoomed .lbz-v { display: none; }

/* lines of small works side by side; each work's share follows its photos' proportions so the line has one height */
.works-line { display: flex; gap: 2.5rem; align-items: flex-start; margin-top: 3rem; max-width: calc(var(--R) * 340px + var(--g) * .6rem + (var(--k) - 1) * 2.5rem); }
.works-line:first-of-type { margin-top: 1.5rem; }
.works-line > .work, .works .works-line > .work:first-of-type { flex: var(--R) 1 0; min-width: 0; margin-top: 0; }
.works-line .work-row { max-width: none; }
@media (max-width: 700px) {
  .works-line { display: block; max-width: none; margin-top: 0; }
  .works-line > .work, .works .works-line > .work:first-of-type { margin-top: 3rem; }
}
@media (max-width: 700px) { .work-row[style*="--n:1"] .gallery-item { width: min(100%, calc(var(--r) * 340px)); } }
/* black-and-white portraits on the profile page: toned in the site palette like the directory, not plain grey */
.member-portrait .portrait.portrait-mono { filter: var(--portrait-filter); }
@media (max-width: 700px) {
  /* side-by-side works on a phone: each work's photos still form one full-width row */
  .works-line .work-row { display: flex; gap: .4rem; }
  .works-line .work-row .gallery-item { flex: calc(var(--r) * 100) 1 0; width: auto; }
  .works-line .work-row[style*="--n:1"] .gallery-item { flex: 0 0 auto; width: min(100%, calc(var(--r) * 340px)); }
}

/* members: sort toggle and the "just visited" highlight when returning from a profile */
.sort-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.member-item .member-card { border-radius: 4px; transition: box-shadow .6s, background .6s; }
.member-item.just-visited .member-card { box-shadow: 0 0 0 10px color-mix(in srgb, var(--amber) 12%, var(--bg)), 0 0 0 11.5px var(--amber); }

/* very narrow phones (320–380 px): tighter header so the menu button stays on screen */
@media (max-width: 380px) {
  .header-inner { gap: .6rem; }
  .brand { gap: .55rem; }
  .brand-seal { width: 34px; }
  .brand-name { font-size: .84rem; }
  .brand-sub { font-size: .58rem; letter-spacing: .14em; }
  .theme-toggle { width: 34px; height: 34px; }
  .nav-toggle { padding: .6rem .65rem; }
}
/* the soft glow behind the profile portrait must not widen the page on narrow phones */
.member-hero { overflow-x: clip; }

/* ---------- very wide screens (> 1600 px): background photos no longer stick to the window edge ----------
   they stay at the edge of a 1600 px "stage" around the content and dissolve on their outer side too,
   so on 1920 / 2560 / 3440 px monitors they keep their relation to the text */
:root { --stage: 1600px; --edge: max(0px, (100vw - var(--stage)) / 2); --edge-fade: clamp(0px, var(--edge), 200px); }
@media (min-width: 1601px) {
  .mosaic { right: var(--edge); width: calc((100vw - 2 * var(--edge)) * .62); }
  .mosaic::after {
    background:
      linear-gradient(90deg, var(--bg) 0%, var(--bg) 6%, rgb(var(--bg-rgb) / .82) 30%, rgb(var(--bg-rgb) / 0) 62%),
      linear-gradient(270deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 18%),
      linear-gradient(0deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 28%),
      linear-gradient(180deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 14%);
  }
  .page-head-art {
    right: var(--edge);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%, #000 75%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 92%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 60%, #000 75%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 92%);
  }
  .history-body::before {
    right: var(--edge);
    -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6rem, #000 calc(100% - 22rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 26%, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6rem, #000 calc(100% - 22rem), transparent 100%);
  }
  .page-head-photo-r::before {
    right: var(--edge);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .18) 30%, #000 62%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .18) 30%, #000 62%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
  }
  .section-vedeni::before { right: var(--edge); }
  .page-head-photo::before { left: var(--edge); }
  .quote-section::before {
    left: var(--edge);
    -webkit-mask-image: radial-gradient(ellipse 84% 72% at 12% 100%, #000 34%, rgb(0 0 0 / .35) 64%, transparent 94%), linear-gradient(90deg, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 84% 72% at 12% 100%, #000 34%, rgb(0 0 0 / .35) 64%, transparent 94%), linear-gradient(90deg, transparent 0%, #000 22%);
    mask-composite: intersect;
  }
  .toc::before {
    left: calc(var(--edge) - var(--toc-x)); width: calc(var(--toc-x) - var(--edge) + 330px);
    -webkit-mask-image: radial-gradient(ellipse 100% 115% at 0% 100%, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 30%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 100% 115% at 0% 100%, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 30%);
    mask-composite: intersect;
  }
  .statutes-side { right: var(--edge); width: calc((var(--stage) - var(--wrap)) / 2 + 250px); }
  .statutes-side span {
    -webkit-mask-image: radial-gradient(ellipse 100% 92% at 100% 100%, #000 50%, transparent 100%), linear-gradient(270deg, transparent 0%, #000 25%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 100% 92% at 100% 100%, #000 50%, transparent 100%), linear-gradient(270deg, transparent 0%, #000 25%);
    mask-composite: intersect;
  }
}

/* Členové, below 1200 px (where search, chips and the A–Z toggle no longer fit on one line): search across the full width
   with the A–Z toggle beside it, city chips on their own line(s) below, left-aligned like the heading and the cards —
   one stable layout instead of the toggle jumping between lines */
@media (max-width: 1199px) {
  /* 861–1199 px: search at its normal length on top, city chips below with the A–Z toggle at the right end of their line */
  .filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: start; }
  .filters .search { grid-column: 1; grid-row: 1; max-width: 420px; }
  .filters .chips { grid-column: 1; grid-row: 2; }
  .filters .sort-toggle { grid-column: 2; grid-row: 2; white-space: nowrap; }
}
@media (max-width: 860px) {
  /* phones and small tablets: search across the width with the toggle beside it, chips below */
  .filters { gap: .9rem .6rem; align-items: center; }
  .filters .search { max-width: none; }
  .filters .sort-toggle { grid-row: 1; align-self: stretch; display: inline-flex; align-items: center; }
  .filters .chips { grid-column: 1 / -1; }
}
/* on phones the toggle shows only „A–Z“, so the search placeholder fits */
.sort-toggle .sort-verb { margin-right: .3em; }
@media (max-width: 440px) { .sort-toggle .sort-verb { display: none; } }
@media (max-width: 360px) { .filters .search input { padding-left: 2.45rem; padding-right: .6rem; } .filters .search svg { left: .85rem; } .filters .sort-toggle { padding-inline: .8rem; } }

/* long English name „Circle of Czech Master Violinmakers“: smaller hero title in two balanced lines,
   and in the header two neat lines (never squeezed under the buttons) */
.hero-title-long { font-size: clamp(2.3rem, 5.4vw, 4.2rem); }
.brand-long .bn { white-space: nowrap; }
.brand-long .brand-name { font-size: 1.15rem; }
@media (max-width: 1240px) {
  .brand-long .bn { display: block; }
  .brand-long .brand-name { line-height: 1.08; }
  .brand-long .brand-sub { margin-top: .2rem; }
}
@media (max-width: 600px) {
  .brand-long .brand-name { font-size: .95rem; white-space: normal; }
  .brand-long .brand-sub { display: none; }
}
@media (max-width: 380px) {
  .brand-long .brand-name { font-size: .84rem; }
}

/* a work shown as one row (gallery.json "row": true) sits in one column beside the big-photo mosaics, like a triptych */
.works:has(.work-feature) .work.work-tri { grid-column: auto; }
.work-tri .work-row { max-width: calc(var(--sum) * 400px + (var(--n) - 1) * .6rem); }   /* the three photos fill the column, but never taller than ~400px */
@media (max-width: 700px) {
  .work-tri .work-mosaic { flex-direction: column; }
  .work-tri .work-row { display: flex; }
  .work-tri .work-row .gallery-item { flex: calc(var(--r) * 100) 1 0; width: auto; }
}

/* gallery „columns“: one column per instrument (heading + photos one under another, uncropped), columns of different height */
.work-cols { display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: 0 1.6rem; align-items: start; margin-top: 1.5rem; }
.work-col { display: grid; grid-template-rows: subgrid; grid-row: span 2; margin: 0; }
.work-col .work-head { flex-direction: column; align-items: flex-start; gap: .15rem; margin-bottom: 1rem; }
.work-col .work-sub { margin: 0; }
.work-stack { display: flex; flex-direction: column; gap: 1rem; }
.work-stack .gallery-item { background: none; border-radius: 2px; }
.work-stack .gallery-item img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .work-cols { grid-template-columns: repeat(min(var(--k), 2), minmax(0, 1fr)); gap: 2rem 1.2rem; } }
@media (max-width: 420px) { .work-cols { gap: 1.8rem .8rem; } .work-stack { gap: .6rem; } }
.work-cols > .work-col, .work-cols > .work-col:first-of-type { margin: 0; }
.work-tri .work-mosaic { align-items: center; }   /* hand-made rows of different width stay centred in their column */
.work-tri .work-mosaic:has(> .work-row + .work-row) .work-row { max-width: calc(var(--sum) * 300px + (var(--n) - 1) * .6rem); }   /* stacked rows stay modest on wide single-column layouts */

/* gallery „stack“: every instrument on its own line, centred, one under another */
.works.works-stack { display: block; }
.works-stack .work { margin-top: 3.2rem; }
.works-stack .work-head { justify-content: flex-start; text-align: left; }
.works-stack .work-feature { margin-inline: auto; max-width: calc(var(--T) * 545px); }   /* the big-photo mosaic a bit larger than the rows, so the violins look the same size */
.works-stack .work-mosaic { align-items: center; }
.works-stack .work-row { margin-inline: auto; width: 100%; max-width: calc(var(--sum) * var(--rh, 470px) + (var(--n) - 1) * .6rem); }   /* gallery.json "rh": row height for close-ups, so instruments keep the same size */
@media (max-width: 700px) {
  .works-stack .work-mosaic { flex-direction: column; }
  .works-stack .work-row { display: flex; }
  .works-stack .work-row .gallery-item { flex: calc(var(--r) * 100) 1 0; width: auto; }
}


/* Události: violin bridges and sound posts faintly on the right of the page head, exactly like Organizace – Vedení */
.page-head-kobylky { overflow: visible; }
.page-head-kobylky + * { position: relative; z-index: 1; }
.page-head-kobylky::before {
  content: ''; position: absolute; z-index: -1; right: 0; top: 0; height: 770px; width: min(62%, 980px);   /* same size as in Organizace – Vedení, reaching under the first event */
  background: url('../img/dilna-kobylky.jpg') 50% 50% / cover no-repeat;
  filter: var(--dilna-filter); mix-blend-mode: var(--dilna-blend); opacity: calc(var(--dilna-opacity) * .38);   /* dark theme: fainter than in Vedení */
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 66% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 66% at 66% 50%, #000 25%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 860px) { .page-head-kobylky::before { width: 100%; height: 520px; } }
@media (min-width: 1601px) { .page-head-kobylky::before { right: var(--edge); } }

:root[data-theme="light"] .page-head-kobylky::before { opacity: calc(var(--dilna-opacity) * .8); }   /* light theme: a bit stronger */
/* Události (wider than 860 px): the bridges stay in place while the events scroll over them */
@media (min-width: 861px) {
  .page-head-kobylky::before { position: fixed; top: 81px; height: min(770px, calc(100vh - 81px)); }
  .site-footer { position: relative; z-index: 2; }
}