/* A4 program: poster cover, then one section per day. */
:root {
  --blue: #137fa8; --blue-d: #0f6686; --orange: #f15a2f; --yellow: #f9ed53; --ink: #0e1013; --mute: #b9c6cf;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo Black", "Archivo", sans-serif;
  --ar: "Lalezar", "Noto Sans Arabic", "Geeza Pro", sans-serif;
}
@page { size: A4; margin: 12mm; }
@page cover { margin: 0; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--blue); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { margin: 0; background: var(--blue); color: var(--ink); font: 400 10pt/1.4 var(--font); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
a { color: inherit; }
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }

/* screen only toolbar */
.pbar { position: sticky; top: 0; z-index: 10; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--ink); color: #fff; font-size: 14px; }
.pbar a { color: var(--yellow); font-weight: 700; }
.pbar p { margin: 0; flex: 1 1 260px; color: var(--mute); }
.pbar button { padding: 10px 20px; border: 3px solid var(--ink); border-radius: 99px; background: var(--yellow); color: var(--ink); font: 800 15px var(--font); cursor: pointer; }
.loading { padding: 60px 20px; text-align: center; font-weight: 700; }
.doc { max-width: 210mm; margin: 0 auto; }
@media print { .no-print { display: none !important; } }

/* cover */
.cover {
  page: cover; display: flex; flex-direction: column; height: 297mm; overflow: hidden; break-after: page;
  background: var(--ink);
}
.cover-top {
  flex: 1 1 60%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16mm 14mm;
  background: var(--blue) url(/img/leaves.svg) center / cover no-repeat; border-bottom: 3mm solid var(--ink);
}
.custom-colors .cover-top:not(.art) { background-image: none; }
.cover-top.art { background-size: cover; background-repeat: no-repeat; }
.logo { margin: 0; font-weight: 400; line-height: 0.95; transform: rotate(-4deg); }
.logo span { display: block; }
.logo-ar { font-family: var(--ar); font-size: 88pt; color: var(--yellow); paint-order: stroke fill; -webkit-text-stroke: 10pt var(--orange); text-shadow: 4pt 5pt 0 var(--ink); }
.logo-en { font-family: var(--display); font-size: 60pt; color: var(--ink); paint-order: stroke fill; -webkit-text-stroke: 10pt var(--orange); transform: skewX(-8deg); margin-top: -0.05em; }
.logo-img { max-width: 150mm; height: auto; }
.dates { margin: 12mm 0 0; padding: 2.5mm 7mm; border-radius: 99px; background: var(--ink); color: var(--yellow); font: 800 17pt var(--font); }
.tagline { margin: 5mm 0 0; font: 700 13pt var(--font); }
.cover-bot {
  flex: 0 0 auto; padding: 10mm 14mm 12mm; color: #fff; text-align: center;
  background: var(--ink) var(--pattern, url(/img/pattern.svg)) center / 30mm auto;
}
.cover-bot > * { position: relative; }
.progtitle { display: inline-block; margin: 0 0 5mm; padding: 1.5mm 8mm; background: var(--orange); color: var(--ink); border: 1.2mm solid var(--ink); border-radius: 99px; font: 400 20pt var(--display); text-transform: uppercase; }
.legend, .index { list-style: none; margin: 0 0 5mm; padding: 0; display: flex; flex-wrap: wrap; gap: 2.5mm; justify-content: center; }
.legend li { display: inline-flex; gap: 2mm; align-items: center; padding: 1.5mm 4mm; border-radius: 99px; background: var(--ink); color: var(--yellow); font-weight: 700; font-size: 9.5pt; }
.index li { padding: 1.5mm 3.5mm; border-radius: 3mm; background: var(--ink); color: #fff; font-size: 9pt; line-height: 1.2; text-align: center; }
.index b { display: block; color: var(--yellow); }
.index span { color: var(--mute); }
.tix { margin: 0; display: inline-block; padding: 2mm 6mm; background: var(--yellow); color: var(--ink); border-radius: 99px; font: 800 11pt var(--font); }

/* days */
.pbody { padding: 12mm; }
@media print { .pbody { padding: 0; } }
.pday { margin: 0 0 6mm; }
.pday { break-inside: auto; }
.pday h2 { display: flex; justify-content: space-between; align-items: center; gap: 4mm; break-after: avoid; margin: 0 0 4mm; padding: 3mm 5mm; background: var(--ink); color: var(--yellow); border-radius: 3mm; font: 800 15pt var(--font); text-transform: uppercase; letter-spacing: 0.03em; }
.pev {
  display: grid; grid-template-columns: 24mm 1fr auto; gap: 4mm; align-items: start; break-inside: avoid;
  margin: 0 0 3.5mm; padding: 4mm; background: var(--ink); color: #fff; border-radius: 4mm;
}
.pt b { display: block; font: 400 14pt/1 var(--display); color: var(--yellow); }
.pt b.tba { font-size: 9pt; color: var(--orange); padding-top: 1mm; }
.pt span { display: block; margin-top: 1mm; font-size: 8.5pt; color: var(--mute); }
.tags { margin: 0 0 1.5mm; }
.tag { display: inline-flex; align-items: center; gap: 1.5mm; margin-right: 2mm; padding: 0.6mm 2.6mm 0.6mm 2mm; border-radius: 99px; background: var(--orange); color: var(--ink); font-size: 8pt; font-weight: 800; }
.tag.tbc { background: var(--yellow); }
.pb h3 { margin: 0 0 1mm; font: 700 12.5pt/1.2 var(--font); overflow-wrap: anywhere; }
.venue { margin: 0 0 2mm; display: flex; align-items: center; gap: 1.5mm; color: var(--mute); font-size: 9pt; }
.pd { font-size: 8.8pt; line-height: 1.42; color: #e8eef2; }
.pd a { color: var(--yellow); }
.pimg { width: 26mm; height: 26mm; object-fit: cover; border-radius: 3mm; border: 0.6mm solid var(--blue); }
.pfoot { margin-top: 8mm; padding: 6mm; background: var(--ink); color: #fff; border-radius: 4mm; text-align: center; break-inside: avoid; }
.pfoot p { margin: 0 0 2mm; }
.pfoot .big { color: var(--yellow); font: 400 14pt var(--display); }
.pfoot .small { font-size: 8pt; color: var(--mute); }

@media screen {
  body { background: #223; }
  .cover { margin: 8mm auto; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4); }
  .pbody { background: var(--blue); margin: 0 auto 10mm; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4); }
}

.pday h2 a { font: 700 8pt var(--font); text-transform: none; letter-spacing: 0; color: var(--mute); text-decoration: none; }
.plinks { display: flex; flex-wrap: wrap; gap: 2mm; margin: 3mm 0 0; }
.plinks a { display: inline-flex; align-items: center; gap: 1.5mm; padding: 1mm 3.2mm; border-radius: 99px; background: var(--yellow); color: var(--ink); font: 800 8pt var(--font); text-decoration: none; }
.plinks a:nth-child(2) { background: transparent; color: var(--yellow); border: 0.3mm solid var(--yellow); }
.plinks a:nth-child(3) { background: var(--orange); }
.index a { color: inherit; text-decoration: none; display: block; }
a.tix { text-decoration: none; }
.tagline.light { color: #fff; }
.pfoot a { color: var(--yellow); }
.dates { display: inline-block; }
.cover-bot .dates { margin: 0 0 3mm; }
.cover-bot .tagline { margin: 0 0 7mm; }

/* a design that already carries the logo is shown whole, never cropped */
.cover-top.bare { flex: 0 0 auto; padding: 0; background: var(--blue); }
.cover-img { display: block; width: 100%; height: auto; }
.cover-top.bare + .cover-bot { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ---------- stage timetable page ---------- */
.pday.has-tt { break-before: page; }
.tt-title { margin: 0 0 3mm; font: 400 13pt var(--display); text-transform: uppercase; }
.pday .tt { margin: 0 0 6mm; break-inside: avoid; }
.tt-scroll { overflow: visible; }
.tt-grid { display: grid; grid-template-columns: 11mm repeat(var(--cols), 1fr); gap: 1.6mm; }
.tt-head { display: flex; align-items: center; justify-content: center; margin-bottom: 1.6mm; padding: 1.6mm; border-radius: 2mm; background: var(--ink); color: var(--yellow); font: 800 8.5pt var(--font); text-align: center; }
.tt-times .tt-head { background: transparent; }
.tt-body { position: relative; border-radius: 2mm; background: var(--ink) linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0.2mm, transparent 0.2mm) 0 0 / 100% var(--hour); }
.tt-times .tt-body { background: transparent; }
.tt-times i { position: absolute; right: 0.5mm; padding-top: 0.4mm; font: 700 6.5pt/1 var(--font); font-style: normal; color: var(--ink); }
.tt-block { position: absolute; left: calc(var(--lane, 0) * 100% / var(--lanes, 1) + 0.8mm); width: calc(100% / var(--lanes, 1) - 1.6mm); display: flex; flex-direction: column; overflow: hidden; padding: 1mm 1.6mm; border-radius: 1.6mm; background: var(--orange); color: var(--ink); text-decoration: none; }
.tt-block b { font: 800 7.5pt/1.15 var(--font); }
.tt-block span { font: 600 6.5pt/1.1 var(--font); }
.tt-block.short { flex-direction: row; align-items: center; gap: 1.5mm; padding: 0.3mm 1.6mm; }
.tt-block.short span { display: none; }
.tt-block.tbc { background: var(--yellow); }
.tt-later { margin-top: 3mm; padding: 3mm 4mm; border-radius: 3mm; background: var(--ink); color: #fff; font-size: 8.5pt; }
.tt-later ul { margin: 1mm 0 0; padding-left: 4mm; }
.tt-later a { color: var(--yellow); }
.tt-later small { color: var(--mute); }

/* the timetable only document */
.ttdoc .tt { margin: 0 0 4mm; break-inside: avoid; }
.ttd-head { display: flex; align-items: center; gap: 6mm; margin: 0 0 5mm; padding: 3mm; border-radius: 4mm; background: var(--ink); color: #fff; }
.ttd-art { display: block; height: 30mm; width: auto; border-radius: 2mm; }
.ttd-logo { transform: none; margin: 0; }
.ttd-head h2 { margin: 0; font: 400 24pt/1 var(--display); color: var(--yellow); text-transform: uppercase; }
.ttd-day { margin: 1.5mm 0 0; font: 800 13pt var(--font); }
.ttd-venue { display: flex; align-items: center; gap: 1.5mm; margin: 1mm 0 0; color: var(--mute); font-size: 9.5pt; }
.ttd-foot { margin: 0; font-size: 7.5pt; color: var(--ink); font-weight: 700; }
.ttd-foot a { color: var(--ink); }
.ttd-head .logo-ar { font-size: 34pt; -webkit-text-stroke-width: 4pt; text-shadow: 1.5pt 2pt 0 var(--ink); }
.ttd-head .logo-en { font-size: 24pt; -webkit-text-stroke-width: 4pt; }
.ttd-head > div { min-width: 0; }