@font-face{font-family:Instrument;src:url('./fonts/instrument-sans-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Instrument;src:url('./fonts/instrument-sans-medium.ttf') format('truetype');font-weight:500;font-display:swap}
:root{--ink:#f7f8f8;--surface:#101416;--muted:#b5bec1;--line:#415055;--margin:clamp(24px,4vw,80px);--gap:24px;--cols:12;--step:8px;--header:144px;--footer:96px;color-scheme:dark;font-family:Instrument,Arial,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--surface);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:6px}.frame{margin-inline:var(--margin);position:relative;z-index:3}header{min-height:var(--header);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);align-items:start;padding-top:40px}.brand{grid-column:1/4;width:180px;display:block;padding-top:6px}.brand img{width:100%;height:auto;display:block;filter:brightness(0) invert(1)}nav{grid-column:7/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}nav a{font-size:1rem;min-height:44px;display:flex;align-items:center;border-bottom:1px solid transparent}nav a:hover,nav a[aria-current]{border-bottom-color:currentColor}main{min-height:calc(100svh - var(--header) - var(--footer));padding:32px 0 80px}.eyebrow{font-size:.875rem;color:var(--muted);margin:0 0 24px}h1{font-size:clamp(48px,7vw,112px);font-weight:400;letter-spacing:-.045em;line-height:1.06;margin:0 0 64px;text-wrap:balance}h2{font-size:clamp(28px,3vw,48px);font-weight:400;letter-spacing:-.025em;line-height:1.15;margin:0}.lead{font-size:clamp(24px,3vw,40px);line-height:1.3;max-width:28ch;letter-spacing:-.018em;text-wrap:pretty;margin:0 0 32px}.body-copy{max-width:60ch;font-size:1.125rem}.text-link{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-underline-offset:6px}footer{min-height:var(--footer);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:.875rem}footer p{margin:0}.home main{display:flex;align-items:flex-end;padding-bottom:72px}.home-caption{margin-left:calc(50% + var(--gap)/2);font-size:clamp(36px,4.8vw,76px);line-height:1.07;letter-spacing:-.035em}.home-caption p{margin:0}.home{background:#101416 url('./media/poster.jpg') center/cover fixed}.home #background-video{position:fixed;inset:0;width:100%;height:100svh;object-fit:cover;pointer-events:none;z-index:0}.film-grain{position:fixed;inset:-35%;z-index:1;pointer-events:none;background:url('./media/film-grain.jpg') 0 0/360px repeat;opacity:.62;mix-blend-mode:overlay;animation:film-grain .22s steps(2,end) infinite}.video-shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.14) 45%,rgba(0,0,0,.58));z-index:2;pointer-events:none}@keyframes film-grain{0%,100%{transform:translate(0)}25%{transform:translate(4%,-3%)}50%{transform:translate(-4%,5%)}75%{transform:translate(3%,2%)}}body.motion-paused .film-grain{animation-play-state:paused}.project-index{border-top:1px solid var(--line)}.project-index>a{display:grid;grid-template-columns:1fr 7fr 4fr;gap:var(--gap);padding:32px 0;border-bottom:1px solid var(--line);align-items:baseline}.project-index>a:hover h2{text-decoration:underline;text-underline-offset:8px}.project-index p{margin:0;color:var(--muted)}.workspace-tools{position:fixed;bottom:112px;left:var(--margin);z-index:8;display:flex;gap:8px}.workspace-tools button{font-size:.875rem;background:rgba(16,20,22,.9);border:1px solid #76858b;border-radius:0;min-height:44px;padding:8px 16px}.workspace-tools button[aria-pressed=true]{background:#d7ff53;color:#101416}.skip{position:fixed;top:8px;left:8px;z-index:20;padding:12px;background:white;color:black;transform:translateY(-150%)}.skip:focus{transform:none}[hidden]{display:none!important}#grid-overlay{position:fixed;inset:0;z-index:7;pointer-events:none}.grid-cols{position:absolute;inset:0 var(--margin);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}.grid-cols>div{background:rgba(215,255,83,.045);border-inline:1px solid rgba(215,255,83,.45);padding-top:8px;text-align:center;color:#d7ff53;font:12px monospace}.grid-rows{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 7px,rgba(215,255,83,.07) 7px,rgba(215,255,83,.07) 8px)}.row-label{position:absolute;left:4px;color:#d7ff53;font:12px monospace;border-top:1px solid rgba(215,255,83,.5);width:calc(100% - 8px)}.grid-readout{position:absolute;bottom:16px;left:var(--margin);color:#d7ff53;background:#101416;padding:8px;font:12px monospace}
@media(max-width:1100px){:root{--cols:8;--gap:20px;--header:160px}.brand{grid-column:1/3}nav{grid-column:4/-1;justify-content:flex-end;gap:8px 20px}}
@media(max-width:700px){:root{--cols:4;--margin:24px;--gap:16px;--header:184px;--footer:112px}header{padding-top:24px;gap:20px}.brand{grid-column:1/-1;width:160px}nav{grid-column:1/-1;justify-content:flex-start;gap:0 20px}nav a{font-size:.875rem}.home-caption{margin-left:0;font-size:48px}.home main{padding-bottom:104px}h1{margin-bottom:48px}.project-index>a{grid-template-columns:32px 1fr}.project-index p{grid-column:2}footer{align-items:flex-end;padding-bottom:24px;font-size:.875rem;flex-wrap:wrap}.workspace-tools{bottom:128px}.lead{font-size:28px}}
@media(prefers-reduced-motion:reduce){.film-grain{animation:none}#background-video{display:none}}
@media print{.workspace-tools,#grid-overlay,.film-grain,#background-video,.video-shade{display:none!important}body{background:white;color:black}.brand img{filter:none}}
/* Urbanissimo v2: permanent fine viewport grid and yellow navigation. */
nav{background:#0c1011;align-self:start;padding:4px 16px;gap:4px 20px;color:#d7ff53;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}nav a{border:0;font-size:1rem;white-space:nowrap}nav a:hover,nav a[aria-current]{border:0;text-decoration:underline;text-underline-offset:5px}.home-caption,.workspace-tools{display:none}.home #background-video{transform:scale(1.2)}.home{background-size:auto 120svh}.home main{padding:0}footer .discipline{color:#d7ff53;background:#0c1011;padding:8px 12px;font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}#grid-overlay{display:block;z-index:2;overflow:hidden}.fine-grid{position:absolute;inset:0;border:1px solid rgba(215,255,83,.14);background-image:linear-gradient(to right,rgba(215,255,83,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(215,255,83,.1) 1px,transparent 1px);background-size:var(--cell-x) var(--cell-y)}.edge-labels span{position:absolute;color:#d7ff53;font:8px/1 monospace;background:rgba(12,16,17,.7);padding:2px}.edge-x{top:0;transform:translateX(-50%)}.edge-x:first-child{transform:none}.edge-y{left:0;transform:translateY(-50%)}@media(max-width:700px){nav{padding:4px 12px;gap:0 16px}nav a{font-size:14px}footer .discipline{font-size:12px;padding:8px}footer{gap:8px}}@media print{#grid-overlay{display:none!important}}
/* v3: typography and content registration to the fine grid. */
nav{background:transparent;padding:0;gap:0 24px;justify-content:flex-end;align-items:start}nav a{font-size:8px;line-height:16px;min-height:24px;letter-spacing:0;font-weight:400;font-kerning:normal;text-rendering:optimizeLegibility}.brand{padding-top:0}footer .discipline{padding:0;line-height:16px}footer p{line-height:16px}.edge-labels span{background:none;padding:0;opacity:.45;font-size:7px;line-height:8px;font-variant-numeric:tabular-nums}.edge-x{transform:none;top:0}.edge-y{transform:none;left:0}.edge-x:first-child{transform:none}.project-index>a{align-items:start}h1,h2,.lead{font-kerning:normal;text-rendering:optimizeLegibility}nav a:focus-visible{outline-offset:4px}@media(max-width:700px){nav{padding:0;gap:0 16px;justify-content:flex-start}nav a{font-size:7px;line-height:16px;min-height:24px}footer .discipline{font-size:12px;padding:0}}
/* v6: cell-shaped navigation highlights. */
footer p:not(.discipline){font-size:8px;line-height:8px}
nav a{position:relative;isolation:isolate;overflow:visible}
nav a .menu-cell-patch{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:-1}
nav a .menu-cell-patch i{position:absolute;display:block;background:#d7ff53}
nav a:hover,nav a:focus-visible{color:#000;text-decoration:none}
nav a:hover .menu-cell-patch,nav a:focus-visible .menu-cell-patch{opacity:1}
/* v7: exact hover colors, opaque highlight above background effects. */
nav a:hover,nav a:focus-visible{color:#000000!important;opacity:1;mix-blend-mode:normal;filter:none}
nav a:hover .menu-cell-patch,nav a:focus-visible .menu-cell-patch{opacity:1!important;mix-blend-mode:normal;filter:none}
nav a .menu-cell-patch i{background-color:#d7ff53!important;opacity:1;mix-blend-mode:normal;filter:none}
/* v8: exact visible mark height and quieter signature. */
.brand{height:calc(2 * var(--cell-y,8px));padding:0;line-height:0}.brand img{height:100%;width:100%;object-fit:contain}footer p:not(.discipline){opacity:.4;line-height:var(--cell-y,8px)}
/* v9: shared bottom baseline registered to viewport grid. */
footer{flex-wrap:nowrap;align-items:center}footer p{position:relative;flex-shrink:0;white-space:nowrap}footer p:not(.discipline){color:#d7ff53;opacity:.4;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}footer .discipline{background:none}
/* v10: footer is registered by visible glyph bounds, not line boxes. */
footer p{position:fixed!important;white-space:nowrap;font-kerning:normal;letter-spacing:0}footer .discipline{background:none}
/* Fine-grid square cursor on devices with a precise pointer. */
.grid-cursor{position:fixed;left:0;top:0;width:var(--cell-x,8px);height:var(--cell-y,8px);background:#d7ff53;pointer-events:none;z-index:2147483647;display:none}
@media(hover:hover) and (pointer:fine){html.square-cursor,html.square-cursor *{cursor:none!important}.square-cursor .grid-cursor.is-visible{display:block}}
/* Invert the menu colors beneath the square cursor. */
.grid-cursor.over-menu{background:#ffffff;mix-blend-mode:difference}
/* Sequential entrance motion; final positions remain registered to the grid. */
@keyframes brand-arrive{0%{transform:translateX(-110vw)}68%{transform:translateX(10px)}84%{transform:translateX(-3px)}100%{transform:translateX(0)}}
@keyframes menu-arrive{0%{transform:translateX(110vw)}68%{transform:translateX(-8px)}84%{transform:translateX(2px)}100%{transform:translateX(0)}}
@keyframes caption-arrive{0%{transform:translateY(120px)}70%{transform:translateY(-5px)}86%{transform:translateY(1px)}100%{transform:translateY(0)}}
.home .brand{animation:brand-arrive 1.05s cubic-bezier(.18,.75,.22,1) both}
.home nav{animation:menu-arrive 1.05s cubic-bezier(.18,.75,.22,1) 1.05s both}
.home footer .discipline{animation:caption-arrive .85s cubic-bezier(.18,.75,.22,1) 2.1s both;color:#d7ff53;opacity:1;background:none}
body{overflow-x:clip}
@media(prefers-reduced-motion:reduce){.brand,nav,footer .discipline{animation:none}}
/* Delicate atmospheric cell clusters behind the interface. */
.cell-haze-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cell-haze{position:absolute;opacity:0;backdrop-filter:blur(2px) saturate(.85);-webkit-backdrop-filter:blur(2px) saturate(.85);background:rgba(205,218,215,.055);animation:haze-breathe var(--haze-duration,8s) ease-in-out both}
@keyframes haze-breathe{0%,100%{opacity:0}35%,60%{opacity:.65}}
@media(prefers-reduced-motion:reduce){.cell-haze-layer{display:none}}

.film-grain{z-index:2}#grid-overlay{z-index:2}

/* Grid-derived adaptive shell: internal pages deliberately remain empty. */
.interior{background:#000}.edge-labels span{opacity:.65}
header{pointer-events:none}.brand{pointer-events:auto}nav{position:fixed;inset:0 0 auto 0;height:0;padding:0;pointer-events:none;display:block}nav a{pointer-events:auto;display:flex;align-items:center}
@keyframes logo-quiver{0%,100%{transform:translate(0,0)}25%{transform:translate(.4px,-.25px)}50%{transform:translate(-.35px,.2px)}75%{transform:translate(.2px,.15px)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.brand:hover img{animation:logo-quiver .24s ease-in-out infinite}}

.interior{min-height:100svh}

/* Alternate video keeps the exact 5:4 source crop; both share the grain overlay. */
.home #background-video-alt{position:fixed;inset:0;width:100%;height:100svh;object-fit:cover;transform:none;pointer-events:none;z-index:0;opacity:0;transition:opacity .65s ease}
.home #background-video{transition:opacity .65s ease}.home.video-alternate #background-video-alt{opacity:1}.home.video-alternate #background-video{opacity:0}
@media(prefers-reduced-motion:reduce){.home #background-video,.home #background-video-alt{transition:none}}