:root { --project-gutter:4.5%;--project-copy-left:calc(var(--project-gutter) + (var(--vi-target) - var(--vi-icon-small)) / 2 + var(--vi-icon-small) * 7.3 / 24);--project-index-width:clamp(230px,24vw,330px);color-scheme:light;color:var(--vi-ink);background:var(--vi-surface);font-family:var(--vi-font-ui);font-synthesis:none; }
* { box-sizing:border-box; }body { margin:0;-webkit-font-smoothing:antialiased; }a { color:inherit;text-decoration:none; }button { font:inherit;color:inherit; }[hidden] { display:none!important; }
.project-skip { position:fixed;top:-100px;left:24px;z-index:60;padding:12px;background:var(--vi-surface); }.project-skip:focus { top:12px; }
.project-header { position:fixed;inset:0 0 auto;height:170px;z-index:20;pointer-events:none; }.project-header a { pointer-events:auto; }
.project-home { position:absolute;left:var(--project-gutter);top:22px; }
.project-navigation { position:absolute;right:4.5%;top:30px;display:flex;gap:26px;height:120px; }
/* Reuse the existing navigation's fixed text boxes, transform-only 1s morph
   and easing; the approved order is About, then Project at the right edge. */
.project-tab { --nav-display:clamp(84px,8vw,128px);position:relative;display:block;width:64px;height:32px;font-size:18px;line-height:24px; }
/* Anchor scaling at the visible Bricolage 700 glyph tops, not the line box.
   The two words have different ascenders (b / dotted j), so their font-relative
   insets differ. Keeping the origin on the ink preserves alignment mid-morph. */
.project-tab span { --nav-ink-top:.0815em;position:absolute;right:0;top:calc(-1 * var(--nav-ink-top));font-size:var(--nav-display);line-height:.9;font-weight:700;letter-spacing:-.065em;transform-origin:100% var(--nav-ink-top);transform:scale(calc(18px / var(--nav-display)));transition:color .45s; }
.project-tab-index { width:var(--project-index-width); }.project-tab-index span { --nav-ink-top:.0675em;left:0;right:auto;transform-origin:0 var(--nav-ink-top); }.project-tab-about { width:clamp(220px,23vw,368px); }
body[data-nav-view="project"] .project-tab-index span,body[data-nav-view="about"] .project-tab-about span { transform:scale(1); }
.project-tab:not([aria-current]) { color:var(--vi-text-secondary); }.project-tab:hover { color:var(--vi-focus); }
#project-overview { height:100dvh;position:relative;isolation:isolate;overflow:hidden; }
.project-stage { position:absolute;inset:0;z-index:-1; }.project-stage canvas { display:block;width:100%;height:100%;touch-action:none; }
.project-fallback { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(29vw,48vh,460px);aspect-ratio:1.5; }.project-fallback img { width:100%;height:100%;object-fit:contain; }
/* Chevron ink starts at 7.3/24 of its shared icon box (including stroke). */
.project-caption { position:absolute;left:var(--project-copy-left);top:50%;transform:translateY(-32px);width:25%;max-width:350px;display:grid;grid-template-columns:32px minmax(0,1fr);gap:24px; }
.project-number { font-size:14px;line-height:32px;align-self:start; }
.project-open { display:block;min-height:44px;cursor:pointer; }
.project-meta { position:relative; }
.project-meta-goo,.project-meta-layer { position:absolute;inset:0;pointer-events:none; }
.project-meta-goo { will-change:filter; }
.project-caption-row { display:grid;gap:12px; }
.project-caption-title { display:block;font-size:clamp(24px,1.667vw,32px);line-height:1.2;font-weight:600;letter-spacing:-.01em;margin:0; }
.project-meta-filter { position:absolute;width:0;height:0;pointer-events:none; }
/* The shader's View pill sits inside this same link hit area. Keep a bridge
   below the copy so moving from the text onto View never dismisses it. */
@media(min-width:1025px) and (hover:hover) and (pointer:fine) { .project-open { padding-bottom:76px; } }
.project-list { position:absolute;right:4.5%;top:165px;width:var(--project-index-width);max-height:calc(100dvh - 345px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin; }
.project-group + .project-group { margin-top:22px; }
.project-choice { display:flex;gap:12px;width:100%;min-height:30px;padding:5px 0;border:0;background:none;text-align:left;cursor:pointer;font-size:12px;line-height:20px;color:var(--vi-text-secondary); }
.project-choice span:first-child { min-width:20px;font-size:10px; }.project-choice[aria-current="true"] { color:var(--vi-ink);text-decoration:none; }.project-choice span:last-child { min-width:0; }.project-choice[aria-current="true"] span:last-child { font-size:16px;font-weight:700; }
.project-choice:not([aria-current="true"]):hover { color:var(--vi-focus); }
.project-context { margin-top:20px;font-size:12px;line-height:1.5;color:var(--vi-text-secondary); }.project-context-row { display:flex;justify-content:space-between;gap:24px; }.project-context-row>:last-child { flex-shrink:0; }.project-context p { margin:0; }.project-caption-category { max-width:200px; }
.project-controls { position:absolute;left:5.5%;right:4.5%;bottom:24px;display:flex;align-items:center;justify-content:flex-end;font-size:12px; }.project-controls>div { display:flex;gap:12px;align-items:center; }#project-count { min-width:58px;text-align:center; }
#project-about { padding:190px 6.25% 96px; }
.detail-heading { display:grid;grid-template-columns:1fr 1.4fr;gap:8%;margin-bottom:64px; }.detail-heading h1 { font-size:clamp(32px,3.2vw,48px);line-height:1.15;font-weight:400;margin:0; }.detail-kicker { font-size:13px;margin:0 0 16px;color:var(--vi-text-secondary); }.detail-summary { font-size:22px;line-height:1.45;margin:0;max-width:700px; }
.detail-hero { margin:0 0 64px; }.detail-hero img { display:block;width:100%;height:auto;max-height:80vh;object-fit:contain; }
.detail-overview { display:grid;grid-template-columns:1fr 1.4fr;gap:8%;margin:0 0 64px; }.detail-facts { font-size:14px;line-height:1.6;margin:0; }.detail-facts div { margin-bottom:22px; }.detail-facts dt { color:var(--vi-text-secondary); }.detail-facts dd { margin:3px 0 0; }.detail-story { font-size:17px;line-height:1.65; }.detail-story p { margin:0 0 24px; }.detail-story h2 { font-size:20px;font-weight:400;margin:36px 0 10px; }.detail-resources { display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:32px; }.detail-resources :is(a,button) { display:inline-flex;align-items:center;gap:8px;min-height:44px;font:inherit;font-size:14px;border:0;padding:0;background:none;cursor:pointer;text-decoration:underline;text-underline-offset:4px; }
.detail-gallery { display:grid;grid-template-columns:1fr 1fr;gap:56px 40px; }.detail-media { margin:0; }.detail-media img,.detail-media video { display:block;width:100%;height:auto;max-height:90vh;object-fit:contain; }.detail-media figcaption { margin-top:12px;font-size:12px;line-height:1.5;color:var(--vi-text-secondary); }.detail-media:has(video) { grid-column:1/-1; }
.detail-footer { display:flex;gap:24px;flex-wrap:wrap;margin-top:64px;font-size:15px; }.detail-footer a { min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px; }
body[data-view="about"] { overflow-y:auto; }body[data-view="project"] { overflow:hidden; }.project-error { position:absolute;inset:40% 10% auto;text-align:center;font-size:18px; }
body:not([data-ready]) .project-header,body:not([data-ready]) #project-overview { visibility:hidden; }
body[data-switching] #project-overview,body[data-switching] #project-about { visibility:hidden; }
body:not([data-renderer]) .project-list,body[data-renderer="loading"] .project-list { opacity:0; }
body[data-renderer="loading"] #project-canvas { visibility:hidden; }
@media(max-width:900px) {
 .project-header { height:90px; }.project-navigation { top:30px;gap:20px; }.project-tab-about,.project-tab-index { width:64px; }.project-tab { --nav-display:18px; }.project-tab span { --nav-ink-top:0px;font-weight:400;letter-spacing:normal;line-height:24px; }
 .project-stage { top:152px;bottom:calc(var(--project-caption-height,180px) + 120px); }.project-caption { left:var(--project-copy-left);right:6.25%;top:auto;bottom:96px;transform:none;width:auto;max-width:none;gap:16px; }.project-caption-title { font-size:24px; }
 .project-context { font-size:11px; }.project-caption-category { max-width:65%; }
 .project-list { top:92px;left:6.25%;right:6.25%;width:auto;display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;max-height:50px; }.project-choice { flex:0 0 auto;width:auto;white-space:nowrap;min-height:44px; }.project-controls { left:6.25%;right:6.25%;bottom:20px; }
 .project-group { display:flex;gap:20px;flex:0 0 auto; }.project-group + .project-group { margin:0 0 0 24px; }
 .project-fallback { width:80%; }.detail-heading,.detail-overview { grid-template-columns:1fr;gap:28px; }#project-about { padding-top:120px; }.detail-heading { margin-bottom:32px; }.detail-heading h1 { font-size:32px; }.detail-summary { font-size:20px; }.detail-hero { margin-bottom:32px; }.detail-facts { display:grid;grid-template-columns:1fr 1fr;gap:18px; }.detail-facts div { margin:0; }.detail-story { font-size:16px; }.detail-gallery { grid-template-columns:1fr;gap:36px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important;animation:none!important;scroll-behavior:auto!important; } }

/* Original Viscose load counter, gated by the artwork and seed birth. */
#project-loader { position:absolute;left:50%;bottom:1vh;transform:translateX(-50%);font-size:12px;pointer-events:none; }