/* ═══════════════════════════════════════════
   MECHECHE · black & white party
   Pulse Society
   ═══════════════════════════════════════════ */

:root{
  --ink:#000;
  --paper:#fff;
  --ink-soft:#111;
  --paper-soft:#f2f2f2;
  --grey:#8d8d8d;
  --hair:rgba(255,255,255,.16);
  --hair-dark:rgba(0,0,0,.14);

  /* Titan One má kompletnú slovenskú diakritiku vrátane mäkčeňov */
  --display:"Titan One", system-ui, sans-serif;
  --ui:"Jost", system-ui, -apple-system, sans-serif;

  --pad:clamp(1.25rem, 4vw, 4.5rem);
  --wrap:1180px;
  --seam:50%;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-anchor:none}
/* "scroll anchoring" je predvolené správanie prehliadača, ktoré sa
   snaží udržať na mieste obsah nad viditeľnou oblasťou, ak sa mu tam
   zmenia rozmery (napr. hero pri zmene výšky lišty prehliadača, alebo
   dopĺňaný meter obsadenosti v RSVP sekcii) - prehliadač na to reaguje
   automatickou úpravou scroll pozície. Ak sa táto úprava sama stane
   ďalšou zmenou rozmerov, vznikne slučka opakovaných "skokov", hlavne
   citeľná pri scrolli úplne dole. Vypnuté globálne, keďže na tejto
   stránke nepotrebujeme automatickú kompenzáciu scrollu nikde. */
/* na dotykových zariadeniach necháme scroll natívny (auto) - "smooth"
   sa tam vie pobiť s vlastným momentum scrollovaním prsta, a keď sa
   rýchlo zmení smer scrollu, prehliadač sa snaží doladiť pôvodný
   naplánovaný cieľ smooth animácie, čo pôsobí ako trhnutie/preskočenie.
   Na desktope (myš/koliesko) tento konflikt nevzniká, tam smooth ostáva. */
@media (pointer:coarse){
  html{scroll-behavior:auto}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ui);
  font-weight:400;
  font-size:clamp(.98rem,.55vw + .82rem,1.09rem);
  line-height:1.55;
  overflow-x:hidden;
}

h1,h2,h3,p,ol,ul{margin:0}
ol{list-style:none;padding:0}
a{color:inherit}
img,svg{display:block;max-width:100%}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:fixed;top:.5rem;left:.5rem;z-index:300;
  padding:.6rem 1rem;background:var(--paper);color:var(--ink);
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;transform:translateY(-160%);
}
.skip:focus{transform:none}

:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* ─── konfety ─────────────────────────────── */
#confetti{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:60;pointer-events:none;
  transition:opacity .45s linear;
}

/* ─── hlavička ─────────────────────────────── */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.15rem var(--pad);
  color:#fff;mix-blend-mode:difference;
  font-size:.82rem;
}

.bar__brand{
  text-decoration:none;
  font-weight:500;letter-spacing:.24em;text-transform:uppercase;
}

.bar__nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,2rem)}
.bar__nav a{
  text-decoration:none;letter-spacing:.16em;text-transform:uppercase;
  font-weight:300;position:relative;padding-block:.2rem;
}
.bar__nav a:not(.bar__cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.bar__nav a:not(.bar__cta):hover::after{transform:scaleX(1)}

.bar__cta{
  border:1px solid currentColor;border-radius:999px;
  padding:.55rem 1.15rem !important;font-weight:400;line-height:1.15;
}
.bar__cta:hover{background:#fff;color:#000;mix-blend-mode:normal}

@media (max-width:640px){
  .bar__brand{font-size:.7rem;letter-spacing:.18em}
  .bar__nav a:not(.bar__cta){display:none}
  .bar__cta{
    font-size:.68rem;letter-spacing:.12em;
    padding:.4rem .8rem !important;
  }
}

/* ─── hero ─────────────────────────────────── */
/* 118vh = 100vh pripnutá scéna + 18vh na samotný scroll cez ňu -
   čo najkratšie, aby hneď po odhalení bielej pokračoval scroll
   plynulo do ďalšej sekcie, bez čakania.
   dvh (dynamic viewport height) na konci je zámerne posledná - na
   mobile sa počas scrollu naživo mení výška podľa toho, či je lišta
   prehliadača skrytá alebo nie, a svh je oproti tomu STATICKÁ hodnota
   (zodpovedá vždy najmenšiemu možnému výškovému stavu). Keby pripnutá
   scéna používala len svh, počas schovávania lišty by sa reálna plocha
   obrazovky zväčšila nad rámec toho, čo scéna pokrýva, a na chvíľu by
   sa dole objavila medzera s čiernym pozadím stránky presvitajúcim
   spod nej. dvh sleduje aktuálnu výšku naživo, takže sa to nestane. */
.hero{height:118vh;height:118svh;height:118dvh;position:relative}

.hero__stage{
  position:sticky;top:0;height:100vh;height:100svh;height:100dvh;
  overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(1.6rem,4vh,3rem);
  padding:clamp(5rem,13vh,8.5rem) var(--pad) clamp(6rem,13vh,8rem);
}

/* celá scéna je čierna; biely difference-panel vľavo od švu ju prevráti */
.hero__bg{position:absolute;inset:0;background:var(--ink)}

/* biely difference-panel prevráti všetko vľavo od švu:
   čierne pozadie → biele, chróm → čierny chróm  */
.hero__inverter{
  position:absolute;top:0;bottom:0;left:0;width:var(--seam);
  background:#fff;mix-blend-mode:difference;
}

.wordmark{
  position:relative;
  width:min(78vw,1180px);
  flex:none;
  display:grid;
  will-change:transform;
}
/* pozor: max-height:% na .wordmark by percentuálnu výšku obrázka
   nechalo neúčinnou (containing block bez explicitnej height percentá
   ignoruje) - obrázok by sa vykreslil vyšší než box, z ktorého sa
   počíta pozícia "PARTY", a text by skončil posunutý hore, cez kvapku */
.wordmark img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.35));
}
/* jemný pohyblivý lesk prechádzajúci cez nápis pri scrollovaní */
.wordmark::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,
    transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  background-size:260% 100%;
  background-position:var(--shine, 120%) 0;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.hero__eyebrow{
  z-index:3;color:#fff;mix-blend-mode:difference;
  font-size:clamp(.62rem,1.4vw,.78rem);
  letter-spacing:.5em;text-transform:uppercase;font-weight:400;
  white-space:nowrap;
}

/* "PARTY" - prekryté PRIAMO NA OBRÁZKU (nie pod ním), v mieste kde
   pod odkvapom posledného E ostáva v grafike úplne prázdny pás
   (zmerané pixel-analýzou: žiadny iný obsah v okolí). #wordmark je
   containing block pre túto absolútnu pozíciu a jeho box presne
   kopíruje rozmery obrázka (img má width:100%), takže % tu ukazujú
   na presne tie isté miesta ako na skutočnej grafike:
   89.41 % šírky = stred posledného E, 92.6 % výšky = stred prázdneho
   pásu pod jeho odkvapom. Na desktope je obrázok oveľa väčší, takže
   ten istý pás má aj oveľa viac skutočných pixelov - písmo tu preto
   môže byť väčšie a čitateľnejšie bez toho, aby zasahovalo do E. */
.hero__party{
  position:absolute;left:89.41%;top:92.6%;transform:translate(-50%,-50%);
  z-index:3;color:#fff;
  font-size:clamp(.85rem,1.9vw,1.15rem);
  letter-spacing:.24em;text-transform:uppercase;font-weight:300;
  white-space:nowrap;
}

.hero__hint{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  z-index:3;color:#fff;mix-blend-mode:difference;
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  transition:opacity .4s;
}
.hero__hint svg{width:9px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;
  animation:nudge 2.1s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(-3px);opacity:.45}50%{transform:translateY(3px);opacity:1}}

/* ─── bežiaci pás ──────────────────────────── */
.ticker{
  background:var(--paper);color:var(--ink);
  padding:.85rem 0;overflow:hidden;
  border-block:1px solid var(--ink);
}
.ticker__track{
  display:flex;gap:2.5rem;width:max-content;
  animation:slide 34s linear infinite;
  font-size:clamp(.8rem,1.9vw,1.05rem);
  letter-spacing:.34em;text-transform:uppercase;font-weight:500;
  white-space:nowrap;
}
.ticker__track b{font-family:var(--display);letter-spacing:.06em;font-weight:400}
.ticker__track i{font-style:normal;opacity:.32}
@keyframes slide{to{transform:translateX(-50%)}}

/* ─── spoločné ─────────────────────────────── */
.eyebrow{
  font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;
  font-weight:400;color:var(--grey);margin-bottom:1.1rem;
}
.eyebrow--dark{color:#6a6a6a}

.when,.creed,.lineup,.rsvp{
  padding-block:clamp(4.5rem,11vh,9rem);
  padding-inline:var(--pad);
}
/* obsah zarovnaný na jednu šírku, pozadie však ide cez celú stranu */
.rsvp,.foot{
  padding-inline:max(var(--pad), calc((100% - var(--wrap)) / 2));
}

/* ─── countdown ────────────────────────────── */
.when{background:var(--ink);text-align:center}

.clock{
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(.6rem,4vw,3.5rem);
  margin-bottom:clamp(3rem,7vh,5rem);
}
.clock__cell{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.clock__num{
  display:flex;
  font-family:var(--display);
  font-size:clamp(3.1rem,13vw,9.5rem);
  line-height:.86;
  background:linear-gradient(168deg,#fff 4%,#a8a8a8 34%,#fff 52%,#6f6f6f 70%,#ededed 96%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* každá číslica má vlastnú bunku s pevnou šírkou,
   inak by sa pri každej sekunde posúval celý riadok.
   0.8em je zámerne o niečo širšie než najširšia číslica (0 = 0.726em
   v Titan One), inak sa širšie číslice orezávali o okraj bunky */
.clock__num i{
  display:block;width:.8em;text-align:center;font-style:normal;
}
.clock__live{
  font-family:var(--display);
  font-size:clamp(2rem,8vw,6rem);line-height:1;color:var(--paper);
}
.clock__lab{
  font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--grey);
}

.facts{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:var(--wrap);margin-inline:auto;text-align:left;
  border-top:1px solid var(--hair);
}
.fact{
  padding:1.5rem 1.3rem;
  border-bottom:1px solid var(--hair);
  border-right:1px solid var(--hair);
  display:flex;flex-direction:column;gap:.5rem;
}
.fact:last-child{border-right:0}
.fact__k{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--grey)}
.fact__v{font-size:1.02rem;font-weight:300;line-height:1.4}

/* ─── dress code ───────────────────────────── */
.creed{
  background:var(--ink);text-align:center;
  padding-block:clamp(5rem,14vh,11rem);
}
.creed__line{
  font-family:var(--display);
  font-size:clamp(3rem,13vw,10rem);
  line-height:.94;letter-spacing:.01em;
  color:var(--paper);
}
.creed__line--flip{
  background:var(--paper);color:var(--ink);
  display:inline-block;padding:0 .28em .06em;
  transform:rotate(-1.6deg);
}
.creed__note{
  margin-top:2.2rem;color:var(--grey);font-weight:300;
  font-size:clamp(.86rem,1.6vw,1rem);
  max-width:34ch;margin-inline:auto;
}

/* ─── line-up ──────────────────────────────── */
.lineup{background:var(--ink)}
.lineup__head{max-width:var(--wrap);margin:0 auto clamp(2.5rem,6vh,4rem)}
.lineup__head h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,6.5vw,4.4rem);line-height:1;
}
.lineup__sub{margin-top:1rem;color:var(--grey);font-weight:300;max-width:44ch}

.acts{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
}

.act{position:relative}
/* keď je v gride jediný DJ, nenechaj kartu roztiahnutú na celý riadok -
   pri viacerých DJ-och sa grid správa bez zmeny (stretch medzi kartami) */
.act:only-child{max-width:min(320px,100%)}
/* miesto pre fotku DJ-a - dočasný halftone placeholder */
.act__photo{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 38%, #2a2a2a 0%, #111 60%, #0a0a0a 100%);
  display:grid;place-items:center;
}
.act__photo::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at center, #fff 1.15px, transparent 1.4px);
  background-size:7px 7px;
  opacity:.4;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 40%, #000 10%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 40%, #000 10%, transparent 78%);
}
.act__initial{
  position:relative;
  font-family:var(--display);
  font-size:clamp(5rem,11vw,9rem);line-height:1;
  color:#fff;opacity:.14;
}
.act__photo img{
  position:relative;width:100%;height:100%;object-fit:cover;
  display:block;filter:contrast(1.05);
}
.act__slot{
  position:absolute;top:.75rem;left:.75rem;
  background:var(--paper);color:var(--ink);
  padding:.28rem .6rem;
  font-size:.68rem;letter-spacing:.12em;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.act__body{padding-top:1rem;border-top:1px solid var(--hair);margin-top:1rem}
.act__name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.05;
}
.act__genre{
  margin-top:.35rem;color:var(--grey);
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:300;
}

/* jemné zvýraznenie namiesto invertovania farieb pri hoveri */
.act__photo img{transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .5s}
.act:hover .act__photo img,
.act:focus-within .act__photo img{transform:scale(1.035);filter:contrast(1.1) brightness(1.06)}

/* "feature" layout pre jediného DJ-a s bio textom - foto a text vedľa seba */
.act.act--feature{max-width:none}
.act--feature{
  display:grid;
  grid-template-columns:minmax(280px,420px) 1fr;
  gap:clamp(1.75rem,4vw,3rem);
  align-items:start;
}
.act--feature .act__photo{
  aspect-ratio:1117/1193;   /* presný pomer strán celého vizuálu */
}
.act--feature .act__body{padding-top:0;border-top:0;margin-top:0}
.act--feature .act__name{font-size:clamp(2rem,5vw,3rem)}
.act__meta{
  margin-top:.6rem;color:var(--grey);
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:300;
  font-variant-numeric:tabular-nums;
}
.act__bio{
  margin-top:1.5rem;color:#ccc;font-weight:300;line-height:1.7;
  max-width:60ch;
}
.act__bio + .act__bio{margin-top:1.1rem}

@media (max-width:760px){
  .act--feature{grid-template-columns:1fr;justify-items:center;text-align:center}
  .act--feature .act__photo{width:min(320px,80vw)}
  .act__bio{max-width:52ch}
}

/* ─── rezervácia ───────────────────────────── */
.rsvp{
  background:var(--paper);color:var(--ink);
  display:grid;gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  align-items:start;
}
.rsvp__copy h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.02;
}
.rsvp__lede{margin-top:1.2rem;max-width:42ch;color:#3a3a3a;font-weight:300}
/* informačná veta o fotení/nahrávaní priamo v RSVP sekcii - nielen
   v privacy.html, ktorý si takmer nikto neprečíta pred prihlásením */
.rsvp__note{margin-top:.9rem;max-width:42ch;color:#6a6a6a;font-size:.82rem;font-weight:300}
.rsvp__note a{color:inherit;text-underline-offset:3px}

.meter{margin-top:2.4rem;max-width:26rem}
.meter__bar{
  height:8px;background:#e3e3e3;position:relative;overflow:hidden;
}
.meter__bar span{
  position:absolute;inset:0 auto 0 0;width:var(--fill,0%);
  background:repeating-linear-gradient(115deg,#000 0 7px,#2b2b2b 7px 14px);
}
.meter__txt{
  margin-top:.7rem;font-size:.8rem;letter-spacing:.06em;color:#555;
  font-variant-numeric:tabular-nums;
}
.meter__txt strong{font-weight:600;color:#000}

.form{position:relative;max-width:34rem}
/* honeypot - vizuálne skryté (nie display:none, to boti občas obídu),
   z tab-orderu von, aby sa doň nedalo omylom preklikať klávesnicou */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.field{margin-bottom:1.4rem}
.field label,.check label{
  display:block;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:#666;margin-bottom:.5rem;
}
.field input{
  width:100%;padding:.85rem 0;
  border:0;border-bottom:1px solid #c9c9c9;border-radius:0;
  background:transparent;color:#000;
  font-family:var(--ui);font-size:1.05rem;font-weight:300;
  transition:border-color .25s;
}
.field input::placeholder{color:#bdbdbd}
.field input:focus{outline:none;border-bottom-color:#000;border-bottom-width:2px}
.field input:focus-visible{outline:none}

.check{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;
  margin:1.9rem 0 1.7rem;align-items:start;
}
/* druhý (dobrovoľný) súhlas nasleduje hneď po prvom - netreba medzi
   nimi rovnako veľkú medzeru ako pred/po celej dvojici */
.check + .check{margin-top:-.9rem}
.check input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin:2px 0 0;flex:none;
  border:1.5px solid #000;background:#fff;cursor:pointer;
  display:grid;place-content:center;
}
.check input::after{
  content:"";width:10px;height:10px;background:#000;
  transform:scale(0);transition:transform .16s cubic-bezier(.3,1.6,.5,1);
}
.check input:checked::after{transform:scale(1)}
.check label{
  text-transform:none;letter-spacing:0;font-size:.83rem;line-height:1.5;
  color:#555;margin:0;cursor:pointer;font-weight:300;
}
.check label a{color:#000;text-underline-offset:3px}

.err{
  min-height:1rem;margin-top:.4rem;
  font-size:.72rem;letter-spacing:.06em;color:#000;font-weight:500;
}
.err:not(:empty)::before{content:"↑ "}
.check .err{grid-column:1/-1;margin-top:.1rem}

.btn{
  width:100%;padding:1.05rem 1.5rem;
  border:0;background:var(--ink);color:var(--paper);
  font-family:var(--ui);font-size:.82rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .3s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
  transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.7,.2,1);
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:none}

.done{
  position:absolute;inset:0;background:var(--paper);
  display:grid;align-content:center;gap:.7rem;
  animation:rise .5s cubic-bezier(.2,.7,.2,1);
}
.done[hidden]{display:none}   /* inak by display:grid prebil atribút hidden */

/* po odoslaní polia zmiznú aj z tab-orderu, výška formulára zostane */
.form.is-done .field,
.form.is-done .check,
.form.is-done .btn{visibility:hidden}
.done__big{
  font-family:var(--display);font-size:clamp(2.4rem,7vw,4rem);
  line-height:1;color:var(--ink);
}
.done__txt{color:#555;font-weight:300;max-width:32ch}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* ─── pata ─────────────────────────────────── */
.foot{
  background:var(--ink);color:var(--paper);
  padding-block:clamp(2.5rem,6vh,4rem);
  border-top:1px solid var(--hair);
  display:grid;gap:2rem clamp(1.5rem,3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  align-items:start;
}
.foot__mark{
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
}
.foot__links{display:flex;flex-direction:column;gap:.55rem}
.foot__links a{
  text-decoration:none;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:300;width:fit-content;
  transition:opacity .25s;
}
.foot__links a:hover{opacity:.55}
.foot__social{display:flex;flex-direction:column;gap:.55rem}
.foot__social a{
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:300;
  transition:opacity .25s;
}
.foot__social a:hover{opacity:.55}
.foot__social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
.foot__legal{
  display:flex;flex-direction:column;gap:.55rem;
  font-size:.72rem;color:var(--grey);font-weight:300;
}
.foot__legal a{text-decoration:none}
.foot__legal a:hover{color:var(--paper)}

/* ─── stránka so zásadami ──────────────────── */
/* body{} vyššie je čierne (kvôli hlavnej stránke) - táto podstránka
   je čitateľný dokument, nie party vizuál, preto potrebuje vlastné
   svetlé pozadie namiesto zdedeného tmavého */
body.legal-page{background:var(--paper);color:var(--ink)}

.legal{
  max-width:720px;margin-inline:auto;
  padding:clamp(6.5rem,14vh,9rem) var(--pad) clamp(4rem,8vh,6rem);
}
.legal h1{
  font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(2rem,5.5vw,3.2rem);line-height:1.05;
  margin-top:.6rem;
}
.legal__meta{
  margin-top:1.1rem;color:#6a6a6a;font-size:.85rem;font-weight:300;
}
.legal section{margin-top:clamp(2.5rem,5vh,3.5rem)}
.legal h2{
  font-family:var(--ui);font-weight:600;color:var(--ink);
  font-size:clamp(1.05rem,2.4vw,1.3rem);line-height:1.3;
  margin-bottom:.9rem;
}
.legal h3{
  font-family:var(--ui);font-weight:600;color:var(--ink);
  font-size:1rem;line-height:1.3;
  margin-top:1.8rem;
}
.legal h3:first-of-type{margin-top:1.1rem}
.legal p{color:#333;font-weight:300;line-height:1.7;margin-top:.9rem}
.legal p:first-of-type{margin-top:0}
.legal ul{margin:.9rem 0 0;padding-left:1.3rem;color:#333;font-weight:300;line-height:1.7}
.legal li{margin-top:.5rem}
.legal li:first-child{margin-top:0}
.legal strong{font-weight:600;color:var(--ink)}
.legal em{font-style:italic;color:#333}
.legal a{color:var(--ink);text-underline-offset:3px}
.legal__table-wrap{margin-top:.9rem;overflow-x:auto}
.legal__table{
  width:100%;border-collapse:collapse;font-size:.85rem;
  font-weight:300;color:#333;line-height:1.5;
}
.legal__table th,.legal__table td{
  text-align:left;padding:.7rem .9rem;
  border:1px solid var(--hair-dark);vertical-align:top;
}
.legal__table th{font-weight:600;color:var(--ink);background:rgba(0,0,0,.03)}
.legal__back{
  display:inline-block;margin-top:clamp(3rem,6vh,4rem);
  color:var(--ink);font-size:.85rem;font-weight:500;
  text-decoration:none;letter-spacing:.02em;
}
.legal__back:hover{text-decoration:underline}

/* ─── responzívne ──────────────────────────── */
@media (max-width:760px){
  .wordmark{width:min(90vw,760px)}
  /* pozícia (left/top %) je teraz relatívna k #wordmark, takže sa
     prepočíta správne na akejkoľvek šírke sama - treba doladiť len
     veľkosť písma, nech sa zmestí do užšieho pásu na malom obrázku */
  .hero__party{font-size:.56rem;letter-spacing:.14em}
  .clock{flex-wrap:wrap;gap:1.4rem 2rem}
  .clock__cell{flex:1 1 40%}
  .fact{border-right:0}
  .hero__eyebrow{letter-spacing:.34em;font-size:.58rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker__track{animation:none}
  .hero__hint svg{animation:none}
  .done{animation:none}
  *{transition-duration:.01ms !important}
}