/* A warm paper backdrop carries the studio identity from the first ripple onward. */
:root{--cream:#f7f3eb;--copper:#a2683f}
body{background:var(--cream)}
.intro{background:radial-gradient(circle at 50% 47%,#fffdfa 0,#f7f3eb 52%,#ece5d8 100%)}
.intro::after{background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(44,50,42,.012) 4px 5px)}
.intro-logo{filter:brightness(0) invert(26%);mix-blend-mode:normal}
.intro-ripple span{border:2px solid #fff;box-shadow:0 0 0 1px rgba(42,70,61,.14),0 0 24px rgba(255,255,255,.9),0 0 60px rgba(86,120,108,.18)}
.site-header{background:var(--cream);color:var(--ink);border-bottom-color:rgba(7,27,27,.16)}
.site-header{height:108px}
.wordmark{display:inline-flex;align-items:center}
.wordmark img{width:100px;height:100px;object-fit:contain;filter:brightness(0) invert(26%)}
.nav-contact{border:0;padding:0}
.hero{min-height:min(830px,calc(100svh - 108px));background:radial-gradient(ellipse at 76% 42%,#fffdf8 0,#f7f3eb 48%,#eee7d9 100%);color:var(--ink)}
.hero::before{background-image:radial-gradient(rgba(33,62,55,.12) .7px,transparent .7px)}
.hero h1 em,.period{color:var(--copper)}
.hero-lead{color:#50625a}
.primary-button{background:var(--copper);color:#fff}
.primary-button:hover{background:#8f5731}
.hero-logo-wrap{width:min(34vw,480px);right:5%;filter:brightness(0) invert(26%);mix-blend-mode:normal;opacity:.72}
.games-section{background:#f3eee5}
.studio-section{background:#fbf8f1;color:var(--ink);border-top:1px solid var(--line)}
.studio-section h2 em{color:#a76d42}
.studio-section>p:not(.eyebrow){color:#50625a}
.studio-section>a{color:#8f5731}
footer{background:#eee7db;color:var(--ink);border-top:1px solid var(--line)}
footer span,footer small{color:#607269}
.footer-wordmark{display:block;position:relative;flex:none;width:170px;height:66px;overflow:hidden}
.footer-wordmark img{position:absolute;max-width:none;width:248px;height:248px;left:-41px;top:-153px;filter:brightness(0) invert(26%)}
@media(max-width:800px){.hero-logo-wrap{width:min(40vw,300px);right:3%;top:72%;opacity:.22}}
@media(max-width:600px){.hero-logo-wrap{width:45vw;right:-4%;top:74%;opacity:.18}}
.spherenoid-art{background:linear-gradient(180deg,#fbd0bf 0%,#edb1ae 50%,#dc90a3 100%)}
.spherenoid-art .spherenoid-emblem{position:absolute;left:50%;top:16%;width:52%;height:auto;padding:0;object-fit:contain;transform:translateX(-50%)}
.spherenoid-art .spherenoid-title{position:absolute;left:50%;top:25%;width:54%;height:auto;padding:0;object-fit:contain;transform:translateX(-50%)}
.spherenoid-art:hover .spherenoid-emblem,.spherenoid-art:hover .spherenoid-title{transform:translateX(-50%) scale(1.04)}
.spherenoid-art .spherenoid-mobile-art{display:none;padding:0}
.games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.game-card .game-image{aspect-ratio:4/3;height:auto;min-height:0}
.game-card .game-image>img:not(.spherenoid-emblem):not(.spherenoid-title){width:100%;height:100%;object-fit:cover}
@media(max-width:680px){.games-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem}.game-card{margin-bottom:0;scroll-snap-align:start}}
.contact-section{padding:7.5rem 8%;background:#f3eee5;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,7vw,7rem)}
.contact-copy h2{font-family:Unbounded,sans-serif;font-size:clamp(2.8rem,5vw,5.4rem);line-height:1.08;letter-spacing:-.072em;font-weight:600;margin:0}
.contact-copy h2 em{font-family:Georgia,serif;font-weight:400;color:#9b7659}
.contact-copy>p:last-child{max-width:410px;color:#50625a;line-height:1.75;margin-top:2rem}
.contact-form{background:#fffcf5;border:1px solid var(--line);padding:2.2rem;display:flex;flex-direction:column;align-items:stretch}
.contact-form label{font-weight:700;font-size:.76rem;letter-spacing:.07em;margin:0 0 .55rem}
.contact-form input,.contact-form textarea{width:100%;border:1px solid #c9c7bd;border-radius:0;background:#fffefa;color:var(--ink);font:inherit;font-size:.95rem;padding:.85rem 1rem;margin:0 0 1.35rem}
.contact-form textarea{resize:none}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid #a76d42;outline-offset:1px}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.contact-form button{display:flex;justify-content:center;text-align:center;border:0;background:var(--copper);color:#fff;padding:1rem 1.2rem;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.contact-form button:hover:not(:disabled){background:#8f5731}
.contact-form button:disabled{opacity:.65;cursor:wait}
.contact-status{color:#63746c;font-size:.78rem;line-height:1.5;margin:.9rem 0 0}
@media(max-width:800px){.contact-section{grid-template-columns:1fr;padding:5rem 6%}.contact-form{padding:1.6rem}}
@media(max-width:800px){.site-header{height:84px}.wordmark img{width:76px;height:76px}}

/* Editorial display type echoes the carved serif lettering in the studio mark. */
.hero h1,.section-heading h2,.studio-section h2,.contact-copy h2,.game-copy h3{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.045em;line-height:1.04}
.hero h1 em,.section-heading h2 em,.studio-section h2 em,.contact-copy h2 em{font-family:inherit;font-style:italic;font-weight:400;letter-spacing:-.045em}
.hero h1{font-size:clamp(3.8rem,7vw,7.2rem)}
.section-heading h2,.studio-section h2,.contact-copy h2{font-size:clamp(3.2rem,5.8vw,6rem)}
.game-copy h3{font-size:clamp(1.85rem,2.3vw,2.7rem);letter-spacing:-.035em;line-height:1.1}
@media(max-width:600px){.hero h1{font-size:clamp(3.25rem,13vw,5rem)}.section-heading h2,.studio-section h2,.contact-copy h2{font-size:clamp(3rem,10vw,4.4rem)}}

.contact-form #contactEmail[aria-invalid="true"]{border-color:#a33f43;margin-bottom:.35rem}
.contact-field-error{color:#a33f43;font-size:.78rem;margin:0 0 1rem;line-height:1.4}
.contact-field-error[hidden]{display:none}

.studio-links{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2rem}
.studio-links a{font-weight:700;font-size:.83rem;color:#8f5731;border-bottom:1px solid currentColor;padding-bottom:.4rem}
.studio-links a:hover{color:#ab754d}

.support-section{padding:6rem 8%;background:#fbf8f1;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:clamp(2rem,7vw,7rem)}
.support-section h2{font-family:Fraunces,Georgia,serif;font-size:clamp(3.2rem,5.8vw,6rem);font-weight:600;letter-spacing:-.045em;line-height:1.04;margin:0}
.support-section h2 em{color:#a76d42;font-weight:400}
.support-copy p{max-width:380px;color:#50625a;line-height:1.75;margin:0 0 2rem}
.support-link{display:inline-flex;align-items:center;gap:.6rem;color:#8f5731;border-bottom:1px solid currentColor;padding-bottom:.4rem;font-size:.85rem;font-weight:700}
.support-link:hover{color:#ab754d}
@media(max-width:800px){.support-section{grid-template-columns:1fr;padding:5rem 6%;gap:1.5rem}}
@media(max-width:600px){.support-section{padding:5rem 5%}.support-section h2{font-size:clamp(2.55rem,9.4vw,4.4rem)}.site-header nav{gap:.5rem;font-size:.76rem}}

/* Let the page read naturally on phones, with full-width cards and usable navigation. */
@media(max-width:680px){
  .games-grid{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;scroll-snap-type:none;padding-bottom:0;gap:1.25rem}
  .game-card{scroll-snap-align:none}
  .game-card .game-image{aspect-ratio:4/3}
  .game-copy{padding:1.5rem;min-height:0}
  .games-grid{gap:.8rem}
  .game-card{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);margin:0}
  .game-card .game-image{height:100%;min-height:0;aspect-ratio:auto}
  .game-copy{padding:1rem;gap:.7rem}
  .game-number{font-size:.58rem;letter-spacing:.1em}
  .game-copy h3{font-size:clamp(1.3rem,5vw,1.65rem);margin:.4rem 0 .35rem}
  .game-copy p{font-size:.78rem;line-height:1.4}
  .game-copy>a{margin-top:0;font-size:.78rem}
  .spherenoid-art .spherenoid-emblem,.spherenoid-art .spherenoid-title{display:none}
  .game-card .game-image.spherenoid-art > img.spherenoid-mobile-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
}
@media(max-width:600px){
  .site-header{height:auto;min-height:112px;padding:0.4rem 5% 0.8rem;flex-wrap:wrap;justify-content:center;gap:0 1rem}
  .wordmark{margin-inline:auto}
  .wordmark img{width:66px;height:66px}
  .site-header nav{width:100%;justify-content:space-between;gap:.75rem;font-size:.82rem}
  .nav-contact{display:inline}
  .hero{min-height:0;padding:5rem 6% 5.5rem}
  .hero-content{width:100%}
  .hero h1{font-size:clamp(2.45rem,10.6vw,4rem);overflow-wrap:anywhere}
  .hero-lead{margin:1.5rem 0 1.8rem}
  .hero-logo-wrap{display:none}
  .games-section{padding:4.5rem 5% 5rem}
  .section-heading{margin-bottom:2rem}
  .section-heading h2,.studio-section h2,.contact-copy h2{font-size:clamp(2.55rem,9.4vw,4.4rem);overflow-wrap:anywhere}
  .studio-section{min-height:0;padding:5rem 6%}
  .contact-section{padding:5rem 5%;gap:2rem}
  .contact-copy>p:last-child{margin-top:1.25rem}
  .contact-form{padding:1.25rem}
  footer{padding:2.5rem 5%;flex-direction:column;align-items:center;text-align:center;gap:.75rem}
  footer small{width:auto}
}
@media(max-width:380px){
  .eyebrow{font-size:.62rem;letter-spacing:.16em}
  .hero h1{font-size:clamp(2.3rem,10.5vw,2.55rem)}
  .section-heading h2,.studio-section h2,.contact-copy h2{font-size:2.5rem}
  .primary-button{width:100%;justify-content:center}
  .game-card{grid-template-columns:96px minmax(0,1fr)}
  .game-copy{padding:.8rem}
  .game-copy p{font-size:.75rem;line-height:1.35}
}