/* =========================================================
   common.css — 所有页面共用
   变量 / reset / 顶部导航 / 移动端菜单 / 小猫按钮 / toast
   ========================================================= */

:root {
  --bg: #F4F1E6;
  --paper: #FBFAF3;
  --ink: #16281F;
  --muted: #6E6C5E;
  --line: rgba(22, 40, 31, .14);
  --accent: #1F4A34;
  --accent-2: #D8E8D9;
  --nav: rgba(251,250,243,.85);
  --shadow: 0 18px 60px rgba(20, 30, 22, .12);
  --radius: 30px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 10px auto 40px;
  position: relative;
  isolation: isolate;
}

/* ---- header / nav ---- */
header.site-header { position:relative; height:90px; }

.nav {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 7px;
  padding: 7px;
  border:1px solid rgba(255,255,255,.95);
  border-radius: 999px;
  background: var(--nav);
  box-shadow: 0 14px 32px rgba(0,0,0,.11);
  backdrop-filter: blur(18px);
  z-index: 10;
}
.nav a { padding: 11px 17px; border-radius: 999px; color: var(--muted); font-size: 15px; transition:.25s ease; }
.nav a:hover, .nav a.active { background: var(--accent); color:white; }

.nav-toggle {
  display:none; position:absolute; top:22px; right:20px; z-index:12;
  width:46px; height:46px; border-radius:50%;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
  background: var(--nav); border:1px solid rgba(255,255,255,.95);
  box-shadow: 0 14px 32px rgba(0,0,0,.11); backdrop-filter: blur(18px);
  cursor:pointer;
}
.nav-toggle span { width:17px; height:1.6px; background:var(--ink); border-radius:2px; display:block; transition:.25s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.nav-panel { display:none; }
.brand {
  position:absolute; top:28px; left:30px; z-index:10;
  font-weight:700; font-size: 17px; letter-spacing:.08em;
}
.brand span { color: var(--accent); }

/* ---- small shared bits (index / projects / about) ---- */
.eyebrow { font-size:14px; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); margin-bottom:15px; }

.next-section { padding: 110px 8px 30px; }
.next-section h2 { margin:0; font-size:clamp(38px,6vw,72px); letter-spacing:-.06em; line-height:.95; }
.next-section p { margin:16px 0 0; color:var(--muted); max-width:590px; line-height:1.7; }
.mini-shape { position:absolute; width:190px; height:190px; right:-20px; bottom:-34px; border-radius:48% 52% 60% 40%; background:var(--accent-2); transform:rotate(18deg); }

/* ---- mascot badge + toast ---- */
.mascot-badge {
  position: fixed; right: 24px; bottom:24px; z-index:30; width:86px; height:86px; border-radius:50%;
  background:var(--paper); border:1px solid rgba(255,255,255,.8); box-shadow:0 18px 40px rgba(0,0,0,.20); overflow:hidden;
  cursor:pointer; transition:.25s ease;
}
.mascot-badge::before {
  content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--accent);
  opacity:.45; animation: pulseRing 2.6s ease-out infinite;
}
@keyframes pulseRing { 0%{transform:scale(.92);opacity:.5;} 70%{transform:scale(1.14);opacity:0;} 100%{transform:scale(1.14);opacity:0;} }
.mascot-badge:hover { transform:translateY(-5px) scale(1.04); }
.mascot-badge img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mascot-badge::after { content:'hi'; position:absolute; right:-3px; top:-4px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:4px 7px; border-radius:999px; box-shadow:0 4px 10px rgba(0,0,0,.15); z-index:2; }

.toast {
  position:fixed; right:24px; bottom:124px; z-index:40; padding:13px 16px; border-radius:16px; background:var(--ink); color:#fff;
  font-size:12px; opacity:0; transform:translateY(8px); pointer-events:none; transition:.25s ease; box-shadow:0 16px 36px rgba(0,0,0,.18);
}
.toast.show { opacity:1; transform:translateY(0); }

/* ---- responsive ---- */
@media (max-width: 840px) {
  .nav { top: 18px; }
  .brand { left:20px; }
}
@media (max-width: 620px) {
  .site-shell { width: min(100% - 16px, 1180px); margin-top:8px; }
  .brand { top:20px; font-size:15px; }
  .nav { display:none; }
  .nav-toggle { display:flex; }
  .nav-panel {
    display:flex; flex-direction:column; gap:3px;
    position:absolute; top:76px; left:20px; right:20px; z-index:11;
    background: var(--nav); border:1px solid rgba(255,255,255,.95); border-radius:22px;
    box-shadow: 0 24px 55px rgba(0,0,0,.18); backdrop-filter: blur(18px);
    padding:8px; opacity:0; transform:translateY(-10px); pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .nav-panel.open { opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-panel a { padding:14px 18px; border-radius:14px; color:var(--muted); font-size:15px; font-weight:500; }
  .nav-panel a.active, .nav-panel a:hover { background:var(--accent); color:#fff; }

  .next-section { padding:64px 5px 20px; }
  .mascot-badge { width:66px; height:66px; right:14px; bottom:14px; }
  .toast { right:14px; bottom:92px; max-width:calc(100% - 28px); white-space:normal; }
}
@media (max-width: 420px) {
  .brand { font-size:13px; }
  .next-section h2 { font-size:32px; }
}