.op-page{--op-rule:color-mix(in srgb, var(--color-foreground) 14%, var(--color-background));--op-rule-soft:color-mix(in srgb, var(--color-foreground) 7%, var(--color-background));--op-scroll-thumb:color-mix(in srgb, var(--color-muted) 60%, var(--color-background));--op-safe-gutter-left:max(var(--spacing-archive-gutter), env(safe-area-inset-left));--op-safe-gutter-right:max(var(--spacing-archive-gutter), env(safe-area-inset-right));background:var(--color-background);min-height:100svh;color:var(--color-foreground);isolation:isolate;overflow-x:clip}.op-page a{text-decoration:none}.op-skip-link{top:max(12px, env(safe-area-inset-top));z-index:100;border:1px solid var(--color-signal);background:var(--color-background);min-height:44px;font-family:var(--font-mono);font-size:var(--text-archive-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-foreground);align-items:center;padding:10px 14px;transition:transform .16s ease-out;display:inline-flex;position:fixed;left:50%;transform:translate(-50%,-160%)}.op-skip-link:focus{transform:translate(-50%)}.op-chrome{z-index:20;width:min(100%, calc(var(--container-archive) + var(--spacing-archive-gutter) + var(--spacing-archive-gutter)));padding:max(clamp(28px, 4.5vw, 64px), env(safe-area-inset-top)) var(--op-safe-gutter-right) 0 var(--op-safe-gutter-left);justify-content:space-between;align-items:flex-start;gap:28px;margin-inline:auto;animation:.6s ease-out 80ms both op-enter;display:flex;position:absolute;top:0;left:0;right:0}.op-brand{flex-direction:column;gap:6px;display:flex}.op-logo,.op-availability,.op-nav{font-family:var(--font-mono);font-size:var(--text-archive-label);letter-spacing:var(--tracking-label);text-transform:uppercase}.op-logo{color:var(--color-foreground)}.op-back-link{align-items:center;gap:10px;min-height:44px;display:inline-flex}.op-back-arrow{color:var(--color-signal);font-size:17px;line-height:1;transition:transform .16s ease-out}.op-back-link:hover .op-back-arrow,.op-back-link:focus-visible .op-back-arrow{transform:translate(-3px)}.op-availability{color:var(--color-muted);margin:0}.op-availability span{color:var(--color-status)}.op-nav{justify-content:flex-end;align-items:center;gap:clamp(18px,2.2vw,34px);line-height:1.4;display:flex}.op-nav a,.op-nav>span{color:var(--color-muted);transition:color .16s ease-out}.op-nav a{align-items:center;min-height:44px;display:inline-flex}.op-nav>span[aria-current=page]{color:color-mix(in srgb, var(--color-foreground) 84%, var(--color-background))}.op-nav a:hover{color:var(--color-foreground)}.op-intro{border-bottom:1px solid var(--op-rule);flex-direction:column;justify-content:flex-end;align-items:stretch;min-height:min(820px,82svh);padding:clamp(154px,18svh,210px) 0 0;display:flex;position:relative}.op-intro:before{content:"";top:clamp(126px,15svh,170px);bottom:0;left:max(var(--op-safe-gutter-left), calc((100vw - var(--container-archive)) / 2));background:linear-gradient(to bottom, transparent, var(--op-rule) 32%, var(--op-rule));opacity:.65;pointer-events:none;width:1px;position:absolute}.op-intro-grid,.op-project-header,.op-tools,.op-lesson,.op-media-toolbar,.op-footer{width:min(100%, calc(var(--container-archive) + var(--spacing-archive-gutter) + var(--spacing-archive-gutter)));padding-left:var(--op-safe-gutter-left);padding-right:var(--op-safe-gutter-right);margin-inline:auto}.op-intro-grid{grid-template-columns:minmax(180px,.28fr) minmax(0,1fr);align-items:end;gap:clamp(42px,7vw,120px);display:grid}.op-intro-index{font-family:var(--font-mono);text-transform:uppercase;padding-left:18px;animation:.68s ease-out .18s both op-enter}.op-intro-index>p:first-child,.op-intro-count-label{font-size:var(--text-archive-label);letter-spacing:var(--tracking-label);color:var(--color-muted);margin:0}.op-intro-count{letter-spacing:-.04em;color:var(--color-foreground);align-items:baseline;gap:10px;margin-top:clamp(36px,6svh,64px);font-size:clamp(28px,2.6vw,42px);font-weight:500;line-height:1;display:flex}.op-intro-count-label{margin-top:10px;line-height:1.5}.op-intro-copy{animation:.76s cubic-bezier(.2,.7,.2,1) .12s both op-enter}.op-intro-copy h1{font-family:var(--font-mono);font-size:var(--text-archive-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-muted);margin:0;font-weight:500}.op-intro-thesis{max-width:14ch;font-size:var(--text-archive-hero);letter-spacing:-.052em;text-wrap:balance;text-shadow:0 0 22px color-mix(in srgb, var(--color-foreground) 7%, transparent);margin:clamp(20px,3svh,34px) 0 0;font-weight:560;line-height:.98}.op-intro-lede{max-width:61ch;font-size:var(--text-archive-body);color:var(--color-muted);margin:clamp(28px,4svh,42px) 0 0;line-height:1.65}.op-evidence-rail{width:min(100%, calc(var(--container-archive) + var(--spacing-archive-gutter) + var(--spacing-archive-gutter)));height:clamp(150px,21svh,230px);padding-left:var(--op-safe-gutter-left);padding-right:var(--op-safe-gutter-right);background:var(--op-rule);grid-template-columns:.78fr .86fr 1.28fr;gap:1px;margin:clamp(42px,6svh,70px) auto 0;animation:.76s cubic-bezier(.2,.7,.2,1) .24s both op-enter;display:grid}.op-evidence-item{background:var(--color-raised);min-width:0;color:var(--color-foreground);position:relative;overflow:hidden}.op-evidence-item:after{content:"";background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-background) 88%, transparent));pointer-events:none;position:absolute;inset:36% 0 0}.op-evidence-item img{object-fit:cover;filter:saturate(.76)contrast(1.04)brightness(.84);width:100%;height:100%;transition:transform .42s cubic-bezier(.2,.7,.2,1);display:block}.op-evidence-item>span{z-index:1;font-family:var(--font-mono);font-size:var(--text-archive-label);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 10px var(--color-background);line-height:1.45;position:absolute;bottom:12px;left:14px;right:14px}.op-evidence-item>span span{color:var(--color-signal)}@media (hover:hover) and (pointer:fine){.op-evidence-item:hover img{transform:scale(1.015)}}.op-project{padding-block:var(--spacing-archive-section);border-top:1px solid var(--op-rule);scroll-margin-top:32px;position:relative}.op-project:first-child{border-top:0}.op-project:before{content:"";top:-1px;left:max(var(--op-safe-gutter-left), calc((100vw - var(--container-archive)) / 2));background:var(--color-signal);opacity:.5;width:clamp(46px,6vw,92px);height:1px;position:absolute}.op-project:first-child:before{display:none}.op-project-header,.op-tools,.op-lesson{grid-template-columns:minmax(190px,.27fr) minmax(0,1fr);gap:clamp(42px,7vw,120px);display:grid}.op-project-meta{font-family:var(--font-mono);text-transform:uppercase;padding-top:8px}.op-project-number,.op-project-status,.op-project-qualification{font-size:var(--text-archive-label);letter-spacing:var(--tracking-label);margin:0;line-height:1.55}.op-project-number{color:var(--color-muted)}.op-project-number span{color:color-mix(in srgb, var(--color-muted) 48%, var(--color-background))}.op-project-status{color:color-mix(in srgb, var(--color-foreground) 78%, var(--color-background));margin-top:clamp(28px,4vw,48px);padding-left:16px;position:relative}.op-project-status:before{content:"";border:1px solid var(--color-signal);width:5px;height:5px;box-shadow:0 0 7px color-mix(in srgb, var(--color-signal) 36%, transparent);border-radius:50%;position:absolute;top:.56em;left:0}.op-project-qualification{letter-spacing:.07em;max-width:27ch;color:var(--color-muted);margin-top:12px}.op-project-copy h2{max-width:23ch;font-size:var(--text-archive-title);letter-spacing:-.045em;text-wrap:balance;margin:0;font-weight:560;line-height:1.03}.op-project-summary{max-width:72ch;font-size:var(--text-archive-body);color:var(--color-muted);margin:clamp(26px,3.8vw,44px) 0 0;line-height:1.68}.op-tools{align-items:start;margin-top:clamp(48px,6vw,82px)}.op-tools h3,.op-lesson h3{font-family:var(--font-mono);font-size:var(--text-archive-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-muted);margin:0;font-weight:500;line-height:1.5}.op-tools ul{color:color-mix(in srgb, var(--color-foreground) 78%, var(--color-background));flex-wrap:wrap;gap:10px 12px;margin:0;padding:0;font-size:clamp(13px,.2vw + 12px,15px);line-height:1.5;list-style:none;display:flex}.op-tools li{align-items:center;gap:12px;display:inline-flex}.op-tools li:not(:last-child):after{content:"";background:var(--color-signal);opacity:.55;width:3px;height:3px}.op-media-strip{margin-top:clamp(54px,7vw,96px)}.op-media-toolbar{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px;display:flex}.op-media-toolbar-copy{flex-wrap:wrap;align-items:baseline;gap:8px 18px;display:flex}.op-media-label,.op-media-instruction{font-family:var(--font-mono);font-size:var(--text-archive-label);letter-spacing:var(--tracking-label);text-transform:uppercase;margin:0;line-height:1.5}.op-media-label{color:color-mix(in srgb, var(--color-foreground) 82%, var(--color-background))}.op-media-label span:last-child,.op-media-instruction{color:var(--color-muted)}.op-media-controls{gap:7px;display:flex}.op-media-controls button{border:1px solid var(--op-rule);background:color-mix(in srgb, var(--color-raised) 56%, transparent);width:44px;height:44px;font-family:var(--font-mono);color:var(--color-foreground);cursor:pointer;place-items:center;font-size:18px;transition:border-color .16s ease-out,color .16s ease-out,opacity .16s ease-out,transform .16s ease-out;display:grid}.op-media-controls button:hover:not(:disabled){border-color:color-mix(in srgb, var(--color-signal) 66%, var(--color-background));color:var(--color-signal);transform:translateY(-1px)}.op-media-controls button:disabled{opacity:.24;cursor:default}.op-media-window{position:relative}.op-media-viewport{z-index:1;padding:0 0 18px var(--op-safe-gutter-left);scroll-padding-left:var(--op-safe-gutter-left);scroll-padding-right:var(--op-safe-gutter-right);scroll-snap-type:x proximity;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:var(--op-scroll-thumb) transparent;cursor:grab;-webkit-overflow-scrolling:touch;position:relative;overflow:auto hidden}.op-media-viewport::-webkit-scrollbar{height:4px}.op-media-viewport::-webkit-scrollbar-track{background:0 0}.op-media-viewport::-webkit-scrollbar-thumb{background:var(--op-scroll-thumb)}.op-media-strip[data-dragging] .op-media-viewport{cursor:grabbing}.op-media-track{width:max-content;padding:0 var(--op-safe-gutter-right) 0 0;align-items:flex-start;gap:clamp(14px,1.5vw,26px);margin:0;list-style:none;display:flex}.op-media-item{scroll-snap-align:start;flex:none}.op-media-item figure{margin:0}.op-media-frame{height:var(--spacing-archive-media);aspect-ratio:var(--op-media-aspect);border:1px solid var(--op-rule-soft);background:var(--color-raised);position:relative;overflow:hidden}.op-media-frame img,.op-media-frame video{object-fit:cover;background:var(--color-raised);width:100%;height:100%;display:block}.op-media-frame img{transition:transform .36s cubic-bezier(.2,.7,.2,1)}.op-media-frame video{cursor:auto}@media (hover:hover) and (pointer:fine){.op-media-item:hover .op-media-frame img{transform:scale(1.008)}}.op-media-item figcaption{max-width:68ch;font-family:var(--font-mono);font-size:var(--text-archive-caption);letter-spacing:.035em;color:var(--color-muted);grid-template-columns:26px minmax(0,1fr);gap:10px;margin-top:14px;line-height:1.55;display:grid}.op-media-item figcaption span{color:color-mix(in srgb, var(--color-signal) 72%, var(--color-muted))}.op-media-fade{z-index:2;opacity:0;pointer-events:none;width:clamp(42px,6vw,104px);transition:opacity .18s ease-out;position:absolute;top:0;bottom:18px}.op-media-fade-left{background:linear-gradient(to right, var(--color-background), transparent);left:0}.op-media-fade-right{background:linear-gradient(to left, var(--color-background), transparent);right:0}.op-media-strip[data-can-scroll-left] .op-media-fade-left,.op-media-strip[data-can-scroll-right] .op-media-fade-right{opacity:.92}.op-lesson{border-top:1px solid var(--op-rule);margin-top:clamp(60px,7vw,96px);padding-top:clamp(32px,4vw,52px)}.op-lesson-copy{max-width:76ch}.op-lesson-copy>p{font-size:var(--text-archive-body);color:color-mix(in srgb, var(--color-foreground) 86%, var(--color-background));margin:0;line-height:1.7}.op-process{font-family:var(--font-mono);font-size:var(--text-archive-label);letter-spacing:.07em;text-transform:uppercase;color:color-mix(in srgb, var(--color-foreground) 78%, var(--color-background));flex-wrap:wrap;gap:10px 0;margin:0 0 clamp(28px,4vw,44px);padding:0;line-height:1.55;list-style:none;display:flex}.op-process li{align-items:center;display:inline-flex}.op-process li:not(:last-child):after{content:"→";color:var(--color-signal);opacity:.7;margin-inline:12px}.op-lesson-copy .op-project-context{border-left:1px solid color-mix(in srgb, var(--color-signal) 60%, var(--color-background));max-width:64ch;font-family:var(--font-mono);letter-spacing:.04em;color:var(--color-muted);margin-top:28px;padding-left:18px;font-size:clamp(12px,.15vw + 11px,13px);line-height:1.65}.op-case-study-link{border-bottom:1px solid color-mix(in srgb, var(--color-signal) 58%, transparent);width:fit-content;min-height:44px;font-family:var(--font-mono);font-size:var(--text-archive-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-foreground);align-items:center;gap:12px;margin-top:clamp(28px,4vw,42px);padding-block:5px;line-height:1.5;transition:color .16s ease-out,border-color .16s ease-out;display:inline-flex}.op-case-study-link span{color:var(--color-signal);transition:transform .16s ease-out}.op-case-study-link:hover{border-color:var(--color-signal);color:var(--color-signal)}.op-case-study-link:hover span{transform:translate(3px)}.op-footer{padding-top:clamp(44px,6vw,76px);padding-bottom:max(clamp(44px, 6vw, 76px), env(safe-area-inset-bottom));border-top:1px solid var(--op-rule);font-family:var(--font-mono);font-size:var(--text-archive-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-muted);justify-content:space-between;align-items:center;gap:28px;line-height:1.5;display:flex}.op-footer p{margin:0}.op-footer p span{color:var(--color-foreground)}.op-footer nav{gap:clamp(18px,2.5vw,36px);display:flex}.op-footer a{min-height:44px;color:var(--color-muted);align-items:center;transition:color .16s ease-out;display:inline-flex}.op-footer a:hover{color:var(--color-foreground)}.op-page :is(a,button,.op-media-viewport):focus-visible{outline:1px solid var(--color-signal);outline-offset:4px}.op-media-viewport:focus-visible{outline-offset:-6px}@keyframes op-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width:860px){.op-intro{min-height:min(760px,88svh)}.op-intro-grid,.op-project-header,.op-tools,.op-lesson{grid-template-columns:1fr;gap:0}.op-intro-grid{align-items:start}.op-intro-index{grid-template-columns:1fr auto;align-items:start;gap:16px;padding-left:16px;display:grid}.op-intro-count{grid-area:1/2/span 2;margin:0}.op-intro-count-label{max-width:22ch;margin-top:10px}.op-intro-copy{margin-top:clamp(72px,12svh,112px)}.op-project-meta{grid-template-columns:minmax(0,1fr) minmax(180px,.85fr);column-gap:30px;padding-top:0;display:grid}.op-project-status{grid-area:1/2;margin-top:0}.op-project-qualification{grid-column:2;margin-top:10px}.op-project-copy{margin-top:clamp(42px,7vw,68px)}.op-tools h3,.op-lesson h3{margin-bottom:22px}}@media (max-width:620px){.op-chrome{padding-top:max(24px, env(safe-area-inset-top))}.op-availability{display:none}.op-nav{gap:16px}.op-nav>span[aria-current=page]{display:none}.op-intro{min-height:700px;padding-top:120px}.op-intro:before{top:112px}.op-intro-index{grid-template-columns:1fr}.op-intro-count{grid-area:auto/1;margin-top:18px}.op-intro-copy{margin-top:40px}.op-intro-thesis{letter-spacing:-.045em;max-width:12ch}.op-intro-lede{margin-top:22px}.op-evidence-rail{grid-template-columns:.82fr .82fr 1.26fr;height:134px;margin-top:30px}.op-evidence-item>span{font-size:9px;bottom:8px;left:9px;right:9px}.op-project-meta{display:block}.op-project-status{margin-top:26px}.op-project-qualification{max-width:34ch}.op-media-toolbar{align-items:center}.op-media-toolbar-copy{display:block}.op-media-instruction{letter-spacing:.07em;margin-top:5px}.op-media-fade{width:38px}.op-media-item figcaption{max-width:48ch}.op-footer{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion:reduce){.op-chrome,.op-intro-index,.op-intro-copy,.op-evidence-rail{animation:none}.op-skip-link,.op-nav a,.op-media-controls button,.op-media-frame img,.op-media-fade,.op-case-study-link,.op-case-study-link span,.op-evidence-item img,.op-footer a{transition-duration:.01ms}.op-back-arrow{transition:none}}