:root {
  --paper:#ece9e2;
  --cream:#f6f3ec;
  --white:#fbfaf7;
  --ink:#171715;
  --muted:#706d67;
  --line:rgba(23,23,21,.18);
  --gold:#9a7834;
  --display:"EB Garamond",Garamond,"Times New Roman",serif;
  --body:"Manrope",Arial,sans-serif;
}

* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { min-width:320px; margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); }
a { color:inherit; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:200; padding:.75rem 1rem; background:var(--ink); color:var(--white); }
.skip-link:focus { top:1rem; }
.kicker { margin:0; color:var(--muted); font-size:.48rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; }

.about-header {
  position:fixed; inset:0 0 auto; z-index:100; min-height:4.8rem;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem;
  padding:1rem 2rem; border-bottom:1px solid var(--line); background:rgba(236,233,226,.94); backdrop-filter:blur(14px);
}
.about-header a,.about-header span { font-size:.5rem; font-weight:600; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; }
.about-header .brand { font:500 1rem/1 var(--display); letter-spacing:.105em; }
.about-header span { color:var(--gold); }
.about-header a:last-child { justify-self:end; }

.portrait { display:grid; grid-template-columns:55% 45%; padding-top:4.8rem; }
.nameplate {
  position:sticky; top:4.8rem; height:calc(100svh - 4.8rem); overflow:hidden;
  display:flex; flex-direction:column; padding:clamp(3rem,7vh,6rem) 4.5vw 2rem;
  border-right:1px solid var(--line); background:var(--cream);
}
.nameplate h1 { margin:auto 0; font:400 clamp(6rem,13.4vw,15.5rem)/.67 var(--display); letter-spacing:-.07em; }
.nameplate h1 span,.nameplate h1 strong { display:block; }
.nameplate h1 span { margin-left:.08em; font-size:.36em; font-weight:400; letter-spacing:-.035em; }
.nameplate h1 strong { font-weight:400; }
.vietnamese-name { margin:-.25rem 0 1.4rem; font:italic 400 clamp(1.6rem,2.6vw,3rem)/1 var(--display); }
.mic-drop { max-width:27rem; margin:0 0 2rem; color:var(--muted); font:400 clamp(1.08rem,1.35vw,1.42rem)/1.35 var(--display); }
.mic-drop strong { color:var(--ink); font-family:inherit; font-size:inherit; font-style:normal; font-weight:600; letter-spacing:.025em; text-transform:uppercase; }
.mic-drop em { color:var(--ink); font-style:italic; font-weight:400; }
.nameplate footer { display:flex; justify-content:space-between; gap:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.nameplate footer span { font-size:.42rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.gold-seam { position:absolute; right:13%; top:11%; width:1px; height:78%; background:linear-gradient(transparent,var(--gold) 16%,var(--gold) 84%,transparent); transform:rotate(17deg); transform-origin:center; opacity:.78; }
.gold-seam::before,.gold-seam::after { content:""; position:absolute; left:0; width:5.5rem; height:1px; background:linear-gradient(90deg,var(--gold),transparent); transform-origin:left; }
.gold-seam::before { top:33%; transform:rotate(-38deg); }
.gold-seam::after { top:66%; transform:rotate(42deg); }

.position { min-width:0; background:var(--paper); }
.position-lead { min-height:78svh; display:flex; flex-direction:column; justify-content:flex-end; padding:8rem 5vw 4.5rem; border-bottom:1px solid var(--ink); }
.position-lead h2 { margin:1rem 0 2.6rem; font:400 clamp(3.8rem,5.7vw,7rem)/.86 var(--display); letter-spacing:-.052em; }
.position-lead h2 em { color:var(--muted); font-weight:400; }
.position-lead > p:last-child { max-width:37rem; margin:0; color:var(--muted); font:400 clamp(1.05rem,1.35vw,1.35rem)/1.62 var(--display); }
.declaration { padding:5rem 5vw; border-bottom:1px solid var(--line); background:var(--cream); }
.declaration p { max-width:30rem; margin:0; font:italic 400 clamp(2.3rem,3.5vw,4.2rem)/1.02 var(--display); letter-spacing:-.03em; }
.identity-ledger { margin:0; }
.identity-ledger div { display:grid; grid-template-columns:8rem 1fr; gap:2rem; padding:1.5rem 5vw; border-bottom:1px solid var(--line); }
.identity-ledger dt { color:var(--muted); font-size:.45rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.identity-ledger dd { margin:0; font:400 1.05rem/1.35 var(--display); }
.selected-work { padding:5rem 5vw; }
.selected-work > p { margin-bottom:2rem; }
.selected-work a { display:grid; grid-template-columns:8rem 1fr auto; align-items:baseline; gap:2rem; padding:1.35rem 0; border-top:1px solid var(--line); text-decoration:none; }
.selected-work a:last-child { border-bottom:1px solid var(--line); }
.selected-work span,.selected-work i { color:var(--muted); font-size:.45rem; font-style:normal; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.selected-work strong { font:400 clamp(1.45rem,2.2vw,2.4rem)/1 var(--display); }
.selected-work a:hover strong,.selected-work a:focus-visible strong { color:var(--gold); }
.contact-line { padding:5rem 5vw; background:var(--ink); color:var(--white); }
.contact-line p { max-width:34rem; margin:0 0 1rem; color:rgba(255,255,255,.56); font:400 1.05rem/1.6 var(--display); }
.contact-line a { font:400 clamp(1.45rem,2.45vw,2.8rem)/1.1 var(--display); text-decoration-thickness:1px; text-underline-offset:.22em; overflow-wrap:anywhere; }

@media (max-width:900px) {
  .about-header { grid-template-columns:1fr auto; }
  .about-header span { display:none; }
  .portrait { grid-template-columns:1fr; }
  .nameplate { position:relative; top:auto; height:auto; min-height:calc(100svh - 4.8rem); padding:4rem 1.3rem 2rem; border-right:0; border-bottom:1px solid var(--line); }
  .nameplate h1 { margin:auto 0; font-size:clamp(7rem,25vw,13rem); }
  .gold-seam { right:20%; }
  .position-lead { min-height:72svh; padding:6rem 1.3rem 4rem; }
  .position-lead h2 { font-size:clamp(4rem,13vw,7rem); }
  .declaration,.selected-work,.contact-line { padding:4rem 1.3rem; }
  .identity-ledger div { padding:1.5rem 1.3rem; }
}

@media (max-width:520px) {
  .about-header { padding-inline:1rem; }
  .about-header .brand { font-size:.76rem; }
  .about-header a:last-child { max-width:8rem; text-align:right; }
  .nameplate h1 { font-size:clamp(5.4rem,27vw,8rem); }
  .nameplate footer { display:grid; }
  .vietnamese-name { font-size:1.55rem; }
  .position-lead h2 { font-size:3.8rem; }
  .identity-ledger div,.selected-work a { grid-template-columns:1fr; gap:.55rem; }
  .selected-work i { display:none; }
  .contact-line a { font-size:1.38rem; }
}

@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; }
}