@font-face{font-family:Display;src:url(display.otf)}:root{--paper:#f5f3ed;--ink:#22221f;--accent:#ffde00}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.skip{position:fixed;top:-60px;background:var(--ink);color:white;padding:15px;z-index:20}.skip:focus{top:5px}.progress{height:3px;background:var(--accent);position:fixed;top:0;left:0;width:0;z-index:20}header{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 3%;border-bottom:1px solid #ccc9bf;background:var(--paper);position:sticky;top:0;z-index:10}.logo{font:46px Display;letter-spacing:-3px}.logo span{font:12px Arial;vertical-align:top;letter-spacing:0}nav{display:flex;gap:32px;font-size:12px;text-transform:uppercase}nav a:hover,.underlined:hover{color:var(--accent)}.hire{font-size:12px}.hire i{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:7px}.menu{display:none}.hero{padding:25px 3% 0}.hero-top,.hero-bottom{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.intro{display:flex;justify-content:space-between;align-items:start;margin:65px 0 38px}.intro>p{font-size:22px;line-height:1.1;margin:0;font-weight:bold}.intro div{width:33%;font-size:14px;line-height:1.5}.intro div p{margin:0 0 12px}.intro a{border-bottom:1px solid;padding-bottom:3px}h1{font:clamp(65px,15.8vw,260px)/.82 Display;margin:0;color:var(--accent);letter-spacing:-.035em;white-space:nowrap}h1 span{display:block;font-size:clamp(40px,8.3vw,145px);letter-spacing:-.02em;color:var(--ink);margin-top:22px}.hero-bottom{border-top:1px solid #bcb9af;padding:24px 0;margin-top:37px}.hero-bottom a{border-bottom:1px solid}.work,.expertise,.about{padding:65px 3% 85px}.section-label{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #aaa79d;padding-top:17px;margin-bottom:40px}.section-label h2{font-size:12px;margin:0}.section-label sup{color:var(--accent);font-size:10px}.section-label>span{font-size:11px}.project-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:65px 30px;align-items:start}.project{background:none;border:0;padding:0;text-align:left;cursor:pointer;width:100%}.image{position:relative;overflow:hidden;height:440px;background:#ddd}.image img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.project:hover img{transform:scale(1.045)}.small{margin-top:130px}.small .image{height:350px}.number{position:absolute;top:18px;left:18px;font-size:10px;background:var(--paper);padding:8px 10px}.circle{position:absolute;bottom:18px;right:18px;background:var(--paper);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:28px;transition:transform .3s}.project:hover .circle{transform:rotate(45deg)}.caption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px}.caption h3{font-size:21px;letter-spacing:-.6px;margin:0}.caption>span{font-size:11px}.medical-art{background:#264d45;color:#f1f0c2;padding:24px;height:420px;position:relative;overflow:hidden}.medical-art>span{font-size:10px}.medical-art strong{font:65px/.96 Display;display:block;margin-top:24px}.formats{display:flex;gap:14px;align-items:end;position:absolute;right:26px;bottom:65px;transform:rotate(-8deg);transition:transform .5s}.formats span{border:1px solid #c5de97;font:52px Display;width:90px;height:115px;display:grid;place-items:center;background:#355e50;box-shadow:8px 8px 0 #183e35}.formats span:nth-child(2){width:70px;height:90px}.formats span:nth-child(3){width:48px;height:90px;font-size:30px}.project:hover .formats{transform:rotate(0)}.medical-note{position:absolute;bottom:23px;left:24px}.work-note{align-self:center;padding:45px}.work-note>span{font-size:10px}.work-note p{font:60px/.95 Display;letter-spacing:-1px}.work-note a{font-size:12px;border-bottom:1px solid;padding-bottom:7px}.marquee{overflow:hidden;background:var(--accent);color:var(--paper);padding:15px 0}.marquee div{font:72px/.95 Display;white-space:nowrap;animation:marquee 24s linear infinite;width:max-content}@keyframes marquee{to{transform:translateX(-50%)}}.expertise{padding-top:90px}.expertise-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px}.expertise h3{font:80px/.9 Display;letter-spacing:-1px;margin:5px 0 50px}.expertise em{font-style:normal;color:var(--accent)}details{border-bottom:1px solid #b8b5ab;padding:23px 0}summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:20px;font-size:19px}summary::-webkit-details-marker{display:none}summary>span{font-size:10px;color:var(--accent)}summary b{margin-left:auto;font-weight:normal;font-size:25px}details[open] summary b{transform:rotate(45deg)}details p{font-size:14px;line-height:1.65;max-width:430px;margin-left:33px;color:#5b5a53}.tools{border-top:1px solid #b8b5ab;margin-top:45px;padding-top:25px;display:flex;justify-content:space-between;align-items:center}.tools span{font-size:10px}.tools p{font-size:18px;margin:0}.about{background:#e9e6dc}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.monogram{background:var(--accent);color:var(--paper);font:260px Display;display:flex;align-items:center;justify-content:center;position:relative;min-height:440px;letter-spacing:-20px}.monogram span{font:10px Arial;position:absolute;bottom:23px;left:25px;letter-spacing:.08em}.about h3{font:54px/.98 Display;margin:0 0 25px}.about p{font-size:16px;line-height:1.65;max-width:510px;color:#504f48}.underlined{display:inline-block;font-size:13px;border-bottom:1px solid;padding-bottom:5px;margin:14px 0 28px}.experience{border-top:1px solid #b8b5ab;display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:12px;padding:18px 0}.experience>span:first-child{font-size:10px;grid-row:span 2}.experience strong{font-weight:normal}.experience>span:last-child{color:#68675e}.contact{background:var(--accent);color:var(--paper);padding:45px 3% 20px}.contact-top{display:flex;justify-content:space-between;font-size:11px}.contact-top p{margin:0;line-height:1.5;font-size:15px}.talk{font:clamp(85px,18vw,280px)/1.1 Display;display:flex;justify-content:space-between;align-items:center;letter-spacing:-.04em;margin:35px 0}.talk span{font-family:Arial;font-size:.7em;transition:transform .3s}.talk:hover span{transform:translate(10px,-10px)}.contact-links{display:flex;justify-content:space-between;gap:20px;padding-bottom:85px;font-size:14px}.contact-links a:hover{text-decoration:underline}footer{border-top:1px solid #ffffff66;padding-top:20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.05em}dialog{border:0;background:var(--paper);color:var(--ink);max-width:950px;width:90%;max-height:90vh;padding:45px}dialog::backdrop{background:#171713bb;backdrop-filter:blur(8px)}.close{float:right;border:1px solid;background:none;padding:10px;cursor:pointer}.case-kicker{font-size:11px;color:var(--accent);padding-top:12px}dialog h2{font:65px/1 Display;clear:both;padding-top:30px;margin:0 0 20px}dialog p{line-height:1.7;max-width:650px}dialog img{width:100%;margin:25px 0}dialog .case-link{display:inline-block;background:var(--accent);color:white;padding:17px 25px;margin-top:20px}dialog ul{padding-left:20px;line-height:1.8;font-size:14px}body.modal-open{overflow:hidden}@media(min-width:1700px){main,header{max-width:1800px;margin:auto}}@media(max-width:800px){header{height:70px}.hire{display:none}.menu{display:block;border:0;background:none;font-size:12px}nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);padding:25px 5%;border-bottom:1px solid}nav.open{display:flex}.hero-top{font-size:8px}.intro{margin-top:45px;gap:25px}.intro>p{font-size:17px}.intro div{width:45%;font-size:12px}.intro br{display:none}h1{font-size:15.3vw}h1 span{font-size:8vw}.hero-bottom{font-size:8px;gap:15px}.scroll{display:none}.section-label>span{display:none}.work,.expertise,.about{padding:45px 5%}.project-grid{grid-template-columns:1fr;gap:35px}.small{margin-top:0}.image,.small .image{height:auto;aspect-ratio:1.4}.caption{align-items:start}.caption h3{font-size:20px}.caption>span{text-align:right;max-width:140px}.medical-art{height:360px}.work-note{padding:15px 0}.work-note p{font-size:45px;margin:20px 0}.expertise-layout,.about-grid{grid-template-columns:1fr;gap:20px}.expertise h3{font-size:66px;margin:0 0 20px}summary{font-size:17px}.tools{align-items:start;gap:20px}.tools p{font-size:14px;max-width:230px;line-height:1.5}.monogram{min-height:290px;font-size:210px}.about h3{margin-top:20px}.contact{padding:35px 5% 20px}.contact-top>span{max-width:170px;font-size:10px}.contact-top p{font-size:12px}.contact-links{display:grid;grid-template-columns:1fr 1fr;font-size:12px;padding-bottom:45px}.contact-links a:first-child{grid-column:span 2}footer{font-size:8px;gap:15px}footer>span:nth-child(2){display:none}dialog{padding:25px}dialog h2{font-size:45px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Motion direction: oversized type, deliberate reveals, responsive imagery. */
.intro-screen{position:fixed;inset:0;background:var(--accent);color:var(--paper);z-index:100;display:flex;flex-direction:column;justify-content:space-between;padding:30px 3%;pointer-events:none;animation:intro-away .9s cubic-bezier(.76,0,.24,1) 1.25s forwards;will-change:transform}.intro-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em}.intro-word{font:clamp(75px,21vw,340px)/.8 Display;letter-spacing:-.04em;overflow:hidden;padding:25px 0}.intro-word span{display:block;animation:intro-type 1.1s cubic-bezier(.16,1,.3,1) both}.intro-word span:nth-child(2){animation-delay:.12s}.intro-line{height:1px;background:#ffffff55;margin-top:20px;position:relative;overflow:hidden}.intro-line:after{content:'';position:absolute;inset:0;background:var(--paper);transform-origin:left;animation:intro-rule 1.3s ease both}.intro-skip{position:absolute;right:3%;bottom:55px;border:1px solid #ffffff66;color:inherit;background:none;padding:8px 12px;font-size:11px;pointer-events:auto;cursor:pointer}@keyframes intro-type{from{transform:translateY(115%) rotate(3deg)}to{transform:translateY(0) rotate(0)}}@keyframes intro-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes intro-away{to{transform:translateY(-105%);visibility:hidden}}
.hero-name{display:flex;overflow:hidden;padding-top:8px}.hero-name .letter{display:inline-block;transform:translateY(120%) rotate(8deg);animation:name-enter 1.1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(1.45s + var(--i)*.045s)}h1 .hero-name{font-size:inherit;line-height:.88;color:var(--accent);margin:0;letter-spacing:inherit}h1 .hero-name .letter{font-size:inherit;color:inherit;margin:0;letter-spacing:inherit}h1 .hero-name .space{width:.16em}.hero-role{overflow:hidden;animation:role-enter 1s cubic-bezier(.16,1,.3,1) 1.8s both}@keyframes name-enter{to{transform:translateY(0) rotate(0)}}@keyframes role-enter{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.motion-ready .reveal{opacity:0;transform:translateY(65px);transition:opacity .85s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--delay,0ms)}.motion-ready .reveal.is-visible{opacity:1;transform:none}.image img{transform:scale(1.05);will-change:transform}.project:hover .image img{transform:scale(1.11)}.image{clip-path:inset(0);transition:clip-path .6s cubic-bezier(.16,1,.3,1)}.project:hover .image{clip-path:inset(6px round 3px)}.caption h3{transition:transform .35s}.project:hover .caption h3{transform:translateX(8px)}.marquee{transform:rotate(-1.3deg);margin:20px -1% 5px;width:102%}.marquee div{animation-duration:18s}.monogram{overflow:hidden}.monogram:after{content:'+';position:absolute;top:15px;right:23px;font:40px Arial;letter-spacing:0;animation:cross-turn 12s linear infinite}@keyframes cross-turn{to{transform:rotate(360deg)}}.talk{overflow:hidden}.talk:hover{color:#24241f}.contact-links a{transition:transform .3s}.contact-links a:hover{transform:translateY(-5px)}.cursor-label{position:fixed;top:0;left:0;z-index:30;pointer-events:none;width:90px;height:90px;border-radius:50%;background:var(--accent);color:var(--paper);display:grid;place-items:center;font-size:10px;letter-spacing:.06em;opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .2s,scale .3s;mix-blend-mode:normal}.cursor-label.active{opacity:1;scale:1}.project:hover{cursor:none}.project .circle{transition:opacity .3s,transform .3s}.project:hover .circle{opacity:0}dialog[open]{animation:dialog-in .5s cubic-bezier(.16,1,.3,1)}dialog[open]::backdrop{animation:backdrop-in .4s}@keyframes dialog-in{from{opacity:0;transform:translateY(50px) scale(.96)}to{opacity:1;transform:none}}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}.menu{transition:transform .3s}.menu:hover{transform:rotate(-5deg)}
@media(pointer:coarse){.cursor-label{display:none}.project:hover{cursor:pointer}.project:hover .circle{opacity:1}}@media(max-width:800px){.intro-screen{padding:25px 5%}.intro-word{font-size:23vw}.intro-word span{white-space:nowrap}.intro-meta{font-size:8px}.motion-ready .reveal{transform:translateY(35px)}nav.open{flex-direction:column;gap:25px;padding:35px 5%;font:38px Display;animation:dialog-in .35s ease}.cursor-label{display:none}.project:hover{cursor:pointer}.project:hover .circle{opacity:1}}
@media(prefers-reduced-motion:reduce){.intro-screen{display:none}.hero-name .letter{transform:none}.motion-ready .reveal{opacity:1;transform:none}.hero-role{opacity:1;transform:none}.cursor-label{display:none}.project:hover{cursor:pointer}.project:hover .circle{opacity:1}}
.cursor-label.active{transform:translate(-50%,-50%) scale(1)}

/* Montelo brand yellow, with readable foregrounds. */
.hero{background:var(--ink);color:var(--paper)}h1 span{color:var(--paper)}.hero-bottom{border-color:#ffffff55}.intro-screen,.marquee,.monogram,.contact,.cursor-label,dialog .case-link{color:var(--ink)}.intro-line{background:#22221f44}.intro-line:after{background:var(--ink)}.intro-skip{border-color:#22221f66}.contact footer{border-color:#22221f55}.talk:hover{color:#5b5000}.expertise em{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:5px;text-underline-offset:8px}.section-label sup,summary>span,.case-kicker{color:#756300}nav a:hover,.underlined:hover{color:#756300}::selection{background:var(--accent);color:var(--ink)}
/* Fit the full name to the hero, with room for font ascenders and descenders. */
.hero{container-type:inline-size}h1{font-size:13.8cqw;line-height:1.12;letter-spacing:-.025em;max-width:100%;white-space:nowrap}h1 .hero-name{font-size:inherit;line-height:1.12;overflow:hidden;padding:.06em .025em .12em;margin:-.06em -.025em -.12em;max-width:calc(100% + .05em)}h1 .hero-name .letter{flex:0 0 auto;line-height:inherit}h1 .hero-name .space{width:.18em}h1>span:not(.hero-name){font-size:8.5cqw;line-height:1.15;letter-spacing:-.02em;padding-bottom:.1em}.hero-role{overflow:visible}

.medical-image{height:auto;aspect-ratio:1.5;background:#d3d3d3}.medical-image img{object-fit:contain;transform:none}.project:hover .medical-image img{transform:scale(1.025)}.portrait{margin:0;position:relative;overflow:hidden;align-self:start;background:#d5d0c4}.portrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}.portrait figcaption{position:absolute;bottom:20px;left:20px;right:20px;width:fit-content;padding:10px 12px;background:var(--accent);color:var(--ink);font-size:10px;letter-spacing:.05em}@media(max-width:800px){.medical-image{height:auto;aspect-ratio:1.5}.portrait{width:100%;max-width:480px}.portrait img{aspect-ratio:3/4}}
/* Preserve complete project artwork and keep the portrait secondary to the bio. */
.project .image,.project.small .image,.project .medical-image{height:auto;aspect-ratio:auto;overflow:visible;clip-path:none;background:transparent}.project .image img,.project.small .image img,.project .medical-image img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;transform:none;will-change:auto}.project:hover .image,.project:hover .medical-image{clip-path:none}.project:hover .image img,.project:hover .medical-image img{transform:none}.project .image{transition:filter .3s}.project:hover .image{filter:brightness(.96)}.portrait{width:min(100%,310px);max-width:310px;justify-self:center;align-self:start}.portrait img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}.portrait figcaption{left:12px;right:12px;bottom:12px;font-size:8px;padding:9px}.about-grid{grid-template-columns:.8fr 1.2fr;align-items:start}
/* Intro copy fits the available width and height, including short screens. */
.intro-screen{container-type:inline-size;padding:25px 3%;gap:15px}.intro-word{font-size:min(14cqw,19dvh);line-height:1.12;letter-spacing:-.02em;overflow:visible;padding:.12em .04em;flex-shrink:1}.intro-word span{white-space:nowrap;overflow:visible}.intro-meta{flex-wrap:wrap;gap:8px 20px}.intro-screen>div:last-child{flex-shrink:0}.intro-skip{bottom:65px}
@media(max-width:800px){.portrait{width:min(72%,270px);max-width:270px;justify-self:start}.about-grid{grid-template-columns:1fr;gap:20px}.project .image,.project.small .image,.project .medical-image{height:auto;aspect-ratio:auto}.intro-screen{padding:22px 5%}.intro-word{font-size:min(14cqw,19dvh);line-height:1.12;padding:.12em .04em}.intro-skip{right:5%;bottom:68px}}
@media(max-height:450px){.intro-screen{padding-top:14px;padding-bottom:14px;gap:5px}.intro-word{padding:0;font-size:min(14cqw,16dvh)}.intro-skip{bottom:45px}.intro-line{margin-top:8px}}
