/* ===========================================================
   DIRECTION B — ЛЕНТА / THE STRIP
   A dark reading page. Projected-light hero, calm dated list.
   No JS. No images. Google Fonts only.
   =========================================================== */
:root{
  --ink:#0A0A0D; --ink-2:#101017; --edge:#22222C; --edge-2:#32323F;
  --beam:#B7A6FF; --beam-lo:#4B3F86; --beam-glow:rgba(183,166,255,.18);
  --paper:#EDEAE4; --paper-dim:#A7A3AD; --mute:#6B6878;
  --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:dark;
}
*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{
  margin:0; background:var(--ink); color:var(--paper);
  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(--beam);}
a:focus-visible{outline:2px solid var(--beam); outline-offset:3px;}
::selection{background:rgba(183,166,255,.28); color:#fff;}
.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(--beam);
}
.eyebrow .sep{color:var(--edge-2); padding-inline:.5em;}
.eyebrow .lat{color:var(--mute);}

.btn{
  display:inline-flex; align-items:center; gap:.6rem; min-height:3rem; padding:.7rem 1.25rem;
  font-size:var(--s1); font-weight:500; text-decoration:none; line-height:1.2;
}
.btn svg{flex:none;}
.btn-primary{border:1px solid var(--beam); color:var(--beam); background:rgba(183,166,255,.07); box-shadow:0 0 2.5rem var(--beam-glow) inset;}
.btn-primary:hover{background:rgba(183,166,255,.16);}
.btn-quiet{border:1px solid var(--edge-2); color:var(--paper);}
.btn-quiet:hover{border-color:var(--paper);}

/* =========================================================
   HERO — the projection: port, beam, screen, seats
   ========================================================= */
.stage{position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(3.5rem,11vw,7rem) clamp(2.5rem,7vw,4.5rem);}
.layer{position:absolute; inset:0; pointer-events:none; z-index:-1;}
.layer svg{width:100%; height:100%; display:block;}
.l-room{background:radial-gradient(90% 65% at 50% 0%, #17141F 0%, var(--ink) 65%);}
.l-beam{
  background:conic-gradient(from 168deg at 50% -6%, transparent 0deg, rgba(183,166,255,.14) 10deg, rgba(183,166,255,.05) 22deg, transparent 34deg);
  mix-blend-mode:screen;
}
.l-screen{
  background:
    linear-gradient(to bottom, rgba(183,166,255,.14), rgba(183,166,255,0) 34%),
    radial-gradient(28% 8% at 50% 0%, rgba(237,234,228,.22), transparent 70%);
}
.l-walls{
  background-image:linear-gradient(to right, rgba(237,234,228,.05) 1px, transparent 1px);
  background-size:clamp(3rem,7vw,6rem) 100%;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 55%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 55%, transparent);
  opacity:.5;
}
.l-dust{
  background-image:radial-gradient(1px 1px at 22% 30%,rgba(183,166,255,.5),transparent),
    radial-gradient(1px 1px at 58% 18%,rgba(237,234,228,.35),transparent),
    radial-gradient(1px 1px at 74% 44%,rgba(183,166,255,.4),transparent),
    radial-gradient(1px 1px at 38% 58%,rgba(237,234,228,.22),transparent),
    radial-gradient(1px 1px at 86% 66%,rgba(183,166,255,.3),transparent);
}
.l-seats{display:grid; align-items:end;}
.l-seats svg{height:auto;}
.l-grain{background-image:radial-gradient(rgba(237,234,228,.03) 1px,transparent 1px); background-size:3px 3px;}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .l-beam,.l-dust,.l-seats{animation:drift linear both; animation-timeline:scroll(root); animation-range:0 88svh;}
    .l-beam{--fall:3%;--grow:1.04}
    .l-dust{--fall:9%;--grow:1.06}
    .l-seats{--fall:20%;--grow:1.12}
    @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;
}
.venue-name em{font-style:italic; font-weight:400; color:var(--beam);}
.venue-name .en{
  display:block; font-family:"JetBrains Mono",monospace; font-size:.16em; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--mute); margin-top:1.1em;
}
.address{margin:1.5rem 0 0; max-width:34ch; color:var(--paper-dim); font-size:var(--s1);}
.hr{border:0; border-top:1px solid var(--edge); 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(--paper-dim);}
.cats span{border-bottom:1px solid var(--edge-2); padding-bottom:.25rem;}

/* ------- next event: a lede, not a card ------- */
.next{border-top:1px solid var(--edge); background:var(--ink-2);}
.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);}
.when .big{font-family:"Literata",serif; font-size:clamp(1.6rem,5vw,2.1rem); font-weight:400; letter-spacing:-.01em; color:var(--paper);}
.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;}
.next p{margin:0; color:var(--paper-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(--paper); border-left:2px solid var(--edge-2); padding-left:.6rem; overflow-wrap:anywhere; max-width:100%;}
.info{font-size:var(--s0); color:var(--paper-dim); text-decoration:underline; text-underline-offset:.3em;}
.info:hover{color:var(--beam);}

.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(--paper-dim);}
.fresh .en{color:var(--mute);}
.dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--beam); flex:none; translate:0 -.1rem; box-shadow:0 0 0 .25rem var(--beam-glow);}

/* =========================================================
   THE LIST — hairlines, month bands, sticky month header
   ========================================================= */
.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;}
.prog-head h2 .lat{color:var(--mute); font-style:italic;}
.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(--ink);
  border-top:1px solid var(--edge-2); border-bottom:1px solid var(--edge);
  padding:.55rem 0; font-family:"JetBrains Mono",monospace; font-size:var(--s0);
  letter-spacing:.16em; text-transform:uppercase; color:var(--beam);
  display:flex; justify-content:space-between; gap:1rem;
}
.month span:last-child{color:var(--mute);}
.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(183,166,255,.06),transparent 70%);}}
.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;}
.rdate .w{font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; color:var(--beam);}
.rdate .t{font-size:.75rem; color:var(--paper-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;}
.rbody p{margin:0; color:var(--paper-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(--paper-dim); text-decoration:none; border-bottom:1px solid var(--edge-2); padding-bottom:.3rem;}
.archive a:hover{color:var(--beam); border-color:var(--beam);}

.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;}
.empty p{margin:0; color:var(--paper-dim); font-size:var(--s1); max-width:54ch;}
.empty .en{color:var(--mute);}

.coda{
  position:relative; isolation:isolate; overflow:hidden;
  border-top:1px solid var(--edge-2);
  padding-block:clamp(4rem,10vw,7rem) 0;
  background:radial-gradient(120% 90% at 50% 0%, #15121D 0%, var(--ink) 62%);
}
/* stage lights: a batten of lamps on the footer's top edge, cones falling */
.batten{position:absolute; inset:0 0 auto; height:clamp(9rem,22vw,15rem); pointer-events:none; z-index:-1;}
.batten .bar{position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(to right, transparent, var(--edge-2) 12%, var(--edge-2) 88%, transparent);}
.batten .lamps{position:absolute; inset:0 0 auto; display:flex; justify-content:center; gap:clamp(3rem,11vw,9rem);}
.lamp{position:relative; width:.5rem; height:.5rem; border-radius:50%; background:var(--beam); translate:0 -.2rem; box-shadow:0 0 .6rem .12rem rgba(183,166,255,.75), 0 0 2rem .5rem var(--beam-glow);}
.lamp::after{
  content:""; position:absolute; top:.3rem; left:50%; translate:-50% 0;
  width:clamp(9rem,26vw,20rem); height:clamp(9rem,22vw,15rem);
  background:linear-gradient(to bottom, rgba(183,166,255,.20), rgba(183,166,255,.055) 55%, transparent 92%);
  clip-path:polygon(48.5% 0, 51.5% 0, 100% 100%, 0 100%);
  mix-blend-mode:screen;
}
.lamp:nth-child(2){background:#F0E2C2; box-shadow:0 0 .6rem .12rem rgba(240,226,194,.7), 0 0 2rem .5rem rgba(240,226,194,.16);}
.lamp:nth-child(2)::after{background:linear-gradient(to bottom, rgba(240,226,194,.17), rgba(240,226,194,.05) 55%, transparent 92%);}
.coda .floor{
  position:absolute; inset:auto 0 0; height:clamp(7rem,18vw,11rem); pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(183,166,255,.10), transparent 72%),
    linear-gradient(to top, rgba(237,234,228,.05), transparent);
}
.coda .floor::after{content:""; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(to right, transparent, rgba(183,166,255,.45) 30%, rgba(240,226,194,.45) 60%, transparent);}
.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;}
.coda p{margin:.7rem 0 0; color:var(--paper-dim); max-width:46ch; font-size:var(--s1);}
.plat{position:relative; border-top:1px solid var(--edge); 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(--paper-dim); text-decoration:none;}
.plat a:hover{color:#22D3EE;}
.mark{display:flex; align-items:center; gap:.55rem; color:var(--paper); font-weight:600;}
.plat .url{font-family:"JetBrains Mono",monospace; width:100%;}

.notes{background:#06060A; border-top:2px dashed var(--edge); padding-block:clamp(2.5rem,6vw,4rem);}
.notes h2{font-family:"JetBrains Mono",monospace; font-size:var(--s1); text-transform:uppercase; letter-spacing:.14em; color:var(--beam); margin:0 0 .4rem;}
.notes .sub{color:var(--mute); font-size:var(--s0); margin:0 0 2rem; max-width:64ch;}
.notes dl{display:grid; gap:1.5rem 2.5rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); margin:0;}
.notes dt{font-family:"JetBrains Mono",monospace; font-size:.6875rem; text-transform:uppercase; letter-spacing:.12em; color:var(--paper); margin-bottom:.4rem;}
.notes dd{margin:0; color:var(--paper-dim); font-size:var(--s1);}
.notes code{font-family:"JetBrains Mono",monospace; font-size:.9em; color:var(--paper);}

@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;}
}