/* --- Custom Local Fonts --- */
@font-face {
  font-family: "Metal Mania";
  src: url("../fonts/MetalMania-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SUSE";
  src:
    url("../fonts/SUSE-VariableFont_wght.ttf") format("truetype-variations"),
    url("../fonts/SUSE-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Devoidant - Game Website Stylesheet
   Built from the Figma "Website Wrapper" frame (1920px wide artboard).
   Desktop layout: every Figma measurement is expressed as N * var(--u),
   where --u is one Figma pixel scaled to the viewport (capped at 1px).
   ========================================================================== */

/* --- Design Tokens (Figma variables) --- */
:root {
  --beige-high-contrast: #fff2dd;
  --red-high-contrast: #c63033;
  --red-low-contrast: #5e1516;
  --red-very-low-contrast: #3b1314;
  --beige-low-contrast: #ada495;
  --pure-black: #000000;
  --container-shadow: rgba(0, 0, 0, 0.8);

  --font-heading: "Metal Mania", cursive, fantasy, serif;
  --font-sans:
    "SUSE", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* One Figma pixel at the current viewport width */
  --u: min(1px, calc(100vw / 1920));

  --header-height: calc(144.27 * var(--u));
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
}

/* --- Reset & Base Styles --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: normal;
  color: var(--beige-high-contrast);
  background-color: var(--pure-black);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
}

body {
  animation: page-fade-in 0.45s var(--ease-out) both;
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-color: transparent;
  position: relative;
}

/* Figma: Website Wrapper fill — black, background art at 40%, slate tint + vignette */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--pure-black);
  pointer-events: none;
}

/* Blurred slightly for text legibility; bled past the edges so the blur
   doesn't fade to black along the viewport sides */
.site-bg::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: url("../images/hero/background.webp") center top / cover no-repeat;
  opacity: 0.4;
  filter: blur(3px);
}

.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(
      to right,
      #000 0%,
      rgba(0, 0, 0, 0.6) 12%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.6) 88%,
      #000 100%
    ),
    linear-gradient(rgba(48, 62, 71, 0.2), rgba(48, 62, 71, 0.2));
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 400;
}

/* Accessible to screen readers and search engines, not shown on screen */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Metal Mania is used at its natural spacing (0%) unless Figma says otherwise */
.signboard,
.feature-title,
.footer-title,
.ornate-btn span,
.menu-item {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0;
}

/* ==========================================================================
   Header (Figma: Menu)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  padding: calc(32 * var(--u));
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-logo {
  flex-shrink: 0;
  width: calc(336.12 * var(--u));
}

.header-logo img {
  width: 100%;
}

.main-nav {
  flex: 1 0 0;
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: calc(48 * var(--u));
}

/* Figma: Menu Item — Type=Default / Type=Focus (hover → Focus, dissolve 300ms ease-out) */
.menu-item {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  font-size: max(14px, calc(24 * var(--u)));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--beige-high-contrast);
  transition: color 0.3s var(--ease-out);
}

.menu-eye {
  flex-shrink: 0;
  width: calc(51.6 * var(--u));
  height: calc(51.6 * var(--u));
  background: url("../images/components/eye-link.webp") center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

.menu-item:hover,
.menu-item:focus-visible,
.menu-item.is-active {
  color: var(--red-high-contrast);
}

.menu-item:hover .menu-eye,
.menu-item:focus-visible .menu-eye,
.menu-item.is-active .menu-eye {
  opacity: 1;
}

.menu-item:focus-visible {
  outline: none;
}

/* Mobile burger + full-screen menu: hidden on desktop */
.menu-toggle,
.mobile-menu {
  display: none;
}

/* Wishlist button (Figma: Title Screen Menu, rotated -9.78°) + Wisps mascot */
.header-cta {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(500 * var(--u));
  height: calc(220 * var(--u));
  pointer-events: none;
}

.header-wishlist-btn {
  position: absolute;
  top: calc(27.37 * var(--u));
  right: calc(60.32 * var(--u));
  width: calc(272.78 * var(--u));
  rotate: -9.78deg;
  font-size: calc(27.2 * var(--u));
  pointer-events: auto;
}

.header-wisps {
  position: absolute;
  top: calc(70.43 * var(--u));
  right: calc(270.11 * var(--u));
  width: calc(147.46 * var(--u));
  scale: -1 1;
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   Ornate parchment button (Figma: Title Screen Menu, State=Focused)
   The art is a 16:9 frame, offset 3.82% from the top of the component.
   ========================================================================== */
.ornate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 272.78 / 159.5;
  background: url("../images/components/button-parchment.webp") center bottom / 100% auto no-repeat;
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.3s var(--ease-out),
    filter 0.3s var(--ease-out);
}

.ornate-btn span {
  /* Centered on the parchment plate (measured at 52.4% of the button's height),
     nudged 0.04em down because Metal Mania's caps sit high in their line box */
  position: absolute;
  top: 52.4%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 0.04em));
  font-size: inherit;
  line-height: normal;
  color: var(--pure-black);
  white-space: nowrap;
}

.ornate-btn:hover,
.ornate-btn:focus-visible {
  transform: scale(1.05);
  filter: brightness(1.1);
  outline: none;
}

.ornate-btn:active {
  transform: scale(0.98);
}

/* ==========================================================================
   Sections — each Figma section is a 1920 × 1080 block
   ========================================================================== */
main {
  padding-top: calc(146.27 * var(--u));
}

.section {
  position: relative;
  width: 100%;
  height: calc(1080 * var(--u));
  margin-bottom: calc(2 * var(--u));
}

/* Place a child at Figma x-coordinate X, keeping the 1920 artboard centered */
.section > * {
  position: absolute;
}

/* Figma: Signboards Shops (Blue / Gold variants)
   The plate sits at 61.6% of the art's height: padding-top of 23.2% of the height
   (= 13.05% of the width) moves the flex center there, +0.08em optical correction. */
.signboard {
  --sb-w: calc(476.87 * var(--u));
  top: calc(29 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: var(--sb-w);
  aspect-ratio: 476.87 / 268.24;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--sb-w) * 0.1305 + 0.08em);
  font-size: calc(32 * var(--u));
  line-height: 0.85;
  text-transform: capitalize;
  white-space: nowrap;
  color: var(--pure-black);
  background: center / contain no-repeat;
  z-index: 3;
}

.signboard-blue {
  background-image: url("../images/components/signboard-blue.webp");
}

.signboard-gold {
  background-image: url("../images/components/signboard-gold.webp");
  font-size: calc(39.74 * var(--u));
}

/* --- Hero --- */
.hero-logo {
  top: calc(80.54 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: calc(1171.33 * var(--u));
  z-index: 2;
}

.hero-logo img {
  width: 100%;
}

.hero-synopsis {
  top: calc(429 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: max(300px, calc(473 * var(--u)));
  font-size: max(15px, calc(24 * var(--u)));
  line-height: normal;
  text-align: center;
  color: var(--beige-high-contrast);
  z-index: 2;
}

.hero-trailer-btn {
  top: calc(607 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: calc(280.64 * var(--u));
  font-size: calc(28 * var(--u));
  z-index: 2;
}

.hero-char {
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* <picture> wrapper: the image fills the positioned box */
.hero-char img {
  width: 100%;
}

.hero-char-left {
  top: calc(372.76 * var(--u));
  left: calc(50% + (-73.38 - 960) * var(--u));
  width: calc(800.61 * var(--u));
}

.hero-char-right {
  top: calc(326.81 * var(--u));
  left: calc(50% + (1217.77 - 960) * var(--u));
  width: calc(764.1 * var(--u));
}

/* --- Trailer --- */
.trailer-section .signboard {
  z-index: 4;
}

.video-container {
  top: calc(297 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: calc(1124 * var(--u));
  aspect-ratio: 1124 / 705;
  z-index: 2;
}

/* Video slot inside the Biomech Frog Frame: 960 × 540 at (82, 84) */
.video-wrapper {
  position: absolute;
  left: 7.3%;
  top: 11.91%;
  width: 85.41%;
  height: 76.6%;
  background: var(--pure-black);
  box-shadow: 0 calc(42.24 * var(--u)) calc(42.24 * var(--u)) var(--container-shadow);
  overflow: hidden;
}

.video-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.arm {
  width: calc(1155.1 * var(--u));
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.arm-left {
  top: calc(410 * var(--u));
  left: calc(50% + (-501 - 960) * var(--u));
}

.arm-right {
  top: calc(381 * var(--u));
  left: calc(50% + (1259 - 960) * var(--u));
}

/* --- Gameplay Features (Figma: Gameplay 1/2 + Gameplay 2/2) --- */
.gameplay-section {
  height: calc(2162 * var(--u));
}

.feature-group {
  top: calc(353.5 * var(--u));
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  gap: calc(65 * var(--u));
}

.feature-group--second {
  top: calc(1294.5 * var(--u));
  gap: calc(47 * var(--u));
}

/* Figma: Gameplay Feature — Type=Text Left / Type=Text Right */
.feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(48 * var(--u));
  width: calc(1180.75 * var(--u));
}

.feature-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(24 * var(--u));
  width: calc(592.08 * var(--u));
  min-height: calc(221.18 * var(--u));
  padding-left: calc(70.08 * var(--u));
}

/* Vertical bone "Underline" ornament (rotated 90°, mirrored) */
.feature-text::before {
  content: "";
  position: absolute;
  left: calc(23.04 * var(--u));
  top: 50%;
  width: calc(221.18 * var(--u));
  height: calc(46.08 * var(--u));
  background: url("../images/components/underline.webp") center / 100% 100% no-repeat;
  transform: translate(-50%, -50%) rotate(90deg) scaleY(-1);
}

.feature-title {
  font-size: max(24px, calc(48 * var(--u)));
  line-height: normal;
  color: var(--red-high-contrast);
}

.feature-body {
  font-size: max(15px, calc(24 * var(--u)));
  line-height: normal;
  color: var(--beige-high-contrast);
}

.feature-media {
  flex-shrink: 0;
  width: calc(540.67 * var(--u));
  /* height: auto lets aspect-ratio win over the <video> height attribute */
  height: auto;
  aspect-ratio: 540.67 / 304.13;
  object-fit: cover;
  border-radius: calc(17.6 * var(--u));
  box-shadow: 0 calc(35.2 * var(--u)) calc(35.2 * var(--u)) var(--container-shadow);
}

.feature-wisps {
  position: absolute;
  width: calc(184.32 * var(--u));
  pointer-events: none;
}

.feature--text-left .feature-wisps {
  left: calc(1099.23 * var(--u));
  top: calc(149.66 * var(--u));
  scale: -1 1;
}

.feature--text-right .feature-wisps {
  left: calc(-82 * var(--u));
  top: calc(152.34 * var(--u));
}

/* --- 100% Handrawn --- */
.art-showcase {
  top: calc(248.16 * var(--u));
  left: calc(50% + (402.84 - 960) * var(--u));
  width: calc(1279.48 * var(--u));
  z-index: 3;
  pointer-events: none;
}

/* --- Screenshots carousel --- */
.screenshots-header {
  top: calc(29 * var(--u));
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  z-index: 3;
}

.screenshots-header .signboard {
  position: relative;
  top: auto;
  left: auto;
  translate: none;
}

/* Figma: Arrow Swap — Left / Right */
.arrow-btn {
  align-self: flex-start;
  margin-top: calc(120 * var(--u));
  width: calc(109 * var(--u));
  height: calc(109 * var(--u));
  background: url("../images/components/arrow.webp") center / contain no-repeat;
  transition:
    transform 0.3s var(--ease-out),
    filter 0.3s var(--ease-out);
}

.arrow-btn--prev {
  transform: scaleX(-1);
}

.arrow-btn--prev:hover,
.arrow-btn--prev:focus-visible {
  transform: scaleX(-1) scale(1.1);
  filter: brightness(1.15);
}

.arrow-btn--next:hover,
.arrow-btn--next:focus-visible {
  transform: scale(1.1);
  filter: brightness(1.15);
}

/* Horizontal scroller: swipe/trackpad scroll, snapping each screenshot to the center.
   Side items rest at 80% (Figma: 819 vs 1024); the centered one eases to 100%.
   Each item's negative margin keeps the Figma's 48px visual gap once scaled. */
.gallery {
  top: calc((367.51 - 64) * var(--u));
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  /* inline padding lets the first/last item reach the center (512 = half width, +27.2 = margin) */
  padding: calc(64 * var(--u)) calc(50% - 484.8 * var(--u));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.gallery-item {
  flex-shrink: 0;
  width: calc(1024 * var(--u));
  max-width: none;
  margin-inline: calc(-27.2 * var(--u));
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(32 * var(--u));
  box-shadow: 0 calc(32 * var(--u)) calc(32 * var(--u)) var(--container-shadow);
  scroll-snap-align: center;
  transform: scale(0.8);
  transition: transform 0.35s var(--ease-out);
  cursor: pointer;
}

.gallery-item.is-active {
  transform: none;
  cursor: default;
}

/* ==========================================================================
   Footer (Figma: Footer)
   ========================================================================== */
.site-footer {
  margin-bottom: 0;
  overflow: hidden;
  background: url("../images/hero/footer-bg.webp") center bottom / cover no-repeat;
}

.footer-cta {
  top: calc(41 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: calc(1171.33 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.footer-logo {
  width: 100%;
}

.footer-title {
  font-size: max(24px, calc(48 * var(--u)));
  line-height: normal;
  text-align: center;
  color: var(--beige-high-contrast);
}

.footer-arrow {
  width: calc(96 * var(--u));
  rotate: 90deg;
}

.steam-stage {
  position: relative;
  width: calc(1056 * var(--u));
  height: calc(423 * var(--u));
}

.steam-stage > * {
  position: absolute;
}

/* Official Steam widget: its page is a fixed 646×190 layout, so the iframe keeps
   that size and is scaled to the design width (843.6 at 1920). tan(atan2(a, b))
   turns the length ratio a/b into the unitless number that scale() needs. */
.steam-widget {
  --widget-scale: calc(843.6 / 646 * min(1, tan(atan2(100vw, 1920px))));
  left: calc(104 * var(--u));
  top: calc(140.75 * var(--u));
  width: calc(843.6 * var(--u));
  aspect-ratio: 646 / 190;
  border-radius: calc(4.8 * var(--u));
  overflow: hidden;
  box-shadow: 0 calc(84.48 * var(--u)) calc(84.48 * var(--u)) var(--container-shadow);
}

.steam-widget iframe {
  display: block;
  width: 646px;
  height: 190px;
  border: 0;
  /* Match the widget page's own (light) scheme: a mismatch with the site's dark
     color-scheme makes browsers paint an opaque white backdrop behind it */
  color-scheme: light;
  transform: scale(var(--widget-scale));
  transform-origin: 0 0;
}

.steam-wisps {
  pointer-events: none;
}

.steam-wisps--top {
  left: calc(670 * var(--u));
  top: 0;
  width: calc(196.61 * var(--u));
}

.steam-wisps--left {
  left: calc(12 * var(--u));
  top: calc(226 * var(--u));
  width: calc(163.84 * var(--u));
  rotate: -9.17deg;
}

.steam-wisps--right {
  left: calc(916 * var(--u));
  top: calc(283 * var(--u));
  width: calc(140 * var(--u));
}

.footer-godot {
  top: calc(573.73 * var(--u));
  left: calc(50% + (-59 - 960) * var(--u));
  width: calc(432.9 * var(--u));
}

.footer-studio {
  top: calc(706.73 * var(--u));
  left: calc(50% + (1619 - 960) * var(--u));
  width: calc(232.56 * var(--u));
  transition: transform 0.3s var(--ease-out);
}

.footer-legal {
  bottom: calc(24 * var(--u));
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  font-size: max(12px, calc(14 * var(--u)));
  color: var(--beige-low-contrast);
}

/* Logos wrapped in links (J’aime Bien Games → Steam developer page) */
.footer-studio img,
.studio-logo img {
  width: 100%;
}

.footer-studio:hover,
.footer-studio:focus-visible,
.studio-logo:hover,
.studio-logo:focus-visible {
  transform: scale(1.04);
}

/* Inline text links (studio name in body copy) */
.text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition:
    color 0.3s var(--ease-out),
    text-decoration-color 0.3s var(--ease-out);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--red-high-contrast);
  text-decoration-color: currentColor;
  outline: none;
}

/* ==========================================================================
   Team page (Figma: Website Wrapper — Team)
   ========================================================================== */

/* --- Our team --- */
.team-members {
  top: calc(50% + 68.34 * var(--u));
  left: 50%;
  translate: -50% -50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(66 * var(--u));
  width: max-content;
}

/* Figma: Team Member */
.team-member {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
}

.team-member-art {
  flex-shrink: 0;
  width: calc(345.6 * var(--u));
  aspect-ratio: 345.6 / 497.23;
  object-fit: cover;
  pointer-events: none;
}

.team-member-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  width: calc(391 * var(--u));
}

.team-member-name {
  font-family: var(--font-heading);
  font-size: max(24px, calc(48 * var(--u)));
  line-height: normal;
  color: var(--red-high-contrast);
}

.team-member-role {
  font-family: var(--font-heading);
  font-size: max(18px, calc(32 * var(--u)));
  line-height: normal;
  color: var(--beige-high-contrast);
}

.team-member-underline {
  width: calc(221.18 * var(--u));
  height: calc(46.08 * var(--u));
  scale: -1 1;
}

.team-member-bio {
  font-size: max(14px, calc(20 * var(--u)));
  line-height: normal;
  color: var(--beige-low-contrast);
}

/* --- Our studio --- */
.studio-content {
  top: calc(50% + 137.77 * var(--u));
  left: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(48 * var(--u));
}

.studio-logo {
  display: block;
  width: calc(290.7 * var(--u));
  transition: transform 0.3s var(--ease-out);
}

.studio-text {
  width: max(300px, calc(522 * var(--u)));
  font-size: max(15px, calc(24 * var(--u)));
  line-height: normal;
  text-align: center;
  color: var(--beige-high-contrast);
}

.studio-text strong {
  font-weight: 700;
}

/* ==========================================================================
   Contact page (Figma: Website Wrapper — Contact)
   Here the Hero Banner starts at the top of the page, under the menu.
   ========================================================================== */
body[data-page="contact"] main {
  padding-top: 0;
}

/* Figma: Helper Modale — --m is one modal pixel (tracks --u on desktop) */
.contact-modal {
  --m: var(--u);
  top: calc(298 * var(--u));
  left: calc(50% + 0.49 * var(--u));
  translate: -50% 0;
  width: calc(928.97 * var(--m));
  aspect-ratio: 928.97 / 628.92;
}

.contact-modal > * {
  position: absolute;
}

/* Demon peeking out from behind the frame's right edge */
.contact-demon {
  left: calc(715.49 * var(--m));
  top: calc(-52.55 * var(--m));
  width: calc(491.88 * var(--m));
  rotate: 19.87deg;
  pointer-events: none;
}

.contact-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 calc(35.48 * var(--m)) calc(17.74 * var(--m)) var(--container-shadow));
  pointer-events: none;
}

.contact-chest {
  top: calc(-115.08 * var(--m));
  left: 50%;
  translate: -50% 0;
  width: calc(250.32 * var(--m));
  height: calc(225.96 * var(--m));
  overflow: hidden;
}

.contact-chest img {
  width: 100%;
}

.contact-title {
  top: calc(131.04 * var(--m));
  left: 50%;
  translate: -50% 0;
  font-family: var(--font-heading);
  font-size: max(32px, calc(67.2 * var(--m)));
  line-height: normal;
  white-space: nowrap;
  color: var(--beige-high-contrast);
}

.contact-list {
  top: calc(235.94 * var(--m));
  left: 50%;
  translate: -50% 0;
  display: grid;
  /* 2 × 3 grid: email + 5 socials */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: calc(24 * var(--m)) calc(32 * var(--m));
  width: calc(660 * var(--m));
}

.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6.05 * var(--m));
  font-family: var(--font-heading);
  line-height: normal;
  text-align: center;
}

.contact-item dt {
  font-size: max(11px, calc(24.19 * var(--m)));
  color: var(--beige-high-contrast);
}

.contact-item dd a {
  font-size: max(14px, calc(30 * var(--m)));
  white-space: nowrap;
  color: var(--red-high-contrast);
  transition: color 0.3s var(--ease-out);
}

.contact-item dd a.is-underlined {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.contact-item dd a:hover,
.contact-item dd a:focus-visible {
  color: var(--beige-high-contrast);
  outline: none;
}

/* ==========================================================================
   Presskit page (Figma: Website Wrapper — Presskit)
   Left factsheet panel is sticky (full viewport height) while the content scrolls.
   ========================================================================== */
body[data-page="presskit"] main {
  padding-top: 0;
}

.presskit {
  /* Panel unit: tracks --u, but also shrinks so the whole factsheet fits short viewports
     (1019 = 70 top gap + 919 factsheet incl. "See Presskit" button + 30 bottom margin) */
  --pv: min(var(--u), calc((100vh - var(--header-height)) / 1019));
  display: flex;
  align-items: flex-start;
  max-width: 1920px;
  margin-inline: auto;
}

.pk-panel {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  width: calc(519 * var(--u));
  height: 100vh;
  background: url("../images/components/presskit-panel.webp") right center / 100% 100% no-repeat;
}

.pk-factsheet {
  position: absolute;
  top: calc(var(--header-height) + 70 * var(--pv));
  left: calc(73 * var(--u));
  width: calc(295 * var(--pv));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--pv));
  font-family: var(--font-heading);
  line-height: normal;
}

.pk-factsheet-title {
  font-size: calc(48 * var(--pv));
  color: var(--red-high-contrast);
}

.pk-factsheet dl {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--pv));
}

.pk-fact {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pv));
  font-size: calc(24 * var(--pv));
}

.pk-fact dt {
  color: var(--beige-high-contrast);
}

.pk-fact ul {
  list-style: disc;
  padding-left: calc(36 * var(--pv));
  color: var(--beige-low-contrast);
}

.pk-fact a {
  transition: color 0.3s var(--ease-out);
}

/* "See Presskit" button under the socials */
.pk-factsheet-btn {
  position: relative;
  align-self: flex-start;
  width: calc(230 * var(--pv));
  margin-top: calc(8 * var(--pv));
  font-size: calc(23 * var(--pv));
}

.pk-fact a:hover,
.pk-fact a:focus-visible {
  color: var(--red-high-contrast);
  outline: none;
}

/* --- Scrolling content column --- */
.pk-content {
  display: flex;
  flex-direction: column;
  gap: calc(64 * var(--u));
  width: calc(885 * var(--u));
  margin-left: calc((717 - 519) * var(--u));
  padding-top: calc(273 * var(--u));
  padding-bottom: calc(160 * var(--u));
}

.pk-section {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}

.pk-section--tight {
  gap: calc(16 * var(--u));
}

.pk-section--media {
  gap: calc(32 * var(--u));
}

.pk-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
}

.pk-title {
  font-family: var(--font-heading);
  font-size: max(26px, calc(48 * var(--u)));
  line-height: normal;
  color: var(--red-high-contrast);
}

.pk-underline {
  width: calc(221.18 * var(--u));
  height: calc(46.08 * var(--u));
  scale: -1 1;
}

.pk-item {
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--u));
}

.pk-item-title {
  font-family: var(--font-heading);
  font-size: max(17px, calc(24 * var(--u)));
  line-height: normal;
  color: var(--beige-high-contrast);
}

.pk-item-body,
.pk-about {
  font-size: max(14px, calc(20 * var(--u)));
  line-height: normal;
  color: var(--beige-low-contrast);
}

.pk-about {
  color: var(--beige-high-contrast);
}

.pk-about strong {
  font-weight: 700;
}

.pk-trailer {
  aspect-ratio: 885 / 497.81;
  border-radius: calc(16 * var(--u));
  overflow: hidden;
  background: var(--pure-black);
  box-shadow: 0 calc(16 * var(--u)) calc(48 * var(--u)) rgba(0, 0, 0, 0.6);
}

.pk-trailer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Cookie banner (Figma: Cookie Banner, 2× artboard)
   Desktop: the Figma composition (2800×1859) scaled as a whole, N * var(--c) is
   one Figma pixel. Mobile: the frame stretches around flowing text instead.
   ========================================================================== */
/* Full-screen layer: a dark gradient rising from the bottom of the screen
   puts the page behind in shadow so the banner stands out. The page stays
   usable through it (the banner doesn't block browsing). */
.cookie-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.cookie-layer[hidden] {
  display: none;
}

.cookie-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.75) 35%, rgba(0, 0, 0, 0) 80%);
  animation: cookie-fade 0.5s var(--ease-out) both;
}

@keyframes cookie-fade {
  from {
    opacity: 0;
  }
}

.cookie {
  --c: min(calc((100vw - 32px) / 2800), calc(55dvh / 1859), 0.5px);
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(2800 * var(--c));
  height: calc(1859 * var(--c));
  pointer-events: none;
  animation: cookie-in 0.5s var(--ease-out) both;
}

@keyframes cookie-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

.cookie-creature {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1272.39 * var(--c));
  aspect-ratio: 1272.39 / 1831;
  background: url("../images/components/cookie-creature.webp") center / 100% 100% no-repeat;
}

.cookie-box {
  position: absolute;
  left: calc(440 * var(--c));
  top: calc(1006 * var(--c));
  width: calc(2038.54 * var(--c));
  aspect-ratio: 4096 / 1714;
  background: url("../images/components/cookie-frame.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(84.48 * var(--c)) calc(42.24 * var(--c)) var(--container-shadow));
  color: var(--pure-black);
  pointer-events: auto;
}

.cookie-title,
.cookie-text,
.cookie-btn span {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: normal;
}

.cookie-title {
  position: absolute;
  left: calc(280 * var(--c));
  top: calc(197 * var(--c));
  font-size: calc(96 * var(--c));
  white-space: nowrap;
}

.cookie-text {
  position: absolute;
  left: calc(292 * var(--c));
  top: calc(366 * var(--c));
  width: calc(1453 * var(--c));
  font-size: calc(64 * var(--c));
}

.cookie-actions {
  position: absolute;
  left: calc(1823.6 * var(--c));
  top: calc(175.6 * var(--c));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(32 * var(--c));
}

.cookie-btn {
  position: relative;
  width: calc(536.44 * var(--c));
  aspect-ratio: 4096 / 1714;
  border: 0;
  padding: 0;
  color: var(--pure-black);
  background: url("../images/components/cookie-btn-accept.webp") center / cover no-repeat;
  filter: drop-shadow(0 calc(3 * var(--c)) calc(1.5 * var(--c)) rgba(0, 0, 0, 0.25));
  cursor: pointer;
  transition:
    transform 0.3s var(--ease-out),
    filter 0.3s var(--ease-out);
}

.cookie-btn--decline {
  width: calc(487.67 * var(--c));
  background-image: url("../images/components/cookie-btn-decline.webp");
}

.cookie-btn span {
  position: absolute;
  left: 50%;
  top: calc(50% - 13.33 * var(--c));
  translate: -50% -50%;
  font-size: calc(69.7 * var(--c));
  white-space: nowrap;
}

.cookie-btn--decline span {
  top: calc(50% - 12.71 * var(--c));
  font-size: calc(63.36 * var(--c));
}

.cookie-btn:hover,
.cookie-btn:focus-visible {
  transform: scale(1.05);
  filter: brightness(1.1) drop-shadow(0 calc(3 * var(--c)) calc(1.5 * var(--c)) rgba(0, 0, 0, 0.25));
  outline: none;
}

/* "Cookies" in the footer: reopens the banner */
.footer-legal-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
  color: var(--beige-high-contrast);
}

@media (max-width: 900px) {
  .cookie {
    left: 8px;
    right: 8px;
    bottom: 8px;
    translate: none;
    width: auto;
    height: auto;
    max-width: 560px;
    margin-inline: auto;
  }

  /* Creature centered behind the frame, its lower half hidden by it */
  .cookie-creature {
    top: auto;
    bottom: calc(100% - 21dvh);
    left: 50%;
    translate: -50% 0;
    width: auto;
    height: 42dvh;
  }

  /* The frame art is 9-sliced so its corners keep their shape at any size */
  .cookie-box {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    aspect-ratio: auto;
    padding: 34px 56px 30px;
    background: none;
    border-image: url("../images/components/cookie-frame.webp") 160 190 150 190 fill / 36px 40px 32px stretch;
    filter: drop-shadow(0 16px 16px var(--container-shadow));
  }

  .cookie-title,
  .cookie-text,
  .cookie-actions {
    position: static;
    width: auto;
  }

  .cookie-title {
    font-size: 22px;
    white-space: normal;
  }

  .cookie-text {
    margin-top: 6px;
    font-size: 15px;
  }

  .cookie-actions {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }

  .cookie-btn,
  .cookie-btn--decline {
    flex: 1;
    width: auto;
    max-width: 180px;
  }

  .cookie-btn span,
  .cookie-btn--decline span {
    top: calc(50% - 3px);
    font-size: 17px;
  }
}

/* ==========================================================================
   404 page (Figma: Death Screen)
   A 3840×2160 artboard scaled to fit the screen: N * var(--s) is one Figma pixel.
   ========================================================================== */
.nf-page {
  overflow: hidden;
}

.nf {
  --s: min(calc(100vw / 3840), calc(100dvh / 2160));
  position: fixed;
  inset: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(0, 0, 0, 0.8) 54.808%,
      rgba(12, 3, 3, 0.8) 60.457%,
      rgba(24, 5, 6, 0.8) 66.106%,
      rgba(47, 11, 11, 0.8) 77.404%,
      rgba(71, 16, 17, 0.8) 88.702%,
      rgba(94, 21, 22, 0.8) 100%
    ),
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(rgba(48, 62, 71, 0.2), rgba(48, 62, 71, 0.2)),
    url("../images/hero/background.webp") center / cover no-repeat,
    var(--pure-black);
}

.nf-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: calc(3840 * var(--s));
  height: calc(2160 * var(--s));
}

.nf-stage > *,
.nf-title > * {
  position: absolute;
}

/* Centered texts: left is the Figma center x */
.nf-404,
.nf-title > * {
  translate: -50% 0;
  font-family: var(--font-heading);
  line-height: normal;
  white-space: nowrap;
}

.nf-404 {
  left: calc(1919.5 * var(--s));
  font-size: calc(829.44 * var(--s));
}

.nf-404--top {
  top: calc(116 * var(--s));
  color: var(--red-very-low-contrast);
}

.nf-404--mid {
  top: calc(1016 * var(--s));
  color: var(--red-low-contrast);
}

.nf-stage > .nf-title {
  position: static;
  font-weight: 400;
}

.nf-title-kicker {
  left: calc(1949.5 * var(--s));
  top: calc(597 * var(--s));
  font-size: calc(128 * var(--s));
  color: #a44244;
}

.nf-title-main {
  left: calc(1949.5 * var(--s));
  top: calc(560 * var(--s));
  font-size: calc(840 * var(--s));
  color: var(--red-high-contrast);
}

.nf-home {
  left: calc(1920.22 * var(--s));
  top: calc(1372 * var(--s));
  translate: -50% 0;
  width: calc(856.44 * var(--s));
  font-size: calc(96 * var(--s));
}

.nf-wisps {
  pointer-events: none;
  width: calc(530.842 * var(--s));
}

.nf-wisps--e { left: calc(2517 * var(--s)); top: calc(332 * var(--s)); }
.nf-wisps--f { left: calc(2377 * var(--s)); top: calc(1265 * var(--s)); }
.nf-wisps--d { left: calc(3048 * var(--s)); top: calc(417 * var(--s)); scale: -1 1; }
.nf-wisps--a { left: calc(2130 * var(--s)); top: calc(1571 * var(--s)); width: calc(385 * var(--s)); }
.nf-wisps--b { left: calc(1160 * var(--s)); top: calc(1462 * var(--s)); scale: -1 1; }
.nf-wisps--g { left: calc(1118 * var(--s)); top: calc(464 * var(--s)); width: calc(425 * var(--s)); }
.nf-wisps--c { left: calc(168 * var(--s)); top: calc(332 * var(--s)); }
.nf-wisps--h { left: calc(2894 * var(--s)); top: calc(289 * var(--s)); width: calc(308 * var(--s)); scale: -1 1; }

/* Taller than 4:3 (phones, tablets): zoom in so the title fills the width,
   letting the outer characters crop, and keep the button big enough to tap, above the characters */
@media (max-aspect-ratio: 4 / 3) {
  .nf {
    --s: min(calc(100vw / 3300), calc(100dvh / 2160));
  }

  .nf-home {
    z-index: 1;
    width: max(calc(856.44 * var(--s)), 176px);
    font-size: max(calc(96 * var(--s)), 19.7px);
  }
}

/* Wider than the 1920 artboard, the panel no longer touches the screen edge:
   use the mirrored full-frame art (stone edge on both sides), factsheet centered */
@media (min-width: 1921px) {
  .pk-panel {
    /* Grow leftwards into the free margin (up to 140px) so the factsheet sits well
       inside the plain interior; the content column stays where it was */
    --pk-extend: min(140px, (100vw - 1920px) / 2);
    width: calc(519px + var(--pk-extend));
    margin-left: calc(-1 * var(--pk-extend));
    background: none;
    /* 9-slice: stone edges keep their thickness, only the plain interior widens
       (slices in art px, drawn at the panel's height scale: 100vh / 1620) */
    border-image: url("../images/components/presskit-panel-full.webp") 140 200 fill /
      calc(100vh * 140 / 1620) calc(100vh * 200 / 1620) stretch;
  }

  .pk-factsheet {
    left: 50%;
    translate: -50% 0;
  }
}

/* ==========================================================================
   Tablet / mobile — below 900px the 1920 artboard becomes a stacked layout
   ========================================================================== */
@media (max-width: 900px) {
  :root {
    --header-height: 72px;
  }

  .site-header {
    padding: 0 16px;
    gap: 16px;
  }

  .header-logo {
    width: 140px;
  }

  .main-nav,
  .header-wisps {
    display: none;
  }

  .header-cta {
    width: 170px;
    height: 110px;
  }

  .header-wishlist-btn {
    top: 4px;
    right: 12px;
    width: 150px;
    font-size: 15px;
  }

  /* Floating menu button (FAB): 56px touch target, bottom-right, clear of the
     iOS home indicator; sits above the overlay so it also closes the menu */
  .menu-toggle {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 51;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 56px;
    height: 56px;
    border: 1px solid var(--red-high-contrast);
    border-radius: 50%;
    /* Same tint + blur as the menu bar */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s var(--ease-out);
  }

  .menu-toggle:active {
    transform: scale(0.94);
  }

  .menu-toggle:focus-visible {
    outline: 2px solid var(--red-high-contrast);
    outline-offset: 3px;
  }

  /* Sharp, square-ended bars */
  .menu-toggle-bar {
    width: 24px;
    height: 3px;
    background: var(--red-high-contrast);
    transition:
      transform 0.3s var(--ease-out),
      opacity 0.3s var(--ease-out);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Full-screen menu: same tint + blur as the desktop menu bar, under the header */
  .mobile-menu:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 49;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--header-height);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: page-fade-in 0.25s var(--ease-out) both;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .mobile-menu .menu-item {
    font-size: 32px;
  }

  .mobile-menu .menu-eye {
    width: 44px;
    height: 44px;
  }

  html.menu-open {
    overflow: hidden;
  }

  main {
    padding-top: var(--header-height);
  }

  .section,
  .gameplay-section {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 16px 48px;
    margin-bottom: 0;
    overflow: hidden;
  }

  .section > *,
  .screenshots-header .signboard {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
  }

  .signboard {
    --sb-w: min(340px, calc(100vw - 32px));
    font-size: 22px;
  }

  .signboard-gold {
    font-size: 26px;
  }

  /* Hero */
  .hero-section {
    min-height: calc(100svh - var(--header-height));
    justify-content: center;
    /* Slightly tighter so "See trailer" stays above the fold on small phones */
    gap: 16px;
    padding-top: 16px;
  }

  .hero-logo {
    order: -1;
    width: 100%;
    max-width: 520px;
  }

  /* Mobile: only the left trio, full opacity, sitting on top of the logo */
  .hero-char-left {
    order: -2;
    width: 90%;
    max-width: 396px;
    margin-bottom: -29px;
  }

  .hero-char-right {
    display: none;
  }

  .hero-synopsis {
    max-width: 420px;
    width: 100%;
    text-shadow: 0 2px 10px #000;
  }

  .hero-trailer-btn {
    width: 220px;
    font-size: 22px;
  }

  /* Trailer */
  .arm {
    display: none;
  }

  .video-container {
    width: 100%;
    max-width: 640px;
  }

  /* Gameplay */
  .feature-group,
  .feature-group--second {
    gap: 72px;
    width: 100%;
    max-width: 560px;
  }

  /* The two feature groups stack in one column on mobile: same spacing between them */
  .feature-group--second {
    margin-top: 48px;
  }

  .feature,
  .feature--text-right {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    width: 100%;
  }

  .feature--text-right .feature-media {
    order: 2;
  }

  /* At least as tall as the 150px bone ornament, so it never runs into the image */
  .feature-text {
    width: 100%;
    min-height: 150px;
    gap: 12px;
    padding-left: 40px;
  }

  .feature-text::before {
    left: 14px;
    width: 150px;
    height: 31px;
  }

  .feature-media {
    width: 100%;
    border-radius: 12px;
  }

  .feature-wisps {
    display: none;
  }

  /* Art */
  /* Kept inside the 16px gutters: the artwork's characters reach its left edge */
  .art-showcase {
    width: 94%;
    margin-top: -16px;
  }

  /* Screenshots */
  .screenshots-header {
    gap: 8px;
    max-width: 100%;
  }

  .screenshots-header .signboard {
    --sb-w: 240px;
    font-size: 22px;
  }

  .arrow-btn {
    margin-top: 44px;
    width: 44px;
    height: 44px;
  }

  /* Full-bleed scroller, neighbours peek in at the edges */
  .gallery {
    width: 100vw;
    gap: 12px;
    padding: 8px 8vw 24px;
  }

  .gallery-item {
    width: 84vw;
    margin-inline: 0;
    border-radius: 12px;
    box-shadow: 0 8px 16px var(--container-shadow);
    transform: none;
  }

  /* Team */
  .team-members,
  .studio-content {
    width: 100%;
    max-width: 560px;
  }

  .team-members {
    flex-direction: column;
    gap: 40px;
  }

  .team-member {
    gap: 16px;
  }

  .team-member-art {
    width: 38%;
  }

  .team-member-text {
    flex: 1;
    width: auto;
    gap: 6px;
  }

  .team-member-underline {
    width: 140px;
    height: 29px;
  }

  .studio-content {
    gap: 24px;
  }

  .studio-logo {
    width: 180px;
  }

  .studio-text {
    width: 100%;
  }

  /* Contact */
  .contact-section {
    padding-bottom: 64px;
  }

  /* Contact: stacked layout inside the same 9-sliced frame as the presskit factsheet
     (the frame image itself is swapped for the border-image) */
  .contact-section {
    padding-top: calc(var(--header-height) + 96px);
  }

  .contact-modal {
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 4px 16px;
    border-style: solid;
    border-width: 42px 52px;
    border-image: url("../images/components/contact-frame.webp") 170 230 fill / 42px 52px round;
    filter: drop-shadow(0 12px 12px var(--container-shadow));
  }

  .contact-modal > * {
    position: static;
    translate: none;
  }

  .contact-frame,
  .contact-demon {
    display: none;
  }

  /* Chest keeps poking out above the frame's top edge */
  .contact-chest {
    width: 150px;
    height: 135px;
    margin-top: -128px;
  }

  .contact-title {
    font-size: 40px;
  }

  .contact-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    height: auto;
  }

  .contact-item {
    gap: 4px;
  }

  .contact-item dt {
    font-size: 18px;
  }

  .contact-item dd a {
    font-size: 24px;
  }

  /* Presskit: factsheet becomes a card on top, content flows below */
  body[data-page="presskit"] main {
    padding-top: var(--header-height);
  }

  .presskit {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 16px 48px;
    gap: 40px;
  }

  /* Same frame art as the Contact modal, 9-sliced so the corners stay intact
     and only the edges extend to the factsheet's height */
  .pk-panel {
    position: relative;
    width: 100%;
    height: auto;
    padding: 4px 8px;
    background: none;
    border-style: solid;
    border-width: 42px 52px;
    border-image: url("../images/components/contact-frame.webp") 170 230 fill / 42px 52px round;
    filter: drop-shadow(0 12px 12px var(--container-shadow));
  }

  .pk-factsheet {
    position: static;
    width: 100%;
    gap: 16px;
  }

  .pk-factsheet-title {
    font-size: 30px;
  }

  .pk-factsheet dl {
    gap: 14px;
  }

  .pk-fact {
    gap: 4px;
    font-size: 18px;
  }

  .pk-fact ul {
    padding-left: 24px;
  }

  .pk-factsheet-btn {
    align-self: center;
    width: 200px;
    margin-top: 8px;
    font-size: 20px;
  }

  .pk-content {
    width: 100%;
    margin-left: 0;
    padding: 0;
    gap: 40px;
  }

  .pk-section,
  .pk-section--tight,
  .pk-section--media {
    gap: 14px;
  }

  .pk-underline {
    width: 140px;
    height: 29px;
  }

  .pk-trailer {
    border-radius: 10px;
  }


  /* Footer */
  /* Extra room so the corner logos clear the floating menu button */
  .site-footer {
    padding-bottom: 260px;
  }

  .footer-cta {
    width: 100%;
    max-width: 560px;
    gap: 8px;
  }

  .footer-arrow {
    width: 48px;
  }

  .steam-stage {
    width: 100%;
    height: auto;
    margin-top: 16px;
  }

  .steam-stage > .steam-widget {
    /* Card width is min(560px, screen − 32px gutters) */
    --widget-scale: tan(atan2(min(560px, 100vw - 32px), 646px));
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    border-radius: 4px;
  }

  .steam-wisps {
    display: none;
  }

  .footer-godot,
  .footer-studio {
    position: absolute;
    bottom: 88px;
    top: auto;
  }

  .footer-godot {
    left: 0;
    width: 150px;
  }

  .footer-studio {
    left: auto;
    right: 16px;
    width: 90px;
  }

  .footer-legal {
    position: absolute;
    bottom: 32px;
    left: 50%;
    translate: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}