:root{--paper:#f4f3ee;--ink:#253348;--red:#ee2722;--ease:cubic-bezier(.2,.8,.2,1);--stage-max:2176px}*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Helvetica Neue",sans-serif;overflow-x:hidden}button,a{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible,.card:focus-visible{outline:2px solid var(--red);outline-offset:5px}.skip-link{position:fixed;left:16px;top:12px;z-index:100;padding:10px 13px;background:var(--ink);color:var(--paper);transform:translateY(-160%);transition:transform .2s}.skip-link:focus{transform:translateY(0)}.site-shell{min-height:100svh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 58% 33%,rgba(255,255,255,.98),transparent 55%),var(--paper)}.site-shell:before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}.site-header{width:min(100%,var(--stage-max));height:96px;margin:0 auto;padding:0 clamp(28px,3.45vw,75px);display:flex;align-items:center;position:relative;z-index:30}.wordmark{display:flex;align-items:center;gap:27px;text-decoration:none;flex:0 0 auto}.wordmark b{font-size:36px;line-height:1;font-weight:500;letter-spacing:-.08em}.wordmark small{font-size:12px;line-height:1.5;letter-spacing:.2em;font-weight:600}.main-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(22px,3.6vw,78px);margin-left:auto;margin-right:clamp(24px,3.3vw,72px);min-width:0;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}.main-nav::-webkit-scrollbar{display:none}.main-nav button{position:relative;flex:0 0 auto;padding:12px 2px;font-size:15px;letter-spacing:.04em;transition:color .3s var(--ease),transform .3s var(--ease)}.main-nav button:before,.main-nav button:after{content:"";position:absolute;width:16px;height:16px;opacity:0;transform:scale(.55);transition:opacity .3s var(--ease),transform .3s var(--ease);background:linear-gradient(var(--red),var(--red)) center/1px 100% no-repeat,linear-gradient(90deg,var(--red),var(--red)) center/100% 1px no-repeat}.main-nav button:before{left:-10px;top:-5px}.main-nav button:after{right:-10px;bottom:-5px}.main-nav button:hover,.main-nav button[aria-current=true],.main-nav button:focus-visible{color:var(--red);transform:scale(1.06)}.main-nav button:hover:before,.main-nav button:hover:after,.main-nav button[aria-current=true]:before,.main-nav button[aria-current=true]:after,.main-nav button:focus-visible:before,.main-nav button:focus-visible:after{opacity:1;transform:scale(1)}.menu-button{width:30px;height:30px;display:grid;place-content:center;gap:7px;flex:0 0 auto}.menu-button i{display:block;width:25px;height:1px;background:var(--ink);transition:transform .3s var(--ease)}.menu-button:hover i:first-child{transform:translateX(-5px)}.menu-button:hover i:last-child{transform:translateX(5px)}.portfolio-stage{width:min(100%,var(--stage-max));height:clamp(700px,51.47vw,1120px);margin:0 auto;position:relative;isolation:isolate}.red-stroke{position:absolute;left:3.7%;top:5.3%;width:106px;height:1px;background:var(--red);transform:rotate(-10deg);z-index:10}.red-stroke:after{content:"";display:block;width:44px;height:1px;background:var(--red);transform:translate(19px,8px) rotate(-3deg)}.coordinate{position:absolute;left:3.7%;top:14%;z-index:10;color:var(--red);font-size:12px;line-height:1.7;letter-spacing:.3em;font-weight:600}.hero-copy{position:absolute;left:3.7%;top:21.5%;z-index:10}.hero-copy h1{margin:0 0 34px;font-weight:400;font-size:clamp(30px,3.15vw,58px);line-height:1.27;text-wrap:balance}.hero-copy p{margin:0;font-size:14px;line-height:1.9;letter-spacing:.48em}.portfolio-grid{position:absolute;inset:0;z-index:2}.card{position:absolute;overflow:visible;isolation:isolate;cursor:pointer;transition:transform .72s var(--ease);will-change:transform;touch-action:manipulation}.card:before{content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 100%,30% 100%,30% 91%,0 91%)}.card--glass:before,.card--clouds:before,.card--nimbus:before,.card--detail:before{clip-path:none}.card-visual{position:absolute;inset:0;overflow:hidden;background:#b8d0e9}.card--main .card-visual{clip-path:polygon(0 0,100% 0,100% 100%,30% 100%,30% 91%,0 91%)}.card-visual img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .72s var(--ease);user-select:none}.card:after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.06),transparent 43%,rgba(255,255,255,.12));mix-blend-mode:screen;pointer-events:none;z-index:1}.crosshair{position:absolute;width:28px;height:28px;z-index:8;color:var(--red);pointer-events:none;transition:transform .96s var(--ease)}.crosshair:before,.crosshair:after{content:"";position:absolute;background:currentColor}.crosshair:before{height:1px;width:42px;left:-7px;top:13px}.crosshair:after{width:1px;height:42px;left:13px;top:-7px}.crosshair--tl{left:-18px;top:-18px}.crosshair--tr{right:-18px;top:-18px}.crosshair--bl{left:-18px;bottom:-18px}.crosshair--br{right:-18px;bottom:-18px}.card:focus-visible .crosshair,.portfolio-grid[data-active] .card:hover .crosshair{transform:translate(2px,-2px)}.frame-label{position:absolute;z-index:9;left:8%;top:7%;font-size:16px;color:#243b59;line-height:1.1}.frame-label em{font-style:normal;font-size:11px}.card-index{position:absolute;right:-38px;bottom:18px;z-index:9;font-size:11px;letter-spacing:.32em;writing-mode:vertical-rl}.card--main{width:min(43.55vw,948px);aspect-ratio:948/772;left:32%;top:2%;z-index:6}.card--glass{width:min(23.15vw,504px);aspect-ratio:504/375;left:71.2%;top:8%;z-index:5}.card--clouds{width:min(22.38vw,487px);aspect-ratio:487/243;left:8.6%;top:67.2%;z-index:3}.card--nimbus{width:min(22.65vw,493px);aspect-ratio:493/238;left:33.4%;top:70.3%;z-index:4}.card--detail{width:min(17.8vw,388px);aspect-ratio:388/332;left:68.2%;top:57.5%;z-index:4}.alin-lockup{position:absolute;z-index:30;left:2.3%;top:25%;font-family:Arial Black,Arial,sans-serif;font-size:clamp(180px,27.6vw,600px);line-height:.7;font-weight:900;letter-spacing:-.105em;color:var(--red);mix-blend-mode:multiply;pointer-events:none;white-space:nowrap;user-select:none}.handnote{position:absolute;z-index:18;color:var(--red);font-family:"Segoe Print","Bradley Hand",cursive;font-size:clamp(14px,1.25vw,26px);line-height:1.15;font-weight:400;font-style:italic;letter-spacing:.01em;transition:transform .72s var(--ease);pointer-events:none}.handnote:after{content:"";display:block;width:55%;height:1px;background:var(--red);margin-top:11px;transform:rotate(-7deg)}.handnote--top{left:3.6%;top:0;transform:rotate(-8deg)}.handnote--clouds{left:3.7%;bottom:18%;transform:rotate(-6deg)}.handnote--glass{left:78%;top:45%;transform:rotate(-8deg)}.handnote--nimbus{left:62.5%;bottom:18%;transform:rotate(8deg);text-align:center}.handnote--detail{right:1.6%;bottom:6%;transform:rotate(-5deg)}.side-note{position:absolute;z-index:18;right:3.5%;top:26%;font-size:12px;line-height:1.55;letter-spacing:.27em}.side-note i{display:block;width:37px;height:1px;background:var(--ink);margin-top:12px}.director-note{position:absolute;z-index:18;left:3.7%;bottom:15%;font-size:11px;line-height:1.6;letter-spacing:.2em;display:flex;gap:17px;align-items:flex-start}.director-note i{width:1px;height:48px;background:var(--ink)}.hero-footer{position:absolute;z-index:18;left:3.7%;right:3.7%;bottom:1.5%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.23em}.hover-hint{position:absolute;right:4%;bottom:1%;z-index:18;display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.18em;opacity:.7}.hover-hint>span{display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;animation:blink 1.8s infinite}.hover-hint button{padding:4px 0;border-bottom:1px solid currentColor;font-size:9px;letter-spacing:.12em}.card--clouds .card-visual img{animation:cloud-drift 18s linear infinite alternate}.portfolio-grid[data-active=main] .card--main{transform:translateY(3.5vh) scale(1.09);z-index:20}.portfolio-grid[data-active=main] .card--glass{transform:translate(3vw,-1vh) scale(.97)}.portfolio-grid[data-active=main] .card--detail{transform:translate(2vw,3vh) scale(.97)}.portfolio-grid[data-active=main] .card--clouds,.portfolio-grid[data-active=main] .card--nimbus{transform:translateY(2vh) scale(.97)}.portfolio-grid[data-active=glass] .card--glass{transform:translate(-1vw,1vh) scale(1.09);z-index:20}.portfolio-grid[data-active=glass] .card--main{transform:translate(-1vw,1vh) scale(.97)}.portfolio-grid[data-active=glass] .card--detail{transform:translate(2vw,1vh) scale(.96)}.portfolio-grid[data-active=clouds] .card--clouds{transform:translateY(-1vh) scale(1.09);z-index:20}.portfolio-grid[data-active=clouds] .card--main{transform:translateY(-1vh) scale(.97)}.portfolio-grid[data-active=clouds] .card--nimbus{transform:translateX(2vw) scale(.96)}.portfolio-grid[data-active=nimbus] .card--nimbus{transform:translateY(-1vh) scale(1.09);z-index:20}.portfolio-grid[data-active=nimbus] .card--main{transform:translateY(-1vh) scale(.97)}.portfolio-grid[data-active=nimbus] .card--detail{transform:translateX(2vw) scale(.96)}.portfolio-grid[data-active=detail] .card--detail{transform:translate(-1vw,-1vh) scale(1.09);z-index:20}.portfolio-grid[data-active=detail] .card--main{transform:translate(-1vw,-1vh) scale(.97)}.portfolio-grid[data-active=detail] .card--glass{transform:translateX(-1vw) scale(.97)}.portfolio-grid[data-active=main]~.handnote--top,.portfolio-grid[data-active=glass]~.handnote--glass,.portfolio-grid[data-active=clouds]~.handnote--clouds,.portfolio-grid[data-active=nimbus]~.handnote--nimbus,.portfolio-grid[data-active=detail]~.handnote--detail{transform:translate(1.2vw,-.6vh) rotate(-5deg) scale(1.04)}.portfolio-grid[data-active=clouds]~.handnote--clouds{transform:translate(-.7vw,-.6vh) rotate(-9deg) scale(1.04)}.motion-paused .card--clouds .card-visual img{animation-play-state:paused}dialog{border:1px solid rgba(32,40,56,.35);background:rgba(246,245,240,.97);color:var(--ink);padding:34px;max-width:min(520px,calc(100vw - 40px));width:520px;box-shadow:0 24px 80px rgba(32,40,56,.2);overscroll-behavior:contain}dialog::backdrop{background:rgba(32,40,56,.2);backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:17px;top:12px;font-size:27px}.category-dialog h2,.menu-dialog h2{font-size:42px;font-weight:400;margin:36px 0 13px}.category-dialog p{font-size:17px;line-height:1.6;margin:0 0 30px}.category-dialog em{font-size:11px;letter-spacing:.11em;color:var(--red);font-style:normal}.menu-dialog nav{display:grid;gap:2px;margin-top:28px}.menu-dialog nav button{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(32,40,56,.2);font-size:20px;text-align:left}.menu-dialog nav button:hover{color:var(--red);padding-left:8px}.menu-dialog nav small{font-size:11px;letter-spacing:.15em}@keyframes cloud-drift{from{transform:translateX(0)}to{transform:translateX(-3%)}}@keyframes blink{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}.hover-hint{display:none}}@media(max-width:1050px){.site-header{height:86px;padding:0 24px}.main-nav{gap:21px;margin-left:25px;margin-right:21px;justify-content:flex-start}.main-nav button{font-size:13px}.portfolio-stage{height:clamp(700px,63vw,980px)}.hero-copy{left:4%;top:19%}.hero-copy h1{font-size:clamp(24px,4vw,40px)}.coordinate{left:4%;top:12%}.red-stroke{left:4%}.alin-lockup{font-size:38vw;top:30%}.card--main{width:65vw;left:26%;top:9%}.card--glass{width:34vw;left:65%;top:21%}.card--clouds{width:36vw;left:4%;top:67%}.card--nimbus{width:38vw;left:29%;top:73%}.card--detail{width:30vw;left:64%;top:58%}.handnote{font-size:12px}.handnote--glass{left:67%}.handnote--nimbus{left:51%}.director-note{left:4%;bottom:16%;font-size:9px}.side-note{right:3%;top:31%;font-size:9px}.hero-footer{left:4%;right:4%;font-size:8px}.hover-hint{display:none}}@media(max-width:700px){.site-header{height:76px;padding:0 16px}.wordmark{gap:10px}.wordmark b{font-size:28px}.wordmark small{font-size:8px;letter-spacing:.13em}.main-nav{gap:18px;margin-left:18px;margin-right:10px}.main-nav button{font-size:12px;padding:10px 1px}.menu-button{width:25px}.menu-button i{width:21px}.portfolio-stage{height:900px}.hero-copy{left:20px;top:19%}.hero-copy h1{font-size:24px}.hero-copy p{font-size:11px}.coordinate{left:20px;top:11%;font-size:10px}.red-stroke{left:20px;top:5%}.alin-lockup{font-size:32vw;top:34%;left:2%}.card--main{width:78vw;left:16%;top:11%}.card--glass{width:43vw;left:58%;top:25%}.card--clouds{width:47vw;left:2%;top:65%}.card--nimbus{width:51vw;left:27%;top:73%}.card--detail{width:39vw;left:58%;top:57%}.handnote{font-size:10px}.handnote--top{left:3%;top:1%}.handnote--glass{left:63%;top:46%}.handnote--nimbus{left:43%;bottom:12%}.handnote--detail{right:1%;bottom:3%;font-size:9px}.handnote--clouds{left:3%;bottom:22%}.director-note{display:none}.side-note{right:2%;top:31%;font-size:8px}.hero-footer{left:3%;right:3%;font-size:7px}.hero-footer span:last-child{display:none}.crosshair{transform:scale(.8)}.card-index{right:-24px;font-size:9px}}@media(max-width:470px){.wordmark small{display:none}.main-nav{gap:15px;margin-left:14px}.main-nav button{font-size:11px}.portfolio-stage{height:900px}.hero-copy{top:17%}.hero-copy h1{font-size:22px}.card--main{width:84vw;left:12%;top:12%}.card--glass{width:48vw;left:53%;top:27%}.card--clouds{width:54vw;left:0;top:66%}.card--nimbus{width:58vw;left:25%;top:75%}.card--detail{width:44vw;left:56%;top:58%}.alin-lockup{font-size:31vw;top:36%}.handnote--glass{left:59%;font-size:9px}.handnote--nimbus{left:40%;font-size:9px}}
/* Reference scheme cleanup. */
.site-header{justify-content:center}
.main-nav{margin-left:0;margin-right:0}
.header-brand{position:absolute;right:3.7%;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:22px;z-index:31;color:var(--ink)}
.header-brand span{font-size:14px;line-height:1.35;letter-spacing:.17em;font-weight:600}
.brand-dot{display:block;width:26px;height:26px;border-radius:50%;background:var(--red)}
.red-stroke,.hero-copy,.director-note,.hover-hint{display:none}
.coordinate-crosshair{position:absolute;left:4.1%;top:18.4%;width:34px;height:34px;z-index:11;color:var(--red)}
.coordinate-crosshair:before,.coordinate-crosshair:after{content:"";position:absolute;background:currentColor}
.coordinate-crosshair:before{height:1px;width:48px;left:-7px;top:16px}
.coordinate-crosshair:after{width:1px;height:48px;left:16px;top:-7px}
.coordinate-crosshair{border:1px solid currentColor;border-radius:50%}
.coordinate{top:13.5%}
.alin-lockup{left:4.1%;top:20.6%;z-index:30}
.card--glass{left:75.8%;top:6.9%}
.card--clouds{width:min(19.6vw,426px);left:9.1%;top:68.2%}
.card--nimbus{left:35.5%;top:71.1%}
.card--detail{left:72.9%;top:59.9%}
.side-note{right:3.5%;top:43.5%;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;letter-spacing:.27em}
.side-note span{font-size:13px;letter-spacing:.32em}
.side-note small{font-size:10px;line-height:1.7;letter-spacing:.24em}
.handnote--ideas{left:3.6%;top:56.7%;transform:rotate(-7deg)}.handnote--nimbus{padding:18px 31px;border:1px solid var(--red);border-radius:50%;text-align:center}.handnote--nimbus:before{content:"";position:absolute;right:8%;bottom:9%;width:17px;height:17px;border-right:1px solid var(--red);border-bottom:1px solid var(--red);transform:rotate(-18deg)}
.handnote--nimbus:after{width:42%;margin-left:auto;margin-right:6px}
@media(max-width:1050px){
  .header-brand{right:24px}
  .main-nav{margin-left:0;margin-right:120px;gap:21px}
  .coordinate{top:12%}.coordinate-crosshair{top:18%}
  .alin-lockup{left:4%;top:30%;font-size:38vw}
  .card--glass{width:34vw;left:65%;top:21%}
  .card--clouds{width:36vw;left:4%;top:67%}
  .card--nimbus{width:38vw;left:29%;top:73%}
  .card--detail{width:30vw;left:64%;top:58%}
}
@media(max-width:700px){
  .header-brand{display:none}.main-nav{margin:0;gap:18px;justify-content:flex-start;overflow-x:auto}
  .coordinate{top:11%}.coordinate-crosshair{left:20px;top:17%}
  .alin-lockup{left:2%;top:34%;font-size:32vw}
  .card--glass{width:43vw;left:58%;top:25%}
  .card--clouds{width:47vw;left:2%;top:65%}
  .card--nimbus{width:51vw;left:27%;top:73%}
  .card--detail{width:39vw;left:58%;top:57%}
  .handnote--ideas{left:3%;top:55%;font-size:10px}.handnote--nimbus{padding:11px 18px}
}
@media(max-width:470px){
  .main-nav{gap:15px}.coordinate-crosshair{left:20px;top:16%}
  .alin-lockup{left:2%;top:36%;font-size:31vw}
  .card--glass{width:48vw;left:53%;top:27%}
  .card--clouds{width:54vw;left:0;top:66%}
  .card--nimbus{width:58vw;left:25%;top:75%}
  .card--detail{width:44vw;left:56%;top:58%}
}

/* Give the central blue frame more breathing room above the lower artwork. */
.card--main{width:min(37vw,820px);left:35.3%}
@media(max-width:1050px){.card--main{width:56vw;left:30.5%}}
@media(max-width:700px){.card--main{width:68vw;left:21%}}
@media(max-width:470px){.card--main{width:73vw;left:17.5%}}

/* Leave a little extra scroll room so one downward scroll clears the nav. */
.portfolio-stage{margin-bottom:clamp(140px,14vh,260px)}

/* Artwork layers extracted from the reference image. */
.alin-lockup{mix-blend-mode:normal;color:#ee2722;font-size:clamp(160px,23vw,500px);letter-spacing:-.12em;text-shadow:none}
.handnote{font-size:0;line-height:0;transform-origin:center;pointer-events:none}
.handnote:after{display:none}
.note-image{display:block;width:100%;height:auto}
.handnote--top{left:3.4%;top:-6.5%;width:min(9.35vw,203px);transform:rotate(0)}
.handnote--ideas{left:3.6%;top:56.7%;width:min(8.45vw,184px);transform:rotate(0)}
.handnote--clouds{left:3.7%;bottom:21.5%;width:min(6.7vw,145px);transform:rotate(0)}
.handnote--glass{left:77.2%;top:37%;width:min(8.75vw,190px);transform:rotate(0)}
.handnote--nimbus{left:60.5%;bottom:22%;width:min(11.1vw,241px);padding:0;border:0;border-radius:0;transform:rotate(0);text-align:left}
.handnote--nimbus:before,.handnote--nimbus:after{display:none}
.handnote--detail{right:1.6%;bottom:10.5%;width:min(9.95vw,216px);transform:rotate(0)}
.card--main .crosshair--br,.card--glass .crosshair--tl,.card--glass .crosshair--bl,.card--clouds .crosshair--br,.card--nimbus .crosshair--br,.card--detail .crosshair--bl{display:none}
.card{transform:none!important;transition:none;will-change:auto}
.card-visual{transition:transform .72s var(--ease);transform-origin:50% 50%;will-change:transform}
.card--main .card-visual{transform-origin:50% 0}
.portfolio-grid[data-active=main] .card--main .card-visual{transform:translateY(3.5vh) scale(1.09)}
.portfolio-grid[data-active=main] .card--glass .card-visual{transform:translate(3vw,-1vh) scale(.97)}
.portfolio-grid[data-active=main] .card--detail .card-visual{transform:translate(2vw,3vh) scale(.97)}
.portfolio-grid[data-active=main] .card--clouds .card-visual,.portfolio-grid[data-active=main] .card--nimbus .card-visual{transform:translateY(2vh) scale(.97)}
.portfolio-grid[data-active=glass] .card--glass .card-visual{transform:translate(-1vw,1vh) scale(1.09)}
.portfolio-grid[data-active=glass] .card--main .card-visual{transform:translate(-1vw,1vh) scale(.97)}
.portfolio-grid[data-active=glass] .card--detail .card-visual{transform:translate(2vw,1vh) scale(.96)}
.portfolio-grid[data-active=clouds] .card--clouds .card-visual{transform:translateY(-1vh) scale(1.09)}
.portfolio-grid[data-active=clouds] .card--main .card-visual{transform:translateY(-1vh) scale(.97)}
.portfolio-grid[data-active=clouds] .card--nimbus .card-visual{transform:translateX(2vw) scale(.96)}
.portfolio-grid[data-active=nimbus] .card--nimbus .card-visual{transform:translateY(-1vh) scale(1.09)}
.portfolio-grid[data-active=nimbus] .card--main .card-visual{transform:translateY(-1vh) scale(.97)}
.portfolio-grid[data-active=nimbus] .card--detail .card-visual{transform:translateX(2vw) scale(.96)}
.portfolio-grid[data-active=detail] .card--detail .card-visual{transform:translate(-1vw,-1vh) scale(1.09)}
.portfolio-grid[data-active=detail] .card--main .card-visual{transform:translate(-1vw,-1vh) scale(.97)}
.portfolio-grid[data-active=detail] .card--glass .card-visual{transform:translateX(-1vw) scale(.97)}
.portfolio-grid[data-active] .crosshair{transition-delay:.1s}
@media(max-width:1050px){.alin-lockup{font-size:31vw}.handnote--top{top:-5.5%;width:15vw}.handnote--ideas{top:55%;width:13vw}.handnote--clouds{bottom:22%;width:11vw}.handnote--glass{left:67%;top:38%;width:14vw}.handnote--nimbus{left:51%;bottom:17%;width:18vw}.handnote--detail{right:1%;bottom:8%;width:16vw}}
@media(max-width:700px){.alin-lockup{font-size:28vw}.handnote--top{top:-4%;width:26vw}.handnote--ideas{top:55%;width:23vw}.handnote--clouds{bottom:22%;width:19vw}.handnote--glass{left:63%;top:42%;width:24vw}.handnote--nimbus{left:43%;bottom:12%;width:31vw}.handnote--detail{right:1%;bottom:3%;width:29vw}}
@media(max-width:470px){.alin-lockup{font-size:27vw}.handnote--ideas{top:55%;width:25vw}.handnote--glass{left:59%;width:25vw}.handnote--nimbus{left:40%;width:35vw}}

/* On hover, every artwork briefly adopts the same cinematic 16:9 frame. */
.card{transition:width 1.18s var(--ease),height 1.18s var(--ease),left 1.18s var(--ease);will-change:width,height,left}
.card.is-ratio-169{aspect-ratio:16/9}
.card--main .card-visual{transition:transform .72s var(--ease),clip-path 1.18s var(--ease);will-change:transform,clip-path}
.card--main.is-ratio-169 .card-visual{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 100%,0 100%)}
.site-shell:before{opacity:.23}

/* The ALIN title is now the supplied one-shot animation. */
.alin-lockup{width:clamp(150px,22vw,500px);line-height:0;isolation:isolate}
.alin-video{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none}
.crosshair{width:36px;height:36px;background:url("./assets/crosshair.png") center/contain no-repeat;opacity:.9;transition:transform .96s var(--ease),opacity .3s ease;transition-delay:.12s}
.crosshair:before,.crosshair:after{display:none}
.portfolio-grid[data-active=main] .card--main .crosshair{transform:translateY(3vh) scale(1.035)}
.portfolio-grid[data-active=main] .card--glass .crosshair,.portfolio-grid[data-active=main] .card--detail .crosshair{transform:translate(1vw,1.5vh) scale(.985)}
.portfolio-grid[data-active=main] .card--clouds .crosshair,.portfolio-grid[data-active=main] .card--nimbus .crosshair{transform:translateY(1.2vh) scale(.985)}
.portfolio-grid[data-active=glass] .card--glass .crosshair{transform:translate(-.8vw,1vh) scale(1.035)}
.portfolio-grid[data-active=glass] .card--main .crosshair{transform:translate(-.7vw,.8vh) scale(.985)}
.portfolio-grid[data-active=clouds] .card--clouds .crosshair{transform:translateY(-.8vh) scale(1.035)}
.portfolio-grid[data-active=clouds] .card--main .crosshair{transform:translateY(-.7vh) scale(.985)}
.portfolio-grid[data-active=clouds] .card--nimbus .crosshair{transform:translateX(1vw) scale(.98)}
.portfolio-grid[data-active=nimbus] .card--nimbus .crosshair{transform:translateY(-.8vh) scale(1.035)}
.portfolio-grid[data-active=nimbus] .card--main .crosshair{transform:translateY(-.7vh) scale(.985)}
.portfolio-grid[data-active=nimbus] .card--detail .crosshair{transform:translateX(1vw) scale(.98)}
.portfolio-grid[data-active=detail] .card--detail .crosshair{transform:translate(-.8vw,-.8vh) scale(1.035)}
.portfolio-grid[data-active=detail] .card--main .crosshair{transform:translate(-.7vw,-.7vh) scale(.985)}
.portfolio-grid[data-active=detail] .card--glass .crosshair{transform:translateX(-.7vw) scale(.985)}

/* Restore the complete handwritten crops and move the lower image group down slightly. */
.handnote--clouds{left:3.7%;bottom:20.1%;width:min(7.8vw,170px)}
.handnote--nimbus{left:60.5%;bottom:19.3%;width:min(11.1vw,241px)}
.handnote--detail{right:1.6%;bottom:9.2%;width:min(9.95vw,216px)}
.card--clouds{top:69.2%}
.card--nimbus{top:72.4%}
.card--detail{top:60.8%}
.card--clouds .card-index{display:none}
@media(max-width:1050px){.alin-lockup{width:31vw}.handnote--clouds{bottom:20%;width:13vw}.handnote--detail{bottom:7.5%;width:16vw}.card--clouds{top:69%}.card--nimbus{top:74%}.card--detail{top:60%}}
@media(max-width:700px){.alin-lockup{width:28vw}.handnote--clouds{bottom:20%;width:22vw}.handnote--detail{bottom:2.5%;width:29vw}.card--clouds{top:67%}.card--nimbus{top:74%}.card--detail{top:59%}}

/* Corner marks travel as one delayed frame with each artwork. */
.crosshair-layer{position:absolute;inset:0;z-index:8;overflow:visible;pointer-events:none;transform:translateZ(0);transform-origin:50% 50%;transition:transform .92s var(--ease);transition-delay:.14s;will-change:transform}
.card--main .crosshair-layer{transform-origin:50% 0}
.crosshair-layer .crosshair{transform:none!important;transition:none;transition-delay:0}
.portfolio-grid[data-active=main] .card--main .crosshair-layer{transform:translateY(3.5vh) scale(1.09)}
.portfolio-grid[data-active=main] .card--glass .crosshair-layer{transform:translate(3vw,-1vh) scale(.97)}
.portfolio-grid[data-active=main] .card--detail .crosshair-layer{transform:translate(2vw,3vh) scale(.97)}
.portfolio-grid[data-active=main] .card--clouds .crosshair-layer,.portfolio-grid[data-active=main] .card--nimbus .crosshair-layer{transform:translateY(2vh) scale(.97)}
.portfolio-grid[data-active=glass] .card--glass .crosshair-layer{transform:translate(-1vw,1vh) scale(1.09)}
.portfolio-grid[data-active=glass] .card--main .crosshair-layer{transform:translate(-1vw,1vh) scale(.97)}
.portfolio-grid[data-active=glass] .card--detail .crosshair-layer{transform:translate(2vw,1vh) scale(.96)}
.portfolio-grid[data-active=clouds] .card--clouds .crosshair-layer{transform:translateY(-1vh) scale(1.09)}
.portfolio-grid[data-active=clouds] .card--main .crosshair-layer{transform:translateY(-1vh) scale(.97)}
.portfolio-grid[data-active=clouds] .card--nimbus .crosshair-layer{transform:translateX(2vw) scale(.96)}
.portfolio-grid[data-active=nimbus] .card--nimbus .crosshair-layer{transform:translateY(-1vh) scale(1.09)}
.portfolio-grid[data-active=nimbus] .card--main .crosshair-layer{transform:translateY(-1vh) scale(.97)}
.portfolio-grid[data-active=nimbus] .card--detail .crosshair-layer{transform:translateX(2vw) scale(.96)}
.portfolio-grid[data-active=detail] .card--detail .crosshair-layer{transform:translate(-1vw,-1vh) scale(1.09)}
.portfolio-grid[data-active=detail] .card--main .crosshair-layer{transform:translate(-1vw,-1vh) scale(.97)}
.portfolio-grid[data-active=detail] .card--glass .crosshair-layer{transform:translateX(-1vw) scale(.97)}
@media(max-width:700px){.crosshair-layer .crosshair{transform:scale(.8)!important}}

/* Keep the video aligned with the artwork at every viewport size. */
.alin-video{border:0;background:transparent}

/* Homepage modules reveal their video only while active. */
.card-visual--video img{position:relative;z-index:0;transition:opacity .24s ease,transform .72s var(--ease)}
.card-visual--video .card-video{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;background:#111;transition:opacity .24s ease}
.card.is-video-active .card-visual--video img{opacity:0}
.card.is-video-active .card-visual--video .card-video{opacity:1}

/* Give the artwork field more breathing room below the fixed header. */
:root{--composition-shift:clamp(28px,2.8vw,52px)}
.portfolio-stage{height:calc(clamp(700px,51.47vw,1120px) + var(--composition-shift))}
.portfolio-grid{transform:translateY(var(--composition-shift))}
.coordinate{top:calc(13.5% + var(--composition-shift))}
.coordinate-crosshair{top:calc(18.4% + var(--composition-shift))}
.handnote--ideas{top:calc(56.7% + var(--composition-shift))}
.handnote--clouds{bottom:calc(20.1% - var(--composition-shift))}
.handnote--glass{top:calc(37% + var(--composition-shift))}
.handnote--nimbus{bottom:calc(19.3% - var(--composition-shift))}
.handnote--detail{bottom:calc(9.2% - var(--composition-shift))}
.side-note{top:calc(43.5% + var(--composition-shift))}
.hero-footer{bottom:calc(1.5% - var(--composition-shift))}
@media(max-width:1050px){
  .portfolio-stage{height:calc(clamp(700px,63vw,980px) + var(--composition-shift))}
  .coordinate{top:calc(12% + var(--composition-shift))}
  .coordinate-crosshair{top:calc(18% + var(--composition-shift))}
  .handnote--ideas{top:calc(55% + var(--composition-shift))}
  .handnote--clouds{bottom:calc(20% - var(--composition-shift))}
  .handnote--glass{top:calc(38% + var(--composition-shift))}
  .handnote--nimbus{bottom:calc(17% - var(--composition-shift))}
  .handnote--detail{bottom:calc(8% - var(--composition-shift))}
  .side-note{top:calc(31% + var(--composition-shift))}
}
@media(max-width:700px){
  .portfolio-stage{height:calc(900px + var(--composition-shift))}
  .coordinate{top:calc(11% + var(--composition-shift))}
  .coordinate-crosshair{top:calc(17% + var(--composition-shift))}
  .handnote--ideas{top:calc(55% + var(--composition-shift))}
  .handnote--clouds{bottom:calc(20% - var(--composition-shift))}
  .handnote--glass{top:calc(42% + var(--composition-shift))}
  .handnote--nimbus{bottom:calc(12% - var(--composition-shift))}
  .handnote--detail{bottom:calc(2.5% - var(--composition-shift))}
  .side-note{top:calc(31% + var(--composition-shift))}
}
@media(max-width:470px){
  .coordinate-crosshair{top:calc(16% + var(--composition-shift))}
}
 
/* User refinement: enlarge the category labels and nudge the blue artwork field down. */
.main-nav button{font-size:18px}
:root{--composition-shift:clamp(54px,4.5vw,96px)}
@media(max-width:1050px){.main-nav button{font-size:15px}}
@media(max-width:700px){.main-nav button{font-size:14px}}
@media(max-width:470px){.main-nav button{font-size:13px}}
 /* User refinement: lower the top navigation row slightly. */
.main-nav{transform:translateY(10px)}
@media(max-width:1050px){.main-nav{transform:translateY(8px)}}
@media(max-width:700px){.main-nav{transform:translateY(6px)}}

/* User refinement: unify navigation crosshairs and strengthen hover feedback. */
.main-nav button{
  font-weight:500;
  transition:color .3s var(--ease),transform .3s var(--ease),font-weight .2s ease;
}
.main-nav button:before{
  width:18px;
  height:18px;
  left:-10px;
  top:-7px;
}
.main-nav button:after{display:none}

/* Keep the paper texture quiet but continuous across the opening composition. */
.site-shell{
  background:
    radial-gradient(ellipse at 58% 33%,rgba(255,255,255,.82),transparent 55%),
    linear-gradient(180deg,#f5f4ef 0%,#f1efe7 100%);
}
.site-shell:after{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:0;
  bottom:auto;
  height:100%;
  pointer-events:none;
  opacity:.44;
  background-image:
    radial-gradient(ellipse at 13% 74%,rgba(146,132,110,.11),transparent 43%),
    radial-gradient(ellipse at 77% 30%,rgba(166,151,126,.09),transparent 46%),
    linear-gradient(180deg,transparent 0%,rgba(157,143,121,.1) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460'%3E%3Cfilter id='paper-wide'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.36' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper-wide)' opacity='.16'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='paper-fine'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper-fine)' opacity='.1'/%3E%3C/svg%3E");
  background-size:100% 100%,100% 100%,100% 100%,460px 460px,180px 180px;
  background-blend-mode:multiply,multiply,multiply,multiply,soft-light;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.65) 58%,#000 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.65) 58%,#000 100%);
}
.main-nav button:hover,
.main-nav button[aria-current=true],
.main-nav button:focus-visible{
  color:var(--red);
  font-weight:700;
  transform:scale(1.18);
}

/* User refinement: keep one uniform, fully visible crosshair inside each nav item. */
.main-nav button{
  display:inline-flex;
  align-items:center;
  height:42px;
  padding:11px 2px 3px 16px;
  line-height:1;
}
.main-nav button:before{
  left:0;
  top:2px;
  width:12px;
  height:12px;
  opacity:0;
  transform:scale(.8);
  background:
    linear-gradient(var(--red),var(--red)) center/1px 100% no-repeat,
    linear-gradient(90deg,var(--red),var(--red)) center/100% 1px no-repeat;
}
.main-nav button:after{display:none}
.main-nav button:hover:before,
.main-nav button[aria-current=true]:before,
.main-nav button:focus-visible:before{
  opacity:1;
  transform:scale(1);
}

/* Keep the first active marker inside the scrollable navigation edge. */
.main-nav button:first-child{transform-origin:left center}

/* User refinement: scale the ALIN title up to match the reference framing. */
.alin-lockup{width:clamp(190px,28.5vw,620px)}
@media(max-width:1050px){.alin-lockup{width:39vw}}
@media(max-width:700px){.alin-lockup{width:34vw}}
@media(max-width:470px){.alin-lockup{width:33vw}}

/* Keep the complete main artwork visible at rest and while it expands. */
.card--main .card-visual{clip-path:inset(0)}

/* User refinement: enlarge the AI module to match the reference frame. */
.portfolio-grid[data-active=nimbus] .card--nimbus .card-visual,
.portfolio-grid[data-active=nimbus] .card--nimbus .crosshair-layer{
  transform:translate(-.8vw,-6vh) scale(1.26)
}
@media(max-width:1050px){
  .portfolio-grid[data-active=nimbus] .card--nimbus .card-visual,
  .portfolio-grid[data-active=nimbus] .card--nimbus .crosshair-layer{
    transform:translate(-.6vw,-3.5vh) scale(1.22)
  }
}
@media(max-width:700px){
  .portfolio-grid[data-active=nimbus] .card--nimbus .card-visual,
  .portfolio-grid[data-active=nimbus] .card--nimbus .crosshair-layer{
    transform:translate(-.4vw,-2.5vh) scale(1.18)
  }
}

/* Full-screen category pages: a quiet film index that opens into a native frame. */
.category-dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;padding:0;background:var(--paper);color:var(--ink);overflow:hidden}
.category-dialog::backdrop{background:transparent;backdrop-filter:none;transition:background .6s ease,backdrop-filter .6s ease}
.category-dialog.category-dialog--transition::backdrop{background:rgba(244,243,238,.08);backdrop-filter:blur(0) saturate(1)}
.category-dialog.category-dialog--transition.is-entered::backdrop{background:rgba(244,243,238,.14);backdrop-filter:blur(5px) saturate(1.04)}
.category-dialog.category-dialog--transition{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .72s var(--ease)}
.category-dialog.category-dialog--transition.is-entered{opacity:1;transform:translateY(0)}
.category-dialog.category-dialog--transition .category-header,
.category-dialog.category-dialog--transition .category-switcher,
.category-dialog.category-dialog--transition .category-gallery__intro,
.category-dialog.category-dialog--transition .category-about,
.category-dialog.category-dialog--transition .video-tile{opacity:0;transform:translateY(14px);transition:opacity .42s ease,transform .68s var(--ease)}
.category-dialog.category-dialog--transition.is-entered .category-header{opacity:1;transform:none;transition-delay:.08s}
.category-dialog.category-dialog--transition.is-entered .category-switcher{opacity:1;transform:none;transition-delay:.18s}
.category-dialog.category-dialog--transition.is-entered .category-gallery__intro,
.category-dialog.category-dialog--transition.is-entered .category-about{opacity:1;transform:none;transition-delay:.28s}
.category-dialog.category-dialog--transition.is-entered .video-tile{opacity:1;transform:none}
.category-dialog.category-dialog--transition.is-entered .video-tile:nth-child(1){transition-delay:.34s}
.category-dialog.category-dialog--transition.is-entered .video-tile:nth-child(2){transition-delay:.42s}
.category-dialog.category-dialog--transition.is-entered .video-tile:nth-child(3){transition-delay:.50s}
.category-dialog.category-dialog--transition.is-entered .video-tile:nth-child(4){transition-delay:.58s}
.category-dialog.category-dialog--transition.is-entered .video-tile:nth-child(5){transition-delay:.66s}
.category-dialog.category-dialog--transition.is-entered .video-tile:nth-child(6){transition-delay:.74s}
.category-shell{min-height:100%;display:flex;flex-direction:column;padding:clamp(26px,4vw,72px) clamp(22px,5vw,108px) clamp(30px,4vw,68px);background:radial-gradient(ellipse at 75% 0%,rgba(255,255,255,.94),transparent 45%),var(--paper);overflow:auto}
.category-header{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex:0 0 auto;border-bottom:1px solid rgba(37,51,72,.22);padding-bottom:clamp(22px,2.8vw,46px)}
.category-heading small{display:block;color:var(--red);font-size:10px;letter-spacing:.22em;font-weight:700}
.category-heading h2{margin:16px 0 10px;font-size:clamp(42px,6.3vw,108px);line-height:.95;font-weight:400;letter-spacing:-.06em}
.category-heading p{margin:0;max-width:40em;font-size:14px;line-height:1.8;letter-spacing:.09em}
.dialog-close{position:static;display:flex;align-items:center;gap:12px;color:var(--ink);font-size:34px;line-height:1;transition:color .25s ease,transform .25s var(--ease)}
.dialog-close span{font-size:11px;letter-spacing:.12em}
.dialog-close:hover,.dialog-close:focus-visible{color:var(--red);transform:translateY(-3px)}
.category-gallery{padding-top:clamp(24px,3.5vw,58px)}
.category-gallery__intro{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:18px;color:rgba(37,51,72,.68);font-size:11px;letter-spacing:.16em}
.category-gallery__count{color:var(--red);font-weight:700}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(20px,2.6vw,44px)}
.video-tile{display:block;padding:0;text-align:left;color:var(--ink);cursor:pointer}
.video-tile__media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#22344a;box-shadow:0 10px 32px rgba(37,51,72,.14)}
.video-tile__media:after{content:"";position:absolute;inset:0;border:1px solid rgba(244,243,238,.38);pointer-events:none}
.video-tile__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .35s ease}
.video-tile__play{position:absolute;left:18px;bottom:16px;z-index:1;padding:8px 10px;background:var(--red);color:var(--paper);font-size:10px;letter-spacing:.16em;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s var(--ease)}
.video-tile:hover .video-tile__media img,.video-tile:focus-visible .video-tile__media img{transform:scale(1.035);filter:saturate(1.08)}
.video-tile:hover .video-tile__play,.video-tile:focus-visible .video-tile__play{opacity:1;transform:none}
.video-tile:focus-visible{outline:2px solid var(--red);outline-offset:7px}
.video-tile__caption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:13px;border-bottom:1px solid rgba(37,51,72,.2);padding-bottom:12px}
.video-tile__caption strong{font-size:15px;font-weight:500;letter-spacing:.02em}
.video-tile__caption small{font-size:10px;letter-spacing:.11em;color:rgba(37,51,72,.66);white-space:nowrap}
.video-detail{display:flex;flex:1;min-height:0;flex-direction:column;padding-top:clamp(18px,2.8vw,42px)}
.video-detail__toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:18px;color:rgba(37,51,72,.72);font-size:11px;letter-spacing:.12em}
.video-detail__back{padding:8px 0;border-bottom:1px solid currentColor;font-size:11px;letter-spacing:.12em;transition:color .25s ease,transform .25s var(--ease)}
.video-detail__back:hover,.video-detail__back:focus-visible{color:var(--red);transform:translateX(-4px)}
.video-detail__label{color:var(--red);font-weight:700}
.video-detail__stage{display:flex;flex:1;min-height:0;align-items:center;justify-content:center;background:rgba(37,51,72,.06);padding:clamp(12px,2vw,28px)}
.video-detail__stage video{display:block;background:#111b29;max-width:100%;max-height:calc(100vh - 220px);width:auto;height:auto;box-shadow:0 18px 44px rgba(37,51,72,.2)}
.video-detail__stage video[data-ratio="landscape"]{width:min(100%,1200px);aspect-ratio:16/9;object-fit:contain}
.video-detail__stage video[data-ratio="wide"]{width:min(100%,1400px);aspect-ratio:2/1;object-fit:contain}
.video-detail__stage video[data-ratio="ultrawide"]{width:min(100%,1440px);aspect-ratio:64/27;object-fit:contain}
.video-detail__stage video[data-ratio="portrait"]{height:min(72vh,calc(100vh - 220px));width:auto}
.category-about{display:grid;align-content:center;flex:1;min-height:240px;padding:clamp(50px,9vw,160px) 0}
.category-about em{color:var(--red);font-size:11px;letter-spacing:.18em;font-style:normal}
.category-about p{max-width:18em;margin:24px 0 0;font-size:clamp(30px,4.2vw,72px);line-height:1.05;font-weight:400;letter-spacing:-.045em}
@media(max-width:700px){.category-shell{padding:22px 18px 28px}.category-header{gap:18px}.category-heading h2{font-size:clamp(42px,14vw,76px)}.category-heading p{font-size:12px}.dialog-close{font-size:28px}.dialog-close span{display:none}.category-gallery__intro{font-size:9px}.video-grid{grid-template-columns:1fr;gap:28px}.video-tile__caption{display:block}.video-tile__caption small{display:block;margin-top:7px}.video-detail__toolbar{font-size:9px}.video-detail__label{max-width:45%;text-align:right}.video-detail__stage{padding:10px}.video-detail__stage video[data-ratio="landscape"]{width:100%;height:auto}.video-detail__stage video[data-ratio="portrait"]{max-height:calc(100vh - 190px)}}
@media(prefers-reduced-motion:reduce){.video-tile__media img,.video-tile__play,.dialog-close,.video-detail__back{transition:none}.category-dialog.category-dialog--transition,.category-dialog.category-dialog--transition .category-header,.category-dialog.category-dialog--transition .category-switcher,.category-dialog.category-dialog--transition .category-gallery__intro,.category-dialog.category-dialog--transition .category-about,.category-dialog.category-dialog--transition .video-tile{opacity:1;transform:none;transition:none}}

/* User refinement: enlarge the buy module to match the lower-left reference frame. */
.portfolio-grid[data-active=clouds] .card--clouds .card-visual,
.portfolio-grid[data-active=clouds] .card--clouds .crosshair-layer{
  transform:translate(-.7vw,-2vh) scale(1.35)
}
@media(max-width:1050px){
  .portfolio-grid[data-active=clouds] .card--clouds .card-visual,
  .portfolio-grid[data-active=clouds] .card--clouds .crosshair-layer{
    transform:translate(-.5vw,-1.5vh) scale(1.27)
  }
}
@media(max-width:700px){
  .portfolio-grid[data-active=clouds] .card--clouds .card-visual,
  .portfolio-grid[data-active=clouds] .card--clouds .crosshair-layer{
    transform:translate(-.3vw,-.8vh) scale(1.2)
  }
}

/* Category index refinement: compact film catalogue with deliberate future slots. */
.category-shell{padding:clamp(24px,3vw,54px) clamp(22px,4.2vw,86px) clamp(30px,3vw,54px)}
.category-header{padding-bottom:clamp(20px,2.2vw,34px)}
.category-heading h2{margin:12px 0 8px;font-size:clamp(38px,4.8vw,78px);letter-spacing:-.075em}
.category-heading p{font-size:13px;letter-spacing:.07em}
.category-gallery{padding-top:clamp(22px,2.6vw,38px)}
.category-gallery__intro{margin-bottom:16px;font-size:10px;letter-spacing:.13em}
.video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,36px) clamp(16px,1.7vw,30px)}
.video-tile__media{box-shadow:none;background:#22344a}
.video-tile__caption{padding-top:10px;padding-bottom:10px}
.video-tile__caption strong{font-size:14px}
.video-tile__caption small{font-size:9px}
.video-tile--placeholder{cursor:default}
.video-tile--placeholder .video-tile__media{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,1.5vw,24px);border:1px dashed rgba(37,51,72,.34);background:linear-gradient(135deg,rgba(37,51,72,.06),rgba(37,51,72,.015))}
.video-tile--placeholder .video-tile__media:after{display:none}
.video-tile__placeholder-index{font-size:clamp(30px,3vw,54px);line-height:1;font-weight:400;letter-spacing:-.08em;color:rgba(37,51,72,.28)}
.video-tile__placeholder-label{align-self:flex-end;color:rgba(37,51,72,.5);font-size:10px;letter-spacing:.13em}

/* User refinement: make the default view match the preferred 90% browser zoom. */
:root{--page-scale:.9}
@supports (zoom:.9){
  body{zoom:var(--page-scale)}
}
@supports not (zoom:.9){
  body{width:calc(100% / var(--page-scale));transform:scale(var(--page-scale));transform-origin:top left}
}
.video-tile--placeholder .video-tile__caption{border-bottom-color:rgba(37,51,72,.14)}
.video-tile--placeholder .video-tile__caption strong{color:rgba(37,51,72,.58);font-weight:400}
.video-tile--placeholder .video-tile__caption small{color:rgba(37,51,72,.42)}
.video-tile:disabled{opacity:1}
@media(max-width:1050px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.video-grid{grid-template-columns:1fr;gap:24px 16px}.category-heading h2{font-size:clamp(38px,11vw,62px)}.video-tile__caption strong{font-size:13px}.video-tile__caption small{font-size:9px;white-space:normal}}

/* Keep the paper field flush with the viewport and center the main frame in portrait layouts. */
html,body{min-height:100%}
body,.site-shell{min-height:calc(100svh / var(--page-scale,1))}
.portfolio-stage{margin-bottom:0}
@supports (height:100dvh){body,.site-shell{min-height:calc(100dvh / var(--page-scale,1))}}
@media (max-aspect-ratio:1/1){
  .card--main{left:calc(50% - min(18.5vw,410px))}
}
@media(max-width:470px){.video-grid{grid-template-columns:1fr}}

/* Secondary navigation keeps the three-level journey visible. */
.category-dialog [hidden]{display:none!important}
.category-dialog{overscroll-behavior:contain}
.category-switcher{display:flex;align-items:center;gap:clamp(16px,2.2vw,36px);min-height:52px;margin-top:clamp(16px,2vw,28px);border-bottom:1px solid rgba(37,51,72,.16);overflow-x:auto;scrollbar-width:none}
.category-switcher::-webkit-scrollbar{display:none}
.category-switcher button{position:relative;flex:0 0 auto;padding:12px 0 13px;color:rgba(37,51,72,.62);font-size:12px;letter-spacing:.05em;transition:color .25s ease,transform .25s var(--ease)}
.category-switcher button:before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .25s var(--ease)}
.category-switcher button:hover,.category-switcher button[aria-current=true],.category-switcher button:focus-visible{color:var(--red);transform:translateY(-1px)}
.category-switcher button:hover:before,.category-switcher button[aria-current=true]:before,.category-switcher button:focus-visible:before{transform:scaleX(1)}
.category-switcher button:focus-visible{outline:2px solid var(--red);outline-offset:4px}
@media(max-width:700px){.category-switcher{gap:20px;margin-top:14px}.category-switcher button{font-size:11px}}

/* Keep the secondary page at the normal reading width on ultrawide screens. */
.category-dialog{background:var(--paper)}
.category-shell{width:min(100%,var(--stage-max));margin-inline:auto}

/* About page: a single long-form resume in the same paper, ink, and red system. */
.category-dialog.is-about .category-shell{background:var(--paper)}
.category-dialog.is-about .category-shell{height:100%;max-height:100%;overflow-x:hidden;overflow-y:auto}
.category-dialog.is-about .category-header{border-bottom-color:rgba(37,51,72,.26)}
.category-about.resume-page{display:block;flex:none;min-height:0;padding:clamp(34px,4vw,66px) 0 clamp(70px,9vw,132px);color:var(--ink)}
.resume-page__masthead{display:grid;grid-template-columns:minmax(0,1fr) clamp(148px,17vw,238px);align-items:end;gap:clamp(26px,6vw,96px);padding-bottom:clamp(28px,4vw,58px);border-bottom:1px solid rgba(37,51,72,.24)}
.resume-page__eyebrow{display:block;color:var(--red);font-size:10px;letter-spacing:.2em;font-weight:700}
.resume-page__masthead h2{margin:18px 0 12px;font-size:clamp(58px,9vw,132px);line-height:.88;font-weight:400;letter-spacing:-.09em}
.resume-page__lead{margin:0;max-width:28em;font-size:clamp(17px,1.8vw,25px);line-height:1.45;letter-spacing:.04em}
.resume-page__portrait{display:block;width:100%;aspect-ratio:3 / 4;object-fit:cover;border:1px solid rgba(37,51,72,.56);filter:saturate(.88)}
.resume-page__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,52px);padding:clamp(22px,3vw,40px) 0 clamp(12px,2vw,26px);border-bottom:1px solid rgba(37,51,72,.2)}
.resume-page__meta>div{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.resume-page__meta span{color:var(--red);font-size:10px;letter-spacing:.16em;font-weight:700}
.resume-page__meta strong,.resume-page__meta a{font-size:13px;line-height:1.55;font-weight:400;letter-spacing:.02em;overflow-wrap:anywhere}
.resume-page__meta a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s ease}
.resume-page__meta a:hover,.resume-page__meta a:focus-visible{color:var(--red)}
.resume-block{display:grid;grid-template-columns:minmax(146px,.26fr) minmax(0,1fr);gap:clamp(26px,6vw,96px);padding:clamp(30px,4vw,58px) 0;border-bottom:1px solid rgba(37,51,72,.2)}
.resume-block h3{margin:0;color:var(--red);font-size:11px;line-height:1.2;letter-spacing:.17em;font-weight:700}
.resume-block--intent{padding-top:clamp(28px,3.4vw,48px);padding-bottom:clamp(28px,3.4vw,48px)}
.resume-intent{margin:0;font-size:clamp(25px,3.2vw,46px);line-height:1.05;letter-spacing:-.05em}
.resume-intent span{margin-left:.55em;color:rgba(37,51,72,.56);font-size:.56em;letter-spacing:.04em}
.resume-entries{min-width:0}
.resume-entry{display:grid;grid-template-columns:minmax(118px,.25fr) minmax(0,1fr);gap:clamp(18px,4vw,62px);padding:0 0 clamp(24px,3vw,40px);margin:0 0 clamp(24px,3vw,40px);border-bottom:1px solid rgba(37,51,72,.14)}
.resume-entry:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.resume-entry__date{color:rgba(37,51,72,.62);font-size:11px;line-height:1.6;letter-spacing:.08em}
.resume-entry h4{margin:0;font-size:clamp(18px,2.1vw,28px);line-height:1.2;font-weight:500;letter-spacing:-.025em}
.resume-entry__role{margin:7px 0 13px;color:var(--red);font-size:11px;line-height:1.4;letter-spacing:.12em}
.resume-entry ul{margin:0;padding:0;list-style:none}
.resume-entry li{position:relative;padding-left:1.15em;color:rgba(37,51,72,.86);font-size:13px;line-height:1.85;letter-spacing:.025em}
.resume-entry li::before{content:"";position:absolute;left:0;top:.83em;width:5px;height:1px;background:var(--red)}
.resume-education{display:grid;gap:14px}
.resume-education p{display:grid;grid-template-columns:minmax(128px,.34fr) minmax(0,1fr);gap:18px;margin:0;padding-bottom:14px;border-bottom:1px solid rgba(37,51,72,.14);font-size:13px;line-height:1.6}
.resume-education p:last-child{padding-bottom:0;border-bottom:0}
.resume-education strong{font-weight:400;color:rgba(37,51,72,.62);letter-spacing:.06em}
.resume-education span{letter-spacing:.03em}
.resume-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.resume-summary p{margin:0;padding:0 0 15px;color:rgba(37,51,72,.86);font-size:15px;line-height:1.55;letter-spacing:.03em}
.resume-summary__closing{grid-column:1 / -1;margin-top:14px!important;padding-top:24px;border-top:1px solid rgba(37,51,72,.16);color:var(--ink)!important;font-size:clamp(17px,2vw,26px)!important;line-height:1.55!important;letter-spacing:.01em!important}
@media(max-width:700px){
  .category-about.resume-page{padding-top:28px;padding-bottom:70px}
  .resume-page__masthead{grid-template-columns:minmax(0,1fr) 112px;gap:18px;padding-bottom:28px}
  .resume-page__masthead h2{margin-top:14px;font-size:clamp(54px,17vw,90px)}
  .resume-page__lead{font-size:16px}
  .resume-page__meta{grid-template-columns:1fr 1fr;gap:22px 18px}
  .resume-page__meta>div:last-child{grid-column:1 / -1}
  .resume-page__meta strong,.resume-page__meta a{font-size:12px}
  .resume-block{grid-template-columns:1fr;gap:18px;padding:30px 0}
  .resume-entry{grid-template-columns:1fr;gap:8px;padding-bottom:24px;margin-bottom:24px}
  .resume-entry__date{font-size:10px}
  .resume-entry h4{font-size:21px}
  .resume-entry li{font-size:12px;line-height:1.8}
  .resume-education p{grid-template-columns:1fr;gap:3px;font-size:12px}
  .resume-summary{grid-template-columns:1fr;gap:0}
  .resume-summary__closing{grid-column:auto}
}

/* Resume hierarchy follows the source PDF: title, identity, section bars, job rows, projects, body copy. */
.category-about.resume-page{display:block;flex:none;min-height:0;padding:0;color:var(--ink)}
.resume-document{width:min(100%,980px);margin:0 auto;padding:clamp(26px,4vw,56px) 0 clamp(72px,9vw,124px)}
.resume-document__title{margin:0 0 clamp(34px,5vw,58px);text-align:center;font-size:clamp(29px,3.2vw,46px);line-height:1.1;font-weight:600;letter-spacing:.03em}
.resume-profile{display:grid;grid-template-columns:minmax(0,1fr) clamp(126px,15vw,170px);gap:clamp(28px,5vw,70px);align-items:start;padding:0 14px clamp(28px,4vw,48px)}
.resume-name{margin:0 0 16px;font-size:clamp(27px,3.3vw,42px);line-height:1;font-weight:700;letter-spacing:.02em}
.resume-intent{display:flex;align-items:baseline;gap:8px;margin:0 0 24px;font-size:clamp(15px,1.5vw,20px);line-height:1.4;font-weight:600}
.resume-intent span{letter-spacing:.04em}.resume-intent strong{font-weight:700}.resume-intent em{margin-left:8px;color:rgba(37,51,72,.58);font-style:normal;font-weight:400}
.resume-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 42px;max-width:610px}
.resume-facts p{display:grid;grid-template-columns:5em minmax(0,1fr);gap:10px;margin:0;font-size:13px;line-height:1.6}
.resume-facts span{color:rgba(37,51,72,.65)}.resume-facts strong{font-weight:400}.resume-facts a,.resume-links a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.resume-facts a:hover,.resume-facts a:focus-visible,.resume-links a:hover,.resume-links a:focus-visible{color:var(--red)}
.resume-links{display:grid;gap:9px;margin-top:11px;max-width:760px}
.resume-links a{display:grid;grid-template-columns:10em minmax(0,1fr);gap:10px;font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.resume-links a span{color:rgba(37,51,72,.72);text-decoration:none}.resume-links a strong{font-weight:400}
.resume-profile__portrait{display:block;width:100%;aspect-ratio:3 / 4;object-fit:cover;border:1px solid rgba(37,51,72,.52);filter:saturate(.88)}
.resume-section{margin-top:clamp(26px,4vw,48px)}
.resume-section__title{margin:0 0 clamp(18px,2.4vw,30px);padding:7px 13px 8px;background:rgba(102,132,161,.17);color:#294862;font-size:clamp(16px,1.8vw,22px);line-height:1.3;font-weight:700;letter-spacing:.02em}
.resume-job{margin:0 14px clamp(34px,4vw,52px)}
.resume-job__header{display:grid;grid-template-columns:minmax(132px,.9fr) minmax(170px,1.2fr) minmax(150px,1fr);gap:18px;align-items:baseline;margin-bottom:clamp(16px,2vw,24px);font-size:clamp(14px,1.45vw,18px);line-height:1.45}
.resume-job__header time{font-weight:700;white-space:nowrap}.resume-job__header strong{font-weight:700}.resume-job__header b{text-align:right;font-weight:700}
.resume-job__body{font-size:13px;line-height:1.85;color:rgba(37,51,72,.86)}
.resume-job__body>p{margin:0 0 10px}.resume-label{font-weight:700;color:rgba(37,51,72,.92)}
.resume-job__body a{color:inherit;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;overflow-wrap:anywhere}.resume-job__body a:hover,.resume-job__body a:focus-visible{color:var(--red)}
.resume-subtitle{margin:clamp(22px,3vw,34px) 0 12px;font-size:15px;line-height:1.45;font-weight:700;color:rgba(37,51,72,.9)}
.resume-project{margin:0 0 clamp(23px,3vw,36px)}
.resume-project:last-child{margin-bottom:0}
.resume-project h5{margin:0 0 9px;font-size:15px;line-height:1.5;font-weight:700;color:rgba(37,51,72,.94)}
.resume-project p{margin:0 0 8px}.resume-project p:last-child{margin-bottom:0}
.resume-overview{margin:clamp(24px,4vw,48px) 14px clamp(30px,4vw,52px);padding-top:clamp(22px,3vw,34px);border-top:1px solid rgba(37,51,72,.18);font-size:13px;line-height:1.85;color:rgba(37,51,72,.86)}
.resume-overview p{margin:0 0 10px}.resume-overview p:last-child{margin-bottom:0}
.resume-section--internship,.resume-section--education{margin-top:clamp(28px,4vw,48px)}
.resume-section--summary{margin-top:clamp(38px,5vw,64px)}
.resume-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,38px) clamp(30px,5vw,72px);margin:0 14px;color:rgba(37,51,72,.86)}
.resume-summary article h4{margin:0 0 13px;font-size:15px;line-height:1.5;font-weight:700;color:rgba(37,51,72,.92)}
.resume-summary article p{margin:0;font-size:13px;line-height:1.9}
.resume-summary__closing{grid-column:1 / -1;margin:clamp(8px,2vw,18px) 0 0;padding-top:clamp(18px,2.5vw,28px);border-top:1px solid rgba(37,51,72,.16);font-size:16px!important;line-height:1.7!important;font-weight:700;color:var(--ink)}
@media(max-width:700px){
  .resume-document{padding-top:24px}
  .resume-document__title{margin-bottom:32px;font-size:30px}
  .resume-profile{grid-template-columns:minmax(0,1fr) 100px;gap:18px;padding-inline:0}
  .resume-name{font-size:29px}.resume-intent{font-size:15px;margin-bottom:18px}
  .resume-facts{grid-template-columns:1fr;gap:6px}.resume-facts p{font-size:12px}
  .resume-links{margin-top:14px;gap:7px}.resume-links a{display:block;font-size:11px}.resume-links a span{display:block;margin-bottom:2px}
  .resume-section__title{font-size:17px;margin-bottom:19px}.resume-job{margin-inline:0;margin-bottom:34px}
  .resume-job__header{grid-template-columns:1fr 1fr;gap:2px 12px;font-size:14px;margin-bottom:15px}
  .resume-job__header b{text-align:left;grid-column:1 / -1;color:var(--red);font-size:12px}
  .resume-job__body{font-size:12px;line-height:1.85}.resume-subtitle{font-size:14px}.resume-project h5{font-size:14px}
  .resume-overview,.resume-summary{margin-inline:0}.resume-summary{grid-template-columns:1fr;gap:25px}
  .resume-summary__closing{grid-column:auto;font-size:15px!important}
}

/* The original About placeholder styled every paragraph under .category-about.
   Scope the resume copy explicitly so body text keeps its document scale. */
.category-about.resume-page .resume-intent{max-width:none;margin:0 0 24px;font-size:clamp(15px,1.5vw,20px);line-height:1.4;letter-spacing:normal}
.category-about.resume-page .resume-intent em{max-width:none;margin-left:8px;font-size:inherit;line-height:inherit;letter-spacing:normal}
.category-about.resume-page .resume-job__body{max-width:none;margin:0;font-size:13px;line-height:1.85;letter-spacing:normal}
.category-about.resume-page .resume-job__body>p{max-width:none;margin:0 0 10px;font-size:inherit;line-height:inherit;letter-spacing:inherit}
.category-about.resume-page .resume-project p{max-width:none;margin:0 0 8px;font-size:inherit;line-height:inherit;letter-spacing:inherit}
.category-about.resume-page .resume-overview p{max-width:none;margin:0 0 10px;font-size:inherit;line-height:inherit;letter-spacing:inherit}
.category-about.resume-page .resume-summary article p{max-width:none;margin:0;font-size:13px;line-height:1.9;letter-spacing:normal}
.category-about.resume-page .resume-summary__closing{max-width:none;margin:clamp(8px,2vw,18px) 0 0;font-size:16px!important;line-height:1.7!important;letter-spacing:normal}
@media(max-width:700px){
  .category-about.resume-page .resume-job__body{font-size:12px;line-height:1.85}
  .category-about.resume-page .resume-summary article p{font-size:12px;line-height:1.9}
  .category-about.resume-page .resume-summary__closing{font-size:15px!important}
}

/* Three-page resume deck: the document is rebuilt as a navigable editorial spread. */
.category-dialog.is-about .category-shell{overflow:hidden}
.category-dialog.is-about .category-about.resume-page{display:block;flex:1 1 auto;min-height:0;height:100%;padding:0;overflow:hidden;color:var(--ink)}
.resume-deck{height:100%;min-height:0;display:grid;grid-template-columns:minmax(132px,13vw) minmax(0,1fr) minmax(92px,8vw);gap:clamp(18px,3.2vw,58px);padding:clamp(24px,3vw,52px) 0 clamp(20px,2.5vw,42px)}
.resume-rail{display:flex;flex-direction:column;min-width:0;padding:5px 0 4px;border-right:1px solid rgba(37,51,72,.18);color:rgba(37,51,72,.8)}
.resume-rail__eyebrow,.resume-panel__eyebrow{color:var(--red);font-size:10px;line-height:1.2;letter-spacing:.16em;font-weight:700}
.resume-rail__name{margin-top:auto;font-size:clamp(42px,5vw,76px);line-height:.86;letter-spacing:-.11em;font-weight:500;writing-mode:vertical-rl;text-orientation:mixed}
.resume-rail__role{margin-top:18px;font-size:11px;line-height:1.85;letter-spacing:.08em}
.resume-rail__line{width:1px;height:64px;margin:20px 0;background:var(--red)}
.resume-rail__prompt{font-size:10px;line-height:1.75;letter-spacing:.13em;color:rgba(37,51,72,.55)}
.resume-rail__page{display:flex;align-items:baseline;gap:6px;margin-top:18px;font-size:11px;letter-spacing:.15em}
.resume-rail__page strong{color:var(--red);font-size:28px;line-height:1;font-weight:400;letter-spacing:-.04em}
.resume-viewport{min-width:0;min-height:0;overflow:hidden;outline:none;touch-action:pan-y}
.resume-viewport:focus-visible{outline:1px solid var(--red);outline-offset:8px}
.resume-track{display:flex;height:100%;transition:transform .72s var(--ease);will-change:transform}
.resume-panel{flex:0 0 100%;min-width:0;height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(37,51,72,.25) transparent;padding:0 clamp(2px,1vw,16px) clamp(34px,5vw,78px) 0}
.resume-panel[aria-hidden=true]{pointer-events:none}
.resume-panel__head{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;padding:0 0 clamp(22px,2.5vw,40px);border-bottom:1px solid rgba(37,51,72,.25)}
.resume-panel__head h1,.resume-panel__head h2{margin:14px 0 10px;font-size:clamp(50px,6vw,100px);line-height:.9;letter-spacing:-.095em;font-weight:400}
.resume-panel__head p{max-width:38em;margin:0;font-size:clamp(14px,1.35vw,19px);line-height:1.55;letter-spacing:.015em;color:rgba(37,51,72,.72)}
.resume-panel__head p i{color:var(--red);font-style:normal;padding:0 .3em}
.resume-panel__stamp{align-self:flex-start;padding-top:4px;color:rgba(37,51,72,.5);font-size:9px;line-height:1.6;letter-spacing:.18em;text-align:right}
.resume-panel__body{padding-top:clamp(24px,3vw,46px)}
.resume-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(132px,15vw,210px);gap:clamp(24px,5vw,86px);align-items:start;margin-bottom:clamp(28px,4vw,58px)}
.resume-profile-block__intent{display:flex;align-items:baseline;gap:10px;margin-bottom:clamp(18px,2.5vw,32px)}
.resume-profile-block__intent span{color:var(--red);font-size:10px;letter-spacing:.15em;font-weight:700}.resume-profile-block__intent strong{font-size:clamp(22px,2.3vw,36px);font-weight:500;letter-spacing:-.05em}.resume-profile-block__intent em{font-size:12px;color:rgba(37,51,72,.55);font-style:normal}
.resume-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 32px;margin:0;padding:0;max-width:620px}
.resume-facts div{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:10px;font-size:12px;line-height:1.55}.resume-facts dt{color:rgba(37,51,72,.56)}.resume-facts dd{margin:0}.resume-facts a,.resume-links a{color:inherit;text-decoration-color:var(--red);text-underline-offset:4px}
.resume-links{display:grid;gap:8px;margin-top:22px;max-width:690px}.resume-links a{display:grid;grid-template-columns:6em minmax(0,1fr);gap:12px;font-size:11px;line-height:1.5}.resume-links a span{color:rgba(37,51,72,.55);text-decoration:none}.resume-links a strong{font-weight:400;overflow-wrap:anywhere}
.resume-portrait{margin:0}.resume-portrait img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid rgba(37,51,72,.5);filter:saturate(.88)}.resume-portrait figcaption{margin-top:8px;color:rgba(37,51,72,.52);font-size:9px;letter-spacing:.15em}
.resume-section-label{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline;gap:14px;margin:clamp(30px,4vw,56px) 0 clamp(18px,2.2vw,30px);padding:10px 12px 11px;background:rgba(102,132,161,.14);color:#294862}.resume-section-label span{color:var(--red);font-size:10px;letter-spacing:.13em}.resume-section-label strong{font-size:clamp(16px,1.6vw,22px);font-weight:700}.resume-section-label i{color:rgba(37,51,72,.52);font-size:9px;letter-spacing:.15em;font-style:normal}
.resume-role{margin:0 0 clamp(30px,4vw,52px)}.resume-role--feature{margin-bottom:clamp(24px,3vw,42px)}
.resume-role__header{display:grid;grid-template-columns:minmax(130px,.7fr) minmax(160px,1.2fr) minmax(130px,.8fr);gap:20px;align-items:baseline;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(37,51,72,.18);font-size:clamp(14px,1.3vw,18px);line-height:1.35}.resume-role__header time{color:var(--red);font-size:11px;letter-spacing:.06em}.resume-role__header strong{font-weight:700}.resume-role__header b{text-align:right;font-weight:500;color:rgba(37,51,72,.72)}
.resume-role__content{font-size:13px;line-height:1.85;color:rgba(37,51,72,.86)}.resume-role__content>p{margin:0 0 9px}.resume-label{margin-right:.45em;color:rgba(37,51,72,.58);font-size:.9em;letter-spacing:.08em;font-weight:700}.resume-role__content a{color:inherit;text-decoration-color:var(--red);text-underline-offset:4px}
.resume-role__lead{min-width:0}.resume-role__lead p{max-width:none;margin:0 0 9px;font-size:13px;line-height:1.85;letter-spacing:normal}.resume-role__lead p:last-child{margin-bottom:0}
.resume-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}.resume-project-card{position:relative;min-width:0;padding:20px 20px 22px;border:1px solid rgba(37,51,72,.2);background:rgba(255,255,255,.25)}.resume-project-card__index{display:block;margin-bottom:22px;color:var(--red);font-size:10px;letter-spacing:.16em}.resume-project-card h3{margin:0 0 5px;font-size:clamp(17px,1.8vw,25px);line-height:1.2;letter-spacing:-.04em;font-weight:600}.resume-project-card h4{margin:0 0 15px;color:rgba(37,51,72,.58);font-size:11px;line-height:1.45;letter-spacing:.05em;font-weight:400}.resume-project-card p{margin:0 0 8px;font-size:12px;line-height:1.8}.resume-project-card p:last-child{margin-bottom:0}.resume-project-card--wide{margin:22px 0 24px;max-width:none;background:rgba(255,255,255,.25)}
.resume-overview{display:grid;grid-template-columns:minmax(130px,.35fr) minmax(0,1fr);gap:clamp(24px,5vw,86px);padding:clamp(24px,3vw,40px) 0 0;border-top:1px solid rgba(37,51,72,.2)}.resume-overview__label{color:var(--red);font-size:11px;line-height:1.4;letter-spacing:.15em;font-weight:700}.resume-overview__copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}.resume-overview__copy p{margin:0 0 16px;font-size:13px;line-height:1.85}.resume-overview__copy p:last-child{grid-column:1/-1;margin-bottom:0}
.resume-timeline{padding-top:clamp(28px,4vw,56px)}.resume-timeline .resume-role{position:relative;padding-left:clamp(16px,2vw,28px);border-left:1px solid rgba(37,51,72,.2)}.resume-timeline .resume-role:before{content:"";position:absolute;left:-4px;top:3px;width:7px;height:7px;background:var(--red);border-radius:50%}.resume-timeline .resume-role__content{max-width:980px}.resume-subhead{margin:22px 0 10px;color:var(--red);font-size:11px;line-height:1.4;letter-spacing:.14em;font-weight:700}.resume-bullets{margin:0;padding:0;list-style:none}.resume-bullets li{position:relative;margin:0 0 8px;padding-left:1.2em;font-size:13px;line-height:1.85}.resume-bullets li:before{content:"";position:absolute;left:0;top:.86em;width:6px;height:1px;background:var(--red)}
.resume-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}.resume-summary-grid article{position:relative;padding:24px 22px 25px;border-top:2px solid var(--red);background:rgba(255,255,255,.22)}.resume-summary-grid__index{display:block;margin-bottom:22px;color:rgba(37,51,72,.45);font-size:10px;letter-spacing:.15em}.resume-summary-grid h3{margin:0 0 13px;font-size:clamp(16px,1.6vw,22px);line-height:1.35;font-weight:600;letter-spacing:-.03em}.resume-summary-grid p{margin:0;font-size:13px;line-height:1.85;color:rgba(37,51,72,.82)}.resume-closing{margin:clamp(28px,4vw,54px) 0 0;padding-top:20px;border-top:1px solid rgba(37,51,72,.2);font-size:clamp(18px,2vw,28px);line-height:1.45;letter-spacing:-.035em;font-weight:500}
.resume-controls{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:14px;padding-bottom:4px}.resume-controls button{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:12px 0;border-bottom:1px solid rgba(37,51,72,.28);color:var(--ink);font-size:clamp(20px,2.3vw,34px);line-height:1;transition:color .2s ease,transform .2s var(--ease)}.resume-controls button span{font-size:9px;letter-spacing:.12em}.resume-controls button:hover:not(:disabled),.resume-controls button:focus-visible{color:var(--red);transform:translateX(4px)}.resume-controls button:disabled{opacity:.22;cursor:default}.resume-controls__status{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:4px;margin:8px 0;color:rgba(37,51,72,.55);font-size:11px;letter-spacing:.1em}.resume-controls__status strong{color:var(--red);font-size:34px;line-height:1;font-weight:400;letter-spacing:-.06em}.resume-controls__status small{grid-column:1/-1;margin-top:10px;color:rgba(37,51,72,.48);font-size:9px;line-height:1.5;letter-spacing:.1em}
@media(max-width:1050px){.resume-deck{grid-template-columns:100px minmax(0,1fr) 78px;gap:20px}.resume-rail__name{font-size:52px}.resume-project-grid{gap:10px}.resume-project-card{padding:17px}.resume-overview{gap:24px}.resume-overview__copy{grid-template-columns:1fr}.resume-overview__copy p:last-child{grid-column:auto}}
@media(max-width:700px){.category-dialog.is-about .category-shell{overflow:hidden}.resume-deck{display:flex;flex-direction:column;gap:0;padding:16px 0 12px}.resume-rail{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:end;gap:4px 14px;padding:0 0 14px;border-right:0;border-bottom:1px solid rgba(37,51,72,.18)}.resume-rail__eyebrow{grid-column:1/-1}.resume-rail__name{margin:0;writing-mode:horizontal-tb;font-size:34px;letter-spacing:-.08em}.resume-rail__role{margin:0;font-size:9px;line-height:1.45}.resume-rail__line,.resume-rail__prompt{display:none}.resume-rail__page{margin:0;justify-self:end}.resume-rail__page strong{font-size:24px}.resume-viewport{flex:1;min-height:0;margin-top:14px}.resume-panel{padding:0 2px 40px 0}.resume-panel__head{gap:15px;padding-bottom:20px}.resume-panel__head h1,.resume-panel__head h2{margin:10px 0 8px;font-size:clamp(42px,14vw,76px)}.resume-panel__head p{font-size:13px}.resume-panel__stamp{font-size:8px}.resume-intro-grid{grid-template-columns:minmax(0,1fr) 92px;gap:16px;margin-bottom:25px}.resume-profile-block__intent{gap:7px;margin-bottom:18px}.resume-profile-block__intent strong{font-size:23px}.resume-facts{grid-template-columns:1fr;gap:6px}.resume-facts div{font-size:11px}.resume-links{margin-top:17px;gap:6px}.resume-links a{grid-template-columns:5em minmax(0,1fr);gap:7px;font-size:10px}.resume-portrait figcaption{font-size:7px;letter-spacing:.08em}.resume-section-label{grid-template-columns:35px minmax(0,1fr);gap:8px;margin:25px 0 17px;padding:8px 9px}.resume-section-label i{grid-column:2;font-size:8px}.resume-role{margin-bottom:32px}.resume-role__header{grid-template-columns:1fr 1fr;gap:4px 12px;margin-bottom:14px;font-size:14px}.resume-role__header time{grid-column:1/-1;font-size:10px}.resume-role__header b{text-align:left;color:var(--red);font-size:11px}.resume-role__content{font-size:12px;line-height:1.85}.resume-project-grid,.resume-summary-grid{grid-template-columns:1fr;gap:10px}.resume-project-card{padding:16px}.resume-project-card__index{margin-bottom:16px}.resume-project-card p,.resume-bullets li,.resume-summary-grid p{font-size:12px;line-height:1.8}.resume-overview{grid-template-columns:1fr;gap:12px;padding-top:20px}.resume-overview__copy{display:block}.resume-overview__copy p{font-size:12px;line-height:1.8;margin-bottom:12px}.resume-timeline{padding-top:24px}.resume-timeline .resume-role{padding-left:15px}.resume-closing{font-size:20px}.resume-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px;padding:12px 0 0}.resume-controls button{font-size:25px}.resume-controls button span{font-size:8px}.resume-controls__status{margin:0;justify-content:center}.resume-controls__status small{display:none}.resume-controls__status strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){.resume-track{transition:none}.resume-controls button{transition:none}}

/* Resume typography repair: keep the three-page deck editorial, readable, and
   stable across Windows browsers where Arial has no Chinese glyphs. */
body{font-family:"Microsoft YaHei","Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif}
.category-dialog.is-about .category-heading h2{font-family:"Microsoft YaHei","Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;font-size:clamp(38px,5.2vw,86px);font-weight:500;letter-spacing:-.08em}
.category-dialog.is-about .category-heading p{font-size:14px;letter-spacing:.04em;color:rgba(37,51,72,.72)}
.resume-deck{font-family:"Microsoft YaHei","Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB",sans-serif}
.resume-panel__head h1,.resume-panel__head h2{font-weight:600;letter-spacing:-.075em}
.resume-panel__head p{font-weight:400;letter-spacing:.02em}
.resume-role__header strong,.resume-role__header b,.resume-section-label strong,.resume-project-card h3,.resume-project-card h4,.resume-summary-grid h3{font-weight:600}
.resume-role__content,.resume-project-card p,.resume-overview__copy p,.resume-summary-grid p,.resume-bullets li{line-height:1.78}
@media(max-width:700px){.category-dialog.is-about .category-heading h2{font-size:clamp(38px,12vw,68px)}.resume-panel__head h1,.resume-panel__head h2{font-weight:600;letter-spacing:-.06em}.resume-role__content,.resume-project-card p,.resume-overview__copy p,.resume-summary-grid p,.resume-bullets li{line-height:1.8}}

/* Final pass after the interrupted edit: use the Windows Chinese UI face first
   and keep the resume page headings from overpowering the body copy. */
body{font-family:"Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif}
.resume-panel__head h1,.resume-panel__head h2{font-size:clamp(46px,5.4vw,92px);line-height:.96}
.resume-rail__name{letter-spacing:-.075em}