/* =========================================================
   育英才汇 ｜ 留学管家  —  Overseas Education Concierge
   Design tokens & base styles
   ========================================================= */

:root{
  /* Surfaces — warm ivory / stone */
  --ivory:   #F4F1EA;
  --paper:   #FBF9F4;
  --stone:   #ECE7DB;
  --stone-2: #E2DCCD;

  /* Ink — deep, slightly green-warm near-black */
  --ink:      #1C211D;
  --ink-soft: #51564E;
  --ink-mute: #837F73;

  /* Deep section — forest green */
  --forest:   #1E2A23;
  --forest-2: #233129;
  --forest-3: #2C3B31;

  /* Single accent — restrained bronze gold */
  --bronze:    #9A7B4F;
  --bronze-lt: #B89A6E;
  --bronze-dk: #836339;

  /* Hairlines */
  --line:      rgba(28,33,29,0.14);
  --line-soft: rgba(28,33,29,0.08);
  --line-dk:   rgba(244,241,234,0.16);
  --line-dk-soft: rgba(244,241,234,0.08);

  --on-dark:      #F4F1EA;
  --on-dark-soft: #C5C8BE;

  /* Type */
  --serif: "Noto Serif SC", "Songti SC", serif;
  --en:    "Cormorant Garamond", Georgia, serif;
  --sans:  "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono:  "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--bronze); color:var(--paper); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(80px,11vw,168px); position:relative; }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--bronze-dk); font-weight:400;
  display:inline-flex; align-items:center; gap:.85em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--bronze); opacity:.7; }
.dark .eyebrow{ color:var(--bronze-lt); }
.dark .eyebrow::before{ background:var(--bronze-lt); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.18; letter-spacing:-.01em; margin:0; text-wrap:balance; }
.display{ font-size:clamp(34px,5.4vw,76px); font-weight:500; line-height:1.12; letter-spacing:-.02em; }
.h2{ font-size:clamp(28px,3.8vw,52px); line-height:1.2; }
.h3{ font-size:clamp(21px,2.2vw,30px); }
.lead{ font-size:clamp(17px,1.35vw,20px); line-height:1.85; color:var(--ink-soft); font-weight:350; }
.muted{ color:var(--ink-mute); }
.serif-en{ font-family:var(--en); font-weight:500; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex; align-items:center; gap:.7em;
  padding:15px 30px; border:1px solid var(--bd); border-radius:999px;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:15px; font-weight:400; letter-spacing:.04em;
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  position:relative; overflow:hidden;
}
.btn .arrow{ transition:transform .5s var(--ease); }
.btn:hover{ background:var(--bronze); border-color:var(--bronze); color:var(--paper); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn-ghost:hover{ background:transparent; border-color:var(--ink); color:var(--ink); }
.dark .btn-ghost{ --fg:var(--on-dark); --bd:var(--line-dk); }
.dark .btn-ghost:hover{ border-color:var(--on-dark); color:var(--on-dark); background:transparent; }
.btn-lt{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn-lt:hover{ background:var(--bronze); border-color:var(--bronze); color:var(--paper); }

.textlink{
  display:inline-flex; align-items:center; gap:.6em; font-size:15px; letter-spacing:.03em;
  border-bottom:1px solid var(--line); padding-bottom:3px; transition:border-color .4s var(--ease), gap .4s var(--ease);
}
.textlink:hover{ border-color:var(--bronze); gap:.95em; }
.textlink .arrow{ color:var(--bronze); }

/* ---------- Dark context ---------- */
.dark{ background:var(--forest); color:var(--on-dark); }
.dark h1,.dark h2,.dark h3,.dark h4{ color:var(--on-dark); }
.dark .lead{ color:var(--on-dark-soft); }
.dark .muted{ color:#9AA197; }

/* ---------- Image placeholders ---------- */
.ph{
  position:relative; overflow:hidden; background:var(--stone);
  background-image:repeating-linear-gradient(135deg, rgba(28,33,29,.045) 0 2px, transparent 2px 13px);
  border:1px solid var(--line-soft);
}
.ph.dark-ph{ background:var(--forest-2); background-image:repeating-linear-gradient(135deg, rgba(244,241,234,.05) 0 2px, transparent 2px 13px); border-color:var(--line-dk-soft); }
.ph .ph-tag{
  position:absolute; left:16px; bottom:14px; right:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; line-height:1.5;
  color:var(--ink-mute); text-transform:uppercase;
}
.ph.dark-ph .ph-tag{ color:#8C9388; }
.ph .ph-tag::before{ content:"◳  "; color:var(--bronze); }

/* filled photo placeholder */
.ph.has-img{ background:var(--stone); background-image:none; }
.ph.has-img .ph-img{ width:100%; height:100%; object-fit:cover; }
.ph.has-img.contain{ background:var(--paper); }
.ph.has-img.contain .ph-img{ object-fit:contain; padding:8%; }

/* reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.4s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }