:root {
  --ink: #1d2440;
  --muted: #67708d;
  --cream: #fff9f4;
  --paper: #fffdfb;
  --pink: #ff8fa3;
  --hot-pink: #f25f78;
  --sky: #94d9eb;
  --blue: #5f91da;
  --mint: #9ddfc6;
  --yellow: #ffd166;
  --lavender: #c6b9ee;
  --line: rgba(29, 36, 64, .15);
  --shadow: 0 24px 55px rgba(41, 49, 77, .18);
  font-family: "Trebuchet MS", "Avenir Next", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #fffafe;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fffafe; }
body.modal-open { overflow: hidden; }
body.splash-active { overflow: hidden; }
body.splash-active .site-shell { visibility: hidden; }
body.desk-intro-active { overflow: hidden; }
body.desk-intro-active .site-header { opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none; }

.portfolio-splash { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; overflow: hidden; background: #fffafe; color: var(--hot-pink); isolation: isolate; }
.splash-word { --progress: 0%; margin: 0; color: transparent; font: 900 clamp(72px, 16vw, 250px)/.8 Arial, sans-serif; letter-spacing: -.08em; background: linear-gradient(to top, var(--hot-pink) 0%, var(--hot-pink) var(--progress), var(--pink) var(--progress), var(--pink) 100%); -webkit-background-clip: text; background-clip: text; }
.splash-credit { position: absolute; left: clamp(24px, 6vw, 96px); bottom: clamp(24px, 4vw, 56px); margin: 0; color: var(--hot-pink); font: 700 11px/1.2 "Courier New", monospace; letter-spacing: .14em; }
.splash-mark { display: inline-block; margin-right: 8px; font-size: 8px; }
.splash-progress { position: absolute; right: clamp(22px, 5vw, 82px); bottom: clamp(24px, 4vw, 56px); margin: 0; color: var(--hot-pink); font: 800 clamp(56px, 10vw, 150px)/.8 Arial, sans-serif; letter-spacing: -.08em; }
.splash-progress span { display: inline-block; min-width: 2ch; text-align: right; }
@media (max-width: 650px){.splash-word{font-size:clamp(62px,20vw,130px)}.splash-credit{font-size:9px;letter-spacing:.08em}.splash-progress{font-size:clamp(52px,16vw,96px)}}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }

.site-shell { max-width: 1480px; min-height: 100vh; margin: auto; padding: 0 5vw; overflow: hidden; background: #fffafe; }
.site-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 0; transition: opacity .45s ease, transform .45s ease, visibility .45s ease; }
.wordmark { display: flex; align-items: center; gap: 11px; min-width: 180px; }
.wordmark-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: var(--ink); color: var(--yellow); font: 800 18px/1 Georgia, serif; transform: rotate(-7deg); }
.wordmark strong { display: block; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; line-height: 1.2; }
.wordmark small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 24px; }
.nav-links a { position: relative; padding: 8px 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 1px; width: 0; height: 2px; background: var(--hot-pink); transition: width .25s ease; }
.nav-links a:hover::after, .nav-links a:focus-visible::after { width: 100%; }
.nav-links span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.availability { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #45c38f; box-shadow: 0 0 0 4px rgba(69,195,143,.16); }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 40px; align-items: end; padding: clamp(78px, 10vw, 145px) 5% clamp(80px, 9vw, 135px); }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.eyebrow span { display: inline-block; width: 24px; height: 2px; background: var(--hot-pink); }
h1, h2, blockquote { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
h1 { max-width: 700px; margin: 0; font-size: clamp(47px, 7vw, 102px); line-height: .94; letter-spacing: -.045em; }
h1 em, h2 em, blockquote em { color: var(--hot-pink); font-style: normal; }
.intro-lede { max-width: 420px; margin: 28px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.intro-actions { display: flex; align-items: center; gap: 22px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 13px; font-size: 11px; font-weight: 800; letter-spacing: .04em; transition: transform .25s ease, box-shadow .25s ease; }
.button-primary { color: #fff; background: var(--ink); box-shadow: 0 8px 0 var(--sky); }
.button-primary:hover, .button-primary:focus-visible { transform: translateY(-3px); box-shadow: 0 11px 0 var(--sky); }
.button-primary span { color: var(--yellow); font-size: 18px; line-height: .5; }
.text-button { padding: 10px 0; color: var(--ink); background: none; font-size: 11px; font-weight: 800; border-bottom: 1px solid var(--ink); }
.text-button span { margin-left: 5px; color: var(--hot-pink); font-size: 16px; }
.discipline-list { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 34px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.discipline-list span::before { content: "✦"; margin-right: 7px; color: var(--blue); }
.intro-note { position: relative; max-width: 210px; padding: 22px 24px 25px; justify-self: end; background: var(--yellow); transform: rotate(5deg); box-shadow: 11px 12px 0 var(--pink); }
.intro-note::before { content: ""; position: absolute; left: 48%; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--pink); box-shadow: inset -3px -3px 0 rgba(0,0,0,.08); }
.intro-note p { margin: 0 0 19px; color: rgba(29,36,64,.65); font: 700 10px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.intro-note strong { display: block; font: 700 27px/.95 Georgia, serif; letter-spacing: -.03em; }
.intro-note small { display: block; margin-top: 19px; color: rgba(29,36,64,.72); font-size: 11px; line-height: 1.55; }

.desk-section { min-height: calc(100vh - 92px); display: flex; align-items: flex-start; padding: 20px 0 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; padding: 0 5% 26px; }
.section-heading .eyebrow { margin-bottom: 12px; }
h2 { margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: .95; letter-spacing: -.05em; }
.section-hint { margin: 0 0 4px; color: var(--muted); font-size: 10px; letter-spacing: .05em; }
.cursor-icon { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 5px; color: var(--hot-pink); border: 1px solid var(--hot-pink); border-radius: 50%; }

.scene-wrap { position: relative; width: 100%; padding: 0; }
.desktop-scene { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1.52; min-height: 490px; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.desktop-scene::before { content: ""; position: absolute; inset: 0; z-index: -3; background: transparent; }
.desktop-scene::after { display: none; }
#three-scene { position: absolute; inset: 0; z-index: 25; pointer-events: auto; }
#three-scene canvas { display: block; width: 100%; height: 100%; }
.desk-mosaic { --mosaic-cols:5; --mosaic-rows:3; --mosaic-tile:25vw; position:fixed; inset:0; z-index:450; display:grid; grid-template-columns:repeat(var(--mosaic-cols),var(--mosaic-tile)); grid-template-rows:repeat(var(--mosaic-rows),var(--mosaic-tile)); justify-content:center; align-content:center; pointer-events:none; overflow:hidden; visibility:visible; opacity:1; }
.desk-mosaic.is-hidden { visibility:hidden; opacity:0!important; }
.desk-mosaic span { display:block; width:100%; height:100%; aspect-ratio:1; background:#ffd5df; transform:scale(1.02); transform-origin:center; will-change:transform,opacity; }
.desktop-scene > :not(#three-scene) { visibility: hidden; opacity: 0; pointer-events: none; }
.desktop-scene.three-ready > :not(#three-scene) { opacity: 0; pointer-events: none; }
.scene-shadow { display: none; }
.scene-window { position: absolute; left: 3%; top: 7%; width: 29%; height: 55%; overflow: hidden; border: 11px solid #f9eee8; border-bottom-width: 15px; background: #caeff4; box-shadow: inset 0 0 0 2px rgba(29,36,64,.12); }
.window-sky { position: absolute; inset: 0; background: linear-gradient(#b9eaf1 15%, #f8d3c7 100%); }
.window-mountain { position: absolute; bottom: -10%; width: 125%; height: 55%; transform: rotate(-7deg); clip-path: polygon(0 100%, 34% 21%, 56% 53%, 71% 14%, 100% 100%); }
.window-mountain-back { left: -18%; background: #9bbfdb; }
.window-mountain-front { left: 11%; bottom: -20%; background: #7da4cb; opacity: .8; }
.window-spark { position: absolute; color: #fff; font-size: 19px; text-shadow: 0 2px 0 rgba(29,36,64,.12); }
.spark-one { top: 15%; left: 13%; }.spark-two { top: 34%; right: 12%; }
.wall-shelf { position: absolute; z-index: 1; right: 4%; height: 12px; width: 22%; border-radius: 6px; background: #7c5b59; box-shadow: 0 8px 0 rgba(29,36,64,.12); }
.shelf-one { top: 10%; }.shelf-two { top: 31%; width: 17%; }
.wall-shelf span { display: inline-block; width: 7%; height: 34px; margin: -22px 5% 0; vertical-align: top; border-radius: 2px 2px 0 0; background: var(--yellow); }.wall-shelf span:nth-child(2){background:var(--blue)}.wall-shelf span:nth-child(3){background:var(--pink)}
.poster { position: absolute; z-index: 1; display: grid; align-content: center; width: 12%; aspect-ratio: .72; padding: 10px; color: var(--ink); box-shadow: 4px 7px 0 rgba(29,36,64,.13); transform: rotate(4deg); }
.poster small { font: 700 7px/1 "Courier New", monospace; letter-spacing: .1em; }.poster strong { margin-top: 7px; font: 700 17px/.9 Georgia,serif; }.poster-cat { top: 11%; left: 38%; background: #f3c9bd; }.poster-cat span { position: absolute; right: 10px; bottom: 10px; color: var(--hot-pink); font-size: 20px; }.poster-anatomy { top: 9%; right: 19%; width: 11%; background: #efdfc4; transform: rotate(-4deg); }.poster-anatomy strong { font-size: 12px; line-height: 1.02; }
.plant { position: absolute; z-index: 2; right: 1.8%; bottom: 16%; width: 12%; height: 43%; }.plant-pot { position:absolute; bottom:0; left:19%; width:62%; height:34%; border-radius: 8px 8px 23px 23px; background: var(--pink); box-shadow: inset 0 -9px 0 rgba(29,36,64,.12); }.plant i { position:absolute; bottom:25%; left:44%; width:21%; height:56%; border-radius: 100% 0 100% 0; background: var(--mint); transform-origin: bottom; transform: rotate(-30deg); }.plant i:nth-of-type(2){left:18%;height:48%;transform:rotate(-62deg);background:#79cdb5}.plant i:nth-of-type(3){left:57%;height:57%;transform:rotate(31deg);background:#67b89f}.plant i:nth-of-type(4){left:42%;height:68%;transform:rotate(4deg);background:#83d3be}
.desk-board { position: absolute; z-index: 3; left: -4%; right: -4%; bottom: 0; height: 20%; background: #be795b; border-top: 9px solid #e2a07e; box-shadow: 0 -5px 0 rgba(29,36,64,.1); }

.scene-item { position: absolute; z-index: 10; padding: 0; background: transparent; transform-origin: center bottom; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.scene-item::before { content: ""; position: absolute; inset: -12px; z-index: -1; border: 2px solid transparent; border-radius: 18px; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.scene-item:hover, .scene-item:focus-visible { z-index: 30; transform: translateY(-9px) scale(1.04); filter: drop-shadow(0 13px 8px rgba(29,36,64,.18)); outline: none; }
.scene-item:hover::before, .scene-item:focus-visible::before { border-color: var(--hot-pink); background: rgba(255,255,255,.12); box-shadow: 0 0 0 4px rgba(255,143,163,.15); }
.object-tag { position: absolute; left: 50%; top: -24px; z-index: 40; padding: 4px 7px; color: var(--ink); background: var(--yellow); font: 800 8px/1 "Courier New", monospace; letter-spacing: .08em; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px) rotate(-3deg); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.scene-item:hover .object-tag, .scene-item:focus-visible .object-tag { opacity: 1; transform: translate(-50%, 0) rotate(-3deg); }
.monitor-item { left: 31%; bottom: 24%; width: 39%; }.monitor-frame { display: block; padding: 10px 10px 8px; border: 5px solid #5174ad; border-radius: 11px; background: #87b6de; box-shadow: 9px 10px 0 #405d91; transform: perspective(500px) rotateX(2deg); }.monitor-screen { position: relative; display:block; height:0; padding-bottom:56%; overflow:hidden; border: 3px solid #17213e; border-radius: 4px; background: #c2eef1; text-align:left; }.screen-topline { position:absolute; top:7%;left:5%;right:5%;display:flex;align-items:center;gap:4px;color:var(--ink);font:700 7px/1 "Courier New",monospace; }.screen-topline i{width:5px;height:5px;border-radius:50%;background:var(--hot-pink)}.screen-topline i:nth-child(2){background:var(--yellow)}.screen-topline i:nth-child(3){background:var(--mint)}.screen-topline b{margin-left:7px;font-size:7px;letter-spacing:.12em}.screen-topline small{margin-left:auto}.screen-hero{position:absolute;left:8%;top:22%;font:700 clamp(19px,2.7vw,44px)/.84 Georgia,serif;letter-spacing:-.08em}.screen-hero em{color:var(--hot-pink);font-style:normal}.screen-bars{position:absolute;right:8%;bottom:13%;display:flex;align-items:end;gap:4px}.screen-bars i{display:block;width:6px;height:17px;background:var(--pink)}.screen-bars i:nth-child(2){height:29px;background:var(--blue)}.screen-bars i:nth-child(3){height:23px;background:var(--yellow)}.screen-card{position:absolute;bottom:-8%;width:21%;height:27%;border:2px solid var(--ink);transform:rotate(-7deg)}.card-pink{left:9%;background:var(--pink)}.card-blue{left:26%;background:var(--yellow);transform:rotate(8deg)}.monitor-stand{display:block;width:21%;height:20px;margin:10px auto 0;background:#5072a7;border-radius:0 0 13px 13px;box-shadow:0 5px 0 #405d91}.monitor-stand::after{content:"";display:block;width:150%;height:7px;margin:17px 0 0 -25%;border-radius:50%;background:#405d91}
.tablet-item { left: 15%; bottom: 17%; width: 19%; transform: rotate(-12deg); }.tablet-device{display:block;padding:7px;border:5px solid #55557f;border-radius:11px;background:#a5a7da;box-shadow:7px 7px 0 #41466f}.tablet-screen{display:block;aspect-ratio:1.2;background:#f9dfcf;border:2px solid #343a65;position:relative;overflow:hidden}.tablet-screen b{position:absolute;left:13%;top:14%;font:700 15px Georgia,serif}.tablet-screen i{position:absolute;left:13%;height:5px;width:56%;background:var(--hot-pink);top:48%}.tablet-screen i:nth-of-type(2){top:60%;width:39%;background:var(--blue)}.tablet-screen span{position:absolute;right:9%;bottom:9%;font:700 20px Georgia,serif;color:var(--blue)}
.poster-stack-item { left: 5%; bottom: 15%; width: 17%; height: 35%; transform: rotate(5deg); }.mini-poster{position:absolute;display:grid;align-content:space-between;width:71%;height:86%;padding:10px;color:var(--ink);text-align:left;box-shadow:5px 6px 0 rgba(29,36,64,.17)}.mini-poster b{font:700 21px Georgia,serif}.mini-poster small{font:700 8px/1.1 "Courier New",monospace}.poster-lilac{left:16%;top:7%;background:var(--lavender);transform:rotate(-12deg)}.poster-yellow{left:2%;top:17%;background:var(--yellow);transform:rotate(7deg)}.poster-coral{left:25%;top:1%;background:var(--pink);transform:rotate(17deg)}
.folder-item { right: 14%; bottom: 16%; width: 16%; height: 31%; transform: rotate(7deg); }.folder-back{position:absolute;inset:5% 0 0;background:var(--blue);border-radius:8px;box-shadow:7px 8px 0 rgba(29,36,64,.19)}.folder-paper{position:absolute;inset:0 8% 5% 8%;display:grid;align-content:space-between;padding:13px;background:#fff5dd;border:2px solid var(--ink);text-align:left;transform:rotate(-6deg);box-shadow:5px 6px 0 rgba(29,36,64,.12)}.folder-paper b{font:700 20px/.9 Georgia,serif}.folder-paper small{font:700 7px/1.3 "Courier New",monospace}
.typewriter-item { left: 37%; bottom: 12%; width: 18%; transform: rotate(-3deg); }.typewriter-body{position:relative;display:block;width:100%;height:54%;margin-top:32%;border:4px solid #543d62;border-radius:8px 8px 12px 12px;background:#8aaed1;box-shadow:7px 8px 0 #425579}.typewriter-body::before{content:"";position:absolute;left:-5%;right:-5%;top:-15%;height:18%;border:4px solid #543d62;border-bottom:0;border-radius:8px 8px 0 0;background:#f0b1b2}.typewriter-body::after{content:"";position:absolute;left:8%;right:8%;top:13%;height:22%;border-radius:4px;background:#536991}.typewriter-body i{position:absolute;left:12%;right:12%;bottom:17%;height:10%;background:var(--cream);border-radius:4px;box-shadow:0 0 0 2px rgba(29,36,64,.18)}.typewriter-body b{position:absolute;right:10%;bottom:40%;width:10%;height:11%;border-radius:50%;background:var(--yellow)}.typewriter-body small{position:absolute;left:10%;bottom:39%;font:700 7px "Courier New",monospace;color:var(--ink)}.typewriter-paper{position:absolute;left:29%;top:0;display:grid;place-items:center;width:42%;height:46%;padding:7px;color:var(--ink);background:#fff4de;border:2px solid #543d62;box-shadow:4px 5px 0 rgba(29,36,64,.18);font:700 9px/.9 "Courier New",monospace;transform:rotate(-2deg)}.typewriter-paper em{color:var(--hot-pink);font:700 15px Georgia,serif;font-style:normal}
.sticker-item { display: none !important; }
.keyboard{position:absolute;z-index:9;left:30%;bottom:9%;width:37%;height:10%;display:flex;align-content:center;justify-content:center;gap:2%;padding:6px 8px;border:4px solid #4e659c;border-radius:7px 7px 15px 15px;background:#86a6d1;transform:perspective(300px) rotateX(25deg);box-shadow:6px 5px 0 rgba(29,36,64,.21)}.keyboard span{flex:1;height:34%;border-radius:2px;background:#f1d4d1}.keyboard span:nth-child(3n){background:#d5c9ee}.keyboard span:nth-child(4n){background:#b7e1db}
.mug{position:absolute;z-index:11;left:22%;bottom:11%;width:8%;aspect-ratio:.9;background:#f7e3bc;border:4px solid #543d62;border-radius:8px 8px 15px 15px;box-shadow:5px 6px 0 rgba(29,36,64,.14);display:grid;place-items:center;color:var(--hot-pink);font-size:22px;transform:rotate(-6deg)}.mug::after{content:"";position:absolute;right:-40%;top:25%;width:44%;height:35%;border:4px solid #543d62;border-left:0;border-radius:0 14px 14px 0}.pencil-cup{position:absolute;z-index:11;right:29%;bottom:11%;width:7%;height:18%;background:#ffd0b9;border:4px solid #543d62;border-radius:5px 5px 12px 12px;transform:rotate(8deg);}.pencil-cup i{position:absolute;bottom:76%;left:16%;width:9%;height:50%;background:var(--blue);transform:rotate(-12deg);}.pencil-cup i:nth-child(2){left:45%;height:64%;background:var(--yellow);transform:rotate(6deg)}.pencil-cup i:nth-child(3){left:73%;height:58%;background:var(--hot-pink);transform:rotate(15deg)}.pencil-cup span{position:absolute;left:15%;right:15%;bottom:13%;height:5px;background:var(--hot-pink)}
.scene-caption{position:absolute;z-index:12;left:4%;bottom:6%;margin:0;color:rgba(255,255,255,.72);font:700 9px "Courier New",monospace;letter-spacing:.15em}.scene-caption span{margin-left:10px;color:var(--yellow);font-size:16px}.scene-footer{display:flex;align-items:center;gap:17px;padding:18px 5%;color:var(--muted);font:700 9px "Courier New",monospace;letter-spacing:.12em}.footer-line{width:100%;height:1px;background:var(--line)}

.manifesto { padding: clamp(100px, 13vw, 190px) 9%; text-align: center; }.manifesto .eyebrow{justify-content:center}.manifesto blockquote{margin:0;font-size:clamp(30px,4.6vw,64px);line-height:1.05;letter-spacing:-.04em}.manifesto-sign{margin:28px 0 0;color:var(--muted);font:11px "Courier New",monospace;letter-spacing:.06em}
.site-footer{display:flex;justify-content:space-between;gap:20px;padding:22px 0 28px;border-top:1px solid var(--line);color:var(--muted);font:700 9px "Courier New",monospace;letter-spacing:.11em}.site-footer a{color:var(--ink)}

.modal-backdrop{position:fixed;inset:0;z-index:90;background:rgba(29,36,64,.58);backdrop-filter:blur(6px)}.project-modal{position:fixed;z-index:100;left:50%;top:50%;display:grid;grid-template-columns:44% 56%;width:min(760px,calc(100vw - 32px));overflow:hidden;border:2px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:0 30px 80px rgba(29,36,64,.35);transform:translate(-50%,-47%);animation:modal-in .35s cubic-bezier(.2,.8,.2,1) forwards}.project-modal[hidden],.modal-backdrop[hidden]{display:none}@keyframes modal-in{to{transform:translate(-50%,-50%)}}.modal-close{position:absolute;z-index:2;right:13px;top:10px;width:34px;height:34px;border-radius:50%;color:var(--ink);background:rgba(255,255,255,.7);font-size:25px;line-height:1}.modal-close:hover{background:var(--yellow)}.modal-art{position:relative;min-height:320px;overflow:hidden;background:#caeff4}.modal-art::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#ffd3cb,#94d9eb)}.modal-art-label{position:absolute;z-index:1;left:22px;top:22px;color:var(--ink);font:800 10px "Courier New",monospace;letter-spacing:.12em}.modal-art-shape{position:absolute;left:16%;right:12%;top:18%;bottom:16%;border:5px solid var(--ink);border-radius:12px;background:var(--yellow);box-shadow:17px 17px 0 rgba(29,36,64,.16);transform:rotate(-7deg)}.modal-art[data-art="ui-grid"] .modal-art-shape{background:repeating-linear-gradient(90deg,var(--pink) 0 18px,#f8ded4 18px 26px);}.modal-art[data-art="three-orbit"] .modal-art-shape{border-radius:50%;background:var(--lavender);box-shadow:17px 17px 0 var(--blue)}.modal-art[data-art="poster-grid"] .modal-art-shape{background:var(--hot-pink);clip-path:polygon(0 0,100% 11%,88% 100%,6% 88%)}.modal-art[data-art="brand-kit"] .modal-art-shape{background:#fff1d1;transform:rotate(6deg)}.modal-art[data-art="profile"] .modal-art-shape{background:var(--mint);border-radius:50%}.modal-art[data-art="contact-card"] .modal-art-shape{background:var(--yellow);transform:rotate(10deg)}.modal-content{padding:46px 40px 38px}.modal-kicker{margin:0 0 14px;color:var(--hot-pink);font:800 10px "Courier New",monospace;letter-spacing:.14em}.modal-content h2{margin:0;font-size:clamp(36px,4vw,54px)}.modal-summary{margin:20px 0 0;color:var(--muted);font-size:14px;line-height:1.7}.modal-meta{display:flex;flex-wrap:wrap;gap:10px 20px;margin:25px 0;color:var(--ink);font:700 10px "Courier New",monospace;letter-spacing:.04em}.modal-meta span::before{content:"✦ ";color:var(--hot-pink)}.modal-link{display:inline-flex;align-items:center;gap:10px;margin-top:3px;padding:12px 15px;border-radius:10px;color:#fff;background:var(--ink);font-size:11px;font-weight:800}.modal-link span{color:var(--yellow);font-size:17px}

@media (max-width: 900px){.site-header{min-height:74px}.nav-links{gap:13px}.nav-links a{font-size:9px}.nav-links span{font-size:8px}.wordmark strong{font-size:9px}.wordmark small{font-size:8px}.availability{display:none}.desk-section{min-height:calc(100vh - 74px)}.scene-wrap{padding:0}.desktop-scene{min-height:430px}.object-tag{font-size:7px}.modal-content{padding:38px 28px 30px}}
@media (max-width: 650px){.site-shell{padding:0 18px}.site-header{align-items:flex-start;padding:17px 0 14px}.wordmark-mark{width:31px;height:31px}.wordmark strong{font-size:10px}.wordmark small{font-size:8px}.nav-links{display:none}.desk-section{min-height:calc(100vh - 63px);padding:12px 0 18px}.desktop-scene{min-height:0;aspect-ratio:.92}.scene-window{left:4%;top:6%;width:36%;height:44%;border-width:7px;border-bottom-width:9px}.poster-cat{left:42%;top:9%;width:15%}.poster-anatomy{right:17%;top:8%;width:15%}.plant{right:1%;bottom:16%;width:16%;height:38%}.monitor-item{left:24%;bottom:25%;width:56%}.tablet-item{left:6%;bottom:17%;width:25%}.poster-stack-item{left:2%;bottom:14%;width:21%;height:32%}.folder-item{right:11%;bottom:14%;width:22%;height:29%}.typewriter-item{left:38%;bottom:12%;width:22%}.sticker-item{right:3%;bottom:35%;width:17%}.keyboard{left:22%;bottom:8%;width:53%;height:10%}.mug{left:16%;bottom:10%;width:10%}.pencil-cup{right:27%;bottom:10%;width:9%}.scene-caption{font-size:6px;bottom:5%}.project-modal{display:block;max-height:calc(100vh - 40px);overflow:auto}.modal-art{min-height:190px}.modal-content{padding:28px 23px 25px}.modal-content h2{font-size:41px}.modal-summary{font-size:13px}.modal-close{top:8px;right:8px}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.scene-item,.button,.nav-links a::after,.object-tag{transition:none}.project-modal{animation:none}}

/* Homepage viewport fit: keep the navigation visible and scale the complete
   desk to the remaining viewport height, so desktop fullscreen needs no
   vertical scrolling. */
@media (min-width:651px){
  .site-shell{height:100vh;min-height:0}
  .desk-section{height:calc(100vh - 92px);min-height:0;padding:0;align-items:center}
  .scene-wrap{height:100%;display:flex;align-items:center;justify-content:center}
  .desktop-scene{width:min(100%,calc((100vh - 92px) * 1.52));height:auto;min-height:0;aspect-ratio:1.52}
}
@media (min-width:651px) and (max-width:900px){
  .desk-section{height:calc(100vh - 74px)}
  .desktop-scene{width:min(100%,calc((100vh - 74px) * 1.52))}
}
@media (max-width:650px){
  .site-shell{height:100vh;min-height:0}
  .desk-section{height:calc(100vh - 74px);min-height:0;padding:0;align-items:center}
  .scene-wrap{height:100%;display:flex;align-items:center;justify-content:center}
  .desktop-scene{width:min(100%,calc((100vh - 74px) * .92));height:auto;min-height:0;aspect-ratio:.92}
}
.resume-open{overflow:hidden}.resume-backdrop{position:fixed;inset:0;z-index:120;background:rgba(29,36,64,.48);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.resume-modal{position:fixed;z-index:130;inset:0;display:grid;place-items:center;padding:32px;pointer-events:none}.resume-modal[hidden],.resume-backdrop[hidden]{display:none}.resume-image{display:block;max-width:min(88vw,920px);max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 24px 70px rgba(16,22,42,.32);pointer-events:auto}.resume-close{position:fixed;z-index:131;top:22px;right:26px;width:42px;height:42px;border:2px solid var(--ink);border-radius:50%;color:var(--ink);background:rgba(255,255,255,.88);font-size:27px;line-height:1;pointer-events:auto}.resume-close:hover{background:var(--yellow)}

/* Resume zoom surface: the image stays centered while the viewport scrolls at larger scales. */
.resume-viewport{width:min(90vw,1100px);height:min(88vh,900px);display:grid;place-items:center;overflow:hidden;pointer-events:auto;overscroll-behavior:contain;cursor:grab;touch-action:none;}
.resume-viewport.is-dragging{cursor:grabbing;}
.resume-image{max-width:min(88vw,1100px);max-height:82vh;width:auto;height:auto;object-fit:contain;transform-origin:center center;transition:transform 160ms ease;box-shadow:none;user-select:none;-webkit-user-drag:none;touch-action:none;}
.resume-toolbar{position:fixed;z-index:132;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid rgba(29,36,64,.18);border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(16,22,42,.16);pointer-events:auto;}
.resume-toolbar button{min-width:38px;height:32px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:700 14px/1 inherit;cursor:pointer;}
.resume-toolbar button:hover:not(:disabled){background:var(--yellow)}
.resume-toolbar button:disabled{opacity:.35;cursor:not-allowed}
@media (max-width:640px){.resume-modal{padding:16px}.resume-viewport{width:94vw;height:82vh}.resume-toolbar{bottom:14px}.resume-close{top:14px;right:14px}}

/* The machine project uses a red/black art-direction language inspired by the supplied reference. */
.three-d-title-wrap>p{margin:0 0 22px;color:#d3f451;font:700 10px "Courier New",monospace;letter-spacing:.18em}.machine-hero{position:relative;max-width:1400px;height:min(70vh,760px);min-height:430px;margin:0 auto;border-left:1px solid rgba(243,240,232,.2);border-right:1px solid rgba(243,240,232,.2);overflow:hidden;background:radial-gradient(ellipse at 52% 50%,rgba(255,48,43,.95) 0 8%,rgba(104,11,21,.9) 23%,transparent 56%),linear-gradient(160deg,#7b0f1f 0%,#230911 56%,#050509 100%)}.machine-hero::before,.machine-hero::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(243,240,232,.25);left:22%;box-shadow:calc(100vw * .27) 0 0 rgba(243,240,232,.25),calc(100vw * .54) 0 0 rgba(243,240,232,.25)}.machine-hero::after{inset:11% 0 auto;height:1px;width:100%;box-shadow:none;background:rgba(243,240,232,.2)}.machine-orb{position:absolute;left:50%;top:50%;width:min(52vw,620px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-18deg);border-radius:49% 51% 42% 58%;background:radial-gradient(circle at 36% 34%,#ffddd0 0 2%,#ff4c41 4%,#8b0d1b 23%,#160811 60%,#030307 76%);box-shadow:0 0 90px rgba(255,48,43,.42),inset 36px -20px 80px rgba(0,0,0,.8)}.machine-orb::before{content:"";position:absolute;inset:10% -11% 50% 8%;border:18px solid rgba(255,60,48,.64);border-left-color:transparent;border-radius:60% 35% 50% 60%;transform:rotate(-19deg);filter:blur(3px)}.machine-orb::after{content:"";position:absolute;inset:-4%;border:1px solid rgba(255,226,195,.58);border-radius:48% 52% 45% 55%;transform:rotate(12deg)}.machine-orb i,.machine-orb b{position:absolute;display:block;border-radius:50%;background:#f7e4cb;filter:blur(1px)}.machine-orb i{width:8%;height:8%;left:36%;top:29%;box-shadow:0 0 32px 14px rgba(255,71,48,.8)}.machine-orb b{width:4%;height:4%;left:61%;top:57%;background:#ff2c35;box-shadow:0 0 25px 8px #ff2c35}.machine-side{position:absolute;z-index:2;margin:0;color:#f3f0e8;font:700 clamp(12px,1.4vw,18px)/1.25 Arial,sans-serif}.machine-side-left{left:4%;top:31%}.machine-side-right{right:4%;bottom:14%;text-align:right;color:#d3f451}.machine-stamp{position:absolute;z-index:2;left:4%;bottom:11%;color:#d3f451;font:700 11px/1.2 "Courier New",monospace;letter-spacing:.12em}.machine-manifesto{display:grid;grid-template-columns:1fr minmax(300px,620px);gap:8vw;max-width:1200px;margin:0 auto;padding:clamp(80px,12vw,180px) 0}.machine-manifesto .three-d-kicker{align-self:start}.machine-manifesto h2{grid-column:2;margin:0;font:500 clamp(44px,7vw,106px)/.86 Arial,sans-serif;letter-spacing:-.08em}.machine-manifesto h2 em{color:#ff3f42;font-family:Georgia,serif;font-weight:400}.machine-manifesto>p:last-child{grid-column:2;max-width:500px;margin:0;color:rgba(243,240,232,.72);font:18px/1.5 Georgia,serif}.machine-columns{display:grid;grid-template-columns:repeat(3,1fr);max-width:1200px;margin:0 auto;padding:55px 0 130px;border-top:1px solid rgba(243,240,232,.28);border-bottom:1px solid rgba(243,240,232,.28)}.machine-columns article{padding:0 28px;border-left:1px solid rgba(243,240,232,.25)}.machine-columns article:first-child{border-left:0;padding-left:0}.machine-columns span{color:#d3f451;font:700 13px "Courier New",monospace}.machine-columns h2{margin:30px 0 13px;font:500 clamp(27px,3vw,48px)/.9 Arial,sans-serif;letter-spacing:-.06em}.machine-columns p{max-width:280px;margin:0;color:rgba(243,240,232,.65);font:15px/1.5 Georgia,serif}.machine-image-stage{max-width:1200px;margin:0 auto;padding:130px 0}.machine-image-placeholder{position:relative;min-height:clamp(300px,55vw,680px);overflow:hidden;background:linear-gradient(120deg,#18070d,#a11125 47%,#07070b 48%,#1c0d16);display:grid;place-items:end start;padding:25px}.machine-image-placeholder::before{content:"";position:absolute;width:65%;height:120%;right:-10%;top:-10%;background:radial-gradient(ellipse,#ff5c46 0,#7d1021 33%,transparent 67%);transform:rotate(-20deg);mix-blend-mode:screen}.machine-image-placeholder::after{content:"";position:absolute;inset:8%;border:1px solid rgba(243,240,232,.38)}.machine-image-placeholder span{position:relative;z-index:2;color:#f3f0e8;font:700 11px "Courier New",monospace;letter-spacing:.13em}.machine-image-stage>p{margin:14px 0 0;color:#d3f451;font:700 10px "Courier New",monospace;letter-spacing:.18em}.three-d-card{display:none}
@media (max-width:760px){.three-d-title-wrap>p{font-size:8px}.machine-hero{min-height:500px}.machine-orb{width:90vw}.machine-manifesto{display:block;padding:90px 0}.machine-manifesto h2{margin:30px 0}.machine-manifesto>p:last-child{font-size:16px}.machine-columns{display:block;padding:0 0 60px}.machine-columns article{padding:38px 0;border-left:0;border-top:1px solid rgba(243,240,232,.25)}.machine-columns article:first-child{border-top:0}.machine-image-stage{padding:80px 0}.three-d-footer{font-size:8px}}

/* Project content sequence from THE VERY PULSE OF THE MACHINE manuscript. */
.machine-hero-art{position:absolute;z-index:1;right:5%;top:7%;height:86%;max-width:44%;object-fit:contain;mix-blend-mode:screen;filter:contrast(1.14) saturate(1.08);opacity:.92}.machine-hero .machine-orb{z-index:0;left:43%;opacity:.58}.machine-hero .machine-side,.machine-hero .machine-stamp{z-index:3}.machine-inspiration,.machine-sketch,.machine-materials,.machine-process{max-width:1200px;margin:0 auto;padding:clamp(80px,11vw,150px) 0}.machine-section-label{margin:0 0 20px;color:#d3f451;font:700 10px "Courier New",monospace;letter-spacing:.18em}.machine-inspiration{display:grid;grid-template-columns:24% 1fr;gap:4vw;align-items:start;border-top:1px solid rgba(243,240,232,.28)}.machine-inspiration img{display:block;width:100%;max-height:760px;object-fit:cover;filter:contrast(1.06) saturate(.82)}.machine-columns article img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;margin-top:28px;filter:contrast(1.05) saturate(.8);transition:transform .35s ease,filter .35s ease}.machine-columns article:hover img{transform:translateY(-8px);filter:contrast(1.1) saturate(1.05)}.machine-sketch{display:grid;grid-template-columns:24% 1fr;gap:4vw;background:linear-gradient(180deg,#f0eee8,#fff);color:#141318;padding-left:max(4vw,calc((100vw - 1200px)/2));padding-right:max(4vw,calc((100vw - 1200px)/2));max-width:none}.machine-sketch .machine-section-label{color:#251b22}.machine-sketch img{display:block;width:100%;max-height:920px;object-fit:contain;mix-blend-mode:multiply}.machine-materials{display:grid;grid-template-columns:24% 1fr;gap:4vw}.machine-empty-materials{min-height:360px;border:1px solid rgba(243,240,232,.35);display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 12px)}.machine-empty-materials span{color:rgba(243,240,232,.45);font:700 10px "Courier New",monospace;letter-spacing:.16em}.machine-process{border-top:1px solid rgba(243,240,232,.28)}.machine-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.machine-process figure{margin:0}.machine-process img{display:block;width:100%;height:430px;object-fit:cover;background:#141419}.machine-process figcaption{margin-top:11px;color:#d3f451;font:700 10px "Courier New",monospace;letter-spacing:.13em}.machine-end-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.machine-end-pair img{width:100%;height:min(60vw,690px);object-fit:cover;filter:contrast(1.08) saturate(.9)}
@media (max-width:760px){.machine-hero-art{right:0;top:16%;max-width:78%;height:66%;opacity:.78}.machine-inspiration,.machine-sketch,.machine-materials{display:block;padding-left:22px;padding-right:22px}.machine-inspiration .machine-section-label,.machine-sketch .machine-section-label,.machine-materials .machine-section-label{margin-bottom:28px}.machine-process{padding-left:0;padding-right:0}.machine-process>.machine-section-label{padding:0 22px}.machine-process-grid{display:block}.machine-process figure{margin:0 0 36px}.machine-process img{height:auto;max-height:none}.machine-end-pair{display:block}.machine-end-pair img{height:auto;margin-bottom:20px}.machine-empty-materials{min-height:260px}}

/* Final art direction: the supplied transparent object is the hero; the poster belongs beside the concept. */
.three-d-view{background:#09090c}.three-d-index,.three-d-title-wrap>p,.three-d-kicker,.machine-stamp,.machine-side-right,.machine-section-label,.machine-process figcaption,.machine-image-stage>p{color:#ff4650}.three-d-header h1{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-weight:800;letter-spacing:-.075em}.three-d-header h1 em{color:#f4f1e9;font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-style:normal}.three-d-header h1 strong{color:#ff4650;font-weight:900}.machine-hero{background:radial-gradient(ellipse at 49% 48%,rgba(255,55,53,.34),transparent 41%),linear-gradient(160deg,#50111b 0%,#170910 52%,#050509 100%)}.machine-hero-art{mix-blend-mode:screen;filter:contrast(1.2) saturate(.9);opacity:.98}.machine-manifesto{grid-template-columns:18% minmax(260px,1fr) minmax(250px,34%);gap:4vw;align-items:start}.machine-manifesto h2{grid-column:2;grid-row:1;margin:0;color:#f4f1e9;font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-weight:800}.machine-manifesto>p:last-child{grid-column:2;grid-row:2;color:rgba(244,241,233,.72)}.machine-concept-art{grid-column:3;grid-row:1 / span 2;position:relative;margin-top:6px}.machine-concept-art img{display:block;width:100%;height:clamp(320px,42vw,620px);object-fit:cover;filter:contrast(1.08) saturate(.9)}.machine-concept-art span{display:block;margin-top:10px;color:#ff4650;font:700 10px "Courier New",monospace;letter-spacing:.14em}.machine-manifesto h2 em{color:#ff4650;font-family:Georgia,serif}.machine-columns h2,.machine-manifesto h2{letter-spacing:-.065em}.machine-columns article p,.machine-manifesto>p:last-child{font-family:Arial,"Microsoft YaHei",sans-serif}.machine-empty-materials{border-color:rgba(255,70,80,.4);background:repeating-linear-gradient(135deg,rgba(255,70,80,.07) 0 1px,transparent 1px 12px)}
@media (max-width:760px){.machine-manifesto{display:block}.machine-concept-art{margin-top:42px}.machine-concept-art img{height:auto;max-height:none}.three-d-header h1{font-size:clamp(42px,14vw,86px)}}

/* Keep the machine project typography in the requested white/red palette. */
.three-d-view .machine-columns span,
.three-d-view .machine-section-label,
.three-d-view .machine-process figcaption,
.three-d-view .machine-image-stage>p,
.three-d-view .three-d-title-wrap>p,
.three-d-view .three-d-index,
.three-d-view .three-d-kicker,
.three-d-view .machine-stamp,
.three-d-view .machine-side-right{color:#ff4650}
.three-d-view .machine-hero .machine-side-left,
.three-d-view .machine-manifesto h2,
.three-d-view .machine-manifesto>p:last-child,
.three-d-view .machine-columns h2,
.three-d-view .machine-columns p{color:#f4f1e9}

/* Portfolio category view opened by the second click on the monitor. */
.folders-open{overflow:hidden}
.folder-backdrop{position:fixed;inset:0;z-index:140;background:rgba(245,249,250,.52);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}
.folder-modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;overflow:hidden;pointer-events:none}
.folder-modal[hidden],.folder-backdrop[hidden]{display:none}
.folder-close{position:fixed;z-index:153;top:24px;right:28px;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;font-size:27px;line-height:1;pointer-events:auto;transition:transform .2s ease,background .2s ease}
.folder-close:hover,.folder-close:focus-visible{background:var(--hot-pink);transform:rotate(8deg);outline:none}
.portfolio-folders{position:relative;width:min(1000px,90vw);height:min(640px,78vh);pointer-events:auto}
.portfolio-folder{position:absolute;display:grid;place-items:center;padding:clamp(18px,3vw,38px);border-radius:22px;background:var(--blue);color:#f4f7c4;cursor:pointer;box-shadow:none;transform-origin:center;transition:transform .25s ease,filter .25s ease}
.portfolio-folder::before{content:"";position:absolute;left:9%;top:-10%;width:34%;height:17%;border-radius:13px 13px 0 0;background:inherit}
.portfolio-folder::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(29,36,64,.14);pointer-events:none}
.portfolio-folder span{position:relative;z-index:5;text-align:center;font:800 clamp(21px,3.2vw,42px)/.95 Georgia,"Times New Roman",serif;letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,255,255,.12)}
.portfolio-folder:hover,.portfolio-folder:focus-visible{filter:brightness(1.05);transform:translateY(-8px) rotate(var(--angle)) scale(1.03);outline:none}
.portfolio-folder{animation:folder-enter .65s cubic-bezier(.2,.8,.2,1) both}
.folder-ui{animation-delay:.05s}.folder-graphic{animation-delay:.14s}.folder-3d{animation-delay:.23s}.folder-brand{animation-delay:.32s}
.portfolio-folder .folder-paper{--paper-magnet-x:0px;--paper-magnet-y:0px;position:absolute;z-index:2;left:50%;bottom:12%;display:block;width:74%;height:66%;margin:0;border:0;border-radius:10px;background:#f2f2f2;box-shadow:0 7px 0 rgba(29,36,64,.1);opacity:.95;transform:translate(calc(-50% + var(--paper-magnet-x)),calc(10% + var(--paper-magnet-y))) rotate(0deg);transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.portfolio-folder .paper-two{z-index:1;width:82%;height:58%;background:#fafafa;transform:translate(calc(-50% + var(--paper-magnet-x)),calc(13% + var(--paper-magnet-y))) rotate(0deg)}
.portfolio-folder .paper-three{z-index:0;width:90%;height:49%;background:#fff;transform:translate(calc(-50% + var(--paper-magnet-x)),calc(16% + var(--paper-magnet-y))) rotate(0deg)}
.portfolio-folder.is-open{transform:translateY(-8px) rotate(var(--angle)) scale(1.03);filter:brightness(1.04)}
.portfolio-folder.is-open .paper-one{transform:translate(calc(-122% + var(--paper-magnet-x)),calc(-62% + var(--paper-magnet-y))) rotate(-14deg)}
.portfolio-folder.is-open .paper-two{transform:translate(calc(11% + var(--paper-magnet-x)),calc(-66% + var(--paper-magnet-y))) rotate(14deg)}
.portfolio-folder.is-open .paper-three{transform:translate(calc(-50% + var(--paper-magnet-x)),calc(-96% + var(--paper-magnet-y))) rotate(4deg)}
.portfolio-folder .folder-paper:hover{box-shadow:0 11px 18px rgba(29,36,64,.15);filter:brightness(1.02)}
@keyframes folder-enter{from{opacity:0;transform:translateY(28px) rotate(var(--angle)) scale(.88)}to{opacity:1;transform:rotate(var(--angle)) scale(1)}}
.folder-ui{--angle:7deg;right:2%;top:3%;width:36%;height:34%;background:#2e46dc;color:#ddf044;transform:rotate(7deg);z-index:4}
.folder-graphic{--angle:-5deg;left:29%;top:24%;width:39%;height:39%;background:#c4f12e;color:#2747c9;transform:rotate(-5deg) translateY(-2%);z-index:12}
.folder-3d{--angle:6deg;left:6%;bottom:10%;width:36%;height:34%;background:#121217;color:#ff765d;transform:rotate(6deg);z-index:3}
.folder-brand{--angle:8deg;right:9%;bottom:4%;width:36%;height:34%;background:#fff;color:#1d2440;transform:rotate(8deg);z-index:1}
.folder-spark{position:absolute;width:72px;height:72px;background:var(--yellow);clip-path:polygon(50% 0%,61% 27%,82% 8%,74% 34%,100% 31%,78% 48%,100% 63%,73% 63%,82% 92%,60% 72%,49% 100%,40% 72%,15% 92%,25% 63%,0% 63%,23% 48%,0% 31%,26% 34%,17% 8%,39% 27%);pointer-events:none}
.folder-spark-one{left:14%;top:9%;transform:rotate(-12deg)}
.folder-spark-two{right:7%;bottom:14%;width:58px;height:58px;background:#b8ed27;transform:rotate(18deg)}
@media (max-width:650px){.folder-close{top:14px;right:14px;width:38px;height:38px}.portfolio-folders{width:92vw;height:72vh}.portfolio-folder{border-radius:16px}.portfolio-folder span{font-size:clamp(15px,4.5vw,24px)}.folder-ui{right:2%;top:5%;width:40%;height:28%}.folder-graphic{left:25%;top:27%;width:40%;height:28%}.folder-3d{left:4%;bottom:14%;width:40%;height:28%}.folder-brand{right:5%;bottom:5%;width:40%;height:28%}.folder-spark-one{left:4%;top:15%;width:48px;height:48px}.folder-spark-two{right:2%;bottom:16%;width:40px;height:40px}}

/* Folder component layering: rigid back, papers tucked behind a raised front cover. */
.portfolio-folder{padding:0;border-radius:16px;background:transparent!important;overflow:visible;isolation:isolate;aspect-ratio:0.78}
.portfolio-folder::before{z-index:0;left:8%;top:-7%;width:43%;height:18%;border-radius:10px 10px 0 0;background:var(--folder-color);}
.portfolio-folder::after{z-index:8;border-radius:10px;border:0!important;}
.portfolio-folder .folder-back{position:absolute;inset:0;display:block!important;overflow:visible;border-radius:0 10px 10px 10px;background:color-mix(in srgb,var(--folder-color) 92%,#000);box-shadow:0 14px 22px rgba(25,31,53,.13);z-index:1;}
.portfolio-folder .folder-back::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 42%);pointer-events:none;}
.portfolio-folder .folder-front{position:absolute;z-index:6;left:0;right:0;bottom:0;height:100%;display:flex!important;align-items:center;justify-content:center;padding:12px 10px 10px;border-radius:5px 10px 16px 16px;background:var(--folder-color);clip-path:none;box-shadow:0 -2px 0 rgba(255,255,255,.12);transform-origin:50% 100%;transition:transform .3s ease-in-out,filter .25s ease;}
.portfolio-folder .folder-front{overflow:hidden;}
.portfolio-folder .folder-front img{position:relative;z-index:2;display:block;width:88%;height:auto;max-height:78%;object-fit:contain;pointer-events:none;user-select:none;}
.portfolio-folder.folder-ui .folder-front img{filter:invert(1);mix-blend-mode:screen;}
.portfolio-folder.folder-3d .folder-front img{filter:invert(1);}
.portfolio-folder .folder-front.right{z-index:5;left:auto;right:0;width:52%;display:block!important;border-radius:0 10px 16px 0;transform-origin:bottom right;pointer-events:none;}
.portfolio-folder .folder-front b{position:relative;z-index:2;display:block;color:var(--folder-label);font:800 clamp(16px,2.2vw,28px)/1.05 Georgia,"Times New Roman",serif;letter-spacing:0;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.14);}
.portfolio-folder .folder-front b{display:none;}
.portfolio-folder .folder-paper{z-index:3;left:50%;bottom:19%;width:78%;height:67%;border-radius:10px;background:#f4f4ef;box-shadow:0 5px 0 rgba(29,36,64,.08);opacity:1;transform:translate(-50%,8%) rotate(0deg);}
.portfolio-folder .paper-two{z-index:2;width:84%;height:60%;transform:translate(-50%,11%) rotate(0deg);}
.portfolio-folder .paper-three{z-index:1;width:90%;height:53%;transform:translate(-50%,14%) rotate(0deg);}
.portfolio-folder:hover .folder-front,.portfolio-folder:focus-visible .folder-front{transform:skew(15deg) scaleY(.6);filter:brightness(1.04)}
.portfolio-folder:hover .folder-front.right,.portfolio-folder:focus-visible .folder-front.right{transform:skew(-15deg) scaleY(.6)}
.portfolio-folder:hover .folder-paper,.portfolio-folder:focus-visible .folder-paper{transform:translate(-50%,0)}
.portfolio-folder:hover .paper-two,.portfolio-folder:focus-visible .paper-two{transform:translate(-50%,0)}
.portfolio-folder:hover .paper-three,.portfolio-folder:focus-visible .paper-three{transform:translate(-50%,0)}
.portfolio-folder.is-open .folder-front{transform:skew(15deg) scaleY(.6);filter:brightness(1.03)}
.portfolio-folder.is-open .folder-front.right{transform:skew(-15deg) scaleY(.6)}
.portfolio-folder.is-open .paper-one{transform:translate(calc(-116% + var(--paper-magnet-x)),calc(-63% + var(--paper-magnet-y))) rotate(-13deg)}
.portfolio-folder.is-open .paper-two{transform:translate(calc(8% + var(--paper-magnet-x)),calc(-67% + var(--paper-magnet-y))) rotate(12deg)}
.portfolio-folder.is-open .paper-three{transform:translate(calc(-50% + var(--paper-magnet-x)),calc(-98% + var(--paper-magnet-y))) rotate(3deg)}
.folder-ui{--folder-color:#6a00ff;--folder-label:#fff;width:27%;height:49%;}
.folder-graphic{--folder-color:#c4f12e;--folder-label:#2747c9;width:27%;height:49%;}
.folder-3d{--folder-color:#25252a;--folder-label:#ff765d;width:27%;height:49%;}
.folder-brand{--folder-color:#fff;--folder-label:#1d2440;width:27%;height:49%;}
@media (max-width:650px){.portfolio-folder{width:38%!important;height:auto!important;aspect-ratio:.78}.portfolio-folder .folder-front b{font-size:clamp(14px,4vw,22px)}.portfolio-folder .folder-paper{bottom:18%}}

/* Reference proportions: wide folders with a bottom-hinged cover. Hover only opens the cover; click reveals papers in sequence. */
.portfolio-folder{width:34%;height:auto;aspect-ratio:1.42;}
.folder-ui{width:34%;height:auto;aspect-ratio:1.42;}
.folder-graphic{width:39%;height:auto;aspect-ratio:1.42;}
.folder-3d{width:34%;height:auto;aspect-ratio:1.42;}
.folder-brand{width:34%;height:auto;aspect-ratio:1.42;}
.portfolio-folder:hover .folder-paper,.portfolio-folder:focus-visible .folder-paper{transform:translate(-50%,8%)}
.portfolio-folder:hover .paper-two,.portfolio-folder:focus-visible .paper-two{transform:translate(-50%,11%)}
.portfolio-folder:hover .paper-three,.portfolio-folder:focus-visible .paper-three{transform:translate(-50%,14%)}
.portfolio-folder:not(.is-open) .folder-paper{transform-origin:50% 100%;}
.portfolio-folder:not(.is-open):hover .paper-one,.portfolio-folder:not(.is-open):focus-visible .paper-one{transform:translate(-50%,8%) skew(15deg) scaleY(.6);transition-delay:.04s}
.portfolio-folder:not(.is-open):hover .paper-two,.portfolio-folder:not(.is-open):focus-visible .paper-two{transform:translate(-50%,11%) skew(15deg) scaleY(.6);transition-delay:.14s}
.portfolio-folder:not(.is-open):hover .paper-three,.portfolio-folder:not(.is-open):focus-visible .paper-three{transform:translate(-50%,14%) skew(15deg) scaleY(.6);transition-delay:.24s}
.portfolio-folder:not(.is-open) .paper-one{transition-delay:.24s}
.portfolio-folder:not(.is-open) .paper-two{transition-delay:.14s}
.portfolio-folder:not(.is-open) .paper-three{transition-delay:.04s}
.portfolio-folder.is-open .paper-one{transition-delay:0s}
.portfolio-folder.is-open .paper-two{transition-delay:.11s}
.portfolio-folder.is-open .paper-three{transition-delay:.22s}
.portfolio-folder:not(.is-open) .paper-three{transition-delay:0s}
.portfolio-folder:not(.is-open) .paper-two{transition-delay:.1s}
.portfolio-folder:not(.is-open) .paper-one{transition-delay:.2s}
.portfolio-folder.is-open:hover .paper-one{transform:translate(calc(-116% + var(--paper-magnet-x)),calc(-63% + var(--paper-magnet-y))) rotate(-13deg)}
.portfolio-folder.is-open:hover .paper-two{transform:translate(calc(8% + var(--paper-magnet-x)),calc(-67% + var(--paper-magnet-y))) rotate(12deg)}
.portfolio-folder.is-open:hover .paper-three{transform:translate(calc(-50% + var(--paper-magnet-x)),calc(-98% + var(--paper-magnet-y))) rotate(3deg)}
@media (max-width:650px){.portfolio-folder,.folder-ui,.folder-graphic,.folder-3d,.folder-brand{width:42%!important;height:auto!important;aspect-ratio:1.35}.portfolio-folder .folder-front b{font-size:clamp(14px,4vw,22px)}}

/* Experimental 3D archive: editorial black field with an offset, tactile image grid. */
.three-d-view-open{overflow:hidden;background:#0b0d13;color:#f3f0e8}
.three-d-view{position:fixed;inset:0;z-index:220;overflow:auto;background:#0b0d13;color:#f3f0e8;padding:clamp(24px,5vw,72px);isolation:isolate}
.three-d-view[hidden]{display:none}
.three-d-noise{position:fixed;inset:0;z-index:-1;opacity:.14;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.4) .6px,transparent .7px);background-size:7px 7px;mix-blend-mode:screen}
.three-d-header{position:relative;display:flex;align-items:flex-start;justify-content:space-between;max-width:1400px;margin:0 auto;padding-bottom:clamp(38px,7vw,110px);border-bottom:1px solid rgba(243,240,232,.28)}
.three-d-index,.three-d-kicker,.three-d-footer,.three-d-card span{font:700 10px/1.2 "Courier New",monospace;letter-spacing:.17em;text-transform:uppercase}
.three-d-header h1{margin:0;max-width:900px;font:500 clamp(48px,10vw,150px)/.83 Arial,sans-serif;letter-spacing:-.08em;text-transform:uppercase}
.three-d-header h1 em{display:block;margin-left:clamp(24px,10vw,180px);font-family:Georgia,serif;font-size:.54em;letter-spacing:-.04em;text-transform:none;color:#d3f451}
.three-d-index{margin:4px 24px 0 0;color:#d3f451;writing-mode:vertical-rl}
.three-d-close{position:fixed;top:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);width:45px;height:45px;border:1px solid rgba(243,240,232,.5);border-radius:50%;background:rgba(11,13,19,.56);color:#f3f0e8;font-size:28px;line-height:1;cursor:pointer;transition:.25s ease;z-index:40}.three-d-close:hover{background:#ff4650;color:#fff;transform:rotate(12deg)}
.three-d-intro{display:grid;grid-template-columns:1fr minmax(260px,430px) auto;gap:36px;align-items:end;max-width:1400px;margin:28px auto 0}.three-d-intro p{margin:0}.three-d-intro>p:nth-child(2){font:400 clamp(15px,1.6vw,22px)/1.35 Georgia,serif;color:rgba(243,240,232,.74)}.three-d-intro a{color:#d3f451;font:700 10px "Courier New",monospace;letter-spacing:.12em;text-decoration:none;border-bottom:1px solid #d3f451;padding-bottom:5px}
.three-d-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(22px,3vw,52px);max-width:1400px;margin:clamp(70px,10vw,150px) auto 120px;align-items:start}
.three-d-card{grid-column:span 4;position:relative}.three-d-card-tall{grid-column:2 / span 4;margin-top:6vw}.three-d-card-accent{grid-column:8 / span 4;margin-top:11vw}.three-d-card-wide{grid-column:4 / span 6;margin-top:4vw}.three-d-card-resume{grid-column:8 / span 4;margin-top:8vw}
.three-d-card img,.three-d-placeholder{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;filter:saturate(.72) contrast(1.08);transition:filter .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}.three-d-placeholder{position:relative;aspect-ratio:1/1;background:linear-gradient(135deg,#191d2a 0 48%,#d3f451 48% 49%,#252b3a 49% 100%);overflow:hidden}.three-d-placeholder::before{content:"";position:absolute;inset:12%;border:1px solid rgba(243,240,232,.38);transform:rotate(-7deg)}.three-d-placeholder::after{content:attr(data-placeholder);position:absolute;left:16px;bottom:14px;color:rgba(243,240,232,.72);font:700 10px "Courier New",monospace;letter-spacing:.14em}.three-d-card-tall img,.three-d-card-tall .three-d-placeholder{aspect-ratio:3/4}.three-d-card-accent img,.three-d-card-accent .three-d-placeholder{aspect-ratio:4/5}.three-d-card-wide img,.three-d-card-wide .three-d-placeholder{aspect-ratio:16/9}.three-d-card:hover img,.three-d-card:hover .three-d-placeholder{filter:saturate(1.08) contrast(1.02);transform:translateY(-9px) rotate(-1deg)}
.three-d-card div{padding:15px 0 0;border-top:1px solid rgba(243,240,232,.35)}.three-d-card span{color:#d3f451}.three-d-card h2{margin:10px 0 7px;font:500 clamp(23px,3vw,44px)/.9 Arial,sans-serif;letter-spacing:-.06em}.three-d-card p{margin:0;max-width:320px;color:rgba(243,240,232,.62);font:14px/1.45 Georgia,serif}.three-d-footer{display:flex;justify-content:space-between;max-width:1400px;margin:0 auto;color:rgba(243,240,232,.52);border-top:1px solid rgba(243,240,232,.28);padding-top:16px}
@media (max-width:760px){.three-d-view{padding:22px}.three-d-header h1{font-size:clamp(43px,15vw,90px)}.three-d-intro{display:block}.three-d-intro>p:nth-child(2){margin:20px 0}.three-d-grid{display:block;margin-top:70px}.three-d-card,.three-d-card-tall,.three-d-card-accent,.three-d-card-wide,.three-d-card-resume{margin:0 0 70px}.three-d-card img{max-height:none}.three-d-footer{font-size:8px}}

/* Final paper motion override: each sheet folds toward the viewer in sequence. */
.portfolio-folder .folder-paper{transform-origin:50% 100%;backface-visibility:hidden;perspective:700px;transition:transform .42s cubic-bezier(.2,.78,.25,1),box-shadow .3s ease;}
.portfolio-folder:not(.is-open):hover .paper-one,.portfolio-folder:not(.is-open):focus-visible .paper-one{transform:translate(-50%,8%) rotateX(-56deg);transition-delay:0s;}
.portfolio-folder:not(.is-open):hover .paper-two,.portfolio-folder:not(.is-open):focus-visible .paper-two{transform:translate(-50%,11%) rotateX(-56deg);transition-delay:.14s;}
.portfolio-folder:not(.is-open):hover .paper-three,.portfolio-folder:not(.is-open):focus-visible .paper-three{transform:translate(-50%,14%) rotateX(-56deg);transition-delay:.28s;}
.portfolio-folder:not(.is-open) .paper-one{transition-delay:.28s;}
.portfolio-folder:not(.is-open) .paper-two{transition-delay:.14s;}
.portfolio-folder:not(.is-open) .paper-three{transition-delay:0s;}
.portfolio-folder.is-open .paper-one{width:82%;height:82%;transform:translate(calc(-116% + var(--paper-magnet-x)),calc(-56% + var(--paper-magnet-y))) rotate(-13deg);}
.portfolio-folder.is-open .paper-two{width:88%;height:76%;transform:translate(calc(8% + var(--paper-magnet-x)),calc(-60% + var(--paper-magnet-y))) rotate(12deg);}
.portfolio-folder.is-open .paper-three{width:94%;height:70%;transform:translate(calc(-50% + var(--paper-magnet-x)),calc(-88% + var(--paper-magnet-y))) rotate(3deg);}
.portfolio-folder.is-open:hover .paper-one{transform:translate(calc(-116% + var(--paper-magnet-x)),calc(-56% + var(--paper-magnet-y))) rotate(-13deg);}
.portfolio-folder.is-open:hover .paper-two{transform:translate(calc(8% + var(--paper-magnet-x)),calc(-60% + var(--paper-magnet-y))) rotate(12deg);}
.portfolio-folder.is-open:hover .paper-three{transform:translate(calc(-50% + var(--paper-magnet-x)),calc(-88% + var(--paper-magnet-y))) rotate(3deg);}

/* Cleanup and deterministic hover page-turn sequence. */
.portfolio-folder{border:0;outline:0;appearance:none;-webkit-appearance:none;perspective:900px;}
.portfolio-folder:focus{outline:0;}
.portfolio-folder .folder-back{border-radius:10px;transform-style:preserve-3d;}
.portfolio-folder .folder-front{border-radius:10px;}
.portfolio-folder .folder-front.right{border-radius:0 10px 10px 0;}
.portfolio-folder:not(.is-open) .folder-paper{transform-style:preserve-3d;backface-visibility:visible;}
.portfolio-folder:not(.is-open):hover .paper-one,.portfolio-folder:not(.is-open):focus-visible .paper-one{animation:paper-turn-one .78s cubic-bezier(.2,.78,.25,1) .08s both;}
.portfolio-folder:not(.is-open):hover .paper-two,.portfolio-folder:not(.is-open):focus-visible .paper-two{animation:paper-turn-two .78s cubic-bezier(.2,.78,.25,1) .38s both;}
.portfolio-folder:not(.is-open):hover .paper-three,.portfolio-folder:not(.is-open):focus-visible .paper-three{animation:paper-turn-three .78s cubic-bezier(.2,.78,.25,1) .68s both;}
.portfolio-folder:not(.is-open) .paper-one,.portfolio-folder:not(.is-open) .paper-two,.portfolio-folder:not(.is-open) .paper-three{animation-name:none;}
@keyframes paper-turn-one{0%{transform:translate(-50%,8%) rotateX(0deg)}58%{transform:translate(-50%,1%) rotateX(30deg)}100%{transform:translate(-50%,4%) rotateX(18deg)}}
@keyframes paper-turn-two{0%{transform:translate(-50%,11%) rotateX(0deg)}58%{transform:translate(-50%,0%) rotateX(34deg)}100%{transform:translate(-50%,0%) rotateX(22deg)}}
@keyframes paper-turn-three{0%{transform:translate(-50%,14%) rotateX(0deg)}58%{transform:translate(-50%,-3%) rotateX(38deg)}100%{transform:translate(-50%,-7%) rotateX(26deg)}}

/* Final interaction: hover only opens the cover; clicking pops out a visible paper stack. */
.portfolio-folder:not(.is-open):hover .folder-paper,.portfolio-folder:not(.is-open):focus-visible .folder-paper{animation:none;transform:translate(-50%,8%);}
.portfolio-folder:not(.is-open):hover .paper-two,.portfolio-folder:not(.is-open):focus-visible .paper-two{transform:translate(-50%,11%);}
.portfolio-folder:not(.is-open):hover .paper-three,.portfolio-folder:not(.is-open):focus-visible .paper-three{transform:translate(-50%,14%);}
.portfolio-folder.is-open .paper-one{animation:paper-pop-one .64s cubic-bezier(.2,.8,.25,1) .04s both;}
.portfolio-folder.is-open .paper-two{animation:paper-pop-two .64s cubic-bezier(.2,.8,.25,1) .18s both;}
.portfolio-folder.is-open .paper-three{animation:paper-pop-three .64s cubic-bezier(.2,.8,.25,1) .32s both;}
.portfolio-folder.is-open .paper-one{z-index:9;}
.portfolio-folder.is-open .paper-two{z-index:8;}
.portfolio-folder.is-open .paper-three{z-index:7;}
@keyframes paper-pop-one{0%{transform:translate(-50%,8%) scale(.96) rotate(0);opacity:.7}70%{transform:translate(-50%,0) scale(1.02) rotate(-4deg);opacity:1}100%{transform:translate(-50%,3%) scale(1) rotate(-3deg);opacity:1}}
@keyframes paper-pop-two{0%{transform:translate(-50%,11%) scale(.96) rotate(0);opacity:.7}70%{transform:translate(-50%,-3%) scale(1.02) rotate(3deg);opacity:1}100%{transform:translate(-50%,0) scale(1) rotate(2deg);opacity:1}}
@keyframes paper-pop-three{0%{transform:translate(-50%,14%) scale(.96) rotate(0);opacity:.7}70%{transform:translate(-50%,-8%) scale(1.02) rotate(-1deg);opacity:1}100%{transform:translate(-50%,-5%) scale(1) rotate(0);opacity:1}}

/* Interaction split: hover reveals a layered stack; click uses the original React Bits spread. */
.portfolio-folder .folder-front.right{display:none!important;}
.portfolio-folder:not(.is-open) .folder-paper{animation:none!important;opacity:1;transition:transform .58s cubic-bezier(.2,.8,.25,1),box-shadow .3s ease;}
.portfolio-folder:not(.is-open):hover .paper-one,.portfolio-folder:not(.is-open):focus-visible .paper-one{transform:translate(-50%,0) rotate(-3deg);transition-delay:.06s;}
.portfolio-folder:not(.is-open):hover .paper-two,.portfolio-folder:not(.is-open):focus-visible .paper-two{transform:translate(-50%,4%) rotate(2deg);transition-delay:.20s;}
.portfolio-folder:not(.is-open):hover .paper-three,.portfolio-folder:not(.is-open):focus-visible .paper-three{transform:translate(-50%,8%) rotate(-1deg);transition-delay:.34s;}
.portfolio-folder:not(.is-open) .paper-one{transition-delay:.34s;}
.portfolio-folder:not(.is-open) .paper-two{transition-delay:.20s;}
.portfolio-folder:not(.is-open) .paper-three{transition-delay:.06s;}
.portfolio-folder.is-open .folder-paper{animation:none!important;opacity:1;transition:transform .62s cubic-bezier(.2,.8,.25,1),box-shadow .3s ease;}
.portfolio-folder.is-open .paper-one{z-index:9;width:74%;height:66%;transform:translate(calc(-120% + var(--paper-magnet-x)),calc(-70% + var(--paper-magnet-y))) rotate(-15deg);}
.portfolio-folder.is-open .paper-two{z-index:8;width:80%;height:70%;transform:translate(calc(10% + var(--paper-magnet-x)),calc(-70% + var(--paper-magnet-y))) rotate(15deg);}
.portfolio-folder.is-open .paper-three{z-index:7;width:90%;height:60%;transform:translate(calc(-50% + var(--paper-magnet-x)),calc(-100% + var(--paper-magnet-y))) rotate(5deg);}
.portfolio-folder.is-open .paper-one,.portfolio-folder.is-open .paper-two,.portfolio-folder.is-open .paper-three{transition-delay:0s;}
.portfolio-folder .folder-paper,.portfolio-folder .folder-front,.portfolio-folder .folder-back{border-radius:10px;}

/* Folder covers are intentionally free of labels. */
.portfolio-folder .folder-front b,
.portfolio-folder .folder-front strong,
.portfolio-folder .folder-front span{display:none!important;}

/* In-page graphic design view. It replaces the desktop visually without navigation. */
.graphic-view{position:fixed;inset:0;z-index:220;display:block;overflow:hidden;background:#fff;color:#111;perspective:1200px;}
.graphic-view[hidden]{display:none;}

/* Skills use the supplied square artwork inside a React Bits-inspired stack. */
.skills-stack-open{overflow:hidden}
.skills-stack-backdrop{position:fixed;inset:0;z-index:180;background:rgba(221,234,239,.46);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
.skills-stack-modal{position:fixed;inset:0;z-index:190;display:grid;place-items:center;padding:clamp(56px,7vh,82px) 24px 34px;pointer-events:none;perspective:1000px}
.skills-stack-modal[hidden],.skills-stack-backdrop[hidden]{display:none}
.skills-stack{position:relative;width:min(68vh,620px,82vw);aspect-ratio:1;pointer-events:auto;isolation:isolate}
.skills-stack-card{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(29,36,64,.13);border-radius:clamp(18px,3.2vw,34px);background:#fff;box-shadow:0 18px 46px rgba(29,36,64,.16);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform,opacity;transform-origin:90% 90%}
.skills-stack-card[data-top-card="false"]{pointer-events:none}
.skills-stack-card.is-dragging{cursor:grabbing;box-shadow:0 28px 70px rgba(29,36,64,.24)}
.skills-stack-card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.skills-stack-close{position:fixed;z-index:193;top:24px;right:28px;width:42px;height:42px;border:2px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:27px;line-height:1;pointer-events:auto;transition:transform .2s ease,background .2s ease}
.skills-stack-close:hover,.skills-stack-close:focus-visible{background:var(--yellow);transform:rotate(8deg);outline:none}
.skills-stack-status{position:fixed;z-index:192;left:50%;bottom:20px;margin:0;transform:translateX(-50%);color:var(--ink);font:700 11px/1 "Courier New",monospace;letter-spacing:.12em;pointer-events:none}
@media (max-width:650px){.skills-stack-modal{padding:66px 18px 48px}.skills-stack{width:min(78vh,86vw)}.skills-stack-close{top:14px;right:14px;width:38px;height:38px}.skills-stack-status{bottom:15px}}
@media (prefers-reduced-motion:reduce){.skills-stack-card{will-change:auto}}
.graphic-view-header{position:fixed;z-index:2;top:26px;left:34px;right:34px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;}
.graphic-view-header h1{margin:0;font:700 11px/1.2 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;}
.graphic-back{pointer-events:auto;color:#111;font:700 11px/1 "Courier New",monospace;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid #111;padding-bottom:4px;}
.graphic-back span{font-size:16px;line-height:0;vertical-align:-1px;margin-left:4px}
.graphic-back:hover,.graphic-back:focus-visible{color:#ff4650;border-color:#ff4650;outline:none;}
.graphic-title-art{position:fixed;z-index:1;top:clamp(34px,4vh,58px);right:clamp(34px,7vw,116px);width:min(52vw,820px);height:auto;pointer-events:none;object-fit:contain;}
.graphic-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;overscroll-behavior:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.graphic-stage.is-dragging{cursor:grabbing;}
.graphic-stack{position:absolute;left:50%;top:14%;width:min(76vw,760px);height:min(70vh,620px);transform-style:preserve-3d;touch-action:none;cursor:inherit;transform:translateX(-50%);}
.graphic-stack.is-dragging{cursor:grabbing;}
.graphic-card{position:absolute;left:50%;top:50%;width:clamp(220px,27vw,360px);aspect-ratio:.72;border:1px solid #d8d8d8;border-radius:3px;background:#fff;box-shadow:none;transform-origin:50% 110vh;transform:translate(-50%,-50%);animation:none;will-change:transform,opacity;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.graphic-card::after{content:"";position:absolute;inset:12px;border:1px dashed #ededed;}
.graphic-card.has-image{background-position:center;background-size:cover;background-repeat:no-repeat;border-color:rgba(0,0,0,.18);}
.graphic-card.has-image::after{display:none;}
.graphic-card:nth-child(1){--rotation:-18deg;--x:-205px;--y:24px;--z:0px;--delay:-.8s}.graphic-card:nth-child(2){--rotation:-10deg;--x:-125px;--y:0px;--z:30px;--delay:-2.1s}.graphic-card:nth-child(3){--rotation:-3deg;--x:-42px;--y:-16px;--z:60px;--delay:-3.4s}.graphic-card:nth-child(4){--rotation:5deg;--x:42px;--y:-10px;--z:90px;--delay:-4.7s}.graphic-card:nth-child(5){--rotation:13deg;--x:124px;--y:5px;--z:55px;--delay:-1.4s}.graphic-card:nth-child(6){--rotation:20deg;--x:201px;--y:30px;--z:10px;--delay:-5.3s}
.graphic-view-note{position:fixed;z-index:2;left:50%;bottom:32px;margin:0;transform:translateX(-50%);color:#969696;font:10px/1.4 "Courier New",monospace;letter-spacing:.08em;text-align:center;text-transform:uppercase;white-space:nowrap;}
@keyframes graphic-card-float{0%,100%{margin-top:0}50%{margin-top:-10px}}
@media (max-width:700px){.graphic-view-header{top:20px;left:20px;right:20px}.graphic-title-art{top:40px;right:20px;width:min(74vw,420px)}.graphic-stack{left:50%;top:15%;width:100vw;height:70vh;transform:translateX(-50%) scale(.72)}.graphic-card{transform-origin:50% 100vh}.graphic-view-note{bottom:22px;font-size:9px}}
@media (prefers-reduced-motion:reduce){.graphic-card{animation:none}}

/* Machine page final palette override: this must remain last so legacy theme rules cannot win. */
.three-d-view .three-d-title-wrap>p,
.three-d-view .three-d-index,
.three-d-view .three-d-kicker,
.three-d-view .machine-stamp,
.three-d-view .machine-side-right,
.three-d-view .machine-section-label,
.three-d-view .machine-process figcaption,
.three-d-view .machine-image-stage>p,
.three-d-view .machine-columns span{color:#ff4650!important}
.three-d-view .three-d-header h1,
.three-d-view .three-d-header h1 em,
.three-d-view .machine-manifesto h2,
.three-d-view .machine-manifesto>p:last-child,
.three-d-view .machine-columns h2,
.three-d-view .machine-columns p{color:#f4f1e9!important;font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif}
.three-d-view .three-d-header h1{font-weight:800;letter-spacing:-.075em}
.three-d-view .three-d-header h1 strong{color:#ff4650!important;font-family:inherit;font-weight:900}

/* Machine cover revision: the supplied installation image is the visual
   foundation for the first two scroll pages. The former synthetic orb and
   hero artwork are intentionally removed so the object is not duplicated. */
.three-d-view .three-d-title-wrap{display:none!important}
.three-d-view .three-d-header{padding-bottom:18px;border-bottom:1px solid rgba(243,240,232,.26)}
.three-d-view .machine-hero-art,
.three-d-view .machine-orb{display:none!important}
.three-d-view .machine-page{position:relative;isolation:isolate;max-width:none;margin-left:calc(clamp(24px,5vw,72px) * -1);margin-right:calc(clamp(24px,5vw,72px) * -1);padding-left:clamp(24px,5vw,72px);padding-right:clamp(24px,5vw,72px);overflow:hidden;background-color:#050506;background-image:url("assets/machine/machine-cover-bg.png");background-repeat:no-repeat;background-size:cover;background-position:center top}
.three-d-view .machine-page::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,transparent 17%,transparent 73%,rgba(0,0,0,.72) 100%);pointer-events:none}
.three-d-view .machine-page::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:15%;background:linear-gradient(180deg,rgba(0,0,0,.8),transparent);filter:blur(14px);opacity:.78;pointer-events:none}
.three-d-view .machine-hero{height:calc(100vh - 110px);min-height:620px;border:0;margin-top:0;background-position:center top}
.three-d-view .machine-hero::before{display:none}
.three-d-view .machine-hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;top:auto;width:auto;height:22%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.9));filter:blur(12px);pointer-events:none}
.three-d-view .machine-side,.three-d-view .machine-stamp{z-index:2;text-shadow:0 2px 18px rgba(0,0,0,.8)}
.three-d-view .machine-side-left{left:clamp(24px,5vw,72px);top:16%}
.three-d-view .machine-side-right{right:clamp(24px,5vw,72px);bottom:12%}
.three-d-view .machine-stamp{left:clamp(24px,5vw,72px);bottom:10%}
.three-d-view .machine-page--concept{min-height:100vh;max-width:none;padding-top:clamp(90px,12vw,170px);padding-bottom:clamp(90px,12vw,170px);background-position:center 38%;border-top:1px solid rgba(243,240,232,.28)}
.three-d-view .machine-page--concept::before{background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.38) 35%,rgba(0,0,0,.72) 100%)}
.three-d-view .machine-page--concept::after{top:auto;bottom:0;height:18%;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);filter:blur(16px)}
.three-d-view .machine-page--concept>*{position:relative;z-index:1}
.three-d-view .machine-page--concept .machine-concept-art img{max-height:68vh;object-fit:contain;object-position:center;mix-blend-mode:normal}
.three-d-view .machine-page--concept .machine-concept-art span{color:#ff4650;text-shadow:0 1px 9px rgba(0,0,0,.8)}
.three-d-view .machine-page--concept .machine-section-label,
.three-d-view .machine-page--concept .three-d-kicker{color:#ff4650!important}
@media (max-width:760px){
  .three-d-view .machine-page{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
  .three-d-view .machine-hero{height:calc(100vh - 78px);min-height:540px}
  .three-d-view .machine-page--concept{min-height:calc(100vh - 20px);padding-top:80px;padding-bottom:80px;background-position:center top}
  .three-d-view .machine-side-left{top:12%}
}

/* Machine editorial layout refinements */
.three-d-view .machine-cover-pages .machine-page--concept{border-top:0!important}
.three-d-view .machine-page--concept{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,84px);align-items:start}
.three-d-view .machine-page--concept .three-d-kicker{grid-column:1;grid-row:1;margin:0 0 28px}
.three-d-view .machine-page--concept>h2{grid-column:1;grid-row:2;margin:0;max-width:620px}
.three-d-view .machine-page--concept>p:last-of-type{grid-column:1;grid-row:3;max-width:560px;margin:28px 0 0}
.three-d-view .machine-page--concept .machine-concept-art{grid-column:2;grid-row:1 / span 3;width:100%;margin:0;align-self:center}
.three-d-view .machine-page--concept .machine-concept-art img{width:100%;height:min(74vh,820px);max-height:none;object-fit:contain;object-position:center}
.three-d-view .machine-page--concept .machine-concept-art span{text-align:right}
.three-d-view .machine-thinking{background:#000;color:#f4f1e9;padding:clamp(110px,13vw,185px) 0 0}
.three-d-view .machine-thinking-header{max-width:1200px;margin:0 auto;padding:clamp(28px,3vw,44px) 0 clamp(36px,5vw,70px);border-top:1px solid rgba(243,240,232,.28);border-bottom:0}
.three-d-view .machine-thinking-header p{margin:0 0 18px;color:#ff4650;font:700 10px "Courier New",monospace;letter-spacing:.18em}
.three-d-view .machine-thinking-header h2{margin:0;font:800 clamp(48px,8vw,124px)/.82 "Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;letter-spacing:-.07em}
.three-d-view .machine-thinking>.machine-columns{max-width:1200px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:0;border-bottom:0;padding:0;margin:0 auto}
.three-d-view .machine-thinking>.machine-columns article{min-width:0;padding:clamp(42px,5vw,78px) clamp(24px,3vw,46px);border-left:1px solid rgba(243,240,232,.25);border-bottom:1px solid rgba(243,240,232,.25)}
.three-d-view .machine-thinking>.machine-columns article:nth-child(odd){border-left:0;padding-left:0}
.three-d-view .machine-thinking>.machine-columns article:nth-child(even){padding-right:0}
.three-d-view .machine-thinking>.machine-columns article:nth-child(3),
.three-d-view .machine-thinking>.machine-columns article:nth-child(4){border-bottom:0}
.three-d-view .machine-thinking>.machine-columns article h2{margin:25px 0 14px;font-size:clamp(28px,3.2vw,52px);line-height:.94;letter-spacing:-.055em}
.three-d-view .machine-thinking>.machine-columns article p{max-width:430px;min-height:3.2em;margin:0;color:rgba(244,241,233,.72);font:16px/1.55 Arial,"Microsoft YaHei",sans-serif}
.three-d-view .machine-thinking>.machine-columns article img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;object-position:center;margin:38px 0 0;filter:none}
.three-d-view .machine-thinking>.machine-columns .machine-draft img{filter:invert(1);mix-blend-mode:screen;object-position:center 0%}
@media (max-width:760px){
  .three-d-view .machine-page--concept{display:block}
  .three-d-view .machine-page--concept .machine-concept-art{margin-top:46px}
  .three-d-view .machine-page--concept .machine-concept-art img{height:auto;max-height:none}
  .three-d-view .machine-thinking{padding-top:84px}
  .three-d-view .machine-thinking-header{padding:0 22px 36px}
  .three-d-view .machine-thinking>.machine-columns{display:block;padding:0 22px}
  .three-d-view .machine-thinking>.machine-columns article,
  .three-d-view .machine-thinking>.machine-columns article:nth-child(even),
  .three-d-view .machine-thinking>.machine-columns article:nth-child(odd){padding:42px 0;border-left:0;border-bottom:1px solid rgba(243,240,232,.25)}
  .three-d-view .machine-thinking>.machine-columns article:last-child{border-bottom:0}
}

/* The installation artwork is one continuous cover spanning the first two
   pages. Header controls sit on top of it, while the archive that follows is
   a true black field. */
.three-d-view{padding-top:0;background:#000!important}
.three-d-view .three-d-noise{display:none}
.three-d-view .three-d-header{position:absolute;z-index:20;top:clamp(24px,5vw,72px);left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);padding:0;border:0;pointer-events:none}
.three-d-view .three-d-header .three-d-index,
.three-d-view .three-d-header .three-d-close{pointer-events:auto}
.three-d-view .three-d-header .three-d-close{position:fixed;top:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px)}
.three-d-view .machine-cover-pages{position:relative;margin-left:calc(clamp(24px,5vw,72px) * -1);margin-right:calc(clamp(24px,5vw,72px) * -1);padding-left:clamp(24px,5vw,72px);padding-right:clamp(24px,5vw,72px);background:#050506 url("assets/machine/machine-cover-bg.png") center top / cover no-repeat}
.three-d-view .machine-cover-pages .machine-page{background:transparent!important;margin-left:0;margin-right:0}
.three-d-view .machine-cover-pages .machine-page::before,
.three-d-view .machine-cover-pages .machine-page::after{display:none}
.three-d-view .machine-cover-pages .machine-hero{margin-top:0}
.three-d-view .machine-cover-pages .machine-page--hero{cursor:crosshair}
.three-d-view .machine-brush-reveal{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.three-d-view .machine-brush-content{position:absolute;inset:0;opacity:0;visibility:hidden;color:#f4f1e9;background:radial-gradient(circle at 50% 48%,rgba(255,70,80,.2),transparent 38%),linear-gradient(120deg,rgba(255,70,80,.3),rgba(0,0,0,.1) 45%,rgba(116,10,20,.42));mix-blend-mode:screen;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:opacity,visibility,mask-image;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.three-d-view .machine-brush-content::before{content:"";position:absolute;inset:8% clamp(24px,5vw,72px);background:linear-gradient(90deg,rgba(255,70,80,.42) 1px,transparent 1px),linear-gradient(0deg,rgba(244,241,233,.16) 1px,transparent 1px),repeating-linear-gradient(115deg,transparent 0 28px,rgba(255,70,80,.18) 29px 31px);background-size:9.5vw 100%,100% 9.5vh,100% 100%;opacity:.72}
.three-d-view .machine-brush-content::after{content:"";position:absolute;left:18%;right:14%;top:28%;height:44%;border:1px solid rgba(255,70,80,.62);box-shadow:0 0 38px rgba(255,70,80,.34),inset 0 0 46px rgba(255,70,80,.2);background:radial-gradient(ellipse at 48% 46%,rgba(255,210,210,.34),transparent 17%),repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.13) 25px 26px);filter:blur(.2px)}
.three-d-view .machine-brush-content span,.three-d-view .machine-brush-content small{position:absolute;left:clamp(24px,5vw,72px);font:700 clamp(9px,.9vw,13px)/1.2 "Courier New",monospace;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 18px rgba(255,70,80,.8)}
.three-d-view .machine-brush-content span{top:23%;color:#ff4650}
.three-d-view .machine-brush-content small{bottom:21%;max-width:270px;color:rgba(244,241,233,.78)}
.three-d-view .machine-brush-content strong{position:absolute;right:clamp(24px,5vw,72px);top:21%;color:#ff4650;font:800 clamp(56px,10vw,170px)/.78 "Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;letter-spacing:-.07em;text-align:right;text-shadow:0 0 24px rgba(255,70,80,.52)}
.three-d-view .machine-brush-canvas{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;opacity:.96;mix-blend-mode:screen;will-change:contents}
.three-d-view .machine-page--hero.machine-brush-static:hover .machine-brush-content{opacity:.85;visibility:visible;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
.three-d-view .machine-cover-pages .machine-page--concept{border-top:0!important}
.three-d-view>.machine-columns,
.three-d-view>.machine-sketch,
.three-d-view>.machine-materials,
.three-d-view>.machine-process,
.three-d-view>.machine-image-stage{background:#000!important}
.three-d-view>.machine-sketch{color:#f4f1e9}
.three-d-view>.machine-sketch .machine-section-label{color:#ff4650!important}
.three-d-view>.machine-empty-materials{background:#000!important}
@media (max-width:760px){
  .three-d-view .three-d-header{top:22px;left:22px;right:22px}
  .three-d-view .machine-cover-pages{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
}

/* Process archive: four alternating vertical steps with captions on the
   outside edge. Images keep their native proportions and are never cropped. */
.three-d-view .machine-process{max-width:1200px;margin:0 auto;padding:clamp(100px,12vw,170px) 0 140px;border-top:1px solid rgba(243,240,232,.28);background:#000!important}
.three-d-view .machine-process>.machine-section-label{margin:0 0 54px;color:#ff4650!important}
.three-d-view .machine-process-vertical{display:flex;flex-direction:column;gap:clamp(58px,8vw,112px)}
.three-d-view .process-step{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr);gap:clamp(32px,7vw,120px);align-items:center;margin:0;min-height:280px}
.three-d-view .process-step-right{grid-template-columns:minmax(0,1.3fr) minmax(170px,.7fr)}
.three-d-view .process-step img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;background:transparent!important;filter:none!important}
.three-d-view .process-step img{height:clamp(200px,24vw,360px);object-fit:contain}
.three-d-view .process-step-transparent img{mix-blend-mode:screen;filter:none!important}
.three-d-view .process-step figcaption{display:flex;flex-direction:column;gap:8px;color:#f4f1e9;align-self:center}
.three-d-view .process-step-left figcaption{grid-column:1;grid-row:1;text-align:right;align-items:flex-end}
.three-d-view .process-step-left img{grid-column:2;grid-row:1}
.three-d-view .process-step-right img{grid-column:1;grid-row:1}
.three-d-view .process-step-right figcaption{grid-column:2;grid-row:1;text-align:left;align-items:flex-start}
.three-d-view .process-step figcaption b{color:#ff4650;font:800 clamp(42px,6vw,92px)/.8 "Franklin Gothic Medium",Arial,sans-serif;letter-spacing:-.07em}
.three-d-view .process-step figcaption span{color:#f4f1e9;font:700 clamp(22px,2.5vw,38px)/1.05 "Franklin Gothic Medium",Arial,sans-serif}
.three-d-view .process-step figcaption small{color:rgba(244,241,233,.52);font:700 10px "Courier New",monospace;letter-spacing:.14em}
.three-d-view .machine-final-page{position:relative;min-height:clamp(620px,88vh,980px);display:grid;place-items:center;overflow:hidden;background:#000}
.three-d-view .machine-final-page img{position:relative;z-index:1;display:block;width:min(62vw,760px);height:min(84vh,900px);object-fit:contain;mix-blend-mode:screen}
.three-d-view .machine-final-glow{position:absolute;z-index:0;left:50%;top:42%;width:min(58vw,820px);height:clamp(150px,22vw,280px);transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(156,16,28,.9) 0%,rgba(103,8,18,.62) 38%,rgba(50,4,11,.28) 65%,transparent 78%);filter:blur(28px)}
.three-d-view .machine-reflection-copy{position:absolute;z-index:2;left:50%;top:78%;transform:translate(-50%,-50%);width:min(70vw,720px);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:rgba(244,241,233,.86);font:16px/1.55 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.08em;text-shadow:0 2px 18px rgba(0,0,0,.8);pointer-events:none}
.three-d-view .machine-more-link{position:absolute;z-index:3;right:clamp(24px,5vw,72px);bottom:clamp(24px,5vw,64px);display:inline-flex;align-items:center;gap:14px;padding:13px 17px;color:#f4f1e9;border:1px solid rgba(244,241,233,.62);font:700 10px/1 "Courier New",monospace;letter-spacing:.14em;text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease}
.three-d-view .machine-more-link span{color:#ff4650;font-size:18px;line-height:.6;transition:transform .2s ease}
.three-d-view .machine-more-link:hover,.three-d-view .machine-more-link:focus-visible{color:#000;background:#f4f1e9;border-color:#f4f1e9;transform:translateY(-3px);outline:none}
.three-d-view .machine-more-link:hover span,.three-d-view .machine-more-link:focus-visible span{color:#ff4650;transform:translateX(4px)}

/* Shared editorial rail: every archive divider and small section label uses
   the same 1200px left/right edge. */
.three-d-view .machine-thinking-header,
.three-d-view .machine-process,
.three-d-view .machine-final-page::before,
.three-d-view .three-d-footer::before{
  width:min(1200px,100%);
  margin-left:auto;
  margin-right:auto;
}
.three-d-view .machine-process{
  max-width:1200px;
  padding-left:0;
  padding-right:0;
  border-top:1px solid rgba(243,240,232,.28);
}
.three-d-view .machine-final-page::before{
  left:50%;
  right:auto;
  transform:translateX(-50%);
}
.three-d-view .three-d-footer::before{
  left:50%;
  right:auto;
  transform:translateX(-50%);
}
.three-d-view .machine-more-link{
  right:max(0px,calc((100% - 1200px)/2));
}
@media (max-width:760px){
  .three-d-view .machine-process{max-width:none;padding-left:22px;padding-right:22px}
  .three-d-view .machine-thinking-header{width:100%}
  .three-d-view .machine-final-page::before,
  .three-d-view .three-d-footer::before{width:calc(100% - 44px)}
  .three-d-view .machine-more-link{right:22px}
}
.three-d-view .machine-thinking,
.three-d-view .machine-process,
.three-d-view .machine-materials{padding-left:clamp(24px,5vw,72px);padding-right:clamp(24px,5vw,72px)}
.three-d-view .machine-thinking-header,
.three-d-view .machine-thinking>.machine-columns,
.three-d-view .machine-process,
.three-d-view .machine-materials{max-width:none}
.three-d-view .three-d-footer{position:relative;max-width:none;margin:0;padding:16px max(0px,calc((100% - 1200px)/2)) 0;border-top:0}
.three-d-view .three-d-footer::before{content:"";position:absolute;left:max(0px,calc((100% - 1200px)/2));right:max(0px,calc((100% - 1200px)/2));top:0;border-top:1px solid rgba(243,240,232,.28)}
.three-d-view .machine-thinking-header,
.three-d-view .machine-thinking>.machine-columns{width:min(1200px,100%);margin-left:auto;margin-right:auto}
.three-d-view .machine-thinking>.machine-columns article img{width:100%;height:auto;max-height:none;aspect-ratio:4 / 3;object-fit:cover;object-position:center}
.three-d-view .machine-thinking>.machine-columns article:first-child img,
.three-d-view .machine-thinking>.machine-columns article:nth-child(2) img,
.three-d-view .machine-thinking>.machine-columns article:nth-child(3) img,
.three-d-view .machine-thinking>.machine-columns article:nth-child(4) img{width:100%;height:auto;max-height:none;aspect-ratio:4 / 3;object-fit:cover;object-position:center}
.three-d-view .machine-materials{display:block}
.three-d-view .material-feature{width:min(1400px,100%);margin:clamp(20px,3vw,44px) auto 0;aspect-ratio:2.1 / 1;overflow:hidden;background:#000}
.three-d-view .material-feature img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.three-d-view .material-feature img{width:calc(100% + 6px);max-width:none;transform:translateX(-3px)}
.three-d-view .machine-side-right{font-size:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;line-height:1}
.three-d-view .machine-side-right::before{content:"Scroll to explore";font:700 clamp(12px,1.4vw,18px)/1.1 Arial,sans-serif;white-space:nowrap;color:#ff4650}
.three-d-view .machine-side-right::after{content:"↓";font:800 clamp(30px,4vw,58px)/.7 Arial,sans-serif;color:#ff4650}
.three-d-view .machine-manifesto{padding-top:clamp(120px,14vw,210px);padding-bottom:clamp(56px,7vw,100px)}
.three-d-view .machine-process{padding-top:clamp(72px,8vw,112px);padding-bottom:clamp(88px,10vw,126px)}
.three-d-view .machine-process-vertical{gap:clamp(36px,5vw,70px)}
.three-d-view .machine-process .process-step img{height:clamp(160px,18vw,270px)}
.three-d-view .machine-process .process-step figcaption b{font-size:clamp(34px,4.8vw,72px)}
.three-d-view .machine-final-page::before{content:"";position:absolute;z-index:4;top:0;left:max(0px,calc((100% - 1200px)/2));right:max(0px,calc((100% - 1200px)/2));border-top:1px solid rgba(243,240,232,.28)}
.three-d-view .material-photo-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(54px,5.1vw,82px);gap:clamp(22px,3.2vw,48px) clamp(14px,2vw,30px);align-items:stretch}
.three-d-view .material-photo{position:relative;margin:0;overflow:hidden;background:#090b10;min-width:0;isolation:isolate}
.three-d-view .material-photo::after{content:"";position:absolute;inset:0;border:1px solid rgba(244,241,233,.2);pointer-events:none;z-index:1}
.three-d-view .material-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.08);transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.three-d-view .material-photo:hover img{transform:scale(1.045);filter:saturate(1) contrast(1.04)}
.three-d-view .material-photo-01{grid-column:1 / span 3;grid-row:1 / span 3}
.three-d-view .material-photo-02{grid-column:4 / span 3;grid-row:1 / span 2}
.three-d-view .material-photo-03{grid-column:7 / span 2;grid-row:1 / span 2}
.three-d-view .material-photo-04{grid-column:9 / span 2;grid-row:1 / span 2}
.three-d-view .material-photo-05{grid-column:11 / span 2;grid-row:1 / span 2}
.three-d-view .material-photo-06{grid-column:4 / span 2;grid-row:3 / span 2}
.three-d-view .material-photo-07{grid-column:6 / span 3;grid-row:3 / span 3}
.three-d-view .material-photo-08{grid-column:9 / span 2;grid-row:3 / span 2}
.three-d-view .material-photo-09{grid-column:11 / span 2;grid-row:3 / span 3}
.three-d-view .material-photo-10{grid-column:1 / span 2;grid-row:4 / span 2}
.three-d-view .material-photo-11{grid-column:3 / span 3;grid-row:5 / span 2}
.three-d-view .material-photo-12{grid-column:9 / span 2;grid-row:6 / span 2}
.three-d-view .material-photo-13{grid-column:5 / span 3;grid-row:6 / span 2}
.three-d-view .material-photo-wall{grid-template-columns:repeat(14,minmax(0,1fr));grid-auto-rows:clamp(48px,4.4vw,72px);gap:clamp(24px,3vw,42px) clamp(12px,1.7vw,24px)}
.three-d-view .material-photo img{transition:none}
.three-d-view .material-photo:hover img{transform:none;filter:saturate(.78) contrast(1.08)}
.three-d-view .material-photo-01{grid-column:2 / span 4;grid-row:1 / span 3}
.three-d-view .material-photo-02{grid-column:6 / span 3;grid-row:1 / span 3}
.three-d-view .material-photo-03{grid-column:9 / span 2;grid-row:1 / span 2}
.three-d-view .material-photo-04{grid-column:11 / span 3;grid-row:1 / span 3}
.three-d-view .material-photo-05{grid-column:1 / span 2;grid-row:2 / span 3}
.three-d-view .material-photo-06{grid-column:3 / span 4;grid-row:4 / span 3}
.three-d-view .material-photo-07{grid-column:7 / span 3;grid-row:4 / span 3}
.three-d-view .material-photo-08{grid-column:10 / span 2;grid-row:3 / span 2}
.three-d-view .material-photo-09{grid-column:12 / span 3;grid-row:4 / span 3}
.three-d-view .material-photo-10{grid-column:1 / span 2;grid-row:6 / span 2}
.three-d-view .material-photo-11{grid-column:3 / span 3;grid-row:7 / span 3}
.three-d-view .material-photo-12{grid-column:7 / span 2;grid-row:7 / span 2}
.three-d-view .material-photo-13{grid-column:9 / span 4;grid-row:7 / span 3}
.three-d-view .material-photo-wall{grid-template-columns:repeat(16,minmax(0,1fr));grid-auto-rows:clamp(46px,4.2vw,68px);gap:clamp(22px,2.8vw,40px) clamp(10px,1.5vw,22px);align-items:stretch}
.three-d-view .material-photo-01{grid-column:3 / span 5;grid-row:1 / span 3}
.three-d-view .material-photo-02{grid-column:8 / span 4;grid-row:1 / span 2}
.three-d-view .material-photo-03{grid-column:12 / span 2;grid-row:1 / span 1}
.three-d-view .material-photo-04{grid-column:13 / span 3;grid-row:2 / span 2}
.three-d-view .material-photo-05{grid-column:1 / span 2;grid-row:2 / span 1}
.three-d-view .material-photo-06{grid-column:3 / span 5;grid-row:4 / span 2}
.three-d-view .material-photo-07{grid-column:8 / span 4;grid-row:4 / span 3}
.three-d-view .material-photo-08{grid-column:12 / span 2;grid-row:3 / span 2}
.three-d-view .material-photo-09{grid-column:14 / span 3;grid-row:4 / span 1}
.three-d-view .material-photo-10{grid-column:6 / span 2;grid-row:6 / span 1}
.three-d-view .material-photo-11{grid-column:3 / span 4;grid-row:7 / span 2}
.three-d-view .material-photo-12{grid-column:8 / span 2;grid-row:7 / span 2;aspect-ratio:1}
.three-d-view .material-photo-13{grid-column:10 / span 4;grid-row:7 / span 2}
.three-d-view .machine-process-vertical{width:min(1200px,100%);margin-left:auto;margin-right:auto}
.three-d-view .process-step:nth-child(3) img,
.three-d-view .process-step:nth-child(4) img{transform:none!important;z-index:1;aspect-ratio:569 / 406;object-fit:contain}
@media (max-width:760px){
  .three-d-view .machine-process{padding:84px 22px 90px}
  .three-d-view .process-step,.three-d-view .process-step-right{display:flex;flex-direction:column;gap:24px;align-items:stretch;min-height:0}
  .three-d-view .process-step figcaption,.three-d-view .process-step-right figcaption,.three-d-view .process-step-left figcaption{order:1;text-align:left;align-items:flex-start}
  .three-d-view .process-step img{order:2;max-height:none;height:auto}
  .three-d-view .machine-final-page{min-height:640px}
  .three-d-view .machine-final-page img{width:90vw;height:78vh}
  .three-d-view .machine-final-glow{top:38%;width:76vw;height:170px}
  .three-d-view .machine-reflection-copy{top:78%;width:82vw;font-size:13px;line-height:1.6;gap:5px}
  .three-d-view .machine-side-right{gap:8px}
  .three-d-view .machine-side-right::before{font-size:12px}
  .three-d-view .machine-side-right::after{font-size:38px}
  .three-d-view .machine-more-link{right:22px;bottom:22px;font-size:9px;gap:10px;padding:11px 13px}
  .three-d-view .machine-thinking,
  .three-d-view .machine-process,
  .three-d-view .machine-materials{padding-left:22px;padding-right:22px}
  .three-d-view .material-photo-wall{display:flex;flex-wrap:wrap;gap:26px 18px;align-items:flex-start}
  .three-d-view .material-photo{flex:0 0 auto;height:clamp(118px,29vw,178px);transform:none!important}
  .three-d-view .material-photo-01{width:62%}
  .three-d-view .material-photo-02{width:34%;margin-top:24px}
  .three-d-view .material-photo-03{width:46%;margin-left:10%;margin-top:-4px}
  .three-d-view .material-photo-04{width:38%;margin-top:34px}
  .three-d-view .material-photo-05{width:54%;margin-left:4%}
  .three-d-view .material-photo-06{width:40%;margin-left:18%;margin-top:14px}
  .three-d-view .material-photo-07{width:62%;margin-top:-6px}
  .three-d-view .material-photo-08{width:34%;margin-top:28px}
  .three-d-view .material-photo-09{width:58%;margin-left:16%;margin-top:4px}
  .three-d-view .material-photo-10{width:30%;margin-top:18px}
  .three-d-view .material-photo-11{width:46%;margin-left:8%;margin-top:-4px}
  .three-d-view .material-photo-12{width:34%;margin-left:12%;margin-top:20px}
  .three-d-view .material-photo-13{width:48%;margin-left:4%;margin-top:0}
  .three-d-view .material-photo:hover img{transform:none}
  .three-d-view .material-feature{width:100%;margin-top:24px;aspect-ratio:1.45 / 1}
  .three-d-view .process-step:nth-child(3) img,
  .three-d-view .process-step:nth-child(4) img{transform:none!important;aspect-ratio:auto;object-fit:contain}
}

/* Full-screen typewriter study opened from the focused desk object. */
.typewriter-detail-open{overflow:hidden}
.typewriter-detail-backdrop{position:fixed;inset:0;z-index:250;background:rgba(220,235,240,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.typewriter-detail-view{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:0;background:rgba(233,231,226,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#2b2019;overflow:hidden}
.typewriter-detail-view[hidden],.typewriter-detail-backdrop[hidden]{display:none}

/* Final rail alignment pass: dividers share the exact edge of the 1200px
   editorial content column and section labels. */
.three-d-view .machine-thinking-header{width:min(1200px,100%);max-width:none;margin-left:auto;margin-right:auto}
.three-d-view .machine-process{width:min(1200px,100%);max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;border-top:1px solid rgba(243,240,232,.28)}
.three-d-view .machine-final-page::before{left:50%;right:auto;width:min(1200px,100%);transform:translateX(-50%)}
.three-d-view .three-d-footer::before{left:50%;right:auto;width:min(1200px,100%);transform:translateX(-50%)}
.three-d-view .machine-more-link{right:max(0px,calc((100% - 1200px)/2))}
@media (max-width:760px){
  .three-d-view .machine-thinking-header{width:100%;padding-left:22px;padding-right:22px}
  .three-d-view .machine-process{width:100%;padding-left:22px;padding-right:22px}
  .three-d-view .machine-final-page::before,.three-d-view .three-d-footer::before{width:calc(100% - 44px)}
  .three-d-view .machine-more-link{right:22px}
}

/* The concept spread begins lower on the continuous cover so its opening
   title lands on the requested second-page position. */
.three-d-view .machine-page--concept{
  padding-top:clamp(190px,17vw,285px);
}
@media (max-width:760px){
  .three-d-view .machine-page--concept{padding-top:112px}
}
.typewriter-detail-close{position:fixed;z-index:265;top:clamp(18px,3vw,44px);right:clamp(18px,3vw,44px);width:48px;height:48px;border:0;border-radius:50%;background:#33251d;color:#fff7e7;font-size:28px;line-height:1;cursor:pointer;box-shadow:none;transition:transform .2s ease,background .2s ease}
.typewriter-detail-close:hover,.typewriter-detail-close:focus-visible{background:#9d4c42;transform:rotate(8deg);outline:none}
.typewriter-detail-frame{position:relative;width:min(1840px,95vw);height:min(1150px,90vh);border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.typewriter-detail-frame::before{display:none}
#typewriter-detail-scene{position:absolute;inset:0;z-index:1}
#typewriter-detail-scene canvas{display:block;width:100%;height:100%}
.typewriter-note-card{position:absolute;z-index:4;left:50%;top:42%;width:min(52%,680px);height:24%;display:grid;grid-template-rows:auto 1px minmax(0,1fr) auto;gap:0;padding:20px 24px 16px;color:#3a2a24;background:#f7f0dc;border:1px solid rgba(75,53,40,.2);border-radius:3px;box-shadow:0 7px 0 rgba(54,35,25,.12);transform:translateX(-50%) rotate(-.4deg);font-family:"Courier New",monospace;pointer-events:auto}
.typewriter-note-head{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:clamp(9px,.9vw,15px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.typewriter-note-rule{height:1px;margin:14px 0 9px;background:rgba(70,51,39,.48)}
.typewriter-note-input{width:100%;height:100%;min-height:0;padding:16px 2px 8px;color:#4a3930;background:transparent;border:0;outline:0;resize:none;font:clamp(15px,1.45vw,24px)/1.35 "Courier New",monospace}
.typewriter-note-input::placeholder{color:rgba(74,57,48,.48);opacity:1}
.typewriter-note-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:10px;font-size:clamp(9px,.85vw,14px);font-weight:700;letter-spacing:.04em}
.typewriter-note-submit{padding:11px 18px;color:#fff7e7;background:#5a2026;border:0;border-radius:2px;font:700 clamp(9px,.9vw,14px)/1 "Courier New",monospace;letter-spacing:.08em;cursor:pointer;transition:background .2s ease,transform .2s ease}
.typewriter-note-submit:hover,.typewriter-note-submit:focus-visible{background:#7d2b35;transform:translateY(-2px);outline:none}
.typed-note{position:absolute;z-index:5;width:18%;aspect-ratio:1.24 / 1;min-height:0;padding:30px 18px 18px;color:#43352d;background:var(--typed-color,#fff4cb);border:1px solid rgba(90,55,32,.12);border-radius:4px;box-shadow:5px 7px 0 rgba(63,38,25,.11);font:700 clamp(15px,1.45vw,24px)/1.35 "Courier New",monospace;letter-spacing:normal;white-space:pre-wrap;overflow-wrap:anywhere;cursor:grab;user-select:none;animation:typed-note-pop .55s cubic-bezier(.2,.8,.2,1) both}
.typed-note::before{content:"";position:absolute;left:50%;top:10px;width:14px;height:14px;border-radius:50%;background:#b24748;box-shadow:inset -2px -2px 0 rgba(72,26,24,.2);transform:translateX(-50%)}
.typed-note:active{cursor:grabbing}
@keyframes typed-note-pop{from{opacity:0;transform:translateY(22px) scale(.88) rotate(-4deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(var(--typed-rotation))}}
.typewriter-detail-caption{display:none}
.typewriter-detail-caption span{font:700 10px/1 "Courier New",monospace;letter-spacing:.16em}.typewriter-detail-caption b{font:800 clamp(20px,3vw,42px)/.86 Georgia,serif;letter-spacing:.02em}

/* Archive spacing pass: the thinking divider is the section's first line;
   the process divider belongs between the last process image and the final
   installation page. */
.three-d-view .machine-thinking{padding-top:0!important}
.three-d-view .machine-page--concept{padding-bottom:clamp(82px,8vw,126px)!important}
.three-d-view .machine-page--concept .three-d-kicker{transform:translateY(clamp(18px,2.2vw,32px))}
.three-d-view .machine-materials{position:relative}
.three-d-view .machine-materials::after{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  bottom:0;
  width:min(1200px,100%);
  transform:translateX(-50%);
  border-top:1px solid rgba(243,240,232,.28);
  pointer-events:none
}
.three-d-view .machine-process{border-top:0!important;border-bottom:1px solid rgba(243,240,232,.28)!important}
.three-d-view .machine-final-page::before{display:none!important}
@media (max-width:760px){
  .three-d-view .machine-thinking{padding-top:0!important}
  .three-d-view .machine-page--concept{padding-bottom:72px!important}
  .three-d-view .machine-page--concept .three-d-kicker{transform:translateY(16px)}
  .three-d-view .machine-materials::after{width:calc(100% - 44px)}
  .three-d-view .machine-process{border-top:0!important;border-bottom:1px solid rgba(243,240,232,.28)!important}
}
@media (max-width:700px){.typewriter-detail-frame{height:84vh}.typewriter-detail-frame::before,#typewriter-detail-scene{inset:14px}.typewriter-detail-caption{left:24px;bottom:20px}.typewriter-detail-caption b{font-size:25px}.typewriter-note-card{top:39%;width:78%;height:25%;padding:13px 14px 11px}.typewriter-note-rule{margin:8px 0 5px}.typewriter-note-footer{margin-top:5px}.typewriter-note-submit{padding:9px 11px}}

/* Brand case study: a light, editorial system with deliberately varied
   image scales so the supplied artwork remains the visual source of truth. */
.brand-view-open{overflow:hidden;background:#f8f5ee;color:#20221f}
.brand-view{position:fixed;inset:0;z-index:230;overflow:auto;background:#f8f5ee;color:#20221f;padding:clamp(22px,3.5vw,58px) clamp(22px,5.2vw,92px) 0;isolation:isolate}
.brand-view[hidden]{display:none}
.brand-view-header{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;min-height:48px;margin:0 calc(-1 * clamp(22px,5.2vw,92px));padding:0 clamp(22px,5.2vw,92px) 10px;color:#20221f;background:transparent}
.brand-view-index{margin:0;font:700 11px/1.2 "Courier New",monospace;letter-spacing:.16em}
.brand-view-mark{justify-self:center;text-align:center;font:900 13px/.82 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.06em}
.brand-view-close{justify-self:end;width:44px;height:44px;border:1px solid rgba(32,34,31,.35);border-radius:50%;background:#c9f72b;color:#20221f;font:400 28px/1 Arial,sans-serif;cursor:pointer;transition:transform .2s ease,background .2s ease}
.brand-view-close:hover,.brand-view-close:focus-visible{background:#ffb1ba;transform:rotate(8deg);outline:none}
.brand-page-content{width:min(1400px,100%);margin:0 auto}
.brand-page-content h1,.brand-page-content h2,.brand-page-content p{margin:0}
.brand-hero-section{min-height:calc(100vh - 80px);display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.7fr);gap:clamp(34px,6vw,100px);align-items:center;padding:clamp(42px,6vw,96px) 0 clamp(80px,10vw,150px)}
.brand-hero-copy{align-self:center;max-width:390px}
.brand-eyebrow,.brand-section-label,.brand-hero-meta,.brand-material-grid figcaption span{font:700 10px/1.25 "Courier New",monospace;letter-spacing:.13em;text-transform:uppercase}
.brand-eyebrow{color:#ee6b84;margin-bottom:22px!important}
.brand-hero-copy h1{font:900 clamp(62px,9vw,136px)/.78 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.1em;color:#c9f72b;text-shadow:4px 4px 0 #20221f;margin-left:-.08em}
.brand-hero-lede{max-width:310px;margin-top:34px!important;font:500 clamp(15px,1.25vw,20px)/1.45 Arial,"Microsoft YaHei",sans-serif}
.brand-hero-meta{display:grid;gap:7px;margin-top:38px;color:#656960}
.brand-hero-images{position:relative;min-height:min(75vh,780px)}
.brand-hero-images figure{position:absolute;margin:0;overflow:hidden;background:#d9e5ba;border:1px solid #20221f}
.brand-hero-images img{display:block;width:100%;height:100%;object-fit:cover}
.brand-hero-images>.brand-hero-main,.brand-hero-images>.brand-hero-side{display:none!important}
.brand-hero-main{inset:5% 23% 2% 8%;transform:rotate(-2.5deg);box-shadow:12px 14px 0 rgba(32,34,31,.1)}
.brand-hero-side{width:28%;aspect-ratio:1242/1660;box-shadow:7px 8px 0 rgba(32,34,31,.08)}
.brand-hero-side-a{top:2%;right:0;transform:rotate(5deg)}
.brand-hero-side-b{right:3%;bottom:4%;transform:rotate(-6deg)}
.brand-band{border-top:1px solid rgba(32,34,31,.3);padding:clamp(58px,8vw,120px) 0 clamp(84px,11vw,160px)}
.brand-intro-section.brand-band{border-top:0}
.brand-section-label{display:flex;justify-content:space-between;gap:20px;color:#65705f;margin-bottom:clamp(42px,6vw,82px)}
.brand-section-label span:first-child{color:#ee6b84}
.brand-intro-grid{display:grid;grid-template-columns:1.05fr 1fr .3fr;gap:clamp(26px,6vw,100px);align-items:start}
.brand-intro-grid h2,.brand-guideline-layout h2,.brand-poster-heading h2,.brand-display-heading h2,.brand-material-heading h2,.brand-colour-heading h2{font:900 clamp(40px,5.5vw,82px)/.88 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.08em}
.brand-intro-grid h2{line-height:1.15}
.brand-intro-grid em,.brand-guideline-layout em,.brand-poster-heading em,.brand-display-heading em,.brand-material-heading em,.brand-colour-heading em{font-style:normal;color:#ee6b84}
.brand-intro-copy{max-width:430px;font:500 16px/1.7 Arial,"Microsoft YaHei",sans-serif;color:#444941}
.brand-intro-copy p+p{margin-top:22px}
.brand-intro-sticker{justify-self:end;display:grid;place-items:center;width:130px;aspect-ratio:1;background:#ffd44f;border-radius:50%;transform:rotate(10deg);text-align:center;font:900 13px/.95 "Courier New",monospace;border:1px solid #20221f}.brand-intro-sticker span{font-size:32px;margin-top:7px}
.brand-guideline-layout{display:grid;grid-template-columns:.8fr 1.5fr;gap:clamp(30px,7vw,120px);align-items:start}
.brand-full-page-image{margin:0;border:1px solid #20221f;background:#fffaf0;overflow:hidden}.brand-full-page-image img{display:block;width:100%;height:100%;object-fit:contain}.brand-colour-guideline{width:min(1120px,100%);margin-left:auto;margin-right:auto;aspect-ratio:2245/1587}.brand-components-image{width:min(1180px,100%);margin:clamp(34px,5vw,72px) auto 0;aspect-ratio:2245/1587}.brand-single-heading{display:flex;justify-content:space-between;gap:32px;align-items:end}.brand-single-heading h2{font:900 clamp(40px,5.5vw,82px)/.88 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.08em}.brand-single-heading h2 em{font-style:normal;color:#ee6b84}.brand-single-heading p{max-width:280px;font:500 14px/1.65 Arial,"Microsoft YaHei",sans-serif;color:#656960}
.brand-guideline-layout[hidden]{display:none!important}
.brand-guideline-section{position:relative;display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);column-gap:clamp(30px,6vw,100px);align-items:start}
.brand-guideline-section>.brand-section-label{grid-column:1 / -1}
.brand-guideline-section>.brand-colour-heading{grid-column:1 / -1}
.brand-guideline-section>.brand-guideline-clean{display:block!important;grid-column:1;grid-row:2}
.brand-guideline-clean .brand-guideline-images{display:none!important}
.brand-guideline-section>.brand-colour-guideline{grid-column:2;grid-row:2;display:block;width:100%;margin:0;transform:translateY(-10px)}
.brand-guideline-section>.brand-colour-guideline img{object-fit:contain}
.brand-guideline-section>.brand-section-label{margin-bottom:clamp(30px,4vw,56px)}
.brand-guideline-section>.brand-colour-guideline::before{content:"";position:absolute}
.brand-colour-story{position:sticky;top:100px}.brand-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:42px}.brand-swatches span{display:grid;align-content:end;gap:4px;min-height:112px;padding:10px 8px;background:var(--swatch);border:1px solid #20221f}.brand-swatches b,.brand-swatches small{font:700 8px/1.1 "Courier New",monospace}.brand-swatches small{font-weight:400}
.brand-guideline-images{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:end}.brand-guideline-image{margin:0;border:1px solid #20221f;background:#fff;overflow:hidden}.brand-guideline-image img{display:block;width:100%;height:100%;object-fit:cover}.brand-guideline-wide{aspect-ratio:1.35}.brand-guideline-tall{aspect-ratio:.8;transform:translateY(50px)}
.brand-poster-heading,.brand-display-heading,.brand-material-heading,.brand-colour-heading{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:clamp(38px,6vw,80px)}.brand-poster-heading p,.brand-display-heading p,.brand-material-heading p,.brand-colour-heading p{max-width:280px;font:500 14px/1.65 Arial,"Microsoft YaHei",sans-serif;color:#656960}
.brand-poster-row{display:grid;grid-template-columns:1fr 1.08fr .94fr;gap:clamp(15px,2.8vw,42px);align-items:end}.brand-poster{margin:0}.brand-poster img{display:block;width:100%;aspect-ratio:1242/1660;object-fit:cover;border:1px solid #20221f}.brand-poster figcaption{margin-top:12px;font:700 10px/1.2 "Courier New",monospace;letter-spacing:.12em}.brand-poster-pink{transform:translateY(38px) rotate(-2deg)}.brand-poster-blue{transform:translateY(-6px)}.brand-poster-green{transform:translateY(64px) rotate(2.5deg)}
.brand-display-grid{display:grid;grid-template-columns:1.2fr .75fr 1fr;grid-template-rows:auto auto;gap:clamp(20px,3vw,46px);align-items:start}.brand-display{margin:0}.brand-display img{display:block;width:100%;height:100%;object-fit:cover;border:1px solid #20221f;background:#fff}.display-large{grid-row:1 / span 2}.display-large img{aspect-ratio:592/828}.display-tall{margin-top:90px}.display-tall img{aspect-ratio:646/852}.display-wide{grid-column:2 / span 2;margin-top:-8px}.display-wide img{aspect-ratio:585/852}.brand-display figcaption{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:12px}.brand-display figcaption b{grid-row:span 2;color:#ee6b84;font:700 20px/1 "Courier New",monospace}.brand-display figcaption span{font:700 11px/1 "Courier New",monospace;letter-spacing:.12em}.brand-display figcaption small{font:500 12px/1.3 Arial,"Microsoft YaHei",sans-serif;color:#656960}
.brand-material-grid{display:grid;grid-template-columns:.85fr 1.25fr;gap:clamp(26px,5vw,80px);align-items:start}.brand-material-grid figure{margin:0}.brand-material-grid img{display:block;width:100%;height:100%;object-fit:contain;border:1px solid #20221f;background:#fff}.brand-material-sketch img{aspect-ratio:2245/3179}.brand-material-real{margin-top:120px!important}.brand-material-real img{aspect-ratio:4/3;object-fit:cover}.brand-material-grid figcaption{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding-top:14px}.brand-material-grid figcaption b{font:800 15px/1.2 Arial,"Microsoft YaHei",sans-serif}.brand-view-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(32,34,31,.3);padding:20px 0 28px;color:#656960;font:700 10px/1.2 "Courier New",monospace;letter-spacing:.1em}
@media (max-width:800px){.brand-view{padding:18px 18px 0}.brand-view-header{min-height:42px}.brand-view-close{width:38px;height:38px;font-size:24px}.brand-hero-section{display:block;min-height:0;padding:54px 0 80px}.brand-hero-copy{max-width:none}.brand-hero-copy h1{font-size:clamp(58px,19vw,110px)}.brand-hero-lede{max-width:480px}.brand-hero-images{min-height:108vw;margin-top:54px}.brand-hero-main{inset:2% 19% 0 3%}.brand-hero-side{width:28%}.brand-hero-side-a{right:0}.brand-hero-side-b{right:1%;bottom:2%}.brand-intro-grid,.brand-guideline-layout,.brand-material-grid{display:block}.brand-intro-sticker{margin:34px 0 0 auto}.brand-colour-story{position:static}.brand-swatches{margin-bottom:42px}.brand-guideline-images{grid-template-columns:1fr 1fr}.brand-guideline-tall{transform:translateY(28px)}.brand-poster-heading,.brand-display-heading,.brand-material-heading{display:block}.brand-poster-heading p,.brand-display-heading p,.brand-material-heading p{margin-top:22px}.brand-colour-heading{display:block}.brand-colour-heading p{margin-top:22px}.brand-poster-row{gap:16px}.brand-poster-pink{transform:translateY(24px) rotate(-2deg)}.brand-poster-green{transform:translateY(34px) rotate(2deg)}.brand-display-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.display-large{grid-row:auto;grid-column:1 / span 2}.display-tall{margin-top:0}.display-wide{grid-column:auto;margin-top:0}.brand-material-real{margin-top:50px!important}.brand-view-footer{font-size:8px}}
@media (max-width:520px){.brand-hero-meta{font-size:9px}.brand-band{padding:56px 0 82px}.brand-section-label{font-size:9px}.brand-intro-grid h2,.brand-guideline-layout h2,.brand-poster-heading h2,.brand-display-heading h2,.brand-material-heading h2,.brand-colour-heading h2{font-size:47px}.brand-swatches{gap:4px}.brand-swatches span{min-height:92px;padding:7px 5px}.brand-swatches b,.brand-swatches small{font-size:6px}.brand-poster-row{grid-template-columns:1fr;max-width:72%;margin:0 auto}.brand-poster-pink,.brand-poster-blue,.brand-poster-green{transform:none}.brand-display-grid{display:block}.brand-display{margin-bottom:40px}.brand-material-grid figcaption{display:block}.brand-material-grid figcaption b{display:block;margin-top:7px}}
.brand-guideline-section>.brand-guideline-clean .brand-colour-story{position:static}
@media (max-width:800px){.brand-guideline-section{display:block}.brand-guideline-section>.brand-guideline-clean{display:block!important}.brand-guideline-section>.brand-colour-guideline{width:100%;margin-top:34px;transform:none}.brand-guideline-clean .brand-swatches{margin-bottom:0}}

/* Pick Fox UI case study: saturated, editorial and image-led. */
.ui-view-open{overflow:hidden;background:#f4f1ff;color:#16151d}
.ui-view{position:fixed;inset:0;z-index:232;overflow:auto;background:#f4f1ff;color:#16151d;padding:clamp(20px,3vw,48px) clamp(20px,5vw,96px) 0;isolation:isolate}
.ui-view[hidden]{display:none}
.ui-view-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;min-height:48px;color:#16151d;mix-blend-mode:multiply}
.ui-view-index{margin:0;font:700 11px/1.2 "Courier New",monospace;letter-spacing:.16em}
.ui-view-wordmark{justify-self:center;text-align:center;font:900 15px/.78 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.08em}.ui-view-wordmark span{font:800 7px/1 Arial,sans-serif;letter-spacing:.08em}
.ui-view-close{justify-self:end;width:44px;height:44px;border:1px solid #16151d;border-radius:50%;background:#b8ff3d;color:#16151d;font:400 28px/1 Arial,sans-serif;cursor:pointer;transition:transform .2s ease,background .2s ease}.ui-view-close:hover,.ui-view-close:focus-visible{background:#ff714b;transform:rotate(8deg);outline:none}
.ui-page-content{width:min(1380px,100%);margin:0 auto}.ui-page-content h1,.ui-page-content h2,.ui-page-content p{margin:0}.ui-eyebrow,.ui-section-label,.ui-mini-kicker,.ui-hero-tags,.ui-ai-note{font:700 10px/1.3 "Courier New",monospace;letter-spacing:.13em;text-transform:uppercase}
.ui-hero-section{position:relative;min-height:calc(100vh - 76px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,110px);align-items:center;padding:clamp(48px,7vw,110px) 0 clamp(90px,12vw,180px);overflow:hidden}.ui-hero-copy{position:relative;z-index:2;max-width:460px}.ui-eyebrow{color:#ff714b;margin-bottom:24px!important}.ui-hero-copy h1{font:900 clamp(72px,10vw,150px)/.76 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.11em;text-shadow:5px 5px 0 #b8ff3d}.ui-hero-copy h1 em,.ui-flow-intro em,.ui-detail-copy em,.ui-result-copy em,.ui-ai-copy em{font-style:normal;color:#7c4dff}.ui-hero-copy>p:not(.ui-eyebrow){max-width:390px;margin-top:38px!important;font:500 clamp(15px,1.2vw,19px)/1.6 Arial,"Microsoft YaHei",sans-serif}.ui-hero-tags{display:grid;gap:8px;margin-top:38px;color:#555161}.ui-screen{margin:0;position:relative}.ui-screen img{display:block;width:100%;height:100%;object-fit:contain;border-radius:24px;box-shadow:16px 18px 0 rgba(22,21,29,.12)}.ui-screen-hero{width:min(370px,100%);justify-self:center;transform:rotate(4deg);z-index:2}.ui-screen-hero img{border:3px solid #16151d;background:#fff}.ui-hero-shape{position:absolute;font-weight:900;z-index:1}.shape-star{left:45%;top:17%;color:#ff714b;font-size:64px;transform:rotate(-12deg)}.shape-pill{right:1%;bottom:14%;padding:18px 22px;border:2px solid #16151d;border-radius:50%;background:#b8ff3d;font:900 12px/.9 Arial,sans-serif;transform:rotate(-9deg)}
.ui-band{border-top:1px solid rgba(22,21,29,.35);padding:clamp(64px,9vw,130px) 0 clamp(90px,13vw,180px)}.ui-section-label{display:flex;justify-content:space-between;color:#676172;margin-bottom:clamp(42px,6vw,82px)}.ui-section-label span:first-child{color:#ff714b}.ui-flow-intro{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:clamp(42px,6vw,80px)}.ui-flow-intro h2,.ui-detail-copy h2,.ui-result-copy h2,.ui-ai-copy h2{font:900 clamp(48px,6.5vw,92px)/.84 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.09em}.ui-flow-intro p,.ui-result-copy>p,.ui-detail-copy>p,.ui-ai-copy>p{max-width:320px;font:500 15px/1.7 Arial,"Microsoft YaHei",sans-serif;color:#555161}.ui-flow-grid{display:grid;grid-template-columns:1.05fr .78fr .92fr;gap:clamp(20px,4vw,62px);align-items:start}.ui-flow-grid .ui-screen img{background:#fff;border:1px solid #16151d}.ui-screen-discover{transform:translateY(44px) rotate(-2deg)}.ui-screen-orders{transform:translateY(-12px) rotate(2deg)}.ui-screen-profile{transform:translateY(78px) rotate(-2.5deg)}.ui-screen figcaption{display:flex;gap:12px;align-items:baseline;padding-top:14px;font:700 10px/1.2 "Courier New",monospace;letter-spacing:.12em}.ui-screen figcaption b{color:#ff714b;font-size:18px}
.ui-detail-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(34px,8vw,140px);align-items:center}.ui-mini-kicker{color:#ff714b;margin-bottom:24px!important}.ui-detail-copy>p:not(.ui-mini-kicker),.ui-ai-copy>p:not(.ui-mini-kicker){margin-top:30px}.ui-callout{display:grid;gap:10px;margin-top:40px;padding:18px 20px;border-left:4px solid #7c4dff;background:#e6dcff;font:700 11px/1.3 "Courier New",monospace}.ui-callout b{font:900 18px/1 Arial,sans-serif}.ui-screen-detail{width:min(390px,100%);justify-self:center;transform:rotate(2.5deg)}.ui-screen-detail img{background:#fff;border:2px solid #16151d}
.ui-result-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(38px,9vw,160px);align-items:center}.ui-screen-success{width:min(355px,100%);justify-self:center;transform:rotate(-3deg)}.ui-screen-success img{background:#777}.ui-result-copy{max-width:490px}.ui-result-copy>p{margin-top:30px}.ui-result-stats{display:flex;gap:12px;margin-top:44px}.ui-result-stats span{display:grid;gap:6px;min-width:104px;padding:16px 14px;background:#b8ff3d;border:1px solid #16151d;border-radius:18px}.ui-result-stats b{font:900 28px/1 Arial,sans-serif}.ui-result-stats small{font:700 9px/1.2 "Courier New",monospace}
.ui-ai-section{background:#d8c8ff}.ui-ai-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,8vw,140px);align-items:center}.ui-ai-copy{max-width:430px}.ui-screen-ai{width:min(390px,100%);justify-self:center;transform:rotate(3deg)}.ui-screen-ai img{background:#fff;border:2px solid #16151d}.ui-ai-note{display:block;margin-top:42px;color:#ff714b}.ui-view-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(22,21,29,.35);padding:20px 0 28px;color:#676172;font:700 10px/1.2 "Courier New",monospace;letter-spacing:.1em}
@media (max-width:800px){.ui-view{padding:18px 18px 0}.ui-view-header{min-height:42px}.ui-view-close{width:38px;height:38px;font-size:24px}.ui-hero-section{display:block;min-height:0;padding:54px 0 88px}.ui-hero-copy{max-width:none}.ui-hero-copy h1{font-size:clamp(72px,20vw,120px)}.ui-screen-hero{width:min(78vw,360px);margin:62px auto 0}.shape-star{left:5%;top:40%;font-size:42px}.shape-pill{right:3%;bottom:4%}.ui-flow-intro,.ui-detail-grid,.ui-result-grid,.ui-ai-grid{display:block}.ui-flow-intro p,.ui-result-copy>p,.ui-detail-copy>p,.ui-ai-copy>p{margin-top:22px}.ui-flow-grid{grid-template-columns:1fr 1fr;gap:30px 18px}.ui-screen-discover{grid-column:1 / span 2;max-width:76%;margin:0 auto;transform:rotate(-2deg)}.ui-screen-orders{transform:translateY(16px) rotate(2deg)}.ui-screen-profile{transform:translateY(-4px) rotate(-2deg)}.ui-screen-detail,.ui-screen-success,.ui-screen-ai{margin:52px auto 0;width:min(74vw,340px)}.ui-result-copy,.ui-ai-copy{max-width:none;margin-top:52px}.ui-result-stats{flex-wrap:wrap}.ui-result-stats span{min-width:calc(33.33% - 9px)}.ui-view-footer{font-size:8px}}
@media (max-width:520px){.ui-band{padding:56px 0 82px}.ui-section-label{font-size:9px}.ui-flow-intro h2,.ui-detail-copy h2,.ui-result-copy h2,.ui-ai-copy h2{font-size:52px}.ui-flow-grid{display:block}.ui-flow-grid .ui-screen{max-width:78%;margin:0 auto 46px;transform:none}.ui-result-stats span{min-width:calc(50% - 6px)}}

/* Latest Pick Fox visual updates. */
.ui-screen-hero{width:min(680px,100%);transform:none}
.ui-screen-hero img{border:0!important;border-radius:0;box-shadow:none;background:transparent}
.ui-title-image{width:min(560px,100%);margin:0 0 30px}
.ui-title-image img{display:block;width:100%;height:auto;object-fit:contain}
.ui-final-image-section{padding-bottom:clamp(70px,10vw,150px)}
.ui-final-image{margin:0 auto;max-width:1380px;background:transparent;border-radius:18px;overflow:hidden}
.ui-final-image img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain}
.ui-flow-grid .ui-screen img{border:0;box-shadow:none}
.ui-flow-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.5vw,38px)}
.ui-screen-home,.ui-screen-discover,.ui-screen-orders,.ui-screen-profile{transform:none}
.ui-screen-detail img{border:0;box-shadow:none;background:transparent}
.ui-screen-detail{width:min(290px,100%);max-height:72vh}
.ui-screen-detail img{max-height:72vh;width:auto;max-width:100%;object-fit:contain}
.ui-screen-success{width:min(260px,100%);max-height:72vh}
.ui-screen-success img{max-height:72vh;width:auto;max-width:100%;object-fit:contain}
.ui-screen-ai{width:min(280px,100%);max-height:72vh}
.ui-screen-ai img{max-height:72vh;width:auto;max-width:100%;object-fit:contain}
.ui-final-image{height:auto;display:block;width:100%;margin:0;overflow:hidden;border-radius:0}
.ui-final-image img{display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:contain}
@media (max-width:800px){.ui-flow-grid{grid-template-columns:1fr 1fr;gap:30px 18px}.ui-screen-home{grid-column:1 / span 2;max-width:76%;margin:0 auto}.ui-screen-discover{grid-column:auto;max-width:none}.ui-screen-orders,.ui-screen-profile{transform:none}}
@media (max-width:520px){.ui-flow-grid{display:block}.ui-flow-grid .ui-screen{max-width:78%;margin:0 auto 46px}.ui-screen-home{max-width:78%}}
.ui-ai-section{background:transparent}
.ui-screen-ai img{border:0;box-shadow:none}
@media (max-width:800px){.ui-title-image{width:min(88vw,520px);margin-bottom:24px}.ui-final-image{border-radius:0}.ui-final-image img{max-height:none}}
@media (max-width:800px){.ui-screen-detail,.ui-screen-success,.ui-screen-ai{width:min(68vw,290px);max-height:none}.ui-screen-detail img,.ui-screen-success img,.ui-screen-ai img{max-height:none;width:100%}.ui-final-image{height:auto;aspect-ratio:1.746;display:block}.ui-final-image img{width:100%;height:auto;max-width:none}}
.brand-components-image{border:0!important;background:transparent!important}
.brand-components-image img{border:0!important}

/* More 3D works: a dark, DriftWall-inspired archive page. */
.machine-works-view{position:fixed;inset:0;z-index:260;display:block;overflow:hidden;background:#060010;color:#f4f1e9;isolation:isolate}
.machine-works-view[hidden]{display:none}
.machine-works-close{position:absolute;top:24px;right:clamp(24px,5vw,72px);z-index:5;width:44px;height:44px;border:1px solid rgba(244,241,233,.5);border-radius:50%;background:rgba(6,0,16,.5);color:#f4f1e9;font:300 30px/1 Arial,sans-serif;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.machine-works-close:hover{background:#f4f1e9;color:#050505;transform:rotate(90deg)}
.machine-works-wall{position:absolute;inset:0;overflow:hidden;perspective:1200px;mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%);background:#060010}
.machine-works-wall::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,transparent 32%,rgba(6,0,16,.62) 100%);opacity:.65}
.drift-wall-vanilla{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;width:100%;height:calc(100% + 180px);padding:0;transform:translate3d(var(--drift-parallax-x,0px),var(--drift-parallax-y,0px),0) rotateX(3deg) rotateZ(-1deg) scale(1.06);transform-origin:center;transform-style:preserve-3d}
.drift-wall-column{position:relative;overflow:visible;min-width:0;will-change:transform;z-index:1}
.drift-wall-column.is-hovered{z-index:30}
.drift-wall-track{display:flex;flex-direction:column;gap:18px;padding-top:54px;will-change:transform}
.drift-wall-column:nth-child(even) .drift-wall-track{padding-top:174px}
.drift-tile{position:relative;flex:0 0 auto;width:100%;height:auto;aspect-ratio:1.18;display:block;padding:0;overflow:hidden;border-radius:18px;background-color:#f4f1e9;background-size:cover;background-position:center;box-shadow:0 18px 38px rgba(0,0,0,.55);transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .35s,box-shadow .35s;cursor:default;will-change:transform}
.drift-tile::before{content:"";position:absolute;inset:0;background:rgba(8,5,16,.28);transition:background .35s;pointer-events:none}
.drift-tile::after{display:none}
.drift-tile span,.drift-tile b{display:none}
.drift-tile-wide,.drift-tile-tall,.drift-tile-square{height:auto}
.drift-wall-track.is-paused{will-change:auto}
.drift-tile.is-active,.drift-tile:hover{transform:translate3d(0,-58px,240px) scale(1.28);filter:brightness(1.34) saturate(1.14);box-shadow:0 44px 88px rgba(0,0,0,.84);z-index:60}
.drift-tile.is-active::before{background:rgba(8,5,16,.05)}
body.machine-works-open{overflow:hidden;background:#050505}
@media (max-width:760px){.machine-works-close{top:18px;right:18px;width:40px;height:40px;font-size:27px}.drift-wall-vanilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;transform:translate3d(var(--drift-parallax-x,0px),var(--drift-parallax-y,0px),0) rotateX(3deg) rotateZ(-1deg) scale(1.04)}.drift-wall-column:nth-child(n+4){display:none}}
@media (max-width:480px){.drift-wall-vanilla{grid-template-columns:repeat(2,minmax(0,1fr));height:calc(100% + 120px);transform:translate3d(var(--drift-parallax-x,0px),var(--drift-parallax-y,0px),0) rotateX(2deg) rotateZ(0) scale(1.02)}.drift-wall-column:nth-child(n+3){display:none}}
/* UI case-study review refinements */
.ui-result-grid,.ui-result-grid > *, .ui-result-grid img{box-shadow:none!important}

/* Pick Fox hero: tighter top, larger assets, pop decorations. */
.ui-hero-section{
  --title-ink-left: 8.724%;
  --title-ink-span: 79.948%;
  --hero-visual-inset-bottom: 5.8%;
  min-height:calc(100vh - 64px);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "copy visual";
  gap:clamp(6px,1vw,14px) clamp(16px,2.4vw,36px);
  align-items:stretch;
  padding:clamp(2px,0.6vw,8px) 0 clamp(64px,8vw,120px);
  overflow:visible;
}
.ui-hero-section > .ui-eyebrow{
  grid-area:eyebrow;
  justify-self:start;
  align-self:start;
  margin:0!important;
  color:#ff714b;
}
.ui-hero-copy{
  grid-area:copy;
  position:relative;
  z-index:2;
  max-width:none;
  justify-self:stretch;
  align-self:stretch;
  width:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:visible;
}
.ui-title-image{
  display:block;
  width:100%;
  max-width:none;
  margin:-18px 0 6px;
  overflow:visible;
}
.ui-title-image img{
  display:block;
  width:calc(100% * 100 / 79.948);
  max-width:none;
  height:auto;
  margin-left:calc(-100% * 8.724 / 79.948);
  object-fit:contain;
  object-position:left center;
}
.ui-hero-copy>p{
  margin-top:12px!important;
  max-width:420px;
}
.ui-hero-tags{
  margin-top:auto;
  padding-top:18px;
}
.ui-screen-hero{
  grid-area:visual;
  width:100%;
  max-width:none;
  justify-self:stretch;
  align-self:end;
  z-index:2;
  margin:0;
  overflow:visible;
}
.ui-screen-hero img{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 calc(var(--hero-visual-inset-bottom) * -1);
}
.ui-hero-shape{
  position:absolute;
  z-index:1;
  pointer-events:none;
  font-weight:900;
  will-change:transform,opacity;
  transform-origin:center;
}
.shape-star{
  left:auto;
  right:22%;
  top:0;
  color:#ff714b;
  font-size:clamp(92px,9vw,150px);
  transform:rotate(-18deg) scale(0);
}
.shape-pill{
  right:-2%;
  bottom:2%;
  z-index:4;
  width:clamp(108px,11vw,156px);
  height:clamp(108px,11vw,156px);
  padding:0;
  display:grid;
  place-items:center;
  border:2px solid #16151d;
  border-radius:50%;
  background:#b8ff3d;
  font:900 clamp(12px,1.15vw,16px)/.9 Arial,sans-serif;
  text-align:center;
  transform:rotate(-12deg) scale(0);
}
.shape-dot{
  left:46%;
  top:36%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#7c4dff;
  transform:scale(0);
}
.shape-ring{
  left:48%;
  top:8%;
  width:clamp(34px,3.2vw,48px);
  height:clamp(34px,3.2vw,48px);
  border:3px solid #ff714b;
  border-radius:50%;
  background:transparent;
  transform:scale(0);
}
.shape-plus{
  left:1%;
  top:52%;
  color:#16151d;
  font:900 clamp(16px,1.5vw,22px)/1 Arial,sans-serif;
  transform:rotate(16deg) scale(0);
}
.shape-diamond{
  right:3%;
  top:28%;
  width:11px;
  height:11px;
  background:#b8ff3d;
  border:2px solid #16151d;
  transform:rotate(45deg) scale(0);
}
.shape-bolt{
  left:43%;
  bottom:3%;
  color:#7c4dff;
  font-size:clamp(52px,5.2vw,84px);
  transform:rotate(22deg) scale(0);
}
.ui-hero-shape.is-popped{opacity:1}
@media (min-width:801px){
  .ui-hero-copy{max-width:none}
  .ui-title-image{width:100%}
}
@media (max-width:800px){
  .ui-hero-section{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:0;
    padding:12px 0 72px;
    overflow:hidden;
  }
  .ui-hero-section > .ui-eyebrow{order:0;margin-bottom:8px!important}
  .ui-hero-copy{order:1;max-width:none;min-height:0}
  .ui-title-image{width:100%;margin:-8px 0 8px}
  .ui-hero-tags{margin-top:28px;padding-top:0}
  .ui-screen-hero{order:2;width:min(92vw,520px);margin:36px auto 0;justify-self:center;align-self:center}
  .ui-screen-hero img{margin-bottom:0}
  .shape-star{left:auto;right:6%;top:2%;font-size:64px}
  .shape-pill{right:2%;bottom:0;width:88px;height:88px;z-index:4}
  .shape-dot{left:8%;top:auto;bottom:22%;width:8px;height:8px}
  .shape-ring{left:auto;right:18%;top:48%;width:28px;height:28px}
  .shape-plus{left:4%;top:auto;bottom:38%;font-size:18px}
  .shape-diamond{right:8%;top:auto;bottom:16%;width:10px;height:10px}
  .shape-bolt{left:auto;right:28%;bottom:8%;font-size:42px}
}
@media (prefers-reduced-motion:reduce){
  .ui-hero-shape{transform:none!important;opacity:1!important}
}
/* Homepage desktop layout: give the desk more room and balance the header edges. */
@media (min-width:901px) {
  .site-shell { max-width: 1760px; padding-left: clamp(18px, 2.2vw, 38px); padding-right: clamp(18px, 2.2vw, 38px); }
  .site-header { gap: clamp(28px, 3vw, 54px); }
  .nav-links { flex: 1 1 auto; gap: clamp(26px, 3vw, 54px); justify-content: center; }
  .nav-links a { font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .07em; }
  .nav-links span { font-size: clamp(10px, .72vw, 12px); }
  .wordmark strong { font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .07em; }
  .wordmark small { font-size: clamp(10px, .72vw, 12px); }
  .desktop-scene { width: min(100%, calc((100vh - 92px) * 1.68)); aspect-ratio: 1.68; }
  .desk-section { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .desktop-scene.desk-focus-ready { transform: none !important; } }
/* Popup display reference image replaces the previous three-card grid. */
.brand-display-grid.is-reference-only{display:block!important}
.brand-display-reference{width:min(1380px,100%);margin:0 auto;border:0!important;background:transparent!important;overflow:hidden}
.brand-display-reference img{display:block;width:100%;height:auto;border:0!important;box-shadow:none!important;object-fit:contain}

/* Horizontal parallax gallery for the brand touchpoints section. */
.brand-material-grid.horizontal-parallax-gallery{display:block;position:relative;margin:0;overflow:visible}
.horizontal-parallax-viewport{position:relative;width:100%;height:clamp(225px,29.25vw,465px);overflow:hidden;background:transparent}
.horizontal-parallax-track{display:flex;align-items:center;gap:clamp(18px,2.8vw,44px);width:max-content;height:100%;padding:0 clamp(18px,5vw,76px);will-change:transform}
.horizontal-parallax-card{position:relative;flex:0 0 clamp(300px,39vw,620px);aspect-ratio:4 / 3;height:auto;align-self:center;margin:0;overflow:hidden;background:transparent}

.horizontal-parallax-card img{display:block;width:100%;height:100%;border:0!important;object-fit:cover;filter:saturate(.94) contrast(1.04);transition:filter .35s ease}
.horizontal-parallax-card:hover img{filter:saturate(1.12) contrast(1.06)}
.horizontal-parallax-card figcaption{position:absolute;left:18px;bottom:16px;color:#fff;font:700 10px/1.2 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.horizontal-parallax-gallery.horizontal-parallax-active{padding-bottom:0}
.horizontal-parallax-gallery.horizontal-parallax-active .horizontal-parallax-viewport{will-change:transform}
.horizontal-parallax-gallery.horizontal-parallax-fallback .horizontal-parallax-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}
.horizontal-parallax-gallery.horizontal-parallax-fallback .horizontal-parallax-track{transform:none!important}
.horizontal-parallax-gallery.horizontal-parallax-fallback .horizontal-parallax-card{scroll-snap-align:start}
.horizontal-parallax-gallery.horizontal-parallax-reduced .horizontal-parallax-card img{transition:none}
@media (max-width:800px){
  .horizontal-parallax-viewport{height:clamp(220px,58.5vw,300px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .horizontal-parallax-track{height:100%;gap:14px;padding:0 18px}
  .horizontal-parallax-card{flex-basis:min(78vw,390px);height:auto!important;align-self:center!important;scroll-snap-align:center}
  .horizontal-parallax-card figcaption{left:14px;bottom:13px;font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .horizontal-parallax-card img{transition:none}
  .horizontal-parallax-viewport{scroll-behavior:auto}
}

/* User-supplied colour reference replaces the old swatches and framed guideline. */
.brand-guideline-section>.brand-colour-reference{grid-column:1 / -1;justify-self:center;width:min(1400px,100%);max-width:100%;margin:0 auto}
.brand-colour-reference{display:block;width:min(1400px,100%);margin:0 auto;overflow:visible}
.brand-colour-reference img{display:block;width:100%;max-width:100%;height:auto;margin:0 auto;border:0;object-fit:contain}

/* The touchpoint gallery scrolls horizontally without a pinned spacer. */
.horizontal-parallax-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:auto}
.horizontal-parallax-viewport::-webkit-scrollbar{display:none}
.horizontal-parallax-track{transform:none!important}
.horizontal-parallax-gallery.horizontal-parallax-active{padding-bottom:0}

/* Wheel / swipe cue under the brand touchpoints gallery. */
.horizontal-parallax-scroll-hint{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(22px,3vw,36px) auto 0;color:#656960;opacity:1;transform:translateY(0);transition:opacity .45s ease,transform .45s ease,visibility .45s}
.horizontal-parallax-scroll-hint.is-hidden{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}
.horizontal-parallax-scroll-mouse{position:relative;display:block;width:18px;height:28px;border:1.5px solid #20221f;border-radius:11px;flex:0 0 auto}
.horizontal-parallax-scroll-mouse i{position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;border-radius:2px;background:#ee6b84;animation:parallax-wheel-nudge 1.35s cubic-bezier(.45,0,.2,1) infinite}
.horizontal-parallax-scroll-copy{display:inline-flex;align-items:baseline;gap:10px;font:700 10px/1.2 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase}
.horizontal-parallax-scroll-copy em{font-style:normal;color:#ee6b84}
.horizontal-parallax-scroll-copy b{font:500 11px/1.2 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.04em;text-transform:none;color:#8a9184}
@keyframes parallax-wheel-nudge{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(8px);opacity:.25}}
@media (max-width:800px){
  .horizontal-parallax-scroll-hint{gap:12px;margin-top:18px}
  .horizontal-parallax-scroll-copy{gap:8px;font-size:9px}
  .horizontal-parallax-scroll-copy b{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .horizontal-parallax-scroll-mouse i{animation:none}
  .horizontal-parallax-scroll-hint{transition:none}
}

/* Brand homepage: DOD-style title row + complete image that expands, then the
   next page covers it while the hero fades to the cream ground. */
.brand-hero-zoom{
  position:relative;
  height:320vh;
  width:auto;
  margin-left:calc(-1 * clamp(22px,5.2vw,92px));
  margin-right:calc(-1 * clamp(22px,5.2vw,92px));
  margin-top:calc(clamp(22px,3.5vw,58px) * -1);
  color:#20221f;
}
.brand-hero-zoom-pin{
  position:sticky;
  top:calc(clamp(22px,3.5vw,58px) * -1);
  z-index:1;
  height:100vh;
  overflow:hidden;
  background:#f8f5ee;
}
.brand-hero-zoom-copy{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px,4vw,80px);
  padding:clamp(64px,9vh,88px) clamp(22px,5.2vw,92px) 0;
  pointer-events:none;
}
.brand-hero-zoom-title{
  width:auto;
  max-width:none;
  margin:0;
  font:900 clamp(42px,5.6vw,80px)/.88 Arial,"Microsoft YaHei",sans-serif;
  letter-spacing:-.06em;
  color:#20221f;
  text-shadow:none;
}
.brand-hero-zoom-title span{display:block;text-align:left}
.brand-hero-zoom-lede{
  max-width:16em;
  margin:0 0 .18em;
  font:500 clamp(14px,1.15vw,18px)/1.6 Arial,"Microsoft YaHei",sans-serif;
  color:#20221f;
  text-align:right;
}
.brand-hero-zoom-frame{
  position:absolute;
  z-index:1;
  margin:0;
  overflow:hidden;
  background:#f8f5ee;
  will-change:left,top,width,height,transform;
}
.brand-hero-zoom-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.brand-hero-zoom-scroll{
  position:absolute;
  z-index:3;
  left:50%;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#20221f;
  box-shadow:0 10px 28px rgba(32,34,31,.1);
  transform:translate(-50%,-50%);
  pointer-events:none;
  font:600 18px/1 Arial,sans-serif;
}
.brand-hero-zoom-scroll span{
  display:block;
  animation:brand-hero-arrow 1.4s ease-in-out infinite;
}
@keyframes brand-hero-arrow{
  0%,100%{transform:translateY(-2px)}
  50%{transform:translateY(4px)}
}
.brand-page-sheet{
  position:relative;
  z-index:6;
  margin-top:-100vh;
  margin-left:calc(-1 * clamp(22px,5.2vw,92px));
  margin-right:calc(-1 * clamp(22px,5.2vw,92px));
  padding:0 clamp(22px,5.2vw,92px);
  background:#f8f5ee;
}
@media (max-width:800px){
  .brand-hero-zoom{margin-left:-18px;margin-right:-18px;margin-top:-18px}
  .brand-hero-zoom-pin{top:-18px}
  .brand-hero-zoom-copy{display:block;padding:78px 18px 0}
  .brand-hero-zoom-title{font-size:clamp(40px,12vw,64px)}
  .brand-hero-zoom-lede{max-width:none;margin-top:14px;text-align:left}
  .brand-page-sheet{margin-left:-18px;margin-right:-18px;padding:0 18px}
  .brand-view-header{margin:0 -18px;padding:0 18px 8px}
}
@media (prefers-reduced-motion:reduce){
  .brand-hero-zoom-scroll span{animation:none}
}

/* 3D archive labels and dividers share the first-screen header gutter. */
.three-d-view{--machine-gutter:clamp(24px,5vw,72px)}
.three-d-view .machine-thinking,
.three-d-view .machine-materials,
.three-d-view .machine-process,
.three-d-view .three-d-footer{
  width:auto;
  max-width:none;
  margin-left:calc(var(--machine-gutter) * -1);
  margin-right:calc(var(--machine-gutter) * -1);
  padding-left:var(--machine-gutter);
  padding-right:var(--machine-gutter);
}
.three-d-view .machine-thinking-header,
.three-d-view .machine-thinking>.machine-columns,
.three-d-view .machine-process-vertical,
.three-d-view .machine-process{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.three-d-view .machine-thinking-header{
  padding-left:0;
  padding-right:0;
}
.three-d-view .machine-thinking>.machine-columns{padding-left:0;padding-right:0}
.three-d-view .machine-materials::after,
.three-d-view .three-d-footer::before{
  left:var(--machine-gutter);
  right:var(--machine-gutter);
  width:auto;
  transform:none;
}
.three-d-view .three-d-footer{padding-top:16px;padding-bottom:0}
.three-d-view .machine-more-link{right:var(--machine-gutter)}
@media (max-width:760px){
  .three-d-view{--machine-gutter:22px}
  .three-d-view .machine-thinking-header,
  .three-d-view .machine-thinking>.machine-columns{padding-left:0;padding-right:0}
}

/* Pick Fox: three story pages as large cards with iPhone 17 Pro mockups. */
.ui-detail-section.ui-band,
.ui-result-section.ui-band,
.ui-ai-section.ui-band{
  border-top:0;
  padding:0 0 clamp(22px,3vw,36px);
}
.ui-flow-section + .ui-phone-story{padding-top:clamp(12px,2vw,24px)}
.ui-phone-story{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.ui-phone-story-cards{
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  gap:0;
}
.ui-device-card-phone{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.ui-device-card-phone .iphone-17pro{
  position:absolute;
  top:0;
  right:clamp(64px,8vw,120px);
  width:min(318px,34vw);
}
.ui-device-card{
  position:relative;
  overflow:hidden;
  border-radius:36px;
  padding:clamp(26px,3.4vw,48px) clamp(220px,34vw,400px) clamp(36px,6vw,72px) clamp(26px,4vw,56px);
  background:linear-gradient(180deg,#fbf9ff 0%,#ece6ff 100%);
  min-height:min(72vh,680px);
}
.ui-device-card-ai{background:linear-gradient(180deg,#f6f0ff 0%,#e3d7ff 100%)}
.ui-device-card .ui-section-label{
  justify-content:flex-start;
  gap:clamp(14px,1.6vw,28px);
  margin-bottom:clamp(22px,3vw,40px);
}
.ui-device-card-body{
  display:block;
}
.ui-device-card .ui-detail-copy,
.ui-device-card .ui-result-copy,
.ui-device-card .ui-ai-copy{
  position:relative;
  z-index:2;
  max-width:460px;
  padding-bottom:0;
}
.iphone-17pro{
  position:relative;
  z-index:1;
  width:min(338px,100%);
  margin:0;
  perspective:1800px;
  isolation:isolate;
}
.iphone-17pro-inner{
  position:relative;
  aspect-ratio:1206 / 2622;
  padding:14px 13px;
  border-radius:52px;
  background:
    linear-gradient(125deg,#8a8a90 0%,#3f3f44 14%,#1c1c1f 40%,#101012 74%,#2a2a2e 100%);
  box-shadow:
    -18px 36px 60px rgba(22,21,29,.28),
    -6px 12px 0 rgba(22,21,29,.05),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 0 0 1px rgba(255,255,255,.12);
  transform:rotateY(-32deg) rotateX(8deg) rotateZ(4deg);
  transform-origin:78% 70%;
  will-change:transform;
}
.iphone-17pro-chassis{
  position:absolute;
  inset:0;
  z-index:0;
  transform-style:preserve-3d;
  pointer-events:none;
}
.iphone-17pro-lcd{
  z-index:1;
  background:transparent;
  box-shadow:none;
  transform-style:flat;
}
.iphone-17pro-depth{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  transform-style:preserve-3d;
}
.iphone-17pro-depth i{
  position:absolute;
  inset:0;
  border-radius:52px;
  background:linear-gradient(180deg,#5c5c62 0%,#2c2c30 28%,#161618 100%);
}
.iphone-17pro-depth i:nth-child(1){transform:translateZ(-2px)}
.iphone-17pro-depth i:nth-child(2){transform:translateZ(-4px)}
.iphone-17pro-depth i:nth-child(3){transform:translateZ(-6px)}
.iphone-17pro-depth i:nth-child(4){transform:translateZ(-8px)}
.iphone-17pro-depth i:nth-child(5){transform:translateZ(-10px)}
.iphone-17pro-depth i:nth-child(6){transform:translateZ(-12px)}
.iphone-17pro-depth i:nth-child(7){transform:translateZ(-14px)}
.iphone-17pro-depth i:nth-child(8){transform:translateZ(-16px);background:#121214}
.iphone-17pro-screen{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:40px;
  background:#050505;
  isolation:isolate;
  -webkit-mask-image:linear-gradient(#fff 0 100%);
  mask-image:linear-gradient(#fff 0 100%);
}
.iphone-17pro-reel{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:300%;
}
.iphone-17pro-reel img{
  display:block;
  flex:0 0 auto;
  width:100%;
  height:33.333%;
  margin:0 0 -1px;
  object-fit:cover;
  object-position:top center;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#050505;
}
.iphone-17pro-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.18) 0%,transparent 28%,transparent 62%,rgba(255,255,255,.05) 100%);
}
.iphone-17pro-btn{
  position:absolute;
  z-index:3;
  background:#1a1a1d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.iphone-17pro-btn.silent{
  left:-3px;
  top:14%;
  width:3px;
  height:6%;
  border-radius:2px 0 0 2px;
}
.iphone-17pro-btn.vol-up{
  left:-4px;
  top:24%;
  width:4px;
  height:8%;
  border-radius:2px 0 0 2px;
}
.iphone-17pro-btn.vol-down{
  left:-4px;
  top:34%;
  width:4px;
  height:8%;
  border-radius:2px 0 0 2px;
}
.iphone-17pro-btn.power{
  right:-4px;
  top:28%;
  width:4px;
  height:12%;
  border-radius:0 2px 2px 0;
}
@media (max-width:800px){
  .ui-phone-story{display:block}
  .ui-device-card-phone .iphone-17pro{width:min(58vw,240px);right:28px}
  .ui-device-card{padding:22px 18px 28px;min-height:0;border-radius:28px}
  .ui-device-card-body{display:block;min-height:0}
  .ui-device-card .ui-detail-copy,
  .ui-device-card .ui-result-copy,
  .ui-device-card .ui-ai-copy{max-width:none;padding-bottom:18px}
  .iphone-17pro-inner{transform:rotateY(-24deg) rotateX(8deg) rotateZ(3deg);transform-origin:50% 100%}
}
@media (prefers-reduced-motion:reduce){
  .iphone-17pro-inner{transform:none}
}