/* Hallmark · Frontier Black Label · atmospheric · H2 Split Diptych · N5 Floating Pill · Ft5 Statement · designed-as-app · no generated assets */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */

:root {
  color-scheme: dark;
  --black: var(--color-paper);
  --black-soft: var(--color-paper-2);
  --paper: var(--color-ink);
  --dust: var(--color-ink-2);
  --red: var(--color-accent);
  --red-dark: color-mix(in oklch, var(--color-accent) 78%, black);
  --gold: var(--color-brass);
  --smoke: color-mix(in oklch, var(--color-ink-2) 88%, transparent);
  --line: var(--color-rule);
  --shadow: var(--shadow-deep);
  --radius: var(--radius-card);
  --max: var(--page-max);
}

html {
  scroll-padding-top: 7rem;
}

body,
.download-page,
.subpage,
.preorder-private-page {
  min-width: 0;
  background: var(--color-paper);
  color: var(--color-ink);
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
}

main {
  overflow: clip;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
}

:is(h1, [data-character-name]),
h2,
h3,
.hero :is(h1, [data-character-name]),
.download-copy :is(h1, [data-character-name]),
.page-hero :is(h1, [data-character-name]),
.poster-content h3,
.character-name-wall {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

.eyebrow {
  margin-block-end: var(--space-sm);
  color: var(--color-brass);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: 1.3;
  text-transform: uppercase;
}

:focus-visible {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* Loader */
.loader {
  background: var(--color-paper);
}

.loader::before {
  inset: 0;
  background: url("assets/hn-gunslinger-loading.jpg") center / cover no-repeat;
  filter: saturate(0.45) contrast(1.08) brightness(0.38);
  opacity: 0.58;
  transform: none;
  animation: none;
}

.loader::after {
  background: color-mix(in oklch, var(--color-paper) 62%, transparent);
}

.loader-card {
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: color-mix(in oklch, var(--color-paper-2) 94%, transparent);
  box-shadow: var(--shadow-deep);
  backdrop-filter: none;
}

.loader-card img {
  width: min(30vw, 7rem);
}

.loader-card span,
.loader-card p,
.loader-meta em {
  color: var(--color-muted);
}

.loader-card strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.loader-track {
  background: var(--color-rule);
}

.loader-track i {
  background: var(--color-brass);
}

/* N5 Floating Pill */
.site-header {
  position: fixed;
  inset: var(--space-sm) auto auto 50%;
  z-index: var(--z-sticky);
  display: flex;
  width: max-content;
  max-width: calc(100vw - (var(--space-md) * 2));
  min-height: 4rem;
  align-items: center;
  gap: clamp(var(--space-sm), 2vw, var(--space-lg));
  padding: 0.42rem 0.55rem;
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-brass) 34%, var(--color-rule));
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-paper-2) 94%, transparent);
  box-shadow: 0 1rem 2.75rem color-mix(in oklch, black 48%, transparent);
  transform: translateX(-50%);
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
  backdrop-filter: none;
}

.site-header.is-scrolled,
body.nav-open .site-header {
  border-color: color-mix(in oklch, var(--color-brass) 58%, var(--color-rule));
  background: color-mix(in oklch, var(--color-paper-2) 98%, transparent);
  box-shadow: 0 1.25rem 3.5rem color-mix(in oklch, black 58%, transparent);
}

.brand {
  order: 1;
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  place-items: center;
  border-radius: 50%;
}

.brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.site-nav {
  position: static;
  order: 2;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-sm), 1.8vw, var(--space-lg));
  margin: 0;
  padding-inline: var(--space-2xs);
  border: 0;
  background: none;
  transform: none;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-shadow: none;
  text-transform: uppercase;
  transition: color var(--dur-micro) var(--ease-out);
}

.site-nav a:nth-child(even) {
  color: var(--color-ink-2);
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0.2rem;
  height: var(--rule-hair);
  background: var(--color-brass);
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: center;
  transition:
    opacity var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.site-nav a:is(:hover, :focus-visible, .is-active) {
  color: var(--color-ink);
  outline: none;
}

.site-nav a:is(:hover, :focus-visible, .is-active)::after {
  opacity: 1;
  transform: scaleX(1);
}

.language-switcher {
  position: relative;
  order: 3;
  z-index: var(--z-dropdown);
}

.language-toggle {
  display: inline-flex;
  width: auto;
  min-width: 3.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding-inline: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  color: var(--color-ink);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.language-toggle:is(:hover, :focus-visible),
.language-switcher.is-open .language-toggle {
  border-color: var(--color-brass);
  background: var(--color-paper-3);
  color: var(--color-ink);
  transform: none;
}

.language-toggle svg {
  width: 0.85rem;
  height: 0.85rem;
}

.language-menu {
  top: calc(100% + var(--space-xs));
  right: 0;
  width: 13rem;
  padding: var(--space-2xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  box-shadow: var(--shadow-card);
}

.language-menu button {
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: calc(var(--radius-card) - 0.125rem);
  background: transparent;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.language-menu button:is(:hover, :focus-visible, .is-active) {
  padding-inline: var(--space-sm);
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.nav-toggle {
  order: 4;
  border-color: var(--color-rule-2);
  border-radius: 50%;
  background: var(--color-paper-3);
  box-shadow: none;
}

.nav-toggle span {
  background: var(--color-ink);
}

/* Home split hero */
.character-hero {
  min-height: max(48rem, 100svh);
  background: var(--color-paper);
  isolation: isolate;
}

.character-hero .hero-bg-layer {
  background:
    radial-gradient(circle at 54% 39%, color-mix(in srgb, var(--hero-accent), transparent 60%) 0 12rem, transparent 34rem),
    radial-gradient(circle at 24% 78%, color-mix(in srgb, var(--hero-dark), transparent 28%) 0 15rem, transparent 30rem),
    linear-gradient(120deg, var(--color-paper) 0%, var(--hero-dark) 48%, var(--color-paper) 100%);
}

.character-hero .hero-bg-layer::before {
  inset: 0;
  background: url("assets/hn-gunslinger-collage.jpg") center / cover no-repeat;
  background-attachment: scroll;
  filter: saturate(0.58) contrast(1.08) brightness(0.52);
  opacity: 0.68;
  mix-blend-mode: normal;
  transform: scale(1.01);
}

.character-hero .hero-bg-layer::after {
  background:
    radial-gradient(circle at 64% 42%, color-mix(in srgb, var(--hero-accent), transparent 34%) 0 9rem, transparent 30rem),
    radial-gradient(circle at 48% 82%, color-mix(in srgb, var(--hero-accent), transparent 70%) 0 13rem, transparent 34rem),
    linear-gradient(120deg, color-mix(in srgb, var(--hero-dark), transparent 18%), transparent 52%);
  opacity: 0.52;
  mix-blend-mode: screen;
  animation: none;
  transition: opacity var(--dur-long) var(--ease-out);
}

.character-hero .hero-vignette {
  background: transparent;
  box-shadow:
    inset 0 -13rem 10rem -7rem var(--color-paper),
    inset 7rem 0 10rem -7rem color-mix(in oklch, var(--color-paper) 86%, transparent);
}

.hero-grain {
  background: none;
  opacity: 0;
}

.hero-content {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  min-height: max(48rem, 100svh);
  padding-block: 9rem 5rem;
}

.character-copy,
html[dir="rtl"] .character-copy {
  z-index: 6;
  width: min(39vw, 34rem);
  max-width: 34rem;
  margin-inline: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2)) auto;
}

.character-copy :is(h1, [data-character-name]),
html[dir="rtl"] .character-copy :is(h1, [data-character-name]) {
  max-width: 7ch;
  margin: 0;
  color: var(--hero-accent);
  font-size: clamp(4.75rem, 8.7vw, 8.25rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.028em;
  text-shadow: 0 1.75rem 4rem color-mix(in oklch, black 54%, transparent);
  text-transform: none;
}

.character-copy .eyebrow {
  color: var(--color-brass);
}

.character-role {
  margin-block-start: var(--space-sm);
  color: color-mix(in srgb, var(--hero-accent) 82%, var(--color-ink));
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 2px;
  text-shadow: 0 0.625rem 1.75rem color-mix(in oklch, black 58%, transparent);
  text-transform: uppercase;
}

.rating {
  gap: 0.35rem;
  margin-block-start: var(--space-md);
}

.rating span {
  width: 0.8rem;
  height: 0.8rem;
  background: var(--color-brass);
  filter: none;
}

.hero-copy {
  max-width: 32rem;
  margin-block-start: var(--space-md);
  color: var(--color-ink-2);
  font-size: clamp(0.96rem, 1.3vw, 1.08rem);
  line-height: 1.75;
}

.character-name-wall {
  inset: 9vh 0 auto;
  color: color-mix(in srgb, var(--hero-accent), transparent 62%);
  font-size: clamp(8rem, 19vw, 18rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 0.72;
  opacity: 0.35;
  text-transform: none;
}

.character-name-wall.is-changing {
  animation-duration: 320ms;
}

.character-mode-toggle {
  inset: 7.25rem max(var(--page-gutter), calc((100vw - var(--page-max)) / 2)) auto auto;
  min-width: 7.5rem;
  gap: 0.1rem;
  padding: 0.7rem 0.9rem;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}

.character-mode-toggle:hover,
.character-mode-toggle:focus-visible {
  border-color: var(--color-brass);
  transform: translateY(-1px);
}

.character-mode-toggle span {
  color: var(--color-muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.character-mode-toggle strong {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.character-stage {
  inset: 15vh max(var(--page-gutter), calc((100vw - var(--page-max)) / 2)) 3vh auto;
  width: min(57vw, 49rem);
}

.character-ring {
  height: min(75vh, 46rem);
}

.character-card {
  width: clamp(9rem, 16.5vw, 15.5rem);
}

.character-card::before {
  display: block;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent), transparent 40%) 0%, transparent 66%);
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}

.character-card img {
  inset-inline-start: 50%;
  width: auto;
  max-width: none;
  height: min(69vh, 43rem);
  transform: translateX(-50%);
}

.character-card.is-active {
  --scale: 1.08;
  filter: drop-shadow(0 2rem 2.25rem color-mix(in oklch, black 66%, transparent));
}

.character-card.is-active::before {
  opacity: 0.54;
  animation: none;
}

.character-card.is-prev {
  --x: -13rem;
  --y: 2.75rem;
  --scale: 0.74;
  opacity: 0.44;
  filter: saturate(0.5) brightness(0.58);
}

.character-card.is-next {
  --x: 13rem;
  --y: 2.75rem;
  --scale: 0.74;
  opacity: 0.44;
  filter: saturate(0.5) brightness(0.58);
}

.character-card.is-far-prev {
  --x: -21rem;
  --y: 5rem;
  --scale: 0.48;
  opacity: 0.12;
}

.character-card.is-far-next {
  --x: 21rem;
  --y: 5rem;
  --scale: 0.48;
  opacity: 0.12;
}

.character-controls {
  display: flex;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
  padding: 0.35rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}

.character-controls span {
  min-width: 4.5rem;
  color: var(--color-brass);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.character-controls strong {
  color: var(--color-muted);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.carousel-arrow {
  width: 2.75rem;
  height: 2.75rem;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: 50%;
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.carousel-arrow:is(:hover, :focus-visible) {
  border-color: var(--color-brass);
  background: var(--color-paper-3);
  color: var(--color-brass);
  transform: translateY(-1px);
}

.carousel-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 1.7;
}

.hero-actions {
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
}

.btn,
.preorder-btn {
  min-height: 3rem;
  padding: 0.8rem 1.15rem;
  border-radius: var(--radius-input);
  font-family: var(--font-body);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-primary,
.preorder-btn-primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: none;
}

.btn-secondary,
.preorder-btn-secondary {
  border-color: var(--color-rule-2);
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: none;
}

.btn:is(:hover, :focus-visible),
.preorder-btn:is(:hover, :focus-visible) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* World editorial grid */
.section {
  padding-block: clamp(5rem, 9vw, 8.5rem);
}

.world-section {
  border-block-start: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
}

.world-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
  gap: var(--space-md);
}

.world-panel {
  min-height: 15rem;
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  box-shadow: none;
  backdrop-filter: none;
}

.world-panel-main {
  grid-row: span 2;
  padding: 0;
  overflow: hidden;
}

.world-panel-main img {
  width: 100%;
  height: clamp(22rem, 38vw, 34rem);
  object-fit: cover;
  filter: saturate(0.74) contrast(1.08);
}

.world-panel-main div {
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
}

.world-panel > span,
.style-copy > span,
.world-panel-main div > span {
  color: var(--color-brass);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.world-panel h3,
.style-copy h3 {
  margin: var(--space-xs) 0 0;
  color: var(--color-ink);
  font-size: clamp(2.2rem, 3.7vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.94;
  text-transform: none;
}

.world-panel p {
  max-width: 58ch;
  margin-block-end: 0;
  color: var(--color-ink-2);
  line-height: 1.72;
}

.world-panel.accent {
  border-color: var(--color-rule);
  background: var(--color-paper-3);
}

.style-panel {
  min-height: 24rem;
  grid-template-columns: minmax(0, 0.92fr) minmax(15rem, 0.88fr);
  gap: 0;
  padding: 0;
  background: var(--color-paper-3);
}

.style-panel::before,
.style-panel::after {
  display: none;
}

.style-copy {
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
}

.skin-showcase {
  min-height: 22rem;
  border-inline-start: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.skin-showcase::before {
  inset: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: none;
}

.skin-showcase::after {
  display: none;
}

.skin-item {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  box-shadow: 0 0.75rem 2rem color-mix(in oklch, black 32%, transparent);
  animation: none;
}

.skin-item:hover {
  border-color: var(--color-brass);
  box-shadow: 0 1rem 2.5rem color-mix(in oklch, black 42%, transparent);
  filter: none;
  transform: translateY(-0.2rem);
}

/* Media */
.media-section {
  border-block: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.media-section::before,
.media-section::after {
  display: none;
}

.section-heading {
  max-width: 58rem;
  margin-block-end: var(--space-2xl);
}

.section-heading h2 {
  max-width: 16ch;
  color: var(--color-ink);
  font-size: clamp(3rem, 6.6vw, 6.25rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-transform: none;
}

.media-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.85fr;
  gap: var(--space-md);
}

.media-grid figure {
  min-height: clamp(20rem, 36vw, 35rem);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-3);
  box-shadow: none;
  backdrop-filter: none;
}

.media-grid figure:nth-child(2),
.media-grid figure:nth-child(3) {
  min-height: clamp(18rem, 31vw, 30rem);
  align-self: end;
}

.media-grid img {
  min-height: inherit;
  filter: saturate(0.72) contrast(1.08) brightness(0.82);
  transition:
    filter var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}

.media-grid figure::after {
  background: color-mix(in oklch, var(--color-paper) 22%, transparent);
}

.media-grid figure:hover img {
  filter: saturate(0.9) contrast(1.08) brightness(0.9);
  transform: scale(1.018);
}

.media-grid figcaption {
  inset: auto var(--space-md) var(--space-md);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Download */
.download-page {
  background: var(--color-paper);
}

.download-hero {
  min-height: 100svh;
  padding-block: 9rem 6rem;
  background: var(--color-paper);
}

.download-hero::before {
  background: url("assets/download/download-showcase.png") center / cover no-repeat;
  filter: saturate(0.46) contrast(1.05) brightness(0.35);
  opacity: 0.42;
  transform: scale(1.02);
  animation: none;
}

.download-hero::after {
  background: color-mix(in oklch, var(--color-paper) 42%, transparent);
  box-shadow: inset 0 -10rem 8rem -6rem var(--color-paper);
}

.download-dust {
  display: none;
}

.download-shell {
  grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.72fr);
  gap: clamp(var(--space-xl), 7vw, var(--space-4xl));
}

.download-copy {
  max-width: 42rem;
}

.download-copy h1 {
  max-width: 9ch;
  color: var(--color-ink);
  font-size: clamp(4.5rem, 8.5vw, 8rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.78;
  overflow-wrap: normal;
  word-break: keep-all;
  text-shadow: 0 1.75rem 4rem color-mix(in oklch, black 54%, transparent);
  text-transform: none;
}

.download-copy h1 span {
  white-space: nowrap;
}

.download-copy > p:not(.eyebrow) {
  max-width: 36rem;
  margin-block-start: var(--space-lg);
  color: var(--color-ink-2);
  line-height: 1.75;
}

.download-platforms {
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}

.download-platform {
  min-height: 6.25rem;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  box-shadow: none;
}

.download-platform::before {
  display: none;
}

.download-platform:is(:hover, :focus-visible) {
  border-color: var(--color-brass);
  background: var(--color-paper-3);
  box-shadow: none;
  transform: translateY(-0.15rem);
}

.download-platform-android,
.download-platform-ios {
  border-color: var(--color-rule-2);
}

.platform-icon--art {
  width: 4rem;
  height: 4rem;
  border: 0;
  background: none;
}

.platform-icon--art img {
  filter: drop-shadow(0 0.5rem 1rem color-mix(in oklch, black 42%, transparent));
}

.download-platform small {
  color: var(--color-muted);
  font-size: 0.67rem;
  letter-spacing: 0.08em;
}

.download-platform strong {
  color: var(--color-ink);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-transform: none;
}

.download-specs {
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
}

.download-specs span {
  min-height: 2.25rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-size: 0.64rem;
  letter-spacing: 0.07em;
}

.download-showcase::before,
.download-showcase::after {
  display: none;
}

.download-frame {
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-brass) 48%, var(--color-rule));
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  box-shadow: var(--shadow-deep);
  transform: none;
  animation: none;
}

.download-frame::before {
  margin: var(--space-xs);
  border-color: color-mix(in oklch, var(--color-brass) 42%, var(--color-rule));
  border-radius: calc(var(--radius-card) - 0.15rem);
}

.download-frame::after {
  display: none;
}

.download-frame img {
  filter: saturate(0.82) contrast(1.05);
}

/* Support and privacy */
.subpage {
  background: var(--color-paper);
}

.page-hero {
  min-height: 32rem;
  display: grid;
  align-items: end;
  padding-block: 10rem 5.5rem;
  border-block-end: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 9999px color-mix(in oklch, var(--color-paper) 74%, transparent);
}

.page-hero::before {
  background: url("assets/hn-gunslinger-saloon.jpeg") center / cover no-repeat;
  filter: saturate(0.42) contrast(1.08) brightness(0.46);
  opacity: 0.44;
}

.page-hero .container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
}

.page-hero h1 {
  max-width: 13ch;
  color: var(--color-ink);
  font-size: clamp(4rem, 7.8vw, 7.25rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.88;
  text-transform: none;
}

.page-hero p:not(.eyebrow) {
  max-width: 44rem;
  margin-block-start: var(--space-lg);
  color: var(--color-ink-2);
  line-height: 1.72;
}

.page-shell {
  padding-block: clamp(4.5rem, 8vw, 8rem);
}

.support-page-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(20rem, 0.72fr);
  gap: var(--space-md);
}

.support-stack {
  gap: var(--space-md);
}

.support-card,
.support-feature,
.support-form,
.page-sidebar,
.policy-content {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  box-shadow: none;
  backdrop-filter: none;
}

.support-card,
.support-feature,
.support-form {
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
}

.support-card h2,
.support-feature h2,
.support-form h2,
.policy-content h2 {
  color: var(--color-ink);
  font-size: clamp(2rem, 3.7vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.96;
  text-transform: none;
}

.support-feature h2 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.support-card p,
.support-feature p,
.support-form label,
.policy-content p,
.policy-content li {
  color: var(--color-ink-2);
}

.support-methods {
  gap: var(--space-2xs);
  margin-block-start: var(--space-lg);
}

.support-methods a {
  min-height: 4rem;
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.support-methods a::after {
  color: var(--color-brass);
}

.support-methods a:is(:hover, :focus-visible) {
  border-color: var(--color-brass);
  background: var(--color-paper-3);
  transform: translateY(-1px);
}

.support-feature img {
  width: 5.75rem;
  border-radius: var(--radius-card);
}

.support-form form {
  gap: var(--space-md);
}

.support-form label {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.support-form input,
.support-form textarea {
  min-height: 3.25rem;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: none;
}

.support-form textarea {
  min-height: 10rem;
}

.support-form input:is(:hover, :focus-visible),
.support-form textarea:is(:hover, :focus-visible) {
  border-color: var(--color-brass);
  background: var(--color-paper);
}

.support-form input:focus-visible,
.support-form textarea:focus-visible {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: 0.1rem;
}

.policy-layout {
  grid-template-columns: minmax(14rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(var(--space-md), 4vw, var(--space-xl));
}

.page-sidebar {
  top: 7rem;
  padding: var(--space-lg);
}

.page-sidebar img {
  width: 4.75rem;
  margin-block-end: var(--space-lg);
}

.page-sidebar p,
.page-sidebar dd {
  color: var(--color-ink-2);
}

.page-sidebar dt {
  color: var(--color-brass);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.page-sidebar a,
.policy-content a,
.support-card a {
  color: var(--color-brass);
}

.policy-content {
  max-width: 68rem;
  padding: clamp(var(--space-lg), 5vw, var(--space-3xl));
}

.policy-content section {
  padding-block: clamp(var(--space-lg), 4vw, var(--space-xl));
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.policy-content h2 {
  max-width: 20ch;
}

.policy-content h3 {
  margin-block-start: var(--space-lg);
  color: var(--color-brass);
  font-size: var(--text-md);
}

.policy-content p,
.policy-content li {
  max-width: 65ch;
  line-height: 1.78;
}

/* Private pre-order */
.preorder-private-page main {
  background: var(--color-paper);
}

.preorder-section {
  min-height: 100svh;
  padding-block: 9rem 6rem;
  border: 0;
  background: var(--color-paper);
}

.preorder-bg {
  background: url("assets/preorder/preorder-bg-wide.jpeg") center / cover no-repeat;
  filter: saturate(0.42) contrast(1.05) brightness(0.36);
  opacity: 0.38;
  transform: none;
}

.preorder-fog {
  background: color-mix(in oklch, var(--color-paper) 42%, transparent);
  animation: none;
}

.preorder-dust {
  display: none;
}

.preorder-section::before,
.preorder-section::after {
  display: none;
}

.preorder-layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.78fr);
  gap: clamp(var(--space-xl), 8vw, var(--space-4xl));
}

.preorder-copy {
  max-width: 38rem;
}

.preorder-page-title {
  color: var(--color-brass);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.preorder-badge {
  width: max-content;
  margin-block: 0 var(--space-md);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-brass);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.preorder-copy h2 {
  max-width: 11ch;
  color: var(--color-ink);
  font-size: clamp(3.6rem, 6.8vw, 6.7rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.88;
  text-transform: none;
}

.preorder-copy > p:not(.preorder-badge) {
  max-width: 34rem;
  color: var(--color-ink-2);
  line-height: 1.75;
}

.preorder-actions {
  gap: var(--space-xs);
}

.preorder-poster-wrap {
  filter: none;
}

.poster-hanger {
  opacity: 0.55;
}

.preorder-poster {
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-brass) 50%, var(--color-rule));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-deep);
  transform: none;
}

.preorder-poster::before,
.preorder-poster::after {
  display: none;
}

.poster-portrait-rifle {
  width: min(100%, 18rem);
  border-color: color-mix(in oklch, var(--color-poster-ink) 38%, transparent);
  background: #130f0d;
}

.poster-portrait-rifle .poster-character-art {
  filter: saturate(0.92) contrast(1.04);
}

/* Ft5 Statement */
.site-footer {
  position: relative;
  padding-block: clamp(4.5rem, 8vw, 8rem) var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
}

.site-footer::before {
  content: "HN GUNSLINGER";
  display: block;
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  margin-inline: auto;
  padding-block-end: clamp(var(--space-xl), 6vw, var(--space-3xl));
  border-block-end: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(3.7rem, 10.5vw, 10.5rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.76;
  white-space: nowrap;
}

.footer-inner,
.download-page .footer-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "brand socials links"
    "brand copy copy";
  gap: var(--space-lg);
  align-items: center;
  padding-block-start: var(--space-xl);
}

.footer-brand,
.footer-inner > img {
  grid-area: brand;
  width: 3.5rem;
}

.footer-brand img,
.footer-inner > img {
  width: 100%;
  filter: none;
}

.footer-socials {
  grid-area: socials;
  justify-content: flex-start;
  gap: var(--space-2xs);
}

.footer-socials a {
  width: 2.75rem;
  height: 2.75rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 50%;
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  box-shadow: none;
}

.footer-socials a::after {
  border-color: var(--color-rule-2);
  background: var(--color-paper-2);
  color: var(--color-brass);
}

.footer-socials a:is(:hover, :focus-visible) {
  border-color: var(--color-brass);
  background: var(--color-paper-2);
  color: var(--color-brass);
  box-shadow: none;
  transform: translateY(-1px);
}

.footer-socials svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  stroke-width: 1.6;
}

.footer-inner p {
  grid-area: copy;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-align: right;
}

.footer-links {
  grid-area: links;
  justify-content: flex-end;
  gap: var(--space-md);
  margin: 0;
}

.footer-links a {
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.footer-links a:is(:hover, :focus-visible, .is-active) {
  color: var(--color-brass);
}

html[dir="rtl"] .site-header {
  flex-direction: row-reverse;
}

html[dir="rtl"] .character-mode-toggle {
  right: auto;
  left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
}

html[dir="rtl"] .character-stage {
  right: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
  left: auto;
}

html[dir="rtl"] .character-copy {
  margin-right: auto;
  margin-left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
}

html[lang="ar"] body,
html[lang="ar"] .site-nav,
html[lang="ar"] .btn,
html[lang="ar"] .preorder-btn {
  font-family: var(--font-arabic);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  font-family: "Cormorant Garamond", "Noto Sans Arabic", serif;
}

@media (max-width: 72rem) {
  .site-header {
    gap: var(--space-sm);
  }

  .site-nav {
    gap: var(--space-sm);
  }

  .site-nav a {
    font-size: 0.65rem;
  }

  .character-copy,
  html[dir="rtl"] .character-copy {
    width: min(43vw, 31rem);
  }

  .character-stage {
    width: min(58vw, 43rem);
  }

  .world-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(17rem, 0.92fr);
  }

  .style-panel {
    grid-template-columns: 1fr;
  }

  .skin-showcase {
    min-height: 19rem;
    border-inline-start: 0;
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }
}

@media (max-width: 57.5rem) {
  html {
    scroll-padding-top: 6rem;
  }

  .site-header {
    inset: var(--space-xs) auto auto 50%;
    width: calc(100vw - (var(--space-md) * 2));
    max-width: 44rem;
    min-height: 4rem;
    padding: 0.42rem 0.55rem;
  }

  .brand {
    width: 2.9rem;
    height: 2.9rem;
    flex-basis: 2.9rem;
  }

  .language-switcher {
    margin-inline-start: auto;
  }

  .nav-toggle {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .site-nav {
    position: absolute;
    inset: calc(100% + var(--space-xs)) 0 auto;
    display: grid;
    gap: 0;
    width: 100%;
    padding: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
    box-shadow: var(--shadow-deep);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--dur-short) var(--ease-out),
      transform var(--dur-short) var(--ease-out);
  }

  body.nav-open .site-nav {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-nav a {
    min-height: 3rem;
    padding-inline: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule);
    font-size: var(--text-xs);
  }

  .site-nav a:last-child {
    border-block-end: 0;
  }

  .site-nav a::after {
    display: none;
  }

  .character-hero,
  .hero-content {
    min-height: 57rem;
  }

  .hero-content {
    justify-content: flex-start;
    padding-block: 8rem 4rem;
  }

  .character-copy,
  html[dir="rtl"] .character-copy {
    width: min(100%, 39rem);
    max-width: none;
    margin-inline: var(--page-gutter);
  }

  .character-copy :is(h1, [data-character-name]),
  html[dir="rtl"] .character-copy :is(h1, [data-character-name]) {
    max-width: 9ch;
    font-size: clamp(4.3rem, 15vw, 7rem);
  }

  .character-stage,
  html[dir="rtl"] .character-stage {
    inset: 24rem 0 auto;
    width: 100%;
    height: 29rem;
  }

  .character-ring {
    height: 29rem;
  }

  .character-card {
    width: clamp(8.5rem, 28vw, 13rem);
  }

  .character-card img {
    height: 27rem;
  }

  .character-card.is-prev {
    --x: -11rem;
  }

  .character-card.is-next {
    --x: 11rem;
  }

  .character-card.is-far-prev {
    --x: -17rem;
  }

  .character-card.is-far-next {
    --x: 17rem;
  }

  .character-mobile-space {
    display: block;
    height: 27rem;
  }

  .character-mode-toggle,
  html[dir="rtl"] .character-mode-toggle {
    top: 6.4rem;
    right: var(--page-gutter);
    left: auto;
  }

  .world-grid,
  .download-shell,
  .support-page-grid,
  .policy-layout,
  .preorder-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .world-panel-main {
    grid-row: auto;
  }

  .style-panel {
    grid-template-columns: minmax(0, 0.92fr) minmax(15rem, 0.88fr);
  }

  .skin-showcase {
    min-height: 22rem;
    border-block-start: 0;
    border-inline-start: var(--rule-hair) solid var(--color-rule);
  }

  .media-grid {
    grid-template-columns: 1fr 1fr;
  }

  .media-grid figure:first-child {
    grid-column: 1 / -1;
  }

  .download-hero,
  .preorder-section {
    padding-block-start: 8rem;
  }

  .download-showcase,
  .preorder-poster-wrap {
    width: min(100%, 31rem);
    justify-self: center;
  }

  .page-hero {
    min-height: 28rem;
    padding-block: 8.5rem 4rem;
  }

  .page-sidebar {
    position: static;
  }
}

@media (max-width: 40rem) {
  :root {
    --page-gutter: 1rem;
  }

  .site-header {
    width: calc(100vw - 1.5rem);
    max-width: none;
  }

  .brand {
    width: 2.7rem;
    height: 2.7rem;
    flex-basis: 2.7rem;
  }

  .language-toggle,
  .nav-toggle {
    width: 2.65rem;
    min-width: 2.65rem;
    min-height: 2.65rem;
  }

  .language-toggle {
    padding-inline: 0.55rem;
  }

  .character-hero,
  .hero-content {
    min-height: max(61rem, 100svh);
  }

  .character-hero .hero-bg-layer::after {
    background:
      radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--hero-accent), transparent 28%) 0 7.5rem, transparent 19rem),
      radial-gradient(circle at 50% 73%, color-mix(in srgb, var(--hero-accent), transparent 58%) 0 10rem, transparent 26rem),
      linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--hero-dark), transparent 28%) 100%);
    opacity: 0.58;
  }

  .hero-content {
    padding-block: 7.35rem 3.5rem;
  }

  .character-copy,
  html[dir="rtl"] .character-copy {
    width: calc(100% - (var(--page-gutter) * 2));
    margin-inline: auto;
  }

  .character-copy :is(h1, [data-character-name]),
  html[dir="rtl"] .character-copy :is(h1, [data-character-name]) {
    max-width: 100%;
    font-size: clamp(3.8rem, 18vw, 5.4rem);
    line-height: 0.84;
  }

  .character-role {
    font-size: 1rem;
  }

  .character-name-wall {
    color: color-mix(in srgb, var(--hero-accent), transparent 48%);
    opacity: 0.16;
  }

  .rating {
    margin-block-start: var(--space-sm);
  }

  .hero-copy {
    margin-block-start: var(--space-sm);
    font-size: 0.91rem;
    line-height: 1.62;
  }

  .character-mode-toggle,
  html[dir="rtl"] .character-mode-toggle {
    position: absolute;
    top: 5.85rem;
    right: var(--page-gutter);
    left: auto;
    min-width: 6.5rem;
    padding: 0.6rem 0.7rem;
  }

  html[dir="rtl"] .character-mode-toggle {
    right: auto;
    left: var(--page-gutter);
    text-align: right;
  }

  .character-stage,
  html[dir="rtl"] .character-stage {
    inset: 7.25rem 0 auto;
    height: 28.5rem;
  }

  .character-ring {
    height: 28.5rem;
  }

  .character-card {
    width: clamp(8.5rem, 38vw, 11rem);
  }

  .character-card img {
    height: 28rem;
  }

  .character-card.is-active::before {
    opacity: 0.46;
  }

  .character-card.is-prev {
    --x: -8.25rem;
    --y: 2rem;
    opacity: 0.26;
  }

  .character-card.is-next {
    --x: 8.25rem;
    --y: 2rem;
    opacity: 0.26;
  }

  .character-card.is-far-prev,
  .character-card.is-far-next {
    opacity: 0;
  }

  .character-mobile-space {
    height: 30rem;
  }

  .character-controls {
    position: absolute;
    z-index: 10;
    inset: 20.5rem var(--page-gutter) auto;
    display: flex;
    width: auto;
    max-width: none;
    justify-content: space-between;
    margin: 0;
    padding-inline: 0.2rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
    pointer-events: none;
  }

  .character-controls span,
  .character-controls strong {
    display: none;
  }

  .carousel-arrow {
    width: 3rem;
    height: 3rem;
    border-color: color-mix(in oklch, var(--color-brass) 62%, var(--color-rule));
    background: color-mix(in oklch, var(--color-paper-2) 96%, transparent);
    box-shadow: 0 0.75rem 2rem color-mix(in oklch, black 44%, transparent);
    pointer-events: auto;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
    margin-block-start: var(--space-md);
  }

  .hero-actions .btn {
    width: 100%;
    min-height: 2.85rem;
    gap: var(--space-2xs);
    padding-inline: var(--space-2xs);
    font-size: 0.63rem;
    letter-spacing: 0.055em;
  }

  .section {
    padding-block: 4.5rem;
  }

  .world-grid,
  .media-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .world-panel-main img {
    height: 20rem;
  }

  .style-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .skin-showcase {
    min-height: 20rem;
    border-inline-start: 0;
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }

  .section-heading {
    margin-block-end: var(--space-xl);
  }

  .section-heading h2 {
    font-size: clamp(2.8rem, 14vw, 4.2rem);
  }

  .media-grid figure,
  .media-grid figure:nth-child(2),
  .media-grid figure:nth-child(3) {
    min-height: 23rem;
  }

  .media-grid figure:first-child {
    grid-column: auto;
  }

  .download-hero,
  .preorder-section {
    padding-block: 7.25rem 4rem;
  }

  .download-copy h1 {
    font-size: clamp(3.8rem, 20vw, 5.6rem);
    line-height: 0.8;
  }

  .download-platforms,
  .preorder-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .download-platform,
  .preorder-btn {
    width: 100%;
  }

  .download-platform {
    min-height: 5.5rem;
  }

  .download-showcase,
  .preorder-poster-wrap {
    width: min(100%, 26rem);
  }

  .page-hero {
    min-height: 25rem;
    padding-block: 7.5rem 3.5rem;
  }

  .page-hero h1 {
    max-width: 100%;
    font-size: clamp(3.2rem, 15vw, 4.6rem);
  }

  .page-shell {
    padding-block: 3.75rem;
  }

  .support-methods {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-card h2,
  .support-form h2,
  .policy-content h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .policy-content {
    padding: var(--space-lg);
  }

  .preorder-copy h2 {
    max-width: 100%;
    font-size: clamp(3.1rem, 15vw, 4.5rem);
  }

  .poster-portrait-rifle {
    width: min(100%, 14rem);
  }

  .site-footer::before {
    padding-block-end: var(--space-xl);
    font-size: clamp(3rem, 17vw, 5.7rem);
    line-height: 0.82;
    white-space: normal;
  }

  .footer-inner,
  .download-page .footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "socials"
      "links"
      "copy";
    justify-items: center;
    gap: var(--space-md);
  }

  .footer-socials,
  .footer-links {
    justify-content: center;
  }

  .footer-inner p {
    text-align: center;
  }
}

@media (max-width: 22rem) {
  .site-header {
    gap: 0.35rem;
    width: calc(100vw - 1rem);
  }

  .brand {
    width: 2.5rem;
    height: 2.5rem;
    flex-basis: 2.5rem;
  }

  .language-toggle,
  .nav-toggle {
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  .hero-actions .btn {
    font-size: 0.58rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn,
  .preorder-btn,
  .download-platform,
  .support-methods a,
  .footer-socials a {
    transition:
      border-color var(--dur-short) var(--ease-out),
      background-color var(--dur-short) var(--ease-out),
      color var(--dur-short) var(--ease-out),
      transform var(--dur-short) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}