@font-face {
font-family:Cabin;
src:url('../fonts/Cabin/Cabin-Bold.ttf') format('truetype');
font-weight:700;
font-display:swap
}
:root {
--bg:#ffffff;
--surface:#fff;
--text:#202b27;
--muted:#606a63;
--border:#dbdfd6;
--accent:#0080d9;
font-family:Tahoma,Arial,sans-serif;
color-scheme:light
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:110px
}
html[data-theme-choice="system"] {color-scheme:light dark}
html:not([data-ready="true"]) #site-header,html:not([data-ready="true"]) #main,html:not([data-ready="true"]) #site-footer {visibility:hidden}
.boot-loader {
position:fixed; z-index:9999; inset:0; display:flex; flex-direction:column;
justify-content:center; align-items:center; gap:18px; background:var(--bg); color:var(--text);
transition:opacity .2s ease,visibility .2s ease
}
html[data-ready="true"] .boot-loader {visibility:hidden; opacity:0; pointer-events:none}
.loader-mark {
display:block; width:38px; height:38px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%;
animation:loader-spin .8s linear infinite
}
.loader-caption {font-size:14px; color:var(--muted)}
.loader-dots {display:flex; gap:6px}
.loader-dots i {width:6px; height:6px; border-radius:50%; background:var(--accent); animation:loader-dot .9s ease-in-out infinite alternate}
.loader-dots i:nth-child(2) {animation-delay:.18s}
.loader-dots i:nth-child(3) {animation-delay:.36s}
@keyframes loader-spin {to {transform:rotate(360deg)}}
@keyframes loader-dot {to {transform:translateY(-5px);opacity:.45}}
body {
margin:0;
background:var(--bg);
color:var(--text);
font-size:16px;
line-height:1.85
}
a {
color:inherit;
text-decoration:none
}
button,input,select {
font:inherit;
color:inherit
}
button,select {
cursor:pointer
}
button,a,select,input {
touch-action:manipulation
}
button {
border:0
}
img {
display:block;
max-width:100%
}
p,h1,h2,h3 {
margin:0
}
p {
color:var(--muted)
}
h1,h2,h3 {
line-height:1.35;
font-weight:700
}
h1 {
font-size:clamp(2.5rem,5.1vw,4.75rem);
letter-spacing:-.035em
}
h2 {
font-size:clamp(1.65rem,2.6vw,2.5rem);
letter-spacing:-.025em
}
h3 {
font-size:1.2rem
}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3 {
font-family:Cabin,Arial,sans-serif
}
html[lang=en] h1 {
line-height:1.08;
font-size:clamp(3rem,6vw,5.7rem)
}
::selection {
background:var(--accent);
color:var(--bg)
}
:focus-visible {
outline:3px solid var(--accent);
outline-offset:5px;
border-radius:4px
}
.container {
width:min(1200px,calc(100% - 80px));
margin-inline:auto
}
.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
}
.skip-link {
position:fixed;
inset-block-start:-100px;
inset-inline-start:20px;
z-index:100;
background:var(--accent);
color:var(--bg);
padding:12px 24px
}
.skip-link:focus {
inset-block-start:8px
}
.site-header {
border-bottom:1px solid var(--border);
background:var(--bg)
}
.header-inner {
display:flex;
align-items:center;
gap:32px;
min-height:94px
}
.brand {
display:flex;
align-items:center;
gap:10px;
flex:none
}
.wordmark {
font-family:Cabin,Arial,sans-serif;
font-size:27px;
font-weight:700;
letter-spacing:-1px
}
.brand-mark {
font:bold 32px Cabin,Arial,sans-serif;
background:var(--accent);
color:var(--bg);
width:38px;
height:38px;
border-radius:11px;
display:flex;
align-items:center;
justify-content:center;
direction:ltr;
line-height:1
}
.brand-mark span {
color:inherit
}
#main-nav {
display:flex;
gap:26px;
align-items:center;
margin-inline:auto;
font-size:14px;
font-weight:700
}
#main-nav a {
padding-block:30px;
position:relative;
white-space:nowrap
}
#main-nav a[aria-current=page] {
color:var(--accent)
}
#main-nav a[aria-current=page]::after {
content:'';
height:3px;
background:var(--accent);
position:absolute;
inset-inline:0;
bottom:16px
}
.preferences {
display:flex;
gap:6px
}
.preferences select {
font-size:12px;
border:1px solid var(--border);
border-radius:8px;
background:transparent;
padding:8px 6px;
max-width:114px
}
select option {
background:var(--surface);
color:var(--text)
}
.menu-toggle {
display:none
}
.hero {
display:grid;
grid-template-columns:1.08fr 1fr;
gap:70px;
align-items:center;
padding-block:85px 90px;
min-height:650px
}
.eyebrow {
font-size:12px;
font-weight:700;
letter-spacing:.09em;
color:var(--accent);
display:flex;
align-items:center;
gap:9px;
margin-bottom:22px
}
.dot {
width:7px;
height:7px;
border-radius:50%;
background:var(--accent)
}
.hero h1 {
max-width:640px
}
.lead {
font-size:18px;
line-height:1.9;
max-width:650px;
margin-top:25px
}
.hero .lead {
max-width:520px
}
.actions {
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px
}
.button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:18px;
min-height:50px;
padding:12px 23px;
border-radius:9px;
font-size:14px;
font-weight:700;
line-height:1.5;
border:1px solid transparent;
transition:transform .18s,background .18s
}
.button:hover {
transform:translateY(-2px)
}
.primary {
background:var(--accent);
color:var(--bg)
}
.secondary {
border-color:var(--border);
background:transparent;
color:var(--text)
}
.secondary:hover {
background:var(--surface)
}
.hero-footnote {
display:flex;
align-items:center;
gap:13px;
font-size:12px;
margin-top:38px
}
.small-line {
height:1px;
width:27px;
background:var(--muted)
}
.studio-art {
position:relative;
aspect-ratio:1;
max-height:470px;
direction:ltr;
border-radius:50%;
background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 14%,var(--bg)),var(--bg) 68%);
isolation:isolate
}
.art-grid {
position:absolute;
inset:5%;
background-image:radial-gradient(var(--border) 1px,transparent 1px);
background-size:19px 19px;
mask-image:radial-gradient(circle,#000,transparent 72%)
}
.orbit {
position:absolute;
inset:10%;
border:1px solid var(--border);
border-radius:50%;
transform:rotate(-25deg) scaleY(.78)
}
.orbit-two {
inset:0;
transform:rotate(40deg) scaleY(.8)
}
.studio-tile {
position:absolute;
inset:20%;
background:var(--accent);
color:var(--bg);
border-radius:35px;
transform:rotate(-9deg);
box-shadow:16px 22px 0 color-mix(in srgb,var(--accent) 12%,transparent),0 25px 60px #0002;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
padding:26px 10px
}
.tile-label,.tile-baseline {
font-size:10px;
letter-spacing:.17em;
line-height:1.2
}
.tile-logo {
font:bold clamp(70px,10vw,145px) Cabin,Arial,sans-serif;
line-height:1
}
.tile-logo span {
color:#e8b286
}
.floating-label {
position:absolute;
display:flex;
align-items:center;
gap:10px;
padding:10px 16px;
border:1px solid var(--border);
border-radius:10px;
box-shadow:0 10px 20px #00000008;
background:var(--surface);
font-size:12px;
font-weight:700;
white-space:nowrap
}
.floating-label>span {
font-size:22px;
color:var(--accent)
}
.label-0 {
top:6%;
left:3%;
transform:rotate(-5deg)
}
.label-1 {
top:21%;
right:-4%;
transform:rotate(7deg)
}
.label-2 {
bottom:19%;
left:-5%;
transform:rotate(-5deg)
}
.label-3 {
bottom:9%;
right:4%;
transform:rotate(6deg)
}
.art-spark {
position:absolute;
right:7%;
top:0;
font-size:60px;
line-height:1;
color:#c78556
}
.art-caption {
position:absolute;
bottom:-12px;
left:50%;
transform:translateX(-50%);
font-size:9px;
letter-spacing:.18em;
color:var(--muted);
white-space:nowrap
}
.category-section {
padding-block:64px 75px;
border-block:1px solid var(--border);
background:color-mix(in srgb,var(--surface) 40%,var(--bg))
}
.section-heading {
display:flex;
justify-content:space-between;
gap:40px;
align-items:end;
margin-bottom:32px
}
.section-heading p:not(.eyebrow) {
max-width:470px;
font-size:14px
}
.section-heading .eyebrow {
margin-bottom:12px
}
.category-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px
}
.category-card {
padding:25px 23px 27px;
border:1px solid var(--border);
border-radius:14px;
background:var(--bg);
transition:transform .2s,border-color .2s
}
.category-card:hover {
transform:translateY(-5px);
border-color:var(--accent)
}
.category-top {
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:28px
}
.category-symbol {
font:36px Arial;
color:var(--accent)
}
.section-number {
font:12px monospace;
color:var(--muted)
}
.category-card h3 {
font-size:16px;
display:flex;
justify-content:space-between;
gap:8px
}
.category-card p {
font-size:13px;
margin-top:12px;
line-height:1.9
}
.studio-note {
display:grid;
grid-template-columns:1fr 2fr;
gap:50px;
padding-block:85px
}
.studio-note p:not(.eyebrow) {
margin-block:20px;
max-width:640px
}
.text-link {
font-weight:700;
font-size:14px;
color:var(--accent);
text-underline-offset:5px
}
.text-link:hover {
text-decoration:underline
}
.contact-banner {
border-radius:16px;
border:1px solid var(--border);
padding:40px 45px;
display:flex;
align-items:center;
justify-content:space-between;
gap:35px;
background:var(--surface);
margin-bottom:80px
}
.contact-banner .eyebrow {
margin-bottom:12px
}
.contact-banner h2 {
font-size:clamp(1.5rem,2.6vw,2rem)
}
.contact-banner p:not(.eyebrow) {
font-size:14px;
margin-top:14px
}
.contact-banner .button {
flex:none
}
.site-footer {
border-top:1px solid var(--border);
padding-top:45px
}
.footer-top {
display:flex;
justify-content:space-between;
gap:40px;
padding-bottom:35px
}
.footer-top p {
font-size:13px;
max-width:330px;
margin-top:10px
}
.footer-links {
display:flex;
align-items:start;
justify-content:end;
flex-wrap:wrap;
gap:15px 25px;
max-width:560px;
font-size:13px
}
.footer-links a:hover {
color:var(--accent);
text-decoration:underline
}
.footer-bottom {
border-top:1px solid var(--border);
display:flex;
justify-content:space-between;
gap:20px;
padding-block:20px;
font-size:11px;
color:var(--muted)
}
.page-intro {
padding-block:70px 50px
}
.page-intro h1 {
max-width:850px;
font-size:clamp(2.4rem,4.3vw,4rem)
}
html[lang=en] .page-intro h1 {
font-size:clamp(2.7rem,5vw,4.5rem)
}
.page-intro .date {
font-size:12px;
margin-top:24px
}
.about-layout {
display:grid;
grid-template-columns:1fr 1.65fr;
gap:65px;
margin-bottom:70px
}
.studio-sign {
align-self:start;
min-height:330px;
display:flex;
flex-direction:column;
justify-content:center;
background:var(--accent);
color:var(--bg);
padding:36px;
border-radius:15px
}
.studio-sign>span {
font:bold 65px Cabin,Arial,sans-serif;
letter-spacing:-3px
}
.studio-sign p {
font-size:14px;
color:inherit;
opacity:.8
}
.sign-dot {
font:16px Arial;
vertical-align:top
}
.prose-section {
display:flex;
gap:23px;
padding-block:26px;
border-top:1px solid var(--border);
scroll-margin-top:25px
}
.prose-section h2 {
font-size:22px;
margin-bottom:15px
}
.prose-section p {
font-size:15px;
line-height:2;
max-width:750px
}
.prose-section p+p {
margin-top:15px
}
.prose-section>.section-number {
padding-top:8px
}
.founder {
margin-top:20px;
padding:25px;
border:1px solid var(--border);
border-radius:12px
}
.founder .eyebrow {
margin-bottom:8px
}
.founder h2 {
font-size:20px
}
.faq-list {
max-width:900px;
margin-bottom:70px
}
.faq-list details {
border-bottom:1px solid var(--border);
padding-block:24px
}
.faq-list summary {
display:flex;
justify-content:space-between;
gap:25px;
cursor:pointer;
font-size:19px;
font-weight:700;
list-style:none
}
.faq-list summary::-webkit-details-marker {
display:none
}
.faq-list details[open] summary span {
transform:rotate(45deg)
}
.faq-list details p {
padding-top:18px;
max-width:760px
}
.contact-layout {
display:grid;
grid-template-columns:1fr 1.25fr;
gap:65px;
margin-bottom:100px
}
.email-card {
align-self:start;
padding:36px;
background:var(--surface);
border:1px solid var(--border);
border-radius:16px
}
.email-card h2 {
font-size:23px;
margin-block:22px 15px
}
.email-address {
display:inline-block;
font-size:clamp(20px,2.3vw,30px);
font-family:Cabin,Arial,sans-serif;
color:var(--accent);
direction:ltr;
overflow-wrap:anywhere
}
.email-card p {
font-size:13px;
margin-top:20px
}
.legal-layout {
display:grid;
grid-template-columns:230px 1fr;
gap:75px;
margin-bottom:85px
}
.legal-layout aside nav {
position:sticky;
top:30px;
display:flex;
flex-direction:column;
gap:10px;
font-size:13px
}
.legal-layout nav a:hover {
text-decoration:underline;
color:var(--accent)
}
.legal-layout .eyebrow {
margin-bottom:10px
}
.catalogue {
margin-bottom:80px;
min-height:400px
}
.search-field {
display:flex;
align-items:center;
gap:18px;
padding:10px;
background:var(--surface);
border:1px solid var(--border);
border-radius:12px
}
.search-field>span[aria-hidden] {
font-size:30px;
padding-inline-start:14px
}
.search-field input {
border:0;
background:none;
outline:none;
min-width:0;
flex:1;
padding:12px 0;
font-size:16px
}
.search-field:focus-within {
outline:2px solid var(--accent);
outline-offset:3px
}
.filters {
display:flex;
gap:22px;
align-items:end;
margin-block:24px 32px
}
.filters label {
display:flex;
flex-direction:column;
gap:6px;
font-size:12px;
min-width:200px
}
.filters select {
background:transparent;
border:1px solid var(--border);
border-radius:8px;
padding:10px 12px;
font-size:14px
}
.text-button {
background:none;
text-decoration:underline;
text-underline-offset:4px;
font-size:13px;
padding:12px;
color:var(--accent)
}
.results-count {
font-size:13px;
margin-bottom:20px
}
.empty-state {
text-align:center;
padding:55px 25px;
border:1px dashed var(--border);
border-radius:15px
}
.empty-symbol {
font-size:50px;
line-height:1;
color:var(--accent)
}
.empty-state h2 {
font-size:24px;
margin-block:15px
}
.empty-state p {
max-width:540px;
margin:auto;
font-size:14px
}
.project-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px
}
.project-card {
border:1px solid var(--border);
border-radius:14px;
background:var(--surface);
overflow:hidden
}
.project-art {
height:180px;
display:grid;
place-items:center;
background:color-mix(in srgb,var(--accent) 12%,var(--bg));
font-size:70px;
color:var(--accent)
}
.project-image {
height:180px;
width:100%;
object-fit:cover
}
.project-content {
padding:25px
}
.card-meta {
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-bottom:15px;
font-size:11px;
color:var(--muted)
}
.status {
display:inline-block;
border:1px solid var(--border);
padding:3px 10px;
border-radius:20px;
font-size:11px
}
.project-content p {
font-size:14px;
margin-block:14px 20px
}
.section-space {
padding-block:65px
}
.page-results {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px
}
.page-results article {
border:1px solid var(--border);
border-radius:12px;
background:var(--surface)
}
.page-results a {
display:block;
padding:25px
}
.page-results p {
font-size:14px;
margin-top:12px
}
.results-heading {
font-size:23px;
margin-block:30px 20px
}
.project-facts {
display:flex;
flex-wrap:wrap;
gap:20px;
align-items:center;
margin-top:20px;
font-size:13px
}
.project-detail {
margin-bottom:80px
}
.project-detail>p {
max-width:780px;
margin-block:20px
}
.detail-image {
max-height:500px;
border-radius:14px;
object-fit:contain
}
.load-error {
border:1px solid var(--border);
padding:18px;
margin-top:20px
}
noscript {
display:block;
text-align:center;
font-size:13px;
padding:14px
}
@media(min-width:1500px) {
.hero {
padding-block:105px
}
}
@media(max-width:1100px) {
.container {
width:calc(100% - 48px)
}
.header-inner {
gap:20px
}
#main-nav {
gap:16px;
font-size:12px
}
.wordmark {
font-size:24px
}
.preferences select {
max-width:95px
}
.hero {
gap:45px
}
.floating-label {
font-size:10px;
padding:8px 11px
}
.category-grid {
gap:12px
}
.category-card {
padding:20px 16px
}
.category-card h3 {
font-size:14px
}
}
@media(max-width:850px) {
.header-inner {
flex-wrap:wrap;
gap:15px;
padding-block:18px;
min-height:80px
}
.brand {
margin-inline-end:auto
}
.menu-toggle {
display:block;
border:1px solid var(--border);
background:none;
border-radius:8px;
padding:7px 12px;
font-size:13px
}
#main-nav {
display:none;
order:4;
flex-basis:100%;
margin:0;
flex-wrap:wrap;
justify-content:center
}
#main-nav.is-open {
display:flex
}
#main-nav a {
padding:12px
}
#main-nav a[aria-current=page]::after {
bottom:4px
}
.hero {
grid-template-columns:1fr 1fr;
gap:30px;
min-height:0;
padding-block:60px
}
.hero h1 {
font-size:3rem
}
.hero .lead {
font-size:15px
}
.studio-tile {
padding-block:20px;
border-radius:25px
}
.tile-label,.tile-baseline {
font-size:7px
}
.tile-logo {
font-size:90px
}
.floating-label {
font-size:9px;
gap:6px
}
.floating-label>span {
font-size:17px
}
.category-grid {
grid-template-columns:repeat(2,1fr)
}
.category-card h3 {
font-size:18px
}
.section-heading {
align-items:start
}
.section-heading>p {
max-width:340px
}
.about-layout,.contact-layout {
gap:30px;
grid-template-columns:1fr 1.3fr
}
.studio-sign>span {
font-size:45px
}
.legal-layout {
gap:35px;
grid-template-columns:170px 1fr
}
.project-grid {
grid-template-columns:repeat(2,1fr)
}
}
@media(max-width:600px) {
.container {
width:calc(100% - 36px)
}
.header-inner {
gap:10px
}
.wordmark {
font-size:23px
}
.brand-mark {
width:31px;
height:31px;
font-size:26px
}
.preferences {
gap:4px
}
.preferences select {
max-width:80px;
font-size:11px;
padding:6px 3px
}
.menu-toggle {
font-size:0;
padding:9px
}
.menu-toggle span {
font-size:18px;
line-height:1
}
.hero {
grid-template-columns:1fr;
padding-block:40px 45px;
gap:35px
}
.hero h1,html[lang=en] .hero h1 {
font-size:3.25rem;
max-width:480px
}
.hero .lead {
font-size:16px
}
.hero-footnote {
margin-top:25px
}
.studio-art {
width:84%;
max-width:360px;
margin:0 auto 25px
}
.tile-logo {
font-size:105px
}
.floating-label {
font-size:11px;
padding:8px 12px
}
.tile-label,.tile-baseline {
font-size:8px
}
.eyebrow {
margin-bottom:18px
}
.actions {
gap:10px
}
.button {
padding:12px 17px;
font-size:13px
}
.section-heading {
display:block;
margin-bottom:24px
}
.section-heading>p {
margin-top:18px
}
.category-section {
padding-block:40px
}
.category-grid {
gap:12px
}
.category-card {
padding:20px 15px
}
.category-top {
margin-bottom:22px
}
.category-card h3 {
font-size:15px
}
.category-card p {
font-size:12px
}
.category-symbol {
font-size:29px
}
.studio-note {
grid-template-columns:1fr;
gap:5px;
padding-block:45px
}
.contact-banner {
padding:28px;
display:block;
margin-bottom:45px
}
.contact-banner .button {
margin-top:25px
}
.footer-top {
display:block;
padding-bottom:25px
}
.footer-links {
justify-content:start;
margin-top:25px;
gap:12px 20px
}
.footer-bottom {
display:block
}
.footer-bottom span {
display:block
}
.page-intro {
padding-block:40px 30px
}
.page-intro h1,html[lang=en] .page-intro h1 {
font-size:2.6rem
}
.lead {
font-size:16px
}
.about-layout,.contact-layout,.legal-layout {
grid-template-columns:1fr;
gap:28px;
margin-bottom:45px
}
.studio-sign {
min-height:230px
}
.studio-sign>span {
font-size:65px
}
.legal-layout aside nav {
position:static;
padding:20px;
border:1px solid var(--border);
border-radius:12px
}
.prose-section {
gap:15px
}
.prose-section h2 {
font-size:21px
}
.prose-section p {
font-size:14px
}
.faq-list summary {
font-size:17px
}
.faq-list details p {
font-size:14px
}
.faq-list {
margin-bottom:45px
}
.email-card {
padding:28px
}
.search-field {
gap:10px;
padding:7px
}
.search-field>span[aria-hidden] {
padding-inline-start:4px
}
.search-field input {
font-size:14px
}
.search-field .button {
padding:12px
}
.filters {
flex-wrap:wrap;
gap:12px
}
.filters label {
min-width:0;
flex:1 1 42%
}
.filters select {
max-width:100%;
font-size:12px
}
.text-button {
padding-inline:0
}
.project-grid,.page-results {
grid-template-columns:1fr
}
.section-space {
padding-block:40px
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*::before,*::after {
transition:none!important;
animation:none!important
}
.loader-mark,.loader-dots i {animation:none}
}
html:not([data-interactive]) .preferences,html:not([data-interactive]) .menu-toggle {
display:none
}
html:not([data-interactive]) #main-nav {
display:flex;
flex-wrap:wrap
}
.hero-copy,.studio-art {
min-width:0
}
/* Keep the studio blue exact; use separate text colors for readable contrast. */
:root {
--accent-ink:var(--accent);
--on-accent:var(--bg)
}
.eyebrow,.text-link,.text-button,.category-symbol,.floating-label>span,.email-address,.empty-symbol,#main-nav a[aria-current=page] {
color:var(--accent-ink)
}
.primary {
color:var(--on-accent)
}
.brand-mark,.studio-tile,.studio-sign {
color:var(--on-accent)
}
.studio-tile .tile-logo span,.art-spark {
color:var(--accent-ink)
}
.studio-tile .tile-logo span {
color:inherit
}
.brand-mark,.tile-logo {
color:#fff
}
.studio-logo {
display:block;
width:138px;
height:auto;
aspect-ratio:2.6;
background:transparent;
object-fit:contain;
flex:none
}
.hero-logo {
width:95%;
height:auto;
aspect-ratio:2.6;
margin-block:auto
}
.studio-sign .about-logo {
width:100%;
height:auto;
aspect-ratio:2.6;
margin-bottom:24px
}
@media(max-width:600px) {
.brand .studio-logo {
width:106px
}
}
/* Preserve the black artwork; the SVG variants change blue paths only. */
.studio-sign .about-logo,.hero-logo { padding:8px; }
html:not([data-theme="light"]):not([data-theme="frost"]):not([data-theme="ivory"]):not([data-theme="silver"]):not([data-theme="clay"]) .brand .studio-logo { padding:3px; }