/* ===========================================================
   SKIN — ДНЕВНА СЦЕНА / DAYLIGHT
   Same structure as Кино Лирика. Sky blue ground, sunlight
   yellow accent, round mushroom stage and amphitheatre tiers.
   No JS. No images. Google Fonts only.
   =========================================================== */
:root{
  --ink:#16313E; --ink-2:#0E232D; --dim:#46606C; --mute:#7C8C93;
  --paper:#FBF7EC; --card:#FFFFFF; --stone:#F1E9D8;
  --edge:#DDD2BC; --edge-2:#C4B79C;
  --sky:#8FD0EF; --sky-lo:#D3EBF8; --sky-hi:#5FB7E0;
  --sun:#FFC83D; --sun-lo:#FFE79A; --sun-ink:#8A5A00;
  --s0:.8125rem; --s1:.9375rem; --s2:1.0625rem; --s3:1.25rem;
  --s4:clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
  --s5:clamp(2.6rem, 1.3rem + 6.4vw, 5.5rem);
  --gutter:clamp(1rem,4vw,3.5rem);
  color-scheme:light;
}
*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Golos Text",ui-sans-serif,system-ui,sans-serif;
  font-size:var(--s2); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--sun-ink);}
a:hover{color:var(--ink);}
a:focus-visible{outline:2px solid var(--sky-hi); outline-offset:3px;}
::selection{background:var(--sun-lo); color:var(--ink-2);}
.wrap{width:100%; max-width:64rem; margin-inline:auto; padding-inline:var(--gutter);}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}


.eyebrow{
  margin:0; font-family:"JetBrains Mono",monospace; font-size:var(--s0);
  letter-spacing:.18em; text-transform:uppercase; color:var(--sun-ink);
}
.eyebrow .sep{color:var(--edge-2); padding-inline:.5em;}

.btn{
  display:inline-flex; align-items:center; gap:.6rem; min-height:3rem; padding:.7rem 1.35rem;
  font-size:var(--s1); font-weight:600; text-decoration:none; line-height:1.2; border-radius:999px;
}
.btn svg{flex:none;}
.btn-primary{background:var(--sun); color:var(--ink-2); border:1px solid #E7AF20; box-shadow:0 .35rem 1rem rgba(224,168,0,.28);}
.btn-primary:hover{background:#FFD35F; color:var(--ink-2);}
.btn-quiet{border:1px solid var(--ink); color:var(--ink); background:transparent;}
.btn-quiet:hover{background:var(--ink); color:var(--paper);}

/* =========================================================
   HERO — daylight: sky, sun, hills, mushroom stage, tiers
   ========================================================= */
.stage{position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(3.5rem,11vw,7rem) clamp(7rem,19vw,13rem); border-bottom:1px solid var(--edge);}
.layer{position:absolute; inset:0; pointer-events:none; z-index:-1;}
.layer svg{width:100%; height:100%; display:block;}
.l-sky{background:linear-gradient(to bottom, var(--sky) 0%, var(--sky-lo) 58%, var(--paper) 100%);}
.l-sun{
  background:
    radial-gradient(9rem 9rem at 86% 14%, #FFFFFF 0%, var(--sun) 34%, rgba(255,200,61,.35) 55%, transparent 72%),
    radial-gradient(26rem 20rem at 86% 14%, rgba(255,231,154,.45), transparent 70%);
}
.l-rays{
  background:conic-gradient(from 150deg at 86% 14%, transparent 0deg, rgba(255,255,255,.34) 8deg, transparent 18deg, transparent 30deg, rgba(255,255,255,.26) 38deg, transparent 48deg, transparent 62deg, rgba(255,255,255,.2) 70deg, transparent 80deg);
  mix-blend-mode:screen; opacity:.85;
}
.l-hills,.l-scene{display:grid; align-items:end;}
.l-hills svg,.l-scene svg{height:auto;}
.l-hills{opacity:.85;}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .l-rays,.l-hills,.l-scene{animation:drift linear both; animation-timeline:scroll(root); animation-range:0 88svh;}
    .l-rays{--fall:2%;--grow:1.03}
    .l-hills{--fall:7%;--grow:1.04}
    .l-scene{--fall:16%;--grow:1.09}
    @keyframes drift{to{transform:translateY(var(--fall)) scale(var(--grow));}}
  }
}
.stage .wrap{position:relative;}

.venue-name{
  font-family:"Literata",Georgia,serif; font-weight:300; font-size:var(--s5);
  line-height:.98; letter-spacing:-.02em; margin:.9rem 0 0; text-wrap:balance; color:var(--ink-2);
}
.venue-name em{font-style:italic; font-weight:400; color:var(--sun-ink);}
.address{margin:1.5rem 0 0; max-width:34ch; color:var(--dim); font-size:var(--s1);}
.hr{border:0; border-top:1px solid var(--edge-2); margin:1.75rem 0 0;}
.actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem;}
.cats{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:1.5rem; font-family:"JetBrains Mono",monospace; font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);}
.cats span{border-bottom:1px solid var(--edge-2); padding-bottom:.25rem;}

/* ------- next event ------- */
.next{border-block:1px solid var(--edge); background:var(--card);}
.next-in{padding-block:clamp(2rem,5vw,3.25rem); display:flex; flex-direction:column; gap:1rem;}
.when{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; font-size:var(--s1); color:var(--dim);}
.when .big{font-family:"Literata",serif; font-size:clamp(1.6rem,5vw,2.1rem); font-weight:400; letter-spacing:-.01em; color:var(--ink-2);}
.when .away{color:var(--mute); font-size:var(--s0);}
.next h2{font-family:"Literata",serif; font-weight:400; font-size:var(--s4); line-height:1.15; letter-spacing:-.015em; margin:0; text-wrap:balance; overflow-wrap:anywhere; color:var(--ink-2);}
.next p{margin:0; color:var(--dim); max-width:60ch; font-size:var(--s1);}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.1rem;}
.price{font-family:"JetBrains Mono",monospace; font-size:var(--s0); color:var(--ink); border-left:3px solid var(--sun); padding-left:.6rem; overflow-wrap:anywhere; max-width:100%;}
.info{font-size:var(--s0); color:var(--sun-ink); text-decoration:underline; text-underline-offset:.3em;}
.info:hover{color:var(--ink);}

.fresh{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .9rem; padding-block:1rem; border-bottom:1px solid var(--edge); font-family:"JetBrains Mono",monospace; font-size:var(--s0); color:var(--dim);}
.dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--sun); flex:none; translate:0 -.1rem; box-shadow:0 0 0 .25rem rgba(255,200,61,.3);}

/* =========================================================
   THE LIST
   ========================================================= */
.prog-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:.75rem; padding-block:clamp(2.5rem,6vw,3.5rem) .75rem;}
.prog-head h2{font-family:"Literata",serif; font-weight:400; font-size:var(--s4); line-height:1.1; margin:0; letter-spacing:-.015em; color:var(--ink-2);}
.count{font-family:"JetBrains Mono",monospace; font-size:var(--s0); color:var(--mute);}

.month{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:2;
  background:var(--sky-lo); border-top:1px solid var(--sky-hi); border-bottom:1px solid var(--edge);
  padding:.55rem .75rem; font-family:"JetBrains Mono",monospace; font-size:var(--s0);
  letter-spacing:.16em; text-transform:uppercase; color:#0E4A69;
  display:flex; justify-content:space-between; gap:1rem;
}
.month span:last-child{color:#2E7EA5;}
.list{margin:0; padding:0; list-style:none;}
.row{display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:0 1rem; padding:1.15rem 0; border-bottom:1px solid var(--edge);}
@media (hover:hover){.row:hover{background:linear-gradient(to right, rgba(255,200,61,.16), transparent 72%);}}
.rdate{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; display:flex; flex-direction:column; line-height:1.15;}
.rdate .d{font-family:"Literata",serif; font-size:1.6rem; font-weight:400; letter-spacing:-.02em; color:var(--ink-2);}
.rdate .w{font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; color:var(--sun-ink);}
.rdate .t{font-size:.75rem; color:var(--dim); margin-top:.35rem;}
.rbody{display:flex; flex-direction:column; gap:.4rem; min-width:0;}
.rseries{font-family:"JetBrains Mono",monospace; font-size:.6875rem; text-transform:uppercase; letter-spacing:.14em; color:var(--mute);}
.rbody h3{font-family:"Literata",serif; font-weight:400; font-size:var(--s3); line-height:1.25; margin:0; text-wrap:pretty; overflow-wrap:anywhere; color:var(--ink-2);}
.rbody p{margin:0; color:var(--dim); font-size:var(--s1); max-width:64ch;}

.archive{padding-block:1.75rem 3.5rem; margin:0;}
.archive a{font-family:"JetBrains Mono",monospace; font-size:var(--s0); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); text-decoration:none; border-bottom:1px solid var(--edge-2); padding-bottom:.3rem;}
.archive a:hover{color:var(--sun-ink); border-color:var(--sun);}

.empty{border-top:1px solid var(--edge-2); border-bottom:1px solid var(--edge); padding-block:clamp(2rem,6vw,3rem); display:flex; flex-direction:column; gap:.9rem;}
.empty h3{font-family:"Literata",serif; font-weight:300; font-size:var(--s4); margin:0; letter-spacing:-.015em; text-wrap:balance; color:var(--ink-2);}
.empty p{margin:0; color:var(--dim); font-size:var(--s1); max-width:54ch;}

/* =========================================================
   FOOTER — open air: sky, low sun, amphitheatre tiers
   ========================================================= */
.coda{
  position:relative; isolation:isolate; overflow:hidden; border-top:1px solid var(--edge);
  padding-block:clamp(3.5rem,9vw,6rem) 0; color:var(--ink);
}
.c-sky{position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, var(--sky-lo) 0%, #EAF5FB 46%, var(--paper) 100%);}
.c-sun{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(6.5rem 6.5rem at 14% 22%, #FFFFFF 0%, var(--sun) 38%, rgba(255,200,61,.3) 58%, transparent 74%),
    radial-gradient(22rem 16rem at 14% 22%, rgba(255,231,154,.5), transparent 72%),
    conic-gradient(from 20deg at 14% 22%, transparent 0deg, rgba(255,255,255,.3) 9deg, transparent 20deg, transparent 34deg, rgba(255,255,255,.24) 43deg, transparent 54deg);
}
.c-tiers{position:absolute; inset:auto 0 clamp(6rem,11vw,7.5rem); z-index:-1; pointer-events:none; display:grid; align-items:end;}
.c-tiers svg{width:100%; height:auto; display:block;}
.coda-in{position:relative; display:grid; gap:1.5rem; padding-bottom:clamp(2.5rem,7vw,4rem);}
.coda h2{font-family:"Literata",serif; font-weight:300; font-size:var(--s4); line-height:1.15; margin:.5rem 0 0; letter-spacing:-.015em; text-wrap:balance; color:var(--ink-2);}
.coda p{margin:.7rem 0 0; color:var(--dim); max-width:46ch; font-size:var(--s1);}
.plat{position:relative; z-index:1; background:transparent; border-top:1px solid var(--edge-2); padding-block:1.6rem 2.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.4rem; font-size:var(--s0); color:var(--mute);}
.plat a{color:var(--dim); text-decoration:none;}
.plat a:hover{color:#1C88C4;}
.mark{display:flex; align-items:center; gap:.55rem; color:var(--ink-2); font-weight:600;}
.plat .url{font-family:"JetBrains Mono",monospace; width:100%;}

@media (min-width:52rem){
  .next-in{display:grid; grid-template-columns:16rem minmax(0,1fr); gap:1rem clamp(2rem,5vw,4rem); align-items:start;}
  .when{flex-direction:column; align-items:flex-start; gap:.3rem; grid-row:span 4;}
  .row{grid-template-columns:7rem minmax(0,1fr); gap:0 2rem; align-items:baseline;}
  .rbody{display:grid; grid-template-columns:minmax(0,1fr) 15rem; column-gap:2.5rem; row-gap:.4rem; align-items:start;}
  .rbody>*{grid-column:1;}
  .rbody>.meta{grid-column:2; grid-row:1 / span 4; flex-direction:column; align-items:flex-start; gap:.5rem; align-self:start;}
  .rdate .d{font-size:2rem;}
  .coda-in{grid-template-columns:minmax(0,1fr) auto; align-items:center;}
  .plat .url{width:auto; margin-left:auto;}
}