@font-face{font-family:Marcellus;src:url('fonts/marcellus.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/manrope.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
:root{--bg:oklch(.20 .045 343);--surface:oklch(.25 .047 343);--ink:oklch(.95 .005 343);--muted:oklch(.78 .012 343);--primary:oklch(.39 .085 343);--accent:oklch(.87 .015 230);--line:oklch(.39 .028 343);--sans:Manrope,Arial,sans-serif;--display:Marcellus,Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}
::selection{background:var(--accent);color:var(--bg)}
.skip-link{position:fixed;left:1rem;top:1rem;transform:translateY(-180%);background:var(--ink);color:var(--bg);padding:.5rem 1rem;z-index:2}
.skip-link:focus{transform:translateY(0)}
.site-shell{max-width:1600px;margin:auto;padding-inline:clamp(24px,6vw,100px)}
.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:34px}
.wordmark{display:flex;align-items:center;gap:13px;font-family:var(--display);font-size:23px;line-height:1.15}
.brand-mark{width:43px;height:43px;color:var(--accent)}
.wordmark-sub{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin-top:6px}
.contact-nav{font-size:13px;display:flex;gap:25px;align-items:center;color:var(--muted)}
.contact-nav:hover{color:var(--ink)}
.contact-nav span{font-size:23px}
.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:30px;min-height:680px;padding-block:55px 105px}
.intro-label{font-size:13px;letter-spacing:.025em;color:var(--muted);margin:0 0 25px}
h1,h2,p{margin:0}
h1,h2{font-family:var(--display);font-weight:400;text-wrap:balance}
h1{font-size:clamp(43px,4.6vw,70px);line-height:1.16;letter-spacing:-.025em}
h1 span{color:var(--accent)}
.hero-description{color:var(--muted);font-size:15px;line-height:1.85;margin-top:30px;max-width:50ch;text-wrap:pretty}
.hero-link{display:inline-flex;align-items:center;gap:30px;font-size:13px;margin-top:34px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.hero-link span{transition:transform .25s ease-out}
.hero-link:hover span{transform:translateY(4px)}
.studio-art{min-width:0;position:relative}
.studio-art img{display:block;width:100%;height:auto}
.studio-section{display:grid;grid-template-columns:1fr 1fr;gap:65px;border-top:1px solid var(--line);padding-block:75px 90px;scroll-margin-top:25px}
h2{font-size:clamp(29px,3vw,42px);line-height:1.25;letter-spacing:-.02em}
.studio-copy{max-width:55ch}
.studio-copy>p:first-child{font-size:17px;line-height:1.85;color:var(--ink);text-wrap:pretty}
.development-note{position:relative;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.9;margin-top:28px}
.status-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);position:absolute;left:0;top:10px}
.contact-section{border-top:1px solid var(--line);padding-block:65px 75px;display:flex;gap:40px;justify-content:space-between;align-items:center}
.contact-section p{color:var(--muted);font-size:13px;margin-top:12px}
.email-link{font-size:clamp(16px,1.65vw,23px);display:flex;gap:30px;align-items:center;padding-block:14px;border-bottom:1px solid var(--line);min-width:0}
.email-link span:first-child{overflow-wrap:anywhere}
.email-link:hover{border-color:var(--accent)}
.email-arrow{font-size:30px;flex-shrink:0;transition:transform .25s ease-out}
.email-link:hover .email-arrow{transform:translate(3px,-3px)}
.site-footer{border-top:1px solid var(--line);padding-block:25px 30px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}
@media(min-width:1500px){.hero{min-height:760px}}
@media(max-width:900px){.site-shell{padding-inline:32px}.hero{gap:8px;min-height:580px;padding-block:50px 75px}h1{font-size:clamp(40px,5.4vw,58px)}.puzzle-frame{width:80%;gap:8px}.puzzle-art{margin-top:5px}.art-caption{font-size:9px;bottom:-25px}.studio-section{gap:35px;padding-block:60px}.contact-section{gap:24px}.email-link{font-size:17px;gap:16px}}
@media(max-width:640px){.site-shell{padding-inline:24px}.site-header{padding-block:26px}.wordmark{font-size:20px}.brand-mark{width:36px;height:36px}.wordmark-sub{font-size:9px}.contact-nav{font-size:11px;gap:9px}.hero{grid-template-columns:1fr;gap:32px;padding-block:35px 65px}.hero-copy{position:relative;z-index:1}h1{font-size:clamp(39px,9.4vw,57px);line-height:1.18}.wide-break{display:none}.intro-label{margin-bottom:20px}.hero-description{margin-top:25px;font-size:14px}.hero-link{margin-top:25px}.puzzle-art{width:min(100%,370px);justify-self:center;margin-top:5px}.puzzle-frame{width:66%;gap:9px}.art-caption{font-size:10px;bottom:0}.studio-section{grid-template-columns:1fr;gap:25px;padding-block:48px}.studio-copy>p:first-child{font-size:15px}.contact-section{display:block;padding-block:45px}.email-link{margin-top:20px;width:fit-content;max-width:100%;font-size:15px;gap:16px}.site-footer{flex-direction:column;gap:5px;font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

@media(max-width:640px){.studio-art{width:100%;margin-top:10px}}

.header-logo{display:block;width:360px;height:auto;max-height:180px;object-fit:contain;object-position:left center}
.site-header{padding-block:20px}
.puzzle-art{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-width:0}
.art-halo{position:absolute;width:94%;height:94%;border-radius:50%;background:radial-gradient(ellipse,oklch(.35 .068 343 / .58),oklch(.20 .045 343 / 0) 68%);pointer-events:none}
.puzzle-frame{width:69%;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:11px;transform:rotate(-12deg);position:relative}
.tile{position:relative;aspect-ratio:1;border-radius:7px;background:linear-gradient(140deg,oklch(.96 .006 230),oklch(.70 .018 230) 60%,oklch(.85 .012 230));box-shadow:2px 3px 0 oklch(.45 .017 230),7px 12px 8px oklch(.12 .018 343 / .40);display:flex;align-items:center;justify-content:center;color:var(--bg);overflow:hidden}
.tile-one{transform:translate(-13px,-11px);animation:piece-one 12s ease-in-out infinite}
.tile-two{transform:translate(0,-8px)}
.tile-three{transform:translate(20px,-18px)}
.tile-four{transform:translate(-7px,0)}
.tile-centre{background:linear-gradient(140deg,oklch(.38 .06 343),oklch(.26 .04 343));box-shadow:2px 3px 0 oklch(.17 .033 343),7px 12px 8px oklch(.12 .018 343 / .40);color:var(--accent)}
.tile-centre svg{width:75%;height:75%}
.tile-six{transform:translate(10px,0)}
.tile-seven{transform:translate(-18px,15px)}
.tile-eight{transform:translate(0,9px)}
.tile-nine{transform:translate(18px,19px);animation:piece-nine 12s ease-in-out infinite}
.tile-ring{width:45%;height:45%;border:1px solid oklch(.40 .026 343 / .60);border-radius:50%}
.tile-ring:after{content:'';display:block;width:65%;height:65%;border:1px solid oklch(.40 .026 343 / .60);border-radius:50%;margin:17.5%}
.tile-arc{position:absolute;inset:20%;border:1px solid oklch(.40 .026 343 / .60);border-radius:50%;transform:translate(35%,35%)}
.tile-two .tile-arc{transform:translate(-35%,-35%)}
.tile-cross{width:40%;height:1px;background:oklch(.40 .026 343 / .60);transform:rotate(45deg)}
.tile-cross:after{content:'';display:block;width:100%;height:1px;background:oklch(.40 .026 343 / .60);transform:rotate(90deg)}
.tile-lines{width:40%;height:33%;border-top:1px solid oklch(.40 .026 343 / .60);border-bottom:1px solid oklch(.40 .026 343 / .60);transform:rotate(45deg)}
.tile-lines:after{content:'';position:absolute;top:50%;width:100%;height:1px;background:oklch(.40 .026 343 / .60)}
.tile-diamond{width:34%;height:34%;border:1px solid oklch(.40 .026 343 / .60);transform:rotate(45deg)}
.art-caption{position:absolute;bottom:0;font-size:11px;color:var(--muted);letter-spacing:.035em}
@keyframes piece-one{0%,100%{transform:translate(-13px,-11px)}45%,55%{transform:translate(-5px,-5px)}}
@keyframes piece-nine{0%,100%{transform:translate(18px,19px)}45%,55%{transform:translate(8px,8px)}}
@media(max-width:900px){.puzzle-frame{width:80%;gap:8px}.puzzle-art{margin-top:5px}.art-caption{font-size:9px;bottom:-25px}}
@media(max-width:640px){.header-logo{width:245px;max-width:62vw;max-height:125px}.site-header{padding-block:15px}.puzzle-art{width:min(100%,370px);justify-self:center;margin-top:5px}.puzzle-frame{width:66%;gap:9px}.art-caption{font-size:10px;bottom:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Compact opening composition. */
.hero{min-height:560px;padding-block:22px 60px;gap:24px}
.intro-label{margin-bottom:20px}
.hero-description{margin-top:24px}
.hero-link{margin-top:26px}
@media(min-width:1500px){.hero{min-height:620px}}
@media(max-width:900px){.hero{min-height:510px;padding-block:20px 50px;gap:12px}}
@media(max-width:640px){.hero{min-height:0;padding-block:20px 40px;gap:22px}.intro-label{margin-bottom:16px}.hero-description{margin-top:20px}.hero-link{margin-top:22px}.puzzle-art{margin-top:0}}

/* Three equally sized development previews. */
.development-section{border-top:1px solid var(--line);padding-block:65px 75px}
.development-intro{max-width:60ch;margin-bottom:32px}
.development-intro h2{text-wrap:balance}
.development-intro>p{color:var(--muted);font-size:15px;margin-top:18px;line-height:1.8}
.development-intro .preview-disclosure{font-size:12px;margin-top:16px}
.development-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.development-shot{margin:0;min-width:0}
.development-shot img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center;border-radius:8px}
.setting-shot img{object-position:78% center}
.development-shot figcaption{font-size:12px;color:var(--muted);margin-top:12px}
@media(max-width:900px){.development-gallery{gap:16px}}
@media(max-width:640px){.development-section{padding-block:45px 50px}.development-intro>p{font-size:14px}.development-gallery{grid-template-columns:1fr;gap:28px;max-width:360px;margin-inline:auto}.development-shot figcaption{margin-top:10px}}