@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('assets/anton-regular.ttf') format('truetype')}
:root{--yellow:#e9d46f;--blue:#7199c8;--deep:#214a87;--ink:#1c2927;--paper:#f4efdf;--body:'DM Sans',Arial,sans-serif;--block:'Anton',Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px var(--body);color:var(--ink);background:var(--yellow);-webkit-font-smoothing:antialiased}body[data-palette="1"]{--yellow:#dba8a2;--blue:#afb856;--deep:#414d29}body[data-palette="2"]{--yellow:#c9c9dc;--blue:#dea065;--deep:#5b3446}h1,h2,p,figure,blockquote{margin:0}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:7px}::selection{background:var(--ink);color:var(--yellow)}.skip{position:fixed;top:-80px;left:20px;z-index:10;background:var(--ink);color:var(--paper);padding:15px}.skip:focus{top:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}header{height:90px;padding:0 3.5%;display:flex;align-items:center;justify-content:space-between}.logo{width:79px}.logo img{filter:brightness(0) saturate(100%) invert(13%) sepia(13%) saturate(733%) hue-rotate(119deg)}nav{display:flex;gap:37px;font-family:var(--block);font-size:17px;text-transform:uppercase;letter-spacing:-.04em}nav a{padding:14px 0}nav a:hover{text-decoration:underline;text-underline-offset:6px}.welcome-band{padding:9px 2.8% 33px;border-top:1px solid #1c292722}h1{font:400 16.1vw/.97 var(--block);letter-spacing:-.065em;white-space:nowrap;text-align:center}.intro-spread{display:grid;grid-template-columns:1fr 1fr}.portrait{position:relative;min-height:680px;background:#c4c4bd;overflow:hidden}.portrait>img{height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 39%}.portrait figcaption{position:absolute;left:30px;bottom:26px;color:white;background:#1c2927e8;padding:7px 12px;font-size:12px;letter-spacing:.025em}.intro-panel{background:var(--blue);padding:47px 9% 24px;display:flex;flex-direction:column}.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:12px}.intro-panel h2{font:400 clamp(55px,6.2vw,97px)/.91 var(--block);letter-spacing:-.065em;margin:40px 0 33px}.intro-panel h2 em{font-family:var(--serif);font-weight:400;font-size:1.35em;letter-spacing:-.03em}.bio{max-width:430px}.bio p{font-size:18px;line-height:1.55;margin-bottom:21px}.text-link{display:inline-flex;align-items:center;gap:50px;font-size:14px;padding:6px 0;border-bottom:1px solid;margin-top:2px}.text-link:hover{border-color:transparent}.panel-bottom{margin-top:auto;padding-top:36px;display:flex;flex-direction:column;align-items:start;gap:11px;font-size:11px}.panel-bottom>span:first-child{color:#1c2927cc}#color-toggle{border:0;border-top:1px solid #1c292755;background:transparent;color:var(--ink);display:flex;align-items:center;width:100%;gap:10px;padding:14px 0 3px;text-align:left;cursor:pointer;font-size:12px;min-height:44px}.color-chip{height:18px;width:27px;background:linear-gradient(90deg,var(--yellow) 50%,var(--deep) 50%);transition:transform .3s}#color-toggle:hover .color-chip{transform:rotate(180deg)}#color-index{margin-left:auto;font-size:11px}.recommendation{padding:70px 6% 73px;background:var(--deep);color:var(--paper);display:grid;grid-template-columns:25% 75%;gap:0}.quote-label{font-size:12px;line-height:1.6;padding-top:12px}.recommendation blockquote{font:400 clamp(38px,4.7vw,73px)/1.07 var(--serif);letter-spacing:-.02em;max-width:980px}.recommendation figcaption{font-size:13px;margin-top:28px}.recommendation figcaption span{display:block;font-size:11px;margin-top:7px;opacity:.82}footer{background:var(--yellow);padding:32px 3.5% 27px}.contact-top{display:flex;justify-content:space-between;font-size:13px}.hello{font:400 12vw/1 var(--block);letter-spacing:-.07em;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:48px 0 42px}.hello-arrow{font-family:var(--body);font-size:.75em;transition:transform .25s}.hello:hover .hello-arrow{transform:translate(8px,-8px)}.footer-base{border-top:1px solid #1c292755;padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:11px}.footer-base>a:first-child{font-size:17px}.footer-base>a:last-child{font-size:12px}
@media(min-width:1700px){.portrait{min-height:800px}.intro-panel{padding-top:70px}.intro-panel h2{font-size:105px}}
@media(max-width:950px) and (min-width:701px){.intro-panel{padding:35px 8% 22px}.intro-panel h2{font-size:6.6vw;margin-top:35px}.bio p{font-size:16px}.portrait{min-height:680px}.recommendation{grid-template-columns:20% 80%}.recommendation blockquote{font-size:44px}}
@media(max-width:700px){header{height:76px;padding:0 6%}.logo{width:63px}nav{font-size:14px;gap:23px}.welcome-band{padding:17px 3% 26px}h1{font-size:16.1vw;letter-spacing:-.065em}.intro-spread{grid-template-columns:1fr}.portrait{min-height:0;aspect-ratio:1/1.08}.portrait>img{object-position:50% 32%}.portrait figcaption{left:22px;bottom:22px;font-size:11px}.intro-panel{padding:34px 7% 26px}.eyebrow{font-size:11px}.intro-panel h2{font-size:64px;line-height:.96;margin:30px 0 28px}.intro-panel h2 em{font-size:1.3em}.bio{max-width:none}.bio p{font-size:17px;line-height:1.6}.text-link{font-size:13px}.panel-bottom{padding-top:32px}#color-toggle{font-size:12px}.recommendation{padding:38px 7% 48px;grid-template-columns:1fr;gap:29px}.quote-label{padding:0;font-size:11px}.quote-label br{display:none}.recommendation blockquote{font-size:40px}.recommendation figcaption{font-size:12px}.recommendation figcaption span{font-size:10px}footer{padding:27px 6% 25px}.contact-top{font-size:12px}.hello{font-size:12.5vw;padding:39px 0 30px;gap:12px}.footer-base{align-items:start;flex-wrap:wrap;gap:24px;font-size:10px}.footer-base>a:first-child{width:100%;font-size:16px}.footer-base>a:last-child{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.quote-label{display:flex;flex-direction:column;gap:34px;align-items:flex-start}.quote-navigation{display:flex;flex-direction:column;gap:15px;font-size:11px}#next-quote{border:0;border-bottom:1px solid #f4efdf77;background:none;color:inherit;padding:8px 0;cursor:pointer;display:inline-flex;gap:26px;align-items:center;font-size:13px}#next-quote:hover{border-color:var(--paper)}.recommendation blockquote{min-height:4.28em}.recommendation figcaption #quote-author{display:block;font-size:13px;opacity:1;margin:0}.recommendation figcaption #quote-context{font-size:11px;opacity:.82;margin-top:7px}#full-recommendation{margin-top:25px;font-size:13px}#full-recommendation summary{cursor:pointer;width:fit-content;padding:8px 0;text-underline-offset:4px}#full-recommendation summary:focus-visible{outline:2px solid currentColor;outline-offset:5px}#full-quote{max-width:760px;font-size:16px;line-height:1.65;margin-top:18px}#full-quote p{margin-bottom:18px}#full-recommendation[open]{padding-bottom:4px}
@media(max-width:700px){.quote-label{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}.quote-navigation{gap:5px;align-items:flex-end}#next-quote{font-size:12px;gap:14px}.recommendation blockquote{min-height:5.35em}.recommendation figcaption #quote-author{font-size:12px}.recommendation figcaption #quote-context{font-size:10px}#full-quote{font-size:16px}}

/* Version 07: condensed display lettering and a portrait on the right. */
nav{font-size:23px;letter-spacing:-.025em}
h1{font-size:21.5vw;line-height:.99;letter-spacing:-.025em}
.welcome-band{padding-top:4px;padding-bottom:24px}
.intro-panel h2{font-size:clamp(66px,7.5vw,111px);letter-spacing:-.035em;line-height:.96}
.intro-panel h2 em{font-size:1.12em}
.hello{font-size:15.5vw;letter-spacing:-.025em}
@media(min-width:1700px){.intro-panel h2{font-size:120px}}
@media(max-width:950px) and (min-width:701px){.intro-panel h2{font-size:8vw}}
@media(max-width:700px){nav{font-size:20px}h1{font-size:21.3vw;letter-spacing:-.025em}.welcome-band{padding:13px 3% 22px}.intro-panel h2{font-size:78px}.intro-panel h2 em{font-size:1.12em}.hello{font-size:16vw}.portrait{aspect-ratio:1/1.12}}

/* Version 09: quiet grounds, pale color fields and contrasting ink. */
:root,body[data-palette="0"]{--yellow:#f2eee5;--blue:#d7e0ca;--deep:#603f47;--ink:#292925;--paper:#f2eee5;--accent:#798154;--rule:#29292533}
body[data-palette="1"]{--yellow:#f1efe9;--blue:#ccd8df;--deep:#4b3c35;--ink:#292925;--paper:#f1efe9;--accent:#997342;--rule:#29292533}
body[data-palette="2"]{--yellow:#efece6;--blue:#ded6df;--deep:#31483e;--ink:#292925;--paper:#efece6;--accent:#bc754c;--rule:#29292533}
body,header,.welcome-band,.intro-panel,.recommendation,footer{transition:background-color .45s ease,color .45s ease}
header{height:86px}
.welcome-band{border-color:var(--rule);padding-top:8px;padding-bottom:43px}
h1{color:var(--deep)}
.intro-spread{margin:0 3.5%;gap:18px}
.intro-panel{padding-left:9%;padding-right:9%}
.intro-panel h2{color:var(--deep)}
.portrait{min-height:660px}
.portrait figcaption{background:var(--paper);color:var(--ink)}

#color-toggle{border-color:var(--rule)}
.color-chip{width:36px;background:linear-gradient(90deg,var(--blue) 0 33%,var(--deep) 33% 67%,var(--accent) 67%)}
.recommendation{margin:56px 3.5% 0;padding:49px 2.5% 57px;background:var(--paper);color:var(--deep);border-top:1px solid var(--rule)}
.quote-label{color:var(--ink)}
#quote-position{padding-left:16px;position:relative}
#quote-position:before{content:'';position:absolute;left:0;top:5px;width:7px;height:7px;background:var(--accent)}
#next-quote{border-color:var(--rule);min-height:44px}
#next-quote:hover{border-color:var(--deep)}
#full-recommendation summary{min-height:44px}
#full-quote{color:var(--ink)}
footer{border-top:1px solid var(--rule);margin:0 3.5%;padding:29px 0 27px}
.hello{color:var(--deep)}
.footer-base{border-color:var(--rule)}
@media(max-width:700px){
header{height:76px}
.welcome-band{padding-bottom:27px}
.intro-spread{margin:0 5%;gap:12px}
.intro-panel{padding:31px 7% 25px}
.intro-panel h2{font-size:70px}
.bio p{font-size:16px}
.portrait{min-height:0}
.recommendation{margin:33px 5% 0;padding:32px 2% 40px}
.recommendation blockquote{font-size:38px}
footer{margin:0 5%;padding:26px 0}
}

/* Version 10: a floating monogram and WELCOME behind the introduction. */
.logo{display:block}
header{position:absolute;top:34px;left:3.5%;right:auto;width:auto;height:auto;padding:0;display:block;background:transparent;z-index:5}
.opening{position:relative;isolation:isolate;padding-top:clamp(104px,8vw,160px)}
.welcome-band{position:relative;z-index:0;border:0;padding:0 2.8%;pointer-events:none}
h1{font-size:25.6vw;line-height:.99;letter-spacing:-.025em}
.intro-spread{position:relative;z-index:1;margin-top:-10vw}
@media(max-width:700px){
header{top:26px;left:5%;height:auto;padding:0}
.opening{padding-top:82px}
.welcome-band{padding:0 2.8%;border:0}
h1{font-size:25.6vw;line-height:.99}
.intro-spread{margin-top:-9.5vw}
}

/* Version 11: the original monogram becomes the oversized background mark. */
.opening{padding-top:52px}
.monogram-band{width:98%;aspect-ratio:1500/408;margin:0 auto;position:relative;z-index:0;pointer-events:none}
.oversized-monogram{position:absolute;inset:0;display:block;width:100%;height:100%;color:var(--deep);shape-rendering:geometricPrecision;transition:color .45s ease}
.intro-spread{margin-top:-8.6vw}
@media(max-width:700px){
.opening{padding-top:30px}
.monogram-band{width:98%}
.intro-spread{margin-top:-7.2vw}
}

/* Crisp vector silhouette and a shallower overlap. */
.monogram-band{aspect-ratio:1500/415}
.intro-spread{margin-top:-4.8vw}
@media(max-width:700px){.intro-spread{margin-top:-4.8vw}}

.recommendation figcaption #quote-context{font-size:12px;line-height:1.6;max-width:36em;opacity:1}
@media(max-width:700px){.recommendation figcaption #quote-context{font-size:11px}}

/* Lilac and forest is the default, including before JavaScript runs. */
:root,body[data-palette="0"]{--yellow:#efece6;--blue:#ded6df;--deep:#31483e;--ink:#292925;--paper:#efece6;--accent:#bc754c;--rule:#29292533}
body[data-palette="1"]{--yellow:#f2eee5;--blue:#d7e0ca;--deep:#603f47;--ink:#292925;--paper:#f2eee5;--accent:#798154;--rule:#29292533}
body[data-palette="2"]{--yellow:#f1efe9;--blue:#ccd8df;--deep:#4b3c35;--ink:#292925;--paper:#f1efe9;--accent:#997342;--rule:#29292533}

/* Version 17: the lettering sits just in front of the panel edge. */
.monogram-band{z-index:2}
.intro-spread{z-index:1;margin-top:calc(-1.9vw - clamp(6px,.8vw,12px))}

/* Version 20: one more small downward nudge. */
.monogram-band{top:clamp(14px,1.6vw,22px)}

/* Version 22: mist blue and muted cherry, closer in intensity to the other pairings. */
body[data-palette="2"]{--yellow:#f1efe9;--blue:#cfd9dd;--deep:#774b55;--ink:#292925;--paper:#f1efe9;--accent:#8299a5;--rule:#29292533}

/* Let the introduction and contact links stand on their own. */
.intro-panel h2{margin-top:clamp(18px,1.8vw,28px)}
.contact-top{justify-content:flex-end}

/* Final spacing pass: separate sections and give long quotations an easier rhythm. */
.intro-spread{column-gap:24px}
.recommendation{margin-top:clamp(56px,5vw,80px);padding-top:60px;padding-bottom:68px}
.recommendation blockquote{line-height:1.13}
@media(max-width:700px){
 .intro-spread{row-gap:20px}
 .recommendation{margin-top:44px;padding-top:40px;padding-bottom:48px}
 .recommendation blockquote{line-height:1.12}
}

/* Comfortable tap targets for the smaller text links. */
.text-link,.contact-top>a,.footer-base>a{min-height:44px}
.contact-top>a,.footer-base>a{display:inline-flex;align-items:center}
@media(max-width:700px){.footer-base{align-items:center}}

/* A short career story, with room for the headline and the conversation. */
.story{
 margin:0 3.5%;
 padding:clamp(76px,7.5vw,120px) 2.5%;
 display:grid;
 grid-template-columns:1fr 1fr;
 column-gap:clamp(40px,5vw,80px);
 align-items:start;
 scroll-margin-top:28px;
}
.story h2{
 color:var(--deep);
 font:400 clamp(44px,4.8vw,70px)/1.07 var(--serif);
 letter-spacing:-.025em;
 transition:color .45s ease;
}
.story h2 span,.story h2 em{display:block}
.story h2 em{font-weight:400}
.story-copy{max-width:32em;padding-top:3px}
.story-copy p{font-size:18px;line-height:1.65;margin:0 0 23px}
.story-copy .story-closing{font-weight:400;margin-bottom:27px}
.story+.recommendation{margin-top:0}
@media(max-width:900px){
 .story{grid-template-columns:1fr;row-gap:34px;padding-top:68px;padding-bottom:68px}
 .story h2{max-width:14em}
 .story-copy{max-width:35em;padding-top:0}
}
@media(max-width:700px){
 .story{margin:0 5%;padding:54px 2% 56px;row-gap:29px;scroll-margin-top:24px}
 .story h2{font-size:clamp(38px,10.5vw,50px)}
 .story-copy p{font-size:16px;line-height:1.65;margin-bottom:21px}
 .story-copy .story-closing{margin-bottom:22px}
}