/* Igor Andrić — events (locked 24 Sep 2026, from exploration A).
   Lazar's layout: one row per event, dashed rules between rows, the picture on the right. Every row reads
   in two bands — the TOP says what and who (work, performers), the BOTTOM says when and where (date,
   venue) — and both bottom blocks sit on one line. Orchestra and location share one column.
   The switch (Upcoming / Past) is the heading of the section. At most eight rows to a page.
   Tokens and fonts come from site.css.

   Responsive (5 Oct, Lazar: one section at a time, down to 385px, everything in rem and fluid).
   Type is only the .text-* classes, so it is already fluid rem. Every length here is rem too; the ones that
   change with the screen are clamp()s that reach their 1440 value exactly at 1440 (1440 stays pixel-identical)
   and their small value at 385. Three layouts, by the width of the screen:
     ≥ 1024px  the locked table: work & date · performers & venue · the picture
     ≥ 768px   the table folded: one text column, the picture stays on the right
     < 768px   oryzo's phone row (Lazar, 5 Oct): the picture becomes a small circle at the left, the text moves one
               column in and gets the whole width
   Below 1024 the row also gets a clear ladder (Lazar, 5 Oct: "ne zna se šta je šta"): the title is the only large
   line, everything else steps down — performers and scoring to body, date and venue to body-s capitals. */

.ev{position:relative;z-index:1;
  padding:calc(var(--nav-h) + clamp(3rem, 2.4526rem + 2.275vw, 4.5rem)) var(--gut) clamp(6rem, 4.9964rem + 4.171vw, 8.75rem);
  --rule:rgba(242,237,230,.24);
  --cols:minmax(0,5fr) minmax(0,4fr) minmax(0,3.4fr);
  --col-gap:clamp(1.5rem, 1.1351rem + 1.517vw, 2.5rem);   /* 24 → 40px */
  --row-pad:1.375rem;
  --img-ar:7/5}
/* :where keeps these resets at zero specificity, so .ev-tab / .ev-num keep their own type */
:where(.ev) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.ev) ul{margin:0;padding:0;list-style:none}
.ev-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- the switch = the heading
   Its geometry is the 1440 one (dot 11px, 26px in front of the tab, 43px between the tabs at H4 52px) held in em of
   H4, so it shrinks with the type instead of the dot running into UPCOMING on a phone. The dot never gets smaller
   than the pager's (8px). */
.ev-switch{position:relative;display:flex;align-items:flex-start;font-size:var(--fs-h4);
  gap:calc(43.2em / 52);padding-left:.5em;margin-bottom:clamp(2rem, 1.4526rem + 2.275vw, 3.5rem)}
.ev-dot{--d:max(.5rem, calc(11em / 52));
  position:absolute;left:0;top:calc(var(--lh-h4) * .5em - var(--d) * 5 / 11);width:var(--d);height:var(--d);border-radius:50%;
  background:var(--ink);font-size:var(--fs-h4);
  transform:translateX(var(--dotX,0px));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ev-tab{position:relative;display:inline-flex;align-items:flex-start;gap:.5rem;
  font-weight:var(--fw-bold);text-transform:uppercase;
  color:var(--ink);opacity:.26;transition:opacity .3s ease}
.ev-tab:hover{opacity:.6}
.ev-tab[aria-selected="true"]{opacity:1}

.ev button:focus{outline:none}
.ev button:focus-visible{outline:1px solid var(--mute);outline-offset:.5rem}

/* ---------------------------------------------------------------- the table */
.ev-head,.ev-row{display:grid;grid-template-columns:var(--cols);column-gap:var(--col-gap)}
.ev-head{padding-bottom:.875rem;border-bottom:1px dashed var(--rule)}
.ev-head span{font-weight:var(--fw-semi);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

.ev-list{transition:opacity .22s ease,transform .22s ease}
.ev-list.is-out{opacity:0;transform:translateY(.375rem)}

.ev-row{padding:var(--row-pad) 0;border-bottom:1px dashed var(--rule);margin:0;
  opacity:0;transform:translateY(.625rem);animation:evIn .6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--i,0) * 70ms)}
@keyframes evIn{to{opacity:1;transform:none}}

.ev-col{display:flex;flex-direction:column;justify-content:space-between;gap:1.75rem;min-width:0}

.ev-title{margin:0;font-weight:var(--fw-semi);color:var(--ink);
  text-wrap:balance}
.ev-scoring{margin-top:.625rem;font-weight:var(--fw-semi);color:var(--mute)}

.ev-who li{font-weight:var(--fw-semi);color:var(--ink)}
.ev-who li+li{margin-top:.375rem}
/* the role (Orchestra, conductor) is the same size as the name beside it, only quieter (Lazar, 26 Sep) */
.ev-who em{font-weight:var(--fw-semi);font-size:inherit;line-height:inherit;font-style:normal;color:var(--mute);margin-left:.28em}

.ev-fact b{display:block;font-weight:var(--fw-bold);letter-spacing:.012em;text-transform:uppercase;
  color:var(--ink)}
.ev-fact span{display:block;margin-top:.125rem;font-weight:var(--fw-semi);color:var(--mute)}

/* The picture chases its shape (oryzo, testimonies table — measured 28 Sep): low on the screen it stands at .8 of its
   size and .2 of its light, and grows to its full shape while it comes up the screen. events.js writes the scale and
   the light; it grows out of its top right corner, where the row and the picture column meet. */
.ev-pic{position:relative;overflow:hidden;aspect-ratio:var(--img-ar);background:#0F0C0A;align-self:start;margin:0;
  transform-origin:100% 0;will-change:transform,opacity}
.ev-pic img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s ease,opacity .6s ease}
.ev-row:hover .ev-pic img{transform:scale(1.035)}

.is-past .ev-pic img{filter:grayscale(1) contrast(1.05);opacity:.6}
.is-past .ev-row:hover .ev-pic img{filter:none;opacity:1}

/* ---------------------------------------------------------------- nothing announced (exploration, 1 Oct)
   The sentence takes the place of the first row and its rule runs the whole width; the column heads go quiet,
   their rule stays as the top of the empty row. Nothing under it (Lazar, 1 Oct: no label, no event row) —
   the link beside the sentence leads to the other list. ?prazno=tacet tries one more idea: the score's word for
   a part that is silent, very large and barely lit above the sentence. */
.is-empty .ev-head span{visibility:hidden}
.ev-empty-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-6) var(--sp-10);flex-wrap:wrap;
  padding:3rem 0;border-bottom:1px dashed var(--rule)}
.ev-empty-t{max-width:none;font-weight:var(--fw-semi);color:var(--ink);text-wrap:balance}
.ev-empty-top,.ev-tacet{opacity:0;transform:translateY(.625rem);animation:evIn .6s cubic-bezier(.2,.8,.2,1) forwards}

/* tacet: the word at the largest size, nearly the colour of the page; the sentence and its rule over its foot */
.ev-tacet{position:relative;padding-top:2.5rem}
.ev-tacet-w{display:block;max-width:none;font-weight:var(--fw-bold);text-transform:uppercase;
  color:var(--ink);opacity:.09;user-select:none}
.ev-tacet-k{display:block;max-width:none;margin-bottom:.375rem;font-weight:var(--fw-semi);letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
.ev-tacet .ev-empty-top{margin-top:calc(var(--fs-h1) * -.32);animation-delay:.12s}

/* ---------------------------------------------------------------- pagination
   The switch, one size down: the pages in the nav type, the one shown at full ink with the site's dot
   in front of it, the others at a third. Previous / next sit at the other end of the same line, in the
   small caps of the table header. Hidden when everything fits on one page. */
.ev-pages{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:2.25rem}
.ev-pages[hidden]{display:none}
.ev-nums{position:relative;display:flex;align-items:center;gap:clamp(1.5rem, 1.272rem + .948vw, 2.125rem);padding-left:1rem}
.ev-pdot{position:absolute;left:0;top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;border-radius:50%;
  background:var(--ink);transform:translateX(var(--dotX,0px));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ev-num{font-weight:var(--fw-bold);letter-spacing:.012em;color:var(--ink);opacity:.3;
  font-variant-numeric:tabular-nums;transition:opacity .25s ease}
.ev-num:hover{opacity:.65}
.ev-num[aria-current="page"]{opacity:1}
.ev-step{display:flex;align-items:center;gap:2.25rem}   /* previous / next: arrows.css */

/* a finger needs more than the 16px of a page number: the hit area grows, the layout does not */
@media (pointer:coarse){
  .ev-num{position:relative}
  .ev-num::after{content:'';position:absolute;inset:-.875rem -.625rem}
}

@media (prefers-reduced-motion:reduce){
  .ev-row,.ev-empty-top,.ev-tacet{animation:none;opacity:1;transform:none}
  .ev-list,.ev-dot,.ev-pdot,.ev-pic img{transition:none}
}

/* ---------------------------------------------------------------- < 1024px: the columns dissolve
   Below 1024 the performers' column is too narrow for a name and its role (at 768: "Howard / Griffiths"), so the two
   text columns give up their boxes (display:contents) and their four blocks take named places in the row. The column
   heads go, their rule stays as the top of the first row.
   The order becomes when → what → who → where, read top down, as oryzo's row: its stars and score are the date and
   the year (one line, the year at the far end), its quote is the title, its author line is the venue.
   The ladder, three steps and nothing between them:
     1  the title           H5, ink              — the only large line
     2  scoring, performers body, scoring and roles quiet
     3  date, venue         body-s capitals, the year and the town quiet */
@media (max-width:63.99em){
  .ev-head{padding-bottom:0}
  .ev-head span{display:none}
  .ev-col{display:contents}
  .ev-what{grid-area:what}
  .ev-who{grid-area:who}
  .ev-when{grid-area:when}
  .ev-where{grid-area:where}
  .ev-pic{grid-area:pic}
  .ev-who:empty{display:none}

  .ev .ev-scoring,.ev .ev-who li{font-size:var(--fs-body);line-height:var(--lh-body)}
  .ev .ev-fact b,.ev .ev-fact span{font-size:var(--fs-body-s);line-height:var(--lh-body-s)}
  .ev-scoring{margin-top:var(--sp-1)}
  .ev-who li+li{margin-top:0}

  /* the date line: day and month at the start, the year at the far end */
  .ev-when time{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4)}
  .ev-when span{margin-top:0;font-variant-numeric:tabular-nums}

  .ev-what{margin-top:var(--sp-4)}
  .ev-who{margin-top:var(--sp-4)}
  .ev-where{margin-top:var(--sp-5)}
}

/* ---------------------------------------------------------------- 768–1023px: the table folded
   One text column as wide as work and performers were together; the picture keeps its place on the right and its
   chase (events.js), at the share of the row it has in the table (≈ 30%) — any wider and it outweighs the smaller
   type of the ladder. The venue sits at the foot of the row, level with the bottom of the picture, as in the table. */
@media (min-width:48em) and (max-width:63.99em){
  .ev-row{grid-template-columns:minmax(0,7fr) minmax(0,3fr);
    grid-template-rows:auto auto auto 1fr;
    grid-template-areas:"when pic" "what pic" "who pic" "where pic"}
  .ev-where{align-self:end}
}

/* ---------------------------------------------------------------- < 768px: oryzo's phone row
   Measured on oryzo.ai (testimonies, below 768): the same picture that stands on the right of the table becomes a
   circle at the left, .7 of a column wide; the quote and the author line move in by one column; the stars row stays
   the full width. Here: the date line across the row, under it the circle beside the title, and the title, the
   performers and the venue on one left edge. The circle is read first and is small enough that the title leads.
   It still chases its shape while it comes up the screen (Lazar, 5 Oct), out of its top right corner, the side that
   faces the text. */
@media (max-width:47.99em){
  .ev{--row-pad:var(--sp-6);
    --av:clamp(4rem, 2.488rem + 6.283vw, 5.5rem)}              /* the circle: 64px at 385, 88px from 767 */
  .ev-row{grid-template-columns:var(--av) minmax(0,1fr);column-gap:var(--sp-4);
    grid-template-areas:"when when" "pic what" "pic who" "pic where"}
  .ev-pic{aspect-ratio:1;border-radius:50%;margin-top:var(--sp-4);align-self:start}
}

/* ---------------------------------------------------------------- < 576px: the pager in two lines
   The pages, then previous / next at the two ends: the whole row (≈ 470px) does not fit in 345. */
@media (max-width:35.99em){
  .ev-pages{flex-wrap:wrap;row-gap:var(--sp-6)}
  .ev-step{flex:1 0 100%;justify-content:space-between}
}