/* vulcron.com — gunmetal and brass. Big Shoulders Display for display type, Archivo for text. */
@font-face { font-family: "Big Shoulders Display"; src: url(/fonts/big-shoulders-display-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Archivo; src: url(/fonts/archivo-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Archivo; src: url(/fonts/archivo-latin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --bg: #22272e; --bg-2: #2d343d; --line: #3b434e; --ink: #e8e4da; --ink-2: #a7adb6; --brass: #c9a24f; --brass-2: #8f6f2a;
  --plate: rgba(34, 39, 46, .94);
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: Archivo, system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 72px); --max: 1320px; --top-h: 67px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 10px; background: var(--brass); color: var(--bg); padding: 8px 14px; font-weight: 600; z-index: 20; }
.skip:focus { left: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.emblem { display: block; height: 30px; width: 52px; color: var(--brass); }

/* Top bar */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--gutter); background: var(--plate); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.nav { display: flex; gap: 28px; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.textlink { color: var(--brass); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; font-weight: 500; }
.textlink:hover { color: var(--ink); }

/* Hero: the emblem as a window onto the games, the wordmark beneath it. */
.hero { min-height: calc(100svh - var(--top-h)); display: grid; align-content: center; justify-items: center; text-align: center; padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.viewport { width: min(84vw, 900px, calc((100svh - 400px) * 1.72)); min-width: min(280px, 84vw); aspect-ratio: 3440 / 2000; -webkit-mask: url(/img/emblem.svg) center / contain no-repeat; mask: url(/img/emblem.svg) center / contain no-repeat; background: var(--bg-2); }
.viewport-art { width: 100%; height: 100%; background: url(/img/vulcrongamesbanner-1920w.webp) 0% 50% / auto 135% no-repeat; animation: pan 28s ease-in-out infinite alternate; }
@keyframes pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .viewport-art { animation: none; background-position: 50% 50%; } }
.hero-text { margin-top: clamp(14px, 2.5vw, 28px); max-width: 100%; }
.wordmark { font: 800 clamp(56px, 10.5vw, 150px)/0.9 var(--display); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 0 0.07em; }
.tagline { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); max-width: 46ch; margin: 14px auto 20px; }
.hero-links { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }

/* Game chapters */
.chapter { position: relative; min-height: min(calc(100svh - var(--top-h)), 820px); display: grid; align-items: end; border-top: 1px solid var(--line); overflow: hidden; }
.chapter-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.chapter-art.art-mid { object-position: center 45%; }
.chapter-plate { position: relative; margin: clamp(24px, 5vw, 64px) var(--gutter); background: var(--plate); border-top: 2px solid var(--brass); padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px) clamp(24px, 3vw, 40px); max-width: 580px; }
.chapter.alt .chapter-plate { justify-self: end; }
.chapter h2, .game-title { font: 700 clamp(44px, 5.2vw, 76px)/0.94 var(--display); letter-spacing: 0.01em; margin: 0 0 12px; }
.chapter p { margin: 0 0 18px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 0 0 20px; font-size: 15px; }
.facts div { display: contents; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; }
.status { color: var(--brass); }
@media (max-width: 767px) {
  .chapter { display: block; min-height: 0; }
  .chapter-art { position: static; aspect-ratio: 16 / 9; height: auto; }
  .chapter-plate { margin: 0; max-width: none; background: var(--bg); }
}

/* About, contact, footer */
.section-title { font: 600 clamp(26px, 2.6vw, 34px)/1 var(--display); letter-spacing: 0.03em; margin: 0 0 22px; color: var(--ink-2); }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: clamp(48px, 7vw, 96px) var(--gutter); max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line); }
.lede { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; max-width: 38ch; margin: 0; }
.spec { margin: 0; border-top: 1px solid var(--line); }
.spec div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink-2); }
.spec dd { margin: 0; }
.spec-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
.spec-2col div { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
.spec-2col dt { color: var(--ink); font: 700 26px/1.1 var(--display); letter-spacing: 0.02em; }
.spec-2col dd { color: var(--ink-2); }
@media (max-width: 899px) { .about, .spec-2col { grid-template-columns: 1fr; } }
.contact { padding: clamp(48px, 7vw, 96px) var(--gutter); max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line); }
.contact p { max-width: 50ch; margin: 0 0 18px; color: var(--ink-2); }
.email { font: 700 clamp(30px, 5vw, 64px)/1 var(--display); color: var(--brass); text-decoration: none; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.email:hover { color: var(--ink); }
.foot { border-top: 1px solid var(--line); padding: 30px var(--gutter) 48px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; font-size: 14px; color: var(--ink-2); }
.foot p { margin: 0; max-width: 60ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 699px) { .foot { grid-template-columns: 1fr; } }

/* Game pages */
.game-hero { position: relative; min-height: min(calc(92svh - var(--top-h)), 780px); display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid var(--line); }
.game-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.game-hero .chapter-plate { max-width: 720px; }
.game-logo { width: min(100%, 460px); margin: 0 0 18px; }
.game-hero .lede { font-size: 18px; margin: 0 0 18px; max-width: 48ch; }
.game-hero-char { position: absolute; right: var(--gutter); bottom: 0; width: min(34vw, 460px); }
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.badges img { height: 44px; width: auto; }
.badges a { display: block; }
.badges a:hover img { opacity: .85; }
.note { border-left: 2px solid var(--brass); padding: 8px 16px; color: var(--ink-2); max-width: 52ch; margin: 0; }
@media (max-width: 899px) { .game-hero-char { display: none; } }
@media (max-width: 767px) { .game-hero { display: block; min-height: 0; } .game-hero-art { position: static; aspect-ratio: 16 / 9; height: auto; } .game-hero .chapter-plate { margin: 0; max-width: none; background: var(--bg); } }

.section { padding: clamp(40px, 6vw, 80px) var(--gutter); max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line); }
.section p { max-width: 60ch; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); max-width: 960px; }
.video img, .video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; position: absolute; inset: 0; }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 88px; height: 64px; border: 0; background: var(--brass); color: var(--bg); cursor: pointer; display: grid; place-items: center; }
.play svg { width: 26px; height: 26px; fill: currentColor; }
.play:hover { background: var(--ink); }
.caption { font-size: 14px; color: var(--ink-2); margin: 10px 0 0; }

.strip { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-color: var(--line) transparent; }
.strip li { flex: 0 0 min(78vw, 560px); scroll-snap-align: start; }
.strip figure { margin: 0; }
.strip a { display: block; }
.strip img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--bg-2); }
.strip figcaption { font-size: 14px; color: var(--ink-2); padding: 10px 0 2px; }
.strip.portrait li { flex-basis: min(64vw, 300px); }
.strip.portrait img { aspect-ratio: 9 / 16; }

.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
.plates figure { margin: 0; }
.plates a { display: block; }
.plates img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--bg-2); }
.plates figcaption { font-size: 15px; color: var(--ink); padding-top: 10px; }
@media (max-width: 899px) { .plates { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .plates { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.split img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } }

.more { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.more li { display: grid; grid-template-columns: 160px 1fr auto; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.more img { aspect-ratio: 2 / 1; object-fit: cover; width: 100%; }
.more h3 { font: 700 30px/1 var(--display); margin: 0 0 4px; }
.more p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 599px) { .more li { grid-template-columns: 1fr; gap: 10px; } }

/* Text pages */
.page { padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(56px, 8vw, 110px); max-width: var(--max); margin: 0 auto; }
.page-title { font: 800 clamp(44px, 6vw, 88px)/0.95 var(--display); letter-spacing: 0.01em; margin: 0 0 12px; }
.page-lede { color: var(--ink-2); font-size: 18px; max-width: 60ch; margin: 0 0 32px; }
.prose { max-width: 72ch; }
.prose h2 { font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: 0.02em; margin: 1.8em 0 .5em; }
.prose p { margin: 0 0 1em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 0 0 .5em; }
.prose a { color: var(--brass); }
.prose a:hover { color: var(--ink); }
.prose strong { color: var(--ink); }

/* Utilities and embeds */
.symbols { position: absolute; width: 0; height: 0; }
.links-left { justify-content: flex-start; }
.policy, .policy * { color: var(--ink) !important; }
.policy a { color: var(--brass) !important; }
.policy h1, .policy h2, .policy h3, .policy h4 { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; }
.policy hr { border: 0; border-top: 1px solid var(--line); }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: var(--bg); color: var(--ink); max-width: min(96vw, 1400px); max-height: 96vh; }
.lightbox::backdrop { background: rgba(10, 12, 16, .9); }
.lightbox figure { margin: 0; }
.lightbox img { max-height: 84vh; width: auto; max-width: 96vw; }
.lightbox figcaption { padding: 10px 14px; font-size: 14px; color: var(--ink-2); }
.lightbox button { position: absolute; top: 8px; right: 8px; background: var(--brass); color: var(--bg); border: 0; padding: 8px 14px; font: 600 14px var(--body); cursor: pointer; }