/* Self-hosted. The Google Fonts <link> put two extra handshakes and a
   render-blocking cross-origin stylesheet in front of first paint, and
   handed every visitor's IP to a third party. Same faces, served from
   this origin. Regenerate with vendor_fonts.py. */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-300-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant SC';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-sc-300-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant SC';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-sc-300-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-sc-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-sc-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/eb-garamond-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/eb-garamond-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/eb-garamond-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/eb-garamond-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   BALIYANG.DEV — Shared Stylesheet (from baliyang-land)
═══════════════════════════════════════════════════════════════ */

:root {
    --ink:        #18160f;
    --ink-mid:    #2e2b22;
    --ink-light:  #4a4639;
    --mist:       #f4f1eb;
    --stone:      #e9e4da;
    --sage:       #6b7c62;
    --gold:       #8a7050;
    --gold-pale:  #b8a07a;
    --rule:       rgba(24,22,15,0.12);
    --rule-light: rgba(24,22,15,0.07);
    --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--mist);
    color: var(--ink);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ─── NAV ────────────────────────────────────────────────────── */
nav#main-nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 3.5rem;
    transition: border-color 0.5s, background 0.5s;
    border-bottom: 1px solid transparent;
}
nav#main-nav.scrolled {
    background: rgba(244,241,235,0.96);
    border-color: var(--rule);
    backdrop-filter: blur(8px);
}

.nav-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.nav-wordmark {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    line-height: 1;
}
.nav-parent {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-pale);
    text-decoration: none;
    transition: color 0.2s;
}
.nav-parent:hover { color: var(--gold); }
.nav-back {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-pale);
    text-decoration: none;
    transition: color 0.2s;
}
.nav-back:hover { color: var(--gold); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.8rem;
    list-style: none;
}
.nav-links > li > a {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-light);
    text-decoration: none;
    transition: color 0.2s;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--gold); }

/* ─── PAGE HERO ───────────────────────────────────────────────── */
.page-hero {
    padding: 13rem 3.5rem 5.5rem;
    border-bottom: 1px solid var(--rule);
}
.page-kicker {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--gold-pale);
    text-transform: uppercase;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp 0.7s 0.15s forwards;
}
.page-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--ink);
    opacity: 0;
    animation: fadeUp 0.8s 0.3s forwards;
}
.page-title em { font-style: normal; color: inherit; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--rule);
    padding: 2.2rem 3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-mark {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    color: var(--gold-pale);
    text-transform: uppercase;
}
.footer-copy {
    font-size: 0.75rem;
    font-family: 'EB Garamond', serif;
    color: var(--gold-pale);
    letter-spacing: 0.03em;
}

.footer-copy a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.footer-copy a:hover { color: var(--gold); }

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
    to   { opacity: 1; }
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay classes — apply alongside .reveal for grouped elements */
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.22s; }
.reveal-d3 { transition-delay: 0.34s; }
.reveal-d4 { transition-delay: 0.46s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }
  .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { transition-delay: 0s !important; }
}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    nav#main-nav { padding: 1.25rem 1.5rem; }
    .nav-links { gap: 1.8rem; }
    .page-hero { padding: 9rem 1.5rem 4rem; }
    footer { flex-direction: column; gap: 0.6rem; padding: 1.8rem 1.5rem; text-align: center; }
}

/* Headings: no italic accent, titles read as one voice */
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }

/* ─── MOBILE NAV ─────────────────────────────────────────────── */
/* Hidden above 768px; the media query below swaps .nav-links for it. */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--ink);
}
.hamburger span {
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;                 /* under the nav (100) so the toggle stays clickable */
    background: var(--mist);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    padding: 5rem 1.5rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu .mm-group {
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    color: var(--gold-pale, var(--gold));
    margin-bottom: -1.4rem;
}

/* Must come after the .hamburger component above: same specificity, so source
   order decides. Putting this in an earlier @media block let `display:none`
   win and the toggle never appeared. */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
}

/* ─── MOBILE NAV: solid, not translucent ─────────────────────── */
/* Scrolled, the nav was rgba(...,0.96) + blur(8px). On a phone that is enough
   for page text to ghost through the bar, so it never reads as attached to the
   section beneath. Matching the section colour exactly, with no blur, makes the
   bar and the page read as one surface. Desktop keeps the translucent version. */
@media (max-width: 768px) {
    nav#main-nav.scrolled {
        background: var(--mist);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Menu open: the overlay is light, so a dark-hero nav has to drop its light
   colours or the X and the wordmark disappear into it. Measured 1.0 contrast
   against the overlay before this existed. */
nav#main-nav.menu-open {
    background: var(--mist);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}