:root{
  --bg:#eeece7;--ink:#1b1a18;--mute:#6f6b64;--line:rgba(27,26,24,.18);
  --ease:cubic-bezier(.22,1,.36,1);--m:clamp(1.25rem,4.5vw,4rem);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light dark;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141311;--ink:#e9e6e0;--mute:#97928a;--line:rgba(233,230,224,.2)}}
:root[data-theme="dark"]{--bg:#141311;--ink:#e9e6e0;--mute:#97928a;--line:rgba(233,230,224,.2)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4rem;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:1px solid currentColor;outline-offset:.4rem}
::selection{background:var(--ink);color:var(--bg)}

.top{display:flex;justify-content:space-between;align-items:center;height:4.6rem;padding:0 var(--m)}
.mono{font:400 1.5rem/1 var(--serif);letter-spacing:-.02em}
.top nav{display:flex;gap:1.75rem;font-size:.85rem;color:var(--mute)}
.top nav a{padding:.6rem 0;transition:color .3s var(--ease)}
.top nav a:hover{color:var(--ink)}

.hero{min-height:calc(100svh - 4.6rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:clamp(.5rem,3vh,2rem) var(--m) 1.5rem;display:flex;flex-direction:column;justify-content:space-between}
.eyebrow{margin:0;font-size:.72rem;letter-spacing:.16em;font-weight:500;color:var(--mute)}
.name{margin:clamp(2rem,7vh,5rem) 0;font:400 clamp(4rem,min(22vw,18svh),20rem)/.9 var(--serif);letter-spacing:-.03em}
.ln{display:block;overflow:hidden;padding:.05em .1em .08em 0}
.ln:nth-child(2){padding-left:clamp(1rem,12vw,12rem)}
.ln:nth-child(3){padding-left:clamp(2rem,24vw,24rem)}
.hf{display:grid;gap:1.1rem}
.rule{height:1px;background:var(--line)}
.hf p{margin:0;font-size:.95rem;color:var(--mute)}

.sec{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;row-gap:1.75rem;margin:clamp(4.5rem,13vh,9rem) var(--m) 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.lab{grid-column:1/-1;margin:0;font:500 .72rem/1.6 var(--sans);letter-spacing:.16em;color:var(--mute)}
.about{grid-column:1/-1;margin:0;max-width:30ch;font:400 clamp(1.75rem,4.4vw,3.3rem)/1.22 var(--serif);letter-spacing:-.005em;text-wrap:pretty}
.links{grid-column:1/-1;list-style:none;margin:0;padding:0}
@media (min-width:56rem){.lab{grid-column:1/4}.about,.links{grid-column:4/13}.about{max-width:28ch}}

.links a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l ar" "x ar";align-items:center;min-height:5.5rem;padding:1.5rem 0;border-top:1px solid var(--line);transition:opacity .4s var(--ease),transform .25s var(--ease)}
.links li:last-child a{border-bottom:1px solid var(--line)}
.lbl{grid-area:l;justify-self:start;padding-bottom:.06em;font:400 clamp(2rem,5.2vw,3.8rem)/1.1 var(--serif);letter-spacing:-.01em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease),transform .6s var(--ease)}
.aux{grid-area:x;margin-top:.55rem;font-size:.85rem;letter-spacing:.02em;color:var(--mute)}
.arr{grid-area:ar;width:1.7rem;height:1.7rem;transition:transform .5s var(--ease)}
.links a:active{opacity:.55;transform:scale(.99)}
.links a:active .lbl{background-size:100% 1px}
@media (hover:hover){
  .links:has(a:hover) a:not(:hover){opacity:.4}
  .links a:hover .lbl{background-size:100% 1px;transform:translateX(.7rem)}
  .links a:hover .arr{transform:translateX(.5rem)}
  .links a.ext:hover .arr{transform:translate(.3rem,-.3rem)}
}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding:clamp(4.5rem,13vh,8rem) var(--m) 1.75rem;font-size:.78rem;letter-spacing:.03em;color:var(--mute)}

.d1{--d:.1s}.d2{--d:.22s}.d3{--d:.4s}.d4{--d:.5s}.d5{--d:.6s}
.js .rv{opacity:0;transform:translateY(.9rem);transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .ln>span{display:block;transform:translateY(110%);transition:transform .8s var(--ease) var(--d,0s)}
.js.ready .ln>span{transform:none}
.js .rl{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) var(--d,0s)}
.js .rl.in{transform:none}
.js .hero .rv{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}