:root { --ink:#000000; --night:#000000; --panel:#000000; --panel-light:#000000; --moss:#000000; --sage:#a8a8a8; --earth:#8c8c8c; --signal:#e4a15e; --paper:#f2f2f2; --muted:#a6a6a6; --line:rgba(242,242,242,.18); --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--night); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.shell { width:min(calc(100% - 48px),var(--max)); margin:0 auto; }
.skip-link { position:fixed; z-index:30; top:12px; left:12px; padding:10px 14px; color:var(--ink); background:var(--signal); transform:translateY(-150%); transition:transform .2s; }
.skip-link:focus { transform:translateY(0); }
.site-header { position:relative; width:100%; background:#000; }
.header-inner { min-height:108px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:16px; text-transform:uppercase; letter-spacing:.14em; font-size:.92rem; font-weight:700; }
.brand img { width:88px; height:88px; object-fit:contain; object-position:center; background:#000; border-radius:10px; border:1px solid rgba(230,226,212,.22); box-shadow:0 8px 24px rgba(0,0,0,.45); padding:4px; }
.brand b { color:var(--sage); font-weight:500; }
.site-nav { display:flex; align-items:center; gap:28px; color:rgba(230,226,212,.78); text-transform:uppercase; letter-spacing:.13em; font-size:.67rem; }
.site-nav a,.text-link,.footer-inner a { transition:color .2s ease; }
.site-nav a:hover,.text-link:hover,.footer-inner a:hover { color:var(--signal); }
.menu-toggle { display:none; color:var(--paper); border:1px solid var(--line); background:transparent; padding:9px 12px; text-transform:uppercase; letter-spacing:.12em; font-size:.67rem; }
.hero { position:relative; min-height:760px; display:flex; align-items:center; isolation:isolate; overflow:hidden; padding:120px 0 80px; }
.hero-image { position:absolute; inset:0; z-index:-3; background:#000; }
.hero-grid { position:absolute; inset:0; z-index:-2; opacity:0; background:linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),rgba(230,226,212,.15) 100%),linear-gradient(0deg,transparent 0,transparent calc(100% - 1px),rgba(230,226,212,.1) 100%); background-size:25% 100%,100% 25%; pointer-events:none; }
.hero-scanlines { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(230,226,212,.1) 4px); mix-blend-mode:overlay; }
.hero-shell { position:relative; z-index:1; width:min(calc(100% - 48px),var(--max)); margin:0 auto; }
.hero-panel { display:flex; flex-direction:column; align-items:center; gap:clamp(22px,3vw,34px); max-width:920px; margin:0 auto; padding:clamp(28px,5vw,58px); background:#000; border:1px solid rgba(242,242,242,.2); border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.45); text-align:center; }
.hero-panel-logo { display:flex; align-items:center; justify-content:center; background:#000; border-radius:14px; }
.hero-panel-logo img { width:min(42vw,340px); max-width:100%; aspect-ratio:1; object-fit:contain; background:#000; }
.hero-panel-copy { display:flex; flex-direction:column; align-items:center; min-width:0; width:100%; }
.eyebrow,.kicker { color:var(--signal); text-transform:uppercase; letter-spacing:.19em; font-size:.68rem; font-weight:700; }
.eyebrow span { color:var(--sage); margin:0 8px; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:700px; text-align:center; margin:18px 0 16px; color:var(--paper); font-size:clamp(3.6rem,8vw,7.2rem); line-height:.82; letter-spacing:-.09em; text-transform:uppercase; font-weight:800; }
h1 em { color:var(--signal); font-style:normal; font-size:.53em; letter-spacing:-.07em; }
.hero-hook { max-width:540px; text-align:center; margin-bottom:26px; color:var(--paper); font-size:clamp(1.05rem,1.8vw,1.3rem); letter-spacing:-.02em; line-height:1.45; }
.hero-actions,.game-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; gap:12px; min-height:46px; padding:0 18px; border:1px solid var(--line); text-transform:uppercase; letter-spacing:.11em; font-size:.65rem; font-weight:750; transition:background .2s,color .2s,border-color .2s,transform .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:var(--ink); border-color:var(--signal); background:var(--signal); }
.button-primary:hover { border-color:var(--paper); background:var(--paper); }
.button-ghost { color:var(--paper); background:transparent; }
.button-ghost:hover { border-color:var(--signal); color:var(--signal); }
.hero-links { display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; color:rgba(230,226,212,.72); text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; }
.hero-links a:hover { color:var(--signal); }
.hero-readout { display:flex; justify-content:center; gap:24px; margin-top:34px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; }
.hero-readout small { display:block; margin-bottom:4px; color:var(--sage); font-size:.55rem; letter-spacing:.18em; }
.section { padding:132px 0; }
.games-section { background:#000; }
.section-heading { display:grid; grid-template-columns:1fr 2fr; align-items:end; gap:20px; margin-bottom:52px; }
.section-heading .kicker { align-self:start; margin-top:12px; }
h2 { margin-bottom:10px; color:var(--paper); font-size:clamp(2.5rem,5vw,5rem); letter-spacing:-.065em; line-height:.94; }
.section-lede { max-width:440px; margin-bottom:0; color:var(--muted); font-size:.98rem; }
.game-feature { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,1.1fr); min-height:480px; border:1px solid var(--line); background:#000; box-shadow:0 26px 70px rgba(0,0,0,.18); }
.game-art { position:relative; min-height:560px; height:100%; overflow:hidden; background:var(--moss); align-self:stretch; }
.game-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 48%,var(--panel) 100%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 44%); pointer-events:none; }
.game-art img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.game-feature:hover .game-art img { transform:scale(1.03); }
.art-stamp,.art-corner { position:absolute; z-index:1; bottom:20px; color:var(--paper); text-transform:uppercase; letter-spacing:.16em; font-size:.62rem; }
.art-stamp { left:24px; }.art-corner { right:24px; color:var(--signal); }
.game-copy { display:flex; flex-direction:column; justify-content:flex-start; padding:48px 44px 52px; margin-left:-30px; position:relative; z-index:1; }
.status-line { display:flex; align-items:center; gap:9px; margin-bottom:24px; color:var(--signal); text-transform:uppercase; letter-spacing:.15em; font-size:.62rem; font-weight:700; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px rgba(228,161,94,.15); }
.game-copy h3,.game-placeholder h3 { margin-bottom:4px; color:var(--paper); font-size:clamp(2.4rem,4vw,4.3rem); line-height:.92; letter-spacing:-.07em; }
.game-tagline { margin-bottom:16px; color:var(--signal); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:700; }
.game-copy > p:not(.game-tagline) { max-width:440px; color:var(--muted); font-size:.92rem; }
.origin-block { margin:8px 0 4px; max-width:440px; }
.origin-label { margin:18px 0 12px; color:var(--signal); text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; font-weight:700; }
.origin-block p { margin:0 0 14px; color:var(--muted); font-size:.9rem; line-height:1.55; }
.origin-close { margin-top:18px !important; color:var(--paper) !important; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem !important; font-weight:700; }
.game-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0 30px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.game-meta span { display:block; margin-bottom:4px; color:var(--sage); text-transform:uppercase; letter-spacing:.12em; font-size:.53rem; }
.game-meta strong { color:var(--paper); font-size:.78rem; font-weight:550; }
.text-link { color:var(--paper); text-transform:uppercase; letter-spacing:.11em; font-size:.64rem; font-weight:700; }
.game-placeholder { position:relative; display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:200px; margin-top:22px; padding:36px 48px; overflow:hidden; border:1px dashed rgba(242,242,242,.25); background:#000; }
.placeholder-mark { display:flex; gap:6px; opacity:.55; }
.placeholder-mark span { display:block; width:4px; height:42px; background:var(--sage); transform:skew(-18deg); }
.placeholder-mark span:nth-child(2) { height:64px; background:var(--signal); }
.placeholder-mark span:nth-child(3) { height:28px; }
.game-placeholder .kicker { margin-bottom:13px; }
.game-placeholder h3 { font-size:clamp(2rem,3vw,3.2rem); }
.game-placeholder p:not(.kicker) { margin-bottom:0; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; }
.placeholder-note { align-self:end; color:var(--sage); text-transform:uppercase; letter-spacing:.13em; font-size:.58rem; }
.about-section { background:#000; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-grid,.social-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,10vw,150px); }
.about-copy { padding-top:50px; }
.about-copy p { max-width:530px; color:var(--muted); font-size:1.05rem; }
.about-copy strong { color:var(--paper); font-weight:600; }
.pull-quote { margin-top:40px; color:var(--signal)!important; text-transform:uppercase; letter-spacing:.16em; font-size:.67rem!important; font-weight:700; }
.social-section { background:#000; }
.social-links { border-top:1px solid var(--line); }
.social-links a { display:grid; grid-template-columns:42px 1fr 1fr 24px; align-items:center; gap:14px; min-height:68px; border-bottom:1px solid var(--line); transition:padding .2s,background .2s; }
.social-links a:hover { padding:0 12px; background:rgba(242,242,242,.06); }
.social-links span { color:var(--sage); font-size:.6rem; }
.social-links strong { font-size:.94rem; font-weight:600; }
.social-links small { color:var(--muted); font-size:.72rem; }
.social-links b { color:var(--signal); font-weight:400; text-align:right; }
.contact-section { padding:150px 0 160px; background:#000; border-top:1px solid var(--line); }
.contact-inner { text-align:center; }
.contact-inner .kicker { margin-bottom:26px; }
.contact-inner h2 { margin-bottom:18px; font-size:clamp(3.3rem,7vw,7rem); }
.contact-inner > p:not(.kicker):not(.contact-note) { color:var(--muted); }
.contact-email { display:inline-block; margin-top:28px; color:var(--signal); border-bottom:1px solid var(--signal); font-size:clamp(1.3rem,3vw,2.2rem); letter-spacing:-.03em; }
.contact-email span { display:inline-block; margin-left:8px; font-size:.7em; }
.contact-note { margin:24px 0 0; color:rgba(230,226,212,.62); font-size:.7rem; }
.closer { padding:38px 0; background:var(--signal); color:var(--ink); }
.closer p { margin:0; text-align:center; text-transform:uppercase; letter-spacing:.17em; font-size:clamp(.72rem,1.5vw,.94rem); font-weight:800; }
.site-footer { background:var(--ink); color:var(--muted); text-transform:uppercase; letter-spacing:.13em; font-size:.58rem; }
.footer-inner { display:flex; justify-content:space-between; gap:16px; padding:24px 0; }
.footer-inner a { color:var(--paper); }
@media (max-width:900px) {
  .hero-panel { grid-template-columns:1fr; gap:24px; }
  .hero-panel-logo img { max-width:280px; margin:0 auto; }
}
  .hero-content { max-width:100%; }
  .game-copy { padding-right:30px; }
}
@media (max-width:800px) {
  .shell { width:min(calc(100% - 34px),var(--max)); }
  .site-header { background:#000; }
  .header-inner { min-height:96px; }
  .brand img { width:72px; height:72px; object-fit:contain; background:#000; border-radius:8px; padding:3px; }
  .brand { font-size:.78rem; gap:12px; }
  .menu-toggle { display:block; }
  .site-nav { position:absolute; top:96px; left:0; right:0; display:none; padding:10px 17px 18px; background:rgba(0,0,0,.98); border-bottom:1px solid var(--line); }
  .site-nav.is-open { display:grid; gap:0; }
  .site-nav a { padding:14px 0; border-bottom:1px solid var(--line); }
  .hero { min-height:0; padding:100px 0 56px; }
  .hero-shell { width:min(calc(100% - 34px),var(--max)); }
  .hero-panel { padding:24px; border-radius:16px; }
  .hero-readout { gap:14px; margin-top:24px; flex-wrap:wrap; }
  .section { padding:88px 0; }
  .section-heading,.about-grid,.social-grid { grid-template-columns:1fr; gap:24px; }
  .section-heading { margin-bottom:34px; }
  .game-feature { display:block; }
  .game-art { min-height:260px; }
  .game-art::after { background:linear-gradient(0deg,var(--panel),transparent 55%); }
  .game-copy { margin:-38px 0 0; padding:32px 26px 34px; }
  .game-meta { gap:8px; }
  .game-meta strong { font-size:.7rem; }
  .game-placeholder { align-items:flex-start; padding:28px 24px; }
  .placeholder-mark { display:none; }
  .placeholder-note { position:absolute; right:20px; bottom:20px; }
  .about-copy { padding-top:4px; }
  .social-links a { grid-template-columns:34px 1fr 1fr 20px; }
  .contact-section { padding:108px 0 120px; }
  .footer-inner { flex-wrap:wrap; }
}
@media (max-width:460px) {
  h1 { font-size:clamp(3.2rem,16vw,5.2rem); }
  .hero-readout { flex-wrap:wrap; row-gap:12px; }
  .game-meta { grid-template-columns:1fr; gap:12px; }
  .game-meta div { display:flex; justify-content:space-between; gap:12px; }
  .game-meta span { margin:0; }
  .social-links a { grid-template-columns:28px 1fr 20px; }
  .social-links small { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* Unified black hero panel: the logo, studio copy, CTAs, and navigation stay together. */
.site-header,
.hero,
.hero-image,
.hero-panel,
.section,
.about-section,
.games-section,
.social-section,
.contact-section,
.site-footer { background:#000; }

.hero-panel { grid-template-columns:1fr; }
.hero-panel-copy { text-align:center; }
.hero-actions { justify-content:center; }
.hero-links { justify-content:center; }
.menu-toggle { margin-top:2px; }

@media (max-width:800px) {
  .hero-panel-logo img { width:min(62vw,280px); }
  .site-nav { position:static; width:100%; padding:0; background:#000; border:0; }
  .site-nav.is-open { display:flex; flex-direction:column; align-items:center; gap:0; }
  .site-nav a { width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
}