html{scroll-behavior:smooth}
body{
  font-family:var(--font);font-weight:300;font-size:var(--fs-body);
  line-height:1.8;letter-spacing:.015em;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-weight:300;line-height:1.08;letter-spacing:-.02em}
p{max-width:38em}
main{padding-top:var(--header-h);min-height:70vh}
.is-home main{padding-top:0}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.label{font-size:var(--fs-label);font-weight:400;letter-spacing:var(--track-label);text-transform:uppercase;line-height:1.7;color:var(--muted)}
.page-title{font-size:var(--fs-title);letter-spacing:-.035em;line-height:.95}
.lead{font-size:var(--fs-lead);line-height:1.28;letter-spacing:-.02em;max-width:20em}

:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.skip-link{position:fixed;left:var(--gutter);top:-100px;z-index:100;background:var(--text);color:var(--bg);padding:10px 16px;font-size:12px}
.skip-link:focus{top:12px}

/* text link with a line that draws in */
.link{position:relative;display:inline-block;padding-bottom:3px;font-size:var(--fs-label);font-weight:400;letter-spacing:var(--track-label);text-transform:uppercase}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform var(--dur) var(--ease)}
.link:hover::after{transform:scaleX(.35)}
.link span{display:inline-block;transition:transform var(--dur) var(--ease)}
.link:hover span{transform:translateX(5px)}

.btn{display:inline-block;border:1px solid var(--text);padding:18px 40px;font-size:var(--fs-label);font-weight:400;letter-spacing:var(--track-label);text-transform:uppercase;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:var(--text);color:var(--bg)}

/* the one deliberate load moment: hero image settles in */
@keyframes settle{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.hero__media img{animation:settle 1.6s var(--ease) both}

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

/* the muyii wordmark — Time Burner Bold everywhere it appears as a logo */
.hero__title,.site-footer__name{font-family:var(--font-brand);font-weight:700;font-synthesis:none}

/* Chinese text: Noto Sans TC, headings 500, body 300–400, line-height 1.8 */
:lang(zh-TW){font-family:var(--font-zh)}
h1:lang(zh-TW),h2:lang(zh-TW),h3:lang(zh-TW){font-weight:500;line-height:1.4;letter-spacing:.02em}
p:lang(zh-TW){font-weight:300;line-height:1.8;letter-spacing:.03em}