:root {
  --bg: #081011;
  --bg-soft: #0d1718;
  --panel: rgba(12, 22, 23, 0.92);
  --panel-strong: #101c1d;

  --text: #f4eedc;
  --muted: #9ea9a3;

  --orange: #f6a623;
  --orange-soft: #d98315;

  --teal: #1bb7ad;
  --teal-soft: #0d7f79;

  --line: rgba(244, 238, 220, 0.14);
  --line-strong: rgba(244, 238, 220, 0.28);

  --black: #030606;

  --shadow: 8px 8px 0 rgba(0, 0, 0, 0.45);

  --mono: 'IBM Plex Mono', monospace;
  --pixel: 'Press Start 2P', monospace;
}


/* --------------------------------------------------
   BASE
-------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(27, 183, 173, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(246, 166, 35, 0.08),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #071011 0%,
      #081011 42%,
      #050b0c 100%
    );

  color: var(--text);

  font-family: var(--mono);

  overflow-x: hidden;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}


/* --------------------------------------------------
   BACKGROUND GRID
-------------------------------------------------- */

.site-grid {
  position: fixed;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  opacity: 0.28;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.035) 1px,
      transparent 1px
    );

  background-size: 38px 38px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.85),
      transparent 92%
    );
}


/* --------------------------------------------------
   CRT SCANLINES
-------------------------------------------------- */

.scanlines {
  position: fixed;

  inset: 0;

  z-index: 100;

  pointer-events: none;

  opacity: 0.07;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.15) 0,
      rgba(255,255,255,0.15) 1px,
      transparent 1px,
      transparent 4px
    );

  mix-blend-mode: soft-light;
}


/* --------------------------------------------------
   TOP NAV
-------------------------------------------------- */

.topbar {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 50;

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: min(
    1180px,
    calc(100% - 40px)
  );

  margin: 18px auto 0;

  padding:
    12px
    14px
    12px
    16px;

  border:
    1px
    solid
    var(--line);

  background:
    rgba(
      5,
      11,
      12,
      0.82
    );

  backdrop-filter:
    blur(14px);

  box-shadow:
    0
    10px
    35px
    rgba(0,0,0,0.18);
}


.brand {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;
}


.brand-mark {
  display: grid;

  place-items: center;

  width: 34px;

  height: 34px;

  background: var(--orange);

  color: var(--black);

  border:
    2px
    solid
    var(--black);

  box-shadow:
    3px
    3px
    0
    rgba(
      246,
      166,
      35,
      0.25
    );

  font-family: var(--pixel);

  font-size: 9px;
}


.brand-name {
  font-family: var(--pixel);

  font-size: 10px;

  letter-spacing: 0.04em;
}


.nav {
  display: flex;

  align-items: center;

  gap: 6px;
}


.nav a {
  padding:
    9px
    10px;

  color: var(--muted);

  text-decoration: none;

  text-transform: uppercase;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.05em;

  transition:
    color 140ms ease,
    background 140ms ease;
}


.nav a:hover {
  color: var(--text);

  background:
    rgba(
      255,
      255,
      255,
      0.045
    );
}


.nav .nav-cta {
  margin-left: 6px;

  color: var(--black);

  background: var(--orange);
}


.nav .nav-cta:hover {
  color: var(--black);

  background: #ffb43c;
}


/* --------------------------------------------------
   GLOBAL STRUCTURE
-------------------------------------------------- */

main {
  position: relative;

  z-index: 1;
}


.section-shell,
.content-section {
  width: min(
    1180px,
    calc(100% - 40px)
  );

  margin: 0 auto;
}


/* --------------------------------------------------
   HERO
-------------------------------------------------- */

.hero {
  position: relative;

  min-height: 100svh;

  display: grid;

  grid-template-columns:
    1.05fr
    0.95fr;

  align-items: center;

  gap: 70px;

  padding:
    130px
    0
    88px;
}


.hero::before {
  content: '';

  position: absolute;

  width: 420px;

  height: 420px;

  left: -260px;

  top: 22%;

  border:
    1px
    solid
    rgba(
      27,
      183,
      173,
      0.12
    );

  transform:
    rotate(45deg);
}


.hero-copy {
  position: relative;

  z-index: 2;
}


.eyebrow,
.section-kicker,
.development-status {
  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--teal);
}


.eyebrow,
.development-status {
  display: flex;

  align-items: center;

  gap: 9px;
}


.status-dot {
  display: inline-block;

  width: 8px;

  height: 8px;

  background: var(--teal);

  box-shadow:
    0
    0
    14px
    rgba(
      27,
      183,
      173,
      0.72
    );
}


.hero h1,
.section-heading h2,
.feature-copy h2,
.ravenwood-copy h2,
.contact-copy h2 {
  margin: 0;

  font-family: var(--pixel);

  font-weight: 400;

  text-transform: uppercase;
}


.hero h1 {
  margin-top: 26px;

  font-size:
    clamp(
      38px,
      6.4vw,
      78px
    );

  line-height: 1.16;

  letter-spacing: -0.05em;
}


.hero h1 span {
  color: var(--orange);
}


.hero-lead {
  max-width: 670px;

  margin:
    28px
    0
    0;

  color: var(--muted);

  font-size:
    clamp(
      17px,
      2vw,
      21px
    );

  line-height: 1.75;
}


.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;
}


/* --------------------------------------------------
   PIXEL BUTTONS
-------------------------------------------------- */

.pixel-button {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 50px;

  padding:
    0
    20px;

  color: var(--text);

  background: var(--panel-strong);

  border:
    2px
    solid
    var(--text);

  box-shadow:
    5px
    5px
    0
    var(--black);

  text-decoration: none;

  text-transform: uppercase;

  font-family: var(--pixel);

  font-size: 9px;

  line-height: 1.4;

  cursor: pointer;

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}


.pixel-button::before,
.pixel-button::after {
  content: '';

  position: absolute;

  width: 5px;

  height: 5px;

  background: currentColor;
}


.pixel-button::before {
  top: -2px;

  left: -2px;
}


.pixel-button::after {
  right: -2px;

  bottom: -2px;
}


.pixel-button:hover {
  transform:
    translate(
      3px,
      3px
    );

  box-shadow:
    2px
    2px
    0
    var(--black);
}


.pixel-button-primary {
  color: var(--black);

  background: var(--orange);

  border-color: var(--orange);
}


/* --------------------------------------------------
   HERO META
-------------------------------------------------- */

.hero-meta {
  display: flex;

  flex-wrap: wrap;

  gap:
    16px
    28px;

  margin-top: 36px;

  color: #70807a;

  font-size: 11px;

  letter-spacing: 0.08em;
}


/* --------------------------------------------------
   HERO LOGO FRAME
-------------------------------------------------- */

.hero-visual {
  position: relative;
}


.logo-frame {
  position: relative;

  min-height: 450px;

  display: grid;

  place-items: center;

  padding: 50px;

  background:
    linear-gradient(
      135deg,
      rgba(
        246,
        166,
        35,
        0.07
      ),
      transparent
      42%
    ),
    linear-gradient(
      315deg,
      rgba(
        27,
        183,
        173,
        0.06
      ),
      transparent
      45%
    ),
    rgba(
      10,
      18,
      19,
      0.88
    );

  border:
    1px
    solid
    var(--line-strong);

  box-shadow: var(--shadow);

  clip-path:
    polygon(
      0 18px,
      18px 18px,
      18px 0,

      calc(100% - 18px) 0,

      calc(100% - 18px) 18px,

      100% 18px,

      100% calc(100% - 18px),

      calc(100% - 18px) calc(100% - 18px),

      calc(100% - 18px) 100%,

      18px 100%,

      18px calc(100% - 18px),

      0 calc(100% - 18px)
    );
}


.logo-frame::before {
  content: '';

  position: absolute;

  inset: 20px;

  border:
    1px
    dashed
    rgba(
      246,
      166,
      35,
      0.16
    );
}


.logo-frame img {
  position: relative;

  z-index: 2;

  width:
    min(
      90%,
      470px
    );

  height: auto;

  filter:
    drop-shadow(
      0
      12px
      24px
      rgba(
        0,
        0,
        0,
        0.35
      )
    );
}


.frame-label {
  position: absolute;

  top: 18px;

  left: 24px;

  color: var(--orange);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.1em;
}


/* --------------------------------------------------
   SIGNAL BARS
-------------------------------------------------- */

.signal-bars {
  position: absolute;

  right: 24px;

  bottom: 20px;

  display: flex;

  align-items: flex-end;

  gap: 4px;

  height: 26px;
}


.signal-bars span {
  display: block;

  width: 5px;

  background: var(--teal);

  animation:
    signal
    1.2s
    steps(2)
    infinite
    alternate;
}


.signal-bars span:nth-child(1) {
  height: 7px;
}


.signal-bars span:nth-child(2) {
  height: 12px;

  animation-delay: .12s;
}


.signal-bars span:nth-child(3) {
  height: 17px;

  animation-delay: .24s;
}


.signal-bars span:nth-child(4) {
  height: 22px;

  animation-delay: .36s;
}


.signal-bars span:nth-child(5) {
  height: 26px;

  animation-delay: .48s;
}


@keyframes signal {
  from {
    opacity: 0.28;
  }

  to {
    opacity: 1;
  }
}


/* --------------------------------------------------
   SCROLL INDICATOR
-------------------------------------------------- */

.scroll-cue {
  position: absolute;

  bottom: 24px;

  left: 50%;

  transform:
    translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 7px;

  color: #6e7a76;

  text-decoration: none;

  font-size: 10px;

  letter-spacing: 0.18em;
}


.scroll-arrow {
  color: var(--orange);

  font-size: 22px;

  animation:
    bob
    1.2s
    steps(2)
    infinite;
}


@keyframes bob {
  50% {
    transform:
      translateY(5px);
  }
}


/* --------------------------------------------------
   CONTENT SECTIONS
-------------------------------------------------- */

.content-section {
  padding:
    110px
    0;
}


.section-heading {
  display: grid;

  grid-template-columns:
    1.15fr
    0.85fr;

  gap: 60px;

  align-items: end;

  margin-bottom: 46px;
}


.section-heading h2,
.feature-copy h2,
.ravenwood-copy h2,
.contact-copy h2 {
  font-size:
    clamp(
      25px,
      4vw,
      46px
    );

  line-height: 1.28;
}


.section-heading p:last-child,
.feature-copy > p:last-of-type,
.contact-copy > p:last-child {
  margin: 0;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.75;
}


.section-kicker {
  margin:
    0
    0
    18px;
}


/* --------------------------------------------------
   GAME GRID
-------------------------------------------------- */

.game-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 18px;
}


.game-card {
  position: relative;

  min-height: 370px;

  display: flex;

  flex-direction: column;

  padding: 22px;

  border:
    1px
    solid
    var(--line-strong);

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        0.018
      ),
      transparent
      70%
    ),
    var(--panel);

  box-shadow:
    6px
    6px
    0
    rgba(
      0,
      0,
      0,
      0.28
    );

  overflow: hidden;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}


.game-card::before {
  content: '';

  position: absolute;

  inset:
    auto
    -20%
    -40%
    15%;

  height: 180px;

  border:
    1px
    solid
    rgba(
      246,
      166,
      35,
      0.12
    );

  transform:
    rotate(-12deg);
}


.game-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(
      246,
      166,
      35,
      0.65
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        246,
        166,
        35,
        0.035
      ),
      transparent
      75%
    ),
    var(--panel);
}


.game-card-topline {
  display: flex;

  justify-content: space-between;

  color: #71807b;

  font-size: 10px;

  letter-spacing: 0.08em;
}


.game-icon {
  display: grid;

  place-items: center;

  width: 62px;

  height: 62px;

  margin-top: 38px;

  border:
    1px
    solid
    var(--line-strong);

  color: var(--orange);

  background: #0a1314;

  font-size: 26px;
}


.game-card h3 {
  margin:
    26px
    0
    12px;

  font-family: var(--pixel);

  font-weight: 400;

  font-size: 16px;

  line-height: 1.6;

  text-transform: uppercase;
}


.game-card p {
  margin: 0;

  color: var(--muted);

  line-height: 1.75;

  font-size: 14px;
}


.game-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: auto;

  padding-top: 28px;
}


.game-tags span {
  padding:
    6px
    8px;

  border:
    1px
    solid
    var(--line);

  color: #8c9994;

  font-size: 9px;

  letter-spacing: 0.08em;
}


/* --------------------------------------------------
   PRIVATE LABEL FEATURE
-------------------------------------------------- */

.feature-panel {
  display: grid;

  grid-template-columns:
    0.95fr
    1.05fr;

  gap: 56px;

  align-items: center;

  padding: 54px;

  background:
    linear-gradient(
      110deg,
      rgba(
        246,
        166,
        35,
        0.09
      ),
      transparent
      34%
    ),
    rgba(
      12,
      22,
      23,
      0.9
    );

  border:
    1px
    solid
    rgba(
      246,
      166,
      35,
      0.42
    );

  box-shadow:
    var(--shadow);
}


.feature-copy p {
  max-width: 570px;
}


.text-link {
  display: inline-flex;

  gap: 12px;

  margin-top: 28px;

  color: var(--orange);

  text-decoration: none;

  text-transform: uppercase;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;
}


.text-link span {
  transition:
    transform
    150ms
    ease;
}


.text-link:hover span {
  transform:
    translateX(5px);
}


/* --------------------------------------------------
   TERMINAL
-------------------------------------------------- */

.feature-terminal {
  border:
    1px
    solid
    var(--line-strong);

  background: #060c0d;

  box-shadow:
    7px
    7px
    0
    rgba(
      0,
      0,
      0,
      0.32
    );
}


.terminal-bar {
  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    11px
    13px;

  border-bottom:
    1px
    solid
    var(--line);

  color: #77837f;

  font-size: 9px;

  letter-spacing: 0.08em;
}


.terminal-bar span {
  width: 8px;

  height: 8px;

  background: #35413e;
}


.terminal-bar span:first-child {
  background: var(--orange);
}


.terminal-bar strong {
  margin-left: auto;

  font-weight: 600;
}


.terminal-body {
  padding: 24px;
}


.terminal-body p {
  margin:
    0
    0
    13px;

  color: #98a49f;

  font-size: 13px;

  line-height: 1.55;
}


.terminal-body p span {
  color: var(--teal);
}


.terminal-body .terminal-ready {
  margin-top: 28px;

  color: var(--text);
}


.cursor {
  animation:
    blink
    0.8s
    steps(1)
    infinite;
}


@keyframes blink {
  50% {
    opacity: 0;
  }
}


/* --------------------------------------------------
   RAVENWOOD
-------------------------------------------------- */

.ravenwood-section {
  padding-top: 70px;
}


.ravenwood-card {
  position: relative;

  min-height: 500px;

  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  overflow: hidden;

  border:
    1px
    solid
    rgba(
      27,
      183,
      173,
      0.3
    );

  background: #091213;
}


.ravenwood-copy {
  position: relative;

  z-index: 3;

  align-self: center;

  padding: 56px;
}


.ravenwood-lead {
  max-width: 520px;

  margin:
    24px
    0
    0;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.8;
}


.development-status {
  margin:
    34px
    0
    0;

  color: var(--orange);
}


.development-status .status-dot {
  background: var(--orange);

  box-shadow:
    0
    0
    14px
    rgba(
      246,
      166,
      35,
      0.7
    );
}


/* --------------------------------------------------
   RAVENWOOD ART
-------------------------------------------------- */

.ravenwood-art {
  position: relative;

  min-height: 500px;

  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      rgba(
        13,
        38,
        40,
        0.6
      ),
      rgba(
        7,
        14,
        15,
        0.96
      )
    ),
    radial-gradient(
      circle at 68% 24%,
      rgba(
        246,
        166,
        35,
        0.15
      ),
      transparent
      18%
    );
}


.ravenwood-art::before {
  content: '';

  position: absolute;

  inset: 0;

  opacity: 0.22;

  background-image:
    radial-gradient(
      rgba(
        244,
        238,
        220,
        0.7
      )
      1px,
      transparent
      1px
    );

  background-size:
    32px
    32px;
}


.moon {
  position: absolute;

  right: 16%;

  top: 17%;

  width: 92px;

  height: 92px;

  border-radius: 50%;

  background: var(--orange);

  box-shadow:
    0
    0
    50px
    rgba(
      246,
      166,
      35,
      0.15
    );
}


.ridge {
  position: absolute;

  left: -5%;

  right: -5%;

  bottom: -20px;

  height: 54%;

  clip-path:
    polygon(
      0 70%,
      10% 55%,
      17% 60%,
      27% 34%,
      36% 48%,
      47% 21%,
      58% 48%,
      68% 30%,
      80% 55%,
      90% 42%,
      100% 62%,
      100% 100%,
      0 100%
    );
}


.ridge-back {
  bottom: 72px;

  background: #173133;

  opacity: 0.48;
}


.ridge-mid {
  bottom: 28px;

  background: #102627;

  opacity: 0.9;
}


.ridge-front {
  background: #071011;
}


.ravenwood-title {
  position: absolute;

  right: 7%;

  bottom: 34px;

  z-index: 2;

  color:
    rgba(
      244,
      238,
      220,
      0.06
    );

  font-family: var(--pixel);

  font-size:
    clamp(
      28px,
      5vw,
      72px
    );

  line-height: 1;

  transform:
    rotate(-5deg);
}


/* --------------------------------------------------
   PHILOSOPHY
-------------------------------------------------- */

.philosophy-section {
  padding-top: 76px;

  padding-bottom: 76px;
}


.philosophy {
  padding:
    58px
    0;

  border-top:
    1px
    solid
    var(--line);

  border-bottom:
    1px
    solid
    var(--line);

  text-align: center;
}


.philosophy blockquote {
  margin:
    20px
    auto
    0;

  max-width: 900px;

  font-family: var(--pixel);

  font-size:
    clamp(
      18px,
      3vw,
      34px
    );

  line-height: 1.65;

  text-transform: uppercase;
}


/* --------------------------------------------------
   CONTACT
-------------------------------------------------- */

.contact-layout {
  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap: 70px;

  align-items: start;
}


.contact-copy {
  position: sticky;

  top: 120px;
}


.contact-form {
  padding: 28px;

  border:
    1px
    solid
    var(--line-strong);

  background: var(--panel);

  box-shadow:
    var(--shadow);
}


.contact-form label {
  display: block;

  margin-bottom: 18px;
}


.contact-form label > span {
  display: block;

  margin-bottom: 8px;

  color: #8f9b96;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.contact-form input,
.contact-form textarea {
  width: 100%;

  border:
    1px
    solid
    var(--line-strong);

  outline: none;

  padding:
    14px
    15px;

  color: var(--text);

  background: #071011;

  caret-color: var(--orange);

  transition:
    border-color 130ms ease,
    box-shadow 130ms ease;
}


.contact-form textarea {
  resize: vertical;

  min-height: 180px;

  line-height: 1.6;
}


.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--teal);

  box-shadow:
    0
    0
    0
    2px
    rgba(
      27,
      183,
      173,
      0.09
    );
}


.submit-button {
  width: 100%;

  border: 0;
}


/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */

.footer {
  display: flex;

  justify-content: space-between;

  gap: 24px;

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin:
    0
    auto;

  padding:
    30px
    0
    38px;

  border-top:
    1px
    solid
    var(--line);

  color: #6f7b76;

  font-size: 11px;

  letter-spacing: 0.05em;
}


.footer > div {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}


.footer-brand {
  color: var(--orange);

  font-family: var(--pixel);

  font-size: 8px;
}


.footer a {
  color: var(--teal);

  text-decoration: none;
}


/* --------------------------------------------------
   SCROLL REVEALS
-------------------------------------------------- */

.reveal {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 700ms ease,
    transform 700ms ease;
}


.reveal.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* --------------------------------------------------
   REDUCED MOTION
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


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

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }


  .reveal {
    opacity: 1;

    transform: none;
  }

}


/* --------------------------------------------------
   TABLET
-------------------------------------------------- */

@media (max-width: 980px) {

  .hero,
  .section-heading,
  .feature-panel,
  .ravenwood-card,
  .contact-layout {
    grid-template-columns: 1fr;
  }


  .hero {
    gap: 36px;

    padding-top: 140px;
  }


  .hero-copy {
    max-width: 760px;
  }


  .hero-visual {
    max-width: 760px;
  }


  .logo-frame {
    min-height: 380px;
  }


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


  .game-card {
    min-height: 300px;
  }


  .section-heading {
    gap: 24px;
  }


  .feature-panel {
    gap: 34px;
  }


  .ravenwood-card {
    min-height: auto;
  }


  .ravenwood-art {
    min-height: 380px;
  }


  .contact-copy {
    position: static;
  }

}


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 720px) {

  .topbar {
    width:
      calc(
        100% - 24px
      );

    margin-top: 12px;
  }


  .brand-name {
    display: none;
  }


  .nav {
    gap: 0;
  }


  .nav a {
    padding:
      9px
      7px;

    font-size: 10px;
  }


  .nav a:not(.nav-cta):nth-child(3) {
    display: none;
  }


  .section-shell,
  .content-section,
  .footer {
    width:
      calc(
        100% - 28px
      );
  }


  .hero {
    min-height: auto;

    padding:
      120px
      0
      80px;
  }


  .hero h1 {
    font-size:
      clamp(
        32px,
        11vw,
        56px
      );
  }


  .hero-lead {
    font-size: 16px;
  }


  .hero-meta {
    flex-direction: column;

    gap: 9px;
  }


  .logo-frame {
    min-height: 290px;

    padding: 34px;
  }


  .frame-label {
    font-size: 8px;
  }


  .scroll-cue {
    display: none;
  }


  .content-section {
    padding:
      78px
      0;
  }


  .section-heading h2,
  .feature-copy h2,
  .ravenwood-copy h2,
  .contact-copy h2 {
    font-size:
      clamp(
        22px,
        7vw,
        34px
      );
  }


  .feature-panel,
  .ravenwood-copy,
  .contact-form {
    padding: 26px;
  }


  .ravenwood-art {
    min-height: 300px;
  }


  .moon {
    width: 68px;

    height: 68px;
  }


  .philosophy blockquote {
    font-size:
      clamp(
        16px,
        5.6vw,
        24px
      );
  }


  .footer {
    flex-direction: column;
  }

}


/* --------------------------------------------------
   SMALL MOBILE
-------------------------------------------------- */

@media (max-width: 480px) {

  .nav a:not(.nav-cta) {
    display: none;
  }


  .hero-actions {
    flex-direction: column;
  }


  .pixel-button {
    width: 100%;
  }


  .logo-frame {
    min-height: 240px;
  }


  .game-card h3 {
    font-size: 14px;
  }

}