/* ================================================================
   Martin Zhong · personal site
   Visual system shared with adapttochina.pages.dev:
   warm tan paper, ink text, Poppins bold, thick underlines,
   flat 1px-ink blocks, soft 10-14px corners, hand-drawn accents.
================================================================ */
@font-face { font-family:'Poppins'; src:url('poppins-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('poppins-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('poppins-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --paper:#e9cfb2; --card:#f4e4c9; --ink:#1b1610;
  --red:#c8432f; --red-deep:#9a3420; --teal:#2f6d54; --blue-deep:#2c5069;
  --line:#cdb693; --muted:#6d5f49;
  --pop:'Poppins', Arial, 'Helvetica Neue', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body { background:var(--paper); color:var(--ink); font-family:var(--pop); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.wrap { max-width:1180px; margin:0 auto; padding:0 44px; }
@media (max-width:700px){ .wrap{ padding:0 22px; } }
::selection { background:rgba(27,22,16,.14); }
img { max-width:100%; display:block; }
a { color:var(--ink); }

h1,h2,h3 { font-weight:700; letter-spacing:-.015em; }
section { padding:72px 0; scroll-margin-top:70px; }
section + section { border-top:1px solid var(--line); }
@media (max-width:600px){ section{ padding:48px 0; } }

/* ---------- nav ---------- */
nav { position:sticky; top:0; z-index:50; background:rgba(233,207,178,.93); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.nav-in { max-width:1180px; margin:0 auto; padding:14px 44px; display:flex; align-items:center; gap:18px; }
@media (max-width:700px){ .nav-in{ padding:12px 18px; } }
.logo { font-weight:700; font-size:1.02rem; letter-spacing:.04em; text-decoration:none; color:var(--ink); }
.logo span { color:var(--red-deep); }
.nav-links { display:flex; gap:22px; align-items:center; margin-left:auto; }
.nav-links a { font-weight:600; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.nav-links a:hover { color:var(--red-deep); }
.nav-burger { display:none; background:var(--card); border:1px solid var(--ink); border-radius:10px; font-size:1.05rem; line-height:1; padding:7px 11px; cursor:pointer; margin-left:auto; }
@media (max-width:860px){
  .nav-burger { display:block; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--ink); flex-direction:column; align-items:flex-start; gap:14px; padding:16px 22px 20px; margin-left:0; }
  .nav-links.open { display:flex; }
}

/* ---------- hero: photo left, statement right ---------- */
.hero { display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:center; padding:56px 0 26px; }
@media (max-width:880px){ .hero{ grid-template-columns:1fr; gap:26px; padding-top:34px; } }
.hero-photo img { width:100%; height:auto; max-height:600px; object-fit:cover; border-radius:14px; border:1px solid var(--ink); }
.hero h1 { font-size:clamp(2.7rem,5.6vw,4.5rem); line-height:1.05; letter-spacing:-.02em; }
.hero .h-line { font-size:1.03rem; margin-top:20px; line-height:1.6; }
.hero .h-line a { font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.hero .h-line a:hover { color:var(--red-deep); }
.hero .h-loc { margin-top:20px; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* hand-drawn accents in the headline (per the reference) */
.mark-wavy { text-decoration:underline; text-decoration-style:wavy; text-decoration-color:var(--teal); text-decoration-thickness:2.5px; text-underline-offset:7px; }
.mark-circle { position:relative; white-space:nowrap; }
.mark-circle::after { content:""; position:absolute; left:-.22em; right:-.22em; top:-.1em; bottom:-.14em; border:3px solid var(--red-deep); border-radius:50%; transform:rotate(-2.5deg); pointer-events:none; }

/* ---------- shared section head ---------- */
.sec-h { font-size:clamp(1.5rem,2.6vw,2.05rem); margin-bottom:34px; }
.sec-kicker { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red-deep); margin-bottom:12px; }

/* ---------- about ---------- */
.about-prose { max-width:76ch; }
.about-prose p { margin:14px 0; line-height:1.75; color:#2e2718; }
.about-prose strong { font-weight:600; }

/* ---------- project card ---------- */
.proj { background:var(--card); border:1px solid var(--ink); border-radius:14px; overflow:hidden; }
.proj-banner img { width:100%; height:240px; object-fit:cover; object-position:center 58%; border-bottom:1px solid var(--ink); }
@media (max-width:600px){ .proj-banner img{ height:160px; } }
.proj-body { padding:34px 32px 36px; }
@media (max-width:600px){ .proj-body{ padding:22px 20px 26px; } }
.proj-top { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.proj-title { font-size:clamp(1.5rem,2.6vw,2rem); border-bottom:4px solid var(--ink); padding-bottom:3px; }
.proj-tag { font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); }
.proj-lead { margin-top:18px; max-width:78ch; line-height:1.7; color:#2e2718; }
.proj-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 44px; margin-top:30px; }
@media (max-width:860px){ .proj-cols{ grid-template-columns:1fr; gap:22px; } }
.proj-cols h3 { display:inline-block; font-size:1.08rem; border-bottom:3px solid var(--ink); padding-bottom:2px; }
.proj-cols p { font-size:.93rem; margin-top:10px; line-height:1.65; color:#4a3f2d; }
.proj-cta { margin-top:30px; }

/* ---------- buttons ---------- */
.btn { display:inline-block; font-family:var(--pop); font-weight:600; font-size:.95rem; text-decoration:none; text-align:center; padding:13px 24px; border:1px solid var(--ink); border-radius:10px; background:transparent; color:var(--ink); cursor:pointer; }
.btn:hover { background:rgba(27,22,16,.06); }
.btn.solid { background:var(--ink); color:var(--card); }
.btn.solid:hover { background:#000; }
.btn:active { transform:translateY(1px); }

/* ---------- experience ---------- */
.xp { display:grid; gap:34px; max-width:900px; }
.xp-item h3 { display:inline-block; font-size:1.18rem; border-bottom:3px solid var(--ink); padding-bottom:2px; }
.xp-meta { margin-top:8px; font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.xp-item p { margin-top:10px; font-size:.96rem; line-height:1.7; color:#2e2718; max-width:78ch; }

/* ---------- two-up grids (education, leadership) ---------- */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:34px 44px; }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; gap:24px; } }
.duo h3 { display:inline-block; font-size:1.1rem; border-bottom:3px solid var(--ink); padding-bottom:2px; }
.duo .xp-meta { margin-top:8px; }
.duo p { margin-top:10px; font-size:.94rem; line-height:1.65; color:#4a3f2d; }

/* ---------- skills ---------- */
.skills { display:grid; grid-template-columns:repeat(3,1fr); gap:34px 44px; }
@media (max-width:860px){ .skills{ grid-template-columns:1fr; gap:24px; } }
.skills h3 { display:inline-block; font-size:1.08rem; border-bottom:3px solid var(--ink); padding-bottom:2px; }
.skills p { margin-top:10px; font-size:.93rem; line-height:1.65; color:#4a3f2d; }

/* ---------- contact ---------- */
.contact-card { background:var(--card); border:1px solid var(--ink); border-radius:14px; padding:36px 34px; display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center; }
@media (max-width:820px){ .contact-card{ grid-template-columns:1fr; padding:24px 20px; gap:22px; } }
.contact-card h2 { font-size:clamp(1.6rem,2.8vw,2.2rem); }
.contact-card .c-sub { margin-top:12px; color:#4a3f2d; line-height:1.65; max-width:52ch; }
.c-actions { display:flex; flex-direction:column; gap:12px; }
.c-actions .btn { width:100%; }
.c-wechat { font-size:.82rem; color:var(--muted); text-align:center; }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--ink); padding:28px 0 40px; font-size:.86rem; color:var(--muted); }
.foot-grid { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; }
footer a { color:var(--muted); font-weight:600; }
footer a:hover { color:var(--red-deep); }

/* ---------- mobile type comfort ---------- */
@media (max-width:600px){
  body { font-size:15.5px; line-height:1.62; }
  .hero h1 { font-size:clamp(2.2rem,11vw,2.9rem); }
  .sec-h { margin-bottom:22px; }
  .xp { gap:24px; }
}