/* Warm paper and forest: neutral reading surfaces with a restrained green accent. */
:root{--ink:#242824;--muted:#5f665f;--paper:#f6f3ec;--surface:#e4ebe5;--card:#ffffff;--accent:#245c4f;--line:#cdd6ce;--max:1160px;--radius:14px;--ease:cubic-bezier(.22,.68,.25,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 "DM Sans",Arial,sans-serif}img{display:block;max-width:100%;height:auto}a{color:inherit}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}::selection{background:#dce5d8;color:var(--ink)}
.skip{position:fixed;z-index:30;left:1rem;top:-5rem;background:var(--ink);color:white;padding:.65rem 1rem}.skip:focus{top:1rem}
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:78px;padding:0 max(24px,calc((100% - var(--max))/2));background:#f8f6f0f2;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.brand{font-weight:700;font-size:1.2rem;text-decoration:none;letter-spacing:-.04em}.brand:after{content:".";color:var(--accent)}.site-header nav{display:flex;gap:clamp(.75rem,2.5vw,2rem)}.site-header nav a{position:relative;display:flex;align-items:center;min-height:48px;color:var(--muted);font-size:.86rem;font-weight:600;text-decoration:none;transition:color .2s}.site-header nav a:after{content:"";position:absolute;bottom:7px;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--accent)}.site-header nav a:hover:after,.site-header nav a[aria-current]:after{transform:scaleX(1)}
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);align-items:center;gap:clamp(3rem,7vw,6rem);width:min(var(--max),calc(100% - 48px));margin:auto;padding:clamp(64px,7vw,100px) 0 80px}.hero-copy{grid-column:1;grid-row:1}.hero-photo{grid-column:2;grid-row:1;position:relative;isolation:isolate;margin:0 12px 12px 0}.hero-photo:before{content:"";position:absolute;inset:20px -12px -12px 20px;background:#102f40;border-radius:110px 18px 18px 18px;z-index:-1}.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:110px 18px 18px 18px}.portrait-caption{position:absolute;bottom:18px;left:18px;right:18px;padding:.7rem 1rem;background:#fffdf8ed;border:1px solid #ffffff80;border-radius:8px;color:var(--ink);font-size:.78rem;font-weight:600;backdrop-filter:blur(10px)}
.kicker,.project-type,.label{color:var(--accent);font-size:.73rem;font-weight:700;letter-spacing:.095em;line-height:1.65;text-transform:uppercase}.kicker{margin:0 0 1.3rem;max-width:540px}h1,h2{margin:0;font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}h1{font-size:clamp(2.8rem,4.35vw,4.1rem);max-width:650px}h1 em{font-style:normal;color:var(--accent)}h2{font-size:clamp(2.1rem,3.4vw,3rem);max-width:780px}h3{margin:0;font-size:1.18rem;line-height:1.4;text-wrap:balance}.intro{max-width:610px;margin:1.5rem 0 0;color:var(--muted);font-size:1.06rem;line-height:1.8}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:48px;padding:.7rem 1.2rem;border:1px solid var(--line);border-radius:7px;font-size:.88rem;font-weight:700;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}.button.primary{background:var(--ink);border-color:var(--ink);color:white}.button.primary:after{content:"↗";font-size:1.2rem}.button:hover{background:var(--surface);border-color:var(--ink);transform:translateY(-2px)}.button.primary:hover{background:#102f40;color:white}.facts{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;margin:2rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);list-style:none;color:var(--muted);font-size:.82rem}.facts strong{display:block;margin-bottom:.2rem;color:var(--ink);font-size:.67rem;letter-spacing:.07em;text-transform:uppercase}
.section{display:grid;grid-template-columns:135px minmax(0,1fr);gap:clamp(2rem,4vw,4rem);width:min(var(--max),calc(100% - 48px));margin:auto;padding:clamp(64px,7vw,96px) 0;border-top:1px solid var(--line)}.label{padding-top:.5rem}.label:before{content:"";display:block;width:26px;height:2px;background:var(--accent);margin-bottom:1rem}.content{min-width:0}.split{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem}.split h2{font-size:clamp(2rem,3vw,2.8rem)}.lead{max-width:660px;margin:1.1rem 0 0;color:var(--muted);font-size:1.06rem}.body-copy{color:var(--muted)}.body-copy p:first-child{margin-top:0}.body-copy p:last-child{margin-bottom:0}
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:2.5rem}.project{display:flex;flex-direction:column;min-width:0;padding:1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .25s,box-shadow .25s}.project h3,.project>p{margin-left:.5rem;margin-right:.5rem}.project h3{font-family:"DM Serif Display",Georgia,serif;font-size:1.85rem;font-weight:400;line-height:1.2}.project-type{margin-top:0;margin-bottom:.7rem;font-size:.65rem;letter-spacing:.065em}.project p:not(.project-type):not(.tools){margin-top:.9rem;margin-bottom:1.2rem;color:var(--muted);font-size:.94rem}.project .tools{margin-top:auto;margin-bottom:.5rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.73rem;font-weight:500;color:var(--muted)}.project-media{width:100%;aspect-ratio:16/11;margin-bottom:1.35rem;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:8px}.project-media>img{width:100%;height:100%;object-fit:contain}.game-gallery,.animation-gallery{display:grid;grid-template-columns:1fr 1fr;gap:4px}.game-gallery img,.animation-gallery img{width:100%;height:100%;min-height:0;object-fit:contain}.worksheet-gallery,.phonigame-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;padding:.5rem}.worksheet-gallery a{overflow:hidden}.worksheet-gallery img,.phonigame-gallery img{width:100%;height:100%;object-fit:contain}.note{margin-top:1.5rem;color:var(--muted);font-size:.8rem}
.timeline{margin-top:2.5rem}.role{display:grid;grid-template-columns:140px minmax(0,1fr);gap:2rem;padding:2rem 0;border-top:1px solid var(--line)}.role:last-child{padding-bottom:0}.date{color:var(--muted);font-size:.8rem;font-weight:500}.company{margin:.5rem 0 1rem;color:var(--accent);font-size:.88rem}.role ul{margin:0;padding-left:1.15rem;color:var(--muted);font-size:.94rem}.role li+li{margin-top:.6rem}.role li::marker{color:var(--accent)}
.credentials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2.5rem}.credentials article{padding:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.credentials article:first-child{grid-column:1/-1}.credentials span{color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.035em;text-transform:uppercase}.credentials h3{margin-top:.55rem}.credentials p{margin:.5rem 0 0;color:var(--muted);font-size:.94rem;max-width:690px}.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 2rem;margin-top:2.5rem}.skills>div{padding-top:1rem;border-top:1px solid var(--line)}.skills h3{font-size:1rem}.skills p{color:var(--muted);font-size:.9rem;margin-bottom:0}
.contact{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:3rem;width:min(var(--max),calc(100% - 48px));margin:0 auto 30px;padding:clamp(2rem,5vw,4rem);background:var(--ink);color:var(--paper);border-radius:18px}.contact h2{font-size:clamp(3rem,5vw,4.5rem)}.contact .kicker{color:#9dd1f1}.contact p:not(.kicker){max-width:560px;color:#c8e0f4;font-size:.97rem}.contact-links{display:grid;gap:1rem;justify-items:start;min-width:0}.contact-links a{max-width:100%;overflow-wrap:anywhere;font-size:clamp(.95rem,1.6vw,1.15rem);font-weight:500;text-decoration-color:#9dd1f1;text-underline-offset:6px;min-height:44px;display:flex;align-items:center}.contact-links a:hover{color:#9dd1f1}footer{display:flex;justify-content:space-between;gap:1rem;width:min(var(--max),calc(100% - 48px));margin:auto;padding:1rem 0 2.5rem;color:var(--muted);font-size:.8rem}footer a{text-underline-offset:4px}
/* Galleries advance automatically, with pause and reduced-motion controls. */
.carousel.project-media,.carousel.experience-gallery{display:block;aspect-ratio:auto;padding:0;gap:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:8px}.gallery-frame{overflow:hidden;aspect-ratio:16/11;touch-action:pan-y}.gallery-track{display:flex;width:100%;height:100%;transition:transform .45s var(--ease)}.carousel .gallery-slide{flex:0 0 100%;width:100%;min-width:0;height:100%;margin:0;overflow:hidden}.carousel img.gallery-slide,.carousel .gallery-slide img{width:100%;height:100%;object-fit:contain;object-position:center;background:var(--surface)}.gallery-controls{display:flex;align-items:center;gap:.4rem;padding:.45rem;background:var(--card);border-top:1px solid var(--line)}.gallery-controls button{min-width:44px;min-height:44px;padding:0 .65rem;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink);font:600 .8rem "DM Sans",Arial,sans-serif;cursor:pointer;transition:background .2s}.gallery-controls button:last-child{margin-left:auto}.gallery-controls span{font-size:.75rem;color:var(--muted);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}.gallery-controls button:hover{background:var(--surface)}.experience-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}.experience-gallery figure{margin:0}.experience-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.carousel.experience-gallery{max-width:760px;margin-top:2rem}.experience-gallery .gallery-slide{display:flex;flex-direction:column}.experience-gallery .gallery-slide img{height:calc(100% - 44px);min-height:0;object-fit:contain}.experience-gallery figcaption{color:var(--muted);font-size:.8rem}.experience-gallery .gallery-slide figcaption{height:44px;padding:.55rem 1rem;background:var(--card)}
/* Visible by default: animation never gates access to page content. */
@keyframes arrive{from{opacity:.4;transform:translateY(16px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:no-preference){.hero-copy{animation:arrive .75s var(--ease) both}.hero-photo{animation:arrive .85s .1s var(--ease) both}.arriving{animation:arrive .6s var(--ease) both}}
@media(hover:hover){.project:hover{border-color:#9dd1f1;box-shadow:0 8px 28px #203b3b0a}}
@media(max-width:1000px){.hero{gap:2.5rem;grid-template-columns:1.25fr 1fr}.section{grid-template-columns:1fr;gap:1.5rem}.label:before{display:inline-block;vertical-align:middle;margin:0 .7rem .2rem 0}.role{grid-template-columns:145px minmax(0,1fr)}}
@media(max-width:700px){html{scroll-padding-top:120px}.site-header{padding:12px 20px;min-height:76px;gap:1rem;flex-wrap:wrap}.site-header nav{gap:1.15rem}.site-header nav a{font-size:.78rem;min-height:40px}.hero{grid-template-columns:1fr;gap:2.25rem;padding:44px 0 56px}.hero-copy{grid-column:1;grid-row:1}.hero-photo{grid-column:1;grid-row:2;width:min(100% - 12px,360px);justify-self:center}.hero-photo img{aspect-ratio:5/4;border-radius:64px 14px 14px 14px;object-position:50% 33%}.hero-photo:before{border-radius:64px 14px 14px 14px}h1{font-size:clamp(2.65rem,7.8vw,3.7rem)}.intro{font-size:1rem}.kicker{font-size:.67rem}.split{grid-template-columns:1fr;gap:1.6rem}.section{padding:56px 0}.projects{gap:1.25rem;grid-template-columns:1fr}.project h3{font-size:1.8rem}.role{grid-template-columns:1fr;gap:.6rem}.contact{grid-template-columns:1fr;gap:1.4rem}.skills{gap:1.5rem}.credentials{grid-template-columns:1fr}.credentials article:first-child{grid-column:auto}}
@media(max-width:440px){body{font-size:16px}.site-header{gap:0;justify-content:center}.brand{width:100%;text-align:center;font-size:1.05rem}.site-header nav{width:100%;justify-content:space-between;gap:.5rem}.hero,.section,footer{width:calc(100% - 40px)}.hero{padding-top:32px}.facts{gap:1rem;font-size:.79rem}.contact{width:calc(100% - 32px);padding:1.6rem}.skills{grid-template-columns:1fr}.project{padding:.8rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{.site-header,.gallery-controls,.skip{display:none}body{background:white;color:black}.hero,.section,.contact{width:100%;padding:24px 0}.contact{background:white;color:black}.contact p:not(.kicker),.contact .kicker{color:var(--ink)}.project,.credentials article{break-inside:avoid}*{animation:none!important}}
/* A shared media height keeps titles aligned across mixed stills and galleries. */
.carousel.project-media{display:flex;flex-direction:column;aspect-ratio:16/11}
.carousel.project-media .gallery-frame{flex:1;min-height:0;aspect-ratio:auto}
.carousel.project-media .gallery-controls{flex:none}

/* Compact personal wordmark and navigation in reading order. */
.site-header{min-height:88px;box-shadow:0 3px 18px #203b3b04}
.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;min-height:48px;letter-spacing:normal}
.brand:after{content:none}
.brand-mark{display:flex;align-items:baseline;justify-content:center;width:46px;height:46px;background:var(--ink);color:var(--paper);border-radius:12px 12px 4px 12px;font:400 34px/46px "DM Serif Display",Georgia,serif;letter-spacing:-3px;padding-right:3px}
.brand-mark>span{color:#9dd1f1}
.brand-lockup{display:flex;flex-direction:column;gap:3px;text-align:left}
.brand-name{font-size:1.2rem;line-height:1.15;letter-spacing:-.045em;font-weight:700}
.brand-name>span{color:var(--accent)}
.brand-caption{color:var(--muted);font-size:.64rem;line-height:1.4;font-weight:500;letter-spacing:.025em}
.site-header nav{gap:clamp(1rem,2.3vw,2rem)}
.site-header nav a{min-height:48px}
@media(max-width:700px){
 .site-header{padding:12px 20px 5px;gap:8px;justify-content:flex-start}
 .brand{width:auto;text-align:left;gap:10px}
 .brand-mark{width:38px;height:38px;font-size:29px;line-height:38px;border-radius:10px 10px 3px 10px}
 .brand-name{font-size:1.1rem}
 .brand-caption{font-size:.6rem}
 .site-header nav{width:100%;justify-content:space-between;gap:.4rem}
 .site-header nav a{font-size:.76rem;min-height:44px}
 html{scroll-padding-top:134px}
}
@media(max-width:360px){.site-header nav a{font-size:.7rem}.site-header{padding-inline:16px}}

/* Light surfaces also cover controls, captions and branding. */
:root{color-scheme:light}
.site-header{background:#f6f3ecf5;border-bottom-color:var(--line);box-shadow:0 4px 24px #24282408}
.brand-mark{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.brand-mark>span{color:var(--accent)}
.hero-photo:before{background:var(--surface)}
.portrait-caption{background:#fffffff2;border-color:var(--line);color:var(--ink)}
.skip{background:var(--accent);color:#ffffff}
.button.primary{background:var(--accent);border-color:var(--accent);color:#ffffff}
.button.primary:hover{background:#194638;border-color:#194638;color:#ffffff}
.contact{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.contact p:not(.kicker){color:var(--muted)}
.contact .kicker,.contact-links a:hover{color:var(--accent)}
.contact-links a{text-decoration-color:var(--accent)}
::selection{background:var(--accent);color:#fff}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.scroll-progress span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
@media(hover:hover){.project:hover{border-color:var(--accent);box-shadow:0 10px 32px #2428240d}.brand:hover .brand-mark{border-color:var(--accent)}}
@media(prefers-reduced-motion:no-preference){.hero-photo img{translate:0 var(--portrait-offset,0px)}.hero-photo{overflow:clip;border-radius:110px 18px 18px 18px}.section .label:before{transition:width .8s var(--ease)}.section.in-view .label:before{width:44px}.project{transition:border-color .3s,box-shadow .3s}.brand-mark{transition:border-color .3s}}
@media(max-width:700px){.hero-photo{border-radius:64px 14px 14px 14px}}
@media(prefers-reduced-motion:reduce){.hero-photo img{translate:none}}
@media print{:root{color-scheme:light;--paper:#fff;--ink:#111;--muted:#444;--surface:#f2f2f2;--card:#fff;--accent:#633b2d;--line:#ccc}.contact{background:white;color:black}.scroll-progress{display:none}}
/* Video and photographs share one card, frame and navigation row. */
.teaching-media{margin-top:2rem;max-width:760px}
.teaching-media .experience-gallery{width:100%;min-width:0;margin:0}
.teaching-gallery:not(.carousel){grid-template-columns:repeat(2,minmax(0,1fr))}
.teaching-gallery:not(.carousel) .teaching-video{grid-column:1/-1}
.teaching-video-frame{display:flex;justify-content:center;min-height:0;overflow:hidden;background:var(--surface)}
.teaching-video video{display:block;max-width:100%;width:auto;height:100%;aspect-ratio:9/16;object-fit:cover;object-position:center;background:#111}
.teaching-gallery:not(.carousel) .teaching-video-frame{height:440px;max-height:70vh}
.teaching-gallery .gallery-slide>img,.teaching-gallery .gallery-slide>.teaching-video-frame{height:calc(100% - 76px);flex:1;min-height:0}
.teaching-gallery .gallery-slide figcaption{display:flex;flex-direction:column;justify-content:center;flex:none;height:76px;padding:.6rem 1rem;line-height:1.5}
.teaching-video figcaption strong{color:var(--ink)}
.teaching-video figcaption span{font-size:.75rem}
.teaching-gallery .gallery-controls .gallery-kind{margin-left:auto;padding:0 .65rem;color:var(--accent);font-weight:600}
@media(max-width:600px){.teaching-gallery .gallery-frame{aspect-ratio:4/5}}
@media print{.teaching-gallery .gallery-frame{aspect-ratio:auto;overflow:visible}.teaching-gallery .gallery-track{display:grid;grid-template-columns:1fr 1fr;gap:1rem;transform:none!important}.teaching-gallery .gallery-slide{height:auto;break-inside:avoid}.teaching-gallery .gallery-slide>img{height:200px}.teaching-gallery .teaching-video-frame{height:240px!important}}


.contact .work-eligibility{padding:.9rem 0;border-bottom:1px solid var(--line);color:var(--ink)}

/* Forest marks actions; sage supports imagery and the personal monogram. */
.brand-mark{background:var(--surface);color:var(--ink);border-color:var(--line)}
.brand-mark>span{color:var(--accent)}
.hero-photo:before{background:var(--surface)}
.button.primary{background:var(--accent);border-color:var(--accent);color:#ffffff}
.button.primary:hover{background:#194638;border-color:#194638;color:#ffffff}
.scroll-progress span{background:var(--accent)}
.section .label:before{background:var(--accent)}
.site-header nav a:after{background:var(--accent)}
::selection{background:var(--accent);color:var(--paper)}
/* Case-study narratives are expandable, keeping the project grid compact. */
.case-link{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:44px;margin:0 .5rem 1rem;color:var(--ink);font-size:.83rem;font-weight:600;text-underline-offset:5px}
.case-link:hover{color:var(--accent)}
.case-studies{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.case-studies>h3{font:400 clamp(1.8rem,3vw,2.35rem)/1.2 "DM Serif Display",Georgia,serif}
.case-intro{color:var(--muted);margin:.9rem 0 1.5rem}
.case-study{border-top:1px solid var(--line);scroll-margin-top:1rem}
.case-study:last-child{border-bottom:1px solid var(--line)}
.case-study summary{display:flex;gap:1.2rem;align-items:center;padding:1.4rem 0;cursor:pointer;list-style:none}
.case-study summary::-webkit-details-marker{display:none}
.case-study summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.case-number{color:var(--accent);font-size:.75rem;font-variant-numeric:tabular-nums;align-self:flex-start;margin-top:.3rem}
.case-summary{flex:1;min-width:0;display:grid;gap:.35rem}
.case-summary strong{font-size:1.05rem;line-height:1.5}
.case-summary>span{color:var(--muted);font-size:.88rem}
.case-toggle{width:28px;flex:none;text-align:center;color:var(--accent);font-size:1.4rem}
.case-toggle:before{content:"+"}.case-study[open] .case-toggle:before{content:"−"}
.case-body{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2rem;padding:0 0 2rem 2.3rem}
.case-body h4{margin:0 0 .5rem;color:var(--ink);font-size:.85rem}
.case-body p{margin:0;color:var(--muted);font-size:.94rem}
@media(max-width:700px){.case-body{grid-template-columns:1fr;padding-left:0;gap:1.4rem}.case-study summary{gap:.7rem}.case-summary>span{font-size:.83rem}}
@media print{.case-body{display:grid}}

/* Keep anchor destinations clear of the measured sticky header. */
html{scroll-padding-top:var(--header-offset,134px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
.teaching-video video:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(hover:none){.button:hover{transform:none}}
@media(max-width:440px){.experience-gallery .gallery-slide figcaption{font-size:.75rem;padding-inline:.65rem}}


/* A compact opening keeps the portrait and the headline together on phones. */
.hero{grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);grid-template-areas:"kicker photo" "heading photo" "details photo";gap:1rem clamp(3rem,6vw,5.5rem);padding:64px 0 72px;align-items:start}
.hero-kicker{grid-area:kicker;margin:0;align-self:end}
.hero-heading{grid-area:heading;min-width:0}
.hero-details{grid-area:details;min-width:0}
.hero-details .intro{margin:0;max-width:610px}
.hero-photo{grid-area:photo;width:min(100% - 12px,380px);margin:0 12px 0 0;justify-self:end;align-self:center;overflow:visible;border-radius:0}
.hero-photo:before{inset:12px -12px 38px 12px;border-radius:72px 14px 14px 14px}
.hero-photo img{aspect-ratio:4/5;border-radius:72px 14px 14px 14px;translate:none;object-position:50% 30%}
.portrait-caption{position:static;display:block;padding:.85rem 0 0;background:none;border:0;border-radius:0;backdrop-filter:none;font-size:.76rem;font-weight:500;color:var(--muted)}
.hero-details .actions{margin-top:1.5rem}
.hero-details .facts{margin-top:1.5rem;padding-top:1.1rem;gap:.8rem 2rem}

/* Work gets the full page measure; supporting sections keep the editorial rail. */
#work{grid-template-columns:minmax(0,1fr);gap:1.3rem}
#work>.label{padding:0}
#work>.label:before{display:inline-block;vertical-align:middle;margin:0 .75rem .2rem 0;width:32px}
#work h2{max-width:820px}
#work .lead{max-width:800px}
.section{padding-top:72px;padding-bottom:72px}
.credentials{gap:1.2rem}
.credentials article{background:transparent;border-radius:0;border:0;border-top:1px solid var(--line);padding:1.25rem 0 .25rem}
.credentials article:first-child{padding:1.6rem 1.75rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.timeline{margin-top:2rem}
.role{padding:1.75rem 0}
.date{font-size:.82rem}

/* A quiet sage panel changes the rhythm before the final skills and contact. */
#teaching{position:relative;isolation:isolate;border-top:0;margin-top:24px;margin-bottom:24px;padding:64px 0}
#teaching:before{content:"";position:absolute;z-index:-1;inset:0 -24px;background:var(--surface);border-radius:20px}
#teaching .content{min-width:0}
.teaching-media{max-width:none}
.teaching-media .teaching-gallery{max-width:100%;background:var(--paper);border-color:#c3cfc5;border-radius:12px}
.teaching-gallery .gallery-frame{aspect-ratio:16/10}
.teaching-gallery .gallery-slide>img,.teaching-video-frame{background:var(--paper)}
.teaching-gallery .gallery-slide figcaption{height:64px;padding:.7rem 1.1rem;font-size:.86rem}
.teaching-gallery .gallery-slide>img,.teaching-gallery .gallery-slide>.teaching-video-frame{height:calc(100% - 64px)}
.teaching-gallery .gallery-controls{padding:.35rem .7rem}
.teaching-gallery .gallery-controls span{font-size:.8rem}
.teaching-video figcaption span{font-size:.78rem}

/* A stronger closing panel retains the existing palette and contact details. */
.contact{background:var(--accent);border-color:var(--accent);color:var(--paper);gap:2.5rem;padding:clamp(2rem,5vw,3.5rem)}
.contact p:not(.kicker){color:#e0e9e2}
.contact .kicker{color:#cfdfd3}
.contact .work-eligibility{color:var(--paper);border-bottom-color:#ffffff30}
.contact-links a{color:var(--paper);text-decoration-color:#cfdfd3;text-underline-offset:6px}
.contact-links a:hover{color:#fff;text-decoration-color:#fff}
.contact-links a:first-child{padding:.75rem 1.1rem;border-radius:7px;background:var(--paper);color:var(--accent);font-size:1rem;font-weight:600;text-decoration:none}
.contact-links a:first-child:hover{background:#fff;color:#194638}
.contact a:focus-visible{outline-color:var(--paper);outline-offset:6px}

@media(max-width:1000px){
  .hero{grid-template-columns:minmax(0,1.25fr) minmax(240px,1fr);column-gap:2.5rem;padding-top:48px}
  .section{padding-top:60px;padding-bottom:60px}
  #teaching{padding:48px 0}
  #teaching:before{inset:0 -16px}
}
@media(max-width:700px){
  .hero{grid-template-columns:minmax(0,1fr) clamp(76px,24vw,148px);grid-template-areas:"kicker kicker" "heading photo" "details details";gap:1.1rem 1rem;padding:30px 0 44px;align-items:start}
  .hero-kicker{font-size:.68rem;line-height:1.6;max-width:none}
  .hero-heading h1{font-size:clamp(1.9rem,6vw,2.65rem);line-height:1.12;text-wrap:pretty}
  .hero-photo{width:100%;margin:0;align-self:start;justify-self:end;padding-top:2px}
  .hero-photo:before{inset:8px -6px -6px 8px;border-radius:28px 7px 7px 7px}
  .hero-photo img{aspect-ratio:3/4;border-radius:28px 7px 7px 7px;object-position:center}
  .portrait-caption{display:none}
  .hero-details .intro{font-size:.96rem;line-height:1.75}
  .hero-details .actions{margin-top:1.2rem;gap:.7rem}
  .hero-details .button{min-height:46px;padding:.7rem 1rem;font-size:.83rem}
  .hero-details .facts{gap:.75rem 1rem;margin-top:1.25rem;padding-top:1rem;font-size:.78rem;line-height:1.6}
  .facts strong{font-size:.64rem;letter-spacing:.055em}
  .section{padding-top:48px;padding-bottom:48px}
  #work{gap:1.1rem}
  #work h2{font-size:2rem;line-height:1.15}
  .credentials article:first-child{padding:1.2rem}
  .credentials{margin-top:1.6rem;gap:1.2rem}
  .role{padding:1.4rem 0}
  #teaching{margin-top:12px;margin-bottom:12px;padding:40px 0}
  #teaching h2{font-size:2rem}
  #teaching:before{inset:0 -12px;border-radius:14px}
  .teaching-media{margin-top:1.5rem}
  .teaching-gallery .gallery-frame{aspect-ratio:4/5}
  .teaching-gallery .gallery-slide figcaption{height:76px;padding:.65rem .85rem;font-size:.82rem}
  .teaching-gallery .gallery-slide>img,.teaching-gallery .gallery-slide>.teaching-video-frame{height:calc(100% - 76px)}
  .teaching-video figcaption span{font-size:.74rem}
  .contact{padding:1.75rem;gap:1.5rem}
  .contact h2{font-size:3.2rem}
  .contact-links{gap:.65rem}
  .contact-links a:first-child{font-size:.88rem;padding:.7rem .85rem}
}
@media print{
  .hero-photo:before,#teaching:before{display:none}
  .contact{background:#fff;border-color:var(--line);color:#111}
  .contact p:not(.kicker),.contact .kicker,.contact .work-eligibility,.contact-links a{color:#111}
  .contact-links a:first-child{padding:0;background:none}
}

/* One featured project establishes hierarchy; every case-study link is a solid button. */
#work .project-showcase{grid-auto-rows:auto;gap:1.5rem;margin-top:2.25rem}
#work .project{padding:0;overflow:hidden;border-radius:14px;background:var(--card)}
#work .project-content{display:flex;flex-direction:column;flex:1;min-width:0;padding:1.5rem}
#work .project-content>p,#work .project-content>h3{margin-left:0;margin-right:0}
#work .project-type{min-height:0;margin:0 0 .7rem;font-size:.72rem;line-height:1.6;letter-spacing:.065em}
#work .project h3{min-height:0;margin:0 0 .85rem;font-size:1.9rem;line-height:1.18;text-wrap:pretty}
#work .project p:not(.project-type):not(.tools):not(.featured-label):not(.project-client){margin:0 0 1.2rem;font-size:.95rem;line-height:1.75;color:var(--muted)}
#work .project .tools{min-height:0;margin: auto 0 0;padding-top:1rem;font-size:.77rem;line-height:1.7;color:var(--muted)}
#work .case-link{margin:0 0 1rem;color:var(--accent);font-size:.85rem;min-height:44px}
#work .project a:focus-visible,#work .project button:focus-visible{outline-offset:-3px}

/* Landscape screens use their natural proportions; portrait previews get more height. */
#work .project-media{flex:none;aspect-ratio:16/9;margin:0;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#f2f3ee}
#work .project-media>img{object-fit:contain;background:#f2f3ee}
#work .carousel.project-media{display:block;aspect-ratio:auto}
#work .carousel.project-media .gallery-frame{flex:none;aspect-ratio:16/9;min-height:0}
#work .carousel .gallery-slide,#work .carousel .gallery-slide img{background:#f2f3ee}
#work .gallery-controls{padding:.25rem .5rem}
#work .gallery-controls span{font-size:.8rem}
#work .project--portrait .project-media:not(.carousel),#work .project--portrait .gallery-frame{aspect-ratio:4/3}
#work .project--portrait .carousel.project-media .gallery-frame{aspect-ratio:4/3}
#work .project--portrait .project-media img{padding:1rem;object-fit:contain}

#work .project--featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;padding:1.5rem;background:var(--surface);border-color:#c3cfc5}
#work .project--featured .project-media{border:1px solid #c3cfc5;border-radius:9px}
#work .project--featured .project-content{padding:1.15rem .75rem 1.15rem 2.25rem}
#work .featured-label{margin:0 0 1.1rem;font-size:.68rem;line-height:1.5;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
#work .featured-label:before{content:"";display:inline-block;width:26px;height:2px;background:currentColor;vertical-align:middle;margin-right:.6rem}
#work .project--featured h3{font-size:clamp(2rem,3vw,2.65rem);line-height:1.1;max-width:450px}
#work .project--featured .tools{border-top-color:#bdcdbf;font-size:.76rem}
#work .project .case-link{padding:.6rem .85rem;border-radius:6px;background:var(--accent);color:#fff;text-decoration:none;margin-bottom:1.2rem;align-self:flex-start;gap:1.75rem}
#work .project .case-link:hover{background:#194638}
#work .project .case-link:focus-visible{outline-color:var(--accent);outline-offset:4px}

#work .project--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);align-items:center}
#work .project--wide .project-media{border-bottom:0;border-right:1px solid var(--line)}
#work .project--wide .carousel.project-media .gallery-frame{aspect-ratio:4/3}
#work .project--wide .project-content{padding:2rem 2.5rem}
#work .project--wide .tools{margin-top:0}
#work .case-studies{margin-top:2.5rem;padding-top:2rem}

@media(max-width:1000px){
  #work .project--featured{padding:1.2rem;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  #work .project--featured .project-content{padding:1rem 0 1rem 1.5rem}
  #work .project--featured h3{font-size:2rem}
  #work .project-content{padding:1.25rem}
  #work .project h3{font-size:1.75rem}
}
@media(max-width:800px){
  #work .project--featured{grid-template-columns:minmax(0,1fr);padding:1.2rem}
  #work .project--featured .project-content{padding:1.5rem .25rem .25rem}
  #work .project--featured h3{max-width:600px;font-size:2.2rem}
  #work .project--wide{grid-template-columns:minmax(200px,.85fr) minmax(0,1.15fr)}
  #work .project--wide .project-content{padding:1.5rem}
}
@media(max-width:700px){
  #work .project-showcase{gap:1.25rem;margin-top:1.75rem;grid-auto-rows:auto}
  #work .project-content{padding:1.25rem}
  #work .project h3{font-size:1.8rem;margin-bottom:.8rem}
  #work .project-type{font-size:.7rem;margin-bottom:.65rem}
  #work .project p:not(.project-type):not(.tools):not(.featured-label):not(.project-client){font-size:.94rem;line-height:1.7;margin-bottom:1.1rem}
  #work .project .tools{font-size:.75rem;margin-top:0}
  #work .project--featured{padding:1rem}
  #work .project--featured .project-content{padding:1.25rem .15rem .25rem}
  #work .project--featured h3{font-size:2rem}
  #work .featured-label{margin-bottom:.9rem}
  #work .project--portrait .project-media:not(.carousel),#work .project--portrait .carousel.project-media .gallery-frame{aspect-ratio:1/1}
  #work .project--wide{display:flex}
  #work .project--wide .project-media{border-right:0;border-bottom:1px solid var(--line)}
  #work .project--wide .project-content{padding:1.25rem}
  #work .project--wide .carousel.project-media .gallery-frame{aspect-ratio:4/3}
  #work .case-studies{margin-top:2rem;padding-top:1.75rem}
}

/* About is one centred, bold classroom statement under a symmetric label. */
#about{grid-template-columns:minmax(0,1fr);gap:1.1rem;justify-items:center;text-align:center;padding-top:60px;padding-bottom:60px}
#about>.label{padding:0}
#about>.label:before,#about>.label:after{content:"";display:inline-block;vertical-align:middle;width:32px;height:2px;margin:0 .75rem .2rem;background:var(--accent)}
#about .about-statement{max-width:860px;margin:0 auto;font:700 clamp(1.15rem,2vw,1.55rem)/1.55 "DM Sans",Arial,sans-serif;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
@media(max-width:700px){#about{padding-top:40px;padding-bottom:40px}#about .about-statement{text-wrap:pretty}}

/* Each project card names who the work was built for. */
#work .project-client{margin:-.35rem 0 .9rem;font-size:.82rem;font-weight:600;line-height:1.5;color:var(--ink)}