/* the poster's type and colours, see lib/programm.typ */

/* latin incl. the extended blocks names and IAST need (ş ğ ā ṃ …) */
@font-face { font-family: "Source Sans 3"; font-weight: 300; font-display: swap; src: url("fonts/SourceSans3-Light-latin.woff2") format("woff2"); unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2192; }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("fonts/SourceSans3-Regular-latin.woff2") format("woff2"); unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2192; }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url("fonts/SourceSans3-Bold-latin.woff2") format("woff2"); unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2192; }
@font-face { font-family: "Source Sans 3"; font-weight: 900; font-display: swap; src: url("fonts/SourceSans3-Black-latin.woff2") format("woff2"); unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2192; }
/* polytonic greek and cyrillic, fetched only by a page that uses them */
@font-face { font-family: "Source Sans 3"; font-weight: 300; font-display: swap; src: url("fonts/SourceSans3-Light-greek.woff2") format("woff2"); unicode-range: U+0370-03FF, U+0400-04FF, U+1F00-1FFF; }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("fonts/SourceSans3-Regular-greek.woff2") format("woff2"); unicode-range: U+0370-03FF, U+0400-04FF, U+1F00-1FFF; }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url("fonts/SourceSans3-Bold-greek.woff2") format("woff2"); unicode-range: U+0370-03FF, U+0400-04FF, U+1F00-1FFF; }
@font-face { font-family: "Source Sans 3"; font-weight: 900; font-display: swap; src: url("fonts/SourceSans3-Black-greek.woff2") format("woff2"); unicode-range: U+0370-03FF, U+0400-04FF, U+1F00-1FFF; }

/* defaults; a page overrides --bar and --accent from its front matter */
:root {
  --bar: #6987ba;
  --accent: #f29100;
  --ink: #262e33;
  --paper: #fff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e4e7ea; --paper: #1d2327; }
}

* { box-sizing: border-box; }

html {
  font-family: "Source Sans 3", sans-serif;
  font-size: 112.5%;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

body {
  /* here, not on :root: body carries the page's own --bar */
  --bar-text: var(--bar);
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--bar-text); }

/* figures sit directly on the bar, as on the poster */
.head { display: block; text-decoration: none; }
.head img { display: block; width: 100%; height: auto; }

/* dark: figures and logos are dark lines on nothing, so they sit on light
   cards; text in the bar colour is lightened, halloween red is too dark */
@media (prefers-color-scheme: dark) {
  body { --bar-text: color-mix(in oklab, var(--bar), white 40%); }
  .head { overflow: hidden; padding-top: 0.75rem; border-radius: 0.75rem; background: #fff; }
  footer .logos { padding: 0.4rem 0.6rem; border-radius: 0.4rem; background: #fff; }
}

.bar {
  margin: 0;
  padding: 0.6em 0.5em;
  background: var(--bar);
  color: #fff;
  font-size: clamp(1.25rem, 4.5vw, 2.1rem);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}
.head:hover .bar { color: #fff; }

main { margin-top: 2rem; }

h1 { color: var(--accent); font-weight: 900; line-height: 1.15; }

/* the shuffled alliterations, see play.js */
.alliterations { font-weight: 700; transition: opacity 0.6s; }
.alliterations.fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .alliterations { transition: none; } }
h2 { margin-top: 2.5rem; font-weight: 900; line-height: 1.2; }
.meta { font-weight: 300; }

/* an evening's head, laid out like the save-the-date tile (lib/kachel.typ):
   the announcement on the index and every evening in the archive */
.kicker { margin: 0; color: var(--accent); font-size: 0.9rem; font-weight: 900; letter-spacing: 0.15em; line-height: 1.3; text-transform: uppercase; }
.kicker a { text-decoration: none; }
.event { margin-bottom: 2rem; }
.event .date { margin: 0.1rem 0 0.3rem; color: var(--bar-text); font-size: clamp(2.2rem, 9vw, 3.6rem); font-weight: 900; line-height: 1.05; }
.event .where { margin: 0; color: var(--accent); font-weight: 900; line-height: 1.3; }
.next { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--bar); }
.cfp { margin-top: 1.5rem; }
.cfp h3 { margin: 0 0 0.3rem; color: var(--accent); font-size: 1.4rem; font-weight: 900; }
.cfp p { margin: 0.3rem 0; }
.cfp .pitch { font-weight: 700; }
.cfp strong { color: var(--bar-text); font-weight: 900; }

/* a plain markdown list is a link list */
main > ul:not([class]) { padding: 0; list-style: none; }
main > ul:not([class]) > li { margin: 0.4rem 0; font-weight: 700; }
main > ul:not([class]) > li::before { content: "→"; margin-right: 0.5em; color: var(--accent); font-weight: 900; }

/* an act, see the act component: bold title, light names, then its languages
   in the tile's small tracked capitals */
.title { display: block; font-weight: 700; }
.people { display: block; font-weight: 300; }
.languages { display: block; margin-top: 0.25rem; color: var(--accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; }
.languages a { text-decoration: none; }
.stage { font-size: 0.9rem; }

/* running order: big accent numbers beside the act */
ol.acts { padding: 0; list-style: none; counter-reset: act; }
ol.acts > li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  column-gap: 0.5rem;
  margin: 0 0 1.1rem;
  line-height: 1.3;
  counter-increment: act;
}
ol.acts > li > * { grid-column: 2; }
ol.acts > li::before {
  content: counter(act);
  grid-row: span 3;
  color: var(--accent);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 0.9;
  text-align: right;
}

/* the interval: unnumbered, between two rules */
ol.acts > li.pause {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--accent);
  font-weight: 700;
  counter-increment: none;
}
ol.acts > li.pause::before,
ol.acts > li.pause::after { content: ""; flex: 1; border-top: 2px solid var(--bar); }

/* the acts of one language or person, each with its evening */
ul.entries { padding: 0; list-style: none; }
ul.entries > li { margin: 0 0 1.25rem; line-height: 1.3; }
.evening { display: block; margin-top: 0.3rem; color: var(--bar-text); font-size: 0.9rem; font-weight: 700; }

/* the archive: number and date large, as on the posters */
ol.evenings { padding: 0; list-style: none; }
ol.evenings > li { margin: 0 0 1.75rem; }
ol.evenings .date { display: flex; align-items: baseline; gap: 0.6rem; color: var(--bar-text); font-size: 1.6rem; font-weight: 900; line-height: 1.1; text-decoration: none; }
ol.evenings .number { min-width: 2.4rem; color: var(--accent); font-size: 2.4rem; text-align: right; }
ol.evenings .meta, ol.evenings .languages { margin-left: 3rem; }
ol.evenings .meta { display: block; }

/* index of languages or people, a–z in columns */
ul.register { columns: 13rem; column-gap: 2rem; padding: 0; list-style: none; }
ul.register > li { margin: 0 0 0.3rem; font-weight: 700; break-inside: avoid; }

.back { margin-top: 2.5rem; font-weight: 700; }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid var(--bar);
  font-weight: 300;
}
/* width-capped: the logo strip is 7:1 and would overflow a phone at a fixed height */
footer .logos { width: min(100%, 20rem); height: auto; }
footer p { margin: 0; }
.credit { font-size: 0.8rem; }