/* Swiss — white space, one tight grotesk, numbered sections, a single red accent. */
:root {
    --font-sans: "Inter Tight", -apple-system, "PingFang SC", sans-serif;
    --font-serif: "Inter Tight", -apple-system, "PingFang SC", sans-serif;
    --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
    --font-hand: "Inter Tight", sans-serif;
}

:root,
:root[data-theme="light"] {
    --bg: #ffffff;
    --bg-elev: #ffffff;
    --bg-sunk: #f4f4f4;
    --ink: #111111;
    --ink-soft: #4a4a4a;
    --ink-faint: #6b6b6b;
    --rule: #e4e4e4;
    --rule-soft: #efefef;
    --accent: #d42a20;
    --accent-hover: #a91f17;
    --accent-wash: #fbe9e8;
    --badge-ink: #6b4500;
    --badge-bg: #ffe9a8;
    --badge-border: #e0b84a;
}

:root[data-theme="dark"] {
    --bg: #0d0d0d;
    --bg-elev: #151515;
    --bg-sunk: #080808;
    --ink: #f2f2f2;
    --ink-soft: #b0b0b0;
    --ink-faint: #8c8c8c;
    --rule: #262626;
    --rule-soft: #1b1b1b;
    --accent: #ff5a4e;
    --accent-hover: #ff8076;
    --accent-wash: #2a1312;
    --badge-ink: #f6d680;
    --badge-bg: #3a2e12;
    --badge-border: #8a6d2a;
}

.hero-name,
.topbar-name {
    font-family: "Inter Tight", sans-serif;
    font-weight: 800;
    letter-spacing: -0.055em;
    word-spacing: 0.2em;
}
.hero-name { font-size: clamp(3.2rem, 8.5vw, 5.4rem); line-height: 0.95; }
.topbar-name { font-size: 1.1rem; letter-spacing: -0.04em; }
.topbar-name::after { content: "."; color: var(--accent); }
.hero-name-en::after { content: "."; color: var(--accent); }
.hero-name-cn { margin-inline-start: 0.5rem; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; }

.hero-motto { display: none; }
.hero-role { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.74rem; }

/* Numbered section headings: 01 — About */
main { counter-reset: sec; }
.section-title {
    counter-increment: sec;
    font-weight: 700;
    letter-spacing: -0.035em;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
}
.section-title::before {
    content: counter(sec, decimal-leading-zero);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    min-width: 1.8rem;
}

.pub-title { font-weight: 650; letter-spacing: -0.03em; }
.pub-venue {
    padding: 0.18rem 0.5rem;
    background: var(--ink);
    color: var(--bg);
    border-radius: 0;
}

.hero-portrait img,
.pub-thumb img { border-radius: 0; }

/* Award badge: a light sweep crosses the gold every few seconds. */
.pub-badge {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 0 0 0 rgba(224, 184, 74, 0);
    animation: badge-glow 3.2s var(--ease) infinite;
}
.pub-badge::after {
    content: "";
    position: absolute;
    inset: -50% auto -50% -60%;
    z-index: -1;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-20deg);
    animation: badge-shine 3.2s var(--ease) infinite;
}
:root[data-theme="dark"] .pub-badge::after {
    background: linear-gradient(100deg, transparent, rgba(255, 226, 140, 0.35), transparent);
}
@keyframes badge-shine {
    0%, 55% { left: -60%; }
    100% { left: 130%; }
}
@keyframes badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 184, 74, 0); }
    50% { box-shadow: 0 0 12px 1px rgba(224, 184, 74, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .pub-badge,
    .pub-badge::after { animation: none; }
    .pub-badge::after { display: none; }
}

/* Background robot: drifts slowly around the viewport behind the content. */
.bg-robot {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 0;
    pointer-events: none;
    color: var(--accent);
    opacity: 0.14;
    animation: robot-drift 60s ease-in-out infinite;
}
.bg-robot-bob {
    font-size: 4.5rem;
    animation: robot-bob 4s ease-in-out infinite;
}
:root[data-theme="dark"] .bg-robot { opacity: 0.2; }
@keyframes robot-drift {
    0%   { transform: translate(6vw, 22vh); }
    20%  { transform: translate(78vw, 12vh); }
    40%  { transform: translate(86vw, 70vh); }
    60%  { transform: translate(44vw, 80vh); }
    80%  { transform: translate(4vw, 64vh); }
    100% { transform: translate(6vw, 22vh); }
}
@keyframes robot-bob {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}
@media (max-width: 720px) {
    .bg-robot-bob { font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bg-robot,
    .bg-robot-bob { animation: none; }
    .bg-robot { transform: translate(82vw, 75vh); }
}