/* Work pages use the shared site chrome without inheriting the old case layout. */
:root{--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;--page-pad:clamp(1rem,2.5vw,2.5rem);--content-max:1600px}
.site-header{display:block;width:100%;height:auto;max-width:none;margin:0;padding:0;position:sticky;top:0;z-index:50}
.site-shell{max-width:var(--content-max);margin:0 auto;padding-inline:var(--page-pad)}
.header-inner{display:flex;align-items:center;min-height:66px}
.site-header .nav-list,.footer-nav{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.site-header .nav-link,.site-header .menu-toggle,.footer-nav .nav-link{font-family:var(--font-mono);text-transform:uppercase}
.site-header .wordmark{text-transform:uppercase}
.site-header .menu-toggle{text-transform:uppercase;transform:none}
.site-header .nav-link{color:inherit}
.site-header.is-over-dark{color:var(--paper)}
.site-footer{display:block;width:100%;max-width:none;margin:0;padding:32px 0;border-top:1px solid var(--rule)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.footer-nav{flex-wrap:wrap;gap:16px 24px;justify-content:flex-end}
.footer-copy,.footer-nav .nav-link{font-family:var(--font-mono);font-size:clamp(.72rem,.68rem + .18vw,.84rem);text-transform:uppercase;letter-spacing:.03em}
.footer-copy{color:var(--muted)}
.site-footer-quiet{border-top:0}
.site-footer-quiet .footer-grid{display:block}
.site-footer-project{border:0}
.site-footer-project .footer-nav{flex-wrap:nowrap}
.site-footer-project .footer-nav .nav-link{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr}.footer-nav{justify-content:flex-start}.site-footer p{width:auto;font-size:12px}.site-footer a:last-child{margin-left:0}}

/* The Work index opens with the projects; names live in the reveal capsules. */
body[data-page="work"]{min-height:100svh;display:flex;flex-direction:column}
.work-index{flex:none;min-height:calc(100svh - 66px)}
.work-index .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.work-index .study-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);padding-top:24px;padding-bottom:48px}
.work-index .study-card{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;border:0;padding:0}
.work-index .study-card-image{width:100%;aspect-ratio:16/10}
.work-card-control{position:relative;display:flex;align-items:center;max-width:100%;height:44px;margin-top:16px;border-radius:999px;overflow:hidden;background:#e7e5dd;color:var(--ink);transition:background 220ms ease}
.work-card-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-family:"F37 Moon",sans-serif;font-size:clamp(16px,1.45vw,23px);font-weight:400;line-height:1.2;letter-spacing:-.02em;transition:max-width 440ms cubic-bezier(.22,1,.36,1),padding 440ms cubic-bezier(.22,1,.36,1),opacity 180ms ease}
.work-card-plus{position:relative;flex:0 0 44px;width:44px;height:44px}
.work-card-plus::before,.work-card-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.work-card-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.study-card:focus-visible .work-card-control{background:var(--volt)}
.study-card:focus-visible .work-card-label{max-width:20em;padding-left:18px;opacity:1}
@media(hover:hover) and (pointer:fine){
 .work-card-control:hover{background:var(--volt)}
 .work-card-control:hover .work-card-label{max-width:20em;padding-left:18px;opacity:1}
}
@media(hover:none){
 .work-card-label{max-width:20em;padding-left:18px;opacity:1}
}
@media(max-width:1099px){.work-index .study-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
 .work-index .study-grid{grid-template-columns:1fr;padding-top:16px;gap:20px}
}
@media(prefers-reduced-motion:reduce){.work-card-control,.work-card-label{transition:none}}

/* One continuous glass surface; slim lobes sit inside generous hit areas. */
.site-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;pointer-events:none;transition:transform 240ms var(--ease),opacity 180ms ease}
.site-header .header-inner{width:100%;max-width:none;min-height:66px;justify-content:flex-end;gap:16px}
:is(.site-header,.site-footer){--capsule-height:32px;--capsule-glass:rgba(222,220,211,.32);--capsule-blur:blur(28px) saturate(1.15)}
.case-chapter-bar>:is(a,span){border:0;border-radius:999px;background:rgba(222,220,211,.62);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:none}
.site-header :is(.wordmark,.nav-link,.menu-toggle){position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:auto;text-decoration:none}
.site-header :is(.wordmark,.nav-link,.menu-toggle)::before{content:"";position:absolute;inset:50% 0 auto;height:var(--capsule-height);transform:translateY(-50%);border-radius:999px;z-index:-1;pointer-events:none;transition:background 160ms ease}
.site-header :is(.wordmark,.menu-toggle)::before{background:var(--capsule-glass);backdrop-filter:var(--capsule-blur);-webkit-backdrop-filter:var(--capsule-blur)}
.site-header :is(.wordmark,.nav-link,.menu-toggle):hover,.site-header .nav-link[aria-current=page]{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.site-header .nav-link:is([aria-current=page],:active,:focus-visible),.site-header .menu-toggle[aria-expanded=true]{color:var(--ink)}
.site-header .nav-link:is([aria-current=page],:active,:focus-visible)::before,.site-header .menu-toggle[aria-expanded=true]::before{background:var(--volt)}
@media(hover:hover) and (pointer:fine){
 .site-header .nav-link:hover{color:var(--ink)}
 .site-header .nav-link:hover::before{background:var(--volt)}
}
.site-header :is(.nav-link,.menu-toggle){font-size:13px;line-height:1;letter-spacing:.015em}
.site-header :is(.wordmark,.nav-link,.menu-toggle):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.site-header .wordmark{position:absolute;left:50%;top:11px;transform:translateX(-50%);white-space:nowrap;font-size:14px;font-weight:500;line-height:.82;letter-spacing:-.058em;visibility:visible}
.site-header .site-nav{margin-left:auto}
.site-header .nav-list{position:relative;isolation:isolate;gap:4px}
.site-header .nav-list::before{content:"";position:absolute;inset:6px 0;border-radius:999px;background:var(--capsule-glass);backdrop-filter:var(--capsule-blur);-webkit-backdrop-filter:var(--capsule-blur);pointer-events:none;z-index:-1}
.site-header .nav-list[data-connected]::before{inset:0;border-radius:0;clip-path:var(--nav-silhouette)}
/* Footer navigation shares the header's connected capsule form and hit areas. */
.site-footer .footer-nav{position:relative;isolation:isolate;display:flex;flex-wrap:nowrap;gap:4px;width:max-content;max-width:100%;padding:0;list-style:none}
.site-footer .footer-nav::before{content:"";position:absolute;inset:6px 0;border-radius:999px;background:var(--capsule-glass);backdrop-filter:var(--capsule-blur);-webkit-backdrop-filter:var(--capsule-blur);pointer-events:none;z-index:-1}
.site-footer .footer-nav[data-connected]::before{inset:0;border-radius:0;clip-path:var(--nav-silhouette)}
.site-footer .footer-nav .nav-link{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);font-size:13px;line-height:1;letter-spacing:.015em;text-decoration:none}
.site-footer .footer-nav .nav-link::before{content:"";position:absolute;inset:50% 0 auto;height:var(--capsule-height);transform:translateY(-50%);border-radius:999px;z-index:-1;pointer-events:none;transition:background 160ms ease}
.site-footer .footer-nav .nav-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.site-footer .footer-nav .nav-link:focus-visible::before{background:var(--volt)}
@media(hover:hover) and (pointer:fine){.site-footer .footer-nav .nav-link:hover::before{background:var(--volt)}}
.site-header .menu-toggle{display:none}
.header-is-hidden .site-header{transform:translateY(calc(-100% - 12px));opacity:0;pointer-events:none}
.header-is-hidden .site-header :is(.wordmark,.nav-link,.menu-toggle){pointer-events:none}
/* Return paths use the same accent across project chapters and moment stories. */
.case-chapter-bar .case-return,.case-chapter-end [data-case-return],.moment-story .moment-back{padding:10px 16px;border:0;border-radius:999px;background:var(--volt);color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
:is(.case-chapter-bar .case-return,.case-chapter-end [data-case-return],.moment-story .moment-back):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:900px){
 .site-header .header-inner{flex-wrap:wrap;padding-top:66px}
 .site-header .site-nav{position:static;display:block;width:100%}
 .site-header .nav-list{justify-content:center;flex-wrap:wrap;gap:4px;padding:0}
 .site-header .menu-toggle{display:none;margin-left:auto}
 .js .site-header .header-inner{padding-top:0}
 .js .site-header .menu-toggle{display:inline-flex}
 .js .site-header .site-nav{display:none;position:absolute;top:calc(100% + 8px);left:auto;right:var(--page-pad);width:max-content;margin:0;padding:0;background:transparent;border:0}
 .js .site-header .site-nav.is-open{display:block}
 .js .site-header .site-nav .nav-list{display:grid;justify-items:end;gap:0;padding:0}
 .js .site-header .site-nav .nav-link{display:inline-flex;min-width:112px;padding:0 14px}
}


/* A project is another control within the main site's capsule navigation. */
.site-header .header-project{position:absolute;left:var(--page-pad);top:11px;pointer-events:auto}
.site-header .project-toggle,.site-header .project-label{gap:14px;font-family:var(--font-mono);font-size:13px;letter-spacing:.015em;text-transform:uppercase}
.site-header :is(.project-toggle,.project-label)::before{background:var(--capsule-glass);backdrop-filter:var(--capsule-blur);-webkit-backdrop-filter:var(--capsule-blur)}
.site-header .project-toggle[aria-expanded=true]::before{background:var(--volt)}
.site-header .project-toggle[aria-expanded=true]{color:var(--ink)}
.site-header .project-menu{position:absolute;top:calc(100% + 8px);left:0;right:auto;width:max-content;min-width:220px;max-width:calc(100vw - 2*var(--page-pad));max-height:calc(100dvh - 100px);overflow:auto;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;pointer-events:auto;color:var(--ink)}
.site-header .project-menu[hidden]{display:none}
.site-header .project-menu .nav-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0;justify-content:stretch;justify-items:stretch}
.site-header .project-menu .nav-link{width:100%;justify-content:flex-start;white-space:normal;line-height:1.3;min-height:44px;font-size:13px;background:transparent}
.site-header .project-menu .nav-link[aria-current=location]{color:var(--ink)}
.site-header .project-menu .nav-link[aria-current=location]::before{background:var(--volt)}
.site-header .header-menu-icon{font-size:19px;line-height:.8;transition:transform .18s}
.site-header [aria-expanded=true] .header-menu-icon{transform:rotate(45deg)}
.header-is-hidden .site-header .header-project{pointer-events:none}
/* Willco's other projects emerge horizontally from behind its own capsule. */
.site-header [data-willco-menu]{pointer-events:none}
.site-header .willco-switcher{display:flex;flex-wrap:nowrap;width:max-content;gap:4px;clip-path:inset(-4px calc(100% - var(--willco-width,80px)) -4px -4px);transition:clip-path 520ms cubic-bezier(.22,1,.36,1)}
.site-header .willco-switcher>li{position:relative;flex:none}
.site-header .willco-origin{z-index:4}
.site-header .willco-switcher::before{opacity:0;transition:opacity 220ms ease}
.site-header .willco-project{z-index:1;opacity:0;visibility:hidden;transform:translateX(calc(-1 * var(--reveal-from,300px)));transition:transform 420ms cubic-bezier(.22,1,.36,1),opacity 160ms ease,visibility 0s 420ms}
.site-header .willco-project .nav-link{white-space:nowrap;pointer-events:none}
.site-header [data-willco-menu][data-open] .willco-switcher{clip-path:inset(-4px -4px -4px -4px)}
.site-header [data-willco-menu][data-open] .willco-switcher::before{opacity:1}
.site-header [data-willco-menu][data-open] .willco-project{opacity:1;visibility:visible;transform:translateX(0);transition-duration:520ms,240ms,0s;transition-delay:calc(var(--reveal-order) * 45ms)}
.site-header [data-willco-menu][data-open] .willco-project .nav-link{pointer-events:auto}
@media(max-width:380px){.site-header .willco-switcher .nav-link{font-size:11px;padding-inline:9px}}
@media(max-width:900px){
 .site-header[data-project-header] .header-inner{min-height:110px;align-items:flex-start}
 .site-header[data-project-header] .menu-toggle{margin-top:11px}
 .site-header[data-project-header] .header-project{top:60px}
 .site-header .project-menu{max-height:calc(100dvh - 125px)}
 html:has([data-project-header]){scroll-padding-top:122px}
}
/* A solid surface separates touch menus from the page beneath their capsules. */
@media(max-width:900px){
 .site-header :is(.site-nav.is-open,.project-menu){--capsule-glass:#e7e5dd;--capsule-blur:none;padding:8px;background:var(--paper);color:var(--ink);border-radius:24px;box-shadow:0 8px 28px #1112;overscroll-behavior:contain}
 .js .site-header .site-nav.is-open{max-height:calc(100dvh - 90px);overflow:auto}
 .js .site-header .site-nav .nav-link{min-width:152px;min-height:48px;font-size:14px}
 .site-header .project-menu .nav-link{min-height:48px;font-size:14px}
 .site-header [data-willco-menu][data-open] .willco-switcher{--capsule-glass:#e7e5dd;--capsule-blur:none;color:var(--ink)}
 .site-header.is-over-dark :is(.site-nav,.project-menu) .nav-link:focus-visible{outline-color:var(--ink)}
}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .header-menu-icon{transition:none}}