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

    :root {
      --yellow: #F5D000;
      --black: #0D0D0D;
      --ink: #1A1A1A;
      --muted: #888;
      --white: #FAFAFA;
      --blue: #4A90B8;
      --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
      --font-body: 'Figtree', 'Inter', system-ui, sans-serif;
      --font-mono: 'Figtree', 'Inter', system-ui, sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      font-family: var(--font-heading);
      line-height: 1.15;
      letter-spacing: -.02em;
      color: var(--black);
    }

    h1 {
      font-weight: 900;
      font-size: clamp(2.5rem, 5vw, 4.75rem);
    }

    h2 {
      font-weight: 900;
      font-size: clamp(2rem, 4vw, 3rem);
    }

    h3 {
      font-weight: 800;
      font-size: clamp(1.25rem, 2vw, 1.75rem);
      letter-spacing: -.01em;
    }

    h4 {
      font-weight: 700;
      font-size: clamp(1rem, 1.5vw, 1.25rem);
      letter-spacing: -.01em;
    }

    h5 {
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: 0;
    }

    body {
      font-family: var(--font-body);
      background: #FAFAFA;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
    }

    /* ── TYPOGRAPHY SYSTEM ── */

    /* MONO LABEL — shared base for all uppercase tracking labels */
    .timeline-mini .label, .program-timeline .label,
    #program .section-label,
    #speakers .sub, #speakers .hint,
    .info-card .lbl,
    #modal-inst, .modal-video-label,
    #schedule .section-label, #schedule .tz, .legend-label,
    .s-time, .s-type, .panel-header-time, .s-pending-note,
    .day-tab,
    #video-preview .section-label,
    #community .section-label, .social-label, .email-note,
    #collaborators .label,
    footer .f-date, footer .f-label,
    #page-hero .page-label,
    #about .section-label, #agenda-tentang .section-label,
    #rsvp-section .section-label, .rsvp-contact-card .contact-label,
    .attend-expect-label, .badge-free,
    .video-card-topic, .filter-chip,
    .modal-yt-fallback {
      font-family: var(--font-mono);
      font-size: 1rem;
    }

    /* BODY TEXT — shared base for all running body paragraphs */
    #program p.desc, #speakers .desc,
    #shifting .desc, #modal-bio,
    #home .tagline,
    footer .f-tagline, footer .f-ref,
    .agenda-desc,
    .rsvp-contact-card .card-desc, .rsvp-attend-card .card-desc,
    .attend-list li span,
    .s-footer-note {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.7;
    }

    /* scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: var(--black);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--yellow);
      border-radius: 4px;
    }

    ::selection {
      background: rgb(236, 0, 171);
      color: #fff;
    }

    [id] {
      scroll-margin-top: 72px;
    }

    /* ── LAYOUT ── */
    .container {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .container-sm {
      max-width: 768px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .container-md {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* ── NAV ── */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: 64px;
      transition: background .3s;
      background: transparent;
    }

    #nav.scrolled {
      background: rgba(13, 13, 13, .95);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(255, 255, 255, .05);
    }

    #nav .inner {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 1.5rem;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #nav .logo {
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 1rem;
      color: #000;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: -.02em;
      transition: color .2s;
    }

    #nav .logo:hover {
      color: rgba(0, 0, 0, .6);
    }

    #nav.scrolled .logo {
      color: #fff;
    }

    #nav.scrolled .logo:hover {
      color: var(--yellow);
    }

    #nav .links {
      display: flex;
      gap: 1.5rem;
      align-items: center;
    }

    #nav .links a,
    #nav .links button {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 700;
      color: rgba(0, 0, 0, .7);
      background: none;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: color .2s;
    }

    #nav .links a:hover,
    #nav .links button:hover {
      color: #000;
    }

    .nav-home-btn {
      display: flex;
      align-items: center;
      line-height: 1;
    }

    #nav .links a.active,
    #nav .links button.active {
      color: #000;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 2px;
    }

    #nav.scrolled .links a,
    #nav.scrolled .links button {
      color: rgba(255, 255, 255, .6);
    }

    #nav.scrolled .links a:hover,
    #nav.scrolled .links button:hover {
      color: #fff;
    }

    #nav.scrolled .links a.active,
    #nav.scrolled .links button.active {
      color: var(--yellow);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 2px;
    }

    #nav .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }

    #nav .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: #000;
      transition: all .3s;
    }

    #nav.scrolled .hamburger span {
      background: #fff;
    }

    #mobile-menu {
      display: none;
      position: fixed;
      top: 64px;
      left: 0;
      right: 0;
      z-index: 99;
      background: rgba(13, 13, 13, .98);
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      padding: 1rem 1.5rem;
      flex-direction: column;
      gap: 4px;
    }

    #mobile-menu.open {
      display: flex;
    }

    #mobile-menu a,
    #mobile-menu button {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .7);
      background: none;
      border: none;
      cursor: pointer;
      text-decoration: none;
      text-align: left;
      padding: .625rem .75rem;
      border-radius: .5rem;
      transition: all .2s;
    }

    #mobile-menu a:hover,
    #mobile-menu button:hover {
      color: #fff;
      background: rgba(255, 255, 255, .05);
    }

    @media (max-width: 1023px) {
      #nav .links {
        display: none;
      }

      #nav .hamburger {
        display: flex;
      }
    }

    /* ── HERO ── */
    #home {
      position: relative;
      background: var(--yellow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    #home .grid-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .07) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    #home .glow1 {
      position: absolute;
      top: -160px;
      left: -160px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(255, 255, 255, .25) 0%, transparent 65%);
      filter: blur(60px);
      pointer-events: none;
    }

    #home .glow2 {
      position: absolute;
      bottom: -80px;
      right: -80px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(255, 255, 255, .15) 0%, transparent 65%);
      filter: blur(60px);
      pointer-events: none;
    }

    /* Hero two-column layout */
    #home .hero-content {
      position: relative;
      z-index: 1;
      max-width: 1140px;
      margin: 0 auto;
      padding: 7rem 1.5rem 3rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items: start;
    }

    #home .hero-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    #home .hero-right {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px) rotate(0deg);
      }

      33% {
        transform: translateY(-14px) rotate(.5deg);
      }

      66% {
        transform: translateY(-6px) rotate(-.4deg);
      }
    }

    #home .hero-right img {
      width: 100%;
      max-width: 620px;
      height: auto;
      display: block;
      animation: float 6s ease-in-out infinite;
      transition: transform .3s ease, filter .3s ease;
      filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .18));
      cursor: pointer;
    }

    #home .hero-right img:hover {
      animation-play-state: paused;
      transform: translateY(-18px) rotate(1.5deg) scale(1.03);
      filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .28));
    }

    @media(max-width:900px) {
      #home .hero-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 6rem 1.25rem 3rem;
      }

      #home .hero-right {
        order: -1;
        overflow: visible;
        width: 100%;
      }

      #home .hero-right img {
        max-width: 100%;
        width: 100%;
      }
    }

    @media(max-width:768px) {
      #program .inner {
        gap: 2rem;
        padding: 4rem 1.25rem;
      }
    }

    .date-badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      color: #000;
      font-family: var(--font-mono);
      font-size: .9rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .25em;
      padding: .5rem 0;
      margin-bottom: 1rem;
    }

    .date-badge .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #000;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    #home h1 {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: clamp(2.5rem, 4.5vw, 4.75rem);
      line-height: 1.05;
      letter-spacing: -.02em;
      text-align: left;
    }

    #home h1.title1 {
      color: #000;
      margin-bottom: .2rem;
    }

    #home h1.title2 {
      color: #000;
      margin-bottom: 2rem;
    }

    #home .tagline {
      font-size: 1.2rem;
      color: #000;
      max-width: 480px;
      margin-bottom: 2rem;
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: flex-start;
      margin-bottom: 3rem;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: var(--blue);
      color: #fff;
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      border-radius: 999px;
      text-decoration: none;
      transition: all .2s;
      border: none;
      cursor: pointer;
    }

    .btn-primary:hover {
      background: #3a7aa0;
      transform: scale(1.04) rotate(1deg);
      box-shadow: 0 8px 24px rgba(74, 144, 184, .35);
    }

    .btn-register {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: rgb(236, 0, 171);
      color: #fff;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1rem;
      padding: .875rem 1.75rem;
      border-radius: 999px;
      text-decoration: none;
      transition: all .2s;
    }

    .btn-register:hover {
      background: rgb(0, 115, 185);
      transform: scale(1.03);
    }

    .btn-soldout {
      background: #9ca3af;
      cursor: default;
      opacity: .85;
    }

    .btn-soldout:hover {
      background: #9ca3af;
      transform: none;
    }

    .hero-subscribe {
      width: 100%;
    }

    .hero-subscribe-form {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 999px;
      padding: .25rem .25rem .25rem 1.25rem;
      gap: .25rem;
      max-width: 420px;
    }

    .hero-subscribe-form input[type="email"] {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      font-size: .875rem;
      color: #111;
      outline: none;
    }

    .hero-subscribe-form input[type="email"]::placeholder {
      color: #888;
    }

    .hero-subscribe-form button {
      padding: .6rem 1.1rem;
      background: rgb(236, 0, 171);
      color: #fff;
      border: none;
      border-radius: 999px;
      font-size: .875rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .hero-subscribe-form button:hover {
      background: rgb(0, 115, 185);
    }

    .hero-subscribe-success {
      font-size: .9rem;
      color: rgb(236, 0, 171);
      font-weight: 600;
      margin: 0;
    }

    /* ── KIT EMBED OVERRIDES ── */
    .cta-subscribe-row {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
    }

    @media (min-width: 641px) {
      .cta-subscribe-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
      }
      .cta-subscribe-row .btn-secondary {
        flex-shrink: 0;
        width: auto !important;
      }
      .hero-subscribe-inline {
        flex: 0 1 260px;
        min-width: 0;
      }
      .hero-subscribe-inline .formkit-form[data-uid="efc6e4419a"] .seva-fields.formkit-fields {
        max-width: 100% !important;
        padding: 0.1rem 0.1rem 0.1rem 1rem !important;
      }
    }

    .hero-subscribe-label-kit {
      font-size: 1.2rem;
      color: #000;
      margin: 0 0 .5rem 0;
    }

    .formkit-form[data-uid="efc6e4419a"] .formkit-header,
    .formkit-form[data-uid="efc6e4419a"] .formkit-subheader,
    .formkit-form[data-uid="efc6e4419a"] .formkit-powered-by-convertkit-container,
    .formkit-form[data-uid="efc6e4419a"] .formkit-guarantee {
      display: none !important;
    }

    .formkit-form[data-uid="efc6e4419a"] {
      background: transparent !important;
      border: none !important;
      max-width: 100% !important;
    }

    .formkit-form[data-uid="efc6e4419a"] [data-style="minimal"] {
      padding: 0 !important;
    }

    .formkit-form[data-uid="efc6e4419a"] .seva-fields.formkit-fields {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      background: #fff !important;
      border-radius: 999px !important;
      padding: 0.2rem 0.2rem 0.2rem 1.25rem !important;
      gap: 0.25rem !important;
      max-width: 100% !important;
      margin: 0 !important;
    }

    .formkit-form[data-uid="efc6e4419a"] .formkit-field {
      flex: 1 !important;
      margin: 0 !important;
    }

    .formkit-form[data-uid="efc6e4419a"] .formkit-input {
      border: none !important;
      background: transparent !important;
      border-radius: 0 !important;
      padding: 0.5rem 0 !important;
      font-size: 0.875rem !important;
      color: #111 !important;
      width: 100% !important;
    }

    .formkit-form[data-uid="efc6e4419a"] .formkit-submit {
      flex-shrink: 0 !important;
      margin: 0 !important;
      background-color: rgb(236, 0, 171) !important;
      border-radius: 999px !important;
      border: none !important;
      padding: 0 !important;
    }

    .formkit-form[data-uid="efc6e4419a"] .formkit-submit > span {
      padding: 0.875rem 1.1rem !important;
      display: block !important;
      font-size: 0.875rem !important;
    }

    .formkit-form[data-uid="efc6e4419a"] .formkit-submit:hover {
      background-color: rgb(0, 115, 185) !important;
    }

    .formkit-form[data-uid="efc6e4419a"] .formkit-fields {
      margin-top: 0 !important;
    }

    .btn-secondary,
    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      border: 1.5px solid rgb(0, 0, 0);
      color: var(--black);
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 1rem;
      padding: .75rem 1.5rem;
      border-radius: 999px;
      text-decoration: none;
      transition: all .2s;
    }

    .btn-secondary:hover,
    .btn-outline:hover {
      border-color: var(--black);
      background: rgba(0, 0, 0, .06);
    }

    /* Timeline mini */
    .timeline-mini {
      width: 100%;
    }

    .timeline-mini .label {
      letter-spacing: .2em;
      color: #000;
      margin-bottom: 1.75rem;
      font-weight: 500;
    }

    /* ── TIMELINE TRACK ── */
    /* --tl-date-h: height reserved for date text above dot        */
    /* line top = --tl-date-h + 28px (half of 56px dot)            */
    :root { --tl-date-h: 2rem; --tl-dot: 44px; }

    .timeline-track {
      position: relative;
      width: 100%;
    }

    /* bg line
       top = date-h (includes padding-bottom) + dot-radius - half-line-height
           = var(--tl-date-h) + (var(--tl-dot)/2) - 5px                      */
    .timeline-track::before {
      content: '';
      position: absolute;
      top: calc(var(--tl-date-h) + (var(--tl-dot) / 2) - 5px);
      left: calc(100% / 14);
      right: calc(100% / 14);
      height: 10px;
      border-radius: 99px;
      background: #e8e8e8;
      z-index: 0;
    }

    /* pink fill — JS sets left & width precisely */
    .timeline-line-fill {
      position: absolute;
      top: calc(var(--tl-date-h) + (var(--tl-dot) / 2) - 5px);
      height: 10px;
      border-radius: 99px;
      background: rgb(236, 1, 171);
      z-index: 1;
      width: 0;
      transition: width .5s ease;
    }

    /* flex row of items */
    .timeline-dots {
      display: flex;
      justify-content: space-between;
      position: relative;
    }

    /* ── EACH ITEM (date → dot → label, stacked) ── */
    .tl-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* DATE — fixed height so dot is always at the same vertical pos */
    .timeline-dot-date {
      font-family: var(--font-mono);
      font-size: 1rem;
      color: rgb(236, 1, 171);
      font-weight: 600;
      white-space: nowrap;
      text-align: center;
      height: var(--tl-date-h);
      display: flex;
      align-items: flex-end;
      padding-bottom: .75rem;
    }

    .timeline-dot-date.upcoming { color: #aaa; }

    /* DOT CIRCLE */
    .timeline-dot {
      width: var(--tl-dot);
      height: var(--tl-dot);
      border-radius: 50%;
      border: 3px solid #ccc;
      background: #fff;
      z-index: 2;
      position: relative;
      transition: all .2s;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .timeline-dot.upcoming  { background: #fff; border-color: #ccc; }
    .timeline-dot.past      { background: rgb(236,1,171); border-color: rgb(236,1,171); }
    .timeline-dot.current   { background: rgb(236,1,171); border-color: rgb(236,1,171); box-shadow: 0 0 0 7px rgba(236,1,171,.2); }
    .timeline-dot.highlight.upcoming { border-color: #0D0D0D; }

    .timeline-dot .dot-check { display: none; }
    .timeline-dot.past .dot-check,
    .timeline-dot.current .dot-check { display: block; color: #fff; }

    /* LABEL */
    .timeline-dot-label {
      font-family: var(--font-heading);
      font-size: .85rem;
      line-height: 1.4;
      color: #444;
      text-align: center;
      padding: .75rem .25rem 0;
    }

    .timeline-dot-label.highlight { color: #0D0D0D; font-weight: 700; }
    .timeline-dot-label.past      { color: #0D0D0D; }

    .program-timeline {
      margin-top: 2.5rem;
    }

    .program-timeline .label {
      color: var(--muted);
    }

    /* Ticker */
    .ticker-wrap {
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(0, 0, 0, .3);
      overflow: hidden;
      padding: .75rem 0;
    }

    .ticker-inner {
      display: flex;
      white-space: nowrap;
      animation: ticker 60s linear infinite;
    }

    .ticker-inner span {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: #000;
      letter-spacing: .1em;
      padding-right: 2rem;
      text-transform: uppercase;
    }

    @keyframes ticker {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    /* ── PROGRAM ── */
    #program {
      background: #fff;
      border-top: 1px solid #E5E5E5;
    }

    #program .inner {
      padding: 4rem 2.5rem;
      max-width: 1140px;
      margin: 0 auto;
    }

    #program .program-top {
      padding-bottom: 3rem;
    }

    #speakers {
      background: #f8f8f8;
      border-top: 1px solid #E5E5E5;
    }

    #speakers .inner {
      padding: 4rem 2.5rem;
      max-width: 1140px;
      margin: 0 auto;
    }

    @media(max-width:768px) {

      #program .inner,
      #speakers .inner {
        padding: 4rem 1.25rem;
      }
    }

    #program .section-label {
      letter-spacing: .2em;
      color: var(--muted);
      margin-bottom: 1rem;
    }

    #program h2 {
      margin-bottom: .25rem;
    }

    #program h4 {
      font-size: clamp(1.5rem, 2.5vw, 2.25rem);
      margin-bottom: 1.5rem;
    }

    #program h2.yellow {
      color: var(--yellow);
      -webkit-text-stroke: 2px var(--black);
      margin-bottom: 2rem;
    }

    #program p.desc,
    #speakers .desc {
      font-size: 1.2rem;
      color: #333;
      margin-bottom: 1.5rem;
    }

    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .75rem;
      margin-top: 2.5rem;
    }

    .info-card {
      padding: 1rem;
      background: #F8F8F8;
      border: 1px solid #EFEFEF;
      border-radius: .75rem;
    }

    .info-card .lbl {
      letter-spacing: .1em;
      color: var(--muted);
      margin-bottom: .25rem;
    }

    .info-card .val {
      font-weight: 700;
      font-size: 1rem;
      color: var(--black);
    }

    /* Participants list */
    #speakers h2 {
      margin-bottom: 1rem;
    }

    #speakers .sub {
      letter-spacing: .2em;
      color: var(--muted);
      margin-bottom: .5rem;
    }

    #speakers .hint {
      color: #aaa;
      margin-bottom: 1.5rem;
    }


    .participants-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .75rem;
    }

    @media(max-width:900px) {
      .participants-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:560px) {
      .participants-grid {
        grid-template-columns: 1fr;
      }
    }

    .participant-btn {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.125rem;
      border: none;
      border-radius: 1rem;
      background: #fff;
      cursor: pointer;
      text-align: left;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
      transition: all .2s;
      overflow: hidden;
      width: 100%;
    }

    .participant-btn:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
      transform: translateY(-3px);
    }

    .avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 1rem;
    }

    /* modal avatar — large */
    #modal-avatar {
      width: 128px;
      height: 128px;
      font-size: 2rem;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* avatar with photo (no padding, clipped) */
    .avatar.has-photo {
      padding: 0;
      overflow: hidden;
    }

    .avatar.has-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 50%;
    }

    /* participant card text wrapper */
    .participant-info {
      min-width: 0;
      flex: 1;
    }

    /* schedule CTA row */
    .schedule-cta {
      margin-top: 2rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .schedule-cta .hero-subscribe {
      max-width: 480px;
      width: 100%;
      overflow: hidden;
    }
    .schedule-cta .formkit-form[data-uid="efc6e4419a"] {
      max-width: 100% !important;
      width: 100% !important;
    }
    .schedule-cta .seva-fields.formkit-fields {
      max-width: 100% !important;
      width: 100% !important;
    }

    /* timeline button row */
    .timeline-cta {
      margin: 3rem 0;
      text-align: center;
    }

    /* email success note */
    .email-success-note {
      font-size: .875rem;
      color: rgba(13,13,13,.6);
      margin-top: .5rem;
    }

    /* check svg color */
    .check svg {
      color: var(--yellow);
    }

    .av0 {
      background: var(--yellow);
      color: var(--black);
    }

    .av1 {
      background: var(--black);
      color: var(--yellow);
    }

    .av2 {
      background: #2a2a2a;
      color: var(--yellow);
    }

    .av3 {
      background: #383838;
      color: #fff;
    }

    .av4 {
      background: rgba(245, 208, 0, .8);
      color: var(--black);
    }

    .participant-name {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1.0625rem;
      color: var(--black);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .participant-inst {
      font-family: var(--font-heading);
      font-size: 0.8rem;
      color: var(--muted);
      margin-top: .25rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .participant-paper {
      font-family: var(--font-heading);
      font-size: 0.9rem;
      color: var(--black);
      margin-top: .35rem;
      opacity: .75;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-weight: 500;
    }

    .participant-arrow {
      margin-left: auto;
      color: #ddd;
      flex-shrink: 0;
      transition: color .2s;
    }

    .participant-btn:hover .participant-arrow {
      color: var(--yellow);
    }

    /* Modal */
    #modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    #modal-overlay.open {
      display: flex;
    }

    #modal-box {
      background: #fff;
      border-radius: 1.25rem;
      padding: 2rem;
      max-width: 720px;
      width: 100%;
      position: relative;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
      max-height: 85vh;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, .15) transparent;
    }

    #modal-box::-webkit-scrollbar {
      width: 4px;
    }

    #modal-box::-webkit-scrollbar-track {
      background: transparent;
    }

    #modal-box::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, .15);
      border-radius: 4px;
    }

    .modal-scroll-fade {
      position: sticky;
      bottom: -2rem;
      left: 0;
      right: 0;
      height: 3rem;
      margin: 0 -2rem -2rem;
      background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .9));
      pointer-events: none;
      border-radius: 0 0 1.25rem 1.25rem;
    }

    #modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background: #F5F5F5;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #modal-close:hover {
      background: #E5E5E5;
    }

    #modal-name {
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 1.2rem;
      color: var(--black);
      margin: 1rem 0 .25rem;
    }

    #modal-inst {
      color: var(--muted);
      margin-bottom: .5rem;
      font-weight: 500;
    }

    #modal-paper {
      font-size: 1.5rem;
      color: var(--black);
      font-weight: 400;
      line-height: 1.2;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    #modal-bio {
      color: #444;
    }

    #modal-video-wrap {
      margin-top: 1.5rem;
      border-top: 1px solid #eee;
      padding-top: 1.25rem;
    }

    .modal-video-label {
      color: var(--muted);
      margin-bottom: 1rem;
      font-weight: 500;
    }

    .modal-iframe-wrap {
      position: relative;
      width: 80%;
      margin: 0 auto;
      aspect-ratio: 9/16;
      max-height: 560px;
      border-radius: .75rem;
      overflow: hidden;
      background: #000;
    }

    .modal-iframe-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    @media(max-width: 768px) {
      .modal-iframe-wrap {
        width: 100%;
        max-height: 70vh;
      }
    }

    .modal-yt-fallback {
      display: inline-block;
      margin-top: .75rem;
      font-family: var(--font-heading);
      font-weight: 600;
      color: var(--black);
      text-decoration: underline;
      text-underline-offset: 3px;
      opacity: .6;
    }

    .modal-yt-fallback:hover {
      opacity: 1;
    }

    /* ── SCHEDULE ── */
    #shifting {
      background: var(--black);
      padding: 5rem 0;
    }

    #shifting h2 {
      color: var(--yellow);
      margin-bottom: 1.5rem;
    }

    #shifting .desc {
      font-size: 1.2rem;
      color: rgba(255, 255, 255, .8);
      margin-bottom: 1.25rem;
    }

    #shifting a {
      color: var(--yellow);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    #shifting a:hover {
      opacity: .75;
    }

    #schedule {
      background: #FAFAFA;
      padding: 6rem 0;
      position: relative;
    }

    #schedule::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(26, 26, 26, .1), transparent);
    }

    #schedule .section-label {
      letter-spacing: .2em;
      color: var(--muted);
      margin-bottom: .75rem;
    }

    #schedule h2 {
      margin-bottom: .5rem;
    }

    #schedule .tz {
      color: var(--muted);
      margin-bottom: 2rem;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .legend-label {
      letter-spacing: .1em;
      color: var(--muted);
    }

    .schedule-list {
      position: relative;
    }

    .schedule-list::before {
      content: '';
      position: absolute;
      left: calc(3.5rem + 1.25rem + 5px);
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(26, 26, 26, .08);
    }

    .schedule-item {
      display: flex;
      gap: 1.25rem;
      align-items: flex-start;
      margin-bottom: .75rem;
    }

    .s-time {
      width: 3.5rem;
      padding-top: .75rem;
      flex-shrink: 0;
      text-align: right;
      color: var(--muted);
    }

    .s-dot {
      flex-shrink: 0;
      margin-top: 1rem;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .s-dot.keynote {
      background: var(--black);
    }

    .s-dot.panel {
      background: var(--black);
    }

    .s-dot.break {
      background: var(--muted);
    }

    .s-card {
      flex: 1;
      border-radius: .5rem;
      border: 1px solid;
      padding: .875rem 1.25rem;
      text-align: left;
      font-family: inherit;
      font-size: inherit;
      color: inherit;
      background: inherit;
      width: 100%;
    }

    .s-card-clickable {
      cursor: pointer;
      transition: box-shadow .15s, transform .15s;
    }
    .s-card-clickable:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,.1);
      transform: translateY(-1px);
    }
    .s-card-arrow {
      flex-shrink: 0;
      color: var(--muted);
      margin-left: auto;
      align-self: center;
    }

    .s-card.keynote {
      background: rgba(245, 208, 0, .15);
      border-color: rgba(245, 208, 0, .4);
    }

    .s-card.panel {
      background: rgba(13, 13, 13, .04);
      border-color: rgba(13, 13, 13, .1);
    }

    .s-card.break {
      background: rgba(136, 136, 136, .05);
      border-color: rgba(136, 136, 136, .15);
      opacity: .65;
    }

    .s-header {
      display: flex;
      align-items: flex-start;
      gap: .875rem;
    }

    /* speaker avatar in schedule */
    .s-avatar {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: .6rem;
      color: var(--black);
      background: var(--yellow);
      overflow: hidden;
    }

    .s-avatar.has-photo {
      padding: 0;
    }

    .s-avatar.has-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .s-avatar.av1 { background: var(--black); color: #fff; }
    .s-avatar.av2 { background: #e8e8e8; color: var(--black); }
    .s-avatar.av3 { background: rgb(236,1,171); color: #fff; }
    .s-avatar.av4 { background: #4A90B8; color: #fff; }

    .s-header .s-content {
      min-width: 0;
      flex: 1;
    }

    .s-title {
      font-weight: 600;
      font-size: 1rem;
      color: var(--black);
    }

    .s-presenters {
      font-size: 1rem;
      color: var(--muted);
      margin-top: .25rem;
    }

    .s-type {
      letter-spacing: .1em;
      color: var(--black);
      flex-shrink: 0;
    }

    .s-footer-note {
      margin-top: 2.5rem;
      color: rgba(136, 136, 136, .7);
      font-style: italic;
      text-align: center;
    }

    /* ── SCHEDULE TWO-COLUMN ── */
    .schedule-two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: start;
    }

    .schedule-col-header {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1rem;
      color: var(--black);
      background: var(--yellow);
      border-radius: .5rem;
      padding: .625rem 1rem;
      margin-bottom: 1rem;
    }

    @media (max-width: 900px) {
      .schedule-two-col {
        grid-template-columns: 1fr;
      }
    }

    /* ── DAY TABS ── */
    .day-tabs {
      display: flex;
      gap: .5rem;
      margin-bottom: 2rem;
    }

    .day-tab {
      letter-spacing: .1em;
      background: transparent;
      border: 1px solid rgba(13, 13, 13, .2);
      border-radius: 999px;
      padding: .5rem 1.25rem;
      cursor: pointer;
      color: var(--muted);
      transition: all .2s;
    }

    .day-tab:hover {
      border-color: var(--black);
      color: var(--black);
    }

    .day-tab.active {
      background: var(--black);
      border-color: var(--black);
      color: #fff;
    }

    /* ── SCHEDULE PANEL HEADER ── */
    .schedule-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      margin: 2rem 0 1rem;
      padding: .625rem 1rem .625rem calc(3.5rem + 1.25rem + 10px + .75rem);
      background: rgba(13, 13, 13, .04);
      border-radius: .5rem;
    }

    .panel-header-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: .9375rem;
      color: var(--black);
    }

    .panel-header-time {
      letter-spacing: .1em;
      color: var(--muted);
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* ── SCHEDULE PAPER + PENDING ── */
    .s-paper {
      font-size: 1rem;
      color: var(--black);
      font-style: italic;
      margin-top: .3rem;
      opacity: .8;
      line-height: 1.4;
    }

    .s-pending .s-title {
      opacity: .5;
    }

    .s-pending .s-presenters {
      opacity: .5;
    }

    .s-pending-note {
      color: var(--muted);
      font-style: italic;
      margin-top: .3rem;
    }

    .s-dot.pembukaan {
      background: var(--yellow);
      border: 2px solid var(--black);
    }

    .s-card.pembukaan {
      background: rgba(245, 208, 0, .1);
      border-color: rgba(245, 208, 0, .5);
    }

    .s-dot.tanya-jawab {
      background: transparent;
      border: 2px solid var(--muted);
    }

    .s-card.tanya-jawab {
      background: transparent;
      border-color: rgba(136, 136, 136, .2);
    }

    @media (max-width: 640px) {
      .schedule-panel-header {
        flex-direction: column;
        gap: .25rem;
        padding: .625rem .875rem;
      }
      .panel-header-time {
        font-size: .8rem;
        white-space: normal;
      }
      .s-time {
        width: 2.75rem;
        font-size: .8rem;
      }
      .schedule-item {
        gap: .75rem;
      }
      .schedule-list::before {
        left: calc(2.75rem + .75rem + 5px);
      }
      .s-card {
        padding: .75rem 1rem;
      }
      .s-paper {
        font-size: .875rem;
      }
      .s-title {
        font-size: .9375rem;
      }
      .s-presenters {
        font-size: .8rem;
      }
      .s-avatar {
        width: 36px;
        height: 36px;
        font-size: .75rem;
      }
    }

    #video-preview .section-label {
      letter-spacing: .2em;
      color: var(--muted);
      margin-bottom: .75rem;
    }

    /* ── VIDEO PREVIEW ── */
    #video-preview {
      padding: 5rem 0;
      background: #fff;
    }

    .video-preview-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .video-preview-header h2 {
      margin-top: .25rem;
    }

    .video-preview-scroll {
      display: flex;
      gap: 1.25rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 1rem;
      /* hide scrollbar but keep scroll */
      scrollbar-width: thin;
      scrollbar-color: #e0e0e0 transparent;
    }

    .video-preview-scroll::-webkit-scrollbar {
      height: 4px;
    }

    .video-preview-scroll::-webkit-scrollbar-track {
      background: transparent;
    }

    .video-preview-scroll::-webkit-scrollbar-thumb {
      background: #e0e0e0;
      border-radius: 99px;
    }

    .vp-card {
      flex: 0 0 340px;
      scroll-snap-align: start;
      border-radius: 1rem;
      overflow: hidden;
      border: 1px solid #ebebeb;
      background: #fafafa;
    }

    .vp-thumb {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
    }

    .vp-thumb iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    .vp-body {
      padding: .875rem 1rem;
    }

    .vp-name {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: .9rem;
      color: var(--black);
      margin-bottom: .2rem;
    }

    .vp-inst {
      font-family: var(--font-body);
      font-size: .8rem;
      color: var(--muted);
    }

    /* ── COMMUNITY ── */
    #community {
      position: relative;
      background: var(--yellow);
      padding: 6rem 0;
      overflow: hidden;
    }

    #community .dot-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .2;
      background-image: radial-gradient(circle, #0D0D0D 1px, transparent 1px);
      background-size: 32px 32px;
    }

    #community .inner {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 720px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    #community .section-label {
      letter-spacing: .2em;
      color: rgba(13, 13, 13, .5);
      margin-bottom: 1rem;
    }

    #community h2 {
      margin-bottom: 1.5rem;
    }

    #community .text {
      font-size: 1.0625rem;
      color: rgba(13, 13, 13, .7);
      line-height: 1.7;
      margin-bottom: 2.5rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .community-links {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      justify-content: center;
      margin-bottom: 2.5rem;
    }

    .btn-dark {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: var(--black);
      color: #fff;
      font-weight: 700;
      font-size: 1rem;
      padding: .75rem 1.5rem;
      border-radius: 999px;
      text-decoration: none;
      transition: background .2s;
    }

    .btn-dark:hover {
      background: #333;
    }

    .email-form {
      display: flex;
      gap: .75rem;
      max-width: 400px;
      margin: 0 auto 1rem;
      flex-wrap: wrap;
    }

    .email-form input {
      flex: 1;
      min-width: 180px;
      background: rgba(13, 13, 13, .1);
      border: 1px solid rgba(13, 13, 13, .2);
      color: var(--black);
      font-family: var(--font-heading);
      font-size: 1rem;
      padding: .75rem 1.25rem;
      border-radius: .75rem;
      outline: none;
      transition: border .2s;
    }

    .email-form input::placeholder {
      color: rgba(13, 13, 13, .4);
    }

    .email-form input:focus {
      border-color: rgba(13, 13, 13, .5);
    }

    .email-form button {
      background: var(--black);
      color: var(--yellow);
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 1rem;
      padding: .75rem 1.5rem;
      border-radius: .75rem;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background .2s;
    }

    .email-form button:hover {
      background: #333;
    }

    .email-note {
      color: rgba(13, 13, 13, .4);
      font-style: italic;
    }

    .email-success {
      background: rgba(13, 13, 13, .1);
      border: 1px solid rgba(13, 13, 13, .15);
      border-radius: 1rem;
      padding: 2rem;
    }

    .email-success .check {
      width: 3rem;
      height: 3rem;
      background: var(--black);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
    }

    .email-success .check svg {
      color: var(--yellow);
    }

    .email-success .ok {
      font-weight: 900;
      font-size: 1.2rem;
      color: var(--black);
    }

    .social-wrap {
      margin-top: 2.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .collab-row {
      margin-top: 4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .collab-logos {
      display: flex;
      align-items: center;
      gap: 2rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    .collab-img {
      height: 64px;
      width: auto;
      object-fit: contain;
      filter: brightness(0);
      opacity: .55;
      transition: opacity .2s;
    }

    .collab-link:hover .collab-img {
      filter: none;
      opacity: 1;
    }

    .social-label {
      letter-spacing: .1em;
      color: rgba(13, 13, 13, .4);
    }

    .social-icons {
      display: flex;
      gap: 1rem;
    }

    .social-btn {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: rgba(13, 13, 13, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: background .2s;
    }

    .social-btn:hover {
      background: rgba(13, 13, 13, .2);
    }

    .social-btn svg {
      color: rgba(13, 13, 13, .6);
    }

    /* ── COLLABORATORS ── */
    #collaborators {
      background: var(--black);
      border-top: 1px solid rgba(255, 255, 255, .08);
      padding: 3.5rem 0;
      overflow-x: clip;
    }

    #collaborators .inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      padding: 0 1.5rem;
    }

    #collaborators .label {
      letter-spacing: .2em;
      color: rgba(255, 255, 255, .25);
    }

    .collab-link {
      display: flex;
      align-items: center;
      gap: .75rem;
      text-decoration: none;
    }

    .collab-icon {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: .75rem;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
    }

    .collab-link:hover .collab-icon {
      border-color: rgba(245, 208, 0, .4);
      background: rgba(245, 208, 0, .08);
    }

    .collab-icon span {
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: .9rem;
      color: rgba(255, 255, 255, .4);
      transition: color .2s;
    }

    .collab-link:hover .collab-icon span {
      color: var(--yellow);
    }

    .collab-name {
      font-size: 1rem;
      color: rgba(255, 255, 255, .35);
      transition: color .2s;
    }

    .collab-link:hover .collab-name {
      color: rgba(255, 255, 255, .7);
    }

    /* ── FOOTER ── */
    footer {
      background: var(--black);
      padding: 4rem 0;
      position: relative;
    }

    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(250, 250, 250, .1), transparent);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3rem;
      margin-bottom: 3rem;
    }

    @media(max-width:768px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }

    footer h2 {
      font-size: 1.5rem;
      color: #FAFAFA;
      margin-bottom: .75rem;
    }

    footer .f-tagline {
      color: rgba(250, 250, 250, .5);
      line-height: 1.6;
    }

    footer .f-date {
      letter-spacing: .1em;
      color: var(--muted);
      margin-top: .5rem;
    }

    footer .f-label {
      letter-spacing: .15em;
      color: var(--muted);
      margin-bottom: 1.25rem;
    }

    .footer-collabs {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1.5rem;
      margin-top: .75rem;
    }

    .footer-collab-link {
      display: inline-block;
    }

    .footer-collab-img {
      height: 36px;
      width: auto;
      display: block;
      filter: brightness(0) invert(1);
      opacity: .6;
      transition: opacity .2s;
    }

    .footer-collab-link:hover .footer-collab-img {
      opacity: 1;
    }

    footer .convenor {
      margin-bottom: 1rem;
    }

    footer .convenor-name {
      font-weight: 600;
      font-size: 1rem;
      color: #FAFAFA;
    }

    footer .convenor-aff {
      font-size: 1rem;
      color: rgba(250, 250, 250, .5);
    }

    footer .convenor-email {
      font-size: 1rem;
      color: var(--muted);
      text-decoration: none;
      display: block;
      margin-top: .25rem;
      transition: color .2s;
    }

    footer .convenor-email:hover {
      color: var(--yellow);
    }

    footer .f-ref {
      color: rgba(250, 250, 250, .6);
      font-style: italic;
    }

    .footer-email-row {
      border-top: 1px solid rgba(250,250,250,.08);
      padding: 2rem 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;
      margin-bottom: .5rem;
    }

    .footer-email-heading {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1rem;
      color: #fafafa;
      margin-bottom: .25rem;
    }

    .footer-email-sub {
      font-family: var(--font-body);
      font-size: .875rem;
      color: rgba(250,250,250,.45);
    }

    .footer-email-form {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
    }

    .footer-email-form input {
      font-family: var(--font-body);
      font-size: .9rem;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      color: #fafafa;
      padding: .6rem 1rem;
      border-radius: .75rem;
      outline: none;
      width: 220px;
      transition: border .2s;
    }

    .footer-email-form input::placeholder { color: rgba(255,255,255,.3); }
    .footer-email-form input:focus { border-color: rgba(255,255,255,.35); }

    .footer-email-form button {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: .9rem;
      background: rgba(255,255,255,.1);
      color: #fafafa;
      border: 1px solid rgba(255,255,255,.15);
      padding: .6rem 1.25rem;
      border-radius: .75rem;
      cursor: pointer;
      white-space: nowrap;
      transition: background .2s;
    }

    .footer-email-form button:hover { background: rgba(255,255,255,.18); }
    .footer-email-form button:disabled { opacity: .5; cursor: default; }

    .footer-email-success {
      font-family: var(--font-heading);
      font-size: .9rem;
      color: var(--yellow);
      font-weight: 600;
    }

    footer .footer-rsvp {
      border-top: 1px solid rgba(250, 250, 250, .08);
      padding: 2rem 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    footer .footer-rsvp-text {
      font-family: var(--font-body);
      font-size: .9rem;
      color: rgba(250, 250, 250, .55);
    }

    footer .bottom {
      border-top: 1px solid rgba(250, 250, 250, .08);
      padding-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }

    footer .copyright {
      font-size: 1rem;
      color: rgba(136, 136, 136, .6);
    }

    footer .made {
      font-size: 1rem;
      color: rgba(136, 136, 136, .4);
    }

    /* Responsive tweaks */

    /* ── TIMELINE: medium screens — smaller but still horizontal ── */
    @media(max-width:900px) and (min-width:641px) {
      :root { --tl-dot: 34px; --tl-date-h: 1.75rem; }

      .timeline-dot-date {
        font-size: .72rem;
        padding-bottom: .6rem;
      }

      .timeline-dot-label {
        font-size: .72rem;
      }
    }

    /* ── TIMELINE: mobile — switch to VERTICAL layout ── */
    @media(max-width:640px) {
      :root { --tl-dot: 28px; }

      /* vertical line through dot centers */
      .timeline-track::before {
        /* dot center x = date-col(4.5rem) + gap(.6rem) + dot-radius(14px) */
        top: 14px;           /* start at center of first dot */
        bottom: 14px;        /* end at center of last dot */
        left: calc(4.5rem + .6rem + 14px - 2px);  /* center minus half line-width */
        right: auto;
        width: 4px;
        height: auto;
        border-radius: 99px;
      }

      /* hide JS-calculated horizontal fill on mobile */
      .timeline-line-fill {
        display: none;
      }

      /* vertical stack */
      .timeline-dots {
        flex-direction: column;
        gap: .875rem;
      }

      /* each item: row → date | dot | label */
      .tl-item {
        flex-direction: row;
        align-items: center;
        flex: none;
        width: 100%;
        gap: .6rem;
      }

      /* date cell — fixed width, right-aligned */
      .timeline-dot-date {
        width: 4.5rem;
        min-width: 4.5rem;
        height: auto;
        padding-bottom: 0;
        font-size: .72rem;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
      }

      .timeline-dot {
        width: var(--tl-dot);
        height: var(--tl-dot);
        flex-shrink: 0;
      }

      .timeline-dot .dot-check {
        width: 14px;
        height: 14px;
      }

      /* label — left-aligned, natural text size */
      .timeline-dot-label {
        padding: 0;
        text-align: left;
        font-size: .8rem;
        flex: 1;
      }

      .cta-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
      }
      .btn-register,
      .btn-primary,
      .btn-secondary,
      .btn-outline {
        width: 100%;
        justify-content: center;
        font-size: 1.0625rem;
        padding: 1rem 1.75rem;
        box-sizing: border-box;
      }
    }

    /* ══════════════════════════════════════════
       PAGE HERO (tentang.html & video.html)
    ══════════════════════════════════════════ */
    #page-hero {
      background: var(--yellow);
      padding: 7rem 0 4rem;
      position: relative;
      overflow: hidden;
    }

    #page-hero .grid-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    #page-hero .glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
    }

    #page-hero .glow1 {
      width: 600px;
      height: 600px;
      background: radial-gradient(ellipse, rgba(255, 255, 255, .25) 0%, transparent 65%);
      top: -160px;
      left: -160px;
    }

    #page-hero .glow2 {
      width: 400px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(255, 255, 255, .15) 0%, transparent 65%);
      bottom: -80px;
      right: -80px;
    }

    #page-hero .inner {
      position: relative;
      z-index: 1;
    }

    #page-hero .page-label {
      letter-spacing: .2em;
      color: rgba(0, 0, 0, .5);
      margin-bottom: .75rem;
    }

    #page-hero h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      color: #000;
      margin-bottom: 1rem;
    }

    #page-hero .hero-sub {
      font-family: var(--font-body);
      font-size: 1.2rem;
      color: rgb(0 0 0);
      line-height: 1.65;
    }

    #page-hero .yellow-bar {
      display: none;
    }

    /* ══════════════════════════════════════════
       TENTANG — ABOUT SECTION
    ══════════════════════════════════════════ */
    #about {
      background: #fff;
      padding: 5rem 0 3rem;
    }

    #about .section-label {
      letter-spacing: .2em;
      color: #888;
      margin-bottom: .75rem;
    }

    #about h2 {
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      margin-bottom: 1.75rem;
    }

    p.body-text {
      font-family: var(--font-body);
      font-size: 1.2rem;
      color: #333;
      line-height: 1.8;
      margin-bottom: 1.5rem;
    }

    #about blockquote.quote-yellow {
      border-left: 4px solid var(--yellow);
      padding-left: 1.5rem;
      margin: 2.5rem 0;
    }

    #about blockquote.quote-yellow p,
    #about blockquote.quote-dark p {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: var(--black);
      line-height: 1.6;
    }

    #about blockquote.quote-dark {
      border-left: 4px solid var(--black);
      padding-left: 1.5rem;
      margin: 2.5rem 0;
    }

    #about blockquote.quote-box {
      background: var(--yellow);
      border-radius: 1rem;
      padding: 2rem 2.25rem;
      margin: 2.5rem 0;
    }

    #about blockquote.quote-box p {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: var(--black);
      line-height: 1.6;
    }

    #about .divider {
      border: none;
      border-top: 1px solid #f0f0f0;
      margin: 3.5rem 0;
    }

    #about .black-card {
      background: var(--black);
      border-radius: 1.25rem;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      margin-top: 3rem;
    }

    #about .black-card .grid-bg {
      position: absolute;
      inset: 0;
      border-radius: 1.25rem;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(245, 208, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 208, 0, 0.06) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    #about .black-card .inner-content {
      position: relative;
      z-index: 1;
    }

    #about .black-card h2 {
      color: #fff;
      margin-bottom: 1rem;
    }

    #about .black-card p {
      font-family: var(--font-body);
      font-size: 1.0625rem;
      color: rgba(255, 255, 255, .7);
      line-height: 1.75;
      margin-bottom: 1.75rem;
    }

    /* ══════════════════════════════════════════
       TENTANG — MILESTONES TIMELINE
    ══════════════════════════════════════════ */
    #milestones {
      background: #fff;
      padding: 0 0 4rem;
    }

    #milestones .ms-header {
      padding-top: 4rem;
      padding-bottom: 1.5rem;
    }

    #milestones .ms-header h2 {
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      margin-bottom: .5rem;
    }

    #milestones .ms-header p:not(.body-text) {
      font-family: var(--font-body);
      font-size: .9375rem;
      color: #888;
    }

    .milestone-scroll-wrap {
      position: relative;
    }

    .milestone-scroll-wrap .fade-left,
    .milestone-scroll-wrap .fade-right {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 60px;
      pointer-events: none;
      z-index: 10;
    }

    .milestone-scroll-wrap .fade-left {
      left: 0;
      background: linear-gradient(to right, #fff, transparent);
    }

    .milestone-scroll-wrap .fade-right {
      right: 0;
      background: linear-gradient(to left, #fff, transparent);
    }

    .milestone-scroll {
      display: flex;
      gap: 1.25rem;
      overflow-x: auto;
      padding: .5rem max(2.5rem, calc((100vw - 1140px) / 2 + 2.5rem)) 2rem max(2.5rem, calc((100vw - 1140px) / 2 + 2.5rem));
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .milestone-scroll::-webkit-scrollbar {
      display: none;
    }

    .milestone-card {
      flex-shrink: 0;
      width: 280px;
      display: flex;
      flex-direction: column;
    }

    .milestone-year-badge {
      display: inline-flex;
      align-items: center;
      height: 26px;
      margin-bottom: .75rem;
    }

    .milestone-year-badge span {
      font-family: var(--font-mono);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .05em;
      padding: .25rem .65rem;
      border-radius: 999px;
      line-height: 1;
    }

    .milestone-year-badge.last span {
      background: var(--yellow);
      color: var(--black);
    }

    .milestone-year-badge.prev span {
      background: var(--black);
      color: #fff;
    }

    .milestone-year-badge.past span {
      background: #e8e8e8;
      color: #555;
    }

    .milestone-connector {
      display: flex;
      align-items: center;
      height: 16px;
      margin-bottom: 1rem;
      position: relative;
    }

    .milestone-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid var(--black);
      background: #fff;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .milestone-dot.filled {
      background: var(--black);
    }

    .milestone-dot.yellow {
      background: var(--yellow);
      border-color: var(--yellow);
    }

    .milestone-line {
      flex: 1;
      height: 1px;
      background: #e5e5e5;
      position: absolute;
      left: 7px;
      right: -1.25rem;
      z-index: 0;
    }

    .milestone-img {
      width: 100%;
      height: 140px;
      border-radius: .75rem;
      border: 1px solid #e5e5e5;
      overflow: hidden;
      position: relative;
      margin-bottom: .875rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .milestone-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: inherit;
    }

    .milestone-img-source {
      position: absolute;
      bottom: .4rem;
      right: .5rem;
      font-family: var(--font-mono);
      font-size: .62rem;
      color: rgba(255,255,255,.75);
      background: rgba(0,0,0,.45);
      padding: .15rem .4rem;
      border-radius: .25rem;
      pointer-events: none;
      z-index: 2;
      backdrop-filter: blur(2px);
    }

    .milestone-img.bg-dark {
      background: var(--black);
    }

    .milestone-img.bg-yellow {
      background: rgba(245, 208, 0, .18);
    }

    .milestone-img.bg-gray {
      background: #f8f8f8;
    }

    .milestone-img .img-pattern {
      position: absolute;
      inset: 0;
      opacity: .1;
      background-image:
        linear-gradient(45deg, #0D0D0D 25%, transparent 25%),
        linear-gradient(-45deg, #0D0D0D 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #0D0D0D 75%),
        linear-gradient(-45deg, transparent 75%, #0D0D0D 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    }

    .milestone-img .img-label {
      position: relative;
      z-index: 1;
      font-family: var(--font-mono);
      font-size: 1rem;
      letter-spacing: .05em;
      text-transform: uppercase;
      text-align: center;
      padding: 0 .75rem;
    }

    .milestone-img.bg-dark .img-label {
      color: rgba(255, 255, 255, .35);
    }

    .milestone-img.bg-gray .img-label,
    .milestone-img.bg-yellow .img-label {
      color: #aaa;
    }

    .milestone-card h3 {
      font-size: .9375rem;
      line-height: 1.3;
      margin-bottom: .5rem;
    }

    .milestone-card p {
      font-family: var(--font-body);
      font-size: 1rem;
      color: #555;
      line-height: 1.65;
    }

    .scroll-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .5rem 0 1rem;
      color: #bbb;
    }

    .scroll-hint svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      animation: scroll-nudge 1.6s ease-in-out infinite;
    }

    @keyframes scroll-nudge {
      0%, 100% { transform: translateX(0); opacity: .7; }
      50%       { transform: translateX(5px); opacity: 1; }
    }

    .scroll-hint span {
      font-family: var(--font-mono);
      font-size: 1rem;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    /* fade-right on milestone scroll — more prominent to hint scrollability */
    .milestone-scroll-wrap .fade-right {
      background: linear-gradient(to left, #fff 20%, transparent);
      width: 80px;
    }

    /* ══════════════════════════════════════════
       TENTANG — AGENDA SECTION
    ══════════════════════════════════════════ */
    #agenda-tentang {
      background: #f8f8f8;
      padding: 5rem 0;
      border-top: 1px solid #efefef;
    }

    #agenda-tentang .section-label {
      letter-spacing: .2em;
      color: #888;
      margin-bottom: .75rem;
    }

    #agenda-tentang h2 {
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      margin-bottom: .75rem;
    }

    #agenda-tentang .agenda-subtitle {
      font-family: var(--font-body);
      font-size: 1rem;
      color: #666;
      line-height: 1.65;
      max-width: 640px;
      margin-bottom: 3rem;
    }

    .agenda-list {
      display: flex;
      flex-direction: column;
      gap: .625rem;
    }

    .agenda-item {
      background: #fff;
      border-radius: .875rem;
      border: 1px solid #e8e8e8;
      overflow: hidden;
      transition: box-shadow .2s;
    }

    .agenda-item:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
    }

    .agenda-item.open {
      border-color: var(--black);
    }

    .agenda-btn {
      width: 100%;
      background: none;
      border: none;
      padding: 1.125rem 1.375rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      cursor: pointer;
      text-align: left;
    }

    .agenda-btn:hover {
      background: #fafafa;
    }

    .agenda-item.open .agenda-btn {
      background: #fafafa;
    }

    .agenda-num {
      font-family: var(--font-mono);
      font-size: 1rem;
      font-weight: 500;
      color: #bbb;
      flex-shrink: 0;
      width: 1.5rem;
    }

    .agenda-short {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: .9375rem;
      color: var(--black);
      flex: 1;
    }

    .agenda-chevron {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .25s, background .2s;
    }

    .agenda-chevron svg {
      width: 10px;
      height: 10px;
      transition: transform .25s;
    }

    .agenda-item.open .agenda-chevron {
      background: var(--yellow);
    }

    .agenda-item.open .agenda-chevron svg {
      transform: rotate(180deg);
    }

    .agenda-body {
      display: none;
      padding: 0 1.375rem 1.375rem 3.875rem;
    }

    .agenda-item.open .agenda-body {
      display: block;
    }

    .agenda-full-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1rem;
      color: var(--black);
      margin-bottom: .625rem;
      line-height: 1.35;
    }

    .agenda-summary {
      font-family: var(--font-body);
      font-size: .9rem;
      color: #555;
      line-height: 1.7;
      margin-bottom: .875rem;
      border-left: 3px solid var(--yellow);
      padding-left: .875rem;
    }

    .agenda-desc {
      color: #666;
      line-height: 1.75;
    }

    .agenda-toggle-text {
      font-family: var(--font-mono);
      font-size: 1rem;
      letter-spacing: .05em;
      color: #888;
      margin-top: .75rem;
      cursor: pointer;
      display: inline-block;
    }

    /* ══════════════════════════════════════════
       TENTANG — RSVP SECTION
    ══════════════════════════════════════════ */
    #rsvp-section {
      background: #fff;
      padding: 5rem 0;
      position: relative;
    }

    #rsvp-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--yellow);
    }

    #rsvp-section .section-label {
      letter-spacing: .2em;
      color: #888;
      margin-bottom: .75rem;
    }

    #rsvp-section h2 {
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      margin-bottom: 2.5rem;
    }

    .rsvp-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    @media (max-width: 720px) {
      .rsvp-grid {
        grid-template-columns: 1fr;
      }
    }

    .rsvp-contact-card {
      background: #f8f8f8;
      border: 1px solid #e5e5e5;
      border-radius: 1.125rem;
      padding: 2.25rem;
      position: relative;
      overflow: hidden;
    }

    .rsvp-contact-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--yellow);
      border-radius: 4px 0 0 4px;
    }

    .rsvp-contact-card h3 {
      font-size: 1.25rem;
      margin-bottom: .5rem;
    }

    .rsvp-contact-card .card-desc {
      font-size: .9rem;
      color: #555;
      line-height: 1.65;
      margin-bottom: 1.5rem;
    }

    .rsvp-contact-card .contact-label {
      letter-spacing: .15em;
      color: #888;
      margin-bottom: .625rem;
    }

    .rsvp-contact-card a.email-link {
      display: block;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      color: var(--black);
      text-decoration: none;
      margin-bottom: .25rem;
    }

    .rsvp-contact-card a.email-link:hover {
      text-decoration: underline;
    }

    .rsvp-attend-card {
      background: var(--black);
      border-radius: 1.125rem;
      padding: 2.25rem;
      position: relative;
      overflow: hidden;
    }

    .rsvp-attend-card .grid-bg {
      position: absolute;
      inset: 0;
      border-radius: 1.125rem;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(245, 208, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 208, 0, 0.06) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    .rsvp-attend-card .inner-content {
      position: relative;
      z-index: 1;
    }

    .rsvp-attend-card h3 {
      font-size: 1.25rem;
      color: #fff;
      margin-bottom: .5rem;
    }

    .rsvp-attend-card .card-desc {
      font-size: .9rem;
      color: rgba(255, 255, 255, .6);
      line-height: 1.65;
      margin-bottom: 1.25rem;
    }

    .badge-free {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      background: var(--yellow);
      color: var(--black);
      border-radius: 999px;
      padding: .3rem .9rem;
      font-weight: 700;
      letter-spacing: .1em;
      margin-bottom: 1.5rem;
    }

    .attend-expect-label {
      letter-spacing: .15em;
      color: rgba(255, 255, 255, .4);
      margin-bottom: 1rem;
    }

    .attend-list {
      list-style: none;
      padding: 0;
      margin: 0 0 1.75rem;
      display: flex;
      flex-direction: column;
      gap: .625rem;
    }

    .attend-list li {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
    }

    .attend-check {
      flex-shrink: 0;
      margin-top: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(245, 208, 0, .15);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .attend-check svg {
      width: 10px;
      height: 10px;
      color: var(--yellow);
    }

    .attend-list li span {
      color: rgba(255, 255, 255, .7);
      line-height: 1.6;
    }

    /* ══════════════════════════════════════════
       VIDEO.HTML — VIDEO SECTION
    ══════════════════════════════════════════ */
    #videos {
      background: #fff;
      padding: 0 0 6rem;
    }

    .video-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2rem;
    }

    @media (max-width: 900px) {
      .video-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 560px) {
      .video-grid {
        grid-template-columns: 1fr;
      }
    }

    .video-card {
      background: #f8f8f8;
      border: 1px solid #e8e8e8;
      border-radius: 1rem;
      overflow: hidden;
      transition: box-shadow .2s, transform .2s;
      display: flex;
      flex-direction: column;
      text-decoration: none;
    }

    .video-card:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
      transform: translateY(-2px);
    }

    .video-embed-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 9/16;
      overflow: hidden;
      background: var(--black);
      max-height: 520px;
    }

    .video-embed-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    .video-thumb-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 9/16;
      overflow: hidden;
      background: var(--black);
      max-height: 320px;
    }

    .video-thumb-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .3s ease;
    }

    .video-card:hover .video-thumb-wrap img {
      transform: scale(1.04);
    }

    .video-play-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .25);
      transition: background .2s;
    }

    .video-card:hover .video-play-overlay {
      background: rgba(0, 0, 0, .4);
    }

    .play-btn {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
      transition: transform .2s, background .2s;
    }

    .video-card:hover .play-btn {
      transform: scale(1.1);
      background: var(--yellow);
    }

    .play-btn svg {
      width: 20px;
      height: 20px;
      color: var(--black);
      margin-left: 2px;
    }

    .video-card-body {
      padding: 1.125rem 1.25rem 1.25rem;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .video-card-paper {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1rem;
      color: var(--black);
      line-height: 1.4;
      margin-bottom: .625rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .video-card-name {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 1rem;
      color: var(--black);
      margin-bottom: .2rem;
    }

    .video-card-inst {
      font-family: var(--font-body);
      font-size: 1rem;
      color: #888;
      margin-bottom: 1rem;
      flex: 1;
    }

    .video-card-link {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-family: var(--font-mono);
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--black);
      text-decoration: none;
      border-bottom: 1px solid var(--black);
      padding-bottom: 1px;
      width: fit-content;
      transition: color .2s, border-color .2s;
    }

    .video-card-link:hover {
      color: rgb(236, 1, 171);
      border-color: rgb(236, 1, 171);
    }

    .video-card-link svg {
      width: 10px;
      height: 10px;
    }

    .video-card-topic {
      display: inline-block;
      font-weight: 500;
      letter-spacing: .06em;
      color: #666;
      background: #ececec;
      border-radius: 2rem;
      padding: .2rem .55rem;
      margin-bottom: .5rem;
      width: fit-content;
    }

    .no-results {
      display: none;
      grid-column: 1/-1;
      text-align: center;
      padding: 4rem 0;
      font-family: var(--font-body);
      color: #aaa;
    }

    .no-results.show {
      display: block;
    }

    /* ── Search & filter bar ── */
    .filter-bar {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: .5rem;
      padding: 2.5rem 0 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .filter-bar::-webkit-scrollbar {
      display: none;
    }

    .search-wrap {
      position: relative;
      flex-shrink: 0;
    }

    .search-wrap svg {
      position: absolute;
      left: .75rem;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      color: #aaa;
      pointer-events: none;
    }

    #search-input {
      font-family: var(--font-mono);
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--black);
      background: #f4f4f4;
      border: 1.5px solid #e4e4e4;
      border-radius: 2rem;
      padding: .35rem .8rem .35rem 2rem;
      outline: none;
      transition: border-color .2s, background .2s, box-shadow .2s;
      box-sizing: border-box;
      width: 180px;
    }

    #search-input::placeholder {
      color: #aaa;
      text-transform: none;
      letter-spacing: 0;
    }

    #search-input:focus {
      border-color: var(--black);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(13, 13, 13, .07);
      width: 220px;
    }

    .filter-divider {
      width: 1px;
      height: 1.25rem;
      background: #ddd;
      flex-shrink: 0;
    }

    .filter-chips {
      display: flex;
      flex-wrap: nowrap;
      gap: .5rem;
      align-items: center;
    }

    .filter-chip {
      font-weight: 500;
      letter-spacing: .07em;
      color: #555;
      background: #f4f4f4;
      border: 1.5px solid #e4e4e4;
      border-radius: 2rem;
      padding: .35rem .8rem;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
      white-space: nowrap;
    }

    .filter-chip:hover {
      background: #ebebeb;
      border-color: #ccc;
      color: var(--black);
    }

    .filter-chip.active {
      background: var(--black);
      border-color: var(--black);
      color: #fff;
    }

    .filter-chip[data-topic="Narasi Kesehatan & HKSR"].active {
      background: #1a6b50;
      border-color: #1a6b50;
    }

    .filter-chip[data-topic="Keadilan Reproduksi"].active {
      background: #b02060;
      border-color: #b02060;
    }

    .filter-chip[data-topic="Keperempuanan Dekolonial"].active {
      background: #5235a0;
      border-color: #5235a0;
    }

    .filter-chip[data-topic="Metodologi Partisipatif"].active {
      background: #b06010;
      border-color: #b06010;
    }

    .filter-chip[data-topic="Institusi & Pemberdayaan"].active {
      background: #1a5080;
      border-color: #1a5080;
    }

    .filter-chip[data-topic="Solidaritas & Masa Depan"].active {
      background: rgb(160, 10, 100);
      border-color: rgb(160, 10, 100);
    }

/* ── FOOTER DESIGNED BY ── */
.footer-designed-by {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  margin-top: 0.75rem;
}
.footer-designed-by a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.footer-designed-by a:hover {
  color: #fff;
}

/* ── CREATOR RIBBON ── */
@media (max-width: 640px) {
  .creator-ribbon-wrap { display: none; }
}
.creator-ribbon-wrap {
  position: fixed;
  bottom: 80px;
  right: 0;
  transform: translateX(calc(100% - 10px));
  transition: transform 0.28s cubic-bezier(.25,.8,.25,1);
  z-index: 9000;
}
.creator-ribbon-wrap:hover {
  transform: translateX(0);
}
.creator-ribbon-wrap:hover .creator-ribbon {
  opacity: 1;
}
.creator-ribbon {
  display: block;
  background: #111;
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 14px 7px;
  border-radius: 0px 4px 4px 0px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-decoration: none;
  opacity: 0.6;
  white-space: nowrap;
  cursor: pointer;
}