/* The Lien's world. The studio frame (nav, footer) stays Forge Terminal;
   everything between them takes the game's own palette and type (studio visual
   redesign, docs/superpowers/specs/2026-09-26-studio-visual-design.md).

   Every rule is scoped under .world-the-lien, so this file cannot leak onto
   any other page. It loads after game-page.css and overrides the shared
   components rather than renaming them, which keeps the markup identical to
   the other game pages and the prerender contract untouched.

   IM Fell English carries headings and body both, to match the woodcut
   wordmark; the SC cut does the small caps (pills, buttons, headings).

   The page font is set once on the wrapper and never on .section-heading or
   .gp-prose. game-page.css centers both on a 62ch measure, and ch resolves
   against each element's own font, so giving one of them a font of its own
   would put the heading and the column on different left edges. */

.world-the-lien {
  --w-bg: #16110b;
  --w-panel: #211910;
  --w-line: #4a3a22;
  --w-text: #efe2c6;
  --w-body: #dccfb2;
  --w-muted: #bfae8c;
  --w-amber: #d9a441;
  --w-ink: #1b1206;
  --w-serif: 'IM Fell English', Georgia, serif;
  --w-caps: 'IM Fell English SC', 'IM Fell English', Georgia, serif;

  background: var(--w-bg);
  color: var(--w-body);
  font-family: var(--w-serif);
  /* IM Fell has a small x-height; at the site's 16px it reads a size smaller
     than the Inter around it. */
  font-size: 18px;
}

/* --- Hero, pattern A --------------------------------------------------------
   Full band art, a dark panel on the left behind the words. Same pattern as
   Earfh: legibility over the art wins. */
.world-the-lien .world-hero {
  position: relative;
  height: min(62vh, 560px);
  overflow: hidden;
  border-bottom: 1px solid var(--w-amber);
}

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

.world-the-lien .world-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 17, 11, 0.94) 0%, rgba(22, 17, 11, 0.82) 42%, rgba(22, 17, 11, 0) 72%);
}

.world-the-lien .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: 16px;
}

.world-the-lien .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-the-lien .world-hero-logo {
  display: block;
  width: 512px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.world-the-lien .world-hero-tagline {
  margin: 0;
  font-family: var(--w-serif);
  font-style: italic;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 0 #000;
}

.world-the-lien .world-hero-button {
  display: inline-block;
  font-family: var(--w-caps);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--w-ink);
  background: var(--w-amber);
  padding: 8px 18px;
  border-radius: 3px;
  box-shadow: 0 3px 0 #000;
  transition: transform 0.15s ease, background 0.15s ease;
}

.world-the-lien .world-hero-button:hover { background: #e9c98a; 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-the-lien .world-hero { height: min(78vh, 560px); }
  .world-the-lien .world-hero-scrim {
    background: linear-gradient(0deg, rgba(22, 17, 11, 0.96) 0%, rgba(22, 17, 11, 0.86) 45%, rgba(22, 17, 11, 0) 80%);
  }
  .world-the-lien .world-hero-text {
    top: auto;
    bottom: 24px;
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
  }
  .world-the-lien .world-hero-logo { width: 256px; }
}

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

.world-the-lien h1,
.world-the-lien h2,
.world-the-lien h3,
.world-the-lien h4 { letter-spacing: 0; }

.world-the-lien .section-heading h3 {
  font-family: var(--w-caps);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--w-amber);
}

.world-the-lien .pill,
.world-the-lien .pill.ghost {
  font-family: var(--w-caps);
  font-weight: 400;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--w-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--w-amber);
  border-radius: 0;
  padding: 0 0 2px;
}

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

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

.world-the-lien .gp-shots a:hover { border-color: var(--w-amber); }
.world-the-lien .gp-shots img { image-rendering: pixelated; }
.world-the-lien .gp-video-caption { color: var(--w-muted); font-style: italic; }

/* The mechanics board link. */
.world-the-lien .button {
  font-family: var(--w-caps);
  font-weight: 400;
  font-size: 20px;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--w-ink);
  background: var(--w-amber);
  border: 0;
  border-radius: 3px;
  padding: 8px 18px;
  box-shadow: 0 3px 0 #000;
}

.world-the-lien .button:hover { background: #e9c98a; }

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

.world-the-lien a:focus-visible { outline: 2px solid var(--w-amber); 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. The
   studio font and size come back with it. */
.world-the-lien .site-footer {
  background-color: var(--bg);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
}