/* Beta 12: a material index. Geometry lives in place(); these are its visual roles. */
:root{--paper:#eee9de;--ink:#242b25;--muted:#696d62;--line:#a4a795;--accent:#527147;--sector-hover:#d7dfb844;--sector-pressed:#c2d09988}
body[data-colorway=paper],body[data-colorway=blue-green]{--sector-hover:#c5d39455;--sector-pressed:#b4c47c99}
header{padding:35px var(--page-gutter,60px)}
.wordmark{font-size:23px;line-height:.88;letter-spacing:-1.2px}
.brand-group{gap:17px}.brand-meta{gap:24px}.brand-meta>span{font-size:8px;letter-spacing:1px}.all-work-link{font-size:11px}
.header-right{gap:28px;font-size:10px}.beta{border:0;padding:0;font-size:8px;letter-spacing:1.2px;color:var(--muted)}
.colorway-controls{top:auto;bottom:1px;right:var(--page-gutter,60px);border:0;padding:0;gap:2px}
.colorway-controls>span{display:none}.colorway-controls button{font-size:9px;min-height:32px;padding:8px 12px}.colorway-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
body[data-colorway=blue-green] .colorway-controls button[aria-pressed=true]{background:var(--ink);color:#fff}
body:not(.browsing){min-height:var(--landing-height);overflow-x:clip}
body:not(.browsing) .landing-copy{position:absolute;top:calc(var(--landing-height)*.34);left:var(--page-gutter);width:440px;z-index:2}
.landing-copy .eyebrow{font-size:9px;letter-spacing:1.5px}
.landing-copy h1{font-size:clamp(58px,6.1vw,88px);line-height:.97;letter-spacing:-.062em;font-weight:500;margin:25px 0 28px}
.landing-copy h1 em{font-style:normal;color:#627448}
body[data-colorway=blue-green] .landing-copy h1 em{color:#206c57}
.landing-copy p{font-size:13px;line-height:1.7;letter-spacing:-.1px}
body[data-colorway=paper]:before{opacity:.42;background-size:760px;filter:brightness(.91) contrast(1.3)}
body[data-colorway=paper] .menu-ground:after{opacity:.42;background-size:760px;filter:brightness(.91) contrast(1.3)}
body:not(.browsing) .dial,body:not(.browsing) .hub,body:not(.browsing) .category-control{margin-left:0}
body:not(.browsing) .dial>svg{stroke-width:1.65}
body:not(.browsing) .dial>svg .inner-ring{stroke:none}
body:not(.browsing) .dial>svg .wheel-sector-link path{stroke:none}
#dial-marks{stroke-width:.75;opacity:.55}
.wheel-halo{inset:-100px;filter:blur(48px)}
body[data-colorway=paper] .wheel-halo{background:radial-gradient(ellipse at var(--halo-x,50%) var(--halo-y,50%),rgb(var(--halo-r,79) var(--halo-g,132) var(--halo-b,109) / .20),rgb(var(--halo-r,79) var(--halo-g,132) var(--halo-b,109) / .08) 42%,transparent 77%)}
body[data-colorway=blue-green] .wheel-halo{background:radial-gradient(ellipse at var(--halo-x,50%) var(--halo-y,50%),hsl(var(--halo-hue,160) 60% 43% / .22),hsl(var(--halo-hue,160) 60% 43% / .08) 42%,transparent 77%)}
body:not(.browsing) .category-control{width:184px;height:194px;gap:10px;justify-content:center;border-radius:0}
.category-visual{position:relative;display:grid;place-items:center;width:106px;height:106px;border-radius:50%;flex:0 0 106px;overflow:hidden;transition:width .7s,height .7s,flex-basis .7s,transform .45s,background .3s;border:1px solid #87907666;background:linear-gradient(145deg,#ffffff24,#817f6810);box-shadow:inset 0 1px 0 #ffffff80,0 1px 2px #28341a08}
.category-visual svg{position:relative;opacity:1;width:40px;height:40px;stroke-width:1.8;transition:transform .5s}
body:not(.browsing) .category-control:hover .category-visual,body:not(.browsing) .category-control[data-hovered=true] .category-visual{background:#d3ddaf;transform:translateY(-2px)}
.category-title{display:flex;align-items:baseline;gap:8px}
.category-title small{font:8px Arial,Helvetica,sans-serif;color:var(--muted)}
.category-title span{font-size:18px;letter-spacing:-.45px;font-weight:500;text-transform:none}
.category-note{font-style:normal;font-size:9px;letter-spacing:.15px;color:var(--muted)}
body:not(.browsing) .category-control:hover,body:not(.browsing) .category-control[data-hovered=true]{--lift:-3px;--node-scale:1}
.category-control:hover .category-visual img,.category-control[data-hovered=true] .category-visual img{transform:scale(1.07)}
.hub{background:#d7dfb9;border:1px solid #6d7d4b66;box-shadow:inset 0 1px 0 #ffffff80,0 2px 3px #28341a0a;font-weight:500;font-size:17px;letter-spacing:-.35px;gap:12px}
.hub-star{font-size:27px;font-weight:400;margin:0;line-height:1}
body:not(.browsing) .hub:hover,body:not(.browsing) .hub:focus-visible{background:#b9cd8b}
body:not(.browsing) .hub:active{background:#aabd7d}
footer{background:transparent;border-top:0;position:absolute;bottom:0;padding:26px var(--page-gutter);font-size:8px;letter-spacing:.6px}
.browsing .category-visual{width:34px;height:34px;flex-basis:34px;background:none;border:none;box-shadow:none;margin:0}
.browsing .category-visual img{opacity:0}
.browsing .category-visual svg{opacity:1;width:30px;height:30px;flex:auto}
.browsing .category-title{display:block;line-height:1.2}
.browsing .category-title span{font-size:10px;letter-spacing:.1px;font-weight:500;text-transform:uppercase}
.browsing .category-note{display:none}
.browsing .category-control[data-category=transportation] .category-visual{width:34px;height:34px;flex-basis:34px;margin:0;border:0}
.browsing .category-control{gap:15px}
body[data-colorway].browsing .category-control[aria-current]{background:#d0dcb0;color:var(--ink)}
.browsing .dial{border-color:#8e997e;background:transparent}
.section-heading h1{font-size:40px;font-weight:600;letter-spacing:-1.8px}.section-heading .eyebrow{font-size:9px;letter-spacing:1.2px}
.section-heading{margin-bottom:32px}.section-heading .index{font-size:9px;line-height:1.7}
.project-list{column-gap:24px;row-gap:30px}.card-caption h2{font-size:13px;line-height:1.4;font-weight:500}.card-caption{padding-top:14px}
.project-card .image{background:transparent}
@media(min-width:801px) and (max-width:1100px){body:not(.browsing) .landing-copy{top:calc(var(--landing-height)*.34);width:350px}.landing-copy h1{font-size:61px;letter-spacing:-3.6px}body:not(.browsing) .landing-copy p{display:block}.category-visual{width:96px;height:96px;flex-basis:96px}.category-title span{font-size:16px}.category-note{font-size:8px}}
@media(max-width:800px){
 header{padding:25px 23px}.wordmark{font-size:19px}.header-right{gap:14px;font-size:9px}.beta{font-size:7px}
 .brand-meta{top:78px}.brand-meta>span{font-size:7px}.colorway-controls{left:auto;right:20px;top:106px;bottom:auto;width:auto}.colorway-controls button{min-height:34px;font-size:9px}
 body:not(.browsing) .landing-copy{top:167px;left:24px;width:calc(100% - 48px)}
 .landing-copy .eyebrow{font-size:8px;letter-spacing:1.1px}.landing-copy h1{font-size:46px;line-height:.98;letter-spacing:-2.6px;margin:17px 0}.landing-copy h1 br:first-child{display:block}.landing-copy h1 em{display:inline-block}
 .landing-copy p{display:none}
 body:not(.browsing) .category-control{width:112px;height:140px;gap:7px}.category-visual{width:67px;height:67px;flex-basis:67px}
 .category-title{gap:4px}.category-title span{font-size:12px;letter-spacing:-.25px}.category-title small{font-size:6px}.category-note{font-size:7px;letter-spacing:0}
 .category-visual svg{width:29px;height:29px}
 .hub{font-size:12px;gap:7px}.hub-star{font-size:21px}
 .browsing .category-visual,.browsing .category-control[data-category=transportation] .category-visual{width:24px;height:24px;flex-basis:24px}
 .browsing .category-visual svg{width:24px;height:24px}.browsing .category-title span{font-size:7px;letter-spacing:0;text-transform:none}.browsing .category-control{gap:11px}
 .section-heading h1{font-size:32px}.section-heading{margin-bottom:24px}.project-list{row-gap:25px}.card-caption h2{font-size:12px}
 footer{padding:24px;font-size:7px}.browsing footer{padding:24px 0}.wheel-halo{inset:-45px;filter:blur(32px)}
}
@media(prefers-reduced-motion:reduce){.category-control:hover .category-visual img,.category-control[data-hovered=true] .category-visual img{transform:none}}
/* One continuous spiral, painted from the same progress as the perimeter.
   Native anchors stay fixed; upright captions travel with their circles. */
.intro-running:not(.browsing) .hub{z-index:2}
body.intro-running:not(.browsing) .category-control{--lift:0px;--node-scale:1;transition:none}
.intro-running:not(.browsing) .category-visual,.intro-running:not(.browsing) .category-title,.intro-running:not(.browsing) .category-note{transition:none;will-change:transform}
.intro-running:not(.browsing) #dial-marks{transform-origin:300px 300px}
/* Commit initial geometry before enabling navigation transitions. */
body:not(.ready) #navigator{visibility:hidden}
body:not(.ready) .dial,body:not(.ready) .hub,body:not(.ready) .category-control{transition:none!important}

/* A shared polar radius positions the circles themselves. Captions occupy a
   separate layer beneath each circle and cannot shift its center. */
body:not(.browsing) .category-control{height:var(--node-size);display:block}
body:not(.browsing) .category-visual{width:var(--node-size);height:var(--node-size);margin:0 auto}
body:not(.browsing) .category-title{position:absolute;top:calc(100% + 12px);left:0;right:0;justify-content:center;white-space:nowrap}
body:not(.browsing) .category-note{position:absolute;top:calc(100% + 42px);left:0;right:0;text-align:center;white-space:nowrap}
@media(max-width:800px){
 body:not(.browsing) .landing-copy p{display:block;max-width:330px;font-size:12px;line-height:1.6;margin:16px 0 0}
 .landing-copy h1{font-size:44px}
 body:not(.browsing) .category-title{top:calc(100% + 8px)}
 body:not(.browsing) .category-note{top:calc(100% + 28px)}
}
/* The off-menu backlight must not create horizontal scrolling on short windows. */
html{overflow-x:clip}

/* Work controls share one orbit. Captions never position circles. */
body:not(.browsing) .category-visual svg{width:52px;height:52px;stroke-width:1.8}
body:not(.browsing) .category-note{opacity:0;transform:translateY(3px);transition:opacity .18s,transform .18s;pointer-events:none}
body:not(.browsing) .category-control[data-near=true] .category-note,body:not(.browsing) .category-control:focus-within .category-note{opacity:1;transform:none}
.browsing .category-control[data-category=spatial]{border-radius:var(--endcap-radius) var(--endcap-radius) 12px 12px}
.browsing .category-control[data-category=product],.browsing .category-control[data-category=photography]{border-radius:18px}
.work-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-8px 0 30px}
.work-filters>span{font-size:8px;letter-spacing:1px;color:var(--muted);margin-right:7px}
.work-filters a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 13px;border:1px solid #8e997e66;border-radius:22px;font-size:11px;line-height:1.2;transition:background .15s}
.work-filters a:hover{background:#d7dfb966}.work-filters a[aria-current]{background:#d0dcb0;border-color:#8e997e;color:var(--ink)}
@media(max-width:800px){
 body:not(.browsing) .category-visual svg{width:36px;height:36px}
 .work-filters{gap:6px;margin:0 0 24px}.work-filters>span{width:100%;margin:0 0 4px}.work-filters a{font-size:10px;padding:8px 10px;min-height:40px}
}
/* Touch has no hover: concise supporting labels stay available without an extra tap. */
@media(hover:none){body:not(.browsing) .category-note{opacity:1;transform:none}}
/* Inward-facing curved names stay attached to their circles. */
.category-arc{display:none}
body:not(.browsing) .category-title{display:block;top:calc(var(--node-size) / -2);bottom:auto;left:calc(50% - var(--node-size));right:auto;width:calc(var(--node-size) * 2);height:calc(var(--node-size) * 2);opacity:1;transform:none;transition:opacity .18s;pointer-events:none}
body:not(.browsing) .category-title>small,body:not(.browsing) .category-title>span{display:none}
body:not(.browsing) .category-arc{display:block;width:100%;height:100%;overflow:visible;stroke:none;fill:currentColor;transform:none}
.category-arc text{font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:500;letter-spacing:.2px;stroke:none}
body:not(.browsing) .category-note{display:none}
body:not(.browsing) .category-control[data-near=true] .category-title,
body:not(.browsing) .category-control:focus-within .category-title{opacity:1}
@media(hover:none){body:not(.browsing) .category-title{opacity:1}}
@media(prefers-reduced-motion:reduce){body:not(.browsing) .category-title{transition:none}}
/* Only project image masks sway; card hit areas and captions retain their geometry. */
.project-card .thumbnail-mask{transform-origin:50% 0%;transform:rotate(calc(var(--sway-angle,0rad) + var(--pointer-sway-angle,0rad)))}
@media(prefers-reduced-motion:reduce){.project-card .thumbnail-mask{transform:none!important}}

/* The frame in place() caps imagery without scaling the typography. */
.browsing #content,.browsing footer{max-width:772px}
.colorway-controls,.comparison-controls,.shape-controls,.sidebar-shape-controls{display:none}

/* One shared vertical center for the desktop introduction and instrument. */
@media(min-width:801px){body:not(.browsing) .landing-copy{top:var(--menu-center-y);transform:translateY(-50%)}}

/* Optical alignment: Arial C/D have different left side bearings. Keep the
   existing container, size and vertical center; align each line’s visible ink. */
.landing-copy .heading-creative{position:relative;left:-.05em}
.landing-copy .heading-director{position:relative;left:-.077em}