/* Original homepage styling inspired by Shiro's washi, ink and vermilion. */
:root{color-scheme:dark;--paper:#191a18;--ink:#dedbd2;--body:#c8c5bd;--muted:#aaa69c;--faint:#858279;--accent:#c67868;--accent-soft:#c6786880;--serif:"Lato","Lato fallback","Noto Serif SC",serif}
/* Light scheme (theme.js): only the page's background and text change; the house keeps its look. Same values as the blog. */
:root[data-theme="light"]{color-scheme:light;--paper:#f3f3f0;--ink:#26261f;--body:#3b3b36;--muted:#6b6b65;--faint:#91918a;--accent:#b55f4e;--accent-soft:#b55f4e80}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:400 13px/1.7 var(--serif);font-synthesis:none;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.site-header{width:1440px;max-width:calc(100% - 96px);margin:0 auto;min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:var(--serif)}
.site-mark{display:block;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden}.site-mark img{display:block;width:100%;height:100%;object-fit:cover}
.site-header nav{display:flex;align-items:center;gap:32px;font-size:17px;color:var(--muted)}.site-header nav a{white-space:nowrap}.site-header nav a[aria-current]{color:var(--ink)}.site-header nav span{font-size:10px;margin-left:3px}
.home{width:1440px;max-width:calc(100% - 96px);margin:40px auto 0;padding-bottom:100px}
.name{font:400 42px/1.2 "Lato",sans-serif;letter-spacing:-.6px;margin:0 0 40px}.name-dot{color:var(--accent)}
.intro-house{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:48px;align-items:start}
.intro{padding-top:0;font-size:15px;line-height:2.05;color:var(--body)}.intro p{margin:0 0 25px}.intro .hello{font-size:19px;color:var(--ink);margin-top:-5px;margin-bottom:25px}.intro a{color:var(--ink);border-bottom:1px solid var(--accent-soft);padding-bottom:3px}.intro a:hover{color:var(--accent)}.intro .motto{font-size:12px;letter-spacing:2px;color:var(--faint);margin-top:42px}
.house-section{min-width:0}
.house-frame{padding:0;background:transparent;border:0;border-radius:16px;overflow:hidden;box-shadow:0 4px 10px -4px #00000059,0 14px 30px -12px #00000073;container-type:inline-size}
/* The house's poster sits behind the frame until its page paints: placed like html.embedded #poster (full width, centre raised 5% of the width) */
iframe{width:100%;height:auto;aspect-ratio:20/17;display:block;border:0;border-radius:inherit;background:#cfd8e3 url(house/assets/poster.webp) no-repeat center calc(50% - 5cqw)/100% auto}
/* The house page has no colour scheme of its own; matching it keeps the frame see-through (a mismatch makes Chrome paint it opaque), so this background shows until the house paints. */
iframe{color-scheme:normal}

@media(max-width:1100px){.site-header,.home{max-width:calc(100% - 56px)}.intro-house{gap:30px}.intro{font-size:14px}.intro br{display:none}.intro .hello{font-size:17px}}
@media(max-width:700px){.site-header{min-height:82px;max-width:calc(100% - 36px);gap:20px}.site-header nav{gap:16px;font-size:14px}.site-mark{width:42px;height:42px}.home{max-width:calc(100% - 36px);margin-top:23px;padding-bottom:64px}.name{font-size:34px;margin-bottom:29px}.intro-house{grid-template-columns:1fr;gap:24px}.intro{font-size:14px;line-height:1.9}.intro p{margin-bottom:17px}.intro .hello{margin-bottom:17px}.intro .motto{margin-top:23px;margin-bottom:8px}.house-frame{padding:0;border-radius:12px}iframe{aspect-ratio:1 / .9695652174}}
@media(max-width:360px){.site-header nav{gap:10px;font-size:13px}}

/* English homepage; the Chinese motto stays directly below the name. */
.intro .name{margin-bottom:12px}.intro .motto{font-family:"Noto Serif SC",serif;font-weight:300;font-size:13px;letter-spacing:2px;margin:0 0 34px;color:var(--muted)}.intro{font-size:17px;line-height:1.8}.intro .hello{font-size:20px;margin-top:0}.site-header nav{font-weight:400}
@media(max-width:700px){.intro{font-size:16px}.intro .motto{font-size:12px;margin:0 0 26px}.site-header nav{gap:13px;font-size:14px}.site-header{gap:14px}}
@media(max-width:370px){.site-header nav{gap:9px;font-size:12px}}

/* Letter-style introduction and compact career list. */
.intro .career{margin:0 0 25px;padding-left:20px}.intro .career li{padding-left:2px;margin:0 0 7px}.intro strong{font-weight:700;color:var(--ink)}.intro .signature{margin-top:28px}
/* Site-wide figures from the visitor counter (count.js), under the signature. */
.intro .site-stats{margin:36px 0 0;font-size:12px;letter-spacing:1px;color:var(--faint);font-variant-numeric:tabular-nums}
/* Dark / light toggle at the end of the nav, as on the blog. */
.theme-toggle{flex:none;width:34px;height:34px;margin-left:-6px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}.theme-toggle:hover{color:var(--accent)}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun,:root[data-theme="light"] .theme-toggle .moon{display:none}:root[data-theme="light"] .theme-toggle .sun{display:block}
@media(max-width:700px){.theme-toggle{width:28px;height:28px;margin-left:-4px}.theme-toggle svg{width:17px;height:17px}}