/* Use visitor-installed Sukhumvit only; no font files are redistributed. */
@font-face{font-family:'Longgoy Sukhumvit';src:local('SukhumvitSet-Text'),local('Sukhumvit Set Text');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:'Longgoy Sukhumvit';src:local('SukhumvitSet-Medium'),local('Sukhumvit Set Medium');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:'Longgoy Sukhumvit';src:local('SukhumvitSet-SemiBold'),local('Sukhumvit Set SemiBold');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:'Longgoy Sukhumvit';src:local('SukhumvitSet-Bold'),local('Sukhumvit Set Bold');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0E00-0E7F}
:root{--body:'Longgoy Sukhumvit','IBM Plex Sans Thai','Barlow',sans-serif;--display:'Barlow','Longgoy Sukhumvit','IBM Plex Sans Thai',sans-serif}
/* Architectural Editorial + Subtle Motion. Overrides legacy presentation only. */
:root{--ease-editorial:cubic-bezier(.22,1,.36,1);--motion-reveal:640ms;--motion-stagger:80ms;--motion-hover:400ms;--motion-ui:220ms;--motion-project:420ms;--motion-hero:900ms;--header-height:92px;--gutter:clamp(22px,4.5vw,80px)}
/* Path-based icons never depend on platform fonts or emoji presentation. */
.ui-arrow{display:inline-block;flex:none;vertical-align:middle;width:1em;height:1em;fill:none;stroke:currentColor;overflow:visible;pointer-events:none}
.ui-arrow--chevron{width:16px;height:16px}
html{scroll-padding-top:var(--header-height)}
body{font-size:16px}.hero h1{font-size:clamp(44px,6.9vw,96px);line-height:1.06;letter-spacing:-.035em}.heading-line{display:block;overflow:visible}.heading-line:empty{display:none}
.work-heading h2,.section-heading h2{font-size:clamp(28px,2.7vw,39px);line-height:1.3}.project-meta h3{font-size:17px;line-height:1.45}.project-meta{gap:20px}.project-year{display:flex;align-items:start;gap:13px}.project-arrow{display:inline-block;font-size:20px;line-height:1;transition:transform var(--motion-hover) var(--ease-editorial);color:var(--ink)}
.project-card{outline-offset:7px}.project-card .project-image{overflow:hidden}.project-card .project-image img{opacity:1;transform:scale(1);transition:transform var(--motion-hover) var(--ease-editorial)}
@media(hover:hover){.project-card:hover .project-image img{transform:scale(1.025);opacity:1}.project-card:hover .project-arrow{transform:translateX(4px)}}
.project-card:focus-visible .project-image img{transform:scale(1.025)}.project-card:focus-visible .project-arrow{transform:translateX(4px)}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}.over-dark .site-header a:focus-visible{outline-color:#fff}h1:focus,h2:focus{outline:none}
.desktop-nav a,.header-contact,.hero-project,.back-top,.detail-source,.person-profile .person-meta h3{position:relative;text-decoration:none!important}
.desktop-nav a:after,.header-contact:after,.hero-project:after,.back-top:after,.detail-source:after,.person-profile .person-meta h3:after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-ui) var(--ease-editorial)}
.desktop-nav a:is(:hover,:focus-visible,[aria-current]):after,.header-contact:is(:hover,:focus-visible,[aria-current]):after,.hero-project:is(:hover,:focus-visible):after,.back-top:is(:hover,:focus-visible):after,.detail-source:is(:hover,:focus-visible):after,.person-profile:is(:hover,:focus-visible) .person-meta h3:after{transform:scaleX(1)}
.text-link,.detail-contact{position:relative;border-bottom:1px solid var(--line)}.text-link:after,.detail-contact:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-ui) var(--ease-editorial)}.text-link:is(:hover,:focus-visible):after,.detail-contact:is(:hover,:focus-visible):after{transform:scaleX(1)}
button,.outline-button,.hero-actions a{transition:background-color var(--motion-ui) var(--ease-editorial),color var(--motion-ui) var(--ease-editorial),border-color var(--motion-ui) var(--ease-editorial),transform var(--motion-ui) var(--ease-editorial)}
button:active,.outline-button:active,.hero-actions a:active{transform:translateY(1px)}.gallery-controls button:active{transform:translateY(1px)}.project-card:active .project-image img{transform:scale(1.01)}
.hero{padding-bottom:120px}.hero-backdrop{opacity:1;transition:none;object-fit:cover;transform-origin:center;pointer-events:none}.hero-project{left:var(--gutter);right:auto;bottom:30px;max-width:calc(100% - 280px)}.hero-controls{position:absolute;right:var(--gutter);bottom:28px;display:flex;align-items:center;gap:16px;font:12px var(--display);font-variant-numeric:tabular-nums}.hero-controls button{display:grid;place-items:center;min-width:44px;height:44px;border:1px solid #ffffff55;background:transparent;color:#fff}.hero-controls button:is(:hover,:focus-visible){background:#fff;color:#171717}
#project-dialog{width:calc(100% - 48px);max-width:1500px;height:calc(100dvh - 48px);max-height:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#aaa transparent;scroll-behavior:auto}#project-dialog::backdrop{background:#111b;backdrop-filter:none}.dialog-header{min-height:70px;padding:12px 32px}.dialog-content{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.7fr);gap:clamp(28px,4vw,64px);align-items:start;padding:32px}.project-info{min-width:0;position:static}.project-info.can-stick{position:sticky;top:102px}.detail-heading{display:block;margin:0 0 24px}.detail-heading h2{font-size:clamp(26px,2.5vw,36px);line-height:1.15;margin-top:14px}.detail-meta{font-size:11px;line-height:1.7;letter-spacing:.025em}#detail-counter{display:block;margin:18px 0 0;font-size:12px;color:var(--muted)}.detail-story{display:block;padding:24px 0}.detail-story h3{font-size:20px;line-height:1.7;font-weight:500;margin-bottom:16px}.detail-story p{font-size:14px;line-height:1.95}.detail-story .detail-credit{font-size:12px;line-height:1.8}.detail-contact{font-size:14px;padding:18px 0;line-height:1.8}.project-gallery{min-width:0}.gallery-stage{position:relative;height:min(64dvh,700px);min-height:280px;background:#f7f7f5}.gallery-stage>img{width:100%;height:100%;object-fit:contain;max-height:none}.gallery-stage[aria-busy=true]:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:#aaa}.gallery-controls{margin-top:16px}.gallery-caption{font-size:13px;line-height:1.8;min-height:24px}.gallery-caption>span{display:none}.gallery-thumbs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;overflow:visible;padding:20px 0 8px}.gallery-thumbs button{width:100%;height:auto;aspect-ratio:4/3;min-width:0;border:1px solid transparent;padding:3px}.gallery-thumbs button[aria-pressed=true]{border:1px solid var(--ink)}.gallery-thumbs button:hover{border-color:#888}.gallery-thumbs img{object-fit:contain}.close-dialog:hover{background:#f2f2f2}
/* Browser-native shared-image transition; unsupported browsers receive a dialog crossfade. */
::view-transition-group(project-photo){animation-duration:var(--motion-project);animation-timing-function:var(--ease-editorial)}
::view-transition-old(project-photo),::view-transition-new(project-photo){height:100%;object-fit:contain;animation-duration:var(--motion-project)}
::view-transition-group(root){animation-duration:var(--motion-project)}
@media(max-width:1050px){.dialog-content{grid-template-columns:1fr;gap:28px}.project-info.can-stick{position:static}.detail-heading h2{font-size:32px}.detail-story{max-width:760px}.project-gallery{grid-row:2}.gallery-stage{height:56dvh}.gallery-thumbs{display:flex;overflow-x:auto;position:relative;scrollbar-width:thin;gap:12px}.gallery-thumbs button{flex:0 0 86px;height:66px}.project-info{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}.detail-heading{margin:0}.detail-story{border-top:0;padding:0;grid-column:2;grid-row:1/3}.detail-contact{grid-column:1;margin-top:0;align-self:end}}
@media(max-width:680px){:root{--header-height:76px}.hero h1{font-size:clamp(40px,11.5vw,68px)}.hero{padding-top:48px;padding-bottom:146px}.hero-project{bottom:76px;max-width:calc(100% - 44px)}.hero-controls{bottom:18px;left:var(--gutter);right:auto;gap:16px}.hero-controls button{width:40px;min-width:40px;height:40px}.hero-actions a{min-height:48px}.project-meta h3{font-size:17px}.project-meta{gap:12px}.project-year{gap:8px;font-size:12px}.project-arrow{font-size:18px}#project-dialog{width:100%;height:100dvh;margin:0}.dialog-header{padding:10px 22px;min-height:66px}.dialog-content{padding:26px 22px;gap:26px}.project-info{display:block}.detail-heading h2{font-size:28px}.detail-heading{margin-bottom:24px}.detail-story{border-top:1px solid var(--line);padding:20px 0}.detail-story h3{font-size:20px}.detail-contact{padding:16px 0}.gallery-stage{height:48dvh;min-height:260px}.gallery-caption{font-size:13px}.gallery-thumbs{gap:10px}.gallery-thumbs button{flex-basis:76px;height:60px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-backdrop,.project-card .project-image img,.project-arrow{transform:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.motion-off .hero-backdrop,.motion-off .project-card .project-image img,.motion-off .project-arrow{transform:none!important}

.hero-project{position:absolute}.hero{position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate}@media(max-width:680px){.hero{display:block}}

@media(max-width:680px){.project-info .detail-heading{margin-bottom:0}.project-story-below{min-width:0}.project-story-below .detail-story{margin-top:0}}

/* A skippable signature opening, kept separate from document scrolling. */
#site-intro{background:#090909;border:0;padding:0;color:#fff;outline:none}
#site-intro[open]{display:grid;place-items:center}
#site-intro .intro-stage{width:min(560px,84vw,76dvh);height:min(510px,77vw,70dvh);margin:0}
#site-intro .intro-stage:focus-visible{outline:1px solid #aaa;outline-offset:12px}
/* A single vector surface carries the original logo into the architectural volume. */
#site-intro #logo-architecture{opacity:1;filter:none}
/* Quiet automatic project crossfades replace the manual hero toolbar. */
.hero-project{max-width:calc(100% - var(--gutter)*2)}
@media(max-width:680px){.hero{padding-bottom:104px}.hero-project{bottom:28px}}
@media(prefers-reduced-motion:reduce){#site-intro{display:none!important}}
.social-links{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;padding:0 max(var(--gutter),calc((100vw - 1500px)/2)) 48px;background:var(--paper)}
.social-links>span{font:12px/1.5 var(--display);color:var(--muted);margin-right:auto}
.social-links a{display:flex;align-items:center;gap:12px;min-height:44px;font:15px/1.5 var(--display);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--motion-ui) var(--ease-editorial)}
.social-links a:is(:hover,:focus-visible){text-decoration-color:currentColor}
.social-links .social-icon{display:block;width:24px;height:24px;flex:none;object-fit:contain}

/* Opening composition: a clear signature, quiet copy and an image-led footer. */
.hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;justify-content:stretch;gap:64px;align-items:start;min-height:calc(100svh - var(--header-height));padding:clamp(48px,8svh,88px) var(--gutter) 28px}
.hero-copy{align-self:center;width:100%;max-width:800px}
.hero-eyebrow{display:flex;align-items:center;gap:16px;font:400 11px/1.7 var(--display);letter-spacing:.14em;color:#efefec}

.hero h1{font-size:clamp(56px,6.3vw,88px);font-weight:500;line-height:1.02;letter-spacing:-.035em;margin:30px 0 34px}
.hero-introduction{display:grid;grid-template-columns:240px minmax(0,400px);gap:24px 32px;align-items:start}
.hero .hero-subtitle{max-width:none;font:400 clamp(18px,1.5vw,22px)/1.75 var(--body);text-align:left;color:#f7f7f4}
.hero .hero-story{max-width:400px;margin:2px 0 0;font:400 14px/1.95 var(--body);color:#d3d3ce;text-align:left;text-wrap:pretty}
.hero-footer{display:flex;align-items:end;justify-content:space-between;gap:28px;width:100%;padding-top:18px;border-top:1px solid #ffffff35}
.hero .hero-project{position:relative;inset:auto;display:block;min-width:0;max-width:calc(100% - 100px);padding:4px 0;font:400 12px/1.6 var(--display);letter-spacing:.04em}
.hero-project-name{display:block}.hero .hero-project small{display:block;margin-top:3px;font-size:10px;letter-spacing:.06em;color:#bdbdb8}
.hero-progress{width:100px;height:1px;margin-bottom:12px;background:#ffffff35;flex:none;overflow:hidden}
.hero-progress-fill{display:block;width:100%;height:100%;background:#f2f2ed;transform:scaleX(0);transform-origin:left}
@media(min-width:1600px){.hero{padding-left:max(var(--gutter),calc((100vw - 1500px)/2));padding-right:max(var(--gutter),calc((100vw - 1500px)/2))}}
@media(max-width:1050px){.hero-introduction{grid-template-columns:1fr;gap:17px}.hero-copy{max-width:560px}.hero .hero-story{max-width:390px}}
@media(max-width:680px){.hero{display:grid;gap:56px;padding:clamp(42px,7svh,64px) var(--gutter) 24px}.hero-copy{align-self:start}.hero-eyebrow{gap:12px;font-size:9px;letter-spacing:.1em}.hero h1{font-size:clamp(42px,13.3vw,68px);margin:28px 0 28px;line-height:1.04}.hero-introduction{gap:18px}.hero .hero-subtitle{font-size:18px;line-height:1.75}.hero .hero-story{max-width:330px;font-size:13px;line-height:1.95;margin:0}.hero-footer{gap:20px;padding-top:16px}.hero .hero-project{max-width:calc(100% - 84px);font-size:11px}.hero .hero-project small{font-size:9px}.hero-progress{width:64px;margin-bottom:12px}}
@media(max-height:600px) and (orientation:landscape){.hero{gap:36px;padding-top:32px}.hero h1{font-size:52px;margin:20px 0}.hero-introduction{grid-template-columns:auto minmax(0,340px);gap:28px}.hero .hero-subtitle{font-size:17px}.hero .hero-story{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hero-progress-fill{transform:none!important}}
.motion-off .hero-progress-fill{transform:none!important}

/* Recognition follows the people, using the same restrained editorial grid. */
.awards{border-top:1px solid var(--line);background:var(--paper)}
.awards-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:32px 0 42px}
.awards-heading h2{font:500 clamp(28px,2.7vw,39px)/1.3 var(--display);letter-spacing:-.02em}
.awards-heading p{font-size:14px;color:var(--muted)}
.award-entry{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(240px,360px);gap:clamp(24px,3vw,48px);align-items:start;padding:36px 0;border-top:1px solid var(--line);outline-offset:7px}
.award-entry:last-child{border-bottom:1px solid var(--line)}
.award-year{font:400 14px/1.6 var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.award-copy{min-width:0}.award-copy h3{font:500 clamp(21px,2vw,28px)/1.3 var(--display);letter-spacing:-.015em}
.award-distinctions{list-style:none;padding:0;margin:18px 0 0;font:400 14px/1.7 var(--display)}
.award-project{margin-top:20px;font:400 14px/1.6 var(--display);color:var(--muted)}
.award-open{display:inline-flex;align-items:center;gap:16px;margin-top:20px;font-size:12px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--motion-ui) var(--ease-editorial)}
.award-open .ui-arrow{width:17px;height:17px;transition:transform var(--motion-hover) var(--ease-editorial)}
.award-image{aspect-ratio:2000/1414;overflow:hidden;background:#f7f7f5}
.award-image img{width:100%;height:100%;object-fit:contain;transition:transform var(--motion-hover) var(--ease-editorial)}
.award-entry:focus-visible .award-open{text-decoration-color:currentColor}
.award-entry:focus-visible .award-open .ui-arrow{transform:translate(3px,-3px)}
@media(hover:hover){.award-entry:hover .award-image img{transform:scale(1.025)}.award-entry:hover .award-open{text-decoration-color:currentColor}.award-entry:hover .award-open .ui-arrow{transform:translate(3px,-3px)}}
.gallery-caption{flex-wrap:wrap;align-items:baseline}.gallery-caption p{flex:1 1 220px}.gallery-original{flex:none;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:32px;display:inline-flex;align-items:center}
@media(max-width:1050px){.award-entry{grid-template-columns:45px minmax(0,1fr) minmax(180px,34%);gap:24px}.awards-heading{align-items:start;flex-direction:column;gap:12px}.award-copy h3{font-size:23px}}
@media(max-width:680px){.awards-heading{margin:26px 0 30px}.awards-heading p{font-size:13px}.award-entry{grid-template-columns:1fr;gap:18px;padding:28px 0 34px}.award-year{font-size:12px}.award-image{grid-row:2}.award-copy h3{font-size:24px}.award-distinctions{font-size:13px;margin-top:14px}.award-project{font-size:13px;margin-top:16px}.award-open{margin-top:14px;min-height:30px}}
@media(prefers-reduced-motion:reduce){.award-image img,.award-open .ui-arrow{transform:none!important}}
.motion-off .award-image img,.motion-off .award-open .ui-arrow{transform:none!important}
#person-dear{scroll-margin-top:calc(var(--header-height,92px) + 24px)}
#person-dear:focus{outline:1px solid currentColor;outline-offset:8px}

/* Let the opening photograph reach every viewport edge, including behind the header. */
.hero{margin-top:calc(-1 * var(--header-height));min-height:100svh;padding-top:calc(var(--header-height) + clamp(48px,8svh,88px))}
.over-dark .site-header{background:transparent;border-bottom-color:transparent}
.over-dark.menu-open .site-header{background:#090909}
.hero-backdrop{object-position:50% 50%}
@media(max-width:680px){.hero{padding-top:calc(var(--header-height) + clamp(42px,7svh,64px))}}
@media(max-height:600px) and (orientation:landscape){.hero{padding-top:calc(var(--header-height) + 32px)}}

/* Compact SVG-only gallery controls retain accessible Thai names. */
.gallery-controls .gallery-arrow{display:grid;place-items:center;width:48px;min-width:48px;height:48px;padding:0;gap:0}
.close-dialog{display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0}
.ui-close{display:block;flex:none;pointer-events:none}

/* A small brand directory at the right edge of the main navigation. */
.brand-switcher{--brand-surface:rgb(255 255 255 / 76%);position:relative;flex:none;color:inherit}
.over-dark .brand-switcher{--brand-surface:rgb(9 9 9 / 36%)}
.brand-switcher>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 0;list-style:none;cursor:pointer;font:500 12px/1.5 var(--display);letter-spacing:.06em}
.brand-switcher>summary::-webkit-details-marker{display:none}
.brand-switcher>summary::marker{content:''}
.brand-switcher>summary>svg{flex:none;transition:transform var(--motion-ui) var(--ease-editorial)}
.brand-switcher[open]>summary>svg{transform:rotate(180deg)}
.brand-switcher[open]>summary{background:var(--brand-surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.brand-switcher>summary:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.brand-options{--brand-separator:rgb(23 23 23 / 16%);position:absolute;top:100%;right:0;width:248px;max-width:calc(100vw - var(--gutter)*2);max-height:calc(100svh - var(--header-height) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 18px;background:var(--brand-surface);color:var(--ink);border:0;box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left}
.over-dark .brand-options{--brand-separator:rgb(255 255 255 / 22%);color:#fff}
.brand-options a{display:block;min-height:74px;padding:16px 0}
.brand-options a+a{border-top:1px solid var(--brand-separator)}
.brand-options strong{display:block;font:500 14px/1.5 var(--display);letter-spacing:.025em;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--motion-ui) var(--ease-editorial)}
.brand-options small{display:block;margin-top:5px;font:400 12px/1.75 var(--body);color:inherit;opacity:.8}
.brand-options a:is(:hover,:focus-visible) strong{text-decoration-color:currentColor}
.site-header .brand-options a:focus-visible{outline-color:currentColor;outline-offset:3px}
.brand-switcher[open] .brand-options{animation:brand-options-in var(--motion-ui) var(--ease-editorial)}
@keyframes brand-options-in{from{opacity:0}to{opacity:1}}
@media(max-width:680px){.site-header{gap:20px}.brand-switcher>summary{font-size:11px;gap:8px}}

/* Language choices sit immediately before the main navigation. */
.language-switch{display:flex;align-items:center;flex:none;gap:3px;font:400 11px/1 var(--display)}
.language-switch button{min-height:44px;min-width:25px;padding:10px 3px;border:0;background:none;color:inherit;font:inherit;opacity:.65}
.language-switch button[aria-pressed=true]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.language-switch button:is(:hover,:focus-visible){opacity:1}
.dialog-header{gap:20px}.dialog-header>#detail-category{margin-right:auto}.dialog-header>.language-switch{margin-left:auto}
.desktop-nav a>span,.header-contact>span{display:none}
html[lang=en] .hero .hero-subtitle{line-height:1.55}
html[lang=en] .contact h2{font-family:var(--display)}
.menu-links small{display:none}
@media(min-width:681px) and (max-width:1200px){.site-header{gap:24px}}
@media(min-width:1051px) and (max-width:1200px){.header-location{font-size:10px}}
@media(max-width:680px){.site-header{gap:14px}.menu-toggle{font-size:11px;gap:7px}.menu-lines{width:18px}.brand-switcher>summary{font-size:10px;gap:6px}.language-switch{font-size:10px;gap:1px}.language-switch button{min-width:24px}.brand-options{width:232px;padding-inline:16px}}
@media(max-width:360px){.site-header{gap:10px}.site-header .brand-logo{width:43px}}

@media(min-width:681px) and (max-width:1050px){.site-header>.language-switch{margin-left:auto}.desktop-nav{margin-left:0}}

/* Keep each thought intact and give Thai marks their full vertical space. */
.hero-story>span{display:block;text-wrap:balance}
.hero-story>span+span{margin-top:.5em}
html[lang=th] :is(.work-heading h2,.section-heading h2,.awards-heading h2,.manifesto-content h2){font-family:var(--body);letter-spacing:0;line-height:1.45}
html[lang=th] :is(.hero-eyebrow,.header-location,.work-heading-copy>span,.work-view-switch button,.section-kicker,.manifesto-image>span,.person-meta>span,.contact-links>*>span,.contact-links strong,.social-links>span,.footer p,.detail-meta,#detail-category,.hero-project small){font-family:var(--body);letter-spacing:0;line-height:1.7}
.hero-introduction>*,.contact-main>div,.detail-heading>div{min-width:0}

.team>.section-heading p{max-width:32ch;text-wrap:balance}

.work-heading-copy{min-width:0}
.work-heading-copy>span{text-wrap:balance}
.work-view-switch{flex-shrink:0}
@media(max-width:680px){.work-heading-copy>span{max-width:none}.work-heading-copy{flex:1}}
@media(max-width:360px){.work-heading{flex-wrap:wrap;gap:6px 20px}.work-heading-copy{flex-basis:100%}.work-heading-copy>span{max-width:none}.work-view-switch{margin-left:auto}}

@media(max-width:680px){.hero .hero-story{max-width:36em;font-size:14px;line-height:1.85}.hero-story>span+span{margin-top:.7em}}

/* A clear portfolio action within the existing linked person card. */
.person-portfolio-link{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;max-width:100%;min-height:44px;margin-top:20px;padding:10px 12px;border:1px solid var(--ink);color:var(--ink);background:transparent;font:400 13px/1.7 var(--body);text-decoration:none;transition:background var(--motion-ui) var(--ease-editorial),color var(--motion-ui) var(--ease-editorial),transform var(--motion-ui) var(--ease-editorial)}
.person-portfolio-link>span{min-width:0;text-wrap:balance}
.person-portfolio-link>.ui-arrow{display:block;width:18px;height:18px;flex:none;transition:transform var(--motion-ui) var(--ease-editorial)}
.person-profile:focus-visible .person-portfolio-link,.person-portfolio-link:focus-visible{background:var(--ink);color:var(--paper)}
.person-portfolio-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.person-profile:active .person-portfolio-link,.person-portfolio-link:active{background:var(--ink);color:var(--paper);transform:translateY(1px)}
@media(hover:hover){.person-profile:hover .person-portfolio-link,.person-portfolio-link:hover{background:var(--ink);color:var(--paper)}.person-profile:hover .person-portfolio-link>.ui-arrow,.person-portfolio-link:hover>.ui-arrow{transform:translate(3px,-3px)}}
@media(prefers-reduced-motion:reduce){.person-portfolio-link,.person-portfolio-link>.ui-arrow{transition:none;transform:none!important}}
#detail-description { white-space: pre-line; }

body::after{content:"";position:fixed;inset:0;background:#080808;z-index:10000;pointer-events:none;opacity:0;transition:opacity .42s ease}body.opening-portfolio::after{opacity:1}body.opening-portfolio{pointer-events:none}
@media(prefers-reduced-motion:reduce){body::after{transition:none}}