/* Earfh's world. The studio frame (nav, footer) stays Forge Terminal; everything
   between them takes the game's own palette and type, so the page reads as the
   game rather than as a tan catalog entry about it (studio visual redesign,
   docs/superpowers/specs/2026-09-26-studio-visual-design.md).

   Every rule is scoped under .world-earfh, so this file cannot leak onto any
   other page even if it were linked by mistake. It loads after game-page.css
   and overrides the shared components rather than renaming them, which keeps
   the markup identical to Barrelhouse's and the prerender contract untouched.

   Headings, pills and buttons are Jersey 10, the pixel font the game itself
   uses. Body copy stays Inter: Jersey is a display face and a paragraph of it
   is hard work to read. */

.world-earfh {
  --w-bg: #0d0717;
  --w-panel: #1a0d2b;
  --w-line: #3a2356;
  --w-text: #e9e4ff;
  --w-body: #cfc6f0;
  --w-muted: #a99fd0;
  --w-pink: #ff3fa4;
  --w-cyan: #6ff7ff;
  --w-font: 'Jersey 10', 'JetBrains Mono', monospace;

  background: var(--w-bg);
  color: var(--w-body);
}

/* --- Hero, pattern A --------------------------------------------------------
   The art runs the full band and a dark panel sits behind the words on the
   left. The owner chose this over a solid band because the cyan tagline was
   unreadable over the busy city art, so the words get the dark side of the
   gradient and the art keeps the right. */
.world-earfh .world-hero {
  position: relative;
  height: min(62vh, 560px);
  overflow: hidden;
  border-bottom: 2px solid var(--w-pink);
}

.world-earfh .world-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.world-earfh .world-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 7, 23, 0.94) 0%, rgba(13, 7, 23, 0.82) 42%, rgba(13, 7, 23, 0) 72%);
}

.world-earfh .world-hero-text {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  transform: translateY(-50%);
  width: min(46%, 560px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.world-earfh .world-hero-title { margin: 0; line-height: 0; }

/* 256px wide at source: twice that is the largest whole-number scale that fits
   the panel, and a whole-number scale keeps every pixel square. */
.world-earfh .world-hero-logo {
  display: block;
  width: 512px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.world-earfh .world-hero-tagline {
  margin: 0;
  font-family: var(--w-font);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 2px 0 #000;
}

.world-earfh .world-hero-button {
  display: inline-block;
  font-family: var(--w-font);
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-bg);
  background: var(--w-pink);
  padding: 6px 18px;
  border-radius: 4px;
  box-shadow: 0 3px 0 #000;
  transition: transform 0.15s ease, background 0.15s ease;
}

.world-earfh .world-hero-button:hover { background: var(--w-cyan); transform: translateY(-2px); }

/* On a phone there is no left third to darken: the words take the full width,
   so the panel turns into a floor and the text sits on it. */
@media (max-width: 720px) {
  .world-earfh .world-hero { height: min(78vh, 560px); }
  .world-earfh .world-hero-scrim {
    background: linear-gradient(0deg, rgba(13, 7, 23, 0.96) 0%, rgba(13, 7, 23, 0.86) 45%, rgba(13, 7, 23, 0) 80%);
  }
  .world-earfh .world-hero-text {
    top: auto;
    bottom: 24px;
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
  }
  .world-earfh .world-hero-logo { width: 256px; }
}

/* --- Sections -------------------------------------------------------------- */
.world-earfh .section.muted {
  background: var(--w-panel);
  border-top: 1px solid var(--w-line);
  border-bottom: 1px solid var(--w-line);
}

.world-earfh .section-heading h3 {
  font-family: var(--w-font);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 44px);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--w-pink);
}

.world-earfh .pill,
.world-earfh .pill.ghost {
  font-family: var(--w-font);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--w-cyan);
  background: transparent;
  border: 1px solid var(--w-cyan);
  border-radius: 3px;
  padding: 2px 10px;
}

.world-earfh .gp-prose p { color: var(--w-body); }
.world-earfh .gp-prose .lede { color: var(--w-text); }
.world-earfh .gp-prose a { color: var(--w-cyan); text-decoration: underline; text-underline-offset: 3px; }

.world-earfh .gp-shots a,
.world-earfh .gp-video-player {
  border-color: var(--w-line);
  border-radius: 4px;
}

.world-earfh .gp-shots a:hover { border-color: var(--w-pink); }
.world-earfh .gp-shots img { image-rendering: pixelated; }
.world-earfh .gp-video-caption { color: var(--w-muted); }

.world-earfh .button {
  font-family: var(--w-font);
  font-weight: 400;
  font-size: 24px;
  color: var(--w-bg);
  background: var(--w-pink);
  border: 0;
  border-radius: 4px;
  padding: 6px 18px;
  box-shadow: 0 3px 0 #000;
}

/* The devlog strip is injected by prerender.mjs with the studio's classes. */
.world-earfh .devlog-item { border-top-color: var(--w-line); }
.world-earfh .devlog-meta { color: var(--w-muted); }
.world-earfh .devlog-tag { color: var(--w-cyan); border-color: var(--w-line); }
.world-earfh a.devlog-tag:hover { border-color: var(--w-cyan); }
.world-earfh .devlog-title a { color: var(--w-text); }
.world-earfh .devlog-title a:hover { color: var(--w-pink); }
.world-earfh .devlog-excerpt { color: var(--w-body); }
.world-earfh .devlog-more a { color: var(--w-cyan); }

.world-earfh a:focus-visible { outline: 2px solid var(--w-cyan); outline-offset: 3px; }

/* The footer is studio frame, not world: it sits inside the wrapper only so
   the world's background runs to the bottom of the page without a seam. */
.world-earfh .site-footer { background-color: var(--bg); }