/* Hallmark · genre: editorial · macrostructure: Marquee Hero · theme: custom (Lancang Kuning) · enrichment: E5 hand-built SVG (lancang) · nav: N9 · footer: Ft1
 * tone: festive-dignified · anchor hue: kuning 88° + merah hati 25°
 * deviation: fold carries one quiet info band (date · venue) — an event page must answer "kapan & di mana" before scrolling.
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 */
@import url("tokens.css?v=20260922c");

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

html,
body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

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

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    overflow-wrap: anywhere;
    min-width: 0;
}

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.lompat {
    position: absolute;
    left: var(--gutter);
    top: -4rem;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-kuning);
    color: var(--color-ink);
    font-weight: 600;
    z-index: 10;
}
.lompat:focus-visible { top: var(--space-xs); }

.bungkus {
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ===================== Nav (N9 edge-aligned) ===================== */
.nav {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 5;
    color: var(--color-on-field);
    --color-focus: var(--color-kuning);
}
.nav .bungkus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
}
.nav-merek {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}
.nav-merek span { color: var(--color-kuning); }
.nav ul {
    display: flex;
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav a:not(.nav-merek) {
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    padding-block: var(--space-xs);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav a:not(.nav-merek):hover { color: var(--color-kuning); border-bottom-color: currentColor; }
.nav .opsional { display: none; }
@media (min-width: 40rem) {
    .nav .opsional { display: list-item; }
}

/* ===================== Fold (Marquee Hero) ===================== */
.fold {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--color-field);
    color: var(--color-on-field);
    overflow: clip;
    --color-focus: var(--color-kuning);
}
.fold > * { position: relative; }

.fold-isi {
    padding-top: calc(var(--space-4xl) + var(--space-lg));
    padding-bottom: var(--space-2xl);
}
.fold-pengantar {
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--color-on-field-2);
    max-width: 34ch;
}
.fold-judul {
    margin-top: var(--space-md);
    font-size: var(--text-display-xxl);
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: -0.035em;
    color: var(--color-kuning);
    font-variation-settings: "opsz" 144, "SOFT" 30;
    white-space: nowrap;
    overflow-wrap: normal;
}
.fold-sub {
    margin-top: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-lg);
}
.fold-sub-nama {
    font-family: var(--font-display);
    font-size: var(--text-display-s);
    font-weight: 600;
    line-height: 1.1;
}
.fold-sub-tahun {
    font-family: var(--font-display);
    font-size: var(--text-display-s);
    font-weight: 300;
    color: var(--color-on-field-2);
}

/* Pita informasi di dasar fold: garis tebal kuning + lancang berlayar di atasnya */
.pita {
    position: relative;
    border-top: var(--rule-thick) solid var(--color-kuning);
    background: var(--color-field-deep);
}
.lancang {
    position: absolute;
    right: var(--gutter);
    bottom: calc(100% + var(--rule-thick) - 2px);
    width: clamp(7rem, 20vw, 13rem);
    height: auto;
    color: var(--color-kuning);
}
.pita dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-lg);
}
@media (min-width: 48rem) {
    .pita dl { grid-template-columns: repeat(2, minmax(0, auto)) minmax(0, 1fr); gap: var(--space-3xl); align-items: end; }
}
.pita dt {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-field-2);
}
.pita dd {
    margin-top: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.25;
}
.pita .pita-aksi { justify-self: start; }
@media (min-width: 48rem) {
    .pita .pita-aksi { justify-self: end; }
}

/* Masuk sekali saat halaman dibuka — satu gerak terorkestrasi, lalu diam. */
@media (prefers-reduced-motion: no-preference) {
    .fold-judul,
    .fold-sub,
    .fold-pengantar {
        animation: naik var(--dur-slow) var(--ease-out) both;
    }
    .fold-sub { animation-delay: 120ms; }
    .fold-pengantar { animation-delay: 60ms; }
    .lancang { animation: layar 1400ms var(--ease-out) 200ms both; }
}
@keyframes naik {
    from { opacity: 0; transform: translateY(0.6rem); }
    to { opacity: 1; transform: none; }
}
@keyframes layar {
    from { opacity: 0; transform: translateX(-3rem); }
    to { opacity: 1; transform: none; }
}

/* ===================== Tombol ===================== */
.tombol {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    border: 2px solid currentColor;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tombol:active { transform: translateY(1px); }
.tombol svg { width: 1em; height: 1em; flex: none; }

.tombol-kuning { background: var(--color-kuning); border-color: var(--color-kuning); color: var(--color-ink); }
.tombol-kuning:hover { background: var(--color-kuning-2); border-color: var(--color-kuning-2); }

.tombol-garis { color: var(--color-on-field); }
.tombol-garis:hover { background: var(--color-on-field); color: var(--color-field-deep); }

.tombol-merah { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-paper); }
.tombol-merah:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }

/* ===================== Tema ===================== */
.tema {
    padding-block: var(--space-4xl) var(--space-3xl);
}
.tema-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
}
@media (min-width: 60rem) {
    .tema-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
}
.label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.tema h2 {
    margin-top: var(--space-sm);
    font-size: var(--text-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    max-width: 16ch;
}
.tema h2 .garis-kuning {
    background: linear-gradient(transparent 62%, var(--color-kuning) 62%, var(--color-kuning) 92%, transparent 92%);
    padding-inline: 0.04em;
}
.prosa {
    max-width: var(--measure);
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--color-ink-2);
}
.prosa p + p { margin-top: var(--space-md); }
.tema .prosa { align-self: end; }

.kutipan {
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: var(--rule-hair) solid var(--color-rule);
}
.kutipan blockquote p {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: 1.35;
    max-width: 36ch;
    color: var(--color-ink);
}
.kutipan figcaption {
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}

/* ===================== Rangkaian ===================== */
.rangkaian {
    background: var(--color-paper-2);
    padding-block: var(--space-4xl);
}
.rangkaian-kepala {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}
@media (min-width: 60rem) {
    .rangkaian-kepala { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; }
}
.rangkaian h2 {
    font-size: var(--text-display);
    letter-spacing: -0.02em;
}
.rangkaian-kepala p { color: var(--color-ink-2); max-width: 44ch; }

.acara { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.acara li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-xl);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}
@media (min-width: 48rem) {
    .acara li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
}
.acara h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.acara p { color: var(--color-ink-2); max-width: var(--measure); }
.acara .puncak h3 { font-size: var(--text-display-s); }
.acara .tanda {
    display: inline-block;
    margin-bottom: var(--space-xs);
    padding: 0.1em 0.55em;
    background: var(--color-kuning);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Galeri dokumentasi: satu foto besar, dua kecil — bukan tiga kotak sama rata.
   Foto besar mengisi tinggi dua foto kecil di sebelahnya; `contain: size` membuat
   gambarnya tidak ikut mendorong tinggi baris grid, jadi keterangan tak tertimpa. */
.galeri {
    margin-top: var(--space-3xl);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg) var(--space-md);
}
.galeri figure { min-width: 0; }
.galeri img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-rule);
}
@media (min-width: 48rem) {
    .galeri { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .galeri figure:first-child {
        grid-row: span 2;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .galeri figure:first-child img {
        aspect-ratio: auto;
        height: 100%;
        contain: size;
    }
    .galeri figure:not(:first-child) img { aspect-ratio: 16 / 10; }
}
.galeri figcaption {
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}
.galeri-catatan {
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}

/* ===================== Lambang ===================== */
.lambang {
    padding-block: var(--space-4xl);
}
.lambang h2 {
    font-size: var(--text-display-s);
    letter-spacing: -0.015em;
    max-width: 20ch;
}
.lambang-isi {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
}
@media (min-width: 48rem) {
    .lambang-isi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); }
}
.lambang-isi > div { border-top: 2px solid var(--color-ink); padding-top: var(--space-lg); }
.lambang-isi h3 { font-size: var(--text-xl); font-weight: 700; }
.lambang-isi p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 48ch; }

/* ===================== Lokasi (bidang merah kembali) ===================== */
.lokasi {
    background: var(--color-field);
    color: var(--color-on-field);
    padding-block: var(--space-4xl);
    --color-focus: var(--color-kuning);
}
.lokasi .label { color: var(--color-kuning); }
.lokasi-tanggal {
    margin-top: var(--space-md);
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--color-kuning);
}
.lokasi-tempat {
    margin-top: var(--space-lg);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: 1.3;
}
.lokasi-catatan {
    margin-top: var(--space-lg);
    max-width: 52ch;
    color: var(--color-on-field-2);
}
.lokasi-aksi {
    margin-top: var(--space-2xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* ===================== Footer (Ft1 mast-headed) ===================== */
.kaki {
    padding-block: var(--space-2xl);
    border-top: var(--rule-thick) solid var(--color-kuning);
}
.kaki .bungkus {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
}
@media (min-width: 60rem) {
    .kaki .bungkus { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.kaki-penyelenggara {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.kaki-penyelenggara img { width: 3.25rem; height: 3.25rem; flex: none; }
.kaki-penyelenggara p { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; }
.kaki-penyelenggara strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); }
.kaki ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
}
.kaki ul a {
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid var(--color-rule);
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kaki ul a:hover { color: var(--color-accent); border-bottom-color: currentColor; }
.kaki-hak {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    color: var(--color-ink-2);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
}