*{box-sizing:border-box}
:root{
  --bg:#f6f4ef;
  --ink:#171412;
  --muted:#6f6963;
  --soft:#948b82;
  --red:#8f1d2c;
  --red-dark:#62111d;
  --gold:#b88432;
  --glass:rgba(255,255,255,.56);
  --glass-strong:rgba(255,255,255,.76);
  --line:rgba(255,255,255,.62);
  --line-dark:rgba(34,26,20,.09);
  --shadow:0 24px 80px rgba(45,36,28,.12);
  --shadow-soft:0 14px 44px rgba(45,36,28,.08);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 8% 6%,rgba(143,29,44,.17),transparent 26rem),
    radial-gradient(circle at 92% 0%,rgba(184,132,50,.16),transparent 24rem),
    linear-gradient(145deg,#fbf9f4 0%,#eef1f3 52%,#f7efe6 100%);
  color:var(--ink);
  min-height:100vh;
}
.ink{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(115deg,rgba(255,255,255,.48),transparent 42%),
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.38),transparent 22rem);
}
body:before{
  content:"";
  position:fixed;
  inset:22px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:34px;
  pointer-events:none;
  z-index:-1;
}
.hero{
  min-height:auto;
  padding:24px clamp(18px,5vw,72px) 72px;
  color:var(--ink);
  position:relative;
  overflow:hidden;
}
nav{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:var(--shadow-soft);
  border-radius:999px;
}
.brand,.nav-links{display:flex;align-items:center;gap:12px}
.brand,nav a{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
}
.nav-links{gap:6px}
.nav-links a{
  padding:10px 14px;
  border-radius:999px;
  color:var(--muted);
  font-size:.92rem;
  transition:.22s ease;
}
.nav-links a:hover{background:rgba(255,255,255,.58);color:var(--ink)}
.seal{
  width:42px;
  height:42px;
  border:1px solid rgba(143,29,44,.22);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:'Noto Serif SC',serif;
  font-size:23px;
  color:var(--red);
  background:rgba(255,255,255,.5);
}
.hero-grid{
  max-width:1120px;
  margin:92px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(270px,.62fr);
  gap:28px;
  align-items:end;
}
.eyebrow{
  margin:0 0 14px;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.72rem;
  color:var(--red);
  font-weight:800;
}
.hero h1{
  max-width:850px;
  margin:0 0 22px;
  font-size:clamp(3rem,7vw,6.4rem);
  letter-spacing:-.07em;
  line-height:.9;
}
.lead{
  max-width:710px;
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem,1.55vw,1.2rem);
  line-height:1.75;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
button,.secondary{
  border:0;
  border-radius:999px;
  padding:13px 19px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--red-dark),var(--red));
  box-shadow:0 12px 34px rgba(143,29,44,.22);
}
.secondary{
  color:var(--ink);
  border:1px solid var(--line);
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.ghost{
  color:#fff;
  background:linear-gradient(135deg,var(--red-dark),var(--red));
  white-space:nowrap;
  box-shadow:0 12px 34px rgba(143,29,44,.16);
}
.primary:hover,.ghost:hover,.secondary:hover{transform:translateY(-2px)}
.paper-card{
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  border-radius:30px;
  padding:28px;
  box-shadow:var(--shadow);
}
.brush{
  display:block;
  margin-bottom:18px;
  font-family:'Noto Serif SC',serif;
  font-size:clamp(2.1rem,4vw,3.2rem);
  line-height:1;
  color:var(--red);
}
.paper-card h2{margin:0 0 10px;font-size:1.35rem;letter-spacing:-.03em}
.paper-card p{margin:0;color:var(--muted);line-height:1.75}
main{padding:0 clamp(18px,5vw,72px) 52px}
.intro-strip{
  max-width:1120px;
  margin:-38px auto 48px;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:var(--shadow-soft);
}
.intro-strip div{padding:21px 22px;background:rgba(255,255,255,.33)}
.intro-strip strong,.intro-strip span{display:block}
.intro-strip strong{font-size:.79rem;text-transform:uppercase;letter-spacing:.13em;color:var(--red)}
.intro-strip span{margin-top:7px;color:var(--muted);font-size:.95rem}
.article-shell,.process,.notes{
  max-width:1120px;
  margin:0 auto 56px;
  border:1px solid var(--line);
  background:var(--glass-strong);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-radius:34px;
  padding:clamp(22px,4vw,46px);
  box-shadow:var(--shadow);
}
.article-shell{max-width:980px}
.article-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  padding-bottom:24px;
  margin-bottom:30px;
  border-bottom:1px solid var(--line-dark);
}
.article-head h2,.process h2,.notes h2{
  margin:0;
  color:var(--ink);
  line-height:1.08;
  letter-spacing:-.045em;
}
.article-head h2{font-size:clamp(1.9rem,4vw,3.1rem)}
.process h2,.notes h2{font-size:clamp(1.8rem,3.2vw,2.9rem)}
#articleInfo{margin:14px 0 0;color:var(--muted);font-size:.96rem}
.article-body{
  max-width:760px;
  margin:0 auto;
  font-size:1.045rem;
  line-height:1.92;
  color:#24211f;
}
.article-body.chinese{
  font-family:'Noto Serif SC',serif;
  font-size:1.105rem;
  line-height:2.05;
}
.article-body.english{font-family:Inter,system-ui,sans-serif}
.article-body h3{
  margin:42px 0 16px;
  padding-left:16px;
  border-left:3px solid var(--red);
  color:var(--red-dark);
  font-size:clamp(1.35rem,2.4vw,1.72rem);
  line-height:1.25;
  letter-spacing:-.02em;
}
.article-body p{margin:0 0 20px}
.article-body figure{
  margin:34px -18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.52);
  border-radius:24px;
  background:rgba(255,255,255,.42);
  box-shadow:0 18px 48px rgba(38,28,20,.1);
}
.article-body img{width:100%;display:block}
.article-body figcaption{
  padding:10px 16px;
  color:var(--muted);
  font-size:.82rem;
}
.steps,.note-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:28px;
}
.step,.note-grid div{
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  background:rgba(255,255,255,.42);
}
.step span{
  display:block;
  margin-bottom:18px;
  color:var(--gold);
  font-weight:900;
  font-size:1.35rem;
}
.step h3{margin:0 0 10px;color:var(--red-dark);font-size:1rem}
.step p,.note-grid p{margin:0;color:var(--muted);line-height:1.68;font-size:.95rem}
.notes{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px;align-items:start}
.note-grid{grid-template-columns:repeat(3,1fr);margin:0}
.note-grid strong{display:block;margin-bottom:10px;color:var(--red-dark)}
footer{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:10px clamp(18px,5vw,72px) 38px;
  color:var(--soft);
  font-size:.92rem;
}
@media(max-width:850px){
  body:before{inset:10px;border-radius:24px}
  .hero{padding-top:16px;padding-bottom:72px}
  nav{align-items:flex-start;border-radius:24px;flex-direction:column;padding:12px}
  .nav-links{width:100%;justify-content:space-between}
  .nav-links a{padding:10px 11px}
  .hero-grid,.notes{grid-template-columns:1fr}
  .hero-grid{margin-top:58px}
  .hero h1{font-size:clamp(2.65rem,14vw,4rem)}
  .intro-strip,.steps,.note-grid{grid-template-columns:1fr}
  .article-head{display:block}
  .ghost{margin-top:18px;width:100%}
  .article-body figure{margin-left:0;margin-right:0}
  footer{display:block;line-height:1.8}
}
@media(max-width:520px){
  .brand span:last-child{display:none}
  .article-shell,.process,.notes{border-radius:26px}
  .article-body{font-size:1rem;line-height:1.84}
  .article-body.chinese{font-size:1.04rem;line-height:1.98}
}


/* Compact project heading requested for the Portuguese version */
.compact-hero{
  max-width:1120px;
  margin:58px auto 0;
  display:block;
}
.student-card{
  max-width:640px;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  border-radius:30px;
  padding:clamp(24px,4vw,38px);
  box-shadow:var(--shadow);
}
.student-card h1{
  margin:0 0 24px;
  font-size:clamp(2.4rem,5vw,4.6rem);
  line-height:.92;
  letter-spacing:-.065em;
}
.student-info{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
}
.student-info div{
  padding:16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.38);
}
.student-info dt{
  margin:0 0 6px;
  color:var(--red);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.student-info dd{
  margin:0;
  color:var(--ink);
  font-weight:700;
  font-size:1rem;
}
@media(max-width:850px){
  .compact-hero{margin-top:44px}
  .student-info{grid-template-columns:1fr}
}