:root {
  --site-header-height: 84px;
  --maroon: #7a1f2b;
  --maroon-deep: #53141d;
  --maroon-dark: #55131d;
  --maroon-soft: #f6e9eb;
  --rose: #f7dfe5;
  --cream: #fbf8f4;
  --sand: #f2eee9;
  --ink: #231f20;
  --muted: #6f6667;
  --line: #e9dfdf;
  --white: #ffffff;
  --shadow: 0 18px 40px rgba(54, 19, 24, .08);
  --shadow-soft: 0 8px 20px rgba(77, 31, 35, .05);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 14px;
  /* One shape and one motion curve across the site: sharp photos, near-sharp cards. */
  --radius-photo: 2px;
  --radius-card: 4px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Homepage hero: desktop-only full-bleed editorial composition. */
@media (min-width: 1024px) {
  .home-page .site-header {
    z-index: 30;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .home-page .site-header.is-scrolled {
    background: #7a1f2b;
    border-bottom-color: rgba(255,255,255,.12);
    box-shadow: 0 8px 24px rgba(41,15,20,.12);
  }
  .home-page .site-header .brand-logo {
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.2));
  }
  .home-page .site-header .nav {
    color: rgba(255,248,239,.96);
    text-shadow: 0 1px 4px rgba(0,0,0,.25);
  }
  .home-page .site-header.is-scrolled .brand-logo {
    filter: brightness(0) invert(1);
  }
  .home-page .site-header.is-scrolled .nav { text-shadow: none; }
  .home-page .site-header .nav a:hover,
  .home-page .site-header .nav a.active { color: var(--cream) !important; }
  .home-page .site-header .nav a::after,
  .home-page .site-header .nav a.active::after,
  .home-page .site-header .nav a.active:hover::after {
    background: rgba(255,248,239,.82) !important;
  }
  .home-page .hero-campaign,
  .home-page .hero-campaign-slider { background: #55131d; }
  .home-page .hero-campaign {
    margin-top: calc(-1 * var(--site-header-height));
  }
  .home-page .hero-campaign::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    inset: 0 0 auto;
    width: 100%;
    height: 168px;
    border-radius: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.14) 54%,rgba(0,0,0,0) 100%);
    pointer-events: none;
  }
  .home-page .hero-slide {
    position: relative;
    display: block;
    min-height: calc(clamp(596px,calc(100svh - 134px),746px) + var(--site-header-height));
    padding: 0;
    overflow: hidden;
  }
  .home-page .hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg,rgba(45,12,18,.58) 0%,rgba(54,15,22,.29) 48%,rgba(50,13,19,.2) 100%),
      linear-gradient(0deg,rgba(45,11,17,.68) 0%,rgba(45,11,17,.07) 58%);
    pointer-events: none;
  }
  .home-page .hero-slide img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 43%;
    border-radius: 0;
    filter: saturate(.9) contrast(1.02) brightness(.96);
  }
  .home-page .hero-slide:nth-child(1) img { object-position: center 78%; }
  .home-page .hero-slide:nth-child(2) img { object-position: center 48%; }
  .home-page .hero-slide:nth-child(3) img { object-position: center 42%; }
  .home-page .hero-campaign-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    width: min(100% - 64px,1160px);
    min-height: calc(clamp(596px,calc(100svh - 134px),746px) + var(--site-header-height));
    padding: 0 0 58px;
  }
  .home-page .hero-campaign-copy {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 22px;
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .home-page .hero-campaign-copy :is(h1, h2) {
    grid-column: 1 / 8;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: 760px;
    margin: 0;
    color: var(--cream);
    font-size: clamp(68px,6.35vw,94px);
    font-weight: 600;
    line-height: .89;
    letter-spacing: -.055em;
    text-shadow: 0 2px 18px rgba(25,5,9,.16);
    text-wrap: balance;
  }
  .home-page .hero-campaign-copy :is(h1, h2) span { margin-top: 0; color: var(--cream); }
  .home-page .hero-campaign-copy p {
    grid-column: 9 / -1;
    grid-row: 1;
    align-self: end;
    max-width: 350px;
    margin: 0;
    color: rgba(255,248,239,.9);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
  }
  .home-page .hero-campaign-actions {
    grid-column: 9 / -1;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }
  .home-page .hero-campaign .btn-primary {
    min-height: 50px;
    padding-inline: 24px;
    border-color: var(--cream);
    border-radius: 6px;
    background: var(--cream);
    color: var(--maroon-deep);
    box-shadow: none;
  }
  .home-page .hero-campaign .btn-primary:hover {
    border-color: #fffaf3;
    background: #fffaf3;
    color: var(--maroon-deep);
    transform: translateY(-2px);
  }
  .home-page .hero-campaign-dots {
    position: absolute;
    z-index: 4;
    left: max(32px,calc((100vw - 1160px) / 2));
    bottom: 18px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .home-page .hero-dot::before { background: rgba(255,248,239,.38); }
  .home-page .hero-dot:hover::before,
  .home-page .hero-dot:focus-visible::before { background: rgba(255,248,239,.7); }
  .home-page .hero-dot.active::before { background: var(--cream); }
  .home-page .hero-slide.active .hero-campaign-copy :is(h1, h2) {
    animation: hero-title-in 1s cubic-bezier(.22,.8,.24,1) both;
  }
  .home-page .hero-slide.active .hero-campaign-copy p,
  .home-page .hero-slide.active .hero-campaign-actions {
    animation: hero-copy-in .62s cubic-bezier(.22,.8,.24,1) .45s both;
  }
}

@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
/* The headline wipes in top to bottom, so its two lines appear one after the other. */
@keyframes hero-title-in {
  from { opacity: 0; transform: translateY(18px); clip-path: inset(-10% -5% 100% -5%); }
  to { opacity: 1; transform: none; clip-path: inset(-10% -5% -25% -5%); }
}
/* Each hero photo settles from a slight zoom while its slide is showing. */
@keyframes hero-photo-settle {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .home-page .hero-slide.active img { animation: hero-photo-settle 7s cubic-bezier(.2,.6,.2,1) both; }
}

/* Soft cross-fade between pages of this site; browsers without support just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .home-page .hero-slide .hero-campaign-copy :is(h1, h2),
  .home-page .hero-slide .hero-campaign-copy p,
  .home-page .hero-slide .hero-campaign-actions,
  .home-page .hero-slide.active .hero-campaign-copy :is(h1, h2),
  .home-page .hero-slide.active .hero-campaign-copy p,
  .home-page .hero-slide.active .hero-campaign-actions { animation: none; }
}

[hidden] { display: none !important; }
.development-note { padding: 18px; background: #fff0c2; border-radius: 12px; }
.detail-page { max-width: 1040px; }
.detail-page h1 { font-size: clamp(30px, 5vw, 54px); line-height: 1.15; }
.detail-page h2 { margin-top: 28px; }
/* cek-status.html */
.status-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 16px; align-items: end; max-width: 760px; margin-top: 24px; }
.status-form .field { display: grid; gap: 6px; }
.status-form label { font-size: 13px; font-weight: 700; }
.status-form input { min-height: 48px; padding: 10px 14px; border: 1px solid #cbbdb2; border-radius: 4px; background: var(--white); color: var(--ink); font: inherit; }
.status-form input:focus { border-color: var(--maroon); outline: 3px solid rgba(122,31,43,.12); outline-offset: 2px; }
.status-message { min-height: 1.5em; margin-top: 16px; color: var(--muted); }
.status-result { max-width: 760px; margin-top: 8px; padding-top: 24px; border-top: 2px solid var(--ink); }
.status-result h2 { margin: 6px 0 10px; }
.status-result .btn { margin-top: 12px; }
@media (max-width: 640px) { .status-form { grid-template-columns: 1fr; } }
.event-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin: 32px 0; }
.event-detail-grid > img { border-radius: 20px; aspect-ratio: 3 / 2; height: auto; }
.detail-checklist { padding: 28px; margin: 24px 0; background: white; border: 1px solid var(--line); border-radius: 20px; }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; grid-column: 1 / -1; }
.receipt-actions p { flex-basis: 100%; font-size: 14px; }
.receipt-actions button { cursor: pointer; }
.receipt-actions button:disabled { opacity: .65; cursor: default; }
.saved-receipts { display: grid; gap: 24px; margin: 24px 0; }
.saved-receipts .summary-card { position: static; }
.page-links { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 12px; padding-bottom: 12px; }
.page-links a, .check-row a { text-decoration: underline; text-underline-offset: 3px; }
.site-header .page-links { color: white; }
.documentation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0; }
.documentation-grid figure { margin: 0; }
.documentation-grid img { aspect-ratio: 3 / 2; height: auto; border-radius: 16px; }
.documentation-grid figcaption { margin-top: 10px; }
@media (max-width: 640px) {
  .event-detail-grid, .documentation-grid { grid-template-columns: 1fr; gap: 20px; }
  .detail-checklist { padding: 20px; }
  .receipt-actions > .btn { width: 100%; white-space: normal; text-align: center; }
  .detail-page .event-summary > div { display: block; }
  .detail-page .event-summary dd { margin-left: 0; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding-top: var(--site-header-height);
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(122,31,43,0.04), transparent 28%),
    linear-gradient(180deg, #fdfaf8 0%, var(--cream) 100%);
  line-height: 1.6;
}
img { width: 100%; display: block; object-fit: cover; }
/* Faint paper grain over the page (4 KB tile), so the cream reads as printed stock, not a flat
   screen. Not on the registration flow, where the QRIS code and form stay untouched. */
body:not(.registration-page)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: url("../img/grain.png") repeat;
  opacity: .045;
  pointer-events: none;
}
/* Photos fade in when they finish loading instead of popping in (JS adds .img-fade; the hero and
   images already loaded at start are left alone). */
.img-fade main img:not(.is-ready, .is-loaded) { opacity: 0; }
.img-fade main img.is-loaded { animation: img-in .7s var(--ease) both; }
@keyframes img-in { from { opacity: 0; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  border-radius: 0;
  backdrop-filter: blur(8px);
  background: rgba(122,31,43,0.96);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 28px rgba(41, 15, 20, 0.12);
}
.site-header .container {
  width: min(1160px, calc(100% - 40px));
  max-width: 1160px;
  margin: 0 auto;
  padding: 0;
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--site-header-height);
  gap: 20px;
  padding: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Instrument Sans", "DM Sans", sans-serif;
  font-weight: 800;
  color: var(--maroon);
}
.site-header .brand { color: var(--white); }
.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
}
.brand-logo {
  display: block;
  height: 84px;
  width: auto;
  max-width: 470px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--maroon-soft); color: var(--maroon); font-size: 11px; border: 1px solid rgba(122,31,43,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.site-header .brand-mark { background: rgba(255,255,255,0.12); color: var(--white); border-color: rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
  color: rgba(255,255,255,0.88);
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 14.5px;
}
.nav a {
  position: relative;
  transition: color .18s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 120%;
  height: 1px;
  background: rgba(255,255,255,0.9);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s var(--ease);
}
.nav a:hover {
  color: var(--white);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a:hover, .footer-links a:hover { color: var(--white); }
.nav a.active {
  color: #f6e9eb;
  font-weight: 600;
}
.nav a.active::after {
  transform: scaleX(1);
  background: rgba(255,255,255,0.95);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 21px;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: .25s var(--ease);
}
.btn-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--maroon) 0%, #8c2b39 100%);
  box-shadow: 0 16px 30px rgba(122,31,43,.22), inset 0 1px 0 rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-primary:hover { transform: translateY(-2px); background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 100%); box-shadow: 0 18px 34px rgba(122,31,43,.32); }
.btn-secondary { background: var(--white); color: var(--maroon); border: 1px solid rgba(122,31,43,.15); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-light { background: var(--white); color: var(--maroon); }
.section { padding: 110px 0; }
.section-soft { background: rgba(255,255,255,0.55); }
.split-section { display: grid; grid-template-columns: .78fr 1.22fr; gap: 80px; }
.section-heading {
  position: relative;
  padding-top: 10px;
}
.section-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(122,31,43,0.9), rgba(122,31,43,0.22));
}
.menu-toggle { display: none; border: 0; background: transparent; width: 42px; height: 42px; padding: 9px; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--white); border-radius: 99px; }

.hero {
  padding: 88px 0 64px;
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 16px 8% auto auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122,31,43,0.10), transparent 68%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -120px;
  width: min(1100px, 84vw);
  height: 180px;
  background: radial-gradient(ellipse at center, rgba(122,31,43,0.06), transparent 60%);
  pointer-events: none;
}
.hero-campaign {
  position: relative;
  isolation: isolate;
  padding: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(122,31,43,0.12), transparent 30%),
    radial-gradient(circle at 78% 52%, rgba(255,255,255,0.72), transparent 31%),
    linear-gradient(105deg, #fdf8f5 0%, #f8efe9 58%, #f2e5e0 100%);
}
.hero-campaign-slider {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.hero-campaign-track {
  display: flex;
  width: 100%;
  transition: transform .72s cubic-bezier(.32,.72,0,1);
  touch-action: pan-y;
}
.hero-slide {
  position: relative;
  min-width: 100%;
  min-height: 580px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(20px, 1fr) repeat(12, minmax(0, 76.67px)) minmax(20px, 1fr);
  column-gap: 20px;
  align-items: center;
  padding: 28px 0 32px;
}
/* Each hero photo sits in a <picture> (portrait crop on phones); let the img lay out as the slide's child. */
.hero-slide picture { display: contents; }
.hero-slide img {
  position: relative;
  grid-column: 8 / -1;
  grid-row: 1;
  width: 100%;
  height: 550px;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) contrast(1.03) brightness(.98) sepia(.015) hue-rotate(4deg);
  border-radius: 38px 0 0 38px;
}
.hero-campaign-inner {
  position: relative;
  grid-column: 2 / 14;
  grid-row: 1;
  width: 100%;
  min-height: 510px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
  padding: 0;
}
.hero-campaign-copy {
  grid-column: 1 / 8;
  max-width: 610px;
  padding: 18px 70px 0 0;
}
.hero-campaign-copy :is(h1, h2) {
  margin: 0;
  max-width: 540px;
  font-size: clamp(54px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.045em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.34);
}
.hero-campaign-copy :is(h1, h2) span {
  display: block;
  margin-top: 8px;
  color: #8c3a46;
}
.hero-desktop-break {
  display: block;
  height: 0;
  margin: 0;
}
.hero-campaign-copy :is(h1, h2) > .hero-desktop-break + span {
  margin-top: 8px;
}
.hero-campaign-copy p {
  margin: 28px 0 0;
  max-width: 460px;
  color: rgba(35, 31, 32, 0.72);
  font-size: 16px;
  font-weight: 500;
}
.hero-campaign-actions {
  display: flex;
  align-items: center;
  gap: 18px 22px;
  flex-wrap: wrap;
  margin-top: 30px;
  transform: none;
}
.btn-ghost {
  min-height: auto;
  padding: 7px 0 5px;
  border: 0;
  border-bottom: 1px solid rgba(122,31,43,.36);
  border-radius: 0;
  background: transparent;
  color: var(--maroon);
  backdrop-filter: none;
}
.btn-ghost:hover {
  background: transparent;
  color: var(--maroon-dark);
}
.hero-campaign-dots {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 28px;
  border-top: 1px solid var(--line);
  background: transparent;
}
.hero-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.hero-dot::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--line);
  transition: width .32s cubic-bezier(.32,.72,0,1), background-color .32s cubic-bezier(.32,.72,0,1);
}
.hero-dot:hover,
.hero-dot:focus-visible {
  color: var(--maroon);
}
.hero-dot.active {
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.hero-dot:hover::before,
.hero-dot:focus-visible::before {
  background: var(--maroon);
}
.hero-dot.active::before {
  width: 40px;
  background: var(--maroon);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 70px; align-items: center; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow {
  display: inline-block;
  color: var(--maroon);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(122,31,43,0.06);
  border: 1px solid rgba(122,31,43,0.08);
}
.eyebrow.light { color: #f7dadd; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: "Instrument Sans", "DM Sans", sans-serif;
  line-height: 1.12;
  text-wrap: balance;
}
p { text-wrap: pretty; }
.home-page .hero-campaign-copy :is(h1, h2) {
  font-weight: 700;
  letter-spacing: -.04em;
}
.home-page .impact-editorial-kicker { font-family: "DM Sans", sans-serif; }
h1 { max-width: 660px; font-size: clamp(48px, 7vw, 82px); letter-spacing: -.055em; line-height: .96; }
/* Accent words: Newsreader italic against the sans headline (loaded on every page). */
h1 em, h2 em {
  color: var(--maroon);
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  display: inline;
  border-radius: 0.18em;
  background: linear-gradient(120deg, rgba(122,31,43,0.08), rgba(122,31,43,0.16));
  box-shadow: inset 0 0 0 1px rgba(122,31,43,0.06);
}
.hero-text { max-width: 610px; margin: 24px 0 30px; font-size: 17px; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.text-link { color: var(--maroon); font-weight: 800; font-size: 14px; }
.text-link span { margin-left: 4px; }
.hero-proof {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 42px;
  padding: 12px 14px 12px 12px;
  width: fit-content;
  border-radius: 18px;
  border: 1px solid rgba(122,31,43,.09);
  background: rgba(255,255,255,0.66);
  box-shadow: 0 12px 24px rgba(54,19,24,0.04);
  font-size: 13px;
}
.hero-proof div:last-child { display: grid; }
.hero-proof strong { font-size: 13px; }
.hero-proof span { color: var(--muted); }
.avatar-stack { display: flex; padding-left: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--cream); margin-left: -8px; display: grid; place-items: center; background: var(--maroon-soft); color: var(--maroon); font-weight: 800; font-size: 11px; }
.a2 { background: #ede1cf; }.a3 { background: #e6dadc; }.a4 { background: var(--maroon); color: white; }
.hero-visual { position: relative; min-height: 550px; }
.main-photo {
  position: absolute;
  inset: 0 8px 20px 0;
  border-radius: 38px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 32px 80px rgba(55,21,25,.16);
}
.main-photo img { height: 100%; }
.hero-visual:after { content:""; position:absolute; inset:auto 0 0 auto; width: 160px; height: 160px; border-radius: 30px; background: linear-gradient(135deg, var(--maroon) 0%, #8a2c3a 100%); z-index: -1; transform: rotate(-8deg); box-shadow: 0 18px 34px rgba(122,31,43,0.22); }
.floating-card {
  position: absolute;
  left: -34px;
  bottom: 50px;
  width: 250px;
  padding: 18px;
  border-radius: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(122,31,43,.08);
  box-shadow: var(--shadow);
}
.mini-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--maroon); background: linear-gradient(135deg, #f7e8ec, #f3d4db); }
.floating-card div { display: grid; gap: 3px; font-size: 12px; }.floating-card strong { font-size: 13px; }.floating-card span { color: var(--muted); }
.hero-doodle {
  position: absolute;
  right: -34px;
  top: 26px;
  color: var(--maroon);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  transform: rotate(5deg);
  text-shadow: 0 10px 18px rgba(122,31,43,0.08);
}

.section { padding: 112px 0; }
.section-soft {
  background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(247,234,236,0.56));
  border-top: 1px solid rgba(122,31,43,0.06);
  border-bottom: 1px solid rgba(122,31,43,0.06);
}
.split-section { display: grid; grid-template-columns: .78fr 1.22fr; gap: 76px; }
.editorial-slab { padding-top: 30px; }
.editorial-wrap {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 34px;
  align-items: center;
  background: linear-gradient(135deg, rgba(122,31,43,0.06), rgba(255,255,255,0.82));
  border: 1px solid rgba(122,31,43,0.08);
  border-radius: 30px;
  padding: 28px;
  box-shadow: 0 18px 42px rgba(54,19,24,0.06);
}
.editorial-copy {
  padding: 12px 8px 12px 10px;
}
.editorial-copy h2 {
  max-width: 560px;
}
.editorial-copy p {
  max-width: 540px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
}
.editorial-photo {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  border-radius: 24px;
  box-shadow: 0 26px 50px rgba(54,19,24,0.12);
  border: 1px solid rgba(122,31,43,0.08);
}
.editorial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.95) contrast(1.04);
}
h2 { font-size: clamp(30px, 4vw, 50px); letter-spacing: -.045em; }
.section-copy > p, .section-topline > p { color: var(--muted); font-size: 16px; max-width: 620px; }
.feature-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px 26px; margin-top: 38px; }
.feature-item {
  padding: 18px 14px 4px 0;
  border-top: 1px solid rgba(122,31,43,0.10);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.feature-item:hover {
  transform: translateY(-2px);
  border-color: rgba(122,31,43,0.18);
  background: rgba(255,255,255,0.16);
}
.feature-item span { color: var(--maroon); font-size: 11px; font-weight: 800; }.feature-item h3 { font-size: 17px; margin: 10px 0 8px; }.feature-item p { color: var(--muted); font-size: 13px; margin:0; }
.section-topline { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 46px; }
.section-topline > p { margin:0; }
.section-topline h2 { max-width: 620px; }
.program-grid { display:grid; grid-template-columns: 1.18fr .9fr .9fr; gap: 20px; align-items: stretch; }
.program-card {
  background: linear-gradient(180deg, #fffefc 0%, #f6f0ef 100%);
  border:1px solid var(--line);
  border-radius: 24px;
  overflow:hidden;
  box-shadow: 0 16px 28px rgba(53,19,24,0.04);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  position: relative;
}
.program-card.featured .program-image { height: 270px; }
.program-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(122,31,43,0.28), rgba(122,31,43,0));
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.program-card:hover {
  transform: translateY(-4px);
  border-color: rgba(122,31,43,0.12);
  box-shadow: 0 18px 32px rgba(53,19,24,.08);
}
.program-card:hover::before {
  opacity: 1;
}
.program-card.featured {
  box-shadow: 0 20px 36px rgba(53,19,24,.08);
  transform: none;
  border-color: rgba(122,31,43,0.12);
}
.program-card:nth-child(2),
.program-card:nth-child(3) {
  transform: none;
  background: linear-gradient(180deg, #fffdfd 0%, #f7f0f3 100%);
}
.program-card:nth-child(2) .program-content,
.program-card:nth-child(3) .program-content {
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(246,233,235,0.66));
}
.program-image { height: 240px; }
.program-card:not(.featured) .program-image { height: 185px; }
.program-image img { height:100%; transition: transform .5s var(--ease); }
.program-card:hover img { transform:scale(1.04); }
.program-content { padding: 22px; }
.tag { display:inline-flex; padding:5px 9px; border-radius:999px; background:var(--maroon-soft); color:var(--maroon); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.program-content h3 { font-size: 21px; margin:12px 0 8px; }
.program-content p { color:var(--muted); font-size:13px; margin:0 0 18px; }
.program-content a { display:inline-block; padding-block:12px; margin-block:-12px; color:var(--maroon); font-size:13px; font-weight:800; }

.home-program-section .program-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.home-program-section .section-topline {
  margin-bottom: 20px;
}
.home-program-section .section-topline > p {
  max-width: 44ch;
  line-height: 1.65;
}
.home-program-heading-meta { display:grid; justify-items:start; gap:14px; max-width:300px; }
.home-program-heading-meta p { margin:0; color:var(--muted); font-size:16px; line-height:1.65; }
.home-program-section .program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 28px;
}
.home-program-section .program-card:first-child { border-left: 0; }
.home-program-section .program-card::before { content:none; }
.home-program-section .program-index { display:block; margin-bottom:14px; color:var(--maroon); font:700 12px/1 "DM Sans",sans-serif; letter-spacing:.1em; }
.home-program-section .program-card.featured {
  grid-column: auto;
  grid-row: auto;
  border-radius: 0;
  box-shadow: none;
}
.home-program-section .program-card:nth-child(2),
.home-program-section .program-card:nth-child(3) {
  grid-column: auto;
  grid-row: auto;
  transform: none;
  background: var(--white);
}
.home-program-section .program-card:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}
.home-program-section .program-card:hover img { transform: scale(1.04); }
.home-program-section .program-image,
.home-program-section .program-card.featured .program-image,
.home-program-section .program-card:not(.featured) .program-image {
  display: block;
  height: auto;
  aspect-ratio: 5 / 4;
  min-height: 0;
  flex: 0 0 auto;
  overflow: hidden;
  border-bottom: 1px solid rgba(122,31,43,0.06);
  position: relative;
  border-radius: 0;
}
.home-program-section .program-image::after {
  content: none;
}
.home-program-section .program-image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.95) contrast(1.04);
}
.home-program-section .program-content,
.home-program-section .program-card:nth-child(2) .program-content,
.home-program-section .program-card:nth-child(3) .program-content {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 26px;
  background: transparent;
}
.home-program-section .program-card.featured .program-content {
  padding: 0 0 26px;
}
.home-program-section .program-content::before {
  content: none;
}
.home-program-section .tag {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.home-program-section .program-content h3 { margin-top: 10px; }
.home-program-section .program-title { color: inherit; }
.home-program-section .program-title:hover { color: var(--maroon); }
.home-program-section .program-title:focus-visible,
.home-program-section .program-image:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 4px;
}
.home-program-section .program-content p { max-width: 34ch; }
.home-program-section .program-content a { margin-top: auto; padding-top: 0; }
.home-program-more { display:inline-block; padding-block:12px; margin-block:-12px; color:var(--maroon); font-size:13px; font-weight:800; text-decoration:none; }
.home-program-more:hover { text-decoration:underline; text-underline-offset:5px; }

.home-page .impact-editorial,
.home-page .home-program-section,
.home-page .home-upcoming-section,
.home-page .home-about-teaser,
.home-page .kisah-preview,
.home-page .home-closing-section {
  position: relative;
}
.home-page .impact-editorial + .home-program-section,
.home-page .home-program-section + .home-upcoming-section,
.home-page .home-upcoming-section + .home-about-teaser,
.home-page .home-about-teaser + .kisah-preview,
.home-page .kisah-preview + .testimonial-section,
.home-page .testimonial-section + .home-closing-section {
  border-top: 1px solid var(--line);
}
.home-page .impact-editorial-image img,
.home-page .program-image img,
.home-page .kisah-entry .kisah-image-link > img {
  filter: saturate(.96) contrast(1.02);
}
.home-page .impact-editorial-image,
.home-page .program-image,
.home-page .kisah-entry .kisah-image-link > img {
  border-radius: var(--radius-photo);
}

.testimonial-section {
  background: linear-gradient(135deg, rgba(103,24,34,0.98), rgba(122,31,43,0.96));
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.testimonial-section::before,
.testimonial-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}
.testimonial-section::before {
  width: 420px;
  height: 420px;
  background: rgba(255,255,255,0.045);
  left: -120px;
  top: -140px;
}
.testimonial-section::after {
  width: 520px;
  height: 520px;
  background: rgba(255,255,255,0.03);
  right: -180px;
  bottom: -160px;
}
.testimonial-section .eyebrow { color:#f1c9cf; }
.testimonial-section h2 em { color:#f7b7c0; }
.center-heading { text-align:center; max-width: 760px; margin:0 auto 30px; }
.testimonial-shell {
  position: relative;
  padding-top: 6px;
  z-index: 1;
}
.testimonial-nav {
  position: absolute;
  inset: 50% 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 3;
}
.testimonial-arrow {
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
}
.testimonial-arrow:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 14px 22px rgba(0,0,0,0.14);
}
.testimonial-arrow.prev { margin-left: -18px; }
.testimonial-arrow.next { margin-right: -18px; }
.testimonial-carousel {
  overflow: hidden;
  position: relative;
}
.testimonial-track {
  display: flex;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.testimonial-slide {
  min-width: 100%;
  text-align: center;
  padding: 0 92px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transform: translateX(28px);
}
.testimonial-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.testimonial-slide-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 26px 28px 22px;
  border-radius: 30px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(5px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 48px rgba(36,8,13,0.18);
}
.quote-mark {
  font-family: "Instrument Sans", "DM Sans", sans-serif;
  font-size: 78px;
  line-height: .7;
  color:#f2b3ba;
  opacity: .95;
}
.testimonial-slide blockquote {
  font-family: "Instrument Sans", "DM Sans", sans-serif;
  font-size: clamp(28px,3.2vw,46px);
  line-height:1.18;
  letter-spacing:-.04em;
  margin: 18px auto 28px;
  max-width: 900px;
  font-weight: 600;
}
.person { display:inline-flex; align-items:center; gap:10px; text-align:left; }
.person-avatar {
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, #f8e4e9, #f1c9cf);
  color:var(--maroon);
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.person div { display:grid; }
.person strong { font-size:13px; }
.person span { color:#e8c6ca; font-size:12px; }
.testimonial-dots { display:flex; justify-content:center; gap:8px; margin-top:28px; }
.testimonial-dot {
  width:9px; height:9px;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.3);
  padding:0; cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease);
}
.testimonial-dot.active {
  background:white;
  transform: scale(1.18);
}
@media (max-width: 640px) {
  .testimonial-slide { padding: 0 26px; }
  .testimonial-slide-inner { padding: 18px 18px 16px; border-radius: 22px; }
  .testimonial-nav { inset: auto 0 0 0; transform: none; justify-content: center; gap: 18px; }
  .testimonial-arrow.prev { margin-left: 0; }
  .testimonial-arrow.next { margin-right: 0; }
  .testimonial-arrow { width: 38px; height: 38px; }
  .testimonial-slide blockquote { font-size: 24px; }
}

.home-page .testimonial-section {
  background: var(--maroon-dark);
}
.home-page .testimonial-slide-inner {
  max-width: 920px;
  padding: 24px 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.home-page .testimonial-slide blockquote { font-weight: 500; }
.home-page .testimonial-arrow {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-page .testimonial-arrow:hover {
  transform: none;
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
.home-page .person-avatar {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #f1c9cf;
  box-shadow: none;
}

.gallery-grid { display:grid; grid-template-columns:1.05fr .8fr .8fr; grid-auto-rows: 180px; gap:14px; }.gallery-item { border-radius:18px; overflow:hidden; margin:0; }.gallery-item.tall { grid-row: span 2; }.gallery-item.wide { grid-column: span 2; }.gallery-item img { height:100%; transition:transform .5s var(--ease); }.gallery-item:hover img { transform:scale(1.04); }

.faq-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:90px; }.steps { margin-top:36px; border-top:1px solid var(--line); }.steps div { display:flex; gap:22px; padding:18px 0; border-bottom:1px solid var(--line); font-weight:700; }.steps strong { width:28px; color:var(--maroon); font-size:12px; }.accordion { border-top:1px solid var(--line); }.accordion-item { border-bottom:1px solid var(--line); }.accordion-trigger { width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 0; background:none; border:0; cursor:pointer; text-align:left; font-weight:800; font-size:15px; }.accordion-trigger span { color:var(--maroon); font-size:22px; transition:.2s; }.accordion-item.open .accordion-trigger span { transform:rotate(45deg); }.accordion-panel { max-height:0; overflow:hidden; transition:max-height .25s var(--ease); }.accordion-item.open .accordion-panel { max-height:220px; }.accordion-panel p { color:var(--muted); font-size:14px; padding: 0 42px 20px 0; margin:0; }

.join-section { padding-top: 70px; }
.join-card {
  min-height:420px;
  border-radius:30px;
  overflow:hidden;
  background: linear-gradient(135deg, #56151d 0%, #721e2a 50%, #8c2b39 100%);
  color:white;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  padding:52px 54px;
  position:relative;
  box-shadow: 0 24px 52px rgba(86,21,29,0.16);
  border: 1px solid rgba(255,255,255,0.08);
}
.join-card::before,
.join-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.join-card::before {
  width: 320px;
  height: 320px;
  background: rgba(255,255,255,0.05);
  right: -80px;
  top: -100px;
}
.join-card::after {
  width: 220px;
  height: 220px;
  background: rgba(255,255,255,0.04);
  left: -40px;
  bottom: -80px;
}
.join-copy p { color:#e8cbd0; max-width:560px; margin:18px 0 25px; }.join-copy h2 em { color:#f3a9b2; }.join-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }.join-social { color:white; font-weight:800; font-size:14px; }.join-note { align-self:center; justify-self:end; width:min(320px,100%); padding:25px; border:1px solid rgba(255,255,255,.18); border-radius:22px; background:rgba(255,255,255,.06); transform:rotate(-2deg); }.join-note span { font-family:"Instrument Sans","DM Sans",sans-serif; font-size:54px; color:#eaa1aa; line-height:1; }.join-note p { font-family:"Instrument Sans","DM Sans",sans-serif; font-size:23px; line-height:1.28; margin:5px 0 18px; }.join-note small { color:#e8cbd0; }

.home-closing-section {
  padding: 76px 0;
  background: var(--cream);
}
.home-closing {
  min-height: 0;
  grid-template-columns: 1.15fr .85fr;
  gap: 84px;
  overflow: visible;
  padding: 54px 0;
  border: solid var(--line);
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.home-closing .join-copy p { color: var(--muted); }
.home-closing .join-copy h2 em { color: var(--maroon); }
.home-closing .join-social { color: var(--maroon); }
.home-closing .join-note {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  margin: 0;
  padding: 4px 0 4px 42px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  transform: none;
}
.home-closing .join-note span { color: var(--maroon); }
.home-closing .join-note p { color: var(--ink); }
.home-closing .join-note small { color: var(--muted); }

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  position: relative;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.35fr .8fr .9fr 1.08fr;
  gap: 44px 58px;
  padding: 82px 0 72px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 0;
  border-left: 0;
  position: relative;
}
.footer-col h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 4px 0 18px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.footer-brand-logo {
  display: block;
  height: 85px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  filter: none;
}
.footer-brand-col {
  padding-left: 0;
  border-left: 0;
}
.footer-brand-col p {
  margin: 0;
  max-width: 260px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 15px;
  font-weight: 500;
}
.footer-nav a {
  color: var(--ink);
  transition: color .2s var(--ease), opacity .2s var(--ease);
  text-decoration: none;
  width: fit-content;
}
.footer-nav a:hover {
  color: var(--maroon);
  opacity: 1;
}
.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}
.footer-social .social-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: fit-content;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  font-size: 15px;
  line-height: 1.4;
  transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.footer-social .social-link:hover {
  background: transparent;
  color: var(--maroon);
  transform: none;
  box-shadow: none;
}
.footer-social .social-link svg {
  display: block;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  color: var(--maroon);
}
.footer-social [data-wa]::after { content: "WhatsApp"; }
.footer-social [data-instagram]::after { content: "Instagram"; }
.footer-social [data-tiktok]::after { content: "TikTok"; }
.footer-social [data-linkedin]::after {
  content: "LinkedIn";
}
.footer-social [data-email] {
  width: fit-content;
  height: auto;
  margin-top: 0;
  color: var(--ink);
}
.footer-social [data-email]::before {
  content: "@";
  display: grid;
  place-items: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  color: var(--maroon);
  font-size: 16px;
  font-weight: 800;
}
.footer-social [data-email]::after { content: "Email"; }
.footer-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(122,31,43,.2);
  border-radius: 8px;
  background: var(--maroon-soft);
}
.footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) sepia(.7) saturate(2.4) hue-rotate(300deg) brightness(1.08) contrast(.82);
}
.footer-location-col p {
  margin: 0;
  padding: 2px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.footer-map-link {
  position: absolute;
  z-index: 1;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(122,31,43,.46);
  border-radius: 8px;
  background: var(--cream);
  color: var(--maroon);
  font-size: 13px;
  font-weight: 700;
}
.footer-map-link:hover {
  border-color: var(--maroon);
  background: var(--white);
  color: var(--maroon-dark);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 24px 0 28px;
  background: var(--cream);
}
.footer-copy-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.footer-copy-wrap p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.footer-links {
  display: flex;
  gap: 20px;
}
.footer-links a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  font-size: 12px;
  color: var(--muted);
  transition: color .2s var(--ease);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--maroon);
}

@media (max-width: 960px) {
  :root { --site-header-height: 70px; }
  body {
    padding-top: var(--site-header-height);
  }
  .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 30;
  }
  .nav-wrap {
    min-height: var(--site-header-height);
    gap: 12px;
    padding: 0;
  }
  .brand-logo {
    height: 64px;
    max-width: 350px;
  }
  .footer-brand-logo {
    height: 66px;
    max-width: 210px;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 48px 42px;
    padding: 60px 0 50px;
  }
  .footer-copy-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav {
    display:flex;
    margin-left:0;
    position:absolute;
    top:var(--site-header-height);
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap: 0;
    padding: 8px 20px 16px;
    background: var(--maroon);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:0;
    box-shadow:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform: translateY(-8px);
    max-height:0;
    overflow:hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), max-height .28s var(--ease), visibility .22s var(--ease);
  }
  .nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav a::after { display: none; }
  .nav a { color: rgba(255,255,255,0.9); }
  .nav a.active { color: #f6e9eb; }
  .nav.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform: translateY(0);
    max-height:420px;
  }
  .menu-toggle { display:block; }
  .hero-grid, .split-section, .corporate-grid, .faq-grid, .contact-grid { grid-template-columns:1fr; gap:48px; }.hero { padding-top:50px; }.hero-visual { min-height:520px; }
  .program-grid { grid-template-columns:1fr 1fr; }.program-card.featured { grid-column:span 2; }.gallery-grid { grid-template-columns:1fr 1fr; }.gallery-item.tall, .gallery-item.wide { grid-row:auto; grid-column:auto; }
  .join-card { grid-template-columns:1fr; }.join-note { justify-self:start; margin-top:20px; }.footer-grid { grid-template-columns:1fr; align-items:start; }.footer-copy { text-align:left; }

  .hero-slide {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 34px 0 42px;
  }
  .hero-slide img {
    width: min(100% - 40px, 1160px);
    height: 390px;
    margin: 0 auto;
    order: 1;
    border-radius: 24px;
  }
  .hero-campaign-inner {
    display: block;
    width: min(100% - 40px, 1160px);
    min-height: 0;
    margin: 0 auto;
    padding: 30px 0 0;
    order: 2;
  }
  .hero-campaign-copy {
    max-width: 680px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .hero-campaign-copy :is(h1, h2) .hero-desktop-break { display: none; }
  .hero-campaign-copy :is(h1, h2) > .hero-desktop-break + span { display: inline; margin-top: 0; }
  .hero-campaign-copy :is(h1, h2) { font-size: clamp(50px, 8vw, 68px); }
  .home-program-section .program-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .home-program-section .program-card,
  .home-program-section .program-card.featured,
  .home-program-section .program-card:nth-child(2),
  .home-program-section .program-card:nth-child(3) {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  }
  .home-program-section .program-image,
  .home-program-section .program-card.featured .program-image,
  .home-program-section .program-card:not(.featured) .program-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-right: 1px solid rgba(122,31,43,0.06);
    border-bottom: 0;
  }
  .home-program-section .program-card.featured .program-content,
  .home-program-section .program-card:nth-child(2) .program-content,
  .home-program-section .program-card:nth-child(3) .program-content {
    padding: 24px 26px 28px;
  }
  .home-program-section .program-card:nth-child(2) .program-content,
  .home-program-section .program-card:nth-child(3) .program-content { padding-right: 18px; }
  .home-program-section .program-card,
  .home-program-section .program-card.featured,
  .home-program-section .program-card:nth-child(2),
  .home-program-section .program-card:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 18px;
    padding-right: 18px;
  }
  .home-program-section .program-card:first-child { border-top: 0; padding-left: 18px; }
  .home-program-section .program-card:last-child { padding-right: 18px; }
  .home-closing { grid-template-columns: 1fr 1fr; gap: 44px; }
}

@media (max-width: 640px) {
  .home-page main > .section > .container,
  .home-page main > .impact-editorial > .container,
  .home-page .site-footer .container {
    width: min(100% - 36px, 1160px);
  }

  :root { --site-header-height: 68px; }
  body { padding-top: var(--site-header-height); }
  .container { width:min(100% - 28px,1160px); }.section { padding:72px 0; }.nav-wrap { min-height:var(--site-header-height); }.nav { top:var(--site-header-height); }.hero { padding-top:40px; }.hero-grid { gap:34px; }.hero-visual { min-height:400px; }.main-photo { border-radius:25px; }.floating-card { left:12px; bottom:24px; width:220px; }.hero-doodle { right:4px; top:15px; font-size:16px; }
  .feature-grid, .program-grid { grid-template-columns:1fr; }.program-card.featured { grid-column:auto; }.section-topline { display:block; }.section-topline > p { margin-top:18px; }.gallery-grid { grid-template-columns:1fr 1fr; grid-auto-rows:140px; }.join-card { padding:34px 28px; }.join-card { min-height:520px; }.contact-grid { gap:35px; }
  h1 { font-size:44px; }.hero-text { font-size:15px; }.testimonial blockquote { font-size:25px; }.footer-links { gap:14px; }

  .home-page .hero-campaign,
  .home-page .hero-campaign-slider {
    background:
      radial-gradient(circle at 86% 0%, rgba(255,255,255,.14), transparent 28%),
      linear-gradient(180deg, #5a121d 0%, #7a1f2b 48%, #814652 100%);
  }
  .hero-campaign-slider { padding: 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.12); }
  .home-page .hero-slide {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 18px;
    align-items: start;
    padding: 24px 0 34px;
    background: transparent;
  }
  .home-page .section {
    padding-block: 60px;
  }
  .home-program-section .program-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .home-program-section .program-image,
  .home-program-section .program-card.featured .program-image,
  .home-program-section .program-card:not(.featured) .program-image {
    height: 220px;
    flex-basis: 220px;
  }
  .home-page .hero-slide img {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: clamp(240px, 68vw, 270px);
    margin: 20px 0 0;
    border-radius: 12px;
    filter: saturate(.88) contrast(1.04) brightness(.96);
  }
  .home-page .hero-campaign-inner,
  .home-page .hero-campaign-copy {
    display: contents;
  }
  .home-page .hero-campaign-copy :is(h1, h2) {
    grid-column: 2;
    grid-row: 1;
    max-width: 335px;
    color: var(--cream);
    font-size: clamp(38px, 10.5vw, 42px);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 700;
  }
  .home-page .hero-campaign-copy :is(h1, h2) span {
    display: inline;
    margin-top: 0;
    color: #f4cbd0;
  }
  .home-page .hero-campaign-copy p {
    grid-column: 2;
    grid-row: 3;
    max-width: 100%;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(251, 248, 244, .9);
    font-weight: 500;
  }
  .hero-campaign-actions {
    grid-column: 2;
    grid-row: 4;
    margin-top: 24px;
    gap: 12px;
    align-items: stretch;
    justify-content: flex-start;
    transform: none;
    flex-direction: column;
  }
  .home-page .hero-campaign .btn-primary {
    width: 100%;
    background: var(--cream);
    color: var(--maroon-deep);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 14px 26px rgba(42,8,14,.2);
    min-height: 48px;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 800;
  }
  .home-page .hero-campaign .btn-primary:hover,
  .home-page .hero-campaign .btn-primary:focus-visible {
    background: var(--white);
    color: var(--maroon-deep);
    border-color: var(--white);
    box-shadow: 0 16px 28px rgba(42,8,14,.24);
  }
  .home-page .hero-campaign .btn-ghost {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 3px 0 5px;
    min-height: auto;
    color: var(--cream);
    font-weight: 700;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  .home-page .hero-campaign .btn-ghost:hover,
  .home-page .hero-campaign .btn-ghost:focus-visible { color: #f4cbd0; }
  .hero-campaign-dots {
    display: flex;
    align-items: center;
    gap: 2px;
    width: calc(100% - 36px);
    margin: 0 auto;
    padding: 4px 0 22px;
    border-top: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .home-page .hero-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
  }
  .home-page .hero-dot::before,
  .home-page .hero-dot:nth-child(1)::before,
  .home-page .hero-dot:nth-child(2)::before,
  .home-page .hero-dot:nth-child(3)::before {
    content: "";
    width: 24px;
    height: 2px;
    background: rgba(251,248,244,.34);
    transition: width .2s var(--ease), background-color .2s var(--ease);
  }
  .home-page .hero-dot:hover,
  .home-page .hero-dot:focus-visible {
    color: inherit;
    background: transparent;
  }
  .home-page .hero-dot.active {
    background: transparent;
    color: inherit;
    box-shadow: none;
  }
  .home-page .hero-dot:hover::before,
  .home-page .hero-dot:focus-visible::before {
    background: rgba(251,248,244,.68);
  }
  .home-page .hero-dot.active::before {
    width: 40px;
    background: var(--cream);
  }

  .site-footer .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 44px 0 34px;
  }
  .site-footer .footer-brand-col,
  .site-footer .footer-location-col {
    grid-column: 1 / -1;
  }
  .site-footer .footer-col {
    padding-left: 0;
  }
  .site-footer .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    width: 100%;
  }
  .site-footer .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .site-footer .footer-social {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .site-footer .footer-map {
    max-height: 190px;
  }
  .site-footer .footer-copy-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .home-program-section .section-topline {
    margin-bottom: 16px;
  }
  .home-program-section .section-topline > p {
    max-width: 36ch;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
  }
  .home-program-heading-meta { max-width:36ch; margin-top:16px; }
  .home-program-heading-meta p { font-size:15px; line-height:1.6; }
  .home-program-section .program-grid {
    display: grid;
    gap: 28px;
    padding-top: 18px;
  }
  .home-program-section .program-card,
  .home-program-section .program-card.featured,
  .home-program-section .program-card:nth-child(2),
  .home-program-section .program-card:nth-child(3) {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .home-program-section .program-card:first-child { border-top: 0; }
  .home-program-section .program-index { margin-bottom:14px; }
  .home-program-section .program-image,
  .home-program-section .program-card.featured .program-image,
  .home-program-section .program-card:not(.featured) .program-image {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(122,31,43,0.06);
  }
  .home-program-section .program-content,
  .home-program-section .program-card.featured .program-content,
  .home-program-section .program-card:nth-child(2) .program-content,
  .home-program-section .program-card:nth-child(3) .program-content {
    min-width: 0;
    padding: 18px 0 24px;
  }
  .home-program-section .program-card.featured .program-content h3,
  .home-program-section .program-card:nth-child(2) .program-content h3,
  .home-program-section .program-card:nth-child(3) .program-content h3 {
    margin: 10px 0 8px;
    font-size: 24px;
  }
  .home-program-section .program-card.featured .program-content p,
  .home-program-section .program-card:nth-child(2) .program-content p,
  .home-program-section .program-card:nth-child(3) .program-content p {
    display: block;
    overflow: visible;
    margin-bottom: 18px;
  }
  .home-closing-section { padding: 62px 0; }
  .home-closing { min-height: 0; display: block; padding: 42px 0; }
  .home-closing .join-note { margin-top: 38px; padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .home-page .home-closing .btn-light { min-height: 48px; }
  .home-page .home-closing .join-actions { gap: 18px; }
  .home-page .home-closing .join-note p { margin-bottom: 0; }
  .footer-main { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 40px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-location-col { grid-column: 1 / -1; }
  .footer-col { padding-left: 0; }

  .editorial-slab {
    padding-top: 18px;
  }
  .editorial-wrap {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 18px 22px;
    border-radius: 24px;
  }
  .editorial-copy {
    padding: 0;
  }
  .editorial-copy h2 {
    max-width: 100%;
    font-size: clamp(28px, 7vw, 38px);
    line-height: 1.02;
  }
  .editorial-copy p {
    max-width: 100%;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.6;
  }
  .editorial-photo {
    min-height: 220px;
    border-radius: 16px;
  }
}

/* ===== MULTI-PAGE SYSTEM ===== */
.about-top-photo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #f3e5e7;
  overflow: hidden;
}
.about-top-photo img {
  display: block;
  width: 100%;
  height: min(440px, 40vw);
  object-fit: cover;
}
.page-hero {
  position: relative;
  padding: 82px 0 76px;
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,233,235,.82) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.page-hero::before {
  width: 360px;
  height: 360px;
  top: -120px;
  right: -60px;
  background: radial-gradient(circle, rgba(122,31,43,0.12), transparent 68%);
}
.page-hero::after {
  width: 260px;
  height: 260px;
  left: -70px;
  bottom: -80px;
  background: radial-gradient(circle, rgba(247,223,229,0.9), transparent 70%);
}
.page-hero-grid { display:grid; grid-template-columns: 1fr .72fr; gap:70px; align-items:end; }
.page-hero-aside {
  display: grid;
  gap: 18px;
  align-items: end;
}
.page-hero-visual {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 260px;
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 18px 32px rgba(34, 5, 10, .24);
  border: 1px solid rgba(122,31,43,0.08);
}
.page-hero-visual img {
  height: 100%;
  object-fit: cover;
}
.page-hero h1 { max-width:760px; }
.page-hero p { max-width:620px; color:var(--muted); font-size:17px; margin:22px 0 0; }
.page-kicker {
  color:var(--maroon);
  font-size:12px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(122,31,43,0.06);
  border: 1px solid rgba(122,31,43,0.08);
}
.page-hero-note {
  position: relative;
  z-index: 1;
  padding: 26px 24px 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,233,235,0.94));
  border-radius: 26px;
  border: 1px solid rgba(122,31,43,.08);
  box-shadow: 0 18px 36px rgba(77,31,35,0.08);
}
.page-hero-note strong { display:block; font-family:"Instrument Sans","DM Sans",sans-serif; font-size:18px; margin-bottom:8px; }
.page-hero-note span { color:var(--muted); font-size:13px; }
.breadcrumb { margin-bottom:18px; color:var(--muted); font-size:12px; }
.breadcrumb a { display:inline-block; padding-block:14px; margin-block:-14px; color:var(--maroon); font-weight:700; }
.nav a.active,
.nav a.active:hover {
  color: #f6e9eb !important;
  font-weight: 600 !important;
}
.nav a.active::after,
.nav a.active:hover::after {
  transform: scaleX(1) !important;
  background: rgba(255,255,255,0.95) !important;
}
.text-block { max-width:800px; }
.text-block p { color:var(--muted); font-size:16px; }
.story-grid { display:grid; grid-template-columns: .85fr 1.15fr; gap:85px; align-items:start; }
.story-image { border-radius:28px; overflow:hidden; min-height:520px; }
.story-image img { height:100%; }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.value-card { background:var(--white); border:1px solid var(--line); border-radius:20px; padding:26px; }
.value-card span { color:var(--maroon); font-size:12px; font-weight:800; }
.value-card h3 { font-size:18px; margin:14px 0 8px; }
.value-card p { color:var(--muted); font-size:13px; margin:0; }

/* Tentang: documentary / personal art direction */
.about-documentary-image {
  background: var(--maroon-soft);
}

.about-documentary-image img {
  height: clamp(360px, 42vw, 560px);
  object-position: center 46%;
}

.about-hero {
  padding: 72px 0 96px;
  background: var(--cream);
}

.about-hero::before,
.about-hero::after {
  display: none;
}

.about-hero .page-hero-grid {
  grid-template-columns: 1.15fr .85fr;
  gap: 100px;
  align-items: end;
}

.about-hero .page-hero-note {
  align-self: end;
  padding: 0 0 8px 32px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--maroon);
  border-radius: 0;
  box-shadow: none;
}

.about-hero .page-hero-note strong {
  font-size: 20px;
}

.about-hero h1 {
  max-width: 780px;
  font-size: clamp(48px, 6vw, 78px);
}

.about-story-section {
  padding-block: 76px 88px;
}

.about-story-section .story-grid {
  grid-template-columns: .95fr 1.05fr;
  gap: 72px;
  align-items: center;
}

.about-story-section .story-image {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1.45 / 1;
  border-radius: 0;
}
.about-story-section .story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-story-section .text-block {
  padding-top: 0;
}

.about-values-section .center-heading {
  max-width: 680px;
  margin-left: 0;
  text-align: left;
}

.about-values-section .center-heading .eyebrow {
  padding: 0;
  border: 0;
  background: none;
}

.about-values-section .center-heading h2 {
  max-width: 20ch;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.12;
}

.about-values-section .center-heading h2 em {
  color: inherit;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}

.about-value-sequence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 50px;
  border-top: 1px solid var(--line);
}

.about-value-sequence .value-card {
  padding: 24px 28px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.about-value-sequence .value-card:first-child {
  padding-left: 0;
}

.about-value-sequence .value-card:last-child {
  padding-right: 0;
}

.about-value-sequence .value-card h3 {
  font-size: 24px;
  margin-top: 22px;
}

.about-value-sequence .value-card p {
  max-width: 250px;
  font-size: 14px;
  line-height: 1.65;
}

.about-closing-section {
  padding: 40px 0 46px;
  background: var(--cream);
  border-top: 1px solid var(--line);
}

.about-closing {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
  gap: 48px;
  align-items: end;
  padding: 24px 0;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.about-closing-label {
  display: block;
  margin-bottom: 18px;
  font: 700 12px/1.2 "DM Sans", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--maroon);
}

.about-closing-copy h2 {
  max-width: 680px;
  margin: 0;
}

.about-closing-copy h2 em {
  display: block;
  color: var(--maroon);
}

.about-closing-copy p {
  max-width: 540px;
  margin: 18px 0 26px;
  color: var(--muted);
}

.about-closing .btn-primary {
  background: var(--maroon);
  color: var(--white);
}

.about-closing-quote {
  margin: 0 0 0 auto;
  padding: 0 0 0 28px;
  border-left: 1px solid var(--maroon);
  color: var(--ink);
}

.about-closing-quote span {
  display: block;
  margin-bottom: 10px;
  font: 500 22px/1 "Instrument Sans", "DM Sans", sans-serif;
  color: var(--maroon);
}

.about-closing-quote p {
  max-width: 30ch;
  margin: 0 0 12px;
  font: 600 clamp(19px, 2vw, 24px)/1.42 "Instrument Sans", "DM Sans", sans-serif;
  color: var(--ink);
}

.about-closing-quote cite {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  letter-spacing: .04em;
}
.mini-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:42px; }
.mini-stats div { padding:22px 24px; border-right:1px solid var(--line); }.mini-stats div:last-child{border-right:0;}.mini-stats strong{display:block;font:700 26px/1.1 "Instrument Sans","DM Sans",sans-serif;color:var(--maroon)}.mini-stats span{font-size:12px;color:var(--muted)}
.program-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.program-detail-card {
  background: linear-gradient(180deg, #fffdfc 0%, #f8f3f1 100%);
  border:1px solid rgba(122,31,43,0.08);
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 16px 32px rgba(77,31,35,0.05);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.program-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px rgba(77,31,35,0.10);
}
.program-detail-card .program-image { height:300px; }
.program-detail-card .program-content { padding:28px; }
.program-detail-card h2 { font-size:30px; margin:13px 0 8px; }
.program-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.program-meta span {
  padding:7px 10px;
  border-radius:999px;
  background: linear-gradient(135deg, #f8e8ec, #f1d9df);
  color:var(--maroon);
  font-size:12px;
  font-weight:800;
}
.program-flow { margin-top:16px; border-top:1px solid var(--line); }.program-flow div{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;font-size:13px}.program-flow strong{color:var(--maroon);font-size:12px;width:22px}

/* Program: image-led / story-driven art direction */
.program-page .page-hero::before,
.program-page .page-hero::after {
  display: none;
}

.program-page .page-hero-note {
  padding: 0 0 8px 30px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--maroon);
  border-radius: 0;
  box-shadow: none;
}

.program-page .program-detail-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 28px;
}

.program-page .program-detail-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.program-page .program-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 54px;
  align-items: center;
  padding: 0 0 72px;
  border-bottom: 1px solid var(--line);
}

.program-page .program-featured .program-image {
  height: 520px;
}

.program-page .program-featured .program-content {
  padding: 0;
}

.program-page .program-featured h2 {
  max-width: 520px;
  font-size: clamp(36px, 4.5vw, 60px);
  letter-spacing: -.04em;
}

.program-page .program-featured .program-content > p {
  max-width: 470px;
  font-size: 16px;
  line-height: 1.7;
}

.program-page .program-supporting {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: 30px;
  align-items: start;
  margin-top: 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.program-page .program-supporting .program-image {
  height: 220px;
}

.program-page .program-supporting .program-content {
  padding: 0 20px 0 0;
}

.program-page .program-supporting h2 {
  font-size: 32px;
  margin: 10px 0 8px;
}

.program-page .program-supporting .program-meta {
  gap: 6px 12px;
  margin-top: 14px;
}

.program-page .program-supporting .program-meta span {
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.program-page .program-supporting .tag {
  padding: 0;
  background: none;
  color: var(--maroon);
  font-size: 11px;
}

.program-page .program-supporting .program-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.program-page .program-supporting .program-flow div {
  display: block;
  padding: 12px 0 0;
  border-bottom: 0;
  font-size: 12px;
}

.program-page .program-supporting .program-flow strong {
  display: block;
  margin-bottom: 5px;
}

.program-page > .section:last-child {
  padding-top: 76px;
}

.program-page > .section:last-child .join-card {
  min-height: 0;
  grid-template-columns: 1.2fr .8fr;
  padding: 48px 0;
  background: transparent;
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.program-page > .section:last-child .join-copy p {
  color: var(--muted);
}

.program-page > .section:last-child .join-copy h2 em {
  color: var(--maroon);
}

.program-page > .section:last-child .eyebrow.light {
  color: var(--maroon);
}

.program-page > .section:last-child .join-note {
  padding-left: 30px;
  border-left: 1px solid var(--maroon);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  transform: none;
}

.program-page > .section:last-child .join-note span {
  color: var(--maroon);
}

.program-page > .section:last-child .join-note p {
  color: var(--ink);
}

.program-page > .section:last-child .join-note small {
  color: var(--muted);
}

@media (max-width: 960px) {
  .program-page .program-featured {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .program-page .program-featured .program-image {
    height: 400px;
  }
}

@media (max-width: 640px) {
  .program-page .page-hero-note {
    padding-left: 20px;
  }

  .program-page .program-featured {
    display: block;
    padding-bottom: 48px;
  }

  .program-page .program-featured .program-image {
    height: 280px;
    margin-bottom: 30px;
  }

  .program-page .program-featured .program-content {
    padding: 0;
  }

  .program-page .program-featured h2 {
    font-size: 38px;
  }

  .program-page .program-supporting {
    display: block;
    margin-top: 0;
    padding: 26px 0;
  }

  .program-page .program-supporting .program-image {
    height: 210px;
    margin-bottom: 22px;
  }

  .program-page .program-supporting .program-content {
    padding: 0;
  }

  .program-page .program-supporting h2 {
    font-size: 28px;
  }

  .program-page .program-supporting .program-flow {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .program-page > .section:last-child .join-card {
    display: block;
    padding: 34px 0;
  }

  .program-page > .section:last-child .join-note {
    margin-top: 28px;
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--maroon);
  }
}
.event-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.event-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,233,235,0.74));
  border:1px solid rgba(122,31,43,0.1);
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 18px 34px rgba(77,31,35,0.06);
}
.event-visual {
  position:relative;
  height:220px;
  overflow:hidden;
}
.event-visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.event-body {
  padding: 24px 22px 22px;
}
.event-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.status-open {
  background: rgba(34, 126, 86, 0.10);
  color: #0d6b4d;
}
.status-limited {
  background: rgba(122,31,43,0.10);
  color: var(--maroon);
}
.event-card h2 {
  font-size:22px;
  margin: 18px 0 12px;
  line-height:1.15;
}
.event-card p {
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.event-meta {
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  margin: 18px 0 20px;
  color: var(--muted);
  font-size:12px;
  font-weight:700;
}
.event-meta span {
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.gallery-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }.filter-chip{border:1px solid var(--line);background:var(--white);padding:9px 13px;border-radius:999px;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}.filter-chip.active{background:var(--maroon);color:white;border-color:var(--maroon)}
.gallery-caption { padding:14px 0 0; }.gallery-caption strong{font-size:14px}.gallery-caption span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
@media (max-width: 960px) {
  .event-grid { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .event-card h2 { font-size:20px; }
  .event-body { padding:18px 18px 20px; }
  .event-meta { gap:8px 12px; }
}

/* Pendaftaran: quiet, functional event registration */
.registration-page { padding-top:0; }
.registration-page .site-header { position:fixed; }
.registration-page main [id] { scroll-margin-top:calc(var(--site-header-height) + 16px); }
.registration-intro { padding:48px 0 42px; background:var(--cream); border-bottom:1px solid var(--line); }
.registration-back { display:inline-block; padding-block:12px; margin:-12px 0 12px; color:var(--maroon); font-size:13px; font-weight:700; }
.registration-intro h1 { max-width:680px; margin:0; font-size:clamp(38px, 5vw, 58px); line-height:1.02; }
.registration-intro p { margin:22px 0 4px; font-size:18px; }
.registration-intro p strong { color:var(--maroon); }
.registration-intro .container > span { display:block; max-width:620px; color:var(--muted); font-size:14px; }
.registration-section { padding:64px 0 104px; background:var(--white); }
.registration-page .registration-shell { display:block; }
.registration-event-layout { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(320px, .65fr); grid-template-areas:"back summary" "image summary" "content summary"; gap:18px 64px; align-items:start; }
.registration-event-back { grid-area:back; }
.registration-event-image { grid-area:image; width:100%; aspect-ratio:1.45 / 1; margin:0; overflow:hidden; border-radius:3px; background:var(--sand); }
.registration-event-image img { display:block; width:100%; height:100%; object-fit:cover; }
.registration-event-content { grid-area:content; min-width:0; }
.registration-page .summary-card { grid-area:summary; min-width:0; overflow:visible; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.registration-summary-sticky { position:sticky; top:calc(var(--site-header-height) + 28px); padding:26px 28px 28px; background:var(--cream); border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.registration-summary-topline { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; color:var(--muted); font-size:12px; font-weight:700; }
.registration-event-category { margin:0; color:var(--maroon); font-size:12px; font-weight:800; }
.registration-page .summary-card h2 { margin:0; font-size:clamp(30px, 3.1vw, 43px); line-height:1.06; letter-spacing:-.03em; text-wrap:balance; }
.event-summary { margin:28px 0 22px; }
.event-summary div { display:grid; grid-template-columns:72px minmax(0, 1fr); gap:16px; padding:11px 0; border-top:1px solid var(--line); }
.event-summary div:last-child { border-bottom:1px solid var(--line); }
.event-summary dt { color:var(--muted); font-size:12px; }
.event-summary dd { margin:0; overflow-wrap:anywhere; font-size:13px; font-weight:700; line-height:1.45; }
.registration-summary-cta { width:100%; min-height:48px; }
.registration-content-nav { display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:8px; padding:0 0 18px; border-bottom:1px solid var(--ink); }
.registration-content-nav a { min-height:40px; display:inline-flex; align-items:center; color:var(--maroon); font-size:12px; font-weight:700; text-decoration:none; }
.registration-content-nav a:hover { text-decoration:underline; text-underline-offset:4px; }
.registration-detail { padding:30px 0; border-bottom:1px solid var(--line); }
.registration-detail h3 { margin:0 0 12px; font-size:clamp(22px, 2.2vw, 28px); line-height:1.2; }
.registration-detail p { max-width:68ch; margin:0; color:var(--ink); font-size:15px; line-height:1.75; white-space:pre-line; }
.registration-detail ul { margin:0; padding-left:20px; color:var(--ink); font-size:15px; line-height:1.7; }
.registration-detail li + li { margin-top:7px; }
.registration-detail li::marker { color:var(--maroon); }
.registration-detail-note { max-width:68ch; margin:22px 0; color:var(--muted); font-size:12px; line-height:1.6; }
.registration-page .registration-card { overflow:visible; margin-top:72px; padding:48px 0 8px; background:transparent; border:0; border-top:1px solid var(--ink); border-radius:0; box-shadow:none; }
@media (min-width:1024px) {
  .registration-event-content { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:40px; align-items:start; }
  .registration-content-nav,
  #eventDescriptionSection,
  #eventRequirementsSection,
  .registration-detail-note,
  .registration-event-content > .text-link { grid-column:1 / -1; }
  #eventActivitiesSection,
  #eventBenefitsSection { grid-column:span 1; }
  .registration-event-content:has(#eventActivitiesSection.hidden) #eventBenefitsSection,
  .registration-event-content:has(#eventActivitiesSection[hidden]) #eventBenefitsSection,
  .registration-event-content:has(#eventBenefitsSection.hidden) #eventActivitiesSection,
  .registration-event-content:has(#eventBenefitsSection[hidden]) #eventActivitiesSection { grid-column:1 / -1; }
}
.registration-form-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; }
.registration-form-heading h2 { margin:0; font-size:28px; }
.registration-form-heading p { margin:0; color:var(--muted); font-size:12px; }
.registration-page .form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 18px; }
.registration-page .field { display:grid; gap:8px; min-width:0; }
.registration-page .field.full { grid-column:1 / -1; }
.registration-page .field label { color:var(--ink); font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; }
.registration-page .field input,
.registration-page .field textarea { width:100%; min-width:0; min-height:50px; padding:13px 14px; border:1px solid #cfc4c5; border-radius:6px; background:var(--white); color:var(--ink); font:inherit; resize:vertical; }
.registration-page .field textarea { min-height:116px; }
.registration-page .field input:focus,
.registration-page .field textarea:focus { outline:3px solid rgba(122,31,43,.12); outline-offset:1px; border-color:var(--maroon); box-shadow:none; }
.registration-page .field input[aria-invalid="true"] { border-color:var(--maroon-deep); }
.registration-page .field-error { color:var(--maroon-deep); font-size:12px; font-weight:600; }
.registration-page .field-counter { color:var(--muted); font-size:12px; }
.registration-page .check-row { display:flex; align-items:flex-start; gap:11px; color:var(--muted); font-size:13px; font-weight:400; line-height:1.55; }
.registration-page .check-row input { width:17px; min-height:17px; height:17px; margin:2px 0 0; padding:0; flex:0 0 auto; accent-color:var(--maroon); }
.registration-page .form-actions { display:flex; align-items:center; justify-content:flex-start; gap:20px; margin-top:28px; }
.registration-page .form-actions p { max-width:330px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.registration-page .form-actions button:disabled { cursor:wait; opacity:.65; }
.registration-message { margin:24px 0 0; padding:12px 0 12px 16px; border-left:3px solid var(--maroon); color:var(--ink); font-size:13px; }
.registration-message.is-error { border-left-color:#9b2c2c; }
.registration-message.is-success { border-left-color:#2d7950; }
.registration-page .payment-stage { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:64px; margin-top:56px; padding:40px 0; border-top:1px solid var(--line); background:var(--cream); }
.registration-page .payment-stage[hidden], .registration-page .payment-state[hidden], .registration-page .registration-confirmation[hidden] { display:none; }
.payment-primary, .payment-details { min-width:0; }
.payment-stage .payment-qr-placeholder[hidden], .payment-stage .payment-countdown[hidden] { display:none; }
.payment-primary { padding-inline:24px; }
.payment-primary h2, .registration-confirmation h2 { margin:0 0 16px; font-size:clamp(30px,3.5vw,44px); }
.payment-primary > p { max-width:50ch; color:var(--muted); }
.payment-amount { display:grid; gap:6px; margin:28px 0; }
.payment-amount span, .payment-countdown span { font-size:13px; color:var(--muted); }
.payment-amount strong { font-family:"Instrument Sans","DM Sans",sans-serif; color:var(--maroon); font-size:clamp(32px,4vw,48px); line-height:1.15; overflow-wrap:anywhere; }
.payment-qr-placeholder { display:flex; align-items:center; justify-content:center; width:min(100%,300px); aspect-ratio:1; margin-inline:auto; padding:10px; border:1px solid var(--line); border-radius:4px; background:var(--white); }
.payment-qr-placeholder img { display:block; width:100%; height:100%; object-fit:contain; }
.payment-qr-placeholder p, .payment-state p, .payment-details > p { color:var(--muted); font-size:14px; line-height:1.65; }
.payment-countdown { display:grid; gap:4px; width:min(100%,280px); margin:12px auto 20px; text-align:center; }
.payment-countdown strong { font-size:24px; font-variant-numeric:tabular-nums; color:var(--muted); }
.payment-countdown small { color:var(--muted); font-size:12px; }
.payment-state { padding-top:20px; border-top:1px solid var(--line); }
.payment-state > strong { color:var(--maroon); }
.payment-back-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:12px; font-weight:600; color:var(--muted); }
.payment-back-link:hover { color:var(--maroon); }
.payment-back-link span { margin-left:0; }
.payment-back-link[hidden] { display:none; }
.payment-retry-error { max-width:48ch; margin:10px 0 0; color:var(--maroon-deep); font-size:13px; font-weight:600; line-height:1.5; }
.payment-retry-error[hidden] { display:none; }
.registration-payment-window { margin:14px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }
.registration-payment-window[hidden], .registration-resume[hidden] { display:none; }
.registration-resume { margin-top:12px; }
.registration-onboarding { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.registration-onboarding h3 { margin:0 0 8px; font-size:20px; }
.registration-onboarding p { max-width:48ch; margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.65; }
.registration-onboarding .btn { display:inline-flex; align-items:center; gap:8px; min-height:48px; }
.calendar-actions { margin-top:22px; }
.calendar-actions p { margin-bottom:12px; }
.calendar-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.payment-details { padding-left:32px; border-left:1px solid var(--line); }
.payment-details h3 { margin:0 0 24px; font-size:22px; }
.payment-details dl, .registration-confirmation dl { margin:0; }
.registration-status-link { margin:18px 0 0; }
.payment-details dl > div, .registration-confirmation dl > div { padding:16px 0; border-bottom:1px solid var(--line); }
.payment-details dt, .registration-confirmation dt { font-size:12px; color:var(--muted); }
.payment-details dd, .registration-confirmation dd { margin:6px 0 0; overflow-wrap:anywhere; font-weight:600; }
.registration-page .payment-stage { grid-template-columns:minmax(0, 720px); justify-content:center; gap:0; max-width:760px; margin:32px auto 0; padding:0 0 36px; border:1px solid var(--line); background:var(--cream); }
.registration-page .payment-header { position:relative; padding:20px 28px 22px; background:var(--maroon); color:var(--white); }
.registration-page .payment-header-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.registration-page .payment-header-row > div:first-child { min-width:0; }
.registration-page .payment-header h2 { max-width:13ch; margin:5px 0 0; color:var(--white); font-size:clamp(27px, 4vw, 36px); letter-spacing:-.035em; line-height:1.04; }
.registration-page .payment-eyebrow { color:inherit; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.registration-page .payment-back-link { min-height:36px; margin:0 0 15px; color:rgba(255,255,255,.9); font-size:13px; }
.registration-page .payment-back-link:hover { color:var(--white); }
.registration-page .payment-countdown { display:grid; gap:3px; width:auto; min-width:128px; margin:0; padding:10px 13px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.07); text-align:right; }
.registration-page .payment-countdown span, .registration-page .payment-countdown small { color:rgba(255,255,255,.78); font-size:10px; }
.registration-page .payment-countdown strong { color:var(--white); font-size:21px; font-variant-numeric:tabular-nums; letter-spacing:.02em; line-height:1.1; }
.registration-page .payment-primary { display:grid; justify-items:center; padding:24px 28px 0; }
.registration-page .payment-intro { display:none; }
.registration-page .payment-status-row { width:100%; }
.registration-page .payment-status-row .payment-state { padding:0 0 14px; border:0; text-align:center; }
.registration-page .payment-state > strong { display:none; }
.registration-page .payment-state p { margin:0; font-size:13px; }
.registration-page .payment-amount { justify-items:center; gap:2px; margin:0 0 16px; }
.registration-page .payment-amount span { font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
.registration-page .payment-amount strong { font-size:clamp(28px, 6vw, 40px); }
.registration-page .payment-qr-section { display:grid; justify-items:center; width:100%; }
.registration-page .payment-qr-heading { display:flex; align-items:baseline; justify-content:center; gap:10px; margin-bottom:12px; }
.registration-page .payment-qr-heading .payment-eyebrow { color:var(--maroon); }
.registration-page .payment-qr-heading p { margin:0; color:var(--muted); font-size:12px; text-align:center; }
.registration-page .payment-qr-placeholder { width:min(100%, 340px); padding:12px; border-color:#e5ded8; border-radius:2px; }
.registration-page .payment-download, .registration-page .payment-copy { min-height:44px; margin-top:12px; padding:8px 16px; border:1px solid var(--line); background:transparent; color:var(--maroon); font:600 13px "DM Sans", sans-serif; cursor:pointer; }
.registration-page .payment-download:hover, .registration-page .payment-copy:hover { border-color:var(--maroon); }
.registration-page .payment-download-note { max-width:44ch; margin:8px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.registration-page .payment-check, .registration-page .payment-retry { width:min(100%, 420px); min-height:48px; margin-top:18px; }
.registration-page .payment-retry[hidden], .registration-page .payment-check[hidden] { display:none; }
.registration-page .payment-retry-error { width:100%; text-align:center; }
.registration-page .payment-guide { width:100%; margin-top:24px; padding-top:17px; border-top:1px solid var(--line); }
.registration-page .payment-guide h3 { margin:0 0 8px; font-size:15px; }
.registration-page .payment-guide ol { display:grid; gap:5px; margin:0; padding-left:20px; color:var(--muted); font-size:12px; line-height:1.5; }
.registration-page .payment-guide[hidden], .registration-page .payment-amount[hidden] { display:none; }
.registration-page .payment-details { width:100%; margin-top:18px; padding:14px 28px 0; border:0; border-top:1px solid var(--line); }
.registration-page .payment-details dl { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 18px; }
.registration-page .payment-details dl > div { padding:8px 0; }
.registration-page .payment-details dd { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.registration-page .payment-details .payment-copy { flex:none; min-height:36px; margin:0; padding:5px 12px; }
.registration-page .payment-recovery-error { grid-column:1; width:calc(100% - 56px); margin:20px 28px 0; padding:18px; border:1px solid var(--line); }
.registration-page .payment-recovery-error strong { color:var(--maroon); }
.registration-page .payment-recovery-error p { color:var(--muted); font-size:13px; }
.registration-page .payment-recovery-error[hidden] { display:none; }
.registration-page .payment-stage.is-recovery-error .payment-primary,
.registration-page .payment-stage.is-recovery-error .payment-details { display:none; }
.registration-page .payment-check:focus-visible, .registration-page .payment-download:focus-visible, .registration-page .payment-copy:focus-visible, .registration-page .payment-back-link:focus-visible { outline:3px solid var(--maroon); outline-offset:3px; }
.registration-page .payment-check:disabled { opacity:.7; cursor:wait; }
.registration-page .payment-stage.payment_paid .payment-qr-heading,
.registration-page .payment-stage.payment_paid .payment-amount { display:none; }
.registration-page .payment-stage.payment_paid .payment-qr-section,
.registration-page .payment-stage.payment_expired .payment-qr-section,
.registration-page .payment-stage.payment_failed .payment-qr-section,
.registration-page .payment-stage.payment_refunded .payment-qr-section,
.registration-page .payment-stage.payment_deadline_passed .payment-qr-section { display:none; }
.registration-page .payment-stage.payment_paid .payment-primary { padding-top:26px; }
.registration-page .payment-stage.payment_paid .payment-state p { font-size:15px; }
.registration-page .payment-stage.payment_paid .payment-intro,
.registration-page .payment-stage.payment_expired .payment-intro,
.registration-page .payment-stage.payment_failed .payment-intro,
.registration-page .payment-stage.payment_deadline_passed .payment-intro { display:block; margin:0; text-align:center; }
.registration-page .payment-back-link:focus-visible { outline-color:var(--white); }
.registration-confirmation { margin-top:48px; padding:32px 0; border-top:1px solid var(--line); max-width:680px; }
.registration-confirmation-event { display:flex; align-items:center; gap:16px; margin:0 0 20px; padding:14px; border-radius:var(--radius-md); background:var(--maroon-soft); }
.registration-confirmation-event img { flex:none; width:64px; aspect-ratio:4 / 5; border-radius:8px; background:var(--cream); object-fit:contain; }
.registration-confirmation-event p { margin:0; line-height:1.5; }
.registration-confirmation-event strong { display:block; color:var(--maroon); font-size:17px; }
.registration-confirmation-event span { color:var(--muted); font-size:14px; }
@media (max-width:640px) {
  .registration-page .payment-stage { grid-template-columns:1fr; gap:32px; margin-top:40px; padding:28px 6px; }
  .site-header .nav {
    width: 100%;
    padding: 8px 20px 16px;
    gap: 0;
  }
  .site-header .nav a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .payment-qr-placeholder, .payment-countdown { width:min(100%,280px); margin-left:auto; margin-right:auto; }
  .payment-details { padding:24px 0 0; border-left:0; border-top:1px solid var(--line); }
}
@media (max-width:640px) {
  .registration-page .payment-stage { grid-template-columns:minmax(0,1fr); gap:0; margin:24px 0 0; padding:0 0 24px; }
  .registration-page .payment-header { padding:16px 16px 18px; }
  .registration-page .payment-back-link { margin-bottom:12px; }
  .registration-page .payment-header-row { align-items:center; gap:12px; }
  .registration-page .payment-header h2 { max-width:12ch; font-size:clamp(24px, 7vw, 29px); }
  .registration-page .payment-countdown { min-width:112px; padding:8px 10px; }
  .registration-page .payment-countdown strong { font-size:19px; }
  .registration-page .payment-countdown small { max-width:130px; font-size:10px; }
  .registration-page .payment-primary { padding:20px 16px 0; }
  .registration-page .payment-qr-placeholder { width:min(100%, 320px); }
  .registration-page .payment-qr-heading { display:grid; justify-items:center; gap:3px; }
  .registration-page .payment-details { margin-top:16px; padding:12px 16px 0; }
  .registration-page .payment-details dl { grid-template-columns:1fr; }
  .registration-page .payment-recovery-error { width:calc(100% - 32px); margin:16px; }
}
 .registration-fallback { max-width:720px; padding:42px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.registration-fallback h2 { margin:0 0 12px; font-size:32px; }
.registration-fallback p { max-width:590px; margin:0 0 20px; color:var(--muted); }
@media (max-width:960px) {
  .registration-event-layout { grid-template-columns:minmax(0, 1fr); grid-template-areas:"back" "image" "summary" "content"; gap:24px; }
  .registration-event-image { max-height:520px; }
  .registration-summary-sticky { position:static; }
  .registration-page .registration-card { margin-top:56px; padding-top:42px; }
}
@media (max-width:640px) {
  .registration-intro { padding:34px 0 32px; }
  .registration-intro h1 { font-size:38px; }
  .registration-section { padding:48px 0 76px; }
  .registration-event-layout { gap:24px; }
  .registration-event-image { aspect-ratio:1.4 / 1; max-height:none; }
  .registration-summary-sticky { padding:22px 20px 24px; }
  .registration-page .summary-card h2 { font-size:32px; }
  .registration-content-nav { gap:4px 18px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .registration-content-nav::-webkit-scrollbar { display:none; }
  .registration-content-nav a { flex:0 0 auto; }
  .registration-detail { padding:25px 0; }
  .registration-detail p,
  .registration-detail ul { font-size:14px; }
  .registration-page .registration-card { margin-top:44px; padding-top:36px; }
  .registration-page .form-grid { grid-template-columns:1fr; }
  .registration-page .form-actions { align-items:flex-start; flex-direction:column; }
  .registration-page .form-actions .btn { width:100%; }
}
.volunteer-grid { display:grid; grid-template-columns:1fr .9fr; gap:80px; align-items:start; }
.steps.large { margin-top:20px; }.steps.large div{padding:23px 0}.steps.large span{color:var(--muted);font-size:13px}
.quote-card {
  background: linear-gradient(135deg, rgba(122,31,43,0.98), rgba(101,25,35,0.96));
  color: white;
  border-radius: 28px;
  padding: 42px;
  position: sticky;
  top: 110px;
  box-shadow: 0 28px 48px rgba(66, 20, 25, 0.14);
  border: 1px solid rgba(255,255,255,0.08);
}
.quote-card .quote-mark{font-size:64px; color:#f9dfe5}.quote-card blockquote{font:700 25px/1.3 "Instrument Sans","DM Sans",sans-serif;margin:18px 0 25px}.quote-card p{color:#f1cdd1;font-size:13px}
.quote-card .btn-light {
  background: rgba(255,255,255,0.96);
  color: var(--maroon);
  box-shadow: 0 14px 24px rgba(0,0,0,0.1);
}

/* Relawan: human editorial journey */
.volunteer-hero { padding:56px 0 82px; background:var(--cream); border-bottom:1px solid var(--line); }
.volunteer-hero .breadcrumb { margin-bottom:38px; }
.volunteer-hero-grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:70px; align-items:center; }
.volunteer-hero-copy { max-width:510px; }
.volunteer-label { display:block; margin-bottom:16px; color:var(--maroon); font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.volunteer-hero h1 { max-width:520px; margin:0; font-size:clamp(46px, 5.6vw, 72px); line-height:.98; letter-spacing:-.045em; text-wrap:balance; }
.volunteer-hero h1 em { display:block; color:var(--maroon); }
.volunteer-hero-copy > p { max-width:480px; margin:26px 0 0; color:var(--muted); font-size:16px; line-height:1.7; }
.volunteer-hero-note { display:grid; gap:5px; margin-top:34px; padding:16px 0 0 20px; border-top:1px solid var(--line); border-left:1px solid var(--maroon); }
.volunteer-hero-note strong { font-family:"Instrument Sans","DM Sans",sans-serif; font-size:15px; }
.volunteer-hero-note span { color:var(--muted); font-size:12px; line-height:1.6; }
.volunteer-hero-image { min-height:540px; margin:0; overflow:hidden; border-radius:4px; background:var(--sand); }
.volunteer-hero-image img { width:100%; height:100%; min-height:540px; object-fit:cover; object-position:center; }

.volunteer-process { padding:104px 0 112px; background:var(--white); }
.volunteer-process-grid { display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); gap:96px; align-items:start; }
.volunteer-process-heading { max-width:470px; }
.volunteer-process-heading h2 { margin:0; font-size:clamp(36px, 4.6vw, 58px); line-height:1.08; text-wrap:balance; }
.volunteer-process-heading h2 em { display:block; color:var(--maroon); }
.volunteer-steps { border-top:1px solid var(--ink); }
.volunteer-steps > div { display:grid; grid-template-columns:52px minmax(0, 1fr); gap:20px; padding:24px 0 26px; border-bottom:1px solid var(--line); }
.volunteer-steps > div > strong { padding-top:3px; color:var(--maroon); font-family:"Instrument Sans","DM Sans",sans-serif; font-size:12px; font-variant-numeric:tabular-nums; }
.volunteer-steps span { display:grid; gap:5px; }
.volunteer-steps b { font-family:"Instrument Sans","DM Sans",sans-serif; font-size:19px; }
.volunteer-steps small { color:var(--muted); font-size:13px; line-height:1.55; }

.volunteer-expectations { background:var(--cream); }
.volunteer-expectations .faq-grid { align-items:start; }
.volunteer-expectations .eyebrow { color:var(--maroon); }
.volunteer-expectations h2 { max-width:500px; font-size:clamp(30px,3vw,38px); line-height:1.14; }
.volunteer-expectations h2 em { color:inherit; font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit; }

.volunteer-closing { padding:98px 0 108px; background:var(--white); }
.volunteer-closing-grid { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(300px, .75fr); gap:86px; align-items:center; padding:48px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.volunteer-closing blockquote { max-width:720px; margin:0; font:700 clamp(28px, 3.6vw, 46px)/1.22 "Instrument Sans","DM Sans",sans-serif; letter-spacing:-.035em; text-wrap:balance; }
.volunteer-closing-action { padding-left:30px; border-left:1px solid var(--maroon); }
.volunteer-closing-action p { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.65; }

@media (max-width:960px) {
  .volunteer-hero-grid { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:38px; }
  .volunteer-hero-image,
  .volunteer-hero-image img { min-height:440px; }
  .volunteer-process-grid { grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:52px; }
  .volunteer-closing-grid { grid-template-columns:1fr 1fr; gap:48px; }
}

@media (max-width:640px) {
  .volunteer-hero { padding:38px 0 52px; }
  .volunteer-hero .breadcrumb { margin-bottom:28px; }
  .volunteer-hero-grid { grid-template-columns:1fr; gap:32px; }
  .volunteer-hero h1 { font-size:45px; }
  .volunteer-hero-copy > p { margin-top:20px; font-size:15px; }
  .volunteer-hero-note { margin-top:26px; }
  .volunteer-hero-image,
  .volunteer-hero-image img { min-height:270px; max-height:320px; }
  .volunteer-process { padding:72px 0 78px; }
  .volunteer-process-grid { grid-template-columns:1fr; gap:38px; }
  .volunteer-process-heading h2 { font-size:36px; }
  .volunteer-steps > div { grid-template-columns:38px minmax(0, 1fr); gap:14px; padding:20px 0 22px; }
  .volunteer-expectations { padding:72px 0; }
  .volunteer-closing { padding:68px 0 78px; }
  .volunteer-closing-grid { grid-template-columns:1fr; gap:30px; padding:36px 0; }
  .volunteer-closing blockquote { font-size:29px; }
  .volunteer-closing-action { padding:24px 0 0; border-left:0; border-top:1px solid var(--maroon); }
}
.collaboration-page { background:var(--cream); }
.collaboration-hero { padding:54px 0 88px; border-bottom:1px solid var(--line); }
.collaboration-hero .breadcrumb { margin-bottom:50px; }
.collaboration-hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:72px; align-items:end; }
.collaboration-hero-copy { padding-bottom:24px; }
.collaboration-hero .page-kicker { display:block; margin-bottom:22px; }
.collaboration-hero h1 { max-width:620px; font-size:clamp(48px,5.8vw,76px); line-height:.98; letter-spacing:-.05em; }
.collaboration-hero h1 em { display:block; color:var(--maroon); }
.collaboration-hero-copy > p { max-width:560px; margin:28px 0 0; color:var(--muted); font-size:17px; line-height:1.68; }
.collaboration-hero-image { min-height:560px; margin:0; overflow:hidden; }
.collaboration-hero-image img { width:100%; height:100%; min-height:560px; object-fit:cover; object-position:center; }
.collaboration-section-heading { display:grid; grid-template-columns:minmax(190px,.6fr) minmax(0,1.4fr); gap:50px; align-items:start; margin-bottom:44px; }
.collaboration-section-heading h2 { max-width:700px; font-size:clamp(38px,4.8vw,62px); letter-spacing:-.045em; }
.collaboration-path-list { border-top:1px solid var(--ink); }
.collaboration-path { display:grid; grid-template-columns:160px minmax(0,1.15fr) minmax(190px,.7fr) 150px; gap:34px; align-items:start; padding:38px 0 42px; border-bottom:1px solid var(--line); }
.collaboration-path-label { color:var(--maroon); font-family:"Instrument Sans","DM Sans",sans-serif; font-size:13px; font-weight:600; }
.collaboration-path h3 { max-width:520px; margin:0 0 14px; font-size:clamp(27px,3vw,40px); line-height:1.08; letter-spacing:-.035em; }
.collaboration-path p { max-width:520px; margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.collaboration-path ul { margin:2px 0 0; padding:0; list-style:none; color:var(--muted); font-size:13px; line-height:1.5; }
.collaboration-path li + li { margin-top:10px; }
.collaboration-path-link { justify-self:end; display:inline-flex; gap:10px; padding-bottom:5px; border-bottom:1px solid rgba(122,31,43,.35); color:var(--maroon); font-family:"Instrument Sans","DM Sans",sans-serif; font-size:13px; font-weight:600; white-space:nowrap; }
.collaboration-process { background:var(--white); }
.collaboration-process-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:96px; align-items:start; }
.collaboration-process-intro { position:sticky; top:118px; }
.collaboration-process-intro h2 { max-width:520px; margin-top:16px; font-size:clamp(32px,3.2vw,40px); line-height:1.12; letter-spacing:-.035em; }
.collaboration-process-intro h2 em { color:inherit; font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit; }
.collaboration-process-intro p { max-width:520px; margin:24px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }
.collaboration-steps { border-top:1px solid var(--ink); }
.collaboration-steps > div { display:grid; grid-template-columns:54px minmax(0,1fr); gap:22px; padding:27px 0 30px; border-bottom:1px solid var(--line); }
.collaboration-steps strong { padding-top:4px; color:var(--maroon); font-family:"Instrument Sans","DM Sans",sans-serif; font-size:12px; font-weight:600; }
.collaboration-steps span { display:grid; gap:7px; }
.collaboration-steps b { font-family:"Instrument Sans","DM Sans",sans-serif; font-size:22px; font-weight:600; }
.collaboration-steps small { max-width:440px; color:var(--muted); font-size:14px; line-height:1.55; }
.collaboration-partners { background:var(--white); }
.collaboration-partners-intro { max-width:560px; margin:22px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }
.collaboration-partner-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px; border-top:1px solid var(--ink); }
.collaboration-partner { min-width:0; min-height:180px; padding:32px 24px 30px; border-bottom:1px solid var(--line); }
.collaboration-partner-logo { display:grid; place-items:center; width:72px; height:72px; margin-bottom:24px; border:1px solid var(--maroon); color:var(--maroon); font-family:"Instrument Sans","DM Sans",sans-serif; font-size:16px; font-weight:600; letter-spacing:.04em; }
.collaboration-partner h3 { margin:0; color:var(--ink); font-family:"DM Sans",sans-serif; font-size:15px; font-weight:600; }
.collaboration-closing { padding:90px 0 100px; background:var(--cream); }
.collaboration-closing-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:84px; align-items:center; padding:46px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.collaboration-closing h2 { margin-top:12px; font-size:clamp(42px,5.2vw,66px); letter-spacing:-.045em; }
.collaboration-closing-action { padding-left:34px; border-left:1px solid var(--maroon); }
.collaboration-closing-action p { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.65; }

@media (max-width:960px) {
  .collaboration-hero-grid { grid-template-columns:1fr; gap:36px; }
  .collaboration-hero-copy { max-width:680px; padding-bottom:0; }
  .collaboration-hero-image,
  .collaboration-hero-image img { min-height:380px; max-height:480px; }
  .collaboration-path { grid-template-columns:130px minmax(0,1fr); gap:24px 30px; }
  .collaboration-path ul { grid-column:2; }
  .collaboration-path-link { grid-column:2; justify-self:start; }
  .collaboration-process-grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:54px; }
  .collaboration-closing-grid { grid-template-columns:1fr 1fr; gap:48px; }
}

@media (max-width:640px) {
  .collaboration-hero { padding:36px 0 54px; }
  .collaboration-hero .breadcrumb { margin-bottom:30px; }
  .collaboration-hero-grid { grid-template-columns:1fr; gap:32px; }
  .collaboration-hero-copy { padding-bottom:0; }
  .collaboration-hero h1 { font-size:44px; }
  .collaboration-hero-copy > p { margin-top:20px; font-size:15px; }
  .collaboration-hero-image,
  .collaboration-hero-image img { min-height:280px; max-height:320px; }
  .collaboration-section-heading { grid-template-columns:1fr; gap:14px; margin-bottom:30px; }
  .collaboration-section-heading h2 { font-size:36px; }
  .collaboration-path { grid-template-columns:1fr; gap:16px; padding:28px 0 32px; }
  .collaboration-path h3 { font-size:29px; }
  .collaboration-path ul,
  .collaboration-path-link { grid-column:1; }
  .collaboration-path ul { margin-top:4px; }
  .collaboration-path-link { margin-top:8px; }
  .collaboration-process { padding:72px 0; }
  .collaboration-process-grid { grid-template-columns:1fr; gap:38px; }
  .collaboration-process-intro { position:static; }
  .collaboration-process-intro h2 { font-size:32px; }
  .collaboration-steps > div { grid-template-columns:38px minmax(0,1fr); gap:14px; padding:22px 0 24px; }
  .collaboration-partner-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
  .collaboration-partner { min-height:0; padding:22px 12px 24px; }
  .collaboration-partner-logo { width:52px; height:52px; margin-bottom:18px; }
  .collaboration-closing { padding:68px 0 78px; }
  .collaboration-closing-grid { grid-template-columns:1fr; gap:28px; padding:36px 0; }
  .collaboration-closing-action { padding:24px 0 0; border-left:0; border-top:1px solid var(--maroon); }
}

/* Collaboration page: compact mobile rhythm and restrained partner preview. */
.collaboration-page .collaboration-paths {
  padding-top: 84px;
  padding-bottom: 88px;
}

.collaboration-page .collaboration-process {
  padding-top: 86px;
  padding-bottom: 90px;
}

.collaboration-page .collaboration-partners {
  padding-top: 82px;
  padding-bottom: 86px;
}

.collaboration-page .collaboration-path-label,
.collaboration-page .collaboration-partner h3 {
  letter-spacing: .01em;
}

.collaboration-page .collaboration-path-link {
  min-height: 44px;
  align-items: center;
  transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.collaboration-page .collaboration-path-link:hover,
.collaboration-page .collaboration-path-link:focus-visible {
  border-color: var(--maroon);
  color: var(--maroon-dark);
  transform: translateX(2px);
}

.collaboration-page .collaboration-partner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 176px;
  padding: 30px 24px;
}

.collaboration-page .collaboration-partner-logo {
  width: 76px;
  height: 64px;
  margin-bottom: 20px;
  border: 1px dashed rgba(111, 102, 103, .42);
  background: rgba(242, 238, 233, .46);
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .08em;
}

.collaboration-page .collaboration-partner h3 {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.collaboration-page .collaboration-closing-action .btn-primary {
  min-height: 48px;
  padding-inline: 22px;
}

@media (max-width: 960px) {
  .collaboration-page .site-header .brand-logo {
    height: 70px;
  }

  .collaboration-page .collaboration-hero {
    padding-top: 42px;
    padding-bottom: 62px;
  }

  .collaboration-page .collaboration-hero .breadcrumb {
    margin-bottom: 34px;
  }

  .collaboration-page .collaboration-hero-grid {
    gap: 28px;
  }

  .collaboration-page .collaboration-hero h1 {
    max-width: 680px;
    font-size: clamp(46px, 7.2vw, 62px);
    line-height: 1;
  }

  .collaboration-page .collaboration-hero-copy > p {
    max-width: 620px;
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.6;
  }

  .collaboration-page .collaboration-hero-image,
  .collaboration-page .collaboration-hero-image img {
    min-height: 0;
    height: auto;
    aspect-ratio: 1.55 / 1;
    max-height: none;
  }

  .collaboration-page .collaboration-path {
    padding-top: 32px;
    padding-bottom: 36px;
  }

  .collaboration-page .collaboration-process-grid {
    gap: 48px;
  }
}

@media (max-width: 640px) {
  .collaboration-page .site-header .brand-logo {
    height: 68px;
  }

  .collaboration-page .collaboration-hero {
    padding-top: 28px;
    padding-bottom: 44px;
  }

  .collaboration-page .collaboration-hero .breadcrumb {
    margin-bottom: 24px;
  }

  .collaboration-page .collaboration-hero-grid {
    gap: 24px;
  }

  .collaboration-page .collaboration-hero .page-kicker {
    margin-bottom: 16px;
  }

  .collaboration-page .collaboration-hero h1 {
    max-width: 20ch;
    font-size: clamp(38px, 10.2vw, 42px);
    line-height: 1.02;
    letter-spacing: -.04em;
    text-wrap: balance;
  }

  .collaboration-page .collaboration-hero-copy > p {
    margin-top: 17px;
    font-size: 15px;
    line-height: 1.58;
  }

  .collaboration-page .collaboration-hero-image,
  .collaboration-page .collaboration-hero-image img {
    aspect-ratio: 1.45 / 1;
  }

  .collaboration-page .collaboration-paths {
    padding-top: 58px;
    padding-bottom: 62px;
  }

  .collaboration-page .collaboration-section-heading {
    gap: 11px;
    margin-bottom: 25px;
  }

  .collaboration-page .collaboration-section-heading h2 {
    line-height: 1.04;
  }

  .collaboration-page .collaboration-path {
    gap: 13px;
    padding: 25px 0 29px;
  }

  .collaboration-page .collaboration-path-label {
    font-size: 12px;
  }

  .collaboration-page .collaboration-path h3 {
    font-size: 28px;
    line-height: 1.08;
  }

  .collaboration-page .collaboration-path p {
    line-height: 1.6;
  }

  .collaboration-page .collaboration-path-link {
    margin-top: 5px;
  }

  .collaboration-page .collaboration-process {
    padding-top: 60px;
    padding-bottom: 64px;
  }

  .collaboration-page .collaboration-process-grid {
    gap: 30px;
  }

  .collaboration-page .collaboration-process-intro h2 {
    line-height: 1.05;
  }

  .collaboration-page .collaboration-steps > div {
    padding-top: 20px;
    padding-bottom: 22px;
  }

  .collaboration-page .collaboration-partners {
    padding-top: 58px;
    padding-bottom: 62px;
  }

  .collaboration-page .collaboration-partners-intro {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.62;
  }

  .collaboration-page .collaboration-partner {
    min-height: 142px;
    padding: 20px 12px 22px;
  }

  .collaboration-page .collaboration-partner-logo {
    width: 58px;
    height: 50px;
    margin-bottom: 14px;
    font-size: 12px;
  }

  .collaboration-page .collaboration-closing {
    padding-top: 58px;
    padding-bottom: 66px;
  }

  .collaboration-page .collaboration-closing-grid {
    gap: 24px;
    padding-top: 31px;
    padding-bottom: 32px;
  }

  .collaboration-page .collaboration-closing h2 {
    line-height: 1.04;
  }

  .collaboration-page .collaboration-closing-action .btn-primary {
    width: 100%;
  }
}
.contact-page {
  background: var(--cream);
}

.contact-intro {
  padding: 68px 0 64px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.contact-intro-inner {
  max-width: 940px;
}

.contact-intro .page-kicker {
  margin-top: 32px;
}

.contact-intro h1 {
  max-width: 860px;
  margin-top: 14px;
  font-size: clamp(42px, 5.5vw, 68px);
  line-height: 1.04;
  text-wrap: balance;
}

.contact-intro h1 em {
  display: block;
  color: var(--maroon);
}

.contact-intro p {
  max-width: 690px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}

.contact-section {
  padding: 76px 0 92px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
  gap: 96px;
  align-items: start;
}

.contact-copy h2 {
  max-width: 470px;
  margin-top: 14px;
  font-size: clamp(32px, 4vw, 48px);
}

.contact-copy p {
  max-width: 470px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.contact-methods {
  min-width: 0;
  border-top: 1px solid var(--ink);
}

.contact-methods a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 94px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.contact-methods a > span:first-child {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.contact-methods strong {
  font: 700 18px/1.25 "Instrument Sans", "DM Sans", sans-serif;
  color: var(--ink);
}

.contact-methods small {
  max-width: 470px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.contact-methods a > span:last-child {
  font-size: 18px;
  color: var(--maroon);
  transition: transform .18s var(--ease);
}

.contact-methods a:hover strong,
.contact-methods a:focus-visible strong {
  color: var(--maroon);
}

.contact-methods a:hover > span:last-child,
.contact-methods a:focus-visible > span:last-child {
  transform: translate(2px, -2px);
}

@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .contact-copy p {
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  .contact-intro {
    padding: 44px 0 46px;
  }

  .contact-intro .page-kicker {
    margin-top: 24px;
  }

  .contact-intro h1 {
    font-size: 40px;
  }

  .contact-intro p {
    margin-top: 20px;
  }

  .contact-section {
    padding: 50px 0 64px;
  }

  .contact-grid {
    gap: 32px;
  }

  .contact-methods a {
    min-height: 82px;
    padding: 17px 0;
  }
}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease), transform .55s var(--ease)}.reveal.visible{opacity:1;transform:none}
@media (max-width:960px){.page-hero-grid,.story-grid,.volunteer-grid{grid-template-columns:1fr;gap:38px}.value-grid,.collab-grid,.program-detail-grid{grid-template-columns:1fr 1fr}.quote-card{position:static}.story-image{min-height:380px}.mini-stats{grid-template-columns:1fr 1fr}.mini-stats div:nth-child(2){border-right:0}.mini-stats div:last-child{grid-column:span 2;border-top:1px solid var(--line)}}
@media (max-width:640px){.page-hero{padding:55px 0}.page-hero-grid{gap:28px}.value-grid,.collab-grid,.program-detail-grid{grid-template-columns:1fr}.mini-stats{grid-template-columns:1fr}.mini-stats div,.mini-stats div:nth-child(2),.mini-stats div:last-child{border-right:0;border-bottom:1px solid var(--line);grid-column:auto}.mini-stats div:last-child{border-bottom:0}.program-detail-card .program-image{height:240px}}

@media (max-width:960px) {
  .about-hero .page-hero-grid,
  .about-story-section .story-grid,
  .about-closing {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-hero .page-hero-note {
    max-width: 520px;
  }

  .about-story-section .story-image {
    min-height: 420px;
    aspect-ratio: auto;
  }

  .about-story-section .text-block {
    padding-top: 0;
  }
}

@media (max-width:640px) {
  .about-documentary-image img {
    height: 300px;
  }

  .about-hero {
    padding: 52px 0 68px;
  }

  .about-hero .page-hero-grid {
    gap: 30px;
  }

  .about-hero .page-hero-note {
    padding-left: 20px;
  }

  .about-hero h1 {
    font-size: 42px;
  }

  .about-story-section {
    padding-block: 56px 68px;
  }

  .about-story-section .story-image {
    min-height: 300px;
    aspect-ratio: auto;
  }

  .about-value-sequence {
    display: block;
    margin-top: 34px;
  }

  .about-value-sequence .value-card,
  .about-value-sequence .value-card:first-child,
  .about-value-sequence .value-card:last-child {
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }

  .about-value-sequence .value-card:last-child {
    border-bottom: 0;
  }

  .about-value-sequence .value-card h3 {
    margin-top: 14px;
  }

  .about-closing-section {
    padding: 30px 0 34px;
  }

  .about-closing {
    gap: 20px;
    padding: 18px 0;
  }

  .about-closing-quote {
    margin: 0;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--maroon);
  }

}


.schedule-next { padding: 0 0 28px; }
.next-card { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px 32px; border-radius:26px; background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%); color:var(--white); box-shadow:0 24px 60px rgba(85,19,29,.18); }
.next-card h2 { font-size:28px; margin:2px 0 4px; }
.next-card p { margin:0; color:rgba(255,255,255,.78); font-size:13px; }
.countdown { display:grid; grid-template-columns:repeat(4, minmax(74px, 1fr)); gap:10px; flex-shrink:0; }
.countdown-message { grid-column:1 / -1; }
.countdown > div { min-width:74px; padding:11px 10px; border-radius:15px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); text-align:center; backdrop-filter:blur(10px); }
.countdown strong { display:block; font-family:"Instrument Sans","DM Sans",sans-serif; font-size:28px; line-height:1; }
.countdown span { display:block; margin-top:5px; font-size:10px; opacity:.78; text-transform:uppercase; letter-spacing:.08em; }
.schedule-intro { padding:76px 0 64px; background:var(--cream); border-bottom:1px solid var(--line); }
.schedule-intro-grid { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(280px, .65fr); gap:72px; align-items:end; }
.schedule-intro .breadcrumb { margin-bottom:24px; }
.schedule-intro h1 { max-width:760px; margin:0; line-height:.98; text-wrap:balance; }
.schedule-intro-grid > p { max-width:430px; margin:0 0 5px; padding-left:24px; border-left:1px solid var(--maroon); color:var(--muted); }
.schedule-featured-section { padding:72px 0 78px; background:#f1e9df; border-bottom:1px solid var(--line); }
.schedule-section { padding:76px 0 112px; background:var(--white); }
.schedule-section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:32px; }
.schedule-section-heading .eyebrow { display:block; margin-bottom:10px; }
.schedule-section-heading h2 { max-width:680px; margin:0; font-size:clamp(34px, 4vw, 52px); line-height:1.02; letter-spacing:-.035em; text-wrap:balance; }
.schedule-section-heading > p { max-width:390px; margin:0 0 3px; color:var(--muted); font-size:14px; line-height:1.6; }
.schedule-urgent-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; }
.schedule-urgent-card { min-width:0; display:grid; grid-template-columns:minmax(180px, .82fr) minmax(0, 1.18fr); background:var(--cream); border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.schedule-urgent-card:only-child { grid-column:1 / -1; grid-template-columns:minmax(360px, .9fr) minmax(0, 1.1fr); width:min(100%, 940px); }
.schedule-urgent-image { min-height:100%; margin:0; overflow:hidden; background:var(--sand); }
.schedule-urgent-image img { display:block; width:100%; height:100%; min-height:360px; object-fit:cover; }
.schedule-urgent-image.is-empty::after,
.schedule-card-image.is-empty::after { content:"Foto belum tersedia"; display:grid; width:100%; height:100%; min-height:inherit; place-items:center; padding:20px; color:var(--muted); font-size:12px; }
.schedule-urgent-content { min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:28px; }
.schedule-urgent-content h3 { margin:0; font:700 clamp(25px, 2.3vw, 34px)/1.08 "Instrument Sans","DM Sans",sans-serif; letter-spacing:-.025em; text-wrap:balance; }
.schedule-urgent-content > p:not(.schedule-deadline) { margin:13px 0 20px; color:var(--muted); font-size:13px; line-height:1.6; }
.schedule-deadline { width:100%; display:grid; gap:4px; margin:0 0 20px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.schedule-deadline span { color:var(--maroon); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.schedule-deadline strong { font-size:13px; }
.schedule-discovery { display:grid; grid-template-columns:minmax(260px, .75fr) minmax(0, 1.25fr); gap:28px; align-items:end; margin-bottom:18px; padding:22px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.schedule-search { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; }
.schedule-search input { min-height:46px; padding:10px 13px; border:1px solid #cbbdb2; border-radius:2px; background:var(--white); color:var(--ink); }
.schedule-search input:focus { border-color:var(--maroon); outline:3px solid rgba(122,31,43,.12); outline-offset:2px; }
.schedule-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.filter-btn { min-height:42px; padding:9px 14px; border:1px solid var(--line); border-radius:3px; background:transparent; color:var(--ink); cursor:pointer; font-size:12px; font-weight:700; transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.filter-btn:hover { border-color:var(--maroon); color:var(--maroon); transform:none; }
.filter-btn.active { background:var(--maroon); border-color:var(--maroon); color:var(--white); }
.schedule-count { margin:0 0 24px; color:var(--muted); font-size:12px; }
.schedule-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:46px 32px; }
.schedule-page .schedule-card { min-width:0; display:flex; flex-direction:column; overflow:visible; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; }
.schedule-page .schedule-card:hover { background:transparent; border-color:var(--maroon); box-shadow:none; transform:none; }
.schedule-card-image { width:100%; aspect-ratio:1.55 / 1; min-height:260px; margin:0; overflow:hidden; border-radius:3px; background:var(--sand); }
.schedule-card-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .35s var(--ease); }
.schedule-page .schedule-card:hover .schedule-card-image img { transform:scale(1.015); }
.schedule-card-content { flex:1; display:flex; flex-direction:column; padding:20px 0 22px; }
.schedule-event { min-width:0; }
.schedule-event-head { display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.schedule-category { display:inline-block; color:var(--maroon); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.schedule-event h2 { margin:0; font-size:clamp(24px, 2.25vw, 32px); line-height:1.1; text-wrap:balance; }
.schedule-event p { margin:11px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.schedule-meta { width:100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0; margin:22px 0 0; border-top:1px solid var(--line); }
.schedule-meta div { min-width:0; padding:12px 12px 10px 0; border-bottom:1px solid var(--line); }
.schedule-meta div:first-child { grid-column:1 / -1; }
.schedule-meta dt { color:var(--muted); font-size:10px; }
.schedule-meta dd { margin:3px 0 0; overflow-wrap:anywhere; font-size:12px; font-weight:700; line-height:1.45; }
.status-label { display:flex; align-items:center; gap:7px; color:var(--ink); font-size:11px; font-weight:700; }
.status-label::before { content:""; width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#397253; }
.status-label.limited::before { background:#8b6652; }
.schedule-card-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding-top:18px; }
.schedule-card-footer > strong { color:var(--muted); font-size:11px; font-weight:500; }
.schedule-register { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 17px; border:1px solid rgba(122,31,43,.8); border-radius:3px; background:transparent; color:var(--maroon); font-size:13px; font-weight:800; line-height:1; text-decoration:none; transition:border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease); }
.schedule-register:hover { background:var(--maroon); border-color:var(--maroon); color:var(--white); }
.schedule-register:focus-visible { outline:3px solid rgba(122,31,43,.18); outline-offset:3px; }
.btn-full { width:100%; }
.schedule-empty { margin-top:16px; padding:36px 0; text-align:left; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--muted); }
.schedule-empty strong, .schedule-empty span { display:block; }
.schedule-empty strong { margin-bottom:5px; color:var(--ink); }
.hidden { display:none !important; }
.schedule-note { display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:end; }
.schedule-note h2 { max-width:560px; }
.schedule-note p { margin:0; max-width:620px; color:var(--muted); font-size:15px; }
@media (max-width: 960px) {
  .next-card { align-items:flex-start; flex-direction:column; }
  .countdown { width:100%; }
  .countdown > div { min-width:0; }
  .schedule-intro-grid { gap:42px; }
  .schedule-urgent-grid { grid-template-columns:minmax(0, 1fr); }
  .schedule-urgent-card { grid-template-columns:minmax(260px, .82fr) minmax(0, 1.18fr); }
  .schedule-grid { gap:38px 24px; }
  .schedule-note { grid-template-columns:1fr; gap:20px; }
}
@media (min-width: 641px) {
  .schedule-urgent-image img { min-height:300px; }
  .schedule-urgent-content { padding:24px; }
  .schedule-urgent-content > p:not(.schedule-deadline) { margin:11px 0 16px; }
  .schedule-deadline { margin-bottom:16px; padding:10px 0; }
  .schedule-urgent-content .schedule-meta { margin-top:16px; }
  .schedule-card-image { min-height:0; aspect-ratio:2 / 1; }
  .schedule-card-content { padding:16px 0 18px; }
  .schedule-event-head { margin-bottom:8px; }
  .schedule-event p { margin-top:9px; }
  .schedule-meta { margin-top:16px; }
  .schedule-meta div { padding:9px 10px 8px 0; }
  .schedule-card-footer { padding-top:14px; }
}
@media (max-width: 640px) {
  .next-card { padding:23px 20px; }
  .next-card h2 { font-size:24px; }
  .countdown { grid-template-columns:repeat(4, 1fr); gap:7px; }
  .countdown > div { padding:9px 4px; }
  .countdown strong { font-size:22px; }
  .countdown span { font-size:8px; }
  .schedule-intro { padding:42px 0 38px; }
  .schedule-intro-grid { grid-template-columns:1fr; gap:22px; }
  .schedule-intro-grid > p { padding-left:18px; }
  .schedule-featured-section { padding:44px 0 48px; }
  .schedule-section { padding:48px 0 78px; }
  .schedule-section-heading { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:24px; }
  .schedule-section-heading h2 { font-size:36px; }
  .schedule-discovery { grid-template-columns:minmax(0, 1fr); gap:18px; }
  .schedule-filters { width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .filter-btn { white-space:nowrap; }
  .schedule-urgent-card,
  .schedule-urgent-card:only-child { grid-template-columns:minmax(0, 1fr); }
  .schedule-urgent-image { aspect-ratio:1.55 / 1; min-height:220px; }
  .schedule-urgent-image img { min-height:220px; max-height:300px; }
  .schedule-urgent-content { padding:22px 0 0; }
  .schedule-grid { grid-template-columns:minmax(0, 1fr); gap:34px; }
  .schedule-card-image { min-height:220px; }
  .schedule-card-footer { align-items:stretch; flex-direction:column; }
  .schedule-register { width:100%; }
  .footer-main { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 40px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-location-col { grid-column: 1 / -1; }
  .footer-brand-logo { height: 56px; }
  .footer-col h3 { margin-top: 0; }
  .footer-social { gap: 12px; }
  .footer-social .social-link,
  .footer-social [data-email] { width: fit-content; height: auto; }
  .footer-copy-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
}

.nav a,
.nav a:hover,
.btn,
.btn:hover,
.contact-methods a,
.feature-item,
.program-card,
.program-detail-card,
.schedule-card,
.social-link,
.gallery-item img {
  transition-duration: .18s;
}

.nav a::after,
.section-heading::before,
.menu-toggle span {
  border-radius: 0;
}

.btn {
  min-height: 46px;
  border-radius: 7px;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}

.hero-campaign .btn-ghost {
  min-height: auto;
  border-radius: 0;
}

.btn:focus-visible,
.menu-toggle:focus-visible,
.nav a:focus-visible,
.hero-dot:focus-visible,
.testimonial-arrow:focus-visible,
.testimonial-dot:focus-visible,
.filter-btn:focus-visible,
.accordion-trigger:focus-visible,
.contact-methods a:focus-visible,
.social-link:focus-visible {
  outline: 3px solid rgba(247, 223, 229, .95);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--maroon);
  border-color: var(--maroon);
  box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--maroon-dark);
  border-color: var(--maroon-dark);
  box-shadow: none;
  transform: none;
}

.btn-secondary:hover,
.btn-light:hover,
.btn-outline:hover {
  transform: none;
  box-shadow: none;
}

.section {
  padding: 96px 0;
}

.section-soft {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after,
.testimonial-section::before,
.testimonial-section::after,
.join-card::before,
.join-card::after,
.group-photo::before {
  display: none;
}

.hero-campaign-copy :is(h1, h2),
h1 {
  letter-spacing: -.035em;
}

h1 em,
h2 em {
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.eyebrow,
.page-kicker {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.hero-proof,
.floating-card,
.editorial-wrap,
.program-card,
.program-detail-card,
.event-card,
.schedule-card,
.value-card,
.collab-card,
.registration-card,
.summary-card,
.quote-card,
.page-hero-note,
.testimonial-slide-inner,
.join-card:not(.home-closing) {
  border-radius: var(--radius-card);
  box-shadow: none;
}

.floating-card {
  border: 1px solid var(--line);
}

.hero-doodle {
  display: none;
}

.editorial-wrap {
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
}

.editorial-copy {
  padding: 18px 0;
  max-width: 560px;
}

.editorial-photo,
.main-photo,
.story-image,
.page-hero-visual {
  border-radius: var(--radius-photo);
  box-shadow: none;
}

.editorial-photo {
  min-height: 0;
  aspect-ratio: 1.18 / 1;
}

.program-card,
.program-detail-card,
.schedule-card {
  background: var(--white);
  border-color: var(--line);
}

.program-card:hover,
.program-detail-card:hover,
.schedule-card:hover {
  transform: none;
  border-color: rgba(122, 31, 43, .28);
  box-shadow: none;
}

.program-card::before {
  display: none;
}

.program-card:nth-child(2),
.program-card:nth-child(3),
.program-card:nth-child(2) .program-content,
.program-card:nth-child(3) .program-content {
  background: var(--white);
}

.tag,
.program-meta span,
.status,
.schedule-badge,
.quota,
.filter-btn {
  border-radius: 6px;
}

.testimonial-section {
  background: var(--maroon-dark);
}

.testimonial-slide-inner {
  background: rgba(255, 255, 255, .04);
  box-shadow: none;
  backdrop-filter: none;
}

.join-card:not(.home-closing),
.quote-card,
.collab-card.dark {
  background: var(--maroon-dark);
}

.page-hero {
  background: var(--cream);
}

.about-top-photo {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.page-hero-note,
.registration-card,
.summary-card {
  background: var(--white);
}

.page-hero-visual {
  border: 1px solid var(--line);
}

.field input,
.field select,
.field textarea {
  border-radius: 7px;
  background: var(--white);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: 0 0 0 3px rgba(122, 31, 43, .12);
}

.site-footer {
  background: var(--cream);
  box-shadow: none;
}

.footer-bottom {
  background: var(--cream);
  backdrop-filter: none;
}

.footer-social .social-link,
.social-link {
  box-shadow: none;
}

.footer-social .social-link:hover,
.social-link:hover {
  transform: none;
  box-shadow: none;
}

/* Slow, soft entrance (Aesop-like); transform ends at none so no containing block is left behind. */
.reveal {
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 960px) {
  .editorial-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .editorial-photo {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 72px 0;
  }

  .editorial-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .editorial-photo {
    min-height: 260px;
  }

  .home-page .hero-campaign-copy :is(h1, h2) {
    max-width: 330px;
    font-size: clamp(34px,9.2vw,39px);
    line-height: 1.14;
    letter-spacing: -.015em;
    word-spacing: normal;
  }

  .home-page .hero-campaign-copy :is(h1, h2) .hero-desktop-break {
    display: block;
    height: 0;
    margin: 0;
  }
}

/* Editorial community story */
.impact-editorial {
  padding: 96px 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.impact-editorial-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}

.impact-editorial-copy {
  max-width: 510px;
}

.impact-editorial-kicker {
  display: block;
  margin-bottom: 20px;
  color: var(--maroon);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}

.impact-editorial h2 {
  max-width: 510px;
  font-size: clamp(32px, 4vw, 54px);
  letter-spacing: -.04em;
}

.impact-editorial-copy > p {
  max-width: 430px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.impact-editorial-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 48px;
  border-top: 1px solid var(--line);
}

.impact-editorial-stat {
  min-width: 0;
  padding: 22px 24px 4px;
}

.impact-editorial-stat:first-child {
  padding-left: 0;
}

.impact-editorial-stat + .impact-editorial-stat {
  border-left: 1px solid var(--line);
}

.impact-editorial-stat:nth-child(3) {
  padding-left: 0;
  border-left: 0;
}

.impact-editorial-stat:nth-child(n + 3) {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.impact-editorial-stat strong {
  display: block;
  margin-bottom: 5px;
  color: var(--maroon);
  font-family: "Instrument Sans", "DM Sans", sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.035em;
}

.impact-editorial-stat > span {
  display: block;
  max-width: 18ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.impact-editorial-note {
  max-width: 54ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.impact-editorial-image {
  min-height: 500px;
  margin: 0;
  overflow: hidden;
}

.impact-editorial-image img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 960px) {
  .impact-editorial {
    padding: 76px 0;
  }

  .impact-editorial-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .impact-editorial-image,
  .impact-editorial-image img {
    min-height: 380px;
  }

  .impact-editorial-meta {
    margin-top: 36px;
  }
}

@media (max-width: 640px) {
  .impact-editorial {
    padding: 50px 0 54px;
  }

  .impact-editorial-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .impact-editorial-copy {
    max-width: none;
  }

  .impact-editorial h2 {
    font-size: 30px;
    line-height: 1.08;
  }

  .impact-editorial-copy > p {
    margin-top: 18px;
    font-size: 15px;
  }

  .impact-editorial-meta {
    margin-top: 20px;
    row-gap: 0;
  }

  .impact-editorial-stat {
    padding: 16px 12px 14px;
  }

  .impact-editorial-stat:first-child,
  .impact-editorial-stat:nth-child(3) {
    padding-left: 0;
  }

  .impact-editorial-stat strong { font-size: 29px; }
  .impact-editorial-stat > span { max-width: 16ch; }
  .impact-editorial-note { margin-top: 12px; }

  .impact-editorial-image,
  .impact-editorial-image img {
    min-height: 0;
  }

  .impact-editorial-image {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-photo);
  }

  .impact-editorial-image img {
    height: 100%;
    border-radius: inherit;
  }
}

/* Homepage upcoming activity guide */
.home-upcoming-section {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home-upcoming-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 42px;
}

.home-upcoming-heading h2 {
  margin-top: 10px;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -.045em;
}

.home-upcoming-intro {
  max-width: 55ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.home-upcoming-all {
  flex: 0 0 auto;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(122,31,43,.38);
  color: var(--maroon);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.home-upcoming-list {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr);
  gap: 42px;
  border-top: 1px solid var(--ink);
}

.home-upcoming-event {
  display: grid;
  grid-template-columns: 160px minmax(0,1fr);
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.home-upcoming-event.featured {
  display: flex;
  flex-direction: column;
  padding-right: 42px;
  border-right: 1px solid var(--line);
}

.home-upcoming-event figure {
  margin: 0;
  overflow: hidden;
}

.home-upcoming-event figure img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}

.home-upcoming-event.featured figure,
.home-upcoming-event.featured figure img {
  min-height: 330px;
}

.home-upcoming-event-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-upcoming-event-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  color: var(--maroon);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.home-upcoming-event h3 {
  margin: 18px 0 22px;
  font-size: clamp(26px,3vw,38px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.home-upcoming-meta {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  width: 100%;
  margin: 0 0 26px;
}

.home-upcoming-meta div {
  min-width: 0;
}

.home-upcoming-meta dt {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.home-upcoming-meta dd {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.home-upcoming-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  margin-top: auto;
  border: 1px solid var(--maroon);
  border-radius: 4px;
  background: var(--maroon);
  color: var(--white);
  font-family: "DM Sans",sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.home-upcoming-register:hover,
.home-upcoming-register:focus-visible {
  background: var(--maroon-deep);
  border-color: var(--maroon-deep);
}

.home-upcoming-supporting {
  display: flex;
  flex-direction: column;
}

.home-upcoming-empty {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr);
  gap: 64px;
  align-items: end;
  padding: 34px 0 38px;
  border-top: 1px solid var(--ink);
}

.home-upcoming-empty[hidden],
.home-upcoming-list[hidden],
.home-upcoming-event[hidden] {
  display: none;
}

.home-upcoming-empty h3 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(30px,4vw,48px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.home-upcoming-empty p {
  max-width: 360px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.home-upcoming-empty a {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(122,31,43,.38);
  color: var(--maroon);
  font-family: "DM Sans",sans-serif;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 960px) {
  .home-upcoming-list { grid-template-columns:1fr; gap:0; }
  .home-upcoming-event.featured { padding-right:0; border-right:0; }
  .home-upcoming-event.featured figure,
  .home-upcoming-event.featured figure img { min-height:360px; max-height:440px; }
}

@media (max-width: 640px) {
  .home-upcoming-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
  }

  .home-upcoming-heading h2 {
    font-size: 38px;
  }

  .home-upcoming-intro {
    margin-top: 12px;
    font-size: 15px;
  }

  .home-upcoming-event,
  .home-upcoming-event.featured {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 0 28px;
  }

  .home-upcoming-event.featured {
    display: grid;
  }

  .home-upcoming-event figure img,
  .home-upcoming-event.featured figure,
  .home-upcoming-event.featured figure img {
    min-height: 230px;
    max-height: 270px;
  }

  .home-upcoming-event h3 {
    margin: 14px 0 20px;
    font-size: 28px;
  }

  .home-upcoming-meta {
    gap: 0;
    margin-bottom: 22px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .home-upcoming-meta div {
    padding: 12px 10px 13px;
  }

  .home-upcoming-meta div:first-child { padding-left: 0; }
  .home-upcoming-meta div + div { border-left: 1px solid var(--line); }

  .home-upcoming-meta dd {
    font-size: 13px;
    line-height: 1.35;
  }

  .home-upcoming-register {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .home-upcoming-empty {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px 0 28px;
  }

  .home-upcoming-empty h3 {
    font-size: 29px;
  }

  .home-page .home-about-section .split-section { gap: 28px; }
  .home-page .home-about-section .section-heading h2 { line-height: 1.06; }
  .home-page .home-about-section .feature-grid {
    gap: 0;
    margin-top: 28px;
  }
  .home-page .home-about-section .feature-item {
    padding: 18px 0 17px;
  }
  .home-page .home-about-section .feature-item h3 {
    margin: 7px 0 7px;
    font-size: 19px;
  }
  .home-page .home-about-section .feature-item p {
    max-width: 40ch;
    font-size: 14px;
    line-height: 1.55;
  }

  .home-page .editorial-slab { padding-top: 54px; }
  .home-page .editorial-wrap { gap: 24px; }
  .home-page .editorial-copy { padding: 0; }
  .home-page .editorial-copy p { margin-top: 16px; }
  .home-page .editorial-photo { aspect-ratio: 4 / 3; min-height: 0; }

  .home-page .testimonial-section { padding-block: 60px 54px; }
  .home-page .testimonial-section .center-heading { margin-bottom: 18px; }
  .home-page .testimonial-slide { padding: 0 18px; }
  .home-page .testimonial-slide-inner { padding: 16px 0 12px; }
  .home-page .testimonial-slide blockquote {
    margin: 12px auto 22px;
    font-size: 23px;
    line-height: 1.32;
  }
  .home-page .testimonial-arrow { width: 40px; height: 40px; }
  .home-page .testimonial-dots { margin-top: 16px; }

  .home-page .footer-nav {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: 12px 24px;
    width: 100%;
  }
  .home-page .footer-nav a { min-height: 40px; }
  .home-page .footer-map { max-height: 190px; }
}

/* Kisah: existing maroon/cream identity, native editorial layout.
   DESIGN_VARIANCE 5 / MOTION_INTENSITY 2 / VISUAL_DENSITY 3.
   Photography stays documentary; no generated imagery or new dependencies. */
.hero-collaboration-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 8px;
  color: var(--maroon);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(122,31,43,.4);
  text-underline-offset: 5px;
}
.hero-collaboration-link:hover { text-decoration-color: currentColor; }
.hero-collaboration-link:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.home-page .home-about-teaser { padding-block: 58px 64px; }
.home-page .home-about-teaser .split-section {
  grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  align-items: center;
  gap: 64px;
}
.home-page .home-about-teaser .section-heading h2 {
  max-width: 24ch;
  margin-bottom: 0;
  font-size: clamp(26px,2.8vw,38px);
  line-height: 1.2;
  text-wrap: pretty;
}
.home-page .home-about-teaser .section-copy > p { max-width: 44ch; margin: 0 0 20px; }
/* clip (not hidden) keeps the page from becoming its own scroll box, so position: sticky still works. */
html.home-document { overflow-x: hidden; overflow-x: clip; }
.home-page { overflow-x: hidden; overflow-x: clip; }
.kisah-preview { padding-block: 68px 72px; }
.kisah-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.kisah-section-intro { max-width: 670px; }
.kisah-section-heading h2 { max-width: 15ch; margin: 0 0 18px; font-size: clamp(38px,4.6vw,58px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.kisah-section-heading p { max-width: 51ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.kisah-section-heading > a { flex-shrink: 0; }
.kisah-grid { display: grid; gap: 36px 28px; }
.kisah-preview-grid { grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr); gap: 52px; align-items: start; }
.kisah-secondary-list { display: grid; gap: 34px; }
.kisah-entry-featured .kisah-image-link > img { aspect-ratio: 3 / 2; }
.kisah-entry-secondary { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(0,1.2fr); column-gap: 20px; align-items: start; padding-top: 24px; border-top: 1px solid var(--line); }
.kisah-entry-secondary:first-child { padding-top: 0; border-top: 0; }
.kisah-entry-secondary > .kisah-image-link { grid-row: 1 / span 4; }
.kisah-entry-secondary .kisah-image-link > img { aspect-ratio: 1 / 1; }
.kisah-entry-secondary .kisah-meta { display: block; margin: 0 0 9px; }
.kisah-entry-secondary h3 { font-size: clamp(20px,2vw,26px); }
.kisah-entry { min-width: 0; scroll-margin-top: 110px; }
.kisah-image-link { display: block; overflow: hidden; border-radius: 6px; }
.kisah-image-link > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) { .kisah-image-link:hover > img { transform: scale(1.035); } }
.kisah-meta { margin: 19px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.kisah-meta time { white-space: nowrap; }
.kisah-entry h2, .kisah-entry h3 { margin: 0 0 12px; color: var(--ink); font-family: "Instrument Sans","DM Sans",sans-serif; font-size: clamp(23px,2.2vw,29px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; text-wrap: pretty; }
.kisah-title-link { color: inherit; text-decoration: none; }
.kisah-title-link:hover { color: var(--maroon); }
.kisah-entry > p { max-width: 52ch; margin: 0 0 12px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.kisah-text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--maroon); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(122,31,43,.35); }
.kisah-text-link:hover { text-decoration-color: currentColor; }
.kisah-data-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-height: 88px; margin: 34px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.loading-media,
.loading-line,
.loading-inline,
.kisah-data-state.is-loading::before { background-color: #e7e1d7; }
.loading-line { display: block; width: 72%; height: 9px; margin-bottom: 12px; }
.loading-line-short { width: 25%; height: 7px; }
.loading-line-title { width: 88%; height: 18px; margin-top: 19px; }
.loading-line-title-short { width: 58%; height: 18px; }
.loading-line-long { width: 94%; }
.loading-line-medium { width: 63%; }
.loading-line-meta { width: 100%; height: 7px; margin: 0; }
.loading-line-meta-short { width: 70%; }
.loading-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 28px; padding-block: 15px; border-block: 1px solid var(--line); }
.loading-card { pointer-events: none; }
.loading-card .loading-media { width: 100%; aspect-ratio: 1.55 / 1; min-height: 260px; }
.loading-card-copy { padding: 20px 0 22px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.schedule-grid[aria-busy="true"] { min-height: 920px; }
.home-upcoming-list[aria-busy="true"] { min-height: 760px; }
.home-upcoming-event.loading-card .loading-media { min-height: 190px; aspect-ratio: auto; }
.home-upcoming-event.featured.loading-card { display: block; padding-right: 42px; }
.home-upcoming-event.featured.loading-card .loading-media { min-height: 330px; }
.loading-inline { display: inline-block; width: min(220px,55vw); height: .8em; vertical-align: -.02em; }
.registration-loading { min-height: 760px; }
.registration-loading-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 64px; align-items: start; }
.registration-loading-main .loading-media { width: 100%; aspect-ratio: 1.45 / 1; }
.registration-loading-copy { padding-top: 32px; }
.registration-loading-summary { min-height: 360px; padding: 26px 28px 28px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); background: var(--cream); }
.kisah-data-state.is-loading { display: block; width: 100%; min-height: 420px; }
.kisah-data-state.is-loading::before { content: ""; display: block; width: 100%; min-height: 380px; background-repeat: no-repeat; }
.kisah-data-state.is-loading[data-skeleton="preview"]::before { background-image: linear-gradient(#e7e1d7,#e7e1d7),linear-gradient(#e7e1d7,#e7e1d7),linear-gradient(#e7e1d7,#e7e1d7),linear-gradient(#e7e1d7,#e7e1d7); background-size: 63% 330px,30% 120px,25% 16px,20% 8px; background-position: 0 0,100% 0,72% 145px,72% 178px; }
.kisah-data-state.is-loading[data-skeleton="archive"]::before { min-height: 460px; background-image: linear-gradient(#e7e1d7,#e7e1d7),linear-gradient(#e7e1d7,#e7e1d7),linear-gradient(#e7e1d7,#e7e1d7),linear-gradient(#e7e1d7,#e7e1d7); background-size: 58% 420px,32% 20px,38% 9px,26% 9px; background-position: 0 0,75% 92px,75% 142px,75% 168px; }
.kisah-data-state.is-loading[data-skeleton="detail"]::before { min-height: 610px; background-image: linear-gradient(#e7e1d7,#e7e1d7),linear-gradient(#e7e1d7,#e7e1d7),linear-gradient(#e7e1d7,#e7e1d7),linear-gradient(#e7e1d7,#e7e1d7); background-size: 18% 8px,72% 32px,48% 32px,94% 420px; background-position: 0 0,0 42px,0 88px,center 150px; }
.kisah-data-state.is-loading > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .loading-media, .loading-line, .loading-inline, .kisah-data-state.is-loading::before { animation: kb-loading-pulse 1.8s ease-in-out infinite; }
}
@keyframes kb-loading-pulse { 0%,100% { opacity:.58; } 50% { opacity:.82; } }
@media (min-width: 641px) {
  .schedule-card.loading-card .loading-media { min-height: 0; aspect-ratio: 2 / 1; }
}
@media (max-width: 960px) {
  .registration-loading-layout { grid-template-columns: 1fr; gap: 24px; }
  .home-upcoming-event.featured.loading-card { padding-right: 0; }
}
@media (max-width: 720px) {
  .loading-meta { gap: 10px; }
  .schedule-grid[aria-busy="true"], .home-upcoming-list[aria-busy="true"], .registration-loading { min-height: 620px; }
  .loading-card .loading-media { min-height: 220px; }
  .home-upcoming-event.featured.loading-card { padding-right: 0; }
  .registration-loading-summary { min-height: 300px; }
  .kisah-data-state.is-loading[data-skeleton="preview"]::before,
  .kisah-data-state.is-loading[data-skeleton="archive"]::before { min-height: 560px; background-size: 100% 270px,72% 18px,92% 9px,58% 9px; background-position: 0 0,0 310px,0 352px,0 378px; }
  .kisah-data-state.is-loading[data-skeleton="detail"]::before { min-height: 500px; background-size: 28% 8px,92% 25px,68% 25px,100% 280px; background-position: 0 0,0 38px,0 75px,0 125px; }
}
.kisah-state-action { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--maroon); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.kisah-preview-grid.has-single-story { grid-template-columns: minmax(0,1fr); max-width: 760px; }
.kisah-entry.has-no-cover,
.kisah-latest-story.has-no-cover { display: block; }
.kisah-entry.has-no-cover { padding-top: 24px; border-top: 1px solid var(--line); }
.kisah-latest-story.has-no-cover .kisah-latest-copy { max-width: 720px; }
.kisah-text-link:focus-visible,
.kisah-image-link:focus-visible,
.kisah-title-link:focus-visible,
.kisah-state-action:focus-visible,
.kisah-page a:focus-visible,
.about-page .footer-nav a:focus-visible,
.home-page .footer-nav a:focus-visible { outline: 2px solid var(--maroon); outline-offset: 5px; }
.kisah-page .site-header a:focus-visible { outline-color: #fff; }
.kisah-intro { padding: 70px 0 48px; }
.kisah-intro-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 80px; align-items: end; }
.kisah-intro-copy { padding-bottom: 22px; }
.kisah-intro h1 { max-width: 23ch; margin: 14px 0 22px; font-family: "Instrument Sans","DM Sans",sans-serif; font-size: clamp(38px,5vw,66px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.kisah-intro p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.kisah-intro-image { height: 430px; margin: 0; overflow: hidden; }
.kisah-intro-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 6px; }
.kisah-latest { padding-top: 24px; }
.kisah-latest-story { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 64px; align-items: center; padding-top: 32px; }
.kisah-latest-story > .kisah-image-link > img { aspect-ratio: 3 / 2; }
.kisah-latest-copy { max-width: 520px; }
.kisah-latest-copy .kisah-meta { margin-top: 0; }
.kisah-latest-copy h2 { margin: 0 0 14px; font-family: "Instrument Sans","DM Sans",sans-serif; font-size: clamp(30px,3.4vw,48px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; text-wrap: pretty; }
.kisah-latest-copy p { margin: 0 0 12px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.kisah-archive { padding: 0 0 88px; }
.kisah-archive-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-top: 26px; border-top: 1px solid var(--line); }
.kisah-archive-heading h2 { margin: 0; font-size: 21px; font-weight: 600; }
.kisah-archive-heading > span { color: var(--muted); font-size: 13px; }
.kisah-archive-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px 28px; }
.kisah-archive-grid.has-two-stories { grid-template-columns: repeat(2,minmax(0,1fr)); }
.kisah-archive-grid.has-one-story { grid-template-columns: minmax(0,1fr); max-width: 980px; }
.kisah-archive-grid.has-one-story .kisah-entry { display: grid; grid-template-columns: minmax(280px,1.1fr) minmax(0,.9fr); column-gap: 36px; align-items: start; }
.kisah-archive-grid.has-one-story .kisah-image-link { grid-row: 1 / span 3; }
.kisah-archive-grid.has-one-story .kisah-meta { margin-top: 0; }
.story-detail-main { min-height: 60vh; padding: 58px 0 96px; }
.story-detail-shell { max-width: 1120px; }
.story-detail-back { margin-bottom: 38px; }
.story-detail-header { max-width: 820px; padding-top: 30px; border-top: 1px solid var(--line); }
.story-detail-header h1 { margin: 14px 0 20px; font-size: clamp(46px,6.4vw,82px); font-weight: 650; line-height: 1.01; letter-spacing: -.045em; text-wrap: balance; }
.story-detail-lead { max-width: 40ch; margin: 0 0 22px; color: var(--muted); font-family: "Newsreader", Georgia, serif; font-size: clamp(21px,2vw,26px); line-height: 1.45; text-wrap: pretty; }
.story-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: var(--muted); font-size: 14px; }
.story-detail-meta time:not([hidden]) + span:not(:empty)::before { content: "·"; margin-right: 14px; }
.story-detail-cover { width: min(100%,920px); margin: 50px auto 40px; }
.story-detail-cover img { display: block; width: 100%; height: auto; border-radius: 6px; }
/* Story text is set in Newsreader (serif) for an editorial feel; headings stay in the KB fonts. */
.story-detail-text { max-width: 36em; margin-inline: auto; }
.story-detail-share { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.story-detail-share a, .story-detail-share button { padding: 10px 0; margin-block: -10px; border: 0; background: none; color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.story-detail-body { color: var(--ink); font-family: "Newsreader", Georgia, serif; font-size: clamp(19px,1.6vw,21px); line-height: 1.6; }
.story-detail-body p { margin: 0 0 1.1em; white-space: pre-line; text-indent: 1.6em; }
.story-detail-body > p:first-child, .story-detail-body h2 + p, .story-detail-body blockquote + p { text-indent: 0; }
.story-detail-body h2 { margin: 2.2em 0 .8em; font-family: "Instrument Sans","DM Sans",sans-serif; font-size: clamp(22px,2vw,26px); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.story-pullquote { margin: 2.2em 0; padding: 26px 0; border-block: 1px solid var(--line); }
.story-pullquote cite { display: block; margin-top: 14px; color: var(--muted); font-family: "DM Sans", sans-serif; font-size: 14px; font-style: normal; }
.story-pullquote p { margin: 0; color: var(--maroon); font-family: "Newsreader", Georgia, serif; font-size: clamp(26px,2.6vw,34px); font-style: italic; font-weight: 400; line-height: 1.3; text-indent: 0; white-space: pre-line; text-wrap: balance; }
.story-detail-cta { margin: 56px 0 0; font-size: clamp(17px,1.5vw,19px); padding-top: 30px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.story-detail-cta p { margin: 0; font-size: 1em; font-weight: 600; }
.story-detail-more { margin-top: 88px; }
.story-detail-more .kisah-archive-grid { margin-top: 28px; }
/* Wide screens: photo stays in view on the left while the text scrolls on the right (Kinfolk-like). */
@media (min-width: 900px) {
  .story-detail-layout.has-cover { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: 64px; align-items: start; margin-top: 52px; }
  .story-detail-layout.has-cover .story-detail-cover { position: sticky; top: 112px; width: auto; margin: 0; }
  .story-detail-layout.has-cover .story-detail-cover img { max-height: calc(100svh - 150px); object-fit: cover; }
  .story-detail-layout.has-cover .story-detail-text { max-width: none; margin: 0; }
}
.home-page .home-testimonial-compact { padding-block: 40px; }
.home-testimonial-compact > .container { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 60px; align-items: start; }
.home-testimonial-compact h2 { margin: 0 0 12px; color: inherit; font-size: 28px; line-height: 1.2; }
.home-testimonial-compact p, .home-testimonial-compact figcaption { margin: 0; color: #f2dfe2; font-size: 13px; line-height: 1.6; }
.home-testimonial-compact figure { margin: 0; }
.home-testimonial-compact blockquote { margin: 0 0 16px; font-size: clamp(20px,2.2vw,27px); line-height: 1.4; letter-spacing: -.02em; }
.about-story-documentary { margin: 0; }
.about-story-documentary img { height: 100%; object-position: center; }
.home-page .home-program-section { padding-block: 68px 60px; }
.home-page .home-upcoming-section { padding-block: 60px 72px; }
.home-page .home-closing-compact { padding-block: 32px; }
.home-closing-compact .home-closing { display: block; padding-block: 24px; }
.home-closing-compact .join-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 40px; align-items: center; }
.home-closing-compact .eyebrow { grid-column: 1; margin-bottom: 12px; }
.home-closing-compact h2 { grid-column: 1; font-size: clamp(28px,3vw,40px); }
.home-closing-compact .join-copy p { grid-column: 1; max-width: 52ch; margin: 14px 0 0; }
.home-closing-compact .join-actions { grid-column: 2; grid-row: 1 / 4; align-items: flex-start; flex-direction: column; gap: 10px; }
/* Scoped nav layout includes Kisah without changing unrelated pages. */
.home-page .nav, .about-page .nav, .kisah-page .nav { gap: clamp(14px,1.8vw,25px); }
.home-page .nav a, .about-page .nav a, .kisah-page .nav a { white-space: nowrap; }
.home-page .footer-nav, .about-page .footer-nav, .kisah-page .footer-nav { grid-template-rows: none; grid-auto-flow: row; }
@media (min-width: 768px) and (max-width: 1100px) {
  .kisah-archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kisah-preview-grid { gap: 32px; }
  .kisah-entry-secondary { grid-template-columns: 1fr; row-gap: 12px; }
  .kisah-entry-secondary > .kisah-image-link { grid-row: auto; }
  .kisah-entry-secondary .kisah-image-link > img { aspect-ratio: 3 / 2; }
  .kisah-latest-story { gap: 36px; }
}
@media (max-width: 767px) {
  .home-page .home-program-section { padding-block: 44px 40px; }
  .home-page .home-upcoming-section { padding-block: 44px 48px; }
  .home-page .home-closing-compact { padding-block: 24px; }
  .home-closing-compact .home-closing { padding-block: 20px; }
  .home-closing-compact .join-copy { display: block; }
  .home-closing-compact .join-actions { margin-top: 20px; }
  .home-page .home-about-teaser { padding-block: 40px 44px; }
  .home-page .home-about-teaser .split-section { grid-template-columns: 1fr; gap: 20px; }
  .home-page .home-about-teaser .section-heading h2 { max-width: 27ch; font-size: 27px; line-height: 1.2; }
  .kisah-preview { padding-block: 40px 44px; }
  .kisah-preview > .container { display: flex; flex-direction: column; }
  .kisah-preview .kisah-section-heading { display: contents; }
  .kisah-preview .kisah-section-heading > div { order: 1; }
  .kisah-preview [data-home-stories-state] { order: 2; }
  .kisah-preview .kisah-preview-grid { order: 2; }
  .kisah-preview .kisah-section-heading > a { order: 3; align-self: flex-start; }
  .kisah-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .kisah-section-heading h2 { font-size: 36px; }
  .kisah-preview-grid, .kisah-archive-grid, .kisah-archive-grid.has-two-stories { grid-template-columns: 1fr; gap: 34px; }
  .kisah-secondary-list { gap: 28px; }
  .kisah-entry-secondary { display: block; }
  .kisah-entry-secondary .kisah-image-link { margin-bottom: 14px; }
  .kisah-entry-secondary .kisah-image-link > img { aspect-ratio: 1.5 / 1; }
  .kisah-entry h2, .kisah-entry h3 { max-width: 27ch; font-size: 26px; }
  .kisah-entry > p { margin-bottom: 4px; }
  .kisah-meta { margin-top: 14px; }
  .kisah-intro { padding: 42px 0 32px; }
  .kisah-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .kisah-intro-copy { padding-bottom: 0; }
  .kisah-intro h1 { max-width: 17ch; font-size: clamp(37px,7.5vw,50px); }
  .kisah-intro-image { height: clamp(250px,65vw,340px); }
  .kisah-latest { padding-top: 0; }
  .kisah-latest-story { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .kisah-latest-story > .kisah-image-link > img { aspect-ratio: 3 / 2; }
  .kisah-archive-grid.has-one-story .kisah-entry { display: block; }
  .kisah-archive-grid.has-one-story .kisah-meta { margin-top: 14px; }
  .kisah-latest-copy h2 { font-size: 32px; }
  .kisah-archive { padding-bottom: 52px; }
  .kisah-archive-heading { padding-top: 20px; }
  .story-detail-main { padding: 38px 0 64px; }
  .story-detail-back { margin-bottom: 28px; }
  .story-detail-header { padding-top: 24px; }
  .story-detail-header h1 { font-size: clamp(38px,10vw,58px); line-height: 1.04; }
  .story-detail-cover { margin: 34px 0 38px; }
  .story-detail-body { font-size: 18px; line-height: 1.6; }
  .story-detail-lead { font-size: 19px; }
  .story-pullquote { padding: 20px 0; }
  .story-detail-cta { margin-top: 48px; }
  .story-detail-cta .btn { width: 100%; justify-content: center; }
  .story-detail-more { margin-top: 64px; }
  .home-testimonial-compact > .container { grid-template-columns: 1fr; gap: 20px; }
  .home-page .home-testimonial-compact { padding-block: 32px; }
  .home-testimonial-compact blockquote { font-size: 21px; }
  .home-page .footer-nav, .about-page .footer-nav, .kisah-page .footer-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 18px; }
  .home-page .footer-nav a, .about-page .footer-nav a, .kisah-page .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 640px) {
  .home-page .site-header .nav,
  .about-page .site-header .nav,
  .kisah-page .site-header .nav {
    gap: 0;
  }

  .home-page .hero-collaboration-link {
    grid-column: 2;
    grid-row: 5;
    justify-self: center;
    margin-top: 4px;
    color: var(--cream);
    text-decoration-color: rgba(255,255,255,.5);
  }
}

/* Homepage testimonials: warm editorial treatment. */
.home-page .testimonial-section {
  padding-block: 88px 82px;
  background:
    radial-gradient(circle at 88% 14%, rgba(122,31,43,.055), transparent 25%),
    var(--cream);
  color: var(--ink);
}
.home-page .testimonial-section::before,
.home-page .testimonial-section::after { display: none; }
.home-page .testimonial-shell {
  display: grid;
  grid-template-columns: minmax(220px,.68fr) minmax(0,1.32fr);
  column-gap: clamp(46px,7vw,104px);
  align-items: start;
  padding-top: 0;
}
.home-page .testimonial-section .center-heading {
  max-width: 390px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--maroon);
  text-align: left;
}
.home-page .testimonial-section .eyebrow { color: var(--maroon); }
.home-page .testimonial-section .center-heading h2 {
  margin: 16px 0 20px;
  font-size: clamp(38px,4.3vw,58px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.home-page .testimonial-section h2 em { color: var(--maroon); }
.home-page .testimonial-intro {
  max-width: 38ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.home-page .testimonial-carousel {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
}
.home-page .testimonial-slide {
  padding: 0;
  text-align: left;
}
.home-page .testimonial-slide-inner {
  position: relative;
  min-height: 390px;
  max-width: none;
  margin: 0;
  padding: clamp(38px,5vw,66px) clamp(34px,5vw,70px) 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 20px 50px rgba(83,20,29,.07);
}
.home-page .testimonial-index {
  position: absolute;
  top: 22px;
  right: 26px;
  color: rgba(122,31,43,.34);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}
.home-page .quote-mark {
  width: fit-content;
  color: var(--maroon);
  font-family: Georgia, serif;
  font-size: 96px;
  line-height: .56;
  opacity: 1;
}
.home-page .testimonial-slide blockquote {
  max-width: 19ch;
  margin: 30px 0 42px;
  color: var(--ink);
  font-size: clamp(27px,3vw,42px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.035em;
  text-wrap: pretty;
}
.home-page .person {
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.home-page .person-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(122,31,43,.22);
  border-radius: 6px;
  background: var(--maroon-soft);
  color: var(--maroon);
}
.home-page .person strong { color: var(--ink); font-size: 14px; }
.home-page .person span { color: var(--muted); font-size: 12px; }
.home-page .testimonial-nav {
  position: static;
  grid-column: 1;
  align-self: end;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 30px;
  transform: none;
}
.home-page .testimonial-arrow {
  width: 46px;
  height: 46px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.52);
  color: var(--maroon);
}
.home-page .testimonial-arrow:hover {
  transform: translateY(-2px);
  border-color: var(--maroon);
  background: var(--maroon);
  color: var(--white);
}
.home-page .testimonial-arrow:active { transform: translateY(0) scale(.97); }
.home-page .testimonial-dots {
  grid-column: 2;
  justify-content: flex-start;
  gap: 7px;
  margin: 20px 0 0;
}
.home-page .testimonial-dot {
  width: 26px;
  height: 3px;
  border-radius: 0;
  background: rgba(122,31,43,.18);
}
.home-page .testimonial-dot.active {
  background: var(--maroon);
  transform: none;
}
.home-page .testimonial-arrow:focus-visible,
.home-page .testimonial-dot:focus-visible { outline-color: rgba(122,31,43,.6); }

@media (max-width: 767px) {
  .home-page .testimonial-section { padding-block: 54px 50px; }
  .home-page .testimonial-shell { display: block; }
  .home-page .testimonial-section .center-heading { max-width: none; margin-bottom: 28px; }
  .home-page .testimonial-section .center-heading h2 { font-size: 36px; }
  .home-page .testimonial-carousel { width: 100%; }
  .home-page .testimonial-slide { padding: 0; }
  .home-page .testimonial-slide-inner { min-height: 340px; padding: 38px 26px 28px; }
  .home-page .testimonial-slide blockquote { margin: 24px 0 34px; font-size: 24px; line-height: 1.3; }
  .home-page .quote-mark { font-size: 76px; }
  .home-page .testimonial-nav { justify-content: flex-start; margin-top: 20px; }
  .home-page .testimonial-dots { justify-content: flex-end; margin-top: -25px; }
}

/* Testimonial editorial slider — scoped to the homepage. */
.home-page .testimonial-section .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.home-page .testimonial-section {
  padding-block: clamp(76px,8vw,112px) clamp(58px,6.3vw,86px);
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
}
.home-page .testimonial-section::before,
.home-page .testimonial-section::after { display: none; }
.home-page .testimonial-shell {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 0 24px;
  align-items: start;
  padding-top: 0;
}
.home-page .testimonial-section .center-heading {
  grid-column: 1 / 5;
  max-width: 380px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(122,31,43,.55);
  text-align: left;
}
.home-page .testimonial-section .eyebrow {
  color: var(--maroon);
  font-family: "DM Sans", sans-serif;
}
.home-page .testimonial-section .center-heading h2 {
  margin: 18px 0 0;
  color: var(--ink);
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(40px,4.5vw,62px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.home-page .testimonial-section .center-heading h2 em {
  color: var(--maroon);
}
.home-page .testimonial-carousel {
  grid-column: 5 / 13;
  grid-row: 1;
  width: 100%;
  overflow: visible;
}
.home-page .testimonial-track {
  display: grid;
  width: 100%;
  transform: none !important;
  transition: none;
}
.home-page .testimonial-slide {
  grid-area: 1 / 1;
  min-width: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity .5s var(--ease),
    transform .5s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .5s;
  text-align: left;
}
.home-page .testimonial-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.home-page .testimonial-slide-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 410px;
  max-width: none;
  margin: 0;
  padding: 82px 0 0 clamp(28px,4vw,60px);
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.home-page .testimonial-index {
  position: absolute;
  top: -34px;
  left: clamp(28px,4vw,60px);
  color: rgba(122,31,43,.14);
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(92px,11vw,154px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.08em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.home-page .testimonial-slide blockquote {
  position: relative;
  z-index: 1;
  max-width: 22ch;
  margin: 0 0 42px;
  color: var(--ink);
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(34px,3.55vw,50px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.045em;
  text-wrap: pretty;
}
.home-page .person {
  display: block;
  margin-top: auto;
  padding: 18px 112px 0 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.home-page .person div { display: flex; align-items: baseline; gap: 10px; }
.home-page .person strong,
.home-page .person span { font-family: "DM Sans", sans-serif; }
.home-page .person strong { color: var(--ink); font-size: 14px; font-weight: 700; }
.home-page .person span { color: var(--muted); font-size: 13px; }
.home-page .person span::before {
  content: "—";
  margin-right: 10px;
  color: var(--maroon);
}
.home-page .testimonial-nav {
  position: static;
  grid-column: 5 / 13;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-self: end;
  margin-top: -44px;
  transform: none;
  pointer-events: auto;
}
.home-page .testimonial-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(122,31,43,.3);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--maroon);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.home-page .testimonial-arrow:hover {
  border-color: var(--maroon);
  background: var(--maroon);
  box-shadow: none;
  color: var(--cream);
  transform: translateY(-2px);
}
.home-page .testimonial-arrow:active { transform: translateY(0); }
.home-page .testimonial-arrow:focus-visible {
  outline: 3px solid rgba(122,31,43,.25);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .home-page .testimonial-section .center-heading { grid-column: 1 / 6; }
  .home-page .testimonial-carousel,
  .home-page .testimonial-nav { grid-column: 6 / 13; }
  .home-page .testimonial-slide-inner { min-height: 390px; padding-left: 32px; }
  .home-page .testimonial-index { left: 32px; }
  .home-page .testimonial-slide blockquote { font-size: clamp(31px,4vw,40px); }
}

@media (max-width: 700px) {
  .home-page .testimonial-section { padding-block: 56px 43px; }
  .home-page .testimonial-shell { display: block; }
  .home-page .testimonial-section .center-heading {
    max-width: none;
    margin-bottom: 36px;
  }
  .home-page .testimonial-section .center-heading h2 {
    max-width: 12ch;
    font-size: clamp(36px,10vw,46px);
  }
  .home-page .testimonial-carousel { width: 100%; }
  .home-page .testimonial-slide-inner {
    min-height: 360px;
    padding: 64px 0 0;
    border-left: 0;
  }
  .home-page .testimonial-index {
    top: -24px;
    left: 0;
    font-size: 82px;
  }
  .home-page .testimonial-slide blockquote {
    max-width: 24ch;
    margin-bottom: 34px;
    font-size: clamp(27px,7vw,34px);
    line-height: 1.2;
  }
  .home-page .person { padding: 16px 0 0; }
  .home-page .testimonial-nav {
    justify-content: flex-start;
    margin-top: 16px;
  }
  .home-page .testimonial-arrow { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .testimonial-slide,
  .home-page .testimonial-arrow { transition: none; }
}

/* Shared footer: compact editorial closing system. */
.site-footer {
  border-top: 0;
  background: #55131d;
  color: var(--cream);
}
.site-footer .footer-main {
  display: grid;
  grid-template-columns: minmax(250px,.78fr) minmax(0,1.55fr);
  gap: clamp(64px,8vw,124px);
  padding: 72px 0 62px;
}
.site-footer .footer-brand-col { align-self: start; gap: 0; }
.site-footer .footer-brand { margin: 0 0 18px; }
.site-footer .footer-brand-logo {
  width: auto;
  height: 72px;
  max-width: 220px;
  filter: brightness(0) invert(1);
}
.site-footer .footer-tagline {
  max-width: 260px;
  margin: 0;
  color: rgba(255,248,239,.76);
  font-size: 15px;
  line-height: 1.6;
}
.site-footer .footer-groups {
  display: grid;
  grid-template-columns: .9fr .8fr minmax(210px,1.25fr);
  gap: clamp(34px,4vw,68px);
}
.site-footer .footer-col { gap: 0; min-width: 0; }
.site-footer .footer-col h3 {
  margin: 4px 0 22px;
  color: rgba(255,248,239,.62);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}
.site-footer .footer-nav { gap: 12px; font-size: 15px; font-weight: 500; }
.site-footer .footer-nav a,
.site-footer .footer-links a,
.site-footer .footer-map-link {
  color: var(--cream);
  text-decoration-color: transparent;
  text-underline-offset: 5px;
}
.site-footer .footer-nav a:hover,
.site-footer .footer-links a:hover,
.site-footer .footer-map-link:hover {
  color: #fff;
  text-decoration-color: rgba(255,248,239,.72);
}
.site-footer .footer-social {
  display: flex;
  flex-flow: row wrap;
  gap: 4px;
  margin-top: 28px;
}
.site-footer .footer-social .social-link,
.site-footer .footer-social [data-email] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  color: rgba(255,248,239,.78);
  font-size: 13px;
}
.site-footer .footer-social .social-link::after { display: none; }
.site-footer .footer-social .social-link:hover { color: #fff; }
.site-footer .footer-social .social-link svg {
  flex-basis: 19px;
  width: 19px;
  height: 19px;
  color: currentColor;
}
.site-footer .footer-social [data-email]::before {
  flex-basis: 19px;
  width: 19px;
  height: 19px;
  color: currentColor;
  font-size: 16px;
}
.site-footer .footer-map-preview {
  position: relative;
  width: 100%;
  max-width: 310px;
  height: 160px;
  overflow: hidden;
  border: 1px solid rgba(255,248,239,.2);
  background: rgba(255,248,239,.08);
}
.site-footer .footer-map-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) sepia(.35) saturate(.75) contrast(.9);
  touch-action: auto;
}
.site-footer .footer-map-preview iframe:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: -3px;
}
.site-footer .footer-map-preview + .footer-map-link { margin-top: 14px; }
.site-footer .footer-map-link {
  position: static;
  display: inline-flex;
  justify-content: flex-start;
  gap: 8px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  text-decoration-line: underline;
}
.site-footer .footer-map-link:hover { border: 0; background: transparent; }
.site-footer .footer-bottom {
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255,248,239,.18);
  background: #55131d;
}
.site-footer .footer-copy-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer .footer-copy-wrap p {
  color: rgba(255,248,239,.62);
  font-size: 12px;
}
.site-footer .footer-links { display: flex; gap: 22px; font-size: 12px; }
.site-footer a:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

@media (max-width: 900px) {
  .site-footer .footer-main {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 60px 0 50px;
  }
  .site-footer .footer-brand-col { grid-column: auto; }
  .site-footer .footer-groups { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .site-footer .footer-main { gap: 38px; }
  .site-footer .footer-groups {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 36px 32px;
  }
  .site-footer .footer-location-col { grid-column: 1 / -1; }
  .site-footer .footer-location-col h3 { margin-bottom: 32px; }
  .site-footer .footer-map-preview { max-width: none; height: 180px; }
}

@media (max-width: 640px) {
  .site-footer .footer-main { gap: 30px; padding: 46px 0 38px; }
  .site-footer .footer-brand-logo { height: 58px; }
  .site-footer .footer-social { gap: 4px; margin-top: 22px; }
  .site-footer .footer-groups {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 36px 32px;
  }
  .site-footer .footer-location-col { grid-column: 1 / -1; }
  .site-footer .footer-col h3 { margin-bottom: 16px; }
  .site-footer .footer-location-col h3 { margin-bottom: 26px; }
  .site-footer .footer-nav { gap: 4px; }
  .site-footer .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .site-footer .footer-map-preview { max-width: none; height: 180px; }
  .site-footer .footer-map-link { min-height: 40px; }
  .site-footer .footer-bottom { padding: 20px 0 24px; }
  .site-footer .footer-copy-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* Shared inner-page hero type system. Homepage hero remains independent. */
.page-hero h1,
.schedule-intro h1,
.kisah-intro h1,
.collaboration-hero h1,
.contact-intro h1,
.volunteer-hero h1 {
  font-family: "Instrument Sans", "DM Sans", sans-serif;
  font-size: clamp(64px, 5.8vw, 86px);
  font-weight: 700;
  line-height: 1.01;
  letter-spacing: -.04em;
}

.page-kicker,
.kisah-intro .eyebrow,
.volunteer-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.page-hero p,
.schedule-intro-grid > p,
.kisah-intro p,
.collaboration-hero-copy > p,
.contact-intro p,
.volunteer-hero-copy > p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.68;
}

.page-hero p,
.collaboration-hero-copy > p,
.contact-intro p,
.volunteer-hero-copy > p { margin-top: 24px; }
.kisah-intro h1 { margin-bottom: 24px; }

@media (max-width: 960px) {
  .page-hero h1,
  .schedule-intro h1,
  .kisah-intro h1,
  .collaboration-hero h1,
  .contact-intro h1,
  .volunteer-hero h1 {
    font-size: clamp(48px, 7vw, 58px);
    line-height: 1.03;
    letter-spacing: -.035em;
  }
}

@media (max-width: 640px) {
  .page-hero h1,
  .schedule-intro h1,
  .kisah-intro h1,
  .collaboration-hero h1,
  .contact-intro h1,
  .volunteer-hero h1 {
    font-size: clamp(40px, 10vw, 48px);
    line-height: 1.06;
    letter-spacing: -.025em;
  }

  .page-hero p,
  .schedule-intro-grid > p,
  .kisah-intro p,
  .collaboration-hero-copy > p,
  .contact-intro p,
  .volunteer-hero-copy > p {
    font-size: 16px;
    line-height: 1.65;
  }
}

/* Mobile homepage hero experiment: immersive photographic stage. */
@media (max-width: 1023px) {
  body.mobile-menu-open { overflow: hidden; }
  body.mobile-menu-open::after {
    content: "";
    position: fixed;
    z-index: 25;
    inset: var(--site-header-height) 0 0;
    background: rgba(0,0,0,.24);
    pointer-events: none;
  }
  .home-page .site-header {
    z-index: 30;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .home-page .site-header.is-scrolled {
    background: #7a1f2b;
    border-bottom-color: rgba(255,255,255,.12);
    box-shadow: 0 8px 20px rgba(41,15,20,.12);
  }
  .home-page .site-header.menu-open {
    background: #7a1f2b;
    border-bottom-color: transparent;
    box-shadow: none;
  }
  .home-page .site-header .brand-logo { filter: brightness(0) invert(1); }
  .home-page .menu-toggle span { background: var(--cream); }
  .home-page .menu-toggle span {
    transform-origin: center;
    transition: transform .22s var(--ease), opacity .18s var(--ease);
  }
  .home-page .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .home-page .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .home-page .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .home-page .nav {
    padding: 4px 20px 12px;
    border-color: rgba(255,255,255,.1);
    border-top: 0;
    background: #7a1f2b;
    transition: opacity .2s var(--ease), transform .2s var(--ease), max-height .24s var(--ease), visibility .2s var(--ease);
  }
  .home-page .nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 11px 0;
    border-bottom-color: rgba(255,255,255,.1);
  }
  .home-page .nav a:last-child { border-bottom: 0; }

  .home-page .hero-campaign {
    min-height: max(560px,100svh);
    margin-top: calc(-1 * var(--site-header-height));
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(251,248,244,.22);
    background: #55131d;
  }
  .home-page .hero-campaign::before,
  .home-page .hero-campaign::after {
    content: "";
    display: block;
    position: absolute;
    inset-inline: 0;
    width: 100%;
    border-radius: 0;
    transform: none;
    pointer-events: none;
  }
  .home-page .hero-campaign::before {
    z-index: 3;
    top: 0;
    height: 168px;
    background: linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.12) 56%,transparent 100%);
  }
  .home-page .hero-campaign::after {
    z-index: 3;
    top: auto;
    bottom: 0;
    height: 74%;
    background: linear-gradient(180deg,transparent 0%,rgba(29,7,11,.1) 20%,rgba(33,8,13,.42) 50%,rgba(35,8,13,.8) 78%,rgba(35,8,13,.92) 100%);
  }
  .home-page .hero-campaign-slider,
  .home-page .hero-campaign-track,
  .home-page .hero-slide {
    min-height: max(560px,100svh);
  }
  .home-page .hero-campaign-slider {
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
  }
  .home-page .hero-campaign-track {
    display: grid;
    width: 100%;
    transform: none !important;
    transition: none;
    touch-action: pan-y;
  }
  .home-page .hero-slide {
    position: relative;
    grid-area: 1 / 1;
    display: block;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
  }
  .home-page .hero-slide::after { display: none; }
  .home-page .hero-slide img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s var(--ease);
    filter: saturate(.92) contrast(1.01) brightness(.98);
  }
  .home-page .hero-slide.active img { opacity: 1; }
  .home-page .hero-slide:nth-child(1) img { object-position: 50% 48%; }
  .home-page .hero-slide:nth-child(2) img { object-position: 50% 50%; }
  .home-page .hero-slide:nth-child(3) img { object-position: 50% 54%; }

  .home-page .hero-slide:not(:first-child) .hero-campaign-inner { display: none; }
  .home-page .hero-slide:first-child .hero-campaign-inner {
    position: absolute;
    z-index: 4;
    inset: auto 0 0;
    display: block;
    width: min(100% - 36px,520px);
    min-height: 0;
    margin: 0 auto 0 clamp(18px,5vw,48px);
    padding: 0 0 clamp(54px,6svh,68px);
  }
  .home-page .hero-slide:first-child .hero-campaign-copy { display: block; }
  .home-page .hero-campaign-copy :is(h1, h2) {
    max-width: 100%;
    margin: 0;
    color: var(--cream);
    font-size: clamp(40px,9.6vw,58px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.018em;
    word-spacing: normal;
    text-shadow: 0 2px 14px rgba(24,5,9,.3);
  }
  .home-page .hero-campaign-copy :is(h1, h2) .hero-desktop-break {
    display: block !important;
    height: 0;
    margin: 0;
  }
  .home-page .hero-campaign-copy :is(h1, h2) > .hero-desktop-break + span {
    display: inline;
    margin: 0;
    color: var(--cream);
  }
  .home-page .hero-campaign-copy p {
    max-width: 34ch;
    margin: 20px 0 0;
    color: rgba(255,248,239,.94);
    font-size: clamp(15.5px,2.2vw,16.5px);
    font-weight: 500;
    line-height: 1.68;
  }
  .home-page .hero-campaign-actions {
    display: flex;
    margin: 22px 0 0;
  }
  .home-page .hero-campaign .btn-primary {
    width: fit-content;
    min-height: 48px;
    padding-inline: 16px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 6px;
    background: var(--cream);
    box-shadow: none;
    color: var(--maroon-deep);
    font-size: 15px;
    font-weight: 700;
  }
  .home-page .hero-campaign-dots {
    position: absolute;
    z-index: 5;
    right: 12px;
    bottom: 10px;
    left: auto;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .home-page .hero-dot { width: 34px; height: 34px; }
  .home-page .hero-dot::before { width: 16px; background: rgba(255,248,239,.32); }
  .home-page .hero-dot.active::before { width: 26px; background: rgba(255,248,239,.88); }
}

@media (max-width: 430px) {
  .home-page .hero-slide:first-child .hero-campaign-inner {
    width: calc(100% - 36px);
    margin-left: 18px;
    padding-bottom: 58px;
  }
  .home-page .hero-campaign-copy :is(h1, h2) { font-size: clamp(38px,10.2vw,43px); }
  .home-page .hero-campaign-copy p { max-width: 34ch; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-slide img { transition: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  /* Phones/tablets show only the first slide's copy, over every photo. */
  .home-page .hero-slide:first-child .hero-campaign-copy :is(h1, h2) { animation: hero-title-in 1s cubic-bezier(.22,.8,.24,1) both; }
  .home-page .hero-slide:first-child .hero-campaign-copy p,
  .home-page .hero-slide:first-child .hero-campaign-actions { animation: hero-copy-in .62s cubic-bezier(.22,.8,.24,1) .45s both; }
}

/* Registration checkout flow */
.registration-page .registration-progress {
  max-width: 760px;
  margin: 0 auto 32px;
}
.registration-page .registration-progress ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.registration-page .registration-progress li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.registration-page .registration-progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 15px;
  left: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 1px;
  background: var(--line);
}
.registration-page .registration-progress li span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  font-weight: 700;
}
.registration-page .registration-progress li strong { font-weight: 600; }
.registration-page .registration-progress li.is-active,
.registration-page .registration-progress li.is-complete { color: var(--maroon); }
.registration-page .registration-progress li.is-active span,
.registration-page .registration-progress li.is-complete span {
  border-color: var(--maroon);
  background: var(--maroon);
  color: var(--cream);
}
.registration-page .registration-progress li.is-complete::after { background: var(--maroon); }

.registration-page .registration-checkout-layout,
.registration-page .registration-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
.registration-page .registration-card { padding: clamp(28px, 4vw, 52px); }
.registration-page .registration-form-heading > span,
.registration-page .registration-review-heading > span,
.registration-page .registration-checkout-summary > span,
.registration-page .registration-review-event > span {
  color: var(--maroon);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.registration-page .registration-form-heading h2,
.registration-page .registration-review-heading h2 { margin-top: 8px; }
.registration-page .registration-form-heading {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) max-content minmax(76px, 1fr);
  align-items: center;
  justify-content: initial;
  gap: 16px;
}
.registration-page .registration-form-heading h2 {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
.registration-page .registration-form-heading > span {
  min-width: 0;
  line-height: 1.45;
  white-space: nowrap;
}
.registration-page .registration-form-heading p {
  max-width: 11ch;
  justify-self: end;
  line-height: 1.45;
}
.registration-page .registration-checkout-summary,
.registration-page .registration-review-event {
  position: sticky;
  top: calc(var(--site-header-height) + 24px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.42);
}
.registration-page .registration-checkout-summary h3,
.registration-page .registration-review-event h3 {
  margin: 10px 0 20px;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.18;
}
.registration-page .registration-checkout-summary dl,
.registration-page .registration-review-event dl,
.registration-page .registration-review-participant dl { margin: 0; }
.registration-page .registration-checkout-summary dl div,
.registration-page .registration-review-event dl div,
.registration-page .registration-review-participant dl div {
  display: grid;
  grid-template-columns: minmax(84px, .38fr) minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.registration-page .registration-checkout-summary dt,
.registration-page .registration-review-event dt,
.registration-page .registration-review-participant dt { color: var(--muted); }
.registration-page .registration-checkout-summary dd,
.registration-page .registration-review-event dd,
.registration-page .registration-review-participant dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.registration-page .registration-review {
  margin-top: 44px;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.registration-page .registration-review-heading { margin-bottom: 34px; }
.registration-page .registration-review-heading p { margin-top: 8px; color: var(--muted); }
.registration-page .registration-review-participant h3 { margin: 0 0 18px; }
.registration-page .registration-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.registration-page #registrationStatus { max-width: 760px; margin: 24px auto 0; }

@media (max-width: 767px) {
  .registration-page .registration-progress { margin-bottom: 24px; }
  .registration-page .registration-progress li { gap: 6px; font-size: 12px; }
  .registration-page .registration-progress li strong { white-space: nowrap; }
  .registration-page .registration-checkout-layout,
  .registration-page .registration-review-grid { grid-template-columns: 1fr; gap: 28px; }
  .registration-page .registration-card,
  .registration-page .registration-review { padding: 24px 18px; }
  .registration-page .registration-checkout-summary,
  .registration-page .registration-review-event { position: static; padding: 20px; }
  .registration-page .registration-review-actions { display: grid; }
  .registration-page .registration-review-actions .btn-primary { grid-row: 1; }
  .registration-page .registration-review-actions .btn { width: 100%; }
}

@media (max-width: 430px) {
  .registration-page .registration-form-heading {
    grid-template-columns: minmax(64px, 1fr) max-content minmax(64px, 1fr);
    gap: 8px;
  }
}

/* Homepage programs: alternating editorial rows. */
.home-program-section .program-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: 0;
  border-top: 1px solid var(--line);
}
.home-program-section .program-card,
.home-program-section .program-card.featured,
.home-program-section .program-card:nth-child(2),
.home-program-section .program-card:nth-child(3) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "image content";
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
  min-height: 360px;
  padding: 42px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  overflow: visible;
}
.home-program-section .program-card:nth-child(2) { grid-template-areas: "content image"; }
.home-program-section .program-image,
.home-program-section .program-card.featured .program-image,
.home-program-section .program-card:not(.featured) .program-image {
  grid-area: image;
  width: 100%;
  height: auto;
  aspect-ratio: 1.45 / 1;
  min-height: 0;
  border: 0;
  border-radius: 0;
}
.home-program-section .program-content,
.home-program-section .program-card.featured .program-content,
.home-program-section .program-card:nth-child(2) .program-content,
.home-program-section .program-card:nth-child(3) .program-content {
  grid-area: content;
  min-width: 0;
  padding: 0;
  align-items: flex-start;
  background: transparent;
}
.home-program-section .program-index {
  display: grid;
  grid-template-columns: max-content minmax(24px, 1fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0 0 20px;
  color: var(--maroon);
  font-size: 18px;
  letter-spacing: .08em;
}
.home-program-section .program-index::after { content: ""; height: 1px; background: var(--line); }
.home-program-section .program-content h3 { margin: 10px 0 10px; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; }
.home-program-section .program-content p { max-width: 38ch; margin: 0; font-size: 16px; line-height: 1.7; }
.home-program-section .program-title { margin-top: 0 !important; }
.home-program-section .program-content > a:last-child { margin-top: 24px; }
.home-program-section .program-card:nth-child(1) .program-image img { object-position: 48% center; }
.home-program-section .program-card:nth-child(2) .program-image img { object-position: 62% center; }
.home-program-section .program-card:nth-child(3) .program-image img { object-position: 42% center; }
.home-program-section .program-image img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.home-program-section .program-card:hover .program-image img { transform: scale(1.035); }
.home-program-section .program-card:hover .program-content > a:last-child { text-decoration: underline; text-underline-offset: 5px; }

/* Desktop: JS adds one sticky photo (.program-stage) that curtains to the program whose text is
   passing the middle of the screen. Without JS the alternating rows above stay as they are. */
.program-stage { display: none; }
@media (min-width: 901px) {
  .home-program-section .program-grid.has-stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(40px, 6vw, 96px);
  }
  .home-program-section .program-grid.has-stage .program-stage {
    position: sticky;
    top: calc(var(--site-header-height) + 32px);
    display: block;
    grid-column: 1;
    grid-row: 1; /* spans every card: set from JS */
    align-self: start;
    height: min(calc(100svh - var(--site-header-height) - 64px), 480px);
    margin: 42px 0 0;
    overflow: hidden;
    background: var(--sand);
  }
  .home-program-section .program-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 0 0 100%);
    transform: scale(1.06);
    transition: clip-path .9s cubic-bezier(.7,0,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1);
  }
  .home-program-section .program-stage img.is-prev { z-index: 1; clip-path: inset(0); transform: none; transition: none; }
  .home-program-section .program-stage img.is-active { z-index: 2; clip-path: inset(0); transform: none; }
  .home-program-section .program-grid.has-stage .program-card {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content";
    min-height: min(44svh, 360px);
  }
  .home-program-section .program-grid.has-stage .program-image { display: none; }
}

/* Phones/tablets: each program photo opens like a curtain as its card scrolls in. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .home-program-section .program-card.reveal .program-image img {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1s cubic-bezier(.7,0,.2,1) .15s, transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .home-program-section .program-card.reveal.visible .program-image img { clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
  .home-program-section .program-stage img { transform: none; transition: none; }
}

@media (max-width: 900px) {
  .home-program-section .program-card,
  .home-program-section .program-card.featured,
  .home-program-section .program-card:nth-child(2),
  .home-program-section .program-card:nth-child(3) {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "content";
    gap: 0;
    min-height: 0;
    padding: 28px 0;
  }
  .home-program-section .program-image,
  .home-program-section .program-card.featured .program-image,
  .home-program-section .program-card:not(.featured) .program-image {
    aspect-ratio: 1.35 / 1;
  }
  .home-program-section .program-content,
  .home-program-section .program-card.featured .program-content,
  .home-program-section .program-card:nth-child(2) .program-content,
  .home-program-section .program-card:nth-child(3) .program-content {
    padding-top: 20px;
  }
  .home-program-section .program-index { font-size: 16px; margin-bottom: 14px; }
  .home-program-section .program-content h3 { font-size: clamp(25px, 5vw, 32px); }
}

@media (min-width: 601px) and (max-width: 900px) {
  .home-program-section .program-image,
  .home-program-section .program-card.featured .program-image,
  .home-program-section .program-card:not(.featured) .program-image { aspect-ratio: 1.6 / 1; }
}

/* Compact participant and confirmation steps, matched to the payment shell. */
.registration-page .registration-intro {
  padding: calc(var(--site-header-height) + 20px) 0 16px;
  border: 0;
  background: var(--white);
}
.registration-page .registration-intro .registration-back { margin-bottom: 8px; }
.registration-page .registration-intro h1 { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; }
.registration-page .registration-intro p,
.registration-page .registration-intro .container > span { display: none; }
.registration-page .registration-section { padding: 12px 0 72px; }
.registration-page .registration-progress,
.registration-page .registration-event-layout,
.registration-page .registration-card,
.registration-page .registration-review,
.registration-page #registrationStatus { width: min(100%, 760px); max-width: 760px; margin-right: auto; margin-left: auto; }
.registration-page .registration-progress { margin-bottom: 18px; }
.registration-page .registration-event-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "summary" "content";
  gap: 10px;
  margin-bottom: 16px;
}
.registration-page .registration-event-back,
.registration-page .registration-event-image { display: none; }
.registration-page .summary-card { grid-area: summary; }
.registration-page .registration-event-disclosure { grid-area: content; border-bottom: 1px solid var(--line); }
.registration-page .registration-event-disclosure > summary { min-height: 44px; padding: 12px 0; color: var(--maroon); font-size: 13px; font-weight: 600; cursor: pointer; }
.registration-page .registration-event-content { display: none; }
.registration-page .registration-event-disclosure[open] .registration-event-content { display: block; }
.registration-page .registration-shell:has(#registrationReview:not(.hidden)) .registration-event-layout { display: none; }
.registration-page .summary-card { min-width: 0; }
.registration-page .registration-summary-sticky {
  position: static;
  padding: 16px 20px;
  border: 1px solid var(--line);
  background: var(--cream);
}
.registration-page .registration-summary-topline { margin-bottom: 6px; }
.registration-page .registration-summary-title-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.registration-page .registration-summary-image { flex: 0 0 80px; width: 80px; height: 60px; margin: 0; overflow: hidden; background: var(--sand); }
.registration-page .registration-summary-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.registration-page .registration-summary-title-row h2 { min-width: 0; margin: 0; font-size: clamp(21px, 2.5vw, 26px); line-height: 1.2; overflow-wrap: anywhere; }
.registration-page .event-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 10px 0 8px; }
.registration-page .event-summary div { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
.registration-page .event-summary dt { font-size: 12px; }
.registration-page .event-summary dd { font-size: 13px; }
.registration-page .registration-summary-cta { width: auto; min-height: 40px; padding: 8px 14px; }
.registration-page .registration-shell:has(#registrationFormPanel:not(.hidden)) .registration-summary-cta { display: none; }
.registration-page .registration-card {
  margin-top: 0;
  padding: 24px 28px 26px;
  border: 1px solid var(--line);
  background: var(--cream);
}
.registration-page .registration-checkout-layout { display: block; }
.registration-page .registration-data-panel { min-width: 0; }
.registration-page .registration-form-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.registration-page .registration-form-heading,
.registration-page #registrationReview { scroll-margin-top: calc(var(--site-header-height) + 20px); }
.registration-page .registration-form-heading h2,
.registration-page .registration-review-heading h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.registration-page .registration-form-heading p { max-width: none; margin: 0; color: var(--muted); font-size: 12px; }
.registration-page .form-grid { gap: 16px 18px; }
.registration-page .field { gap: 6px; }
.registration-page .field label { font-size: 13px; }
.registration-page .field input,
.registration-page .field textarea {
  min-height: 48px;
  padding: 11px 13px;
  border-color: #cfc4c5;
  border-radius: 3px;
  background: var(--white);
  font-size: 16px;
}
.registration-page .field textarea { min-height: 104px; line-height: 1.5; }
.registration-page .field input:focus,
.registration-page .field textarea:focus { outline: 3px solid rgba(122,31,43,.14); outline-offset: 1px; border-color: var(--maroon); }
.registration-page .field-error { display: block; margin-top: 1px; line-height: 1.4; }
.registration-page .check-row { min-height: 44px; align-items: center; padding: 4px 0; }
.registration-page .check-row input { width: 20px; height: 20px; min-height: 20px; }
.registration-page .form-actions { align-items: center; gap: 14px; margin-top: 18px; }
.registration-page .form-actions .btn { min-height: 48px; }
.registration-page .form-actions p { font-size: 12px; }
.registration-page .registration-review {
  margin-top: 0;
  padding: 24px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--cream);
}
.registration-page .registration-review-heading { margin-bottom: 16px; }
.registration-page .registration-review-heading p { margin: 6px 0 0; font-size: 13px; }
.registration-page .registration-review-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.registration-page .registration-review-participant,
.registration-page .registration-review-event { min-width: 0; }
.registration-page .registration-review-participant h3 { margin: 0 0 8px; font-size: 16px; }
.registration-page .registration-review-participant dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.registration-page .registration-review-participant dl div { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 9px 0; }
.registration-page .registration-review-participant dl div:has(> [data-review-happiness]),
.registration-page .registration-review-participant dl div[data-review-selection] { grid-column: 1 / -1; }
.registration-page .registration-review-participant dd,
.registration-page .registration-review-event dd { line-height: 1.5; overflow-wrap: anywhere; }
.registration-page .registration-review-event { position: static; padding: 15px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.registration-page .registration-review-event h3 { margin: 5px 0 8px; font-size: 18px; }
.registration-page .registration-review-event dl div { grid-template-columns: 82px minmax(0,1fr); gap: 12px; padding: 7px 0; }
.registration-page .registration-review-actions { margin-top: 18px; padding-top: 16px; }
.registration-page .registration-review-actions .btn { min-height: 46px; }
.registration-page #registrationStatus { margin-top: 16px; }

@media (max-width: 640px) {
  .registration-page .registration-intro { padding: calc(var(--site-header-height) + 14px) 0 12px; }
  .registration-page .registration-section { padding: 8px 0 52px; }
  .registration-page .registration-progress { margin-bottom: 14px; }
  .registration-page .registration-summary-sticky { padding: 14px 15px; }
  .registration-page .registration-summary-title-row { gap: 11px; }
  .registration-page .registration-summary-image { flex-basis: 72px; width: 72px; height: 54px; }
  .registration-page .event-summary { gap: 0 12px; }
  .registration-page .event-summary div { grid-template-columns: 1fr; gap: 2px; }
  .registration-page .registration-card,
  .registration-page .registration-review { padding: 20px 16px; }
  .registration-page .registration-form-heading { display: block; margin-bottom: 16px; }
  .registration-page .registration-form-heading h2,
  .registration-page .registration-review-heading h2 { font-size: 24px; }
  .registration-page .registration-form-heading p { margin-top: 4px; }
  .registration-page .form-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .registration-page .field.full { grid-column: auto; }
  .registration-page .form-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .registration-page .form-actions .btn { width: 100%; }
  .registration-page .registration-review-grid { gap: 12px; }
  .registration-page .registration-review-participant dl { grid-template-columns: minmax(0, 1fr); }
  .registration-page .registration-review-participant dl div:last-child { grid-column: auto; }
  .registration-page .registration-review-actions { display: grid; gap: 9px; }
  .registration-page .registration-review-actions .btn-primary { grid-row: 1; }
  .registration-page .registration-review-actions .btn { width: 100%; }
}

/* Payment stage, playful refresh: rounded cards, sticky deadline header, own QRIS card. */
.registration-page .payment-stage { max-width:640px; padding:0 0 28px; border:0; border-radius:var(--radius-xl); background:var(--white); box-shadow:var(--shadow); overflow:clip; }
.registration-page .payment-header { position:sticky; top:var(--site-header-height); z-index:5; padding:18px 24px 20px; overflow:hidden; background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%); }
.registration-page .payment-header::before,
.registration-page .payment-header::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.registration-page .payment-header::before { width:180px; height:180px; top:-90px; right:-40px; }
.registration-page .payment-header::after { width:90px; height:90px; bottom:-50px; left:38%; }
.registration-page .payment-header > * { position:relative; }
.registration-page .payment-header h2 { max-width:none; font-size:clamp(22px, 3.4vw, 28px); }
.registration-page .payment-countdown { justify-items:end; min-width:0; padding:8px 14px 8px 12px; border:0; border-radius:999px; background:var(--white); box-shadow:0 6px 16px rgba(0,0,0,.14); }
.registration-page .payment-countdown span { color:var(--muted); }
.registration-page .payment-countdown strong { display:inline-flex; align-items:center; gap:7px; color:var(--maroon); font-size:19px; }
.registration-page .payment-countdown strong::before { content:""; width:14px; height:14px; border:2px solid currentColor; border-radius:50%; background:linear-gradient(currentColor, currentColor) 50% 30% / 2px 5px no-repeat; }
.registration-page .payment-countdown small { position:absolute; left:0; bottom:0; color:rgba(255,255,255,.82); font-size:11px; white-space:nowrap; }
.registration-page .payment-header-row { align-items:center; padding-bottom:22px; }
.registration-page .payment-primary { gap:0; padding:22px 24px 0; }
.registration-page .payment-amount { order:2; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin:16px 0 0; padding:16px 20px; border-radius:var(--radius-lg); background:var(--maroon-soft); }
.registration-page .payment-amount span { color:var(--muted); letter-spacing:.06em; }
.registration-page .payment-amount strong { color:var(--maroon); font-size:clamp(24px, 5vw, 30px); }
.registration-page .payment-qr-section { order:1; }
.registration-page .payment-qr-card { display:grid; justify-items:center; width:100%; padding:20px 20px 18px; border-radius:var(--radius-lg); background:var(--cream); }
.registration-page .payment-qr-heading { flex-direction:column; align-items:center; gap:8px; margin-bottom:14px; }
.registration-page .payment-qris-badge { padding:5px 14px; border-radius:999px; background:var(--maroon); color:var(--white); font-size:12px; font-weight:800; letter-spacing:.12em; }
.registration-page .payment-qr-heading p { font-size:13px; }
.registration-page .payment-qr-placeholder { width:min(100%, 280px); padding:10px; border:0; border-radius:24px; background:var(--white); box-shadow:var(--shadow-soft); }
.registration-page .payment-qr-code svg { display:block; width:100%; height:auto; border-radius:14px; }
.registration-page .payment-qr-code[hidden], .registration-page .payment-qr-placeholder img[hidden] { display:none; }
.registration-page .payment-download { display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:10px 20px; border:0; border-radius:999px; background:var(--rose); color:var(--maroon); font-weight:700; transition:transform .15s var(--ease), background-color .15s var(--ease); }
.registration-page .payment-download:hover { background:#f2cdd6; transform:translateY(-1px); }
.registration-page .payment-download svg { width:18px; height:18px; }
.registration-page .payment-download[hidden] { display:none; }
.registration-page .payment-stage:focus { outline:none; }
.registration-page .payment-qr-section:has(.payment-qr-placeholder[hidden]) { display:none; }
.registration-page .payment-state,
.registration-page [data-payment-retry],
.registration-page .payment-retry,
.registration-page .payment-retry-error,
.registration-page .payment-check,
.registration-page [data-payment-check-note],
.registration-page .payment-guide,
.registration-page .registration-onboarding { order:3; }
.registration-page .payment-primary > .payment-state { padding-top:0; border-top:0; text-align:center; }
.registration-page .payment-state.payment_pending p { display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:8px 14px; border-radius:999px; background:var(--sand); color:var(--ink); font-weight:600; }
.registration-page .payment-state.payment_pending p::before { content:""; flex:none; width:9px; height:9px; border-radius:50%; background:#e0a526; box-shadow:0 0 0 0 rgba(224,165,38,.6); animation:payment-pulse 1.6s ease-out infinite; }
@keyframes payment-pulse { 70% { box-shadow:0 0 0 9px rgba(224,165,38,0); } 100% { box-shadow:0 0 0 0 rgba(224,165,38,0); } }
.registration-page .payment-check, .registration-page .payment-retry, .registration-page [data-payment-retry] { width:100%; max-width:none; min-height:52px; margin-top:16px; border-radius:999px; }
.registration-page .payment-guide { margin-top:22px; padding:18px 20px; border:0; border-radius:var(--radius-lg); background:var(--cream); }
.registration-page .payment-guide ol { gap:10px; padding:0; list-style:none; counter-reset:payment-step; color:var(--ink); font-size:13px; }
.registration-page .payment-guide li { display:flex; align-items:flex-start; gap:10px; counter-increment:payment-step; }
.registration-page .payment-guide li::before { content:counter(payment-step); flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--rose); color:var(--maroon); font-size:12px; font-weight:800; }
.registration-page .payment-details { margin-top:22px; padding:6px 24px 0; }
.registration-page .payment-details .payment-copy { border-radius:999px; }
@media (prefers-reduced-motion: reduce) {
  .registration-page .payment-state.payment_pending p::before { animation:none; }
  .registration-page .payment-download { transition:none; }
}
@media (max-width:640px) {
  .registration-page .payment-stage { margin-top:20px; padding:0 0 20px; border-radius:var(--radius-lg); }
  .registration-page .payment-header { padding:14px 16px 16px; }
  .registration-page .payment-header-row { align-items:center; }
  .registration-page .payment-header .payment-eyebrow { display:none; }
  .registration-page .payment-header h2 { font-size:20px; }
  .registration-page .payment-countdown { padding:6px 12px; }
  .registration-page .payment-countdown span { display:none; }
  .registration-page .payment-countdown strong { font-size:17px; }
  .registration-page .payment-primary { padding:16px 14px 0; }
  .registration-page .payment-qr-card { padding:16px 12px; }
  .registration-page .payment-amount { padding:14px 16px; }
  .registration-page .payment-details { padding:6px 14px 0; }
  .registration-page .payment-details dl { grid-template-columns:1fr; }
}
.registration-page .payment-next-actions { display:grid; justify-items:center; gap:12px; width:100%; margin-top:20px; }
.registration-page .payment-next-actions[hidden] { display:none; }
.registration-page .payment-next-actions .btn { width:100%; min-height:52px; border-radius:999px; }
.registration-page .payment-next-actions .btn[hidden] { display:none; }
.registration-page .payment-secondary-link { padding:6px 10px; color:var(--maroon); font-size:14px; font-weight:700; }
.registration-page .payment-secondary-link:hover { text-decoration:underline; }
/* The sticky header only helps while paying (countdown); on result screens it would cover the short card. */
.registration-page .payment-stage:not(.payment_pending):not(.payment_processing) .payment-header { position:relative; top:auto; }

/* Registration steps 1-2, same language as the payment stage: rounded cards, pills, soft shadows. */
.registration-page .registration-progress li:not(:last-child)::after { top:16px; height:2px; border-radius:2px; }
.registration-page .registration-progress li span { width:34px; height:34px; border:2px solid var(--line); background:var(--white); transition:background-color .2s var(--ease), box-shadow .2s var(--ease); }
.registration-page .registration-progress li.is-active span { box-shadow:0 0 0 5px var(--maroon-soft); }

/* Event summary as a "ticket" */
.registration-page .registration-summary-sticky { position:relative; top:auto; padding:20px 24px 22px; border:0; border-radius:var(--radius-xl); background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%); color:var(--white); box-shadow:var(--shadow); overflow:hidden; }
.registration-page .registration-summary-sticky::before,
.registration-page .registration-summary-sticky::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.registration-page .registration-summary-sticky::before { width:200px; height:200px; top:-110px; right:-50px; }
.registration-page .registration-summary-sticky::after { width:110px; height:110px; bottom:-70px; left:42%; }
.registration-page .registration-summary-sticky > * { position:relative; }
.registration-page .registration-summary-topline { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.registration-page .registration-summary-topline > span { padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.14); color:var(--white); font-size:12px; font-weight:700; letter-spacing:.04em; }
.registration-page .registration-summary-topline > span:empty { display:none; }
.registration-page .registration-summary-title-row h2 { color:var(--white); }
.registration-page .registration-summary-image { border-radius:14px; }
.registration-page .registration-summary-sticky .event-summary div { border-color:rgba(255,255,255,.16); }
.registration-page .registration-summary-sticky .event-summary dt { color:rgba(255,255,255,.72); }
.registration-page .registration-summary-sticky .event-summary dd { color:var(--white); font-weight:600; }
.registration-page .registration-payment-window { display:flex; align-items:center; gap:8px; margin:6px 0 0; padding:10px 14px; border-radius:var(--radius-md); background:rgba(255,255,255,.12); color:var(--white); font-size:13px; }
.registration-page .registration-payment-window::before { content:""; flex:none; width:14px; height:14px; border:2px solid currentColor; border-radius:50%; background:linear-gradient(currentColor, currentColor) 50% 30% / 2px 5px no-repeat; }
.registration-page .registration-payment-window[hidden] { display:none; }
.registration-page .registration-summary-cta { border-radius:999px; background:var(--white); color:var(--maroon); }
.registration-review-consequence { margin:20px 0 0; padding:12px 14px; border-left:3px solid var(--maroon); background:var(--cream); color:var(--ink); font-size:14px; line-height:1.6; }
.registration-review-consequence:empty { display:none; }
.registration-page .event-location-link { color:inherit; text-decoration:underline; text-decoration-color:rgba(255,255,255,.45); text-decoration-thickness:1px; text-underline-offset:4px; }
.registration-page .event-location-link:hover { text-decoration-color:currentColor; }
.event-map { margin-top:16px; overflow:hidden; border-radius:var(--radius-md); background:var(--sand); aspect-ratio:16 / 9; }
.event-map iframe { display:block; width:100%; height:100%; border:0; }
.event-map-open { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:6px; color:var(--maroon); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.registration-page .registration-share { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin:22px 0 0; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.registration-page .registration-share[hidden] { display:none; }
.registration-page .registration-share a, .registration-page .registration-share button { padding:10px 0; margin-block:-10px; border:0; background:none; color:var(--maroon); font:inherit; letter-spacing:inherit; text-transform:inherit; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.registration-page .registration-event-disclosure { border-bottom:0; }
.registration-page .registration-event-disclosure > summary { display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; border-radius:999px; background:var(--maroon-soft); }
.registration-page .registration-event-disclosure[open] .registration-event-content { margin-top:12px; padding:20px 22px; border-radius:var(--radius-lg); background:var(--cream); }

/* Participant form */
.registration-page .registration-card,
.registration-page .registration-review { border:0; border-radius:var(--radius-xl); background:var(--white); box-shadow:var(--shadow); }
.registration-page .registration-card { padding:clamp(22px, 4vw, 36px); }
.registration-page .field label:not(.check-row) { color:var(--ink); font-size:13px; font-weight:700; }
.registration-page .field input:not([type="checkbox"]),
.registration-page .field textarea { border:1.5px solid var(--line); border-radius:var(--radius-md); background:var(--cream); transition:border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease); }
.registration-page .field input:not([type="checkbox"]):hover,
.registration-page .field textarea:hover { border-color:#d9c9ca; }
.registration-page .field input:not([type="checkbox"]):focus,
.registration-page .field textarea:focus { outline:none; border-color:var(--maroon); background:var(--white); box-shadow:0 0 0 4px rgba(122,31,43,.12); }
.registration-page .field input[aria-invalid="true"] { border-color:var(--maroon-deep); background:var(--rose); }
.registration-page .check-row { align-items:center; padding:14px 16px; border-radius:var(--radius-md); background:var(--maroon-soft); color:var(--ink); cursor:pointer; }
.registration-page .check-row input { width:20px; min-height:20px; height:20px; margin:0; }
.registration-page .check-row:has(input:focus-visible) { outline:3px solid var(--maroon); outline-offset:2px; }
.registration-page .selection-instagram-proof { padding:18px; border:1.5px solid var(--line); border-radius:var(--radius-md); }
.registration-page .selection-instagram-proof .selection-instagram-title { color:var(--ink); font-size:15px; font-weight:700; }
.registration-page .selection-instagram-proof p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.registration-page .selection-instagram-proof [data-instagram] { justify-self:start; margin-bottom:8px; }
/* Native file input stays on top (transparent) so click, keyboard and screen readers keep working. */
.registration-page .file-picker { position:relative; display:flex; align-items:center; gap:12px; min-height:50px; padding:7px 14px 7px 7px; border:1.5px solid var(--line); border-radius:var(--radius-md); background:var(--cream); }
.registration-page .field .file-picker .file-picker-input { position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; opacity:0; cursor:pointer; }
.registration-page .file-picker-button { flex:none; padding:8px 16px; border-radius:999px; background:var(--maroon); color:var(--white); font-size:13px; font-weight:700; }
.registration-page .file-picker-name { min-width:0; overflow:hidden; color:var(--muted); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.registration-page .file-picker-name.has-file { color:var(--ink); font-weight:600; }
.registration-page .file-picker:hover { border-color:#d9c9ca; }
.registration-page .file-picker:has(.file-picker-input:focus-visible) { outline:3px solid var(--maroon); outline-offset:2px; }
.registration-page .file-picker:has(.file-picker-input[aria-invalid="true"]) { border-color:var(--maroon-deep); background:var(--rose); }
.registration-page .form-actions .btn,
.registration-page .registration-review-actions .btn { min-height:52px; padding:12px 28px; border-radius:999px; }

/* Review */
.registration-page .registration-review { padding:clamp(22px, 4vw, 36px); }
.registration-page .registration-review-grid { gap:14px; }
.registration-page .registration-review-participant,
.registration-page .registration-review-event { padding:18px 20px; border:0; border-radius:var(--radius-lg); background:var(--cream); }
.registration-page .registration-review-event { position:static; background:var(--maroon-soft); }
.registration-page .registration-review-participant h3 { margin:0 0 4px; }
.registration-page .registration-review-participant dl div:first-child,
.registration-page .registration-review-event dl div:first-child { border-top:0; }
.registration-page .registration-review-participant dl div,
.registration-page .registration-review-event dl div { border-top-color:rgba(122,31,43,.1); }
.registration-page .registration-review-actions { gap:12px; }

@media (prefers-reduced-motion: reduce) {
  .registration-page .registration-progress li span,
  .registration-page .field input,
  .registration-page .field textarea { transition:none; }
}
@media (max-width:640px) {
  .registration-page .registration-summary-sticky { padding:18px 18px 20px; border-radius:var(--radius-lg); }
  .registration-page .registration-card,
  .registration-page .registration-review { border-radius:var(--radius-lg); }
  .registration-page .form-actions { flex-direction:column; align-items:stretch; }
  .registration-page .form-actions .btn { width:100%; }
  .registration-page .registration-review-actions { display:flex; flex-direction:column-reverse; align-items:stretch; justify-content:flex-start; }
  .registration-page .registration-review-actions .btn { width:100%; }
}
.registration-page .registration-event-disclosure > summary { gap:8px; list-style:none; }
.registration-page .registration-event-disclosure > summary::-webkit-details-marker { display:none; }
.registration-page .registration-event-disclosure > summary::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--ease); }
.registration-page .registration-event-disclosure[open] > summary::after { transform:translateY(2px) rotate(-135deg); }
.registration-page .registration-event-disclosure > summary:focus-visible { outline:3px solid var(--maroon); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .registration-page .registration-event-disclosure > summary::after { transition:none; } }

/* Brand watermark: the Kita Bahagia mark replaces the generic decorative circles. */
.registration-page .payment-header::before,
.registration-page .registration-summary-sticky::before { width:200px; height:200px; top:auto; right:-28px; bottom:-58px; border-radius:0; background:url("../assets/logo/pictorial-white.webp") center / contain no-repeat; opacity:.09; transform:rotate(-12deg); }
.registration-page .registration-summary-sticky::before { width:240px; height:240px; right:-36px; bottom:-64px; }
.registration-page .payment-header::after,
.registration-page .registration-summary-sticky::after { display:none; }
@media (max-width:640px) {
  .registration-page .payment-header::before { width:150px; height:150px; right:-26px; bottom:-48px; }
  .registration-page .registration-summary-sticky::before { width:190px; height:190px; right:-34px; bottom:-52px; }
}

/* Editorial event listing (schedule page + homepage "Kegiatan Terdekat"). */
.schedule-grid, .home-upcoming-list { display:block; border-top:2px solid var(--ink); }
.home-upcoming-list[hidden] { display:none; }
.event-row { position:relative; display:grid; grid-template-columns:104px 150px minmax(0, 1fr) 200px; gap:28px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line); transition:background-color .2s var(--ease); }
.event-row.hidden { display:none; }
.event-date { display:grid; color:var(--maroon); line-height:1; }
.event-date b { font:700 62px/.9 "Instrument Sans", "DM Sans", sans-serif; letter-spacing:-.045em; }
.event-date span { margin-top:8px; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.event-date small { margin-top:4px; color:var(--muted); font-size:12px; }
.event-row-photo, .event-feature-photo { position:relative; margin:0; overflow:hidden; background:var(--sand); aspect-ratio:4 / 5; }
/* Posters are text-heavy 4:5 images: show them whole; other ratios sit on the plain sand background. */
.event-row-photo img, .event-feature-photo img { position:relative; display:block; width:100%; height:100%; object-fit:contain; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
/* Whole row/feature is clickable through the title link; the button stays on top. */
.event-row-link { color:inherit; text-decoration:none; }
.event-row-link::after { content:""; position:absolute; inset:0; z-index:1; }
.event-row .event-cta, .event-feature .event-cta { position:relative; z-index:2; }
/* Hover only on real pointers: on phones a tap would leave the row tinted and underlined. */
@media (hover:hover) {
  .event-row:hover { background:linear-gradient(90deg, transparent, rgba(247,223,229,.35) 10%, rgba(247,223,229,.35) 90%, transparent); }
  .event-row:hover .event-row-photo img, .event-feature:hover .event-feature-photo img { transform:scale(1.03); }
  .event-row:hover .event-row-link, .event-feature:hover .event-row-link { text-decoration:underline; text-decoration-color:var(--maroon); text-decoration-thickness:2px; text-underline-offset:5px; }
}
.event-row-link:focus-visible { outline:none; text-decoration:underline; text-decoration-color:var(--maroon); text-decoration-thickness:2px; text-underline-offset:5px; }
.event-row:has(.event-row-link:focus-visible), .event-feature:has(.event-row-link:focus-visible) { outline:3px solid var(--maroon); outline-offset:4px; }
.event-kicker { margin:0; color:var(--maroon); font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.event-kicker span { color:var(--muted); font-weight:600; letter-spacing:.03em; text-transform:none; }
.event-title { margin:8px 0; color:var(--ink); font:700 clamp(20px, 2vw, 26px)/1.15 "Instrument Sans", "DM Sans", sans-serif; letter-spacing:-.025em; overflow-wrap:anywhere; }
.event-where { margin:0; color:var(--muted); font-size:14px; }
.event-row-side { display:grid; justify-items:end; gap:5px; text-align:right; }
.event-price { color:var(--ink); font:700 21px/1.1 "Instrument Sans", "DM Sans", sans-serif; letter-spacing:-.02em; }
.event-slot { display:block; color:var(--muted); font-size:13px; }
.event-slot.is-low, .event-slot.is-full { color:var(--maroon); font-weight:700; }
.event-cta { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; margin-top:8px; padding:11px 20px; border:1px solid var(--maroon); background:var(--maroon); color:var(--white); font-size:14px; font-weight:700; transition:background-color .15s var(--ease), color .15s var(--ease); }
.event-cta:hover { background:var(--maroon-deep); border-color:var(--maroon-deep); color:var(--white); }
.event-cta.is-quiet { background:transparent; color:var(--maroon); }
.event-cta.is-quiet:hover { background:var(--maroon-soft); color:var(--maroon); }
.event-cta:focus-visible { outline:3px solid var(--maroon); outline-offset:3px; }
.schedule-urgent-grid { grid-template-columns:1fr; gap:0; border-top:2px solid var(--ink); }
.event-feature { position:relative; display:grid; grid-template-columns:220px minmax(0, 1fr); column-gap:40px; align-content:start; padding:26px 0 30px; }
.event-feature > .event-feature-photo { grid-row:1 / span 6; }
.schedule-urgent-grid.is-single .event-feature { grid-template-columns:320px minmax(0, 1fr); column-gap:48px; align-content:center; }
.schedule-urgent-grid.is-single .event-feature .event-title { font-size:clamp(26px, 3vw, 38px); }
.event-feature + .event-feature { border-top:1px solid var(--line); }
.event-feature .event-title { font-size:clamp(24px, 2.4vw, 32px); }
.event-closing { justify-self:start; display:inline-block; margin:0 0 10px; padding-bottom:4px; border-bottom:2px solid var(--maroon); color:var(--maroon); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.event-summary-text { margin:10px 0 0; color:var(--muted); font-size:15px; }
.event-feature-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.event-row.loading-card { grid-template-columns:200px minmax(0, 1fr); }
.event-row.loading-card .loading-media { min-height:150px; aspect-ratio:4 / 3; }
@media (prefers-reduced-motion: reduce) {
  .event-row-photo img, .event-feature-photo img, .event-cta { transition:none; }
}
/* Month groups on the schedule page */
.schedule-grid { border-top:0; }
.event-month { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:40px 0 0; padding-bottom:10px; border-bottom:2px solid var(--ink); font:700 clamp(30px, 3.4vw, 44px)/1 "Instrument Sans", "DM Sans", sans-serif; letter-spacing:-.04em; }
.event-month-group:first-child .event-month { margin-top:0; }
.event-month em { color:var(--maroon); font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit; }
.event-month small { color:var(--muted); font:600 14px/1 "DM Sans", sans-serif; letter-spacing:0; }
.event-month-group .event-date span { display:none; }
.event-closing b { margin-left:6px; padding:2px 8px; background:var(--maroon); color:var(--white); letter-spacing:.06em; }

/* Filters as editorial tabs, search as an underlined field */
.schedule-filters { gap:26px; border-bottom:1px solid var(--line); }
.schedule-filters .filter-btn { min-height:44px; padding:10px 0; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); font-size:15px; font-weight:600; }
.schedule-filters .filter-btn:hover { color:var(--maroon); border-color:transparent; }
.schedule-filters .filter-btn.active { background:transparent; border-bottom-color:var(--maroon); color:var(--ink); font-weight:800; }
.schedule-search input { min-height:46px; padding:10px 0 10px 28px; border:0; border-bottom:1.5px solid var(--ink); border-radius:0; background:transparent url("../img/icon-search.svg") no-repeat 0 50% / 18px; font-size:16px; }
.schedule-search input:focus { outline:none; border-bottom-color:var(--maroon); box-shadow:0 2px 0 var(--maroon); }

/* Registration ticket: poster thumbnail opens the full poster */
.registration-page .registration-summary-image { flex:0 0 96px; width:96px; height:120px; border-radius:14px; background:rgba(255,255,255,.12); }
.registration-poster-button { position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.registration-page .registration-poster-button img { display:block; width:100%; height:100%; object-fit:contain; }
.registration-poster-button span { position:absolute; right:6px; bottom:6px; left:6px; padding:3px 0; border-radius:999px; background:rgba(0,0,0,.55); color:var(--white); font-size:11px; font-weight:700; text-align:center; }
.registration-poster-button:focus-visible { outline:3px solid var(--white); outline-offset:3px; }
.poster-dialog { max-width:min(92vw, 560px); max-height:92vh; padding:0; border:0; background:transparent; overflow:visible; }
.poster-dialog::backdrop { background:rgba(20, 8, 10, .82); }
.poster-dialog img { display:block; max-width:100%; max-height:calc(92vh - 8px); margin:0 auto; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.poster-dialog-close { position:absolute; top:-16px; right:-16px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:var(--white); color:var(--maroon); font-size:26px; line-height:1; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.poster-dialog-close:focus-visible { outline:3px solid var(--maroon); outline-offset:3px; }

@media (prefers-reduced-motion: reduce) { .event-row { transition:none; } }
@media (max-width:900px) {
  .event-row { grid-template-columns:76px 110px minmax(0, 1fr) 170px; gap:20px; }
  .event-feature, .schedule-urgent-grid.is-single .event-feature { grid-template-columns:180px minmax(0, 1fr); column-gap:28px; }
}
@media (max-width:640px) {
  /* Phone row: date + category, then the title across the full width (long titles stay ~4 lines),
     then place/time, price and a compact Daftar stacked beside the 4:5 poster.
     The trailing 1fr row absorbs the poster's extra height so the left stack stays tight. */
  .schedule-section .container { width:min(100% - 40px, 1160px); }
  .event-row { grid-template-columns:minmax(0, 1fr) 104px; grid-template-rows:repeat(6, auto) 1fr; column-gap:18px; row-gap:0; align-items:start; padding:28px 0 26px; }
  .event-row .event-row-copy, .event-row .event-row-side { display:contents; text-align:left; }
  .event-row .event-date { grid-column:1; grid-row:1; display:flex; align-items:baseline; gap:6px; }
  .event-row .event-date b, .event-row .event-date span { display:inline; margin:0; font:800 12px/1.2 "DM Sans", sans-serif; letter-spacing:.14em; text-transform:uppercase; }
  .event-row .event-date small { margin:0; font-size:12px; }
  .event-row .event-date small::before { content:"· "; }
  .event-row .event-kicker { grid-column:1 / -1; grid-row:1; justify-self:end; max-width:62%; text-align:right; }
  .event-row .event-title { grid-column:1 / -1; grid-row:2; margin:14px 0 0; font-size:19px; line-height:1.3; letter-spacing:-.005em; }
  .event-row .event-where { grid-column:1; grid-row:3; margin-top:16px; font-size:14px; line-height:1.55; }
  .event-where-place { display:block; }
  .event-where-sep { display:none; }
  .event-row-photo { grid-column:2; grid-row:3 / span 5; margin-top:14px; }
  .event-row .event-price { grid-column:1; grid-row:4; margin-top:16px; font-size:20px; letter-spacing:0; }
  .event-row .event-slot { grid-column:1; grid-row:5; font-size:12px; }
  .event-row .event-cta { grid-column:1; grid-row:6; justify-self:start; min-height:44px; margin:14px 0 0; padding:0 16px; }
  .event-feature, .schedule-urgent-grid.is-single .event-feature { grid-template-columns:1fr; padding:22px 0 26px; }
  .event-feature > .event-feature-photo { grid-row:auto; width:min(100%, 260px); margin-bottom:16px; }
  .schedule-urgent-grid.is-single .event-feature .event-title { font-size:24px; }
  .event-feature-foot { flex-direction:column; align-items:stretch; }
  .event-feature-foot .event-cta { width:100%; }
  .event-row.loading-card { grid-template-columns:1fr; }
  /* Homepage: one swipeable poster card per event instead of a long stacked list. */
  /* --bleed matches the 18px homepage gutter (.home-page main > .section > .container). */
  .home-upcoming-list { --bleed:18px; display:flex; gap:16px; margin-inline:calc(var(--bleed) * -1); padding:24px var(--bleed) 6px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--bleed); scrollbar-width:none; }
  .home-upcoming-list::-webkit-scrollbar { display:none; }
  .home-upcoming-list .event-row { flex:0 0 min(300px, 82%); grid-template-columns:minmax(0, 1fr); grid-template-rows:none; column-gap:0; align-content:start; padding:0 16px 20px; background:var(--cream); border-bottom:1px solid var(--line); scroll-snap-align:start; }
  .home-upcoming-list .event-row-photo { grid-column:1; grid-row:1; margin:0 -16px 18px; }
  .home-upcoming-list .event-row:hover { background:var(--cream); }
  .home-upcoming-list .event-row .event-date, .home-upcoming-list .event-row .event-kicker { grid-row:2; }
  .home-upcoming-list .event-row .event-title { grid-row:3; display:-webkit-box; margin:10px 0 8px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; }
  .home-upcoming-list .event-row .event-where { grid-row:4; margin-top:0; }
  .home-upcoming-list .event-row .event-row-side { grid-column:1; grid-row:5; display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; row-gap:2px; align-items:center; justify-items:start; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); text-align:left; }
  .home-upcoming-list .event-row .event-price { grid-row:1; margin:0; }
  .home-upcoming-list .event-row .event-slot { grid-row:2; }
  .home-upcoming-list .event-row .event-cta { grid-column:2; grid-row:1 / span 2; margin:0; }
  .home-upcoming-list .event-row.loading-card { display:block; }
  .home-upcoming-list .event-row.loading-card .loading-media { min-height:0; margin:0 -16px; aspect-ratio:4 / 5; }
  .home-upcoming-list .loading-card-copy { padding:18px 0 0; }
  .schedule-filters { flex-wrap:nowrap; justify-content:flex-start; gap:20px; overflow-x:auto; scrollbar-width:none; }
  .schedule-filters .filter-btn { flex:none; }
  .registration-page .registration-summary-image { flex-basis:84px; width:84px; height:105px; }
  .poster-dialog-close { top:8px; right:8px; }
}