:root{--font-display:"IBM Plex Sans", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;--font-body:"IBM Plex Sans", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--color-paper:oklch(90.5% .022 238);--color-paper-2:oklch(97% .008 238);--color-paper-3:oklch(86% .026 238);--color-paper-4:oklch(75% .036 238);--color-ink:oklch(22% .035 246);--color-ink-2:oklch(39% .032 246);--color-muted:oklch(50% .03 246);--color-neutral:oklch(69% .024 246);--color-rule:oklch(74% .03 238);--color-rule-2:oklch(62% .04 238);--color-accent:oklch(58% .13 198);--color-accent-2:oklch(72% .14 68);--color-accent-ink:oklch(99% .004 238);--color-focus:oklch(62% .15 198);--color-error:oklch(66% .19 28);--color-success:oklch(61% .12 154);--color-canvas-fog:oklch(78% .038 238);--color-canvas-line:oklch(58% .12 198);--space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;--space-4xl:9rem;--text-xs:.64rem;--text-sm:.8rem;--text-base:1rem;--text-md:1.25rem;--text-lg:1.5625rem;--text-xl:1.953rem;--text-2xl:2.441rem;--text-3xl:3.052rem;--text-4xl:3.815rem;--text-display-s:clamp(2.5rem, 4vw + 1rem, 4.5rem);--text-display:clamp(3rem, 5vw + 1rem, 5.25rem);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-micro:.12s;--dur-short:.22s;--dur-long:.42s;--rule-hair:1px;--radius-xs:.25rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--z-base:1;--z-raised:10;--z-dropdown:100;--z-sticky:200;--z-modal:400;--z-toast:500;--z-tooltip:600;--page-gutter:clamp(1rem, 4vw, 3rem);--content-max:88rem}*,:before,:after{box-sizing:border-box}html,body{background:var(--color-paper);min-width:0;color:var(--color-ink);margin:0;overflow-x:clip}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;scroll-behavior:smooth}body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);text-rendering:optimizelegibility;line-height:1.6}body:before{content:"";z-index:0;pointer-events:none;background:linear-gradient(to bottom, color-mix(in oklch, var(--color-ink) 14%, transparent) 0%, transparent 38%, color-mix(in oklch, var(--color-paper) 10%, transparent) 78%, color-mix(in oklch, var(--color-paper) 34%, transparent) 100%), url(/portfolio/backgrounds/architectural-light.jpg) center top / cover no-repeat;filter:saturate(.96)contrast(1.04)brightness(.92);opacity:1;position:fixed;inset:0}body:after{content:"";z-index:0;pointer-events:none;background-image:linear-gradient(color-mix(in oklch, var(--color-rule) 34%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--color-rule) 28%, transparent) 1px, transparent 1px);opacity:.14;background-size:3.5rem 3.5rem,3.5rem 3.5rem;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 12% 84%,#0000);mask-image:linear-gradient(#0000,#000 12% 84%,#0000)}a{color:inherit;-webkit-text-decoration-color:color-mix(in oklch, var(--color-accent) 78%, transparent);text-decoration-color:color-mix(in oklch, var(--color-accent) 78%, transparent);text-underline-offset:.2em}button,a{-webkit-tap-highlight-color:transparent}:focus{outline:none}:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}main,footer,nav,.gallery-hud,.canvas-status{z-index:var(--z-raised);position:relative}.skip-link{z-index:var(--z-tooltip);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-accent-ink);transition:transform var(--dur-short) var(--ease-out);position:fixed;inset-block-start:var(--space-sm);inset-inline-start:var(--space-sm);transform:translateY(-140%)}.skip-link:focus-visible{transform:none}#gallery-canvas{z-index:var(--z-base);background:0 0;width:100%;height:100%;display:block;position:fixed;inset:0}.nav-pill{z-index:var(--z-sticky);align-items:center;gap:var(--space-md);min-height:3rem;max-width:min(calc(100% - var(--page-gutter) * 2), 42rem);padding:var(--space-xs) var(--space-sm);border:var(--rule-hair) solid var(--color-rule);background:color-mix(in oklch, var(--color-paper-2) 84%, transparent);-webkit-backdrop-filter:blur(14px)saturate(118%);backdrop-filter:blur(14px)saturate(118%);box-shadow:0 1rem 2.5rem color-mix(in oklch, var(--color-ink) 10%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-paper-2) 84%, transparent);border-radius:999px;display:inline-flex;position:fixed;inset-block-start:max(var(--space-md), env(safe-area-inset-top));inset-inline-start:50%;transform:translate(-50%)}.wordmark{font-family:var(--font-mono);letter-spacing:0;white-space:nowrap;font-weight:700;text-decoration:none}.nav-pill__links{align-items:center;gap:var(--space-sm);color:var(--color-ink-2);font-size:var(--text-sm);display:inline-flex}.nav-pill__links a,.nav-pill__cta{white-space:nowrap;align-items:center;min-height:2rem;text-decoration:none;display:inline-flex}.nav-pill__cta{padding-inline:var(--space-sm);background:var(--color-ink);color:var(--color-paper);font-size:var(--text-sm);transition:background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform .1s var(--ease-out);border-radius:999px}@media (hover:hover) and (pointer:fine){.nav-pill__cta:hover{background:var(--color-accent);color:var(--color-accent-ink);transform:translateY(-1px)}}.nav-pill__cta:active{transform:translateY(1px)}.hero-marquee{isolation:isolate;align-content:end;gap:var(--space-md);min-height:70dvh;max-width:var(--content-max);padding:min(18dvh, var(--space-3xl)) var(--page-gutter) var(--space-lg);margin-inline:auto;display:grid;position:relative}.hero-kicker,.gallery-hud__count,.gallery-hud__meta,.project-card__meta,.approach-list dt{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-muted);margin:0}.hero-marquee h1{max-width:13ch;font-family:var(--font-display);font-size:var(--text-display);letter-spacing:0;line-break:strict;word-break:auto-phrase;-webkit-text-stroke:.018em color-mix(in oklch, var(--color-paper-2) 46%, transparent);paint-order:stroke fill;text-shadow:0 1px 0 color-mix(in oklch, var(--color-paper-2) 54%, transparent), 0 1rem 2rem color-mix(in oklch, var(--color-ink) 12%, transparent);margin:0;font-weight:700;line-height:.95}.hero-marquee h1 span{white-space:nowrap;display:block}.gallery-hud{width:min(calc(100% - var(--page-gutter) * 2), 34rem);margin-inline-start:var(--page-gutter);margin-block:var(--space-md) 0;gap:var(--space-md);padding:var(--space-md);border:var(--rule-hair) solid color-mix(in oklch, var(--color-rule-2) 72%, transparent);border-radius:var(--radius-md);background:color-mix(in oklch, var(--color-paper-2) 84%, transparent);-webkit-backdrop-filter:blur(14px)saturate(110%);backdrop-filter:blur(14px)saturate(110%);box-shadow:0 1.5rem 3.5rem color-mix(in oklch, var(--color-ink) 11%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-paper-2) 86%, transparent);grid-template-columns:auto minmax(0,1fr);align-items:start;display:grid}.gallery-hud h2{margin:var(--space-2xs) 0 0;font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:0;line-height:1.1}.gallery-hud p{max-width:60ch}.gallery-hud__links{gap:var(--space-sm);flex-wrap:wrap;display:flex}.gallery-hud__links a,.project-card__link{min-height:2.75rem;color:var(--color-ink);text-decoration-thickness:var(--rule-hair);white-space:nowrap;align-items:center;display:inline-flex}.scroll-stage{height:max(320dvh,64rem)}.work-index,.approach,.foot-stmt{max-width:var(--content-max);padding-inline:var(--page-gutter);margin-inline:auto}.work-index{isolation:isolate;padding-block:var(--space-3xl) var(--space-2xl);position:relative}.work-index:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(to bottom, color-mix(in oklch, var(--color-paper) 74%, transparent), color-mix(in oklch, var(--color-paper-2) 84%, transparent) 42%, color-mix(in oklch, var(--color-paper) 82%, transparent));border-block:var(--rule-hair) solid color-mix(in oklch, var(--color-rule) 72%, transparent);-webkit-backdrop-filter:blur(6px)saturate(110%);backdrop-filter:blur(6px)saturate(110%);position:absolute;inset:0 calc(-50vw + 50%)}.section-head{gap:var(--space-lg);grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:end;margin-block-end:var(--space-lg);display:grid}.section-head--compact{margin-block-end:var(--space-lg)}.section-head h2{font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:0;margin:0;line-height:1}.section-head p{max-width:55ch;color:var(--color-ink-2);margin:0}.filter-bar{gap:var(--space-sm);flex-wrap:wrap;margin-block-end:var(--space-lg);display:flex}.filter-button{border:var(--rule-hair) solid color-mix(in oklch, var(--color-rule-2) 68%, transparent);min-height:2.75rem;padding-inline:var(--space-md);background:color-mix(in oklch, var(--color-paper-2) 84%, transparent);color:var(--color-ink-2);font:inherit;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform .1s var(--ease-out);border-radius:999px}.filter-button[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}@media (hover:hover) and (pointer:fine){.filter-button:hover{transform:translateY(-1px)}}.filter-button:active{transform:translateY(1px)}.project-grid{gap:var(--space-lg) var(--space-md);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.project-card{border:var(--rule-hair) solid color-mix(in oklch, var(--color-rule) 74%, transparent);border-radius:calc(var(--radius-md) + var(--space-xs));background:color-mix(in oklch, var(--color-paper-2) 80%, transparent);-webkit-backdrop-filter:blur(8px)saturate(112%);backdrop-filter:blur(8px)saturate(112%);min-width:0;box-shadow:0 1rem 2.4rem color-mix(in oklch, var(--color-ink) 7%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-paper-2) 76%, transparent);gap:0;padding:0;display:grid;overflow:clip}.project-card[hidden]{display:none}.project-card__media{aspect-ratio:4/3;border:0;border-block-end:var(--rule-hair) solid var(--color-rule);border-radius:calc(var(--radius-md) + var(--space-xs) - var(--rule-hair)) calc(var(--radius-md) + var(--space-xs) - var(--rule-hair)) 0 0;background:var(--color-paper-2);width:100%;min-width:0;max-width:100%;color:inherit;cursor:pointer;box-shadow:none;padding:0;display:block;position:relative;overflow:clip}.project-card__media img{object-fit:cover;width:100%;max-width:100%;height:100%;transition:transform var(--dur-long) var(--ease-out);display:block}.project-card__badge{z-index:1;min-height:1.75rem;padding-inline:var(--space-sm);border:var(--rule-hair) solid color-mix(in oklch, var(--color-rule-2) 58%, transparent);background:color-mix(in oklch, var(--color-paper-2) 76%, transparent);color:var(--color-ink);font-family:var(--font-mono);font-size:var(--text-xs);-webkit-backdrop-filter:blur(10px)saturate(130%);backdrop-filter:blur(10px)saturate(130%);box-shadow:0 .5rem 1.5rem color-mix(in oklch, var(--color-ink) 12%, transparent);border-radius:999px;align-items:center;display:inline-flex;position:absolute;inset-block-start:var(--space-sm);inset-inline-start:var(--space-sm)}.project-card[data-active] .project-card__media{border-color:var(--color-accent)}.project-card[data-active]{border-color:color-mix(in oklch, var(--color-accent) 52%, var(--color-rule))}@media (hover:hover) and (pointer:fine){.project-card__media img{will-change:transform}.project-card__media:hover img,.project-card:focus-within .project-card__media img{transform:scale(1.02)}}.project-card__body{gap:var(--space-xs);min-width:0;max-width:100%;padding:var(--space-sm);display:grid}.project-card h3{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:0;margin:0;line-height:1.1}.project-card p{color:var(--color-ink-2);margin:0}.gallery-hud p,.project-card p,.section-head p,.approach-list dd{line-break:strict;word-break:auto-phrase;overflow-wrap:normal}.approach{padding-block:var(--space-2xl) var(--space-3xl)}.approach-list{gap:var(--space-lg);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.approach-list div{gap:var(--space-sm);padding:var(--space-md);border:var(--rule-hair) solid color-mix(in oklch, var(--color-rule) 78%, transparent);border-radius:var(--radius-md);background:color-mix(in oklch, var(--color-paper-2) 58%, transparent);-webkit-backdrop-filter:blur(12px)saturate(106%);backdrop-filter:blur(12px)saturate(106%);display:grid}.approach-list dd{color:var(--color-ink-2);margin:0}.foot-stmt{padding-block:var(--space-2xl) var(--space-xl);display:grid}.foot-stmt__meta{justify-content:space-between;gap:var(--space-md);border-block-start:var(--rule-hair) solid var(--color-rule);color:var(--color-muted);font-size:var(--text-sm);padding-block-start:var(--space-sm);display:flex}.canvas-status{inset-inline:var(--page-gutter);min-height:1.5rem;color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);pointer-events:none;position:fixed;inset-block-end:max(var(--space-md), env(safe-area-inset-bottom))}.is-reduced-motion .scroll-stage{height:20dvh}@media (width<=60rem){.nav-pill{gap:var(--space-sm)}.nav-pill__links{display:none}.hero-marquee{min-height:64dvh}.gallery-hud{grid-template-columns:minmax(0,1fr)}.section-head,.approach-list{grid-template-columns:1fr}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=40rem){.nav-pill{inset-inline-start:auto;inset-inline-end:var(--page-gutter);transform:none}.hero-marquee h1{font-size:var(--text-display-s)}.gallery-hud{width:calc(100% - var(--page-gutter) * 2);margin-inline:var(--page-gutter)}.work-index{padding-block-start:var(--space-2xl)}.section-head{margin-block-end:var(--space-lg)}.filter-bar{gap:var(--space-xs);width:calc(100% + var(--page-gutter) * 2);margin-inline:calc(var(--page-gutter) * -1);padding-inline:var(--page-gutter);overscroll-behavior-inline:contain;scrollbar-width:none;flex-wrap:nowrap;margin-block-end:var(--space-lg);padding-block-end:var(--space-xs);overflow-x:auto}.filter-bar::-webkit-scrollbar{display:none}.filter-button{min-height:2.5rem;padding-inline:var(--space-sm);flex:none}.project-grid{gap:var(--space-lg);grid-template-columns:1fr}.foot-stmt__meta{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.15s!important;animation-duration:.15s!important;animation-iteration-count:1!important}}