/* BaliMotion — replica of balimotion.framer.website
   Breakpoints match Framer: desktop ≥1200 · tablet 810–1199 · phone <810 */

/* Geist + Geist Mono, self-hosted (SIL OFL, see assets/fonts/OFL.txt) */
@font-face { font-family: 'Geist'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/Geist-Light.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Geist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/GeistMono-Light.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/GeistMono-Regular.woff2') format('woff2'); }

:root {
  /* Framer color styles */
  --black: #000000;
  --white: #ffffff;
  --grey: #4f4f4f;
  --blue: #2859d0;
  --liquid-1: #000329;   /* defined in Framer, unused on live pages */
  --liquid-2: #7700ff;
  --liquid-3: #ff8330;
  --lime: #9fff19;       /* "Text Secondary", unused on live pages */
  --row-dark: #141414;
  --field: rgba(34, 34, 34, 0.8);

  --sans: 'Geist', 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --header-h: 60px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.05em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── type scale (Framer text styles) ───────────────────────── */
.t-h1      { font-family: var(--sans); font-weight: 400; font-size: 204px; line-height: 0.7;  letter-spacing: -0.1em; }
.t-h2-mono { font-family: var(--mono); font-weight: 300; font-size: 72px;  line-height: 0.8;  letter-spacing: -0.1em; text-transform: uppercase; }
.t-h3-mono { font-family: var(--mono); font-weight: 300; font-size: 40px;  line-height: 1.1;  letter-spacing: -0.1em; }
.t-h4      { font-family: var(--sans); font-weight: 400; font-size: 34px;  line-height: 0.9;  letter-spacing: -0.05em; }
.t-logo    { font-family: var(--sans); font-weight: 400; font-size: 30px;  line-height: 1.2;  letter-spacing: -0.1em; }
.t-mono    { font-family: var(--mono); font-weight: 400; font-size: 14px;  line-height: 1.1;  letter-spacing: -0.03em; }
.t-small   { font-family: var(--mono); font-weight: 300; font-size: 12px;  line-height: 1;    letter-spacing: -0.1em; text-transform: uppercase; }

/* ── header ─────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--blue);
}
.site-header .logo { font-size: 30px; line-height: 1; letter-spacing: -0.1em; }
.site-header nav { display: flex; gap: 25px; }
.site-header nav a { font-size: 16px; letter-spacing: -0.05em; }
.site-header nav a:hover, .site-header nav a[aria-current='page'] { text-decoration: underline; text-underline-offset: 4px; }
main { padding-top: var(--header-h); }

/* ── markers: the white squares that turn on scroll ────────── */
.sq { display: inline-block; width: 10px; height: 10px; background: var(--white); flex: none; will-change: transform; }
.sq--round { width: 18px; height: 18px; border-radius: 4px; }

/* ── section label row ("ABOUT BALIMOTION ▪") ───────────────── */
.label-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--blue);
}
.label-row--grey { border-bottom-color: var(--grey); }

/* ── appear on scroll ──────────────────────────────────────── */
[data-appear] { opacity: 0.2; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
[data-appear].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-appear] { opacity: 1; transform: none; transition: none; }
}

/* ══ HOME ═════════════════════════════════════════════════════ */
.hero {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column;
  padding: 44px var(--gutter) 10px;
}
.hero__inner { width: 100%; max-width: 1440px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
.hero__title { margin: 0; padding-left: 10px; position: relative; z-index: 1; line-height: 0.82; }
.hero__media { width: 100%; aspect-ratio: 1440 / 459; object-fit: cover; background: #111; }
.hero__spacer { flex: 1; min-height: 60px; }
.hero__subline { margin: 0 0 70px; text-align: right; }
.hero__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px;
  padding: 0 0 6px;
}
.hero__bar > :first-child { justify-self: start; }
.hero__bar > :last-child  { justify-self: end; text-align: right; }
.hero__bar p { margin: 0; }
.hero__bar p + p { margin-top: 3px; }
.barcode-wrap { display: flex; align-items: center; gap: 14px; }
.barcode { width: 75px; height: 28px; }

.intro { padding: 10px var(--gutter) 0; }
.mission { display: grid; grid-template-columns: calc(19.25vw - var(--gutter)) 1fr; padding: 54px 0 80px; }
.mission__marker { padding-top: 4px; }
.mission__text { margin: 0; max-width: 1400px; }

.pillars { width: min(1468px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.pillars__list { list-style: none; margin: 0; padding: 0; }
.pillar {
  display: grid; grid-template-columns: 1fr minmax(300px, 0.48fr); gap: 40px;
  padding: 18px 8px 10px; border-bottom: 1px solid var(--grey);
}
.pillar__name { margin: 0 0 6px; }
.pillar__tag, .pillar__desc { margin: 0; }
.pillar__desc { padding-top: 6px; max-width: 380px; }

.feature { padding: 90px var(--gutter) 0; }
.feature img { width: 100%; aspect-ratio: 1760 / 810; object-fit: cover; background: #111; }

/* ── events list (home + /events) ───────────────────────────── */
.events { padding: 110px 0 0; }
.events__head { display: flex; align-items: flex-end; justify-content: space-between; }
.events__title { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 80px; line-height: 0.8; letter-spacing: -0.07em; }
.events--home .events__wrap { width: min(1400px, 78vw); margin-left: 40px; }
.events--home .events__head { padding-bottom: 14px; }
.events--home .events__head .sq { margin-bottom: 30px; }

.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.event-row {
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 16px;
  min-height: 35px; padding: 6px 4px;
  font-family: var(--mono); font-size: 14px; line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase;
  background-color: var(--row-dark);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.09) 0 1px, transparent 1px 11px);
  transition: background-color 0.25s ease, background-image 0.25s ease;
}
.event-row:hover { background-color: var(--black); background-image: none; }
.event-row.is-featured { background: var(--blue); }
.event-row.is-featured:hover { background: #3466e0; }
a.event-row { cursor: pointer; }
.event-row__year { display: inline-flex; gap: 13px; white-space: pre; }
.event-row__venue { padding-right: 20px; }

/* ── contact footer: (INSTA) / (EMAIL) ──────────────────────── */
.contact { padding: 50px var(--gutter) 0; }
.contact__link {
  display: block; text-align: center;
  font-family: var(--mono); font-weight: 300; font-size: 80px; line-height: 0.8; letter-spacing: -0.1em;
  border-bottom: 1px solid var(--white);
  padding-top: 6px; overflow: hidden;
}
.contact__link span { display: block; transition: transform 0.35s cubic-bezier(.2,.7,.2,1); }
.contact__link .alt { position: absolute; left: 0; right: 0; transform: translateY(100%); }
.contact__link { position: relative; }
.contact__link:hover .main, .contact__link:focus-visible .main { transform: translateY(-110%); }
.contact__link:hover .alt,  .contact__link:focus-visible .alt  { transform: translateY(-100%); }
.site-footer { text-align: center; padding: 60px 0 22px; }

/* ══ THE ARTISTS ══════════════════════════════════════════════ */
.page-title { padding: 120px var(--gutter) 0; }
.page-title .label-row { align-items: flex-end; padding-bottom: 14px; }
.page-title h1 { margin: 0; line-height: 0.82; }
.page-title .sq { margin-bottom: 70px; }
.lede { display: grid; grid-template-columns: calc(19.25vw - var(--gutter)) 1fr; padding: 54px var(--gutter) 0; }
.lede p { margin: 0; max-width: 1400px; padding-right: 40px; }
.lede__marker { padding-top: 4px; }

.finder { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 160px var(--gutter) 0; }
.finder label { font-size: 16px; }
.finder__field { position: relative; width: 180px; }
.finder__field svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); opacity: 0.6; }
.finder input {
  width: 100%; height: 40px; padding: 0 12px 0 32px;
  background: var(--field); border: 1px solid transparent; border-radius: 8px;
  font-family: var(--mono); font-size: 13px; letter-spacing: -0.03em; outline: none;
}
.finder input::placeholder { color: rgba(255,255,255,0.35); }
.finder input:focus { border-color: var(--blue); }

.artist-grid {
  list-style: none; margin: 0; padding: 140px 50px 40px;
  display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 70px;
}
.artist { display: flex; flex-direction: column; align-items: center; text-align: center; }
.artist a { display: contents; }
.artist__img { width: min(300px, 100% - 34px); aspect-ratio: 300 / 357; object-fit: cover; background: #0d0d0d; transition: filter 0.3s ease, transform 0.4s ease; }
.artist a:hover .artist__img { transform: translateY(-4px); }
.artist__name { margin: 12px 0 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.1em; text-transform: capitalize; }
.artist__role { margin: 2px 0 0; color: var(--blue); font-size: 16px; padding: 0 12px; }
.artist-empty { text-align: center; padding: 60px var(--gutter) 0; font-family: var(--mono); font-size: 14px; color: rgba(255,255,255,0.6); }

/* ══ EVENTS PAGE ══════════════════════════════════════════════ */
.events-hero { padding: 20px 0 0; }
.events-hero img { width: min(1400px, 100% - 2 * var(--gutter)); margin: 0 auto; aspect-ratio: 1760 / 810; object-fit: cover; background: #111; }
.events--page { padding-top: 90px; }
.events--page .events__head { padding: 0 var(--gutter) 10px; border-bottom: 1px solid var(--grey); margin: 0 var(--gutter); padding-left: 0; padding-right: 0; }
.events--page .events__head .sq { margin: 0 calc(100% - 17.3vw - min(1108px, 61.5vw)) 22px 0; }
.events--page .event-list { width: min(1108px, 61.5vw); margin: 0 0 0 17.3vw; padding-top: 0; }

/* ══ EVENT DETAIL (block renderer) ════════════════════════════ */
.ev { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.ev__cover { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); }
.ev__cover img { width: 100%; height: 100%; object-fit: cover; background: #111; }
.ev__body { --pad: 37px; padding: 40px var(--pad) 120px; min-width: 0; }
.ev__body > .b-rule { margin: 34px calc(-1 * var(--pad)) 30px; border: 0; border-top: 2px solid var(--blue); }

.b-h1 { margin: 0 0 30px; font-family: var(--mono); font-weight: 300; font-size: 72px; line-height: 1; letter-spacing: -0.1em; text-transform: uppercase; }
.b-h2 { margin: 0 0 12px; font-family: var(--mono); font-weight: 300; font-size: 40px; line-height: 1.1; letter-spacing: -0.1em; }
.b-meta { padding-left: 4px; font-size: 16px; line-height: 1.2; letter-spacing: -0.04em; }
.b-meta p { margin: 0 0 8px; }
.b-quote { margin: 0 0 40px; font-size: 34px; line-height: 0.95; letter-spacing: -0.05em; max-width: 720px; }
.b-text { font-size: 15px; line-height: 1.25; letter-spacing: -0.03em; max-width: 680px; }
.b-text p { margin: 0 0 1.2em; white-space: pre-line; }
.b-text--small { font-size: 14px; }
.b-text a, .b-res a:not(.btn), .b-contact a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.b-list { margin: 0 0 1.2em; padding-left: 18px; font-size: 15px; line-height: 1.3; letter-spacing: -0.03em; }
.b-people { display: grid; gap: 20px; margin: 50px 0 0 -12px; }
.person { display: grid; grid-template-columns: minmax(0, 509px) minmax(160px, 1fr); gap: 20px; align-items: start; }
.person img { width: 100%; aspect-ratio: 509 / 240; object-fit: cover; background: #0d1a3f; }
.person h3 { margin: 18px 0 6px; font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: -0.06em; }
.person p { margin: 0; font-size: 14px; line-height: 1.2; letter-spacing: -0.03em; max-width: 240px; }
.b-spec { display: grid; gap: 22px; padding-left: 6px; }
.b-spec h3, .b-tl h3, .b-faq h3, .b-res h3 { margin: 0 0 6px; font-size: 30px; font-weight: 400; line-height: 1.1; letter-spacing: -0.05em; }
.b-spec p, .b-tl p, .b-faq p { margin: 0; font-size: 14px; line-height: 1.25; letter-spacing: -0.03em; }
.b-spec .note { margin-top: 8px; }
.b-spec ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.3; }
.b-tl { display: grid; gap: 20px; padding-left: 6px; }
.b-tl .is-hl h3 { color: var(--blue); }
.b-res { padding-left: 6px; }
.b-res p { margin: 0 0 14px; font-size: 14px; line-height: 1.3; max-width: 560px; }
.b-res__img { width: min(554px, 100%); margin: 30px auto 40px; }
.b-res__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.b-res__cta p { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 130px; height: 34px; padding: 0 24px; background: var(--blue); font-size: 14px; letter-spacing: -0.03em; white-space: nowrap; }
.btn:hover { background: #3466e0; }
.b-video { position: relative; width: min(560px, 100%); aspect-ratio: 16 / 9; margin: 0 0 40px; }
.b-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-faq { display: grid; gap: 22px; padding-left: 6px; }
.b-contact { padding-left: 6px; margin-top: 30px; }
.b-contact h3 { margin: 0 0 10px; font-size: 30px; font-weight: 400; letter-spacing: -0.05em; }
.b-contact p { margin: 0 0 6px; font-size: 14px; }

.ev-missing { padding: 160px var(--gutter); }

/* ══ 404 ══════════════════════════════════════════════════════ */
.nf { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: space-between; padding: 120px var(--gutter) 30px; }
.nf h1 { margin: 0; }
.nf .label-row { padding-bottom: 14px; align-items: flex-end; }
.nf p { margin: 40px 0 0 19.25vw; }
.nf a { text-decoration: underline; text-underline-offset: 6px; }

/* ══ TABLET 810–1199 ══════════════════════════════════════════ */
@media (max-width: 1199px) {
  .t-h1 { font-size: 150px; }
  .t-h2-mono { font-size: 54px; }
  .hero__subline { font-size: 32px; margin-bottom: 50px; }
  .mission { grid-template-columns: 12vw 1fr; }
  .lede { grid-template-columns: 12vw 1fr; }
  .lede p { font-size: 32px; }
  .pillar { grid-template-columns: 1fr minmax(240px, 0.6fr); }
  .events--home .events__wrap { width: auto; margin: 0 var(--gutter); }
  .events--page .event-list { width: auto; margin: 0 var(--gutter); }
  .events--page .events__head .sq { margin: 0 0 22px; }
  .event-row { grid-template-columns: 1.2fr 1fr auto; }
  .artist-grid { grid-template-columns: repeat(3, 1fr); padding: 100px 20px 40px; }
  .contact__link { font-size: 64px; }
  .b-h1 { font-size: 56px; }
  .person { grid-template-columns: 1fr; }
  .person h3 { margin-top: 4px; }
}

/* ══ PHONE <810 ═══════════════════════════════════════════════ */
@media (max-width: 809px) {
  :root { --header-h: 52px; --gutter: 16px; }
  .site-header .logo { font-size: 24px; }
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: 15px; }

  .t-h1 { font-size: 21vw; }
  .t-h2-mono { font-size: 34px; line-height: 0.85; }
  .t-h3-mono { font-size: 28px; }

  .hero { padding-top: 30px; }
  .hero__media { aspect-ratio: 4 / 3; }
  .hero__subline { font-size: 24px; text-align: left; margin-bottom: 36px; }
  .hero__bar { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .hero__bar > .barcode-wrap { grid-column: 1 / -1; grid-row: 1; justify-self: start; }

  .mission, .lede { grid-template-columns: 1fr; gap: 24px; padding-top: 34px; }
  .mission__text { padding-right: 0; }
  .lede p { font-size: 24px; padding-right: 0; }

  .pillar { grid-template-columns: 1fr; gap: 8px; padding: 18px 4px 16px; }
  .pillar__desc { padding-top: 4px; }

  .feature { padding-top: 60px; }
  .feature img { aspect-ratio: 4 / 3; }

  .events { padding-top: 80px; }
  .events__title { font-size: 56px; }
  .event-row { grid-template-columns: 1fr auto; row-gap: 4px; padding: 8px 6px; }
  .event-row__venue { grid-column: 1; grid-row: 2; opacity: 0.75; padding: 0; }
  .event-row__year { grid-column: 2; grid-row: 1 / span 2; }
  .events-hero img { aspect-ratio: 4 / 3; }

  .contact__link { font-size: 15vw; }
  .contact__link .alt { font-size: 0.42em; line-height: 1.9; }

  .page-title { padding-top: 70px; }
  .page-title .sq { margin-bottom: 30px; }
  .page-title h1 { font-size: 19vw; }
  .finder { padding-top: 70px; }
  .artist-grid { grid-template-columns: repeat(2, 1fr); padding: 60px 8px 20px; row-gap: 40px; }
  .artist__img { width: calc(100% - 16px); }
  .artist__name { font-size: 22px; }
  .artist__role { font-size: 13px; }

  .ev { grid-template-columns: 1fr; }
  .ev__cover { position: relative; top: 0; height: 62vh; }
  .ev__body { --pad: var(--gutter); }
  .b-h1 { font-size: 44px; }
  .b-h2 { font-size: 30px; }
  .b-quote { font-size: 26px; }
  .b-people { margin-left: 0; }
  .b-res__cta { flex-direction: column; align-items: flex-start; }
  .nf p { margin-left: 0; }
}