@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap'); :root{--bg:#111211;--ink:#f0eee8;--muted:#a5a59e;--pink:#f4bacd;--line:#30322d;--green:#c4d4b0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font:15px 'DM Sans',Arial,sans-serif}body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.025;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--pink);outline-offset:6px}button{color:inherit}header{height:100px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font:800 36px 'Manrope',Arial;letter-spacing:-2px}.wordmark span{color:var(--pink);font-size:29px;display:inline-block;margin-left:5px}nav{display:flex;gap:35px;align-items:center}nav a{font-size:13px;color:#d3d4cc;transition:color .2s}nav a:hover{color:var(--pink)}sup{font:10px monospace;color:var(--muted);margin-left:5px}.motion-toggle{border:1px solid var(--line);background:transparent;border-radius:30px;padding:10px 15px;font-size:11px;display:flex;align-items:center;gap:5px}.motion-toggle i{width:6px;height:6px;border-radius:100%;background:var(--green);margin-left:5px}.eyebrow,.edition,.scroll-note,.orb-label,.orb-caption,.art-corner,.project-number,.verify-label{font:10px 'DM Sans',Arial;letter-spacing:1.5px;font-weight:500}.eyebrow{color:var(--muted)}.status{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:10px;box-shadow:0 0 12px #c4d4b035}.hero{padding:37px 5% 0;position:relative;overflow:hidden}.hero-top{display:flex;justify-content:space-between}.edition{color:#74766e}.hero-body{display:grid;grid-template-columns:1.18fr 1fr;min-height:630px;align-items:center}.hero-copy{position:relative;z-index:2;padding:40px 0 48px}h1,h2,h3,p{margin:0}h1{font:600 clamp(68px,7.9vw,125px)/1.03 'Manrope',Arial;letter-spacing:-7px}em{font-family:Georgia,serif;font-weight:400;color:var(--pink);letter-spacing:-.045em}h1 em{font-size:1.09em}h1 .period{font:normal 70px Georgia;color:var(--pink);margin-left:16px;display:inline-block;vertical-align:10px}p{color:var(--muted);line-height:1.75}.hero-copy p{font-size:15px;margin-top:30px}.round-link{display:inline-flex;align-items:center;gap:14px;font-size:12px;margin-top:30px}.circle{height:42px;width:42px;border:1px solid #606257;display:grid;place-items:center;font-size:23px;border-radius:50%;transition:.3s}.round-link:hover .circle{background:var(--pink);color:var(--bg);transform:rotate(45deg)}.orb-wrap{position:relative;height:540px;width:100%;align-self:center}#orb{width:100%;height:100%;display:block;touch-action:pan-y}.orb-label{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#9a968f;font-size:9px}.orb-caption{border:0;background:none;color:#c5b9bc;position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.7px;width:100%}.orb-cross{position:absolute;color:#79776f;font:20px monospace}.orb-cross.one{top:70px;left:13px}.orb-cross.two{bottom:110px;right:10px}.hero-foot{padding:25px 0;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.hero-foot b{font-weight:400;color:var(--ink);margin-left:8px}.scroll-note{font-size:9px}.scroll-note span{margin-left:25px}.section{padding:108px 5%}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}h2{font:500 clamp(34px,4.2vw,63px)/1.13 'Manrope',Arial;letter-spacing:-2.6px;margin-top:20px}.section-top>p{font-size:13px;margin-bottom:5px}.filters{display:flex;gap:9px;margin:36px 0 28px}.filters button{border:1px solid var(--line);border-radius:30px;padding:10px 18px;background:transparent;color:var(--muted);font-size:11px}.filters button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}.filters sup{color:inherit}.projects{display:grid;grid-template-columns:1fr 1fr;gap:43px 25px}.project{border:0;padding:0;background:none;text-align:left;min-width:0}.project[hidden]{display:none}.project-art{height:410px;border-radius:5px;overflow:hidden;position:relative;border:1px solid #ffffff0d;transition:transform .35s}.project:hover .project-art{transform:translateY(-5px)}.art-corner{position:absolute;top:25px;left:27px;color:#d0d7ca;font-size:8px;z-index:2}.auth-art{background:#28382f;display:grid;place-items:center}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#b8d8c80a 1px,transparent 1px),linear-gradient(90deg,#b8d8c80a 1px,transparent 1px);background-size:44px 44px}.auth-window{width:295px;background:#f1f0e8;color:#25332b;border-radius:9px;box-shadow:0 25px 65px #071c2670;transform:rotate(-5deg);transition:transform .5s}.project:hover .auth-window{transform:rotate(-2deg) scale(1.04)}.window-top{font-size:8px;padding:11px 13px;border-bottom:1px solid #25332b22;display:flex;justify-content:space-between;color:#667267}.dots{font-size:7px;letter-spacing:2px}.window-content{padding:19px 28px 23px}.key-icon{font-size:27px;color:#3e7157}.window-content h3{font:600 20px 'Manrope',Arial;margin:10px 0 5px;letter-spacing:-.8px}.window-content p{font-size:9px;color:#667267}.ui-input{border:1px solid #a7b8a5;border-radius:4px;padding:10px 12px;font-size:8px;margin-top:18px}.ui-input span{display:block;margin-top:5px;font-size:11px}.ui-cta{font-size:10px;background:#273b2f;color:#f5f6ef;padding:12px 13px;border-radius:4px;display:flex;justify-content:space-between;margin-top:9px}.window-content small{display:block;text-align:center;font-size:7px;margin-top:15px;color:#647564}.floating-tag{position:absolute;bottom:52px;right:28px;background:#b9cead;color:#293c30;font-size:9px;padding:12px 16px;border-radius:5px;transform:rotate(4deg);box-shadow:0 10px 20px #1114}.floating-tag .status{background:#4c6a48;width:5px;height:5px}.project-number{position:absolute;bottom:23px;left:27px;color:#e4e5dc99;font-size:10px}.view-icon{position:absolute;bottom:17px;right:20px;border-radius:50%;height:34px;width:34px;display:grid;place-items:center;border:1px solid #ffffff40;font-size:18px;color:#fff}.project-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:22px}.project-meta .eyebrow{font-size:8px;letter-spacing:1px}.project-meta h3{font:500 21px 'Manrope',Arial;letter-spacing:-.6px;margin-top:8px}.pill{font-size:9px;border:1px solid var(--line);border-radius:25px;padding:8px 12px;color:var(--muted);white-space:nowrap}.reauth-art{background:#38303e;display:grid;place-items:center}.orbit-line{position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid #dcc7e220;transform:scaleX(.8) rotate(-30deg);box-shadow:0 0 0 45px #dcc7e207,0 0 0 90px #dcc7e205}.verify-card{width:252px;border:1px solid #a197a544;border-radius:12px;background:#ece3ed;color:#423748;position:relative;padding:25px 24px;transform:rotate(5deg);box-shadow:0 20px 70px #11081f60;transition:transform .5s}.project:hover .verify-card{transform:rotate(1deg) scale(1.04)}.shield{font-size:27px}.verify-label{font-size:7px;margin-top:10px}.verify-card h3{font:600 25px/1.1 'Manrope',Arial;letter-spacing:-1px;margin-top:12px}.verify-card p{font-size:9px;color:#716277;margin-top:10px}.verify-card .ui-cta{background:#5a4264;font-size:8px;margin-top:17px}.verify-card small{display:block;text-align:center;font-size:8px;margin-top:12px}.reauth-tag{background:#c9b6d0;right:24px;bottom:49px;transform:rotate(-4deg);color:#46364e;font-size:8px}.wide{grid-column:1/-1}.audio-art{height:360px;background:#a6b4c0;color:#1e2c37}.audio-art .art-corner,.audio-art .project-number{color:#354753}.sound-title{position:absolute;left:8%;top:87px;font:500 54px/1.05 'Manrope',Arial;letter-spacing:-3px}.sound-title em{color:#f3f1e7}.sound-bars{position:absolute;right:6%;top:0;height:100%;width:44%;display:flex;gap:7px;align-items:center;opacity:.55}.sound-bars i{display:block;flex:1;border-radius:20px;background:#e1e7e9;transition:height .5s}.project:hover .sound-bars i{height:var(--alt)!important}.audio-mini{position:absolute;display:flex;align-items:center;gap:19px;padding:18px 24px;width:380px;right:12%;top:45%;border-radius:10px;background:#1c2b37;color:#e9edef;box-shadow:0 20px 50px #1c2b3740;transform:rotate(-6deg)}.audio-play{border:1px solid #c3d1dd70;border-radius:50%;width:35px;height:35px;font-size:10px;display:grid;place-items:center;flex-shrink:0}.audio-mini>div{flex:1}.audio-mini b{font-size:10px;font-weight:400}.track{height:2px;background:#4f6070;margin:13px 0 7px}.track i{display:block;height:2px;background:#e2c1cb;width:30%}.audio-mini small{font-size:7px;color:#a4b3bf;display:flex;justify-content:space-between}.work-note{font-size:10px;margin-top:30px;color:#85887d}.about{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:12px}.personal-mark{font:500 130px Georgia;color:#f3e9dd;margin-top:45px;line-height:1.2;letter-spacing:-16px}.personal-mark span{font:normal 90px Georgia;color:var(--pink);vertical-align:10px;display:inline-block;margin-left:10px}.about-title>.eyebrow{font-size:8px}.about-copy{padding-top:25px}.about-copy .large{font:400 28px/1.45 'Manrope',Arial;color:var(--ink);letter-spacing:-.6px;margin-bottom:25px}.about-copy>p{font-size:13px;margin-bottom:20px;max-width:490px}.principles{margin:30px 0}.principles>div{display:flex;gap:25px;padding:14px 0;border-top:1px solid var(--line);font-size:12px}.principles span{font:9px monospace;color:var(--pink)}.principles b{font-weight:400}.text-link{font-size:11px;border-bottom:1px solid #77766b;padding-bottom:5px}.experiment{border:1px solid var(--line);border-radius:5px;display:grid;grid-template-columns:1fr 1fr;background:#181a17}.experiment-copy{padding:55px}.experiment-copy h3{font:500 40px/1.12 'Manrope',Arial;letter-spacing:-2px;margin:25px 0}.experiment-copy p{font-size:13px}.experiment-copy small{display:block;color:#888b80;line-height:1.6;font-size:10px;margin-top:40px}.experiment-control{border-left:1px solid var(--line);padding:28px 35px}.mini-scene{height:180px;position:relative;border-radius:5px;background:radial-gradient(ellipse at center,#3e2e36,#1b211b);overflow:hidden;transition:background .4s}.scene-star{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font:90px Georgia;color:var(--pink);animation:turn 24s linear infinite}.scene-dot{width:10px;height:10px;background:var(--green);border-radius:50%;position:absolute;transition:opacity .4s}.d1{left:25%;top:25%}.d2{right:25%;bottom:25%;height:7px;width:7px}.d3{right:20%;top:20%;height:5px;width:5px}.scene-caption{position:absolute;bottom:18px;text-align:center;left:0;width:100%;font-size:7px;letter-spacing:1.5px;color:#b1b1a5}.setting{display:flex;align-items:center;position:relative;justify-content:space-between;border-bottom:1px solid var(--line);padding:18px 0;font-size:12px;cursor:pointer}.setting small{display:block;color:#909487;font-size:9px;margin-top:4px}.setting input{position:absolute;right:0;width:38px;height:22px;opacity:0;cursor:pointer}.switch{height:22px;width:38px;border-radius:20px;background:#464941;pointer-events:none;position:relative;transition:background .2s}.switch:after{content:'';position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:50%;background:#191d16;transition:transform .2s}.setting input:checked+.switch{background:var(--pink)}.setting input:checked+.switch:after{transform:translateX(16px)}.setting input:focus-visible+.switch{outline:2px solid var(--pink);outline-offset:5px}.experiment-result{font-size:10px;color:var(--green);padding:18px 0 0}.mini-scene.monochrome{background:radial-gradient(ellipse at center,#363833,#1b211b)}.mini-scene.monochrome .scene-star,.mini-scene.monochrome .scene-dot{color:#d9dcd0;background-color:transparent}.mini-scene.monochrome .scene-dot{background:#9ea491}.mini-scene.quiet .scene-dot{opacity:0}.mini-scene.quiet .scene-star{animation-play-state:paused}footer{padding:50px 5% 25px;background:#1a1c18}.footer-title{font:500 clamp(60px,9.7vw,148px)/1.3 'Manrope',Arial;letter-spacing:-7px;display:flex;justify-content:space-between;align-items:center;margin:20px 0 65px}.footer-title span{color:var(--pink);transition:transform .3s}.footer-title:hover span{transform:translate(8px,-8px)}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:25px;font-size:10px;color:var(--muted)}.reading-progress{height:2px;background:var(--pink);position:fixed;top:0;left:0;z-index:25;width:0}.skip{position:fixed;left:15px;top:-100px;z-index:50;background:var(--pink);color:#111;padding:12px}.skip:focus{top:15px}dialog{max-width:850px;width:calc(100% - 32px);max-height:88vh;background:#1b1e19;color:var(--ink);border:1px solid #616957;border-radius:10px;padding:55px;overflow:auto}dialog::backdrop{background:#060906d9;backdrop-filter:blur(12px)}.close-dialog{position:absolute;right:18px;top:17px;background:none;border:1px solid #777b6d;border-radius:50%;width:33px;height:33px}.case-heading{font:500 48px/1.1 'Manrope',Arial;letter-spacing:-2px;margin:25px 0}.case-intro{font-size:17px;color:#d5d7ca}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:35px}.case-grid h3{font:500 17px 'Manrope';margin-bottom:12px}.case-grid p,.case-grid li{font-size:13px;color:var(--muted);line-height:1.8}.case-grid ul{padding-left:18px;margin:0}.case-note{padding:20px;background:#24281f;border-radius:5px;font-size:11px;margin-top:35px}.case-next{background:var(--pink);color:#171c12;border:0;border-radius:30px;padding:13px 20px;margin-top:25px;font-size:12px}.paused *{animation-play-state:paused!important;scroll-behavior:auto!important}.paused .motion-toggle i{background:#777b70}@keyframes turn{to{transform:translate(-50%,-50%) rotate(360deg)}}@media(min-width:1600px){header,main{max-width:1600px;margin:auto}header{padding:0 5%}.hero-body{min-height:720px}}@media(max-width:1000px){h1{letter-spacing:-4px;font-size:80px}.hero-body{min-height:550px}.orb-wrap{height:440px}h1 .period{font-size:45px}.project-meta{display:block}.pill{display:inline-block;margin-top:12px}.project-art{height:370px}.about-layout{gap:40px}.experiment-copy{padding:40px}.sound-title{font-size:48px}.audio-mini{right:5%;width:320px}}@media(max-width:700px){header{height:80px}.wordmark{font-size:30px}nav{gap:16px}nav a{font-size:11px}.motion-toggle{font-size:0;padding:10px}.motion-toggle span{font-size:10px}.edition{display:none}.hero{padding-top:25px}.hero-top .eyebrow{font-size:8px}.hero-body{display:block}.hero-copy{padding:40px 0 0}h1{font-size:clamp(64px,14vw,100px);letter-spacing:-4px}.hero-copy p{font-size:13px}.orb-wrap{height:350px;margin-top:0}.orb-label{bottom:40px}.orb-caption{bottom:10px}.hero-foot{font-size:9px;line-height:1.8}.hero-foot b{display:block;margin-left:0}.scroll-note{font-size:7px}.section{padding-top:70px;padding-bottom:70px}.section-top{display:block}h2{font-size:40px;letter-spacing:-2px}.section-top>p{margin-top:22px;font-size:12px}.filters{gap:5px;flex-wrap:wrap}.filters button{padding:9px 12px;font-size:10px}.projects{grid-template-columns:1fr;gap:35px}.wide{grid-column:auto}.project-art{height:385px}.project-meta{display:flex;align-items:start}.project-meta h3{font-size:18px}.project-meta .eyebrow{font-size:7px}.pill{font-size:8px;margin-top:0}.audio-art{height:385px}.sound-title{top:65px;font-size:45px;left:8%}.sound-bars{width:70%;right:-6%;opacity:.4}.audio-mini{width:82%;right:9%;top:60%;padding:18px}.about-layout{grid-template-columns:1fr;gap:35px}.personal-mark{margin-top:25px;font-size:100px}.personal-mark span{font-size:75px}.about-copy{padding-top:0}.about-copy .large{font-size:25px}.experiment{grid-template-columns:1fr}.experiment-copy{padding:30px}.experiment-copy h3{font-size:35px}.experiment-copy small{margin-top:20px}.experiment-control{border-left:0;border-top:1px solid var(--line);padding:25px}.footer-title{font-size:14vw;letter-spacing:-4px;margin-bottom:40px}.footer-bottom{flex-wrap:wrap;gap:15px;font-size:9px}.footer-bottom span:nth-child(2){display:none}dialog{padding:45px 25px 30px}.case-heading{font-size:35px}.case-grid{grid-template-columns:1fr;gap:25px}.case-intro{font-size:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}} /* Original signal-studio direction */ :root{--bg:#0b0d0c;--line:#2d322e;--pink:#f9b5d1}body{background-image:radial-gradient(#858a7720 .65px,transparent .65px);background-size:22px 22px}.site-frame{position:fixed;inset:6px;border:1px solid #f9b5d13b;border-top:2px solid var(--pink);border-radius:8px;pointer-events:none;z-index:24}.eyebrow,.edition,.signal-kicker,.signal-top,.orb-label,.orb-caption,.art-corner,.scroll-note,.garden-hint,.garden-counter,.garden-tools button,.footer-bottom,.work-note{font-family:'Courier New',monospace}header{height:105px}.wordmark span{font-family:monospace;font-size:32px}.wordmark:hover span{color:#c3e4b5}nav{gap:0;padding:5px;border:1px solid #343b32;border-radius:5px;background:#121611}nav a{padding:10px 20px;border-radius:3px;font-size:11px;font-family:monospace}nav a:hover{background:#272e24}.motion-toggle{border-radius:4px;font-family:monospace}.hero-top{padding-top:4px}.edition{letter-spacing:0;font-size:9px}.edition time{color:var(--pink);margin:0 10px}.signal-kicker{font-size:8px;letter-spacing:1.2px;color:#909889;margin-bottom:23px}.hero-copy{padding-top:48px}.hero-body{min-height:650px}.hero-copy p{max-width:390px}.orb-wrap{border:1px solid #5e695132;background:#0b0e0c9c;border-radius:3px;height:490px;overflow:hidden}.orb-wrap:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0px,transparent 3px,#00000014 4px);pointer-events:none}.signal-top{display:flex;justify-content:space-between;position:absolute;left:16px;right:16px;top:17px;z-index:3;font-size:8px;color:#8c9684;letter-spacing:1px}.signal-led{color:#bdcca6}.orb-cross.one{top:55px;left:16px}.orb-cross.two{bottom:73px;right:16px}.orb-label{font-size:7px;bottom:53px}.orb-caption{bottom:17px;width:auto;min-width:230px;z-index:4;padding:9px 13px;border:1px solid #625452;background:#20191d;color:var(--pink);display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:2px}.orb-caption:hover{background:#402634}kbd{font:9px monospace;border:1px solid #887380;border-radius:2px;padding:1px 4px}.glitch-type{display:inline-block;position:relative}.glitch-type:before,.glitch-type:after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}.glitch-type:before{color:#e6efdb;clip-path:inset(20% 0 55% 0)}.glitch-type:after{color:#ff8cbd;clip-path:inset(64% 0 15% 0)}.glitch-type:hover:before,.signal-burst .glitch-type:before{opacity:.85;animation:slice-one .45s steps(2,end) 1}.glitch-type:hover:after,.signal-burst .glitch-type:after{opacity:.9;animation:slice-two .45s steps(2,end) 1}.signal-burst .orb-wrap{animation:signal-cut .48s steps(2,end) 1}.hero-foot{font-family:monospace;background:#0b0d0c}.hero-foot b{color:var(--pink)}.project-art{border-radius:2px;position:relative}.project-art:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0px,transparent 3px,#0b0d0c12 4px);pointer-events:none;opacity:0;transition:opacity .25s}.project:hover .project-art:after,.project:focus-within .project-art:after{opacity:1}.project:hover .art-corner{color:white;text-shadow:2px 0 #f9b5d1,-2px 0 #bdcca6}.project-art:before{content:'VIEW STUDY ↗';font:8px monospace;letter-spacing:1px;position:absolute;top:45%;left:0;z-index:5;right:0;text-align:center;background:#0b0d0cdd;color:var(--pink);padding:8px;opacity:0;transform:scaleY(.2);pointer-events:none}.project:hover .project-art:before{animation:project-cut .4s steps(2,end) 1}.filters button{font-family:monospace;border-radius:3px}.filters button.active{background:var(--pink)}.pill{border-radius:3px;font-family:monospace}.about{background:#10130ff2}.personal-mark{position:relative}.personal-mark span:hover{animation:slice-one .45s steps(2,end) 1}.signal-garden{margin:0 0 32px;border:1px solid var(--line);border-radius:3px;background:#111610}.garden-heading{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;gap:20px}.garden-heading h3{font:500 29px 'Manrope',Arial;letter-spacing:-1px;margin:10px 0 6px}.garden-heading p{font-size:11px}.garden-tools{display:flex;gap:8px}.garden-tools button{background:#1e261b;color:#c7d7b4;border:1px solid #495640;border-radius:3px;padding:11px 14px;font-size:9px}.garden-tools button:hover{background:#34442b}.garden-surface{height:310px;border-top:1px solid var(--line);position:relative;background:radial-gradient(ellipse at center,#1e1721,#090e0a)}#garden{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.garden-hint,.garden-counter{position:absolute;bottom:18px;pointer-events:none;font-size:8px;letter-spacing:1px;color:#929d8a}.garden-hint{left:22px}.garden-counter{right:22px}.cursor-cross{display:none;position:fixed;left:0;top:0;width:18px;height:18px;pointer-events:none;z-index:40;opacity:.6}.cursor-cross:before,.cursor-cross:after{content:'';position:absolute;background:var(--pink)}.cursor-cross:before{width:18px;height:1px;top:8px}.cursor-cross:after{width:1px;height:18px;left:8px}footer{background:#111710}.footer-title{position:relative}.footer-title:hover{color:var(--pink)}.experiment{border-radius:3px}.paused .glitch-type:before,.paused .glitch-type:after{display:none}.paused .cursor-cross{display:none!important}@keyframes slice-one{0%,100%{transform:translate(0);opacity:0}25%{transform:translate(-6px,2px);opacity:.8}55%{transform:translate(4px,-1px)}80%{transform:translate(-2px,0)}}@keyframes slice-two{0%,100%{transform:translate(0);opacity:0}20%{transform:translate(5px,0);opacity:.8}60%{transform:translate(-4px,1px)}85%{transform:translate(2px,-1px)}}@keyframes signal-cut{0%,100%{transform:translateX(0);filter:none}25%{transform:translateX(3px);filter:hue-rotate(15deg)}55%{transform:translateX(-3px);filter:hue-rotate(-15deg)}75%{transform:translateX(1px)}}@keyframes project-cut{0%,100%{opacity:0;transform:scaleY(.2)}30%,60%{opacity:.85;transform:scaleY(1)}}@media(max-width:1000px){nav a{padding:9px 14px}.orb-wrap{height:440px}.hero-body{min-height:600px}}@media(max-width:700px){header{height:85px}nav a{padding:8px;font-size:9px}.motion-toggle{padding:8px}.hero-body{min-height:0}.hero-copy{padding-top:35px;padding-bottom:35px}.signal-kicker{font-size:7px;margin-bottom:18px}.orb-wrap{height:340px;margin-bottom:25px}.signal-top{font-size:7px}.orb-label{font-size:6px}.hero-foot{font-size:8px}.garden-heading{padding:24px;align-items:start;flex-direction:column}.garden-heading h3{font-size:26px}.garden-surface{height:280px}.garden-hint{font-size:6px;left:12px}.garden-counter{font-size:7px;right:12px}.site-frame{inset:4px}} /* Loading text resolves from a temporary visual layer; readable text stays in the DOM. */ .header-actions{display:flex;align-items:center;gap:10px}#replay-intro{font:9px 'Courier New',monospace;border:1px solid var(--line);background:#171b15;color:#b4bbaa;padding:11px 12px;border-radius:4px}#replay-intro:hover{color:var(--pink);border-color:#856a77}.hero-line{display:inline-block}[data-decode]{position:relative}.decode-original{transition:none}.decode-display{position:absolute;inset:0;pointer-events:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;opacity:0;overflow:hidden}.decoding .decode-original{opacity:0}.decoding .decode-display{opacity:1}.hero-copy h1 .decode-display{white-space:nowrap}.decoding{--decode-split:2px;text-shadow:var(--decode-split) 0 #f5a6c280,calc(var(--decode-split) * -1) 0 #d8e8ce65;animation:decode-shift .65s steps(2,end) 1}.hero-copy p [data-decode]{display:inline-block;max-width:100%;vertical-align:top}.hero-copy p .decode-display{overflow-wrap:normal}.decode-finish{animation:decode-lock .16s steps(2,end) 1}.paused .decode-display{display:none}.paused .decode-original{opacity:1!important}.paused .decoding{text-shadow:none;transform:none}.paused #replay-intro{color:#727c69}@keyframes decode-shift{0%{transform:translateX(-2px);--decode-split:3px}30%{transform:translateX(2px);--decode-split:1px}55%{transform:translateX(-1px);--decode-split:3px}75%{transform:translateX(1px);--decode-split:1px}100%{transform:none;--decode-split:0px}}@keyframes decode-lock{0%{text-shadow:2px 0 #f9b5d170,-2px 0 #c4d4b070}100%{text-shadow:none}}@media(max-width:700px){.header-actions{gap:6px}#replay-intro{font-size:0;padding:8px}#replay-intro:after{content:'↺';font-size:15px}.hero-copy p [data-decode]{display:inline}.hero-copy p .decode-display{position:absolute;width:100%}}@media(prefers-reduced-motion:reduce){.decode-display{display:none!important}.decode-original{opacity:1!important}} @media(max-width:700px){.hero-copy p [data-decode]{display:inline-block}.hero-copy p .decode-display{width:auto}} /* A first-person introduction leads the studio. */ .intro-hero .hero-body{display:block;position:relative;min-height:570px;padding:68px 0 58px 6%}.intro-hero .hero-copy{padding:0;max-width:1160px}.intro-hero .signal-kicker{margin-bottom:27px}.intro-hero h1{font-family:'Manrope',Arial,sans-serif;font-size:clamp(38px,4.7vw,74px);font-weight:500;line-height:1.22;letter-spacing:-3.3px;margin:0}.intro-hero .hero-line{display:block;max-width:100%;width:fit-content}.intro-hero .hero-line-accent{color:var(--pink)}.intro-hero h1 .decode-display{white-space:normal}.employer-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 15px;margin-top:38px;font:500 clamp(18px,2.15vw,32px)/1.3 'Manrope',Arial;letter-spacing:-1px;max-width:calc(100% - 235px)}.employer-line>[data-decode]{display:inline-block;flex-shrink:0}.employer-line>a{color:#bfc5b7;display:inline-flex;align-items:baseline;gap:10px}.employer-line>a:hover{color:var(--pink)}.employer-arrow{font-size:1.15em;transition:transform .2s}.employer-line>a:hover .employer-arrow{transform:translate(3px,-3px)}.intro-hero .round-link{margin-top:25px;font-family:monospace;font-size:10px}.intro-hero .circle{height:32px;width:32px;font-size:19px}.intro-hero .orb-wrap{position:absolute;right:0;bottom:35px;width:215px;height:195px;align-self:auto;z-index:3;background:#0b0e0c}.intro-hero .signal-top{top:11px;left:9px;right:9px;font-size:6px;letter-spacing:.3px}.intro-hero .signal-led{display:none}.intro-hero .orb-label{display:none}.intro-hero .orb-caption{font-size:7px;min-width:0;width:calc(100% - 18px);padding:7px 8px;bottom:8px;gap:4px}.intro-hero .orb-cross.one{top:33px;left:8px;font-size:14px}.intro-hero .orb-cross.two{bottom:47px;right:8px;font-size:14px}.intro-hero .hero-foot{font:8px 'Courier New',monospace;letter-spacing:.8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1600px){.intro-hero .hero-body{min-height:620px}}@media(max-width:1000px){.intro-hero .hero-body{padding-left:2%;min-height:520px;padding-top:60px}.intro-hero h1{font-size:5vw;letter-spacing:-2.5px}.intro-hero .orb-wrap{width:190px;height:180px;bottom:40px}.employer-line{max-width:calc(100% - 205px);letter-spacing:-.7px}}@media(max-width:700px){.intro-hero .hero-body{padding:42px 0 25px;min-height:0}.intro-hero .hero-copy{max-width:none}.intro-hero h1{font-size:clamp(32px,7.6vw,48px);letter-spacing:-1.6px;line-height:1.25}.intro-hero .hero-line{width:auto;max-width:100%;margin-bottom:5px}.intro-hero .signal-kicker{font-size:6px;letter-spacing:.7px;margin-bottom:20px}.employer-line{max-width:100%;margin-top:26px;font-size:19px;gap:7px 10px;letter-spacing:-.5px}.intro-hero .orb-wrap{position:relative;margin:30px 0 0 auto;width:160px;height:150px;right:auto;bottom:auto}.intro-hero .hero-foot{font-size:6px;gap:20px}.intro-hero .hero-foot>span:first-child{max-width:55%;line-height:1.7}.intro-hero .scroll-note{font-size:6px}.intro-hero .scroll-note span{margin-left:8px}} /* Give the corner light room to bloom without crowding the introduction. */ .intro-hero .hero-body{min-height:650px}.intro-hero .orb-wrap{width:340px;height:310px;bottom:24px;border-color:#5e695139;background:radial-gradient(ellipse at center,#21192240,#0b0e0c70)}.intro-hero .signal-top{top:17px;left:15px;right:15px;font-size:8px;letter-spacing:1px}.intro-hero .signal-led{display:inline}.intro-hero .orb-caption{width:calc(100% - 28px);bottom:14px;padding:10px 12px;font-size:8px;letter-spacing:.5px}.intro-hero .orb-cross.one{top:48px;left:14px;font-size:18px}.intro-hero .orb-cross.two{bottom:63px;right:14px;font-size:18px}.intro-hero .employer-line{max-width:calc(100% - 370px)}.intro-hero .orb-wrap:after{opacity:.2}@media(min-width:1600px){.intro-hero .hero-body{min-height:730px}.intro-hero .orb-wrap{width:380px;height:350px}.intro-hero .employer-line{max-width:calc(100% - 410px)}}@media(max-width:1000px){.intro-hero .hero-body{min-height:650px}.intro-hero .orb-wrap{width:310px;height:290px;bottom:20px}.intro-hero .employer-line{max-width:calc(100% - 335px)}}@media(max-width:700px){.intro-hero .hero-body{min-height:0}.intro-hero .orb-wrap{width:min(100%,320px);height:300px;margin:30px 0 0 auto;bottom:auto}.intro-hero .employer-line{max-width:100%}.intro-hero .signal-top{font-size:7px}.intro-hero .orb-caption{font-size:8px}} /* Equal-width hero columns, with the light in the normal layout flow. */ .intro-hero .hero-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;min-height:0;padding:58px 0}.intro-hero .hero-copy{min-width:0;max-width:none;padding:0}.intro-hero h1{font-size:clamp(34px,3.35vw,56px);line-height:1.2;letter-spacing:-2.2px}.intro-hero .hero-line{width:100%;max-width:100%;margin-bottom:0}.intro-hero .signal-kicker{font-size:8px;letter-spacing:.8px;margin-bottom:25px}.intro-hero .employer-line{max-width:100%;margin-top:28px;font-size:clamp(18px,1.65vw,25px);letter-spacing:-.7px;gap:7px 10px}.intro-hero .orb-wrap{position:relative;inset:auto;align-self:center;width:100%;height:auto;aspect-ratio:1 / 1;margin:0;min-width:0;max-width:none}.intro-hero .signal-top{left:20px;right:20px;top:22px;font-size:9px}.intro-hero .orb-caption{width:calc(100% - 40px);bottom:20px;padding:13px 15px;font-size:9px}.intro-hero .orb-cross.one{top:57px;left:20px}.intro-hero .orb-cross.two{bottom:78px;right:20px}@media(max-width:1000px){.intro-hero .hero-body{gap:28px;padding:45px 0}.intro-hero h1{font-size:clamp(32px,3.5vw,38px);letter-spacing:-1.5px}.intro-hero .signal-top{font-size:7px;left:14px;right:14px}.intro-hero .orb-caption{font-size:8px;width:calc(100% - 28px);bottom:14px}.intro-hero .employer-line{font-size:18px}}@media(max-width:850px){.intro-hero .hero-body{grid-template-columns:minmax(0,1fr);gap:32px;padding:38px 0 32px}.intro-hero h1{font-size:clamp(32px,5.9vw,48px);letter-spacing:-1.6px}.intro-hero .orb-wrap{width:100%;max-width:520px;justify-self:center;margin:0}.intro-hero .employer-line{font-size:clamp(18px,3vw,23px)}.intro-hero .signal-kicker{font-size:7px}} /* Every word keeps its original dimensions while an aria-hidden layer decodes. */ .copy-signal{position:relative;display:inline-block;text-indent:0;white-space:nowrap;vertical-align:baseline}.copy-original{opacity:1}.copy-display{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;white-space:nowrap;pointer-events:none;visibility:hidden;font:inherit;letter-spacing:inherit;color:inherit;line-height:inherit}.copy-decoding>.copy-original{opacity:0}.copy-decoding>.copy-display{visibility:visible;text-shadow:1px 0 #f9b5d180,-1px 0 #c4d4b065}.paused .copy-original{opacity:1!important}.paused .copy-display{visibility:hidden!important}.intro-hero .hero-line .copy-signal{max-width:100%}.glitch-type:hover:before,.glitch-type:hover:after,.signal-burst .glitch-type:before,.signal-burst .glitch-type:after{animation-fill-mode:forwards}@media(prefers-reduced-motion:reduce){.copy-original{opacity:1!important}.copy-display{visibility:hidden!important}} .elsewhere{border-top:1px solid var(--line);background:#0e120dec}.elsewhere h2{font-size:clamp(34px,3.65vw,55px)}.social-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.social-links>a{display:flex;align-items:center;gap:24px;padding:30px;border:1px solid #384030;border-radius:3px;background:#171c14;transition:background .25s,border-color .25s,transform .25s}.social-links>a:hover{border-color:#977287;background:#241d23;transform:translateY(-3px)}.social-index{font:10px 'Courier New',monospace;color:var(--pink);align-self:start;margin-top:5px}.social-links h3{font:500 25px 'Manrope',Arial;letter-spacing:-.7px}.social-links p{font-size:11px;margin-top:5px}.social-arrow{margin-left:auto;font-size:28px;color:var(--pink);transition:transform .25s}.social-links>a:hover .social-arrow{transform:translate(3px,-3px)}@media(max-width:850px){header nav a{padding:8px 10px;font-size:10px}.social-links>a{padding:24px;gap:18px}.social-links h3{font-size:22px}}@media(max-width:700px){header nav{padding:3px}header nav a{padding:8px 6px;font-size:8px}.social-links{grid-template-columns:minmax(0,1fr);gap:12px}.social-links>a{padding:23px}.social-links h3{font-size:23px}.elsewhere h2{font-size:36px}}@media(max-width:390px){header{flex-wrap:wrap;height:auto;min-height:100px;padding:14px 0;row-gap:10px}header nav{order:3;width:100%;justify-content:space-around}header nav a{font-size:10px}.header-actions{margin-left:auto}} /* Preserve each light pixel; the panel stays fixed while the orb reacts. */ #orb{image-rendering:pixelated;image-rendering:crisp-edges}.intro-hero .orb-label{display:block;bottom:76px;font-size:7px;letter-spacing:.9px;color:#b7a5b0}.intro-hero .orb-wrap:after{display:none}.intro-hero .orb-wrap{transition:border-color .25s,background-color .25s}.intro-hero .orb-wrap:hover,.intro-hero .orb-wrap:focus-within{border-color:#ae789855;background-color:#24162022}@media(max-width:700px){.intro-hero .orb-label{bottom:66px;font-size:6px}} /* A finer, fluid texture for the pearlescent light study. */ #orb{image-rendering:auto}.intro-hero .orb-wrap{background:radial-gradient(ellipse at center,#30223c35,#0b0e0c55)}.intro-hero .orb-wrap:hover,.intro-hero .orb-wrap:focus-within{background-color:#271a3020} /* Dark housing lets the sphere's internal energy and sparks stand out. */ .intro-hero .orb-wrap{background:#080b0c}.intro-hero .orb-wrap:hover,.intro-hero .orb-wrap:focus-within{background:#0b0b10;border-color:#ad74964a} /* Real design screens, shown without cropping. */ .screen-art{display:flex;align-items:center;justify-content:center;padding:65px 25px 55px;background:#202c25}.screen-art img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 18px 45px #0005;transition:transform .4s}.project:hover .screen-art img{transform:translateY(-3px) scale(1.025)}.screen-reauth{background:#302738}.screen-charts{background:#253630}.screen-dashboard{background:#26303a}.screen-auth{background:#3a2934}.screen-auth img{height:100%;border-radius:10px}.screen-grading{background:#30322b;height:460px}.project-description{font-size:12px;margin-top:9px;max-width:420px}.case-screen{margin:28px 0 35px;padding:20px;background:#20251f;border:1px solid var(--line);border-radius:4px}.case-screen img{display:block;max-width:100%;max-height:650px;width:auto;height:auto;margin:auto}.case-screen figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:15px;font:10px monospace;color:var(--muted)}.case-screen figcaption a{color:var(--pink)}@media(max-width:700px){.screen-art{height:310px;padding:55px 16px 45px}.screen-auth{height:390px}.screen-grading{height:360px}.case-screen{padding:10px}.case-screen figcaption{font-size:9px}} /* Case study theatre: restrained motion, luminous framing and staggered sections. */ #case-dialog{background:radial-gradient(ellipse at 100% 0,#39222f66,transparent 48%),#121611;border-color:#f9b5d155;border-radius:5px;box-shadow:0 35px 130px #000b,0 0 65px #f9b5d10a;scrollbar-color:#62505a #121611} #case-dialog::backdrop{background:#050807cf;backdrop-filter:blur(9px)} #case-dialog[open]{animation:case-arrive .42s cubic-bezier(.2,.8,.2,1) both} #case-dialog[open] .case-heading{animation:case-rise .55s .06s both} #case-dialog[open] .case-intro{animation:case-rise .55s .13s both} #case-dialog[open] .case-screen{animation:case-rise .65s .2s both} #case-dialog[open] .case-panel:nth-child(1){animation:case-rise .6s .28s both} #case-dialog[open] .case-panel:nth-child(2){animation:case-rise .6s .36s both} .case-screen{--halo-x:50%;--halo-y:30%;position:relative;background:radial-gradient(180px circle at var(--halo-x) var(--halo-y),#f9b5d11c,transparent),#1b211c;border:1px solid #66755a65;padding:0 20px 20px;isolation:isolate;transition:box-shadow .35s,border-color .35s} .case-screen:hover,.case-screen:focus-within{border-color:#f9b5d190;box-shadow:0 0 30px #f9b5d112} .case-screen:before,.case-screen:after{content:'';position:absolute;width:15px;height:15px;pointer-events:none;border-color:var(--pink);border-style:solid;opacity:.8} .case-screen:before{left:-1px;top:-1px;border-width:2px 0 0 2px}.case-screen:after{right:-1px;bottom:-1px;border-width:0 2px 2px 0} .case-screen-bar{height:42px;display:flex;align-items:center;gap:9px;font:8px monospace;letter-spacing:1px;color:#afba9f} .case-indicator{width:5px;height:5px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px #f9b5d18c} .case-screen-symbol{margin-left:auto;color:var(--pink);font-size:16px} .case-screen>a{display:block;position:relative;overflow:hidden;border-radius:2px} .case-screen>a:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff0d 48%,#ffffff24 50%,#ffffff0d 52%,transparent 70%);transform:translateX(-120%)} .case-screen>a:hover:after,.case-screen>a:focus-visible:after{animation:case-light .85s ease-out 1} .case-panel{position:relative;padding:22px;border:1px solid #46513b80;background:#17201460;border-radius:3px;transition:border-color .25s,background .25s} .case-panel:hover{border-color:#f9b5d170;background:#261d2360} .case-panel h3:before{content:'+';font:14px monospace;color:var(--pink);margin-right:9px} .case-next{border-radius:3px;transition:box-shadow .25s,transform .25s}.case-next:hover{box-shadow:0 0 25px #f9b5d130;transform:translateY(-2px)} @keyframes case-arrive{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} @keyframes case-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes case-light{to{transform:translateX(120%)}} .paused #case-dialog,.paused #case-dialog *{animation:none!important;transition:none!important} .paused .case-screen>a:after{display:none}.paused .case-screen{background:#1b211c} @media(prefers-reduced-motion:reduce){.case-screen>a:after{display:none}.case-screen{background:#1b211c}} @media(max-width:700px){.case-screen{padding:0 10px 12px}.case-screen-bar{font-size:7px;height:36px}.case-panel{padding:18px}} /* Full-name wordmark with room for navigation at smaller widths. */ header .wordmark{font-size:clamp(22px,2.35vw,34px);letter-spacing:-1.4px;white-space:nowrap;flex-shrink:0}header .wordmark span{font-family:Arial,sans-serif;font-size:1.05em;margin-left:9px;vertical-align:-1px}header{gap:18px} @media(max-width:1100px){header{flex-wrap:wrap;height:auto;min-height:110px;padding-top:18px;padding-bottom:14px;row-gap:12px}header nav{order:3;width:100%;justify-content:center}.header-actions{margin-left:auto}} @media(max-width:700px){header .wordmark{font-size:24px;letter-spacing:-1px}header{gap:10px;row-gap:14px}header nav{justify-content:space-around}header nav a{font-size:10px;padding:8px 6px}} @media(max-width:430px){header .wordmark{font-size:21px}.header-actions{gap:4px}.header-actions button{font-size:8px;padding:7px 6px}} .language-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:4px;flex-shrink:0}.language-switch button{border:0;border-radius:2px;background:transparent;color:var(--muted);padding:8px 9px;font:10px monospace}.language-switch button[aria-pressed=true]{background:var(--pink);color:var(--bg)}.language-switch button:hover{color:var(--ink)}.language-switch button[aria-pressed=true]:hover{color:var(--bg)} @media(max-width:1250px){header{flex-wrap:wrap;height:auto;min-height:110px;padding-top:18px;padding-bottom:14px;row-gap:12px}header nav{order:3;width:100%;justify-content:center}.header-actions{margin-left:auto}} @media(max-width:700px){header .header-actions{flex-wrap:wrap;justify-content:flex-end}header .wordmark{font-size:23px}.language-switch{padding:2px}.language-switch button{padding:7px;font-size:9px}header nav{flex-wrap:wrap}html[lang=ga] .orb-label{font-size:6px;white-space:normal;width:85%;text-align:center}html[lang=ga] .hero-foot{gap:15px}html[lang=ga] .hero-foot>span{max-width:60%}} @media(max-width:560px){header .header-actions{width:100%;margin-left:0;justify-content:space-between}header .wordmark{font-size:25px}header nav a{font-size:9px;padding:8px 5px}} html[lang=ga] .project-art:before{content:'FÉACH AR AN STAIDÉAR ↗'}html[lang=ga] .orb-caption{min-width:250px}html[lang=ga] .hero-top{gap:20px;flex-wrap:wrap}html[lang=ga] .edition{line-height:1.8} /* A dark, type-led opening with a translucent glass sculpture. */ #home.intro-hero{padding-top:25px;background:radial-gradient(ellipse at 50% 40%,#21192155,transparent 56%)} #home .hero-body.glass-hero{display:block;min-height:0;padding:0;position:relative} .hero-visual{position:relative;height:clamp(400px,55vh,620px);display:flex;align-items:center;justify-content:center;margin-top:15px;background-image:linear-gradient(90deg,transparent calc(25% - 1px),#d6c2ce12 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),#d6c2ce12 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),#d6c2ce12 75%,transparent calc(75% + 1px));border-left:1px dashed #d6c2ce18;border-right:1px dashed #d6c2ce18} #home .hero-name{position:relative;z-index:1;font:500 clamp(48px,10.3vw,170px)/1.05 'Manrope',Arial,sans-serif;letter-spacing:-.065em;text-align:center;white-space:nowrap;color:#f0eee8;margin:0;padding:0 10px;width:100%} .hero-role{position:absolute;top:22%;left:0;right:0;text-align:center;font:10px monospace;letter-spacing:2px;color:#c1b3bc;z-index:4} #home .orb-wrap{position:absolute;inset:0;height:100%;width:100%;margin:0;border:0;background:none!important;border-radius:0;overflow:visible;z-index:2;align-self:auto} #home .orb-wrap:after{display:none}#home #orb{width:100%;height:100%;pointer-events:none}.glass-refraction{position:absolute;inset:0;backdrop-filter:blur(1.7px) contrast(1.07) saturate(.75);-webkit-backdrop-filter:blur(1.7px) contrast(1.07) saturate(.75);pointer-events:none} #home .orb-label{bottom:21px;font-size:7px;letter-spacing:1px;color:#9f8e99}#home .orb-caption{bottom:15px;left:auto;right:16px;transform:none;min-width:0;font-size:8px;background:#221a21aa;gap:15px} #home .hero-copy{padding:25px 0 30px;display:grid;grid-template-columns:1.15fr 1fr;gap:50px;align-items:center;z-index:3} #home .hero-description{font:400 clamp(18px,1.7vw,26px)/1.5 'Manrope',Arial,sans-serif;color:#c8c7c2;margin:0;max-width:650px;letter-spacing:-.5px} #home .hero-description .hero-line{display:inline;font:inherit;letter-spacing:inherit}#home .hero-description .hero-line-accent{color:var(--pink)} #home .hero-links{display:flex;flex-direction:column;align-items:flex-end;gap:12px}#home .employer-line{margin:0;font-size:11px}#home .round-link{margin:0;font-size:11px}#home .circle{width:32px;height:32px;font-size:19px}#home .hero-foot{padding:18px 0} @media(min-width:1600px){#home .hero-name{font-size:160px}} @media(max-width:850px){#home .hero-copy{gap:25px;grid-template-columns:1.15fr 1fr}.hero-visual{height:440px}#home .hero-name{font-size:10.2vw}#home .hero-top{gap:10px;flex-wrap:wrap}} @media(max-width:700px){#home .hero-copy{grid-template-columns:1fr;padding:25px 0;gap:20px}#home .hero-links{align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:18px}#home .hero-description{font-size:19px}#home .orb-caption{bottom:12px;right:12px}#home .orb-label{bottom:52px;font-size:6px;width:80%;text-align:center;white-space:normal}.hero-visual{height:360px;margin-top:20px}.hero-role{top:17%;font-size:8px}#home .hero-name{font-size:10.6vw;padding:0;letter-spacing:-.07em}#home .hero-foot{gap:20px}html[lang=ga] #home .orb-label{bottom:52px}} @media(prefers-reduced-motion:reduce){.glass-refraction{backdrop-filter:blur(1.7px);-webkit-backdrop-filter:blur(1.7px)}} /* The optional light control sits quietly at the far edge of the hero footer. */ #home .hero-foot{align-items:center;gap:24px}#home .hero-foot .scroll-note{margin-left:auto}.hero-light-control{position:static;display:inline-flex;align-items:center;gap:12px;flex-shrink:0;padding:8px 10px;border:1px solid #51454a;background:transparent;border-radius:3px;color:#b5a4af;font:9px monospace;letter-spacing:.3px;transition:border-color .2s,color .2s}.hero-light-control:hover,.hero-light-control:focus-visible{border-color:var(--pink);color:var(--pink)}.hero-light-control kbd{font-size:8px;border-color:#51454a;color:#95868e} @media(max-width:700px){#home .hero-foot{flex-wrap:wrap;gap:14px}#home .hero-foot>span:first-child{max-width:100%;width:100%}#home .hero-foot .scroll-note{margin-left:0;margin-right:auto;max-width:none}.hero-light-control{font-size:8px;padding:7px 9px}} /* Space for Ruth's Irish name without squeezing the hero. */ html[lang=ga] #home .hero-name{font-size:clamp(38px,9vw,145px)}html[lang=ga] header .wordmark{font-size:clamp(21px,2.1vw,30px);letter-spacing:-1px} @media(max-width:700px){html[lang=ga] #home .hero-name{font-size:9.1vw}html[lang=ga] header .wordmark{font-size:23px}} /* Navigation leads the header; utility controls stay opposite. */ body header{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;height:100px;min-height:0;padding-top:0;padding-bottom:0;gap:20px}body header nav{order:0;width:auto;justify-content:flex-start;margin-right:auto}body header .header-actions{width:auto;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto} @media(max-width:950px){body header{height:auto;min-height:100px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;row-gap:14px}body header nav{order:0;width:100%;justify-content:flex-start}body header .header-actions{margin-left:0;margin-right:auto;justify-content:flex-start}} @media(max-width:560px){body header nav{flex-wrap:wrap;gap:0}body header nav a{padding:9px 8px;font-size:10px}body header .header-actions{flex-wrap:wrap;gap:8px}body header{gap:12px}} /* Editorial introduction: large, continuous type with a distinct employer line. */ #home .hero-visual{height:clamp(310px,40vh,440px)} #home .hero-copy{display:block;padding:30px 0 34px} #home .hero-description{font:400 clamp(30px,4.2vw,65px)/1.19 'Manrope',Arial,sans-serif;letter-spacing:-.045em;color:#eeede8;max-width:1250px;margin:0} #home .hero-description .hero-line{font:inherit;letter-spacing:inherit;display:inline}#home .hero-description .hero-line-accent{color:var(--pink)} #home .hero-links{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:30px;margin-top:27px} #home .employer-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:400 clamp(18px,2vw,30px)/1.3 'Manrope',Arial,sans-serif;letter-spacing:-.035em;color:#eeede8} #home .employer-line>span{font-weight:650}#home .employer-line>a{display:inline-flex;align-items:center;gap:10px;color:#b5b5b0;transition:color .2s}#home .employer-line>a:hover{color:var(--pink)}#home .employer-line .wmf-symbol{height:1.08em;width:1.08em;flex-shrink:0;display:block;object-fit:contain;margin:0 2px} #home .employer-line .employer-arrow{font-size:1.3em;line-height:1;margin-left:0}#home .round-link{flex-shrink:0;color:#b4b5ab;font-size:11px} @media(max-width:850px){#home .hero-description{font-size:clamp(30px,4.7vw,44px)}#home .hero-links{gap:22px;flex-wrap:wrap;justify-content:flex-start}#home .employer-line{font-size:22px}} @media(max-width:560px){#home .hero-visual{height:290px}#home .hero-copy{padding:22px 0 28px}#home .hero-description{font-size:30px;line-height:1.22;letter-spacing:-.04em}#home .hero-links{margin-top:22px;gap:22px}#home .employer-line{font-size:19px;gap:9px}#home .employer-line>a{gap:8px}#home .round-link{font-size:10px}} #home .hero-work-link{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font:11px monospace;flex-shrink:0;transition:color .2s}#home .hero-work-link>span{font-size:20px;color:var(--pink);transition:transform .2s}#home .hero-work-link:hover{color:var(--pink)}#home .hero-work-link:hover>span{transform:translate(2px,2px)} @media(max-width:700px){#home .hero-foot .hero-work-link{width:100%;font-size:11px}} /* A slightly quieter introduction and employer line. */ #home .hero-description{font-size:clamp(24px,3.1vw,48px)}#home .employer-line{font-size:clamp(16px,1.55vw,23px)} @media(max-width:850px){#home .hero-description{font-size:clamp(24px,3.6vw,33px)}#home .employer-line{font-size:18px}} @media(max-width:560px){#home .hero-description{font-size:24px}#home .employer-line{font-size:16px}} .social-logo{display:grid;place-items:center;width:54px;height:54px;flex-shrink:0;border:1px solid #46503d;border-radius:10px;background:#22291e;transition:background .25s,border-color .25s,transform .25s}.social-logo img{display:block;width:29px;height:29px;object-fit:contain}.social-links>a:hover .social-logo,.social-links>a:focus-visible .social-logo{background:#332631;border-color:#b4829a;transform:rotate(-5deg)}.social-links>a>div{min-width:0} @media(max-width:700px){.social-logo{width:46px;height:46px;border-radius:8px}.social-logo img{width:25px;height:25px}} .paused .social-logo{transition:none}.paused .social-links>a:hover .social-logo{transform:none} /* Crossfade to each brand colour on hover or keyboard focus. */ .social-logo{position:relative}.social-logo img{grid-area:1 / 1;transition:opacity .2s}.social-logo .social-icon-colour{opacity:0}.social-links>a:hover .social-icon-white,.social-links>a:focus-visible .social-icon-white{opacity:0}.social-links>a:hover .social-icon-colour,.social-links>a:focus-visible .social-icon-colour{opacity:1}.paused .social-logo img{transition:none} /* Photographic project covers; source screens remain in the overview. */ .screen-art.mockup-art{padding:0;height:auto;aspect-ratio:4/3;background:#20251f}.screen-art.mockup-art img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0;box-shadow:none}.project.wide .mockup-art{aspect-ratio:16/9}.mockup-art .art-corner{background:#0b0d0ccc;color:#eee9e6;padding:7px 10px;left:16px;top:16px;border:1px solid #ffffff22}.mockup-art .project-number{background:#0b0d0ccc;padding:5px 7px;bottom:16px;left:16px}.mockup-art .view-icon{background:#0b0d0caa;z-index:4}.case-screen.case-mockup{padding:0 0 15px;overflow:hidden}.case-mockup img{width:100%;max-height:none}.case-mockup figcaption{padding:0 16px}.case-mockup>a:after{display:none} @media(max-width:700px){.project.wide .mockup-art{aspect-ratio:4/3}.mockup-art .art-corner{font-size:7px;left:10px;top:10px}} /* Five projects in an asymmetric bento: two broad tiles, then three compact tiles. */ .projects.bento-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:stretch} .bento-grid>.project{grid-column:span 4;display:flex;flex-direction:column;min-width:0;border:1px solid #3b4038;border-radius:14px;overflow:hidden;background:#161a15;padding:0;transition:border-color .25s,box-shadow .25s} .bento-grid>.project:nth-child(1){grid-column:span 7} .bento-grid>.project:nth-child(2){grid-column:span 5} .bento-grid>.project[hidden]{display:none} .bento-grid .project-art{width:100%;flex-shrink:0;border:0;border-radius:0;aspect-ratio:4/3;height:auto} .bento-grid>.project:nth-child(-n+2) .project-art{height:clamp(270px,27vw,390px);aspect-ratio:auto} .bento-grid .project-meta{display:block;margin:0;padding:24px;flex:1} .bento-grid .project-meta .eyebrow{font-size:8px;line-height:1.8;letter-spacing:.8px} .bento-grid .project-meta h3{font-size:clamp(21px,2vw,29px);line-height:1.2;letter-spacing:-.8px;margin-top:10px;transition:color .25s} .bento-grid .project-description{font-size:12px;line-height:1.7;margin-top:12px;max-width:440px} .bento-grid .project:hover,.bento-grid .project:focus-within{border-color:#a78696;box-shadow:0 8px 32px #0003} .bento-grid .project:hover .project-art{transform:none} .bento-grid .project:hover h3,.bento-grid .project:focus-within h3{color:var(--pink)} .bento-grid[data-visible-count="3"]>.project{grid-column:span 4} .bento-grid[data-visible-count="2"]>.project{grid-column:span 6} .bento-grid[data-visible-count="3"]>.project .project-art,.bento-grid[data-visible-count="2"]>.project .project-art{height:auto;aspect-ratio:4/3} @media(max-width:850px){ .projects.bento-grid{gap:16px;grid-template-columns:repeat(6,minmax(0,1fr))} .bento-grid>.project,.bento-grid>.project:nth-child(2),.bento-grid[data-visible-count="3"]>.project,.bento-grid[data-visible-count="2"]>.project{grid-column:span 3} .bento-grid>.project:nth-child(1){grid-column:span 6} .bento-grid[data-visible-count="3"]>.project,.bento-grid[data-visible-count="2"]>.project{grid-column:span 3} .bento-grid>.project:nth-child(-n+2) .project-art{height:auto;aspect-ratio:4/3} .bento-grid>.project:first-child .project-art{aspect-ratio:16/10} .bento-grid .project-meta{padding:20px} .bento-grid .project-meta h3{font-size:23px} } @media(max-width:560px){ .projects.bento-grid{grid-template-columns:minmax(0,1fr);gap:22px} .bento-grid>.project,.bento-grid>.project:nth-child(1),.bento-grid>.project:nth-child(2),.bento-grid[data-visible-count="3"]>.project,.bento-grid[data-visible-count="2"]>.project{grid-column:auto} .bento-grid>.project:first-child .project-art{aspect-ratio:4/3} .bento-grid .project-meta{padding:20px} } /* A quieter hero introduction and employer credit. */ #home .hero-description{font-size:clamp(22px,2.5vw,38px)} #home .employer-line{font-size:clamp(14px,1.3vw,19px)} #home .hero-light-control{margin-left:auto} @media(max-width:850px){#home .hero-description{font-size:clamp(22px,3vw,28px)}#home .employer-line{font-size:16px}} @media(max-width:560px){#home .hero-description{font-size:22px}#home .employer-line{font-size:14px}} /* Give the name and water study their own breathing room above the introduction. */ #home .hero-visual{height:clamp(390px,50vh,550px)} #home .hero-copy{padding:56px 0 40px} @media(max-width:850px){#home .hero-visual{height:440px}#home .hero-copy{padding-top:44px}} @media(max-width:560px){#home .hero-visual{height:350px}#home .hero-copy{padding:36px 0 32px}} /* Keep the desktop introduction and light controls within the opening viewport. */ @media(min-width:951px){ #home .hero-description{white-space:nowrap;max-width:none;width:100%;font-size:clamp(18px,1.8vw,28px)} #home .hero-visual{height:clamp(260px,calc(100svh - 370px),550px)} #home .hero-copy{padding:32px 0 24px} #home .hero-links{margin-top:20px} } /* Dublin's local time and current weather lead the opening, quietly on the left. */ #home .hero-top{justify-content:flex-start} .studio-location{display:flex;align-items:center;flex-wrap:wrap;gap:9px;color:var(--muted);font:10px/1.8 'DM Sans',Arial,sans-serif;letter-spacing:1px} .studio-location time{font-variant-numeric:tabular-nums;letter-spacing:.5px} .studio-weather{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;text-transform:uppercase;transition:color .2s} .studio-weather:hover{color:var(--ink)} #studio-weather-emoji{font-size:14px;line-height:1;letter-spacing:0} #studio-weather-temp{font-variant-numeric:tabular-nums;white-space:nowrap} @media(max-width:560px){.studio-location{font-size:8px;gap:7px;letter-spacing:.5px}.studio-weather{gap:5px}} /* Case studies show clean screens and copy without visual overlays. */ #work .project-art:before,#work .project-art:after{display:none;animation:none} #work .project:hover .art-corner,#work .project:focus-within .art-corner{text-shadow:none} #work .glitch-type:before,#work .glitch-type:after,#case-dialog .glitch-type:before,#case-dialog .glitch-type:after{display:none;animation:none} #case-dialog .case-screen>a:after{display:none;animation:none} /* Static case-study panels, including hover, focus and opening states. */ #work .project-art img,#work .project:hover .project-art img{transform:none;transition:none} #work .project-art,#work .project-meta,#case-dialog,#case-dialog *{animation:none!important} #work .project-meta h3,#case-dialog .case-next{transition:none} #case-dialog .case-next:hover{transform:none;box-shadow:none} #case-dialog .case-screen{background:#1b211c} #work .copy-display,#case-dialog .copy-display{display:none!important} #work .copy-original,#case-dialog .copy-original{opacity:1!important;text-shadow:none} /* Reported outcomes sit beside clear labels, ahead of the design artefacts. */ .case-results{margin:28px 0 34px} .case-results>h3{font:11px monospace;letter-spacing:1px;color:var(--muted);margin-bottom:12px} .case-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .case-result{padding:24px;border:1px solid #49513f;border-radius:8px;background:#171d15} .case-result strong{display:block;font:500 clamp(36px,5vw,52px)/1.1 'Manrope',Arial,sans-serif;letter-spacing:-2px;color:var(--pink)} .case-result p{font-size:13px;line-height:1.6;margin-top:12px;max-width:320px} @media(max-width:560px){.case-result-grid{grid-template-columns:1fr}.case-result{padding:20px}} /* Case-study narrative remains readable and static. */ .case-story{display:grid;gap:26px;margin:30px 0} .case-story section{padding-top:24px;border-top:1px solid var(--line)} .case-story h3{font:500 19px 'Manrope',Arial,sans-serif;letter-spacing:-.4px;margin-bottom:12px} .case-story p{font-size:14px;line-height:1.8;max-width:760px} /* Context stays inside the existing case-study popover. */ .case-disclosure{margin:20px 0;padding:12px 0 12px 16px;border-left:2px solid var(--pink)} .case-intro strong{font-weight:600;color:var(--ink)} html[data-theme=light] .case-intro{color:var(--muted)} .case-disclosure p{font-size:12px;line-height:1.75} .case-disclosure a,.case-demo{color:var(--pink)} .case-disclosure a{white-space:nowrap} .case-disclosure a:hover,.case-demo:hover{color:var(--ink)} .case-demo{display:inline-block;margin-top:18px;font-size:13px;font-weight:600} .case-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)} .case-details dt{font:10px/1.5 monospace;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)} .case-details dd{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--ink)} .case-details dd a{color:var(--pink)} .case-details dd a:hover{color:var(--ink)} .case-result-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))} .case-comparison{margin:30px 0;padding-top:24px;border-top:1px solid var(--line)} .case-comparison h3{font:500 19px 'Manrope',Arial,sans-serif;letter-spacing:-.4px;margin-bottom:16px} .case-table-scroll{overflow-x:auto;max-width:100%} .case-comparison table{width:100%;min-width:540px;border-collapse:collapse;font-size:12px;line-height:1.6;text-align:left} .case-comparison th,.case-comparison td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top} .case-comparison thead th{color:var(--pink);font-weight:600} .case-comparison tbody th{color:var(--ink);font-weight:500;width:30%} .case-comparison td{color:var(--muted);width:35%} .case-table-scroll:focus-visible{outline:2px solid var(--pink);outline-offset:4px} @media(max-width:560px){.case-details{grid-template-columns:1fr;gap:16px}.case-result-grid-three{grid-template-columns:1fr}} /* Grading artefacts stay static, uncropped and keyboard accessible. */ .grading-comparison,.grading-flow{margin:32px 0;padding-top:24px;border-top:1px solid var(--line)} .grading-comparison h3,.grading-flow h3{font:500 19px 'Manrope',Arial,sans-serif;letter-spacing:-.4px;margin-bottom:10px} .grading-visual-caption{font-size:12px;line-height:1.7;margin-bottom:16px} .grading-compare-stage{position:relative;aspect-ratio:1500/1175;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:3px;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none} .grading-compare-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center top;pointer-events:none} .grading-compare-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split))} .grading-compare-label{position:absolute;top:12px;padding:5px 8px;border-radius:2px;background:#151715e8;color:#fff8fb;font:10px/1.4 monospace;pointer-events:none} .grading-compare-label[hidden]{display:none} .grading-label-before{left:12px}.grading-label-after{right:12px} .grading-compare-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#f4bacd;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px #32262c33} .grading-compare-divider>span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%;background:#f7cfe1;color:#30282c;border:1px solid #30282c33;box-shadow:0 3px 12px #0003} .grading-compare-divider svg{width:21px;height:21px} .grading-compare-control{margin-top:12px} .grading-compare-control label{font:11px/1.6 monospace;color:var(--muted)} .grading-compare-control input{display:block;width:100%;height:44px;margin:0;accent-color:var(--pink);cursor:ew-resize;touch-action:pan-y} .comparison-view-select{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px} .comparison-view-select label{font:11px/1.5 monospace;color:var(--muted)} .comparison-view-select select{max-width:100%;min-height:40px;padding:8px 30px 8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink);font:12px/1.5 'DM Sans',Arial,sans-serif;color-scheme:dark} html[data-theme=light] .comparison-view-select select{color-scheme:light} .comparison-view-select select:focus-visible{outline:2px solid var(--pink);outline-offset:4px} .case-gallery{margin:32px 0;padding-top:24px;border-top:1px solid var(--line)} .case-gallery h3{font:500 19px 'Manrope',Arial,sans-serif;letter-spacing:-.4px;margin-bottom:10px} .case-gallery-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px} .case-gallery-button{display:flex;flex-direction:column;gap:9px;min-width:0;border:1px solid var(--line);border-radius:3px;padding:8px;background:transparent;text-align:left;font:11px/1.4 'DM Sans',Arial,sans-serif;color:var(--muted)} .case-gallery-button img{display:block;width:100%;height:64px;object-fit:contain;background:#fff;pointer-events:none} .case-gallery-button[aria-pressed=true]{border-color:var(--pink);color:var(--pink)} .case-gallery-button:hover{border-color:var(--pink)} .case-gallery figure{margin:0} .case-gallery-stage{aspect-ratio:1500/1006;background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden} .case-gallery-stage>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top} .case-gallery figcaption{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-top:14px} .case-gallery figcaption strong{font-size:13px;font-weight:600;color:var(--ink)} .case-gallery figcaption p{font-size:12px;line-height:1.7;margin-top:4px} .case-gallery figcaption a{flex-shrink:0;color:var(--pink);font:10px/1.6 monospace} .case-gallery figcaption a:hover{color:var(--ink)} @media(max-width:560px){.case-gallery-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.case-gallery figcaption{display:block}.case-gallery figcaption a{display:inline-block;margin-top:10px}.comparison-view-select{display:block}.comparison-view-select label{display:block;margin-bottom:6px}.comparison-view-select select{width:100%}} .grading-compare-stage:has(+.grading-compare-control input:focus-visible){outline:2px solid var(--pink);outline-offset:4px} .grading-original-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:12px;font:11px/1.6 monospace;color:var(--pink)} .grading-original-links a:hover{color:var(--ink)} .assignment-flow-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:3px;padding:12px 0;scrollbar-color:var(--pink) var(--bg)} .assignment-flow-scroll:focus-visible{outline:2px solid var(--pink);outline-offset:4px} .assignment-flow-vector{display:block;width:100%;min-width:860px;height:auto} .flow-scroll-hint{display:block;font:10px/1.6 monospace;margin-top:8px} .assignment-flow-text{margin-top:16px;font-size:12px;line-height:1.75;color:var(--muted)} .assignment-flow-text summary{color:var(--pink);cursor:pointer;padding:6px 0} .assignment-flow-text summary:focus-visible{outline:2px solid var(--pink);outline-offset:4px} .assignment-flow-text ol{padding-left:20px;margin:10px 0 0} .assignment-flow-text li+li{margin-top:8px} html[data-theme=light] .assignment-flow-vector{--flow-panel-color:#fbf8f5} @media(max-width:700px){.assignment-flow-vector{min-width:860px}.flow-scroll-hint{display:block}.grading-compare-label{top:8px;font-size:9px}.grading-label-before{left:8px}.grading-label-after{right:8px}.grading-original-links{font-size:10px}} /* Ruth's portrait adds a personal moment beside the about copy. */ .about-portrait{width:min(100%,320px);margin:32px 0 24px;border:1px solid #55574e;border-radius:12px;overflow:hidden;background:#262923} .about-portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain} @media(max-width:700px){.about-portrait{width:min(100%,300px);margin-top:28px}} /* Dither only the bento preview images; case-study panels stay static. */ #work .dither-host{position:relative} #work .dither-overlay{position:absolute;display:block;opacity:0;z-index:3;pointer-events:none;image-rendering:pixelated;border-radius:2px} .paused #work .dither-overlay{display:none!important} @media(prefers-reduced-motion:reduce){#work .dither-overlay{display:none!important}} /* One compact editorial interlude, with a single fixed-height personal note. */ #about.about-editorial{padding:30px 5% 26px;background:transparent;border:0;border-radius:0;box-shadow:none} .about-editorial-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start} #about .about-portrait{width:250px;max-width:100%;margin:0;border-radius:10px} .about-editorial-copy{min-width:0;max-width:1000px} .about-intro-headline{font:500 clamp(24px,2.2vw,32px)/1.3 'Manrope',Arial,sans-serif;letter-spacing:-.6px;color:var(--ink);margin:0;max-width:790px} .about-intro-body{font-size:16px;line-height:1.65;color:var(--muted);margin:9px 0 0;max-width:820px} .fact-note{margin-top:17px} .fact-note-heading>h3{font:9px/1.5 monospace;letter-spacing:1.1px;font-weight:400;color:#b5a1ac;margin:0 0 7px} .fact-note-panel{height:130px;padding:0;border:0;background:none} .fact-note-top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:25px} #note-fact-counter{font:10px monospace;letter-spacing:1px;color:#918c86;font-variant-numeric:tabular-nums} .fact-note-navigation{display:flex;gap:7px} .fact-note-navigation button{width:32px;height:28px;border:0;background:transparent;color:var(--pink);font:19px monospace;border-radius:3px} .fact-note-navigation button:hover{background:#35252e} .fact-note-content{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;height:92px;padding-bottom:6px} #note-fact-icon{font-size:25px;line-height:1;text-align:center} #note-fact-text{font:400 clamp(19px,1.8vw,26px)/1.3 'Manrope',Arial,sans-serif;letter-spacing:-.3px;color:#e7dfdf;margin:0} .about-closing{border-top:1px solid var(--line);padding-top:11px;margin-top:19px;font:10px/1.5 monospace;color:#91988a} @media(max-width:950px){.about-editorial-grid{grid-template-columns:200px minmax(0,1fr);gap:28px}#about .about-portrait{width:200px}.about-intro-headline{font-size:25px}.fact-note-panel{height:130px}.fact-note-content{height:90px}#note-fact-text{font-size:21px}} @media(max-width:650px){#about.about-editorial{padding-top:32px;padding-bottom:28px}.about-editorial-grid{grid-template-columns:1fr;gap:20px}#about .about-portrait{width:160px}.about-intro-headline{font-size:24px}.about-intro-body{font-size:15px}.fact-note{margin-top:20px}.fact-note-panel{height:164px}.fact-note-content{height:124px}#note-fact-text{font-size:21px}.fact-note-heading>h3{font-size:7px;letter-spacing:.75px}} /* Reference composition: portrait and intro, then a full-width fact strip. */ .about-editorial-grid{grid-template-columns:clamp(260px,30vw,400px) minmax(0,1fr);gap:28px;align-items:start} #about .about-portrait{width:100%;max-width:400px;border-radius:16px} #about .about-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center} .about-editorial-copy{max-width:none;padding-top:5px} .about-intro-body{margin-top:18px} #about .fact-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)} #about .fact-note .fact-note-panel{position:relative} #about .fact-note .fact-note-navigation{position:absolute;right:0;top:48px;gap:12px} #about .fact-note .fact-note-navigation button{width:42px;height:36px;border:1px solid #62505b;border-radius:20px} #about .fact-note .fact-note-content{padding-right:125px} #about .about-closing{border:0;margin-top:4px;padding-top:0} @media(max-width:950px){.about-editorial-grid{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:24px}} @media(max-width:650px){.about-editorial-grid{grid-template-columns:1fr;gap:24px}#about .about-portrait{max-width:280px}.about-editorial-copy{padding-top:0}#about .fact-note .fact-note-content{padding-right:0}#about .fact-note .fact-note-navigation{position:static}#about .fact-note .fact-note-navigation button{width:32px;height:28px}#about .fact-note .fact-note-top{height:30px}#about .fact-note{margin-top:24px;padding-top:18px}} #note-fact-text a{color:var(--pink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} #note-fact-text a:hover{color:var(--ink)} @media(max-width:450px){#about .fact-note .fact-note-panel{height:250px}#about .fact-note .fact-note-content{height:210px}} /* The portrait resolves from crisp pixels on hover, keyboard focus or touch. */ .portrait-reveal{display:block;width:100%;position:relative;padding:0;border:0;background:#262923;text-align:inherit;overflow:hidden} .portrait-pixels{position:absolute;inset:0;width:100%;height:100%;z-index:1;image-rendering:pixelated;pointer-events:none;opacity:0;transition:opacity .24s steps(4,end)} .portrait-ready .portrait-pixels{opacity:1} .portrait-ready.portrait-clear .portrait-pixels{opacity:0} #about .about-portrait:has(.portrait-reveal:focus-visible){outline:2px solid var(--pink);outline-offset:5px} .portrait-reveal:focus-visible{outline:none} .paused .portrait-pixels{transition:none} @media(prefers-reduced-motion:reduce){.portrait-pixels{transition:none}} /* Facts sit directly below the intro, alongside the portrait on desktop. */ #about .about-editorial-copy>.fact-note{margin-top:24px;padding-top:24px;border:0;border-top:1px solid var(--line)} #about .fact-note .fact-note-panel{height:190px} #about .fact-note .fact-note-content{height:150px} .note-fact-detail{display:block;font:10px/1.5 monospace;letter-spacing:.5px;color:var(--muted);margin-top:12px} #note-fact-icon.fact-colour-swatch{display:block;width:24px;height:24px;border-radius:6px;border:1px solid #ffffff30;box-shadow:0 0 18px #f7cfe11a} @media(max-width:650px){#about .fact-note .fact-note-panel{height:200px}#about .fact-note .fact-note-content{height:160px}} @media(max-width:450px){#about .fact-note .fact-note-panel{height:260px}#about .fact-note .fact-note-content{height:220px}} @media(max-width:650px){#about .about-editorial-copy>.fact-note{margin-top:20px;padding-top:20px}} /* Light and dark share the same composition; colours adapt across every section. */ html{color-scheme:dark} #theme-toggle{width:38px;height:38px;display:grid;place-items:center;padding:8px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);flex-shrink:0} #theme-toggle:hover{border-color:var(--pink);color:var(--pink)} #theme-toggle svg{width:21px;height:21px;grid-area:1/1} #theme-toggle .theme-icon-moon{display:none} html[data-theme=light]{color-scheme:light;--bg:#f6f2ee;--ink:#262923;--muted:#62665e;--line:#d7d4cb;--pink:#98496e;--green:#536d43} html[data-theme=light] #theme-toggle .theme-icon-sun{display:none} html[data-theme=light] #theme-toggle .theme-icon-moon{display:block} html[data-theme=light] body{background-color:var(--bg);background-image:radial-gradient(#74796520 .65px,transparent .65px)} html[data-theme=light] .site-frame{border-color:#bdaeb63b;border-top-color:#c594ad} html[data-theme=light] nav{background:#edece4;border-color:var(--line)} html[data-theme=light] nav a{color:#454b3e} html[data-theme=light] nav a:hover{background:#dfdfd2;color:var(--pink)} html[data-theme=light] .motion-toggle,html[data-theme=light] .language-switch{border-color:var(--line)} html[data-theme=light] .language-switch button[aria-pressed=true]{color:#fffaf7} html[data-theme=light] #home.intro-hero{background:radial-gradient(ellipse at 50% 40%,#e6d5dd55,transparent 56%)} html[data-theme=light] #home .hero-name,html[data-theme=light] #home .hero-description,html[data-theme=light] #home .employer-line{color:var(--ink)} html[data-theme=light] #home .hero-role,html[data-theme=light] #home .employer-line>a{color:var(--muted)} html[data-theme=light] #home .employer-line>a:hover{color:var(--pink)} html[data-theme=light] #home .wmf-symbol{filter:brightness(0);opacity:.8} html[data-theme=light] .hero-visual{border-color:#70657022;background-image:linear-gradient(90deg,transparent calc(25% - 1px),#70657012 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),#70657012 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),#70657012 75%,transparent calc(75% + 1px))} html[data-theme=light] #home .hero-foot{background:transparent} html[data-theme=light] .hero-light-control{color:#765c6a;border-color:#c2aebb} html[data-theme=light] .hero-light-control kbd{color:#765c6a;border-color:#c2aebb} html[data-theme=light] .copy-decoding>.copy-display{color:var(--ink);text-shadow:1px 0 #ba658f80,-1px 0 #5c765065} html[data-theme=light] .bento-grid>.project{background:#eeeee6;border-color:var(--line)} html[data-theme=light] .bento-grid>.project:hover{border-color:#ad7c96;box-shadow:0 8px 32px #776f6812} html[data-theme=light] .filters button.active{color:#fffaf7} html[data-theme=light] .work-note{color:var(--muted)} html[data-theme=light] .about-intro-headline,html[data-theme=light] #note-fact-text{color:var(--ink)} html[data-theme=light] .fact-note-heading>h3{color:#765c6a} html[data-theme=light] #note-fact-counter,html[data-theme=light] .about-closing{color:var(--muted)} html[data-theme=light] .fact-note-navigation button{border-color:#c2aebb!important} html[data-theme=light] .fact-note-navigation button:hover{background:#eadbe3} html[data-theme=light] .signal-garden,html[data-theme=light] .experiment{background:#eeeee6} html[data-theme=light] .garden-tools button{background:#e2e7d9;color:#3e4e32;border-color:#b8c4ac} html[data-theme=light] .garden-tools button:hover{background:#d1dcc4} html[data-theme=light] .garden-surface{background:radial-gradient(ellipse at center,#f1e3eb,#e9ede3)} html[data-theme=light] .garden-hint,html[data-theme=light] .garden-counter,html[data-theme=light] .experiment-copy small,html[data-theme=light] .setting small{color:var(--muted)} html[data-theme=light] .mini-scene{background:radial-gradient(ellipse at center,#eed6e3,#e0e8d9)} html[data-theme=light] .mini-scene.monochrome{background:radial-gradient(ellipse at center,#dedfd8,#eaece4)} html[data-theme=light] .scene-caption{color:#5b6154} html[data-theme=light] .mini-scene.monochrome .scene-star{color:#646e57} html[data-theme=light] .switch{background:#c3c7bb} html[data-theme=light] .switch:after{background:#fffaf7} html[data-theme=light] .elsewhere,html[data-theme=light] footer{background:#eeeee6} html[data-theme=light] .social-links>a{background:#f5f3ed;border-color:#cbd1c1} html[data-theme=light] .social-links>a:hover{background:#f0e2e9;border-color:#b58a9f} html[data-theme=light] .social-logo{background:#e8eadd;border-color:#c3cdb7} html[data-theme=light] .social-logo .social-icon-white{filter:brightness(0);opacity:.75} html[data-theme=light] .social-links>a:hover .social-icon-white,html[data-theme=light] .social-links>a:focus-visible .social-icon-white{opacity:0} html[data-theme=light] .social-links>a:hover .social-logo,html[data-theme=light] .social-links>a:focus-visible .social-logo{background:#f3e8ee} html[data-theme=light] #case-dialog{background:#f6f2ee;border-color:#ccafbF;box-shadow:0 35px 130px #302b3440;scrollbar-color:#b69bad #f6f2ee} html[data-theme=light] #case-dialog .case-screen{background:#e8eade;border-color:#c1c9b3} html[data-theme=light] .case-screen-bar{color:var(--muted)} html[data-theme=light] .case-panel,html[data-theme=light] .case-panel:hover,html[data-theme=light] .case-result{background:#eeeee6;border-color:#cbd1c1} html[data-theme=light] .case-next{color:#fffaf7} html[data-theme=light] .close-dialog{border-color:#adaf9f} html[data-theme=light] .skip{color:#fffaf7} /* Keep fact navigation alongside its label, across viewport sizes. */ #about .fact-note-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:2px} #about .fact-note-heading>h3{margin:0;min-width:0} #about .fact-note .fact-note-navigation{position:static;flex-shrink:0;gap:8px} #about .fact-note .fact-note-navigation button{width:34px;height:30px} #about .fact-note .fact-note-top{height:20px} #about .fact-note .fact-note-content{align-items:start;padding-top:10px;padding-right:0} #about #note-fact-text{font:400 clamp(15px,1.2vw,17px)/1.5 monospace;letter-spacing:0} @media(max-width:650px){#about .fact-note-heading{gap:10px}#about .fact-note .fact-note-navigation button{width:32px;height:28px}#about #note-fact-text{font-size:15px}} /* Icon controls use fixed geometry instead of font baselines. */ #about .fact-note .fact-note-navigation button{display:grid;place-items:center;padding:0;line-height:1;appearance:none;-webkit-appearance:none} .fact-note-navigation button svg{display:block;width:18px;height:18px;pointer-events:none} @media(max-width:650px){body header .header-actions{align-items:center}#theme-toggle{width:32px;height:32px;padding:6px}#theme-toggle svg{width:17px;height:17px}#about .fact-note .fact-note-navigation button{width:30px;height:30px;border-radius:50%}.fact-note-navigation button svg{width:17px;height:17px}} /* Readable case-study captions on cards and image labels. */ #work .project-meta .eyebrow{font-size:12px;line-height:1.6;letter-spacing:.9px} #work .project-art .art-corner{font-size:11px;line-height:1.4;letter-spacing:1.1px} @media(max-width:650px){#work .project-meta .eyebrow{font-size:11px}#work .project-art .art-corner{font-size:10px}} /* Sticky navigation stays legible in both colour themes. */ body header{position:sticky;top:0;z-index:30;background:var(--bg);background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} html{scroll-padding-top:calc(var(--header-height,100px) + 16px)} .header-contact{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:4px;color:var(--ink);font:11px/1.2 monospace;white-space:nowrap;flex-shrink:0;transition:color .2s,border-color .2s} .header-contact svg{width:16px;height:16px;flex-shrink:0} .header-contact:hover{color:var(--pink);border-color:var(--pink)} @media(max-width:650px){.header-contact{min-height:32px;padding:7px 9px;gap:5px;font-size:10px}.header-contact svg{width:14px;height:14px}body header .header-actions{gap:6px}} /* An ordinary emoji until someone happens to activate it. */ #about{position:relative} #about .egg-trigger{position:relative;display:inline-block;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:1;cursor:default;appearance:none;-webkit-appearance:none;vertical-align:baseline;box-shadow:none;-webkit-tap-highlight-color:transparent} #about .egg-trigger:hover,#about .egg-trigger:active{background:transparent;color:inherit;box-shadow:none} #about .egg-trigger:focus:not(:focus-visible){outline:none} #about .egg-trigger:focus-visible{outline:1px solid var(--pink);outline-offset:4px;border-radius:3px} .egg-emoji{display:block} .egg-crack{position:absolute;left:50%;top:3px;width:10px;height:18px;transform:translateX(-50%);opacity:0;pointer-events:none} .egg-cracked .egg-crack{opacity:1} .egg-overlay{position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none} .egg-bunny{position:absolute;top:0;left:0;width:44px;height:55px;opacity:0;transform-origin:50% 100%;will-change:transform,opacity;pointer-events:none} .egg-bunny svg{display:block;width:100%;height:100%} .egg-message{position:absolute;opacity:0;color:var(--pink);font:italic 18px/1.3 Georgia,serif;white-space:nowrap;pointer-events:none} @media(max-width:650px){.egg-bunny{width:36px;height:45px}.egg-message{font-size:16px}} /* Side quests stay in the existing introduction; photography opens separately. */ .about-side-quests a,.inline-photo-link{color:var(--pink);text-decoration:none} .inline-photo-link{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-align:inherit;vertical-align:baseline;cursor:pointer} .about-side-quests a:hover,.inline-photo-link:hover{color:var(--ink)} #photo-dialog{width:calc(100% - 32px);max-width:920px;max-height:88svh;padding:42px;background:radial-gradient(ellipse at top right,#39222f55,transparent 50%),#121611;border:1px solid #f9b5d155;border-radius:5px;box-shadow:0 35px 130px #000b;scrollbar-color:#62505a #121611} #photo-dialog::backdrop{background:#050807cf;backdrop-filter:blur(9px)} #photo-dialog h2{font-size:clamp(32px,4vw,48px);margin-top:16px;letter-spacing:-1.8px} .photo-intro{font-size:13px;margin-top:16px} .photo-filter-defs{position:absolute;pointer-events:none} .photo-toolbar{display:flex;align-items:center;gap:12px;margin:24px 0 14px} #photo-counter{font:11px monospace;letter-spacing:1px;color:var(--muted);margin-right:auto;font-variant-numeric:tabular-nums} #photo-dream{border:1px solid var(--line);border-radius:4px;background:transparent;padding:9px 12px;font:11px monospace;color:var(--muted)} #photo-dream[aria-pressed=true]{color:var(--pink);border-color:#79606e;background:#f7cfe10a} .photo-controls{display:flex;gap:8px} .photo-controls button{display:grid;place-items:center;width:38px;height:38px;padding:0;background:none;border:1px solid #62505b;border-radius:50%;color:var(--pink)} .photo-controls svg{width:18px;height:18px} .photo-controls button:hover{border-color:var(--pink);background:#f7cfe10a} .photo-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/3;background:#080b09;border:1px solid var(--line);--dream-x:0px;--dream-y:0px} .photo-stage>img{display:block;width:100%;height:100%;object-fit:contain} .photo-stage[data-dream=true]>img{filter:url("#photo-dream-filter")} .photo-stage:before,.photo-stage:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0} .photo-stage[data-dream=true]:before{background-image:var(--photo-image);background-size:100% 100%;opacity:.13;mix-blend-mode:screen;filter:hue-rotate(45deg);transform:translate(calc(3px + var(--dream-x)),var(--dream-y));transition:transform .45s ease-out} .photo-stage[data-dream=true]:after{inset:-20%;background:radial-gradient(ellipse at 25% 40%,#f7cfe126,transparent 52%),radial-gradient(ellipse at 80% 70%,#b0d8d826,transparent 48%);mix-blend-mode:soft-light;opacity:1;animation:photo-drift 12s ease-in-out infinite alternate} @keyframes photo-drift{from{transform:translate(-3%,-2%) rotate(-4deg)}to{transform:translate(3%,2%) rotate(4deg)}} .photo-feature figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font:11px/1.5 monospace;color:var(--muted)} .photo-feature figcaption a{color:var(--pink);white-space:nowrap} .photo-thumbnails{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin-top:24px} .photo-thumbnail{min-width:0;aspect-ratio:4/3;background:none;border:1px solid var(--line);padding:2px;border-radius:2px;overflow:hidden;opacity:.65} .photo-thumbnail img{display:block;width:100%;height:100%;object-fit:cover} .photo-thumbnail[aria-pressed=true]{border-color:var(--pink);opacity:1} .photo-thumbnail:hover{opacity:1} html[data-theme=light] #photo-dialog{background:var(--bg);border-color:#ccafbf;box-shadow:0 35px 130px #302b3440} html[data-theme=light] .photo-stage{background:#e8eade} html[data-theme=light] .photo-controls button{border-color:#c2aebb} .paused .photo-stage[data-dream=true]>img{filter:none} .paused .photo-stage:before,.paused .photo-stage:after{opacity:0!important;animation:none!important;transition:none!important} @media(prefers-reduced-motion:reduce){.photo-stage[data-dream=true]>img{filter:none}.photo-stage:before,.photo-stage:after{opacity:0!important;animation:none!important;transition:none!important}} @media(max-width:650px){#photo-dialog{padding:42px 20px 24px}.photo-thumbnails{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.photo-toolbar{gap:8px}#photo-dream{font-size:10px;padding:9px}.photo-controls button{width:34px;height:34px}.photo-feature figcaption{font-size:10px;gap:8px}#photo-dialog h2{font-size:36px}} /* Miniature paper notes are layered within each existing image. */ #work .project{position:relative} #work .project-open{position:absolute;inset:0;z-index:4;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer} #work .project-open:focus-visible{outline:2px solid var(--pink);outline-offset:-4px} #work .hmw-info{position:absolute;top:14px;right:14px;z-index:9;display:grid;place-items:center;width:32px;height:32px;padding:7px;border:1px solid #ffffff50;border-radius:50%;background:#111211b8;color:#f0eee8;opacity:0;pointer-events:none} #work .hmw-info svg{display:block;width:16px;height:16px} #work .project:hover .hmw-info,#work .project:focus-within .hmw-info{opacity:1;pointer-events:auto} #work .hmw-info:focus-visible{outline:2px solid var(--pink);outline-offset:3px} #work .hmw-note{position:absolute;z-index:8;top:52px;right:16px;width:min(184px,calc(100% - 32px));padding:12px 13px 14px;background:#F7CFE1;color:#30282C;border-radius:2px;box-shadow:0 6px 18px #0004;opacity:0;visibility:hidden;pointer-events:none;text-align:left;transform:translateY(7px) rotate(var(--note-angle,-2deg));transition:opacity .22s ease,transform .22s ease,visibility .22s} #work .hmw-note:after{content:'';position:absolute;right:0;bottom:0;width:11px;height:11px;background:linear-gradient(135deg,#d6a7bd 49%,#efbfd6 50%);clip-path:polygon(100% 0,100% 100%,0 100%)} #work .hmw-label{display:block;font:700 9px/1.3 'Courier New',monospace;letter-spacing:.5px;margin-bottom:7px;color:#30282C} #work .hmw-question{display:block;font:500 12px/1.35 'DM Sans',Arial,sans-serif;letter-spacing:0} #work .project:nth-child(even) .hmw-note{--note-angle:3deg;top:56px;right:19px} #work .project:nth-child(3) .hmw-note{--note-angle:2deg;right:14px} #work .project:nth-child(5) .hmw-note{--note-angle:-3deg;top:54px} #work .project.hmw-visible .hmw-note{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) rotate(var(--note-angle,-2deg))} @media(hover:none),(pointer:coarse){#work .hmw-info{opacity:1;pointer-events:auto}} @media(max-width:560px){#work .hmw-info{width:36px;height:36px;top:12px;right:12px}#work .hmw-note{width:min(178px,calc(100% - 32px));right:16px}} .paused #work .hmw-note{transition:none} @media(prefers-reduced-motion:reduce){#work .hmw-note{transition:none}} .about-download{display:inline-flex;align-items:center;gap:9px;margin-top:18px;color:var(--pink);font:11px/1.5 monospace;text-decoration:none} .about-download svg{width:15px;height:15px;flex-shrink:0} .about-download:hover{color:var(--ink)} .header-contact{position:relative;cursor:pointer;background:transparent;appearance:none;-webkit-appearance:none} .contact-feedback{position:absolute;top:calc(100% + 8px);right:0;z-index:2;padding:8px 11px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--pink);font:11px/1.3 monospace;white-space:nowrap;box-shadow:0 4px 16px #0003;pointer-events:none} .contact-feedback[hidden]{display:none}