/* Shared styles for xiaopan.ai — hand-authored, no build step. */
/* ---- Fonts (reused from the previous build; degrades to system sans) ---- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(https://framerusercontent.com/assets/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(https://framerusercontent.com/assets/UjlFhCnUjxhNfep4oYBPqnEssyo.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(https://framerusercontent.com/assets/1ZFS7N918ojhhd0nQWdj3jz4w.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(https://framerusercontent.com/assets/syRNPWzAMIrcJ3wIlPIP43KjQs.woff2) format("woff2")}

/* Real italics. Without these the browser synthesises an oblique by slanting
   the roman, which has different metrics and re-wraps the hero blurb. */
@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;
  src:url(https://framerusercontent.com/assets/pKRFNWFoZl77qYCAIp84lN1h944.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;
  src:url(https://framerusercontent.com/assets/ksvR4VsLksjpSwnC2fPgHRNMw.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;
  src:url(https://framerusercontent.com/assets/ia3uin3hQWqDrVloC1zEtYHWw.woff2) format("woff2")}

/* ---- Tokens (carried over from the Framer build) ---- */
:root{
  --white:#fff;
  --black:#000;
  --line:#f5f5f5;
  --gray:#333;
  --muted:#b3b3b3;
  --cyan:#36d3f3;
  --shell:1200px;
  /* 5.6vw so a 1440 viewport lands on the original's 80px gutter
     (content x=200, w=1040), while still shrinking on small screens. */
  --pad-x:clamp(20px, 5.6vw, 80px);
  --font:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-body:clamp(1rem, .9rem + .5vw, 1.25rem);      /* 20px at desktop */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font);
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing: the width/height attributes on <img> are
   presentational hints, and aspect-ratio is ignored unless height is auto. */
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad-x)}

/* ---- Header ---- */
.site-header{
  position:sticky;top:0;z-index:10;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.site-header .shell{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 24px;flex-wrap:wrap;
  padding-block:clamp(14px, 2.5vw, 30px);
}
.logo img{height:clamp(38px, 4.4vw, 58px);width:auto}
.nav{display:flex;flex-wrap:wrap;gap:clamp(14px, 2.4vw, 30px);align-items:center}
.nav a{
  color:var(--black);
  font-size:clamp(.9375rem, .85rem + .25vw, 1.125rem);
  letter-spacing:-.03em;
}
.nav a:hover{color:var(--cyan);text-decoration:none}

/* ---- Layout rhythm ---- */
main .shell{
  display:flex;flex-direction:column;gap:36px;
  padding-block:clamp(28px, 4vw, 40px);
}
.divider{height:1px;background:var(--line);border:0;margin:0;width:100%}

/* ---- Hero ---- */
/* At 1440 the row is 1040 wide: 850 card + 22 gap + 168 avatar, matching
   the original exactly. Below that the card shrinks, then wraps. */
.hero{
  display:flex;align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}
.hero-card{
  flex:1 1 420px;
  min-width:0;
  max-width:850px;
  background:var(--line);
  border-radius:20px;
  padding:10px;
}
.hero-card h1{
  margin:0;
  font-size:clamp(1.5rem, 1rem + 1.6vw, 2.25rem);   /* 36px */
  font-weight:400;
  letter-spacing:normal;
  line-height:1.2;
}
.hero-card strong{font-weight:700}
.avatar{
  flex:none;
  width:clamp(110px, 12vw, 168px);
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
}

/* ---- Bio / email ----
   Two columns on wide screens (email left, blurb right), stacking on narrow. */
.bio{
  display:flex;align-items:flex-start;
  justify-content:space-between;
  gap:34px;flex-wrap:wrap;
}
.email-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.email{
  font-size:clamp(1.125rem, .9rem + 1vw, 1.625rem);
  font-weight:500;
  letter-spacing:-.06em;
  line-height:1.3;
  color:var(--black);
  word-break:break-word;
}
.email:hover{color:var(--cyan)}
.copy{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;
  background:none;border:1px solid #e5e5e5;border-radius:8px;
  color:var(--gray);cursor:pointer;
}
.copy:hover{border-color:var(--cyan);color:var(--cyan)}
.copy svg{width:16px;height:16px}
.copy .tick{display:none}
.copy.copied{border-color:var(--cyan);color:var(--cyan)}
.copy.copied .tick{display:block}
.copy.copied .sheet{display:none}
.bio > p{
  margin:0;
  flex:1 1 420px;
  max-width:750px;
  font-size:clamp(1.25rem, .9rem + 1.4vw, 1.875rem);  /* 30px */
  font-weight:500;letter-spacing:normal;line-height:1;
}
.bio > p .accent{color:var(--cyan)}

/* ---- Sections ---- */
.section{display:flex;flex-direction:column;gap:18px;scroll-margin-top:104px}
h2{
  margin:0;
  font-size:clamp(2rem, 1.2rem + 2.4vw, 3rem);       /* 48px */
  font-weight:500;letter-spacing:-.05em;line-height:1.2;
}
h3{
  margin:14px 0 0;
  font-size:clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem); /* 30px */
  font-weight:500;letter-spacing:-.03em;line-height:1.2;
}
.section > p:not(.label){margin:0;font-size:var(--fs-body);letter-spacing:normal;line-height:1.2}
.label{margin:10px 0 0;font-size:var(--fs-body);font-weight:500;line-height:1.2}

.list{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:8px}
.list li{font-size:var(--fs-body);letter-spacing:normal;line-height:1.2}
.list li::marker{color:var(--muted)}
.list p{margin:0}
.list em{color:var(--gray)}

/* Natural size (663x104), centred — never upscaled, or it blurs. */
.chart{width:auto;max-width:100%;height:auto;margin-inline:auto}

/* ---- Two-column blocks (talks, and the link columns) ---- */
.cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:40px;
}
.col{min-width:0;display:flex;flex-direction:column;gap:18px}

.talks{margin:6px 0 0;justify-items:center}
.talks figure{margin:0;display:flex;flex-direction:column;gap:10px;align-items:center}
.talks img{width:400px;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.talks figcaption{
  text-align:center;
  font-size:1rem;font-weight:400;
  letter-spacing:normal;line-height:1.6;
}
.talks figcaption span{display:block;color:var(--gray)}

/* ---- Footer ---- */
.site-footer{background:var(--black);color:var(--white);margin-top:clamp(32px, 5vw, 60px)}
.site-footer .shell{
  display:flex;flex-direction:column;gap:28px;
  padding-block:clamp(40px, 6vw, 72px);
}
.cta-text{
  margin:0;
  font-size:clamp(2rem, 1.2rem + 2.4vw, 3rem);       /* 48px */
  font-weight:500;letter-spacing:-.05em;line-height:1.2;
  background-image:linear-gradient(95deg, rgb(255,255,255) 37%, rgb(56,56,56) 95%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.cta-row{display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap}
.btn{
  display:inline-block;
  background:var(--white);color:var(--black);
  padding:clamp(14px, 1.6vw, 20px) clamp(24px, 2.6vw, 36px);
  border-radius:0;
  font-size:1rem;
  font-weight:500;letter-spacing:-.04em;line-height:1.2;
}
.btn:hover{background:var(--cyan);color:var(--black);text-decoration:none}
.available{display:flex;align-items:center;gap:10px;margin:0;font-size:1rem;font-weight:400;line-height:1.6}
.pulse{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:var(--white)}
.pulse::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--white);
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(3);opacity:0}
}
.footer-detail{
  display:flex;flex-wrap:wrap;gap:6px 32px;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:24px;
  font-size:1rem;font-weight:400;line-height:1.6;
}
.footer-detail p{margin:0}
.footer-detail .addr{color:var(--muted);font-size:.75rem}
.footer-detail a{color:var(--white)}
.footer-detail a:hover{color:var(--cyan)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ================= Privacy / legal pages ================= */
/* .legal.shell, not .legal: `main .shell` above is (0,1,1) and would
   otherwise win the gap/padding-block cascade. */
.legal.shell{display:flex;flex-direction:column;gap:64px;padding-block:clamp(28px, 4vw, 40px)}
.legal h1{
  margin:0;
  font-size:clamp(2rem, 1.35rem + 2.6vw, 3rem);
  font-weight:500;letter-spacing:-.05em;line-height:1.2;
}
.legal section{display:flex;flex-direction:column;gap:20px}
.legal h2{
  margin:0;
  font-size:clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  font-weight:700;line-height:1.2;
}
.legal p{
  margin:0;
  font-size:clamp(1rem, .95rem + .3vw, 1.25rem);
  font-weight:400;line-height:1.2;
}
.legal ul{margin:0;padding-left:39px;display:flex;flex-direction:column}
.legal li{font-size:clamp(1rem, .95rem + .3vw, 1.25rem);font-weight:400;line-height:1.2}
.legal .updated{color:var(--gray)}