@font-face{font-family:SeptemberSerif;src:url('./september-serif.woff2') format('woff2');font-weight:400;font-display:swap}
body header{max-width:300px;top:28px}
body header .garden-mark{width:40px;height:26px;margin-bottom:12px}
body header #title{font-family:SeptemberSerif,'Songti SC',serif;font-size:clamp(30px,3.3vw,48px);line-height:1.3;letter-spacing:.12em;font-weight:400;color:var(--brand-sage);margin:0 0 5px;white-space:nowrap}
body.night header #title{color:var(--brand-cream);text-shadow:0 0 24px color-mix(in srgb,var(--brand-antique-gold) 11%,transparent)}
body header .brand-en{font-family:Allura,serif;font-size:29px;line-height:1.1;letter-spacing:.02em;margin:0;color:var(--brand-sage)}
body.night header .brand-en{color:var(--brand-cream)}
body header .brand-subtitle{font-size:10px;letter-spacing:.13em;line-height:1.5;margin:5px 0 0;opacity:.76}
body header .brand-edition{font-size:8px;letter-spacing:.2em;line-height:1.6;margin:12px 0 0;color:var(--brand-antique-gold)}
:focus-visible{outline:2px solid var(--brand-tong-red);outline-offset:4px}
#brandOpening{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:8;margin:0;padding:8px 18px;white-space:nowrap;font:18px/1.6 SeptemberSerif,serif;letter-spacing:.1em;color:var(--brand-sage);pointer-events:none}
body.night #brandOpening{color:var(--brand-cream)}
#brandOpening[hidden]{display:none}
body.focusing #brandOpening{display:none}
@media(max-width:600px){body header{top:18px;left:18px;max-width:165px}body header .garden-mark{width:29px;height:19px;margin-bottom:7px}body header #title{font-size:28px;letter-spacing:.07em}body header .brand-en{font-size:23px}body header .brand-subtitle{font-size:8px;letter-spacing:.055em}body header .brand-edition{font-size:7px;margin-top:7px}#brandOpening{font-size:15px;bottom:130px}}
@media(max-height:500px){body header{top:14px}body header .garden-mark{display:none}body header #title{font-size:27px}body header .brand-en{font-size:22px}body header .brand-edition{margin-top:4px}#brandOpening{bottom:84px;font-size:14px}}
@media(prefers-reduced-motion:reduce){#brandOpening,header{animation:none!important;transition:none!important}}
/* Original thin ribbon strokes, inspired by illuminated music-box lettering. */
body header{max-width:360px}
body header .garden-mark{display:none}
body header #title{width:350px;height:auto;margin:-12px 0 -2px;line-height:0;text-shadow:none;-webkit-text-stroke:0}
.brand-title-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.brand-ribbon{display:block;width:100%;height:auto;overflow:visible}
body:not(.night) .ribbon-halo{opacity:.10}
body:not(.night) .ribbon-body{fill:var(--brand-tong-red);stroke:var(--brand-tong-red)}
body:not(.night) .ribbon-core{opacity:.28}
body:not(.night) .ribbon-glints{opacity:.22}
body.night header #title{text-shadow:none;-webkit-text-stroke:0}
body.night header .brand-en{color:var(--brand-cream);text-shadow:0 0 2px #fff8,0 0 8px color-mix(in srgb,var(--brand-tong-red) 70%,transparent)}
@media(max-width:600px){body header{max-width:190px}body header #title{width:185px;margin:-7px 0 4px}body header .brand-en{font-size:23px}}
@media(max-height:500px){body header #title{width:220px;margin:-12px 0 -4px}}

body header #title{width:330px;margin:-8px 0 0}body header .brand-subtitle{margin-top:1px}
@media(max-width:600px){body header #title{width:195px;margin:-8px 0 0}}
@media(max-height:500px){body header #title{width:195px;margin:-12px 0 0}}