/* ============================================================
   桃花岛招聘官网 · 共享样式
   设计基因继承自平台 UI（暖米白 / 桃花粉金绿 / 衬线 + 黑体）
   官网调性：更克制、更大留白、更长易读的编辑式排版
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --bg:#FAF5F0; --bg-soft:#F3E9E1; --surface:#FFFFFF; --surface-2:#FCF7F3;
  --ink:#2D2020; --ink-soft:#6B5D54; --ink-faint:#A89A90;
  --line:#EADFD6; --line-soft:#F1E8E1;
  --peach:#E85D75; --peach-soft:#FFB5A7; --peach-bg:#FFF0EC;
  --gold:#C8902F; --gold-soft:#F5C542; --gold-bg:#FBF1DC;
  --jade:#4E9C8C; --jade-soft:#6BAFA0; --jade-bg:#E6F2EE;
  --shadow:0 1px 2px rgba(45,32,32,.04),0 10px 30px rgba(45,32,32,.05);
  --shadow-lg:0 4px 14px rgba(45,32,32,.07),0 30px 60px rgba(45,32,32,.09);
  --radius:18px; --radius-sm:11px;
  --serif:'Noto Serif SC','Songti SC',serif;
  --sans:'Noto Sans SC',-apple-system,'PingFang SC',sans-serif;
  --display:'Fraunces',serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --measure:680px; --wide:1180px;
  --nav-h:68px;
}
[data-theme="dark"]{
  --bg:#141010; --bg-soft:#1C1614; --surface:#1E1816; --surface-2:#26201D;
  --ink:#F2E9E3; --ink-soft:#B5A79D; --ink-faint:#7A6C63;
  --line:#332925; --line-soft:#262019;
  --peach:#FF8095; --peach-soft:#C76072; --peach-bg:#2E1C1F;
  --gold:#E6B85C; --gold-soft:#F5C542; --gold-bg:#2C2417;
  --jade:#6FC0AE; --jade-soft:#5A9E8E; --jade-bg:#16261F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.32);
  --shadow-lg:0 4px 14px rgba(0,0,0,.4),0 30px 60px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  font-family:var(--sans);background:var(--bg);color:var(--ink);
  line-height:1.85;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;transition:background .45s ease,color .45s ease;
}
::selection{background:var(--peach-soft);color:#2D2020}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 40px}
.measure{max-width:var(--measure)}
.section{padding:clamp(80px,11vh,150px) 0;position:relative}
.section + .section{border-top:1px solid var(--line-soft)}
.rule{height:1px;background:var(--line);border:0}

/* ---------- Eyebrow / headings ---------- */
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--peach);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
}
.eyebrow::before{content:'';width:22px;height:1.5px;background:var(--peach);display:inline-block}
.eyebrow.muted{color:var(--ink-faint)}
.eyebrow.muted::before{background:var(--ink-faint)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:.01em;line-height:1.2}
.h2{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:.02em;line-height:1.18}
.h3{font-size:clamp(22px,2.6vw,30px);font-weight:700}
.display-en{font-family:var(--display);font-style:italic;font-weight:500;color:var(--peach)}

/* ---------- Prose ---------- */
.lede{font-size:clamp(19px,2.1vw,24px);line-height:1.7;color:var(--ink);font-weight:400;letter-spacing:.01em}
.prose p{font-size:18px;line-height:1.95;color:var(--ink-soft);margin-top:1.3em}
.prose p:first-child{margin-top:0}
.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose .em{font-family:var(--display);font-style:italic;color:var(--ink)}
.muted{color:var(--ink-faint)}
.small{font-size:14px;line-height:1.7;color:var(--ink-faint)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent)}
.nav-inner{max-width:var(--wide);margin:0 auto;padding:0 40px;height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.04em;flex-shrink:0;white-space:nowrap}
.brand .mark{width:30px;height:30px;flex-shrink:0}
.brand .mark svg{width:100%;height:100%;display:block}
.brand .en{font-family:var(--display);font-style:italic;font-weight:500;font-size:12px;color:var(--ink-faint);margin-left:2px;letter-spacing:0;white-space:nowrap}
@media(max-width:1080px){.brand .en{display:none}}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:18px}
.nav-links a{
  font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:8px 14px;border-radius:9px;
  transition:.18s;position:relative;
}
.nav-links a:hover{color:var(--ink);background:var(--surface-2)}
.nav-links a.active{color:var(--peach);font-weight:700}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* language dropdown */
.langsel{position:relative}
.langsel-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.18s;line-height:1}
.langsel-btn:hover{border-color:var(--peach-soft);color:var(--ink)}
.langsel-btn .globe{width:15px;height:15px;opacity:.75;flex-shrink:0}
.langsel-btn .chev{width:12px;height:12px;opacity:.7;transition:transform .22s;flex-shrink:0}
.langsel.open .langsel-btn{border-color:var(--peach-soft);color:var(--peach)}
.langsel.open .langsel-btn .chev{transform:rotate(180deg)}
.langsel-menu{position:absolute;right:0;top:calc(100% + 9px);min-width:182px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);padding:6px;opacity:0;transform:translateY(-7px);pointer-events:none;transition:.2s cubic-bezier(.2,.7,.2,1);z-index:130}
.langsel.open .langsel-menu{opacity:1;transform:none;pointer-events:auto}
.langsel-menu li{margin:0}
.langsel-menu button{width:100%;text-align:left;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-soft);background:none;border:0;padding:9px 13px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:.14s}
.langsel-menu button .code{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);font-weight:600;flex-shrink:0}
.langsel-menu button:hover{background:var(--surface-2);color:var(--ink)}
.langsel-menu button.on{color:var(--peach);font-weight:600}
.langsel-menu button.on .code{color:var(--peach)}
.icon-btn{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);transition:.2s;flex-shrink:0}
.icon-btn:hover{border-color:var(--peach-soft);color:var(--peach)}
.icon-btn svg{width:17px;height:17px}
.nav-toggle{display:none}
.theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:block}

/* mobile menu panel */
.mobile-menu{display:none}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;
  padding:13px 24px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);transition:.2s;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);border-color:var(--peach-soft);box-shadow:var(--shadow)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--peach);color:#fff;border-color:var(--peach)}
.btn-primary:hover{filter:brightness(1.05);color:#fff}
[data-theme="dark"] .btn-primary{color:#241413}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-lg{padding:16px 30px;font-size:16px}
.textlink{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--peach);
  border-bottom:1.5px solid transparent;transition:.18s;padding-bottom:1px;
}
.textlink:hover{border-bottom-color:var(--peach)}
.textlink .arr{transition:transform .2s}
.textlink:hover .arr{transform:translateX(3px)}

/* ---------- Pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:999px;
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.live{background:var(--jade-bg);color:var(--jade)}
.pill.dev{background:var(--gold-bg);color:var(--gold)}
.pill.soon{background:var(--peach-bg);color:var(--peach)}
.pill.plain{background:var(--surface-2);color:var(--ink-faint);border:1px solid var(--line)}

/* ---------- Footer ---------- */
.footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:72px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer h5{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px}
.footer ul{list-style:none}
.footer li{margin-bottom:11px}
.footer li a{font-size:14.5px;color:var(--ink-soft);transition:.15s}
.footer li a:hover{color:var(--peach)}
.footer .f-brand{font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:.04em;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer .f-brand .mark{width:28px;height:28px}
.footer .f-tag{font-size:14.5px;color:var(--ink-soft);max-width:260px;line-height:1.8}
.footer .mono-mail{font-family:var(--mono);font-size:13px}
.footer-bottom{margin-top:56px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-bottom .cr{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.footer-bottom .r18{font-size:12.5px;color:var(--ink-faint);max-width:520px;line-height:1.7}
.footer-bottom .r18 b{color:var(--peach)}

/* ---------- Decorative petal (subtle) ---------- */
.petal{position:absolute;pointer-events:none;z-index:0;opacity:.5}
.petal svg{width:100%;height:100%;display:block}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  :root{--nav-h:60px}
  .wrap,.nav-inner{padding:0 22px}
  .nav-links,.nav-right .langsel{display:none}
  .nav-toggle{display:grid}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px 28px}
  .footer .f-brand-col{grid-column:1/-1}
  .section{padding:72px 0}
}
@media (max-width:540px){
  .wrap,.nav-inner{padding:0 18px}
  .footer-grid{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .btn-row{flex-direction:column;width:100%}
}

/* ---------- Mobile menu (overlay) ---------- */
.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:90;background:var(--bg);
  padding:28px 22px 40px;display:flex;flex-direction:column;gap:6px;
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s;
  overflow-y:auto;
}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--serif);font-size:26px;font-weight:700;padding:16px 6px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.mobile-menu a.active{color:var(--peach)}
.mobile-menu .mm-lang{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
.mobile-menu .mm-lang button{font-family:var(--mono);font-size:14px;font-weight:600;padding:10px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-soft);cursor:pointer}
.mobile-menu .mm-lang button.on{background:var(--peach);color:#fff;border-color:var(--peach)}
@media (min-width:881px){.mobile-menu{display:none!important}}