@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Permanent+Marker&display=swap'); :root{--ink:#080808;--paper:#e8e6df;--acid:#d8ff36;--mx:0px;--my:0px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:'DM Sans',sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");mix-blend-mode:screen}.nav{position:fixed;z-index:30;top:0;left:0;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;padding:22px 30px;font-size:11px;line-height:1.35;letter-spacing:.12em;mix-blend-mode:difference}.nav a{color:white;text-decoration:none}.nav-meta{text-align:center}.menu{text-align:right}.intro{height:130vh;min-height:850px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 51% 48%,#242321 0,#111 32%,#040404 68%)}.intro:before{content:"";position:absolute;z-index:2;left:50%;bottom:10%;width:64vw;height:17vw;transform:translateX(-50%) perspective(500px) rotateX(67deg);background:radial-gradient(ellipse,rgba(255,245,218,.26),rgba(255,255,255,.06) 38%,transparent 70%);filter:blur(15px);animation:floorBreath 5s ease-in-out infinite}.intro:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),transparent 30%,transparent 70%,rgba(0,0,0,.82)),linear-gradient(0deg,#080808,transparent 28%);z-index:8;pointer-events:none}.beam{position:absolute;z-index:1;left:50%;top:7%;width:min(57vw,820px);height:72%;transform:translateX(calc(-50% + var(--mx))) translateY(var(--my)) rotate(-3deg);border-radius:48% 52% 46% 54% / 58% 43% 57% 42%;background:radial-gradient(ellipse at 48% 48%,rgba(255,250,231,.24) 0,rgba(255,255,255,.09) 28%,rgba(255,255,255,.025) 53%,transparent 70%);box-shadow:inset 18px 0 70px rgba(255,244,216,.05),inset -20px 0 80px rgba(255,255,255,.04);filter:blur(2px);animation:haloDrift 8s ease-in-out infinite}.beam:before,.beam:after{content:"";position:absolute;inset:6% 9%;border:1px solid rgba(255,248,226,.16);border-radius:50%;filter:blur(.3px)}.beam:after{inset:15% 18%;border-color:rgba(255,255,255,.08);filter:blur(2px)}.orbit{position:absolute;border:1px solid rgba(255,248,228,.1);border-radius:50%;left:50%;top:46%;transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) rotate(-12deg);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}.orbit-a{width:70vw;height:24vw}.orbit-b{width:43vw;height:68vw;transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) rotate(27deg);opacity:.65}.eyebrow{position:absolute;top:15%;left:50%;transform:translateX(-50%);z-index:12;font-size:10px;letter-spacing:.35em}.brush{position:absolute;z-index:3;left:50%;font-family:'Permanent Marker',cursive;font-size:clamp(100px,17vw,280px);line-height:.75;color:#eee;text-shadow:0 0 18px rgba(255,255,255,.18);opacity:.88;letter-spacing:-.07em;white-space:nowrap;transform:translate(calc(-50% + var(--mx)),calc(var(--my))) rotate(-7deg);animation:brushIn 1.4s cubic-bezier(.2,.8,.2,1) both}.brush-one{top:19%}.brush-two{top:40%;font-size:clamp(95px,15vw,240px);transform:translate(calc(-50% + var(--mx)),calc(var(--my))) rotate(6deg);animation-delay:.18s}.brush-three{top:59%;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.68);animation-delay:.32s}.character-wrap{position:absolute;z-index:6;left:50%;top:18%;width:min(31vw,440px);height:67%;transform:translate(calc(-50% + var(--mx)),var(--my));filter:drop-shadow(0 18px 24px #000)}.character{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;animation:characterIn 1.5s .2s cubic-bezier(.17,.84,.2,1) both}.intro-copy{position:absolute;z-index:12;left:4vw;bottom:12%;max-width:600px}.intro-copy h1{font-size:clamp(30px,4.2vw,65px);line-height:.98;margin:0 0 22px;letter-spacing:-.055em;font-weight:500}.intro-copy h1 em{font-weight:400;color:#aaa}.intro-copy p{max-width:430px;font-size:14px;line-height:1.55;color:#bababa}.scroll-cue{position:absolute;z-index:12;right:4vw;bottom:12%;color:white;text-decoration:none;font-size:10px;letter-spacing:.2em;display:flex;align-items:center;gap:18px}.scroll-cue i{display:block;width:52px;height:52px;border:1px solid #777;border-radius:50%;position:relative}.scroll-cue i:after{content:'↓';position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:18px;animation:bob 1.3s infinite}.work{position:relative;z-index:10;background:var(--paper);color:var(--ink);padding:110px 4vw}.section-head{display:grid;grid-template-columns:1fr 3fr;margin-bottom:110px}.section-head p{font-size:10px;letter-spacing:.2em}.section-head h2{font-size:clamp(42px,7vw,110px);line-height:.89;letter-spacing:-.065em;margin:0;font-weight:500}.section-head h2 span{color:#8a8983}.project{display:grid;grid-template-columns:70px 1.7fr 1fr 60px;align-items:center;border-top:1px solid #aaa;min-height:180px;position:relative;transition:color .35s,padding .35s;overflow:hidden}.project:last-of-type{border-bottom:1px solid #aaa}.project:before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1}.project:hover,.project:focus{color:white;padding:0 24px;outline:none}.project:hover:before,.project:focus:before{transform:none}.project-no{font-size:11px}.project h3{font-size:clamp(28px,4vw,64px);letter-spacing:-.05em;margin:0 0 8px;font-weight:500}.project p,.project-question{font-size:12px;color:#777}.project:hover p,.project:hover .project-question{color:#aaa}.arrow{font-size:28px;text-align:right}.more-projects{display:flex;justify-content:space-between;padding-top:32px;font-size:11px;letter-spacing:.08em}.about{padding:140px 4vw 160px;background:#111}.kicker{font-size:10px;letter-spacing:.25em}.about h2{font-size:clamp(42px,7vw,108px);line-height:.92;letter-spacing:-.065em;font-weight:500;margin:65px 0 90px}.about h2 em{color:var(--acid);font-style:normal}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-left:33%;font-size:15px;line-height:1.7}.about-grid p:last-child{font-size:11px;letter-spacing:.11em;color:#aaa}footer{background:var(--acid);color:#050505;padding:90px 4vw;display:flex;justify-content:space-between;align-items:flex-end}footer p{font-size:clamp(45px,9vw,140px);line-height:.78;letter-spacing:-.07em;margin:0;font-weight:700}footer p span{color:transparent;-webkit-text-stroke:2px #050505}footer a{color:#050505;text-decoration:none;border-bottom:1px solid;padding-bottom:5px;font-weight:700}.cursor{width:72px;height:72px;background:var(--acid);color:#000;border-radius:50%;position:fixed;z-index:50;pointer-events:none;display:grid;place-items:center;font-size:9px;letter-spacing:.16em;transform:translate(-50%,-50%) scale(0);transition:transform .25s;mix-blend-mode:difference}.cursor.active{transform:translate(-50%,-50%) scale(1)}@keyframes brushIn{from{opacity:0;filter:blur(18px);transform:translate(-50%,80px) rotate(-12deg) scale(1.15)}}@keyframes characterIn{from{opacity:0;filter:blur(12px);transform:translateY(90px) scale(.92)}}@keyframes haloDrift{50%{border-radius:53% 47% 56% 44% / 45% 58% 42% 55%;transform:translateX(calc(-50% + var(--mx))) translateY(calc(var(--my) + 8px)) rotate(2deg)}}@keyframes floorBreath{50%{opacity:.58;transform:translateX(-50%) perspective(500px) rotateX(67deg) scaleX(.88)}}@keyframes bob{50%{transform:translateY(6px)}}@media(max-width:700px){.nav{padding:18px}.nav-meta{display:none}.nav{grid-template-columns:1fr 1fr}.intro{height:115vh}.brush{font-size:24vw}.brush-one{top:25%}.brush-two{top:41%}.brush-three{top:57%}.character-wrap{width:66vw;top:20%;height:64%}.intro-copy{left:20px;right:20px;bottom:9%}.intro-copy p{display:none}.scroll-cue{right:20px;bottom:3%}.scroll-cue span{display:none}.section-head{display:block;margin-bottom:70px}.section-head p{margin-bottom:35px}.project{grid-template-columns:42px 1fr 30px;min-height:135px}.project-question{display:none}.project h3{font-size:28px}.more-projects{display:block;line-height:2}.about-grid{grid-template-columns:1fr;margin-left:0}.cursor{display:none}footer{display:block}footer a{display:inline-block;margin-top:60px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.cursor{display:none}} /* Clean editorial intro */ .intro{background:linear-gradient(115deg,#0d0d0d 0%,#202020 48%,#111 100%)} .intro:before{display:none} .intro:after{background:linear-gradient(90deg,rgba(0,0,0,.48),transparent 32%,transparent 68%,rgba(0,0,0,.48)),linear-gradient(0deg,#080808,transparent 24%)} .beam,.orbit,.brush{display:none} .character-wrap{top:14%;width:min(36vw,520px);height:72%;filter:drop-shadow(0 24px 34px rgba(0,0,0,.42))} .character{mix-blend-mode:normal;filter:brightness(1.32) contrast(.9) saturate(.62)} .eyebrow{color:#c9c9c9} @media(max-width:700px){.character-wrap{top:16%;width:78vw;height:68%}.intro{background:linear-gradient(135deg,#111,#242424 52%,#101010)}} /* Scroll into the character's eye */ .intro{height:250vh;min-height:1700px;overflow:clip;background:#080808} .intro:after{display:none} .intro-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:linear-gradient(115deg,#0d0d0d 0%,#202020 48%,#111 100%);transform-origin:50.5% 21%;will-change:transform,filter,opacity;backface-visibility:hidden} .intro-stage:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 32%,transparent 68%,rgba(0,0,0,.45)),linear-gradient(0deg,#080808,transparent 23%)} .intro-copy,.scroll-cue{transition:opacity .12s linear} .eye-detail{position:fixed;inset:0;z-index:9;display:grid;place-items:center;pointer-events:none;opacity:0;background:#080808;transform-origin:44% 37%;will-change:transform,opacity,filter;backface-visibility:hidden} .eye-detail-image{width:100%;height:100%;object-fit:contain;filter:contrast(1.02) saturate(.88)} .work{position:relative;z-index:15} @media(max-width:700px){.intro{height:225vh;min-height:1450px}.intro-stage{transform-origin:50.5% 22%;background:linear-gradient(135deg,#111,#242424 52%,#101010)}.eye-detail{transform-origin:44% 38%}} /* Earth-tone direction — calm, tactile and editorial */ :root{--ink:#1a2018;--paper:#e7dfcf;--acid:#8ea36b;--forest:#263526;--brown:#5d4939;--sand:#c9b99c} body{background:var(--forest)} .noise{opacity:.075} .intro{height:110vh;min-height:760px;overflow:hidden;background:var(--forest)} .intro-stage{position:relative;top:auto;height:100%;overflow:hidden;transform:none!important;filter:none!important;opacity:1!important;background:linear-gradient(118deg,#172018 0%,#354032 48%,#4d4437 100%)} .intro-stage:after{background:linear-gradient(90deg,rgba(18,24,17,.48),transparent 33%,transparent 68%,rgba(48,38,28,.42)),linear-gradient(0deg,#1a2018,transparent 24%)} .eye-detail{display:none!important} .character-wrap{top:10%;width:min(38vw,560px);height:78%;filter:drop-shadow(0 26px 34px rgba(18,20,14,.38))} .character{filter:brightness(1.08) contrast(.98) saturate(.82)} .eyebrow{color:#ddd3bf} .intro-copy h1 em{color:#b8ad98} .intro-copy p{color:#d1c7b6} .scroll-cue i{border-color:#9bac83} .work{background:var(--paper);color:#24271f} .section-head h2 span{color:#817965} .project:before{background:var(--forest)} .project{border-color:#aaa18f} .project:last-of-type{border-color:#aaa18f} .about{background:var(--brown);color:#f0e8d8} .about h2 em{color:#c4d49d} .about-grid p:last-child{color:#d0c2ad} footer{background:var(--sand);color:#263526} footer p span{color:transparent;-webkit-text-stroke:2px #263526} footer a{color:#263526;border-color:#263526} .cursor{background:#b7ca8d} @media(max-width:700px){.intro{height:105vh;min-height:720px}.intro-stage{background:linear-gradient(140deg,#1b251b,#3b4636 55%,#514638)}.character-wrap{top:13%;width:82vw;height:70%}} .skills{padding:120px 4vw;background:#d2c5aa;color:#24271f} .skills-intro{display:grid;grid-template-columns:1fr 3fr;margin-bottom:90px} .skills-intro>p{font-size:10px;letter-spacing:.2em} .skills-intro h2{font-size:clamp(42px,7vw,100px);line-height:.9;letter-spacing:-.06em;font-weight:500;margin:0} .skills-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #938a76;border-left:1px solid #938a76} .skills-grid article{min-height:230px;padding:28px;border-right:1px solid #938a76;border-bottom:1px solid #938a76} .skills-grid span{font-size:10px;color:#6d6a5b} .skills-grid h3{font-size:24px;font-weight:500;margin:55px 0 18px} .skills-grid p{font-size:12px;line-height:1.65;color:#5e5c50;max-width:290px} .tools{display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px;padding-top:50px;font-size:11px;line-height:1.8;letter-spacing:.07em} .footer-contact{display:flex;flex-direction:column;align-items:flex-end;gap:15px} .footer-contact a{font-size:12px} @media(max-width:800px){.skills-intro{display:block}.skills-intro>p{margin-bottom:35px}.skills-grid{grid-template-columns:1fr}.skills-grid article{min-height:180px}.skills-grid h3{margin-top:35px}.tools{grid-template-columns:1fr}.footer-contact{align-items:flex-start;margin-top:60px}footer{align-items:flex-start}} /* Expressive motion system inspired by editorial storytelling */ .scroll-progress{position:fixed;z-index:80;left:0;top:0;width:100%;height:3px;background:#b7ca8d;transform:scaleX(0);transform-origin:left;will-change:transform} .nav{animation:navEnter .9s .15s cubic-bezier(.2,.8,.2,1) both} .eyebrow{animation:eyebrowEnter .9s .35s cubic-bezier(.2,.8,.2,1) both} .intro-copy h1{animation:headlineEnter 1.15s .45s cubic-bezier(.16,1,.3,1) both} .intro-copy p,.scroll-cue{animation:softEnter .9s .85s ease both} .character-wrap{animation:avatarEnter 1.35s .25s cubic-bezier(.16,1,.3,1) both;transition:filter .4s ease} .character{animation:none} .character-wrap:hover{filter:drop-shadow(0 32px 44px rgba(13,18,12,.5))} .marquee{position:relative;z-index:16;overflow:hidden;background:#b8a887;color:#253326;border-top:1px solid rgba(37,51,38,.3);border-bottom:1px solid rgba(37,51,38,.3);padding:16px 0;transform:rotate(-1deg) scale(1.02)} .marquee div{display:flex;width:max-content;gap:28px;align-items:center;animation:marqueeMove 24s linear infinite} .marquee span{font-size:12px;font-weight:700;letter-spacing:.2em;white-space:nowrap}.marquee i{font-style:normal;color:#5d4939} .section-head,.project,.about h2,.about-grid,.skills-intro,.skills-grid article,.tools{opacity:0;transform:translateY(45px);transition:opacity .8s var(--delay,0ms) ease,transform .9s var(--delay,0ms) cubic-bezier(.16,1,.3,1)} .section-head.seen,.project.seen,.about h2.seen,.about-grid.seen,.skills-intro.seen,.skills-grid article.seen,.tools.seen{opacity:1;transform:none} .project{isolation:isolate} .project:after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(142,163,107,.28),transparent 34%);opacity:0;transition:opacity .35s} .project:hover:after{opacity:1} .project-title,.project-question,.arrow{transition:transform .45s cubic-bezier(.16,1,.3,1)} .project:hover .project-title{transform:translateX(12px)}.project:hover .project-question{transform:translateX(-8px)}.project:hover .arrow{transform:rotate(12deg) scale(1.15)} .skills-grid article{transition-property:opacity,transform,background,color}.skills-grid article:hover{background:#2d3b2d;color:#eee5d4}.skills-grid article:hover p,.skills-grid article:hover span{color:#c9bea8} @keyframes navEnter{from{opacity:0;transform:translateY(-18px)}} @keyframes eyebrowEnter{from{opacity:0;letter-spacing:.6em;transform:translate(-50%,20px)}} @keyframes headlineEnter{from{opacity:0;transform:translateY(70px) skewY(4deg);filter:blur(8px)}} @keyframes softEnter{from{opacity:0;transform:translateY(22px)}} @keyframes avatarEnter{from{opacity:0;transform:translate(calc(-50% + var(--mx)),calc(var(--my) + 90px)) scale(.88);filter:blur(10px)}} @keyframes marqueeMove{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.nav,.eyebrow,.intro-copy h1,.intro-copy p,.scroll-cue,.character-wrap,.marquee div{animation:none}.section-head,.project,.about h2,.about-grid,.skills-intro,.skills-grid article,.tools{opacity:1;transform:none}} /* Opaque cinematic hero artwork */ .character-wrap{inset:0;left:0;top:0;width:100%;height:100%;transform:none;filter:none;z-index:2} .character-wrap:hover{filter:none} .character{width:100%;height:100%;object-fit:cover;object-position:center center;filter:none} .intro-stage:after{z-index:4} .eyebrow,.intro-copy,.scroll-cue{z-index:6} @keyframes avatarEnter{from{opacity:0;transform:scale(1.04);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:none}} @media(max-width:700px){.character-wrap{inset:0;width:100%;height:100%}.character{object-position:center center}} .aether-case{position:relative;overflow:hidden;padding:130px 4vw 100px;background:#172218;color:#eee6d7;isolation:isolate} .aether-atmosphere{position:absolute;inset:0;z-index:-1;opacity:.55;filter:blur(1px)} .aether-atmosphere span{position:absolute;border:1px solid rgba(183,202,141,.18);border-radius:50%;animation:dreamOrbit 18s linear infinite} .aether-atmosphere span:nth-child(1){width:70vw;height:28vw;left:15%;top:8%;transform:rotate(-12deg)} .aether-atmosphere span:nth-child(2){width:36vw;height:64vw;right:8%;top:18%;animation-direction:reverse;animation-duration:23s} .aether-atmosphere span:nth-child(3){width:26vw;height:26vw;left:20%;bottom:-8%;animation-duration:14s} .aether-head{display:grid;grid-template-columns:1fr 3fr;gap:40px;padding-bottom:100px;border-bottom:1px solid rgba(238,230,215,.25)} .aether-head>p{font-size:10px;letter-spacing:.2em;color:#b7ca8d} .aether-head h2{font-size:clamp(58px,10vw,155px);line-height:.78;letter-spacing:-.075em;font-weight:500;margin:0} .aether-head h2 em{display:inline-block;color:#b7ca8d;font-style:normal;font-size:.54em;letter-spacing:-.04em;margin-top:22px} .aether-lead{font-size:clamp(18px,2.2vw,32px);line-height:1.25;max-width:700px;margin:60px 0 0;color:#c9bea8} .aether-body{display:grid;grid-template-columns:1fr 1fr;margin-left:25%;padding:95px 0 80px} .aether-body article{min-height:280px;padding:34px 6vw 34px 0;border-top:1px solid rgba(238,230,215,.22)} .aether-body article:nth-child(odd){border-right:1px solid rgba(238,230,215,.22)} .aether-body article:nth-child(even){padding-left:5vw} .aether-body span{font-size:10px;letter-spacing:.2em;color:#b7ca8d} .aether-body p{font-size:15px;line-height:1.7;color:#d4cbbb;max-width:520px;margin-top:38px} .aether-outcomes{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(238,230,215,.25);padding-top:30px} .aether-outcomes p{font-size:10px;letter-spacing:.14em;color:#a99d89} .aether-head,.aether-body article,.aether-outcomes{opacity:0;transform:translateY(45px);transition:opacity .8s var(--delay,0ms) ease,transform .9s var(--delay,0ms) cubic-bezier(.16,1,.3,1)} .aether-head.seen,.aether-body article.seen,.aether-outcomes.seen{opacity:1;transform:none} @keyframes dreamOrbit{to{transform:rotate(348deg)}} @media(max-width:800px){.aether-case{padding-top:90px}.aether-head{display:block;padding-bottom:70px}.aether-head>p{margin-bottom:50px}.aether-body{grid-template-columns:1fr;margin-left:0;padding-top:65px}.aether-body article,.aether-body article:nth-child(even){padding:30px 0;min-height:0;border-right:0}.aether-outcomes{flex-wrap:wrap;justify-content:flex-start}.aether-outcomes p{width:45%}} .aether-film{margin:0 0 90px 25%;opacity:0;transform:translateY(45px);transition:opacity .8s var(--delay,0ms) ease,transform .9s var(--delay,0ms) cubic-bezier(.16,1,.3,1)} .aether-film.seen{opacity:1;transform:none} .film-meta{display:flex;justify-content:space-between;align-items:center;padding:0 0 18px;border-bottom:1px solid rgba(238,230,215,.25)} .film-meta span{font-size:10px;letter-spacing:.2em;color:#b7ca8d}.film-meta p{font-size:11px;letter-spacing:.08em;color:#a99d89} .film-frame{position:relative;aspect-ratio:16/9;margin-top:24px;background:#0b100c;overflow:hidden;border:1px solid rgba(183,202,141,.22);box-shadow:0 32px 70px rgba(6,10,7,.35)} .film-frame:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 80px rgba(18,34,20,.35)} .film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media(max-width:800px){.aether-film{margin-left:0;margin-bottom:65px}.film-meta{align-items:flex-start;gap:20px}.film-meta p{text-align:right}} /* Exact opaque avatar image supplied by Pontus */ .character-wrap{inset:auto;top:5%;right:5vw;left:auto;width:min(43vw,650px);height:95%;transform:none;filter:none;z-index:2} .character-wrap:hover{filter:none} .character{width:100%;height:100%;object-fit:contain;object-position:center;filter:none;mix-blend-mode:normal} @keyframes avatarEnter{from{opacity:0;transform:translateY(35px) scale(.98)}to{opacity:1;transform:none}} @media(max-width:700px){.character-wrap{top:12%;right:-6vw;width:78vw;height:67%}.character{object-fit:contain}} /* The selected work rows are links, including LAB / Grupprojekt. */ .project{text-decoration:none;color:inherit} /* Collapsible LAB case */ .aether-case.is-collapsed{display:none} .aether-close{display:flex;align-items:center;gap:14px;margin:0 0 55px auto;padding:12px 0;border:0;border-bottom:1px solid rgba(238,230,215,.5);background:transparent;color:#eee6d7;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.18em;cursor:pointer} .aether-close span{font-size:18px;transition:transform .25s ease}.aether-close:hover span,.aether-close:focus-visible span{transform:translateY(-4px)} .lab-toggle[aria-expanded="true"] .arrow{transform:rotate(180deg)} .lab-toggle .arrow{transition:transform .35s ease} /* Editorial case archive */ .case-library{background:#cfc3a9;color:#253126;padding:130px 4vw 150px} .case-library-head{display:grid;grid-template-columns:1fr 3fr;margin-bottom:90px} .case-library-head>p{font-size:10px;letter-spacing:.2em;margin:8px 0} .case-library-head h2{font-size:clamp(52px,8vw,125px);line-height:.83;letter-spacing:-.07em;font-weight:500;margin:0} .case-card{border-top:1px solid rgba(37,49,38,.42)} .case-card:last-child{border-bottom:1px solid rgba(37,49,38,.42)} .case-card summary{min-height:150px;display:grid;grid-template-columns:150px 1fr 50px;align-items:center;cursor:pointer;list-style:none;transition:padding .35s ease,background .35s ease,color .35s ease} .case-card summary::-webkit-details-marker{display:none} .case-card summary:hover,.case-card[open] summary{padding:0 22px;background:#253126;color:#e8dfce} .case-card summary>span{font-size:10px;letter-spacing:.17em}.case-card summary h3{font-size:clamp(30px,4.5vw,70px);letter-spacing:-.055em;font-weight:500;margin:0}.case-card summary i{font-size:30px;font-style:normal;text-align:right;transition:transform .35s ease}.case-card[open] summary i{transform:rotate(45deg)} .case-content{padding:75px 4vw 55px;background:#e4dbc8;border-left:1px solid rgba(37,49,38,.25);border-right:1px solid rgba(37,49,38,.25)} .case-lead{font-size:clamp(24px,3vw,44px);line-height:1.13;letter-spacing:-.035em;max-width:920px;margin:0 0 75px 21%} .case-content>div{display:grid;grid-template-columns:repeat(3,1fr);margin-left:21%;border-top:1px solid rgba(37,49,38,.28)} .case-content article{padding:30px 35px 40px 0;min-height:250px}.case-content article+article{border-left:1px solid rgba(37,49,38,.28);padding-left:35px}.case-content b{font-size:10px;letter-spacing:.18em}.case-content article p{font-size:14px;line-height:1.7;color:#526052;margin:30px 0 0}.case-meta{margin:35px 0 0 21%;padding:22px 0 0!important;background:transparent!important;color:#687567!important;border-top:1px solid rgba(37,49,38,.28);font-size:10px;letter-spacing:.14em;display:block} .project[href^="#"] .arrow{transition:transform .3s ease}.project[href^="#"]:hover .arrow{transform:translateY(5px)} @media(max-width:800px){.case-library{padding:90px 20px}.case-library-head{display:block;margin-bottom:55px}.case-library-head>p{margin-bottom:35px}.case-card summary{grid-template-columns:64px 1fr 28px;min-height:115px}.case-card summary h3{font-size:27px}.case-content{padding:45px 20px}.case-lead,.case-content>div,.case-meta{margin-left:0}.case-lead{margin-bottom:45px}.case-content>div{grid-template-columns:1fr}.case-content article{min-height:0;padding:28px 0}.case-content article+article{border-left:0;border-top:1px solid rgba(37,49,38,.2);padding-left:0}} .case-files,.aether-files{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:40px 0 0 21%;padding-top:25px;border-top:1px solid rgba(37,49,38,.28)} .case-files b,.aether-files b{font-size:10px;letter-spacing:.17em;margin-right:15px}.case-files a,.aether-files a{color:inherit;text-decoration:none;border:1px solid rgba(37,49,38,.35);border-radius:999px;padding:10px 14px;font-size:10px;letter-spacing:.07em;transition:.25s}.case-files a:hover{background:#253126;color:#e8dfce}.aether-files{margin:55px 0 0;border-color:rgba(238,230,215,.25)}.aether-files a{border-color:rgba(238,230,215,.3);color:#eee6d7}.aether-files a:hover{background:#eee6d7;color:#172218} @media(max-width:800px){.case-files,.aether-files{margin-left:0}.case-files b,.aether-files b{width:100%;margin-bottom:8px}} /* Unified project accordion: every case opens directly beneath its numbered row. */ .case-library.is-merged{display:none} .work>.project-inline-case{grid-column:1/-1;width:auto;margin:0 -4vw;border:0} .work>details.project-inline-case>summary{display:none} .work>details.project-inline-case:not([open]){display:none} .work>details.project-inline-case[open]{display:block;background:#cfc3a9} .work>.project-inline-case .case-content{border:0;padding:85px 4vw 75px;animation:inlineCaseIn .55s cubic-bezier(.16,1,.3,1) both} .work>.aether-case.project-inline-case{margin-left:-4vw;margin-right:-4vw;width:auto} .work>.project[aria-expanded="true"]{background:#253126;color:#e8dfce;padding-left:24px;padding-right:24px} .work>.project[aria-expanded="true"]:before{transform:none} .work>.project[aria-expanded="true"] p,.work>.project[aria-expanded="true"] .project-question{color:#aaa} .work>.project[aria-expanded="true"] .arrow{transform:rotate(180deg)} @keyframes inlineCaseIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}} @media(max-width:800px){.work>.project-inline-case{margin-left:-20px;margin-right:-20px}.work>.project-inline-case .case-content{padding:50px 20px}.work>.aether-case.project-inline-case{margin-left:-20px;margin-right:-20px}} /* Every expanded project uses the same cinematic case language as Aether. */ .work>details.project-inline-case[open]{background:#172218;color:#eee6d7} .work>.project-inline-case .case-content{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 78% 8%,rgba(183,202,141,.13),transparent 34%),linear-gradient(145deg,#172218,#1e2b1e 58%,#263124);color:#eee6d7} .work>.project-inline-case .case-content:before{content:"";position:absolute;z-index:-1;width:65vw;height:28vw;right:-12vw;top:7%;border:1px solid rgba(183,202,141,.16);border-radius:50%;transform:rotate(-12deg);animation:dreamOrbit 22s linear infinite} .case-expanded-head{display:grid!important;grid-template-columns:1fr 3fr!important;margin:0 0 85px!important;padding:0 0 75px!important;border-top:0!important;border-bottom:1px solid rgba(238,230,215,.22)!important} .case-expanded-head>p{font-size:10px!important;letter-spacing:.2em!important;color:#b7ca8d!important;margin:8px 0!important}.case-expanded-head h2{font-size:clamp(50px,7vw,108px);line-height:.86;letter-spacing:-.065em;font-weight:500;margin:0}.case-expanded-head span{display:block;margin-top:24px;color:#b7ca8d;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.case-expanded-head .case-open-intro{max-width:760px;margin:30px 0 0;color:var(--offwhite-soft);font-size:clamp(17px,1.7vw,24px);line-height:1.5;letter-spacing:-.015em;text-transform:none} .work>.project-inline-case .case-lead{color:#eee6d7;font-size:clamp(30px,4vw,58px);max-width:980px} .work>.project-inline-case .case-content>div{border-color:rgba(238,230,215,.22)} .work>.project-inline-case .case-content article+article{border-color:rgba(238,230,215,.22)} .work>.project-inline-case .case-content b{color:#b7ca8d} .work>.project-inline-case .case-content article p{color:#d4cbbb} .work>.project-inline-case .case-meta{color:#a99d89;border-color:rgba(238,230,215,.22)} .work>.project-inline-case .case-meta{display:block;margin:58px 0 0;padding:0!important;border-top:1px solid rgba(238,230,215,.22)} .work>.project-inline-case .case-meta p{display:grid;grid-template-columns:minmax(145px,.32fr) minmax(0,1fr);column-gap:34px;align-items:start;margin:0!important;padding:20px 0;color:var(--offwhite-soft);font-size:13px;line-height:1.6;letter-spacing:0;text-transform:none;border-bottom:1px solid rgba(238,230,215,.14)} .work>.project-inline-case .case-meta span{display:block;color:#b7ca8d;font-size:9px;line-height:1.6;letter-spacing:.18em;font-weight:700;text-transform:uppercase} .work>.project-inline-case .case-meta span:after{content:":"} .case-files,.aether-files{display:none!important} @media(max-width:800px){.case-expanded-head{display:block!important;padding-bottom:50px!important;margin-bottom:50px!important}.case-expanded-head>p{margin-bottom:38px!important}.case-expanded-head h2{font-size:50px}} @media(max-width:800px){.work>.project-inline-case .case-meta{margin-top:42px}.work>.project-inline-case .case-meta p{grid-template-columns:1fr;row-gap:7px;padding:18px 0;font-size:14px}.work>.project-inline-case .case-meta span{font-size:8px}} /* Calm, editorial about section placed before selected work. */ .about{position:relative;z-index:10;overflow:hidden;padding:125px 4vw 135px;background:#263326;color:#eee6d7;border-top:1px solid rgba(238,230,215,.18);border-bottom:1px solid rgba(238,230,215,.18)} .about:before{content:"";position:absolute;right:-12vw;top:-20vw;width:60vw;height:60vw;border:1px solid rgba(183,202,141,.12);border-radius:50%;pointer-events:none} .about .kicker{position:relative;margin:0 0 65px;color:#b7ca8d;font-size:10px;letter-spacing:.25em} .about h2{position:relative;max-width:1180px;margin:0 0 90px;font-size:clamp(44px,6.2vw,94px);line-height:.94;letter-spacing:-.055em;font-weight:500;opacity:1!important;transform:none!important;animation:none!important} .about h2 em{color:#b7ca8d;font-style:normal} .about-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:8vw;max-width:1000px;margin:0 0 0 auto;padding-top:38px;border-top:1px solid rgba(238,230,215,.24);opacity:1!important;transform:none!important;animation:none!important} .about-grid p{margin:0;color:#d6cebf;font-size:15px;line-height:1.8}.about-grid p:last-child{color:#aeb8a2;font-size:13px;line-height:1.75;letter-spacing:.02em} @media(max-width:800px){.about{padding:90px 20px 95px}.about .kicker{margin-bottom:45px}.about h2{font-size:42px;line-height:.98;margin-bottom:65px}.about-grid{grid-template-columns:1fr;gap:32px;margin:0}.about:before{width:100vw;height:100vw;right:-45vw;top:-20vw}} /* Straight transition marquee between intro and about. */ .marquee{position:relative;z-index:16;display:flex;align-items:center;height:70px;padding:0;overflow:hidden;transform:none;background:#b8a887;color:#253326;border-top:1px solid rgba(37,51,38,.32);border-bottom:1px solid rgba(37,51,38,.32);box-shadow:0 14px 35px rgba(17,25,17,.16);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)} .marquee:before,.marquee:after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:4vw;pointer-events:none}.marquee:before{left:0;background:linear-gradient(90deg,#b8a887,transparent)}.marquee:after{right:0;background:linear-gradient(-90deg,#b8a887,transparent)} .marquee div{display:flex;align-items:center;gap:38px;width:max-content;animation:marqueeMove 28s linear infinite;will-change:transform} .marquee span{font-size:11px;font-weight:700;letter-spacing:.22em;white-space:nowrap}.marquee i{color:#5d4939;font-size:10px;opacity:.8} .marquee:hover div{animation-play-state:paused} @media(max-width:700px){.marquee{height:58px}.marquee div{gap:25px;animation-duration:22s}.marquee span{font-size:10px;letter-spacing:.17em}} /* Music as part of the personal portfolio story. */ .music{position:relative;z-index:10;display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;padding:115px 4vw 125px;background:#d1c4a9;color:#253126;border-bottom:1px solid rgba(37,49,38,.28)} .music-copy>p{margin:0 0 55px;font-size:10px;letter-spacing:.22em;color:#65725e}.music h2{font-size:clamp(48px,6.4vw,98px);line-height:.9;letter-spacing:-.06em;font-weight:500;margin:0 0 70px}.music h2 em{font-style:normal;color:#657a55}.music-copy>div{display:grid;grid-template-columns:1fr 1fr;gap:5vw;padding-top:28px;border-top:1px solid rgba(37,49,38,.3)}.music-copy>div p{margin:0;color:#526052;font-size:14px;line-height:1.75}.music a{align-self:start;justify-self:start;color:#253126;text-decoration:none;border-bottom:1px solid #253126;padding-bottom:7px;font-size:10px;font-weight:700;letter-spacing:.12em}.spotify-player{align-self:end;padding:16px;background:#263326;border-radius:18px;box-shadow:0 30px 70px rgba(35,45,33,.2)}.spotify-player iframe{display:block;background:#121212} @media(max-width:900px){.music{grid-template-columns:1fr;padding:90px 20px}.music-copy>div{grid-template-columns:1fr;gap:30px}.spotify-player{margin-top:15px}.music h2{font-size:46px;margin-bottom:55px}} /* Earthy editorial skills bento */ .skills{position:relative;isolation:isolate;overflow:hidden;padding:130px 4vw 145px;background:#e5dcc8;color:#233025}.skills:before{content:"";position:absolute;z-index:-1;left:-18vw;top:5%;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle,rgba(109,126,82,.16),transparent 68%)} .skills-intro{display:grid;grid-template-columns:1fr 3fr;align-items:start;margin-bottom:78px;opacity:0;transform:translateY(24px);transition:opacity .85s var(--delay,0ms) ease,transform 1s var(--delay,0ms) cubic-bezier(.16,1,.3,1)}.skills-intro.seen{opacity:1;transform:none}.skills-intro>p{margin:10px 0 0;font-size:10px;font-weight:700;letter-spacing:.24em;color:#667456}.skills-intro h2{margin:0;max-width:920px;font-size:clamp(48px,7vw,108px);font-weight:500;line-height:.88;letter-spacing:-.065em} .skills-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.skills-grid article{position:relative;overflow:hidden;min-height:270px;padding:30px;border:1px solid rgba(35,48,37,.2);background:rgba(239,233,218,.62);backdrop-filter:blur(8px);opacity:0;transform:translateY(28px) scale(.985);transition:opacity .75s var(--delay,0ms) ease,transform .9s var(--delay,0ms) cubic-bezier(.16,1,.3,1),background .45s ease,color .45s ease,box-shadow .45s ease}.skills-grid article.seen{opacity:1;transform:none}.skills-grid article:nth-child(1),.skills-grid article:nth-child(4){grid-column:span 7}.skills-grid article:nth-child(2),.skills-grid article:nth-child(3){grid-column:span 5}.skills-grid article:nth-child(5),.skills-grid article:nth-child(6){grid-column:span 6}.skills-grid article:before{content:"";position:absolute;right:-35%;bottom:-70%;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle,rgba(183,202,141,.34),transparent 68%);transition:transform .8s cubic-bezier(.16,1,.3,1)}.skills-grid article:hover{transform:translateY(-7px);background:#2b392d;color:#eee6d7;box-shadow:0 24px 55px rgba(38,51,38,.16)}.skills-grid article:hover:before{transform:translate(-30px,-35px) scale(1.15)}.skills-grid article>span{display:block;margin-bottom:72px;font-size:10px;font-weight:700;letter-spacing:.2em;color:#71805e}.skills-grid article h3{position:relative;margin:0 0 18px;font-size:clamp(28px,3.2vw,50px);font-weight:500;line-height:.95;letter-spacing:-.045em}.skills-grid article p{position:relative;max-width:520px;margin:0;color:#687467;font-size:12px;line-height:1.7;letter-spacing:.025em;transition:color .45s ease}.skills-grid article:hover p{color:#cbd2c3} .tools{display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px;align-items:center;margin-top:14px;padding:30px;border:1px solid rgba(35,48,37,.2);background:#b9aa8d;opacity:0;transform:translateY(24px);transition:opacity .75s var(--delay,0ms) ease,transform .9s var(--delay,0ms) cubic-bezier(.16,1,.3,1)}.tools.seen{opacity:1;transform:none}.tools p{margin:0;font-size:10px;line-height:1.75;letter-spacing:.13em}.tools p:nth-child(2){font-size:12px;letter-spacing:.06em}.tools p:last-child{text-align:right} /* Music is the final personal note, flowing directly into the footer */ .music{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:end;padding:105px 4vw 85px;background:#384536;color:#eee6d7;border-top:1px solid rgba(238,230,215,.15);border-bottom:0}.music:before{content:"";position:absolute;right:-12vw;top:-30vw;width:70vw;height:70vw;border:1px solid rgba(183,202,141,.12);border-radius:50%;pointer-events:none}.music-copy,.spotify-player{opacity:0;transform:translateY(26px);transition:opacity .8s var(--delay,0ms) ease,transform 1s var(--delay,0ms) cubic-bezier(.16,1,.3,1)}.music-copy.seen,.spotify-player.seen{opacity:1;transform:none}.music-copy>p{color:#b7ca8d}.music h2{font-size:clamp(44px,5.8vw,88px);margin-bottom:55px}.music h2 em{color:#b7ca8d}.music-copy>div{border-color:rgba(238,230,215,.22)}.music-copy>div p{color:#d3ccbc}.music a{color:#eee6d7;border-color:#eee6d7}.spotify-player{background:#202a21;border:1px solid rgba(183,202,141,.18);box-shadow:0 30px 70px rgba(11,18,12,.28)}footer{border-top:1px solid rgba(238,230,215,.14)} @media(max-width:900px){.skills{padding:90px 20px 100px}.skills-intro{display:block;margin-bottom:55px}.skills-intro>p{margin-bottom:35px}.skills-grid{grid-template-columns:1fr}.skills-grid article,.skills-grid article:nth-child(n){grid-column:auto;min-height:230px}.skills-grid article>span{margin-bottom:55px}.tools{grid-template-columns:1fr;gap:18px}.tools p:last-child{text-align:left}.music{grid-template-columns:1fr;padding:85px 20px 70px}.music:before{width:110vw;height:110vw;top:-20vw}.spotify-player{min-width:0}} @media(prefers-reduced-motion:reduce){.skills-intro,.skills-grid article,.tools,.music-copy,.spotify-player{transition:none!important;transform:none!important;opacity:1!important}.skills-grid article:hover{transform:none}} .skills-grid article:nth-child(7){grid-column:span 5}.skills-grid article:nth-child(8){grid-column:span 7} @media(max-width:900px){.skills-grid article:nth-child(7),.skills-grid article:nth-child(8){grid-column:auto}} .experience-proof{display:grid;grid-template-columns:1fr repeat(3,1fr);gap:0;margin-top:14px;border:1px solid rgba(35,48,37,.2);background:#d3c6ac;opacity:0;transform:translateY(24px);transition:opacity .8s var(--delay,0ms) ease,transform 1s var(--delay,0ms) cubic-bezier(.16,1,.3,1)}.experience-proof.seen{opacity:1;transform:none}.experience-proof>p,.experience-proof>div{margin:0;padding:28px}.experience-proof>p{font-size:10px;font-weight:700;line-height:1.6;letter-spacing:.16em;color:#5f6d52}.experience-proof>div{border-left:1px solid rgba(35,48,37,.2)}.experience-proof strong{display:block;margin-bottom:28px;font-size:17px;font-weight:500}.experience-proof span{display:block;color:#5e695d;font-size:12px;line-height:1.7} @media(max-width:900px){.experience-proof{grid-template-columns:1fr}.experience-proof>div{border-left:0;border-top:1px solid rgba(35,48,37,.2)}.experience-proof>p,.experience-proof>div{padding:24px}} @media(prefers-reduced-motion:reduce){.experience-proof{opacity:1;transform:none;transition:none}} /* Optional creative layer */ .nav{grid-template-columns:1fr 1fr auto 1fr;align-items:start;gap:22px}.creative-toggle{appearance:none;border:0;border-bottom:1px solid rgba(255,255,255,.55);padding:0 0 5px;background:transparent;color:#fff;font:700 9px/1.3 'DM Sans',sans-serif;letter-spacing:.14em;cursor:pointer;transition:color .3s ease,border-color .3s ease,transform .3s ease}.creative-toggle span{display:inline-block;margin-right:6px;transition:transform .5s cubic-bezier(.16,1,.3,1)}.creative-toggle:hover,.creative-toggle:focus-visible{color:#d9e7b6;border-color:#d9e7b6;outline:none;transform:translateY(2px)}.creative-toggle:hover span{transform:rotate(90deg)} .creative-mode .noise{opacity:.14}.creative-mode .intro-stage{background:linear-gradient(128deg,#172018 0%,#3f4c36 47%,#6a5642 100%)}.creative-mode .intro-stage:before{content:"MAKE / TEST / LEARN";position:absolute;z-index:5;right:-3vw;top:21%;color:rgba(232,223,207,.22);font:400 clamp(70px,12vw,180px)/.8 'Permanent Marker',cursive;letter-spacing:-.08em;transform:rotate(7deg);pointer-events:none}.creative-mode .intro-copy h1 em,.creative-mode .section-head h2 span,.creative-mode .skills-intro h2{font-family:'Permanent Marker',cursive;font-weight:400}.creative-mode .project:nth-of-type(odd){transform:rotate(.18deg)}.creative-mode .project:nth-of-type(even){transform:rotate(-.18deg)}.creative-mode .project.seen:hover{transform:translateY(-3px) rotate(0)}.creative-mode .skills-grid article:nth-child(3n+1){transform:rotate(-.35deg)}.creative-mode .skills-grid article:nth-child(3n+2){transform:rotate(.35deg)}.creative-mode .skills-grid article.seen:hover{transform:translateY(-7px) rotate(0)}.creative-mode .about:after{content:"NYFIKENHET FÖRST";position:absolute;left:4vw;bottom:24px;color:rgba(183,202,141,.3);font:400 clamp(26px,5vw,76px)/1 'Permanent Marker',cursive;transform:rotate(-2deg);pointer-events:none} /* Ambient musical signature */ .spotify-player{position:relative;overflow:hidden}.sound-signature{box-sizing:border-box;height:58px;display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 14px;padding:8px 16px 12px;border-bottom:1px solid rgba(183,202,141,.18);overflow:hidden}.sound-signature span{display:block;width:3px;height:10px;flex:0 0 3px;border-radius:999px;background:linear-gradient(to top,#b7ca8d,#eee6d7);transform-origin:center;animation:soundPulse 2.2s ease-in-out infinite}.sound-signature span:nth-child(3n){animation-duration:1.7s;animation-delay:-.8s}.sound-signature span:nth-child(4n){animation-duration:2.8s;animation-delay:-1.3s}.sound-signature span:nth-child(5n){animation-duration:1.9s;animation-delay:-.35s}.creative-mode .sound-signature span{animation-duration:1.25s}.creative-mode .sound-signature{filter:drop-shadow(0 0 8px rgba(183,202,141,.32))}@keyframes soundPulse{0%,100%{height:8px;opacity:.45}35%{height:34px;opacity:1}65%{height:16px;opacity:.7}} @media(max-width:700px){.nav{grid-template-columns:1fr auto 1fr}.nav-meta{display:none}.creative-toggle{font-size:8px}.creative-mode .intro-stage:before{top:24%;right:-10vw}.sound-signature{gap:4px}.sound-signature span{width:2px}} @media(prefers-reduced-motion:reduce){.sound-signature span{animation:none;height:18px}.sound-signature span:nth-child(3n){height:34px}.creative-mode .project:nth-of-type(n),.creative-mode .skills-grid article:nth-child(n){transform:none}} /* Visitor controlled project lens */ .nav{grid-template-columns:1fr 1fr 1fr}.sound-signature{filter:drop-shadow(0 0 8px rgba(183,202,141,.2))} .project-lens{position:relative;z-index:12;padding:105px 4vw 90px;background:#b9aa8d;color:#253126}.project-lens>div:first-child{display:grid;grid-template-columns:1fr 3fr;margin-bottom:58px}.project-lens>div:first-child p{margin:8px 0 0;font-size:10px;font-weight:700;letter-spacing:.2em}.project-lens h2{margin:0;font-size:clamp(45px,6.5vw,94px);font-weight:500;line-height:.88;letter-spacing:-.06em}.lens-controls{display:grid;grid-template-columns:repeat(3,1fr);margin-left:25%;border-top:1px solid rgba(37,49,38,.35);border-left:1px solid rgba(37,49,38,.35)}.lens-controls button{min-height:210px;display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:0;border-right:1px solid rgba(37,49,38,.35);border-bottom:1px solid rgba(37,49,38,.35);background:rgba(232,223,207,.18);color:#253126;text-align:left;cursor:pointer;transition:background .45s cubic-bezier(.16,1,.3,1),color .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}.lens-controls button:hover,.lens-controls button:focus-visible,.lens-controls button[aria-pressed="true"]{background:#253126;color:#eee6d7;outline:none;transform:translateY(-5px)}.lens-controls span{font-size:10px;letter-spacing:.18em;color:#667456}.lens-controls strong{margin:auto 0 12px;font-size:clamp(25px,3vw,42px);font-weight:500;letter-spacing:-.04em}.lens-controls small{font-size:11px;line-height:1.5;opacity:.7}.lens-status{min-height:18px;margin:24px 0 0 25%;font-size:10px;letter-spacing:.1em;color:#596453}.work>.project{transition:opacity .55s ease,filter .55s ease,color .35s,padding .35s,transform .55s cubic-bezier(.16,1,.3,1)}.work>.project.lens-muted{opacity:.25;filter:grayscale(.7)}.work>.project.lens-match{transform:translateX(16px)}.work>.project.lens-match:after{opacity:.7;background:radial-gradient(circle at 12% 50%,rgba(142,163,107,.42),transparent 30%)} @media(max-width:800px){.nav{grid-template-columns:1fr 1fr}.project-lens{padding:80px 20px 70px}.project-lens>div:first-child{display:block}.project-lens>div:first-child p{margin-bottom:32px}.lens-controls{grid-template-columns:1fr;margin-left:0}.lens-controls button{min-height:150px}.lens-status{margin-left:0}.work>.project.lens-match{transform:translateX(6px)}} /* Calmer project overview, centered rhythm and richer motion */ .work>.section-head,.work>.project,.project-more{width:100%;max-width:1400px;margin-left:auto;margin-right:auto}.project-lens>div:first-child{width:100%;max-width:1400px;margin-left:auto;margin-right:auto}.lens-controls{width:min(1050px,100%);margin-left:auto;margin-right:auto}.lens-status{width:min(1050px,100%);margin-left:auto;margin-right:auto}.skills-intro,.skills-grid,.tools,.experience-proof{width:100%;max-width:1440px;margin-left:auto;margin-right:auto} .about .kicker,.about h2{width:100%;max-width:1400px;margin-left:auto;margin-right:auto}.about-grid{margin-left:auto;margin-right:auto} .work>.project.is-extra{min-height:0;max-height:0;border-width:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(24px);transition:max-height .7s cubic-bezier(.16,1,.3,1),min-height .7s cubic-bezier(.16,1,.3,1),opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility 0s .7s}.work.show-all-projects>.project.is-extra,.work.lens-filtering>.project.is-extra{min-height:180px;max-height:220px;border-top-width:1px;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:max-height .8s cubic-bezier(.16,1,.3,1),min-height .8s cubic-bezier(.16,1,.3,1),opacity .55s .08s ease,transform .8s cubic-bezier(.16,1,.3,1),visibility 0s} .project-more{display:flex;align-items:center;justify-content:space-between;margin-top:34px;padding:18px 0;border:0;border-top:1px solid rgba(37,49,38,.35);border-bottom:1px solid rgba(37,49,38,.35);background:transparent;color:#253126;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.16em;cursor:pointer;opacity:0;transform:translateY(22px);transition:opacity .7s var(--delay,0ms) ease,transform .85s var(--delay,0ms) cubic-bezier(.16,1,.3,1),padding .35s ease}.project-more.seen{opacity:1;transform:none}.project-more:hover,.project-more:focus-visible{padding-left:16px;padding-right:16px;outline:none}.project-more i{font-size:22px;font-style:normal;transition:transform .45s cubic-bezier(.16,1,.3,1)}.project-more[aria-expanded="true"] i{transform:rotate(180deg)}.work.lens-filtering .project-more{opacity:.35;pointer-events:none} .project-lens{overflow:hidden;isolation:isolate}.project-lens:before,.project-lens:after{content:"";position:absolute;z-index:-1;border:1px solid rgba(37,49,38,.14);border-radius:50%;pointer-events:none}.project-lens:before{width:44vw;height:44vw;right:-18vw;top:-24vw;animation:lensDrift 18s ease-in-out infinite}.project-lens:after{width:22vw;height:22vw;left:-8vw;bottom:-13vw;animation:lensDrift 13s 2s ease-in-out infinite reverse}.project-lens>div,.project-more{opacity:0;transform:translateY(28px);transition:opacity .75s var(--delay,0ms) ease,transform .95s var(--delay,0ms) cubic-bezier(.16,1,.3,1)}.project-lens>div.seen,.project-more.seen{opacity:1;transform:none}.lens-controls button{opacity:0;transform:translateY(20px);transition:opacity .65s var(--delay,0ms) ease,transform .8s var(--delay,0ms) cubic-bezier(.16,1,.3,1),background .45s ease,color .35s ease}.lens-controls button.seen{opacity:1;transform:none}.lens-controls button.seen:hover,.lens-controls button.seen[aria-pressed="true"]{transform:translateY(-5px)} .about:before{animation:aboutOrbit 20s ease-in-out infinite}.skills:before{animation:softWander 16s ease-in-out infinite}.music:before{animation:aboutOrbit 24s ease-in-out infinite reverse}.section-head h2,.skills-intro h2,.music h2{transition:letter-spacing .8s cubic-bezier(.16,1,.3,1)}.section-head:hover h2,.skills-intro:hover h2,.music:hover h2{letter-spacing:-.052em} @keyframes lensDrift{50%{transform:translate(-3vw,4vw) scale(1.08) rotate(8deg)}}@keyframes aboutOrbit{50%{transform:translate(-4vw,3vw) scale(.92)}}@keyframes softWander{50%{transform:translate(7vw,5vw) scale(1.1)}} @media(max-width:800px){.work>.project.is-extra{max-height:0}.work.show-all-projects>.project.is-extra,.work.lens-filtering>.project.is-extra{min-height:135px;max-height:170px}.project-more{margin-top:24px}.project-lens:before{width:90vw;height:90vw;right:-48vw;top:-35vw}.skills-intro,.skills-grid,.tools,.experience-proof{max-width:none}} @media(prefers-reduced-motion:reduce){.project-lens:before,.project-lens:after,.about:before,.skills:before,.music:before{animation:none}.project-lens>div,.lens-controls button,.project-more{opacity:1;transform:none}.work>.project.is-extra{transition:none}} /* A more expressive method selector */ .project-lens{transition:background 1s cubic-bezier(.16,1,.3,1)}body[data-lens="human"] .project-lens{background:#aebc96}body[data-lens="structure"] .project-lens{background:#c7b697}body[data-lens="feeling"] .project-lens{background:#b99e83}.project-lens h2{position:relative;display:inline-block}.project-lens h2:after{content:"";position:absolute;left:0;bottom:-18px;width:42%;height:3px;background:#253126;transform-origin:left;animation:lensLine 3.8s ease-in-out infinite} .lens-controls{perspective:900px;border:0;gap:12px}.lens-controls button{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(37,49,38,.32);min-height:250px;background:rgba(238,230,215,.25);box-shadow:0 18px 45px rgba(37,49,38,.05)}.lens-controls button:before{content:"";position:absolute;z-index:-2;inset:-1px;background:radial-gradient(210px circle at var(--lens-x,50%) var(--lens-y,50%),rgba(238,230,215,.8),transparent 72%);opacity:0;transition:opacity .35s ease}.lens-controls button:after{content:"↗";position:absolute;right:24px;top:22px;width:42px;height:42px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:15px;opacity:.45;transform:rotate(45deg);transition:opacity .35s ease,transform .6s cubic-bezier(.16,1,.3,1),background .35s ease}.lens-controls button:hover:before{opacity:1}.lens-controls button:hover:after,.lens-controls button[aria-pressed="true"]:after{opacity:1;transform:rotate(0deg);background:#b7ca8d;color:#253126}.lens-controls button>span{position:absolute;left:22px;top:16px;font-size:clamp(55px,7vw,100px);line-height:1;letter-spacing:-.08em;color:rgba(37,49,38,.1);transition:color .4s ease,transform .7s cubic-bezier(.16,1,.3,1)}.lens-controls button:hover>span,.lens-controls button[aria-pressed="true"]>span{color:rgba(183,202,141,.2);transform:translate(8px,-5px) scale(1.1)}.lens-controls strong{position:relative;font-size:clamp(34px,4vw,58px);transition:letter-spacing .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}.lens-controls button:hover strong,.lens-controls button[aria-pressed="true"] strong{letter-spacing:-.065em;transform:translateX(8px)}.lens-controls small{position:relative;max-width:190px}.lens-controls button[aria-pressed="true"]{box-shadow:0 28px 65px rgba(37,49,38,.2)}.lens-status{position:relative;padding-left:28px}.lens-status:before{content:"";position:absolute;left:0;top:4px;width:10px;height:10px;border-radius:50%;background:#647457;box-shadow:0 0 0 0 rgba(100,116,87,.35);animation:statusPulse 2.4s ease-out infinite} @keyframes lensLine{0%,100%{transform:scaleX(.22)}50%{transform:scaleX(1)}}@keyframes statusPulse{70%{box-shadow:0 0 0 12px rgba(100,116,87,0)}} @media(max-width:800px){.lens-controls{gap:9px}.lens-controls button{min-height:180px}.lens-controls button>span{font-size:66px}.lens-controls strong{font-size:36px}.project-lens h2:after{bottom:-12px}} @media(prefers-reduced-motion:reduce){.project-lens h2:after,.lens-status:before{animation:none}.lens-controls button:before{display:none}} /* Editorial lens menu, intentionally without cards */ .lens-controls{display:block;width:min(1180px,100%);border-top:1px solid rgba(37,49,38,.38);perspective:none}.lens-controls button{width:100%;min-height:150px;display:grid;grid-template-columns:100px minmax(220px,1fr) minmax(220px,.8fr) 60px;align-items:center;padding:0 20px;border:0;border-bottom:1px solid rgba(37,49,38,.38);border-radius:0;background:transparent;box-shadow:none;transform:none!important}.lens-controls button:before{inset:0;background:linear-gradient(90deg,#253126 0%,#344534 100%);opacity:0;transform:scaleX(0);transform-origin:right;transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .1s .55s}.lens-controls button:hover:before,.lens-controls button[aria-pressed="true"]:before{opacity:1;transform:scaleX(1);transform-origin:left;transition:transform .65s cubic-bezier(.16,1,.3,1),opacity 0s}.lens-controls button>span{position:static;font-size:11px;line-height:1;letter-spacing:.18em;color:#667456;transform:none!important}.lens-controls strong{margin:0;font-size:clamp(42px,6vw,84px);line-height:.85;letter-spacing:-.06em;transform:none!important}.lens-controls small{max-width:260px;font-size:12px;line-height:1.55;justify-self:start}.lens-controls button:after{position:static;grid-column:4;grid-row:1;width:46px;height:46px;justify-self:end}.lens-controls button:hover,.lens-controls button:focus-visible,.lens-controls button[aria-pressed="true"]{background:transparent;transform:none;color:#eee6d7}.lens-controls button:hover>span,.lens-controls button[aria-pressed="true"]>span{color:#b7ca8d}.lens-controls button:hover strong,.lens-controls button[aria-pressed="true"] strong{letter-spacing:-.075em;transform:translateX(12px)!important}.lens-controls button:hover small,.lens-controls button[aria-pressed="true"] small{transform:translateX(-8px)}.lens-controls small{transition:transform .55s cubic-bezier(.16,1,.3,1)} @media(max-width:800px){.lens-controls button{min-height:130px;grid-template-columns:48px 1fr 44px;padding:0 8px}.lens-controls strong{font-size:38px}.lens-controls small{display:none}.lens-controls button:after{grid-column:3;width:38px;height:38px}.lens-controls button:hover strong,.lens-controls button[aria-pressed="true"] strong{transform:translateX(5px)!important}} /* Keep the green hover treatment after a choice is selected */ .lens-controls button[aria-pressed="true"],.lens-controls button[aria-pressed="true"]:hover{color:#eee6d7;box-shadow:inset 5px 0 0 #b7ca8d}.lens-controls button[aria-pressed="true"]:before{background:linear-gradient(90deg,#253126,#344534);opacity:1;transform:scaleX(1)}.lens-controls button[aria-pressed="true"]>span{color:#b7ca8d}.lens-controls button[aria-pressed="true"] strong{color:#eee6d7}.lens-controls button[aria-pressed="true"] small{color:#d4cbbb;opacity:1}.lens-controls button[aria-pressed="true"]:after{background:#b7ca8d;color:#253126;border-color:#b7ca8d} /* Contact and footer as one final chapter */ .contact-footer{position:relative;z-index:16;isolation:isolate;overflow:hidden;display:block;margin-top:-24px;padding-top:115px;padding-bottom:70px;border-radius:34px 34px 0 0;background:linear-gradient(145deg,#263429,#344336 62%,#3d4939);color:var(--offwhite)} .contact-footer:before{content:"";position:absolute;z-index:-1;right:-22vw;top:-26vw;width:68vw;height:68vw;border:1px solid rgba(183,202,141,.12);border-radius:50%;animation:chapterOrbit 26s ease-in-out infinite reverse} .contact-kicker{margin:0 0 55px!important;color:#c8dc98!important;font-size:11px!important;line-height:1!important;font-weight:700;letter-spacing:.2em} .contact-footer-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.32fr);gap:6vw;align-items:end;padding-bottom:80px;border-bottom:1px solid rgba(244,243,239,.18)} .contact-footer-head h2{margin:0;font-size:clamp(58px,8vw,122px);line-height:.79;letter-spacing:-.075em;font-weight:700} .contact-footer-head h2 span{display:inline-block;padding-top:.16em;color:transparent;-webkit-text-stroke:2px var(--offwhite)} .contact-footer-head p{max-width:360px;margin:0!important;color:var(--offwhite-soft)!important;font-size:13px!important;line-height:1.65!important;letter-spacing:0!important;font-weight:400!important} .contact-footer-body{display:grid;grid-template-columns:minmax(440px,1.25fr) minmax(250px,.55fr);gap:9vw;padding-top:75px} .contact-footer .contact-form{align-self:start} .contact-footer .footer-contact{align-items:stretch;justify-content:flex-start;gap:0;margin:0} .contact-footer .footer-contact p{margin:0 0 28px!important;color:#c8dc98!important;font-size:9px!important;line-height:1!important;letter-spacing:.19em!important;font-weight:700!important} .contact-footer .footer-contact a{display:flex;justify-content:space-between;padding:19px 0;margin:0;border-bottom:1px solid rgba(244,243,239,.2);color:var(--offwhite);font-size:11px;font-weight:700;letter-spacing:.06em} .contact-footer .footer-contact a:first-of-type{border-top:1px solid rgba(244,243,239,.2)} @media(max-width:900px){.contact-footer{margin-top:-14px;padding-top:90px;padding-bottom:55px;border-radius:24px 24px 0 0}.contact-footer-head,.contact-footer-body{grid-template-columns:1fr}.contact-footer-head{gap:35px;padding-bottom:60px}.contact-footer-head h2{font-size:clamp(52px,14vw,88px)}.contact-footer-body{gap:75px;padding-top:60px}.contact-footer .footer-contact{margin-top:0}.contact-footer:before{width:125vw;height:125vw;right:-70vw}} @media(prefers-reduced-motion:reduce){.contact-footer:before{animation:none}} /* Direct contact routes — no form or third-party message handling */ .contact-footer .contact-footer-body{display:block;padding-top:68px} .contact-footer .contact-choice{margin:0 0 24px!important;color:#c8dc98!important;font-size:9px!important;line-height:1!important;font-weight:700;letter-spacing:.19em!important} .contact-footer .contact-channels{display:block;border-top:1px solid rgba(244,243,239,.22)} .contact-footer .contact-channels a{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:150px minmax(0,1fr) 64px;align-items:center;min-height:136px;padding:20px 0;border-bottom:1px solid rgba(244,243,239,.22);color:var(--offwhite);text-decoration:none} .contact-footer .contact-channels a:before{content:"";position:absolute;z-index:-1;inset:0;background:#c8dc98;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--motion-ease)} .contact-footer .contact-channels a>span{font-size:9px;font-weight:700;letter-spacing:.18em;color:#c8dc98;transition:color .35s ease} .contact-footer .contact-channels strong{min-width:0;font-size:clamp(28px,4.3vw,68px);line-height:.92;letter-spacing:-.055em;font-weight:600;overflow-wrap:anywhere} .contact-footer .contact-channels i{display:grid;place-items:center;width:52px;height:52px;justify-self:end;border:1px solid rgba(244,243,239,.38);border-radius:50%;font-size:18px;font-style:normal;transition:transform .55s var(--motion-ease),background .35s ease} .contact-footer .contact-channels a:hover{color:#263429} .contact-footer .contact-channels a:hover:before{transform:scaleY(1)} .contact-footer .contact-channels a:hover>span{color:#526047} .contact-footer .contact-channels a:hover i{background:var(--offwhite);border-color:var(--offwhite);transform:rotate(45deg)} .contact-footer .contact-back-top{display:inline-block;margin-top:45px;color:var(--offwhite);font-size:10px;font-weight:700;letter-spacing:.12em;text-decoration:none;border-bottom:1px solid rgba(244,243,239,.38);padding-bottom:7px} @media(max-width:800px){.contact-footer .contact-footer-body{padding-top:52px}.contact-footer .contact-channels a{grid-template-columns:minmax(0,1fr) 46px;grid-template-rows:auto auto;gap:12px;min-height:122px;padding:23px 0}.contact-footer .contact-channels a>span{grid-column:1}.contact-footer .contact-channels strong{grid-column:1;font-size:clamp(23px,7.2vw,42px)}.contact-footer .contact-channels i{grid-column:2;grid-row:1/3;width:42px;height:42px}.contact-footer .contact-back-top{margin-top:36px}} /* Centred contact finale inspired by the reference, translated into this portfolio's forms. */ .contact-footer{padding-bottom:42px;background:#263429} .contact-footer .contact-kicker{max-width:1240px;margin-left:auto!important;margin-right:auto!important} .contact-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;width:min(1240px,100%);margin:0 auto;padding:clamp(75px,9vw,135px) clamp(24px,7vw,100px) 58px;border:1px solid rgba(244,243,239,.14);border-radius:clamp(24px,3vw,44px);background:radial-gradient(circle at 50% 15%,rgba(183,202,141,.13),transparent 42%),linear-gradient(145deg,#334337,#2a382e);text-align:center;box-shadow:0 28px 70px rgba(10,18,12,.22)} .contact-card:before{content:"";position:absolute;z-index:-1;inset:12px;border:1px solid rgba(244,243,239,.055);border-radius:calc(clamp(24px,3vw,44px) - 9px);pointer-events:none} .contact-card-orbit{position:absolute;z-index:-1;top:-48%;left:50%;width:min(850px,82vw);aspect-ratio:1;border:1px solid rgba(183,202,141,.12);border-radius:50%;transform:translateX(-50%)} .contact-card-orbit:after{content:"";position:absolute;inset:16%;border:1px solid rgba(244,243,239,.07);border-radius:50%} .contact-card h2{margin:0;color:var(--offwhite);font-size:clamp(47px,6.2vw,94px);line-height:.86;letter-spacing:-.065em;font-weight:650} .contact-card h2 span{display:inline-block;padding-top:.14em;color:#c8dc98;-webkit-text-stroke:0} .contact-card>p{max-width:660px;margin:38px auto 40px!important;color:var(--offwhite-soft)!important;font-size:clamp(15px,1.4vw,19px)!important;line-height:1.65!important;letter-spacing:0!important} .contact-primary{display:flex;align-items:center;gap:14px;padding:18px 25px;border-radius:999px;background:#c8dc98;color:#263429;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.12em;box-shadow:0 10px 28px rgba(10,18,12,.22);transition:transform .45s var(--motion-ease),background .35s ease} .contact-primary span{font-size:17px;line-height:1}.contact-primary i{margin-left:8px;font-size:18px;font-style:normal;transition:transform .4s var(--motion-ease)} .contact-primary:hover{background:var(--offwhite);transform:translateY(-4px)}.contact-primary:hover i{transform:translateX(5px)} .contact-email{margin-top:24px;color:var(--offwhite-soft);font-size:13px;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s ease,color .3s ease}.contact-email:hover{color:var(--offwhite);border-color:rgba(244,243,239,.45)} .contact-secondary{display:flex;justify-content:center;gap:clamp(30px,6vw,90px);width:100%;margin-top:62px;padding-top:28px;border-top:1px solid rgba(244,243,239,.14)} .contact-secondary a{display:flex;flex-direction:column;gap:9px;color:var(--offwhite);text-decoration:none;font-size:13px;transition:color .3s ease}.contact-secondary a span{color:#c8dc98;font-size:8px;font-weight:700;letter-spacing:.2em}.contact-secondary a:hover{color:#c8dc98} .contact-footer>.contact-back-top{margin:30px auto 0;display:block;width:max-content} @media(max-width:700px){.contact-footer{padding-left:20px;padding-right:20px}.contact-card{padding:70px 22px 34px}.contact-card h2{font-size:clamp(43px,13vw,68px)}.contact-card>p{margin:28px auto 34px!important}.contact-secondary{flex-direction:column;gap:25px;margin-top:45px}.contact-primary{padding:17px 21px}.contact-email{font-size:12px;overflow-wrap:anywhere}} /* Personal PJ monogram */ .nav .mark{display:flex;align-items:center;gap:12px;width:max-content;color:#fff;text-decoration:none;font-size:8px;font-weight:700;letter-spacing:.18em} .nav .mark img{display:block;width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.22));transition:transform .5s var(--motion-ease)} .nav .mark:hover img{transform:rotate(-4deg) scale(1.06)} @media(max-width:700px){.nav .mark img{width:36px;height:36px}.nav .mark span{display:none}} /* Keep the brand mark in its real colours; only navigation text adapts to the background. */ .nav{mix-blend-mode:normal} .nav .nav-meta,.nav .nav-actions,.nav .mark span{mix-blend-mode:difference} .nav .mark img{mix-blend-mode:normal;filter:drop-shadow(0 1px 1px rgba(38,52,41,.75)) drop-shadow(0 0 5px rgba(244,243,239,.2))} /* Centred desktop canvas: ultrawide monitors get calm off-white gutters. */ @media(min-width:1681px){ body{background:#dedcd6} main,.contact-footer{width:1680px;max-width:calc(100vw - 80px);margin-left:auto;margin-right:auto;box-shadow:0 0 70px rgba(28,38,29,.1)} .music{width:1680px;max-width:calc(100vw - 80px);margin-left:auto;margin-right:auto} .nav{left:max(40px,calc((100vw - 1680px)/2));width:min(1680px,calc(100vw - 80px));padding-left:44px;padding-right:44px} .scroll-progress{left:max(40px,calc((100vw - 1680px)/2));width:min(1680px,calc(100vw - 80px))} } /* Three recruiter-facing cases first, the wider body of work second */ .work>.project.is-primary{min-height:210px} .work>.project.is-primary .project-no:after{content:"UTVALT CASE";display:block;margin-top:12px;color:#657456;font-size:7px;letter-spacing:.16em;white-space:nowrap} .work>.project.is-primary h3{font-size:clamp(38px,4.3vw,68px)} .work.show-all-projects>.project.is-extra{min-height:145px;max-height:180px} .work.show-all-projects>.project.is-extra h3{font-size:clamp(27px,3vw,46px)} .work.show-all-projects>.project.is-extra .project-question{opacity:.76} .project-more span:before{content:"PROJEKTARKIV / ";color:#657456} @media(max-width:800px){.work>.project.is-primary{min-height:155px}.work>.project.is-primary .project-no:after{display:none}.work.show-all-projects>.project.is-extra{min-height:125px;max-height:155px}.project-more span:before{display:block;margin-bottom:8px}} /* Evidence and process material for the three selected cases */ .case-evidence-summary{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(420px,1.2fr);gap:6vw;margin:-35px 0 72px;padding:0 0 60px;border-bottom:1px solid rgba(238,230,215,.2)} .case-evidence-summary>p{margin:0!important;color:var(--offwhite)!important;font-size:clamp(21px,2.2vw,34px)!important;line-height:1.25!important;letter-spacing:-.025em!important} .case-evidence-summary>p span{display:block;margin-bottom:20px;color:#b7ca8d;font-size:9px;line-height:1;letter-spacing:.2em} .case-evidence-summary>div{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(238,230,215,.18)} .case-evidence-summary strong{display:flex;align-items:flex-end;min-height:128px;padding:22px;background:#1d2a20;color:#d8dad5;font-size:12px;line-height:1.45;font-weight:500} .case-story{margin:74px 0 28px;padding:68px 0 20px;border-top:1px solid rgba(238,230,215,.2);border-bottom:1px solid rgba(238,230,215,.2)} .case-story-opening{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7vw!important;margin:0 0 70px!important} .case-story-opening p{margin:0!important;color:var(--offwhite-soft)!important;font-size:clamp(16px,1.45vw,21px)!important;line-height:1.65!important;letter-spacing:-.01em!important} .case-story-opening span{display:block;margin-bottom:22px;color:#b7ca8d;font-size:9px;line-height:1;letter-spacing:.2em;font-weight:700} .case-story-flow{display:grid!important;grid-template-columns:repeat(2,1fr)!important;margin:0!important;border-top:1px solid rgba(238,230,215,.18);border-left:1px solid rgba(238,230,215,.18)} .case-story-flow article{box-sizing:border-box;min-height:310px!important;padding:30px 34px 38px!important;border-right:1px solid rgba(238,230,215,.18)!important;border-bottom:1px solid rgba(238,230,215,.18)!important;border-left:0!important} .case-story-flow b{color:#b7ca8d;font-size:9px;letter-spacing:.18em} .case-story-flow h3{max-width:430px;margin:78px 0 22px;color:var(--offwhite);font-size:clamp(23px,2.3vw,34px);line-height:1.08;letter-spacing:-.035em;font-weight:500} .case-story-flow article p{max-width:600px;margin:0!important;color:var(--offwhite-soft)!important;font-size:14px!important;line-height:1.72!important} .myko-play{margin:6px 0 58px}.myko-play-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:34px}.myko-play-head>div>span{display:block;margin-bottom:18px;color:#b7ca8d;font-size:9px;letter-spacing:.2em;font-weight:700}.myko-play-head h3{margin:0 0 18px;color:var(--offwhite);font-size:clamp(38px,5vw,76px);line-height:.9;letter-spacing:-.055em;font-weight:500}.myko-play-head p{max-width:650px;margin:0;color:var(--offwhite-soft);font-size:14px;line-height:1.7}.myko-fullscreen{flex:0 0 auto;margin-bottom:4px;padding:13px 16px;border:1px solid rgba(183,202,141,.55);border-radius:999px;background:transparent;color:var(--offwhite);font:700 9px/1 'DM Sans',sans-serif;letter-spacing:.13em;cursor:pointer;transition:background .25s ease,color .25s ease,transform .25s ease}.myko-fullscreen:hover,.myko-fullscreen:focus-visible{background:#b7ca8d;color:#172218;outline:none;transform:translateY(-2px)}.myko-controls{display:flex!important;flex-wrap:wrap;gap:8px!important;margin:0 0 14px!important}.myko-controls span{display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid rgba(238,230,215,.16);border-radius:999px;color:var(--offwhite-soft);font-size:8px;letter-spacing:.1em}.myko-controls kbd{min-width:20px;padding:4px 5px;border:1px solid rgba(183,202,141,.35);border-radius:5px;background:#263426;color:#b7ca8d;font:700 8px/1 'DM Sans',sans-serif;text-align:center}.myko-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(183,202,141,.3);border-radius:20px;background:#111a13;box-shadow:0 24px 70px rgba(5,10,6,.24)}.myko-frame iframe{display:block;width:100%;height:100%;border:0}.myko-frame:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}.myko-fallback{margin:16px 0 0!important;color:var(--offwhite-soft)!important;font-size:11px!important;letter-spacing:.02em!important}.myko-fallback a{color:#b7ca8d;text-underline-offset:4px} .case-process-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:78px 0 55px} .case-process-gallery figure{margin:0;overflow:hidden;border:1px solid rgba(238,230,215,.16);border-radius:22px;background:#172218} .case-process-gallery img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.78) contrast(1.02);transition:transform .9s var(--motion-ease),filter .6s ease} .case-process-gallery figure:hover img{transform:scale(1.018);filter:saturate(.95) contrast(1.04)} .case-process-gallery figcaption{display:flex;gap:18px;align-items:flex-start;min-height:82px;padding:22px 24px;color:#d8dad5;font-size:11px;line-height:1.55} .case-process-gallery figcaption span{color:#b7ca8d;font-size:9px;letter-spacing:.18em} .aether-process-gallery{width:min(1180px,92vw);margin:20px auto 90px} @media(max-width:800px){.case-evidence-summary{grid-template-columns:1fr;gap:36px;margin-top:-15px;padding-bottom:45px}.case-evidence-summary>div{grid-template-columns:1fr}.case-evidence-summary strong{min-height:88px}.case-story{margin-top:54px;padding-top:48px}.case-story-opening,.case-story-flow{grid-template-columns:1fr!important}.case-story-opening{gap:38px!important;margin-bottom:52px!important}.case-story-flow article{min-height:0!important;padding:28px 24px 34px!important}.case-story-flow h3{margin:48px 0 18px}.case-process-gallery{grid-template-columns:1fr;margin-top:55px}.case-process-gallery figure{border-radius:16px}.aether-process-gallery{margin-bottom:60px}} @media(max-width:800px){.myko-play-head{display:block}.myko-fullscreen{margin-top:24px}.myko-controls{display:none!important}.myko-frame{aspect-ratio:4/3}.myko-play:before{content:"SPELET KRÄVER TANGENTBORD OCH SPELAS BÄST PÅ DATOR";display:block;margin-bottom:18px;padding:11px 13px;border:1px solid rgba(183,202,141,.28);color:#b7ca8d;font-size:8px;line-height:1.5;letter-spacing:.14em}} /* Speldesign is the course umbrella; each playable game sits beneath it. */ .game-design-intro{position:relative;margin:0 0 84px;padding:42px;border:1px solid rgba(183,202,141,.22);border-radius:24px;background:linear-gradient(145deg,rgba(29,42,32,.98),rgba(52,69,52,.96));color:var(--offwhite);overflow:hidden} .game-design-intro:after{content:"";position:absolute;right:-120px;top:-180px;width:430px;height:430px;border:1px solid rgba(183,202,141,.12);border-radius:50%;pointer-events:none} .game-design-lead{position:relative;z-index:1;display:grid;grid-template-columns:minmax(150px,.42fr) minmax(300px,1fr);gap:20px 52px;padding-bottom:42px;border-bottom:1px solid rgba(238,230,215,.16)} .game-design-lead>span{grid-row:1/3;color:#b7ca8d;font-size:9px;font-weight:700;letter-spacing:.18em;line-height:1.6} .game-design-lead h3{margin:0;color:var(--offwhite);font-size:clamp(36px,5vw,68px);font-weight:500;letter-spacing:-.055em;line-height:.95} .game-design-lead p{max-width:720px;margin:6px 0 0;color:var(--offwhite-soft);font-size:13px;line-height:1.75} .game-design-pillars{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:34px} .game-design-pillars article{min-height:210px;padding:8px 24px 24px;border-left:1px solid rgba(238,230,215,.14)} .game-design-pillars article:first-child{border-left:0;padding-left:0}.game-design-pillars article:last-child{padding-right:0} .game-design-pillars span{display:block;margin-bottom:54px;color:#b7ca8d;font-size:9px;letter-spacing:.18em} .game-design-pillars h4{margin:0 0 14px;color:var(--offwhite);font-size:21px;font-weight:500;letter-spacing:-.03em} .game-design-pillars p{margin:0;color:var(--offwhite-soft);font-size:11px;line-height:1.65} .game-design-direction{position:relative;z-index:1;max-width:780px;margin:34px 0 0;padding:22px 0 0;border-top:1px solid rgba(238,230,215,.16);color:#b7ca8d;font-size:10px;line-height:1.7;letter-spacing:.04em} @media(max-width:900px){.game-design-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}.game-design-pillars article{border-bottom:1px solid rgba(238,230,215,.14)}.game-design-pillars article:nth-child(odd){padding-left:0;border-left:0}.game-design-pillars article:nth-child(even){padding-right:0}.game-design-pillars article:nth-last-child(-n+2){padding-top:28px;border-bottom:0}} @media(max-width:650px){.game-design-intro{margin-bottom:58px;padding:28px 22px;border-radius:18px}.game-design-lead{display:block;padding-bottom:30px}.game-design-lead>span{display:block;margin-bottom:26px}.game-design-lead h3{font-size:42px}.game-design-pillars{display:block;margin-top:18px}.game-design-pillars article,.game-design-pillars article:first-child,.game-design-pillars article:last-child,.game-design-pillars article:nth-child(n){min-height:0;padding:24px 0;border:0;border-bottom:1px solid rgba(238,230,215,.14)}.game-design-pillars article:last-child{border-bottom:0}.game-design-pillars span{margin-bottom:20px}.game-design-direction{margin-top:20px}} /* Crop the embedded GitHub Pages shell so only MYKO's canvas remains visible. */ .myko-frame{width:min(100%,1060px);aspect-ratio:16/9;margin:0 auto} .myko-frame iframe{position:absolute;left:-24px;top:-132px;width:calc(100% + 48px);height:calc(100% + 180px)} .myko-frame:fullscreen{width:100vw;max-width:none;height:100vh;background:#171c17} .myko-frame:fullscreen iframe{left:-24px;top:-132px;width:calc(100% + 48px);height:calc(100% + 180px)} @media(max-width:800px){.myko-frame{aspect-ratio:16/9}.myko-frame iframe{left:-12px;top:-182px;width:calc(100% + 24px);height:calc(100% + 235px)}} /* Consistent desktop canvas: full-bleed colour, centred 1440px content. */ @media(min-width:901px){ .about,.project-lens,.work,.skills,.music,.contact-form-section,footer{padding-left:max(4vw,calc((100vw - 1440px)/2));padding-right:max(4vw,calc((100vw - 1440px)/2))} .nav{padding-left:max(30px,calc((100vw - 1440px)/2));padding-right:max(30px,calc((100vw - 1440px)/2))} .intro-copy{left:max(4vw,calc((100vw - 1440px)/2))}.scroll-cue{right:max(4vw,calc((100vw - 1440px)/2))} .about-grid{width:min(920px,67%);max-width:920px} .section-head h2{font-size:clamp(44px,5vw,88px)} .project-lens h2{font-size:clamp(44px,4.8vw,78px)} .project h3{font-size:clamp(30px,3.2vw,54px)} .about h2{max-width:1080px;font-size:clamp(44px,5vw,82px)} .skills-intro h2{font-size:clamp(44px,5vw,82px)} .music h2{font-size:clamp(42px,4.6vw,74px)} .contact-intro h2{font-size:clamp(44px,5vw,80px)} footer p{font-size:clamp(48px,6.5vw,108px)} .intro-copy h1{font-size:clamp(34px,3.6vw,56px)} } /* About: one clear narrative, three supporting perspectives, one conclusion. */ .about h2{margin-bottom:68px} .about-grid{width:100%;max-width:1180px;grid-template-columns:minmax(0,1fr) minmax(320px,410px);gap:8vw 7vw;padding-top:42px} .about-story{max-width:650px} .about-story p{margin:0;color:var(--offwhite-soft);font-size:16px;line-height:1.8;letter-spacing:0} .about-story p+p{margin-top:24px} .about-perspectives{border-top:1px solid rgba(244,243,239,.24)} .about-perspectives>div{display:grid;grid-template-columns:42px 1fr;gap:4px 16px;padding:19px 0;border-bottom:1px solid rgba(244,243,239,.18)} .about-perspectives span{grid-row:1/3;color:#b7ca8d;font-size:9px;font-weight:700;letter-spacing:.18em} .about-perspectives strong{color:var(--offwhite);font-size:18px;line-height:1.15;font-weight:500} .about-perspectives small{color:var(--offwhite-soft);font-size:11px;line-height:1.5;letter-spacing:.02em} .about-closing{grid-column:1/-1;margin:0!important;padding:30px 0 0;border-top:1px solid rgba(244,243,239,.24);color:var(--offwhite)!important;font-size:clamp(24px,2.2vw,34px)!important;line-height:1.2!important;letter-spacing:-.035em!important;font-weight:500} @media(max-width:800px){.about h2{margin-bottom:52px}.about-grid{display:block;padding-top:30px}.about-story p{font-size:15px}.about-perspectives{margin-top:42px}.about-closing{margin-top:40px!important;padding-top:26px;font-size:27px!important}} /* Make filtering feel immediate and connect the control to its result. */ .lens-controls button[aria-pressed="true"]:after{content:"✓";transform:none;background:#657456;color:var(--offwhite);border-color:#657456} .lens-status{font-weight:700;color:#41503f} .lens-status.is-updated{animation:lensStatusConfirm .55s cubic-bezier(.16,1,.3,1)} .work-filter-feedback{width:100%;max-width:1400px;display:grid;grid-template-columns:145px 1fr auto;align-items:center;gap:28px;margin:-62px auto 48px;padding:17px 0;border-top:1px solid rgba(37,49,38,.32);border-bottom:1px solid rgba(37,49,38,.32);color:#253126} .work-filter-feedback span{font-size:8px;font-weight:700;letter-spacing:.2em;color:#657456} .work-filter-feedback strong{font-size:18px;font-weight:500} .work-filter-feedback small{font-size:10px;letter-spacing:.06em;color:#65705f} .work-filter-feedback.is-updated{animation:filterResultConfirm .72s cubic-bezier(.16,1,.3,1)} @keyframes lensStatusConfirm{0%{opacity:.25;transform:translateY(7px)}100%{opacity:1;transform:none}} @keyframes filterResultConfirm{0%{opacity:.3;transform:translateY(12px)}100%{opacity:1;transform:none}} @media(max-width:800px){.work-filter-feedback{grid-template-columns:1fr auto;gap:8px 16px;margin:-34px auto 34px;padding:15px 0}.work-filter-feedback span{grid-column:1/-1}.work-filter-feedback strong{font-size:16px}.work-filter-feedback small{text-align:right}.lens-controls button[aria-pressed="true"]:after{content:"✓"}} @media(prefers-reduced-motion:reduce){.lens-status.is-updated,.work-filter-feedback.is-updated{animation:none}} /* Opened project stories stay aligned with the project row above. */ .work>.project.lens-match{transform:none} .work>.project-inline-case, .work>.aether-case.project-inline-case{width:100%;max-width:1400px;margin-left:auto;margin-right:auto;border-left:1px solid rgba(238,230,215,.18);border-right:1px solid rgba(238,230,215,.18);border-radius:0 0 26px 26px;overflow:hidden} .work>.project-inline-case .case-content{width:100%;padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px)} /* Project imagery is shown in the opened story, without a floating hover card. */ .project-preview{display:none!important} /* Preserve the linework, sharpness and transparent edges of the new portrait. */ .character{image-rendering:auto;object-fit:contain;object-position:center bottom;mix-blend-mode:normal;filter:none} @media(max-width:800px){.work>.project-inline-case,.work>.aether-case.project-inline-case{width:100%;margin-left:auto;margin-right:auto;border-radius:0 0 20px 20px}} /* Faded architectural sketch environment behind the separate portrait. */ .hero-environment-image{position:absolute;z-index:1;inset:5% 0 2%;width:100%;height:93%;object-fit:cover;object-position:center bottom;opacity:.42;mix-blend-mode:luminosity;filter:saturate(.65) sepia(.12) hue-rotate(42deg) contrast(.9) brightness(.72);pointer-events:none;mask-image:radial-gradient(ellipse 78% 78% at 58% 54%,#000 35%,rgba(0,0,0,.82) 57%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 78% 78% at 58% 54%,#000 35%,rgba(0,0,0,.82) 57%,transparent 100%);animation:environmentDrift 16s ease-in-out infinite alternate} .character-wrap{filter:drop-shadow(0 18px 16px rgba(7,11,7,.32))} @keyframes environmentDrift{from{transform:scale(1.015) translate3d(-.3%,0,0)}to{transform:scale(1.035) translate3d(.3%,-.35%,0)}} @media(max-width:700px){.hero-environment-image{inset:15% -22% 12%;width:144%;height:73%;opacity:.31;object-position:54% bottom;mask-image:radial-gradient(ellipse 62% 74% at 58% 52%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 62% 74% at 58% 52%,#000 30%,transparent 100%)}.character-wrap{filter:drop-shadow(0 14px 12px rgba(7,11,7,.28))}} @media(prefers-reduced-motion:reduce){.hero-environment-image{animation:none}} /* Compact language control within the established navigation. */ .nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:20px}.language-switch{display:flex;align-items:center;padding:3px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(22,28,22,.2);backdrop-filter:blur(10px)}.language-switch button{min-width:32px;height:25px;padding:0 8px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.62);font:700 8px/1 'DM Sans',sans-serif;letter-spacing:.12em;cursor:pointer;transition:background .3s ease,color .3s ease}.language-switch button[aria-pressed="true"]{background:#f4f3ef;color:#253126}.language-switch button:focus-visible{outline:2px solid #b7ca8d;outline-offset:3px} @media(max-width:700px){.nav-actions{gap:10px}.nav-actions .menu{display:none}.language-switch button{min-width:30px;padding:0 7px}} /* Filtering changes the projects and selected row, never the section background. */ .project-lens, body[data-lens="human"] .project-lens, body[data-lens="structure"] .project-lens, body[data-lens="feeling"] .project-lens{background:var(--offwhite-surface)!important} /* Cohesive chapter rhythm */ :root{--motion-ease:cubic-bezier(.16,1,.3,1)} .about,.project-lens,.work,.skills,.music{position:relative;isolation:isolate;margin-top:-24px;border-radius:34px 34px 0 0;scroll-margin-top:32px;overflow:hidden} .about{z-index:11}.project-lens{z-index:12}.work{z-index:13}.skills{z-index:14}.music{z-index:15} .about>.kicker,.project-lens>div:first-child>p,.section-head>p,.skills-intro>p,.music-copy>p{font-size:11px;line-height:1;letter-spacing:.2em;font-weight:700} .work:after{content:"";position:absolute;z-index:-1;right:-22vw;top:9%;width:64vw;height:64vw;border:1px solid rgba(101,116,86,.14);border-radius:50%;pointer-events:none;animation:chapterOrbit 24s ease-in-out infinite} .work:before{content:"";position:absolute;z-index:-1;left:7vw;top:29%;width:1px;height:48%;background:linear-gradient(transparent,rgba(101,116,86,.2),transparent);pointer-events:none} .work>.section-head,.work>.project,.work>.project-more,.work>.project-inline-case{position:relative;z-index:1} @keyframes chapterOrbit{50%{transform:translate(-5vw,4vw) scale(.93)}} /* Moving project covers */ .project-preview{position:fixed;z-index:90;left:0;top:0;width:340px;min-height:225px;transform:translate3d(var(--preview-x,-500px),var(--preview-y,-500px),0) scale(.9) rotate(2deg);opacity:0;visibility:hidden;pointer-events:none;border:1px solid rgba(244,243,239,.22);border-radius:22px;overflow:hidden;background:#29372d;color:var(--offwhite);box-shadow:0 30px 80px rgba(18,25,19,.32);transition:opacity .22s ease,transform .55s var(--motion-ease),visibility 0s .3s} .project-preview.is-visible{opacity:1;visibility:visible;transform:translate3d(var(--preview-x),var(--preview-y),0) scale(1) rotate(-1deg);transition:opacity .22s ease,transform .18s ease-out,visibility 0s} .preview-visual{position:relative;height:132px;overflow:hidden;background:linear-gradient(135deg,#617257,#26352b)} .preview-visual:before{content:"";position:absolute;width:190px;height:190px;right:-35px;top:-78px;border:1px solid rgba(244,243,239,.38);border-radius:50%} .preview-visual:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 18px,rgba(244,243,239,.055) 19px 20px);mix-blend-mode:screen} .preview-visual span:first-child{position:absolute;left:25px;bottom:22px;width:54%;height:2px;background:#c8dc98;transform:rotate(-8deg)} .preview-visual span:nth-child(2){position:absolute;left:52px;bottom:46px;width:72%;height:1px;background:rgba(244,243,239,.55);transform:rotate(11deg)} .preview-visual i{position:absolute;left:30px;top:24px;width:52px;height:52px;border:1px solid rgba(244,243,239,.72);border-radius:50%;box-shadow:38px 26px 0 -15px #c8dc98} .preview-copy{padding:18px 22px 20px}.preview-copy small{display:block;margin-bottom:7px;color:#c8dc98;font-size:9px;letter-spacing:.18em}.preview-copy strong{display:block;font-size:27px;line-height:1;letter-spacing:-.045em}.preview-copy p{margin:8px 0 0;color:var(--offwhite-soft);font-size:10px;letter-spacing:.05em;text-transform:uppercase} .project-preview[data-tone="1"] .preview-visual{background:linear-gradient(140deg,#323633,#767e72)} .project-preview[data-tone="2"] .preview-visual{background:linear-gradient(140deg,#725441,#2c392e)} .project-preview[data-tone="3"] .preview-visual{background:linear-gradient(140deg,#263c3a,#7d866a)} .project-preview[data-tone="4"] .preview-visual{background:linear-gradient(140deg,#8a745d,#344235)} .project-preview[data-tone="5"] .preview-visual{background:linear-gradient(140deg,#465240,#202c25)} @media(max-width:800px){.about,.project-lens,.work,.skills,.music{margin-top:-14px;border-radius:24px 24px 0 0}.work:after{right:-62vw;width:120vw;height:120vw}.work:before{display:none}} @media(pointer:coarse){.project-preview{display:none}} @media(prefers-reduced-motion:reduce){.work:after{animation:none}.project-preview{display:none}.about,.project-lens,.work,.skills,.music{scroll-behavior:auto}} /* Real project material */ .preview-visual>img{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);filter:saturate(.76) contrast(1.04);transition:opacity .3s ease,transform .8s var(--motion-ease)} .project-preview.has-concept .preview-visual>img{opacity:1;transform:scale(1)} .project-preview.has-concept .preview-visual:after{z-index:3;background:linear-gradient(0deg,rgba(24,32,26,.28),transparent 65%)} .project-preview.has-concept .preview-visual span,.project-preview.has-concept .preview-visual i{display:none} .project-concept-media{position:relative;margin:8px 0 54px;border:1px solid rgba(244,243,239,.16);border-radius:24px;overflow:hidden;background:#1d2821;box-shadow:0 28px 70px rgba(15,22,17,.2)} .project-concept-media img{display:block;width:100%;max-height:610px;object-fit:cover;filter:saturate(.84) contrast(1.02);transition:transform 1.1s var(--motion-ease),filter .7s ease} .project-concept-media:hover img{transform:scale(1.018);filter:saturate(1) contrast(1)} .project-concept-media figcaption{position:absolute;left:18px;bottom:18px;padding:9px 12px;border-radius:999px;background:rgba(30,42,33,.84);color:#dce9b6;font-size:8px;letter-spacing:.18em;backdrop-filter:blur(12px)} @media(max-width:800px){.project-concept-media{margin:4px 0 34px;border-radius:17px}.project-concept-media figcaption{left:12px;bottom:12px}.project-concept-media img{max-height:420px}} /* Give the Å ring room below the first footer line on wide screens */ footer>p span{display:inline-block;transform:translateY(.12em)} @media(min-width:1200px){footer>p{line-height:.86}footer>p span{transform:translateY(.16em)}} /* Direct contact */ .contact-form-section{position:relative;z-index:16;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(300px,.85fr) minmax(440px,1.15fr);gap:8vw;padding:130px 4vw 145px;margin-top:-24px;border-radius:34px 34px 0 0;background:linear-gradient(145deg,#263429,#344336 62%,#3d4939);color:var(--offwhite)} .contact-form-section:before{content:"";position:absolute;z-index:-1;left:-18vw;bottom:-35vw;width:66vw;height:66vw;border:1px solid rgba(183,202,141,.12);border-radius:50%;animation:chapterOrbit 26s ease-in-out infinite reverse} .contact-intro>p{margin:0 0 62px;color:#c8dc98;font-size:11px;font-weight:700;letter-spacing:.2em}.contact-intro h2{margin:0;font-size:clamp(46px,6.5vw,96px);line-height:.91;letter-spacing:-.065em;font-weight:500}.contact-intro h2 em{color:#c8dc98;font-style:normal}.contact-intro>span{display:block;margin-top:45px;color:var(--offwhite-soft);font-size:12px;letter-spacing:.06em} .contact-form{align-self:end}.contact-form label{position:relative;display:block;padding:17px 0 22px;border-bottom:1px solid rgba(244,243,239,.28)}.contact-form label>span{display:block;margin-bottom:14px;color:#c8dc98;font-size:9px;font-weight:700;letter-spacing:.19em}.contact-form input,.contact-form textarea{display:block;width:100%;padding:0;border:0;outline:0;resize:vertical;background:transparent;color:var(--offwhite);font:500 clamp(22px,2.7vw,40px)/1.18 'DM Sans',sans-serif;letter-spacing:-.035em}.contact-form textarea{min-height:145px}.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(244,243,239,.38)}.contact-form label:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:#c8dc98;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--motion-ease)}.contact-form label:focus-within:after{transform:scaleX(1)}.contact-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}.contact-submit{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:35px}.contact-submit button{display:flex;align-items:center;justify-content:space-between;gap:36px;min-width:280px;padding:11px 11px 11px 24px;border:1px solid rgba(244,243,239,.4);border-radius:999px;background:transparent;color:var(--offwhite);font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.15em;cursor:pointer;transition:background .45s ease,color .35s ease,transform .5s var(--motion-ease)}.contact-submit button i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#c8dc98;color:#263429;font-size:17px;font-style:normal;transition:transform .55s var(--motion-ease)}.contact-submit button:hover{background:var(--offwhite);color:#263429;transform:translateY(-3px)}.contact-submit button:hover i{transform:rotate(45deg)}.contact-submit button:disabled{cursor:wait;opacity:.8}.contact-form.is-sent .contact-submit button{background:#c8dc98;color:#263429}.contact-status{max-width:220px;margin:0;color:var(--offwhite-soft);font-size:10px;line-height:1.5;text-align:right} @media(max-width:900px){.contact-form-section{grid-template-columns:1fr;gap:75px;padding:105px 5vw 120px}.contact-intro>p{margin-bottom:40px}.contact-submit{align-items:flex-start;flex-direction:column}.contact-status{text-align:left}.contact-submit button{width:100%;min-width:0}} @media(max-width:800px){.contact-form-section{margin-top:-14px;border-radius:24px 24px 0 0}.contact-form input,.contact-form textarea{font-size:25px}} @media(prefers-reduced-motion:reduce){.contact-form-section:before{animation:none}} /* Project provenance and complete visual series */ .project-kind{display:inline-flex;align-items:center;margin-left:12px;padding:5px 8px;border:1px solid rgba(101,116,86,.38);border-radius:999px;color:#53634d;font-size:7px;line-height:1;letter-spacing:.14em;vertical-align:middle}.project:hover .project-kind,.project:focus .project-kind{border-color:rgba(200,220,152,.45);color:#c8dc98}.aether-concept-media{width:min(1180px,92vw);margin:0 auto 80px}.aether-concept-media img{max-height:none;aspect-ratio:16/9;object-fit:cover} @media(max-width:800px){.project-kind{display:block;width:max-content;margin:7px 0 0}.aether-concept-media{width:92vw;margin-bottom:45px}} /* The lens now filters rather than merely highlighting */ .work.lens-filtering>.project.lens-muted,.work.lens-filtering>.project.is-extra.lens-muted{min-height:0;max-height:0;border-width:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px) scale(.985);filter:none;padding-top:0;padding-bottom:0;transition:max-height .62s cubic-bezier(.16,1,.3,1),min-height .62s cubic-bezier(.16,1,.3,1),opacity .32s ease,transform .62s cubic-bezier(.16,1,.3,1),visibility 0s .62s,padding .62s cubic-bezier(.16,1,.3,1)}.work.lens-filtering>.project.lens-match{min-height:180px;max-height:220px;opacity:1;visibility:visible;pointer-events:auto}.work.lens-filtering .project-more{max-height:0;margin-top:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0;visibility:hidden;overflow:hidden}.work:not(.lens-filtering)>.project.lens-muted{opacity:1;visibility:visible;filter:none} @media(max-width:800px){.work.lens-filtering>.project.lens-match{min-height:135px;max-height:170px}} /* Organic skills landscape */ .skills{background:linear-gradient(145deg,#e5dcc8 0%,#dcd1ba 58%,#c8b99d 100%)}.skills-intro h2{max-width:1050px}.skills-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;border:0}.skills-grid article,.skills-grid article:nth-child(n){grid-column:auto;flex:1 1 clamp(280px,29vw,440px);max-width:470px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 55px;border:1px solid rgba(37,49,38,.22);background:rgba(239,233,218,.5);text-align:center;box-shadow:inset 0 0 55px rgba(255,255,255,.15);animation:skillShape 13s ease-in-out infinite;transition:opacity .75s var(--delay,0ms) ease,transform .9s var(--delay,0ms) cubic-bezier(.16,1,.3,1),background .5s ease,color .45s ease,box-shadow .5s ease,border-radius .8s ease}.skills-grid article:nth-child(2n){animation-direction:reverse;animation-duration:16s}.skills-grid article:nth-child(3n){animation-delay:-5s;animation-duration:18s}.skills-grid article:nth-child(4),.skills-grid article:nth-child(7){flex-grow:1.18}.skills-grid article:before{inset:auto;right:8%;bottom:8%;width:85px;height:85px;background:radial-gradient(circle,rgba(101,116,86,.2),transparent 68%)}.skills-grid article>span{margin:0 0 42px}.skills-grid article h3{margin:0 0 20px;font-size:clamp(30px,3.4vw,48px)}.skills-grid article p{max-width:320px}.skills-grid article.seen:hover{transform:translateY(-10px) scale(1.025);background:#2b392d;color:#eee6d7;box-shadow:0 28px 70px rgba(37,49,38,.2)} .tools{margin-top:28px;padding:28px 38px;border:0;border-radius:999px;background:#a99a7d;box-shadow:inset 0 0 0 1px rgba(37,49,38,.22),0 18px 45px rgba(37,49,38,.08)}.experience-proof{grid-template-columns:repeat(3,1fr);gap:36px;margin-top:65px;border:0;background:transparent}.experience-proof>p{grid-column:1/-1;padding:0 0 8px}.experience-proof>div{padding:28px 0 0;border-left:0;border-top:1px solid rgba(37,49,38,.3)}.experience-proof strong{font-size:20px}.experience-proof span{max-width:340px} @keyframes skillShape{0%,100%{border-radius:46% 54% 48% 52% / 54% 45% 55% 46%}33%{border-radius:55% 45% 58% 42% / 44% 57% 43% 56%}66%{border-radius:43% 57% 45% 55% / 58% 42% 58% 42%}} @media(max-width:800px){.skills-grid{gap:14px}.skills-grid article,.skills-grid article:nth-child(n){flex-basis:100%;max-width:520px;min-height:245px;padding:40px 34px}.tools{border-radius:28px;padding:28px}.experience-proof{grid-template-columns:1fr;gap:25px;margin-top:50px}.experience-proof>p{grid-column:auto}.experience-proof>div{padding-top:24px}} @media(prefers-reduced-motion:reduce){.skills-grid article,.skills-grid article:nth-child(n){animation:none;border-radius:48% 52% 46% 54% / 52% 46% 54% 48%}} /* Refined editorial skills, no cards and no decorative bubbles */ .skills{background:#e5dcc8}.skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 6vw;align-items:stretch}.skills-grid article,.skills-grid article:nth-child(n){position:relative;display:block;min-height:245px;max-width:none;padding:28px 0 42px;border:0;border-top:1px solid rgba(37,49,38,.34);border-radius:0;background:transparent;box-shadow:none;text-align:left;animation:none;transform:none}.skills-grid article:nth-last-child(-n+2){border-bottom:1px solid rgba(37,49,38,.34)}.skills-grid article:before{display:none}.skills-grid article:after{content:"";position:absolute;left:0;top:-1px;width:100%;height:3px;background:#657456;transform:scaleX(0);transform-origin:left;transition:transform .65s cubic-bezier(.16,1,.3,1)}.skills-grid article:hover:after{transform:scaleX(1)}.skills-grid article>span{display:block;margin:0 0 58px;color:#657456;font-size:10px;letter-spacing:.18em}.skills-grid article h3{margin:0 0 18px;font-size:clamp(34px,4.2vw,62px);line-height:.9;transition:transform .55s cubic-bezier(.16,1,.3,1),letter-spacing .55s cubic-bezier(.16,1,.3,1)}.skills-grid article p{max-width:480px;margin:0;color:#687467}.skills-grid article.seen:hover{transform:none;background:transparent;color:#253126;box-shadow:none}.skills-grid article:hover h3{transform:translateX(12px);letter-spacing:-.06em}.skills-grid article:hover p{color:#4d5a4e}.tools{margin-top:55px;padding:28px 0;border:0;border-top:1px solid rgba(37,49,38,.34);border-bottom:1px solid rgba(37,49,38,.34);border-radius:0;background:transparent;box-shadow:none}.experience-proof{margin-top:80px} @media(max-width:800px){.skills-grid{grid-template-columns:1fr;gap:0}.skills-grid article,.skills-grid article:nth-child(n){min-height:205px;max-width:none;padding:25px 0 36px}.skills-grid article:nth-last-child(-n+2){border-bottom:0}.skills-grid article:last-child{border-bottom:1px solid rgba(37,49,38,.34)}.skills-grid article>span{margin-bottom:42px}.skills-grid article h3{font-size:38px}.tools{border-radius:0;padding:25px 0}} /* Skills take their visual language from the music section */ .skills{background:radial-gradient(circle at 12% 18%,rgba(183,202,141,.1),transparent 28%),linear-gradient(145deg,#344235,#3d4b3b 60%,#46503e);color:#eee6d7}.skills:after{content:"";position:absolute;right:-18vw;top:7%;width:58vw;height:58vw;border:1px solid rgba(183,202,141,.1);border-radius:50%;pointer-events:none;animation:aboutOrbit 24s ease-in-out infinite}.skills-intro>p{color:#b7ca8d}.skills-intro h2{color:#eee6d7}.skills-intro h2 em{color:#c8dc98;font-style:normal}.skills-grid{position:relative;z-index:1;display:block;padding:16px;border:1px solid rgba(238,230,215,.12);border-radius:30px;background:rgba(25,34,27,.32);overflow:hidden;box-shadow:0 35px 80px rgba(18,25,19,.24)}.skills-grid article,.skills-grid article:nth-child(n){min-height:165px;display:grid;grid-template-columns:120px minmax(240px,.9fr) minmax(280px,1.1fr);align-items:center;padding:28px 36px;border:0;border-radius:0;background:rgba(28,38,30,.62);color:#eee6d7}.skills-grid article:nth-child(even){background:rgba(69,82,64,.68)}.skills-grid article+article{border-top:1px solid rgba(238,230,215,.1)}.skills-grid article:first-child{border-radius:18px 18px 0 0}.skills-grid article:last-child{border-radius:0 0 18px 18px}.skills-grid article:after{left:0;top:0;width:4px;height:100%;background:#b7ca8d;transform:scaleY(0);transform-origin:bottom}.skills-grid article:hover:after{transform:scaleY(1)}.skills-grid article>span{margin:0;color:#b7ca8d}.skills-grid article h3{margin:0;font-size:clamp(32px,4vw,58px);color:#eee6d7}.skills-grid article p{max-width:520px;margin:0;color:#c9d0c2;font-size:13px;line-height:1.75}.skills-grid article.seen:hover{background:#263326;color:#eee6d7}.skills-grid article:nth-child(even).seen:hover{background:#53634d}.skills-grid article:hover h3{transform:translateX(10px)}.skills-grid article:hover p{color:#eee6d7} .tools{margin-top:22px;padding:30px 36px;border:1px solid rgba(238,230,215,.12);border-radius:24px;background:rgba(28,38,30,.48);color:#eee6d7;box-shadow:0 24px 55px rgba(18,25,19,.16)}.tools p:nth-child(2){color:#d6decf}.experience-proof{color:#eee6d7}.experience-proof>p{color:#b7ca8d}.experience-proof>div{border-color:rgba(238,230,215,.2)}.experience-proof strong{color:#eee6d7}.experience-proof span{color:#c9d0c2} @media(max-width:800px){.skills-grid{padding:10px;border-radius:22px}.skills-grid article,.skills-grid article:nth-child(n){min-height:210px;display:block;padding:28px 24px}.skills-grid article>span{margin-bottom:44px}.skills-grid article h3{margin-bottom:20px}.tools{border-radius:20px;padding:28px 24px}.skills:after{width:110vw;height:110vw;right:-60vw}} @media(prefers-reduced-motion:reduce){.skills:after{animation:none}} /* Cooler off white foundation in place of beige surfaces */ :root{--paper:#f2f0ea;--sand:#e9e7e1}.work{background:#f2f0ea}.project-lens,body[data-lens="human"] .project-lens,body[data-lens="structure"] .project-lens,body[data-lens="feeling"] .project-lens{background:#e9e7e1}.marquee{background:#e5e3dc;color:#253326;border-color:rgba(37,51,38,.22)}.marquee:before{background:linear-gradient(90deg,#e5e3dc,transparent)}.marquee:after{background:linear-gradient(-90deg,#e5e3dc,transparent)}.case-library{background:#eeece6}.case-content{background:#f4f2ed}footer{background:#e9e7e1;color:#263526}footer p span{color:transparent;-webkit-text-stroke-color:#263526}footer a{color:#263526;border-color:#263526} /* One neutral off white family across every light and dark section */ :root{--offwhite:#f4f3ef;--offwhite-soft:#d8dad5;--offwhite-surface:#eeece7}.work{background:var(--offwhite)}.project-lens,body[data-lens="human"] .project-lens,body[data-lens="structure"] .project-lens,body[data-lens="feeling"] .project-lens{background:var(--offwhite-surface)}.marquee{background:#ebe9e4}.marquee:before{background:linear-gradient(90deg,#ebe9e4,transparent)}.marquee:after{background:linear-gradient(-90deg,#ebe9e4,transparent)}.case-library{background:#efeee9}.case-content{background:#f6f5f2}footer{background:#eceae5} .about,.aether-case,.work>details.project-inline-case[open],.work>.project-inline-case .case-content,.music,.skills{color:var(--offwhite)}.about h2,.about-grid p,.aether-head h2,.work>.project-inline-case .case-lead,.music h2,.music a,.skills-intro h2,.skills-grid article h3,.experience-proof strong{color:var(--offwhite)}.about-grid p:last-child,.aether-lead,.aether-body p,.work>.project-inline-case .case-content article p,.music-copy>div p,.skills-grid article p,.experience-proof span,.tools p:nth-child(2){color:var(--offwhite-soft)}.aether-close,.aether-files a{color:var(--offwhite)}.lens-controls button:hover,.lens-controls button:focus-visible,.lens-controls button[aria-pressed="true"],.lens-controls button[aria-pressed="true"] strong{color:var(--offwhite)}.lens-controls button[aria-pressed="true"] small{color:var(--offwhite-soft)}.sound-signature span{background:linear-gradient(to top,#b7ca8d,var(--offwhite))} /* Large editorial sections should meet with crisp, architectural edges. */ .about,.project-lens,.work,.skills,.music{border-radius:0} /* Desktop type scale: editorial and expressive without overwhelming the work. */ @media(min-width:901px){ .intro-copy h1{font-size:clamp(34px,3.2vw,52px)} .about h2{max-width:980px;font-size:clamp(48px,4.25vw,68px)} .project-lens h2{font-size:clamp(46px,4.1vw,66px)} .lens-controls strong{font-size:clamp(34px,3.2vw,52px)} .section-head h2{font-size:clamp(46px,4.35vw,70px)} .work>.project.is-primary h3{font-size:clamp(36px,3.15vw,52px)} .work.show-all-projects>.project.is-extra h3,.project h3{font-size:clamp(28px,2.55vw,42px)} .skills-intro h2{font-size:clamp(46px,4.25vw,68px)} .skills-grid article h3{font-size:clamp(30px,2.65vw,43px)} .music h2{font-size:clamp(44px,3.85vw,62px)} .contact-footer-head h2,.contact-intro h2,.contact-card h2{font-size:clamp(50px,4.75vw,76px)} .contact-footer .contact-channels strong{font-size:clamp(28px,2.8vw,45px)} .case-expanded-head h2{font-size:clamp(48px,4.7vw,76px)} .work>.project-inline-case .case-lead{font-size:clamp(28px,2.7vw,44px)} .aether-head h2{font-size:clamp(62px,6.5vw,104px)} .myko-play-head h3{font-size:clamp(38px,3.6vw,58px)} .game-design-lead h3{font-size:clamp(36px,3.25vw,52px)} } /* Calm selected state in the established earth palette */ body[data-lens="human"] .project-lens,body[data-lens="structure"] .project-lens,body[data-lens="feeling"] .project-lens{background:var(--offwhite-surface)}.lens-controls button[aria-pressed="true"]{color:#253126;box-shadow:inset 4px 0 0 #657456}.lens-controls button[aria-pressed="true"]:before{background:linear-gradient(90deg,#d8d0ba,#cbc5aa);opacity:1}.lens-controls button[aria-pressed="true"]>span{color:#657456}.lens-controls button[aria-pressed="true"]:after{background:#253126;color:#eee6d7;border-color:#253126}.lens-controls button[aria-pressed="true"] small{opacity:.82}.lens-controls button[aria-pressed="true"] strong{color:#253126}.lens-controls button[aria-pressed="true"]:hover{color:#253126} .lens-controls button[aria-pressed="true"],.lens-controls button[aria-pressed="true"]:hover{color:#eee6d7;box-shadow:inset 5px 0 0 #b7ca8d}.lens-controls button[aria-pressed="true"]:before{background:linear-gradient(90deg,#253126,#344534);opacity:1;transform:scaleX(1)}.lens-controls button[aria-pressed="true"]>span{color:#b7ca8d}.lens-controls button[aria-pressed="true"] strong{color:#eee6d7}.lens-controls button[aria-pressed="true"] small{color:#d4cbbb;opacity:1}.lens-controls button[aria-pressed="true"]:after{background:#b7ca8d;color:#253126;border-color:#b7ca8d} /* Final recruiter-focused hierarchy overrides. */ .case-evidence-summary{grid-template-columns:minmax(330px,.9fr) minmax(420px,1.1fr)} .case-evidence-copy{display:grid!important;grid-template-columns:1fr!important;gap:0!important;background:transparent!important} .case-evidence-copy p{display:grid;grid-template-columns:120px 1fr;gap:24px;margin:0!important;padding:15px 0;color:var(--offwhite-soft)!important;font-size:13px!important;line-height:1.65!important;border-top:1px solid rgba(238,230,215,.14)} .case-evidence-copy p:last-child{border-bottom:1px solid rgba(238,230,215,.14)}.case-evidence-copy span{color:#b7ca8d;font-size:8px;line-height:1.6;letter-spacing:.18em;font-weight:700} .case-evidence-points{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:1px!important;background:rgba(238,230,215,.18)} .case-evidence-summary strong{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:168px;padding:20px}.case-evidence-summary strong i{color:#b7ca8d;font-size:8px;font-style:normal;letter-spacing:.18em} .aether-quickfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 4vw 86px;background:rgba(238,230,215,.16);border:1px solid rgba(238,230,215,.16)}.aether-quickfacts p{min-height:145px;margin:0;padding:24px;background:#1d2a20;color:var(--offwhite-soft);font-size:12px;line-height:1.65}.aether-quickfacts span{display:block;margin-bottom:42px;color:#b7ca8d;font-size:8px;line-height:1;letter-spacing:.18em;font-weight:700} .work.show-all-projects>.project.is-extra{padding-top:26px;padding-bottom:26px;background:transparent}.work.show-all-projects>.project.is-extra .project-no{opacity:.62}.work.show-all-projects>.project.is-extra .project-title p{font-size:9px}.work.show-all-projects>.project.is-extra .project-question{max-width:420px;font-size:11px;line-height:1.55}.work.show-all-projects>.project.is-extra:hover{background:rgba(101,116,86,.07)} @media(max-width:800px){.case-evidence-summary{grid-template-columns:1fr}.case-evidence-copy p{grid-template-columns:1fr;gap:8px}.case-evidence-points{grid-template-columns:1fr!important}.case-evidence-summary strong{min-height:100px}.aether-quickfacts{grid-template-columns:1fr;margin:0 20px 58px}.aether-quickfacts p{min-height:0}.aether-quickfacts span{margin-bottom:24px}} /* One clear project journey: selected work first, optional filters second. */ .work>.section-head{grid-template-columns:minmax(150px,.55fr) minmax(0,2fr);column-gap:7vw;row-gap:28px;margin-bottom:72px} .work>.section-head .section-intro{grid-column:2;max-width:610px;margin:0;color:#62665f;font-size:14px;line-height:1.7} .work>.project-lens{width:100%;max-width:1400px;margin:78px auto 42px;padding:58px 0 48px;background:transparent!important;border-top:1px solid rgba(37,49,38,.35);border-bottom:1px solid rgba(37,49,38,.35);color:#253126;overflow:visible} .work>.project-lens:before,.work>.project-lens:after,.work>.project-lens h2:after{display:none} .work>.project-lens>div:first-child{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(0,2fr);column-gap:7vw;row-gap:16px;margin-bottom:38px} .work>.project-lens>div:first-child .section-kicker{grid-row:1/3} .work>.project-lens h2{font-size:clamp(34px,3.2vw,52px);line-height:1;letter-spacing:-.045em} .work>.project-lens .lens-status{width:auto;margin:0;padding:0;color:#66705f;font-size:11px;font-weight:500;letter-spacing:.04em} .work>.project-lens .lens-status:before{display:none} .work>.project-lens .lens-controls{display:flex;flex-wrap:wrap;gap:10px;width:auto;margin-left:calc(22.5% + 7vw);border:0} .work>.project-lens .lens-controls button{width:auto;min-height:48px;display:inline-flex;align-items:center;padding:0 22px;border:1px solid rgba(37,49,38,.3);background:transparent;color:#253126;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.12em;box-shadow:none!important;transform:none!important} .work>.project-lens .lens-controls button:before{background:#253126} .work>.project-lens .lens-controls button:after{position:static;width:22px;height:22px;margin-left:14px;border:0;font-size:12px;opacity:.55} .work>.project-lens .lens-controls button:hover,.work>.project-lens .lens-controls button[aria-pressed="true"]{color:var(--offwhite);background:#253126} body:not([data-lens="selected"]) .work-filter-feedback{display:none} @media(max-width:800px){.work>.section-head{display:block;margin-bottom:48px}.work>.section-head .section-intro{margin-top:25px}.work>.project-lens{margin:50px auto 28px;padding:42px 0 36px}.work>.project-lens>div:first-child{display:block}.work>.project-lens>div:first-child .section-kicker{margin-bottom:22px}.work>.project-lens .lens-status{margin-top:18px}.work>.project-lens .lens-controls{margin:28px 0 0;gap:8px}.work>.project-lens .lens-controls button{min-height:44px;padding:0 15px;font-size:9px}.work>.project-lens .lens-controls button:after{width:18px;margin-left:8px}} /* Centered filter-first project overview. */ .work>.section-head{display:block;max-width:1180px;margin:0 auto 56px;text-align:center} .work>.section-head>p:first-child{margin:0 0 28px} .work>.section-head h2{max-width:900px;margin:0 auto} .work>.section-head .section-intro{max-width:620px;margin:30px auto 0;text-align:center} .work>.project-lens{max-width:1180px;margin:0 auto 34px;padding:34px 0 30px;text-align:center} .work>.project-lens>div:first-child{display:block;margin:0 auto 26px} .work>.project-lens>div:first-child .section-kicker{margin:0 0 13px} .work>.project-lens h2{font-size:clamp(24px,2.3vw,36px)} .work>.project-lens .lens-status{margin:12px auto 0;text-align:center} .work>.project-lens .lens-controls{justify-content:center;margin:0 auto} .work>.project,.work>.project-inline-case,.work>.aether-case.project-inline-case,.work>.work-filter-feedback,.work>.project-more{max-width:1180px} @media(max-width:800px){.work>.section-head{text-align:left}.work>.section-head .section-intro{text-align:left}.work>.project-lens{text-align:left}.work>.project-lens .lens-status{text-align:left}.work>.project-lens .lens-controls{justify-content:flex-start}} /* Editorial project index: one heading, one compact filter rail, then work. */ .work{padding-top:96px} .work>.section-head{display:grid;grid-template-columns:180px minmax(0,1.35fr) minmax(280px,.65fr);align-items:end;gap:44px;max-width:1400px;margin:0 auto 64px;text-align:left} .work>.section-head>p:first-child{align-self:start;margin:10px 0 0} .work>.section-head h2{max-width:720px;margin:0;font-size:clamp(48px,4.6vw,74px);line-height:.92} .work>.section-head .section-intro{grid-column:3;max-width:390px;margin:0;text-align:left;color:#65705f;font-size:16px;line-height:1.55;letter-spacing:0} .work>.project-lens{max-width:1400px;margin:0 auto 30px;padding:0;background:#263429!important;border:0;text-align:left;color:var(--offwhite)} .work>.project-lens>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:0;padding:18px 22px;border-bottom:1px solid rgba(244,243,239,.16)} .work>.project-lens>div:first-child .section-kicker{margin:0;color:#b7ca8d;font-size:12px;letter-spacing:.16em} .work>.project-lens h2{display:none} .work>.project-lens .lens-status{margin:0;color:#d8dad5;font-size:13px;text-align:right;letter-spacing:.02em} .work>.project-lens .lens-controls{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;width:100%;margin:0} .work>.project-lens .lens-controls button{justify-content:center;width:100%;min-width:0;min-height:64px;padding:0 10px;border:0;border-right:1px solid rgba(244,243,239,.14);color:#e8e6df;font-size:12px;letter-spacing:.08em;white-space:nowrap} .work>.project-lens .lens-controls button:last-child{border-right:0} .work>.project-lens .lens-controls button:after{display:none} .work>.project-lens .lens-controls button:hover{background:#344536;color:#fff} .work>.project-lens .lens-controls button[aria-pressed="true"],.work>.project-lens .lens-controls button[aria-pressed="true"]:hover{background:#b7ca8d;color:#253126;box-shadow:none} .work>.work-filter-feedback{display:none!important} .work>.project,.work>.project-inline-case,.work>.aether-case.project-inline-case,.work>.project-more{max-width:1400px} @media(max-width:1050px){.work>.section-head{grid-template-columns:130px 1fr;gap:30px}.work>.section-head .section-intro{grid-column:2;max-width:650px}.work>.project-lens .lens-controls{grid-template-columns:repeat(4,1fr)}.work>.project-lens .lens-controls button{border-bottom:1px solid rgba(244,243,239,.14)}} @media(max-width:800px){.work{padding-top:72px}.work>.section-head{display:block;margin-bottom:44px}.work>.section-head>p:first-child{margin-bottom:28px}.work>.section-head h2{font-size:clamp(42px,12vw,58px)}.work>.section-head .section-intro{margin-top:26px;font-size:16px}.work>.project-lens>div:first-child{padding:16px}.work>.project-lens .lens-controls{display:flex;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.work>.project-lens .lens-controls::-webkit-scrollbar{display:none}.work>.project-lens .lens-controls button{flex:0 0 auto;width:auto;min-height:54px;padding:0 18px}.work>.project-lens .lens-status{font-size:12px}} /* Quiet, editorial filter selection. */ .work>.project-lens .lens-status{position:relative;padding:0;border:0;background:transparent;color:#d8dad5;font-weight:500} .work>.project-lens .lens-status:before{display:none!important} .work>.project-lens .lens-controls button{position:relative;opacity:.62;transition:opacity .25s ease,color .25s ease,background-color .25s ease,box-shadow .25s ease} .work>.project-lens .lens-controls button:not([aria-pressed="true"]):hover{opacity:.92} .work>.project-lens .lens-controls button[aria-pressed="true"],.work>.project-lens .lens-controls button[aria-pressed="true"]:hover{background:transparent!important;color:var(--offwhite)!important;font-weight:800;opacity:1;box-shadow:inset 0 -4px 0 #b7ca8d!important} .work>.project-lens .lens-controls button[aria-pressed="true"]:before{display:none!important} .work>.project-lens .lens-controls button[aria-pressed="true"]:after{display:none!important} @media(max-width:800px){.work>.project-lens .lens-status{padding:0;white-space:nowrap}} /* Keep the skills introduction connected to the skills it describes. */ .skills-intro .skills-summary{grid-column:2;max-width:620px;margin:34px 0 0;color:var(--offwhite-soft);font-size:16px;line-height:1.65;letter-spacing:0;font-weight:400} @media(max-width:800px){.skills-intro .skills-summary{grid-column:auto;margin:26px 0 0;font-size:16px}} /* Integrate the project filters into the editorial index instead of a separate control panel. */ .work>.project-lens{margin-bottom:18px;background:transparent!important;color:#253126;border-top:1px solid rgba(37,49,38,.28);border-bottom:1px solid rgba(37,49,38,.28)} .work>.project-lens>div:first-child{padding:20px 0;border-bottom:1px solid rgba(37,49,38,.16)} .work>.project-lens>div:first-child .section-kicker{color:#657456} .work>.project-lens .lens-status{color:#687267} .work>.project-lens .lens-controls{display:flex;justify-content:flex-start;gap:34px;padding:0;border:0} .work>.project-lens .lens-controls button{flex:0 0 auto;width:auto;min-height:62px;padding:2px 0 0;border:0;background:transparent!important;color:#526052;font-size:12px;opacity:.68;box-shadow:none!important} .work>.project-lens .lens-controls button:last-child{border:0} .work>.project-lens .lens-controls button:hover{background:transparent!important;color:#253126;opacity:1} .work>.project-lens .lens-controls button[aria-pressed="true"],.work>.project-lens .lens-controls button[aria-pressed="true"]:hover{background:transparent!important;color:#253126!important;opacity:1;box-shadow:inset 0 -3px 0 #657456!important} .work>.project-lens .lens-controls button[aria-pressed="true"]:before,.work>.project-lens .lens-controls button[aria-pressed="true"]:after{display:none!important} @media(max-width:800px){.work>.project-lens>div:first-child{padding:16px 0}.work>.project-lens .lens-controls{gap:25px;overflow-x:auto}.work>.project-lens .lens-controls button{min-height:54px;padding:2px 0 0}} /* Projects now follow the same tonal, dark editorial language as the other chapters. */ .work{background:radial-gradient(circle at 88% 12%,rgba(244,243,239,.055),transparent 30%),linear-gradient(145deg,#2f3d31,#394738 62%,#424d3d);color:var(--offwhite)} .work:before,.work:after{display:none} .work>.section-head>p:first-child{color:#c9d0c2} .work>.section-head h2{color:var(--offwhite)} .work>.section-head h2 span{color:#c9d0c2} .work>.section-head .section-intro{color:#c9d0c2} .work>.project-lens{margin-bottom:28px;padding:0;background:rgba(22,31,24,.22)!important;color:var(--offwhite);border:0} .work>.project-lens>div:first-child{padding:20px 24px;border:0;background:rgba(255,255,255,.035)} .work>.project-lens>div:first-child .section-kicker,.work>.project-lens .lens-status{color:#c9d0c2} .work>.project-lens .lens-controls{gap:0;padding:0 12px;background:rgba(255,255,255,.018)} .work>.project-lens .lens-controls button{min-height:62px;padding:0 16px;border:0;background:transparent!important;color:#c9d0c2;font-size:12px;opacity:.46;box-shadow:none!important} .work>.project-lens .lens-controls button:hover{background:transparent!important;color:var(--offwhite);opacity:.78} .work>.project-lens .lens-controls button[aria-pressed="true"],.work>.project-lens .lens-controls button[aria-pressed="true"]:hover{background:transparent!important;color:var(--offwhite)!important;font-weight:800;opacity:1;box-shadow:none!important} .work>.project{margin-bottom:6px;border:0!important;background:rgba(20,29,22,.28);color:var(--offwhite)} .work>.project:nth-of-type(even){background:rgba(255,255,255,.045)} .work>.project:hover,.work>.project:focus-visible{background:rgba(255,255,255,.105);color:var(--offwhite)} .work>.project .project-no,.work>.project .project-title p,.work>.project .project-question{color:#c9d0c2} .work>.project .project-title h3,.work>.project .arrow{color:var(--offwhite)} .work>.project-more{color:var(--offwhite);border-color:rgba(244,243,239,.18)} @media(max-width:800px){.work>.project-lens>div:first-child{padding:17px 18px}.work>.project-lens .lens-controls{gap:0;padding:0 4px}.work>.project-lens .lens-controls button{min-height:54px;padding:0 14px}.work>.project{margin-bottom:4px}}