@font-face {
  font-family:AntonCyrillic;
  src:url('assets/fonts/display.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:Reading;
  src:url('assets/fonts/text.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
:root {
  --paper:#f9f8f5;
  --ink:#151515;
  --red:#4e0104;
  --display:AntonCyrillic,sans-serif;
  --reading:Reading,Arial,sans-serif;
  --column:clamp(660px,calc(15vw + 480px),720px);
  --body-height:280px;
  --inner-gap:16px;
  --amplitude:8.1px;
  --cycle:12s;
  --logo-width:calc(min(65vw,940px)*.93);
  --date-font:2.1875rem;
  --date-width:6.25rem;
  --date-height:3rem;
  --city-font:2.25rem;
  --venue-font:.9375rem;
  --ticket-width:10rem;
}
* {
  box-sizing:border-box
}
html {
  background:var(--paper);
  color:var(--ink)
}
body {
  margin:0;
  font-family:var(--reading);
  font-size:1rem;
  line-height:1.5
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  background:url('assets/grain.png') repeat;
  opacity:.5;
  pointer-events:none;
  z-index:8
}
button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button {
  font:inherit
}
a {
  color:inherit
}
button:focus-visible,a:focus-visible {
  outline:3px solid #555;
  outline-offset:5px
}
button:disabled {
  opacity:1;
  cursor:default
}
img {
  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
}
.hero {
  padding:28px 20px 6px;
  position:relative;
  z-index:3
}
.logo {
  width:var(--logo-width);
  height:auto;
  margin:0 auto
}
.safe-column {
  width:var(--column);
  margin-inline:auto;
  position:relative;
  z-index:4
}
main.safe-column {
  container-type:inline-size
}
.concerts {
  list-style:none;
  margin:0;
  padding:0
}
.concert {
  display:grid;
  grid-template-columns:var(--date-width) minmax(0,1fr) var(--ticket-width) 2.75rem;
  column-gap:14px;
  align-items:center;
  min-height:92px;
  padding:14px 0
}
.date {
  font-family:var(--display);
  font-weight:400;
  font-size:var(--date-font);
  line-height:1;
  color:var(--paper);
  background:var(--ink);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--date-width);
  min-height:var(--date-height);
  padding:.25rem .1875rem;
  position:relative;
  white-space:nowrap;
  max-width:100%
}
.date.featured {
  background:var(--red)
}
.date::after,.print::after {
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/grain.png');
  opacity:.65;
  filter:invert(1);
  pointer-events:none
}
.city {
  font-family:var(--display);
  font-size:var(--city-font);
  font-weight:400;
  line-height:1.08;
  margin:0;
  text-transform:uppercase;
  hyphens:manual;
  overflow-wrap:anywhere
}
.venue {
  font-family:var(--display);
  font-weight:400;
  color:#494949;
  font-size:var(--venue-font);
  line-height:1.2;
  margin:4px 0 0;
  overflow-wrap:anywhere
}
.actions {
  display:contents
}
.print {
  border:0;
  border-radius:0;
  background:var(--ink);
  color:#fff;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  min-height:2.75rem
}
.ticket {
  font-family:var(--display);
  font-weight:400;
  font-size:1.1875rem;
  line-height:1.2;
  padding:8px 6px;
  width:var(--ticket-width);
  min-width:0;
  max-width:100%
}
.vk {
  width:2.75rem;
  height:2.75rem;
  flex:0 0 2.75rem
}
.vk svg {
  width:1.5625rem;
  height:1.5625rem;
  fill:currentColor;
  position:relative
}
.print:not(:disabled):hover {
  background:#363636
}
.thread {
  display:none;
  width:100%;
  height:2px;
  object-fit:fill
}
.footer {
  padding:32px 0 36px
}
.footer>.thread {
  display:block;
  margin-bottom:22px
}
.footer-tools {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:18px
}
.footer-links {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  width:100%;
  margin-bottom:22px
}
.footer-link {
  flex:0 1 auto;
  gap:8px;
  height:46px;
  min-width:0;
  padding:10px 16px;
  font-family:var(--display);
  font-weight:400;
  font-size:1.125rem;
  line-height:1.2;
  white-space:nowrap;
  max-width:100%
}
.footer-link.telegram {
  width:210px
}
.footer-link.merch {
  width:136px
}
.footer-link svg {
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:currentColor
}
.footer .privacy {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px
}
.footer-email {
  color:var(--ink);
  font-family:var(--reading);
  font-size:.8125rem;
  line-height:1.45;
  text-decoration:underline;
  text-underline-offset:3px;
  max-width:100%
}
.footer-email:hover,.footer .privacy:hover {
  text-decoration-thickness:2px
}
@media(min-width:1100px) {
  .footer-row {
    display:grid;
    grid-template-columns:repeat(4,auto);
    grid-template-rows:46px auto;
    align-items:center;
    justify-content:space-between;
    column-gap:12px;
    row-gap:8px;
    width:100%
  }
  .footer-links,.footer-tools {
    display:contents
  }
  .footer .support,.footer .footer-link {
    flex:0 0 auto;
    width:auto;
    min-width:0;
    height:46px;
    padding:10px 12px;
    white-space:nowrap
  }
  .footer .support {
    grid-column:1;
    grid-row:1
  }
  .footer .telegram {
    grid-column:2;
    grid-row:1
  }
  .footer .merch {
    grid-column:3;
    grid-row:1
  }
  .footer .privacy {
    grid-column:4;
    grid-row:1;
    flex:0 0 auto;
    white-space:nowrap;
    overflow-wrap:normal
  }
  .footer-email {
    grid-column:4;
    grid-row:2;
    justify-self:center;
    white-space:nowrap
  }
}
.support {
  font-family:var(--display);
  font-size:1.125rem;
  min-width:160px;
  padding:10px 24px;
  overflow-wrap:anywhere
}
.privacy {
  overflow-wrap:anywhere;
  border:0;
  padding:8px 0;
  background:none;
  text-align:right;
  font-family:var(--reading);
  font-size:.75rem;
  line-height:1.45;
  text-transform:uppercase;
  cursor:pointer;
  min-height:2.75rem;
  max-width:100%
}
.organizer,.phone {
  font-size:.8125rem
}
.phone {
  display:inline-block;
  margin-bottom:4px;
  text-underline-offset:4px;
  max-width:100%;
  overflow-wrap:anywhere
}
.puppets {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  overflow:hidden
}
.puppet {
  position:absolute;
  top:0;
  width:var(--puppet-width);
  --phase:0s;
  --float-offset:0px;
  --joint-overlap:1px;
  --puppet-top:380px
}
.puppet.sun {
  right:calc(50% + var(--column)/2 + var(--inner-gap));
  --puppet-width:calc(var(--body-height)*449/569)
}
.puppet.oscar {
  left:calc(50% + var(--column)/2 + var(--inner-gap));
  --puppet-width:calc(var(--body-height)*611/589);
  --phase:-6s
}
.figure {
  position:absolute;
  width:100%;
  top:var(--puppet-top);
  transform:translateY(var(--float-offset))
}
.figure img {
  width:100%;
  height:auto
}
.rope {
  position:absolute;
  top:0;
  width:100%;
  height:calc(var(--puppet-top) + var(--float-offset) + var(--joint-overlap))
}
.rope picture {
  display:block;
  width:100%;
  height:100%
}
.rope img {
  width:100%;
  height:100%
}
.desktop-art {
  display:block
}
.mobile-art {
  display:none
}
dialog {
  position:fixed;
  border:1px solid #ccc;
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  padding:36px;
  max-width:560px;
  width:calc(100% - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  z-index:20;
  font-size:1rem;
  line-height:1.6
}
dialog::backdrop {
  background:rgba(0,0,0,.7)
}
dialog h2 {
  overflow-wrap:anywhere;
  font-family:var(--display);
  font-size:1.75rem;
  line-height:1.2;
  margin:0 42px 28px 0;
  font-weight:400
}
dialog p {
  margin:6px 0;
  overflow-wrap:anywhere
}
dialog address {
  font-style:normal;
  overflow-wrap:anywhere
}
.close {
  position:absolute;
  right:15px;
  top:15px;
  width:44px;
  height:44px;
  border:0;
  background:var(--ink);
  color:white;
  font-size:28px;
  cursor:pointer;
  line-height:1
}
@media(min-width:1600px) {
  :root {
    --body-height:360px;
    --logo-width:940px
  }
  .hero {
    padding-top:38px;
    padding-bottom:12px
  }
}
@media(max-width:1099px) {
  :root {
    --column:clamp(196px,calc(45vw + 64px),620px);
    --body-height:260px;
    --amplitude:5.4px;
    --inner-gap:12px;
    --date-font:1.5625rem;
    --date-width:4.125rem;
    --date-height:2.0625rem;
    --city-font:1.875rem;
    --venue-font:.875rem;
    --ticket-width:8.75rem
  }
  .hero {
    padding:32px 16px 14px
  }
  .logo {
    width:100%;
    max-width:clamp(500px,84vw,860px)
  }
  .concert {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:0;
    min-height:0;
    text-align:center
  }
  .date {
    align-self:center;
    margin-bottom:5px
  }
  .city {
    line-height:1
  }
  .venue {
    line-height:1.15;
    margin:3px 0 9px
  }
  .actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px;
    width:100%
  }
  .ticket {
    font-size:1.125rem
  }
  .concert>.thread {
    display:block;
    margin:10px 0 12px
  }
  .concert:last-child>.thread {
    display:none
  }
  .footer {
    padding:12px 0 calc(32px + env(safe-area-inset-bottom))
  }
  .footer>.thread {
    margin-bottom:16px
  }
  .footer-tools {
    flex-direction:column;
    justify-content:center;
    gap:8px
  }
  .footer-links {
    flex-direction:column;
    gap:12px
  }
  .footer .footer-link {
    width:100%;
    padding:10px 12px
  }
  .support {
    width:min(10rem,100%);
    min-width:0;
    padding:10px 12px
  }
  .privacy {
    text-align:center
  }
  .desktop-art {
    display:none
  }
  .mobile-art {
    display:block
  }
  .puppet.sun {
    --puppet-width:calc(var(--body-height)*239/532)
  }
  .puppet.oscar {
    --puppet-width:calc(var(--body-height)*244/522)
  }
}
/* Interpolate between the approved phone and tablet anchor sizes. */
@media(max-width:768px) {
  :root {
    --column:clamp(196px,calc(50.591716vw + 21.055621px),409.6px);
    --body-height:clamp(210px,calc(14.7929vw + 146.3905px),260px);
    --inner-gap:clamp(10px,calc(.591716vw + 7.455621px),12px);
    --city-font:1.75rem;
    --venue-font:.828125rem
  }
  .hero {
    padding-top:clamp(32px,calc(36.544379px - .591716vw),34px)
  }
  .ticket {
    font-size:1.0625rem
  }
  dialog {
    padding:28px 22px
  }
  dialog h2 {
    font-size:1.5rem;
    margin-right:42px
  }
}
@media(max-width:430px) {
  :root {
    --column:clamp(196px,calc(54vw + 6.4px),240px);
    --body-height:clamp(190px,calc(50vw - 5px),210px);
    --inner-gap:10px
  }
}
@media(max-width:390px) {
  :root {
    --body-height:clamp(160px,calc(75vw - 80px),190px)
  }
}
@media(max-width:359px) {
  :root {
    --inner-gap:clamp(8px,calc(5vw - 8px),10px);
    --city-font:1.65625rem
  }
}
/* Text enlargement can use a vertical layout without widening the safe column. */
@container(max-width:40rem) {
  .concert {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:0;
    min-height:0;
    text-align:center
  }
  .date {
    align-self:center;
    margin-bottom:5px
  }
  .venue {
    margin:3px 0 9px
  }
  .actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px;
    width:100%
  }
  .concert>.thread {
    display:block;
    margin:10px 0 12px
  }
  .concert:last-child>.thread {
    display:none
  }
}
@media(max-height:500px) and (max-width:1099px) {
  :root {
    --body-height:170px
  }
  .hero {
    padding-top:20px
  }
}
@media(prefers-reduced-motion:reduce) {
  .puppet {
    --float-offset:0px!important
  }
}