@font-face{font-family:'Italiana';src:url(fonts/Italiana.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Albert Sans';src:url(fonts/AlbertSans.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --plaster:#E3E1DC; --chalk:#F3F2EF; --walnut:#2A211C; --stone:#5F5851; --oxblood:#5C2A26; --line:#CFCBC4;
  --serif:'Italiana','Songti SC','Noto Serif SC',serif;
  --sans:'Albert Sans','PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--plaster);color:var(--walnut);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:4px}
.quiet{color:var(--stone)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--pad);top:-60px;background:var(--walnut);color:var(--chalk);padding:10px 14px;z-index:20}
.skip:focus{top:12px}

/* bar */
.bar{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:24px var(--pad);font-size:15px;pointer-events:none}
.bar>*{pointer-events:auto}
.mark{letter-spacing:.02em}
.lang{display:flex;gap:18px}
.lang button{padding:6px 0;color:var(--stone);border-bottom:1px solid transparent}
.lang button[aria-pressed=true]{display:none} /* one button: it names the other language */
.lang button{color:var(--walnut);border-bottom-color:var(--line)}
.lang button:hover{border-bottom-color:var(--walnut)}

/* doorway: an arch whose opening is driven by --o (0 closed .. 1 open) */
.door{--o:1;overflow:hidden;position:relative;
  clip-path:inset(calc((1 - var(--o)) * 5%) calc((1 - var(--o)) * 22%) 0 round calc(var(--r, 600px) * (1 - var(--o)) + 18px * var(--o)) calc(var(--r, 600px) * (1 - var(--o)) + 18px * var(--o)) 0 0)}
.door img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--o) * .12));transform-origin:50% 60%}
.door.still{--o:.15}
.about .door img{object-position:62% 50%}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;padding:120px var(--pad) 56px;position:relative}
.name{grid-column:1/7;grid-row:1;align-self:center;font:400 clamp(84px,13.5vw,210px)/.92 var(--serif);letter-spacing:-.01em;margin-left:-.04em}
.name span{display:block}
.name span+span{padding-left:.82em}
.role{grid-column:1/6;grid-row:2;margin-top:48px;font-size:19px}
.role .quiet{font-size:17px}
.portal{grid-column:7/13;grid-row:1/3;align-self:stretch;height:min(78svh,760px);--s:.5;
  clip-path:inset(0 calc(var(--s) * 50%) 0 round var(--r, 50vw) var(--r, 50vw) 0 0)}
.portal img{transform:scale(calc(1 + var(--s) * .08))}

/* about */
.about{background:var(--chalk);display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:clamp(80px,12vw,160px) var(--pad)}
.about .door{grid-column:1/5;aspect-ratio:4/5;--r:30vw;align-self:start}
.about .text{grid-column:6/12}
.statement{font:400 clamp(34px,3.6vw,54px)/1.12 var(--serif);margin-bottom:48px;max-width:20ch}
.about p{max-width:60ch}
.about p+p{margin-top:1em}

/* contact */
.contact{padding:clamp(80px,12vw,160px) var(--pad) 80px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;border-top:1px solid var(--line)}
.ask{grid-column:1/8;text-align:left;font:400 clamp(64px,10vw,150px)/.95 var(--serif);position:relative;padding-bottom:.08em}
.ask::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--walnut);transform:scaleX(.18);transform-origin:0 0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ask:hover::after,.ask:focus-visible::after{transform:scaleX(1)}
.addr{grid-column:1/8;margin-top:20px;font-size:19px}
.note{grid-column:9/13;max-width:36ch}
.foot{padding:28px var(--pad);font-size:14px;display:flex;justify-content:space-between;gap:24px}
.prefs{color:var(--stone);border-bottom:1px solid var(--line)}
.prefs:hover{color:var(--walnut);border-bottom-color:var(--walnut)}

/* consent: a quiet slip at the foot of the screen, only when Google Tag Manager is configured */
.consent{position:fixed;left:var(--pad);bottom:20px;z-index:30;max-width:440px;background:var(--chalk);border:1px solid var(--line);padding:20px 22px;font-size:15px}
.consent[hidden]{display:none}
.consent-do{display:flex;gap:24px;margin-top:14px}
.consent-do button{padding:4px 0;border-bottom:1px solid var(--walnut)}
.consent-do button+button{border-bottom-color:var(--line);color:var(--stone)}

html[lang=zh-Hans] .name,html[lang=zh-Hans] .statement,html[lang=zh-Hans] .ask{font-family:var(--serif);letter-spacing:.02em}
html[lang=zh-Hans] .ask{font-size:clamp(52px,7vw,104px)}
html[lang=zh-Hans] body{line-height:1.8}

/* phones and small tablets: native swipe, no pinning */
@media (max-width:800px){
  .bar{padding:16px var(--pad)}
  .hero{display:block;padding-top:84px}
  .name{font-size:clamp(72px,22vw,120px)}
  .role{margin:28px 0 36px}
  .portal{height:62svh;--r:60vw}
  .about,.contact{display:block}
  .about .door{margin-bottom:48px}
  .note{margin-top:32px}
  .consent{left:16px;right:16px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .door{--o:1!important}
  .portal{--s:0!important}
  .ask::after{transition:none}
  html{scroll-behavior:auto}
}