/* Philip Lee / Lee Kwangsoo — source-led editorial portfolio. No external dependencies. */
:root{--ink:#111;--paper:#fff;--soft:#f4f4f4;--green:#0c604b;--line:rgba(17,17,17,.18);--muted:#777;--gutter:6.25vw;--nav-h:72px;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}body.dialog-open{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}button{border:0}img,video{display:block;width:100%;height:auto}figure,p,h1,h2,h3,h4,dl,dd{margin:0}ol{margin:0;padding:0;list-style:none}::selection{background:#0c604b;color:white}.container{width:calc(100% - var(--gutter)*2);max-width:1680px;margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:200;left:20px;top:15px;padding:14px;background:white;color:black;transform:translateY(-200%)}.skip-link:focus{transform:none}.eyebrow{font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.025em}.muted{color:var(--muted)}
/* Cover: original image with genuine, independently animated text. */
.cover{height:100svh;min-height:680px;position:relative;overflow:hidden;color:#fff;background:#043e32}.cover-background{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center}.cover-top{position:absolute;top:clamp(30px,4.6vh,64px);left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:flex-start;font-size:13px;line-height:1.45}.cover-name{font-weight:600}.cover-role{font-weight:400}.cover-content{position:absolute;left:18.75%;right:6.25%;top:50%;transform:translateY(-43%)}.cover h1{font-size:clamp(48px,5.4vw,112px);line-height:1.075;letter-spacing:-.035em;font-weight:700}.cover h1 .light{display:block;font-weight:300;letter-spacing:-.025em;margin-bottom:.065em}.cover h1 strong{display:block;font-weight:750}.cover-meta{font-size:clamp(15px,1.6vw,24px);line-height:1.4;margin-top:24px;font-weight:350;letter-spacing:.015em}.explore{display:inline-flex;align-items:center;gap:28px;margin-top:clamp(42px,7vh,100px);padding:14px 22px;border:1px solid rgba(255,255,255,.4);border-radius:100px;background:rgba(255,255,255,.025);font-size:13px;letter-spacing:.02em;transition:background .25s,border-color .25s}.explore:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.85)}.explore svg{width:14px;height:18px;transition:transform .4s var(--ease)}.explore:hover svg{transform:translateY(3px)}
/* Index: type, rules and whitespace — no added cards or unsupported projects. */
.index{color:#fff;background:var(--green);padding:84px 0 104px;min-height:660px;display:flex;align-items:center}.index .container{width:calc(100% - var(--gutter)*2)}.index-heading{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.02em;margin-bottom:64px}.index-row{display:grid;grid-template-columns:1fr 29%;align-items:center;border-bottom:1px solid rgba(255,255,255,.25);min-height:176px;gap:30px}.index-row:first-of-type{border-top:1px solid rgba(255,255,255,.25)}.index-category{display:flex;align-items:center;gap:35px;padding:32px 0}.index-no{font-size:13px;font-weight:500}.index-title{font-size:clamp(46px,5.5vw,106px);line-height:1.1;letter-spacing:-.025em;font-weight:650}.index-right{display:flex;justify-content:space-between;align-items:center;gap:18px}.index-projects{display:flex;flex-direction:column;gap:10px;font-size:12px;color:#a9c7bc;letter-spacing:.02em}.index-projects a{width:fit-content;transition:color .2s}.index-projects a:hover{color:#fff}.index-arrow{display:block;flex:0 0 auto;width:46px;height:46px;transition:transform .5s var(--ease)}.index-arrow svg{width:100%;height:100%}.index-row:hover .index-arrow{transform:translate(4px,-4px)}
/* Sticky category and project navigation. */
.navigation{height:var(--nav-h);position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#111;border-bottom:1px solid #dedede}.nav-inner{height:100%;display:flex;align-items:center;gap:38px;width:calc(100% - var(--gutter)*2);max-width:1680px;margin:auto}.nav-index{font-size:12px;letter-spacing:.04em;white-space:nowrap}.category-nav{display:flex;gap:28px;margin-right:auto}.category-nav a{font-size:11px;letter-spacing:.035em;color:#777;transition:color .2s;white-space:nowrap}.category-nav a.is-active{color:#111}.category-nav b{font-weight:400;color:#999;margin-right:7px}.project-nav{display:flex;align-items:center;gap:24px;height:100%;white-space:nowrap}.project-nav a{display:flex;align-items:center;height:100%;position:relative;font-size:11px;font-weight:500;color:#777;transition:color .2s}.project-nav a::after{content:"";position:absolute;bottom:16px;left:0;right:0;height:1px;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}.project-nav a.is-active{color:#111}.project-nav a.is-active::after{transform:scaleX(1)}.read-progress{height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--green);position:absolute;bottom:-1px;left:0;will-change:transform}
/* Brand overview. */
.project{scroll-margin-top:var(--nav-h)}.project-intro{position:relative;padding:80px 0 104px;background:#fff}.intro-top{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:58px}.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12%}.intro-title{font-size:clamp(54px,5vw,96px);font-weight:550;letter-spacing:-.035em;line-height:1.04}.endorsement{display:block;font-size:.48em;font-weight:500;letter-spacing:-.025em;margin-top:9px}.intro-description{font-size:clamp(14px,1.1vw,18px);line-height:1.8;max-width:640px;margin-top:34px;letter-spacing:-.025em}.project-facts{display:grid;grid-template-columns:78px 1fr;gap:14px 20px;align-content:start;padding-top:18px;font-size:clamp(13px,1.2vw,18px);line-height:1.7}.project-facts dt{color:#888;font-size:.85em;letter-spacing:.02em}.project-facts dd span{display:block}.project-intro.planet{padding-bottom:0;min-height:97.91667vw;background:#000;color:#fff}.planet .intro-top{border-color:#444}.planet .intro-background{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom}.planet .container{position:relative;z-index:1}.planet .intro-description{max-width:635px}.project-hero{width:100%;position:relative;overflow:hidden;aspect-ratio:16/9}.project-hero img{width:100%;height:100%;object-fit:contain}.project-hero.video-shell{margin:0}.project-hero.video-shell video{height:100%;object-fit:contain}
/* Consistent editorial headers. All copy lives in the document. */
.work-section{background:#fff;color:#111;--muted:#777;--line:rgba(17,17,17,.18);scroll-margin-top:var(--nav-h)}.work-section.dark{background:#000;color:#fff;--muted:#a0a0a0;--line:rgba(255,255,255,.24)}.work-section.soft{background:#f4f4f4}.work-section.paper{background:#d9d5cd;background-image:url('assets/va-paper-texture.webp')}.section-header{padding:clamp(70px,6.25vw,120px) 0 clamp(48px,4.2vw,80px);display:grid;grid-template-columns:1fr .93fr;gap:12%}.section-kicker{display:flex;align-items:center;gap:20px;font-size:12px;font-weight:500;line-height:1.5;color:var(--muted);margin-bottom:12px}.section-kicker .section-number{font-size:10px;letter-spacing:.03em;padding-left:14px;border-left:1px solid var(--line)}.section-title{font-size:clamp(28px,2.7vw,52px);line-height:1.12;letter-spacing:-.035em;font-weight:550}.section-meta{margin-top:30px;display:grid;grid-template-columns:90px 1fr;gap:7px 15px;font-size:12px;line-height:1.65}.section-meta dt{white-space:nowrap;color:var(--muted);font-weight:400}.section-meta dd{font-weight:400}.keywords{margin-top:17px;display:flex;gap:8px;flex-wrap:wrap;font-size:11px;line-height:1.5;color:var(--muted)}.keywords span:not(:last-child)::after{content:" ·";margin-left:8px}.concept{padding-top:2px}.concept-label{display:block;font-size:11px;font-weight:600;letter-spacing:.035em;margin-bottom:12px}.concept p{font-size:clamp(14px,1.08vw,17px);line-height:1.9;letter-spacing:-.025em;max-width:620px;color:inherit}.visual-area{padding-bottom:clamp(65px,6.25vw,120px)}.image-button{display:block;width:100%;padding:0;margin:0;background:none;text-align:inherit;position:relative;border-radius:0;-webkit-appearance:none;appearance:none;cursor:default}.image-button img{width:100%;height:auto;border-radius:0;display:block}.image-button::after{content:none}.image-button:focus-visible{outline-offset:3px}
/* A large image and two details retain each original photograph's aspect ratio. */
.gallery{display:grid;grid-template-columns:1080fr 576fr;grid-template-rows:1fr 1fr;column-gap:1.428571%;row-gap:2.5%;aspect-ratio:1680/800}.gallery figure{min-width:0;min-height:0}.gallery figure:first-child{grid-row:1/3}.gallery .image-button,.gallery img{height:100%;width:100%;object-fit:contain}.video-shell{position:relative;background:#111;aspect-ratio:16/9;overflow:hidden}.video-shell video{width:100%;height:100%;object-fit:contain}.video-control{position:absolute;bottom:22px;right:var(--gutter);display:inline-flex;align-items:center;gap:13px;min-width:104px;padding:12px 15px;border:1px solid rgba(255,255,255,.4);border-radius:30px;color:#fff;background:rgba(0,0,0,.32);backdrop-filter:blur(8px);font-size:10px;letter-spacing:.04em}.video-control:hover{background:rgba(0,0,0,.6)}.video-control[hidden]{display:none}.video-control .control-icon{font-size:12px}.video-fallback{position:absolute;bottom:70px;right:var(--gutter);max-width:260px;font-size:11px;line-height:1.6;color:white;background:#222;padding:12px}
/* Photography: the asymmetrical composition of the source, now separate images. */
.photo-inner{padding-block:clamp(75px,6.25vw,120px);display:grid;grid-template-columns:28% 1fr;gap:5%;align-items:center}.photo-copy .section-title{font-size:clamp(25px,2.3vw,42px)}.photo-copy .section-meta{grid-template-columns:auto 1fr;margin-top:25px}.photo-copy .concept{margin-top:26px}.photo-copy .concept p{font-size:clamp(13px,1.02vw,16px);line-height:1.85}.photo-copy .keywords{margin-top:17px}.photo-collage{position:relative;aspect-ratio:1126/886}.photo-collage figure{position:absolute;border-radius:15px;overflow:hidden;background:#fff}.photo-collage figure:nth-child(1){left:0;top:0;width:59.325%}.photo-collage figure:nth-child(2){left:12.789%;top:56.659%;width:46.536%}.photo-collage figure:nth-child(3){left:60.746%;top:11.287%;width:39.254%}.photo-collage .image-button{height:100%;border-radius:15px;overflow:hidden}.photo-collage .image-button img{width:100%;height:auto;display:block;border-radius:15px;clip-path:inset(0 round 15px)}
/* Detail pages have no parallax, cropping, artificial browser chrome or redesign. */
.detail-board{width:76%;max-width:1390px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4.5%;align-items:start}.detail-board.two-column{width:48%;max-width:910px;grid-template-columns:repeat(2,minmax(0,1fr));gap:7.1%}.detail-board .image-button img{width:100%;height:auto}.detail-board figcaption{font-size:12px;color:var(--muted);font-weight:400;margin:0 0 11px 10px;line-height:1.5}.detail-stack figure+figure{margin-top:26px}.detail-stacked.mask .detail-stack:nth-child(2){padding-top:26.7%}.detail-stacked.handwash .detail-stack:nth-child(2){padding-top:104.8%}.artwork .visual-area{width:100%;padding-bottom:0}.artwork .artwork-contained{width:87.5%;max-width:1680px;margin-inline:auto;padding-bottom:80px}.artwork.paper .section-header{padding-bottom:32px}.artwork.soft .section-header{padding-bottom:42px}
/* Homepage annotations connect to the original, unaltered website screenshot. */
.web-board{position:relative;padding-left:0;width:calc(100% - var(--gutter)*2);max-width:1680px;margin-inline:auto}.web-image{position:relative;z-index:1;width:71.43%;margin-left:28.57%}.web-notes{position:absolute;inset:0;pointer-events:none;z-index:2}.web-note{position:absolute;left:0;top:var(--at);width:25.2%;pointer-events:auto}.note-no{font-size:11px;margin-bottom:7px;display:block}.web-note h4{font-size:clamp(15px,1.55vw,25px);line-height:1.13;letter-spacing:-.03em;font-weight:550;max-width:96%}.note-subtitle{display:block;font-size:clamp(11px,.95vw,15px);font-weight:500;margin-top:8px;line-height:1.5}.connector{width:116.25%;height:1px;background:var(--line);position:relative;margin-block:17px 20px;transform-origin:left}.connector::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;right:-4px;top:-3.5px;background:currentColor}.web-note p{font-size:clamp(12px,1.02vw,16px);line-height:1.85;letter-spacing:-.025em;max-width:90%;color:var(--muted)}.web-pin{display:none}.web-section .visual-area{padding-bottom:95px}.web-section .section-header{padding-bottom:55px}
/* Olje: rebuilding explanatory text, leaving logo artwork and stitching intact. */
.brand-comparison{display:grid;grid-template-columns:1fr 70px 1.2fr;align-items:start;gap:35px;padding:15px 40px 110px}.compare-label{font-size:11px;letter-spacing:.08em;margin-bottom:25px;display:block}.compare-visual{height:clamp(150px,14vw,260px);display:flex;align-items:center;justify-content:flex-start}.compare-visual img{width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain}.compare-copy{font-size:clamp(13px,1.08vw,17px);line-height:1.9;letter-spacing:-.025em;margin-top:24px}.compare-arrow{align-self:center;margin-top:-70px;width:32px;color:#999}.logo-board{background-color:#fff;background-image:linear-gradient(#f1f1f1 1px,transparent 1px),linear-gradient(90deg,#f1f1f1 1px,transparent 1px);background-size:24px 24px;min-height:510px;height:38vw;max-height:710px;position:relative;display:grid;place-items:center}.logo-board-original{margin:0;display:block;width:100%}.logo-board-original img{display:block;width:100%;max-width:none;height:auto;margin:0}.logo-lockup{position:relative;width:clamp(270px,24vw,440px)}.logo-lockup img{mix-blend-mode:multiply}.logo-label{position:absolute;font-size:13px;line-height:1.45;white-space:nowrap;background:#f3f3f3;padding:6px 10px;border-radius:5px}.logo-label.first{left:-40%;top:-43%}.logo-label.second{right:-52%;bottom:-55%}.logo-label.first::after{content:"";position:absolute;width:50%;height:50px;border-top:1px dashed #888;border-right:1px dashed #888;left:100%;top:50%}.logo-label.second::before{content:"";position:absolute;width:40%;height:45px;border-bottom:1px dashed #888;border-left:1px dashed #888;right:100%;bottom:50%}.colour-system{display:grid;grid-template-columns:3fr 1fr;background:#e4e5e5}.colour-system .stitching{min-width:0}.colour-system .stitching img{width:100%;height:100%;object-fit:contain}.swatches{display:grid;grid-template-rows:45% 27.5% 27.5%}.swatch{padding:clamp(14px,1.7vw,32px);font-size:clamp(10px,.9vw,15px);line-height:1.8}.swatch strong{display:block;font-size:inherit;font-weight:550}.swatch-green{background:#bac392;color:#303324}.swatch-gray{background:#e4e5e5;color:#444}.swatch-black{background:#444241;color:white}
/* Quiet interactions; no product geometry or artwork is animated internally. */
.reveal{opacity:1;transform:none}.motion-enabled .reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--delay,0ms)}.motion-enabled .reveal.is-visible{opacity:1;transform:none}.motion-enabled .hero-item{opacity:0;animation:hero-arrive 1.35s var(--ease) forwards;animation-delay:var(--delay,0ms)}@keyframes hero-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}.back-index{position:fixed;bottom:28px;right:28px;width:58px;height:58px;border-radius:50%;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:rgba(255,255,255,.91);border:1px solid #ddd;color:#111;box-shadow:0 2px 16px #00000008;font-size:9px;letter-spacing:.035em;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,transform .35s,visibility .35s}.back-index.is-visible{opacity:1;visibility:visible;transform:none}.back-index svg{height:17px;width:12px}.back-index:hover{background:#fff;transform:translateY(-3px)}
/* Accessible full-size image viewer. */
.lightbox{width:100vw;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;background:rgba(246,246,244,.985);color:#111;overflow:hidden}.lightbox::backdrop{background:#111b}.lightbox-toolbar{height:72px;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:0 28px;border-bottom:1px solid #ddd;background:#fafaf8;position:relative;z-index:2}.lightbox-title{font-size:12px;line-height:1.5}.lightbox-close{background:none;padding:12px;font-size:12px;display:flex;gap:18px;align-items:center}.lightbox-close span{font-size:25px;font-weight:300}.lightbox-scroll{height:calc(100% - 72px);overflow:auto;padding:36px;overscroll-behavior:contain}.lightbox-image{width:auto;height:auto;max-width:min(100%,1680px);margin:0 auto}.lightbox-image.portrait{width:min(100%,680px);max-width:680px}.lightbox-image.landscape{width:min(100%,1680px)}
@media(min-width:1921px){.project-intro.planet{min-height:1880px}.planet .intro-background{object-fit:cover;object-position:center bottom}.container,.nav-inner,.web-board{max-width:1800px}.cover-content{left:max(18.75%,calc((100vw - 1800px)/2 + 210px))}.project-facts{font-size:18px}.intro-description{font-size:18px}.concept p{font-size:17px}.web-note p{font-size:16px}}
@media(max-width:1100px){.nav-inner{gap:24px}.category-nav{gap:18px}.project-nav{gap:18px}.nav-index{display:none}.section-header{gap:8%}.section-title{font-size:30px}.photo-copy .section-title{font-size:25px}.intro-grid{gap:7%;grid-template-columns:1.1fr 1fr}.project-facts{grid-template-columns:57px 1fr;font-size:13px;gap:10px 13px}.project-intro{padding-top:65px;padding-bottom:80px}.intro-description{font-size:14px}.planet .intro-description{max-width:390px}.planet .intro-title{font-size:54px}.planet .intro-top{margin-bottom:38px}.web-note p{font-size:12px;line-height:1.65}.connector{margin-block:12px}.web-note h4{font-size:17px}.note-subtitle{font-size:11px}.logo-label.first{left:-25%}.logo-label.second{right:-30%}}
@media(max-width:760px){:root{--gutter:6vw;--nav-h:100px}.cover{min-height:600px;height:100svh;max-height:none}.cover-top{top:28px;font-size:11px}.cover-content{left:var(--gutter);right:var(--gutter);transform:translateY(-43%)}.cover h1{font-size:clamp(35px,7vw,55px);line-height:1.12;letter-spacing:-.035em}.cover h1 .light{font-size:1.02em;margin-bottom:.18em}.cover-meta{font-size:15px;margin-top:23px}.explore{font-size:11px;padding:13px 18px;margin-top:44px}.index{min-height:520px;padding:60px 0 72px}.index-heading{margin-bottom:35px;font-size:10px}.index-row{grid-template-columns:1fr;gap:0;min-height:0;padding:25px 0}.index-category{gap:20px;padding:0}.index-no{font-size:11px}.index-title{font-size:clamp(34px,7.7vw,58px)}.index-right{margin-left:35px;margin-top:20px}.index-projects{flex-direction:row;gap:22px;font-size:10px}.index-arrow{width:26px;height:26px}.navigation{height:100px}.nav-inner{width:100%;padding:0 var(--gutter);flex-wrap:wrap;gap:0;align-content:flex-start}.category-nav{height:44px;align-items:center;gap:25px;flex:0 0 100%;margin:0;border-bottom:1px solid #ededed}.category-nav a{font-size:10px}.project-nav{height:55px;gap:25px;width:100%;overflow-x:auto;scrollbar-width:none}.project-nav::-webkit-scrollbar{display:none}.project-nav a{font-size:10px;flex:none}.project-nav a::after{bottom:10px}.project-intro{padding:54px 0 66px}.intro-top{font-size:10px;margin-bottom:34px;padding-bottom:15px}.intro-grid{grid-template-columns:1fr;gap:26px}.intro-title{font-size:clamp(47px,9vw,68px)}.intro-description{font-size:14px;line-height:1.9;margin-top:24px;max-width:600px}.project-facts{font-size:12px;grid-template-columns:58px 1fr;gap:10px 17px;padding-top:0;line-height:1.65}.project-intro.planet{min-height:0;padding-bottom:61vw}.planet .intro-background{object-fit:contain;object-position:center bottom;height:auto;bottom:0;top:auto}.planet .intro-description{max-width:none}.planet .intro-top{margin-bottom:35px}.planet .intro-title{font-size:54px}.planet .intro-grid{gap:24px}.planet .project-facts{background:linear-gradient(#000e,#0000);padding-bottom:15px}.section-header{display:block;padding:58px 0 38px}.section-title{font-size:clamp(28px,5vw,38px);line-height:1.16}.section-kicker{font-size:10px;gap:13px;margin-bottom:12px}.section-number{font-size:9px}.section-meta{font-size:11px;grid-template-columns:80px 1fr;gap:5px 12px;margin-top:23px}.keywords{font-size:10px;margin-top:14px;gap:5px}.keywords span:not(:last-child)::after{margin-left:5px}.section-header .concept{margin-top:30px;padding-top:23px;border-top:1px solid var(--line)}.concept-label{font-size:10px;margin-bottom:10px}.concept p{font-size:13px;line-height:1.9;max-width:none}.visual-area{padding-bottom:54px}.gallery{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:10px}.gallery figure:first-child{grid-row:auto;grid-column:1/3}.gallery .image-button,.gallery img{height:auto}.gallery figure:first-child{margin-bottom:0}.video-control{font-size:9px;min-width:85px;padding:9px 11px;bottom:12px;gap:9px}.video-shell{aspect-ratio:16/9}.photo-inner{display:flex;flex-direction:column;gap:35px;padding-block:60px}.photo-copy{width:100%;display:block}.photo-copy .section-title{font-size:29px}.photo-copy .section-meta{grid-template-columns:80px 1fr}.photo-copy .concept{margin-top:25px;padding-top:22px;border-top:1px solid var(--line)}.photo-copy .concept p{font-size:13px;line-height:1.9}.photo-collage{width:100%}.detail-board{width:92%;gap:3%;grid-template-columns:repeat(3,minmax(0,1fr))}.detail-board.two-column{width:80%;gap:6%}.detail-board figcaption{font-size:8px;margin-left:3px;margin-bottom:6px;line-height:1.5}.detail-stack figure+figure{margin-top:14px}.image-button::after{width:22px;height:22px;right:7px;bottom:7px;font-size:13px}.web-section .section-header{padding-bottom:38px}.web-board{padding-left:0}.web-image{width:100%;margin-left:0}.web-notes{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:30px 22px;margin-top:38px}.web-note{position:static;width:auto;min-width:0}.web-note h4{font-size:15px;line-height:1.25;max-width:100%}.note-subtitle{font-size:11px;margin-top:7px}.note-no{font-size:10px}.connector{width:100%;margin:13px 0}.connector::after{width:5px;height:5px;right:0;top:-2px}.web-note p{font-size:11px;line-height:1.8;max-width:100%}.web-pin{display:grid;place-items:center;position:absolute;left:0;top:var(--pin-at);height:21px;width:21px;border:1px solid currentColor;border-radius:50%;font-size:9px;background:#fff;color:#111;transform:translate(-35%,-50%);z-index:2}.web-section .visual-area{padding-bottom:65px}.brand-comparison{grid-template-columns:1fr;gap:32px;padding:0 0 55px}.compare-label{font-size:10px;margin-bottom:12px}.compare-visual{height:140px;justify-content:flex-start}.compare-visual img{max-width:90%;height:140px;width:auto}.compare-copy{font-size:12px;margin-top:18px;line-height:1.9}.compare-arrow{width:26px;margin:0 0 0 45%;transform:rotate(90deg)}.logo-board{height:390px;min-height:390px;background-size:18px 18px}.logo-lockup{width:220px}.logo-label{font-size:10px}.logo-label.first{left:0;top:-65%}.logo-label.second{right:0;bottom:-80%}.logo-label.first::after{height:37px;width:50%}.logo-label.second::before{height:37px;width:35%}.colour-system{grid-template-columns:1fr}.swatches{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto}.swatch{font-size:9px;padding:15px 12px;min-height:118px}.swatch strong{font-size:9px}.artwork .artwork-contained{padding-bottom:55px;width:92%}.artwork.paper .section-header{padding-bottom:30px}.back-index{height:48px;width:48px;bottom:18px;right:15px;font-size:8px}.back-index svg{height:14px}.lightbox-toolbar{height:62px;padding-inline:18px;gap:12px}.lightbox-title{font-size:10px}.lightbox-close{font-size:0;gap:0}.lightbox-close span{font-size:27px}.lightbox-scroll{height:calc(100% - 62px);padding:24px 12px}.motion-enabled .reveal{transform:translateY(18px);transition-duration:.9s,1s}}
@media(max-width:380px){.cover h1{font-size:7vw}.project-nav{gap:19px}.intro-title,.planet .intro-title{font-size:46px}.project-facts{font-size:11px}.section-title{font-size:26px}.index-projects{gap:14px;font-size:9px}.web-notes{grid-template-columns:1fr}.web-note p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-enabled .reveal,.motion-enabled .hero-item{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}*{scroll-behavior:auto!important}.index-arrow,.explore svg,.back-index{transition:none}}
@media print{.navigation,.back-index,.video-control,.skip-link{display:none!important}.cover{height:900px;min-height:0}.reveal,.hero-item{opacity:1!important;transform:none!important;animation:none!important}.project,.work-section{break-inside:auto}.section-header{break-inside:avoid}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}.lightbox{display:none!important}}

/* TECH extension — approved v5 content and source artwork are preserved. */
.tech-project .intro-title{font-size:clamp(44px,4.55vw,88px)}
.tech-project .project-facts{grid-template-columns:70px 1fr;gap:12px 18px;font-size:clamp(12px,1.05vw,17px)}
.tech-artwork{margin:0;width:100%}.tech-artwork img{display:block;width:100%;height:auto}
.tech-header-band{background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.tech-process-board{margin:0;position:relative;width:100%;aspect-ratio:16/9;isolation:isolate}
.tech-process-board img{display:block;width:100%;height:auto}
.process-label{position:absolute;top:78.4%;transform:translateX(-50%);border-radius:32px;border:1px solid #d0d0d0;background:rgba(245,245,245,.94);font-size:clamp(9px,1.15vw,22px);font-weight:500;line-height:1.3;padding:3px 20px;white-space:nowrap;color:#111}
.process-sketch{left:26.2%}.process-rendering{left:74%}
.tech-package-gallery{padding-top:clamp(48px,7.2917vw,140px);padding-bottom:clamp(48px,7.2917vw,140px)}
.tech-photo-collage figure{background:transparent}.tech-photo-collage .image-button{height:auto}
/* Keep all six projects accessible without shrinking the type. */
.navigation .nav-inner{gap:clamp(20px,2.4vw,38px)}
.navigation .category-nav{gap:clamp(18px,1.5vw,28px)}
.navigation .project-nav{gap:clamp(15px,1.4vw,24px);min-width:0;scrollbar-width:none}
.navigation .project-nav::-webkit-scrollbar{display:none}
@media (min-width:761px) and (max-width:1280px){
 :root{--nav-h:100px}
 .navigation{height:100px}
 .navigation .nav-inner{display:flex;flex-wrap:wrap;align-content:flex-start;gap:0;width:calc(100% - var(--gutter)*2)}
 .navigation .nav-index{display:none}
 .navigation .category-nav{flex:0 0 100%;height:44px;align-items:center;gap:28px;margin:0;border-bottom:1px solid #ededed}
 .navigation .project-nav{height:55px;gap:28px;width:100%;overflow-x:auto;overflow-y:hidden}
 .navigation .project-nav a{flex:none}
 .navigation .project-nav a::after{bottom:10px}
}
@media(max-width:760px){
 .navigation .nav-inner{gap:0}
 .navigation .category-nav{gap:22px}
 .navigation .project-nav{gap:24px;overflow-y:hidden}
 .tech-project .intro-title{font-size:clamp(38px,7.8vw,54px)}
 .tech-project .project-facts{grid-template-columns:58px 1fr;font-size:12px;gap:10px 17px}
 .tech-project .section-title{overflow-wrap:normal}
 .process-label{font-size:clamp(8px,2.1vw,12px);padding:1px 10px}
 .tech-package-gallery{padding-block:42px}
}


/* v9 — matched overview typography and mobile runtime fixes. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Preserve the existing ROLE/SCOPE/YEAR label sizes, including each responsive breakpoint. */
.project-facts dt,.project-facts dd{font-size:.85em}
.project-facts dd span{font-size:inherit}
.video-control{z-index:4;touch-action:manipulation;-webkit-appearance:none;appearance:none}
.video-status{position:absolute;z-index:3;bottom:76px;right:var(--gutter);max-width:min(280px,calc(100% - var(--gutter)*2));margin:0;padding:9px 12px;background:rgba(0,0,0,.74);color:#fff;font-size:11px;line-height:1.6;border-radius:4px;pointer-events:none}
@supports not (aspect-ratio:16/9){
 .video-shell::before{content:"";display:block;padding-top:56.25%}
 .video-shell video{position:absolute;inset:0;width:100%;height:100%}
}
@media(max-width:760px){
 /* Use a consistent 5px radius on all 18 mobile photographs. */
 .photo-section .photo-collage>figure,
 .photo-section .photo-collage .image-button,
 .photo-section .photo-collage img{border-radius:5px}
 .photo-section .photo-collage>figure{overflow:hidden;isolation:isolate;-webkit-clip-path:inset(0 round 5px);clip-path:inset(0 round 5px)}
 .photo-section .photo-collage .image-button{height:auto;overflow:hidden}
 .photo-section .photo-collage img{display:block;width:100%;height:auto;-webkit-clip-path:inset(0 round 5px);clip-path:inset(0 round 5px)}
 .motion-enabled .reveal{transition-duration:.8s,1s;transition-delay:var(--delay,0ms)}
 .video-control{min-height:44px;min-width:88px;bottom:12px;right:var(--gutter);padding:12px 14px;font-size:10px}
 .video-status{bottom:64px;font-size:10px;padding:7px 10px}
}

/* PURCELL: static PDP artwork with three inline motion regions. */
#purcell-vitamin-bc .vitamin-panel{position:relative;min-width:0}
#purcell-vitamin-bc .vitamin-panel>img{display:block;width:100%;height:auto}
#purcell-vitamin-bc .vitamin-pdp-motion{position:absolute;left:0;top:var(--clip-top);width:100%;height:var(--clip-height);aspect-ratio:auto;background:transparent}
#purcell-vitamin-bc .vitamin-pdp-motion video{display:block;width:100%;height:100%;object-fit:fill}
#purcell-vitamin-bc .vitamin-pdp-motion::before{display:none}
#purcell-vitamin-bc .vitamin-clinical-motion::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 77.73%,rgba(0,0,0,.004) 80.40%,rgba(0,0,0,.016) 83.08%,rgba(0,0,0,.035) 85.75%,rgba(0,0,0,.067) 88.43%,rgba(0,0,0,.11) 91.10%,rgba(0,0,0,.173) 93.78%,rgba(0,0,0,.247) 96.45%,rgba(0,0,0,.337) 99.13%,rgba(0,0,0,.369) 100%)}
#purcell-vitamin-bc .video-control{top:auto;bottom:6px;right:6px;min-width:28px;min-height:28px;width:28px;height:28px;padding:0;justify-content:center;gap:0;border-radius:4px;opacity:0;pointer-events:none}
#purcell-vitamin-bc .video-control .control-text{display:none}
#purcell-vitamin-bc .vitamin-pdp-motion:hover .video-control,
#purcell-vitamin-bc .vitamin-pdp-motion:focus-within .video-control,
#purcell-vitamin-bc .vitamin-pdp-motion[data-playback="blocked"] .video-control,
#purcell-vitamin-bc .vitamin-pdp-motion[data-playback="paused"] .video-control{opacity:1;pointer-events:auto}
#purcell-vitamin-bc .video-status{top:auto;bottom:40px;right:4px;max-width:calc(100% - 8px);padding:5px;font-size:10px}
#purcell-olive-young-us .visual-area img{display:block;width:100%;height:auto}