/* Festival pages (generated by tools/build_festivals.mjs). Shared by every page in festivals/<slug>/. */
:root { --board: #145c41; --tape: rgba(241, 238, 229, .72);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.fest-page { background: var(--paper); }
.tape { position: absolute; z-index: 2; height: 30px; background: var(--tape); box-shadow: 0 1px 2px rgba(0,0,0,.1);
  clip-path: polygon(0 10%, 3% 0, 7% 9%, 11% 0, 100% 0, 97% 14%, 100% 30%, 97% 48%, 100% 66%, 97% 84%, 100% 100%, 0 100%, 3% 80%, 0 60%, 3% 40%, 0 22%); }
.print { position: relative; margin: 0; padding: 10px 10px 0; background: #fbf9f3; box-shadow: 0 2px 2px rgba(0,0,0,.1), 0 26px 40px -24px rgba(0,0,0,.55); transform: rotate(var(--r, 0deg)); }
.print img { display: block; width: 100%; height: auto; }
.print figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 2px 11px; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: .9rem; line-height: 1.25; }
.print figcaption small { flex: 0 0 auto; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: .62rem; color: rgba(17,17,15,.55); }
.print figcaption small a { border-bottom: 1px solid; }

/* ---------- Hero ---------- */
.fhero { position: relative; overflow: hidden; overflow: clip; padding: 108px clamp(16px, 4vw, 56px) 70px; background: var(--board) var(--grain); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 64px); align-items: center; max-width: 1320px; margin: 0 auto; }
.fhero .print { --r: -4deg; }
.fhero .print .tape { width: 34%; right: -4%; top: -14px; transform: rotate(10deg); }
.paper { position: relative; padding: clamp(24px, 3.4vw, 48px); background: var(--paper) var(--grain); box-shadow: 0 26px 40px -24px rgba(0,0,0,.5); }
.crumbs { margin: 0 0 18px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(17,17,15,.6); }
.crumbs a { border-bottom: 1px solid; }
.paper h1 { margin: 0; font-size: clamp(4rem, 9vw, 9rem); font-weight: 900; line-height: .78; letter-spacing: -.08em; }
.subtitle { margin: 14px 0 0; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.2; color: var(--red); }
.answer { margin: 22px 0 0; padding-top: 18px; border-top: 2px solid var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 1.08rem; line-height: 1.55; }
.sticky { position: absolute; z-index: 3; right: -34px; bottom: -96px; width: 190px; padding: 18px 16px 20px; background: var(--yellow); transform: rotate(4deg); box-shadow: 0 18px 26px -16px rgba(0,0,0,.5); }
.sticky b { display: block; margin-bottom: 6px; font-size: 1.05rem; font-weight: 900; letter-spacing: -.03em; }
.sticky span { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: .92rem; line-height: 1.3; }

/* ---------- Quick facts ---------- */
.facts { max-width: 1320px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 56px) 0; }
.facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; border-top: 2px solid var(--ink); }
.facts div { padding: 16px 18px 18px 0; border-bottom: 1px solid var(--line); }
.facts dt { margin-bottom: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(17,17,15,.55); }
.facts dd { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.facts dd a { border-bottom: 1px solid; }

/* ---------- Article ---------- */
.article { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); max-width: 1320px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 56px) 40px; }
.article section { padding-top: 34px; }
.article h2 { margin: 0 0 14px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 900; line-height: .9; letter-spacing: -.06em; }
.article p, .article li { font-family: Georgia, 'Times New Roman', serif; font-size: 1.06rem; line-height: 1.6; }
.article p { margin: 0 0 14px; }
sup a { font-family: Arial, Helvetica, sans-serif; font-size: .64rem; font-weight: 800; color: var(--green); padding: 0 1px; }
.dates { width: 100%; margin: 6px 0 16px; border-collapse: collapse; font-size: .92rem; }
.dates th, .dates td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dates th { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(17,17,15,.55); }
.note { padding: 14px 16px; background: #fff; border-left: 4px solid var(--yellow); font-family: Georgia, 'Times New Roman', serif; font-size: .98rem; line-height: 1.5; }
/* Order of days */
.days { margin: 8px 0 0; padding: 0; list-style: none; }
.days li { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding: 0 0 22px; }
.days li::before { content: ''; position: absolute; left: 112px; top: 6px; bottom: -6px; width: 2px; margin-left: -10px; background: rgba(17,17,15,.15); }
.days li:last-child::before { display: none; }
.days b { font-family: Arial, Helvetica, sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding-top: 4px; }
.days div { position: relative; }
.days div::before { content: ''; position: absolute; left: -24px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.days h3 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.days p { margin: 0; font-size: 1rem; }
.tips { margin: 0 0 14px; padding: 0; list-style: none; }
.tips li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--red), var(--red)) 4px 20px / 12px 2px no-repeat; }
.faq h3 { margin: 22px 0 6px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.sources ol { margin: 0; padding-left: 20px; }
.sources li { font-family: Arial, Helvetica, sans-serif; font-size: .8rem; line-height: 1.5; margin-bottom: 6px; }
.sources a { border-bottom: 1px solid; }
.updated { font-family: Arial, Helvetica, sans-serif !important; font-size: .74rem !important; color: rgba(17,17,15,.6); }

/* Side column: taped photos and a cut-out, beside the text they belong to */
.aside { display: flex; flex-direction: column; gap: 70px; padding-top: 70px; }
.aside .print:nth-child(1) { --r: 3deg; }
.aside .print:nth-child(2) { --r: -3deg; width: 80%; margin-left: auto; }
.aside .print:nth-child(3) { --r: 2deg; width: 70%; }
.aside .print:nth-child(4) { --r: -2deg; }
.aside .tape { width: 90px; left: 50%; margin-left: -45px; top: -14px; transform: rotate(-4deg); }
.cutout { width: 150px; margin: -30px 0 0 40px; transform: rotate(-8deg); filter: drop-shadow(0 14px 12px rgba(0,0,0,.3)); }
.cutout svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- More festivals ---------- */
.more { background: var(--yellow); padding: 56px clamp(16px, 4vw, 56px) 80px; }
.more-in { max-width: 1320px; margin: 0 auto; }
.more h2 { margin: 0 0 20px; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 900; line-height: .9; letter-spacing: -.06em; }
.more ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.more li a { display: block; height: 100%; padding: 16px 16px 18px; background: #fff; border-top: 5px solid var(--kc, var(--red)); }
.more li span { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(17,17,15,.55); }
.more li b { display: block; margin: 6px 0 4px; font-size: 1.2rem; letter-spacing: -.03em; }
.more li i { font-family: Georgia, 'Times New Roman', serif; font-size: .9rem; color: rgba(17,17,15,.75); }
.back { font-size: .78rem; font-weight: 800; border-bottom: 1.5px solid; }

@media (max-width: 900px) {
  .fhero { padding-top: 96px; padding-bottom: 54px; }
  .hero-grid { grid-template-columns: 1fr; }
  .fhero .print { order: -1; width: 92%; margin: 0 auto; }
  .sticky { position: relative; right: auto; bottom: auto; margin: 22px 0 -10px auto; }
  .article { grid-template-columns: 1fr; }
  .aside { order: -1; flex-direction: row; align-items: flex-start; overflow-x: auto; gap: 26px; padding: 26px 4px 20px; scroll-snap-type: x mandatory; }
  .aside .print { flex: 0 0 72%; width: auto !important; margin: 0 !important; scroll-snap-align: center; }
  .cutout { display: none; }
  .days li { grid-template-columns: 1fr; gap: 4px; padding-left: 22px; }
  .days li::before { left: 4px; margin: 0; }
  .days div::before { left: -22px; top: -16px; }
}
  

/* Pages without a hero photo, or without photos beside the text */
.hero-grid.no-photo { grid-template-columns: minmax(0, 860px); justify-content: center; }
.article.no-aside { grid-template-columns: minmax(0, 720px); justify-content: center; }