* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Pixel-art backdrop: tiled pixel stars over a banded sky, with a stepped sun and mountains on the horizon. */
body { min-width: 320px; margin: 0; background-color: var(--color-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' shape-rendering='crispEdges'%3E%3Cg fill='%23eef0f4' fill-opacity='.55'%3E%3Crect x='12' y='20' width='2' height='2'/%3E%3Crect x='70' y='8' width='2' height='2'/%3E%3Crect x='130' y='40' width='2' height='2'/%3E%3Crect x='40' y='96' width='2' height='2'/%3E%3Crect x='100' y='122' width='2' height='2'/%3E%3Crect x='150' y='142' width='2' height='2'/%3E%3Crect x='20' y='150' width='2' height='2'/%3E%3Crect x='88' y='66' width='2' height='2'/%3E%3Crect x='30' y='52' width='2' height='8'/%3E%3Crect x='27' y='55' width='8' height='2'/%3E%3C/g%3E%3Cg fill='%235b80ff' fill-opacity='.7'%3E%3Crect x='50' y='30' width='2' height='2'/%3E%3Crect x='140' y='90' width='2' height='2'/%3E%3Crect x='10' y='112' width='2' height='2'/%3E%3Crect x='120' y='66' width='2' height='8'/%3E%3Crect x='117' y='69' width='8' height='2'/%3E%3C/g%3E%3Cg fill='%23ff3d4a' fill-opacity='.7'%3E%3Crect x='114' y='14' width='2' height='2'/%3E%3Crect x='60' y='140' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #0e1014 0 45%, #10132a 45% 60%, #131838 60% 72%, #181d48 72% 82%, #241f4a 82% 90%, #3a1a2c 90% 100%); background-attachment: fixed; background-size: 320px 320px, 100% 100%; color: var(--color-paper); font-family: var(--font-body); font-size: 1.25rem; line-height: 1.2; letter-spacing: 0.01em; }
body::before { position: fixed; z-index: -1; right: 0; bottom: 0; left: 0; height: 30vh; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' shape-rendering='crispEdges'%3E%3Cpath fill='%2312151d' d='M0 120V100H24V92H40V84H56V92H72V100H96V94H112V86H128V78H144V86H160V96H184V104H208V96H224V88H240V80H256V88H272V96H296V102H320V120Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' shape-rendering='crispEdges'%3E%3Cpath fill='%231b2f8a' fill-opacity='.45' d='M0 120V80H16V72H32V64H48V56H64V48H80V56H96V64H112V72H128V64H144V56H160V44H176V36H192V44H208V52H224V64H240V72H256V64H272V58H288V66H304V74H320V120Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' shape-rendering='crispEdges'%3E%3Cg fill='%23ff3d4a'%3E%3Crect x='20' y='0' width='24' height='4'/%3E%3Crect x='14' y='4' width='36' height='4'/%3E%3Crect x='8' y='8' width='48' height='4'/%3E%3Crect x='6' y='12' width='52' height='4'/%3E%3Crect x='4' y='16' width='56' height='4'/%3E%3Crect x='2' y='20' width='60' height='4'/%3E%3Crect x='0' y='24' width='64' height='8'/%3E%3C/g%3E%3Cg fill='%23c8151f'%3E%3Crect x='0' y='32' width='64' height='3'/%3E%3Crect x='0' y='36' width='64' height='3'/%3E%3Crect x='2' y='40' width='60' height='3'/%3E%3Crect x='4' y='44' width='56' height='2'/%3E%3Crect x='6' y='48' width='52' height='2'/%3E%3Crect x='8' y='52' width='48' height='2'/%3E%3Crect x='14' y='56' width='36' height='2'/%3E%3Crect x='20' y='60' width='24' height='1'/%3E%3C/g%3E%3C/svg%3E"); background-position: left bottom, left bottom, center 40%; background-repeat: repeat-x, repeat-x, no-repeat; background-size: auto 60%, auto 85%, auto 55%; content: ""; opacity: 0.85; pointer-events: none; }
body, button, input, textarea { font-family: var(--font-body); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p a { font-weight: 700; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; line-height: 0.98; }
h1 em, h2 em { color: var(--color-accent); font-weight: 400; }
.pixel-heading { font-family: var(--font-display); font-weight: 400; }
.skip-link { position: fixed; z-index: 20; top: 0.75rem; left: 0.75rem; padding: 0.65rem 1rem; transform: translateY(-160%); background: var(--color-accent); color: var(--color-ink); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { display: flex; align-items: center; gap: 0.65rem; margin-bottom: var(--space-3); color: var(--color-blue); font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.eyebrow__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 1rem var(--color-accent); }
.button { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.75rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius-small); font-size: 0.82rem; font-weight: 700; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.button--light { background: var(--color-accent-deep); color: #fff; }
.button--light:hover { background: var(--color-accent); color: #fff; }
.button--outline { border-color: rgba(238, 240, 244, 0.5); color: var(--color-paper); }
.button--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.text-link { display: inline-flex; align-items: center; gap: 1rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--color-accent); color: var(--color-paper); font-size: 0.84rem; }
.text-link span { color: var(--color-accent); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr); gap: clamp(3rem, 8vw, 9rem); }
.home-intro { max-width: 112rem; margin: 0 auto; padding: var(--space-7) clamp(1.25rem, 3vw, 3rem); }
.intro-copy h2, .hire-panel h2, .workshop-details h2, .game-detail-body h2 { max-width: 13ch; margin-bottom: var(--space-3); font-size: clamp(1.5rem, 3.4vw, 2.9rem); line-height: 1.25; overflow-wrap: break-word; }
.intro-copy > p:not(.eyebrow), .hire-panel p, .workshop-details p { max-width: 38rem; color: var(--color-muted); }
/* 8-bit look: stepped pixel corners and a hard offset shadow. */
.intro-copy, .hire-panel { border: 3px solid #c3cada; clip-path: polygon(0 1.125rem, 0.375rem 1.125rem, 0.375rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.375rem, 1.125rem 0.375rem, 1.125rem 0, calc(100% - 1.125rem) 0, calc(100% - 1.125rem) 0.375rem, calc(100% - 0.75rem) 0.375rem, calc(100% - 0.75rem) 0.75rem, calc(100% - 0.375rem) 0.75rem, calc(100% - 0.375rem) 1.125rem, 100% 1.125rem, 100% calc(100% - 1.125rem), calc(100% - 0.375rem) calc(100% - 1.125rem), calc(100% - 0.375rem) calc(100% - 0.75rem), calc(100% - 0.75rem) calc(100% - 0.75rem), calc(100% - 0.75rem) calc(100% - 0.375rem), calc(100% - 1.125rem) calc(100% - 0.375rem), calc(100% - 1.125rem) 100%, 1.125rem 100%, 1.125rem calc(100% - 0.375rem), 0.75rem calc(100% - 0.375rem), 0.75rem calc(100% - 0.75rem), 0.375rem calc(100% - 0.75rem), 0.375rem calc(100% - 1.125rem), 0 calc(100% - 1.125rem)); filter: drop-shadow(0.5rem 0.5rem 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 0 0.5rem rgba(91, 128, 255, 0.25)); }
.intro-copy { --card-pad: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; padding: var(--card-pad); border: 3px solid #8f97a8; background: radial-gradient(ellipse at 0% 0%, rgba(200, 21, 31, 0.14), transparent 50%), linear-gradient(135deg, #1d2230, #13161c 78%); }
.intro-links { display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--color-line); color: var(--color-paper); font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.linktree-button { display: block; width: 3rem; height: 3rem; overflow: hidden; border-radius: var(--radius-small); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.linktree-button img { width: 100%; height: 100%; }
.linktree-button:hover { box-shadow: 0 0 0 2px var(--color-accent); transform: translateY(-2px); }
.home-intro.content-grid { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.home-intro .intro-copy > p, .home-intro .hire-panel p { max-width: none; }
.intro-copy h2 { max-width: none; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--space-3); padding: 0.9rem var(--card-pad); border-bottom: 1px solid var(--color-line); background: rgba(14, 16, 20, 0.55); font-size: clamp(1.1rem, 2.2vw, 1.7rem); text-align: center; }
.hire-panel { position: relative; align-self: center; overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem); border: 3px solid #8f97a8; background: radial-gradient(ellipse at 100% 100%, rgba(91, 128, 255, 0.16), transparent 50%), linear-gradient(135deg, #1d2230, #13161c 78%); }
.hire-panel__index { color: var(--color-muted); font-family: var(--font-display); font-size: 0.55rem; letter-spacing: 0.06em; }
.hire-panel h2 { margin: var(--space-5) 0 var(--space-2); font-size: clamp(1.4rem, 3vw, 2.6rem); }
.hire-panel p, .hire-panel .button { position: relative; z-index: 1; }
.hire-panel__shape { position: absolute; right: -2rem; bottom: -5rem; width: 15rem; height: 15rem; border: 1px solid rgba(255, 61, 74, 0.35); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(255, 61, 74, 0.04), 0 0 0 4rem rgba(91, 128, 255, 0.05); }
.home-intro .intro-copy, .home-intro .hire-panel { border-color: var(--color-blue); box-shadow: inset 0 4px 0 var(--color-blue-deep); }
.home-intro .intro-copy h2, .home-intro .hire-panel h2 { border-bottom: 3px solid var(--color-blue); background: linear-gradient(90deg, #172343, #1b2f8a, #172343); }
.home-intro .hire-panel { --card-pad: clamp(1.5rem, 4vw, 3rem); align-self: start; }
.home-intro .hire-panel h2 { max-width: none; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--space-3); padding: 0.9rem var(--card-pad); font-size: clamp(1.1rem, 2.2vw, 1.7rem); text-align: center; }
.home-intro .hire-panel .button { border-color: var(--color-blue); }
.home-intro .hire-panel .button:hover { background: var(--color-blue-deep); color: var(--color-paper); }
.home-intro .hire-panel__shape { border-color: var(--color-blue); box-shadow: 0 0 0 2rem rgba(91, 128, 255, 0.08), 0 0 0 4rem rgba(91, 128, 255, 0.04); }
.page-main { width: min(100%, var(--content-width)); min-height: 65vh; margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) var(--page-gutter) var(--space-7); }
.page-heading { max-width: 54rem; margin-bottom: var(--space-6); }
.page-heading h1 { margin-bottom: var(--space-3); font-size: clamp(1.8rem, 4.5vw, 3.8rem); line-height: 1.25; }
.page-heading__lede { max-width: 40rem; margin-bottom: 0; color: var(--color-muted); font-size: 1.35rem; }
.site-footer { display: flex; min-height: 7rem; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem var(--page-gutter); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 0.75rem; }
.site-footer p { margin: 0; }
.site-footer--with-links { flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; width: 100%; order: 1; font-size: 1.1rem; }
.footer-links a { padding: 0.4rem 0; color: var(--color-paper); text-decoration: underline; text-underline-offset: 0.2em; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--color-blue); }
.wordmark { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--color-paper); }
.wordmark__mark { display: grid; width: 2.35rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--color-accent); color: var(--color-accent); font-family: var(--font-display); font-size: 1.1rem; }
.wordmark__text { display: grid; font-size: 0.83rem; font-weight: 800; line-height: 1; }
.wordmark__text span { margin-top: 0.3rem; color: var(--color-muted); font-size: 0.55rem; letter-spacing: 0.2em; }
.wordmark--small .wordmark__mark { width: 1.8rem; font-size: 1.1rem; }
.wordmark__logo { width: auto; height: 3.3rem; }
.site-header--home .wordmark__logo { height: 4.6rem; }
.wordmark--small .wordmark__logo { height: 3.25rem; }
.back-link { color: var(--color-muted); font-size: 0.82rem; }
.back-link:hover { color: var(--color-accent); }
.form-status { color: var(--color-muted); font-size: 0.8rem; }
@media (max-width: 700px) {
  .content-grid, .home-intro.content-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .home-intro { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 0.8rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .footer-links { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}