/* urbanfestival.co civic frame — unique to this domain */
:root {
  --ink: #111111;
  --night: #0c0c0c;
  --paper: #f6f1de;
  --yell: #fee43d;
  --cyan: #33b7eb;
  --slate: #243038;
  --mute: #5a5648;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ufest-frame {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #0a5f7a; }
a:hover { color: #083e50; }
.skip-civic {
  position: absolute; left: -999px; top: 0;
}
.skip-civic:focus { left: 12px; top: 12px; background: var(--yell); padding: 8px 12px; z-index: 20; }
.mast-rail {
  background: var(--night);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 4px solid var(--yell);
}
.mast-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.word-mark img { height: 52px; width: auto; }
.fold-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  flex: 1;
}
.fold-row a {
  color: var(--paper);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.fold-row a:hover,
.fold-row a.is-here { color: var(--yell); }
.folder-civic { position: relative; }
.folder-civic > button {
  background: none;
  border: 0;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.folder-civic > button:hover { color: var(--yell); }
.folder-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #161616;
  border: 1px solid #333;
  padding: 10px 0;
  z-index: 50;
}
.folder-civic:hover .folder-panel,
.folder-civic.is-open .folder-panel { display: block; }
.folder-panel a {
  display: block;
  padding: 8px 14px;
  color: var(--paper);
}
.cta-post {
  background: var(--yell);
  color: var(--ink) !important;
  padding: 7px 12px;
  font-weight: 700;
  text-decoration: none;
}
.burger-civic {
  display: none;
  background: var(--yell);
  color: var(--ink);
  border: 0;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
.hero-fabric {
  position: relative;
  min-height: 320px;
  background: var(--slate) center/cover no-repeat;
  color: var(--paper);
}
.hero-fabric::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12,12,12,0.82) 0%, rgba(12,12,12,0.35) 70%);
}
.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 20px 48px;
}
.hero-copy h1 {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--yell);
  letter-spacing: -0.02em;
}
.hero-copy .kicker { color: var(--cyan); font-weight: 700; margin: 0 0 6px; }
.hero-copy .when-line { margin: 0 0 16px; font-size: 1.1rem; }
.sheet {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 20px;
}
.band-yell { background: var(--yell); }
.band-cyan { background: var(--cyan); color: var(--ink); }
.band-night { background: var(--night); color: var(--paper); }
.band-night a { color: var(--yell); }
.prose p { margin: 0 0 1em; max-width: 70ch; }
.ward-vault {
  margin: 0 0 1.1em;
  padding: 0.9rem 1rem 0.15rem;
  background: #fff8d6;
  border-top: 4px solid var(--cyan);
  max-width: 70ch;
}
.ward-vault p { margin: 0 0 0.9em; }
.prose h2, .prose h3 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}
.two-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.media-frame {
  background: #000;
  aspect-ratio: 16/9;
}
.media-frame iframe { width: 100%; height: 100%; border: 0; }
.event-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.event-tile {
  background: #fff;
  border: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.event-tile img { width: 100%; height: 180px; object-fit: cover; }
.event-tile .tile-body { padding: 14px 16px 18px; }
.event-tile h3 { margin: 6px 0 8px; font-size: 1.15rem; }
.event-tile h3 a { color: var(--ink); text-decoration: none; }
.event-tile h3 a:hover { color: #0a5f7a; }
.date-chip {
  display: inline-block;
  background: var(--ink);
  color: var(--yell);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  font-weight: 700;
}
.more-civic {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.gallery-lane {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.gallery-card {
  background: #fff;
  border-top: 6px solid var(--cyan);
  padding: 0 0 16px;
  box-shadow: 6px 6px 0 var(--ink);
}
.gallery-card img { height: 160px; width: 100%; object-fit: cover; }
.gallery-card h3 { margin: 12px 16px 6px; }
.gallery-card p { margin: 0 16px 12px; }
.gallery-card a { margin: 0 16px; font-weight: 700; }
.partner-list { columns: 2; max-width: 52rem; }
.foot-civic {
  background: var(--night);
  color: var(--paper);
  padding: 28px 20px 36px;
}
.foot-wrap {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.icon-row { display: flex; gap: 14px; align-items: center; }
.icon-row a {
  width: 36px; height: 36px;
  border: 2px solid var(--yell);
  color: var(--yell);
  display: grid; place-items: center;
  text-decoration: none;
  font-weight: 800;
}
.icon-row a:hover { background: var(--yell); color: var(--ink); }
.faq-list details { border-bottom: 1px solid #d8d2bc; padding: 10px 0; }
.faq-list summary { cursor: pointer; font-weight: 700; }
.page-lead {
  background: var(--ink);
  color: var(--yell);
  padding: 28px 20px;
}
.page-lead h1 { margin: 0; font-family: Georgia, serif; }
.page-lead p { color: var(--paper); margin: 8px 0 0; max-width: 60ch; }
.entry-meta { color: var(--mute); font-size: 0.92rem; }
@media (max-width: 860px) {
  .burger-civic { display: block; margin-left: auto; }
  .fold-row {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #161616;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 20px;
  }
  .mast-rail.is-open .fold-row { display: flex; }
  .folder-panel { position: static; border: 0; }
  .two-split, .event-board, .gallery-lane, .partner-list { grid-template-columns: 1fr; columns: 1; }
}