/* ======================================================================
   Mandarin Decoded — website styles
   Brand: cream insert-card aesthetic, coral/amber/rust palette,
   JetBrains Mono display + readable body. Mobile-first, responsive.
   ====================================================================== */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500&display=swap");

:root{
  --ink:#1A1A1A; --coral:#D85A30; --amber:#E0A33C; --rust:#A8421F;
  --cream:#FBF6EF; --white:#FFFFFF; --grey:#6E6B62; --secondary:#888780;
  --bg:#FAFAF8; --line:#ECE4D6;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --han:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  font-size:17px;
}
img{max-width:100%;display:block;}
a{color:var(--coral);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.section{padding:64px 0;}
.section-tight{padding:40px 0;}

/* ---- headings -------------------------------------------------------- */
h1,h2,h3{font-family:var(--mono); font-weight:700; letter-spacing:-.02em;
  line-height:1.18; color:var(--ink);}
h1{font-size:clamp(2rem,5.5vw,3.1rem);}
h2{font-size:clamp(1.5rem,3.8vw,2rem); margin-bottom:14px;}
h3{font-size:1.18rem; font-weight:500;}
.eyebrow{font-family:var(--mono); font-weight:500; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--coral);
  margin-bottom:14px;}
.lead{font-size:1.15rem; color:var(--grey); max-width:46ch;}

/* ---- header / nav ---------------------------------------------------- */
.site-header{
  border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:20;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding-top:16px; padding-bottom:16px;
}
.brand img{height:30px; width:auto;}
.nav{display:flex; gap:6px; flex-wrap:wrap;}
.nav a{
  font-family:var(--mono); font-weight:500; font-size:15px;
  color:var(--ink); text-decoration:none;
  padding:8px 14px; border-radius:12px;
}
.nav a:hover{background:var(--cream);}
.nav a.active{color:var(--coral);}

/* ---- buttons --------------------------------------------------------- */
.btn{
  display:inline-block; font-family:var(--mono); font-weight:500;
  font-size:16px; text-decoration:none; cursor:pointer; border:none;
  background:var(--coral); color:var(--white);
  padding:14px 26px; border-radius:16px;
  transition:transform .06s ease, background .15s ease;
}
.btn:hover{background:#c44e28;}
.btn:active{transform:scale(.98);}
.btn.ghost{background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);}
.btn.ghost:hover{background:var(--cream);}

/* ---- hero ------------------------------------------------------------ */
.hero{padding:80px 0 56px; text-align:center;}
.hero .eyebrow{display:block;}
.hero h1{max-width:18ch; margin:0 auto 18px;}
.hero .lead{margin:0 auto 30px; font-size:1.22rem;}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ---- panels / cards -------------------------------------------------- */
.panel{
  background:var(--cream); border-radius:32px; padding:clamp(28px,5vw,48px);
}
.panel.white{background:var(--white);}
.cards{
  display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr); margin-top:8px;
}
.card{
  background:var(--white); border-radius:24px; padding:28px;
}
.card .tag{
  display:inline-block; font-family:var(--mono); font-weight:500;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); background:var(--coral);
  padding:4px 11px; border-radius:9px; margin-bottom:14px;
}
.card .tag.amber{background:var(--amber); color:var(--ink);}
.card .tag.rust{background:var(--rust);}
.card h3{margin-bottom:8px;}
.card p{font-size:.98rem; color:var(--grey);}

.section-head{text-align:center; max-width:42ch; margin:0 auto 36px;}
.section-head .lead{margin:0 auto;}

/* ---- "coming soon" --------------------------------------------------- */
.coming{text-align:center;}
.coming .badge{
  display:inline-block; font-family:var(--mono); font-weight:500;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rust); background:var(--cream);
  padding:8px 18px; border-radius:999px; margin-bottom:22px;
}
.coming h1{margin-bottom:16px;}
.coming .lead{margin:0 auto 28px;}

/* ---- flashcards page ------------------------------------------------- */
.embed-wrap{display:flex; justify-content:center; margin-top:8px;}
.embed-wrap iframe{
  width:100%; max-width:520px; height:760px; border:0;
  border-radius:32px; background:var(--cream);
}
.feature-row{
  display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:center;
  margin-top:20px; font-size:.95rem; color:var(--grey);
  font-family:var(--mono);
}

/* ---- blog ------------------------------------------------------------ */
.post-list{display:flex; flex-direction:column; gap:14px; margin-top:8px;}
.post{
  background:var(--white); border-radius:22px; padding:22px 26px;
  display:flex; gap:18px; align-items:baseline; flex-wrap:wrap;
}
.post .date{font-family:var(--mono); font-size:13px; color:var(--secondary);
  flex:0 0 auto;}
.post h3{font-weight:500;}
.post p{font-size:.95rem; color:var(--grey); width:100%;}

/* ---- footer ---------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--line); margin-top:24px;
  padding:34px 0; color:var(--secondary); font-size:14px;
}
.site-footer .wrap{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  align-items:center;
}
.site-footer .nav a{font-size:14px; padding:6px 10px;}
.site-footer a{color:var(--secondary);}

/* ---- newsletter signup ----------------------------------------------- */
.panel.coral{background:var(--coral); color:var(--white);}
.panel.coral .eyebrow{color:rgba(255,255,255,.82);}
.panel.coral h2{color:var(--white);}
.panel.coral .lead{color:rgba(255,255,255,.92);}
.newsletter{text-align:center;}
.newsletter .lead{margin:0 auto 22px;}
.signup{display:flex; gap:10px; max-width:480px; margin:0 auto;}
.signup input{
  flex:1 1 auto; min-width:0; font-family:var(--body); font-size:16px;
  padding:14px 18px; border-radius:14px; background:var(--white);
  color:var(--ink); border:1.5px solid var(--line);
}
.signup input:focus{outline:none; border-color:var(--coral);}
.signup .btn{flex:0 0 auto;}
.panel.coral .signup input{border-color:transparent;}
.panel.coral .signup .btn{background:var(--ink); color:var(--white);}
.panel.coral .signup .btn:hover{background:#000;}
.fineprint{font-size:13px; color:var(--secondary); margin-top:12px;}
.panel.coral .fineprint{color:rgba(255,255,255,.78);}
.hero .signup{margin-top:4px;}
.hero-alt{margin-top:14px; font-family:var(--mono); font-size:14px;}
.hp{position:absolute; left:-5000px; width:1px; height:1px; opacity:0;}
.signup-done{
  font-size:1rem; font-weight:500; color:var(--coral);
  max-width:34ch; margin:6px auto 0;
}
.panel.coral .signup-done{color:var(--white);}
@media (max-width:480px){
  .signup{flex-direction:column;}
  .signup .btn{width:100%;}
}

/* ---- founder bio ----------------------------------------------------- */
.bio{
  display:grid; grid-template-columns:1.4fr 1fr;
  gap:clamp(24px,4vw,44px); align-items:center;
}
.bio-text .lead{max-width:48ch;}
.bio-photo{margin:0;}
.bio-frame{
  position:relative; aspect-ratio:1/1; border-radius:24px;
  overflow:hidden; background:#EFE7D8;
  display:flex; align-items:center; justify-content:center;
}
.bio-frame span{font-family:var(--mono); font-size:14px; color:var(--secondary);}
.bio-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.bio-photo figcaption{
  margin-top:14px; font-size:13px; color:var(--grey); line-height:1.55;
}
.bio-photo figcaption strong{
  display:block; font-family:var(--mono); font-weight:500; font-size:15px;
  color:var(--ink); margin-bottom:4px;
}
@media (max-width:680px){
  .bio{grid-template-columns:1fr;}
  .bio-frame{max-width:320px; margin:0 auto;}
  .bio-photo figcaption{text-align:center;}
}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:760px){
  body{font-size:16px;}
  .cards{grid-template-columns:1fr;}
  .section{padding:48px 0;}
  .hero{padding:54px 0 40px;}
}
@media (max-width:560px){
  .site-header .wrap{flex-direction:column; gap:12px;}
  .nav{justify-content:center;}
  .site-footer .wrap{flex-direction:column; text-align:center;}
}