@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;--bg:#171917;--bg-soft:#1c1f1c;--ink:#e9e8df;--muted:#aaaea4;--line:#424740;--accent:#c7d3ad;--serif:Georgia,'Times New Roman',serif;--sans:'DM Sans',Arial,sans-serif;--display:'Manrope',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.035;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='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
::selection{background:var(--accent);color:var(--bg)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.skip-link{position:absolute;top:-60px;left:20px;z-index:100;padding:12px 16px;background:var(--accent);color:var(--bg)}
.skip-link:focus{top:14px}
.section-shell{padding-left:clamp(24px,5.4vw,100px);padding-right:clamp(24px,5.4vw,100px)}
.site-header{height:96px;padding:0 clamp(24px,5.4vw,100px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #313630;position:relative;z-index:2}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-family:var(--display);font-size:18px;letter-spacing:-.055em;font-weight:500;white-space:nowrap}
.brand strong{font-weight:800}
.brand-symbol{width:31px;height:31px;position:relative;display:inline-block;flex:0 0 auto;transition:transform .5s ease}
.brand:hover .brand-symbol{transform:rotate(45deg)}
.brand-symbol span{position:absolute;left:14px;top:0;width:2px;height:31px;background:var(--accent)}
.brand-symbol span:nth-child(2){transform:rotate(45deg)}.brand-symbol span:nth-child(3){transform:rotate(90deg)}.brand-symbol span:nth-child(4){transform:rotate(135deg)}
.site-header nav{display:flex;align-items:center;gap:clamp(20px,3.3vw,56px)}
.site-header nav a{text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;transition:color .25s}
.site-header nav a:hover{color:var(--accent)}
.site-header nav span{font-size:14px;margin-left:4px;color:var(--accent)}
.eyebrow,.hero-index,.project-meta,.project-tag,.footer-bottom,.art-note{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.hero{min-height:min(850px,calc(100svh - 96px));position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--line)}
.hero-topline,.hero-bottomline{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.hero-topline{padding-top:40px}
.hero-index{color:#8f968a}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:2px;box-shadow:0 0 0 4px #c7d3ad20}
.hero-main{position:relative;z-index:1;max-width:1050px;margin:112px 0 90px}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(66px,9.7vw,168px);letter-spacing:-.095em;line-height:.96;margin:0 0 42px;max-width:1020px}
h1 em,h2 em,h3 em,.footer-main em{font-family:var(--serif);font-weight:400;letter-spacing:-.075em}
.hero h1 em{color:var(--accent)}
.hero-main p{font-size:clamp(17px,1.4vw,22px);line-height:1.5;max-width:530px;color:#bfc4b9;margin:0 0 0 clamp(0px,22vw,340px)}
.hero-bottomline{padding-bottom:45px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9fa69a;font-weight:700}
.text-link{text-decoration:none;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--accent);transition:color .25s,border-color .25s}
.text-link:hover{color:var(--accent)}.text-link span{margin-left:16px;font-size:18px;line-height:0}
.hero-orbit{position:absolute;right:-7vw;top:8%;width:min(58vw,760px);aspect-ratio:1;opacity:.33;pointer-events:none}
.orbit-ring{position:absolute;border:1px solid #7e8876;border-radius:50%;inset:0;transform:scaleX(.72) rotate(-34deg)}
.orbit-two{inset:12%;transform:scaleX(.72) rotate(34deg)}
.orbit-core{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:var(--accent);box-shadow:0 0 80px 40px #c7d3ad1c}
.work{padding-top:135px;padding-bottom:115px}
.section-intro{display:grid;grid-template-columns:1fr minmax(200px,330px);gap:40px;align-items:end;margin-bottom:92px}
.section-kicker{color:var(--accent);margin:0 0 30px}
.section-intro h2,.studio h2{font-family:var(--display);font-weight:500;letter-spacing:-.075em;line-height:1.05;font-size:clamp(48px,6.7vw,106px);margin:0}
.section-intro h2 em,.studio h2 em{color:var(--accent)}
.section-intro>p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 10px}
.project{border-top:1px solid var(--line);padding-top:23px;padding-bottom:54px}
.project-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);padding-bottom:32px}
.project-asterisk{color:var(--accent);font-size:22px;line-height:1}
.project-content{display:grid;grid-template-columns:minmax(310px,.72fr) minmax(0,1fr);gap:clamp(36px,5vw,90px);align-items:stretch}
.project-copy{display:flex;flex-direction:column;align-items:flex-start;padding:22px 0 6px}
.project h3{font-family:var(--display);font-weight:600;letter-spacing:-.075em;line-height:.93;font-size:clamp(56px,6.1vw,98px);margin:0 0 34px}
.project h3 em{color:var(--accent)}
.project-copy p{font-size:17px;line-height:1.58;max-width:355px;color:#b9bfb3;margin:0 0 48px}
.project-tag{margin-top:auto;border:1px solid #5d6659;border-radius:100px;padding:12px 16px;color:var(--accent);font-size:10px}
.project-art{height:clamp(340px,39vw,560px);min-width:0;position:relative;overflow:hidden;isolation:isolate}
.image-art{background:#c6c8bd;color:#27302a}
.image-art::before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 65% 38%,#f0f0e9 0,transparent 18%),linear-gradient(125deg,#98a29a,#d4d4c8 48%,#a4aaa0);filter:blur(34px);z-index:-1}
.image-art-frame{position:absolute;inset:12%;border:1px solid #43504699;display:flex;flex-direction:column;justify-content:space-between;padding:20px;transition:inset .5s ease}
.image-art:hover .image-art-frame{inset:10%}
.art-small{font-size:9px;letter-spacing:.22em;font-weight:700}.art-end{align-self:flex-end}
.image-art-word{font-family:var(--display);font-weight:800;letter-spacing:-.08em;font-size:clamp(46px,6vw,105px);line-height:.84;margin-left:8%}
.image-art-word i{font-family:var(--serif);font-weight:400;letter-spacing:-.075em}
.art-corner{position:absolute;width:27px;height:27px;border-color:#27302a;z-index:1}.top-left{top:6%;left:6%;border-top:1px solid;border-left:1px solid}.top-right{top:6%;right:6%;border-top:1px solid;border-right:1px solid}.bottom-left{bottom:6%;left:6%;border-bottom:1px solid;border-left:1px solid}.bottom-right{bottom:6%;right:6%;border-bottom:1px solid;border-right:1px solid}
.art-axis{position:absolute;background:#46504766}.art-axis-x{width:60px;height:1px;top:50%;right:3%}.art-axis-y{width:1px;height:60px;left:50%;bottom:3%}
.gdg-art{background:#26332f;color:#e9e8dc}
.gdg-art::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,#111e1a99,transparent 50%,#79a18533);pointer-events:none}
.gdg-grid{position:absolute;inset:0;background-image:linear-gradient(#b6cdb220 1px,transparent 1px),linear-gradient(90deg,#b6cdb220 1px,transparent 1px);background-size:12.5% 12.5%;transform:perspective(700px) rotateX(16deg) scale(1.35);transition:transform .7s ease}
.gdg-art:hover .gdg-grid{transform:perspective(700px) rotateX(0) scale(1.1)}
.gdg-word{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:800;letter-spacing:-.16em;font-size:clamp(120px,17vw,290px);line-height:1;text-shadow:0 20px 40px #08150d99;white-space:nowrap}
.gdg-word span{color:#b1c5a5}
.gdg-cross{position:absolute;color:#a8c5a0;font-family:var(--display);font-size:28px;z-index:1}.cross-one{top:16%;left:19%}.cross-two{right:15%;top:24%}.cross-three{bottom:14%;left:31%}
.gdg-coordinate{position:absolute;z-index:1;bottom:28px;right:28px;font-size:10px;letter-spacing:.2em;color:#b9cabb}
.countermove-art{background:#bcb9a8;color:#202923}
.board-grid{position:absolute;inset:0;display:grid;background:conic-gradient(#8e988c 25%,#c9c8ba 0 50%,#8e988c 0 75%,#c9c8ba 0) 0 0/25% 25%;opacity:.75;transform:rotate(-11deg) scale(1.42);transition:transform .7s ease}
.countermove-art:hover .board-grid{transform:rotate(-7deg) scale(1.3)}
.countermove-art::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#e8e5d754,#b7b8a719 55%,#20292344);pointer-events:none}
.board-disc{position:absolute;width:clamp(80px,12vw,175px);aspect-ratio:1;border:2px solid #2d3931;border-radius:50%;box-shadow:10px 12px 0 #24332944,13px 15px 25px #1c2b2180;z-index:1}.disc-one{top:8%;right:14%;background:#34483b}.disc-two{bottom:-8%;left:8%;background:#e2dfcf}
.countermove-word{position:absolute;z-index:2;left:10%;top:43%;transform:translateY(-30%);font-family:var(--display);font-weight:800;letter-spacing:-.08em;font-size:clamp(51px,6.7vw,118px);line-height:.85;text-shadow:0 2px 16px #dad9c35c}
.countermove-word i{font-family:var(--serif);font-weight:400}.word-arrow{font-weight:400;font-size:.45em;vertical-align:top;margin-left:.2em}
.board-corner-label{position:absolute;z-index:2;right:25px;bottom:24px;font-size:10px;letter-spacing:.2em;font-weight:700}
.art-note{color:#858d83;text-align:right;margin:10px 0 0;font-size:9px;letter-spacing:.08em;text-transform:none;font-weight:400}
.studio{background:#c6d1b4;color:#1b251e;padding-top:100px;padding-bottom:115px;display:grid;grid-template-columns:minmax(180px,.28fr) 1fr;gap:clamp(30px,5vw,90px)}
.studio-label{display:flex;flex-direction:column;justify-content:space-between}.studio-label .eyebrow{white-space:nowrap}.studio-mark{font-size:clamp(110px,14vw,230px);line-height:1;color:#1e352756;transform:rotate(-16deg);transform-origin:left bottom}
.studio h2{font-size:clamp(48px,6.5vw,105px);margin:0 0 70px}.studio h2 em{color:#526850}
.studio-details{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,5vw,100px);max-width:850px}
.studio-details p{font-size:clamp(16px,1.3vw,19px);line-height:1.6;margin:0;color:#344237}
.site-footer{padding-top:70px;padding-bottom:30px;min-height:350px;display:flex;flex-direction:column;justify-content:space-between}
.footer-main{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.footer-main p{font-family:var(--display);font-size:clamp(43px,6vw,90px);font-weight:500;letter-spacing:-.08em;line-height:1;margin:0}.footer-main em{color:var(--accent)}
.back-to-top{font-size:11px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:10px;white-space:nowrap}.back-to-top:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:20px;color:#929a8d;font-size:10px}
@media(max-width:900px){.hero{min-height:760px}.hero-main{margin:100px 0}.hero-main p{margin-left:20vw}.project-content{grid-template-columns:minmax(240px,.65fr) 1fr;gap:30px}.project h3{font-size:clamp(53px,7vw,76px)}.project-art{height:390px}.image-art-word{font-size:clamp(45px,7vw,75px)}.countermove-word{font-size:clamp(50px,6.6vw,70px)}.gdg-word{font-size:clamp(120px,18vw,170px)}.studio{grid-template-columns:1fr}.studio-label{flex-direction:row;align-items:flex-start}.studio-mark{font-size:75px}.studio h2{margin-top:-15px}}
@media(max-width:680px){.site-header{height:78px}.brand{font-size:17px}.brand-symbol{transform:scale(.85);margin-right:-4px}.brand:hover .brand-symbol{transform:scale(.85) rotate(45deg)}.site-header nav{gap:18px}.site-header nav a{font-size:10px}.site-header nav span{display:none}.hero{min-height:720px}.hero-topline{padding-top:26px}.hero-index{display:none}.hero-main{margin:120px 0 100px}.hero h1{font-size:clamp(57px,13.5vw,90px);margin-bottom:30px;max-width:600px}.hero-main p{margin-left:0;font-size:17px;max-width:430px}.hero-bottomline{padding-bottom:28px}.hero-bottomline>span{display:none}.hero-orbit{width:105vw;right:-45vw;top:10%;opacity:.22}.work{padding-top:85px;padding-bottom:75px}.section-intro{display:block;margin-bottom:55px}.section-intro h2{font-size:clamp(48px,10vw,74px)}.section-intro>p{margin-top:32px;max-width:400px}.project{padding-bottom:50px}.project-meta{padding-bottom:18px}.project-content{display:flex;flex-direction:column;gap:28px}.project-copy{padding:0}.project h3{font-size:clamp(64px,13vw,94px);margin-bottom:20px}.project-copy p{margin-bottom:25px}.project-tag{margin-top:0}.project-art{height:clamp(335px,84vw,500px)}.image-art-word{font-size:clamp(55px,12vw,93px)}.gdg-word{font-size:clamp(135px,29vw,235px)}.countermove-word{font-size:clamp(56px,12vw,90px)}.studio{padding-top:65px;padding-bottom:80px}.studio-mark{font-size:50px}.studio h2{font-size:clamp(47px,10vw,75px);margin:0 0 45px}.studio-details{display:block}.studio-details p+p{margin-top:22px}.site-footer{min-height:280px;padding-top:55px}.footer-main{align-items:flex-start;flex-direction:column}.footer-main p{font-size:clamp(45px,10vw,75px)}.footer-bottom{flex-wrap:wrap;line-height:1.5}.footer-bottom span:last-child{width:100%}}
@media(max-width:380px){.site-header nav{gap:12px}.site-header nav a{font-size:9px}.brand{font-size:15px}.hero h1{font-size:54px}.project-meta{font-size:9px}.image-art-word{font-size:49px}.countermove-word{font-size:52px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
