/* ============================================================
   OFF RECORD — design system
   ============================================================ */
:root {
  --cream:  #F1F1F5;
  --blue:   #013CA6;
  --gold:   #FCC538;
  --maroon: #3E2324;
  --lblue:  #5C82C1;

  --border: rgba(1, 60, 166, .12);
  --px:     clamp(1.5rem, 5vw, 5rem);
  --maxw:   1440px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 18px; scroll-padding-top: 100px; }

body {
  font-family: 'Advent Pro', sans-serif;
  background: var(--cream);
  color: var(--maroon);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

section, footer { position: relative; }

/* ---------- reveal-on-scroll ---------- */
.fu { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.fu.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   NAV
   ============================================================ */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 300;
  height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--px);
  background: rgba(241, 241, 245, .92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
#nav.scrolled { border-color: var(--border); }

.nav-logo img { height: 38px; width: auto; }

.nav-links { display: flex; gap: 2.4rem; list-style: none; }
.nav-links a {
  font-size: calc(.8rem + 2px); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--maroon); opacity: .8; transition: opacity .2s, color .2s;
}
.nav-links a:hover { opacity: 1; color: var(--gold); }

.hbg { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.hbg span { display: block; width: 22px; height: 2px; background: var(--maroon); }

#mob {
  display: none; position: fixed; inset: 0; z-index: 290;
  flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem;
  background: rgba(241, 241, 245, .98);
}
#mob.open { display: flex; }
#mob-x {
  position: absolute; top: 1.4rem; right: var(--px);
  background: none; border: none; font-size: 2rem; line-height: 1; cursor: pointer;
  color: var(--maroon); font-family: 'Advent Pro', sans-serif;
}
#mob a {
  font-size: 1.6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--maroon);
}
#mob a:hover { color: var(--gold); }

/* ============================================================
   HERO + ABOUT
   ============================================================ */
.hero-about {
  display: grid; grid-template-columns: 50fr 50fr;
  padding-top: 76px;
}

.visual {
  position: relative; min-height: 920px;
  /* The blob's canvas is deliberately oversized past the right/top of
     this box (see mountBlob's overscan) and fully transparent there,
     so there's no hard edge for it to hit on those sides at all --
     overflow must stay visible or that extra canvas area gets clipped
     right back off. The left edge is still the true page edge. */
  overflow: visible;
}
.visual canvas { display: block !important; }

.hero-about-text {
  display: flex; flex-direction: column;
  padding: clamp(3rem, 7vw, 6.5rem) var(--px) 1.5rem clamp(1.5rem, 3vw, 3rem);
  max-width: calc(var(--maxw) / 2 + 4rem); box-sizing: border-box;
}

.hero-block {
  display: flex; flex-direction: column; justify-content: center; gap: .9rem;
  min-height: 100vh; box-sizing: border-box; transform: translateY(-250px);
}
.hero-logo-wrap { position: relative; display: inline-block; width: clamp(280px, 30vw, 440px); margin-left: -17px; }
.hero-logo { width: clamp(280px, 30vw, 440px); }

.hero-meta { display: flex; flex-direction: column; gap: 5px; margin-left: 29px; margin-top: -20px; }

.hero-tagline {
  font-size: 20px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lblue);
}

.hero-date, .hero-location {
  font-size: 18px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--maroon); opacity: .85;
}

/* Its own full-width row (not the hero's right-hand grid column) so its
   left edge lines up with Artists/Workshops/Explore below it, instead
   of sitting wherever the hero's 50/50 split happens to put it. */
.about-wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--px) clamp(3rem, 6vw, 4.5rem);
}
.about-block { max-width: 780px; }
.about-block h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 600; color: var(--blue);
  text-transform: uppercase; margin-bottom: 1.1rem; letter-spacing: .02em;
}
.about-block p {
  font-size: 18px; line-height: 1.9; letter-spacing: .03em; text-transform: uppercase;
  color: var(--maroon); margin-bottom: 1.2rem;
}

/* ============================================================
   SECTION HEAD (shared: Artists / Workshops)
   ============================================================ */
.section-head {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--px) clamp(1.8rem, 3vw, 2.5rem);
}
.section-head h2 {
  font-size: 45px; font-weight: 600; color: var(--blue);
  text-transform: uppercase; line-height: 1;
}
.section-head p {
  font-size: 18px; font-weight: 600; color: var(--maroon); margin-top: .6rem; max-width: 38ch;
}
/* Workshops' sentence is longer than Artists' -- give it more room so it
   still wraps to a clean 2 lines instead of 3. */
#workshops .section-head p { max-width: 64ch; }
/* The line break here is a manual <br> in the markup (an exact,
   deliberate break after "and"). Measured against the real rendered
   box at 375px width: "...producers and" is 237px and "performers...
   tomorrow." is 299px, both comfortably under the ~321px box -- so
   this cap just needs to stay out of the way, not do the wrapping. */
#artists .section-head p { max-width: 46ch; }

.fan-mount {
  position: absolute; right: 0; top: 0; height: 100%; width: min(46%, 560px);
  pointer-events: none; z-index: -1;
}
.fan-mount canvas { width: 100% !important; height: 100% !important; }

/* Generative visual sitting in the background of the combined
   Artists+Workshops wrapper -- one big shared visual behind both
   sections, full viewport width (not capped to the content max-width).
   The wrapper establishes the stacking context so this stays behind
   its sibling content instead of escaping to the document root. */
.artists-workshops-wrap { position: relative; z-index: 0; overflow: hidden; }

.under-viz {
  position: absolute; inset: 0; z-index: -1;
  opacity: .55; pointer-events: none;
  /* Soft fade at the top/bottom so the canvas blends into the section
     instead of looking like it's sliced off at a hard edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 22%, black 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 22%, black 88%, transparent);
}
.under-viz canvas { width: 100% !important; height: 100% !important; }

/* ============================================================
   ARTISTS
   ============================================================ */
#artists {
  max-width: var(--maxw); margin: 0 auto; padding: 0 0 clamp(3rem, 6vw, 4.5rem);
}

.carousel {
  position: relative;
  padding: 0 var(--px);
}
.c-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: #fff; color: var(--blue);
  box-shadow: 0 4px 16px rgba(1, 60, 166, .25);
  font-size: 1.5rem; cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
.c-arrow:hover { background: var(--lblue); color: #fff; transform: translateY(-50%) scale(1.08); }
#c-prev { left: calc(var(--px) - 21px); }
#c-next { right: calc(var(--px) - 21px); }

.c-viewport { overflow: hidden; width: 100%; }
.c-track { display: flex; gap: 1.4rem; width: 100%; transition: transform .3s ease; touch-action: pan-y; cursor: grab; }
.c-track:active { cursor: grabbing; }

.artist-card {
  flex: 0 0 calc(33.333% - .934rem);
  min-width: 220px;
  background: #fff; border: 1px solid var(--border);
  padding: 1.6rem 1.3rem; display: flex; flex-direction: column; gap: .7rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.artist-card:hover {
  transform: translateY(-6px); box-shadow: 0 14px 30px rgba(1, 60, 166, .18);
  background: var(--lblue);
}

.artist-card .ic { color: var(--gold); transition: color .25s ease; }

.artist-card h3 {
  font-size: 1rem; font-weight: 600; color: var(--blue); text-transform: uppercase;
  letter-spacing: .03em; padding-bottom: .5rem; border-bottom: 1px solid var(--border);
  transition: color .25s ease, border-color .25s ease;
}
.artist-card:hover h3 { color: #fff; border-color: rgba(255, 255, 255, .35); }

.artist-card p { font-size: 18px; line-height: 1.6; color: var(--maroon); opacity: .9; transition: color .25s ease; }
.artist-card:hover p { color: #fff; opacity: .92; }

.c-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.6rem; }
.c-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; padding: 0; }
.c-dot.on { background: var(--blue); }

/* ============================================================
   WORKSHOPS
   ============================================================ */
#workshops {
  max-width: var(--maxw); margin: 0 auto; padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.workshop-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem;
  padding: 0 var(--px);
}

.workshop-card {
  background: #fff; border: 1px solid var(--border);
  padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: .7rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.workshop-card:hover {
  transform: translateY(-6px); box-shadow: 0 14px 30px rgba(1, 60, 166, .18);
  background: var(--lblue);
}

.wc-top { display: flex; align-items: center; justify-content: space-between; }
.wc-num { font-size: 1rem; font-weight: 600; color: var(--blue); transition: color .25s ease; }
.wc-top .ic { color: var(--gold); transition: color .25s ease; }
.workshop-card:hover .wc-num { color: #fff; }

.workshop-card h3 {
  font-size: 1.05rem; font-weight: 600; color: var(--blue); text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.25; transition: color .25s ease;
}
.workshop-card:hover h3 { color: #fff; }

.workshop-card p { font-size: 18px; line-height: 1.6; color: var(--maroon); opacity: .9; flex: 1; transition: color .25s ease; }
.workshop-card:hover p { color: #fff; opacity: .92; }

.wc-dur { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); opacity: .8; transition: color .25s ease; }
.workshop-card:hover .wc-dur { color: #fff; opacity: .85; }

/* ============================================================
   SCHEDULE
   ============================================================ */
#schedule {
  position: relative; z-index: 0; overflow: hidden;
  padding: clamp(3rem, 6vw, 4.5rem) var(--px);
}
.schedule-content { max-width: var(--maxw); margin: 0 auto; }
#schedule h2 {
  font-size: 45px; font-weight: 600; color: var(--blue);
  text-transform: uppercase; line-height: 1; margin-bottom: clamp(2rem, 4vw, 3rem);
}

.schedule-tabs { display: flex; gap: .6rem; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.s-tab {
  font-family: 'Advent Pro', sans-serif;
  background: transparent; border: 1px solid var(--border); cursor: pointer;
  padding: .65rem 1.4rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--maroon); opacity: .65;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.s-tab:hover { opacity: 1; border-color: var(--lblue); color: var(--lblue); }
.s-tab[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--maroon); opacity: 1; }
.s-tab[aria-selected="true"]:hover { color: var(--maroon); }

.schedule-panels { max-width: 560px; }

.day-col ul { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.day-col li {
  display: flex; gap: .9rem; font-size: 18px; letter-spacing: .03em;
  padding-bottom: .7rem; border-bottom: 1px solid var(--border);
}
.day-col li:last-child { border-bottom: none; }
.day-col time { color: var(--blue); font-weight: 600; flex: none; width: 3.4em; text-transform: uppercase; }
.day-col span { color: var(--maroon); text-transform: uppercase; }

/* ============================================================
   EXPLORE (island map)
   ============================================================ */
#explore {
  max-width: var(--maxw); margin: 0 auto; padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
/* Wider than the shared .section-head p so this longer sentence
   wraps to 2 lines instead of 3, without affecting Artists/Workshops. */
#explore .section-head p { max-width: 52ch; }

/* If the map (fixed width) plus an open card doesn't fit the available
   width, this scrolls sideways instead of the card wrapping below it --
   the card must always sit beside the map, never underneath. */
.map-wrap { position: relative; padding: 0 var(--px); overflow-x: auto; }

.map-legend { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1.2rem; }
.ml-item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--maroon); opacity: .85;
}
.ml-item i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ml-create i  { background: var(--blue); }
.ml-connect i { background: var(--gold); }
.ml-perform i { background: var(--maroon); }

/* Sized to its content (map, or map+card once a pin is picked) and
   centred -- so opening a card doesn't shrink the map, it just shifts
   the whole group left as the card takes its place on the right. Never
   wraps: the card must always sit beside the map, not underneath it
   (.map-wrap scrolls sideways in the rare case it doesn't all fit). */
.map-stage { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: nowrap; width: fit-content; margin: 0 auto; }

.map-viewport {
  /* A plain fixed width, not a percentage -- .map-stage is sized with
     width:fit-content (see above), so a percentage here would depend
     on a width that itself depends on this element's width, and
     collapses to 0. The 860px breakpoint below covers narrow screens,
     where .map-stage gets a real width and this can safely be 100%. */
  position: relative; overflow: hidden;
  flex: 0 0 auto;
  width: 900px;
  height: clamp(420px, 46vw, 640px);
}

.map-canvas { position: absolute; inset: 0; }

.map-mount { position: absolute; inset: 0; opacity: .8; pointer-events: none; }
.map-mount canvas { width: 100% !important; height: 100% !important; }

.map-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Advent Pro', sans-serif; font-size: .88rem; font-weight: 400; color: #fff;
  box-shadow: 0 4px 14px rgba(1, 60, 166, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.map-pin::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0; transition: opacity .2s ease, transform .2s ease;
  transform: scale(.8);
}
.map-pin:hover, .map-pin.active { transform: translate(-50%, -50%) scale(1.12); }
.map-pin:hover::after, .map-pin.active::after { opacity: .5; transform: scale(1); }

.pin-create  { background: var(--blue);   color: var(--blue); }
.pin-connect { background: var(--gold);   color: var(--gold); }
.pin-perform { background: var(--maroon); color: var(--maroon); }
.pin-create span, .pin-connect span, .pin-perform span { color: #fff; }

/* A compact side panel -- photo on top, text below -- rather than a
   full-width block stacked under the map. */
.map-card {
  /* Sized to its own content (image + text), not stretched to match
     the map's height -- the white area should end where the text
     ends, not run on as empty space. */
  display: none; flex-direction: column;
  flex: 0 0 420px; width: 420px;
  align-self: flex-start;
  background: #fff; border: 1px solid var(--border);
  position: relative;
}
.map-card.is-open { display: flex; }
.map-card-close {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: var(--maroon);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; border: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  transition: background .2s ease;
}
.map-card-close:hover { background: #fff; }

.map-card-img { width: 100%; height: 380px; overflow: hidden; flex: none; }
.map-card-img img { width: 100%; height: 100%; object-fit: cover; }

.map-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.3rem 1.3rem; }
.map-card-tag {
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.map-card-body h3 { font-size: 1.3rem; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
.map-card-body p { font-size: 18px; line-height: 1.6; color: var(--maroon); opacity: .9; }

/* ============================================================
   REGISTER BANNER
   ============================================================ */
.register-banner {
  background: var(--blue); color: #fff; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem;
  padding: clamp(3rem, 6vw, 4rem) var(--px);
  /* Establishes its own stacking context so the fan-mount's
     z-index:-1 stays scoped behind THIS section's children
     instead of escaping to the document root (where it would
     paint behind the section's own opaque background). */
  z-index: 0;
}
.register-banner .fan-mount { left: 0; right: 0; top: 0; width: 100%; opacity: .9; }

.register-banner h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; text-transform: uppercase;
  line-height: 1.15; flex: 1 1 280px;
}
.register-banner p { font-size: 18px; line-height: 1.6; flex: 1 1 320px; max-width: 36ch; opacity: .92; }

.register-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--gold); color: var(--maroon);
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 1rem 1.7rem; flex: none; transition: transform .2s ease, background .2s ease;
}
.register-cta:hover { transform: translateY(-2px); background: #ffd564; }
.register-cta span { transition: transform .2s ease; }
.register-cta:hover span { transform: translateX(4px); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--cream); }

.bars-viz {
  position: absolute; right: -170px; top: 50%; transform: translateY(calc(-50% - 20px));
  width: min(85%, 980px); height: min(85%, 560px);
  opacity: .85; pointer-events: none; z-index: -1;
}
.bars-viz canvas { width: 100% !important; height: 100% !important; }

.footer-content { max-width: var(--maxw); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) var(--px) 2.5rem; }

.footer-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--border);
}
.ft-logo { height: 34px; }

.ft-cols { display: flex; gap: clamp(2.5rem, 6vw, 5rem); flex-wrap: wrap; }
.ft-ct { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: .9rem; font-weight: 600; }
.ft-cl { display: flex; flex-direction: column; gap: .55rem; }
.ft-cl a { font-size: .82rem; color: var(--maroon); opacity: .85; transition: opacity .2s, color .2s; }
.ft-cl a:hover { opacity: 1; color: var(--lblue); }

.ft-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem;
  padding-top: 1.6rem; font-size: .72rem; letter-spacing: .04em; color: var(--maroon); opacity: .7;
}

/* ============================================================
   ICONS
   ============================================================ */
.ic { display: inline-block; width: 28px; height: 28px; }
.ic::before { content: ''; display: block; width: 100%; height: 100%; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: currentColor; }

.ic[data-icon="people"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='8' r='3'/%3E%3Cpath d='M2 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Cpath d='M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='8' r='3'/%3E%3Cpath d='M2 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Cpath d='M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3C/svg%3E"); }

.ic[data-icon="sliders"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cline x1='5' y1='3' x2='5' y2='21'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='19' y1='3' x2='19' y2='21'/%3E%3Ccircle cx='5' cy='9' r='2'/%3E%3Ccircle cx='12' cy='15' r='2'/%3E%3Ccircle cx='19' cy='7' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cline x1='5' y1='3' x2='5' y2='21'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='19' y1='3' x2='19' y2='21'/%3E%3Ccircle cx='5' cy='9' r='2'/%3E%3Ccircle cx='12' cy='15' r='2'/%3E%3Ccircle cx='19' cy='7' r='2'/%3E%3C/svg%3E"); }

.ic[data-icon="mic"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3Cline x1='8' y1='22' x2='16' y2='22'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3Cline x1='8' y1='22' x2='16' y2='22'/%3E%3C/svg%3E"); }

.ic[data-icon="pencil"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 21l4-1 13-13-3-3L4 17z'/%3E%3Cpath d='M14 4l3 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 21l4-1 13-13-3-3L4 17z'/%3E%3Cpath d='M14 4l3 3'/%3E%3C/svg%3E"); }

.ic[data-icon="leaf"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M5 20C3 12 9 4 20 4c1 9-6 16-15 16z'/%3E%3Cpath d='M5 20c2-6 6-9 10-11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M5 20C3 12 9 4 20 4c1 9-6 16-15 16z'/%3E%3Cpath d='M5 20c2-6 6-9 10-11'/%3E%3C/svg%3E"); }

.ic[data-icon="star"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7L12 17.3 5.7 20.9l1.7-7-5.4-4.7 7.1-.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7L12 17.3 5.7 20.9l1.7-7-5.4-4.7 7.1-.6z'/%3E%3C/svg%3E"); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hero-about { grid-template-columns: 1fr; }
  .visual { min-height: 460px; }
  .hero-about-text { padding: 2.5rem var(--px) 1rem; }
  /* On mobile the visual already stacks above as its own block, so the
     text column doesn't also need a full extra viewport height before
     the logo appears. */
  .hero-block { min-height: 0; padding: 1rem 0 3rem; transform: none; }

  .workshop-grid { grid-template-columns: repeat(2, 1fr); }
  .artist-card { flex: 0 0 calc(50% - .7rem); }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .hbg { display: flex; }

  .register-banner .fan-mount { display: none; }
  .bars-viz { display: none; }

  /* In column mode align-items:flex-start controls the cross axis
     (width) instead of height, which otherwise collapses the map to
     its content width (0 -- its only child is absolutely positioned). */
  .map-stage { flex-direction: column; align-items: stretch; width: 100%; }
  .map-viewport { width: 100%; }
  .map-card { width: 100%; }
  .map-card-img { height: 220px; }
}

@media (max-width: 640px) {
  .workshop-grid { grid-template-columns: 1fr; }
  .artist-card { flex: 0 0 85%; }
  .ft-cols { gap: 2rem; }
}