/* Layout and interaction sizes. Base: 320px and up. */
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 6%; font-size:13px; border-bottom:1px solid #ccc; }
.breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; }
.page-next { padding:40px 6%; border-top:1px solid #ccc; }
.page-next p { font-size:18px; }
.header a[aria-current="page"] { text-decoration:underline; text-underline-offset:7px; }
.header .about-link { display:inline-flex; align-items:center; min-height:44px; margin-left:auto; padding:8px; font-size:13px; }
.footer-contact { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid #444; }
.footer-contact p { margin:0; font-size:20px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
body { font-size: 16px; }
img { max-width: 100%; }
main, section, article, .hero-copy, .form-card { min-width: 0; }
h1, h2, h3, p, a { overflow-wrap: break-word; }
h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
h2 { font-size: clamp(2rem, 8vw, 3rem); }
.section-pad { padding: 52px 6%; }
.header { flex-wrap: wrap; gap: 12px; padding: 10px 6%; }
.header .brand-logo { width: 48px; height: 48px; }
.header nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%; max-width: none; flex: auto; gap: 4px; }
.header nav > a { flex: 1 1 0; justify-content: center; text-align: center; }
.header nav > a:not(.nav-cta), .header .nav-cta { display: flex; align-items: center; min-height: 44px; padding: 8px 4px; font-size: 12px; }
.header nav > a:hover { background: #222; }
.header .nav-cta { margin-top: 0; justify-content: center; }
.hero { padding-inline: 6%; }
.hero-top { flex-wrap: wrap; gap: 8px; }
.hero-copy h1, .form-intro h1, .message-page h1, .prose h1, .admin-page h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
.hero-copy p, .brand-hero .hero-copy > p:not(.brand-lead), .intro-columns p, .schedule p, .ecosystem-row p, .support-grid p, .connect-columns p, .platform p { font-size: 15px; line-height: 1.75; }
.brand-hero .hero-grid { padding-block: 32px; }
.button { min-height: 48px; max-width: 100%; gap: 20px; }
.hero-copy .button, .form-card .button { width: 100%; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.black-canvas { min-height: 260px; padding: 20px; }
.hero-grid > .black-canvas { order: -1; }
.brand-baseline { gap: 16px; flex-wrap: wrap; }
.brand-baseline a { min-height: 44px; display: flex; align-items: center; font-size: 12px; }
.event-strip { grid-template-columns: 1fr 1fr; gap: 20px; }
.event-strip > a { display: flex; min-height: 44px; justify-self: start; align-items: center; }
.event-strip strong { font-size: 17px; }
.intro h2, .access h2, .festival-feature h2 { font-size: clamp(2rem, 8.5vw, 3rem); }
.festival-date { min-height: 240px; padding: 24px; }
.festival-date strong { font-size: 80px; gap: 16px; }
.festival-date strong span { font-size: 48px; }
.support-grid article { padding: 24px 0; }
.support-grid h3 { margin-top: 24px; }
.ecosystem-row { grid-template-columns: 20px minmax(0, 1fr); }
.ecosystem-row a { justify-self: start; }
.closing h2 { font-size: clamp(2.8rem, 12vw, 5rem); }
.form-card input:not([type=checkbox]):not([type=hidden]), .form-card select { font-size: 16px; min-height: 48px; }
.form-card label:not(.checkbox) { font-size: 14px; }
.form-card small, .dev-notice, .form-errors { font-size: 13px; }
.checkbox { min-height: 44px; font-size: 14px; line-height: 1.65; }
.checkbox input { width: 22px; height: 22px; }
.rule p, details p, .venue p { font-size: 14px; }
summary { min-height: 44px; align-items: center; font-size: 16px; }
.footer-top > a:last-child, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
.footer-bottom { font-size: 11px; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.table-wrap { max-width: 100%; }

/* Tablet: add columns only where the content has room. */
@media (min-width: 640px) {
  .section-pad { padding: 64px 6%; }
  .hero-copy .button { width: auto; }
  .hero-copy h1 { font-size: clamp(3.5rem, 7vw, 5.7rem); }
  .hero-grid { padding-block: 40px; }
  .black-canvas { min-height: 340px; }
  .canvas-logo { max-width: 260px; }
  .event-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .intro-columns, .connect-columns, .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .support-grid { gap: 0; }
  .support-grid article { padding: 28px 24px; }
  .support-grid article:nth-child(odd) { border-left: 0; padding-left: 0; }
  .support-grid article:nth-child(even) { border-left: 1px solid #444; padding-left: 24px; }
  .support-grid article:nth-child(2) { border-top: 0; }
  .form-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-card { padding: 32px; }
  .schedule article { grid-template-columns: 40px 1fr 110px; gap: 24px; }
  .schedule .tag { grid-column: auto; justify-self: end; }
  .footer-top p { width: auto; order: initial; }
  .brand-baseline { align-items: center; }
}

/* Desktop: full navigation and editorial columns. */
@media (min-width: 1024px) {
  .header { flex-wrap: nowrap; padding-inline: max(5%, calc((100vw - 1380px)/2)); }
  .header .brand-logo { width: 64px; height: 64px; }
  .header nav { display: flex; width: auto; flex: 0 1 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 16px; }
  .header nav > a { flex: 0 0 auto; }
  .header nav > a:not(.nav-cta), .header .nav-cta { font-size: 12px; padding: 10px 8px; }
  .header .nav-cta { margin: 0; padding-inline: 16px; }
  .hero, footer { padding-inline: max(5%, calc((100vw - 1380px)/2)); }
  .section-pad { padding: 86px max(7%, calc((100vw - 1280px)/2)); }
  .hero-grid { grid-template-columns: 1.25fr 1fr; gap: 5%; }
  .hero-grid > .black-canvas { order: 0; }
  .brand-hero .hero-grid { padding-block: 55px; }
  .black-canvas { min-height: 420px; }
  .intro { grid-template-columns: 1fr 3fr; gap: 6%; }
  .section-label { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .empty-frame { width: 65px; height: 44px; }
  .section-heading { display: flex; }
  h2, .intro h2, .access h2 { font-size: clamp(2.5rem, 4.2vw, 4rem); }
  .access, .venue, .faq { grid-template-columns: 1fr 1fr; gap: 10%; }
  .ecosystem-row { grid-template-columns: 30px 1fr 1.2fr 155px; gap: 24px; }
  .ecosystem-row p, .ecosystem-row a { grid-column: auto; }
  .ecosystem-row a { justify-self: end; }
  .festival-feature { grid-template-columns: 1fr 1.35fr; gap: 10%; }
  .platform { grid-template-columns: 1.1fr 1fr; gap: 10%; }
  .festival-date { padding: 35px; }
  .festival-date strong { display: block; font-size: 150px; }
  .festival-date strong span { font-size: 72px; }
  .festival-year { font-size: 40px; }
  .festival-feature h2 { font-size: clamp(2.5rem, 4vw, 3.6rem); }
  .support-bottom, .admin-actions { flex-direction: row; align-items: center; }
  .form-page { grid-template-columns: 1fr 1.1fr; gap: 8%; }
  .form-intro h1 { font-size: clamp(3rem, 5vw, 4.5rem); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: row; align-items: center; }
}

@media (min-width: 1280px) {
  .support-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .support-grid article + article { border-top: 0; border-left: 1px solid #444; padding-left: 24px; }
}