/* V3: Vietnamese and Han glyphs are deliberately separated. */
:root{
  --font-vn-heading:"Noto Serif","Times New Roman",Georgia,serif;
  --font-vn-ui:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  --font-han:"Noto Serif TC","Microsoft JhengHei","Microsoft YaHei",serif;
  --serif:var(--font-vn-heading);
  --sans:var(--font-vn-ui);
}
html{font-synthesis:none}
body,button,input,textarea{font-family:var(--font-vn-ui)}
.brand-words strong,.footer-brand strong,.hero-title,.hero-subtitle,
.section-title,.lead-copy,.manifesto-inner p,.class-option b,.class-detail h3,
.milestone h3,.closing h2,.closing p,.entry-name,.entry-prelude,
.gallery-counter strong,.class-detail .class-category{font-family:var(--font-vn-heading)!important}
:lang(zh-Hant),.brand-seal,.hero-hanzi,.hero-vertical,.world-art-stamp,
.world-wordmark,.class-symbol,.class-option>span,.small-mark,.closing-zh,
.entry-runes,.seal-character,.seal-runes{font-family:var(--font-han)!important}
.entry-sequence{display:grid;place-items:center;position:fixed;inset:0;z-index:10000;
  isolation:isolate;overflow:hidden;color:#f2dfb8;background:#030b0e;
  touch-action:pan-y;transition:opacity .7s ease,visibility .7s ease}
.entry-sequence[hidden]{display:none!important}
body.is-entering{overflow:hidden}
.entry-landscape{position:absolute;inset:-3%;z-index:-4;
  background:url("/assets/hero.webp") center 43%/cover no-repeat;
  filter:brightness(.54) saturate(.68) contrast(1.08);transform:scale(1.14);
  animation:sealLandscape 15s ease-out both}
.entry-fog{position:absolute;inset:0;z-index:-3;
  background:linear-gradient(90deg,#030a0dbb,transparent 48%,#030a0da1),
  radial-gradient(ellipse at 50% 47%,rgba(26,70,67,.24),rgba(3,9,12,.68) 61%,#02070ae8)}
.entry-vignette{position:absolute;inset:0;z-index:-2;
  box-shadow:inset 0 0 130px 35px rgba(0,6,8,.78);pointer-events:none}
.entry-sequence:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),
  #d9bf8d0d calc(25% - 1px),#d9bf8d0d 25%)}
.entry-corners{position:absolute;inset:27px;pointer-events:none}
.entry-corners i{position:absolute;width:38px;height:38px;border-color:#ccac6c74;border-style:solid}
.entry-corners i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}
.entry-corners i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}
.entry-corners i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}
.entry-corners i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px}
.entry-core{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;width:min(92vw,650px);
  gap:0;transition:opacity .5s ease,transform .9s ease}
.entry-prelude{font:600 12px var(--font-vn-ui)!important;letter-spacing:.42em;
  text-align:center;padding-left:.42em;color:#e9d2a3;margin:0 0 34px}
.entry-seal-button{position:relative;display:grid;place-items:center;
  border:0;background:transparent;padding:0;width:clamp(205px,21vw,270px);
  height:clamp(205px,21vw,270px);color:#e7c587;cursor:pointer;
  isolation:isolate;border-radius:50%;outline-offset:12px;
  filter:drop-shadow(0 0 24px #bb9c5040);
  transition:transform .35s ease,filter .35s ease}
.entry-seal-button:hover,.entry-seal-button:focus-visible{
  transform:scale(1.045);filter:drop-shadow(0 0 42px #dfb45c91)}
.entry-seal-button:focus-visible{outline:2px solid #f5d797}
.seal-outer,.seal-middle,.seal-inner,.seal-halo{position:absolute;
  display:block;border-radius:50%;pointer-events:none}
.seal-outer{inset:0;border:1px solid #d1a96b65;
  box-shadow:0 0 0 15px #bea36505,inset 0 0 45px #b08b3520;
  background:conic-gradient(from 0deg,transparent 0 16%,#e7ca8450 17% 17.4%,
  transparent 18% 41%,#e7ca8470 42% 42.4%,transparent 43% 76%,
  #7cc8bb60 77% 77.4%,transparent 78%);animation:sealRotate 18s linear infinite}
.seal-middle{inset:16px;border:1px dashed #e6c28785;
  animation:sealRotateBack 26s linear infinite}
.seal-inner{inset:38px;border:1px solid #d7b4766b;
  background:radial-gradient(circle,#b38a4b1f 0%,#06151955 63%,transparent 78%);
  box-shadow:inset 0 0 32px #6bc4b31c,0 0 22px #bba36522}
.seal-halo{inset:20px;box-shadow:0 0 50px #dcaf5740;
  animation:sealBreath 2.4s ease-in-out infinite alternate}
.seal-character{font-size:clamp(88px,9vw,117px);line-height:1;z-index:2;
  color:#f8d79a;text-shadow:0 0 21px #edbf6a7c,0 5px 22px #000}
.seal-runes{position:absolute;top:17px;left:0;right:0;z-index:2;
  font-size:12px;letter-spacing:.72em;color:#bcd2c991;
  padding-left:.72em;text-align:center;pointer-events:none}
.entry-name{margin:30px 0 0;text-align:center;font-weight:700!important;
  font-size:clamp(27px,3.9vw,52px)!important;line-height:1.45!important;
  letter-spacing:.065em;white-space:nowrap;color:#f7f1e6;
  text-shadow:0 4px 28px #020707}
.entry-name span{color:#eac48a}
.entry-instruction{display:flex;align-items:center;justify-content:center;
  gap:17px;margin:25px 0 0;font:600 11px var(--font-vn-ui)!important;
  letter-spacing:.16em;color:#e6d1ae;white-space:nowrap;
  animation:sealBreath 1.8s ease-in-out infinite alternate}
.entry-instruction-line{width:28px;height:1px;background:#c7a06888}
.entry-corner-word{position:absolute;right:46px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;letter-spacing:.5em;color:#ceb98a9c;font-size:15px}
.entry-sequence.is-opening .seal-outer{animation:sealRotate .85s linear infinite}
.entry-sequence.is-opening .seal-middle{animation:sealRotateBack .7s linear infinite}
.entry-sequence.is-opening .entry-seal-button{animation:sealActivate 1.05s ease-in forwards}
.entry-sequence.is-opening .entry-landscape{
  animation:sealOpenLandscape 1.35s cubic-bezier(.3,.4,.2,1) forwards}
.entry-sequence.is-opening .entry-instruction{opacity:0;animation:none}
.entry-sequence.is-opening .entry-core{transform:scale(1.08)}
.entry-sequence.is-revealed{opacity:0;visibility:hidden;pointer-events:none}
@keyframes sealRotate{to{transform:rotate(360deg)}}
@keyframes sealRotateBack{to{transform:rotate(-360deg)}}
@keyframes sealBreath{from{opacity:.53}to{opacity:1}}
@keyframes sealLandscape{from{transform:scale(1.15)}to{transform:scale(1.02)}}
@keyframes sealOpenLandscape{0%{filter:brightness(.54) saturate(.68);transform:scale(1.03)}
  55%{filter:brightness(1.2) saturate(.85);transform:scale(1.12)}
  100%{filter:brightness(1.9) saturate(.9);transform:scale(1.24)}}
@keyframes sealActivate{0%{filter:drop-shadow(0 0 24px #bb9c5040)}
  55%{filter:drop-shadow(0 0 88px #e7bd73ef)}
  100%{filter:drop-shadow(0 0 170px #f9e8b8);transform:scale(1.3);opacity:.15}}

/* General polish: headings get Vietnamese letterforms, interface gets Vietnamese sans. */
.hero-title span,.hero-title em{font-weight:700;letter-spacing:.012em}
.hero-title span{font-size:clamp(54px,6.7vw,107px)}
.hero-title em{font-size:clamp(64px,8vw,127px);letter-spacing:.12em}
.brand-words strong{font-size:14px;letter-spacing:.09em}
.class-option b{font-weight:600}
.btn,.nav-links a,.section-kicker,.eyebrow,.class-category,.footer-links a{
  font-family:var(--font-vn-ui)!important}
.eyebrow{letter-spacing:.19em}
.hero-intro{font-size:14px;max-width:490px}
.section-title{letter-spacing:-.012em}
.hero-hanzi{font-weight:500;letter-spacing:.16em}
.class-detail h3{letter-spacing:0}
@media(max-width:800px){
  .entry-corners{inset:16px}
  .entry-prelude{font-size:10px;letter-spacing:.32em}
  .entry-seal-button{width:210px;height:210px}
  .seal-character{font-size:92px}
  .entry-name{font-size:clamp(21px,4.4vw,39px)!important;white-space:normal;letter-spacing:0}
  .entry-name span{display:block}
  .entry-instruction{font-size:10px}
  .entry-corner-word{right:18px;font-size:10px}
  .hero-title span{font-size:clamp(41px,7.4vw,67px)}
  .hero-title em{font-size:clamp(57px,8.7vw,87px);letter-spacing:.04em}
}
@media(max-width:520px){
  .hero-title span{font-size:clamp(27px,7.3vw,36px);letter-spacing:0;white-space:nowrap}
  .hero-title em{font-size:clamp(48px,11.3vw,60px);letter-spacing:.04em}
  .hero-subtitle{font-size:14px}
  .hero-hanzi{font-size:14px}
  .section-title{font-size:clamp(33px,8.3vw,48px)}
  .entry-prelude{margin-bottom:22px}
  .entry-name{margin-top:29px}
  .entry-seal-button{width:196px;height:196px}
  .seal-character{font-size:85px}
  .seal-inner{inset:32px}
  .entry-instruction{font-size:9px;gap:10px;letter-spacing:.11em}
  .entry-instruction-line{width:18px}
}
@media(prefers-reduced-motion:reduce){
  .entry-seal-button,.entry-landscape,.seal-outer,.seal-middle,.seal-halo,
  .entry-instruction{animation:none!important}
  .entry-sequence{transition:none!important}
  .entry-sequence.is-opening .entry-core{transform:none}
}

/* Fix desktop roadmap overflow: percentages previously totalled 107% with gap. */
@media(min-width:801px){
  .roadmap-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,80px)}
  .roadmap-grid>*,.milestones,.milestone{min-width:0}
}