/* ═══════════════════════════════════════════════
   PaperByMe · Shared Stylesheet
   Covers: design tokens, reset, nav, footer,
   page-wrap, eyebrow, page-header, and all
   shared components. Each page only needs its
   own section-specific rules on top of this.
═══════════════════════════════════════════════ */

/* ── DESIGN TOKENS ────────────────────────── */
:root {
    --bg:          #FAFAFA;
    --paper:       #FFFFFF;
    --guide:       #0A0A0A;
    --bleed:       #4A4A4A;
    --ink:         #0A0A0A;
    --ink-rgb:     10,10,10;
    --ink2:        #4A4A4A;
    --ink3:        #8A8A8A;
    --rule:        rgba(var(--ink-rgb),0.12);
    --rule-strong: rgba(var(--ink-rgb),0.32);
    --border:      #E0E0E0;
    --hover-bg:    #F0F0F0;
    --mono:        'IBM Plex Mono', monospace;
    --sans:        'IBM Plex Sans', sans-serif;
    --r:           2px;

    /* spacing scale */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  32px;
    --space-xl:  48px;
    --space-2xl: 64px;

    /* nav */
    --nav-h: 56px;
}

/* ── RESET ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── BASE ─────────────────────────────────── */
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    background-image:
        linear-gradient(rgba(var(--ink-rgb),0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ink-rgb),0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ── NAV ──────────────────────────────────── */
nav {
    background: var(--paper);
    border-bottom: 1px solid var(--rule-strong);
    position: sticky;
    top: 0;
    z-index: 200;
}

.nav-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 40px;
    position: relative;
}
.logo-mark {
    width: 26px; height: 26px;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
}
.logo-mark img { width: 16px; height: 16px; }
.logo-name {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
}

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    flex: 1;
}
.nav-links li { position: relative; }
.nav-links a {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--ink2);
    padding: 0 20px;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    border-right: 1px solid var(--rule);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: color 0.15s, background 0.15s;
}
.nav-links a:hover  { color: var(--ink); background: rgba(var(--ink-rgb),0.04); }
.nav-links a.active { color: var(--guide); font-weight: 600; background: rgba(var(--ink-rgb),0.06); }
.nav-links li:first-child a { border-left: 1px solid var(--rule); }

/* Nav coord label */
.nav-coord {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--guide);
    margin-left: auto;
    opacity: 0.7;
    letter-spacing: 0.05em;
}

/* ── HAMBURGER BUTTON (mobile only) ─────── */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    width: 36px;
    height: 36px;
}
.nav-burger span {
    display: block;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE NAV PANEL ─────────────────────── */
@media (max-width: 640px) {
    .nav-coord { display: none; }
    .logo { margin-right: 0; }

    .nav-burger { display: flex; }

    .nav-links {
        display: none;
        position: absolute;
        top: var(--nav-h);
        left: 0; right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule-strong);
        flex-direction: column;
        align-items: stretch;
        z-index: 300;
        box-shadow: 0 8px 24px rgba(var(--ink-rgb),0.08);
    }
    .nav-links.open { display: flex; }

    .nav-links li { width: 100%; }
    .nav-links a {
        height: 52px;
        padding: 0 var(--space-lg);
        border-right: none;
        border-bottom: 1px solid var(--rule);
        font-size: 13px;
    }
    .nav-links li:first-child a { border-left: none; }
    .nav-links li:last-child  a { border-bottom: none; }
}

/* ── PAGE WRAP ────────────────────────────── */
.page-wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--space-lg) 96px;
}

@media (max-width: 480px) {
    .page-wrap { padding: 0 var(--space-md) 64px; }
}

/* ── EYEBROW ──────────────────────────────── */
.eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--guide);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.eyebrow::before {
    content: '';
    display: inline-block;
    width: 16px; height: 1px;
    background: var(--guide);
}

/* ── PAGE HEADER (About / Support) ────────── */
.page-header {
    padding: var(--space-2xl) 0 var(--space-xl);
    border-bottom: 1px solid var(--rule-strong);
    position: relative;
}
.page-header h1 {
    font-size: clamp(26px, 5vw, 42px);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
}
.page-header h1 strong { font-weight: 600; }
.page-header p {
    font-size: 15px;
    color: var(--ink2);
    line-height: 1.7;
    max-width: 480px;
}

/* ── FOOTER ───────────────────────────────── */
footer {
    border-top: 1px solid var(--rule-strong);
    background: var(--paper);
    position: relative;
    width: 100%;
}
.footer-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}
.footer-left p { 
    font-family: var(--mono); font-size: 11px; color: var(--ink3); letter-spacing: 0.03em; 
}
.footer-left a { 
    color: var(--ink); font-weight: 500; text-decoration: none; 
}
.footer-left a:hover { 
    color: var(--guide); 
}
.footer-right { 
    display: flex; gap: 24px; 
}
.footer-right a { 
    font-family: var(--mono); font-size: 11px; color: var(--ink3); 
    text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; transition: color 0.15s; 
}
.footer-right a:hover { 
    color: var(--guide); 
}
.footer-right a.active { 
    color: var(--ink); font-weight: 600; 
}

@media (max-width: 640px) {
    .footer-inner { 
        flex-direction: column; padding: var(--space-md); gap: 16px; 
    }
}

/* ── CTA BLOCK (shared, used in About) ─────── */
.cta-block {
    background: var(--ink);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    position: relative;
}
.cta-text h3 {
    font-size: 18px; font-weight: 300; color: white;
    margin-bottom: 6px; letter-spacing: -0.01em;
}
.cta-text h3 strong { font-weight: 600; }
.cta-text p {
    font-family: var(--mono); font-size: 12px;
    color: rgba(255,255,255,0.5); letter-spacing: 0.03em;
}
.cta-btn {
    background: white; color: var(--ink);
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    padding: 12px 24px; letter-spacing: 0.05em;
    display: inline-flex; align-items: center; gap: 8px;
    text-transform: uppercase; transition: opacity 0.15s;
    flex-shrink: 0;
}
.cta-btn:hover { opacity: 0.88; }

@media (max-width: 480px) {
    .cta-block { padding: var(--space-md); }
    .cta-btn   { width: 100%; justify-content: center; }
}

/* ── BOOKBYME BANNER (shared) ──────────────── */
.bookbyme-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-lg);
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    padding: 28px 32px;
    margin: var(--space-xl) 0;
    position: relative;
    text-decoration: none;
    transition: background 0.15s;
}
.bookbyme-banner:hover { background: #F0F0F0; }
.bookbyme-banner::before {
    content: 'ALSO BY THE CREATOR';
    position: absolute; top: -6px; left: 12px;
    background: var(--bg);
    font-family: var(--mono); font-size: 9px;
    color: var(--guide); padding: 0 6px; letter-spacing: 0.1em;
}
.bbm-left { display: flex; align-items: center; gap: 20px; }
.bbm-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
}
.bbm-icon svg { width: 22px; height: 22px; fill: white; }
.bbm-text {}
.bbm-label {
    font-family: var(--mono); font-size: 10px;
    color: var(--guide); letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 4px;
}
.bbm-title {
    font-size: 16px; font-weight: 600; color: var(--ink);
    letter-spacing: -0.01em; margin-bottom: 4px;
}
.bbm-desc {
    font-size: 13px; color: var(--ink2); line-height: 1.5;
}
.bbm-cta {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    color: var(--ink); letter-spacing: 0.05em; text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--rule-strong);
    padding: 10px 18px; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.bookbyme-banner:hover .bbm-cta {
    background: var(--ink); color: white; border-color: var(--ink);
}
@media (max-width: 640px) {
    .bookbyme-banner { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-md); }
    .bbm-cta { width: 100%; justify-content: center; }
}

/* ── SPONSOR BLOCK (shared) ────────────────── */
.sponsor-block {
    border: 1px solid var(--rule-strong);
    background: var(--paper);
    padding: 28px 32px;
    margin: var(--space-xl) 0;
    position: relative;
}
.sponsor-block::before {
    content: 'SUPPORT THIS PROJECT';
    position: absolute; top: -6px; left: 12px;
    background: var(--bg);
    font-family: var(--mono); font-size: 9px;
    color: var(--guide); padding: 0 6px; letter-spacing: 0.1em;
}
.sponsor-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-lg);
}
.sponsor-text h3 {
    font-size: 14px; font-weight: 600; color: var(--ink);
    margin-bottom: 6px; letter-spacing: -0.01em;
}
.sponsor-text p {
    font-size: 13px; color: var(--ink2); line-height: 1.6; max-width: 440px;
}
.sponsor-btns {
    display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}
.sponsor-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    border: 1px solid var(--rule-strong);
    padding: 9px 14px;
    color: var(--ink); background: var(--bg);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.sponsor-btn:hover { background: var(--ink); color: white; border-color: var(--ink); }
.sponsor-btn i { font-size: 12px; }
.sponsor-btn.kofi    i { color: #29ABE0; }
.sponsor-btn.coffee  i { color: #FFDD00; }
.sponsor-btn.paypal  i { color: #009CDE; }
.sponsor-btn:hover i { color: white; }

@media (max-width: 760px) {
    .sponsor-inner { grid-template-columns: 1fr; gap: var(--space-md); }
    .sponsor-btns  { width: 100%; }
    .sponsor-btn   { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
    .sponsor-block { padding: var(--space-md); }
    .sponsor-btn   { flex: 1 1 100%; }
}

/* ── LANGUAGE SWITCHER ────────────────────── */
.lang-switcher {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}
.lang-btn {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink2);
    background: none;
    border: none;
    cursor: pointer;
    height: var(--nav-h);
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.15s, background 0.15s;
}
.lang-btn:hover { color: var(--ink); background: rgba(var(--ink-rgb),0.04); }
.lang-btn.open  { color: var(--guide); }
.lang-btn .globe {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none; stroke-width: 1.8;
    flex-shrink: 0;
}
.lang-btn .chevron {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.lang-btn.open .chevron { transform: rotate(180deg); }

.lang-dropdown {
    position: absolute;
    top: calc(var(--nav-h) + 1px);
    right: 0;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    width: 220px;
    z-index: 400;
    box-shadow: 0 8px 24px rgba(var(--ink-rgb),0.08);
    display: none;
}
.lang-dropdown.open { display: block; }

.lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 8px;
}
.lang-option {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink2);
    padding: 8px 10px;
    letter-spacing: 0.02em;
    display: block;
    transition: background 0.1s, color 0.1s;
    line-height: 1.3;
}
.lang-option:hover   { background: rgba(var(--ink-rgb),0.06); color: var(--ink); }
.lang-option.current { color: var(--guide); font-weight: 600; }

/* 移动端：语言区块嵌入汉堡菜单 */
.mobile-lang-section {
    display: none;
    border-top: 1px solid var(--rule-strong);
    background: rgba(var(--ink-rgb),0.02);
    padding: 8px 0;
}
.mobile-lang-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--guide);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px var(--space-lg) 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mobile-lang-label svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
    flex-shrink: 0;
}
.mobile-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px 8px 8px;
}
.mobile-lang-opt {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink2);
    padding: 7px 10px;
    letter-spacing: 0.02em;
    display: block;
    line-height: 1.3;
}
.mobile-lang-opt:hover   { color: var(--ink); }
.mobile-lang-opt.current { color: var(--guide); font-weight: 600; }

@media (max-width: 640px) {
    .lang-switcher                   { display: none; }
    .mobile-lang-section             { display: none; }   /* 默认隐藏，JS 控制 */
    .mobile-lang-section.open        { display: block; }
}

/* ── MOBILE LANG SECTION POSITION FIX ─────── */
/* 覆盖上方的移动端规则，改为绝对定位紧跟 nav-links */
@media (max-width: 640px) {
    .mobile-lang-section {
        position: absolute;
        left: 0; right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule-strong);
        box-shadow: 0 8px 24px rgba(var(--ink-rgb),0.08);
        z-index: 300;
    }
}