/* ───────────────────────────────────────────
   banglewei.com — shared styles
   Used by every page. Page-specific styles
   live in each page's own <style> block.
   ─────────────────────────────────────────── */

:root {
    --bg: #0a0a0a;
    --surface: #111111;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.25);
    --text: #f0ece4;
    --text-soft: rgba(240,236,228,0.75);
    --text-dim: rgba(240,236,228,0.6);
    --text-faint: rgba(240,236,228,0.42);
    --muted: rgba(240,236,228,0.52);
    --accent: rgba(240,236,228,0.12);
    --glow: rgba(200,180,140,0.15);
    --overlay: rgba(10,10,10,0.97);
}

/* ─── LIGHT MODE — pure white, maximum-contrast black ink ─── */
[data-theme="white"] {
    --bg: #ffffff;
    --surface: #f4f4f4;
    --border: rgba(0,0,0,0.18);
    --border-strong: rgba(0,0,0,0.5);
    --text: #000000;
    --text-soft: rgba(0,0,0,0.88);
    --text-dim: rgba(0,0,0,0.78);
    --text-faint: rgba(0,0,0,0.45);
    --muted: rgba(0,0,0,0.65);
    --accent: rgba(0,0,0,0.06);
    --glow: rgba(120,120,120,0.15);
    --overlay: rgba(255,255,255,0.97);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

/* ─── NAV ─── */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 48px;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.1s forwards;
}

.nav-links {
    display: flex;
    gap: 10px;
}

.nav-links a {
    color: var(--muted);
    text-decoration: none;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 10px;
    border: 1px solid var(--border);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.nav-links a:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--accent);
}

.nav-timeline {
    color: var(--muted);
    text-decoration: none;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 0.2s;
}

.nav-timeline:hover {
    color: var(--text);
}

.nav-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Current page: hide its own nav link so it's not an option until you leave (e.g. via Home) */
.nav-links a.active {
    display: none;
}

/* ─── THEME TOGGLE ─── */
.theme-toggle {
    background: none;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 10px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.theme-toggle:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--accent);
}

/* Theme toggle that sits beside the hamburger on mobile (hidden on desktop) */
.theme-toggle-mobile {
    display: none;
}

.mobile-menu-links a.active {
    display: none;
}

/* ─── MOBILE MENU ─── */
/* Small wordmark shown top-left on mobile only */
.nav-brand {
    display: none;
    color: var(--text);
    text-decoration: none;
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* The 3-line bar */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    padding: 12px 10px;
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--text);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Bars morph into an X when open */
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen overlay menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
}

/* X button pinned to overlay top-right — always visible regardless of scroll */
.menu-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.menu-close:hover {
    border-color: var(--border-strong);
    background: var(--accent);
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
}

.mobile-menu-links a {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 34px;
    font-weight: 300;
    color: var(--text);
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-menu.open .mobile-menu-links a {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveal */
.mobile-menu.open .mobile-menu-links a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open .mobile-menu-links a:nth-child(2) { transition-delay: 0.10s; }
.mobile-menu.open .mobile-menu-links a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open .mobile-menu-links a:nth-child(4) { transition-delay: 0.20s; }
.mobile-menu.open .mobile-menu-links a:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.open .mobile-menu-links a:nth-child(6) { transition-delay: 0.30s; }

.mobile-menu-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.mobile-menu-socials a {
    color: var(--muted);
    text-decoration: none;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 10px;
    border: 1px solid var(--border);
}

/* ─── MAIN ─── */
main {
    padding: 80px 48px 120px;
    max-width: 1000px;
}

/* ─── CHAPTER HEADINGS ─── */
.chapter {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 300;
    font-style: italic;
    color: var(--text-soft);
    margin: 80px 0 40px;
    line-height: 1.2;
}

/* ─── TIMELINE ENTRIES ─── */
.timeline {
    display: flex;
    flex-direction: column;
}

.entry {
    position: relative;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 24px;
    padding: 18px 0;
    transition: background 0.2s, padding-left 0.2s;
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp 0.6s ease forwards;
}

.entry:hover {
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
    padding-left: 8px;
    margin-left: -8px;
}

.entry-date {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    padding-top: 2px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.entry-text {
    font-size: 15px;
    color: var(--text);
    font-weight: 300;
}

.entry-text a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--muted);
    transition: text-decoration-color 0.2s;
    /* sit above the stretched arrow hit area */
    position: relative;
    z-index: 1;
}

.entry-text a:hover {
    text-decoration-color: var(--text);
}

/* Arrow link to the essay behind an entry */
.entry-arrow {
    font-family: 'DM Mono', monospace;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    align-self: center;
    padding: 0 4px;
    transition: color 0.2s;
}

.entry:hover .entry-arrow {
    color: var(--text);
}

/* Whole row is clickable — the arrow's hit area stretches across the entry */
.entry-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Staggered animations */
.entry:nth-child(1)  { animation-delay: 0.05s; }
.entry:nth-child(2)  { animation-delay: 0.10s; }
.entry:nth-child(3)  { animation-delay: 0.15s; }
.entry:nth-child(4)  { animation-delay: 0.20s; }
.entry:nth-child(5)  { animation-delay: 0.25s; }
.entry:nth-child(6)  { animation-delay: 0.30s; }
.entry:nth-child(7)  { animation-delay: 0.35s; }
.entry:nth-child(8)  { animation-delay: 0.40s; }
.entry:nth-child(9)  { animation-delay: 0.45s; }
.entry:nth-child(10) { animation-delay: 0.50s; }
.entry:nth-child(11) { animation-delay: 0.55s; }
.entry:nth-child(12) { animation-delay: 0.60s; }

/* ─── BORN ENTRY (special) ─── */
.entry-born .entry-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-style: italic;
}

/* ─── WIP BLOCK ─── */
.wip {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(32px, 5vw, 56px);
    color: var(--text-faint);
    font-weight: 300;
}

/* Screen-reader-only: removes from view, keeps in the accessibility tree */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ─── FOOTER ─── */
footer {
    padding: 0 48px 48px;
}

.copyright {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.1em;
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Elements above start at opacity: 0 and are revealed by fadeUp, so motion
   can't simply be switched off — collapse it instead. The `forwards` fill
   still applies, landing content at opacity: 1 immediately. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
    nav, main, footer {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Hide the link rows, show wordmark + hamburger instead */
    nav .nav-links { display: none; }
    .nav-brand { display: block; }
    .menu-toggle { display: flex; }

    /* Theme toggle sits to the right, just before the hamburger */
    .theme-toggle-mobile {
        display: block;
        margin-left: auto;
        margin-right: 10px;
    }

    .entry {
        grid-template-columns: 72px 1fr auto;
        gap: 16px;
    }
}