/* Shared layout safeguards, loaded after the individual page styles. */
html{scroll-padding-top:calc(var(--nav-height,80px) + 20px)}
main,section,nav,figure,header,footer{min-width:0}
button,input,a{touch-action:manipulation}button,input{font:inherit}
img,video,canvas{max-width:100%}h1,h2,h3,p,a,dd{overflow-wrap:anywhere}
.project-pagination{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;align-items:stretch}
.project-pagination a{max-width:none;min-width:0;padding:22px;border:1px solid currentColor;border-radius:12px;justify-content:center;min-height:126px}
.project-pagination a:last-child{background:#fff;color:#0051ff;text-align:left}
.project-pagination span{font-size:14px;letter-spacing:0;line-height:1.5}.project-pagination strong{line-height:1.2}
.theme-dark .project-pagination a:last-child{background:#0051ff;color:#fff}
.project-nav .back,.project-nav .brand,.project-nav .theme-toggle{min-height:44px;align-items:center}
.project-nav .theme-toggle{min-width:44px}.project-facts dl{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.play-controls{flex-wrap:wrap}.play-controls input{min-width:0;max-width:100%}.compare-control{flex-wrap:wrap}.compare-control input{min-width:100px;min-height:44px}
.viewer-toolbar button{min-width:44px}.media-viewer{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
.portfolio .nav nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.portfolio .nav .theme-toggle,.portfolio .nav .motion{min-width:44px;min-height:44px}
.portfolio .controls button{width:44px;height:44px;flex-shrink:0}
.portfolio .projects-heading{flex-wrap:wrap}.portfolio .project-filters{max-width:100%;flex-wrap:nowrap}
.portfolio .project-filters button{min-height:44px}.portfolio .card-info p{font-size:12px}.portfolio .card-info>span{font-size:12px}
.portfolio .project-viewport{min-height:0}.portfolio .contact-links a{font-size:16px;line-height:1.6}
.portfolio .review-top,.portfolio .review-card figcaption,.portfolio .review-card figcaption span{font-size:14px}
.portfolio .project-card{max-width:calc(100vw - 28px)}
@media(max-width:900px){.portfolio .nav,.portfolio .nav.light{gap:10px;padding:8px 14px}.portfolio .nav nav{gap:12px}.portfolio .nav>a{flex-basis:60px}.portfolio .nav .motion{font-size:0}.portfolio .nav .motion span{font-size:18px}}
@media(max-width:600px){.portfolio .nav nav a{font-size:13px}.portfolio .nav nav{gap:10px}.portfolio .nav>a{flex-basis:48px}.portfolio .nav-actions{gap:4px}.portfolio .nav nav a:nth-child(2){display:none}.portfolio .nav nav a:last-child span{display:none}.portfolio .projects-heading h2{font-size:clamp(26px,7vw,36px)}.portfolio .projects-heading .eyebrow{font-size:12px}.portfolio .project-stage{padding-top:calc(var(--nav-height,80px) + 12px)}.portfolio .card-info{padding:9px 5px;gap:8px}.portfolio .card-info h3{font-size:18px}.portfolio .card-info>span{display:none}.portfolio .card-info p{font-size:12px;margin-top:4px}.portfolio .section{padding-inline:20px}.project-pagination{grid-template-columns:1fr}.project-pagination a{padding:20px;min-height:108px}.project-pagination a:last-child{text-align:left}.project-nav{gap:12px;padding:16px 18px}.project-nav h1{font-size:clamp(18px,5vw,24px)}.project-meta{font-size:12px}.making-heading{display:block}.comparison-labels{inset:8px 8px auto;gap:8px}.comparison-labels span{padding:5px 8px}.phone-demo{max-width:100%}.play-stage{padding:20px}.lighting-stage,.holder-stage{padding:0}.resource-tile.portrait{grid-column:1/-1}.project-facts dd{font-size:16px}}
@media(max-width:380px){.portfolio .nav,.portfolio .nav.light{padding:6px 8px;gap:6px;inset:8px 6px auto}.portfolio .nav>a{flex-basis:40px}.portfolio .nav nav{gap:6px}.portfolio .nav nav a{font-size:12px}.portfolio .nav-actions{gap:2px}.portfolio .nav .theme-toggle,.portfolio .nav .motion{min-width:40px;width:40px;padding:0}.portfolio .projects-heading{padding-inline:14px;gap:8px}.portfolio .controls{gap:4px}.portfolio .controls button{width:40px;height:44px}.portfolio .project-track{--card-width:min(76vw,48svh)}body.reduced .project-track{grid-template-columns:1fr}body.reduced .project-card:nth-child(n){grid-column:1;margin-top:0}.viewer-toolbar{gap:4px}.viewer-toolbar button{padding:8px}.viewer-toolbar [data-count]{font-size:12px}}
/* Landscape and high zoom: use a flowing gallery when an orbit cannot fit. */
@media(max-height:500px) and (min-width:600px){.portfolio .projects-heading{row-gap:4px}.portfolio .projects-heading h2{font-size:24px}.portfolio .project-filters button{padding-block:8px}.portfolio .card-info h3{font-size:16px}.portfolio .card-info p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Center the motion label and icon inside the same 44px navigation control. */
.portfolio .nav-actions{align-items:center}
.portfolio .nav .motion{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:44px;min-height:44px;padding:0 16px;line-height:1;white-space:nowrap;flex-shrink:0}
.portfolio .nav .motion span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px;height:16px;line-height:1;font-size:16px}
.portfolio .nav .theme-toggle{height:44px;min-height:44px;padding:0;align-self:center}
@media(max-width:900px){.portfolio .nav .motion{width:44px;padding:0;gap:0}}
@media(max-width:380px){.portfolio .nav .motion{width:40px;min-width:40px}}
/* Geometric arrow centered independently of the font's baseline. */
.portfolio .card-open{display:grid;place-items:center;padding:0;line-height:1;translate:none;rotate:0deg}
.portfolio .card-open svg{display:block;width:18px;height:18px;margin:0;flex:none}
.portfolio .project-card:hover .card-open{rotate:0deg;translate:none}
/* Perspective belongs to the whole card, with no image-only zoom. */
body.reduced .project-track{pointer-events:auto}
.portfolio body.reduced .project-card{pointer-events:auto;transition:transform .2s ease-out,box-shadow .25s ease;transform-origin:center;overflow:visible}
.portfolio body.reduced .project-card.is-tilting{box-shadow:0 24px 42px #001b6640;z-index:2;will-change:transform}
.portfolio body.reduced .project-card:is(:hover,:focus-visible) .card-media>img{transform:none!important}
/* Full viewport cover, preserving the entire original image. */
body[data-project] .case-opening{position:relative;left:50%;width:100vw;max-width:none;height:auto;min-height:0;max-height:none;aspect-ratio:auto;margin:24px 0 40px;transform:translateX(-50%);border-radius:0}
body[data-project] .case-cover{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
body[data-project] .case-caption{padding:clamp(16px,4vw,56px);font-size:clamp(16px,2vw,24px)}
body[data-project=linea-o] .case-opening{left:calc(50% - 12px)}
/* A continuous blue route through each case, measured after images load. */
body[data-project] main.has-timeline{position:relative;--route-blue:#70baff;--route-track:#70baff40}
.theme-dark body[data-project] main.has-timeline{--route-blue:#3188ee;--route-track:#3188ee33}
body[data-project=linea-o] main.has-timeline{padding-left:0}
body[data-project=linea-o] main.has-timeline .case-opening{left:50%}
.project-route{position:absolute;left:-16px;width:2px;background:var(--route-track);pointer-events:none;z-index:1;overflow:hidden}
.project-route:before{content:'';position:absolute;inset:0;background:var(--route-blue);transform:scaleY(var(--route-progress,0));transform-origin:top}
.project-station{position:relative;margin:28px 0 12px;padding:12px 0 12px 8px;font-size:14px;line-height:1.5;letter-spacing:.08em;color:inherit;scroll-margin-top:100px}
.project-station:before{content:'';position:absolute;left:-21px;top:calc(50% - 6px);width:12px;height:12px;border:2px solid var(--route-blue);border-radius:50%;background:#0051ff;z-index:2;box-shadow:0 0 0 4px #0051ff}
.theme-dark .project-station:before{background:white;box-shadow:0 0 0 4px white}
.project-station.is-passed:before{background:var(--route-blue)}
.project-station.is-current:before{box-shadow:0 0 0 4px #0051ff,0 0 0 6px var(--route-blue)}
.theme-dark .project-station.is-current:before{box-shadow:0 0 0 4px white,0 0 0 6px var(--route-blue)}
@media(max-width:600px){.project-route{left:-9px}.project-station:before{left:-14px}.project-station{font-size:12px;letter-spacing:.05em;padding-left:8px}.project-station.is-current:before{box-shadow:0 0 0 3px #0051ff}.theme-dark .project-station.is-current:before{box-shadow:0 0 0 3px white}}
/* Interactive views use actual project images and preserve their composition. */
.real-experience .play-head{align-items:start;gap:24px}
.real-experience .play-head h2{line-height:1.2;font-size:clamp(24px,3vw,36px)}
.real-experience .play-head p{max-width:48ch;font-size:16px}
.real-experience .real-view-tabs{padding:16px 20px;gap:10px;display:flex;flex-wrap:wrap}
.real-view-tabs button,.real-tools button,.real-tools a{min-height:44px;font:inherit;font-size:14px;line-height:1.4;border:1px solid currentColor;border-radius:99px;padding:10px 16px;background:transparent;color:inherit;cursor:pointer}
.real-view-tabs button[aria-pressed=true]{background:#fff;color:#0051ff}
.theme-dark .real-view-tabs button[aria-pressed=true]{background:#0051ff;color:white}
.real-stage{margin:0;padding:24px;background:#edf1f8;display:flex;flex-direction:column;align-items:center;gap:16px;max-height:850px;overflow:auto}
.real-stage img{display:block;width:100%;height:auto;max-height:680px;object-fit:contain;flex-shrink:0}
.real-stage figcaption{font-size:14px;line-height:1.5;color:#1f3960;text-align:center;margin:0}
.real-phone .real-stage{background:radial-gradient(ellipse at center,#053e4870,transparent 70%),#071516}
.real-phone .real-stage img{width:auto;height:min(660px,75svh);max-width:100%;object-fit:contain;filter:drop-shadow(0 16px 24px #0005)}
.real-phone .real-stage figcaption{color:#d5e7e9}
.real-stage.detail-view{display:block;max-height:75svh}
.real-stage.detail-view img{width:150%;max-width:none;max-height:none;height:auto;object-fit:contain}
.real-phone .real-stage.detail-view img{width:min(650px,140%);height:auto;max-width:none}
.real-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px}
.real-tools a{display:inline-flex;align-items:center;justify-content:center}
.real-light{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px 24px;font-size:14px}
.real-light input{flex:1;min-width:100px;min-height:44px;accent-color:currentColor}.real-light output{min-width:4ch}
@media(max-width:650px){.real-experience .play-head{padding:20px;gap:12px}.real-experience .real-view-tabs{padding:14px;gap:8px}.real-stage{padding:12px}.real-tools{padding:16px;gap:10px}.real-tools a,.real-tools button{font-size:14px}.real-phone .real-stage img{height:min(600px,70svh)}.real-light{padding:16px}}
/* Featured artwork floats forward out of an open perspective stage. */
.real-experience.featured-3d{overflow:visible;position:relative;margin-block:40px 80px}
.featured-3d .real-stage{position:relative;perspective:1000px;overflow:visible;max-height:none;min-height:420px;padding:60px 50px 24px;gap:32px;border-radius:16px;touch-action:pan-y;cursor:grab;isolation:isolate;background:radial-gradient(ellipse at center,#d8e8fc,#edf1f8 75%)}
.featured-3d .real-stage:active{cursor:grabbing}
.featured-plane{position:relative;width:100%;max-width:760px;transform-style:preserve-3d;transform-origin:center;transition:transform .22s ease-out;will-change:transform;z-index:2}
.featured-plane.dragging{transition:none}
.featured-3d .real-stage img{width:100%;height:auto;max-height:580px;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none;filter:drop-shadow(18px 28px 22px #001c4b55)}
.real-phone.featured-3d .real-stage{background:radial-gradient(ellipse at center,#164749,#071516 75%)}
.real-phone .featured-plane{width:min(280px,65vw)}
.real-phone.featured-3d .real-stage img{width:100%;height:auto;max-height:600px;object-fit:contain}
.scene-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 20px}
.scene-controls button{min-height:44px;border:1px solid currentColor;border-radius:99px;font:inherit;font-size:14px;background:transparent;color:inherit;padding:10px 16px;cursor:pointer}
.scene-hint{text-align:center;font-size:14px;line-height:1.5;padding:18px 20px 0;margin:0}
.featured-3d .real-stage:focus-visible{outline:3px solid #70baff;outline-offset:5px}
@media(max-width:650px){.featured-3d .real-stage{padding:40px 28px 20px;min-height:280px;perspective:1200px}.featured-plane{max-width:100%}.real-phone .featured-plane{width:min(220px,56vw)}.featured-3d .real-stage img{max-height:480px}.scene-controls{gap:8px;padding-inline:10px}.scene-controls button{font-size:13px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.featured-plane{transition:none}}

/* Visibility endpoints; the reveal is controlled by the navbar animation. */
.portfolio .nav{opacity:1;visibility:visible;transform:translateY(0);transform-origin:50% 0;transition:background .25s,color .25s}
.portfolio .nav.intro-hidden{opacity:0;visibility:hidden;transform:translateY(-36px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.portfolio .nav.intro-hidden{transform:none}}
/* Teacher review: projects remain above the original W. */
.w-negative{display:none!important}
.return-projects{position:fixed;right:22px;bottom:26px;z-index:25;display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:99px;background:#fff;color:#0051ff;border:1px solid #0051ff24;box-shadow:0 6px 28px #001b6625;font-size:13px;animation:return-projects-in .4s ease both}
.return-projects[hidden]{display:none}.return-projects svg{width:22px;height:22px}.return-projects:hover{background:#e8f0ff}.return-projects:focus-visible{outline:3px solid #70baff;outline-offset:4px}
@keyframes return-projects-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.case-browser{width:min(1172px,calc(100% - 40px));margin:18px auto 0;padding:12px 16px;display:flex;gap:18px;align-items:center;border-radius:18px;background:#003fd955;border:1px solid #ffffff35;color:inherit}
.case-browser label{display:flex;align-items:center;gap:8px;font-size:11px;white-space:nowrap}.case-browser select{font:inherit;color:#0051ff;background:#fff;border:0;border-radius:8px;padding:8px;max-width:155px}
.case-project-links{display:flex;gap:8px;overflow-x:auto;min-width:0;padding:4px 0}.case-project-links a{white-space:nowrap;font-size:11px;padding:8px 11px;border:1px solid #ffffff40;border-radius:99px;transition:background .2s}.case-project-links a:hover,.case-project-links a[aria-current]{background:#fff;color:#0051ff}
.project-comparison{overflow:visible}.case-compare-labels{display:flex;justify-content:space-between;gap:16px;font-size:12px;margin:22px 0 10px}.case-compare-canvas{position:relative;width:100%;aspect-ratio:16/10;background:#06162e;overflow:hidden;border-radius:12px}
.case-compare-canvas>img,.case-compare-before,.case-compare-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.case-compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);background:#06162e}
.case-compare-line{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#70baff;pointer-events:none}.case-compare-line:after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0051ff;box-shadow:0 4px 18px #0003}.case-compare-line{font-size:0}
.case-compare-control{display:grid;gap:10px;margin-top:16px;font-size:12px}.case-compare-control input{width:100%;accent-color:#70baff;min-height:36px}.comparison-note{font-size:12px;line-height:1.6;opacity:.8;margin:12px 0 0}
.resource-note{font-size:12px;line-height:1.6;padding:0 12px 14px;opacity:.8;margin:0}.resource-tile figcaption{font-weight:500;padding:12px}
.gallery-3d{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px!important}.gallery-3d .resource-tile:nth-child(5n+1){grid-column:1/-1}.gallery-3d .resource-tile img{max-height:600px;object-fit:contain}
.gallery-ux{display:flex!important;gap:20px!important;overflow-x:auto!important;scroll-snap-type:x proximity;padding:20px 0!important}.gallery-ux .resource-tile{flex:0 0 min(260px,72vw);scroll-snap-align:center}.gallery-ux .resource-tile img{height:450px;object-fit:contain}
.gallery-identidad{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px!important}.gallery-identidad .resource-tile:first-child{grid-column:1/-1}.gallery-identidad .resource-tile img{max-height:650px;object-fit:contain}
.gallery-transmedia{display:grid!important;grid-template-columns:1fr 1fr;gap:26px!important}.gallery-transmedia .resource-tile:nth-child(3n+1){grid-column:1/-1}.gallery-transmedia .resource-tile img{object-fit:contain}
.gallery-research{display:grid!important;grid-template-columns:1fr;gap:36px!important}.gallery-research .resource-tile{display:grid;grid-template-columns:2fr 1fr;align-items:center;column-gap:24px}.gallery-research .resource-tile button{grid-row:1/3}.gallery-research .resource-tile img{max-height:600px;object-fit:contain}.gallery-research .resource-note{align-self:start}
.process-details[open] .process-grid{margin-top:24px}.process-grid article{min-width:0}.process-grid p{line-height:1.65}
@media(max-width:700px){.case-browser{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px}.case-browser label{justify-content:space-between}.case-project-links a{font-size:12px}.gallery-3d,.gallery-identidad,.gallery-transmedia{grid-template-columns:1fr}.gallery-research .resource-tile{display:block}.return-projects{right:12px;bottom:16px;font-size:12px;padding:11px 14px}.case-compare-labels{font-size:10px}}
.theme-dark body[data-project] .case-browser{background:#0051ff0d;border-color:#0051ff30}.theme-dark .case-project-links a{border-color:#0051ff40}.theme-dark .case-project-links a[aria-current],.theme-dark .case-project-links a:hover{background:#0051ff;color:#fff}
@media(prefers-reduced-motion:reduce){.return-projects{animation:none}}
.compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compare-pair figure{margin:0;min-width:0;background:#fff;border-radius:12px;padding:18px;display:grid;place-items:center}.compare-pair img{width:100%;height:100%;max-height:560px;object-fit:contain}.compare-pair img[src$="wais-w.svg"]{max-width:180px;padding:25px}
@media(max-width:650px){.compare-pair{gap:8px}.compare-pair figure{padding:8px}}
/* Ensure the carousel always draws in front of the W. */
.portfolio .avatar-scene{z-index:3}.portfolio .project-stage{z-index:5}
/* Reset legacy mosaic spans before applying category-specific layouts. */
.mosaic[class*="gallery-"] .resource-tile{grid-column:auto}
.mosaic.gallery-3d .resource-tile:nth-child(5n+1),.mosaic.gallery-identidad .resource-tile:first-child,.mosaic.gallery-transmedia .resource-tile:nth-child(3n+1){grid-column:1/-1}
.project-comparison>.case-compare-labels,.project-comparison>.case-compare-control,.project-comparison>.comparison-note{margin-left:20px;margin-right:20px}.project-comparison>.case-compare-canvas,.project-comparison>.compare-pair{width:calc(100% - 40px);margin-inline:20px}.project-comparison>.comparison-note{margin-bottom:20px}
/* Compact project directory: a quiet single line, expanded only when requested. */
details.case-browser{display:block;width:min(1172px,calc(100% - 40px));margin:12px auto 0;padding:0;background:transparent;border:0;border-radius:0}
.case-browser summary{display:flex;align-items:center;gap:9px;width:fit-content;min-height:40px;padding:6px 2px;list-style:none;cursor:pointer;font-size:12px;opacity:.8}.case-browser summary::-webkit-details-marker{display:none}.case-browser summary:hover{opacity:1}.case-browser summary:focus-visible{outline:2px solid #70baff;outline-offset:4px;border-radius:8px}.case-browser summary svg{width:17px;height:17px}.browser-chevron{margin-left:14px;transition:transform .2s}.case-browser[open] .browser-chevron{transform:rotate(180deg)}
.case-browser-panel{max-width:680px;margin:5px 0 16px;padding:16px;background:#003fd955;border:1px solid #ffffff30;border-radius:14px}.case-browser-panel label{justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #ffffff20}.case-browser .case-project-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 14px;max-height:235px;overflow:auto;margin-top:9px;padding:0}
.case-browser .case-project-links a{display:flex;gap:10px;align-items:center;border:0;border-radius:8px;padding:11px 8px;min-width:0;white-space:normal;font-size:12px}.case-project-links a>span:nth-child(2){min-width:0}.browser-number{font-size:10px;opacity:.55}.browser-arrow{margin-left:auto;font-size:12px;opacity:.7}.case-project-links a[aria-current] .browser-arrow{font-size:10px}
.case-resource-action{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:12px 0 28px}.case-action-link{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:12px 20px;min-height:44px;border-radius:99px;background:#fff;color:#0051ff;border:1px solid #ffffff70;font:500 14px Poppins,sans-serif;text-decoration:none;transition:transform .2s,background .2s}.case-action-link:hover{background:#e7f0ff;transform:translateY(-2px)}.case-action-link:focus-visible{outline:3px solid #70baff;outline-offset:4px}.case-action-link:disabled{opacity:.55;cursor:default;transform:none}.case-resource-action>span{font-size:12px;opacity:.7}
.theme-dark body[data-project] details.case-browser{background:transparent;border:0}.theme-dark .case-browser-panel{background:#0051ff08;border-color:#0051ff30}.theme-dark .case-browser-panel label{border-color:#0051ff20}.theme-dark .case-action-link{background:#0051ff;color:white;border-color:#0051ff}.theme-dark .case-action-link:hover{background:#003bcc}
@media(max-width:600px){.case-browser-panel{padding:12px}.case-browser .case-project-links{grid-template-columns:1fr;max-height:225px}.case-resource-action{gap:10px}.case-action-link{font-size:12px}}
/* Shared category marks in the project cards and case headers. */
.category-symbol{display:inline-block;width:22px;height:22px;flex:0 0 22px;background:currentColor;mask:var(--category-icon) center/contain no-repeat;-webkit-mask:var(--category-icon) center/contain no-repeat}
.category-3d{--category-icon:url('/assets/category-icons/3d.svg')}.category-ux{--category-icon:url('/assets/category-icons/ux.svg')}.category-identidad{--category-icon:url('/assets/wais-w.svg')}.category-transmedia{--category-icon:url('/assets/category-icons/transmedia.svg')}.category-research{--category-icon:url('/assets/category-icons/research.svg')}
.category-badge{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:8px 12px;border:1px solid #ffffff40;border-radius:99px;background:#ffffff0a;letter-spacing:.05em;line-height:1.5}.theme-dark .category-badge{background:#0051ff06;border-color:#0051ff30}
.card-info .category-type{display:flex;align-items:center;gap:7px}.card-info .category-symbol{width:17px;height:17px;flex-basis:17px;color:#0051ff}.theme-dark .card-info .category-symbol{color:#fff}
@media(max-width:600px){.category-badge{font-size:10px;padding:7px 10px;gap:8px}.category-badge .category-symbol{width:18px;height:18px;flex-basis:18px}.card-info .category-symbol{width:15px;height:15px;flex-basis:15px}.project-meta{align-items:center}}
/* Information follows the discipline: space, interaction, identity, narrative, evidence. */
.mosaic.project-presentation{display:block;position:relative;aspect-ratio:auto;overflow:visible;background:transparent;border:0;margin:35px 0 65px;border-radius:0}
.project-presentation .resource-tile{grid-column:auto;min-width:0}.project-presentation .resource-tile button{background:#f3f5f9;border-color:#ffffff28}.project-presentation .resource-tile img{max-height:680px;object-fit:contain}.project-presentation .resource-tile figcaption{font-size:13px;padding:12px 0 5px;font-weight:500}.project-presentation .resource-note{padding:0;font-size:12px;line-height:1.65;max-width:65ch}
.presentation-intro{max-width:780px;padding:15px 0 40px}.presentation-intro .eyebrow{font-size:11px;letter-spacing:.13em;opacity:.7;margin-bottom:18px}.presentation-intro h2{font-size:clamp(30px,4.5vw,58px);line-height:1.07;max-width:18ch;margin-bottom:20px}.presentation-intro>p:last-child{font-size:16px;line-height:1.75;max-width:65ch;opacity:.85}
.narrative-group{padding:38px 0;margin:0;border-top:1px solid #ffffff30;scroll-margin-top:70px}.group-copy{min-width:0}.group-index{font-size:11px;letter-spacing:.15em;opacity:.5;display:block;margin-bottom:16px}.group-copy h3{font:500 clamp(24px,3vw,36px)/1.15 'Mozilla Headline',Poppins,sans-serif;margin:0 0 18px;letter-spacing:-.04em}.group-copy>p{font-size:15px;line-height:1.8;opacity:.85;max-width:54ch;margin:0}.group-media{min-width:0;display:grid;gap:22px;align-items:start}
.layout-panorama,.layout-editorial,.layout-evidence{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:36px;align-items:start}.layout-panorama .group-copy,.layout-editorial .group-copy{position:sticky;top:45px}.layout-panorama .group-media .resource-tile:first-child img{max-height:720px}
.layout-details,.layout-full,.layout-cinema,.layout-phones{display:grid;gap:28px}.layout-details .group-copy,.layout-full .group-copy,.layout-cinema .group-copy,.layout-phones .group-copy{max-width:780px}.layout-details .group-media{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-cinema .group-media{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-cinema .group-media .resource-tile:first-child{grid-column:1/-1}
.presentation-3d .layout-details:nth-child(2n) .group-media{gap:36px}.presentation-3d .layout-full .resource-tile img{max-height:none}
.layout-phones .group-media{display:flex;gap:24px;overflow-x:auto;padding:8px 3px 16px;scroll-snap-type:x proximity}.layout-phones .resource-tile{flex:0 0 min(245px,70vw);scroll-snap-align:start}.layout-phones .resource-tile img{height:450px;max-height:450px;object-fit:contain;padding:12px}.layout-phones .resource-tile button{border-radius:24px;background:#ffffff08;border:1px solid #ffffff25}.screen-step{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border:1px solid currentColor;border-radius:50%;font-size:10px;margin-right:8px}.presentation-ux .group-copy h3{max-width:24ch}
.identity-foundation{display:grid;grid-template-columns:.8fr 1fr 1.2fr;border:1px solid #ffffff30;border-radius:14px;margin:0 0 35px;overflow:hidden}.identity-foundation>div{padding:25px;min-width:0;border-right:1px solid #ffffff25}.identity-foundation>div:last-child{border:0}.identity-sign{display:grid;place-items:center;gap:20px;background:#fff;color:#0051ff}.identity-sign img{width:100%;max-width:135px;height:130px;object-fit:contain}.identity-sign>span,.identity-type>span{font-size:11px;opacity:.7}.identity-palette{display:flex;align-items:center;justify-content:center;gap:12px}.palette-sample{min-width:0;flex:1;text-align:center}.palette-sample i{display:block;aspect-ratio:1;border-radius:50%;background:var(--swatch);border:1px solid #ffffff50;margin-bottom:12px}.palette-sample span{font-size:10px;line-height:1.5;display:block}.identity-type{display:flex;flex-direction:column;justify-content:center;gap:24px}.identity-type strong{font:500 clamp(25px,3vw,38px)/1.1 'Mozilla Headline',sans-serif;letter-spacing:-.04em}.presentation-identidad .layout-editorial .group-media{grid-template-columns:1fr 1fr}.presentation-identidad .layout-editorial img{height:300px}
.universe-stations{display:flex;gap:6px 18px;flex-wrap:wrap;padding:16px 0 24px;font-size:12px}.universe-stations a{border-bottom:1px solid #ff78c1;padding:7px 0}.presentation-transmedia .narrative-group{position:relative;margin-left:14px;padding-left:26px;border-top:0;border-left:2px solid #ffffff30}.presentation-transmedia .narrative-group:before{content:'';position:absolute;left:-7px;top:40px;width:12px;height:12px;background:#ff78c1;border-radius:50%;box-shadow:0 0 0 4px #0051ff}.presentation-transmedia .group-index{color:#ffc0e5;opacity:1}.presentation-transmedia .layout-cinema .resource-tile:first-child img{max-height:none}
.presentation-research .layout-evidence{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:40px}.presentation-research .group-copy{padding:25px 22px;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff20}.presentation-research .group-media{gap:28px}.presentation-research .resource-tile img{max-height:none}
.scene-readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:25px 0}.scene-readings article{padding:22px;border:1px solid #ffffff30;border-radius:12px}.scene-readings h3{font-size:18px;margin-bottom:15px}.scene-readings p{font-size:13px;line-height:1.7;opacity:.85}.additional-material{margin-top:30px;border-top:1px solid #ffffff30;padding:20px 0}.additional-material summary{cursor:pointer;font-size:13px;padding:10px 0}.additional-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:25px}.additional-grid .resource-tile img{max-height:460px}
.theme-dark .narrative-group,.theme-dark .additional-material,.theme-dark .identity-foundation,.theme-dark .identity-foundation>div,.theme-dark .scene-readings article{border-color:#0051ff25}.theme-dark .presentation-research .group-copy{background:#0051ff06;border-color:#0051ff20}.theme-dark .layout-phones .resource-tile button{background:#0051ff05;border-color:#0051ff25}.theme-dark .presentation-transmedia .narrative-group:before{box-shadow:0 0 0 4px #fff}.theme-dark .presentation-transmedia .group-index{color:#a22170}.theme-dark .project-presentation .resource-tile button{border-color:#0051ff25}
.narrative-animate{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1)}.narrative-animate.is-visible{opacity:1;transform:none}
@media(max-width:800px){.layout-panorama,.layout-editorial,.layout-evidence,.presentation-research .layout-evidence{grid-template-columns:1fr;gap:24px}.layout-panorama .group-copy,.layout-editorial .group-copy{position:static}.identity-foundation{grid-template-columns:1fr 1fr}.identity-type{grid-column:1/-1;border-top:1px solid #ffffff25!important}.presentation-transmedia .narrative-group{margin-left:5px;padding-left:20px}.group-copy>p{max-width:100%}}
@media(max-width:500px){.layout-details .group-media,.layout-cinema .group-media,.presentation-identidad .layout-editorial .group-media,.additional-grid,.scene-readings{grid-template-columns:1fr}.identity-foundation>div{padding:18px}.identity-palette{gap:8px}.palette-sample span{font-size:9px}.presentation-intro{padding-bottom:28px}.narrative-group{padding-top:28px;padding-bottom:28px}.layout-phones .resource-tile img{height:400px}.presentation-identidad .layout-editorial img{height:auto}.group-copy>p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.narrative-animate{opacity:1;transform:none;transition:none}}
.theme-dark .palette-sample i{border-color:#0051ff30}
/* Home: explicit heading rows and a logo fitted to the space underneath. */
.portfolio .projects-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:center;position:relative;inset:auto;min-width:0;z-index:8;background:#fff;padding:0 4vw 10px}
.portfolio .projects-heading>div:first-child{min-width:0}.portfolio .projects-heading .controls{grid-column:2;grid-row:1;justify-self:end;margin:0}
.portfolio .project-filters{grid-column:1/-1;grid-row:2;display:flex;width:100%;min-width:0;max-width:100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 3px 7px;gap:8px;scrollbar-width:thin}
.portfolio .projects-heading h2{font-size:clamp(28px,4.5vw,62px);overflow-wrap:normal}.portfolio .project-stage{min-width:0;grid-template-rows:auto minmax(0,1fr) 32px;padding-top:calc(var(--nav-height,80px) + 14px)}
.portfolio .project-viewport{min-width:0;min-height:0;margin-top:0}.portfolio .project-footer{height:32px}
.theme-dark.portfolio .projects-heading{background:#0051ff}
@media(max-width:600px){.portfolio .projects-heading{padding-inline:20px;gap:8px 10px}.portfolio .projects-heading h2{font-size:32px}.portfolio .projects-heading .controls{gap:6px;font-size:10px}.portfolio .project-filters{gap:6px}.portfolio .project-filters button{font-size:12px;padding-inline:13px}}
@media(max-width:380px){.portfolio .projects-heading{padding-inline:14px}.portfolio .projects-heading h2{font-size:27px}.portfolio .controls button{width:36px;min-width:36px;height:40px}}
@media(max-height:560px){.portfolio .project-stage{padding-top:calc(var(--nav-height,52px) + 6px);grid-template-rows:auto minmax(0,1fr) 24px;gap:5px;padding-bottom:6px}.portfolio .projects-heading{gap:5px 12px;padding-bottom:4px}.portfolio .projects-heading h2{font-size:26px}.portfolio .projects-heading .eyebrow{display:none}.portfolio .project-filters button{min-height:36px;padding-block:7px;font-size:12px}.portfolio .project-footer{height:24px}.portfolio .card-media{height:clamp(48px,18svh,105px)}}