/* ==========================================================================
   PROJECT MAYHEM — Gatvės Gimnastika
   Palette: #0D0D0D ink · #404040 steel · #EDEDED bone · #BF000C red · #7F0008 blood
   ========================================================================== */

:root{
  --ink:#0D0D0D;
  --ink-2:#121212;
  --ink-3:#181818;
  --steel:#404040;
  --steel-dim:#2a2a2a;
  --bone:#EDEDED;
  --bone-dim:#9a9a9a;
  --red:#BF000C;
  --blood:#7F0008;

  --font-display:"Barlow Condensed",system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --gut: clamp(20px, 5vw, 80px);
  --maxw: 1320px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* `hidden` must win over any display rule further down, or an element the site
   means to hide — an empty social row, say — quietly shows itself anyway. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -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}

/* --- grain / vignette overlay -------------------------------------------- */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:overlay;
}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.01em;
  margin:0;
}
h1{font-size:clamp(2.9rem,9.2vw,8.2rem)}
h2{font-size:clamp(2.1rem,5.4vw,4.6rem)}
h3{font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.05}
p{margin:0 0 1em}
.lead{font-size:clamp(1rem,1.35vw,1.19rem);color:#c3c3c3;max-width:62ch}
.kicker{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:.78rem;color:var(--red);
  display:flex;align-items:center;gap:.7em;margin:0 0 1.1rem;
}
.kicker::before{content:"";width:34px;height:2px;background:var(--red);flex:none}
.muted{color:var(--bone-dim)}
.red{color:var(--red)}

/* --- layout -------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative;padding-block:clamp(72px,10vw,150px)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--steel-dim) 12%,var(--steel-dim) 88%,transparent)}

/* --- nav ----------------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;gap:clamp(16px,3vw,42px);
  padding:14px var(--gut);
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s,padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(9,9,9,.86);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--steel-dim);padding-block:9px;
}
/* At the top of the page the full wordmark is shown, large. Once the page is
   scrolled the nav condenses and the logo crossfades down to just the M.
   Widths are derived from each file's aspect (3.606 and 1.387) so the box
   animates in step with the artwork instead of squashing it. */
.nav__logo{
  --logo-h:clamp(40px,5.6vw,70px);
  position:relative;z-index:3;display:block;overflow:hidden;flex:none;
  height:var(--logo-h);width:calc(var(--logo-h) * 3.606);
  transition:height .4s var(--ease),width .4s var(--ease);
}
.nav__logo img{
  position:absolute;left:0;top:0;height:100%;width:auto;
  transition:opacity .3s var(--ease);
}
.nav__logo-mark{opacity:0}

.nav.solid .nav__logo{
  --logo-h:clamp(26px,2.6vw,34px);
  width:calc(var(--logo-h) * 1.387);
}
.nav.solid .nav__logo-full{opacity:0}
.nav.solid .nav__logo-mark{opacity:1}
.nav__links{display:flex;gap:clamp(14px,1.9vw,30px);margin-left:auto;align-items:center}
.nav__links a{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;font-size:.86rem;color:#cfcfcf;position:relative;padding:6px 0;
  transition:color .25s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
@media (hover:hover){
  .nav__links a:hover{color:var(--bone)}
  .nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
  .el__item:hover::before{width:100%}
  .flip:hover .flip__in{transform:rotateY(180deg)}
  .cal__i:hover::before{width:100%}
  .cal__i:hover{padding-left:14px}
  .cal__i:hover .cal__go{color:var(--red);transform:translate(3px,-3px)}
  .gal figure:hover img{transform:scale(1.07);filter:contrast(1.04) saturate(1)}
  .ph:hover img{transform:scale(1.06);filter:contrast(1.04) saturate(1) brightness(1)}
                      }

.lang{display:flex;border:1px solid var(--steel-dim);border-radius:2px;overflow:hidden;flex:none;position:relative;z-index:3}
.lang button{
  font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.12em;
  padding:5px 9px;color:#8d8d8d;transition:.25s;
  /* a thumb needs more than the text does; the box grows, the type does not */
  min-width:44px;min-height:40px;
}
.lang button[aria-pressed="true"]{background:var(--red);color:#fff}

.btn{
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.92rem;padding:.85em 1.5em;border:1px solid var(--red);
  background:var(--red);color:#fff;position:relative;overflow:hidden;
  transition:color .3s,border-color .3s;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .38s var(--ease);z-index:0;
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--red)}
.btn>*{position:relative;z-index:1}
.btn--ghost{background:transparent;border-color:var(--steel);color:var(--bone)}
.btn--ghost::before{background:var(--bone)}
.btn--ghost:hover{color:var(--ink);border-color:var(--bone)}
.btn--sm{font-size:.8rem;padding:.6em 1.05em}
.nav__links .btn{white-space:nowrap}

.burger{display:none;position:relative;z-index:3;width:38px;height:38px;align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:20px;height:2px;background:var(--bone);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--bone);transition:.3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{top:0;transform:rotate(45deg)}
.nav.open .burger span::after{top:0;transform:rotate(-45deg)}

/* --- hero ---------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;display:flex;align-items:flex-end;
  padding-block:clamp(110px,14vh,150px) clamp(34px,6vh,64px);
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(9,9,9,.95) 6%, rgba(9,9,9,.72) 42%, rgba(9,9,9,.34) 72%),
    linear-gradient(0deg, var(--ink) 2%, transparent 34%),
    radial-gradient(120% 85% at 78% 30%, rgba(191,0,12,.26), transparent 60%);
  z-index:1;
}
.hero__grid{
  position:absolute;inset:0;opacity:.3;z-index:2;
  background-image:linear-gradient(var(--steel-dim) 1px,transparent 1px),linear-gradient(90deg,var(--steel-dim) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%,#000 20%,transparent 78%);
  mask-image:radial-gradient(80% 70% at 50% 45%,#000 20%,transparent 78%);
}
.hero__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  opacity:.62;filter:contrast(1.06) saturate(.92);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:scale(1.07)}}
.hero__cap{
  position:absolute;right:var(--gut);bottom:clamp(18px,4vh,34px);z-index:3;
  display:flex;align-items:center;gap:12px;text-align:right;
}
.hero__cap>span:last-child{display:flex;flex-direction:column}
.hero__cap b{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
.hero__cap i{font-style:normal;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero__fig{position:relative}
.hero__inner{display:grid;grid-template-columns:minmax(0,min(46rem,62%));gap:clamp(20px,4vw,60px);align-items:end}
.hero h1{font-size:clamp(2.35rem,6.3vw,6.2rem)}
.hero h1 span{display:block;overflow:hidden}
.hero h1 span i{display:block;font-style:normal;transform:translateY(105%);animation:rise .95s var(--ease) forwards}
.hero h1 span:nth-child(2) i{animation-delay:.09s}
.hero h1 span:nth-child(3) i{animation-delay:.18s}
@keyframes rise{to{transform:translateY(0)}}
.hero h1 em{font-style:normal;color:var(--red)}
.hero__lead{margin-top:1.6rem;max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.hero__stats{display:flex;gap:clamp(18px,3vw,44px);margin-top:2.6rem;flex-wrap:wrap}
.hero__stats div{border-left:2px solid var(--red);padding-left:12px}
.hero__stats b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1}
.hero__stats small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}

/* --- figure stage -------------------------------------------------------- */
.stage{position:relative;width:100%;aspect-ratio:1/1;max-height:min(66svh,660px);margin-inline:auto}
.stage svg{width:100%;height:100%;display:block;overflow:visible}
.stage__ring{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:82%;aspect-ratio:1;border:1px solid var(--steel-dim);border-radius:50%;
  animation:spin 42s linear infinite;
}
.stage__ring::before{content:"";position:absolute;top:-5px;left:calc(50% - 5px);width:10px;height:10px;background:var(--red);border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.readout{
  position:absolute;left:0;bottom:0;display:flex;align-items:flex-end;gap:14px;
  transition:opacity .38s var(--ease);
}
.readout.swap{opacity:0}
.readout__name{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1}
.readout__meta{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.pts{
  display:inline-flex;flex-direction:column;align-items:center;gap:.3em;
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);line-height:.85;
  color:var(--red);border:1px solid var(--red);padding:.26em .4em .22em;
}
.pts sup{
  font-size:.38em;letter-spacing:.14em;line-height:1;vertical-align:baseline;
  color:var(--bone-dim);border:0;font-weight:600;
}

/* --- marquee ------------------------------------------------------------- */
.marquee{
  border-block:1px solid var(--steel-dim);padding-block:16px;overflow:hidden;
  background:linear-gradient(180deg,#101010,#0b0b0b);
}
.marquee__track{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee__track span{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:clamp(.9rem,1.5vw,1.15rem);padding-inline:clamp(18px,2.4vw,38px);
  display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);color:#d0d0d0;white-space:nowrap;
}
.marquee__track span::after{content:"";width:6px;height:6px;background:var(--red);rotate:45deg;flex:none}

/* --- competitions --------------------------------------------------------- */
#competitions{padding-bottom:0}
.sub{position:relative;padding-block:clamp(56px,7vw,104px)}
.cal__h{margin-top:clamp(30px,4vw,52px);color:var(--red)}
.cal{display:flex;flex-direction:column;border-top:1px solid var(--steel-dim);margin-top:16px}
.cal__i{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,2.6vw,36px);
  align-items:center;padding:clamp(16px,2.2vw,24px) 4px;border-bottom:1px solid var(--steel-dim);
  position:relative;transition:padding-left .35s var(--ease);
}
.cal__i::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(191,0,12,.22),transparent);transition:width .45s var(--ease);
}
.cal__date{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:clamp(74px,8vw,96px);padding:.5em .4em;border:1px solid var(--steel-dim);
  background:#141414;line-height:1;
}
.cal__date b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--bone);font-variant-numeric:tabular-nums}
.cal__date i{font-style:normal;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.6rem;color:var(--red);margin-top:.5em}
.cal__date u{text-decoration:none;font-size:.58rem;letter-spacing:.14em;color:var(--steel);margin-top:.35em}
.cal__body{position:relative;display:flex;flex-direction:column;gap:.3em}
.cal__n{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.05;color:var(--bone)}
.cal__loc{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.cal__days{display:flex;flex-direction:column;gap:4px;margin-top:.5em}
.cal__days span{display:flex;gap:10px;align-items:baseline;font-size:.86rem;color:#bdbdbd}
.cal__days b{
  font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.1em;color:var(--red);
  border:1px solid rgba(191,0,12,.5);padding:.1em .45em;flex:none;font-variant-numeric:tabular-nums;
}
.cal__go{position:relative;font-size:1.1rem;color:var(--steel);transition:color .3s,transform .3s var(--ease)}

/* --- elements section ---------------------------------------------------- */
.el{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(30px,5vw,60px)}
.el__list{display:flex;flex-direction:column;border-top:1px solid var(--steel-dim);order:-1}
.el__item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:clamp(11px,1.5vw,17px) 4px;border-bottom:1px solid var(--steel-dim);
  text-align:left;position:relative;transition:padding-left .35s var(--ease);
}
.el__item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(191,0,12,.22),transparent);
  transition:width .45s var(--ease);
}
.el__item[aria-selected="true"]{padding-left:16px}
.el__item[aria-selected="true"]::before{width:100%;background:linear-gradient(90deg,rgba(191,0,12,.30),transparent)}
.el__item[aria-selected="true"] .el__name{color:var(--bone)}
.el__num{font-family:var(--font-display);font-size:.78rem;letter-spacing:.1em;color:var(--steel);position:relative}
.el__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1rem,1.55vw,1.32rem);line-height:1.05;color:#b6b6b6;transition:color .3s;position:relative}
.el__name small{display:block;font-size:.62rem;letter-spacing:.16em;color:var(--steel);font-weight:600}
.el__pts{font-family:var(--font-display);font-weight:800;font-size:clamp(1rem,1.5vw,1.3rem);color:var(--red);position:relative}
.el__stage{position:relative}
.el__src{margin:14px 0 0;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.el__desc{margin-top:18px;min-height:5.2em;transition:opacity .38s var(--ease)}
.el__desc.swap{opacity:0}
.el__desc h3{margin-bottom:.4rem}

/* --- dynamics ------------------------------------------------------------ */
.dyn{background:linear-gradient(180deg,#0b0b0b,#111 45%,#0b0b0b)}
/* Copy first in the DOM so a narrow screen reads title -> animation -> tricks.
   On a wide one the stage moves to the left column and spans both rows. */
.dyn__inner{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(24px,4vw,64px);row-gap:22px;align-items:center;
}
.dyn__stage{grid-column:1;grid-row:1 / span 2;align-self:center}
/* Mirrored layout — figure on the right — so the three subsections do not all
   march the same way down the page. It is a two-column idea and nothing else,
   so it lives inside the two-column breakpoint: placing children in column 2
   below it fought the single-column reset further down, which is narrower in
   specificity, and squeezed the copy into a nine-pixel ribbon beside the
   figure on a phone. */
@media (min-width:1021px){
  .dyn__inner--flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .dyn__inner--flip .dyn__stage{grid-column:2}
  .dyn__inner--flip .dyn__copy,.dyn__inner--flip .dyn__chips{grid-column:1}
}
.dyn__copy {grid-column:2;grid-row:1;align-self:end}
.dyn__chips{grid-column:2;grid-row:2;align-self:start}
#liftStage,#enduStage{aspect-ratio:1/1}
.dyn__stage{position:relative;width:100%;aspect-ratio:4/3;border:1px solid var(--steel-dim);background:
  radial-gradient(80% 70% at 50% 30%,rgba(191,0,12,.14),transparent 70%),#0a0a0a;overflow:hidden}
.dyn__stage svg{width:100%;height:100%;display:block}
.dyn__tag{position:absolute;left:14px;top:12px;font-family:var(--font-display);font-weight:700;letter-spacing:.2em;font-size:.7rem;color:var(--bone-dim);text-transform:uppercase}
.dyn__tag b{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--steel-dim);padding:.42em .8em;font-family:var(--font-display);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;color:#bdbdbd;
  display:flex;gap:.6em;align-items:center;transition:.3s;
}
.chip b{color:var(--red);font-weight:800}
.chip:hover{border-color:var(--red);color:var(--bone)}

/* --- cards --------------------------------------------------------------- */
.grid{display:grid;gap:1px;background:var(--steel-dim);border:1px solid var(--steel-dim);margin-top:clamp(30px,4vw,54px)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{background:var(--ink-2);padding:clamp(20px,2.4vw,34px);position:relative;overflow:hidden;transition:background .4s}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{background:var(--ink-3)}
.card:hover::after{transform:scaleX(1)}
/* The card is as tall as the long description on its back needs, which on a
   phone left a wide empty band under the front copy. The figure is the thing
   worth looking at, so it grows into that space rather than the space staying
   blank. */
.card__ic{width:clamp(56px,7vw,68px);height:clamp(56px,7vw,68px);margin-bottom:14px;margin-left:-8px;color:var(--red)}
@media (max-width:720px){
  .flip .card__ic{width:clamp(78px,26vw,116px);height:clamp(78px,26vw,116px);margin-bottom:18px}
}
.card h3{margin-bottom:.5rem}
.card p{font-size:.94rem;color:#a8a8a8;margin:0}
.card__idx{position:absolute;right:14px;top:10px;font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:#1c1c1c;line-height:1}

/* --- section atmosphere --------------------------------------------------- */
.sec__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.16;filter:grayscale(.35) contrast(1.1);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.dyn .wrap,.shows .wrap{position:relative;z-index:1}
.dyn,.shows{overflow:hidden}

/* --- photography ---------------------------------------------------------- */
.shot{margin:clamp(28px,4vw,48px) 0 0;position:relative;overflow:hidden;border:1px solid var(--steel-dim)}
.shot img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover;display:block;
  filter:contrast(1.04) saturate(.94);transition:transform .9s var(--ease)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,9,9,.55),transparent 55%)}
.shot--wide img{height:clamp(240px,38vw,480px);object-position:50% 68%}  /* the crew stand low in frame */
.shot--tall{margin-top:0;margin-bottom:26px}
.shot--tall img{height:clamp(220px,30vw,340px)}

/* --- timetable ------------------------------------------------------------ */
.sc__wrap{overflow-x:auto;margin-top:clamp(28px,4vw,50px);border:1px solid var(--steel-dim)}
.sc{width:100%;border-collapse:collapse;min-width:660px;background:var(--ink-2)}
.sc th,.sc td{border:1px solid var(--steel-dim);padding:0;text-align:center}
.sc thead th{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;color:var(--bone-dim);padding:14px 10px;background:#101010;
}
.sc__time{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;
  color:var(--bone-dim);white-space:nowrap;padding:0 16px!important;background:#101010;
  font-variant-numeric:tabular-nums;
}
.sc td{height:64px}
.sc__empty{background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(255,255,255,.018) 7px,rgba(255,255,255,.018) 14px)}
/* Two colours only: coached sessions in a dimmed red, open gym in grey.
   Which discipline it is comes from the label, not the fill. */
.sc__cls{
  display:flex;align-items:center;justify-content:center;height:100%;min-height:56px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.86rem;background:#4E1216;color:var(--bone);transition:background .3s;
}
.sc__cls--laisvas{background:#242424;color:#9d9d9d;box-shadow:inset 0 0 0 1px rgba(237,237,237,.06)}

.scd__wrap{display:none;gap:1px;background:var(--steel-dim);border:1px solid var(--steel-dim);margin-top:28px}
.scd{background:var(--ink-2);padding:18px}
.scd h4{font-size:1.05rem;margin-bottom:10px;color:var(--red)}
.scd ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.scd li{display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:center}
.scd .sc__t{font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--bone-dim);font-variant-numeric:tabular-nums}
.scd .sc__cls{min-height:38px;font-size:.8rem}


/* --- flip cards ------------------------------------------------------------
   The short line is on the front, the full description on the back. Turned by
   hover on a pointer device, by tap on a touch one, and by keyboard focus — so
   the copy is never reachable only through a gesture some visitors cannot make. */
.flip{background:transparent;padding:0;perspective:1300px;min-height:clamp(300px,25vw,338px)}
.flip__in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.flip__face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--ink-2);padding:clamp(20px,2.4vw,34px);
  display:flex;flex-direction:column;overflow:hidden;
}
.flip__back{
  transform:rotateY(180deg);
  background:linear-gradient(155deg,#1a0a0c,var(--ink-2) 65%);
  box-shadow:inset 0 2px 0 var(--red);
  justify-content:center;
}
.flip__back p{font-size:clamp(.83rem,1vw,.92rem);line-height:1.6;color:#c4c4c4;margin:0}
.flip__back h3{margin-bottom:.6rem;color:var(--red)}
.flip__more{
  margin-top:auto;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.66rem;color:var(--steel);display:flex;align-items:center;gap:.5em;
}
.flip__more::after{content:"↻";font-size:1.05em;color:var(--red)}
.flip.is-open .flip__in,
.flip:focus-visible .flip__in{transform:rotateY(180deg)}
.flip:focus-visible{outline:2px solid var(--red);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  /* no spin — just swap the faces */
  .flip__in{transition:none}
  .flip__face{backface-visibility:visible}
  .flip__back{transform:none;opacity:0;transition:opacity .2s}
  .flip.is-open .flip__back,.flip:hover .flip__back,.flip:focus-visible .flip__back{opacity:1}
  .flip.is-open .flip__in,.flip:focus-visible .flip__in{transform:none}
}

/* --- pricing ------------------------------------------------------------- */
.price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--steel-dim);border:1px solid var(--steel-dim);margin-top:clamp(30px,4vw,54px)}
.plan__name{font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--red);margin-bottom:.35em}
.plan{background:var(--ink-2);padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;position:relative;transition:background .4s}
.plan:hover{background:var(--ink-3)}
.plan--hot{background:linear-gradient(180deg,rgba(191,0,12,.16),var(--ink-2) 55%)}
.plan__flag{position:absolute;right:0;top:0;background:var(--red);color:#fff;font-family:var(--font-display);font-weight:700;letter-spacing:.14em;font-size:.66rem;padding:.4em .8em;text-transform:uppercase}
.plan__freq{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:var(--bone-dim)}
.plan__amt{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:.85;margin:.2em 0 .12em;font-variant-numeric:tabular-nums}
.plan__amt sub{font-size:.24em;font-weight:600;letter-spacing:.12em;color:var(--bone-dim);vertical-align:baseline;bottom:0}
.plan p{font-size:.93rem;color:#a8a8a8;margin-bottom:0}


/* --- photo wall ----------------------------------------------------------- */
.wall{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(120px,13vw,190px);
  gap:1px;background:var(--steel-dim);border:1px solid var(--steel-dim);
  margin-top:clamp(30px,4vw,54px);
}
.ph{margin:0;position:relative;overflow:hidden;background:var(--ink-2)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.04) saturate(.9) brightness(.92);transition:transform .8s var(--ease),filter .5s}
.ph--big{grid-column:span 2;grid-row:span 2}

/* --- show gallery --------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--steel-dim);
  border:1px solid var(--steel-dim);margin-bottom:26px}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2)}
.gal img{width:100%;height:clamp(120px,15vw,170px);object-fit:cover;display:block;
  filter:contrast(1.04) saturate(.92);transition:transform .7s var(--ease),filter .5s}
.gal figcaption{
  position:absolute;left:0;bottom:0;padding:.4em .7em;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.62rem;color:var(--bone);background:linear-gradient(0deg,rgba(9,9,9,.9),transparent);
  width:100%;
}

/* --- the team history ------------------------------------------------------
   Every year on one line, held still, with a single card underneath that swaps
   on click. The years never reflow, so the eye can use the row as a scale; only
   the card changes height, and it has a floor so short entries do not make the
   section jump. Below ~700px the row scrolls sideways rather than wrapping —
   still one line, which is the whole point of it. */
.tl{margin-top:clamp(30px,4vw,52px)}
.tl__years{
  display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;
  border-bottom:1px solid var(--steel-dim);
  scrollbar-width:none;-ms-overflow-style:none;
}
.tl__years::-webkit-scrollbar{display:none}
/* app.js sets data-scroll; the fade says "there is more of this row that way" */
.tl__years[data-scroll="end"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 38px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 38px),transparent)}
.tl__years[data-scroll="start"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 38px);
  mask-image:linear-gradient(90deg,transparent,#000 38px)}
.tl__years[data-scroll="both"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 38px,#000 calc(100% - 38px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 38px,#000 calc(100% - 38px),transparent)}
.tl__y{
  /* narrow enough that seventeen years still fit a laptop without scrolling —
     the row only starts scrolling on a phone */
  flex:1 1 0;min-width:34px;position:relative;
  background:none;border:0;padding:10px 2px 15px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.72rem,1.05vw,.95rem);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--steel);transition:color .25s;
}
/* the tick under each year, and the marker that shows something happened */
.tl__y::before{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 50%;
  width:7px;height:7px;border-radius:50%;background:var(--steel-dim);transition:.25s;
}
.tl__y:not(.tl__y--blank){color:var(--bone-dim)}
.tl__y:not(.tl__y--blank)::before{background:var(--blood)}
.tl__y[aria-selected="true"]{color:var(--bone)}
.tl__y[aria-selected="true"]::before{background:var(--red);width:11px;height:11px;box-shadow:0 0 0 4px rgba(191,0,12,.18)}
.tl__y--blank{color:#3a3a3a}

.tl__card{
  /* a floor, so swapping years never shifts the photograph below — sized to the
     tallest card at each width rather than to the widest screen, which left a
     phone with sixty empty pixels under every short entry */
  margin-top:clamp(22px,3vw,34px);min-height:clamp(112px,14vw,140px);
  display:flex;flex-direction:column;gap:.45em;
}
.tl__cy{
  font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:clamp(2.6rem,6vw,4.4rem);color:var(--red);font-variant-numeric:tabular-nums;
}
.tl__ct{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:clamp(1.05rem,2vw,1.6rem);line-height:1.15;margin:0;color:var(--bone);
}
.tl__ct--soon{color:var(--steel);text-transform:none;font-weight:600;letter-spacing:.01em}
.tl__cd{margin:0;font-size:.86rem;letter-spacing:.02em;color:var(--bone-dim)}
.tl__card.is-new .tl__cy,.tl__card.is-new .tl__ct,.tl__card.is-new .tl__cd{animation:tlIn .42s var(--ease) both}
@keyframes tlIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* --- show gallery --------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--steel-dim);
  border:1px solid var(--steel-dim);margin-bottom:26px}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2)}
.gal img{width:100%;height:clamp(120px,15vw,170px);object-fit:cover;display:block;
  filter:contrast(1.04) saturate(.92);transition:transform .7s var(--ease),filter .5s}
.gal figcaption{
  position:absolute;left:0;bottom:0;padding:.4em .7em;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.62rem;color:var(--bone);background:linear-gradient(0deg,rgba(9,9,9,.9),transparent);
  width:100%;
}

/* --- shows --------------------------------------------------------------- */
.shows{background:
  linear-gradient(180deg,#0a0a0a,#0f0f0f),
  radial-gradient(60% 50% at 85% 20%,rgba(127,0,8,.3),transparent 70%);}
.shows__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.brands{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.brands span{
  border:1px solid var(--steel-dim);padding:.55em 1em;font-family:var(--font-display);
  font-weight:700;letter-spacing:.2em;font-size:.8rem;color:#9d9d9d;text-transform:uppercase;transition:.3s
}
.brands span:hover{color:var(--bone);border-color:var(--steel)}
.evt{display:flex;flex-direction:column;border-top:1px solid var(--steel-dim)}
.evt div{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--steel-dim);font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:clamp(.95rem,1.4vw,1.15rem);color:#c2c2c2}
.evt div::before{content:"";width:7px;height:7px;background:var(--red);rotate:45deg;flex:none}


/* --- contact ------------------------------------------------------------- */
.contact__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px)}
.info{display:flex;flex-direction:column;border-top:1px solid var(--steel-dim);margin-top:6px}
.info a,.info div{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--steel-dim);align-items:baseline;transition:.3s}
.info a:hover{padding-left:10px;color:var(--red)}
.info dt,.info b{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;color:var(--steel)}
.info span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:.02em}

/* --- the neighbourhood map under Adresas ----------------------------------
   Drawn by make-map.py from OpenStreetMap, so it costs no network and works
   inside the single-file builds.

   On hover the Adresas row grows and the rows beneath it move down; the map
   never covers them. The height is animated with grid-template-rows 0fr -> 1fr,
   which is how you transition to "however tall the content turns out to be"
   without guessing a max-height that clips on one screen and lags on another.

   On a phone the map is simply always open: there is no hover to discover it
   with, and the tap belongs to the link out to Google Maps. */
.info__map .map{grid-column:1/-1;display:grid;grid-template-rows:1fr;margin-top:14px}
.map__in{overflow:hidden;min-height:0}
/* Both wrappers are <span>s inside .info a, which shouts in condensed uppercase
   — and that would carry down into the map's own labels. */
.info__map .map,.info__map .map__in{
  font:400 1rem/1.4 var(--font-body);letter-spacing:normal;text-transform:none;color:var(--bone)}
.map .m{display:block;width:100%;height:auto;border:1px solid var(--steel-dim)}
.map .m__here{fill:#8d0009;stroke:var(--red);stroke-width:1.5}
/* a cast shadow, not a painted one: an opaque blob under the pin would darken
   the red building it stands on and read as damage to it */
.map .m__pin{filter:drop-shadow(0 3px 6px rgba(0,0,0,.85))}
.map .m__ring{fill:#0d0d0d;stroke:var(--red);stroke-width:2.5}
.map .m__lbl text{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;fill:#6f6f6f}
.map__src{display:block;padding:6px 2px 0;font-size:.66rem;color:var(--steel);text-align:right;line-height:1.2}

@media (hover:hover){
  .info__map .map{grid-template-rows:0fr;margin-top:0;
    transition:grid-template-rows .55s var(--ease),margin-top .55s var(--ease)}
  .info__map:hover .map,.info__map:focus-visible .map{grid-template-rows:1fr;margin-top:16px}
  .info__map:hover{padding-left:0}      /* the row grows downwards, it does not slide sideways */
}
@media (prefers-reduced-motion:reduce){
  .info__map .map{transition:none}
}

/* --- footer -------------------------------------------------------------- */
.foot{border-top:1px solid var(--steel-dim);padding:clamp(34px,4vw,56px) 0 26px}
.foot__inner{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot img{height:30px;width:auto;opacity:.9}
.foot__links{display:flex;gap:20px;flex-wrap:wrap}
.foot__links a{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:#8f8f8f;transition:.25s}
.foot__links a:hover{color:var(--red)}
.foot__base{margin-top:26px;padding-top:18px;border-top:1px solid #1c1c1c;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.76rem;color:#6a6a6a}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.el__item:focus-visible{outline-offset:-2px}

/* --- reveal -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1020px){
  .hero__inner,.dyn__inner,.shows__inner,.contact__inner{grid-template-columns:minmax(0,1fr)}
  .dyn__stage,.dyn__copy,.dyn__chips{grid-column:auto;grid-row:auto;align-self:auto}
  .dyn__stage{max-height:56svh}   /* full width at 4:3 would swallow a tablet screen */
  .el{display:block}
  .el__stage{position:sticky;top:52px;z-index:2;background:var(--ink);padding-bottom:22px}
  .el__stage .stage{max-height:34svh}
  .el__desc{min-height:0;margin-top:12px}
  .el__list{margin-top:4px}
  /* the caption leaves its absolute corner here, so the hero must stack it
     under the copy rather than lay it out beside it */
  .hero{flex-direction:column;align-items:stretch;justify-content:center;padding-top:112px}
  .hero__fig{order:-1}
  .stage{max-height:40svh}
  .hero__lead{font-size:1rem}
  .readout{position:static;margin-top:8px}
  .grid--3,.grid--5,.price,.team{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* three columns can never tile 20 cells evenly, so step straight to two */
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,22vw,230px)}
  .hero__inner{grid-template-columns:minmax(0,1fr)}
  .hero__cap{position:static;margin:24px 0 0;padding-inline:var(--gut);text-align:left;justify-content:flex-start}
  .hero__cap>span:last-child{align-items:flex-start}
}
/* The full horizontal menu only fits once there is room for the expanded logo,
   seven links, the button and the language switch — measured at ~1220px. Below
   that the burger takes over, which is why this breakpoint is not the usual
   phone one. Add a menu item and this number needs revisiting. */
@media (max-width:1220px){
  .nav__links{
    position:fixed;inset:0;height:100dvh;padding:96px var(--gut) 40px;z-index:2;
    background:#080808;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:4px;margin:0;clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease);
    overflow-y:auto;
  }
  .nav.open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__links a{font-size:clamp(1.4rem,4.4vw,2rem);letter-spacing:.04em;padding:10px 0}
  .nav__links .btn{margin-top:20px;font-size:.95rem}
  .burger{display:flex;order:3}
  .lang{order:2;margin-left:auto}
  .nav__logo{margin-right:auto}
}

@media (max-width:720px){
  .tl__y{flex:0 0 auto}      /* stop stretching; let the row scroll instead */

  .grid--3,.grid--5,.price{grid-template-columns:minmax(0,1fr)}
  .wall{grid-auto-rows:30vw}
  .sc__wrap{display:none}
  .scd__wrap{display:grid}
    background:linear-gradient(180deg,var(--blood),var(--red) 55%,var(--steel-dim))}
  .info a,.info div{grid-template-columns:minmax(0,1fr);gap:2px}
  .cal__i{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .cal__go{grid-column:2;justify-self:start}
  .hero__stats{gap:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .hero h1 span i{transform:none}
  .rv{opacity:1;transform:none}
}