/* ============================================
   NUSANTARA KITA — STYLE UTAMA
   ============================================ */

:root {
  --primary: #183d32;
  --primary-dark: #12352e;
  --accent: #398b83;
  --dark: #1f2937;
  --gray: #6b7280;
  --light: #f9fafb;
  --border: #e5e7eb;
  --white: #ffffff;
  --success: #16a34a;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
}

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

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
}

@keyframes pageEnter {
  from { opacity:.45; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}
body.page-enter { animation:pageEnter .32s ease-out both; }
body.page-leave { opacity:0; transform:translateY(-5px); transition:opacity .18s ease,transform .18s ease; }
@media (prefers-reduced-motion: reduce) {
  body.page-enter { animation:none; }
  body.page-leave { opacity:1; transform:none; transition:none; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: 1840px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 54px); }
.py-4 { padding: clamp(26px, 3vw, 48px) 0; }
.mt-3 { margin-top: 20px; }
.mt-4 { margin-top: 40px; }
.mb-4 { margin-bottom: 40px; }
.text-center { text-align: center; }

/* ============ NAVBAR ============ */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1100;
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo { display:flex; align-items:center; gap:8px; font-size:1.4rem; font-weight:700; }
.logo strong { color: var(--primary); }

.nav-menu { display:flex; align-items:center; gap:24px; }
.nav-menu a { font-size:0.95rem; font-weight:500; color:var(--gray); transition:.2s; }
.nav-menu a:hover, .nav-menu a.active { color: var(--primary); }
.nav-menu a.nav-account-action { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; color:var(--dark); font-size:.88rem; font-weight:650; white-space:nowrap; }
.nav-menu .nav-account-form { margin:0; }
.nav-menu button.nav-account-action { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--dark); font-family:inherit; font-size:.88rem; font-weight:650; line-height:inherit; white-space:nowrap; cursor:pointer; }
.nav-menu a.nav-account-login { background:var(--primary); border-color:var(--primary); color:#fff; }
.nav-menu a.nav-account-login:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; }
.nav-menu a.nav-account-logout:hover { border-color:var(--primary); color:var(--primary); }
.nav-menu button.nav-account-logout:hover { border-color:var(--primary); color:var(--primary); }

.nav-hamburger { display: none; }

/* ============ HERO ============ */
.home-page main {
  background:transparent;
}
/* Keep the map artwork visible while text shadow protects the white hero copy. */
.home-page .hero {
  position:relative;
  isolation:isolate;
  min-height:clamp(590px,72vh,800px);
  background:linear-gradient(90deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.32) 55%,rgba(0,0,0,.18) 100%),url('../image/background-hero.jpg') center 58% / cover no-repeat;
  background-attachment:scroll;
}
.home-page .hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.12;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,transparent 0 44px,rgba(125,45,35,.24) 44px 45px,transparent 45px 90px),
    repeating-linear-gradient(-45deg,transparent 0 44px,rgba(35,74,61,.18) 44px 45px,transparent 45px 90px);
  background-size:90px 90px;
}
.home-page .hero-inner { position:absolute; z-index:1; inset:0; display:grid; align-items:center; }
.home-page .hero-text { position:sticky; top:clamp(88px,12vh,132px); align-self:center; }
.home-page .stats, .home-page .section { background-color:transparent; }
.home-page .section-alt { background-color:rgba(255,255,255,.72); border-block:1px solid rgba(105,74,48,.12); }
.home-page .stat-card { background:rgba(255,255,255,.9); border-color:rgba(105,74,48,.16); }
.hero {
  display:flex; align-items:center; min-height:540px; padding:72px 0;
  background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.16) 100%), url('../image/background-hero.jpg') center 58% / cover no-repeat;
}
.hero-inner { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; width:100%; }
.hero-text { max-width:690px; }
.badge {
  display:inline-block; background:#fff; color:var(--primary);
  padding:6px 14px; border-radius:999px; font-size:.85rem; font-weight:600;
  margin-bottom:16px; box-shadow:var(--shadow);
}
.hero h1 { font-size:3rem; line-height:1.15; margin-bottom:20px; }
.home-page .hero h1, .home-page .hero p, .home-page .hero .highlight { color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8); }
.highlight { color: var(--primary); }
.hero p { font-size:1.1rem; color:var(--gray); margin-bottom:28px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }

/* ============ BUTTON ============ */
.btn {
  display:inline-block; padding:12px 24px; border-radius:var(--radius-sm);
  font-weight:600; cursor:pointer; border:none; transition:.2s;
  font-size:.95rem; text-align:center;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); transform: translateY(-2px); }
.btn-outline { background:#fff; color:var(--primary); border:2px solid var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-sm { padding:8px 16px; font-size:.85rem; }

/* ============ STATISTIK ============ */
.stats { padding: 40px 0; background: var(--white); }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.stat-card {
  background: var(--light); border-radius:var(--radius);
  padding: 28px; text-align:center; border: 1px solid var(--border);
}
.stat-num { font-size:2.2rem; font-weight:800; color:var(--primary); }
.stat-label { color:var(--gray); font-size:.95rem; margin-top:4px; }

/* ============ SECTION ============ */
.section { padding: 60px 0; }
.section-alt { background: var(--light); }
.section-head { text-align:center; margin-bottom:40px; }
.section-head h2 { font-size:2rem; margin-bottom:8px; }
.section-head p { color: var(--gray); }

/* ============ CARD ============ */
.card-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:24px;
}
.culture-card-rows { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.culture-card-row, .culture-card-row .home-featured-track, .culture-card-row .home-featured-group, .culture-card-grid { display:contents; }
.culture-card-rows .card-body { padding:16px; }
.culture-card-rows .card-body h3 { font-size:1.05rem; }
.culture-card-rows .card-desc { font-size:.86rem; }
.culture-pagination { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; }
.culture-pagination-status { color:var(--gray); font-size:.86rem; }
.culture-card-category-text, .province-culture-category-text { display:inline-flex; align-self:flex-start; margin-bottom:8px; padding:5px 9px; border-radius:4px; background:#e3eeea; color:#5f675f; font-size:.72rem; font-weight:700; }
.culture-card.is-text-only .card-body { padding-top:16px; }
.card {
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:.3s; display:flex; flex-direction:column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.suku-card[data-suku-detail-trigger] { cursor:pointer; }
.suku-card[data-suku-detail-trigger]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.suku-card-hint { margin-top:12px; color:var(--primary-dark); font-size:.86rem; font-weight:600; }
.suku-summary-text {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4;
  overflow:hidden; white-space:normal; overflow-wrap:anywhere;
}
.suku-card .suku-card-placeholder { aspect-ratio:8/5; }
.suku-card:hover .suku-card-placeholder img { transform:none; }
#hasil-suku, #suku-search { scroll-margin-top:96px; }
.card-img { position:relative; aspect-ratio: 4/3; overflow:hidden; display:block; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.card-image-placeholder { width:100%; height:100%; display:grid; place-items:center; padding:16px; background:linear-gradient(135deg,#f3e8e5,#e5efec); color:var(--primary-dark); font-weight:700; text-align:center; }
.card-media-credit { margin-top:8px; color:var(--gray); font-size:.72rem; }
.card-media-credit a { color:var(--primary); text-decoration:underline; }
.card:hover .card-img img { transform: scale(1.05); }
.card-badge {
  position:absolute; top:12px; left:12px;
  background: var(--primary); color:#fff; padding:4px 12px;
  border-radius:999px; font-size:.75rem; font-weight:600;
}
.card-badge-sm {
  display:inline-block; background:#fef2f2; color:var(--primary);
  padding:4px 12px; border-radius:999px; font-size:.75rem; font-weight:600;
  margin-top:8px;
}
.card-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.card-body h3 { font-size:1.15rem; margin-bottom:6px; color:var(--dark); }
.card-loc { color: var(--gray); font-size:.85rem; margin-bottom:8px; }
.card-desc { color: var(--gray); font-size:.9rem; flex:1; }
.card-link { color: var(--primary); font-weight:600; font-size:.9rem; margin-top:10px; }
.card-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.card a[aria-disabled="true"], .province-culture-card a[aria-disabled="true"], .gallery-copy a[aria-disabled="true"] { color:inherit; cursor:default; pointer-events:none; text-decoration:none; }
.card-provinsi { text-align:center; }
.province-card { display:flex; flex-direction:column; overflow:hidden; }
.province-card .card-img { aspect-ratio:16/10; }
.province-card .card-body { padding:18px 16px 16px; }
.province-card .card-desc { text-align:left; }
.province-card .card-loc { text-align:center; }
.home-featured-viewport { min-width:0; }
.home-featured-more { display:flex; justify-content:flex-end; margin-top:24px; }
.home-featured-track { display:block; }
.home-featured-group + .home-featured-group { display:none; }

@media (max-width:700px) {
  .home-featured-viewport { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; cursor:grab; }
  .home-featured-viewport::-webkit-scrollbar { display:none; }
  .home-featured-viewport.is-dragging { cursor:grabbing; user-select:none; }
  .home-featured-track { display:flex; width:max-content; }
  .home-featured-group { flex:none; padding-right:16px; }
  .home-featured-group + .home-featured-group { display:block; }
  .home-featured-group .card-grid { display:flex; width:max-content; gap:16px; }
  .home-featured-group .card { flex:0 0 min(68vw,270px); }
  .home-featured-group .card-img { aspect-ratio:16/10; }
  .home-featured-group .card-badge { top:9px; left:9px; padding:3px 9px; font-size:.68rem; }
  .home-featured-group .card-body { padding:14px; }
  .home-featured-group .card-body h3 { font-size:1.05rem; }
  .home-featured-group .card-loc { font-size:.8rem; margin-bottom:6px; }
  .home-featured-group .card-desc { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:.84rem; line-height:1.5; }
  .home-featured-group .card-link { margin-top:8px; font-size:.84rem; }
  .culture-card-rows { grid-template-columns:1fr; gap:12px; }
  .culture-card-row { display:block; width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; }
  .culture-card-row::-webkit-scrollbar { display:none; }
  .culture-card-row .home-featured-track { display:flex; width:max-content; }
  .culture-card-row .home-featured-group { display:block; flex:none; padding-right:16px; }
  .culture-card-row .culture-card-grid { display:flex; width:max-content; gap:12px; }
  .culture-card-row .culture-record-card { flex:0 0 min(64vw,250px); }
  .culture-card-row .culture-record-copy { padding:14px 15px 15px; }
  .culture-card-row .culture-record-copy h3 { font-size:1.2rem; }
  .culture-card-row .culture-record-copy .culture-record-origin,
  .culture-card-row .culture-record-copy .culture-record-source { font-size:13px; }
  .culture-card-row .card-actions { gap:6px; }
  .culture-card-row .card-actions .btn { padding:8px 10px; font-size:.78rem; }
}

/* ============ WILAYAH ============ */
.wilayah-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:16px;
}
.wilayah-card {
  background:#fff; border-radius:var(--radius); padding:24px 16px;
  text-align:center; box-shadow:var(--shadow); transition:.3s;
  border: 2px solid transparent;
}
.wilayah-card:hover { border-color: var(--primary); transform:translateY(-4px); }
.wilayah-icon { font-size:2.5rem; margin-bottom:8px; }
.wilayah-name { font-weight:600; font-size:.95rem; }

/* ============ PAGE HEADER ============ */
.page-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; padding: 60px 0;
}
.page-header h1 { font-size:2.4rem; margin-bottom:8px; }
.page-header p { opacity:.9; }
.breadcrumb { font-size:.9rem; margin-bottom:12px; opacity:.9; }
.breadcrumb a { color:#fff; text-decoration:underline; }

/* ============ FILTER ============ */
.filter-bar {
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  background: var(--light); padding:16px; border-radius: var(--radius);
  margin-bottom: 24px;
}
.filter-bar input, .filter-bar select {
  padding:10px 14px; border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:.9rem;
  background:#fff; min-width: 180px;
  font-family: inherit;
}
.filter-bar input { flex:1; }

.filter-pulau { display:flex; gap:8px; flex-wrap:wrap; margin: 20px 0; }
.chip {
  padding: 8px 16px; border-radius:999px; background:#fff;
  border:1px solid var(--border); font-size:.9rem;
  font-weight:500; cursor:pointer; transition:.2s;
}
.chip:hover { border-color:var(--primary); color:var(--primary); }
.chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.chip-success { background:#dcfce7; color:#166534; border-color:#86efac; }
.chip-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }

.result-info { color:var(--gray); margin-bottom:20px; font-size:.95rem; }
.same-page-status { margin:0; padding:8px 16px; color:var(--primary-dark); font-size:.9rem; }
.same-page-status[hidden] { display:none; }
[data-same-page-content][aria-busy="true"] { opacity:.62; }
.culture-filter-status { min-height:1.5em; margin:0 0 16px; color:var(--primary-dark); font-size:.9rem; }
.culture-filter-status[hidden] { display:none; }
[data-culture-results][aria-busy="true"] { opacity:.62; }

/* ============ MAP ============ */
.map-container, .map-full { height: 400px; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.map-container { height:min(58vh,560px); min-height:440px; }
.map-full { height: 600px; }
.map-small { height: 200px; border-radius:var(--radius-sm); margin-top:12px; }
.detail-map-section .map-small { width:100%; height:250px; margin:0; }
@media (max-width:700px) { .detail-map-section .map-small { height:220px; } }
.map-full { height: min(68vh, 760px); min-height: 440px; }
.leaflet-container.map-container, .leaflet-container.map-full { background-color:#e8f1ef; background-image:linear-gradient(rgba(232,241,239,.82),rgba(232,241,239,.82)),url('../image/latar-peta.png'); background-position:center,center bottom; background-size:100% 100%,100% auto; background-repeat:no-repeat,no-repeat; }
#map-home.leaflet-container { background-color:#f3ead8; background-image:none; }
#map-jelajah.leaflet-container { background-color:#e8f1ef; background-image:none; }
.leaflet-tooltip.province-tooltip { padding:6px 8px; border:0; border-radius:6px; background:#211e1a; color:#fffdf8; box-shadow:0 4px 12px rgba(31,25,17,.2); font-size:.72rem; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
.leaflet-tooltip.province-tooltip::before { border-top-color:#211e1a; }
.leaflet-tooltip.province-tooltip .map-popup-link { display:inline-flex; margin-top:4px; padding:2px 6px; border-radius:4px; background:#8fc8be; color:#173a34; font-weight:700; font-size:.68rem; }
.map-popup-link { display:inline-block; margin-top:8px; color:var(--primary); font-weight:700; }
.leaflet-popup-content { line-height:1.5; }
.province-shape, .province-capital-marker { transition:fill .18s ease,fill-opacity .18s ease,stroke-width .18s ease; }
.province-capital { color:var(--gray); margin:10px 0 0; }
.province-capital strong { color:var(--dark); }
@media (max-width:700px) {
  .leaflet-container .leaflet-popup-content { margin:8px 10px; font-size:.75rem; line-height:1.35; overflow-wrap:anywhere; }
  .leaflet-container .leaflet-popup-content strong { font-size:.8rem; }
  .leaflet-container .leaflet-popup-content .map-popup-link { margin-top:4px; padding:2px 6px; font-size:.72rem; }
  .leaflet-container .leaflet-popup-close-button { width:22px; height:22px; padding:4px 4px 0 0; }
}
.category-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.category-tile { min-height:112px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; padding:17px; border:1px solid var(--border); background:#fff; transition:border-color .2s,transform .2s; }
.category-tile:hover { border-color:var(--primary); transform:translateY(-2px); }
.category-tile-icon { width:40px; height:40px; display:grid; place-items:center; color:var(--primary-dark); }
.culture-category-icon { display:block; width:36px; height:36px; color:inherit; }
.culture-icon-accent { stroke:var(--accent); }
.category-tile strong { font-size:.9rem; }

/* ============ PROVINCE MUSEUM ============ */
.province-hero { position:relative; isolation:isolate; min-height:490px; display:flex; align-items:center; overflow:hidden; background:#203d32; color:#fff; }
.province-hero-slides, .province-hero-shade, .province-hero-noimage { position:absolute; inset:0; width:100%; height:100%; }
.province-hero-slides { z-index:-2; overflow:hidden; background:#203d32; }
/* Slow crossfades keep cultural photos legible behind the province title. */
.province-hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(1.015); transition:opacity .8s ease,visibility .8s ease; }
.province-hero-slide.is-active { opacity:1; visibility:visible; animation:provinceHeroDrift 7s ease-out both; }
.province-hero-image { width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.province-hero-noimage { z-index:-2; background:#294738; }
.province-hero-shade { z-index:-1; background:linear-gradient(90deg,rgba(18,38,31,.96) 0%,rgba(18,38,31,.88) 42%,rgba(18,38,31,.68) 72%,rgba(18,38,31,.3) 100%); }
.province-hero-content { width:100%; padding-top:44px; padding-bottom:44px; }
.province-hero .breadcrumb { color:rgba(255,255,255,.84); }
.province-eyebrow { margin:0 0 9px; color:#486f67; font-size:.76rem; font-weight:750; text-transform:uppercase; }
.province-hero .province-eyebrow { color:#a9d8cf; }
.province-hero h1 { max-width:680px; margin:0 0 12px; color:#fff; font-size:3rem; line-height:1.08; text-shadow:0 2px 18px rgba(0,0,0,.38); }
.province-hero-lede { max-width:640px; margin:0 0 10px; color:#fff; font-size:1.15rem; font-weight:650; line-height:1.5; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.province-hero-description { max-width:620px; margin:0; color:rgba(255,255,255,.96); line-height:1.7; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.province-hero-credit { margin:12px 0 0; color:rgba(255,255,255,.9); font-size:.8rem; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.province-hero-credit a { color:#c8eee5; text-decoration:underline; text-underline-offset:2px; }
@keyframes provinceHeroDrift { from { transform:scale(1.045); } to { transform:scale(1); } }
.province-hero-stats { display:flex; gap:30px; width:max-content; max-width:100%; margin-top:24px; padding-top:14px; border-top:1px solid rgba(255,255,255,.32); }
.province-hero-stats span { display:grid; gap:3px; }
.province-hero-stats strong { color:#fff; font-size:1.15rem; }
.province-hero-stats small { color:rgba(255,255,255,.88); font-size:.78rem; }
.province-category-sticky { position:sticky; top:0; z-index:30; border-bottom:1px solid #d1ddd8; background:rgba(245,250,248,.97); }
.province-category-nav { display:flex; flex-wrap:wrap; gap:9px; padding-top:8px; padding-bottom:8px; }
.province-category-nav .chip { flex:0 0 auto; min-height:44px; display:inline-flex; align-items:center; gap:10px; border-radius:5px; padding:7px 13px; font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; }
.province-category-toggle { border:1px solid #174c3c; background:#174c3c; color:#fffdf8; }
.province-category-toggle:hover { background:#23624d; }
.province-category-toggle:focus-visible, .province-cagar-link:focus-visible { outline:3px solid #398b83; outline-offset:2px; }
.province-cagar-link { border:1px solid #bdcfc4; background:#fffdf8; color:#174c3c; text-decoration:none; }
.province-cagar-link.active { border-color:#174c3c; background:#e8efea; }
.province-cagar-count { min-width:22px; padding:2px 6px; border-radius:3px; background:#e8efea; color:#174c3c; font-size:.75rem; text-align:center; }
.province-category-panel { padding-top:18px; padding-bottom:24px; }
.province-category-panel[hidden] { display:none; }
.province-category-panel-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px; color:#263c31; }
.province-category-panel-heading strong { font-size:1rem; }
.province-category-panel-heading span { color:#58665c; font-size:.82rem; }
.province-page-content { padding-top:52px; padding-bottom:64px; }
.province-culture-section, .province-gallery, .province-community-section { margin-bottom:58px; scroll-margin-top:76px; }
.province-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.province-section-heading h2 { margin:0; color:#263c31; font-size:1.75rem; }
.province-section-heading > p { max-width:390px; margin:0; color:#68736b; font-size:.92rem; }
/* Circular category marks foreground each subject while the label and record count stay together. */
.province-category-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px 12px; }
.province-category-card { min-width:0; min-height:164px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:9px; padding:14px 7px 11px; border:1px solid transparent; border-radius:4px; background:transparent; color:#263c31; text-align:center; text-decoration:none; transition:background-color .18s,border-color .18s; }
.province-category-card:hover, .province-category-card.is-active { border-color:#e6d9c3; background:#f6f0e4; }
.province-category-card:focus-visible { outline:3px solid #398b83; outline-offset:2px; }
.province-category-copy { display:flex; width:100%; flex-direction:column; align-items:center; gap:4px; }
.province-category-icon { width:80px; height:80px; flex:none; display:grid; place-items:center; border:1px solid #e4d6c1; border-radius:50%; background:#f2e6d1; color:#80551f; }
.province-category-card:nth-child(3n+2) .province-category-icon { background:#e6eeea; color:#245d50; }
.province-category-card:nth-child(3n) .province-category-icon { background:#f1e2dc; color:#884538; }
.province-category-icon .culture-category-icon { width:40px; height:40px; }
.province-category-card strong { color:#24463b; font-size:.92rem; line-height:1.3; overflow-wrap:anywhere; }
.province-category-count { color:#53675c; font-size:.78rem; line-height:1.3; }
/* Shared shell and 16:9 artwork keep culture cards recognizable across discovery pages; hover lift marks actionable records. */
.province-culture-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.province-culture-card, .culture-record-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid #d8dfd8; border-radius:4px; background:#fffdf8; color:inherit; text-decoration:none; box-shadow:0 3px 12px rgba(31,55,43,.07); transition:transform .18s,border-color .18s,box-shadow .18s; }
.province-culture-card { min-height:460px; }
.province-culture-card.is-text-only .province-culture-copy, .culture-record-card.is-text-only .culture-record-copy { padding-top:14px; }
.province-culture-art, .culture-record-art { position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; background:#e5efec; }
.province-culture-art img, .culture-record-art img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.province-culture-card:hover .province-culture-art img, .culture-record-card:hover .culture-record-art img { transform:scale(1.035); }
.province-culture-art.is-placeholder, .culture-record-art.is-placeholder { grid-template-columns:auto 1fr; justify-items:start; gap:12px; padding:18px; background:#e8efea; color:#395c4d; }
.culture-record-placeholder-icon { display:grid; width:56px; height:56px; place-items:center; }
.culture-record-placeholder-icon .culture-category-icon { width:48px; height:48px; }
.culture-record-photo-empty, .province-culture-photo-empty { color:#52675c; font-size:.84rem; font-weight:650; }
.province-culture-art > span:first-child, .culture-record-art > span:first-child { display:grid; place-items:center; color:#547157; }
.province-culture-art > span:first-child .culture-category-icon, .culture-record-art > span:first-child .culture-category-icon { width:54px; height:54px; }
.province-culture-category { position:absolute; left:13px; top:13px; padding:5px 9px; border:1px solid rgba(255,255,255,.86); border-radius:4px; background:#fffdf8; color:#34483b; font-size:.72rem; font-weight:700; }
.province-culture-copy, .culture-record-copy { display:flex; min-width:0; flex:1; flex-direction:column; padding:15px 16px 16px; }
.province-culture-copy h3, .culture-record-copy h3 { margin:0 0 8px; color:#273c31; font-size:1.08rem; line-height:1.35; }
.culture-detail-trigger { margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.culture-detail-trigger:hover { color:var(--primary); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.culture-detail-trigger:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.province-culture-copy p, .culture-record-copy > p:not(.province-culture-origin):not(.card-media-credit):not(.culture-record-origin):not(.culture-record-source) { min-height:3.5em; margin:0; color:#59675e; font-size:.86rem; line-height:1.55; }
.province-culture-copy > .culture-card-summary, .culture-record-copy > .culture-card-summary { min-height:4.65em; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; }
.province-culture-copy .province-culture-origin, .culture-record-copy .province-culture-origin { min-height:0; display:flex; align-items:flex-start; gap:6px; margin:0 0 9px; color:#4c6257; font-size:.8rem; font-weight:600; line-height:1.45; }
.culture-record-copy .culture-record-origin, .home-featured-origin { display:-webkit-box; min-height:2.9em; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
.province-culture-copy .province-culture-origin > span { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
.province-culture-origin svg { width:16px; height:16px; flex:none; margin-top:1px; fill:none; stroke:#347c82; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.province-culture-copy .card-media-credit { min-height:0; margin:8px 0 0; font-size:.72rem; }
.culture-record-copy .culture-record-location { min-height:0; margin:0 0 5px; color:#667168; font-size:.78rem; }
.culture-record-copy .culture-record-origin, .culture-record-copy .culture-record-source { min-height:0; color:#263c31; font-size:14px; font-weight:400; }
.culture-record-copy .culture-record-origin { margin:0 0 8px; }
.culture-record-copy .culture-record-source { margin:8px 0 0; }
.culture-record-copy .culture-record-source,
.province-culture-copy .culture-record-source { min-height:0; margin:8px 0 0; color:#58665c; font-size:.82rem; line-height:1.5; }
.culture-record-copy .culture-record-source a { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.culture-record-copy .culture-record-source a:hover { color:var(--primary-dark); }
.culture-record-copy .card-media-credit { min-height:0; margin:8px 0 0; font-size:.72rem; }
.culture-record-copy .card-actions { margin-top:auto; padding-top:12px; }
.province-culture-link { display:inline-flex; gap:8px; margin-top:15px; color:#547157; font-size:.83rem; font-weight:700; }
.province-culture-card[data-culture-detail-trigger] { cursor:pointer; }
.province-culture-card[data-culture-detail-trigger]:hover, .culture-record-card[data-culture-detail-trigger]:hover { transform:translateY(-2px); border-color:#829683; box-shadow:0 5px 14px rgba(31,55,43,.09); }
.province-culture-card[data-culture-detail-trigger]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.province-card-cta { display:inline-flex; min-height:44px; align-items:center; gap:8px; align-self:flex-start; margin-top:auto; padding:9px 13px; border:0; border-radius:5px; background:#174c3c; color:#fffdf8; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; }
.province-card-cta:hover { background:#23624d; }
.province-card-cta:focus-visible { outline:3px solid #398b83; outline-offset:3px; }
.culture-record-card[data-culture-detail-trigger] { cursor:pointer; }
.culture-record-card[data-culture-detail-trigger]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.culture-detail-dialog { position:fixed; width:min(760px,calc(100% - 32px)); max-width:none; max-height:min(92vh,900px); margin:auto; padding:0; overflow:auto; border:1px solid #d1ddd8; border-radius:8px; background:#fbfdfc; color:#263c31; box-shadow:0 18px 56px rgba(20,35,27,.28); }
.culture-detail-dialog::backdrop { background:rgba(21,31,26,.58); }
.culture-detail-close { position:sticky; z-index:2; top:12px; float:right; display:grid; width:44px; height:44px; place-items:center; margin:12px 12px -56px 0; border:1px solid rgba(39,60,49,.18); border-radius:50%; background:#fbfdfc; color:#263c31; font-size:27px; line-height:1; cursor:pointer; }
.culture-detail-dialog-content { min-height:100%; }
.culture-detail-hero { position:relative; width:100%; aspect-ratio:16/8; overflow:hidden; background:#e5efec; }
.culture-detail-hero img { width:100%; height:100%; object-fit:cover; }
.suku-detail-dialog .culture-detail-hero.is-placeholder { aspect-ratio:8/5; background:#f5ecd8; }
.suku-detail-dialog .culture-detail-hero.is-placeholder img { object-fit:contain; }
.culture-detail-hero.is-empty { display:grid; place-items:center; }
.culture-detail-image-status { position:absolute; inset:0; display:grid; place-items:center; padding:16px; color:#263c31; font-size:.88rem; text-align:center; }
.culture-detail-hero.is-empty .culture-detail-image-status { position:static; }
.culture-detail-photo-caption, .culture-detail-photo-credit { margin:7px 18px 0; color:#46534a; font-size:.78rem; line-height:1.5; }
.culture-detail-photo-credit a { color:#355b45; text-decoration:underline; text-underline-offset:2px; }
.culture-detail-image-status.is-error, .culture-detail-empty { color:#46534a; font-size:.86rem; line-height:1.5; }
.culture-detail-main { padding:24px 26px 20px; }
.culture-detail-breadcrumb { margin:0 0 12px; color:#586a5e; font-size:.72rem; }
.culture-detail-main .province-culture-category-text { display:inline-block; margin-bottom:6px; color:#547157; font-size:.78rem; font-weight:700; }
.culture-detail-main h2 { margin:0 0 5px; color:#263c31; font-size:1.8rem; line-height:1.2; }
.culture-detail-origin { margin:0 0 13px; color:#547157; font-size:.88rem; }
.culture-detail-record-status { display:inline-block; margin:0 0 13px; color:#795018; font-size:.78rem; font-weight:650; }
.culture-detail-record-status.is-verified { color:#285c3a; }
.culture-detail-description { color:#46534a; font-size:.96rem; line-height:1.7; text-align:justify; white-space:normal; }
.culture-detail-fields { margin:0 18px 16px; padding:17px 18px; border:1px solid #d1ddd8; border-radius:6px; background:#fbfdfc; }
.culture-detail-fields > h3 { margin:0 0 12px; color:#263c31; font-size:1rem; }
.culture-detail-field + .culture-detail-field { margin-top:13px; padding-top:12px; border-top:1px solid #e2e9e5; }
.culture-detail-field h4 { margin:0 0 5px; color:#263c31; font-size:.88rem; }
.culture-detail-field p { margin:0; color:#46534a; font-size:.88rem; line-height:1.65; white-space:pre-line; }
.culture-detail-sources, .culture-detail-related { margin:0 18px 16px; padding:17px 18px; border:1px solid #d1ddd8; border-radius:6px; background:#fbfdfc; }
.culture-detail-sources > summary { display:flex; min-height:24px; align-items:center; justify-content:space-between; gap:12px; color:#263c31; font-size:1rem; font-weight:700; cursor:pointer; list-style:none; }
.culture-detail-sources > summary::-webkit-details-marker { display:none; }
.culture-detail-sources > summary::after { width:8px; height:8px; flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; content:""; transform:rotate(45deg) translateY(-2px); transition:transform .16s ease; }
.culture-detail-sources[open] > summary::after { transform:rotate(225deg) translate(-2px,-1px); }
.culture-detail-sources > summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.culture-detail-sources > summary + * { margin-top:12px; }
.culture-detail-related h3 { margin:0 0 10px; color:#263c31; font-size:1rem; }
.culture-detail-sources ul { margin:0; padding-left:19px; color:#46534a; font-size:.84rem; }
.culture-detail-sources li + li { margin-top:14px; padding-top:12px; border-top:1px solid #e2e9e5; }
.culture-detail-source-culture { margin:0 0 8px; color:#263c31; font-size:.92rem; }
.culture-detail-sources a { color:#355b45; text-decoration:underline; text-underline-offset:2px; }
.culture-detail-sources li > span { display:block; color:#58665c; font-size:.78rem; }
.culture-detail-sources li .culture-detail-source-field { margin-top:3px; line-height:1.5; }
.culture-detail-source-field strong { color:#263c31; }
.culture-detail-source-url { overflow-wrap:anywhere; }
.culture-detail-media { margin:0 18px 16px; padding:17px 18px; border:1px solid #d1ddd8; border-radius:6px; background:#fbfdfc; }
.culture-detail-media h3 { margin:0 0 10px; color:#263c31; font-size:1rem; }
.culture-detail-media-item + .culture-detail-media-item { margin-top:14px; padding-top:14px; border-top:1px solid #e2e9e5; }
.culture-detail-media-item h4 { margin:0 0 8px; color:#263c31; font-size:.88rem; }
.culture-detail-media-item audio, .culture-detail-media-item video { display:block; width:100%; }
.culture-detail-audio-embed { width:min(100%,480px); min-height:84px; border:0; }
.culture-detail-video-embed { display:block; width:100%; aspect-ratio:16/9; border:0; background:#161a18; }
.culture-detail-related-note { margin:0 0 12px; color:#58665c; font-size:.82rem; line-height:1.5; }
.culture-detail-retry { margin:12px 18px 18px; min-height:44px; }
.culture-detail-related-viewport { overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scrollbar-width:none; scroll-behavior:auto; touch-action:pan-x; }
.culture-detail-related-viewport::-webkit-scrollbar { display:none; }
.culture-detail-related-viewport:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.culture-detail-related-track, .culture-detail-related-grid { display:flex; width:max-content; }
.culture-detail-related-track { gap:12px; }
.culture-detail-related-grid { gap:12px; }
.culture-detail-related-card { display:flex; flex:0 0 clamp(240px,42vw,340px); min-width:0; min-height:44px; flex-direction:column; padding:0 0 10px; overflow:hidden; border:1px solid #d1ddd8; border-radius:5px; background:#fff; color:#263c31; text-align:left; cursor:pointer; }
.culture-detail-related-card img { width:100%; aspect-ratio:16/9; object-fit:cover; background:#e5efec; }
.culture-detail-related-card strong, .culture-detail-related-card span { margin:8px 10px 0; }
.culture-detail-related-card strong { font-size:.84rem; line-height:1.35; }
.culture-detail-related-card span { color:#58665c; font-size:.74rem; }
.culture-detail-related-card:focus-visible, .culture-detail-close:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.province-empty { display:flex; gap:15px; align-items:flex-start; padding:24px; border:1px solid #d8dfd8; border-radius:10px; background:#fffdf8; box-shadow:0 3px 12px rgba(31,55,43,.06); }
.province-empty > span { color:#286c64; font-size:1.4rem; }
.province-empty h3 { margin:0 0 5px; color:#273c31; font-size:1rem; }
.province-empty p { margin:0; color:#68736b; font-size:.9rem; }
.province-gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.province-gallery .gallery-carousel-viewport { overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scrollbar-width:none; scroll-behavior:auto; touch-action:pan-x; cursor:grab; }
.province-gallery .gallery-carousel-viewport::-webkit-scrollbar { display:none; }
.province-gallery .gallery-carousel-viewport.is-dragging { cursor:grabbing; user-select:none; }
.province-gallery .gallery-carousel-track { display:flex; width:max-content; }
.province-gallery .province-gallery-grid { display:flex; width:max-content; flex:none; align-items:flex-start; gap:16px; margin:0; padding-right:16px; }
.province-gallery-item { overflow:hidden; border:1px solid #d8dfd8; border-radius:10px; background:#fffdf8; box-shadow:0 3px 12px rgba(31,55,43,.07); }
.province-gallery .province-gallery-item { display:flex; flex:0 0 clamp(340px,32vw,420px); height:330px; flex-direction:column; }
.province-gallery-item img, .province-gallery-placeholder { width:100%; aspect-ratio:16/9; object-fit:cover; }
.province-gallery-item .media-lightbox-trigger, .detail-media-item .media-lightbox-trigger { position:relative; width:100%; height:auto; aspect-ratio:4/3; align-self:start; }
.province-gallery-item .media-lightbox-trigger { aspect-ratio:16/9; }
.province-gallery-item .media-lightbox-trigger img, .detail-media-item .media-lightbox-trigger img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.province-gallery-placeholder { display:grid; place-items:center; background:#e5efec; color:#5b725e; font-size:2rem; }
.province-gallery-item > div:last-child { display:grid; flex:1; align-content:start; gap:5px; min-height:0; padding:13px 15px 15px; }
.province-gallery-item strong { color:#293e33; font-size:.92rem; line-height:1.35; }
.province-gallery-item strong { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.province-gallery-item span { color:#52675c; font-size:.78rem; }
.province-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.province-info-card { padding:22px; border-top:2px solid #398b83; background:#eaf2ef; }
.province-info-card h3 { margin:0 0 16px; color:#283c32; font-size:1.12rem; }
.province-info-entry + .province-info-entry { margin-top:15px; padding-top:15px; border-top:1px solid #d1ddd8; }
.province-info-entry h4 { margin:0 0 5px; font-size:.94rem; }
.province-info-entry p { margin:0; color:#667168; font-size:.87rem; }
.province-info-entry a { display:inline-block; margin-top:7px; color:#547157; font-size:.8rem; }
.location-note { color:var(--gray); font-size:.84rem; }
.media-lightbox-trigger { display:block; width:100%; height:100%; padding:0; overflow:hidden; border:0; background:transparent; cursor:zoom-in; }
.media-lightbox-trigger img { display:block; width:100%; height:100%; object-fit:cover; }
.media-video-embed { width:100%; aspect-ratio:16/9; overflow:hidden; background:#161a18; }
.media-video-embed iframe { width:100%; height:100%; border:0; }
.admin-media-video-preview { width:min(100%,280px); aspect-ratio:16/9; margin:10px 0; background:#171717; }
.admin-media-video-preview iframe { width:100%; height:100%; border:0; }
.admin-media-audio-preview { width:min(100%,300px); height:84px; margin:10px 0; border:1px solid var(--border); border-radius:4px; background:var(--surface); }
.admin-media-audio-preview iframe { width:100%; height:100%; border:0; }
.google-drive-audio-player { display:block; width:min(100%,720px); height:84px; border:1px solid var(--border); border-radius:4px; background:var(--surface); }
.google-drive-audio-link { display:inline-block; margin-top:6px; font-size:.84rem; }
.detail-multimedia { margin:30px 0; padding:20px; border-left:3px solid #398b83; background:#eaf2ef; }
.detail-multimedia h2 { margin:0 0 8px; color:#283c32; font-size:1.2rem; }
.detail-multimedia-status { display:flex; gap:20px; flex-wrap:wrap; color:#68736b; }
.detail-multimedia-status p { margin:0; }
.media-lightbox { position:fixed; inset:0; width:min(94vw,1080px); max-width:94vw; max-height:min(90vh,90dvh); margin:auto; padding:0; overflow:auto; overscroll-behavior:contain; border:0; background:#17221b; color:#fff; }
.media-lightbox::backdrop { background:rgba(12,20,16,.86); }
.media-lightbox figure { margin:0; }
.media-lightbox figure img { display:block; width:100%; height:auto; max-height:min(72vh,72dvh); object-fit:contain; object-position:center; background:#111; }
.media-lightbox figcaption { display:grid; gap:5px; padding:13px 16px 16px; }
.media-lightbox-credit { color:#d0d7d0; font-size:.84rem; }
.media-lightbox-source { width:max-content; color:#a9d8cf; font-size:.84rem; }
.media-lightbox-close { position:absolute; top:10px; right:10px; z-index:1; width:40px; height:40px; border:0; border-radius:50%; background:rgba(15,22,18,.78); color:#fff; font-size:1.6rem; cursor:pointer; }
.media-unavailable { display:grid; min-height:120px; place-items:center; padding:18px; background:#e8f0ee; color:#365b54; text-align:center; font-size:.88rem; }
.media-unavailable[hidden] { display:none; }
.card-img > .media-unavailable { width:100%; height:100%; min-height:0; font-size:.82rem; }
.gallery-item > .media-unavailable { aspect-ratio:4/3; }
.media-image-unavailable { position:absolute; inset:0; display:grid; place-items:center; padding:16px; background:#e8f0ee; color:#365b54; text-align:center; font-size:.84rem; }
.media-image-unavailable[hidden] { display:none; }
.detail-media-rights { display:flex; flex-wrap:wrap; gap:5px 16px; margin:-12px 0 24px; color:var(--gray); font-size:.8rem; }
.detail-media-rights a { color:var(--primary); text-decoration:underline; }

/* ============ DETAIL BUDAYA ============ */
.culture-story-page main {
  background:transparent;
}
.detail-header { padding: 20px 0; }
.detail-wrap { max-width:1080px; padding-top:36px; padding-bottom:60px; }
.culture-story-page .detail-title {
  margin:0 0 24px;
  padding:24px 28px;
  border:1px solid #d1ddd8;
  border-top:4px solid var(--primary);
  background:rgba(255,253,248,.94);
  box-shadow:0 10px 28px rgba(75,49,26,.07);
}
.culture-story-page .detail-title .eyebrow { color:var(--primary); font-weight:700; }
.detail-hero { position:relative; border-radius:var(--radius); overflow:hidden; margin-bottom:24px; aspect-ratio:16/9; }
@media (min-width:701px) { .detail-hero { height:clamp(360px,60vh,640px); aspect-ratio:auto; } }
.detail-hero img { width:100%; height:100%; object-fit:cover; }
.detail-title h1 { font-size:2.6rem; margin-bottom:12px; }
.detail-meta { display:flex; gap:20px; flex-wrap:wrap; color:var(--gray); margin-bottom:24px; }

.tab-nav { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:24px; overflow-x:auto; }
.tab-btn {
  padding: 12px 20px; background:transparent; border:none; cursor:pointer;
  font-weight:600; color:var(--gray); font-size:.95rem;
  border-bottom: 3px solid transparent; margin-bottom:-2px; transition:.2s;
  white-space: nowrap; font-family: inherit;
}
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-pane { display:none; }
.tab-pane.active { display:block; animation: fadeIn .3s; }
.tab-pane h2 { margin-bottom:12px; font-size:1.5rem; }
.tab-pane p { margin-bottom:16px; color: #374151; line-height:1.8; }

@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.detail-info { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin: 32px 0; }
.info-card { background:var(--light); border-radius:var(--radius); padding:24px; }
.info-card h3 { margin-bottom:12px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag { background:#fff; border:1px solid var(--border); padding:6px 14px; border-radius:999px; font-size:.85rem; }

.culture-story-page .detail-map-section {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
  gap:24px;
  margin:28px 0;
  padding:22px;
  border-left:4px solid var(--accent);
  border-radius:var(--radius-sm);
  background:rgba(255,253,248,.94);
  box-shadow:0 8px 24px rgba(75,49,26,.07);
}
.detail-map-copy h2 { margin-bottom:8px; color:var(--primary-dark); }
.detail-map-copy p { margin-bottom:14px; color:#4d625b; }
.culture-story-page .detail-sources { border-color:#d1ddd8; background:rgba(251,253,252,.94); }
.sumber { color:var(--gray); font-size:.9rem; margin: 20px 0; }
.sumber a { color:var(--primary); font-weight:600; }
.sumber a:hover { text-decoration:underline; }
.detail-gallery { margin:36px 0; padding-top:30px; border-top:1px solid var(--border); }
.detail-gallery .section-head { text-align:left; margin-bottom:18px; }
.detail-gallery .section-head h2 { font-size:1.5rem; }
.detail-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.detail-media-item { min-width:0; padding:12px; border:1px solid var(--border); background:var(--light); }
.detail-media-item .media-lightbox-trigger { position:relative; width:100%; height:auto; aspect-ratio:4/3; }
.detail-media-item img, .detail-media-item video { width:100%; max-height:280px; aspect-ratio:4/3; object-fit:cover; background:#e5e7eb; }
.detail-media-item audio { width:100%; margin:14px 0; }
.detail-media-item p { margin:9px 0 0; color:var(--gray); font-size:.85rem; }
.media-link { display:block; padding:28px 12px; color:var(--primary); text-align:center; }
.detail-sources { margin:24px 0; padding:20px; border:1px solid var(--border); background:var(--light); }
.detail-sources h2 { margin-bottom:12px; font-size:1.25rem; }
.detail-sources ul { list-style:none; }
.detail-sources li { display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-top:1px solid var(--border); font-size:.9rem; }
.detail-sources li a { color:var(--primary); font-weight:600; white-space:nowrap; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.gallery-item { min-width:0; border:1px solid var(--border); background:#fff; }
.gallery-image, .gallery-image img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--light); }
.gallery-image { position:relative; height:auto; aspect-ratio:4/3; align-self:start; border:0; padding:0; cursor:zoom-in; }
.gallery-image img { position:absolute; inset:0; height:100%; }
.gallery-copy { padding:16px; }
.gallery-copy > span, .source-row > div > span { color:var(--primary); font-size:.76rem; font-weight:700; text-transform:uppercase; }
.gallery-copy h2 { margin:6px 0; font-size:1.1rem; }
.gallery-copy p { color:var(--gray); font-size:.88rem; }
.gallery-copy .gallery-caption { margin:8px 0; color:var(--dark); font-size:.82rem; }
.gallery-copy audio, .gallery-copy video { width:100%; }
.gallery-media-placeholder { display:grid; place-items:center; aspect-ratio:4/3; background:linear-gradient(135deg,#f3e8e5,#e5efec); color:var(--primary); font-size:3rem; }
.media-attribution { display:grid; gap:3px; margin-top:10px; color:var(--gray); font-size:.78rem; }
.media-attribution a { color:var(--primary); font-weight:600; }
.cover-credit { position:absolute; right:12px; bottom:12px; left:12px; padding:9px 12px; background:rgba(31,41,55,.86); color:#fff; font-size:.8rem; }
.cover-credit a { color:#a9d8cf; text-decoration:underline; }
.media-pending { width:100%; height:100%; min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; background:linear-gradient(135deg,#f3e8e5,#e5efec); text-align:center; }
.media-pending span { color:var(--primary); font-size:.8rem; font-weight:700; text-transform:uppercase; }
.media-pending h2 { color:var(--dark); font-size:1.7rem; }
.media-pending p { color:var(--gray); font-size:.9rem; }
.source-search { max-width:900px; }
.source-list { border-top:1px solid var(--border); }
.source-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 8px; border-bottom:1px solid var(--border); }
.source-row h2 { margin:4px 0; font-size:1.15rem; }
.source-row p { color:var(--gray); font-size:.9rem; }
.source-open { color:var(--primary); font-weight:700; font-size:.88rem; white-space:nowrap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.admin-content-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:end; margin:20px 0 32px; padding:20px; background:var(--light); border:1px solid var(--border); }
.admin-content-form label { display:grid; gap:6px; color:var(--dark); font-size:.88rem; font-weight:600; }
.admin-content-form .admin-checkbox { display:flex; align-items:flex-start; gap:10px; font-weight:500; }
.admin-content-form .admin-checkbox input { width:auto; min-width:18px; margin-top:3px; }
.media-admin-link { padding:12px; background:#fff; border-left:3px solid var(--accent); color:var(--gray); }
.media-admin-link a { color:var(--primary); font-weight:700; text-decoration:underline; }
.admin-content-form .field-wide { grid-column:1 / -1; }
.admin-content-form input, .admin-content-form select, .admin-content-form textarea { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; font:inherit; }
.admin-content-form textarea { resize:vertical; }
.province-image-current { display:flex; align-items:center; gap:12px; color:var(--dark); font-size:.85rem; }
.province-image-current img { width:min(100%,320px); height:auto; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--border); }
.province-admin-form input[type="file"] { min-height:44px; }
.admin-fieldset { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--border); }
.admin-fieldset legend { padding:0 6px; font-weight:700; }
.admin-form-actions { grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap; }
.admin-alert { margin:16px 0; padding:12px 15px; border:1px solid #fecaca; background:#fef2f2; color:#991b1b; }
.admin-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.admin-actions form { display:inline-flex; margin:0; }
.admin-data-table { width:100%; margin:20px 0; border-collapse:collapse; background:#fff; }
.admin-data-table th, .admin-data-table td { padding:12px; border-bottom:1px solid var(--border); text-align:left; }
.admin-data-table th { color:var(--gray); font-size:.8rem; text-transform:uppercase; }
.admin-data-table .culture-category-icon { width:24px; height:24px; display:inline-block; margin-right:6px; vertical-align:middle; }
.admin-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.admin-sidebar { position:fixed; inset:0 auto 0 0; z-index:1100; width:264px; display:flex; flex-direction:column; padding:20px 14px 16px; overflow-y:auto; background:#202a25; color:#edf1ec; }
.admin-menu-toggle, .admin-menu-trigger, .admin-menu-backdrop { display:none; }
.admin-brand { display:flex; align-items:center; gap:10px; margin:0 8px 24px; color:#fff; font-size:.78rem; font-weight:800; }
.admin-brand small { display:block; margin-top:3px; color:#c6d0c9; font-size:.62rem; letter-spacing:.12em; }
.admin-brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:50% 50% 50% 4px; background:var(--primary); color:#fff; font:800 1rem var(--display); }
.admin-sidebar nav { display:grid; gap:4px; }
.admin-nav-home, .admin-nav-group summary { min-height:39px; display:flex; align-items:center; justify-content:space-between; gap:9px; padding:8px 10px; color:#e5ebe6; font-size:.75rem; font-weight:700; cursor:pointer; list-style:none; }
.admin-nav-home::-webkit-details-marker, .admin-nav-group summary::-webkit-details-marker { display:none; }
.admin-nav-home:hover, .admin-nav-group summary:hover, .admin-nav-home.active { background:#34463d; color:#fff; }
.admin-nav-group summary span { color:#aebbb2; }
.admin-nav-children { display:grid; gap:2px; padding:0 0 7px 9px; }
.admin-nav-children a { padding:6px 10px; border-left:1px solid #53655b; color:#c3cec6; font-size:.72rem; }
.admin-nav-children a:hover, .admin-nav-children a.active { border-left:2px solid var(--accent); color:#fff; }
.admin-sidebar-bottom { display:grid; gap:6px; margin-top:auto; padding:14px 8px 0; border-top:1px solid #415148; }
.admin-sidebar-bottom a { padding:6px 4px; color:#c9d1cb; font-size:.74rem; }
.admin-sidebar-bottom form { margin:0; }
.admin-sidebar-bottom .admin-sidebar-logout { width:100%; padding:6px 4px; border:0; background:transparent; color:#c9d1cb; font:inherit; font-size:.74rem; text-align:left; cursor:pointer; }
.admin-sidebar-bottom .admin-sidebar-logout:hover { color:#fff; }
.admin-sidebar-bottom .admin-sidebar-logout:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.admin-sidebar ~ .container { width:calc(100% - 264px); max-width:none; margin-left:264px; padding-left:clamp(22px,3vw,52px); padding-right:clamp(22px,3vw,52px); }
.admin-content-title { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px; }
.admin-content-title h1 { margin:0; }
.admin-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0; }
.admin-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:20px 0; }
.admin-kpi { padding:18px; border:1px solid var(--border); background:#fff; }
.admin-kpi span { display:block; color:var(--gray); font-size:.78rem; }
.admin-kpi strong { display:block; margin-top:4px; color:var(--dark); font:800 1.7rem var(--display); }
.admin-panel { margin:22px 0; padding:20px; border:1px solid var(--border); background:#fff; }
.admin-panel h2 { margin:0 0 15px; font-size:1.25rem; }
.admin-list-summary { margin:16px 0 8px; color:var(--gray); font-size:.86rem; }
.admin-pagination { display:flex; align-items:center; justify-content:center; gap:14px; margin:20px 0; }
.admin-pagination span { color:var(--gray); font-size:.86rem; }
.admin-two-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin-two-panels > * { min-width:0; }
.table-scroll { width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
.admin-data-table { min-width:700px; }
.admin-sidebar + .container > table { display:block; width:100%; overflow-x:auto; }
.admin-sidebar + .container > table th, .admin-sidebar + .container > table td { white-space:nowrap; }
.moderation-form { display:grid; grid-template-columns:minmax(120px,.6fr) minmax(180px,1.4fr) auto; gap:8px; min-width:360px; }
.moderation-form select, .moderation-form textarea { min-width:0; }
.admin-actions { min-width:100px; }
.detail-terkait { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.detail-terkait h2 { margin-bottom:20px; }

/* ============ PROGRESS ============ */
.progress-wrap { margin: 24px 0; }
.progress-label { margin-bottom:8px; font-weight:600; }
.progress-bar { height:16px; background:var(--border); border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition:.5s; }

/* ============ EMPTY STATE ============ */
.empty-state { text-align:center; padding: 60px 20px; color: var(--gray); }
.empty-icon { font-size:4rem; margin-bottom:12px; }
.empty-state h3, .empty-state h2 { color: var(--dark); margin-bottom:8px; }

/* ============ TENTANG ============ */
.tentang-wrap { max-width: 800px; }
.tentang-card {
  background:#fff; border-radius:var(--radius); padding:32px;
  box-shadow: var(--shadow); margin-bottom: 24px;
}
.tentang-card h2 { margin-bottom:16px; color: var(--primary); }
.tentang-card ul { padding-left: 20px; }
.tentang-card li { margin-bottom:8px; }
.about-hero, .about-body { padding:clamp(28px,5vw,72px); }
.about-hero { background:var(--light); }
.about-hero h1 { max-width:900px; font-size:clamp(2.3rem,5vw,4.5rem); line-height:1.08; }
.about-hero > p:last-child { max-width:720px; color:var(--gray); font-size:1.05rem; }
.about-body { display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr); gap:clamp(26px,5vw,72px); align-items:center; }
.about-visual-archive { min-height:420px; padding:32px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; background:var(--dark); color:#fff; position:relative; overflow:hidden; }
.about-visual-archive::before { content:""; position:absolute; inset:16px; border:1px solid rgba(255,255,255,.35); pointer-events:none; }
.about-visual-archive .archive-index, .about-visual-archive .archive-count { position:relative; padding:0; background:transparent; color:#d1d5db; font-size:.7rem; font-weight:700; }
.about-visual-archive strong { position:relative; font:800 clamp(2rem,4vw,4rem)/.98 var(--display); }
.about-visual-archive strong em { color:var(--accent); font-style:normal; }
.about-body article h2 { font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.2; }
.about-body article > p:not(.eyebrow) { color:var(--gray); line-height:1.8; }

/* ============ FOOTER ============ */
.footer { position:relative; overflow:hidden; background:#090909; color:#d5d5dc; padding:38px 0 14px; margin-top:60px; }
.footer > .container { position:relative; z-index:1; max-width:1360px; }
.footer-content { display:grid; grid-template-columns:1.2fr 1.15fr 1fr; gap:0; }
.footer-content > * { min-width:0; padding:0 clamp(18px,2.5vw,34px); }
.footer-content > :first-child { padding-left:clamp(18px,2.5vw,34px); }
.footer-content > :not(:first-child) { border-left:1px solid rgba(201,155,54,.42); }
.footer h3 { color:#fff; margin-bottom:12px; }
.footer h3.footer-brand { display:flex; align-items:center; gap:12px; margin:0 0 8px; font:700 clamp(1.35rem,2.3vw,1.8rem)/1.15 var(--display); white-space:nowrap; }
.footer-brand img { width:54px; height:54px; flex:none; object-fit:contain; }
.footer-brand strong { color:#edbd4e; font-weight:700; }
.footer h4 { position:relative; color:#fff; margin:0 0 12px; padding-top:9px; font:700 1.3rem/1.15 var(--display); }
.footer h4::before { position:absolute; top:0; left:0; width:32px; height:3px; border-radius:2px; background:#edbd4e; content:""; }
.footer p { font-size:.95rem; line-height:1.55; }
.footer-identity > p { max-width:390px; margin:0; }
.footer ul { list-style:none; margin:0; padding:0; }
.footer li { margin:0 0 6px; font-size:.95rem; line-height:1.4; }
.footer-navigation a { display:inline-flex; align-items:center; min-height:22px; color:#d5d5dc; font-size:.95rem; font-weight:500; text-decoration:none; }
.footer a:hover { color:#f1c453; }
.footer a:focus-visible { border-radius:2px; outline:2px solid #f1c453; outline-offset:4px; }
.footer-sources li { position:relative; padding-left:27px; }
.footer-sources li::before { position:absolute; top:.7em; left:0; width:12px; height:2px; background:#edbd4e; content:""; }
.footer-dedication { max-width:700px; margin:22px auto 0; text-align:center; }
.footer-dedication-label { display:flex; align-items:center; justify-content:center; gap:22px; margin:0 0 6px; color:#d5d5dc; font-size:.72rem !important; letter-spacing:.18em; line-height:1.35 !important; text-transform:uppercase; }
.footer-dedication-label::before, .footer-dedication-label::after { width:min(18vw,138px); height:1px; background:#b38b34; content:""; }
.footer-dedication h3 { margin:0 0 8px; color:#edbd4e; font:700 clamp(1.1rem,2vw,1.4rem)/1.2 var(--display); }
.footer-dedication-logos { position:relative; display:flex; align-items:center; justify-content:center; gap:18px; width:min(100%,360px); min-height:98px; margin:0 auto; overflow:hidden; border:1px solid rgba(255,239,185,.72); border-radius:999px; background:linear-gradient(105deg,#bd9236 0%,#f0d47f 48%,#bd9236 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 5px 16px rgba(0,0,0,.2); }
.footer-dedication-logo { display:block; flex:none; object-fit:contain; }
.footer-dedication-logo-permikomnas { width:82px; height:82px; }
.footer-dedication-logo-munas { width:88px; height:82px; padding-left:14px; border-left:1px solid rgba(201,155,54,.28); }
.footer-dedication-institution { margin:3px 0 0; color:#fff; font-weight:700; }
.footer-bottom { margin-top:14px; padding-top:9px; border-top:1px solid #9b772d; text-align:center; color:#d5d5dc; }
.footer .footer-bottom p { margin:0; font-size:.9rem; line-height:1.6; }
.footer-bottom span { display:inline-block; margin:0 9px; color:#edbd4e; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
  .province-category-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .province-culture-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .culture-story-page .detail-map-section { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .hero-inner { text-align:center; }
  .hero-text { margin:0 auto; }
  .hero h1 { font-size: 2.2rem; }
  .hero-btns { justify-content:center; }
  .detail-info { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .province-category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .province-culture-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .province-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-sidebar { width:232px; }
  .admin-sidebar ~ .container { width:calc(100% - 232px); margin-left:232px; padding-left:22px; padding-right:22px; }
  .admin-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-two-panels { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  .admin-menu-toggle { position:absolute; width:1px; height:1px; opacity:0; }
  .admin-menu-trigger { position:sticky; top:0; z-index:1300; display:flex; align-items:center; gap:10px; height:52px; padding:0 16px; border-bottom:1px solid var(--border); background:#fff; color:var(--dark); font-size:.9rem; font-weight:700; cursor:pointer; }
  .admin-menu-trigger span:first-child { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--border); border-radius:6px; font-size:1.1rem; }
  .admin-menu-backdrop { position:fixed; inset:52px 0 0; z-index:1190; display:none; background:rgba(17,24,39,.48); }
  .admin-menu-toggle:checked ~ .admin-menu-backdrop { display:block; }
  .admin-sidebar { position:fixed; inset:52px auto 0 0; z-index:1200; width:min(84vw,310px); height:calc(100vh - 52px); max-height:none; padding:14px 12px 16px; transform:translateX(-105%); transition:transform .22s ease; box-shadow:var(--shadow-lg); }
  .admin-menu-toggle:checked ~ .admin-sidebar { transform:translateX(0); }
  .admin-brand { margin-bottom:16px; }
  .admin-sidebar nav { grid-template-columns:1fr; align-items:stretch; }
  .admin-nav-home, .admin-nav-group summary { font-size:.68rem; }
  .admin-nav-home, .admin-nav-group summary, .admin-nav-children a { overflow-wrap:anywhere; }
  .admin-nav-children { padding-left:4px; }
  .admin-nav-children a { font-size:.66rem; }
  .admin-sidebar ~ .container { width:100%; margin-left:0; padding-left:18px; padding-right:18px; }
  .admin-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-kpi { padding:14px; }
  .admin-kpi strong { font-size:1.4rem; overflow-wrap:anywhere; }
  .admin-content-title { align-items:flex-start; flex-direction:column; }
  .admin-panel { padding:14px; }
  .admin-toolbar > .btn { flex:1 1 180px; }
  .admin-form-actions > .btn { flex:1 1 140px; }
  .moderation-form { grid-template-columns:1fr; min-width:0; }
  .admin-sidebar-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-content { grid-template-columns: 1fr; }
  .hero { min-height:0; padding:48px 0; background-image:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('../image/background-hero.jpg'); background-position:center 58%; }
  .home-page .hero { min-height:0; padding:48px 0; background-position:center 58%; }
  .hero-inner { gap:22px; }
  .hero p { font-size:1rem; }
  .stats-grid { gap:10px; }
  .stat-card { padding:18px 12px; }
  .stat-num { font-size:1.65rem; }
  .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .category-tile { min-height:94px; padding:12px; }
  .province-hero { min-height:360px; }
  .province-hero-shade { background:linear-gradient(180deg,rgba(18,38,31,.38) 0%,rgba(18,38,31,.68) 35%,rgba(18,38,31,.96) 100%); }
  .province-hero-content { padding-top:28px; padding-bottom:28px; }
  .province-hero .breadcrumb { font-size:.7rem; }
  .province-hero h1 { font-size:2.1rem; line-height:1.05; }
  .province-hero-lede { font-size:.96rem; line-height:1.45; }
  .province-hero-description { font-size:.88rem; line-height:1.6; }
  .province-hero-stats { gap:12px 18px; flex-wrap:wrap; margin-top:20px; }
  .province-hero-stats strong { font-size:1rem; }
  .province-hero-stats small { font-size:.66rem; }
  .province-section-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .province-section-heading h2 { font-size:1.45rem; }
  .province-section-heading > p { font-size:.8rem; }
  .province-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 5px; }
  .province-category-card { min-height:138px; gap:7px; padding:10px 4px 8px; }
  .province-category-icon { width:64px; height:64px; }
  .province-category-icon .culture-category-icon { width:32px; height:32px; }
  .province-category-card strong { font-size:.82rem; }
  .province-category-count { font-size:.74rem; }
  .province-category-panel-heading { align-items:flex-start; flex-direction:column; gap:3px; }
  .province-culture-grid { grid-template-columns:1fr; gap:13px; }
  .province-culture-card { min-height:440px; }
  .province-culture-copy h3 { font-size:1rem; }
  .province-culture-copy p { font-size:.95rem; line-height:1.55; }
  .province-culture-copy .province-culture-origin { font-size:.85rem; }
  .province-card-cta { font-size:.9rem; }
  .province-culture-art { aspect-ratio:16/9; }
  .province-info-grid { grid-template-columns:1fr; }
  .gallery-carousel-viewport { overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; scroll-behavior:auto; touch-action:pan-x; }
  .gallery-carousel-viewport::-webkit-scrollbar { display:none; }
  .gallery-carousel-track { display:flex; width:max-content; }
  .gallery-grid, .province-gallery-grid, .detail-media-grid { display:flex; width:max-content; flex:none; align-items:flex-start; gap:14px; margin:0; padding-right:14px; }
  .gallery-item, .province-gallery-item, .detail-media-item { display:flex; flex:0 0 clamp(220px,78vw,320px); flex-direction:column; }
  .province-gallery .province-gallery-item { flex-basis:clamp(280px,88vw,390px); height:310px; }
  .province-gallery-item .media-lightbox-trigger { aspect-ratio:16/9; }
  .province-gallery-item img, .province-gallery-placeholder { aspect-ratio:16/9; }
  .gallery-copy { padding:12px; }
  .gallery-image, .gallery-image img { height:auto; aspect-ratio:3/4; object-fit:cover; object-position:center; background:var(--light); }
  .gallery-item > .gallery-image, .detail-media-item .media-lightbox-trigger { width:100%; height:auto; aspect-ratio:3/4; align-self:stretch; }
  .detail-media-item img, .detail-media-item video { max-height:none; aspect-ratio:3/4; object-fit:cover; object-position:center; background:var(--light); }
  .detail-media-item { padding:0; }
  .detail-media-item > p, .detail-media-item > .media-attribution { margin-right:12px; margin-left:12px; }
  .gallery-item > .media-unavailable, .detail-media-item > .media-unavailable { min-height:0; aspect-ratio:3/4; }
  .province-gallery-item > .media-unavailable { min-height:0; aspect-ratio:16/9; }
  .province-page-content { padding-top:34px; padding-bottom:48px; }
  .source-row { align-items:flex-start; flex-direction:column; gap:8px; }
  .detail-sources li { align-items:flex-start; flex-direction:column; gap:6px; }
  .about-body { grid-template-columns:1fr; gap:24px; }
  .about-visual-archive { min-height:280px; padding:24px; }
  .cover-credit { font-size:.72rem; }
  .map-container { height:clamp(150px,39vw,180px); min-height:150px; }
  .admin-content-form, .admin-fieldset { grid-template-columns:1fr; padding:14px; }
  .admin-fieldset, .admin-form-actions { grid-column:1; }
  .admin-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-title h1 { font-size: 1.8rem; }
  .page-header h1 { font-size: 1.8rem; }
  .hero h1 { font-size: 1.8rem; }
  .section-head h2 { font-size: 1.5rem; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input, .filter-bar select { width: 100%; }
}

@media (max-width: 420px) {
  .admin-sidebar { padding:10px; }
  .admin-sidebar ~ .container { padding-left:12px; padding-right:12px; }
  .admin-kpi-grid { grid-template-columns:1fr; }
  .admin-kpi { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .admin-kpi strong { margin-top:0; text-align:right; }
  .admin-content-title h1 { font-size:1.6rem; overflow-wrap:anywhere; }
  .admin-content-form { padding:12px; }
}

/* ============ NUSANTARA DESIGN SYSTEM ============ */
:root {
  --paper:#eef4f2;
  --surface:#fbfdfc;
  --light:#e7efec;
  --border:#d1ddd8;
  --dark:#202d28;
  --gray:#68746e;
  --forest:#183d32;
  --forest-soft:#e3eeea;
  --primary:#183d32;
  --primary-dark:#12352e;
  --accent:#398b83;
  --gold:#edbd4e;
  --clay:#9e4635;
  --radius:6px;
  --radius-sm:4px;
  --shadow:0 3px 12px rgba(25,42,34,.07);
  --shadow-lg:0 10px 26px rgba(25,42,34,.13);
  --display:'Palatino Linotype','Book Antiqua',Georgia,serif;
}

/* The supplied landscape sits behind every route; its warm veil keeps page text legible. */
body {
  background-color:#eee8db;
  background-image:linear-gradient(rgba(250,247,239,.34),rgba(250,247,239,.34)),url('../image/latar-utama-global.jpg');
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  color:var(--dark);
  font-family:'Trebuchet MS','Segoe UI',sans-serif;
}
h1, h2, .hero h1, .page-header h1, .province-hero h1, .about-hero h1, .detail-title h1 { font-family:var(--display); }
.container { max-width:1480px; }
.navbar { background:rgba(251,253,252,.97); border-color:var(--border); box-shadow:0 2px 10px rgba(25,42,34,.04); }
.nav-wrap { min-height:72px; }
.nav-menu { gap:clamp(12px,1.7vw,24px); }
.nav-menu > a:not(.nav-account-action) { position:relative; padding:24px 0; }
.nav-menu > a:not(.nav-account-action)::after { position:absolute; right:0; bottom:16px; left:0; height:2px; background:var(--primary); content:''; transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
.nav-menu > a:not(.nav-account-action):hover::after, .nav-menu > a:not(.nav-account-action).active::after { transform:scaleX(1); }
.logo { font-family:var(--display); }
.btn { border-radius:4px; font-weight:700; }
.btn-primary { box-shadow:0 3px 0 color-mix(in srgb,var(--primary-dark) 75%,transparent); }
.btn-primary:hover { transform:translateY(-1px); }
.btn-outline { border-width:1px; }
.hero { min-height:540px; }
.hero h1 { max-width:700px; font-size:3.35rem; line-height:1.08; }
.hero p { max-width:600px; }
.badge { border-radius:3px; box-shadow:none; }
.home-page main { background:transparent; }
.home-page .hero { background-image:linear-gradient(90deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.32) 55%,rgba(0,0,0,.18) 100%),url('../image/background-hero.jpg'); }
.home-page .section-alt { background-color:rgba(251,253,252,.88); border-color:rgba(24,61,50,.13); }
.home-page .stat-card { border-top:2px solid var(--accent); border-radius:4px; background:rgba(251,253,252,.96); }
.stat-num { font-family:var(--display); }
.section { padding:68px 0; }
.section-head { margin-bottom:34px; }
.section-head h2 { font-size:2.15rem; line-height:1.15; }
.page-header { position:relative; isolation:isolate; overflow:hidden; padding:28px 0; border-bottom:3px solid var(--accent); background:var(--forest); color:#fffdf8; }
.page-header::after { position:absolute; z-index:-1; top:0; right:0; bottom:0; width:min(38vw,460px); background:repeating-linear-gradient(45deg,transparent 0 22px,rgba(255,255,255,.075) 22px 23px,transparent 23px 46px),repeating-linear-gradient(-45deg,transparent 0 22px,rgba(143,200,190,.16) 22px 23px,transparent 23px 46px); content:''; }
.page-header .container { position:relative; z-index:1; }
.page-header h1 { margin-bottom:5px; font-size:2.4rem; line-height:1.1; }
.page-header p { max-width:660px; color:rgba(255,253,248,.78); }
.filter-bar { gap:10px; padding:14px 0; border-block:1px solid var(--border); border-radius:0; background:transparent; }
.filter-bar input, .filter-bar select, .admin-content-form input, .admin-content-form select, .admin-content-form textarea { border-color:#cddbd6; border-radius:4px; background:var(--surface); color:var(--dark); }
.filter-bar input:focus, .filter-bar select:focus, .admin-content-form input:focus, .admin-content-form select:focus, .admin-content-form textarea:focus, .auth-box input:focus { outline:3px solid rgba(24,61,50,.16); outline-offset:1px; border-color:var(--forest); }
.chip { border-radius:4px; }
.chip.active { background:var(--forest); border-color:var(--forest); }
.result-info { color:var(--gray); }
.card { border:1px solid var(--border); border-radius:4px; background:var(--surface); box-shadow:0 2px 8px rgba(25,42,34,.055); }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.card-body h3 { font-size:1.16rem; }
.card-badge, .card-badge-sm { border-radius:3px; }
.card-badge-sm { background:var(--forest-soft); color:var(--forest); }
.category-tile { border-color:var(--border); border-radius:4px; background:var(--surface); }
.category-tile:hover { background:var(--forest-soft); }
.map-container, .map-full { border:1px solid var(--border); border-radius:4px; box-shadow:var(--shadow); }
.leaflet-control-attribution { max-width:calc(100% - 10px); padding:3px 6px; border-radius:3px; background:rgba(251,253,252,.88); color:#40554e; font-size:.58rem; line-height:1.25; white-space:nowrap; }
.leaflet-control-attribution a { color:var(--forest); }
.province-hero { background-color:var(--forest); }
.province-category-sticky { border-color:var(--border); background:rgba(245,250,248,.97); }
.detail-wrap { max-width:1120px; }
.culture-story-page .detail-title { border-color:var(--border); border-top-color:var(--primary); border-radius:4px; background:var(--surface); box-shadow:var(--shadow); }
.culture-story-page .detail-map-section { border-radius:4px; background:var(--surface); box-shadow:var(--shadow); }
.detail-media-item, .gallery-item, .detail-sources { border-color:var(--border); border-radius:4px; background:var(--surface); }
@media (min-width:701px) { .detail-media-item { padding:10px; } }
.gallery-copy { padding:18px; }
.detail-sources { padding:22px; }
.admin-sidebar { background:var(--forest); }
.admin-nav-home:hover, .admin-nav-group summary:hover, .admin-nav-home.active { background:#285445; }
.admin-nav-children a:hover, .admin-nav-children a.active { border-left-color:var(--accent); }
.admin-content-form { border-color:var(--border); border-radius:4px; background:var(--light); }
.admin-fieldset { border-color:var(--border); border-radius:4px; }
.admin-panel, .admin-kpi { border-color:var(--border); border-radius:4px; background:var(--surface); box-shadow:var(--shadow); }
.admin-kpi { border-top:2px solid var(--accent); }
.admin-data-table { border:1px solid var(--border); border-radius:4px; background:var(--surface); }
.admin-data-table th { background:var(--light); color:var(--forest); }
.admin-data-table td { color:var(--dark); }
.admin-data-table tr:last-child td { border-bottom:0; }
.admin-alert, .auth-error, .err { border:1px solid #e8c2b8; border-radius:4px; background:#fbefeb; color:#752d24; }
.admin-notice, .auth-success, .ok { border:1px solid #c4d6c8; border-radius:4px; background:#edf4ec; color:#244f3e; }
.admin-sidebar ~ .container { min-height:100vh; background:transparent; }
@media (max-width:900px) {
  .footer { padding:32px 0 14px; }
  .footer-content { grid-template-columns:1fr 1fr; row-gap:26px; }
  .footer-content > * { padding:0 18px; }
  .footer-content > :first-child { grid-column:1 / -1; padding:0 0 22px; border-bottom:1px solid rgba(201,155,54,.42); }
  .footer-content > :nth-child(2) { padding-left:0; border-left:0; }
  .footer-content > :nth-child(3) { padding-right:0; }
  .footer-dedication { margin-top:30px; }
}
@media (max-width:700px) {
  .footer { padding:28px 0 12px; }
  .footer-dedication-label { gap:12px; font-size:.65rem !important; letter-spacing:.13em; }
}
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(rgba(250,247,239,.48),rgba(250,247,239,.48)); }
.auth-box { width:min(100%,460px); padding:36px; border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:4px; background:var(--surface); box-shadow:0 14px 36px rgba(25,42,34,.12); }
.auth-box h1 { margin-bottom:8px; color:var(--forest); font:700 1.8rem/1.2 var(--display); }
.auth-box .auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:20px; color:var(--forest); font:700 1.2rem/1.2 var(--display); text-decoration:none; }
.auth-box .auth-brand img { width:44px; height:44px; flex:none; object-fit:contain; }
.auth-box h1.auth-brand { margin-bottom:8px; font-size:1.8rem; }
.auth-box p { margin:0 0 18px; color:var(--gray); }
.auth-box .sub { margin-bottom:22px; font-size:.9rem; }
.auth-box label { display:block; margin:14px 0 6px; color:var(--dark); font-size:.9rem; font-weight:700; }
.auth-box input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--dark); font:inherit; }
.auth-box .btn { width:100%; margin-top:16px; }
.auth-links { display:flex; justify-content:space-between; gap:12px; margin-top:18px; font-size:.86rem; }
.auth-links a, .auth-box .link a { color:var(--forest); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.auth-box .link { margin:14px 0 0; text-align:center; font-size:.86rem; }
.auth-message, .info, .msg { margin:12px 0; padding:12px; border:1px solid var(--border); border-radius:4px; font-size:.9rem; }
.info { background:#edf2f5; color:#334f5f; }
.culture-card-category-text, .province-culture-category-text { background:var(--forest-soft); color:var(--forest); }
.province-info-entry + .province-info-entry { border-top-color:#cbd9d4; }
.province-gallery-placeholder, .province-culture-art { background:#e5efec; }
.detail-multimedia { border-left-color:var(--accent); background:#eaf2ef; }
.culture-story-page .detail-map-section { background:rgba(251,253,252,.94); }

/* The reference uses an image-first card, category glyphs, and the site's forest/sage palette with its display/body type pairing for readable story sections. */
.culture-story-page main {
  background-color:#f1f6f4;
  background-image:none;
}
.culture-story-page .detail-wrap {
  width:100%;
  max-width:900px;
  padding:20px clamp(12px,3vw,28px) 48px;
}
.detail-content-card a:focus-visible, .detail-content-card button:focus-visible {
  outline:3px solid #398b83;
  outline-offset:3px;
}
.detail-content-card {
  min-width:0;
  overflow:hidden;
  border:1px solid #d1ddd8;
  border-radius:6px;
  background:#fbfdfc;
}
.culture-story-page .detail-hero {
  display:grid;
  place-items:center;
  margin:12px 12px 0;
  aspect-ratio:16/9;
  border:0;
  border-radius:5px;
  background:#e7efec;
}
.culture-story-page .detail-hero button {
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
}
/* Keep source photos intact instead of cropping instruments and other close-up subjects. */
.culture-story-page .detail-hero img { display:block; width:100%; height:100%; object-fit:contain; }
.detail-content-body { min-width:0; padding:12px; }
.culture-story-page .detail-title {
  margin:0;
  padding:0 0 14px;
  border:0;
  background:transparent;
  box-shadow:none;
}
.detail-category-tags { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 8px; }
.detail-category-tag {
  display:inline-flex;
  min-height:28px;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  background:#e3eeea;
  color:#23483b;
  font-size:.72rem;
  font-weight:700;
  line-height:1.25;
}
.detail-category-tag svg { width:14px; height:14px; flex:none; fill:currentColor; }
.detail-category-tag .detail-category-icon { display:inline-flex; flex:none; width:14px; height:14px; }
.detail-category-tag .culture-category-icon { width:14px; height:14px; }
.culture-story-page .detail-title h1 {
  margin:0 0 5px;
  color:#183d32;
  font-size:clamp(2rem,5vw,2.65rem);
  line-height:1.12;
  overflow-wrap:anywhere;
}
.detail-story-origin, .detail-heritage-status {
  margin:0;
  color:#52635d;
  font-size:.84rem;
  line-height:1.55;
}
.detail-story-origin { display:flex; align-items:center; gap:5px; }
.detail-story-origin svg { width:14px; height:14px; flex:none; fill:#537b72; }
.detail-heritage-status { margin-top:5px; }
.detail-media-rights {
  gap:4px 14px;
  margin:8px 12px 0;
  color:#52635d;
}
.detail-media-rights a { color:#8e211d; }
.culture-story-page .detail-content-card .detail-section {
  min-width:0;
  margin:0;
  padding:15px 0;
  border-top:1px solid #dce6e2;
}
.culture-story-page .detail-content-card .detail-section h2 {
  margin:0 0 7px;
  color:#23483b;
  font-size:1rem;
  line-height:1.35;
}
.culture-story-page .detail-content-card .detail-section p {
  margin:0;
  color:#52635d;
  font-size:.94rem;
  line-height:1.7;
  text-align:justify;
  overflow-wrap:anywhere;
}
.culture-story-page .detail-content-card .detail-section p + p { margin-top:9px; }
.culture-story-page .detail-content-card .detail-gallery {
  padding-top:15px;
}
.culture-story-page .detail-content-card .detail-gallery h2 { margin-bottom:10px; }
.culture-story-page .detail-content-card .gallery-carousel { min-width:0; }
.culture-story-page .detail-content-card .detail-media-grid { grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); }
.culture-story-page .detail-content-card .detail-media-item {
  min-width:0;
  padding:8px;
  border-color:#d1ddd8;
  border-radius:4px;
  background:#f1f6f4;
}
.culture-story-page .detail-content-card .detail-media-item p { margin-top:8px; font-size:.82rem; }
.culture-story-page .detail-content-card .detail-sources {
  padding:15px 0;
  border:0;
  border-top:1px solid #dce6e2;
  border-radius:0;
  background:transparent;
  text-align:left;
}
.culture-story-page .detail-content-card .detail-sources h2 {
  margin:0 0 7px;
  color:#52635d;
  font-size:.78rem;
  font-weight:700;
}
.culture-story-page .detail-content-card .detail-sources li {
  align-items:flex-start;
  flex-wrap:wrap;
  gap:6px 14px;
  border-color:#dce6e2;
}
.culture-story-page .detail-content-card .detail-sources li a { color:#8e211d; white-space:normal; overflow-wrap:anywhere; }
body.culture-story-embed .detail-wrap { padding-top:12px; }

@media (max-width:700px) {
  .culture-story-page .detail-wrap { padding:12px 12px 32px; }
  .culture-story-page .detail-hero { margin:10px 10px 0; }
  .detail-content-body { padding:10px; }
  .culture-story-page .detail-content-card .detail-media-grid { display:flex; width:max-content; }
  .culture-story-page .detail-content-card .detail-media-item { flex:0 0 clamp(220px,78vw,320px); }
}
.culture-story-page .detail-content-card .scroll-reveal {
  opacity:1;
  transform:none;
  transition:none;
}

/* Reveal sections once as a reading cue; unsupported and reduced-motion cases stay fully visible. */
.scroll-reveal { opacity:0; transform:translateY(22px); transition:opacity .62s ease,transform .62s cubic-bezier(.2,.75,.25,1); transition-delay:var(--reveal-delay,0ms); }
.scroll-reveal.is-visible { opacity:1; transform:none; }
.card-grid > .card.scroll-reveal, .category-grid > .category-tile.scroll-reveal, .province-category-grid > .province-category-card.scroll-reveal, .province-culture-grid > .province-culture-card.scroll-reveal, .gallery-grid > .gallery-item.scroll-reveal { will-change:opacity,transform; }
.card-grid > .card.scroll-reveal.is-visible, .category-grid > .category-tile.scroll-reveal.is-visible, .province-category-grid > .province-category-card.scroll-reveal.is-visible, .province-culture-grid > .province-culture-card.scroll-reveal.is-visible, .gallery-grid > .gallery-item.scroll-reveal.is-visible { will-change:auto; }
.home-page .card:hover, .category-tile:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card-img img, .gallery-image img, .province-culture-art img { transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .3s ease; }
.card:hover .card-img img, .gallery-item:hover .gallery-image img { transform:scale(1.045); filter:saturate(1.08); }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .home-page .hero-copy > *, .scroll-reveal { animation:none; opacity:1; transform:none; transition:none; }
  .card, .card-img img, .gallery-image img, .province-culture-card, .province-culture-art img, .category-tile, .btn { transition:none; }
  .home-page .card:hover, .category-tile:hover { transform:none; }
}

@media (max-width:900px) {
  .nav-menu { gap:10px; }
  .page-header { padding:24px 0; }
  .page-header h1 { font-size:2.15rem; }
}
@media (max-width:700px) {
  .nav-menu > a:not(.nav-account-action) { padding:8px 0; }
  .nav-menu > a:not(.nav-account-action)::after { bottom:3px; }
  .home-featured-more { justify-content:flex-end; margin-top:14px; }
  .home-featured-more .btn { width:auto; min-height:44px; padding:10px 15px; font-size:.85rem; }
  .hero h1 { font-size:2.25rem; }
  .page-header { padding:16px 0; }
  .page-header h1 { font-size:1.65rem; }
  .section { padding:48px 0; }
  .section-head h2 { font-size:1.65rem; }
  .filter-bar { padding:14px 0; }
  .suku-summary-text { -webkit-line-clamp:3; line-clamp:3; }
  .auth-box { padding:26px 22px; }
  .auth-links { flex-wrap:wrap; }
}

.jelajah-page {
  --jelajah-paper:#f1f6f4;
  --jelajah-green:#176b52;
  --jelajah-ink:#18392f;
  --jelajah-muted:#536b61;
  --jelajah-line:#d5e1dc;
  width:100%;
  max-width:none;
  margin:0;
  padding:24px max(18px,calc((100vw - 1440px)/2)) 42px;
  background:var(--jelajah-paper);
  color:var(--jelajah-ink);
}
.jelajah-collections {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}
.jelajah-collection {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:74px;
  padding:13px 17px;
  border:1px solid var(--jelajah-line);
  border-radius:10px;
  background:#fff;
  color:var(--jelajah-ink);
  transition:background-color .16s ease,border-color .16s ease;
}
.jelajah-collection:hover { border-color:var(--jelajah-green); }
.jelajah-collection.is-active { border-color:var(--jelajah-green); background:var(--jelajah-green); color:#fff; }
.jelajah-collection-count {
  display:grid;
  flex:none;
  min-width:42px;
  height:42px;
  padding:0 7px;
  place-items:center;
  border-radius:9px;
  background:#edf4f0;
  color:var(--jelajah-green);
  font-size:.84rem;
  font-weight:750;
}
.jelajah-collection.is-active .jelajah-collection-count { background:rgba(255,255,255,.15); color:#fff; }
.jelajah-collection-copy { display:grid; gap:2px; min-width:0; }
.jelajah-collection-copy strong { font-size:.94rem; }
.jelajah-collection-copy small { color:var(--jelajah-muted); font-size:.76rem; line-height:1.35; }
.jelajah-collection.is-active .jelajah-collection-copy small { color:#e4f1eb; }
.jelajah-layout {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  gap:clamp(16px,2.4vw,34px);
  align-items:start;
}
.jelajah-panel {
  min-width:0;
  overflow:visible;
}
.jelajah-map-panel {
  position:sticky;
  top:88px;
  overflow:hidden;
  border:1px solid var(--jelajah-line);
  border-radius:7px;
  background:#fff;
  box-shadow:0 14px 38px rgba(24,57,47,.1);
}
.jelajah-panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:70px;
  padding:13px clamp(14px,2vw,22px);
  border-bottom:1px solid var(--jelajah-line);
  background:#fffdf8;
}
.jelajah-panel-heading h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:1.18rem; line-height:1.25; }
.jelajah-panel-heading > span { color:var(--jelajah-muted); font-size:.75rem; text-align:right; }
.jelajah-map-kicker { margin:0 0 2px; color:#8a5732; font-size:.67rem; font-weight:750; letter-spacing:.045em; }
.jelajah-map-frame { position:relative; }
.jelajah-page #map-jelajah {
  height:clamp(360px,calc(100svh - 215px),690px);
  min-height:360px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#d7e7e8;
}
.jelajah-page #map-jelajah.leaflet-container { background-color:#d7e7e8; background-image:none; }
.jelajah-map-status {
  position:absolute;
  z-index:900;
  top:50%;
  left:50%;
  max-width:calc(100% - 32px);
  padding:10px 14px;
  transform:translate(-50%,-50%);
  border:1px solid var(--jelajah-line);
  border-radius:6px;
  background:#fff;
  color:var(--jelajah-ink);
  font-size:.85rem;
  text-align:center;
  box-shadow:0 2px 8px rgba(24,57,47,.08);
}
.jelajah-map-status.is-error { color:#842424; }
.jelajah-map-note {
  min-height:42px;
  padding:10px clamp(14px,2vw,22px);
  border-top:1px solid var(--jelajah-line);
  color:var(--jelajah-muted);
  font-size:.74rem;
  line-height:1.45;
}
.jelajah-map-legend {
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:7px;
  color:#40564c;
  font-size:.72rem;
}
.jelajah-map-legend span { display:inline-flex; align-items:center; gap:6px; }
.jelajah-map-legend i {
  width:13px;
  height:13px;
  border:1px solid #78877b;
  background:#aeb5aa;
}
.jelajah-map-legend i.is-recorded { border-color:#527b5e; background:#527b5e; }
.jelajah-filters {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:15px 15px 12px;
}
.jelajah-filters label { display:block; min-width:0; }
.jelajah-filters .jelajah-search { grid-column:1/-1; }
.jelajah-filters input,
.jelajah-filters select {
  width:100%;
  min-width:0;
  min-height:44px;
  padding:9px 12px;
  border:1px solid #cbd9d3;
  border-radius:7px;
  background:#fff;
  color:var(--jelajah-ink);
  font:inherit;
  font-size:.85rem;
}
.jelajah-filters input::placeholder { color:#64766f; opacity:1; }
.jelajah-filter-actions {
  display:flex;
  grid-column:1/-1;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.jelajah-filter-actions .btn {
  min-height:44px;
  padding:10px 15px;
  border-radius:6px;
  background:var(--jelajah-green);
  font-size:.84rem;
}
.jelajah-filter-actions .btn:hover { background:#125640; transform:none; }
.jelajah-reset,.jelajah-card-link {
  color:#145942;
  font-size:.82rem;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.jelajah-collection-note {
  margin:0 15px 11px;
  padding:9px 10px;
  border-radius:5px;
  background:#eff5f2;
  color:#3e5a4e;
  font-size:.77rem;
  line-height:1.45;
}
.jelajah-results {
  display:grid;
  gap:12px;
  padding:12px;
  border-top:1px solid var(--jelajah-line);
}
.jelajah-story-card,.jelajah-culture-card {
  padding:14px 16px 15px;
  border-bottom:1px solid #e2ebe7;
}
.jelajah-culture-card {
  min-width:0;
  display:flex;
  min-height:clamp(250px,36vh,360px);
  flex-direction:column;
  justify-content:center;
  margin:0;
  padding:clamp(22px,3.2vw,42px);
  border:1px solid #d8dfd8;
  border-radius:5px;
  background:#fffdf8;
  transition:border-color .16s ease,background-color .16s ease;
}
.jelajah-culture-card:hover {
  border-color:#829683;
}
.jelajah-culture-card.is-map-active {
  border-color:#176b52;
  background:#f8fbf7;
}
.jelajah-story-card:last-child { border-bottom:0; }
.jelajah-load-more {
  display:block;
  width:calc(100% - 24px);
  min-height:44px;
  margin:12px;
  padding:9px 14px;
  border:1px solid var(--jelajah-line);
  border-radius:4px;
  background:var(--jelajah-paper);
  color:#145942;
  font:inherit;
  font-size:.84rem;
  font-weight:700;
  cursor:pointer;
}
.jelajah-load-more:hover { border-color:#829683; background:#e8efea; }
.jelajah-load-more:focus-visible { outline:3px solid #176b52; outline-offset:2px; }
.jelajah-load-more[hidden] { display:none; }
.jelajah-story-topline {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  margin-bottom:7px;
  color:var(--jelajah-muted);
  font-size:.72rem;
  line-height:1.35;
}
.jelajah-story-type {
  flex:none;
  padding:3px 7px;
  border-radius:4px;
  background:#edf4f0;
  color:#245d48;
  font-weight:700;
}
.jelajah-story-card h3,.jelajah-culture-card h3 { margin:0 0 10px; color:var(--jelajah-ink); font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.2rem,1.6vw,1.65rem); line-height:1.25; }
.jelajah-story-location { margin:0 0 5px; color:#35594a; font-size:.77rem; font-weight:650; }
.jelajah-story-summary { margin:0; color:#40564c; font-size:.82rem; line-height:1.53; }
.jelajah-reference-status { margin:8px 0 0; color:#58665c; font-size:.82rem; line-height:1.5; }
.jelajah-sources { margin-top:10px; }
.jelajah-sources summary {
  width:max-content;
  min-height:36px;
  padding:7px 0;
  color:#145942;
  cursor:pointer;
  font-size:.78rem;
  font-weight:700;
}
.jelajah-sources ul { display:grid; gap:8px; padding:0 0 0 17px; }
.jelajah-sources li { padding-left:1px; color:#40564c; font-size:.75rem; line-height:1.4; overflow-wrap:anywhere; }
.jelajah-sources li a { color:#145942; font-weight:650; text-decoration:underline; text-underline-offset:2px; }
.jelajah-sources li span { display:block; margin-top:2px; color:var(--jelajah-muted); font-size:.7rem; }
.jelajah-sources li p { margin:3px 0 0; }
.jelajah-culture-card .jelajah-card-link { display:inline-flex; align-items:center; min-height:40px; margin-top:7px; }
.jelajah-language-label { margin:0 0 7px; color:#40564c; font-size:.78rem; font-weight:700; }
.jelajah-language-provinces {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 4px;
}
.jelajah-language-province {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:7px 10px;
  border:1px solid #c5d4ca;
  border-radius:4px;
  background:#f1f6f1;
  color:#244e3b;
  font:inherit;
  font-size:.76rem;
  font-weight:650;
  cursor:pointer;
}
.jelajah-language-province:hover:not(:disabled) { border-color:#829683; background:#e5eee8; }
.jelajah-language-province:disabled { color:#58665c; cursor:wait; }
.jelajah-map-focus {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:8px;
  padding:8px 11px;
  border:1px solid #b8c9be;
  border-radius:4px;
  background:#eff5f1;
  color:#145942;
  font:inherit;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
}
.jelajah-map-focus:hover:not(:disabled) { border-color:#829683; background:#e5eee8; }
.jelajah-map-focus:focus-visible { outline:3px solid #176b52; outline-offset:2px; }
.jelajah-map-focus:disabled { color:#58665c; cursor:wait; }
.jelajah-state { padding:24px 18px; color:var(--jelajah-muted); }
.jelajah-state h3 { margin-bottom:5px; color:var(--jelajah-ink); font-size:.92rem; }
.jelajah-state p,.jelajah-limit-note { font-size:.8rem; line-height:1.45; }
.jelajah-state.is-error { color:#842424; }
.jelajah-state.is-error h3 { color:#842424; }
.jelajah-limit-note { padding:12px 15px; border-top:1px solid var(--jelajah-line); color:var(--jelajah-muted); }
.jelajah-loading { grid-column:1/-1; color:var(--jelajah-muted); font-size:.78rem; }
.jelajah-page .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.jelajah-page :where(a,button,input,select,summary):focus-visible {
  outline:3px solid #176b52;
  outline-offset:3px;
}
@media (max-width:1000px) {
  .jelajah-layout { grid-template-columns:minmax(0,1fr); gap:14px; }
  .jelajah-map-panel { position:relative; top:auto; }
  .jelajah-page #map-jelajah { height:clamp(360px,60vw,540px); min-height:360px; }
  .jelajah-results { max-height:none; }
}
@media (max-width:700px) {
  .jelajah-page { padding:18px 12px 28px; }
  .jelajah-collections { grid-template-columns:1fr; gap:8px; margin-bottom:12px; }
  .jelajah-collection { min-height:62px; padding:10px 12px; }
  .jelajah-collection-count { min-width:38px; height:38px; }
  .jelajah-panel-heading { align-items:flex-start; padding:12px; }
  .jelajah-panel-heading > span { max-width:44%; font-size:.69rem; }
  .jelajah-page #map-jelajah { height:clamp(220px,68vw,280px); min-height:220px; }
  .jelajah-filters { padding:12px; gap:8px; }
  .jelajah-filters input,.jelajah-filters select { min-height:46px; font-size:.82rem; }
  .jelajah-filter-actions .btn { flex:1 1 100%; }
  .jelajah-results { max-height:none; overflow:visible; padding:8px; }
  .jelajah-story-card,.jelajah-culture-card { padding:13px 12px; }
  .jelajah-culture-card { min-height:230px; padding:22px 18px; }
  .jelajah-page #map-jelajah { scroll-margin-top:78px; }
}
@media (max-width:420px) {
  .jelajah-filters { grid-template-columns:minmax(0,1fr); }
  .jelajah-filters .jelajah-search,.jelajah-filter-actions,.jelajah-loading { grid-column:auto; }
  .jelajah-filter-actions { align-items:stretch; }
  .jelajah-reset { padding:7px 0; }
  .jelajah-panel-heading { gap:8px; }
  .jelajah-panel-heading > span { max-width:45%; }
}
@media (prefers-reduced-motion:reduce) {
  .jelajah-collection { transition:none; }
  .jelajah-culture-card { transition:none; }
}

/* Reading-focused editorial direction: ENERGY 2 / RHYTHM 2 / MOTION 1. */
.folklore-page {
  --folklore-paper:#faf5e9;
  --folklore-ink:#263b31;
  --folklore-muted:#5b675f;
  --folklore-clay:#8d4936;
  --folklore-gold:#98713a;
  background:rgba(250,245,233,.82);
  color:var(--folklore-ink);
}
.folklore-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(320px,.82fr);
  align-items:center;
  gap:clamp(36px,7vw,112px);
  max-width:1480px;
  min-height:470px;
  margin:0 auto;
  padding:clamp(38px,6vw,86px) clamp(22px,6vw,92px);
  overflow:hidden;
}
.folklore-hero-copy { position:relative; z-index:1; min-width:0; max-width:690px; }
.folklore-eyebrow {
  margin:0 0 14px;
  color:var(--folklore-clay);
  font-size:.8rem;
  font-weight:750;
}
.folklore-hero h1 {
  max-width:680px;
  margin:0;
  color:var(--folklore-ink);
  font-family:var(--display);
  font-size:clamp(2.7rem,5.2vw,5rem);
  font-weight:600;
  line-height:1.03;
  text-wrap:balance;
}
.folklore-intro {
  max-width:600px;
  margin:20px 0 25px;
  color:#46574d;
  font-size:1.05rem;
  line-height:1.75;
}
.folklore-primary-link {
  display:inline-flex;
  min-height:46px;
  align-items:center;
  padding:10px 17px;
  border:1px solid var(--folklore-ink);
  border-radius:3px;
  background:var(--folklore-ink);
  color:#fffdf7;
  font-size:.92rem;
  font-weight:700;
}
.folklore-primary-link:hover { background:#345347; }
.folklore-hero-photo { position:relative; z-index:1; min-width:0; margin:0; }
.folklore-photo-frame {
  position:relative;
  padding:8px;
  border:1px solid var(--folklore-gold);
  background:#fffdf7;
}
.folklore-photo-frame::before {
  position:absolute;
  z-index:1;
  inset:14px;
  border:1px solid rgba(255,253,247,.78);
  content:'';
  pointer-events:none;
}
.folklore-photo-frame img {
  width:100%;
  height:auto;
  aspect-ratio:1.42;
  object-fit:cover;
  object-position:center;
}
.folklore-photo-frame [data-media-fallback] {
  display:grid;
  min-height:260px;
  place-items:center;
  padding:25px;
  background:#e9dfca;
  color:var(--folklore-ink);
  text-align:center;
}
.folklore-photo-frame [data-media-fallback][hidden] { display:none; }
.folklore-hero-photo figcaption {
  display:grid;
  gap:3px;
  margin-top:9px;
  color:#3f5046;
  font-size:.75rem;
  line-height:1.45;
}
.folklore-hero-photo figcaption a {
  width:max-content;
  max-width:100%;
  color:#514535;
  text-decoration:underline;
  text-underline-offset:2px;
  overflow-wrap:anywhere;
}
.folklore-ornament {
  position:absolute;
  top:-150px;
  right:-130px;
  width:390px;
  height:390px;
  border:1px solid rgba(141,73,54,.12);
  border-radius:50%;
  pointer-events:none;
}
.folklore-ornament::before,.folklore-ornament::after {
  position:absolute;
  inset:25px;
  border:1px solid rgba(141,73,54,.1);
  border-radius:50%;
  content:'';
}
.folklore-ornament::after { inset:51px; }
.folklore-context {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:21px clamp(22px,7vw,104px);
  border-block:1px solid #e2d9c7;
  background:#f2ead9;
}
.folklore-context p { display:grid; gap:2px; margin:0; }
.folklore-context strong { color:var(--folklore-ink); font-family:var(--display); font-size:1.16rem; }
.folklore-context p span { color:var(--folklore-muted); font-size:.82rem; }
.folklore-context > a {
  flex:none;
  color:#285a49;
  font-size:.86rem;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.folklore-catalog { max-width:1200px; margin:0 auto; padding:clamp(38px,6vw,76px) clamp(20px,4vw,54px) 80px; scroll-margin-top:90px; }
.folklore-category-section { margin-top:44px; scroll-margin-top:96px; }
.folklore-section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.folklore-section-heading .folklore-eyebrow { margin-bottom:7px; }
.folklore-section-heading h2 {
  margin:0;
  color:var(--folklore-ink);
  font-family:var(--display);
  font-size:clamp(2rem,3.4vw,3rem);
  line-height:1.1;
}
.folklore-section-heading > p { max-width:390px; margin:0 0 3px; color:var(--folklore-muted); font-size:.9rem; line-height:1.55; }
.folklore-filters {
  display:grid;
  grid-template-columns:minmax(190px,1.5fr) minmax(180px,1fr);
  gap:10px;
  padding:15px;
  border:1px solid #ded5c5;
  background:#fffdf8;
}
.folklore-filters label { display:block; min-width:0; }
.folklore-filters input,.folklore-filters select {
  width:100%;
  min-width:0;
  min-height:46px;
  padding:9px 11px;
  border:1px solid #b9c4b8;
  border-radius:3px;
  background:#fff;
  color:#283b31;
  font:inherit;
  font-size:.87rem;
}
.folklore-filters input::placeholder { color:#58675e; opacity:1; }
.folklore-filter-actions {
  display:flex;
  grid-column:1/-1;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}
.folklore-filter-actions button {
  min-height:44px;
  padding:9px 16px;
  border:1px solid var(--folklore-clay);
  border-radius:3px;
  background:var(--folklore-clay);
  color:#fff;
  font:inherit;
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
}
.folklore-filter-actions button:hover { background:#743a2b; }
.folklore-filter-actions a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:#285a49;
  font-size:.86rem;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.folklore-loading { color:var(--folklore-muted); font-size:.83rem; }
.folklore-results-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:28px 0 9px;
}
.folklore-results-heading h3 { margin:0; color:var(--folklore-ink); font-family:var(--display); font-size:1.25rem; }
.folklore-results-heading p { margin:0; color:var(--folklore-muted); font-size:.8rem; }
.folklore-story-list { border-top:1px solid #d9cfbc; }
.folklore-more-stories {
  border-bottom:1px solid #d9cfbc;
}
.folklore-more-stories:not([open]) > :not(summary) { display:none; }
.folklore-more-stories[open] > :not(summary) { display:block; }
.folklore-more-stories summary {
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  color:#285a49;
  font-size:.88rem;
  font-weight:750;
  text-align:center;
  cursor:pointer;
  list-style-position:inside;
}
.folklore-more-stories summary:hover { background:#f2ead9; color:#183d32; }
.folklore-more-stories summary:focus-visible { outline:3px solid #1c6a51; outline-offset:3px; }
.folklore-more-stories[open] summary { border-bottom:1px solid #d9cfbc; }
.folklore-more-stories[open] summary::marker { color:#8d4936; }
.folklore-story {
  display:grid;
  grid-template-columns:minmax(190px,.36fr) minmax(0,1fr);
  align-items:start;
  gap:22px;
  padding:24px 6px 23px;
  border-bottom:1px solid #d9cfbc;
}
.folklore-story-media { min-width:0; margin:0; }
.folklore-story-media img,
.folklore-cutout {
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:12px;
  background:#f3e8d4;
}
.folklore-story-media img { object-fit:cover; }
.folklore-cutout { border:1px solid #d9cfbc; }
.folklore-cutout svg { display:block; width:100%; height:100%; }
.folklore-story-media figcaption {
  display:grid;
  gap:4px;
  margin-top:7px;
  color:#45594d;
  font-size:.72rem;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.folklore-story-media figcaption[hidden],
.folklore-cutout[hidden] { display:none; }
.folklore-story-media figcaption a { color:#245843; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.folklore-story-content { min-width:0; }
.folklore-story-meta { display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; margin-bottom:8px; color:#58675e; font-size:.78rem; }
.folklore-story-meta span:first-child { color:var(--folklore-clay); font-weight:750; }
.folklore-story h3 { margin:0; color:var(--folklore-ink); font-family:var(--display); font-size:1.55rem; line-height:1.2; }
.folklore-story-provinces { margin:5px 0 0; color:#3e594b; font-size:.85rem; font-weight:650; }
.folklore-story-summary { max-width:850px; margin:11px 0 0; color:#394c41; font-size:.94rem; line-height:1.75; text-align:justify; }
.folklore-sources { margin-top:11px; }
.folklore-sources > strong { color:#285a49; font-size:.84rem; }
.folklore-sources ul { display:grid; gap:10px; max-width:820px; padding:4px 0 0 19px; }
.folklore-sources li { padding-left:2px; color:#48594e; font-size:.82rem; line-height:1.5; overflow-wrap:anywhere; }
.folklore-sources li a { color:#245843; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.folklore-sources li span { display:block; margin-top:2px; color:var(--folklore-muted); font-size:.76rem; }
.folklore-sources > p { max-width:820px; margin:7px 0 0; color:var(--folklore-muted); font-size:.8rem; line-height:1.55; }
.folklore-reference-status { margin:12px 0 0; color:#526057; font-size:.82rem; }
.folklore-state { padding:35px 8px; color:var(--folklore-muted); }
.folklore-state h3 { margin:0 0 5px; color:var(--folklore-ink); font-family:var(--display); font-size:1.45rem; }
.folklore-state p { margin:0; font-size:.9rem; line-height:1.6; }
.folklore-state.is-error h3,.folklore-state.is-error { color:#842424; }
.folklore-page :where(a,button,input,select,summary):focus-visible {
  outline:3px solid #1c6a51;
  outline-offset:3px;
}
@media (max-width:950px) {
  .folklore-hero { grid-template-columns:minmax(0,1fr) minmax(270px,.85fr); gap:32px; }
  .folklore-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .folklore-hero { grid-template-columns:minmax(0,1fr); gap:25px; min-height:0; padding:38px 20px 30px; }
  .folklore-hero h1 { max-width:100%; font-size:clamp(1.85rem,8.5vw,2.6rem); }
  .folklore-hero-copy,.folklore-hero-photo { width:100%; max-width:calc(100vw - 40px); }
  .folklore-intro { max-width:100%; margin:15px 0 19px; font-size:.96rem; overflow-wrap:anywhere; }
  .folklore-hero-photo { width:min(100%,530px); }
  .folklore-ornament { top:-145px; right:-220px; }
  .folklore-context { align-items:flex-start; flex-direction:column; padding:18px 20px; }
  .folklore-catalog { padding:38px 18px 54px; }
  .folklore-category-section { margin-top:34px; }
  .folklore-section-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .folklore-filters { grid-template-columns:minmax(0,1fr); padding:12px; }
  .folklore-filter-actions { grid-column:auto; }
  .folklore-filter-actions { align-items:stretch; }
  .folklore-filter-actions button { flex:1 1 100%; }
  .folklore-results-heading { align-items:flex-start; flex-direction:column; gap:3px; }
  .folklore-story { grid-template-columns:minmax(0,1fr); gap:14px; padding:20px 2px; }
  .folklore-story-media { width:min(100%,480px); }
  .folklore-story h3 { font-size:1.35rem; }
  .folklore-story-summary { font-size:.9rem; }
}

.navbar { border-bottom:1px solid rgba(24,61,50,.12); background:rgba(251,253,252,.98); box-shadow:0 4px 18px rgba(24,61,50,.06); }
.nav-wrap { position:relative; height:76px; }
.logo { gap:10px; color:var(--forest); font-size:1.25rem; }
.navbar .logo > img { width:54px; height:54px; flex:none; object-fit:contain; }
.logo > span { display:inline-flex; align-items:baseline; gap:3px; }
.logo strong { color:var(--primary); font-weight:800; }
.nav-menu { gap:clamp(8px,1.15vw,18px); }
.nav-menu > a:not(.nav-account-action) { display:inline-flex; align-items:center; min-height:44px; padding:8px 3px; color:#49635a; font-size:.88rem; font-weight:650; }
.nav-menu > a:not(.nav-account-action)::after { right:3px; bottom:7px; left:3px; height:2px; background:var(--accent); }
.nav-menu > a:not(.nav-account-action):hover, .nav-menu > a:not(.nav-account-action).active { color:var(--forest); }
.nav-menu a.nav-account-action { min-height:44px; padding:9px 15px; border-radius:4px; font-size:.86rem; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.nav-menu button.nav-account-action { min-height:44px; padding:9px 15px; border-radius:4px; font-size:.86rem; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.nav-menu a.nav-account-login { box-shadow:0 2px 0 rgba(114,30,25,.25); }
.nav-menu a.nav-account-login:hover { transform:translateY(-1px); }
.nav-menu a.nav-account-logout { background:var(--surface); }
.nav-menu a.nav-account-logout:hover { background:var(--forest-soft); border-color:var(--forest); color:var(--forest); }
.nav-menu button.nav-account-logout:hover { background:var(--forest-soft); border-color:var(--forest); color:var(--forest); }
.nav-hamburger { display:none; position:relative; z-index:1001; width:44px; height:44px; place-items:center; padding:0; border:1px solid var(--border); border-radius:5px; background:var(--surface); color:var(--forest); cursor:pointer; }
.nav-hamburger span, .nav-hamburger::before, .nav-hamburger::after { position:absolute; display:block; width:18px; height:2px; border-radius:2px; background:currentColor; content:''; transition:transform .2s ease,opacity .16s ease; }
.nav-hamburger span { transform:translateY(0); }
.nav-hamburger::before { transform:translateY(-6px); }
.nav-hamburger::after { transform:translateY(6px); }
.nav-hamburger[aria-expanded="true"] span { opacity:0; }
.nav-hamburger[aria-expanded="true"]::before { transform:rotate(45deg); }
.nav-hamburger[aria-expanded="true"]::after { transform:rotate(-45deg); }

@media (max-width:900px) {
  .nav-wrap { height:70px; }
  .nav-hamburger { display:grid; }
  .nav-menu { position:absolute; top:calc(100% + 1px); right:0; left:0; z-index:999; display:flex; flex-direction:column; align-items:stretch; gap:3px; padding:12px; border:1px solid var(--border); background:var(--surface); box-shadow:0 12px 24px rgba(24,61,50,.12); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity .18s ease,transform .18s ease,visibility .18s ease; }
  .nav-menu.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  .nav-menu > a:not(.nav-account-action) { align-self:stretch; min-height:44px; padding:10px 12px; }
  .nav-menu > a:not(.nav-account-action)::after { right:12px; bottom:4px; left:12px; }
  .nav-menu a.nav-account-action { justify-content:center; }
  .nav-menu .nav-account-form { width:100%; }
  .nav-menu button.nav-account-action { width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce) {
  .nav-menu, .nav-hamburger, .nav-hamburger span, .nav-hamburger::before, .nav-hamburger::after, .nav-menu a.nav-account-action, .nav-menu button.nav-account-action { transition:none; }
  .province-hero-slide { transition:none; }
  .province-hero-slide.is-active { animation:none; }
}

/* Sorotan memakai satu jalur geser di semua ukuran layar agar kartu tetap mudah dijelajahi. */
.home-featured-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
  text-align:left;
}
.home-featured-head h2 {
  margin:0;
  color:#183d32;
  font-size:clamp(1.7rem,3vw,2.15rem);
}
.home-featured-head p {
  max-width:440px;
  margin:0 0 4px;
  color:#52635d;
  text-align:right;
}
.home-page .home-featured-viewport {
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 2px 10px;
  overscroll-behavior-inline:contain;
  scroll-snap-type:none;
  scrollbar-width:none;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.home-page .home-featured-viewport.is-dragging {
  cursor:grabbing;
  user-select:none;
}
.home-page .home-featured-viewport::-webkit-scrollbar { display:none; }
.home-page .home-featured-track,
.home-page .home-featured-group {
  min-width:0;
}
.home-page .home-featured-track {
  display:flex;
  width:max-content;
}
.home-page .home-featured-group {
  flex:none;
  padding-right:16px;
}
.home-page .home-featured-group .card-grid {
  display:flex;
  width:max-content;
  gap:16px;
}
.home-page .home-featured-card {
  flex:0 0 clamp(240px,22vw,300px);
  min-width:0;
  scroll-snap-align:start;
}
.home-page .home-featured-card .culture-record-art { aspect-ratio:4/3; }
.home-page .home-featured-card .culture-record-copy { padding:16px 18px 18px; }
.home-page .home-featured-card .culture-record-copy h3 { margin-bottom:7px; font-size:1.12rem; line-height:1.3; }
.home-page .home-featured-card .culture-record-copy > p:not(.home-featured-origin) {
  min-height:0;
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  font-size:.88rem;
  line-height:1.5;
}
.home-page .home-featured-cta { align-self:flex-start; margin-top:auto; }
.home-page .home-featured-content {
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
  color:inherit;
  text-decoration:none;
}
.home-featured-empty {
  padding:18px;
  border:1px solid #d1ddd8;
  background:#fbfdfc;
  color:#40554d;
}

@media (max-width:900px) {
  .home-page .home-featured-card { flex-basis:clamp(240px,34vw,300px); }
}

@media (max-width:700px) {
  .home-page .home-featured-head {
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
    margin-bottom:18px;
  }
  .home-page .home-featured-head p { text-align:left; }
  .home-page .home-featured-viewport {
    margin-inline:-18px;
    padding:0 18px 8px;
  }
  .home-page .home-featured-group { padding-right:18px; }
  .home-page .home-featured-group .card-grid { gap:14px; }
  .home-page .home-featured-card { flex-basis:min(64vw,250px); }
}

.home-featured-origin {
  display:-webkit-box;
  min-height:2.9em;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  margin:0 0 8px;
  color:#263c31;
  font-size:14px;
  font-weight:400;
  line-height:1.45;
}
.home-featured-source {
  min-height:0;
  margin:8px 0 0;
  color:#263c31;
  font-size:14px;
  line-height:1.45;
}
.home-featured-source a { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.home-featured-source a:hover { color:var(--primary-dark); }

@media (max-width:700px) {
  html { font-size:15px; }
  body { font-size:.95rem; line-height:1.6; }
  .hero h1 { font-size:2rem; line-height:1.12; }
  .page-header h1 { font-size:1.5rem; }
  .section-head h2, .home-featured-head h2 { font-size:1.5rem; }
  .about-hero h1 { font-size:clamp(1.9rem,8vw,2.4rem); }
  .about-body article h2 { font-size:1.45rem; }
  .province-hero h1 { font-size:1.9rem; }
  .province-section-heading h2 { font-size:1.3rem; }
  .detail-title h1 { font-size:1.65rem; }
  .card-body h3, .culture-record-copy h3, .province-culture-copy h3, .gallery-copy h2,
  .culture-card-rows .card-body h3, .culture-card-row .culture-record-copy h3 {
    font-size:1.1rem;
    line-height:1.35;
  }
  .card-desc, .culture-card-rows .card-desc, .culture-card-row .card-desc, .gallery-copy p,
  .culture-record-copy > p:not(.province-culture-origin):not(.card-media-credit):not(.culture-record-origin):not(.culture-record-source),
  .province-culture-copy > p:not(.province-culture-origin):not(.card-media-credit) {
    font-size:.94rem;
    line-height:1.55;
  }
  .home-featured-origin { font-size:.84rem; }
  .home-featured-origin, .home-featured-source { font-size:13px; }
  .home-page .home-featured-group .card-grid { gap:14px; }
  .home-page .home-featured-card { flex-basis:calc(100vw - 36px); }
  .home-page .home-featured-card .culture-record-art { aspect-ratio:4/3; }
  .home-page .home-featured-card .culture-record-copy { padding:16px 18px 18px; }
  .home-page .home-featured-card .culture-record-copy h3 { font-size:1.18rem; }
  .home-page .home-featured-card .culture-record-copy > p:not(.home-featured-origin) { font-size:.9rem; }
  .home-page .home-featured-cta { min-height:44px; padding:9px 14px; }
}

/* Typography follows the requested device scale while preserving the existing layout and visual identity. */
.logo { font-size:24px; }
.logo img { width:24px; height:24px; }
.nav-menu a:not(.nav-account-action), .nav-menu a.nav-account-action { font-size:16px; }
.hero h1, .province-hero h1 { font-size:60px; }
.hero p, .province-hero-lede, .province-hero-description { font-size:19px; }
.btn, .btn-sm, .home-featured-more .btn, .culture-card-row .card-actions .btn { font-size:16px; }
.section-head h2, .home-featured-head h2, .province-section-heading h2 { font-size:36px; }
.section-head p, .home-featured-head p, .province-section-heading > p { font-size:18px; }
.card-body h3, .culture-card-rows .card-body h3, .home-featured-group .card-body h3,
.culture-record-copy h3, .culture-card-row .culture-record-copy h3, .province-culture-copy h3,
.gallery-copy h2 { font-size:20px; }
.card-desc, .culture-card-rows .card-desc, .home-featured-group .card-desc,
.culture-card-row .card-desc, .gallery-copy p,
.culture-record-copy > p:not(.province-culture-origin):not(.card-media-credit):not(.culture-record-origin):not(.culture-record-source),
.province-culture-copy > p:not(.province-culture-origin):not(.card-media-credit) { font-size:15px; }
.stat-num { font-size:40px; }
.stat-label { font-size:15px; }
.detail-title h1, .culture-story-page .detail-title h1 { font-size:44px; }
.detail-section p, .culture-story-page .detail-content-card .detail-section p { font-size:17px; }
.detail-story-origin, .detail-heritage-status, .detail-media-rights, .detail-category-tag,
.province-culture-copy .province-culture-origin, .culture-record-copy .province-culture-origin,
.culture-record-copy .culture-record-location, .province-culture-copy .card-media-credit,
.culture-record-copy .card-media-credit { font-size:14px; }
.province-info-entry p { font-size:17px; }

@media (min-width:701px) and (max-width:900px) {
  .logo { font-size:22px; }
  .logo img { width:22px; height:22px; }
  .nav-menu a:not(.nav-account-action), .nav-menu a.nav-account-action { font-size:15px; }
  .hero h1, .province-hero h1 { font-size:46px; }
  .hero p, .province-hero-lede, .province-hero-description { font-size:17px; }
  .btn, .btn-sm, .home-featured-more .btn, .culture-card-row .card-actions .btn { font-size:15px; }
  .section-head h2, .home-featured-head h2, .province-section-heading h2 { font-size:30px; }
  .section-head p, .home-featured-head p, .province-section-heading > p { font-size:17px; }
  .card-body h3, .culture-card-rows .card-body h3, .home-featured-group .card-body h3,
  .culture-record-copy h3, .culture-card-row .culture-record-copy h3, .province-culture-copy h3,
  .gallery-copy h2 { font-size:19px; }
  .card-desc, .culture-card-rows .card-desc, .home-featured-group .card-desc,
  .culture-card-row .card-desc, .gallery-copy p,
  .culture-record-copy > p:not(.province-culture-origin):not(.card-media-credit):not(.culture-record-origin):not(.culture-record-source),
  .province-culture-copy > p:not(.province-culture-origin):not(.card-media-credit) { font-size:15px; }
  .stat-num { font-size:34px; }
  .stat-label { font-size:14px; }
  .detail-title h1, .culture-story-page .detail-title h1 { font-size:36px; }
  .detail-section p, .culture-story-page .detail-content-card .detail-section p { font-size:16px; }
  .detail-story-origin, .detail-heritage-status, .detail-media-rights, .detail-category-tag,
  .province-culture-copy .province-culture-origin, .culture-record-copy .province-culture-origin,
  .culture-record-copy .culture-record-location, .province-culture-copy .card-media-credit,
  .culture-record-copy .card-media-credit { font-size:14px; }
  .province-info-entry p { font-size:16px; }
}

@media (max-width:700px) {
  .culture-detail-dialog { inset:0; width:100%; height:100%; max-height:none; border:0; border-radius:0; }
  .culture-detail-close { top:env(safe-area-inset-top,0px); margin-top:calc(12px + env(safe-area-inset-top,0px)); }
  .culture-detail-hero { aspect-ratio:16/9; }
  .culture-detail-main { padding:22px 16px 17px; }
  .culture-detail-main h2 { font-size:1.55rem; }
  .culture-detail-fields, .culture-detail-sources, .culture-detail-related, .culture-detail-media { margin-right:12px; margin-left:12px; padding:15px; }
  .culture-detail-related-grid { gap:8px; }
  .culture-detail-related-card { flex-basis:clamp(240px,78vw,300px); }
  .culture-detail-related-card strong, .culture-detail-related-card span { margin-right:8px; margin-left:8px; }
  .logo { font-size:20px; }
  .logo img { width:20px; height:20px; }
  .nav-menu a:not(.nav-account-action), .nav-menu a.nav-account-action { font-size:15px; }
  .hero h1, .province-hero h1 { font-size:36px; }
  .hero p, .province-hero-lede, .province-hero-description { font-size:16px; }
  .btn, .btn-sm, .home-featured-more .btn, .culture-card-row .card-actions .btn { font-size:15px; }
  .section-head h2, .home-featured-head h2, .province-section-heading h2 { font-size:26px; }
  .section-head p, .home-featured-head p, .province-section-heading > p { font-size:16px; }
  .card-body h3, .culture-card-rows .card-body h3, .home-featured-group .card-body h3,
  .culture-record-copy h3, .culture-card-row .culture-record-copy h3, .province-culture-copy h3,
  .gallery-copy h2 { font-size:18px; }
  .card-desc, .culture-card-rows .card-desc, .home-featured-group .card-desc,
  .culture-card-row .card-desc, .gallery-copy p,
  .culture-record-copy > p:not(.province-culture-origin):not(.card-media-credit):not(.culture-record-origin):not(.culture-record-source),
  .province-culture-copy > p:not(.province-culture-origin):not(.card-media-credit) { font-size:14px; }
  .stat-num { font-size:29px; }
  .stat-label { font-size:14px; }
  .detail-title h1, .culture-story-page .detail-title h1 { font-size:30px; }
  .detail-section p, .culture-story-page .detail-content-card .detail-section p { font-size:16px; }
  .detail-story-origin, .detail-heritage-status, .detail-media-rights, .detail-category-tag,
  .province-culture-copy .province-culture-origin, .culture-record-copy .province-culture-origin,
  .culture-record-copy .culture-record-location, .province-culture-copy .card-media-credit,
  .culture-record-copy .card-media-credit { font-size:13px; }
  .province-info-entry p { font-size:16px; }
}

.home-page .home-featured-card .culture-record-copy > .home-featured-origin,
.home-page .home-featured-card .culture-record-copy > .home-featured-source {
  min-height:0;
  font-size:14px;
}
.home-page .home-featured-card .culture-record-copy > .home-featured-origin {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  margin:0 0 8px;
}
.home-page .home-featured-card .culture-record-copy > .home-featured-source { margin:8px 0 0; }
@media (max-width:700px) {
  .home-page .home-featured-card .culture-record-copy > .home-featured-origin,
  .home-page .home-featured-card .culture-record-copy > .home-featured-source { font-size:13px; }
  .home-page .home-featured-more .btn { min-height:44px; padding:8px 10px; font-size:13px; }
}

/* The homepage follows the supplied warm editorial reference and keeps each route attached to real content. */
body.home-page { --primary:#183d32; --primary-dark:#12352e; }
.home-page main {
  background:transparent;
}

body.home-page .navbar .logo { color:#f0d49a; }
body.home-page .navbar .logo > img { width:54px; height:54px; }
body.home-page .navbar .logo strong { color:#f0d49a; }

.home-page .hero {
  min-height:clamp(460px,52vw,680px);
  padding:52px 0 42px;
  background-color:#183d32;
  background-image:url('../image/background-hero.jpg');
  background-size:120% auto;
  background-position:left bottom;
  background-repeat:no-repeat;
}
.home-page .hero::before {
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.4) 100%);
  content:"";
  pointer-events:none;
}
.home-page .hero::after { display:none; }
.home-page .hero-inner { grid-template-columns:minmax(0,1fr); }
.home-page .hero-inner { text-align:center; }
.home-page .hero-text { max-width:860px; margin-inline:auto; }
.home-page .hero h1 { max-width:700px; margin:0 auto 12px; font-size:clamp(2.5rem,5vw,4rem); }
.home-page .hero p { max-width:620px; margin:0 auto; font-size:1.05rem; }

.home-page .section { padding:42px 0; }
.home-page .home-explore-section { background:rgba(246,240,228,.84); }
.home-explore-heading,.home-section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.home-explore-heading h2,.home-section-heading h2 {
  color:var(--forest);
  font-family:var(--display);
  font-size:clamp(1.55rem,2.4vw,2.1rem);
  line-height:1.2;
}
.home-explore-heading p,.home-section-heading p {
  max-width:690px;
  margin-top:5px;
  color:#52635d;
  font-size:.94rem;
}
.home-text-link,.home-featured-link {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  flex:none;
  padding:8px 0;
  color:var(--forest);
  font-size:.86rem;
  font-weight:750;
  text-decoration:underline;
  text-decoration-color:rgba(24,61,50,.35);
  text-underline-offset:4px;
}
.home-text-link:hover,.home-featured-link:hover { color:var(--primary-dark); }

.home-explore-layout {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.65fr);
  align-items:stretch;
  gap:20px;
}
.home-shortcuts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:center;
  gap:10px;
}
.home-shortcut {
  min-width:0;
  min-height:170px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:9px;
  padding:14px 12px;
  border:1px solid #e6d9c3;
  border-radius:4px;
  background:#fffaf0;
  color:#4b3219;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.home-shortcut:hover { transform:translateY(-2px); border-color:#b58a54; background:#f4e8d1; }
.home-shortcut svg {
  width:38px;
  height:38px;
  fill:none;
  stroke:#986329;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.home-shortcut strong { color:#342719; font-family:var(--display); font-size:1rem; line-height:1.25; }
.home-shortcut span { color:#655845; font-size:.75rem; line-height:1.4; }
.home-shortcut:focus-visible,.home-text-link:focus-visible,.home-featured-link:focus-visible {
  outline:3px solid #a46a2b;
  outline-offset:3px;
}

.home-map-panel {
  min-width:0;
  overflow:hidden;
  border:1px solid #dbe6df;
  border-radius:4px;
  background:#f3ead8;
}
.home-map-frame { position:relative; }
.home-map-status {
  position:absolute;
  z-index:900;
  top:50%;
  left:50%;
  max-width:calc(100% - 24px);
  padding:9px 12px;
  transform:translate(-50%,-50%);
  border:1px solid #d1ddd8;
  border-radius:4px;
  background:#fbfdfc;
  color:#40554d;
  font-size:.82rem;
  text-align:center;
  box-shadow:0 2px 8px rgba(24,57,47,.08);
}
.home-map-status.is-error { color:#842424; }
.home-map-status a { color:#1f5a49; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.home-map-fallback { position:absolute; z-index:900; inset:auto 12px 12px; padding:8px 10px; border-radius:3px; background:#fbfdfc; color:#40554d; font-size:.82rem; text-align:center; }
.home-map-fallback a { color:#1f5a49; font-weight:700; text-decoration:underline; }
.home-page #map-home.map-container {
  height:clamp(280px,28vw,360px);
  min-height:280px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background-color:#f3ead8;
}
.home-page #map-home .home-province-label {
  width:1px;
  height:1px;
  border:0;
  background:transparent;
  pointer-events:none;
}
.home-page #map-home .home-province-label span {
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  width:max-content;
  max-width:84px;
  height:auto;
  transform:translate(-50%,-50%) scale(.82);
  padding:3px 6px;
  border:1px solid #ba9650;
  border-radius:3px;
  background:#173b33;
  box-shadow:inset 0 0 0 1px rgba(255,239,197,.18),0 2px 6px rgba(35,40,25,.2);
  color:#fff0c4;
  font-family:Georgia,'Times New Roman',serif;
  font-size:9px;
  font-weight:700;
  line-height:1.12;
  text-align:center;
  text-shadow:none;
  white-space:normal;
  overflow-wrap:anywhere;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,transform .22s ease,visibility 0s linear .22s;
}
.home-page #map-home .home-province-name.is-visible {
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  visibility:visible;
  transition-delay:0s;
  transition:opacity .18s ease,transform .22s ease,visibility 0s;
}
.home-page #map-home .province-shape:focus-visible {
  outline:none;
  stroke:#173b33;
  stroke-width:3px;
}
.home-page #map-home .home-province-label::before { display:none; }
.home-page .home-category-section { background:rgba(251,250,246,.84); }
.home-section-heading { margin-bottom:19px; }
.home-category-grid {
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;
}
.home-category-tile {
  min-height:145px;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 9px;
  border:1px solid transparent;
  border-radius:4px;
  background:transparent;
  text-align:center;
}
.home-category-tile:hover { border-color:#e6d9c3; background:#f6f0e4; }
.home-category-tile .category-tile-icon {
  width:82px;
  height:82px;
  border:1px solid #e4d6c1;
  border-radius:50%;
  background:#f2e6d1;
  color:#80551f;
}
.home-category-tile:nth-child(3n+2) .category-tile-icon { background:#e6eeea; color:#245d50; }
.home-category-tile:nth-child(3n) .category-tile-icon { background:#f1e2dc; color:#884538; }
.home-category-tile .culture-category-icon { width:42px; height:42px; }
.home-category-tile strong { color:#24463b; font-size:.9rem; line-height:1.35; }

.home-page .home-featured-section {
  background-color:#12352e;
  background-image:linear-gradient(rgba(8,16,15,.38),rgba(8,16,15,.38)),url('../image/background-budaya-gelap.jpg');
  background-position:center;
  background-size:cover;
  color:#fffdf8;
}
.home-featured-head {
  align-items:flex-end;
  margin-bottom:18px;
}
.home-featured-head h2 { color:#fffdf8; font-family:var(--display); }
.home-featured-head p { max-width:600px; margin-top:5px; color:#d0ddd7; text-align:left; }
.home-featured-link { color:#fffdf8; text-decoration-color:rgba(255,253,248,.55); }
.home-featured-link:hover { color:#f2d4a5; }
.home-page .culture-detail-trigger { display:inline-flex; min-height:44px; align-items:center; }
.home-page .home-featured-card { border:1px solid rgba(255,255,255,.3); border-radius:4px; background:#fffdf8; }
.home-page .home-featured-card .culture-record-copy { color:#263c31; }
.home-featured-empty { border-color:#d1ddd8; border-radius:4px; }

.home-page .home-summary-section { background:rgba(240,244,240,.84); }
.home-page .scroll-reveal { opacity:1; transform:none; transition:none; }
.home-summary-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
.home-stat-panel {
  min-width:0;
  padding:clamp(20px,3vw,34px);
  border:1px solid #d9e3dc;
  border-radius:5px;
  background:#fbfdfb;
}
/* Transparent circular metrics keep the figures distinct while preserving the homepage's warm editorial backdrop. */
.home-stat-panel .home-section-heading { align-items:flex-start; margin-bottom:24px; }
.home-stat-panel .home-section-heading > div { display:grid; gap:5px; }
.home-stat-panel .home-section-heading h2 { color:var(--forest); font-size:clamp(1.55rem,2.5vw,2rem); }
.home-stat-panel .home-section-heading p { color:#52635d; font-size:.95rem; }
.home-stat-eyebrow { color:#80551f; font-size:.72rem; font-weight:750; letter-spacing:.12em; line-height:1.4; text-transform:uppercase; }
.home-page .home-stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.home-page .home-stats-grid .stat-card {
  display:flex;
  width:min(100%,190px);
  aspect-ratio:1;
  min-width:0;
  min-height:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:20px;
  margin-inline:auto;
  border:1px solid rgba(179,139,52,.55);
  border-radius:50%;
  background:transparent;
  text-align:center;
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease;
}
.home-page .home-stats-grid .stat-card:hover { transform:translateY(-3px); border-color:#b38b34; background:rgba(255,253,248,.3); }
.home-page .home-stats-grid .stat-num {
  color:var(--forest);
  font-size:clamp(1.55rem,3vw,2.35rem);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.home-page .home-stats-grid .stat-label { color:#52635d; font-size:.9rem; font-weight:650; }

body.home-page .footer {
  margin-top:0;
  background:#090909;
  color:#d6e2dc;
}
body.home-page .footer .footer-bottom,
body.home-page .footer .footer-bottom p { border-color:#9b772d; color:#d6e2dc; }
body.home-page .footer a:hover { color:#f2d4a5; }

@media (max-width:950px) {
  .home-explore-layout { grid-template-columns:minmax(0,1fr); }
  .home-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-summary-grid { grid-template-columns:minmax(0,1fr); }
  .home-category-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

@media (max-width:1200px) {
  .home-page .hero { background-size:140% auto; }
}

@media (max-width:700px) {
  .home-page .hero { min-height:480px; padding:32px 0 38px; background-size:cover; background-position:left bottom; }
  .home-page .hero::before { background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.65)); }
  .home-page .hero h1 { max-width:560px; margin-bottom:10px; font-size:clamp(1.65rem,7.4vw,2.35rem); }
  .home-page .hero p { margin-bottom:16px; font-size:.88rem; }
  .home-page .section { padding:34px 0; }
  .home-explore-heading,.home-section-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .home-explore-layout { gap:14px; }
  .home-shortcuts { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .home-shortcut { min-height:104px; align-items:center; gap:6px; padding:9px 3px; text-align:center; }
  .home-shortcut svg { width:26px; height:26px; }
  .home-shortcut strong { font-size:.72rem; line-height:1.15; }
  .home-shortcut span { display:none; }
  .home-map-panel { padding:0; }
  .home-page #map-home.map-container { height:clamp(175px,52vw,205px); min-height:175px; }
  .home-page #map-home .home-province-label span { max-width:88px; font-size:8px; line-height:1.12; }
  .home-category-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px 4px; }
  .home-category-tile { min-height:96px; gap:7px; padding:8px 2px; }
  .home-category-tile .category-tile-icon { width:44px; height:44px; }
  .home-category-tile .culture-category-icon { width:28px; height:28px; }
  .home-category-tile strong { font-size:.68rem; line-height:1.2; overflow-wrap:anywhere; }
  .home-featured-head { align-items:flex-start; }
  .home-page .home-featured-head p { font-size:.88rem; }
  .home-featured-link { padding-top:2px; }
  .home-stat-panel { padding:15px; }
  .home-page .home-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .home-page .home-stats-grid .stat-card { width:min(100%,170px); min-height:0; padding:15px 12px; }
  .home-page .home-stats-grid .stat-num { font-size:clamp(1.55rem,6vw,2.1rem); }
}

@media (max-width:370px) {
  .province-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-shortcuts { gap:4px; }
  .home-shortcut { min-height:88px; padding:7px 2px; }
  .home-shortcut svg { width:23px; height:23px; }
  .home-shortcut strong { font-size:.66rem; }
  .home-category-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px 3px; }
  .home-category-tile { min-height:88px; padding:6px 1px; }
  .home-category-tile .category-tile-icon { width:38px; height:38px; }
  .home-category-tile .culture-category-icon { width:24px; height:24px; }
  .home-category-tile strong { font-size:.63rem; }
  .home-page #map-home .home-province-label span { max-width:78px; font-size:7.5px; }
}

@media (prefers-reduced-motion:reduce) {
  .home-shortcut,
  .home-page .home-stats-grid .stat-card,
  .home-page #map-home .home-province-label .home-province-name { transition:none; }
}

/* The homepage navigation overlays the hero, then darkens for legibility while scrolling. */
.home-page .navbar {
  position:fixed;
  inset:0 0 auto;
  border-color:transparent;
  background:rgba(16,34,29,.12);
  box-shadow:none;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
.home-page .navbar .logo,
.home-page .navbar .logo strong,
.home-page .navbar .logo > span { color:#f0d49a; }
.home-page .navbar .nav-menu > a:not(.nav-account-action) { color:#fff; }
.home-page .navbar .nav-menu > a:not(.nav-account-action)::after { background:#fff; }
.home-page .navbar .nav-hamburger {
  border-color:rgba(255,255,255,.65);
  background:rgba(16,34,29,.2);
  color:#fff;
}
.home-page .navbar.is-scrolled {
  border-color:rgba(255,255,255,.12);
  background:rgba(24,43,38,.92);
  box-shadow:0 5px 25px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Keep the same forest-glass navigation treatment on every public route. */
body:not(.home-page) .navbar {
  border-color:rgba(255,255,255,.12);
  background:rgba(24,43,38,.92);
  box-shadow:0 5px 25px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
body:not(.home-page) .navbar .logo,
body:not(.home-page) .navbar .logo strong,
body:not(.home-page) .navbar .nav-menu > a:not(.nav-account-action) {
  color:#fff;
}
body:not(.home-page) .navbar .nav-menu > a:not(.nav-account-action)::after {
  background:#fff;
}
body:not(.home-page) .navbar .nav-menu > a:not(.nav-account-action):hover {
  color:#f2d4a5;
}
body:not(.home-page) .navbar .nav-hamburger {
  border-color:rgba(255,255,255,.55);
  background:rgba(16,34,29,.35);
  color:#fff;
}

/* Green carries the navigation structure; gold marks active and interactive states. */
.navbar {
  border-bottom-color:rgba(196,151,73,.48);
  background:#173d32;
  box-shadow:0 4px 16px rgba(15,35,28,.2);
}
.navbar .logo,
.navbar .logo strong { color:#f0d49a; }
.navbar .logo > span { color:#f0d49a; }
body.home-page .navbar .logo strong,
body:not(.home-page) .navbar .logo strong { color:#edbd4e; }
.navbar .nav-menu > a:not(.nav-account-action) { color:#fffdf6; }
.navbar .nav-menu > a:not(.nav-account-action)::after { background:#d8ad5c; }
.navbar .nav-menu > a:not(.nav-account-action):hover,
.navbar .nav-menu > a:not(.nav-account-action).active { color:#f0d49a; }
.navbar .nav-menu a.nav-account-login {
  border-color:#d8ad5c;
  background:#d8ad5c;
  color:#18382e;
}
.navbar .nav-menu a.nav-account-login:hover {
  border-color:#edcf8c;
  background:#edcf8c;
  color:#18382e;
}
.navbar .nav-menu a.nav-account-logout,
.navbar .nav-menu button.nav-account-logout {
  border-color:rgba(240,212,154,.52);
  background:rgba(255,255,255,.06);
  color:#fffdf6;
}
.navbar .nav-menu a.nav-account-logout:hover,
.navbar .nav-menu button.nav-account-logout:hover {
  border-color:#d8ad5c;
  background:rgba(216,173,92,.14);
  color:#f0d49a;
}
.navbar .nav-hamburger {
  border-color:rgba(240,212,154,.65);
  background:rgba(255,255,255,.06);
  color:#f0d49a;
}
body.home-page .navbar {
  border-bottom-color:rgba(216,173,92,.24);
  background:rgba(17,48,39,.26);
  box-shadow:none;
}
body.home-page .navbar.is-scrolled {
  border-bottom-color:rgba(216,173,92,.48);
  background:rgba(23,61,50,.96);
  box-shadow:0 5px 20px rgba(15,35,28,.24);
}
@media (max-width:900px) {
  .navbar .nav-menu {
    border-color:rgba(216,173,92,.38);
    background:#173d32;
    box-shadow:0 12px 24px rgba(15,35,28,.25);
  }
  body.home-page .navbar .nav-menu > a:not(.nav-account-action),
  body:not(.home-page) .navbar .nav-menu > a:not(.nav-account-action) { color:#fffdf6; }
  body.home-page .navbar .nav-menu > a:not(.nav-account-action):hover,
  body.home-page .navbar .nav-menu > a:not(.nav-account-action).active,
  body:not(.home-page) .navbar .nav-menu > a:not(.nav-account-action):hover,
  body:not(.home-page) .navbar .nav-menu > a:not(.nav-account-action).active { color:#f0d49a; }
  .navbar .nav-menu a.nav-account-logout,
  .navbar .nav-menu button.nav-account-logout {
    border-color:rgba(240,212,154,.52);
    background:rgba(255,255,255,.06);
    color:#fffdf6;
  }
}

/* A uniform black veil covers the hero image while keeping its copy readable. */
.home-page .hero {
  position:relative;
  isolation:isolate;
  overflow:clip;
  min-height:100svh;
  padding:132px 0 106px;
  background:#183d32;
}
.home-page .hero::before {
  position:absolute;
  z-index:-1;
  inset:-4%;
  background:url('../image/background-hero.jpg') center 58% / cover no-repeat;
  background-attachment:fixed;
  content:"";
  pointer-events:none;
  animation:none;
}
.home-page .hero::after {
  position:absolute;
  z-index:-1;
  inset:0;
  display:block;
  opacity:1;
  background:rgba(0,0,0,.68);
  content:"";
  pointer-events:none;
}
@keyframes homeHeroDrift {
  from { transform:scale(1); }
  to { transform:scale(1.08); }
}
.home-page .hero-inner { width:100%; }
.home-page .hero-text { max-width:940px; }
.home-page .hero-copy { color:#fff; }
.home-page .hero p { font-size:17px; }
.home-page .hero h1,
.home-page .hero p,
.home-page .home-hero-actions,
.home-page .home-hero-scroll {
  animation:homeHeroReveal .75s cubic-bezier(.2,.7,.2,1) both;
}
.home-page .hero h1 { animation-delay:.12s; }
.home-page .hero p { animation-delay:.3s; }
.home-page .home-hero-actions { animation-delay:.48s; }
.home-page .home-hero-scroll { animation-name:homeHeroScrollReveal; animation-delay:.68s; }
@keyframes homeHeroReveal {
  from { opacity:0; transform:translate3d(0,20px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes homeHeroScrollReveal {
  from { opacity:0; transform:translate3d(-50%,20px,0); }
  to { opacity:1; transform:translate3d(-50%,0,0); }
}
.home-page .hero h1 {
  max-width:920px;
  margin:0 auto 24px;
  font-size:clamp(3rem,7.2vw,6rem);
  line-height:1.02;
  letter-spacing:-.035em;
  text-shadow:0 5px 18px rgba(0,0,0,.8);
}
.home-page .hero p {
  max-width:740px;
  margin:0 auto;
  color:#fff;
  font-size:clamp(1.05rem,1.7vw,1.2rem);
  font-weight:600;
  line-height:1.7;
  text-shadow:0 2px 9px rgba(0,0,0,.95);
}
.home-hero-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:44px;
}
.home-hero-button {
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.96rem;
  font-weight:750;
  line-height:1.2;
  text-align:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.home-hero-button-primary {
  background:#e7a52e;
  box-shadow:0 5px 18px rgba(0,0,0,.24);
  color:#172c25;
}
.home-hero-button-primary:hover { background:#f2b644; transform:translateY(-2px); }
.home-hero-button-primary span { font-size:1.15em; }
.home-hero-button-outline {
  border-color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.08);
  color:#fff;
}
.home-hero-button-outline:hover { border-color:#fff; background:#fff; color:#183d32; transform:translateY(-2px); }
.home-hero-scroll {
  position:absolute;
  z-index:1;
  bottom:24px;
  left:50%;
  display:flex;
  min-height:44px;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  text-transform:uppercase;
  transform:translateX(-50%);
}
.home-hero-scroll span:last-child { font-size:1.35rem; animation:homeScrollNudge 1.6s ease-in-out infinite; }
@keyframes homeScrollNudge {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(5px); }
}
@media (max-width:900px) {
  .navbar .nav-menu {
    border-color:rgba(255,255,255,.15);
    background:rgba(24,43,38,.97);
    box-shadow:0 12px 24px rgba(0,0,0,.2);
  }
  .navbar .nav-menu > a:not(.nav-account-action) { color:#fff; }
  .navbar .nav-menu > a:not(.nav-account-action):hover { color:#f2d4a5; }
  .navbar .nav-menu a.nav-account-logout,
  .navbar .nav-menu button.nav-account-logout {
    border-color:rgba(255,255,255,.42);
    background:rgba(255,255,255,.08);
    color:#fff;
  }
  .navbar .nav-menu a.nav-account-logout:hover,
  .navbar .nav-menu button.nav-account-logout:hover {
    border-color:rgba(255,255,255,.8);
    background:rgba(255,255,255,.16);
    color:#fff;
  }
}
@media (max-width:700px) {
  .home-page .hero { min-height:clamp(500px,80svh,680px); padding:76px 0 70px; }
  .home-page .hero::before { background-position:center 64%; }
  .home-page .hero::after { opacity:1; background:rgba(0,0,0,.68); }
  .home-page .hero h1 { margin-bottom:12px; font-size:clamp(2.3rem,9.2vw,3.25rem); letter-spacing:-.025em; }
  .home-page .hero p { max-width:34rem; font-size:.98rem; line-height:1.65; }
  .home-hero-actions { gap:8px; margin-top:22px; }
  .home-hero-button { width:min(100%,250px); min-height:44px; gap:8px; padding:10px 18px; font-size:.88rem; }
  .home-hero-scroll { bottom:10px; gap:7px; padding:6px 8px; font-size:.6rem; }
  .home-hero-scroll span:last-child { font-size:1.2rem; }
  .home-page .home-featured-card { flex-basis:min(86vw,330px); }
  .home-page .home-featured-card .culture-record-copy { padding:12px 14px 14px; }
  .home-page .home-featured-card .culture-record-copy h3 { margin-bottom:5px; font-size:1.05rem; }
  .home-page .home-featured-card .culture-record-copy > .home-featured-origin {
    display:-webkit-box;
    margin-bottom:6px;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    font-size:.8rem;
    line-height:1.4;
  }
  .home-page .home-featured-card .culture-record-copy > p:not(.home-featured-origin) {
    -webkit-line-clamp:2;
    line-clamp:2;
    font-size:.84rem;
    line-height:1.45;
  }
  .home-page .home-featured-cta { min-height:44px; margin-top:auto; padding:8px 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .home-page .hero::before,
  .home-hero-scroll span:last-child { animation:none; }
  .home-page .hero h1,
  .home-page .hero p,
  .home-page .home-hero-actions,
  .home-page .home-hero-scroll { animation:none; }
  .home-hero-button { transition:none; }
}

.jelajah-detail-panel {
  min-height:440px;
  border:1px solid var(--jelajah-line);
  border-radius:7px;
  background:#fff;
  box-shadow:0 14px 38px rgba(24,57,47,.1);
}
.jelajah-detail-state {
  display:grid;
  min-height:440px;
  align-content:center;
  justify-items:start;
  padding:clamp(22px,3vw,38px);
  color:var(--jelajah-muted);
}
.jelajah-detail-state h2 {
  margin:0 0 8px;
  color:var(--jelajah-ink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.3rem,2vw,1.75rem);
  line-height:1.2;
}
.jelajah-detail-state p { margin:0; font-size:.9rem; line-height:1.55; }
.jelajah-detail-state.is-error { color:#842424; }
.jelajah-detail-state.is-error h2 { color:#842424; }
.jelajah-detail-state[hidden],
.jelajah-province-card[hidden] { display:none; }
.jelajah-province-card { padding:clamp(20px,2.5vw,34px); }
.jelajah-province-figure { margin:0 0 20px; }
.jelajah-province-image,
.jelajah-province-image-fallback {
  width:100%;
  height:clamp(190px,26vw,300px);
  border-radius:4px;
}
.jelajah-province-image { display:block; object-fit:cover; background:#e5efed; }
.jelajah-province-image[hidden] { display:none; }
.jelajah-province-image-fallback {
  display:grid;
  place-items:center;
  padding:18px;
  background:#e8f0ef;
  color:#40564c;
  font-size:.84rem;
  text-align:center;
}
.jelajah-province-image-fallback[hidden] { display:none; }
.jelajah-province-image-caption {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:7px;
  color:var(--jelajah-muted);
  font-size:.7rem;
  line-height:1.4;
}
.jelajah-province-image-caption > * { min-width:0; overflow-wrap:anywhere; }
.jelajah-province-image-caption a { color:#145942; text-decoration:underline; text-underline-offset:2px; }
.jelajah-province-header {
  padding-bottom:18px;
  border-bottom:1px solid var(--jelajah-line);
}
.jelajah-province-kicker {
  margin:0 0 5px;
  color:#8a5732;
  font-size:.76rem;
  font-weight:700;
}
.jelajah-province-header h2 {
  margin:0;
  color:var(--jelajah-ink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.65rem,2.4vw,2.2rem);
  line-height:1.18;
  overflow-wrap:anywhere;
  text-transform:uppercase;
}
.jelajah-province-description {
  margin:12px 0 18px;
  color:#40564c;
  font-size:.9rem;
  line-height:1.6;
}
.jelajah-province-facts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0;
}
.jelajah-province-fact {
  min-width:0;
  padding:12px;
  border:1px solid var(--jelajah-line);
  border-radius:5px;
  background:#f5f8f5;
}
.jelajah-province-fact dt { color:var(--jelajah-muted); font-size:.72rem; line-height:1.35; }
.jelajah-province-fact dd { margin:4px 0 0; color:var(--jelajah-ink); font-size:1rem; font-weight:700; overflow-wrap:anywhere; }
.jelajah-province-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.jelajah-province-action {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid #176b52;
  border-radius:5px;
  background:#fff;
  color:#145942;
  font:inherit;
  font-size:.82rem;
  font-weight:700;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.jelajah-province-action.is-primary { background:#176b52; color:#fff; }
.jelajah-province-action:hover { border-color:#125640; background:#eff5f1; }
.jelajah-province-action.is-primary:hover { background:#125640; color:#fff; }
.jelajah-province-action.is-unavailable { border-color:#cbd9d3; color:#58665c; cursor:not-allowed; }
.jelajah-detail-panel a:focus-visible { outline:3px solid #176b52; outline-offset:3px; }
.province-category-panel { scroll-margin-top:24px; }
.jelajah-page #map-jelajah path.leaflet-interactive:focus-visible { outline:3px solid #176b52; outline-offset:3px; }
.jelajah-retry {
  min-height:44px;
  margin-top:16px;
  padding:9px 14px;
  border:1px solid var(--jelajah-green);
  border-radius:5px;
  background:var(--jelajah-green);
  color:#fff;
  font:inherit;
  font-size:.84rem;
  font-weight:700;
  cursor:pointer;
}
.jelajah-retry:hover { background:#125640; }
.jelajah-detail-panel :where(a,button):focus-visible { outline:3px solid #176b52; outline-offset:3px; }
@media (max-width:1000px) {
  .jelajah-detail-panel,
  .jelajah-detail-state { min-height:0; }
}
@media (max-width:700px) {
  .jelajah-detail-panel { min-width:0; }
  .jelajah-detail-state { padding:22px 18px; }
  .jelajah-province-card { padding:20px 16px; }
  .jelajah-province-figure { margin-bottom:16px; }
  .jelajah-province-image,
  .jelajah-province-image-fallback { height:clamp(180px,56vw,280px); }
  .jelajah-province-image-caption { display:grid; gap:3px; }
  .jelajah-province-facts { grid-template-columns:1fr; gap:7px; }
  .jelajah-province-fact { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 11px; }
  .jelajah-province-fact dd { margin:0; text-align:right; }
  .jelajah-province-actions { display:grid; grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  .jelajah-retry,
  .jelajah-province-action { transition:none; }
}