@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/hanken-grotesk.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--forest:#0f2117;--ivory:#fffff0;--muted:#c1c6b9;--frame-inset:clamp(12px,2.22svh,24px)}
*{box-sizing:border-box}
html{background:var(--forest);font-size:100%}
body{margin:0;padding:var(--frame-inset);color:var(--ivory);font-family:'Hanken Grotesk',Arial,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
::selection{background:var(--ivory);color:var(--forest)}
/* The border belongs to the content container, so it grows and scrolls
   with the page instead of crossing content in a short or zoomed viewport. */
.page{border:1px solid #687568;min-height:calc(100vh - 2 * var(--frame-inset));min-height:calc(100svh - 2 * var(--frame-inset));min-height:calc(100dvh - 2 * var(--frame-inset));display:grid;grid-template-rows:auto minmax(min-content,1fr) auto;padding:max(20px,calc(clamp(24px,8.7svh,94px) - var(--frame-inset))) max(16px,calc(clamp(24px,2.92vw,56px) - var(--frame-inset))) max(18px,calc(clamp(20px,4.44svh,48px) - var(--frame-inset)))}
.masthead{display:flex;justify-content:center;align-items:flex-start}
.wordmark{display:block;width:clamp(150px,min(13.125vw,23.33svh),252px);height:auto;max-width:100%;flex:none}
/* Scale with the shorter available dimension, not screen width alone.
   Content stays in normal flow so accessibility zoom can scroll if necessary. */
main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:clamp(0px,calc((100svh - 600px)*.6),292px);outline:none;min-width:0}
main>*{flex-shrink:0}
h1{font-size:clamp(1.375rem,min(2.865vw,5.1svh),3.4375rem);font-weight:200;line-height:1.277;letter-spacing:0;margin:0;max-width:100%;text-wrap:balance}
h1 span{font-weight:100}
.divider{width:1px;height:clamp(24px,11.67svh,126px);margin:clamp(12px,4.26svh,46px) 0 clamp(12px,4.815svh,52px);background:linear-gradient(transparent,#81917f 40%,#81917f 60%,transparent)}
.monogram{display:block;width:auto;height:clamp(28px,6.48svh,70px)}
.email{display:block;margin-top:clamp(14px,4.815svh,52px);font-size:clamp(1rem,min(1.316vw,2.34svh),1.579rem);font-weight:300;line-height:1.425;text-decoration:none;color:var(--ivory);max-width:100%;overflow-wrap:anywhere;transition:opacity .2s}
.email:hover{opacity:.75;text-decoration:underline;text-underline-offset:6px}
a:focus-visible{outline:2px solid var(--ivory);outline-offset:7px}
footer{margin-top:26px;color:var(--muted);font-size:.75rem;line-height:1.5}
footer small{font-size:inherit}
.skip-link{position:fixed;left:32px;top:26px;transform:translateY(-150px);background:var(--ivory);color:var(--forest);padding:14px;z-index:5}
.skip-link:focus{transform:translateY(0)}
@media(max-width:700px){.page{padding:clamp(24px,5.7svh,48px) 30px clamp(20px,3.55svh,30px)}.wordmark{width:clamp(150px,24.3svh,205px)}main{padding:24px 0}h1{font-size:clamp(1.375rem,min(5.8vw,4svh),2.375rem);line-height:1.35}h1 br{display:none}h1 span{display:block;margin-top:.15em}.divider{height:clamp(24px,8.9svh,75px);margin:clamp(12px,4svh,34px) 0}.monogram{height:clamp(28px,6.4svh,54px)}.email{margin-top:clamp(14px,4svh,34px);font-size:1.125rem}footer{text-align:center;margin-top:clamp(10px,2.4svh,20px)}}
/* Short landscape windows need less decoration and whitespace. */
@media(max-height:500px) and (orientation:landscape){.page{padding:20px 30px 18px}.wordmark{width:clamp(110px,32svh,150px)}main{padding-top:12px}h1{font-size:clamp(1.125rem,5svh,1.5625rem)}.divider{height:6svh;margin:1.5svh 0}.monogram{height:8svh}.email{margin-top:2svh;font-size:1rem}footer{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}