/* Nanomind Explorer — design system + Sprint 3 utilities */
@import url("fonts.css");


/* ===== Utility layer (replaces Tailwind CDN) ===== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none !important; }
.block { display: block; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:text-5xl { font-size: 3rem; line-height: 1.1; }
}
.space-y-4 > * + * { margin-top: 1rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-2 { padding-top: 0.5rem; }

.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.max-w-xl { max-width: 36rem; }
.max-w-\[820px\] { max-width: 820px; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1.1; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.font-semibold { font-weight: 600; }
.rounded-lg { border-radius: 0.5rem; }

/* micro-interaction helpers */
.pressable { transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s; }
.pressable:active { transform: scale(0.98); }
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-fade { opacity: 0; transition: opacity 0.45s ease; }
.img-fade.is-loaded { opacity: 1; }

/* ============================================================
   NANOMIND EXPLORER — "EXPEDITION JOURNAL" DESIGN SYSTEM
   Shared across index.html, article.html, about.html
   ============================================================ */

:root {
    /* Shell (dark, photography-forward) */
    --ink: #14140F;
    --ink-2: #1B1A13;
    --ink-3: #242219;
    --border-ink: rgba(237, 232, 218, 0.10);
    --border-ink-strong: rgba(237, 232, 218, 0.22);
    --parchment-text: #EDE8DA;
    --muted-on-ink: #9C9585;

    /* Reading page (paper, warm) */
    --paper: #F1ECDD;
    --paper-2: #E7E0CB;
    --ink-text: #221E12;
    --muted-on-paper: #6B6455;
    --border-paper: rgba(34, 30, 18, 0.12);

    /* Signature accents */
    --brass: #C9974A;
    --brass-soft: rgba(201, 151, 74, 0.16);
    --rust: #A23E2E;
    --rust-soft: rgba(162, 62, 46, 0.16);
    --moss: #5C6E4F;
    --moss-soft: rgba(92, 110, 79, 0.16);
    --slate: #4A5A63;
    --slate-soft: rgba(74, 90, 99, 0.16);

    --accent: var(--brass);
    --accent-soft: var(--brass-soft);
}
.accent-brass { --accent: var(--brass); --accent-soft: var(--brass-soft); }
.accent-rust { --accent: var(--rust); --accent-soft: var(--rust-soft); }
.accent-moss { --accent: var(--moss); --accent-soft: var(--moss-soft); }
.accent-slate { --accent: var(--slate); --accent-soft: var(--slate-soft); }

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    /* Cegah scroll-chaining: scroll vertikal halaman gak nyeret ke rail horizontal
       atau sebaliknya — sumber glitch saat scroll lewat section dgn overflow. */
    overscroll-behavior-y: none;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
body {
    font-family: 'Source Serif 4', Georgia, serif;
    background: var(--ink);
    color: var(--parchment-text);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}
body.has-living-bg { background: #0b0d0b; }
.font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }
.font-ui { font-family: 'Inter', sans-serif; }
a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ===== Ghibli-inspired background — static art only (no video shake) =====
   z-index: -1 keeps bg behind all content without stacking hacks */
.living-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #121410;
}
.living-bg-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #121410;
    background-image: url('media/bg-ghibli-poster.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Brighter so laundry/river scene reads clearly */
    filter: brightness(1.08) contrast(1.04) saturate(1.06);
    image-rendering: auto;
}
@supports (background-image: url('media/bg-ghibli-poster.webp')) {
    .living-bg-poster { background-image: url('media/bg-ghibli-poster.webp'); }
}
/* Soft warm wash — even, no edge hotspots that look like banding */
.living-bg-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255, 210, 140, 0.12), transparent 70%),
        radial-gradient(ellipse 55% 45% at 20% 75%, rgba(90, 130, 110, 0.08), transparent 65%);
    opacity: 1;
}
/* Slightly stronger even scrim so journal panels sit cleanly on landscape */
.living-bg-veil {
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 12, 0.48);
}
.living-bg-noise {
    position: absolute;
    inset: 0;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    pointer-events: none;
}
@media (max-width: 720px) {
    .living-bg-poster {
        filter: brightness(1.05) contrast(1.03) saturate(1.05);
    }
    .living-bg-veil {
        background: rgba(12, 14, 12, 0.52);
    }
}

/* ===== Journal layout — content panels over landscape (Option A) ===== */
.journal-main { position: relative; z-index: 1; }
.journal-stack {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 72px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.journal-stack--narrow { max-width: 1000px; padding-top: 28px; }
.section-surface {
    /* Background jadi solid (sebelumnya rgba 0.92 + backdrop-filter blur).
       backdrop-filter pada banyak section + position:fixed bg adalah sumber
       glitch/tearing saat scroll — blur direpaint tiap frame di GPU mobile.
       Solid bg + contain:paint menghilangkan beban itu tanpa ngaruh visually. */
    background: rgb(20, 19, 14);
    border: 1px solid var(--border-ink);
    border-radius: 14px;
    padding: clamp(22px, 3.5vw, 36px);
    box-shadow:
        0 18px 50px -28px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(201, 151, 74, 0.04);
    contain: paint;
    will-change: auto;
}
.section-surface-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.section-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    color: var(--parchment-text);
    margin-top: 10px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.section-title--lg { font-size: clamp(2rem, 4vw, 2.75rem); }
.section-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: var(--muted-on-ink);
    margin-top: 8px;
    max-width: 36rem;
    line-height: 1.5;
}
.section-sub a.text-brass,
a.text-brass { color: var(--brass); text-decoration: none; border-bottom: 1px solid rgba(201,151,74,0.35); }
.section-sub a.text-brass:hover { border-bottom-color: var(--brass); }
.section-empty { color: var(--muted-on-ink); font-family: 'Inter', sans-serif; }

/* ===== Skeletons ===== */
.skeleton-block {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    border-radius: 10px;
}
@keyframes skeletonShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.skeleton-line {
    height: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-line.w-32 { width: 8rem; height: 10px; }
.skeleton-line.w-24 { width: 6rem; }
.skeleton-line.w-full { width: 100%; height: 14px; }
.skeleton-line.w-4\/5 { width: 80%; }
.skeleton-hero { min-height: 70vh; }
.skeleton-hero-inner { width: 100%; min-height: 70vh; border-radius: 0 0 16px 16px; }
.skeleton-potd { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; min-height: 220px; }
@media (max-width: 860px) { .skeleton-potd { grid-template-columns: 1fr; } }
.skeleton-potd-img { min-height: 220px; border-radius: 8px; }
.skeleton-potd-text { padding: 28px 8px 8px 28px; }
.skeleton-x-rail { display: flex; gap: 16px; overflow: hidden; }
.skeleton-x-card { flex: 0 0 260px; height: 300px; }
.skeleton-dispatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
    width: 100%;
    grid-column: 1 / -1;
}
.skeleton-card { min-height: 220px; }
.skeleton-card.span-4 { grid-column: span 4; min-height: 280px; }
.skeleton-card.span-2 { grid-column: span 2; }
@media (max-width: 860px) {
    .skeleton-dispatch-grid { grid-template-columns: 1fr 1fr; }
    .skeleton-card.span-4, .skeleton-card.span-2 { grid-column: span 2; min-height: 200px; }
}

/* ===== X Articles horizontal rail ===== */
.x-rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    /* scroll-snap: proximity (bukan mandatory) — mandatory bikin snap-glitch
       saat scroll vertikal halaman, terutama di trackpad / mouse wheel. */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-ink-strong) transparent;
    overscroll-behavior-x: contain;
}
.x-rail::-webkit-scrollbar { height: 6px; }
.x-rail::-webkit-scrollbar-thumb { background: var(--border-ink-strong); border-radius: 10px; }

/* Tombol panah kiri/kanan — elemen TERPISAH dari kartu, gak pernah
   nyentuh event klik kartu sama sekali. Scroll mouse-wheel (vertikal)
   di atas rail juga otomatis diterjemahkan jadi scroll horizontal
   lewat JS (lihat enableRailDragScroll di script.js). */
.rail-nav-wrap { position: relative; }
.rail-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(20, 20, 15, 0.85); border: 1px solid rgba(237, 232, 218, 0.18);
    color: #EDE8DA; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s;
    backdrop-filter: blur(6px); font-size: 13px;
}
.rail-nav-btn:hover { background: var(--brass); color: #14140F; }
.rail-nav-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.rail-nav-prev { left: -6px; }
.rail-nav-next { right: -6px; }
@media (max-width: 780px) {
    /* Layar sentuh udah native swipe — tombol panah cuma nambah noise */
    .rail-nav-btn { display: none; }
}
.x-card {
    flex: 0 0 min(280px, 78vw);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(36, 40, 44, 0.95), rgba(22, 21, 16, 0.98));
    border: 1px solid rgba(74, 90, 99, 0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.25s, box-shadow 0.35s;
}
.x-card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 151, 74, 0.45);
    box-shadow: 0 14px 36px -18px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
}
.x-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.x-card .x-thumb {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--ink);
}
.x-card .x-thumb picture { display: block; width: 100%; height: 100%; }
.x-card .x-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
    -webkit-user-drag: none; /* Chrome/Safari: cegah native image-drag */
    user-drag: none;
}
.x-card:hover .x-thumb img { transform: scale(1.05); }
.x-card .x-thumb .x-source-badge { top: 10px; left: 10px; }
.x-card .x-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* === Placeholder cards (sebelum fxtwitter fetch selesai) === */
.x-card-placeholder .x-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(36,40,44,0.6), rgba(22,21,16,0.8));
    color: rgba(201,151,74,0.4);
    font-size: 32px;
}
.x-card-placeholder .x-body h3 {
    color: var(--muted-on-ink);
    font-style: italic;
    opacity: 0.7;
}
.x-dek-placeholder { opacity: 0.5; font-size: 13px; }
.x-meta-placeholder { opacity: 0.4; }
.x-card-placeholder:hover { border-color: rgba(201,151,74,0.3); }
.x-card-placeholder:hover .x-thumb-placeholder { color: rgba(201,151,74,0.6); }
.x-card .x-body h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1.3;
    color: var(--parchment-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.x-card .x-dek {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted-on-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.x-card .x-meta {
    margin-top: auto;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--muted-on-ink);
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 4px;
}

/* About hero inside panel */
.about-hero { text-align: center; padding-top: 36px; padding-bottom: 36px; }
.avatar-ring {
    position: relative;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brass), var(--rust));
    display: inline-block;
    box-shadow: 0 12px 36px -12px rgba(201, 151, 74, 0.55);
}
.avatar-ring img {
    border-radius: 50%;
    display: block;
    width: 132px;
    height: 132px;
    object-fit: cover;
    background: var(--ink-3);
    border: 3px solid var(--ink-2);
}
.about-hero #aboutName { margin-top: 4px; }
.about-hero #aboutBio {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-size: 15px;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brass); color: var(--ink); }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: var(--border-ink-strong); border-radius: 10px; }

/* ===== Page Loader ===== */
#pageLoader { position: fixed; inset: 0; background: var(--ink); z-index: 500; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; }
#pageLoader.hide { opacity: 0; visibility: hidden; }
.loader-mark { width: 56px; height: 56px; animation: pulseMark 1.5s ease-in-out infinite; }
@keyframes pulseMark { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.55; } }

/* ===== Article direct-fetch loading state =====
   Tampil saat X/Medium article di-fetch langsung by-ID (fallback kalau
   bulk load belum kelar / gagal sebagian). */
.article-loading-state {
    max-width: 640px;
    margin: 96px auto;
    padding: 48px 24px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    color: var(--parchment-text);
}
.article-loading-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 22px;
    border: 3px solid rgba(201, 151, 74, 0.18);
    border-top-color: var(--brass);
    border-radius: 50%;
    animation: articleSpin 0.9s linear infinite;
}
@keyframes articleSpin { to { transform: rotate(360deg); } }
.article-loading-sub { color: var(--muted-on-ink); font-size: 12.5px; margin-top: 6px; }

/* ===== Utility / type scale ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.eyebrow { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; width: 18px; height: 1.5px; background: var(--accent); display: inline-block; }
.eyebrow.justify-center { justify-content: center; }
.eyebrow.justify-center::before { display: none; }
.rule { height: 1px; background: var(--border-ink); border: none; }
.rule-paper { height: 1px; background: var(--border-paper); border: none; }
.t-display { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; color: var(--parchment-text); line-height: 1.15; }
.t-body { font-family: 'Source Serif 4', Georgia, serif; color: var(--parchment-text); line-height: 1.65; }
.t-ui { font-family: 'Inter', sans-serif; color: var(--parchment-text); }
.t-meta { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted-on-ink); letter-spacing: 0.01em; }
.t-muted { color: var(--muted-on-ink); }

/* ===== Reading progress (article) ===== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 60;
    background: linear-gradient(90deg, var(--brass), #E0B067);
    box-shadow: 0 0 12px rgba(201, 151, 74, 0.45);
    pointer-events: none;
    transition: width 0.08s linear;
}

/* ===== Nav ===== */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    background: rgba(14, 14, 11, 0.82);
    border-bottom: 1px solid rgba(201, 151, 74, 0.14);
    box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.65);
}
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-cluster { display: flex; align-items: center; gap: 10px; }
.wl-burger,
.wl-nav-circles { display: none; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover .brand-name { color: var(--brass); }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; filter: drop-shadow(0 2px 8px rgba(201,151,74,0.25)); transition: transform 0.3s; }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.04); }
.brand-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; letter-spacing: 0.01em; color: var(--parchment-text); transition: color 0.2s; }
.brand-tagline { font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--muted-on-ink); letter-spacing: 0.04em; display: block; margin-top: -2px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 100px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-ink);
}
.nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 100px;
    color: var(--muted-on-ink);
    transition: all 0.22s;
    position: relative;
    text-decoration: none;
}
.nav-link:hover { color: var(--parchment-text); background: rgba(255,255,255,0.05); }
.nav-link.active {
    color: #16140C;
    background: linear-gradient(135deg, var(--brass), #D4A85A);
    font-weight: 600;
    box-shadow: 0 4px 14px -4px rgba(201, 151, 74, 0.55);
}
.nav-icon-btn {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-ink);
    color: var(--parchment-text);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; transition: all 0.25s;
}
.nav-icon-btn:hover { border-color: var(--brass); color: var(--brass); background: var(--brass-soft); }
.mobile-menu-btn { display: none; }
@media (max-width: 860px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: flex; }
    .brand-tagline { display: none; }
}
.mobile-nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 85; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; }
.mobile-nav-panel {
    position: fixed; top: 0; right: 0; height: 100vh; width: 78vw; max-width: 320px;
    background: rgba(18, 17, 13, 0.98);
    border-left: 1px solid rgba(201, 151, 74, 0.16);
    z-index: 90;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    padding: 100px 28px 40px;
    display: flex; flex-direction: column; gap: 6px;
    backdrop-filter: blur(16px);
}
.mobile-nav-panel.open { transform: translateX(0); }
.mobile-nav-panel a {
    font-family: 'Inter', sans-serif;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--muted-on-ink);
    border-radius: 12px;
    border: 1px solid transparent;
    text-decoration: none;
}
.mobile-nav-panel a.active {
    color: var(--ink);
    background: linear-gradient(135deg, var(--brass), #D4A85A);
    border-color: transparent;
}
.mobile-nav-panel a:hover:not(.active) { color: var(--brass); background: rgba(201,151,74,0.08); border-color: rgba(201,151,74,0.2); }

/* ===== Buttons ===== */
.btn-primary {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, var(--brass), #E0B067);
    color: #16140C; font-weight: 700; font-size: 14px;
    padding: 13px 26px; border-radius: 8px;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, filter 0.25s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; letter-spacing: 0.01em; cursor: pointer;
}
.btn-primary:hover { box-shadow: 0 10px 28px -6px rgba(201,151,74,0.55); transform: translateY(-2px); filter: brightness(1.03); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary:disabled { opacity: 0.55; transform: none; box-shadow: none; filter: none; }
.btn-ghost {
    font-family: 'Inter', sans-serif;
    background: transparent;
    border: 1px solid var(--border-ink-strong);
    color: var(--parchment-text); font-weight: 500; font-size: 14px;
    padding: 12px 24px; border-radius: 8px;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s, color 0.25s, background 0.25s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
}
.btn-ghost:hover { border-color: var(--brass); color: var(--brass); background: rgba(201,151,74,0.06); transform: translateY(-1px); }
.btn-ghost:active { transform: scale(0.98); }
.btn-ghost.on-paper { border-color: var(--border-paper); color: var(--ink-text); }
.btn-ghost.on-paper:hover { border-color: var(--rust); color: var(--rust); }

/* ===== Cards: Dispatch (article) cards ===== */
.dispatch-card { position: relative; display: block; border-radius: 8px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--border-ink); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.35s; box-shadow: 0 12px 36px -22px rgba(0,0,0,0.7); }
.dispatch-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-ink-strong);
    box-shadow: 0 18px 44px -18px rgba(0,0,0,0.75), 0 0 0 1px rgba(201,151,74,0.14);
}
.dispatch-card .thumb { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--ink-3); }
.dispatch-card.size-lg .thumb { aspect-ratio: 16/10; }
.dispatch-card .thumb picture { display: block; width: 100%; height: 100%; }
.dispatch-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); display: block; }
.dispatch-card:hover .thumb img { transform: scale(1.06); }
.dispatch-card .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,15,0.85), transparent 55%); }
.dispatch-card.from-x { border-color: rgba(74, 90, 99, 0.45); }
.dispatch-card.from-medium { border-color: rgba(92, 110, 79, 0.45); }
.dispatch-card .card-body { padding: 18px 4px 4px; }
.dispatch-card .card-eyebrow { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; display: block; }
.dispatch-card h3 { font-family: 'Fraunces', serif; font-weight: 600; line-height: 1.25; color: var(--parchment-text); }
.dispatch-card.size-lg h3 { font-size: 26px; } .dispatch-card.size-md h3 { font-size: 19px; } .dispatch-card.size-sm h3 { font-size: 16px; }
.dispatch-card .card-dek {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted-on-ink);
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dispatch-card.size-sm .card-dek { display: none; }
.dispatch-card .card-meta { font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--muted-on-ink); margin-top: 10px; display: flex; gap: 10px; align-items: center; }
/* X badge reused on rail + cards */
.x-source-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 100px;
    background: rgba(20, 20, 15, 0.82); color: #EDE8DA;
    border: 1px solid rgba(237, 232, 218, 0.18);
    backdrop-filter: blur(8px);
}
.x-source-badge i { font-size: 11px; color: var(--brass); }
.dispatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; }
.dispatch-grid .span-4 { grid-column: span 4; } .dispatch-grid .span-3 { grid-column: span 3; } .dispatch-grid .span-2 { grid-column: span 2; }
@media (max-width: 860px) { .dispatch-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .dispatch-grid .span-4, .dispatch-grid .span-3, .dispatch-grid .span-2 { grid-column: span 2; } }

/* ===== Category pill ===== */
.cat-pill {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    padding: 8px 16px; border-radius: 100px;
    border: 1px solid var(--border-ink-strong);
    color: var(--muted-on-ink);
    background: rgba(20, 20, 15, 0.55);
    transition: all 0.25s; white-space: nowrap; cursor: pointer;
}
.cat-pill:hover { color: var(--parchment-text); border-color: rgba(201,151,74,0.35); background: rgba(201,151,74,0.08); }
.cat-pill.active {
    color: #16140C;
    background: linear-gradient(135deg, var(--accent), #D4A85A);
    border-color: transparent;
    box-shadow: 0 4px 14px -6px rgba(201, 151, 74, 0.5);
}

/* ===== Hero (homepage lead story) =====
   Panel kiri full-height cover, ditarik ke atas di bawah nav sticky. */
.hero-slot {
    margin-bottom: 28px;
    /* Naikkan hero di bawah sticky nav supaya panel lebih ke atas */
    margin-top: calc(-1 * var(--hero-under-nav, 64px));
    --hero-under-nav: 64px;
}
.hero-feature {
    position: relative;
    min-height: min(88vh, 860px);
    display: block;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    isolation: isolate;
}
@media (max-width: 720px) {
    .hero-slot { --hero-under-nav: 56px; }
    .hero-feature { min-height: min(74vh, 580px); border-radius: 0 0 14px 14px; }
    .skeleton-hero, .skeleton-hero-inner { min-height: min(74vh, 580px); }
}
.hero-feature picture { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Fade — kuat di kiri penuh (panel tinggi) */
.hero-feature::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            rgba(11,13,11,0.88) 0%,
            rgba(11,13,11,0.55) 34%,
            rgba(11,13,11,0.18) 58%,
            transparent 100%),
        linear-gradient(to top,
            rgba(11,13,11,0.94) 0%,
            rgba(11,13,11,0.4) 45%,
            rgba(11,13,11,0.18) 100%);
    z-index: 1;
}
/* Panel kiri: full height cover termasuk zona under-nav */
.hero-feature-content {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 2;
    width: auto !important;
    max-width: min(38rem, 48vw) !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    box-sizing: border-box;
    text-align: left;
}
/* Kotak glass full height — label + judul di atas, isi mengisi sisa, CTA di kaki */
.hero-content-glass {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding:
        calc(var(--hero-under-nav, 64px) + 14px)
        20px
        22px
        16px !important;
    border-radius: 0 20px 20px 0;
    background:
        linear-gradient(180deg,
            rgba(8, 8, 6, 0.62) 0%,
            rgba(10, 10, 8, 0.74) 32%,
            rgba(12, 12, 10, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: none;
    box-shadow:
        10px 0 44px -14px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    text-align: left;
    gap: 0.7rem;
    overflow: hidden;
}
/* Atas: label + judul + meta (langsung bertumpuk) */
.hero-glass-top {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
}
/* Tengah: paragraf lead mengisi sisa tinggi kotak */
.hero-glass-fill {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}
/* Kaki: tombol CTA menempel bawah panel */
.hero-glass-foot {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
    padding-top: 0.5rem;
}
.hero-content-glass::before { content: none; display: none; }
/* Legacy class (jika masih ada di cache HTML lama) */
.hero-glass-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    min-height: 0;
}
@media (max-width: 720px) {
    .hero-feature-content {
        max-width: min(94vw, 100%) !important;
    }
    .hero-content-glass {
        border-radius: 0 14px 14px 0;
        padding:
            calc(var(--hero-under-nav, 56px) + 12px)
            14px
            16px
            12px !important;
        gap: 0.5rem;
    }
    .hero-glass-top { gap: 0.4rem; }
    .hero-glass-fill { gap: 0.45rem; }
}
/* —— Tipografi hero —— */
.hero-feature .eyebrow {
    color: #fff !important;
    font-size: clamp(10px, 1.1vw, 11.5px);
    letter-spacing: 0.14em;
    opacity: 0.9;
    line-height: 1.3;
    max-width: 100%;
}
.hero-feature .eyebrow::before {
    background: #fff;
    opacity: 0.8;
    width: 18px;
    flex-shrink: 0;
}
.hero-feature h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.45rem, 2.6vw + 0.55rem, 2.65rem);
    line-height: 1.12;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: pretty;
    text-shadow: 0 8px 28px rgba(0,0,0,0.48);
    flex-shrink: 0;
}
/* Paragraf isi panel — mengisi kotak penuh */
.hero-feature .hero-lead-p {
    font-family: 'Source Serif 4', serif;
    font-size: clamp(0.9rem, 0.7vw + 0.55rem, 1.08rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.hero-feature .hero-lead-p.is-dek {
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.95rem, 0.75vw + 0.55rem, 1.12rem);
}
/* Fallback class lama */
.hero-feature .dek {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-size: clamp(0.9rem, 0.75vw + 0.55rem, 1.08rem);
    color: rgba(255,255,255,0.88);
    margin: 0;
    width: 100%;
    line-height: 1.5;
}
.hero-feature .hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: clamp(11px, 0.7vw + 8px, 12.5px);
    letter-spacing: 0.015em;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.35;
    box-sizing: border-box;
}
.hero-feature .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.hero-feature .hero-cta-row .btn-primary {
    padding: 11px 18px;
    font-size: clamp(12.5px, 0.6vw + 10px, 13.5px);
    border-radius: 10px;
    max-width: 100%;
    white-space: nowrap;
}
.hero-feature .eyebrow,
.hero-feature .hero-meta-row,
.hero-feature .hero-cta-row {
    flex-shrink: 0;
}

.route-line { position: absolute; z-index: 2; pointer-events: none; left: 4% !important; }
.route-line path { fill: none; stroke: var(--brass); stroke-width: 2; stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawRoute 2.2s cubic-bezier(0.65,0,0.35,1) 0.3s forwards; }
@media (prefers-reduced-motion: reduce) { .route-line path { stroke-dashoffset: 0; animation: none; } }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }

/* ===== Photo of the Day ===== */
.potd { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border: 1px solid var(--border-ink); border-radius: 8px; overflow: hidden; background: var(--ink-2); box-shadow: 0 12px 36px -22px rgba(0,0,0,0.65); }
@media (max-width: 860px) { .potd { grid-template-columns: 1fr; } }
.potd .potd-image { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.potd .potd-image picture { display: block; width: 100%; height: 100%; }
.potd .potd-image img { width: 100%; height: 100%; object-fit: cover; }
.potd .potd-text { padding: 40px 40px 40px 44px; border-left: 3px solid var(--brass); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 860px) { .potd .potd-text { border-left: none; border-top: 3px solid var(--brass); padding: 32px 28px; } }
.potd .potd-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-bottom: 16px; }
.potd .potd-caption { font-family: 'Fraunces', serif; font-size: 22px; line-height: 1.4; color: var(--parchment-text); font-weight: 500; white-space: pre-wrap; word-break: break-word; }
.potd .potd-credit { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted-on-ink); margin-top: 12px; }
.potd .potd-date { margin-top: 6px !important; opacity: 0.85; }
/* Instagram auto POTD — video + badges */
.potd-video-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #000; }
.potd-video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    background: #0c0d0b;
}
.potd-media-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 100px;
    background: rgba(20, 20, 15, 0.82); color: #EDE8DA;
    border: 1px solid rgba(237, 232, 218, 0.18);
    backdrop-filter: blur(8px);
}
.potd-media-badge i { color: var(--brass); font-size: 11px; }
.potd-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-top: 20px;
}
.potd-ig-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--brass); text-decoration: none;
    padding: 10px 14px; border-radius: 8px;
    border: 1px solid rgba(201, 151, 74, 0.35);
    background: rgba(201, 151, 74, 0.08);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.potd-ig-link:hover {
    background: rgba(201, 151, 74, 0.16);
    border-color: var(--brass);
    transform: translateY(-1px);
}
.potd--ig { border-color: rgba(201, 151, 74, 0.22); }

/* ===== Article Reader Page ===== */
.article-hero { position: relative; height: 72vh; min-height: 420px; display: flex; align-items: flex-end; isolation: isolate; }
.article-hero picture { position: absolute; inset: 0; display: block; }
.article-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,13,11,0.98) 10%, rgba(11,13,11,0.55) 52%, rgba(11,13,11,0.18) 100%); }
.article-hero-content { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 60px 24px 56px; text-align: left; width: 100%; }
.article-hero h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; color: #fff; }
.article-hero .dek { font-family: 'Source Serif 4', serif; font-style: italic; color: rgba(255,255,255,0.85); font-size: 1.15rem; margin-top: 16px; }
.byline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; font-family: 'Inter', sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.75); }
.byline-row .sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }

.reading-surface { background: var(--paper); color: var(--ink-text); border-radius: 10px; margin: -48px auto 0; position: relative; z-index: 3; max-width: 760px; padding: 56px clamp(24px, 6vw, 80px) 72px; box-shadow: 0 -16px 50px rgba(0,0,0,0.35), 0 20px 50px -30px rgba(0,0,0,0.45); }
.reading-surface p { font-size: 19px; line-height: 1.75; margin-bottom: 26px; color: var(--ink-text); }
.reading-surface p.lead::first-letter { font-family: 'Fraunces', serif; font-size: 4.2em; font-weight: 600; float: left; line-height: 0.8; padding: 0.05em 0.08em 0 0; color: var(--rust); }
.reading-surface h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; margin: 44px 0 20px; color: var(--ink-text); }
.reading-surface figure { margin: 40px -8px; }
.reading-surface figure img { width: 100%; border-radius: 4px; display: block; }
.reading-surface figcaption { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--muted-on-paper); margin-top: 10px; padding: 0 4px; }
.reading-surface blockquote { border-left: 3px solid var(--rust); padding: 4px 0 4px 28px; margin: 36px 0; font-family: 'Fraunces', serif; font-style: italic; font-size: 24px; line-height: 1.45; color: var(--ink-text); }
.reading-surface blockquote cite { display: block; font-family: 'Inter', sans-serif; font-style: normal; font-size: 12px; color: var(--muted-on-paper); margin-top: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.reading-surface .article-list { margin: 8px 0 28px; padding-left: 1.35em; color: var(--ink-text); }
.reading-surface .article-list li { font-size: 18px; line-height: 1.7; margin-bottom: 10px; padding-left: 0.25em; }
.reading-surface .article-list li::marker { color: var(--rust); }
.reading-surface ol.article-list { list-style: decimal; }
.reading-surface ul.article-list { list-style: disc; }
.x-article-source {
    margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border-paper);
}
.x-article-source-inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
    padding: 18px 20px; border-radius: 8px;
    background: linear-gradient(135deg, rgba(74,90,99,0.10), rgba(201,151,74,0.06));
    border: 1px solid rgba(74,90,99,0.22);
}
.x-article-source-inner > i.fab { font-size: 22px; color: var(--ink-text); flex-shrink: 0; }
.x-article-source-inner strong {
    display: block; font-family: 'Inter', sans-serif; font-size: 13.5px;
    color: var(--ink-text); margin-bottom: 4px;
}
.x-article-source-inner p {
    margin: 0; font-family: 'Inter', sans-serif; font-size: 12.5px;
    line-height: 1.45; color: var(--muted-on-paper);
}
.x-article-source-inner > div { flex: 1; min-width: 180px; }
.x-article-source-inner .btn-primary { flex-shrink: 0; white-space: nowrap; }
.reading-surface .article-video { position: relative; aspect-ratio: 16/9; margin: 40px -8px; border-radius: 4px; overflow: hidden; background: #000; }
.reading-surface .article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Inline links inside article body (paragraphs, headings, quotes) ===== */
.reading-surface a.inline-link { color: var(--rust); text-decoration: none; border-bottom: 1.5px solid rgba(162,62,46,0.4); transition: all 0.2s; font-weight: 500; padding: 0 1px; }
.reading-surface a.inline-link:hover { color: var(--brass); border-bottom-color: var(--brass); background: rgba(201,151,74,0.08); }
.reading-surface a.inline-link i { margin-right: 4px; font-size: 0.88em; }
.reading-surface a.inline-link.about-link { color: var(--brass); border-bottom-color: rgba(201,151,74,0.45); background: rgba(201,151,74,0.07); border-radius: 3px; padding: 1px 6px; }
.reading-surface a.inline-link.about-link:hover { background: rgba(201,151,74,0.18); }
.reading-surface a.inline-link.bare-url { font-family: 'Inter', sans-serif; font-size: 0.92em; word-break: break-all; }
.reading-surface .broken-link { color: var(--muted-on-paper); background: rgba(162,62,46,0.1); padding: 1px 6px; border-radius: 3px; font-family: 'Inter', sans-serif; font-size: 0.88em; border: 1px dashed rgba(162,62,46,0.35); }

/* ===== Standalone link block (button-style) ===== */
.reading-surface .article-link-block { display: flex; align-items: center; gap: 14px; margin: 28px 0; padding: 18px 22px; background: linear-gradient(135deg, rgba(201,151,74,0.10), rgba(201,151,74,0.03)); border: 1px solid rgba(201,151,74,0.35); border-left: 4px solid var(--brass); border-radius: 6px; color: var(--ink-text); text-decoration: none; font-family: 'Inter', sans-serif; font-size: 15.5px; font-weight: 600; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); position: relative; }
.reading-surface .article-link-block:hover { transform: translateX(4px); border-color: var(--brass); background: linear-gradient(135deg, rgba(201,151,74,0.18), rgba(201,151,74,0.06)); box-shadow: 0 8px 24px -10px rgba(201,151,74,0.4); }
.reading-surface .article-link-block > i { color: var(--brass); font-size: 20px; flex-shrink: 0; }
.reading-surface .article-link-block > span { flex: 1; line-height: 1.4; word-break: break-word; }
.reading-surface .article-link-block .link-from-about { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brass); color: #fff; font-size: 9px; flex-shrink: 0; }
.reading-surface .article-link-block .link-from-about i { color: #fff; font-size: 9px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border-paper); }
.tag-chip { font-family: 'Inter', sans-serif; font-size: 11.5px; padding: 6px 14px; border-radius: 100px; background: rgba(34,30,18,0.06); color: var(--muted-on-paper); }

/* ===== Related rail ===== */
.related-rail { margin: 0; padding: clamp(22px, 3.5vw, 36px); }
.related-rail.section-surface { margin-top: 0; }
.related-rail .dispatch-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}
.related-rail .dispatch-card.span-2 {
    grid-column: span 2;
}
.related-rail .dispatch-card.related-card {
    opacity: 1 !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #0f172a;
}
.related-rail .dispatch-card.related-card .card-eyebrow {
    color: #0f766e;
}
.related-rail .dispatch-card.related-card h3 {
    color: #042f2e !important;
}
.related-rail .dispatch-card.related-card .card-dek,
.related-rail .dispatch-card.related-card .card-meta {
    color: rgba(15, 23, 42, 0.62) !important;
}
.related-thumb-fallback {
    width: 100%;
    height: 100%;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(13, 148, 136, 0.22), rgba(4, 47, 46, 0.12));
    color: #0f766e;
    font-size: 2rem;
}
.related-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.related-empty p {
    font-family: 'Inter', sans-serif;
    color: var(--wl-muted, var(--muted-on-ink));
    max-width: 36rem;
    margin: 0;
}
body.theme-wanderlust .related-rail .dispatch-card.related-card {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    opacity: 1 !important;
}

/* ===== About page (portfolio) ===== */
.workshop-card { position: relative; border-radius: 8px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--border-ink); transition: all 0.35s; padding: 28px; box-shadow: 0 12px 36px -22px rgba(0,0,0,0.6); }
.workshop-card:hover { border-color: var(--border-ink-strong); transform: translateY(-3px); }
.workshop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 700px) { .workshop-grid { grid-template-columns: 1fr; } }
.gh-badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 11.5px; padding: 5px 11px; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-ink); color: var(--muted-on-ink); }
.gh-badge i { color: var(--brass); }
.link-row { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 8px; border: 1px solid var(--border-ink); background: var(--ink-2); transition: all 0.25s; }
.link-row:hover { border-color: var(--brass); background: rgba(201,151,74,0.05); }
.link-row .icon-box { width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--brass-soft); color: var(--brass); font-size: 17px; flex-shrink: 0; }

/* ===== Search Palette ===== */
.search-fab { position: fixed; bottom: 24px; left: 24px; width: 54px; height: 54px; border-radius: 100px; background: rgba(27, 26, 19, 0.94); border: 1px solid var(--border-ink-strong); display: flex; align-items: center; justify-content: center; color: var(--brass); font-size: 17px; z-index: 50; transition: all 0.3s; box-shadow: 0 8px 28px -12px rgba(0,0,0,0.7); }
.search-fab:hover { transform: scale(1.06); border-color: var(--brass); }
.back-to-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 100px; background: rgba(27, 26, 19, 0.94); border: 1px solid var(--border-ink-strong); color: var(--parchment-text); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(10px); transition: all 0.3s; z-index: 45; box-shadow: 0 8px 28px -12px rgba(0,0,0,0.7); }
.back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.admin-fab { position: fixed; bottom: 90px; right: 24px; width: 48px; height: 48px; border-radius: 100px; background: rgba(27, 26, 19, 0.94); border: 1px solid var(--border-ink-strong); color: var(--muted-on-ink); display: flex; align-items: center; justify-content: center; font-size: 15px; z-index: 50; transition: all 0.3s; box-shadow: 0 8px 28px -12px rgba(0,0,0,0.7); }
.admin-fab:hover { color: var(--brass); border-color: var(--brass); }

#searchModal .modal-content { max-width: 620px; width: 100%; padding: 0; background: var(--ink-2); border: 1px solid var(--border-ink-strong); overflow: hidden; }
.search-input-row { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--border-ink); }
.search-input-row i { color: var(--muted-on-ink); font-size: 15px; }
.search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--parchment-text); font-family: 'Inter', sans-serif; font-size: 16px; }
.search-input::placeholder { color: var(--muted-on-ink); }
.search-hint { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--muted-on-ink); border: 1px solid var(--border-ink-strong); padding: 2px 7px; border-radius: 4px; }
.search-results { max-height: 400px; overflow-y: auto; padding: 10px; }
.search-result-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 6px; background: none; border: none; color: var(--parchment-text); font-family: 'Inter', sans-serif; }
.search-result-item:hover, .search-result-item.active-result { background: rgba(255,255,255,0.05); }
.search-result-item .sr-icon { width: 34px; height: 34px; border-radius: 6px; background: var(--brass-soft); color: var(--brass); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.search-result-item .sr-label { font-size: 13.5px; font-weight: 500; }
.search-result-item .sr-meta { font-size: 11px; color: var(--muted-on-ink); }
.search-empty { padding: 40px 20px; text-align: center; color: var(--muted-on-ink); font-family: 'Inter', sans-serif; font-size: 13.5px; }

/* ===== Modals (admin forms) ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(10,10,7,0.82); backdrop-filter: blur(10px); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; padding: 20px; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { position: relative; background: var(--ink-2); border: 1px solid var(--border-ink-strong); border-radius: 8px; padding: 32px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; transform: scale(0.96) translateY(16px); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); font-family: 'Inter', sans-serif; }
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
.input-field { background: rgba(255,255,255,0.03); border: 1px solid var(--border-ink-strong); border-radius: 4px; padding: 13px 15px; color: var(--parchment-text); width: 100%; transition: all 0.2s; font-family: 'Inter', sans-serif; font-size: 14.5px; }
.input-field:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.block-editor-item { border: 1px solid var(--border-ink-strong); border-radius: 6px; padding: 14px; margin-bottom: 10px; background: rgba(255,255,255,0.02); }
.block-editor-item .block-type-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.block-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.block-add-btn { font-family: 'Inter', sans-serif; font-size: 12px; padding: 8px 14px; border-radius: 4px; border: 1px dashed var(--border-ink-strong); color: var(--muted-on-ink); background: transparent; }
.block-add-btn:hover { border-color: var(--brass); color: var(--brass); }

/* ===== Case Study / Project detail modal ===== */
.case-study-content { max-width: 600px; padding: 0 !important; overflow: hidden; }
.case-study-image { width: 100%; max-height: 300px; object-fit: cover; display: block; background: #000; }
.case-study-body { padding: 26px 28px 28px; }
.modal-close-btn { position: absolute; top: 16px; right: 16px; z-index: 20; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; }
.modal-close-btn:hover { background: var(--brass); color: #16140C; }

/* ===== Toast ===== */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%); padding: 14px 24px; background: var(--ink-2); border: 1px solid var(--border-ink-strong); border-left: 3px solid var(--brass); border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); z-index: 200; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); display: flex; align-items: center; gap: 12px; font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--parchment-text); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { border-left-color: var(--rust); } .toast.success { border-left-color: var(--brass); }

/* ===== Admin edit/delete controls ===== */
.admin-only { display: none !important; }
body.admin-mode .admin-only { display: inline-flex !important; }
body.admin-mode div.admin-only,
body.admin-mode #articleAdminControls { display: flex !important; gap: 10px; }
body.admin-mode button.admin-only.cat-pill { display: inline-flex !important; }
body.admin-mode .admin-fab { display: flex !important; }
.edit-btn, .delete-btn { position: absolute; top: 12px; width: 32px; height: 32px; border-radius: 6px; display: none; align-items: center; justify-content: center; transition: all 0.2s; z-index: 10; font-size: 12px; cursor: pointer; }
.delete-btn { right: 12px; background: rgba(162,62,46,0.15); color: var(--rust); border: 1px solid rgba(162,62,46,0.3); }
.edit-btn { right: 52px; background: var(--brass-soft); color: var(--brass); border: 1px solid rgba(201,151,74,0.3); }
.admin-mode .delete-btn, .admin-mode .edit-btn { display: flex; }
.delete-btn:hover { background: var(--rust); color: #fff; } .edit-btn:hover { background: var(--brass); color: #16140C; }

/* ===== Sprint 3 micro-interactions ===== */
a.dispatch-card, a.x-card, .workshop-card, .link-row, .video-card {
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .dispatch-card:hover h3 { color: #fff; }
  .x-card:hover h3 { color: #fff; }
}
/* Smooth section surface entrance already via .reveal */
.section-surface {
  transition: border-color 0.3s, box-shadow 0.35s;
}
.section-surface:hover {
  border-color: rgba(201, 151, 74, 0.18);
  box-shadow:
    0 20px 52px -28px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(201, 151, 74, 0.07);
}
/* Prefer reduced motion — kill shimmer & hover lifts */
@media (prefers-reduced-motion: reduce) {
  .skeleton-block, .skeleton-line { animation: none !important; }
  .dispatch-card:hover, .x-card:hover, .video-card:hover, .workshop-card:hover,
  .btn-primary:hover, .btn-ghost:hover {
    transform: none !important;
  }
  .img-fade { opacity: 1; transition: none; }
}

/* ===== Watch page: video cards, shorts shelf, lightbox ===== */
.shorts-shelf {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 6px 4px 18px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-ink-strong) transparent;
}
.shorts-shelf::-webkit-scrollbar { height: 6px; }
.shorts-shelf::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 10px; }
.shorts-shelf::-webkit-scrollbar-thumb { background: var(--border-ink-strong); border-radius: 10px; }

.video-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ink-3);
    border: 1px solid var(--border-ink);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.35s;
    cursor: pointer;
}
.video-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 151, 74, 0.35);
    box-shadow: 0 16px 40px -20px rgba(0,0,0,0.7);
}
.video-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.video-card.portrait {
    flex: 0 0 auto;
    width: 200px;
    aspect-ratio: 9 / 16;
    scroll-snap-align: start;
}
@media (max-width: 640px) { .video-card.portrait { width: 168px; } }
.video-card.landscape { aspect-ratio: 16 / 9; width: 100%; }
.video-card .vthumb-wrap { position: relative; width: 100%; height: 100%; background: var(--ink); }
.video-card .vthumb-wrap img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.video-card:hover .vthumb-wrap img { transform: scale(1.04); }
.video-card .vplay-badge {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, rgba(0,0,0,0.08), rgba(0,0,0,0.5));
    opacity: 0; transition: opacity 0.25s;
}
.video-card:hover .vplay-badge,
.video-card:focus-visible .vplay-badge { opacity: 1; }
.video-card .vplay-badge i {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(241,236,221,0.96); color: var(--ink);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.video-card .vtype-chip {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 100px;
    background: rgba(20,20,15,0.78); color: var(--brass);
    border: 1px solid rgba(201,151,74,0.35);
    backdrop-filter: blur(6px);
}
.video-card .vcaption-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 32px 14px 12px;
    background: linear-gradient(to top, rgba(15,14,10,0.96) 30%, transparent);
    color: var(--parchment-text);
    font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.4;
    font-weight: 500;
}
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .video-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px) { .video-grid { grid-template-columns: 1fr; } }

#videoLightboxModal .modal-content { background: transparent; border: none; box-shadow: none; padding: 0; max-width: 96vw; overflow: visible; }
.vlb-frame { position: relative; margin: 0 auto; border-radius: 8px; overflow: hidden; background: #000; }
.vlb-frame.landscape { width: min(90vw, 900px); aspect-ratio: 16 / 9; }
.vlb-frame.portrait { height: min(85vh, 760px); width: auto; aspect-ratio: 9 / 16; }
.vlb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlb-caption { text-align: center; color: var(--muted-on-ink); font-family: 'Inter', sans-serif; font-size: 13px; margin-top: 14px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* Portrait video embedded inline inside a dispatch article */
.reading-surface .article-video.portrait { aspect-ratio: 9 / 16; max-width: 380px; margin: 40px auto; }

/* ===== Footer ===== */
.site-footer {
    border-top: 1px solid rgba(201, 151, 74, 0.12);
    margin-top: 8px;
    background: rgba(14, 14, 11, 0.94);
    backdrop-filter: blur(14px);
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 28px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 28px 32px;
    font-family: 'Inter', sans-serif;
}
@media (max-width: 800px) {
    .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}
.footer-brand .footer-logo {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.footer-brand .footer-logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.footer-brand .footer-name {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: var(--parchment-text);
}
.footer-brand .footer-tagline {
    font-family: 'Fraunces', serif; font-style: italic; font-size: 14px;
    color: var(--muted-on-ink); line-height: 1.45; max-width: 28rem; margin: 0;
}
.footer-col-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brass); margin: 0 0 14px;
}
.footer-nav, .footer-social {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.footer-nav a, .footer-social a {
    color: var(--muted-on-ink); font-size: 13.5px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px; transition: color 0.2s;
}
.footer-nav a:hover, .footer-social a:hover { color: var(--brass); }
.footer-social a i { width: 18px; text-align: center; color: var(--brass); opacity: 0.85; }
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px 28px;
    border-top: 1px solid var(--border-ink);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
    font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted-on-ink);
}

/* ===== Sprint full: a11y, empty states, live, article tools, sticky filters ===== */
.skip-link {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--brass);
    color: #16140C;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }

.offline-banner {
    position: sticky;
    top: 0;
    z-index: 55;
    text-align: center;
    padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(90deg, rgba(162,62,46,0.95), rgba(201,151,74,0.9));
    color: #16140C;
}
.offline-banner.hidden { display: none !important; }

.btn-sm {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--parchment-text);
    background: rgba(74, 90, 99, 0.25);
    border: 1px solid rgba(74, 90, 99, 0.45);
    padding: 7px 12px;
    border-radius: 100px;
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #5CDB7A;
    box-shadow: 0 0 0 0 rgba(92, 219, 122, 0.6);
    animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(92, 219, 122, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(92, 219, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(92, 219, 122, 0); }
}
.x-live-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.empty-state {
    text-align: center;
    padding: 36px 20px 28px;
    font-family: 'Inter', sans-serif;
}
.empty-icon {
    width: 56px; height: 56px; margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brass-soft); color: var(--brass); font-size: 20px;
}
.empty-title {
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1.35rem; color: var(--parchment-text); margin: 0 0 8px;
}
.empty-text {
    color: var(--muted-on-ink); font-size: 13.5px; line-height: 1.5;
    max-width: 28rem; margin: 0 auto 18px;
}

.filter-bar {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 1.75rem;
}
.sticky-filters {
    position: sticky;
    top: 68px;
    z-index: 15;
    padding: 10px 0 12px;
    margin-left: -4px; margin-right: -4px;
    padding-left: 4px; padding-right: 4px;
    background: linear-gradient(180deg, rgba(22,21,16,0.98) 60%, rgba(22,21,16,0.85));
    backdrop-filter: blur(8px);
}

/* Article extras */
.article-toc {
    margin: 0 0 28px;
    padding: 16px 18px;
    border-radius: 10px;
    background: rgba(34,30,18,0.05);
    border: 1px solid var(--border-paper);
}
.article-toc-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted-on-paper); margin: 0 0 10px;
}
.article-toc ol {
    margin: 0; padding-left: 1.2em;
    font-family: 'Inter', sans-serif; font-size: 14px;
}
.article-toc li { margin: 6px 0; }
.article-toc a {
    color: var(--ink-text); text-decoration: none;
    border-bottom: 1px solid transparent;
}
.article-toc a:hover { color: var(--rust); border-bottom-color: rgba(162,62,46,0.35); }

.article-share {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 28px; padding-top: 22px;
    border-top: 1px solid var(--border-paper);
}
.article-share .share-label {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted-on-paper); margin-bottom: 2px;
}
.share-btn {
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600;
    padding: 9px 14px; border-radius: 8px;
    border: 1px solid var(--border-paper);
    background: rgba(34,30,18,0.04);
    color: var(--ink-text);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all 0.2s;
}
.share-btn:hover { border-color: var(--brass); color: var(--rust); background: rgba(201,151,74,0.08); }

.byline-extra {
    font-size: 12px;
    opacity: 0.85;
}

.admin-status {
    display: none;
    align-items: center; gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 600;
    color: var(--brass);
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(201,151,74,0.3);
    background: rgba(201,151,74,0.08);
}
body.admin-mode .admin-status { display: inline-flex; }
.admin-status i { font-size: 11px; }

/* Stronger journal mood scrim for consistency */
body.has-living-bg .living-bg-veil {
    background: rgba(12, 14, 12, 0.55);
}
@media (max-width: 720px) {
    body.has-living-bg .living-bg-veil { background: rgba(12, 14, 12, 0.58); }
    .sticky-filters { top: 58px; }
}

/* Focus trap helper outline for modals */
.modal-overlay.active .modal-content:focus { outline: none; }
.modal-overlay.active .modal-content {
    box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,151,74,0.12);
}

/* ===== Telegram feed page ===== */
.tg-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.tg-feed {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 860px) {
    .tg-feed { grid-template-columns: 1fr 1fr; }
}
.tg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(36, 40, 44, 0.95), rgba(22, 21, 16, 0.98));
    border: 1px solid rgba(74, 90, 99, 0.42);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.25s, box-shadow 0.3s;
}
.tg-card:hover {
    transform: translateY(-2px);
    border-color: rgba(86, 161, 223, 0.55);
    box-shadow: 0 14px 36px -16px rgba(0,0,0,0.6);
}
.tg-card:focus-visible {
    outline: 2px solid #56A1DF;
    outline-offset: 2px;
}
.tg-card-permalink {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(20, 20, 15, 0.85);
    border: 1px solid rgba(86, 161, 223, 0.45);
    color: #56A1DF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    z-index: 2;
    transition: background 0.2s, transform 0.2s;
}
.tg-card-permalink:hover {
    background: rgba(86, 161, 223, 0.18);
    transform: scale(1.08);
}
.tg-card-photo {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0c0d0b;
    overflow: hidden;
}
.tg-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.tg-card:hover .tg-card-photo img { transform: scale(1.04); }
.tg-photo-count {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.tg-card-body {
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.tg-card-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--parchment-text);
    word-break: break-word;
    overflow-wrap: anywhere;
    /* cap tinggi supaya card konsisten — sisa text bisa di-expand di post asli */
    max-height: 14em;
    overflow: hidden;
    position: relative;
}
.tg-card-text::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 32px;
    background: linear-gradient(to top, rgba(22, 21, 16, 0.96), transparent);
    pointer-events: none;
}
.tg-card-text--muted { color: var(--muted-on-ink); font-style: italic; }
.tg-card-text a.inline-link {
    color: #56A1DF;
    text-decoration: none;
    border-bottom: 1px solid rgba(86, 161, 223, 0.4);
    word-break: break-all;
}
.tg-card-text a.inline-link:hover { border-bottom-color: #56A1DF; }
.tg-card-text b, .tg-card-text strong { color: #fff; font-weight: 700; }
.tg-card-text code, .tg-card-text pre {
    font-family: 'Sarasa Mono SC', 'Consolas', monospace;
    background: rgba(0,0,0,0.35);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
}
.tg-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(86, 161, 223, 0.08);
    border: 1px solid rgba(86, 161, 223, 0.28);
    border-radius: 8px;
    color: #56A1DF;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    transition: background 0.2s, border-color 0.2s;
    word-break: break-all;
}
.tg-card-link:hover {
    background: rgba(86, 161, 223, 0.15);
    border-color: rgba(86, 161, 223, 0.55);
}
.tg-card-link i { flex-shrink: 0; }
.tg-card-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tg-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--muted-on-ink);
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.tg-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.tg-meta-item i { font-size: 10.5px; opacity: 0.7; }
.tg-meta-rel { opacity: 0.65; }
@media (max-width: 720px) {
    .tg-card-text { font-size: 14px; max-height: 12em; }
    .tg-card-body { padding: 14px 16px 14px; }
}

/* ============================================================
   UI POLISH v21 — desktop + mobile content presentation
   ============================================================ */

/* Safe-area + base rhythm */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* Wider, airier journal stack on large desktops */
@media (min-width: 1280px) {
    .journal-stack {
        max-width: 1240px;
        gap: 34px;
        padding: 0 28px 96px;
    }
    .nav-inner { max-width: 1240px; }
    .footer-inner, .footer-bottom { max-width: 1240px; }
}

/* Section surfaces — richer frame without heavy blur */
.section-surface {
    background:
        linear-gradient(165deg, rgba(32, 30, 22, 0.98) 0%, rgba(18, 17, 13, 0.99) 55%, rgba(16, 15, 12, 1) 100%);
    border: 1px solid rgba(237, 232, 218, 0.10);
    border-radius: 18px;
    box-shadow:
        0 22px 56px -30px rgba(0, 0, 0, 0.82),
        0 0 0 1px rgba(201, 151, 74, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.section-surface::before {
    content: '';
    display: block;
    height: 2px;
    margin: -2px 0 18px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 151, 74, 0.55) 18%,
        rgba(224, 176, 103, 0.35) 48%,
        transparent 100%);
    opacity: 0.85;
}
.section-surface-head { margin-bottom: 26px; gap: 18px; }
.section-title {
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    letter-spacing: -0.02em;
}
.section-sub {
    font-size: 14px;
    line-height: 1.55;
    max-width: 40rem;
}

/* Hero polish — tinggi + CTA (posisi kiri sudah di rule base di atas) */
.hero-slot { margin-bottom: 10px; /* keep --hero-under-nav + negative margin from base */ }
.hero-feature {
    min-height: min(88vh, 860px);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 28px 70px -40px rgba(0, 0, 0, 0.85);
}
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
.hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
}

/* Photo of the Day polish */
.potd {
    border-radius: 14px;
    border-color: rgba(201, 151, 74, 0.16);
    box-shadow: 0 16px 44px -24px rgba(0, 0, 0, 0.7);
}
.potd .potd-caption {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    line-height: 1.45;
}
.potd .potd-image img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.potd:hover .potd-image img { transform: scale(1.03); }

/* X / Medium rail — fuller cards, edge fade, better mobile width */
.x-rail {
    gap: 18px;
    padding: 4px 2px 14px;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
}
.x-card {
    flex: 0 0 min(300px, 82vw);
    border-radius: 16px;
    background:
        linear-gradient(165deg, rgba(42, 46, 50, 0.96), rgba(20, 19, 15, 0.99));
    border: 1px solid rgba(237, 232, 218, 0.10);
    box-shadow:
        0 14px 36px -22px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.x-card.from-medium {
    border-color: rgba(92, 110, 79, 0.42);
    background: linear-gradient(165deg, rgba(36, 44, 36, 0.96), rgba(18, 20, 16, 0.99));
}
.x-card.from-x {
    border-color: rgba(74, 90, 99, 0.48);
}
.x-card:hover {
    transform: translateY(-5px);
    border-color: rgba(201, 151, 74, 0.5);
    box-shadow:
        0 20px 48px -18px rgba(0, 0, 0, 0.78),
        0 0 0 1px rgba(201, 151, 74, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.x-card .x-thumb { aspect-ratio: 16 / 10.5; }
.x-card .x-body { padding: 16px 16px 18px; gap: 10px; }
.x-card .x-body h3 {
    font-size: 17px;
    line-height: 1.32;
    letter-spacing: -0.01em;
}
.x-card .x-dek { font-size: 12.5px; line-height: 1.5; }
.x-card .x-meta {
    font-size: 11.5px;
    opacity: 0.92;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
}
.x-source-badge {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.55);
}
.x-card.from-medium .x-source-badge i { color: #8fba7a; }
.x-card.from-x .x-source-badge i { color: var(--brass); }

/* Dispatch grid — magazine feel */
.dispatch-grid { gap: 26px; }
.dispatch-card {
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(30, 28, 22, 0.98), rgba(20, 19, 14, 1));
    border: 1px solid rgba(237, 232, 218, 0.09);
    box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.75);
}
.dispatch-card .card-body { padding: 18px 6px 6px; }
.dispatch-card h3 { letter-spacing: -0.015em; }
.dispatch-card.size-lg h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.dispatch-card.size-md h3 { font-size: 1.15rem; }
.dispatch-card .card-dek { font-size: 13px; line-height: 1.5; }
.dispatch-card:hover {
    transform: translateY(-5px);
    border-color: rgba(201, 151, 74, 0.28);
}
.dispatch-card .thumb { border-radius: 12px 12px 0 0; }

/* Category pills — chip tray */
.filter-bar {
    gap: 8px;
    padding-bottom: 4px;
}
.cat-pill {
    padding: 9px 16px;
    font-size: 12.5px;
    backdrop-filter: blur(6px);
}
.sticky-filters {
    top: 66px;
    background: linear-gradient(180deg, rgba(18, 17, 13, 0.97) 55%, rgba(18, 17, 13, 0.82));
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 1.5rem;
}

/* Live pill polish */
.live-pill {
    background: rgba(92, 219, 122, 0.08);
    border-color: rgba(92, 219, 122, 0.28);
    color: rgba(237, 232, 218, 0.92);
}

/* Buttons */
.btn-primary {
    border-radius: 10px;
    padding: 13px 24px;
    box-shadow: 0 8px 22px -10px rgba(201, 151, 74, 0.55);
}
.btn-ghost { border-radius: 10px; }

/* Article reader — immersive hero + paper */
.article-hero {
    height: min(74vh, 680px);
    min-height: 380px;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}
.article-hero::after {
    background: linear-gradient(to top,
        rgba(11, 13, 11, 0.98) 8%,
        rgba(11, 13, 11, 0.62) 48%,
        rgba(11, 13, 11, 0.2) 100%);
}
.article-hero-content {
    max-width: 860px;
    padding: 56px 24px 52px;
}
.article-hero h1 {
    font-size: clamp(1.9rem, 5.2vw, 3.7rem);
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.reading-surface {
    max-width: 780px;
    margin-top: -56px;
    border-radius: 16px;
    padding: 52px clamp(22px, 5.5vw, 76px) 68px;
    box-shadow:
        0 -18px 56px rgba(0, 0, 0, 0.38),
        0 24px 56px -28px rgba(0, 0, 0, 0.42);
}
.reading-surface p {
    font-size: clamp(17.5px, 1.35vw, 19.5px);
    line-height: 1.78;
}
.reading-surface h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    margin-top: 2.6rem;
    letter-spacing: -0.015em;
}
.reading-surface figure {
    margin: 36px -4px;
    border-radius: 10px;
    overflow: hidden;
}
.reading-surface figure img {
    border-radius: 10px;
    box-shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.35);
}
.reading-surface blockquote {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    padding-left: 24px;
    border-left-width: 3.5px;
}
.x-article-source-inner {
    border-radius: 12px;
    padding: 18px 20px;
}
.tag-chip {
    transition: background 0.2s, color 0.2s;
}
.tag-chip:hover {
    background: rgba(201, 151, 74, 0.12);
    color: var(--ink-text);
}

/* Related rail spacing */
.related-rail .section-title { margin-bottom: 1.25rem; }

/* Nav polish */
.site-nav {
    border-bottom-color: rgba(201, 151, 74, 0.16);
}
.nav-inner { padding: 12px 22px; }
.brand-name { font-size: 18.5px; }

/* Footer breathing room */
.site-footer { margin-top: 12px; }
.footer-inner { padding: 44px 24px 30px; }

/* FABs — safe area + mobile conflict avoid */
.search-fab, .back-to-top, .admin-fab {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.search-fab { left: calc(16px + env(safe-area-inset-left, 0px)); }
.back-to-top, .admin-fab { right: calc(16px + env(safe-area-inset-right, 0px)); }
.admin-fab { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

/* Telegram cards parity */
.tg-card { border-radius: 16px; }
.tg-card-body { padding: 18px 18px 16px; }

/* Video cards */
.video-card { border-radius: 14px; }

/* ===== MOBILE — content first, dense but premium ===== */
@media (max-width: 860px) {
    .journal-stack {
        padding: 0 12px 88px;
        gap: 18px;
    }
    .section-surface {
        border-radius: 16px;
        padding: 18px 14px 20px;
        box-shadow: 0 14px 36px -24px rgba(0, 0, 0, 0.75);
    }
    .section-surface::before { margin-bottom: 12px; }
    .section-surface-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }
    .section-title { font-size: 1.55rem; margin-top: 8px; }
    .section-sub { font-size: 13px; margin-top: 6px; }
    .x-live-meta { justify-content: space-between; width: 100%; }

    .hero-feature {
        min-height: min(76vh, 600px);
        border-radius: 0 0 16px 16px;
    }
    .hero-feature-content {
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        max-width: min(90vw, 100%) !important;
    }
    .hero-content-glass {
        width: 100% !important;
        min-height: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 12px 12px 0;
    }
    .hero-feature h1 {
        font-size: clamp(1.35rem, 5.8vw, 1.85rem);
        line-height: 1.12;
    }
    .hero-feature .dek {
        font-size: 0.88rem;
        max-width: 100%;
        -webkit-line-clamp: 3;
    }
    .hero-cta-row .btn-primary {
        width: auto;
        justify-content: center;
        padding: 10px 16px;
        font-size: 13px;
    }

    .potd .potd-text { padding: 22px 18px; }
    .potd .potd-caption { font-size: 1.15rem; }

    /* Horizontal rails: peek next card */
    .x-rail {
        gap: 12px;
        margin: 0 -4px;
        padding: 2px 8px 12px 4px;
        mask-image: none;
        -webkit-mask-image: none;
        scroll-padding-inline: 4px;
    }
    .x-card {
        flex: 0 0 min(78vw, 280px);
        border-radius: 14px;
    }
    .x-card .x-body { padding: 13px 13px 14px; gap: 7px; }
    .x-card .x-body h3 { font-size: 15.5px; -webkit-line-clamp: 3; }
    .x-card .x-dek { -webkit-line-clamp: 2; font-size: 12px; }
    .x-card:hover { transform: none; } /* touch: no sticky hover lift */

    /* Dispatch: 1-col on small phones, 2-col from ~480 */
    .dispatch-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .dispatch-grid .span-4,
    .dispatch-grid .span-3,
    .dispatch-grid .span-2 {
        grid-column: span 1;
    }
    .dispatch-card .thumb { aspect-ratio: 16 / 10; }
    .dispatch-card.size-lg .thumb { aspect-ratio: 16 / 10; }
    .dispatch-card h3,
    .dispatch-card.size-lg h3,
    .dispatch-card.size-md h3,
    .dispatch-card.size-sm h3 {
        font-size: 1.12rem;
    }
    .dispatch-card .card-dek { display: -webkit-box; }
    .dispatch-card .card-body { padding: 14px 2px 2px; }
    .dispatch-card:hover { transform: none; }

    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
        margin-bottom: 1rem;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .cat-pill { flex: 0 0 auto; }
    .sticky-filters {
        top: 56px;
        margin-left: -6px;
        margin-right: -6px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .article-hero {
        height: auto;
        min-height: 52vh;
        max-height: 62vh;
        border-radius: 0;
    }
    .article-hero-content {
        padding: 36px 16px 40px;
    }
    .article-hero h1 {
        font-size: clamp(1.65rem, 7.5vw, 2.2rem);
    }
    .article-hero .dek { font-size: 1rem; }
    .byline-row {
        gap: 8px 10px;
        font-size: 12px;
        margin-top: 18px;
    }
    .reading-surface {
        margin: -36px 10px 0;
        border-radius: 14px;
        padding: 28px 18px 40px;
        max-width: none;
    }
    .reading-surface p {
        font-size: 17px;
        line-height: 1.72;
        margin-bottom: 20px;
    }
    .reading-surface p.lead::first-letter {
        font-size: 3.4em;
        padding-right: 0.06em;
    }
    .reading-surface h2 {
        font-size: 1.35rem;
        margin: 32px 0 14px;
    }
    .reading-surface figure { margin: 28px 0; }
    .reading-surface blockquote {
        font-size: 1.15rem;
        padding-left: 16px;
        margin: 28px 0;
    }
    .reading-surface .article-list li { font-size: 16.5px; }
    .x-article-source-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        text-align: left;
    }
    .x-article-source-inner .btn-primary {
        width: 100%;
        justify-content: center;
    }
    .article-share .share-btn { flex: 1 1 auto; justify-content: center; }

    .nav-inner { padding: 10px 14px; }
    .brand-name { font-size: 16.5px; }
    .mobile-nav-panel {
        width: min(86vw, 340px);
        padding: 88px 20px 32px;
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    }

    .footer-inner { padding: 32px 16px 22px; gap: 20px; }
    .footer-bottom { padding: 14px 16px 24px; }

    .search-fab, .back-to-top {
        width: 48px; height: 48px;
    }
    .empty-state { padding: 28px 12px 20px; }
    .tg-feed { gap: 12px; }
}

/* Small phones */
@media (max-width: 480px) {
    .journal-stack { padding: 0 10px 96px; gap: 14px; }
    .section-surface { padding: 16px 12px 18px; border-radius: 14px; }
    .x-card { flex: 0 0 84vw; }
    .hero-feature { min-height: min(70vh, 480px); }
    .live-pill { font-size: 11px; padding: 6px 10px; }
    .btn-sm { padding: 8px 12px !important; }
}

/* Mid tablet — 2-col dispatch back */
@media (min-width: 481px) and (max-width: 860px) {
    .dispatch-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .dispatch-grid .span-4,
    .dispatch-grid .span-3,
    .dispatch-grid .span-2 {
        grid-column: span 1;
    }
    .dispatch-grid .span-4:first-child {
        grid-column: 1 / -1;
    }
}

/* Desktop: panel full-height cover, ujung kiri, lebih ke atas */
@media (min-width: 861px) {
    .hero-slot { --hero-under-nav: 68px; }
    .hero-feature-content {
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        max-width: min(38rem, 44vw) !important;
    }
    .hero-content-glass {
        width: 100% !important;
        min-height: 100% !important;
        height: 100% !important;
        border-radius: 0 22px 22px 0;
    }
    .hero-feature h1 {
        font-size: clamp(1.55rem, 2.4vw + 0.4rem, 2.55rem);
    }
    .hero-feature .dek {
        font-size: clamp(0.9rem, 0.7vw + 0.55rem, 1.05rem);
        max-width: 100%;
    }
}
@media (min-width: 1280px) {
    .hero-slot { --hero-under-nav: 72px; }
    .hero-feature {
        min-height: min(90vh, 900px);
    }
    .hero-feature-content {
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        max-width: min(36rem, 38vw) !important;
    }
    .hero-content-glass {
        padding:
            calc(var(--hero-under-nav, 72px) + 20px)
            26px
            32px
            18px !important;
    }
    .hero-feature h1 {
        font-size: clamp(1.7rem, 2.1vw + 0.45rem, 2.75rem);
    }
    .hero-feature .dek {
        font-size: 1.02rem;
        max-width: 100%;
        -webkit-line-clamp: 5;
    }
}
.article-hero-content {
    padding-left: 24px;
    padding-right: 24px;
}

/* Prefer reduced motion — keep polish static */
@media (prefers-reduced-motion: reduce) {
    .potd:hover .potd-image img,
    .x-card:hover .x-thumb img,
    .dispatch-card:hover .thumb img {
        transform: none !important;
    }
    .hero-content-glass {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(12, 12, 10, 0.72);
    }
}

/* High-DPI subtle sharpening on text */
@media (min-resolution: 2dppx) {
    .section-title, .hero-feature h1, .article-hero h1, .x-card .x-body h3 {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
}

/* ============================================================
   MOBILE PREMIUM OVERHAUL (patch-9, Aug 2026)
   Target: ≤860px. Principles:
   1. Touch-first: semua interactive min 44×44px
   2. Dense but breathable: 16px gutter, 8px internal rhythm
   3. Typography scale: clamp() fluid, larger body, smaller display
   4. Consistent radius 16px, subtle dividers antar section
   5. Safe-area-aware (notch, home indicator)
   ============================================================ */
@media (max-width: 860px) {
    /* ===== Navbar: taller, bigger touch targets ===== */
    .nav-inner {
        padding: 10px 14px;
        min-height: 56px;
        gap: 10px;
    }
    .brand-mark { width: 30px; height: 30px; }
    .brand-name { font-size: 16.5px; }
    .brand { gap: 9px; }
    .nav-icon-btn {
        width: 44px; height: 44px;
        border-radius: 12px;
        font-size: 15px;
    }
    .mobile-menu-btn { width: 44px; height: 44px; }

    /* ===== Mobile nav panel: full-height, bigger links ===== */
    .mobile-nav-panel {
        width: min(82vw, 320px);
        padding: 96px 18px calc(28px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
    }
    .mobile-nav-panel .nav-link {
        font-size: 16px;
        padding: 16px 18px;
        border-radius: 12px;
        min-height: 52px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .mobile-nav-panel .nav-link i { font-size: 17px; width: 22px; text-align: center; }
    .mobile-nav-panel .nav-link.active {
        background: linear-gradient(135deg, rgba(201,151,74,0.18), rgba(201,151,74,0.06));
        border: 1px solid rgba(201,151,74,0.3);
        color: var(--brass);
    }

    /* ===== Journal stack: tighter gutter, consistent rhythm ===== */
    .journal-stack {
        padding: 0 12px 96px;
        gap: 16px;
    }

    /* ===== Section surface: consistent 16px radius, better padding ===== */
    .section-surface {
        border-radius: 16px;
        padding: 20px 14px 22px;
    }

    /* ===== Section titles: slightly smaller, tighter ===== */
    .section-title {
        font-size: clamp(1.4rem, 5.5vw, 1.6rem);
        margin-top: 6px;
        line-height: 1.15;
    }
    .section-sub {
        font-size: 13px;
        line-height: 1.5;
        margin-top: 6px;
    }

    /* ===== Eyebrow: slightly larger for readability ===== */
    .eyebrow { font-size: 11.5px; }

    /* ===== Hero feature: taller, better text hierarchy ===== */
    .hero-feature {
        min-height: min(72vh, 560px);
        border-radius: 0 0 16px 16px;
    }
    .hero-content-glass {
        padding: calc(56px + env(safe-area-inset-top, 0px) + 16px) 18px 28px !important;
    }
    .hero-feature h1 {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
        line-height: 1.1;
        letter-spacing: -0.015em;
    }
    .hero-feature .dek {
        font-size: 0.92rem;
        line-height: 1.5;
        -webkit-line-clamp: 3;
    }
    .hero-cta-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .hero-cta-row .btn-primary {
        padding: 12px 18px;
        font-size: 13.5px;
        min-height: 44px;
    }

    /* ===== X/Medium rail cards: peek next card, better touch ===== */
    .x-rail {
        gap: 12px;
        margin: 0 -6px;
        padding: 4px 6px 14px;
    }
    .x-card {
        flex: 0 0 min(76vw, 280px);
        border-radius: 14px;
    }
    .x-card .x-thumb { aspect-ratio: 16 / 10; }
    .x-card .x-body { padding: 14px 14px 16px; gap: 8px; }
    .x-card .x-body h3 {
        font-size: 15.5px;
        line-height: 1.3;
        -webkit-line-clamp: 3;
    }
    .x-card .x-dek {
        font-size: 12.5px;
        line-height: 1.45;
        -webkit-line-clamp: 2;
    }
    .x-card .x-meta { font-size: 11.5px; }

    /* ===== Dispatch grid: 1-col with bigger cards ===== */
    .dispatch-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .dispatch-card {
        border-radius: 14px;
        overflow: hidden;
    }
    .dispatch-card .thumb { aspect-ratio: 16 / 10; }
    .dispatch-card .card-body { padding: 14px 14px 16px; }
    .dispatch-card h3 {
        font-size: 1.1rem;
        line-height: 1.3;
    }
    .dispatch-card .card-dek {
        font-size: 13px;
        line-height: 1.5;
        -webkit-line-clamp: 2;
    }
    .dispatch-card .card-meta { font-size: 11.5px; }

    /* ===== Filter bar: scrollable pills, bigger touch ===== */
    .filter-bar {
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 14px;
    }
    .cat-pill {
        padding: 10px 16px;
        font-size: 13px;
        min-height: 40px;
        border-radius: 100px;
        white-space: nowrap;
    }

    /* ===== Photo of the Day: stack vertical, bigger image ===== */
    .potd { grid-template-columns: 1fr; }
    .potd .potd-image { aspect-ratio: 4 / 3; }
    .potd .potd-text {
        padding: 20px 16px;
        border-left: none;
        border-top: 3px solid var(--brass);
    }
    .potd .potd-caption {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    /* ===== Article page: better reading surface ===== */
    .article-hero {
        min-height: 50vh;
        max-height: 60vh;
        border-radius: 0;
    }
    .article-hero-content {
        padding: 32px 16px 36px;
    }
    .article-hero h1 {
        font-size: clamp(1.6rem, 7vw, 2.1rem);
        line-height: 1.15;
    }
    .article-hero .dek {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    .byline-row {
        gap: 8px 12px;
        font-size: 12px;
        margin-top: 16px;
        flex-wrap: wrap;
    }
    .reading-surface {
        margin: -32px 10px 0;
        border-radius: 16px;
        padding: 28px 18px 44px;
    }
    .reading-surface p {
        font-size: 16.5px;
        line-height: 1.75;
        margin-bottom: 18px;
    }
    .reading-surface h2 {
        font-size: 1.3rem;
        margin: 28px 0 12px;
    }
    .reading-surface blockquote {
        font-size: 1.1rem;
        padding-left: 16px;
        margin: 24px 0;
    }

    /* ===== Buttons: min 44px touch target ===== */
    .btn-primary, .btn-ghost {
        min-height: 44px;
        padding: 11px 18px;
        font-size: 13.5px;
    }
    .btn-sm {
        min-height: 36px;
        padding: 8px 14px;
        font-size: 12.5px;
    }

    /* ===== Footer: stack, bigger links ===== */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 16px 24px;
    }
    .footer-brand .footer-name { font-size: 16px; }
    .footer-brand .footer-tagline { font-size: 13px; }
    .footer-col-title {
        font-size: 11px;
        margin-bottom: 12px;
    }
    .footer-nav, .footer-social { gap: 12px; }
    .footer-nav a, .footer-social a {
        font-size: 14px;
        padding: 6px 0;
        min-height: 36px;
        display: flex;
        align-items: center;
    }
    .footer-bottom {
        padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
        font-size: 11.5px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* ===== FABs: bigger, safe-area aware ===== */
    .search-fab, .back-to-top {
        width: 50px; height: 50px;
        font-size: 17px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .search-fab { left: calc(14px + env(safe-area-inset-left, 0px)); }
    .back-to-top { right: calc(14px + env(safe-area-inset-right, 0px)); }

    /* ===== Telegram feed: single column, better cards ===== */
    .tg-feed { gap: 14px; }
    .tg-card { border-radius: 14px; }
    .tg-card-body { padding: 16px 16px 14px; gap: 10px; }
    .tg-card-text {
        font-size: 14.5px;
        line-height: 1.55;
        max-height: 12em;
    }
    .tg-card-meta {
        font-size: 11px;
        gap: 10px;
    }
    .tg-card-permalink {
        width: 40px; height: 40px;
        font-size: 17px;
    }

    /* ===== Video cards ===== */
    .video-card { border-radius: 14px; }
    .shorts-shelf { gap: 12px; }
    .video-card.portrait { width: 160px; }

    /* ===== Modal: full-screen on mobile ===== */
    .modal-overlay { padding: 0; }
    .modal-content {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 24px 18px;
        overflow-y: auto;
    }

    /* ===== Toast: full-width bottom ===== */
    .toast {
        left: 12px;
        right: 12px;
        transform: translateY(120%);
        max-width: none;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .toast.show { transform: translateY(0); }

    /* ===== Skeleton loading: smoother on mobile ===== */
    .skeleton-dispatch-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .skeleton-card.span-4, .skeleton-card.span-2 {
        grid-column: span 1;
        min-height: 220px;
    }

    /* ===== Empty state: better spacing ===== */
    .empty-state {
        padding: 32px 16px 24px;
    }
    .empty-title { font-size: 1.1rem; }
    .empty-text { font-size: 13.5px; line-height: 1.5; }

    /* ===== Live pill: bigger touch ===== */
    .live-pill {
        font-size: 11.5px;
        padding: 7px 12px;
        min-height: 32px;
    }
}

/* ===== Small phones (≤480px): even tighter ===== */
@media (max-width: 480px) {
    .journal-stack {
        padding: 0 10px 88px;
        gap: 14px;
    }
    .section-surface {
        padding: 18px 12px 20px;
        border-radius: 14px;
    }
    .nav-inner { padding: 8px 12px; }
    .brand-name { font-size: 15.5px; }
    .brand-mark { width: 28px; height: 28px; }

    .x-card {
        flex: 0 0 86vw;
        border-radius: 12px;
    }
    .x-card .x-body h3 { font-size: 15px; }

    .hero-feature h1 {
        font-size: clamp(1.35rem, 7vw, 1.7rem);
    }
    .hero-content-glass {
        padding: calc(52px + env(safe-area-inset-top, 0px) + 12px) 14px 24px !important;
    }

    .reading-surface {
        margin: -28px 8px 0;
        padding: 24px 16px 36px;
    }
    .reading-surface p {
        font-size: 16px;
        line-height: 1.7;
    }

    .section-title {
        font-size: clamp(1.3rem, 6vw, 1.5rem);
    }

    .tg-card-text {
        font-size: 14px;
        max-height: 11em;
    }

    .footer-nav a, .footer-social a {
        font-size: 13.5px;
        min-height: 40px;
    }

    /* Full-width buttons on small phones */
    .hero-cta-row .btn-primary,
    .hero-cta-row .btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Landscape mobile: adjust hero height ===== */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
    .hero-feature {
        min-height: 100vh;
    }
    .hero-content-glass {
        padding: calc(56px + 16px) 18px 20px !important;
    }
}

/* ===== Touch hover disable (prevent sticky hover on touch) ===== */
@media (hover: none) {
    .x-card:hover,
    .dispatch-card:hover,
    .tg-card:hover,
    .video-card:hover,
    .workshop-card:hover,
    .link-row:hover {
        transform: none !important;
    }
    .x-card:hover .x-thumb img,
    .dispatch-card:hover .thumb img,
    .tg-card:hover .tg-card-photo img,
    .video-card:hover .vthumb-wrap img {
        transform: none !important;
    }
    .btn-primary:hover, .btn-ghost:hover {
        transform: none !important;
    }
}

/* ===== Smooth scrolling for rails on mobile ===== */
@supports (scroll-behavior: smooth) and (scroll-snap-type: x proximity) {
    .x-rail {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   INSTAGRAM GALLERY (patch-10, Aug 2026)
   Grid masonry-style + lightbox modal dengan navigation
   ============================================================ */

.ig-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 860px) {
    .ig-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}
@media (max-width: 480px) {
    .ig-grid {
        gap: 4px;
    }
}

.ig-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ink-2);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-radius 0.3s;
    border: 1px solid rgba(255,255,255,0.04);
}
.ig-tile:hover {
    transform: scale(0.98);
    border-radius: 12px;
    z-index: 2;
}
.ig-tile img,
.ig-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.ig-tile:hover img {
    transform: scale(1.08);
}

/* Badges di tile */
.ig-tile-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.15);
}
.ig-tile-badge.ig-tile-badge--potd {
    background: linear-gradient(135deg, var(--brass), #D4A85A);
    color: #16140C;
    border-color: rgba(201,151,74,0.5);
}

/* Overlay info saat hover */
.ig-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    pointer-events: none;
}
.ig-tile:hover .ig-tile-overlay {
    opacity: 1;
}
.ig-tile-caption {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #fff;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.ig-tile-meta {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    color: rgba(255,255,255,0.8);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ig-tile-meta i {
    font-size: 10px;
}

/* ===== Instagram Lightbox ===== */
#igLightbox {
    padding: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
#igLightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ig-lightbox-close {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ig-lightbox-close:hover {
    background: rgba(255,255,255,0.18);
    transform: scale(1.05);
}

.ig-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ig-lightbox-nav:hover {
    background: rgba(255,255,255,0.18);
}
.ig-lightbox-prev {
    left: calc(16px + env(safe-area-inset-left, 0px));
}
.ig-lightbox-next {
    right: calc(16px + env(safe-area-inset-right, 0px));
}
.ig-lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.ig-lightbox-next:hover { transform: translateY(-50%) scale(1.05); }

.ig-lightbox-content {
    max-width: min(560px, 92vw);
    max-height: 90vh;
    background: var(--ink-2);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
@media (max-width: 860px) {
    .ig-lightbox-content {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        width: 100vw;
        height: 100vh;
    }
    .ig-lightbox-nav {
        display: none;
    }
}

.ig-lightbox-media {
    position: relative;
    background: #000;
    flex-shrink: 0;
}
.ig-lightbox-media img,
.ig-lightbox-media video {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    margin: 0 auto;
}
@media (max-width: 860px) {
    .ig-lightbox-media img,
    .ig-lightbox-media video {
        max-height: 60vh;
    }
}

.ig-lightbox-info {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (max-width: 480px) {
    .ig-lightbox-info {
        padding: 16px 16px 20px;
    }
}

.ig-lightbox-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ig-lightbox-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brass), #D4A85A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16140C;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.ig-lightbox-user {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ig-lightbox-username {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--parchment-text);
}
.ig-lightbox-date {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--muted-on-ink);
}

.ig-lightbox-caption {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--parchment-text);
    word-break: break-word;
    overflow-wrap: anywhere;
    max-height: 200px;
    overflow-y: auto;
}
@media (max-width: 480px) {
    .ig-lightbox-caption {
        font-size: 14px;
        max-height: 150px;
    }
}

.ig-lightbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ig-lightbox-actions .btn-primary,
.ig-lightbox-actions .btn-ghost {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 13px;
}

/* Touch: disable hover effects */
@media (hover: none) {
    .ig-tile:hover {
        transform: none;
        border-radius: 8px;
    }
    .ig-tile:hover img {
        transform: none;
    }
    .ig-tile-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    }
}

/* ===== Instagram rail di homepage (horizontal scroll) ===== */
.ig-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-ink-strong) transparent;
    margin: 0 -4px;
}
.ig-rail::-webkit-scrollbar { height: 6px; }
.ig-rail::-webkit-scrollbar-thumb { background: var(--border-ink-strong); border-radius: 10px; }

.ig-rail-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: var(--ink-2);
    border: 1px solid rgba(255,255,255,0.04);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.25s;
    text-decoration: none;
    color: inherit;
}
.ig-rail-card:hover {
    transform: translateY(-2px);
    border-color: rgba(237, 88, 105, 0.4);
}
.ig-rail-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.ig-rail-card:hover img {
    transform: scale(1.06);
}
.ig-rail-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ig-rail-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    pointer-events: none;
}
.ig-rail-card:hover .ig-rail-card-overlay {
    opacity: 1;
}
.ig-rail-card-caption {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #fff;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

@media (max-width: 860px) {
    .ig-rail-card {
        flex: 0 0 160px;
        border-radius: 10px;
    }
    .ig-rail-card-overlay {
        opacity: 1;
    }
}
@media (hover: none) {
    .ig-rail-card:hover {
        transform: none;
    }
    .ig-rail-card:hover img {
        transform: none;
    }
}


/* ============================================================
   MOBILE LAYOUT FIX v32 — Aug 2026
   Hero bottom-sheet, anti horizontal overflow, denser chrome
   ============================================================ */

/* Prevent accidental page-wide horizontal scroll */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img, video, iframe, svg {
    max-width: 100%;
}

@media (max-width: 860px) {
    /* --- Nav --- */
    .site-nav {
        position: sticky;
        top: 0;
        z-index: 50;
    }
    .nav-inner {
        padding: 10px 12px;
        gap: 8px;
        min-height: 52px;
    }
    .brand-name {
        font-size: 15.5px;
        max-width: 48vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .brand-mark { width: 30px; height: 30px; }
    .nav-icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    .mobile-nav-panel {
        width: min(88vw, 320px);
        padding-top: calc(72px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
        height: 100dvh;
        max-height: 100dvh;
    }
    .mobile-nav-panel a {
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 16px;
    }

    /* --- Hero: bottom sheet (bukan panel kiri full-height) --- */
    .hero-slot {
        margin-top: 0 !important; /* jangan tarik di bawah nav di mobile */
        margin-bottom: 12px;
        --hero-under-nav: 0px;
    }
    .hero-feature {
        min-height: min(72vh, 560px) !important;
        max-height: none;
        border-radius: 0 0 18px 18px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: stretch !important;
    }
    .hero-feature::after {
        /* Scrim dari bawah — cocok bottom sheet */
        background:
            linear-gradient(to top,
                rgba(8, 8, 6, 0.97) 0%,
                rgba(10, 10, 8, 0.78) 38%,
                rgba(12, 12, 10, 0.28) 72%,
                rgba(12, 12, 10, 0.08) 100%) !important;
    }
    .hero-feature-content {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        z-index: 2;
    }
    .hero-content-glass {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px 16px 20px !important;
        border-radius: 18px 18px 0 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 -12px 40px -18px rgba(0, 0, 0, 0.55) !important;
        background:
            linear-gradient(180deg,
                rgba(12, 12, 10, 0.55) 0%,
                rgba(10, 10, 8, 0.88) 45%,
                rgba(8, 8, 6, 0.96) 100%) !important;
        backdrop-filter: blur(16px) saturate(1.15) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
        gap: 0.55rem !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    .hero-glass-top {
        gap: 0.4rem !important;
    }
    .hero-glass-fill {
        flex: 0 1 auto !important;
        max-height: 28vh;
        min-height: 0;
        overflow: hidden;
        mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%) !important;
    }
    .hero-glass-foot {
        margin-top: 0.35rem !important;
        padding-top: 0.25rem !important;
    }
    .hero-feature h1 {
        font-size: clamp(1.4rem, 6.2vw, 1.95rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.02em !important;
    }
    .hero-feature .hero-lead-p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    .hero-feature .hero-lead-p.is-dek {
        font-size: 0.95rem !important;
        /* 2–3 baris di mobile agar ringkas */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .hero-feature .hero-cta-row .btn-primary {
        width: 100%;
        justify-content: center;
        min-height: 46px;
        padding: 12px 18px;
        font-size: 14px;
    }
    .hero-feature .route-line { display: none; }
    .skeleton-hero,
    .skeleton-hero-inner {
        min-height: min(72vh, 560px) !important;
    }

    /* --- Journal stack --- */
    .journal-stack {
        padding: 0 12px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 14px !important;
        width: 100%;
        box-sizing: border-box;
    }
    .section-surface {
        border-radius: 14px !important;
        padding: 16px 12px 18px !important;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .section-surface-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }
    .section-title {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
        margin-top: 6px !important;
    }
    .section-sub {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        max-width: none !important;
    }
    .x-live-meta {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }
    .live-pill {
        font-size: 10.5px;
        padding: 6px 10px;
    }
    .btn-sm {
        min-height: 36px;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* --- Rails: peek cards, no page overflow --- */
    .x-rail,
    .ig-rail {
        gap: 10px !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
        padding: 2px 8px 10px 4px !important;
        max-width: calc(100% + 8px);
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .x-card {
        flex: 0 0 min(76vw, 270px) !important;
        scroll-snap-align: start;
        border-radius: 12px !important;
    }
    .x-card .x-body {
        padding: 12px !important;
        gap: 6px !important;
    }
    .x-card .x-body h3 {
        font-size: 15px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 3;
    }
    .x-card .x-dek {
        font-size: 11.5px !important;
        -webkit-line-clamp: 2;
    }
    .ig-rail-card {
        flex: 0 0 42vw !important;
        max-width: 180px;
        border-radius: 10px !important;
    }

    /* --- Photo of the Day --- */
    .potd {
        grid-template-columns: 1fr !important;
        border-radius: 12px !important;
    }
    .potd .potd-image,
    .potd-video-wrap {
        aspect-ratio: 4 / 3 !important;
    }
    .potd .potd-text {
        padding: 16px 14px 18px !important;
        border-left: none !important;
        border-top: 3px solid var(--brass) !important;
    }
    .potd .potd-caption {
        font-size: 1.05rem !important;
        line-height: 1.4 !important;
    }
    .potd-actions {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }
    .potd-ig-link {
        justify-content: center;
        width: 100%;
        min-height: 42px;
    }

    /* --- Dispatch grid --- */
    .dispatch-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .dispatch-grid .span-4,
    .dispatch-grid .span-3,
    .dispatch-grid .span-2 {
        grid-column: 1 / -1 !important;
    }
    .dispatch-card {
        border-radius: 12px !important;
    }
    .dispatch-card .thumb,
    .dispatch-card.size-lg .thumb {
        aspect-ratio: 16 / 10 !important;
        border-radius: 12px 12px 0 0;
    }
    .dispatch-card .card-body {
        padding: 12px 4px 4px !important;
    }
    .dispatch-card h3,
    .dispatch-card.size-lg h3,
    .dispatch-card.size-md h3,
    .dispatch-card.size-sm h3 {
        font-size: 1.08rem !important;
        line-height: 1.3 !important;
    }
    .dispatch-card .card-dek {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12.5px !important;
    }

    /* --- Sticky category chips --- */
    .filter-bar,
    .sticky-filters {
        top: 52px !important;
        gap: 8px !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
        padding: 8px 4px 10px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: linear-gradient(180deg, rgba(16, 15, 12, 0.98) 70%, rgba(16, 15, 12, 0.88)) !important;
    }
    .filter-bar::-webkit-scrollbar,
    .sticky-filters::-webkit-scrollbar { display: none; }
    .cat-pill {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* --- Article reader --- */
    .article-hero {
        min-height: 48vh !important;
        max-height: 58vh !important;
        height: auto !important;
        border-radius: 0 !important;
    }
    .article-hero-content {
        padding: 28px 14px 36px !important;
        max-width: 100% !important;
    }
    .article-hero h1 {
        font-size: clamp(1.5rem, 7vw, 2.05rem) !important;
        line-height: 1.12 !important;
    }
    .article-hero .dek {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }
    .byline-row {
        font-size: 11.5px !important;
        gap: 6px 8px !important;
    }
    .reading-surface {
        margin: -28px 10px 0 !important;
        border-radius: 14px !important;
        padding: 22px 16px 36px !important;
        max-width: none !important;
        width: auto !important;
    }
    .reading-surface p {
        font-size: 16.5px !important;
        line-height: 1.7 !important;
        margin-bottom: 18px !important;
    }
    .reading-surface h2 {
        font-size: 1.28rem !important;
        margin: 28px 0 12px !important;
    }
    .reading-surface figure {
        margin: 22px 0 !important;
    }
    .reading-surface blockquote {
        font-size: 1.08rem !important;
        padding-left: 14px !important;
        margin: 22px 0 !important;
    }
    .reading-surface .article-list li {
        font-size: 16px !important;
    }
    .x-article-source-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .x-article-source-inner .btn-primary {
        width: 100% !important;
        justify-content: center !important;
    }
    .article-share {
        gap: 8px !important;
    }
    .article-share .share-btn {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        min-height: 42px;
    }
    .related-rail {
        padding: 16px 12px !important;
    }

    /* --- Footer --- */
    .footer-inner {
        grid-template-columns: 1fr !important;
        padding: 28px 14px 18px !important;
        gap: 20px !important;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- FABs: avoid overlapping content & each other --- */
    .search-fab {
        width: 46px !important;
        height: 46px !important;
        left: calc(12px + env(safe-area-inset-left, 0px)) !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .back-to-top {
        width: 46px !important;
        height: 46px !important;
        right: calc(12px + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .admin-fab {
        width: 44px !important;
        height: 44px !important;
        right: calc(12px + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- Telegram --- */
    .tg-feed {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .tg-card-body { padding: 14px !important; }
    .tg-card-text { font-size: 14px !important; max-height: 11em !important; }

    /* --- Watch / videos --- */
    .video-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .video-card.portrait {
        width: min(46vw, 170px) !important;
    }
    .shorts-shelf {
        gap: 10px;
        padding-bottom: 12px;
    }

    /* --- About --- */
    .workshop-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .about-hero { padding: 24px 8px !important; }
    .avatar-ring img {
        width: 112px !important;
        height: 112px !important;
    }
    .link-row {
        padding: 14px !important;
    }

    /* --- IG grid / lightbox --- */
    .ig-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
    }
    .ig-tile {
        border-radius: 6px !important;
    }
    .ig-lightbox-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
    .ig-lightbox-media img,
    .ig-lightbox-media video {
        max-height: 55dvh !important;
        width: 100% !important;
        object-fit: contain;
    }
    .ig-lightbox-info {
        flex: 1;
        overflow-y: auto;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- Modals --- */
    .modal-overlay {
        padding: 12px !important;
        align-items: flex-end !important;
    }
    .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: min(92dvh, 100%) !important;
        border-radius: 16px 16px 12px 12px !important;
        padding: 20px 16px !important;
    }
    .input-field {
        font-size: 16px !important; /* prevent iOS zoom */
        min-height: 46px;
    }

    /* --- Toast --- */
    .toast {
        left: 12px;
        right: 12px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        transform: translateY(140%);
        width: auto;
        max-width: none;
    }
    .toast.show {
        transform: translateY(0);
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .journal-stack {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .section-surface {
        padding: 14px 10px 16px !important;
    }
    .hero-feature {
        min-height: min(68vh, 480px) !important;
    }
    .hero-feature h1 {
        font-size: 1.32rem !important;
    }
    .x-card {
        flex: 0 0 82vw !important;
    }
    .brand-name {
        max-width: 40vw;
    }
}

/* Landscape phones: shorter hero so content is reachable */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
    .hero-feature {
        min-height: min(100vh, 420px) !important;
    }
    .hero-content-glass {
        padding: 12px 14px 14px !important;
    }
    .hero-glass-fill {
        max-height: 20vh !important;
    }
    .hero-feature h1 {
        font-size: 1.25rem !important;
    }
}


/* ============================================================
   THEME WANDERLUST — floating glass cards on tropical lagoon
   Inspired by travel landing UI (Pinterest pin Wanderlust)
   ============================================================ */

body.theme-wanderlust {
    --wl-teal: #0d9488;
    --wl-teal-deep: #0f766e;
    --wl-mint: #5eead4;
    --wl-foam: rgba(255, 255, 255, 0.72);
    --wl-glass: rgba(255, 255, 255, 0.55);
    --wl-glass-strong: rgba(255, 255, 255, 0.78);
    --wl-ink: #0f172a;
    --wl-muted: rgba(15, 23, 42, 0.62);
    --brass: #14b8a6;
    --brass-soft: rgba(20, 184, 166, 0.18);
    --parchment-text: #0f172a;
    --muted-on-ink: rgba(15, 23, 42, 0.58);
    --border-ink: rgba(15, 23, 42, 0.10);
    --border-ink-strong: rgba(15, 23, 42, 0.16);
    --ink: #042f2e;
    --ink-2: rgba(255, 255, 255, 0.72);
    --ink-3: rgba(255, 255, 255, 0.55);
    color: var(--wl-ink);
    background: #064e3b;
}

/* Tropical aerial background */
body.theme-wanderlust .living-bg-poster--tropical,
body.theme-wanderlust .living-bg-poster {
    background-image: url('media/bg-tropical.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: brightness(1.05) saturate(1.15) contrast(1.02) !important;
}
@supports (background-image: url('media/bg-tropical.webp')) {
    body.theme-wanderlust .living-bg-poster--tropical,
    body.theme-wanderlust .living-bg-poster {
        background-image: url('media/bg-tropical.webp') !important;
    }
}
body.theme-wanderlust .living-bg-glow--tropical,
body.theme-wanderlust .living-bg-glow {
    background:
        radial-gradient(ellipse 70% 50% at 70% 30%, rgba(45, 212, 191, 0.25), transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 80%, rgba(13, 148, 136, 0.2), transparent 65%) !important;
}
body.theme-wanderlust .living-bg-veil--tropical,
body.theme-wanderlust .living-bg-veil,
body.theme-wanderlust.has-living-bg .living-bg-veil {
    /* Lighter veil so tropical bg reads through transparent panels */
    background: rgba(4, 47, 46, 0.04) !important;
}
/* Stabilize fixed bg during scroll (less GPU thrash) */
body.theme-wanderlust .living-bg {
    transform: translateZ(0);
    backface-visibility: hidden;
}
body.theme-wanderlust .living-bg-poster {
    transform: translateZ(0);
}

/* =========================================================
   WANDERLUST NAV — pin-matched
   Logo full LEFT + burger | circular icons RIGHT
   Transparent chrome floating over water (no centered bar)
   ========================================================= */
body.theme-wanderlust .site-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
/* Soft tint once scrolled — no blur (scroll-safe) */
body.theme-wanderlust .site-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 10px 36px -20px rgba(4, 47, 46, 0.28) !important;
}
body.theme-wanderlust .site-nav.is-scrolled .brand-name {
    color: #0f172a !important;
    text-shadow: none;
}
body.theme-wanderlust .nav-inner {
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding: 22px 28px 10px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/* Brand cluster flush left — wordmark like "WANDERLUST" */
body.theme-wanderlust .brand-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-right: auto;
}
body.theme-wanderlust .brand {
    gap: 0;
}
body.theme-wanderlust .brand-mark {
    display: none !important; /* pin uses wordmark only */
}
body.theme-wanderlust .brand-tagline {
    display: none !important;
}
body.theme-wanderlust .brand-name {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(4, 47, 46, 0.45);
    white-space: nowrap;
}
body.theme-wanderlust .wl-burger {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    color: #0f172a !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 22px -12px rgba(4, 47, 46, 0.4);
}
/* Hide text nav pill — pin uses circular icons instead */
body.theme-wanderlust .nav-links {
    display: none !important;
}
body.theme-wanderlust .nav-actions {
    margin-left: auto;
    gap: 10px !important;
}
body.theme-wanderlust .wl-nav-circles {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
body.theme-wanderlust .wl-nav-circle {
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.62);
    color: #0f172a;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 24px -14px rgba(4, 47, 46, 0.3);
    transition: transform 0.2s, background 0.2s;
    white-space: nowrap;
}
body.theme-wanderlust .wl-nav-circle i {
    font-size: 14px;
    opacity: 0.9;
}
body.theme-wanderlust .wl-nav-circle span {
    line-height: 1;
}
body.theme-wanderlust .wl-nav-circle:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.82);
}
body.theme-wanderlust .wl-nav-circle.active {
    background: linear-gradient(135deg, #0d9488, #2dd4bf);
    color: #042f2e;
    border-color: transparent;
    box-shadow: 0 10px 24px -8px rgba(13, 148, 136, 0.55);
}
body.theme-wanderlust .nav-icon-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    color: #0f172a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.theme-wanderlust .nav-icon-btn:hover {
    border-color: var(--wl-teal) !important;
    color: var(--wl-teal-deep) !important;
    background: rgba(255, 255, 255, 0.85) !important;
}
body.theme-wanderlust .mobile-menu-btn {
    display: none !important; /* burger is next to logo like pin */
}
body.theme-wanderlust .admin-status {
    background: rgba(255, 255, 255, 0.55) !important;
    color: var(--wl-teal-deep) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
}
body.theme-wanderlust .brand-mark [stroke="#C9974A"],
body.theme-wanderlust .brand-mark [fill="#C9974A"] {
    stroke: #0d9488;
    fill: #0d9488;
}

/* ===== Wanderlust hero — full-bleed pin stage ===== */
body.theme-wanderlust .hero-slot {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100%;
}

/* Stage fills viewport; nav floats over it (pin phone chrome) */
body.theme-wanderlust .wl-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    max-height: 920px;
    padding: 0;
    overflow: hidden;
}
body.theme-wanderlust .wl-glass {
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 22px 48px -28px rgba(4, 47, 46, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    border-radius: 28px;
}

/* Search — centered under header, ~58% of phone width → ~360–400px desktop */
body.theme-wanderlust .wl-float-search {
    position: absolute;
    top: 86px; /* below logo row */
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    width: min(400px, 56vw);
    min-width: 0;
    border: none;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(15, 23, 42, 0.55);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 16px 40px -18px rgba(4, 47, 46, 0.4);
    transition: transform 0.25s, box-shadow 0.25s;
}
body.theme-wanderlust .wl-float-search i {
    color: #0f766e;
    font-size: 15px;
}
body.theme-wanderlust .wl-float-search:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 20px 44px -16px rgba(4, 47, 46, 0.5);
}

/* Float chips — scattered on LEFT open water (pin) */
body.theme-wanderlust .wl-float-chip {
    position: absolute;
    z-index: 4;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #0f766e;
    font-size: 18px;
    box-shadow: 0 16px 32px -14px rgba(4, 47, 46, 0.35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Positions measured vs pin left-water field */
body.theme-wanderlust .wl-float-chip--a { top: 28%; left: 6%; }
body.theme-wanderlust .wl-float-chip--b { top: 38%; left: 16%; width: 48px; height: 48px; font-size: 15px; }
body.theme-wanderlust .wl-float-chip--c { top: 48%; left: 8%; width: 44px; height: 44px; font-size: 14px; }
body.theme-wanderlust .wl-float-chip--d { top: 33%; left: 26%; width: 42px; height: 42px; font-size: 13px; }
body.theme-wanderlust .wl-float-chip--e { top: 52%; left: 22%; width: 50px; height: 50px; font-size: 16px; }

/* Pagination dots — far right edge, vertically centered */
body.theme-wanderlust .wl-dots {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
body.theme-wanderlust .wl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.65);
}
body.theme-wanderlust .wl-dot.is-active {
    background: #fff;
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}

/* Paradise card — RIGHT ~44% width, tall from under-search to bottom */
/* Hero dispatch — fully transparent; only title + copy float on water */
body.theme-wanderlust .wl-paradise-card {
    position: absolute;
    top: 150px;
    right: 48px;
    bottom: 36px;
    width: clamp(340px, 44vw, 560px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 0;
    overflow: visible;
    text-decoration: none;
    color: #fff;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
body.theme-wanderlust .wl-paradise-card:hover {
    transform: translateY(-3px);
    background: transparent !important;
}
body.theme-wanderlust .wl-paradise-media { display: none !important; }
body.theme-wanderlust .wl-paradise-scrim { display: none !important; }
body.theme-wanderlust .wl-paradise-body {
    position: relative;
    z-index: 1;
    padding: 24px 12px 28px 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    box-sizing: border-box;
    background: transparent !important;
}
body.theme-wanderlust .wl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 0;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 12px rgba(4, 47, 46, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-bottom: 14px;
}
body.theme-wanderlust .wl-paradise-body h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 650;
    font-size: clamp(2.35rem, 4.2vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
    text-wrap: balance;
    color: #fff;
    text-shadow:
        0 2px 24px rgba(4, 47, 46, 0.55),
        0 1px 2px rgba(4, 47, 46, 0.4);
}
body.theme-wanderlust .wl-paradise-body p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 14px rgba(4, 47, 46, 0.5);
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.theme-wanderlust .wl-paradise-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 10px rgba(4, 47, 46, 0.45);
}

/* CTA "Let's Travel!" — bottom-LEFT glass, ~300–340px */
body.theme-wanderlust .wl-cta-card {
    position: absolute;
    left: 36px;
    bottom: 52px;
    z-index: 4;
    width: min(340px, 34vw);
    max-width: 360px;
    padding: 26px 26px 22px;
    border-radius: 28px;
    color: var(--wl-ink);
}
body.theme-wanderlust .wl-cta-kicker { display: none; }
body.theme-wanderlust .wl-cta-card h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.7rem, 2.5vw, 2.15rem);
    line-height: 1.08;
    margin: 0 0 10px;
    color: #0f172a;
    font-weight: 650;
}
body.theme-wanderlust .wl-cta-copy {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(15, 23, 42, 0.58);
    margin: 0 0 18px;
}
body.theme-wanderlust .wl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 999px;
    background: #0d9488;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    box-shadow: 0 14px 30px -10px rgba(13, 148, 136, 0.6);
    transition: transform 0.25s, box-shadow 0.25s, background 0.2s;
}
body.theme-wanderlust .wl-cta-btn:hover {
    transform: translateY(-2px);
    background: #0f766e;
    box-shadow: 0 18px 34px -10px rgba(13, 148, 136, 0.7);
}
body.theme-wanderlust .wl-cta-avatars {
    display: flex;
    align-items: center;
    margin-top: 18px;
}
body.theme-wanderlust .wl-ava {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.95);
    color: #0f766e;
    font-size: 13px;
    margin-left: -8px;
    box-shadow: 0 4px 12px -4px rgba(4, 47, 46, 0.35);
}
body.theme-wanderlust .wl-ava:first-child { margin-left: 0; }
body.theme-wanderlust .wl-ava-more {
    background: #0d9488;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

/* Non-home pages: clear fixed nav */
body.theme-wanderlust .journal-main:not(:has(.wl-stage)) {
    padding-top: 88px;
}
body.theme-wanderlust .journal-stack {
    padding-top: 12px;
}
body.theme-wanderlust .section-surface {
    /* No backdrop-filter — blur+fixed-bg = scroll glitch/tearing */
    background: rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 28px !important;
    box-shadow:
        0 18px 40px -28px rgba(4, 47, 46, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    color: var(--wl-ink);
    contain: none !important;
}
body.theme-wanderlust .section-surface::before {
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.55), transparent) !important;
}
body.theme-wanderlust .section-title,
body.theme-wanderlust .eyebrow,
body.theme-wanderlust .empty-title {
    color: var(--wl-ink) !important;
}
body.theme-wanderlust .eyebrow { color: var(--wl-teal-deep) !important; }
body.theme-wanderlust .eyebrow::before { background: var(--wl-teal) !important; }
body.theme-wanderlust .section-sub,
body.theme-wanderlust .empty-text,
body.theme-wanderlust .x-dek,
body.theme-wanderlust .card-dek,
body.theme-wanderlust .card-meta,
body.theme-wanderlust .x-meta {
    color: var(--wl-muted) !important;
}
body.theme-wanderlust .section-sub a.text-brass,
body.theme-wanderlust a.text-brass {
    color: var(--wl-teal-deep) !important;
    border-bottom-color: rgba(13, 148, 136, 0.35) !important;
}
body.theme-wanderlust .x-card,
body.theme-wanderlust .dispatch-card {
    background: rgba(255, 255, 255, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: var(--wl-ink) !important;
    box-shadow: 0 12px 28px -22px rgba(4, 47, 46, 0.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Wider X / Medium rail cards */
body.theme-wanderlust .x-card {
    flex: 0 0 min(420px, 46vw) !important;
    border-radius: 20px !important;
}
body.theme-wanderlust .x-card .x-thumb {
    aspect-ratio: 16 / 10 !important;
}
body.theme-wanderlust .x-card .x-body h3 {
    font-size: 18.5px !important;
}
body.theme-wanderlust .x-rail {
    gap: 22px !important;
}
/* Wider Build Log / dispatch cards */
body.theme-wanderlust .dispatch-grid {
    gap: 32px !important;
}
body.theme-wanderlust .dispatch-card {
    border-radius: 18px !important;
}
body.theme-wanderlust .dispatch-card.size-lg h3 { font-size: 28px !important; }
body.theme-wanderlust .dispatch-card.size-md h3 { font-size: 21px !important; }
body.theme-wanderlust .dispatch-card.size-sm h3 { font-size: 17.5px !important; }
body.theme-wanderlust .x-card .x-body h3,
body.theme-wanderlust .dispatch-card h3,
body.theme-wanderlust .card-eyebrow {
    color: var(--wl-ink) !important;
}
body.theme-wanderlust .card-eyebrow { color: var(--wl-teal-deep) !important; }
body.theme-wanderlust .live-pill {
    background: rgba(20, 184, 166, 0.12) !important;
    border-color: rgba(20, 184, 166, 0.3) !important;
    color: var(--wl-teal-deep) !important;
}
body.theme-wanderlust .cat-pill {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: var(--wl-muted) !important;
}
body.theme-wanderlust .cat-pill.active {
    background: linear-gradient(135deg, #0d9488, #2dd4bf) !important;
    color: #042f2e !important;
    border-color: transparent !important;
}
body.theme-wanderlust .btn-primary {
    background: linear-gradient(135deg, #0d9488, #2dd4bf) !important;
    color: #042f2e !important;
}
body.theme-wanderlust .btn-ghost {
    border-color: rgba(15, 23, 42, 0.16) !important;
    color: var(--wl-ink) !important;
    background: rgba(255, 255, 255, 0.35) !important;
}
body.theme-wanderlust .btn-ghost:hover {
    border-color: var(--wl-teal) !important;
    color: var(--wl-teal-deep) !important;
}
body.theme-wanderlust .sticky-filters {
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0.08)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.theme-wanderlust .potd {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}
body.theme-wanderlust .potd .potd-caption { color: var(--wl-ink) !important; }
body.theme-wanderlust .potd .potd-label { color: var(--wl-teal-deep) !important; }
body.theme-wanderlust .potd .potd-text { border-left-color: var(--wl-teal) !important; }
body.theme-wanderlust .site-footer {
    background: rgba(255, 255, 255, 0.22) !important;
    border-top-color: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.theme-wanderlust .footer-name,
body.theme-wanderlust .footer-nav a,
body.theme-wanderlust .footer-social a { color: var(--wl-ink) !important; }
body.theme-wanderlust .footer-tagline,
body.theme-wanderlust .footer-bottom { color: var(--wl-muted) !important; }
body.theme-wanderlust .footer-col-title { color: var(--wl-teal-deep) !important; }
body.theme-wanderlust .search-fab,
body.theme-wanderlust .back-to-top,
body.theme-wanderlust .admin-fab {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: var(--wl-teal-deep) !important;
}
body.theme-wanderlust .x-source-badge {
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--wl-ink) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
body.theme-wanderlust .x-source-badge i { color: var(--wl-teal-deep) !important; }
body.theme-wanderlust .mobile-nav-panel {
    background: rgba(255, 255, 255, 0.92) !important;
    border-left-color: rgba(20, 184, 166, 0.25) !important;
}
body.theme-wanderlust .mobile-nav-panel a { color: var(--wl-muted) !important; }
body.theme-wanderlust .mobile-nav-panel a.active {
    background: linear-gradient(135deg, #0d9488, #2dd4bf) !important;
    color: #042f2e !important;
}
body.theme-wanderlust #pageLoader {
    background: #064e3b !important;
}
body.theme-wanderlust .loader-mark [stroke="#C9974A"],
body.theme-wanderlust .loader-mark [fill="#C9974A"] {
    stroke: #2dd4bf;
    fill: #2dd4bf;
}

/* =========================================================
   DESKTOP-ONLY SITE (no mobile layout)
   Viewport is forced to width=1280 in HTML. Content fills
   the canvas; glass panels stay transparent over tropical bg.
   ========================================================= */

/* Full-width content canvas */
body.theme-wanderlust .journal-main {
    width: 100%;
    max-width: none;
}
body.theme-wanderlust .journal-stack {
    max-width: min(1480px, 96vw) !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 80px;
}
body.theme-wanderlust .journal-stack--narrow {
    max-width: min(1280px, 94vw) !important;
}

/* Transparent panels — no blur (avoids scroll glitch) */
body.theme-wanderlust .section-surface {
    background: rgba(255, 255, 255, 0.26) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
}
body.theme-wanderlust .x-card,
body.theme-wanderlust .dispatch-card {
    background: rgba(255, 255, 255, 0.30) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
}
body.theme-wanderlust .potd {
    background: rgba(255, 255, 255, 0.24) !important;
}
body.theme-wanderlust .sticky-filters {
    background: linear-gradient(180deg, rgba(255,255,255,0.28) 55%, rgba(255,255,255,0.06)) !important;
}
body.theme-wanderlust .site-footer {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* Article — wider reader, plain transparency (no blur) */
body.theme-wanderlust .article-hero {
    height: min(72vh, 720px) !important;
    min-height: 420px !important;
    border-radius: 0 !important;
    width: 100%;
}
body.theme-wanderlust .article-hero-content {
    max-width: min(1400px, 94vw) !important;
    width: 100%;
    padding: 72px 48px 64px !important;
    color: #fff;
}
body.theme-wanderlust .article-hero h1 {
    font-size: clamp(2.2rem, 4.2vw, 3.8rem) !important;
}
body.theme-wanderlust .reading-surface {
    max-width: min(1400px, 96vw) !important;
    width: 100%;
    margin: -64px auto 48px !important;
    padding: 56px clamp(40px, 5vw, 96px) 72px !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #0f172a !important;
    box-shadow:
        0 -12px 40px rgba(4, 47, 46, 0.18),
        0 20px 48px -28px rgba(4, 47, 46, 0.28) !important;
}
body.theme-wanderlust .reading-surface p,
body.theme-wanderlust .reading-surface li {
    color: #0f172a !important;
}
body.theme-wanderlust .reading-surface h2 {
    color: #042f2e !important;
}
body.theme-wanderlust .reading-surface blockquote {
    color: #0f172a !important;
    border-left-color: #0d9488 !important;
}
body.theme-wanderlust .reading-surface a.inline-link {
    color: #0f766e !important;
    border-bottom-color: rgba(13, 148, 136, 0.4) !important;
}
body.theme-wanderlust .reading-surface .article-link-block {
    background: linear-gradient(135deg, rgba(13,148,136,0.12), rgba(255,255,255,0.35)) !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
    border-left-color: #0d9488 !important;
    color: #0f172a !important;
}

/* Related / other article chrome fill width */
body.theme-wanderlust #relatedSection,
body.theme-wanderlust .related-rail {
    max-width: none;
}

/* Always show desktop nav chrome (never collapse to mobile sheet) */
body.theme-wanderlust .wl-nav-circles {
    display: flex !important;
}
body.theme-wanderlust .mobile-menu-btn {
    display: none !important;
}
body.theme-wanderlust .nav-links {
    display: none !important;
}
body.theme-wanderlust .wl-burger {
    display: inline-flex !important;
}

/* Desktop hero always — never stack cards */
body.theme-wanderlust .wl-stage {
    display: block !important;
    height: 100vh !important;
    min-height: 640px !important;
    max-height: 920px !important;
    overflow: hidden !important;
    padding: 0 !important;
}
body.theme-wanderlust .wl-float-search {
    position: absolute !important;
    top: 86px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(400px, 56vw) !important;
}
body.theme-wanderlust .wl-paradise-card {
    position: absolute !important;
    top: 150px !important;
    right: 48px !important;
    bottom: 36px !important;
    left: auto !important;
    width: clamp(320px, 42vw, 480px) !important;
}
body.theme-wanderlust .wl-cta-card {
    position: absolute !important;
    left: 36px !important;
    bottom: 52px !important;
    width: min(340px, 34vw) !important;
    max-width: 360px !important;
}
body.theme-wanderlust .wl-float-chip,
body.theme-wanderlust .wl-dots {
    display: flex !important;
}
body.theme-wanderlust .wl-dots {
    flex-direction: column !important;
}

/* Wide canvas refinements */
body.theme-wanderlust .nav-inner {
    padding: 26px 40px 12px !important;
}
body.theme-wanderlust .wl-paradise-card {
    width: clamp(420px, 46vw, 600px) !important;
    right: 56px !important;
    top: 156px !important;
    bottom: 44px !important;
    border-radius: 36px !important;
}
body.theme-wanderlust .wl-cta-card {
    left: 48px !important;
    bottom: 64px !important;
    width: 340px !important;
}
body.theme-wanderlust .wl-float-search {
    top: 92px !important;
    width: 420px !important;
}

/* About / telegram / watch / instagram pages — fill width glass */
body.theme-wanderlust .journal-main > .section-surface,
body.theme-wanderlust .journal-stack > .section-surface {
    width: 100%;
}

/* Kill horizontal-clip from older mobile fixes when desktop-forced */
body.theme-wanderlust {
    overflow-x: auto;
}
html:has(body.theme-wanderlust),
body.theme-wanderlust {
    max-width: none;
}

/* Global: no backdrop blur on wanderlust content chrome (scroll-safe) */
body.theme-wanderlust .x-source-badge,
body.theme-wanderlust .rail-nav-btn,
body.theme-wanderlust .search-fab,
body.theme-wanderlust .back-to-top,
body.theme-wanderlust .admin-fab,
body.theme-wanderlust .cat-pill,
body.theme-wanderlust .live-pill,
body.theme-wanderlust .modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ===== Gear / affiliate equipment ===== */
.gear-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.gear-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 16px 36px -24px rgba(4, 47, 46, 0.3);
    min-height: 100%;
}
body.theme-wanderlust .gear-card {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: none !important;
}
.gear-card-media {
    aspect-ratio: 16 / 10;
    background: rgba(4, 47, 46, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gear-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gear-card-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    font-size: 28px;
}
.gear-card-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.gear-card-cat {
    align-self: flex-start;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}
.gear-card-body h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.2;
    color: #042f2e;
    margin: 0;
}
.gear-card-body p {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(15, 23, 42, 0.62);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gear-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.55);
    margin-top: auto;
}
.gear-aff-note {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    font-weight: 600;
}
.gear-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 11px 16px;
    border-radius: 999px;
    background: #0d9488;
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
}
.gear-card-cta:hover {
    background: #0f766e;
    transform: translateY(-1px);
}
body.theme-wanderlust .gear-card-body h3 { color: #042f2e !important; }
body.theme-wanderlust .gear-card-body p { color: rgba(15, 23, 42, 0.62) !important; }