:root {
  color-scheme: dark;
  --night: #07090c;
  --panel: #101319;
  --ink: #edeae5;
  --muted: #a3a8b0;
  --silver: #c5c8cd;
  --gold: #c6aa77;
  --line: rgba(202, 205, 211, .21);
  --display: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; min-width: 320px; background: var(--night); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body, button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--gold); color: var(--night); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 50; padding: 10px 16px; background: var(--ink); color: var(--night); }
.skip-link:focus { top: 12px; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 20; height: 86px; padding: 0 clamp(24px, 4.8vw, 86px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(221, 221, 222, .13); }
.wordmark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: #e2e4e7; }
.wordmark-main { font: 400 24px/1 var(--display); letter-spacing: .19em; padding-left: .19em; }
.wordmark-sub { margin-top: 5px; font: 500 9px/1 var(--sans); letter-spacing: .54em; padding-left: .54em; color: var(--gold); }
.site-nav { display: flex; align-items: center; gap: clamp(26px, 3vw, 54px); }
.site-nav a { position: relative; font-size: 12px; line-height: 1.2; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #e5e4e1; transition: color .25s ease; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -11px; height: 1px; background: var(--gold); transition: right .25s ease; }
.site-nav a:hover { color: var(--gold); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.menu-toggle { display: none; }

.hero { position: relative; min-height: min(920px, 100svh); display: grid; place-items: center; overflow: hidden; background: #000; isolation: isolate; }
.hero-atmosphere { position: absolute; z-index: -1; inset: 0; background: #000; }
.hero-atmosphere::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: radial-gradient(1px 1px at 14% 24%, #fff 80%, transparent), radial-gradient(1px 1px at 65% 15%, #fff 80%, transparent), radial-gradient(1px 1px at 82% 39%, #fff 80%, transparent), radial-gradient(1px 1px at 24% 78%, #fff 80%, transparent), radial-gradient(1px 1px at 92% 82%, #fff 80%, transparent), radial-gradient(1px 1px at 45% 11%, #fff 80%, transparent); background-size: 547px 389px; }
.hero-atmosphere::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 11%; height: 1px; background: linear-gradient(90deg, transparent, rgba(198, 170, 119, .06) 18%, rgba(198, 170, 119, .42) 50%, rgba(198, 170, 119, .06) 82%, transparent); box-shadow: 0 0 30px 5px rgba(198, 170, 119, .045); }
.hero-inner { position: relative; z-index: 1; width: min(100% - 40px, 850px); padding: 100px 0 100px; text-align: center; }
.eyebrow { margin: 0; color: var(--gold); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; }
.hero-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto -38px; }
.eyebrow-line { display: block; width: 28px; height: 1px; background: var(--gold); opacity: .85; }
.hero-logo { width: clamp(310px, 36vw, 430px); height: auto; margin: 0 auto -57px; mix-blend-mode: screen; }
.hero h1 { margin: 0; font: 400 clamp(34px, 4.2vw, 61px)/1.11 var(--display); letter-spacing: -.035em; color: #f4f0eb; }
.hero h1 em { font-weight: 400; color: #d3bd98; }
.hero-deck { max-width: 510px; margin: 25px auto 0; color: #b6b7b9; font-size: 16px; line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 30px; padding: 11px 0; border-bottom: 1px solid var(--gold); color: #e9e5dc; font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: gap .25s ease, color .25s ease; }
.text-link:hover { gap: 37px; color: var(--gold); }
.text-link span { color: var(--gold); font-size: 21px; font-weight: 400; line-height: .7; }
.hero-link { margin-top: 30px; }
.hero-bottom { position: absolute; bottom: 0; left: clamp(24px, 4.8vw, 86px); right: clamp(24px, 4.8vw, 86px); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; height: 65px; border-top: 1px solid rgba(221, 221, 222, .16); color: #92969c; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; }
.hero-bottom span:nth-child(2) { text-align: center; }
.hero-bottom span:nth-child(3) { text-align: right; }
.hero-bottom b { margin-left: 8px; color: var(--gold); font-size: 15px; font-weight: 400; }

.section-wrap { width: min(100% - clamp(40px, 9.6vw, 172px), 1510px); margin-inline: auto; }
.worlds-section { padding-block: clamp(100px, 11vw, 170px) clamp(110px, 11vw, 175px); }
.section-heading { padding-bottom: clamp(42px, 5vw, 72px); }
.section-number { margin-right: 14px; color: #858b93; }
.section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-top: 35px; }
.section-heading h2, .studio-section h2, .contact-section h2 { margin: 0; font: 400 clamp(42px, 5vw, 78px)/1.04 var(--display); letter-spacing: -.04em; }
.section-heading h2 em, .studio-section h2 em, .contact-section h2 em { color: var(--gold); font-weight: 400; }
.section-heading-row > p { max-width: 395px; margin: 0 0 5px; color: var(--muted); font-size: 17px; line-height: 1.72; }
.feature-stack { display: grid; gap: 22px; }
.feature { position: relative; display: grid; grid-template-columns: .94fr 1.06fr; min-height: clamp(540px, 46vw, 690px); overflow: hidden; background: var(--panel); border: 1px solid rgba(202, 205, 211, .12); }
.feature-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(38px, 5vw, 94px); background: linear-gradient(145deg, #171b21, #0c0f14 65%); }
.feature-copy::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, transparent, var(--gold), transparent); opacity: .6; }
.feature .eyebrow, .world-card .eyebrow { display: flex; align-items: center; gap: 15px; color: #d1b88e; white-space: nowrap; }
.feature-index { color: #efede8; font: 400 15px/1 var(--display); letter-spacing: .08em; }
.copy-rule { display: inline-block; width: 28px; height: 1px; background: rgba(198, 170, 119, .6); }
.feature h3 { margin: 36px 0 28px; font: 400 clamp(49px, 5.2vw, 82px)/.99 var(--display); letter-spacing: -.045em; }
.feature h3 em { display: inline-block; font-weight: 400; color: var(--gold); }
.feature-description { max-width: 465px; margin: 0; color: #d1d2d1; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.65; }
.feature-note { margin: 28px 0 0; color: #999da2; font-size: 13px; letter-spacing: .035em; }
.feature-corner { position: absolute; right: clamp(32px, 4vw, 72px); bottom: 32px; color: #a9a08e; font-size: 23px; font-family: var(--display); opacity: .7; }
.feature-image, .world-card-image { position: relative; overflow: hidden; background: #11141a; }
.feature-image::after, .world-card-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 65%, rgba(2, 4, 8, .72) 100%); }
.feature-image img, .world-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.feature:hover .feature-image img, .world-card:hover .world-card-image img { transform: scale(1.035); }
.feature-image-celestium img { object-position: center 39%; }
.feature-image-greywatch img { object-position: center 42%; }
.feature-greywatch { grid-template-columns: 1.06fr .94fr; }
.feature-greywatch .feature-copy { background: linear-gradient(160deg, #1c1918, #0e1013 75%); }
.feature-greywatch .feature-copy::before { left: auto; right: 0; background: linear-gradient(180deg, transparent, #a16c50, transparent); }
.feature-greywatch h3 { font-size: clamp(45px, 4.75vw, 75px); }
.feature-greywatch h3 em { color: #d1a78d; }
.image-caption { position: absolute; z-index: 1; bottom: 27px; left: 30px; color: #f2f2f1; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-shadow: 0 1px 12px rgba(0,0,0,.8); text-transform: uppercase; }
.world-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.world-card { min-width: 0; background: #101319; border: 1px solid rgba(202, 205, 211, .12); }
.world-card-image { height: clamp(310px, 33vw, 480px); }
.starveil-image img { object-position: center 53%; }
.infinity-image img { object-position: center 30%; }
.world-card-copy { min-height: 290px; padding: clamp(32px, 3.3vw, 50px); }
.world-card h3 { margin: 23px 0 18px; font: 400 clamp(37px, 3.5vw, 55px)/1.04 var(--display); letter-spacing: -.035em; }
.world-card h3 em { color: var(--gold); font-weight: 400; }
.world-card p:last-child { max-width: 550px; margin: 0; color: #afb2b6; font-size: 16px; line-height: 1.7; }
.world-card:last-child h3 em { color: #aebddd; }

.games-section { padding-block: clamp(100px, 11vw, 170px) clamp(110px, 12vw, 180px); background: #0b0e13; border-block: 1px solid var(--line); }
.games-heading { padding-bottom: clamp(42px, 5vw, 72px); }
.game-feature { display: grid; grid-template-columns: 1.15fr .85fr; min-height: clamp(510px, 43vw, 650px); overflow: hidden; background: #11151b; border: 1px solid rgba(202, 205, 211, .16); }
.game-feature-art { position: relative; min-height: 100%; overflow: hidden; background: #111923; }
.game-feature-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(9, 12, 17, .82) 100%), linear-gradient(180deg, transparent 55%, rgba(3, 5, 8, .78) 100%); pointer-events: none; }
.game-feature-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.game-feature:hover .game-feature-art img { transform: scale(1.035); }
.game-art-overlay { position: absolute; z-index: 1; left: clamp(24px, 3vw, 50px); right: clamp(24px, 3vw, 50px); bottom: 28px; display: flex; align-items: center; gap: 13px; color: #f2eadb; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.game-art-overlay i { width: 22px; height: 1px; background: var(--gold); }
.game-feature-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(38px, 5vw, 76px); background: linear-gradient(145deg, #191d23, #0b0e12 78%); }
.game-feature-copy::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, transparent, var(--gold), transparent); opacity: .65; }
.game-feature-copy h3 { margin: 29px 0 24px; font: 400 clamp(45px, 4.9vw, 73px)/1 var(--display); letter-spacing: -.045em; }
.game-feature-copy h3 em { color: var(--gold); font-weight: 400; }
.game-description { max-width: 500px; margin: 0; color: #d1d2d1; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.68; }
.game-details { display: flex; flex-wrap: wrap; gap: 9px 19px; margin: 27px 0 28px; color: #a8adb5; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.game-details span { display: inline-flex; align-items: center; gap: 9px; }
.game-details span::before { content: ""; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; }
.game-button { display: inline-flex; align-items: center; gap: 29px; padding: 14px 18px 14px 19px; border: 1px solid rgba(198, 170, 119, .78); background: rgba(198, 170, 119, .13); color: #f1e9d8; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: background .2s ease, color .2s ease, gap .2s ease; }
.game-button span { color: var(--gold); font-size: 17px; font-weight: 400; line-height: .7; }
.game-button:hover { gap: 36px; background: var(--gold); color: var(--night); }
.game-button:hover span { color: var(--night); }
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.game-card { min-width: 0; background: #101319; border: 1px solid rgba(202, 205, 211, .13); }
.game-card-image { position: relative; height: clamp(320px, 34vw, 485px); overflow: hidden; background: #12161b; }
.game-card-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 48%, rgba(2, 4, 8, .7) 100%); }
.game-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.game-card:hover .game-card-image img { transform: scale(1.035); }
.game-card-image span { position: absolute; z-index: 1; left: 28px; bottom: 24px; padding: 6px 9px; border: 1px solid rgba(198, 170, 119, .65); background: rgba(7, 9, 12, .68); color: #e4ce9e; font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.oathfall-card-image img { object-position: center 34%; }
.game-card-copy { min-height: 360px; padding: clamp(30px, 3.3vw, 49px); }
.game-card-copy h3 { margin: 24px 0 18px; font: 400 clamp(38px, 3.5vw, 54px)/1.03 var(--display); letter-spacing: -.04em; }
.game-card-copy h3 em { color: #d1a78d; font-weight: 400; }
.game-card:last-child h3 em { color: #c9d5e7; }
.game-card-copy p:not(.eyebrow) { max-width: 550px; margin: 0 0 28px; color: #afb2b6; font-size: 16px; line-height: 1.7; }
.game-card-copy .text-link { gap: 21px; font-size: 10px; }
.game-card-copy .text-link:hover { gap: 27px; }

.studio-section { overflow: hidden; background: #12161c; border-block: 1px solid var(--line); }
.studio-inner { padding-block: clamp(90px, 10vw, 160px) clamp(46px, 5vw, 85px); }
.studio-content { display: grid; grid-template-columns: 1.13fr .87fr; align-items: end; gap: clamp(40px, 8vw, 125px); margin-top: 38px; }
.studio-section h2 { font-size: clamp(43px, 5.5vw, 86px); }
.studio-copy p { max-width: 480px; margin: 0 0 22px; color: #b5b9bd; font-size: 18px; line-height: 1.75; }
.studio-copy p:first-child { color: #e3e1dd; font-size: 20px; }
.studio-copy p:last-child { margin-bottom: 5px; }
.studio-rule { display: flex; gap: 30px; align-items: center; margin-top: clamp(85px, 10vw, 150px); border-top: 1px solid var(--line); padding-top: 24px; color: #8d939c; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.studio-rule i { height: 3px; width: 3px; border-radius: 50%; background: var(--gold); }
.contact-section { padding-block: clamp(100px, 11vw, 170px) clamp(115px, 12vw, 190px); }
.contact-section h2 { margin-top: 32px; }
.contact-section > p:not(.eyebrow) { margin: 35px 0 17px; color: #aeb1b6; font-size: 17px; }
.contact-email { display: inline-flex; align-items: center; gap: 26px; border-bottom: 1px solid var(--gold); padding: 0 0 12px; color: #e8e7e3; font: 400 clamp(18px, 2.7vw, 34px)/1.2 var(--display); transition: color .2s ease, gap .2s ease; overflow-wrap: anywhere; }
.contact-email:hover { color: var(--gold); gap: 33px; }
.contact-email span { color: var(--gold); font-family: var(--sans); font-size: .75em; }
.contact-hint { margin: 18px 0 0 !important; color: #8f949c !important; font-size: 13px !important; }
.contact-hint-button { padding: 0; border: 0; border-bottom: 1px solid rgba(198, 170, 119, .55); background: transparent; color: #cdb88f; cursor: pointer; font: inherit; }
.contact-hint-button:hover { color: var(--ink); }
.contact-dialog { width: min(560px, calc(100% - 40px)); padding: 0; border: 1px solid rgba(198, 170, 119, .45); background: transparent; color: var(--ink); box-shadow: 0 30px 100px rgba(0, 0, 0, .7); }
.contact-dialog::backdrop { background: rgba(1, 3, 6, .78); backdrop-filter: blur(8px); }
.contact-dialog-card { position: relative; padding: clamp(34px, 6vw, 58px); background: linear-gradient(145deg, #171b21, #0a0d11 78%); }
.dialog-close { position: absolute; top: 18px; right: 22px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(202, 205, 211, .2); border-radius: 50%; background: transparent; color: #bfc2c7; cursor: pointer; font-size: 24px; line-height: 1; }
.dialog-close:hover { border-color: var(--gold); color: var(--gold); }
.contact-dialog h2 { max-width: 390px; margin: 24px 0 18px; font: 400 clamp(35px, 5vw, 52px)/1.04 var(--display); letter-spacing: -.04em; }
.dialog-copy { max-width: 440px; margin: 0; color: #aeb1b6; font-size: 16px; line-height: 1.7; }
.dialog-actions { display: grid; gap: 10px; margin-top: 30px; }
.dialog-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 15px 17px; border: 1px solid rgba(202, 205, 211, .2); background: rgba(255, 255, 255, .025); color: #e8e7e3; cursor: pointer; font: 600 12px/1.2 var(--sans); letter-spacing: .13em; text-align: left; text-transform: uppercase; }
.dialog-action:hover { border-color: var(--gold); color: var(--gold); }
.dialog-action span { color: var(--gold); font-size: 17px; font-weight: 400; }
.dialog-action-primary { border-color: rgba(198, 170, 119, .7); background: rgba(198, 170, 119, .1); }
.copy-status { min-height: 1.4em; margin: 18px 0 0; color: var(--gold); font-size: 13px; }
.site-footer { padding: 55px clamp(24px, 4.8vw, 86px) 25px; background: #020304; border-top: 1px solid var(--line); }
.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-top { padding-bottom: 55px; }
.footer-brand { font: 400 27px/1 var(--display); letter-spacing: .13em; }
.footer-brand span { display: block; margin-top: 8px; color: var(--gold); font: 600 9px/1 var(--sans); letter-spacing: .5em; }
.footer-top p { margin: 0; color: #bfc0c2; font: italic 24px/1.3 var(--display); }
.footer-bottom { min-height: 54px; border-top: 1px solid var(--line); color: #82868c; font-size: 11px; letter-spacing: .08em; }
.footer-bottom a { color: #c6c3bd; transition: color .2s ease; }
.footer-bottom a:hover { color: var(--gold); }

@media (max-width: 1050px) {
  .feature { min-height: 520px; }
  .feature-copy { padding: 45px; }
  .feature h3 { font-size: clamp(45px, 5vw, 65px); }
  .feature-greywatch h3 { font-size: clamp(41px, 4.6vw, 60px); }
  .feature .eyebrow, .world-card .eyebrow { font-size: 10px; letter-spacing: .16em; gap: 10px; }
  .world-card-copy { min-height: 315px; }
  .game-feature-copy { padding: 45px; }
  .game-feature-copy h3 { font-size: clamp(41px, 4.7vw, 62px); }
  .game-card-copy { min-height: 380px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }
  .site-header { height: 70px; padding-inline: 22px; }
  .wordmark-main { font-size: 21px; }
  .wordmark-sub { font-size: 8px; }
  .menu-toggle { position: relative; z-index: 25; display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 11px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
  .menu-toggle span { width: 100%; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: absolute; top: 69px; left: 0; right: 0; display: none; padding: 18px 24px 30px; flex-direction: column; align-items: stretch; gap: 0; background: #080b0f; border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px rgba(0,0,0,.45); }
  .site-nav.is-open { display: flex; }
  .site-nav a { display: block; padding: 15px 4px; font-size: 13px; border-bottom: 1px solid var(--line); }
  .site-nav a::after { display: none; }
  .hero { min-height: 790px; min-height: max(790px, 100svh); }
  .hero-inner { padding-top: 100px; padding-bottom: 115px; }
  .hero-kicker { margin-bottom: -22px; font-size: 10px; }
  .hero-logo { width: min(88vw, 430px); margin-bottom: -42px; }
  .hero h1 { font-size: clamp(35px, 8.2vw, 52px); }
  .hero-deck { max-width: 390px; margin-top: 21px; font-size: 15px; }
  .hero-link { margin-top: 22px; }
  .hero-bottom { left: 22px; right: 22px; grid-template-columns: 1fr 1fr; font-size: 9px; }
  .hero-bottom span:nth-child(2) { text-align: right; }
  .hero-bottom span:nth-child(3) { display: none; }
  .section-wrap { width: calc(100% - 44px); }
  .section-heading-row, .studio-content { display: block; }
  .section-heading-row > p { margin-top: 24px; }
  .feature-stack { gap: 18px; }
  .feature, .feature-greywatch { display: flex; flex-direction: column; min-height: 0; }
  .feature-image { order: 1; height: min(118vw, 620px); }
  .feature-copy { order: 2; min-height: 420px; padding: 42px 30px 62px; }
  .feature h3, .feature-greywatch h3 { font-size: clamp(48px, 10vw, 72px); margin: 30px 0 22px; }
  .feature-description { font-size: 17px; }
  .feature-note { margin-top: 22px; }
  .feature-corner { bottom: 22px; right: 30px; }
  .world-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .world-card-image { height: min(80vw, 450px); }
  .world-card-copy { min-height: 0; padding: 36px 30px 43px; }
  .world-card h3 { font-size: clamp(42px, 9vw, 58px); }
  .game-feature { display: flex; flex-direction: column; }
  .game-feature-art { height: min(68vw, 470px); min-height: 0; }
  .game-feature-copy { min-height: 445px; padding: 42px 30px 55px; }
  .game-feature-copy h3 { font-size: clamp(45px, 10vw, 70px); margin: 28px 0 22px; }
  .game-description { font-size: 17px; }
  .game-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .game-card-image { height: min(80vw, 450px); }
  .game-card-copy { min-height: 0; padding: 36px 30px 43px; }
  .game-card-copy h3 { font-size: clamp(42px, 9vw, 58px); }
  .studio-copy { margin-top: 38px; }
  .studio-rule { margin-top: 85px; }
  .footer-top { align-items: flex-start; flex-direction: column; gap: 35px; }
  .footer-bottom { align-items: flex-start; flex-wrap: wrap; gap: 9px 24px; padding-top: 22px; }
  .footer-bottom span:nth-child(2) { display: none; }
}

@media (max-width: 420px) {
  .hero { min-height: 760px; }
  .hero-logo { width: 97vw; margin-left: -3.5vw; margin-bottom: -36px; }
  .hero h1 { font-size: 36px; }
  .hero-deck { font-size: 15px; }
  .eyebrow { font-size: 10px; letter-spacing: .18em; }
  .section-heading h2, .studio-section h2, .contact-section h2 { font-size: 43px; }
  .feature .eyebrow, .world-card .eyebrow { white-space: normal; }
  .feature h3, .feature-greywatch h3 { font-size: 45px; }
  .feature-copy { padding-inline: 25px; }
  .world-card-copy { padding-inline: 25px; }
  .game-feature-copy, .game-card-copy { padding-inline: 25px; }
  .game-feature-copy h3, .game-card-copy h3 { font-size: 45px; }
  .contact-email { gap: 10px; }
  .contact-hint { line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Universe dossiers */
[data-universe] { cursor: pointer; transition: border-color .2s ease; }
[data-universe]:hover, [data-universe]:focus-within { border-color: var(--gold); }
.universe-trigger { display: inline-flex; align-items: center; gap: 22px; min-height: 44px; margin-top: 22px; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--gold); color: var(--gold); font: 600 14px/1.4 var(--sans); cursor: pointer; }
.universe-trigger span { font-size: 20px; }
.universe-dialog { width: min(860px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #756347; background: #101319; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 100px #000b; }
.universe-dialog::backdrop { background: #03060cda; backdrop-filter: blur(7px); }
.universe-dialog-art { height: clamp(150px, 25vh, 260px); overflow: hidden; background: #151a20; }
.universe-dialog-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.universe-dialog .dialog-close { position: sticky; float: right; top: 16px; margin: 16px 16px -60px 0; width: 44px; height: 44px; z-index: 2; background: #101319; color: #fff; }
.universe-dialog-copy { padding: clamp(24px, 5vw, 48px); background: linear-gradient(145deg, #1b2028, #101319 65%); }
.universe-dialog .eyebrow { padding-right: 36px; font-size: 12px; }
.universe-dialog h2 { margin: 20px 0; font: 400 clamp(32px, 6vw, 56px)/1.08 var(--display); letter-spacing: -.025em; }
.universe-lede { margin: 0; color: #d8d8d7; font-size: 18px; line-height: 1.7; }
.universe-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; margin: 32px 0; padding-top: 28px; border-top: 1px solid #ffffff24; }
.universe-facts dt { color: var(--gold); font-size: 14px; font-weight: 600; }
.universe-facts dd { margin: 10px 0 0; color: #b9bec7; font-size: 16px; line-height: 1.7; }
.universe-development-note { color: #9ba3af; font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
.universe-dialog .dialog-action { font-size: 14px; letter-spacing: .06em; }
body:has(.universe-dialog[open]) { overflow: hidden; }
@media (max-width: 600px) { .universe-facts { grid-template-columns: 1fr; gap: 24px; } .universe-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); } }