@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/montserrat-latin-variable.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:100 900;font-display:swap;src:url('assets/fonts/montserrat-latin-italic-variable.woff2') format('woff2')}
:root{--paper:#fafaf8;--ink:#171916;--muted:#6d7167;--line:#dedfd8;--accent:#2437ef;--font-primary:'Montserrat',Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-primary);font-size:19px;-webkit-font-smoothing:antialiased}body:has(dialog[open]){overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button:disabled{cursor:default}::selection{background:#dfe3ff}button{touch-action:manipulation}p,h1,h2,h3{margin:0}button{border-radius:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:12px;left:12px;background:var(--ink);color:white;padding:12px 18px;transform:translateY(-160%);z-index:50}.skip-link:focus{transform:translateY(0)}.text-button{border:0;padding:0;background:transparent;text-decoration:underline;text-underline-offset:3px}.hero{height:100svh;min-height:700px;max-height:1080px;position:relative;overflow:hidden;isolation:isolate}.hero-copy{position:absolute;z-index:4;top:13.9%;font-size:20px;line-height:1.12;white-space:pre-line;max-width:285px;letter-spacing:-.02em}.hero-copy-left{left:8%}.hero-copy-left p{display:inline}.hero-copy-left .text-button{color:var(--muted);font-size:inherit;margin-left:4px}.hero-copy-right{right:8%;text-align:right}.hero-name{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);font-weight:400;white-space:nowrap;line-height:.78;letter-spacing:-.055em;font-size:25vw;z-index:0;user-select:none;pointer-events:none}.badge-scene{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:1100px}.lanyard{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.ribbon-edge{fill:none;stroke:#171b16;stroke-width:13.4;stroke-linecap:butt}.ribbon{fill:none;stroke:#32372d;stroke-width:10.2;stroke-linecap:butt}.badge{position:absolute;left:0;top:0;width:228px;height:350px;display:block;padding:0;border:0;background:transparent;pointer-events:auto;touch-action:none;cursor:grab;transform-origin:50% -48px;will-change:transform;text-align:left;user-select:none;-webkit-user-select:none}.badge:active{cursor:grabbing}.badge-holder{position:absolute;inset:0;border-radius:18px 18px 15px 15px;border:2px solid #c5c9c373;background:linear-gradient(105deg,#ffffff33 2%,#eeeeeb48 27%,#fff9 49%,#fff1 55%,#d4d6cf48 100%);box-shadow:inset 0 0 0 3px #ffffffa8,inset 0 0 0 5px #bfc4bb44,1px 2px 1px #7e827b2b,5px 9px 15px #0d160c13;backdrop-filter:blur(2px);overflow:hidden}.badge-hole{position:absolute;top:14px;width:19px;height:19px;border-radius:50%;border:2px solid #c3c7bf91;box-shadow:0 0 0 2px #ffffff91,inset 1px 1px 2px #9ca29540;background:transparent}.hole-left{left:29px}.hole-right{right:29px}.badge-slot{position:absolute;top:18px;left:calc(50% - 28px);width:56px;height:11px;border:1px solid #bfc6bb82;border-radius:4px;box-shadow:inset 0 1px 2px #a5aa9f30,0 1px 1px white}.badge-seam{position:absolute;top:42px;left:7px;right:7px;height:7px;background:linear-gradient(#c1c5bb55,#fff8,#bbc3b633,#fff6);border-top:1px solid #d6d8d08a;border-bottom:1px solid #d2d4ca80}.badge-paper{position:absolute;left:11px;right:11px;top:54px;bottom:10px;display:block;background:linear-gradient(110deg,#f9f9f4,#eeeeea);border:1px solid #d0d3c76b;padding:18px 12px;box-shadow:1px 1px 2px #9da19335}.badge-name{display:block;font-family:var(--font-primary);font-size:53px;letter-spacing:-.065em;line-height:.74}.badge-name>span{display:block}.badge-accent{color:var(--accent)}.badge-paper-bottom{position:absolute;bottom:17px;left:13px;right:11px;display:block}.badge-small-label{display:block;font-size:8px;font-style:italic;letter-spacing:-.01em;color:#696c62}.badge-role{display:block;white-space:pre-line;font-size:9px;line-height:1.4;margin-top:5px;color:#484b41}.badge-small-label-second{margin-top:14px}.badge-tags{display:flex;gap:3px;margin-top:5px}.badge-tags>span{font:500 7px/1.2 var(--font-primary);padding:3px 5px;border-radius:6px;background:#2e332c;color:#fcfcf7}.badge-tags>span:nth-child(2){background:var(--accent)}.badge-tags>span:nth-child(3){background:#a1b06a;color:#20251a}.badge-reflection{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(104deg,transparent 20%,#ffffff00 35%,#ffffff26 49%,transparent 51%,transparent 85%,#ffffff54);pointer-events:none}.badge-clip{position:absolute;left:calc(50% - 11px);top:-55px;width:22px;height:77px;display:block;z-index:3;filter:drop-shadow(2px 2px 2px #30362a24)}.clip-head{position:absolute;left:1px;top:0;width:20px;height:32px;border:2px solid #949b8c;border-radius:3px 3px 9px 9px;background:linear-gradient(100deg,#dadfd5,#fff 25%,#969c90 55%,#fff 80%,#a1a89a);box-shadow:inset 0 0 0 2px #dfe3da}.clip-head:after{content:'';position:absolute;inset:1px 3px 9px;background:#2e342a;border-radius:0 0 3px 3px}.clip-ring{position:absolute;top:28px;left:6px;width:11px;height:24px;border:2px solid #909786;border-radius:6px;box-shadow:inset 1px 0 #fff,1px 0 #fff}.clip-neck{position:absolute;top:45px;left:9px;width:4px;height:32px;background:linear-gradient(90deg,#969e8d,#fff,#969e8d);border-radius:2px}.hero-bottom{position:absolute;bottom:15px;left:8%;right:8%;display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:3;font:400 11px/1.5 var(--font-primary);color:#75786f}.work-anchor{text-decoration:none;display:flex;gap:12px;align-items:center}.drag-hint{font-size:10px}.drag-hint>span{margin:0 5px 0 10px;font-size:15px}.work{padding-top:75px;scroll-margin-top:20px}.work-heading{display:flex;justify-content:space-between;align-items:baseline;padding:0 8% 25px;gap:20px}.work-heading h2{font-weight:400;font-size:21px}.work-heading>span{font:400 9px/1.5 var(--font-primary);letter-spacing:.1em;color:var(--muted)}.project-row{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:6%;padding:45px 8%;border-top:1px solid var(--line);text-align:left;background:transparent;width:100%;border-left:0;border-right:0;border-bottom:0;min-height:390px;transition:opacity .3s;align-items:center}.project-row:last-child{border-bottom:1px solid var(--line)}.project-title{font-size:51px;line-height:1;letter-spacing:-.045em;display:flex;gap:12px;align-items:baseline}.project-arrow{font-family:var(--font-primary);font-size:25px;opacity:0;transform:translate(-5px,5px);transition:transform .25s,opacity .25s}.project-row:hover .project-arrow,.project-row:focus-visible .project-arrow{opacity:1;transform:translate(0,0)}.project-description{font-size:19px;line-height:1.16;letter-spacing:-.015em;display:block;margin-top:19px;max-width:310px}.project-date{font:400 10px/1.5 var(--font-primary);letter-spacing:.06em;color:var(--muted);display:block;margin-top:22px}.project-visual{display:block;aspect-ratio:1.6;overflow:hidden;border-radius:3px;transform:rotate(-1.3deg);transition:transform .5s}.project-visual img{width:100%;height:100%;display:block;object-fit:cover}.closing{padding:145px 8% 35px}.closing-kicker{font:400 10px/1.5 var(--font-primary);letter-spacing:.09em;color:var(--muted)}.closing h2{font-size:clamp(32px,5.3vw,78px);font-weight:400;letter-spacing:-.045em;line-height:.98;margin-top:27px;max-width:1100px}.closing h2 em{font-weight:400;color:var(--muted)}.closing-bottom{margin-top:42px;display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:19px;line-height:1.3}.closing-bottom p{max-width:320px}.footer-meta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:23px;margin-top:110px;font:400 10px/1.5 var(--font-primary);color:var(--muted)}.footer-meta a{text-decoration:none}dialog{color:var(--ink);background:var(--paper);padding:0;border:0}dialog::backdrop{background:#17191624}.about-dialog{position:fixed;top:0;left:0;right:auto;bottom:0;width:min(520px,100%);max-width:100%;height:100dvh;max-height:100dvh;margin:0;overflow-y:auto;box-shadow:7px 0 60px #14180f0c}.about-content{padding:39px 48px 50px}.dialog-heading{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:30px}.dialog-heading h2{font-size:49px;line-height:1;letter-spacing:-.04em;font-weight:400}.icon-button{background:transparent;border:0;width:30px;height:30px;font:300 33px/1 var(--font-primary);padding:0}.about-lead{font-size:21px;line-height:1.35;color:#505449}.about-section{margin-top:34px}.about-section h3{font-weight:400;font-size:24px;margin-bottom:14px}.about-section>p{font-size:19px;line-height:1.35;color:#61665a}.project-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:100%;max-height:100dvh;margin:0;overflow:auto}.project-modal-top{padding:28px 8%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.project-modal-top>span{font:400 10px/1.5 var(--font-primary);color:var(--muted);letter-spacing:.07em}.case-study{padding:75px 8% 50px;max-width:1600px;margin:auto}.case-kicker{font:400 11px/1.5 var(--font-primary);letter-spacing:.12em;color:var(--muted)}.case-study>h2{font-weight:400;font-size:clamp(65px,10vw,140px);letter-spacing:-.055em;line-height:.95;margin-top:20px}.case-summary{font-size:27px;line-height:1.2;max-width:650px;margin-top:30px}.case-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin:40px 0 42px;border-top:1px solid var(--line);padding-top:24px}.case-facts dt{font:400 11px/1.5 var(--font-primary);color:var(--muted);margin-bottom:8px}.case-facts dd{margin:0;font-size:20px}.case-study>img{width:100%;height:auto;display:block;border-radius:5px}.case-body{max-width:700px;margin:75px auto 0}.case-body>div{margin-bottom:65px}.case-body span{font:400 10px/1.5 var(--font-primary);letter-spacing:.09em;color:var(--muted)}.case-body h3{font-size:43px;font-weight:400;line-height:1.1;letter-spacing:-.025em;margin-top:15px}.case-body p{font-size:22px;line-height:1.4;color:#5e6358;margin-top:20px}.next-project{background:transparent;border:0;border-top:1px solid var(--line);padding:25px 0 0;text-align:left;font-size:45px;width:100%;display:flex;justify-content:space-between}.about-dialog[open]{animation:drawer-in .35s cubic-bezier(.2,.7,.25,1)}.project-dialog[open]{animation:page-in .3s ease-out}@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes page-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:1600px){.hero-copy-left{left:10%}.hero-copy-right{right:10%}.hero-bottom{left:10%;right:10%}.project-row{padding-left:10%;padding-right:10%;min-height:490px}}
@media(max-width:900px){.hero-copy{font-size:18px;max-width:230px;top:10%}.hero-copy-left{left:6%}.hero-copy-right{right:6%}.hero-name{bottom:75px}.hero-bottom{left:6%;right:6%}.project-row{padding:35px 6%;gap:5%;grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr);min-height:330px}.project-title{font-size:43px}.project-description{font-size:18px}.project-visual{aspect-ratio:1.4}.work-heading{padding-left:6%;padding-right:6%}.closing{padding-left:6%;padding-right:6%}.drag-hint{max-width:200px;text-align:right}.closing-bottom{font-size:18px}}
@media(max-width:600px){.hero{height:94svh;min-height:660px;max-height:900px}.hero-copy{top:7%;font-size:17px;line-height:1.17;max-width:174px}.hero-copy-left{left:7%}.hero-copy-right{right:7%;top:auto;bottom:140px;text-align:left;max-width:180px;font-size:15px}.hero-name{bottom:64px;letter-spacing:-.055em}.hero-bottom{left:7%;right:7%;bottom:22px;font-size:10px}.drag-hint{font-size:9px;max-width:120px}.drag-hint>span{display:none}.badge{width:190px;height:292px}.badge-name{font-size:44px}.badge-paper{top:45px;left:9px;right:9px;padding:16px 10px}.badge-seam{top:35px;height:6px}.badge-hole{top:10px;width:16px;height:16px}.hole-left{left:25px}.hole-right{right:25px}.badge-slot{top:14px;width:45px;left:calc(50% - 22.5px);height:10px}.badge-paper-bottom{bottom:14px;left:10px;right:8px}.badge-small-label{font-size:7px}.badge-role{font-size:8px;margin-top:4px}.badge-small-label-second{margin-top:10px}.badge-tags{gap:3px}.badge-tags>span{font-size:6px;padding:3px 4px}.work{padding-top:32px}.work-heading{padding:0 7% 20px;align-items:center}.work-heading h2{font-size:20px}.work-heading>span{font-size:8px;max-width:140px;text-align:right}.project-row{padding:29px 7% 35px;grid-template-columns:1fr;gap:26px}.project-title{font-size:45px}.project-description{max-width:310px;font-size:18px;margin-top:12px}.project-date{margin-top:14px;font-size:9px}.project-visual{aspect-ratio:1.6;margin:0 3px}.project-arrow{opacity:1;font-size:20px;margin-left:auto}.closing{padding:82px 7% 25px}.closing-kicker{font-size:9px}.closing h2{line-height:1.04}.closing-bottom{align-items:start;flex-direction:column;margin-top:25px;gap:25px}.closing-bottom p{font-size:18px;max-width:260px}.footer-meta{margin-top:67px;gap:15px;font-size:9px}.about-content{padding:30px 26px 40px}.dialog-heading h2{font-size:42px}.about-lead{font-size:20px}.project-modal-top{padding:23px 7%;font-size:17px}.project-modal-top>span{font-size:8px;max-width:75px;text-align:right}.case-study{padding:45px 7% 35px}.case-summary{font-size:23px}.case-facts{gap:12px;margin-top:30px}.case-facts dd{font-size:17px}.case-facts dt{font-size:10px}.case-body{margin-top:45px}.case-body h3{font-size:34px}.case-body p{font-size:20px}.next-project{font-size:35px}}
.hero-bottom{color:#696e63}
@media(max-width:600px){.hero-copy-left{max-width:111px;font-size:16px}.hero-copy-right{top:7%;bottom:auto;right:7%;text-align:right;max-width:100px;font-size:14px}}
@media(max-width:360px){.hero-copy-left{max-width:100px;font-size:15px}.hero-copy-right{max-width:91px;font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}.badge{will-change:auto}}

/* Montserrat metrics: keep the badge, headings, and compact screens comfortable. */
.hero-name{line-height:.9}.badge-name{line-height:.93;letter-spacing:-.065em}.hero-copy{font-size:16px;line-height:1.3;max-width:320px}.project-title{font-size:43px;line-height:1.1}.project-description{font-size:16px;line-height:1.4}.about-lead{font-size:17px;line-height:1.6}.case-facts dd{overflow-wrap:anywhere}
@media(max-width:900px){.hero-copy{font-size:15px;max-width:235px}.project-title{font-size:39px}}
@media(max-width:600px){.hero-copy-left{max-width:111px;font-size:14px;line-height:1.25}.hero-copy-right{max-width:105px;font-size:12px;line-height:1.35}.project-title{font-size:36px}.badge-name{font-size:41px}.case-summary{font-size:20px}.case-body p{font-size:17px;line-height:1.6}.dialog-heading h2{font-size:36px}}
@media(max-width:480px){.case-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.case-facts>div:last-child{grid-column:1/-1}}
@media(max-width:360px){.hero-copy-left{max-width:100px;font-size:13px}.hero-copy-right{max-width:88px;font-size:11px}}

/* Personal portfolio content */
.about-portrait{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;object-position:center top;margin-top:30px;border-radius:3px;background:#e5e6df}
.skills-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.skills-list li{font:400 12px/1.4 var(--font-primary);border:1px solid var(--line);border-radius:20px;padding:8px 12px}
.experience-list{list-style:none;margin:0;padding:0}
.experience-list>li{display:grid;grid-template-columns:100px minmax(0,1fr);gap:18px;border-top:1px solid var(--line);padding:18px 0}
.experience-period{font:400 11px/1.5 var(--font-primary);color:var(--muted);padding-top:3px}
.experience-list h4{font:500 15px/1.4 var(--font-primary);margin:0}
.experience-list p{font:400 13px/1.5 var(--font-primary);color:var(--muted);margin:5px 0 0}
.about-contact,.contact-links{display:flex;flex-wrap:wrap;gap:16px 25px;font:400 14px/1.6 var(--font-primary)}
.about-contact{border-top:1px solid var(--line);padding-top:24px;margin-top:10px;flex-direction:column;align-items:flex-start}
.contact-links{justify-content:flex-end;max-width:390px;overflow-wrap:anywhere}
.project-live-link{display:inline-flex;font:500 13px/1.5 var(--font-primary);text-underline-offset:5px;margin:0 0 30px}
.case-body>section{margin-bottom:50px}
.case-gallery{display:grid;gap:25px;margin:25px 0 65px}
.case-gallery img{display:block;width:100%;height:auto;border-radius:4px;background:#eeeFE9}
.case-study>h2{overflow-wrap:normal;font-size:clamp(50px,8.5vw,112px);line-height:1.03}
.project-title{font-size:clamp(28px,3.2vw,43px);line-height:1.16;gap:8px}
.project-title .project-arrow{flex-shrink:0}
.project-visual{background:#f0f0eb}
.project-visual img{object-fit:contain}
.closing-bottom>p{font-size:16px;line-height:1.55;max-width:480px}
@media(max-width:600px){.contact-links{justify-content:flex-start;gap:16px 22px}.experience-list>li{grid-template-columns:90px minmax(0,1fr);gap:12px}.project-title{font-size:31px}.case-study>h2{font-size:45px}.case-body>section{margin-bottom:35px}.case-gallery{gap:15px;margin-bottom:40px}.hero-copy-left{max-width:112px}.about-contact{font-size:13px}}

/* Previews fan out on desktop hover and as they scroll into view on touch. */
.project-row{min-height:330px;padding-top:35px;padding-bottom:35px;opacity:1;transition:background-color .3s}
.project-copy{display:block}
.project-visual{position:relative;display:block;height:245px;aspect-ratio:auto;overflow:visible;background:transparent;border-radius:0;transform:translate3d(0,var(--deck-y,0px),0);transition:none;pointer-events:none}
.project-preview{--card-x:-50%;--card-angle:8deg;position:absolute;left:50%;top:50%;display:block;width:46%;aspect-ratio:1.5;background:#f7f7f4;border:1px solid #24282012;border-radius:5px;box-shadow:0 4px 8px #15200f08,0 13px 28px #15200f0a;overflow:hidden;opacity:1;transform:translate(var(--card-x),-50%) rotate(var(--card-angle));transform-origin:50% 75%}
.project-preview:nth-child(1){--card-x:-110%;--card-angle:-8deg;z-index:1}
.project-preview:nth-child(2){--card-x:-50%;--card-angle:8deg;z-index:2}
.project-preview:nth-child(3){--card-x:10%;--card-angle:-6deg;z-index:3}
.project-preview img{width:100%;height:100%;display:block;object-fit:contain;background:#f7f7f4}
.motion-ready .project-row.is-softened .project-title{color:var(--muted)}
.motion-ready .project-row:focus-within .project-title{color:var(--ink)}
.motion-ready .project-row.is-active .project-arrow{opacity:1;transform:translate(0,0)}
@media(prefers-reduced-motion:no-preference){
  .motion-ready .work-heading,.motion-ready .project-copy>*{
    transition:opacity .46s ease,transform .64s cubic-bezier(.22,1,.36,1),color .35s ease;
  }
  .motion-ready .work-heading:not(.is-revealed),
  .motion-ready .project-row:not(.is-revealed):not(:focus-within) .project-copy>*{
    opacity:.55;
    transform:translateY(18px);
  }
  .motion-ready .project-description{transition-delay:55ms}
  .motion-ready .project-date{transition-delay:110ms}
  .motion-ready .project-row:focus-within .project-copy>*{transition-delay:0s}
  .motion-ready .project-preview{
    opacity:0;
    transform:translate(-50%,calc(-50% + 58px)) rotate(0deg) scale(.94);
    transition:transform .66s cubic-bezier(.22,1,.36,1),opacity .32s ease;
  }
  .motion-ready.scroll-previews .is-preview-visible .project-preview,
  .motion-ready:not(.scroll-previews) .project-row:is(.is-active,:focus-visible) .project-preview{
    opacity:1;
    transform:translate(var(--card-x),calc(-50% + var(--card-lift,0px))) rotate(var(--card-angle)) scale(1);
    transition-delay:calc(var(--card-index)*65ms);
  }
  .motion-ready:not(.scroll-previews) .is-active .project-preview{--card-lift:-7px}
}
.closing.motion-reveal>:is(.closing-kicker,h2,.closing-bottom,.footer-meta){opacity:0;transform:translate3d(0,26px,0);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.closing.motion-reveal.is-revealed>:is(.closing-kicker,h2,.closing-bottom,.footer-meta),.closing.motion-reveal:focus-within>:is(.closing-kicker,h2,.closing-bottom,.footer-meta){opacity:1;transform:none}
.closing.motion-reveal h2{transition-delay:60ms}.closing.motion-reveal .closing-bottom{transition-delay:130ms}.closing.motion-reveal .footer-meta{transition-delay:180ms}
@media(max-width:900px){.project-visual{height:225px}.project-row{min-height:305px}}
@media(max-width:600px){.project-row{min-height:0;padding-top:30px;padding-bottom:25px;gap:12px}.project-visual{height:210px;margin:0 4px}.project-preview{width:60%}.project-preview:nth-child(1){--card-x:-91%;--card-angle:-8deg}.project-preview:nth-child(2){--card-x:-50%;--card-angle:8deg}.project-preview:nth-child(3){--card-x:-9%;--card-angle:-6deg}.motion-ready .project-row.is-softened .project-copy{opacity:1;filter:none}}
@media(prefers-reduced-motion:reduce){.project-visual{transform:none}.closing.motion-reveal>:is(.closing-kicker,h2,.closing-bottom,.footer-meta){opacity:1;transform:none;transition:none}}

.closing-kicker{display:inline-block}

/* Keep the ID's flip independent from its draggable hanging motion. */
.badge{transform-style:preserve-3d}
.badge-flip{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.badge.is-flipped .badge-flip{transform:rotateY(180deg)}
.badge-front,.badge-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.badge-front{transform:translateZ(.3px)}
.badge-back{transform:rotateY(180deg) translateZ(.3px)}
.badge-back-paper{padding:0;display:grid;place-items:center;overflow:hidden;background:#4c2f1d}
.badge-back-paper img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;-webkit-user-drag:none}
@media(prefers-reduced-motion:reduce){.badge-flip{transition:none}}

/* Match the reference's title overlap, with tightly stacked ID lettering. */
.badge-name{width:80%;line-height:.82;letter-spacing:-.075em}
.badge-name>span{width:max-content;line-height:.82;letter-spacing:-.075em}
.badge-name>.badge-accent{margin-top:-.015em}
.hero-copy-right,.badge-role{text-wrap:balance}
.about-lead + .about-lead{margin-top:20px}
@media(min-width:601px){
  .badge{width:clamp(218px,min(31svh,26vw),320px);height:auto;aspect-ratio:228/350}
  .badge-paper{left:4.82%;right:4.82%;top:15.43%;bottom:2.86%;padding:7.9% 5.26%}
  .badge-back-paper{padding:0}
  .badge-hole{top:4%;width:8.33%;height:auto;aspect-ratio:1}
  .hole-left{left:12.72%}.hole-right{right:12.72%}
  .badge-slot{top:5.14%;left:37.72%;width:24.56%;height:3.14%}
  .badge-seam{top:12%;left:3.07%;right:3.07%;height:2%}
  .badge-paper-bottom{bottom:6%;left:6.5%;right:5.5%}
}

/* Project pages: lavender cover, editorial chapters, and persistent navigation. */
.project-dialog.cp-page{--cp-hero-background:#dfddfa;--cp-hero-ink:#1c1c20;--cp-hero-muted:#5d5976;--cp-hero-shadow:#1c1c2018;--cp-soft:#efefeb;--cp-border:#dedfd9;--case-progress:0;background:var(--paper);font-family:var(--font-primary);scroll-behavior:smooth;overscroll-behavior:contain}
.project-dialog.cp-page[open]{animation:none}
.cp-page .cp-content{display:block;width:100%;margin:0;padding:0}
.cp-page .cp-topbar{position:fixed;z-index:40;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;width:550px;max-width:calc(100% - 28px);height:40px;padding:0 19px;border:1px solid #343434;border-radius:30px;background:#1d1d1d;color:#fff;box-shadow:0 4px 14px #1616160b}
.cp-page .cp-back{align-self:stretch;display:flex;align-items:center;gap:8px;padding:0 5px;border:0;border-radius:22px;background:transparent;color:inherit;font:400 13px/1 var(--font-primary);text-align:left;white-space:nowrap}
.cp-page .cp-socials{display:flex;align-items:center;gap:24px;height:100%}
.cp-page .cp-socials>a{display:flex;align-items:center;height:100%;font:400 13px/1 var(--font-primary);color:#e7e7e7;text-decoration:none}
.cp-page .cp-back:hover,.cp-page .cp-socials>a:hover{color:#cdc8ff}
.cp-page .cp-back:focus-visible,.cp-page .cp-socials>a:focus-visible{outline:2px solid #b7b1ff;outline-offset:4px}
.cp-page .cp-hero{position:relative;isolation:isolate;height:520px;overflow:hidden;background:var(--cp-hero-background)}
.cp-page .cp-hero-copy{position:relative;z-index:2;width:580px;max-width:calc(100% - 40px);margin:0 auto;padding-top:168px;text-align:center}
.cp-page .cp-draft-label{display:block;margin:0 0 14px;font:400 8px/1.4 var(--font-primary);letter-spacing:.065em;text-transform:uppercase;color:var(--cp-hero-muted)}
.cp-page .cp-hero-copy>h2{margin:0;font:500 clamp(46px,5.625vw,72px)/1.04 var(--font-primary);letter-spacing:-.065em;color:var(--cp-hero-ink);overflow-wrap:normal}
.cp-page #project-dialog-title:focus{outline:none}
.cp-page .cp-hero-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:24px}
.cp-page .cp-date,.cp-page .cp-live-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:10px 16px;border-radius:20px;font:400 12px/1.1 var(--font-primary);white-space:nowrap}
.cp-page .cp-date{background:#fff;color:#1c1c20}
.cp-page .cp-live-link{gap:7px;background:#242326;color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px #75757b}
.cp-page .cp-live-link:hover{background:#45424e}
.cp-page .cp-hero-art{position:absolute;z-index:1;top:112px;width:650px;height:420px;pointer-events:none;user-select:none;filter:drop-shadow(0 18px 26px var(--cp-hero-shadow))}
.cp-page .cp-hero-art--left{left:calc(50% - 960px);transform:none}
.cp-page .cp-hero-art--right{left:calc(50% + 310px);transform:none}
.cp-page .cp-hero-art>.cp-mock-screen{width:100%;height:100%}
.cp-page .cp-story{width:100%;padding:1px 0 0}
.cp-page .cp-chapter{margin:90px 0 0;scroll-margin-top:106px}
.cp-page .cp-section-heading{display:grid;grid-template-columns:auto 30px minmax(0,1fr);align-items:center;gap:18px;width:560px;max-width:calc(100% - 44px);margin:0 auto}
.cp-page .cp-section-number{font:400 43px/1.1 var(--font-primary);letter-spacing:-.065em;color:#999b93}
.cp-page .cp-section-rule{height:1px;background:#83877d}
.cp-page .cp-section-title{margin:0;font:400 42px/1.12 var(--font-primary);letter-spacing:-.055em;color:var(--ink)}
.cp-page .cp-copy{width:560px;max-width:calc(100% - 44px);margin:28px auto 0}
.cp-page .cp-copy h4{margin:0 0 12px;font:500 19px/1.35 var(--font-primary);letter-spacing:-.035em;color:#2b2e28}
.cp-page .cp-copy p{margin:0;font:400 15.5px/1.65 var(--font-primary);letter-spacing:-.012em;color:#555a50}
.cp-page .cp-copy p+p{margin-top:15px}
.cp-page .cp-copy h4:not(:first-child){margin-top:30px}
.cp-page .cp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:560px;max-width:calc(100% - 44px);margin:32px auto 38px;padding:0}
.cp-page .cp-facts>div{min-width:0}
.cp-page .cp-facts dt{margin:0;font:500 10px/1.5 var(--font-primary);color:#292d25}
.cp-page .cp-facts dd{margin:8px 0 0;font:400 12px/1.7 var(--font-primary);color:#65695f;overflow-wrap:anywhere}
.cp-page .cp-visual-group{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;width:1000px;max-width:calc(100% - 40px);margin:42px auto 0}
.cp-page .cp-visual-group--pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cp-page .cp-visual-group--trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cp-page .cp-visual-group--mobile{grid-template-columns:repeat(2,minmax(0,1fr));width:760px;gap:24px}
.cp-page .cp-figure{min-width:0;margin:0}
.cp-page .cp-figure-label{display:block;margin:0 0 12px;font:500 12px/1.5 var(--font-primary);letter-spacing:-.015em;color:#3b4035}
.cp-page .cp-placeholder{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;isolation:isolate;height:420px;padding:0;border:1px solid #e1e2db;border-radius:4px;background:#eaece7}
.cp-page .cp-placeholder>.cp-mock-screen{width:89%;height:83%}
.cp-page .cp-visual-group--pair .cp-placeholder--desktop{height:300px}
.cp-page .cp-visual-group--trio .cp-placeholder--desktop{height:235px}
.cp-page .cp-visual-group--trio .cp-placeholder>.cp-mock-screen{width:90%;height:80%}
.cp-page .cp-visual-tag{position:absolute;z-index:3;right:11px;bottom:10px;padding:5px 8px;border:1px solid #d0d3ca;border-radius:3px;background:#fafaf8e8;color:#747a6c;font:400 8px/1.2 var(--font-primary);letter-spacing:.015em}
.cp-page .cp-caption{margin:10px 0 0;font:400 10px/1.6 var(--font-primary);letter-spacing:-.005em;color:#7b8074}
.cp-page .cp-mock-screen{position:relative;min-width:0;overflow:hidden;border:1px solid #c7cbd3;border-radius:6px;background:#fcfcf9;box-shadow:0 8px 20px #343a4d0b}
.cp-page .cp-window-bar{display:flex;align-items:center;gap:4px;height:26px;padding:0 11px;border-bottom:1px solid #e0e3dc;background:#f8f9f4}
.cp-page .cp-window-bar>i{display:block;flex:none;width:4px;height:4px;border-radius:50%;background:#bfc5b8}
.cp-page .cp-window-bar>span{margin-left:auto;font:400 6px/1 var(--font-primary);letter-spacing:.02em;color:#858b7f}
.cp-page .cp-screen-layout{display:grid;grid-template-columns:18% minmax(0,1fr);height:calc(100% - 26px)}
.cp-page .cp-screen-sidebar{display:flex;flex-direction:column;gap:16px;min-width:0;padding:23px 13px;border-right:1px solid #e5e7df;background:#f2f4ee}
.cp-page .cp-screen-sidebar>i{display:block;width:100%;height:4px;border-radius:2px;background:#d7dccf}
.cp-page .cp-screen-sidebar>i:nth-child(2){width:65%}
.cp-page .cp-screen-sidebar>i:nth-child(4){width:80%}
.cp-page .cp-screen-main{display:flex;flex-direction:column;gap:20px;min-width:0;padding:6%}
.cp-page .cp-screen-heading{display:flex;flex-direction:column;gap:8px}
.cp-page .cp-screen-heading>i{display:block;width:40%;height:9px;border-radius:2px;background:#aeb8d3}
.cp-page .cp-screen-heading>i:nth-child(2){width:65%;height:4px;background:#d4d9df}
.cp-page .cp-screen-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;height:70px;flex:none}
.cp-page .cp-screen-stats>i{display:block;min-width:0;border:1px solid #e0e4ed;border-radius:4px;background:linear-gradient(140deg,#e9edf9,#f4f6fc)}
.cp-page .cp-screen-stats>i:nth-child(2){border-color:#d8ddef;background:linear-gradient(140deg,#d9def4,#eef0fa)}
.cp-page .cp-screen-rows{display:flex;flex-direction:column;gap:10px;min-height:0}
.cp-page .cp-screen-rows>i{display:block;flex:none;height:17px;border-bottom:1px solid #e9ece4;border-radius:2px;background:linear-gradient(90deg,#e7eaf0 0 24%,#f0f2ec 24% 100%)}
.cp-page .cp-placeholder--mobile{height:420px;background:#e8e9f2}
.cp-page .cp-placeholder--mobile>.cp-mock-screen{width:74%;max-width:200px;height:88%;border:5px solid #2c2f34;border-radius:21px;background:#fbfcf8;box-shadow:0 10px 18px #292d4114}
.cp-page .cp-placeholder--mobile .cp-window-bar{height:24px;justify-content:center;padding:0 9px;border-bottom:0;background:#fbfcf8}
.cp-page .cp-placeholder--mobile .cp-window-bar>i{display:none}
.cp-page .cp-placeholder--mobile .cp-window-bar>span{margin:0;color:#9ca292;font-size:5px}
.cp-page .cp-placeholder--mobile .cp-screen-layout{grid-template-columns:minmax(0,1fr);height:calc(100% - 24px)}
.cp-page .cp-placeholder--mobile .cp-screen-sidebar{display:none}
.cp-page .cp-placeholder--mobile .cp-screen-main{gap:20px;padding:13% 9%}
.cp-page .cp-placeholder--mobile .cp-screen-heading>i{width:64%;height:7px}
.cp-page .cp-placeholder--mobile .cp-screen-heading>i:nth-child(2){width:82%;height:3px}
.cp-page .cp-placeholder--mobile .cp-screen-stats{height:58px;gap:6px}
.cp-page .cp-placeholder--mobile .cp-screen-rows{gap:12px}
.cp-page .cp-placeholder--mobile .cp-screen-rows>i{height:20px}
.cp-page .cp-placeholder--explorations{height:290px;background-color:#eeedf2;background-image:linear-gradient(#d8d8e34f 1px,transparent 1px),linear-gradient(90deg,#d8d8e34f 1px,transparent 1px);background-size:20px 20px}
.cp-page .cp-placeholder--explorations>.cp-mock-screen{width:83%;height:78%;transform:rotate(-3deg)}
.cp-page .cp-placeholder--explorations .cp-screen-stats>i{background:#e8e9e7;border-color:#d7dcd1}
.cp-page .cp-visual-group--trio .cp-screen-main{gap:12px;padding:7%}
.cp-page .cp-visual-group--trio .cp-screen-sidebar{gap:11px;padding:16px 8px}
.cp-page .cp-visual-group--trio .cp-screen-stats{height:39px;gap:6px}
.cp-page .cp-visual-group--trio .cp-screen-rows{gap:7px}
.cp-page .cp-visual-group--trio .cp-screen-rows>i{height:10px}
.cp-page .cp-visual-group--pair .cp-screen-main{gap:15px}
.cp-page .cp-visual-group--pair .cp-screen-stats{height:50px}
.cp-page .cp-outro{margin-top:100px;margin-bottom:82px}
.cp-page .cp-outro>h3{max-width:520px;margin:0 0 20px;font:400 40px/1.12 var(--font-primary);letter-spacing:-.055em;color:#22271d}
.cp-page .cp-outro-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}
.cp-page .cp-outro-links>a{font:400 12px/1.5 var(--font-primary);text-underline-offset:4px;text-decoration-thickness:1px;color:#444c3b}
.cp-page .cp-next-wrap{width:1000px;max-width:calc(100% - 40px);margin:0 auto;padding-bottom:110px}
.cp-page .cp-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px;row-gap:12px;width:100%;padding:32px 36px;border:0;border-radius:5px;background:#252723;color:#fafaf8;text-align:left;transition:background .2s ease}
.cp-page .cp-next>span:first-child{grid-column:1;font:400 10px/1.5 var(--font-primary);color:#c2c6bc}
.cp-page .cp-next>strong{grid-column:1;font:400 38px/1.12 var(--font-primary);letter-spacing:-.05em;overflow-wrap:anywhere}
.cp-page .cp-next>span:last-child{grid-column:2;grid-row:1/3;font:300 35px/1 var(--font-primary)}
.cp-page .cp-next:hover{background:#393c34}
.cp-page .cp-next:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.cp-page .cp-rail{display:none;position:fixed;z-index:20;top:50%;left:max(24px,calc((100vw - 1580px)/2));width:172px;transform:translateY(-50%)}
.cp-page .cp-rail>nav{position:relative}
.cp-page .cp-rail>nav:before,.cp-page .cp-rail>nav:after{content:'';position:absolute;z-index:-1;top:16px;bottom:16px;left:5px;width:1px;background:#dcdfd5}
.cp-page .cp-rail>nav:after{background:#7b8171;transform:scaleY(var(--case-progress,0));transform-origin:top}
.cp-page .cp-toc-list{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.cp-page .cp-toc-list>li{min-width:0;margin:0;padding:0}
.cp-page .cp-toc-link{display:grid;grid-template-columns:11px 18px minmax(0,1fr);align-items:center;gap:7px;min-height:31px;color:#666d5d;text-decoration:none;transition:color .2s ease,background .2s ease}
.cp-page .cp-toc-dot{display:block;width:11px;height:11px;border:1px solid #cbd0c3;border-radius:50%;background:var(--paper)}
.cp-page .cp-toc-number{font:400 10px/1.4 var(--font-primary);letter-spacing:.025em}
.cp-page .cp-toc-label{font:400 12px/1.4 var(--font-primary);letter-spacing:-.01em}
.cp-page .is-reached>.cp-toc-link{color:#5f6854}
.cp-page .is-reached>.cp-toc-link .cp-toc-dot{border-color:#7b8171;background:#7b8171}
.cp-page .cp-toc-link[aria-current=location]{color:#20271a}
.cp-page .cp-toc-link[aria-current=location] .cp-toc-label{font-weight:500}
.cp-page .cp-toc-link[aria-current=location] .cp-toc-dot{border-color:#262e20;background:#262e20;box-shadow:0 0 0 3px var(--paper)}
.cp-page .cp-toc-link:hover{color:#242c1d}
.cp-page .cp-picker{position:fixed;z-index:35;bottom:22px;left:50%;width:280px;max-width:calc(100% - 40px);transform:translateX(-50%)}
.cp-page .cp-picker-toggle{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;height:47px;padding:0 20px;border:1px solid #41413e;border-radius:30px;background:#222320;color:#fafaf8;box-shadow:0 5px 20px #15171124;text-align:left;font:400 11px/1.4 var(--font-primary)}
.cp-page #case-current-number{font-size:9px;color:#b7bcaf;letter-spacing:.045em}
.cp-page #case-current-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cp-page .cp-picker-chevron{display:block;transition:transform .2s ease;color:#c9cdbf;font-size:13px;line-height:1}
.cp-page .cp-picker.is-open .cp-picker-chevron{transform:rotate(180deg)}
.cp-page .cp-picker>nav{position:absolute;right:0;bottom:58px;left:0;max-height:min(430px,65dvh);overflow:auto;padding:12px;border:1px solid #41413e;border-radius:14px;background:#242522;box-shadow:0 6px 25px #16191129}
.cp-page .cp-picker .cp-toc-list{gap:3px}
.cp-page .cp-picker .cp-toc-link{min-height:36px;padding:7px 8px;border-radius:6px;grid-template-columns:9px 19px minmax(0,1fr);color:#a9b09e}
.cp-page .cp-picker .cp-toc-dot{width:7px;height:7px;border-color:#59624d;background:#242522}
.cp-page .cp-picker .cp-toc-number{font-size:10px}
.cp-page .cp-picker .cp-toc-label{font-size:12px}
.cp-page .cp-picker .is-reached>.cp-toc-link{color:#c6ccbd}
.cp-page .cp-picker .is-reached>.cp-toc-link .cp-toc-dot{background:#a0aa92;border-color:#a0aa92}
.cp-page .cp-picker .cp-toc-link[aria-current=location]{background:#3c4136;color:#fff}
.cp-page .cp-picker .cp-toc-link[aria-current=location] .cp-toc-dot{background:#eef2e9;border-color:#eef2e9;box-shadow:none}
.cp-page .cp-picker .cp-toc-link:hover{background:#34372e;color:#fff}
.cp-page [hidden]{display:none!important}
@media(min-width:1440px){
  .cp-page .cp-rail{display:block}
  .cp-page .cp-picker{display:none}
  .cp-page .cp-next-wrap{padding-bottom:70px}
}
@media(max-width:900px){
  .cp-page .cp-hero-art--left{left:calc(50% - 1010px)}
  .cp-page .cp-hero-art--right{left:calc(50% + 360px)}
  .cp-page .cp-hero-copy{padding-top:172px}
  .cp-page .cp-hero-copy>h2{font-size:64px}
  .cp-page .cp-section-title{font-size:38px}
  .cp-page .cp-section-number{font-size:39px}
  .cp-page .cp-placeholder{height:360px}
  .cp-page .cp-visual-group--pair .cp-placeholder--desktop{height:250px}
  .cp-page .cp-visual-group--trio{grid-template-columns:minmax(0,1fr)}
  .cp-page .cp-visual-group--trio .cp-placeholder--desktop{height:340px}
  .cp-page .cp-visual-group--trio .cp-screen-main{gap:20px}
  .cp-page .cp-visual-group--trio .cp-screen-stats{height:60px}
  .cp-page .cp-visual-group--trio .cp-screen-rows{gap:10px}
  .cp-page .cp-visual-group--trio .cp-screen-rows>i{height:17px}
  .cp-page .cp-visual-group--mobile{gap:16px}
  .cp-page .cp-placeholder--mobile{height:370px}
  .cp-page .cp-placeholder--mobile>.cp-mock-screen{width:83%}
  .cp-page .cp-placeholder--mobile .cp-screen-main{gap:16px}
  .cp-page .cp-placeholder--mobile .cp-screen-stats{height:45px;gap:5px}
}
@media(max-width:600px){
  .cp-page .cp-topbar{top:14px;height:40px;padding:0 15px}
  .cp-page .cp-back{font-size:12px;padding:0 2px}
  .cp-page .cp-socials{gap:18px}
  .cp-page .cp-socials>a{font-size:12px}
  .cp-page .cp-hero{height:600px}
  .cp-page .cp-hero-copy{max-width:calc(100% - 40px);padding-top:137px}
  .cp-page .cp-draft-label{margin-bottom:16px;font-size:7px;letter-spacing:.04em}
  .cp-page .cp-hero-copy>h2{font-size:clamp(34px,11.5vw,58px);line-height:1.07;letter-spacing:-.06em}
  .cp-page .cp-hero-meta{gap:7px;margin-top:21px}
  .cp-page .cp-date,.cp-page .cp-live-link{min-height:32px;padding:8px 12px;font-size:10px}
  .cp-page .cp-hero-art{top:350px;width:370px;height:245px;filter:drop-shadow(0 9px 15px var(--cp-hero-shadow))}
  .cp-page .cp-hero-art--left{left:calc(50% - 355px);transform:rotate(-11deg)}
  .cp-page .cp-hero-art--right{left:calc(50% + 15px);transform:rotate(10deg)}
  .cp-page .cp-hero-art .cp-screen-main{gap:13px;padding:6%}
  .cp-page .cp-hero-art .cp-screen-stats{height:43px;gap:7px}
  .cp-page .cp-hero-art .cp-screen-sidebar{gap:12px;padding:18px 9px}
  .cp-page .cp-hero-art .cp-screen-rows{gap:7px}
  .cp-page .cp-hero-art .cp-screen-rows>i{height:12px}
  .cp-page .cp-chapter{margin-top:67px;scroll-margin-top:86px}
  .cp-page .cp-section-heading{grid-template-columns:auto 22px minmax(0,1fr);gap:12px;max-width:calc(100% - 44px)}
  .cp-page .cp-section-number{font-size:29px;letter-spacing:-.06em}
  .cp-page .cp-section-title{font-size:29px;line-height:1.18;letter-spacing:-.05em}
  .cp-page .cp-copy{margin-top:23px}
  .cp-page .cp-copy h4{font-size:18px;margin-bottom:11px}
  .cp-page .cp-copy p{font-size:14px;line-height:1.7;letter-spacing:-.01em}
  .cp-page .cp-facts{gap:18px 14px;margin:25px auto 30px}
  .cp-page .cp-facts dt{font-size:11px}
  .cp-page .cp-facts dd{font-size:12px;line-height:1.7;margin-top:7px}
  .cp-page .cp-visual-group{max-width:calc(100% - 24px);gap:24px;margin-top:31px}
  .cp-page .cp-visual-group--pair,.cp-page .cp-visual-group--trio{grid-template-columns:minmax(0,1fr)}
  .cp-page .cp-figure-label{margin-bottom:9px;padding:0 2px;font-size:11px}
  .cp-page .cp-placeholder,.cp-page .cp-visual-group--pair .cp-placeholder--desktop,.cp-page .cp-visual-group--trio .cp-placeholder--desktop{height:260px}
  .cp-page .cp-placeholder>.cp-mock-screen{width:92%;height:82%}
  .cp-page .cp-window-bar{height:21px;padding:0 8px;gap:3px}
  .cp-page .cp-window-bar>i{width:3px;height:3px}
  .cp-page .cp-window-bar>span{font-size:5px}
  .cp-page .cp-screen-layout{height:calc(100% - 21px);grid-template-columns:18% minmax(0,1fr)}
  .cp-page .cp-screen-sidebar{gap:12px;padding:17px 8px}
  .cp-page .cp-screen-sidebar>i{height:3px}
  .cp-page .cp-screen-main,.cp-page .cp-visual-group--pair .cp-screen-main,.cp-page .cp-visual-group--trio .cp-screen-main{gap:14px;padding:7%}
  .cp-page .cp-screen-heading{gap:6px}
  .cp-page .cp-screen-heading>i{height:7px}
  .cp-page .cp-screen-heading>i:nth-child(2){height:3px}
  .cp-page .cp-screen-stats,.cp-page .cp-visual-group--pair .cp-screen-stats,.cp-page .cp-visual-group--trio .cp-screen-stats{height:43px;gap:7px}
  .cp-page .cp-screen-rows,.cp-page .cp-visual-group--trio .cp-screen-rows{gap:7px}
  .cp-page .cp-screen-rows>i,.cp-page .cp-visual-group--trio .cp-screen-rows>i{height:11px}
  .cp-page .cp-visual-tag{right:8px;bottom:8px;padding:4px 6px;font-size:7px}
  .cp-page .cp-caption{margin-top:8px;padding:0 2px;font-size:9px;line-height:1.6}
  .cp-page .cp-placeholder--explorations{height:250px}
  .cp-page .cp-placeholder--explorations>.cp-mock-screen{width:84%;height:79%}
  .cp-page .cp-visual-group--mobile{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .cp-page .cp-visual-group--mobile .cp-figure:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
  .cp-page .cp-placeholder--mobile{height:320px}
  .cp-page .cp-placeholder--mobile>.cp-mock-screen{width:84%;height:89%;border-width:4px;border-radius:17px}
  .cp-page .cp-placeholder--mobile .cp-window-bar{height:19px;padding:0 6px}
  .cp-page .cp-placeholder--mobile .cp-window-bar>span{font-size:4px}
  .cp-page .cp-placeholder--mobile .cp-screen-layout{height:calc(100% - 19px);grid-template-columns:minmax(0,1fr)}
  .cp-page .cp-placeholder--mobile .cp-screen-main{gap:14px;padding:14% 8%}
  .cp-page .cp-placeholder--mobile .cp-screen-heading>i{height:5px}
  .cp-page .cp-placeholder--mobile .cp-screen-heading>i:nth-child(2){height:3px}
  .cp-page .cp-placeholder--mobile .cp-screen-stats{height:40px;gap:4px}
  .cp-page .cp-placeholder--mobile .cp-screen-rows{gap:10px}
  .cp-page .cp-placeholder--mobile .cp-screen-rows>i{height:14px}
  .cp-page .cp-outro{margin-top:72px;margin-bottom:55px}
  .cp-page .cp-outro>h3{font-size:32px;margin-bottom:17px;letter-spacing:-.055em}
  .cp-page .cp-outro-links{gap:20px;margin-top:22px}
  .cp-page .cp-outro-links>a{font-size:11px}
  .cp-page .cp-next-wrap{max-width:calc(100% - 24px);padding-bottom:108px}
  .cp-page .cp-next{padding:24px;column-gap:15px;row-gap:10px}
  .cp-page .cp-next>span:first-child{font-size:9px}
  .cp-page .cp-next>strong{font-size:28px}
  .cp-page .cp-next>span:last-child{font-size:28px}
  .cp-page .cp-picker{bottom:18px;width:270px}
  .cp-page .cp-picker-toggle{height:45px;font-size:12px;padding:0 18px}
}
@media(max-width:360px){
  .cp-page .cp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-page .cp-facts>div:last-child{grid-column:1/-1}
  .cp-page .cp-section-heading{gap:10px;grid-template-columns:auto 18px minmax(0,1fr)}
  .cp-page .cp-section-title{font-size:26px}
  .cp-page .cp-section-number{font-size:27px}
  .cp-page .cp-placeholder--mobile{height:285px}
}
@media(prefers-reduced-motion:reduce){
  .project-dialog.cp-page{scroll-behavior:auto}
  .cp-page .cp-toc-link,.cp-page .cp-next,.cp-page .cp-picker-chevron{transition:none}
}


/* Real project imagery shares the same editorial layout as the draft slots. */
.cp-page .cp-real-image{display:block;width:100%;height:auto;border:1px solid var(--cp-border);border-radius:4px;background:#080808}
.cp-page .cp-hero-art>.cp-real-image{height:100%;object-fit:contain;border:0;border-radius:8px}
.cp-page .cp-content:has(#case-flowdesk-context) .cp-hero-art>.cp-real-image{object-fit:cover;object-position:center top}
.cp-page .cp-content:has(#case-clap-context) .cp-hero-art--right>.cp-real-image{background:#fff}
.cp-page .cp-facts[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cp-page .cp-facts[data-count="2"]>div:last-child{grid-column:auto}
.cp-page #case-gbedu-live-experiences .cp-real-image{aspect-ratio:1728/1117;object-fit:cover;object-position:center top}

@media(prefers-reduced-motion:no-preference){
  @keyframes case-enter{
    from{opacity:var(--case-enter-opacity,.48);transform:translate(var(--case-enter-x,0px),var(--case-enter-y,16px))}
    to{opacity:1;transform:none}
  }
  .cp-page .cp-hero-copy>*,.cp-page .cp-hero-art>*,
  .cp-page .case-entered{
    animation:case-enter .62s cubic-bezier(.22,1,.36,1) both;
  }
  .cp-page .cp-hero-copy>h2{animation-delay:65ms}
  .cp-page .cp-hero-copy>.cp-hero-meta{animation-delay:130ms}
  .cp-page .cp-hero-art--left{--case-enter-x:-32px}
  .cp-page .cp-hero-art--right{--case-enter-x:32px}
  .cp-page .cp-hero-art>*{
    --case-enter-y:20px;
    animation-duration:.8s;
    animation-delay:80ms;
  }
  .cp-page .cp-figure.case-entered{--case-enter-y:22px}
}