/* =============================================================================
   Paper eye — festival programme page + home hero
   ============================================================================= */

.eyebrow {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 22px;
}

/* ---------- home hero: the eye sits in the empty half ---------- */
.intro-section--split {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-bottom: 90px;
}
.intro-section--split .intro-text { max-width: none; }

/* no frame, no captions, no controls — just the paper, next to the words */
.hero-eye {
  position: relative;
  display: block;
  align-self: stretch;
  min-height: 340px;
  background: var(--white);
}
.hero-eye__canvas { position: absolute; inset: 0; }
.hero-eye__canvas canvas { display: block; }
.hero-eye__go {
  position: absolute;
  left: 0;
  bottom: 6px;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  pointer-events: none;
  transition: color .2s;
}
.hero-eye:hover .hero-eye__go { color: var(--black); }

/* text set over the paper scene itself, on the plain white ground */
.hero-eye__caption {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 6% 0 0;
  pointer-events: none;
}
.hero-eye__eyebrow {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
}
.hero-eye__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0;
}
.hero-eye__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--gray);
  max-width: 34ch;
  margin-top: 2px;
}

/* ---------- programme page: the stage ---------- */
.eye-section {
  padding: 40px var(--edge) 60px;
}
.eye-stage {
  position: relative;
  border: 1px solid var(--hairline);
  background: #fff;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.eye-canvas { position: absolute; inset: 0; }
.eye-canvas canvas { display: block; }
.eye-phase {
  position: absolute;
  left: 22px;
  top: 20px;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.eye-hint {
  position: absolute;
  right: 22px;
  top: 24px;
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray);
  pointer-events: none;
}

.eye-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.eye-btn {
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.08px;
  color: var(--black);
  background: rgba(0,0,0,0.05);
  border: none;
  border-radius: 40px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background .15s;
}
.eye-btn:hover { background: rgba(0,0,0,0.1); }
.eye-btn[aria-pressed="true"] { background: var(--black); color: var(--white); }
.eye-btn:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

.eye-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 56px;
}
.eye-legend__item { display: flex; flex-direction: column; gap: 10px; }
.eye-legend__no {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--gray);
}
.eye-legend p { font-size: 16px; line-height: 1.45; letter-spacing: -0.01em; max-width: 42ch; }
.eye-legend strong { font-weight: 600; }

/* ---------- programme: days that open in place ---------- */
.prog-lede {
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--gray);
  max-width: 62ch;
  margin: -8px 0 28px;
}
.prog-days { list-style: none; margin: 0; padding: 0; }
.prog-day { border-top: 1px solid var(--hairline); }
.prog-day:last-child { border-bottom: 1px solid var(--hairline); }

.prog-day__head {
  display: grid;
  grid-template-columns: 110px 190px minmax(0, 1fr) 40px;
  align-items: baseline;
  gap: 24px;
  width: 100%;
  padding: 28px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--black);
}
.prog-day__head:hover .prog-day__title { opacity: .55; }
.prog-day__head:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.prog-day__id {
  font-size: 56px;
  line-height: .9;
  letter-spacing: -0.05em;
  color: var(--day, var(--black));
}
.prog-day__when { display: flex; flex-direction: column; gap: 3px; }
.prog-day__wd { font-size: 18px; letter-spacing: -0.02em; }
.prog-day__dt {
  font-family: var(--font-nav);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
}
.prog-day__title { font-size: 26px; letter-spacing: -0.03em; line-height: 1.15; transition: opacity .15s; }
.prog-day__sign { position: relative; justify-self: end; align-self: center; width: 16px; height: 16px; }
.prog-day__sign::before,
.prog-day__sign::after {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 1.5px; background: var(--black);
  transition: transform .22s ease;
}
.prog-day__sign::after { transform: rotate(90deg); }
.prog-day.is-open .prog-day__sign::after { transform: rotate(0deg); }

.prog-day__body { padding: 0 0 34px 110px; }
.prog-day__lede {
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--gray);
  max-width: 58ch;
  margin-bottom: 22px;
}

.prog-work {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 20px;
  padding: 13px 0;
  border-top: 1px solid rgba(0,0,0,.12);
}
.prog-work__dur {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--day, var(--gray));
  padding-top: 6px;
}
.prog-work__main { display: flex; flex-direction: column; gap: 3px; }
.prog-work__composer {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
}
.prog-work__title { font-size: 21px; letter-spacing: -0.03em; line-height: 1.2; }
.prog-work__title a { border-bottom: 1px solid rgba(0,0,0,.25); }
.prog-work__title a:hover { opacity: .55; }
.prog-work__note {
  font-family: var(--font-nav);
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray);
  letter-spacing: -0.01em;
  max-width: 64ch;
}
.prog-work__note a { border-bottom: 1px solid rgba(0,0,0,.2); }
.prog-work--break .prog-work__title { font-size: 15px; color: var(--gray); letter-spacing: .06em; text-transform: uppercase; }

.prog-set { margin-top: 26px; }
.prog-set__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.prog-set__time {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--day, var(--gray));
  min-width: 78px;
}

.prog-aside, .prog-alt { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.prog-aside__label, .prog-alt__label {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}
.prog-aside__text { font-size: 17px; letter-spacing: -0.02em; }
.prog-alt__text { font-size: 15px; color: var(--gray); margin-bottom: 8px; }

/* ---------- narrow screens ---------- */
@media (max-width: 1000px) {
  .intro-section--split { grid-template-columns: 1fr; gap: 32px; }
  .hero-eye { min-height: 300px; aspect-ratio: 16 / 10; }
  .eye-legend { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .prog-day__head { grid-template-columns: 74px minmax(0, 1fr) 30px; gap: 8px 18px; padding: 22px 0; }
  .prog-day__id { font-size: 40px; grid-row: span 2; }
  .prog-day__when { grid-column: 2; }
  .prog-day__title { grid-column: 2; font-size: 21px; }
  .prog-day__sign { grid-column: 3; grid-row: 1; }
  .prog-day__body { padding-left: 0; }
}
@media (max-width: 640px) {
  .eye-stage { aspect-ratio: 4 / 5; }
  .eye-hint { display: none; }
  .prog-work { grid-template-columns: 1fr; gap: 2px; }
  .prog-work__dur { padding-top: 0; }
  .prog-work__title { font-size: 19px; }
  .prog-set__head { flex-direction: column; gap: 2px; }
}

/* відкрите море заповнює героя синім — дрібні підписи лежать на білих паперових смужках */
.hero-eye__caption, .hero-eye__go { z-index: 2; }
.hero-eye__eyebrow, .hero-eye__sub, .hero-eye__go {
  background: var(--white);
  padding: 3px 7px;
  margin-left: -7px;
  width: fit-content;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-eye__go { left: 7px; }
@media (min-width: 1200px) { .hero-eye__sub { white-space: nowrap; max-width: none; } }