/* nP 0.3: portfolio extension. No remote fonts, frameworks or tracking. */
.portfolio-section{background:#edf0ee}
.portfolio-section .projects-intro{padding-bottom:48px}
.portfolio-section .projects-intro h2{font-size:clamp(50px,6.5vw,98px)}
.portfolio-section .projects-intro>p{max-width:320px;font-size:14px;line-height:1.8}
.work-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #20354128;padding-bottom:20px;margin-bottom:30px;gap:24px}
.work-filters{display:flex;gap:8px;flex-wrap:wrap}
.work-filter{background:transparent;border:1px solid #243f502b;color:#43535b;padding:12px 20px;border-radius:40px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:15px;transition:background .2s,color .2s}
.work-filter.active{background:#12252f;border-color:#12252f;color:#eaf3f7}
.work-filter sup{font-size:8px;letter-spacing:.05em;opacity:.7}
.work-count{font-size:9px;color:#647780;letter-spacing:.12em;white-space:nowrap}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:43px 28px}
.work-card[hidden]{display:none!important}
.work-card-link{color:inherit;display:block;text-decoration:none}
.work-image{position:relative;overflow:hidden;aspect-ratio:1.54;background:#cfd9dc;isolation:isolate}
.work-thumb{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.75,.25,1)}
.work-tag{position:absolute;left:19px;top:19px;padding:6px 8px;color:#fff;background:#10222db5;font-size:8px;letter-spacing:.14em;line-height:1.3}
.work-arrow{position:absolute;right:18px;bottom:18px;border:1px solid #e0eff777;border-radius:50%;height:36px;width:36px;display:grid;place-items:center;color:#f4fafc;background:#13232da8;font-size:20px}
.mobility-card .work-image{background:linear-gradient(140deg,#e9eceb,#bec7ca)}
.mobility-card .work-thumb{object-fit:contain;width:100%;height:100%;padding:50px 18px 26px;mix-blend-mode:multiply}
.marine-card .work-thumb{object-position:center center}
.wheel-card .work-image{background:#111}
.wheel-card .work-thumb{object-position:center 39%}
.work-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding-top:19px}
.work-caption h3{font-size:clamp(24px,2.55vw,38px);font-weight:400;letter-spacing:-.045em;line-height:1.1;margin:0 0 10px}
.work-caption p{font-size:12px;color:#5c727e;line-height:1.6}
.work-status{font-size:7px;max-width:135px;text-align:right;letter-spacing:.1em;line-height:1.8;color:#637983;padding-top:6px}
.portfolio-footnote{font-size:11px;color:#637781;margin-top:42px;max-width:630px;line-height:1.8}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.work-card-link:hover .work-thumb{transform:scale(1.035)}.work-card-link:hover .work-arrow{background:#c7e0ed;color:#10222d}.gallery-zoom:hover .zoom-mark{background:#c7e0ed;color:#10222d}}
/* Reduce simultaneous compositing on phones while keeping the opening and scroll story. */
@keyframes product-enter{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
.hero-outside .product-float,.hero-outside .scroll-stroke:after{animation-play-state:paused}
.hero-outside .hero-primary,.hero-outside .hero-secondary,.hero-outside .hero-wordmark,.hero-outside .product-scene{will-change:auto}
.scene-progress span{transform:scaleX(0)}
@media(max-width:760px){
  .masthead.scrolled{background:#101b23f7;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-halo{box-shadow:none}
  .hero-product{filter:none}
  .product-float{animation:none}
  .product-shadow{display:none}
  .object-dock{background:#111e28;backdrop-filter:none;-webkit-backdrop-filter:none}
  dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
  .portfolio-section .projects-intro{padding-bottom:28px}
  .portfolio-section .projects-intro h2{font-size:clamp(43px,10.8vw,70px);line-height:1.03}
  .portfolio-section .projects-intro>p{font-size:13px;margin-top:21px}
  .work-toolbar{margin-bottom:22px;gap:8px;padding-bottom:17px}
  .work-filters{gap:6px}
  .work-filter{font-size:10px;padding:10px 12px;gap:9px}
  .work-filter sup{font-size:7px}
  .work-count{font-size:7px;letter-spacing:.05em}
  .work-grid{grid-template-columns:1fr;gap:30px}
  .work-image{aspect-ratio:1.34}
  .work-tag{font-size:7px;left:13px;top:13px}
  .work-arrow{height:31px;width:31px;right:13px;bottom:13px;font-size:17px}
  .work-caption{padding-top:14px;gap:12px}
  .work-caption h3{font-size:29px;margin-bottom:7px}
  .work-caption p{font-size:11px}
  .work-status{font-size:6px;max-width:110px}
  .portfolio-footnote{font-size:10px;margin-top:28px}
}
html[lang=zh-Hant] .portfolio-section .projects-intro h2{font-size:clamp(38px,5vw,80px);line-height:1.25;letter-spacing:-.04em}
@media(max-width:760px){html[lang=zh-Hant] .portfolio-section .projects-intro h2{font-size:clamp(32px,7.8vw,53px)}}
/* Project pages: editorial heading, generous imagery and explicit project status. */
.study-page{background:#101b23;color:#edf2f3}
.study-header{height:100px;display:flex;align-items:center;gap:30px;border-bottom:1px solid #b3ccd326;padding:0 var(--pad)}
.study-header .brand{color:#eef3f5;margin-right:auto}
.study-header .language-button{color:#c6d5db}
.study-back{font-size:12px;color:#c6d5db;text-decoration:none;display:flex;align-items:center;gap:25px}
.study-heading{padding-top:55px;padding-bottom:55px}
.study-kicker{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:9px;letter-spacing:.16em;color:#9ab8c7;margin-bottom:30px}
.study-kicker>span:last-child{text-align:right}
.study-heading h1{font-size:clamp(64px,9vw,150px);font-weight:400;letter-spacing:-.065em;line-height:1.03;margin:0}
.study-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:7vw;padding-top:28px;align-items:start}
.study-intro h2{font-size:clamp(25px,3.5vw,52px);font-weight:400;color:#c7e0ed;line-height:1.14;letter-spacing:-.03em;margin:0}
.study-intro p{max-width:495px;color:#b6c9d1;font-size:13px;line-height:1.85}
.study-hero{position:relative;margin:0;overflow:hidden;background:#1a2b36;min-height:360px;height:min(54vw,650px)}
.study-hero>img{width:100%;height:100%;object-fit:cover;display:block}
.study-hero figcaption{position:absolute;bottom:20px;left:var(--pad);right:var(--pad);color:#e6eef2;font-size:8px;letter-spacing:.16em;text-shadow:0 1px 7px #10222d}
.study-hero.product-plate{background:linear-gradient(120deg,#e8ebe9,#becad1);height:min(44vw,540px)}
.study-hero.product-plate>img{object-fit:contain;padding:50px max(30px,9vw);mix-blend-mode:multiply}
.study-hero.product-plate figcaption{color:#455967;text-shadow:none}
.study-hero.marine-plate{background:#071f1d;height:min(49vw,610px)}
.study-hero.marine-plate>img{object-fit:contain;padding:25px 0}
.study-hero.wheel-plate>img{object-position:center center}
.study-body{background:#edf0ee;color:#142630;padding:80px 0 65px}
.study-overview{display:grid;grid-template-columns:1fr 1.3fr;gap:8vw;align-items:start;margin-bottom:55px}
.study-overview h2{font-size:clamp(36px,4vw,64px);line-height:1.07;font-weight:400;letter-spacing:-.04em;margin-top:20px}
.study-premise{font-size:17px;line-height:1.85;color:#465e6a;max-width:660px}
.study-credit{border-top:1px solid #b4c4c9;padding-top:19px;margin-top:30px;max-width:660px}
.study-credit>.eyebrow{font-size:8px;letter-spacing:.15em;color:#647b86}
.study-credit p{font-size:11px;line-height:1.85;color:#5f7380;margin-top:10px}
.study-points{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:34px 0;border-top:1px solid #b4c4c9;border-bottom:1px solid #b4c4c9}
.point-index{font-size:10px;color:#6a808a}
.study-points h3{font-size:23px;letter-spacing:-.03em;font-weight:400;line-height:1.2;margin:18px 0 13px}
.study-points p{font-size:12px;color:#58717e;line-height:1.8;max-width:320px}
.study-status{display:grid;grid-template-columns:.55fr 2fr;gap:40px;padding:23px 26px;background:#e0e7e8;border-left:2px solid #738e9f;margin:40px 0}
.study-status>.eyebrow{font-size:8px;line-height:1.8;color:#526a77}
.study-status>p:last-child{font-size:11px;line-height:1.85;color:#536c79;max-width:840px}
.study-gallery{display:grid;grid-template-columns:1fr 1fr;gap:32px 25px;margin-top:40px;align-items:start}
.study-figure{margin:0;min-width:0}
.study-figure.wide{grid-column:1/-1}
.gallery-zoom{position:relative;display:block;width:100%;padding:0;border:0;background:#d8e0e2;cursor:zoom-in;overflow:hidden}
.gallery-zoom>img{width:100%;height:auto;display:block}
.study-figure:not(.wide) .gallery-zoom{aspect-ratio:1.45;display:grid;place-items:center}
.study-figure:not(.wide) .gallery-zoom>img{height:100%;object-fit:contain}
.study-page[data-project=wheel-study] .study-figure:not(.wide) .gallery-zoom{aspect-ratio:1.1;background:#cbd1d1}
.study-figure figcaption{font-size:10px;line-height:1.7;color:#607780;padding-top:11px}
.zoom-mark{position:absolute;right:14px;bottom:14px;background:#162c37ba;color:#eaf5f9;border:1px solid #e2f1f478;width:33px;height:33px;display:grid;place-items:center;border-radius:50%;font-size:18px}
.original-board{border-top:1px solid #b4c4c9;border-bottom:1px solid #b4c4c9;margin-top:48px}
.original-board summary{display:flex;justify-content:space-between;gap:20px;padding:25px 0;font-size:16px;cursor:pointer;list-style:none}
.original-board summary::-webkit-details-marker{display:none}
.original-board[open] summary>span:last-child{transform:rotate(45deg)}
.original-board>p{font-size:11px;color:#647e8a;margin:0 0 25px;max-width:600px}
.original-board>img{display:block;width:auto;max-width:100%;height:auto;max-height:none;margin:0 auto 30px}
.study-reference{font-size:10px;color:#6c838d;line-height:1.85;margin-top:35px;max-width:800px}
.next-study{display:flex;justify-content:space-between;align-items:center;gap:35px;padding-top:65px;padding-bottom:65px;color:#eaf0f3;text-decoration:none}
.next-study .eyebrow{color:#9bb8c7;font-size:9px}
.next-study h2{font-size:clamp(38px,5.5vw,80px);font-weight:400;line-height:1.1;letter-spacing:-.05em;margin:20px 0 13px}
.next-study p{font-size:12px;color:#a4bac5}
.next-arrow{font-size:clamp(50px,7vw,90px);color:#c7e0ed}
.study-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #adc4d02b;padding-top:29px;padding-bottom:29px;font-size:9px;line-height:1.8;color:#95adba}
.study-footer a{color:#d1e3ed;text-decoration:none}
.study-lightbox{max-width:calc(100vw - 28px);max-height:calc(100svh - 28px);padding:38px 16px 13px;border:1px solid #a3c7dc55;background:#101b23;color:#eaf2f5;border-radius:4px;overflow:auto}
.study-lightbox::backdrop{background:#081016eb;backdrop-filter:none;-webkit-backdrop-filter:none}
.study-lightbox img{display:block;max-width:min(90vw,1300px);max-height:78svh;width:auto;height:auto;object-fit:contain;margin:0 auto}
.study-lightbox>p{font-size:11px;line-height:1.6;color:#b3cbd6;padding:12px 10px 0;text-align:center}
.study-lightbox .dialog-close{position:sticky;top:0;float:right;margin-top:-31px;right:0;width:30px;height:30px;font-size:23px;z-index:2;background:#101b23;color:#eaf2f5}
@media(max-width:760px){
  .study-header{height:76px;gap:18px}
  .study-back{font-size:10px;gap:10px}
  .study-header .brand{font-size:15px}
  .study-header .brand-sub{font-size:7px}
  .study-heading{padding-top:33px;padding-bottom:30px}
  .study-kicker{font-size:7px;line-height:1.8;letter-spacing:.09em;margin-bottom:23px}
  .study-kicker>span:last-child{max-width:50%}
  .study-heading h1{font-size:clamp(44px,11.3vw,77px)}
  .study-intro{grid-template-columns:1fr;gap:18px;padding-top:18px}
  .study-intro h2{font-size:27px}
  .study-intro p{font-size:12px;line-height:1.85;max-width:100%}
  .study-hero{height:60vw;min-height:230px}
  .study-hero.product-plate{height:63vw;min-height:245px}
  .study-hero.product-plate>img{padding:40px 12px}
  .study-hero.marine-plate{height:70vw;min-height:250px}
  .study-hero.marine-plate>img{padding:0;object-fit:contain}
  .study-hero figcaption{font-size:6px;bottom:12px;line-height:1.8;letter-spacing:.07em}
  .study-body{padding-top:35px;padding-bottom:35px}
  .study-overview{grid-template-columns:1fr;gap:24px;margin-bottom:30px}
  .study-overview h2{font-size:38px;margin-top:12px}
  .study-premise{font-size:13px}
  .study-credit{padding-top:14px;margin-top:22px}
  .study-credit p{font-size:10px}
  .study-points{grid-template-columns:1fr;gap:23px;padding:24px 0}
  .study-points article{display:grid;grid-template-columns:28px 1fr;column-gap:12px}
  .point-index{grid-row:1/3;font-size:9px;padding-top:6px}
  .study-points h3{font-size:22px;margin:0 0 10px}
  .study-points p{font-size:11px;grid-column:2;max-width:none}
  .study-status{display:block;padding:19px 19px;margin:28px 0}
  .study-status>p:last-child{font-size:10px;margin-top:10px}
  .study-gallery{grid-template-columns:1fr;gap:24px;margin-top:28px}
  .study-figure.wide{grid-column:auto}
  .study-figure figcaption{font-size:9px}
  .study-page[data-project=wheel-study] .study-figure:not(.wide) .gallery-zoom{aspect-ratio:auto}
  .study-page[data-project=wheel-study] .study-figure:not(.wide) .gallery-zoom>img{height:auto}
  .original-board{margin-top:30px}
  .original-board summary{font-size:14px;padding:20px 0}
  .original-board>p{font-size:10px}
  .study-reference{font-size:9px;margin-top:25px}
  .next-study{padding-top:38px;padding-bottom:38px;gap:17px}
  .next-study h2{font-size:35px;margin:17px 0 11px}
  .next-study p{font-size:11px}
  .next-arrow{font-size:43px}
  .study-footer{flex-wrap:wrap;font-size:8px;gap:14px 20px;padding-top:24px;padding-bottom:24px}
  .study-footer>span:nth-child(2){font-size:7px}
  .study-footer>a{flex-basis:100%}
  .study-lightbox img{max-width:83vw;max-height:73svh}
  .study-lightbox>p{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.work-thumb,.work-filter{transition:none}.work-card-link:hover .work-thumb{transform:none}}
@media(max-width:380px){.work-count{display:none}.study-header{gap:12px}.study-back{font-size:9px}.study-heading h1{font-size:43px}}