/* styles.css — Ember Iron Arcana Core Engine + Corporate Extension */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-alt: #1a1a1a;
  --color-crimson: #8b0000;
  --color-crimson-light: #c0392b;
  --color-bronze: #cd7f32;
  --color-bronze-dark: #a0522d;
  --color-text: #e8e0d0;
  --color-text-muted: #9a8f7e;

  --color-ember: #e25822;
  --color-ember-light: #ff7a45;
  --color-ember-glow: rgba(226, 88, 34, 0.32);
  --color-iron: #43464b;
  --color-iron-deep: #202225;
  --color-iron-surface: #2b2e33;
  --color-studio-text: #f5eee4;
  --color-studio-muted: #c9beb1;
  --color-focus: #ffd08a;

  --font-display: 'Cinzel Decorative', cursive;
  --font-body: 'EB Garamond', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(rgba(10,10,10,0.92), rgba(10,10,10,0.92)),
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 4px);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  padding-top: 70px;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
a { color: var(--color-bronze); text-decoration: none; transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
a:hover { color: var(--color-crimson-light); }
img { display: block; max-width: 100%; }
button,input,select,textarea { font: inherit; }
button { border: 0; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-crimson); border: 1px solid var(--color-bronze); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-crimson-light); }

/* Legacy Chains Engine — preserved */
.site-header { position: fixed; top: 0; left: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 70px; padding: 0 2rem; background: rgba(10,10,10,0.95); border-bottom: 1px solid var(--color-bronze-dark); backdrop-filter: blur(5px); }
.site-title { color: var(--color-text); font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 1px; text-transform: uppercase; }
.site-nav ul { display: flex; gap: 1.5rem; list-style: none; }
.site-nav a { padding-bottom: 4px; color: var(--color-text); border-bottom: 2px solid transparent; font-family: var(--font-display); font-size: .9rem; letter-spacing: 1px; text-transform: uppercase; }
.site-nav a:hover { color: var(--color-bronze); }
.site-nav a.active { color: var(--color-bronze); border-bottom-color: var(--color-crimson); }
.site-footer { margin-top: 4rem; padding: 2rem; color: var(--color-text-muted); background: var(--color-surface-alt); border-top: 1px solid var(--color-bronze-dark); font-size: .9rem; text-align: center; }
.btn { display: inline-block; padding: .75rem 1.5rem; color: var(--color-text); background: var(--color-crimson); border: 1px solid var(--color-bronze); cursor: pointer; font-family: var(--font-display); font-size: 1rem; letter-spacing: 2px; text-align: center; text-transform: uppercase; transition: all .3s ease; }
.btn:hover { color: #fff; background: var(--color-crimson-light); box-shadow: 0 0 15px var(--color-crimson); }
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 70px); padding: 2rem; background-image: linear-gradient(to bottom, rgba(10,10,10,.4), rgba(10,10,10,.9)), url('assets/hero.jpg'); background-position: center; background-size: cover; text-align: center; }
.hero-title { margin-bottom: 1rem; color: var(--color-text); font-size: clamp(2rem,6vw,5rem); text-shadow: 2px 2px 10px rgba(0,0,0,.8); }
.hero-subtitle { margin-bottom: 3rem; color: var(--color-bronze); font-size: 1.5rem; text-shadow: 1px 1px 5px rgba(0,0,0,.8); }
.hero-actions { display: flex; gap: 1.5rem; }
.world-overview { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
.overview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.overview-card { padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-bronze-dark); transition: all .3s ease; }
.overview-card:hover { border-color: var(--color-bronze); box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.overview-img { width: 100%; height: 200px; margin-bottom: 1.5rem; border: 1px solid var(--color-bronze-dark); object-fit: cover; }
.overview-card h3 { margin-bottom: 1rem; color: var(--color-crimson-light); font-size: 1.5rem; }
.page-header { padding: 4rem 2rem 2rem; text-align: center; }
.page-title { margin-bottom: .5rem; color: var(--color-text); font-size: 3.5rem; }
.page-subtitle { margin-bottom: 1.5rem; color: var(--color-bronze); font-size: 1.5rem; }
.page-flavor { max-width: 800px; margin: 0 auto; color: var(--color-text-muted); font-size: 1.1rem; font-style: italic; }
.gods-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; max-width: 1400px; margin: 0 auto; padding: 2rem; }
.god-card { display: flex; flex-direction: column; align-items: center; padding: 2rem; background: var(--color-surface); border-top: 3px solid var(--color-crimson); text-align: center; transition: all .3s ease; }
.god-card:hover { box-shadow: 0 0 20px rgba(205,127,50,.15); }
.god-portrait,.house-portrait { width: 120px; height: 120px; margin-bottom: 1.5rem; border: 3px solid var(--color-crimson); border-radius: 50%; object-fit: cover; transition: all .3s ease; }
.god-card:hover .god-portrait { box-shadow: 0 0 15px var(--color-bronze); }
.god-name { margin-bottom: .25rem; color: var(--color-bronze); font-size: 1.8rem; }
.god-epithet { margin-bottom: 1rem; color: var(--color-crimson-light); font-size: 1.1rem; font-style: italic; }
.god-domains { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; }
.domain-badge { padding: .2rem .8rem; color: var(--color-text); background: var(--color-crimson); border-radius: 12px; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; }
.god-lore { margin-bottom: 1.5rem; font-size: 1rem; text-align: justify; }
.god-worship { width: 100%; margin-bottom: 1rem; color: var(--color-text-muted); font-size: .95rem; text-align: left; }
.god-boons { width: 100%; margin-bottom: 1.5rem; list-style: none; text-align: left; }
.god-boons li { position: relative; margin-bottom: .5rem; padding-left: 1.5rem; font-size: .95rem; }
.god-boons li::before { position: absolute; top: 0; left: 0; color: var(--color-crimson); content: '♦'; }
.god-voice { width: 100%; margin-top: auto; padding-left: 1rem; color: var(--color-text-muted); border-left: 4px solid var(--color-crimson); font-style: italic; text-align: left; }
.houses-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 2rem; }
.house-card { padding: 2.5rem; background: var(--color-surface); border: 2px solid var(--color-bronze-dark); text-align: center; transition: all .3s ease; }
.house-card:hover { border-color: var(--color-bronze); box-shadow: 0 4px 15px rgba(205,127,50,.2); }
.house-icon { margin-bottom: 1rem; color: var(--color-bronze); font-size: 3rem; }
.house-name { margin-bottom: .5rem; color: var(--color-bronze); font-size: 2.5rem; }
.house-sovereign { margin-bottom: 1.5rem; color: var(--color-text-muted); font-size: 1rem; }
.territories-list { max-width: 1000px; margin: 0 auto; padding: 2rem 0; }
.territory-item { display: flex; align-items: center; gap: 2rem; padding: 2rem 4rem; border-bottom: 1px solid var(--color-bronze-dark); transition: all .3s ease; }
.territory-item:hover { background: var(--color-surface); }
.territory-number { min-width: 60px; color: var(--color-crimson); font-family: var(--font-display); font-size: 4rem; line-height: 1; opacity: .4; }
.territory-content h2 { margin-bottom: .5rem; color: var(--color-bronze); font-size: 2rem; }

/* Ember Iron Arcana Corporate Extension — scoped to .studio-site */
.studio-site { padding-top: 0; color: var(--color-studio-text); background-color: #111214; background-image: linear-gradient(rgba(17,18,20,.94), rgba(17,18,20,.96)), repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,.012) 2px, rgba(255,255,255,.012) 4px), repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.012) 2px, rgba(255,255,255,.012) 4px); }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 2000; padding: .75rem 1rem; color: #16110d; background: var(--color-focus); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.studio-header { position: sticky; top: 0; z-index: 1000; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; min-height: 76px; padding: .9rem clamp(1rem,4vw,4rem); background: rgba(32,34,37,.96); border-bottom: 1px solid var(--color-ember); box-shadow: 0 8px 24px rgba(0,0,0,.32); backdrop-filter: blur(10px); }
.studio-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--color-studio-text); font-family: var(--font-display); font-size: clamp(.8rem,1.4vw,1.05rem); letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.studio-brand:hover { color: var(--color-focus); }
.studio-brand-mark { display: inline-grid; width: 2rem; height: 2rem; place-items: center; color: #16110d; background: var(--color-ember); border-radius: 50%; font-size: .9rem; }
.studio-nav { justify-self: center; }
.studio-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.1rem; list-style: none; }
.studio-nav a { display: inline-block; padding: .4rem 0; color: var(--color-studio-text); border-bottom: 2px solid transparent; font-family: var(--font-display); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.studio-nav a:hover, .studio-nav a.active { color: var(--color-focus); border-bottom-color: var(--color-ember); }
.studio-social-nav { display: flex; align-items: center; gap: .55rem; }
.studio-social-nav a { display: inline-grid; width: 2.1rem; height: 2.1rem; place-items: center; color: var(--color-studio-text); border: 1px solid transparent; border-radius: 50%; font-size: 1rem; }
.studio-social-nav a:hover { color: #17120e; background: var(--color-ember); border-color: var(--color-ember-light); box-shadow: 0 0 14px var(--color-ember-glow); }
.studio-hero { display: grid; min-height: min(760px, calc(100vh - 76px)); place-items: center; padding: clamp(5rem,12vw,9rem) 1.5rem; background-image: linear-gradient(90deg, rgba(17,18,20,.96) 6%, rgba(17,18,20,.68) 58%, rgba(17,18,20,.85) 100%), url('assets/studio-hero.jpg'); background-position: center; background-size: cover; }
.studio-hero-content { width: min(860px,100%); text-align: center; }
.studio-eyebrow { margin-bottom: .8rem; color: var(--color-ember-light); font-family: var(--font-display); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.studio-hero h1, .studio-page-hero h1 { color: var(--color-studio-text); font-size: clamp(2.55rem,8vw,6.4rem); text-shadow: 2px 4px 16px rgba(0,0,0,.75); }
.studio-hero-mission { max-width: 720px; margin: 1.5rem auto 2.4rem; color: var(--color-studio-text); font-size: clamp(1.25rem,2.6vw,1.7rem); }
.studio-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.studio-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 12rem; padding: .8rem 1.2rem; border: 1px solid transparent; cursor: pointer; font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-align: center; text-transform: uppercase; }
.studio-btn-primary { color: #16110d; background: var(--color-ember); border-color: var(--color-ember-light); }
.studio-btn-primary:hover { color: #16110d; background: var(--color-ember-light); box-shadow: 0 0 18px var(--color-ember-glow); }
.studio-btn-secondary { color: var(--color-studio-text); background: rgba(67,70,75,.66); border-color: #888e96; }
.studio-btn-secondary:hover { color: var(--color-studio-text); background: var(--color-iron); border-color: var(--color-focus); }
.studio-btn-game-chains { color: var(--color-text); background: var(--color-crimson); border-color: var(--color-bronze); }
.studio-btn-game-chains:hover { color: #fff; background: var(--color-crimson-light); box-shadow: 0 0 16px rgba(192,57,43,.45); }
.studio-btn-game-delve { color: #17120e; background: var(--color-ember); border-color: var(--color-ember-light); }
.studio-btn-game-delve:hover { color: #17120e; background: var(--color-ember-light); box-shadow: 0 0 16px var(--color-ember-glow); }
.studio-section { width: min(1240px,100%); margin: 0 auto; padding: clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,2.5rem); }
.studio-section-heading { max-width: 760px; margin-bottom: 2.2rem; }
.studio-section-heading h2, .studio-story-grid h2, .contact-panel h2, .future-tooling-panel h2 { color: var(--color-studio-text); font-size: clamp(1.8rem,4vw,3rem); }
.studio-section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; max-width: none; }
.studio-text-link { display: inline-flex; align-items: center; gap: .55rem; color: var(--color-ember-light); font-family: var(--font-display); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.studio-text-link:hover { color: var(--color-focus); }
.studio-feature-grid, .studio-game-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.studio-feature-card { padding: 1.75rem; background: linear-gradient(155deg, rgba(67,70,75,.42), rgba(32,34,37,.86)); border: 1px solid #5a5d63; border-top-color: var(--color-ember); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.studio-feature-card:hover { border-color: var(--color-ember-light); box-shadow: 0 12px 28px var(--color-ember-glow); }
.studio-feature-icon { display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; margin-bottom: 1rem; color: #17120e; background: var(--color-ember); border-radius: 50%; }
.studio-feature-card h3 { margin-bottom: .7rem; color: var(--color-studio-text); font-size: 1.25rem; }
.studio-feature-card p, .studio-prose p, .contact-panel p, .future-tooling-panel p, .studio-footer p { color: var(--color-studio-muted); font-size: 1.08rem; }
.studio-games-preview { width: 100%; max-width: none; background: rgba(32,34,37,.58); }
.studio-games-preview > * { width: min(1190px,100%); margin-right: auto; margin-left: auto; }
.studio-game-preview-grid { grid-template-columns: repeat(2,1fr); }
.studio-game-preview { display: flex; align-items: end; min-height: 410px; overflow: hidden; background-position: center; background-size: cover; border: 1px solid #5a5d63; }
.studio-game-preview-chains { background-image: linear-gradient(to top, rgba(10,10,10,.97) 16%, rgba(10,10,10,.32) 100%), url('assets/chains-preview.jpg'); border-bottom: 3px solid var(--color-bronze); }
.studio-game-preview-delve { background-image: linear-gradient(to top, rgba(17,18,20,.97) 16%, rgba(17,18,20,.28) 100%), url('assets/dungeon-delve-preview.jpg'); border-bottom: 3px solid var(--color-ember); }
.studio-game-preview-content { width: 100%; padding: 2rem; }
.studio-game-preview h3 { margin: .65rem 0; color: var(--color-studio-text); font-size: clamp(1.5rem,3vw,2.25rem); }
.studio-game-preview p:not(.game-status) { max-width: 590px; margin-bottom: 1.35rem; color: var(--color-studio-text); font-size: 1.08rem; }
.game-status { display: inline-block; padding: .25rem .65rem; font-family: var(--font-display); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.game-status-chains { color: var(--color-text); background: var(--color-crimson); border: 1px solid var(--color-bronze); }
.game-status-delve { color: #17120e; background: var(--color-ember); border: 1px solid var(--color-ember-light); }
.studio-page-hero { max-width: 1000px; margin: 0 auto; padding: clamp(4rem,9vw,7rem) clamp(1.25rem,4vw,2.5rem) 2rem; text-align: center; }
.studio-page-hero p:last-child { max-width: 760px; margin: 1.4rem auto 0; color: var(--color-studio-muted); font-size: 1.25rem; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.portfolio-card { overflow: hidden; background: var(--color-iron-deep); border: 1px solid #5a5d63; box-shadow: 0 18px 35px rgba(0,0,0,.24); }
.portfolio-card-chains { border-top: 4px solid var(--color-bronze); }
.portfolio-card-delve { border-top: 4px solid var(--color-ember); }
.portfolio-image { width: 100%; height: 270px; object-fit: cover; }
.portfolio-card-content { padding: 1.8rem; }
.portfolio-card h3 { margin: .65rem 0; color: var(--color-studio-text); font-size: clamp(1.45rem,3vw,2rem); }
.portfolio-card p { color: var(--color-studio-muted); font-size: 1.08rem; }
.portfolio-tagline { margin-bottom: 1rem; color: var(--color-focus) !important; font-style: italic; }
.portfolio-details { display: grid; gap: .55rem; margin: 1.4rem 0; padding: 1rem 0; border-top: 1px solid #575b61; border-bottom: 1px solid #575b61; color: var(--color-studio-muted); list-style: none; }
.portfolio-details strong { color: var(--color-studio-text); }
.studio-story-grid { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(0,1.15fr); gap: clamp(2rem,7vw,6rem); }
.studio-prose { display: grid; gap: 1.2rem; }
.studio-values-section { width: 100%; max-width: none; background: rgba(32,34,37,.52); }
.studio-values-section > * { width: min(1190px,100%); margin-right: auto; margin-left: auto; }
.studio-note-panel, .contact-panel, .future-tooling-panel, .news-post { padding: clamp(1.5rem,4vw,2.6rem); background: linear-gradient(160deg, rgba(67,70,75,.46), rgba(32,34,37,.93)); border: 1px solid #5a5d63; border-left: 4px solid var(--color-ember); }
.studio-note-panel h2 { max-width: 800px; margin-bottom: 1rem; color: var(--color-studio-text); font-size: clamp(1.65rem,3.6vw,2.6rem); }
.studio-note-panel p { max-width: 800px; margin-bottom: 1.5rem; color: var(--color-studio-muted); font-size: 1.1rem; }
.studio-news-section { max-width: 980px; padding-top: 2rem; }
.news-post-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; color: var(--color-ember-light); font-family: var(--font-display); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.news-post h3 { margin-bottom: .8rem; color: var(--color-studio-text); font-size: clamp(1.55rem,4vw,2.7rem); }
.news-post-lede { color: var(--color-focus) !important; font-size: 1.2rem !important; font-style: italic; }
.news-post-footer { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid #575b61; }
.support-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.85fr); gap: clamp(2rem,5vw,4rem); padding-top: 2rem; }
.faq-list { display: grid; gap: .8rem; margin-bottom: 2rem; }
.faq-item { background: rgba(67,70,75,.32); border: 1px solid #575b61; }
.faq-item summary { padding: 1rem 1.2rem; color: var(--color-studio-text); cursor: pointer; font-family: var(--font-display); font-size: .98rem; }
.faq-item p { padding: 0 1.2rem 1.2rem; color: var(--color-studio-muted); font-size: 1.05rem; }
.future-tooling-panel h2 { margin-bottom: .8rem; font-size: 1.55rem; }
.form-intro, .form-note { margin-bottom: 1.4rem; color: var(--color-studio-muted); }
.form-field { display: grid; gap: .45rem; margin-bottom: 1rem; }
.form-field label { color: var(--color-studio-text); font-family: var(--font-display); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: .75rem .85rem; color: var(--color-studio-text); background: #17191c; border: 1px solid #777d85; border-radius: 0; }
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-ember-light); outline: 3px solid rgba(255,208,138,.38); outline-offset: 2px; }
.studio-footer { margin-top: 3rem; color: var(--color-studio-muted); background: var(--color-iron-deep); border-top: 1px solid var(--color-ember); }
.studio-footer-inner { display: grid; grid-template-columns: 1.2fr auto auto; align-items: center; gap: 2rem; width: min(1240px,100%); margin: 0 auto; padding: 2.5rem clamp(1.25rem,4vw,2.5rem); }
.studio-footer-brand { margin-bottom: .65rem; }
.studio-footer p { max-width: 440px; font-size: 1rem; }
.studio-footer-nav { display: flex; flex-wrap: wrap; gap: .65rem 1.15rem; }
.studio-footer-nav a { color: var(--color-studio-text); font-family: var(--font-display); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.studio-footer-nav a:hover { color: var(--color-focus); }
.studio-footer-social { justify-content: flex-end; }
.studio-copyright { padding: 1rem 1.25rem; color: var(--color-studio-muted); background: #17191c; border-top: 1px solid #3d4045; font-size: .9rem; text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Dungeon Delve prototype download — secondary CTA treatment */
.studio-download-link {
  margin-top: 1rem;
}
.studio-download-link .studio-text-link i {
  color: var(--color-ember);
  transition: color .3s ease, text-shadow .3s ease;
}
.studio-download-link .studio-text-link:hover i {
  color: var(--color-focus);
  text-shadow: 0 0 12px rgba(226, 88, 34, 0.55);
}

@media (max-width: 900px) {
  .overview-grid { grid-template-columns: 1fr; }
  .gods-grid { grid-template-columns: repeat(2,1fr); }
  .houses-grid { grid-template-columns: 1fr; }
  .territory-item { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2rem; }
  .studio-header { grid-template-columns: 1fr auto; }
  .studio-nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .studio-social-nav { justify-self: end; }
  .studio-feature-grid { grid-template-columns: repeat(2,1fr); }
  .studio-game-preview-grid, .portfolio-grid, .support-grid { grid-template-columns: 1fr; }
  .studio-story-grid { grid-template-columns: 1fr; }
  .studio-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .studio-footer-social { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .site-header { flex-direction: column; height: auto; padding: 1rem; }
  .site-nav ul { flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
  body:not(.studio-site) { padding-top: 110px; }
  .gods-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .studio-header { gap: .9rem; padding: .8rem 1rem; }
  .studio-brand { font-size: .76rem; }
  .studio-nav { width: 100%; }
  .studio-nav ul { justify-content: flex-start; gap: .45rem .9rem; }
  .studio-nav a { font-size: .67rem; }
  .studio-hero { min-height: 620px; }
  .studio-hero-actions, .studio-section-heading-row { flex-direction: column; align-items: flex-start; }
  .studio-hero-actions .studio-btn { width: 100%; }
  .studio-feature-grid { grid-template-columns: 1fr; }
  .studio-game-preview { min-height: 370px; }
  .studio-game-preview-content, .portfolio-card-content, .news-post, .contact-panel, .future-tooling-panel, .studio-note-panel { padding: 1.35rem; }
  .portfolio-image { height: 220px; }
  .studio-footer-nav { display: grid; grid-template-columns: repeat(2,max-content); }
}
/* Contact form submission states */
.form-status {
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  transition: opacity .3s ease, transform .3s ease;
}

.form-status--success {
  margin-top: 1.4rem;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--color-studio-text);
  background: linear-gradient(160deg, rgba(67, 70, 75, .46), rgba(32, 34, 37, .93));
  border: 1px solid var(--color-focus);
  border-left: 4px solid var(--color-ember);
  text-align: center;
}

.form-status--success h3 {
  margin: .8rem 0 .6rem;
  color: var(--color-focus);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.form-status--success p {
  max-width: 460px;
  margin: 0 auto;
  color: var(--color-studio-muted);
  font-family: var(--font-body);
}

.form-status-icon {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: #17120e;
  background: var(--color-ember);
  border-radius: 50%;
  font-size: 1.2rem;
  box-shadow: 0 0 18px rgba(228, 103, 47, .45);
}

.form-status--error {
  color: var(--color-studio-text);
  background: rgba(139, 0, 0, .18);
  border: 1px solid var(--color-crimson);
  border-left: 4px solid var(--color-crimson);
}

/* Submit button state while the AJAX request is in progress */
.studio-btn-primary[disabled] {
  cursor: wait;
  opacity: .65;
  animation: studio-btn-sending 1.2s ease-in-out infinite;
}

.studio-btn-primary[disabled]:hover,
.studio-btn-primary[disabled]:focus {
  background: var(--color-ember);
  box-shadow: none;
  transform: none;
}

@keyframes studio-btn-sending {
  0%,
  100% {
    opacity: .65;
  }

  50% {
    opacity: .42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-btn-primary[disabled] {
    animation: none;
  }
}