/* =========================================================
   LIANA BRAUN DERNER — divadelní designový systém
   Krémový papír + hluboká modř převzatá z původního webu,
   zlaté ornamenty, lustr, vstupenky, playbill typografie.
   ========================================================= */

:root{
  /* barvy */
  --navy:      #3D4E66;   /* základní tmavá z palety */
  --navy-2:    #354458;
  --ink:       #2A3748;
  --light:     #E8EAEE;   /* světlá plocha — stříbrná šeď z palety */
  --white:     #FFFFFF;   /* karty, vstupenky, výstřižky */
  --silver:     #C3CBD6;                /* ornamenty a akcenty */
  --silver-lt:  #DDE3EA;
  --silver-txt: #C3CBD6;                /* akcentní text podle podkladu */
  --slate:     #63748C;
  --steel:     #94A0B0;

  --rule-dark:  rgba(195,203,214,.34);
  --rule-light: rgba(42,55,72,.2);

  /* aktuální pozadí sekce — používají výřezy vstupenek */
  --page: var(--light);
  --rule: var(--rule-light);

  /* písma */
  --serif:    "Forum", "Cormorant Garamond", Georgia, serif;   /* nadpisy */
  --serif-it: "Bodoni Moda", Georgia, serif;                     /* kurzivní akcenty */
  --sans:  Futura, "Futura PT", "Jost", "Century Gothic", -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rytmus */
  --gutter: clamp(18px, 4.4vw, 64px);
  --sec-y:  clamp(64px, 9vw, 140px);
  --max:    1420px;
  --r:      14px;          /* zaoblení karet */
  --r-s:    8px;
  --ease:   cubic-bezier(.22,.61,.36,1);
  --head-h: 60px;          /* skutečnou výšku hlavičky dopočítá JS */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--light);
  color:var(--navy);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:400;
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--silver); color:var(--ink); }
:focus-visible{ outline:2px solid var(--silver); outline-offset:3px; }

/* =========================================================
   TYPOGRAFIE
   ========================================================= */
h1,h2,h3,h4,.wordmark,.h-wide{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.04;
  margin:0;
  /* Forum má jediný řez — mírný obrys mu dodá váhu */
  -webkit-text-stroke:.016em currentColor;
  paint-order:stroke fill;
}

.wordmark{
  font-family:var(--serif);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2.5rem, 9.4vw, 7.4rem);
  line-height:.88;
  letter-spacing:.005em;
  margin:0;
}
.wordmark .con{
  text-transform:none;
  font-style:italic;
  font-size:.8em;
  letter-spacing:.005em;
  color:var(--silver-txt);
  padding-left:.12em;
}

.h-xl{ font-size:clamp(2rem, 5.6vw, 4.4rem); text-transform:uppercase; line-height:.98; }

/* kurzivní spojka uvnitř velkých nadpisů */
.con{
  font-family:var(--serif-it);
  text-transform:none;
  font-style:italic;
  color:var(--silver-txt);
  padding-inline:.06em;
}
.h-xl .con,.h-l .con,.h-wide .con{ font-size:.82em; }
.h-l { font-size:clamp(1.6rem, 3.4vw, 2.8rem); }
.h-m { font-size:clamp(1.25rem, 2vw, 1.7rem); }

.it{ font-style:italic; }
.gold{ color:var(--silver-txt); }

/* mikro popisky — mono, jako na vstupence */
.micro{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.micro-g{ color:var(--silver-txt); }

.lead{
  font-size:clamp(1rem, 1.2vw, 1.12rem);
  line-height:1.75;
  max-width:60ch;
}
.body{ line-height:1.85; max-width:66ch; }
.body p{ margin:0 0 1.05em; }
.body p:last-child{ margin-bottom:0; }
.muted{ color:rgba(42,55,72,.68); }

/* =========================================================
   PLOCHY
   ========================================================= */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:var(--sec-y); }

.plate{
  position:relative;
  background:var(--navy);
  color:var(--light);
  --page:var(--navy);
  --rule:var(--rule-dark);
  overflow:hidden;
}
.plate .muted{ color:rgba(231,231,231,.66); }
.paper{ background:var(--light); color:var(--navy); --page:var(--light); --rule:var(--rule-light); --silver-txt:#5E6B7D; }
.paper-2{ background:var(--white); color:var(--navy); --page:var(--white); --rule:var(--rule-light); --silver-txt:#5E6B7D; }

/* damaškový vzor přes tmavé plochy */
.plate::after{
  content:"";
  position:absolute; inset:0;
  background:var(--silver);
  -webkit-mask:url("../img/brand/damask.svg") repeat;
  mask:url("../img/brand/damask.svg") repeat;
  -webkit-mask-size:clamp(150px,14vw,210px);
  mask-size:clamp(150px,14vw,210px);
  opacity:.055;
  pointer-events:none;
}

/* dvojitý rám s rohovými kosočtverci */
.frame{
  position:absolute;
  inset:clamp(10px,1.4vw,22px);
}
/* první sekce pod fixní hlavičkou — nic se nevrství */
main > section:first-child > .frame{
  top:calc(var(--head-h) + clamp(10px,1.4vw,22px));
}
main > section:first-child.plate::after{
  top:var(--head-h);
}
.frame{
  border:1px solid var(--rule);
  pointer-events:none;
  z-index:2;
}
.frame i{
  position:absolute;
  width:9px; height:9px;
  border:1px solid var(--silver);
  background:var(--page);
  transform:rotate(45deg);
}
.frame i:nth-child(1){ left:-5px; top:-5px; }
.frame i:nth-child(2){ right:-5px; top:-5px; }
.frame i:nth-child(3){ left:-5px; bottom:-5px; }
.frame i:nth-child(4){ right:-5px; bottom:-5px; }

/* ornamentální předěl */
.fleuron{
  display:block;
  width:clamp(110px,14vw,170px);
  aspect-ratio:120/24;
  margin:clamp(22px,3vw,38px) auto;
  background:var(--silver-txt);
  -webkit-mask:url("../img/brand/fleuron.svg") no-repeat center/contain;
  mask:url("../img/brand/fleuron.svg") no-repeat center/contain;
}
.rule{ height:1px; background:var(--rule); border:0; margin:0; }

/* =========================================================
   HLAVIČKA
   ========================================================= */
.site-head{
  position:fixed; inset:0 0 auto;
  z-index:90;
  padding-block:clamp(10px,1.4vw,18px);
  color:var(--light);
  background:var(--navy);
  transition:padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-head.scrolled{
  box-shadow:0 1px 0 var(--rule-dark), 0 14px 30px -24px rgba(0,0,0,.7);
}

.head-in{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(12px,2vw,30px);
}
.head-nav{ display:none; }
@media (min-width:1080px){
  .head-nav{ display:flex; align-items:center; gap:clamp(14px,1.7vw,28px); }
  .head-nav.right{ justify-content:flex-end; }
}
.head-nav a{
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(231,231,231,.74);
  padding-block:.35em;
  border-bottom:1px solid transparent;
  transition:color .35s, border-color .35s;
  white-space:nowrap;
}
.head-nav a:hover{ color:var(--light); border-color:var(--silver-txt); }
.head-nav a[aria-current="page"]{ color:var(--silver-txt); border-color:var(--silver-txt); }

.brand{ grid-column:2; justify-self:center; display:block; }
.brand img{ width:clamp(126px,13vw,178px); transition:width .5s var(--ease); }
.site-head.scrolled .brand img{ width:clamp(108px,10.5vw,148px); }

.burger{
  grid-column:3;
  justify-self:end;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  width:42px; height:42px;
  z-index:120;
}
@media (min-width:1080px){ .burger{ display:none; } }
.burger i{ display:block; height:1px; width:24px; background:currentColor; transition:transform .45s var(--ease), opacity .3s, width .45s var(--ease); }
.burger i:nth-child(2){ width:16px; }
body.menu-open .burger i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger i:nth-child(2){ opacity:0; }
body.menu-open .burger i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:24px; }

/* mobilní menu */
.mnav{
  position:fixed; inset:0;
  z-index:110;
  background:var(--navy);
  color:var(--light);
  --page:var(--navy);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--head-h) + 18px) var(--gutter) 28px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease);
  overflow-y:auto;
}
body.menu-open .mnav{ clip-path:inset(0 0 0 0); }
body.menu-open .site-head{ z-index:130; background:transparent; box-shadow:none; }
.mnav ol{ list-style:none; margin:0; padding:0; }
.mnav li{
  border-bottom:1px solid var(--rule-dark);
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
body.menu-open .mnav li{ opacity:1; transform:none; transition-delay:calc(.16s + var(--i) * .045s); }
.mnav ol a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.46em 0;
  font-family:var(--serif);
  text-transform:uppercase;
  font-size:clamp(1.15rem,5.2vw,1.9rem);
  line-height:1.1;
}
.mnav ol a em{ font-family:var(--sans); font-style:normal; font-size:.52rem; letter-spacing:.2em; color:var(--silver-txt); }
.mnav .mfoot a{ font-size:.72rem; letter-spacing:.14em; }
.mnav .mfoot{ margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; gap:6px 22px; font-family:var(--sans); font-size:.64rem; letter-spacing:.14em; color:var(--silver-txt); }

/* =========================================================
   TLAČÍTKA
   ========================================================= */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.9em;
  padding:.95em 2.1em;
  border:1px solid currentColor;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.pill:hover{ background:var(--silver); border-color:var(--silver-txt); color:var(--ink); }
.pill.solid{ background:var(--silver); border-color:var(--silver-txt); color:var(--ink); }
.pill.solid:hover{ background:transparent; border-color:var(--silver-txt); color:var(--silver-txt); }

.tlink{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--silver-txt);
  padding:.78em 1.7em;
  border:1px solid currentColor;
  border-radius:999px;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.tlink:hover{ background:var(--silver); border-color:var(--silver); color:var(--ink); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  --lustr-w:clamp(150px,16vw,240px);
  --lustr-top:calc(var(--head-h) + clamp(10px,1.4vw,22px));
  min-height:100svh;
  display:flex;
  align-items:flex-start;
  /* obsah začíná až pod lustrem (viditelná část ≈ 93 % šířky) */
  padding-block:calc(var(--lustr-top) + var(--lustr-w) * .93 + clamp(26px,3vw,44px)) clamp(48px,7vw,90px);
  text-align:center;
}
.hero .lustr,.page-head .lustr{
  aspect-ratio:420/620;
  background:var(--silver-lt);
  -webkit-mask:url("../img/brand/lustr.svg") no-repeat center/contain;
  mask:url("../img/brand/lustr.svg") no-repeat center/contain;
}
.hero .lustr{
  position:absolute;
  top:var(--lustr-top);
  left:50%;
  width:var(--lustr-w);
  opacity:.9;
  z-index:1;
  pointer-events:none;
  transform-origin:50% 0;
  animation:sway 9s ease-in-out infinite;
}
@keyframes sway{
  0%,100%{ transform:translateX(-50%) rotate(-.7deg); }
  50%{ transform:translateX(-50%) rotate(.7deg); }
}
.hero-in{ position:relative; z-index:3; width:100%; }

.hero-notes{
  display:grid;
  gap:clamp(20px,3vw,40px);
  align-items:center;
  margin-block:clamp(26px,3.5vw,48px);
}
@media (min-width:900px){
  .hero-notes{ grid-template-columns:1fr minmax(230px,320px) 1fr; }
}
.hero-notes p{
  margin:0;
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:2.1;
  color:rgba(231,231,231,.78);
}
.hero-notes p::after{
  content:"◆";
  display:block;
  margin-top:.9em;
  font-size:.5rem;
  color:var(--silver-txt);
}
.hero-portrait{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border:1px solid var(--silver);
  border-radius:var(--r);
  box-shadow:0 0 0 7px var(--navy), 0 0 0 8px rgba(195,203,214,.3);
}
.hero-portrait img{ width:100%; height:100%; object-fit:cover; }

/* hlavička podstránky */
.page-head{
  position:relative;
  --lustr-w:clamp(130px,15vw,210px);
  --lustr-top:calc(var(--head-h) + clamp(10px,1.4vw,22px));
  padding-block:calc(var(--lustr-top) + var(--lustr-w) * .93 + clamp(22px,2.6vw,38px)) clamp(44px,6vw,84px);
  text-align:center;
}
.page-head .lustr{
  position:absolute; top:var(--lustr-top); left:50%; transform:translateX(-50%);
  width:var(--lustr-w); opacity:.55; pointer-events:none; z-index:1;
}
.page-head > .wrap{ position:relative; z-index:3; }
.page-head .crumb{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--silver-txt);
  margin:0 0 1.3rem;
}
.page-head .lead{ margin-inline:auto; color:rgba(231,231,231,.78); }

/* =========================================================
   ZLATÝ PÁS
   ========================================================= */
.strip{
  position:relative;
  background:var(--navy-2);
  color:var(--silver-txt);
  border-block:1px solid var(--rule-dark);
  overflow:hidden;
  padding-block:.85rem;
}
.strip-track{ display:flex; width:max-content; animation:slide 48s linear infinite; }
.strip:hover .strip-track{ animation-play-state:paused; }
.strip span{
  display:inline-flex; align-items:center; gap:clamp(20px,3vw,46px);
  padding-right:clamp(20px,3vw,46px);
  font-family:var(--sans); font-size:.68rem;
  letter-spacing:.24em; text-transform:uppercase;
  white-space:nowrap;
}
.strip i{ font-style:normal; font-size:.55em; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =========================================================
   NADPISY SEKCÍ
   ========================================================= */
.stitle{ text-align:center; margin-bottom:clamp(34px,4.6vw,68px); }
.stitle .kicker{ display:block; margin-bottom:1.1rem; }
.stitle h2{ text-transform:uppercase; }
.stitle .sub{ margin:1.4rem auto 0; max-width:56ch; }

.h-wide{
  font-family:var(--serif);
  text-transform:uppercase;
  font-size:clamp(1.7rem,6vw,4.5rem);
  line-height:1.06;
  letter-spacing:.005em;
  text-wrap:balance;
}

/* =========================================================
   VSTUPENKY
   ========================================================= */
.tickets{ display:grid; gap:clamp(16px,2.2vw,28px); }
.ticket{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  background:var(--white);
  color:var(--navy);
  --silver-txt:#5E6B7D;
  border:1px solid var(--rule-light);
  border-radius:var(--r);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
@media (min-width:760px){ .ticket{ grid-template-columns:1fr 116px; } }
.ticket:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(30,40,54,.55); }

.ticket-main{ padding:clamp(20px,2.6vw,34px); display:grid; gap:clamp(10px,1.3vw,16px); align-content:start; }
.t-top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 22px; }
.t-date{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1;
  white-space:nowrap;
  margin:0;
}
.t-date small{ font-family:var(--sans); font-size:.42em; letter-spacing:.16em; color:var(--silver-txt); margin-left:.6em; }
.ticket h3{ text-transform:uppercase; font-size:clamp(1.3rem,2.3vw,1.9rem); }
.t-venue{ font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--slate); margin:.45rem 0 0; }
.t-body{ font-size:.9rem; line-height:1.8; color:rgba(42,55,72,.74); margin:0; }
.t-foot{
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between;
  border-top:1px dashed var(--rule-light);
  padding-top:clamp(12px,1.4vw,18px);
}
.t-foot .micro{ color:var(--slate); font-size:.58rem; }

.stub{
  position:relative;
  display:none;
  align-items:center;
  justify-content:center;
  gap:14px;
  border-left:1px dashed rgba(42,55,72,.34);
  padding-block:22px;
}
@media (min-width:760px){ .stub{ display:flex; } }
.stub::before,.stub::after{
  content:"";
  position:absolute; left:-10px;
  width:19px; height:19px;
  border-radius:50%;
  background:var(--page);
}
.stub::before{ top:-11px; }
.stub::after{ bottom:-11px; }
.barcode{
  width:34px; height:62%;
  color:var(--navy);
  background:repeating-linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 3px,
    currentColor 3px 4px, transparent 4px 7px,
    currentColor 7px 9px, transparent 9px 11px);
  opacity:.8;
}
.stub-text{
  writing-mode:vertical-rl;
  font-family:var(--sans);
  font-size:.54rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--slate);
}

/* tmavá varianta vstupenky */
.ticket.dark{ background:var(--navy-2); color:var(--light); border-color:var(--rule-dark); --gold-txt:var(--silver); }
.ticket.dark .t-venue,.ticket.dark .t-foot .micro,.ticket.dark .stub-text{ color:var(--silver-txt); }
.ticket.dark .t-body{ color:rgba(231,231,231,.74); }
.ticket.dark .stub{ border-left-color:rgba(195,203,214,.45); }
.ticket.dark .t-foot{ border-top-color:rgba(195,203,214,.32); }
.ticket.dark .barcode{ color:var(--silver-txt); }

.ticket.past{ opacity:.78; }
.ticket.past:hover{ transform:none; box-shadow:none; }

/* =========================================================
   PLAYBILL (programy)
   ========================================================= */
.bills{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
@media (min-width:820px){ .bills.two{ grid-template-columns:1fr 1fr; } }
@media (min-width:820px){ .bills.three{ grid-template-columns:repeat(3,1fr); } }
.bill{
  background:var(--page);
  padding:clamp(26px,3.4vw,50px) clamp(20px,2.6vw,36px);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:background .5s var(--ease);
}
.bill:hover{ background:color-mix(in srgb, var(--page) 90%, var(--silver)); }
.bill .no{ font-family:var(--sans); font-size:.66rem; letter-spacing:.24em; color:var(--silver-txt); }
.bill h3{ text-transform:uppercase; font-size:clamp(1.15rem,2vw,1.65rem); line-height:1.14; }
.bill p{ margin:0; font-size:.9rem; line-height:1.8; }
.bill .cast{ font-family:var(--sans); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; line-height:2; color:var(--silver-txt); }
.bill .tlink{ margin-top:auto; align-self:center; }

/* =========================================================
   PŘEHRÁVAČ / SEZNAM UKÁZEK
   ========================================================= */
.player{ display:grid; gap:clamp(30px,4.5vw,72px); align-items:center; }
@media (min-width:980px){ .player{ grid-template-columns:minmax(250px,380px) 1fr; } }

.vinyl-wrap{ position:relative; margin-inline:auto; width:100%; max-width:380px; aspect-ratio:1; }
.vinyl{
  position:absolute; inset:11%;
  border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, #20293a 0 1.5px, #2c3648 1.5px 3px);
  box-shadow:inset 0 0 60px rgba(0,0,0,.8), 0 24px 60px -32px rgba(0,0,0,.9);
  animation:spin 16s linear infinite;
  animation-play-state:paused;
}
.vinyl-wrap.spinning .vinyl{ animation-play-state:running; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.vinyl::after{
  content:"";
  position:absolute; inset:34%;
  border-radius:50%;
  background:var(--light);
  box-shadow:0 0 0 1px rgba(195,203,214,.55);
}
.vinyl::before{
  content:"";
  position:absolute; inset:47.5%;
  border-radius:50%;
  background:var(--navy);
  z-index:2;
}
.vinyl-label{
  position:absolute; inset:0;
  z-index:3;
  pointer-events:none;
}
.vinyl-label span{
  position:absolute;
  left:50%; top:52.5%;          /* text sedí pod otvorem, nikdy se s ním nekryje */
  transform:translateX(-50%);
  width:30%;
  text-align:center;
  font-size:.5rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
  line-height:1.5;
}
.arc{ position:absolute; inset:0; z-index:1; transform:rotate(-90deg); }

.tracklist{ display:grid; }
.track{
  display:grid;
  grid-template-columns:30px 1fr auto;
  gap:clamp(12px,1.6vw,22px);
  align-items:center;
  padding:clamp(13px,1.5vw,18px) 0;
  border-bottom:1px solid var(--rule);
  text-align:left;
  width:100%;
  transition:padding-inline .45s var(--ease), color .3s;
}
@media (min-width:620px){ .track{ grid-template-columns:30px 62px 1fr auto; } }
.track:first-child{ border-top:1px solid var(--rule); }
.track .no{ font-family:var(--sans); font-size:.64rem; color:var(--silver-txt); }
.track .thumb{ display:none; }
@media (min-width:620px){
  .track .thumb{ display:block; width:62px; aspect-ratio:1; overflow:hidden; border-radius:var(--r-s); }
}
.track .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.track:hover .thumb img{ transform:scale(1.08); }
.track h3{ font-size:clamp(1.02rem,1.5vw,1.3rem); }
.track .sub{ display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--silver-txt); margin-top:.45rem; }
.track .meta{ font-family:var(--sans); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; opacity:.72; white-space:nowrap; }
.track:hover{ padding-inline:clamp(6px,1vw,14px); }
.track[aria-current="true"] h3{ color:var(--silver-txt); }

/* =========================================================
   OBRÁZKY
   ========================================================= */
.figure{ display:block; position:relative; overflow:hidden; border-radius:var(--r); background:var(--navy-2); }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.figure.tall{ aspect-ratio:4/5; }
.figure.taller{ aspect-ratio:3/4; }
.figure.wide{ aspect-ratio:16/10; }
a.figure:hover img{ transform:scale(1.045); }
.figure.gilt{ border:1px solid var(--silver); }

.oval{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:50% / 50%;
  border:1px solid var(--silver);
  box-shadow:0 0 0 8px var(--page), 0 0 0 9px rgba(195,203,214,.35);
}
.oval img{ width:100%; height:100%; object-fit:cover; }

.cap{ margin-top:.9rem; font-family:var(--sans); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-txt); text-align:center; }

/* =========================================================
   MŘÍŽKY
   ========================================================= */
.grid{ display:grid; gap:clamp(12px,1.5vw,24px); }
@media (min-width:680px){ .grid.g2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:680px){ .grid.g3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1020px){ .grid.g3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:680px){ .grid.g4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1020px){ .grid.g4{ grid-template-columns:repeat(4,1fr); } }

.split{ display:grid; gap:clamp(28px,4.4vw,72px); align-items:center; }
@media (min-width:940px){
  .split{ grid-template-columns:1fr 1fr; }
  .split.wide-l{ grid-template-columns:1.12fr .88fr; }
  .split.wide-r{ grid-template-columns:.88fr 1.12fr; }
}

/* fakta */
.facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
@media (min-width:880px){ .facts{ grid-template-columns:repeat(4,1fr); } }
.fact{ background:var(--page); padding:clamp(22px,3vw,40px) clamp(16px,2vw,28px); text-align:center; }
.fact b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,4vw,3.2rem); line-height:1; }
.fact small{ display:block; margin-top:.85rem; font-family:var(--sans); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--silver-txt); line-height:1.9; }

/* =========================================================
   CITACE
   ========================================================= */
.quotes{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
@media (min-width:900px){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quote{ background:var(--page); padding:clamp(24px,3vw,42px); display:flex; flex-direction:column; gap:1.4rem; text-align:center; }
.quote p{ margin:0; font-family:var(--serif-it); font-size:clamp(1.02rem,1.4vw,1.25rem); line-height:1.6; font-style:italic; }
.quote footer{ margin-top:auto; font-family:var(--sans); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-txt); }

.pull{ position:relative; padding-block:clamp(70px,10vw,150px); text-align:center; overflow:hidden; }
.pull .bg{ position:absolute; inset:0; z-index:0; }
.pull .bg img{ width:100%; height:100%; object-fit:cover; opacity:.26; filter:grayscale(.4); }
.pull .bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(110% 90% at 50% 50%, rgba(15,30,46,.45), rgba(30,40,54,.95)); }
.pull blockquote{
  position:relative; z-index:2; margin:0 auto; max-width:20ch;
  font-family:var(--serif); font-size:clamp(1.7rem,4.2vw,3.2rem); line-height:1.2; text-transform:uppercase;
}
.pull .lead{ position:relative; z-index:2; color:var(--light); }
.pull cite{ position:relative; z-index:2; display:block; margin-top:2rem; font-family:var(--sans); font-style:normal; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-txt); }

/* =========================================================
   GALERIE
   ========================================================= */
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:clamp(24px,3vw,42px); }
.filters button{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.7em 1.3em; border:1px solid var(--rule); border-radius:999px;
  transition:all .4s var(--ease);
}
.filters button:hover{ border-color:var(--silver-txt); }
.filters button[aria-pressed="true"]{ background:var(--silver); border-color:var(--silver-txt); color:var(--ink); }

.masonry{ columns:1; column-gap:clamp(12px,1.5vw,22px); }
@media (min-width:620px){ .masonry{ columns:2; } }
@media (min-width:1020px){ .masonry{ columns:3; } }
.masonry .tile{
  break-inside:avoid; margin-bottom:clamp(12px,1.5vw,22px);
  position:relative; display:block; overflow:hidden; border-radius:var(--r); background:var(--navy-2);
}
.masonry .tile img{ width:100%; transition:transform 1.2s var(--ease); }
.masonry .tile:hover img{ transform:scale(1.05); }
.masonry .tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(30,40,54,.66), rgba(30,40,54,0) 55%);
  opacity:0; transition:opacity .5s var(--ease);
}
.masonry .tile:hover::after{ opacity:1; }
.tile-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.1rem 1.2rem;
  font-family:var(--sans); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--light);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.masonry .tile:hover .tile-cap{ opacity:1; transform:none; }

/* =========================================================
   VÝSTŘIŽKY Z TISKU
   ========================================================= */
.clip-cell{ display:flex; flex-direction:column; }
.clip{
  flex:1; display:flex; flex-direction:column;
  background:var(--white); color:var(--navy);
  --silver-txt:#5E6B7D;
  border:1px solid var(--rule-light);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.clip:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(30,40,54,.6); }
.clip .shot{ display:block; flex:1; aspect-ratio:3/4; overflow:hidden; background:#fff; padding:6% 6% 0; }
.clip .shot img{ transition:transform 1.2s var(--ease); }
.clip .shot img{ width:100%; height:100%; object-fit:contain; }
.clip .info{ display:block; margin-top:auto; padding:1rem 1.15rem 1.1rem; border-top:1px solid var(--rule-light); }
.clip-src{
  flex:none;
  display:inline-flex; align-items:center; gap:.55em;
  padding:.5em 1.05em;
  border:1px solid currentColor;
  border-radius:999px;
  font-family:var(--sans); font-size:.52rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--silver-txt);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.clip-src:hover{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.clip-src.is-off{ opacity:.45; pointer-events:none; }
/* titulek vždy na dva řádky, aby byly kartičky stejně vysoké */
.clip .info b{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
  font-family:var(--serif); font-size:1.05rem; font-weight:400; line-height:1.3;
}
.clip .info small{ font-family:var(--sans); font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-txt); }
.clip .meta-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:.8rem;
}

/* =========================================================
   ČASOVÁ OSA
   ========================================================= */
.timeline{ position:relative; max-width:880px; margin-inline:auto; }
/* mezi položkami jen krátký předěl, linka neprochází textem */
.tl-item::before{
  content:"";
  position:absolute; left:50%; top:-26px;
  width:1px; height:52px;
  background:var(--rule);
  transform:translateX(-.5px);
}
.tl-item:first-child::before,.tl-item:first-child::after{ display:none; }
.tl-item{ position:relative; padding-block:clamp(22px,3.2vw,40px); text-align:center; }
.tl-item::after{
  content:"◆"; position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  color:var(--silver-txt); font-size:.58rem; line-height:1;
  background:var(--page); padding:.2em .5em;
}
.tl-year{ font-family:var(--sans); font-size:.64rem; letter-spacing:.24em; color:var(--silver-txt); margin-bottom:.9rem; }
.tl-item h3{ text-transform:uppercase; font-size:clamp(1.15rem,2vw,1.55rem); margin-bottom:.9rem; }
.tl-item p{ margin:0 auto; max-width:58ch; font-size:.93rem; line-height:1.85; }

/* =========================================================
   FORMULÁŘ
   ========================================================= */
.form{ display:grid; gap:clamp(16px,2vw,26px); }
@media (min-width:700px){ .form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:inherit; } }
.field label{ display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--silver-txt); margin-bottom:.7rem; }
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--rule);
  color:inherit; font-family:var(--sans); font-size:1rem; font-weight:400;
  padding:.6em 0; border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-color:var(--silver-txt); }
.field select option{ background:var(--navy); color:var(--light); }
.form-note{ font-family:var(--sans); font-size:.6rem; letter-spacing:.1em; line-height:1.9; opacity:.75; }

.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.contact-list li{ background:var(--page); padding:clamp(18px,2.2vw,28px); text-align:center; }
.contact-list span{ display:block; font-family:var(--sans); font-size:.54rem; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-txt); margin-bottom:.6rem; }
.contact-list a,.contact-list p{ margin:0; font-family:var(--serif); font-size:clamp(1.1rem,1.7vw,1.45rem); line-height:1.4; transition:color .3s; }
.contact-list a:hover{ color:var(--silver-txt); }

/* =========================================================
   PATIČKA
   ========================================================= */
.site-foot{
  position:relative; background:var(--ink); color:var(--light);
  --page:var(--ink); --rule:var(--rule-dark);
  padding-block:clamp(48px,6vw,84px) clamp(22px,2.6vw,34px);
  text-align:center; overflow:hidden;
}
.foot-logo{ width:min(300px,64vw); margin:0 auto clamp(14px,2vw,24px); }
.foot-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px clamp(18px,2.6vw,38px); margin-bottom:clamp(22px,3vw,38px); }
.foot-nav a{ font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(231,231,231,.72); transition:color .3s; }
.foot-nav a:hover{ color:var(--silver-txt); }
.foot-contact{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px clamp(18px,2.6vw,38px); font-family:var(--serif); font-size:clamp(1.05rem,1.6vw,1.3rem); }
.foot-contact a:hover{ color:var(--silver-txt); }
.foot-bottom{
  margin-top:clamp(26px,3.4vw,46px); padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--rule-dark);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  font-family:var(--sans); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(231,231,231,.5);
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(30,40,54,.97);
  display:grid; place-items:center;
  padding:clamp(14px,4vw,60px);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.lb.open{ opacity:1; visibility:visible; }
.lb-frame{ display:flex; flex-direction:column; align-items:center; max-width:min(1180px,100%); }
.lb img,.lb video{ max-width:100%; max-height:80vh; object-fit:contain; transform:scale(.97); transition:transform .5s var(--ease); }
.lb.open img,.lb.open video{ transform:none; }
.lb video{ background:#000; }
.lb .cap{ margin-top:1.1rem; text-align:center; font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-txt); }
.lb-close,.lb-nav{
  position:absolute; z-index:3;
  width:48px; height:48px; display:grid; place-items:center;
  border:1px solid var(--rule-dark); border-radius:50%;
  color:var(--light);
  transition:background .4s var(--ease), color .4s, border-color .4s;
}
.lb-close:hover,.lb-nav:hover{ background:var(--silver); border-color:var(--silver-txt); color:var(--ink); }
.lb-close{ top:clamp(12px,3vw,30px); right:clamp(12px,3vw,30px); }
.lb-nav.prev{ left:clamp(8px,2vw,26px); top:50%; transform:translateY(-50%); }
.lb-nav.next{ right:clamp(8px,2vw,26px); top:50%; transform:translateY(-50%); }

/* =========================================================
   ANIMACE
   ========================================================= */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }
.reveal-clip > *{ clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--ease); transition-delay:var(--d,0s); }
.reveal-clip.in > *{ clip-path:inset(0 0 0 0); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal,.reveal-clip,.reveal-clip > *{ opacity:1; transform:none; clip-path:none; }
}

/* =========================================================
   POMOCNÉ
   ========================================================= */
.center{ text-align:center; }
.narrow{ max-width:720px; margin-inline:auto; }
.mt-s{ margin-top:clamp(14px,1.8vw,22px); }
.mt-m{ margin-top:clamp(22px,3vw,38px); }
.mt-l{ margin-top:clamp(34px,4.6vw,66px); }
.stack{ display:flex; flex-wrap:wrap; gap:14px; }
.stack.center{ justify-content:center; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
section[id]{ scroll-margin-top:clamp(70px,9vw,110px); }


/* strojopis zůstává jen tam, kde dělá „lístkový" dojem */
.t-date small,.t-venue,.stub-text,.track .no,.track .meta,
.strip span,.form-note,.foot-bottom,.vinyl-label span,.barcode{
  font-family:var(--mono);
}


/* ---------------------------------------------------------
   MOBIL — fotopásy se přejíždějí prstem, okraje jemně mizí
   --------------------------------------------------------- */
@media (max-width:679px){
  .grid.swipe{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:78%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-inline:var(--gutter);
    margin-inline:calc(-1 * var(--gutter));
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%);
  }
  .grid.swipe::-webkit-scrollbar{ display:none; }
  .grid.swipe > *{ scroll-snap-align:center; }
}

/* odznak v patičce */
.foot-badge{
  display:inline-block;
  margin-top:clamp(26px,3.4vw,44px);
  opacity:.85;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.foot-badge:hover{ opacity:1; transform:translateY(-2px); }
.foot-badge img{ width:44px; height:auto; }