/*
  Runeblossom Farms — landing page visual design

  Direction: "field journal at dusk." There is no logo, no key art, no
  screenshots — the game is still placeholder pixel art — so the whole
  visual case is built from type, color and spacing, not imagery.

  The palette comes from the one real asset in the project, the favicon
  apple (warm red/gold), set against a deep moss-green "dusk in the
  valley" background rather than the more common near-black or cream
  page tones. A monospace display face (devlog/terminal, "work in
  progress") is paired with a serif body face (journal, "written by a
  person") — an inversion of the usual serif-display/sans-body pairing.

  Signature element: small carved "threshold" marks (rotated squares)
  between sections, echoing the pitch copy's "the village still carves
  runes above every door" — each one marks the doorway into the next
  part of the page. They use a slow ember-like pulse to read as "alive,"
  gated behind prefers-reduced-motion.

  The recruiting section — the page's actual call to action, aimed at
  pixel artists — gets the one piece of real containment on the page: a
  flat-color, hard-cornered, thick-bordered panel styled like the back
  of a seed packet, i.e. the plain, honest, not-yet-illustrated panel of
  something that will someday have art on the front. Sharp corners
  throughout (no border-radius) on purpose: this is a pixel art game,
  and pixel art doesn't have anti-aliased corners.

  Revision (desktop density pass): at 1280px the page used to be a
  42rem column adrift in a flat, textureless expanse, with the
  recruiting card as the only bounded shape on the page and the
  threshold marks too small to register as a motif. Everything below
  600px is untouched on purpose (mobile already reviewed and working).
  Two breakpoints layer in the fix without changing the base rules:

  - 641px: the page itself becomes a bounded object — main gets a
    hairline gold edge and a soft drop shadow — and the space outside
    it gets a CSS-only texture (layered radial gradients + a fine
    diagonal weave on the existing --soil color, no image asset, never
    under any text since main stays opaque). The threshold marks grow
    into small ringed medallions (layered box-shadow, no new colors)
    so they read as a recurring signature, not a bullet.
  - 900px: there's finally enough width to use structurally rather
    than just widen the frame around a still-narrow column. main
    becomes a two-column grid: the existing 34rem reading column
    (h1/pitch/devlogs, untouched) on the left, and the recruiting card
    stretched into a right-hand rail beside it, vertically centered.
    The card stops being "one shape adrift below the text" and becomes
    a second bounded shape working the composition alongside the
    text column — which is also what finally uses the width, instead
    of widening a frame around empty padding.
*/

:root {
  /* Backgrounds */
  --soil: #2b3a26;        /* page background — dusk in the valley */
  --soil-deep: #1c2718;   /* footer strip */
  --parchment: #ece3cf;   /* recruiting card surface */

  /* Text */
  --cream: #f2ecd9;       /* body text on --soil */
  --cream-muted: #b9b195; /* secondary text on --soil / --soil-deep */
  --ink: #241a12;         /* body text on --parchment */

  /* Accent — from the favicon apple */
  --rust: #c1502e;        /* decorative: card border, on --parchment */
  --rust-bright: #ec8552; /* text/border/link on --soil (dark contexts) */
  --rust-deep: #93381f;   /* text/link on --parchment (light contexts) */
  --gold: #d9a441;        /* threshold marks, focus ring on --soil */

  --font-display: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono",
    "Consolas", "Liberation Mono", monospace;
  --font-body: Georgia, "Iowan Old Style", "Palatino Linotype",
    "Times New Roman", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--soil);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

main {
  max-width: 42rem;
  width: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 2rem) clamp(3rem, 8vw, 5rem);
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1rem + 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rust-bright);
  margin: 0 0 1.25rem;
  line-height: 1.15;
}

.pitch {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--cream);
  max-width: 34rem;
  margin: 0;
}

/* Threshold marks — carved sigils marking the doorway into the next
   section. Purely decorative (content: ""), so invisible to assistive
   tech; the sections themselves carry all the real structure. */
.pitch::after,
.devlogs::after {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  margin: 2.5rem 0 0;
  background: var(--gold);
  border: 1px solid var(--rust-bright);
  transform: rotate(45deg);
  animation: ember 4s ease-in-out infinite;
}

@keyframes ember {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pitch::after,
  .devlogs::after {
    animation: none;
    opacity: 0.85;
  }
}

.devlogs {
  margin-top: 2.25rem;
}

.devlogs p {
  color: var(--cream-muted);
  margin: 0.75rem 0 0;
}

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

/* Links styled as small tags, in the devlog/terminal display face — the
   only "buttons" on the page, so they should look unmistakably like
   controls, not like inline prose. */
.devlogs a,
.recruiting a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.65em 1.15em;
  border: 2px solid var(--rust-bright);
  color: var(--rust-bright);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.devlogs a:hover,
.devlogs a:focus-visible {
  background: var(--rust-bright);
  color: var(--soil-deep);
}

a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Recruiting card — the page's actual ask, framed like the plain back
   panel of a seed packet: flat parchment, a thick rule, hard corners.
   Honest container for an honest pitch to the one audience that will
   judge the page's craft as closely as the game's. */
.recruiting {
  margin-top: 2.25rem;
  max-width: 100%;
  background: var(--parchment);
  color: var(--ink);
  border: 3px solid var(--rust);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.recruiting h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rust-deep);
  margin: 0 0 1rem;
  line-height: 1.3;
}

.recruiting > p {
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 38ch;
}

.recruiting a {
  border-color: var(--rust-deep);
  color: var(--rust-deep);
}

.recruiting a:hover,
.recruiting a:focus-visible {
  background: var(--rust-deep);
  color: var(--parchment);
}

.recruiting a:focus-visible {
  outline-color: var(--ink);
}

footer {
  border-top: 1px solid rgba(217, 164, 65, 0.35);
  background: var(--soil-deep);
  color: var(--cream-muted);
  padding: 1.5rem clamp(1.25rem, 5vw, 2rem);
}

footer p {
  max-width: 42rem;
  margin: 0 auto;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  h1 {
    letter-spacing: 0.03em;
  }

  .devlogs a,
  .recruiting a {
    display: block;
    text-align: center;
  }
}

/* Desktop composition pass — see the "Revision" note at the top of this
   file. Everything below is scoped to wider viewports on purpose, so
   the mobile layout (already reviewed and working, <=600px) never
   changes. */
@media (min-width: 641px) {
  /* The page itself becomes one bounded object instead of "text, then
     a card, floating on flat background": a faint carved-gold edge
     and a soft lift off the textured backdrop. */
  main {
    border: 1px solid rgba(217, 164, 65, 0.22);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.25),
      0 2rem 4rem -2rem rgba(0, 0, 0, 0.6);
  }

  /* The space outside that frame gets something to look at: a
     dappled-light texture (dusk through canopy) plus a fine woven
     diagonal grain, both pure CSS gradients on top of the existing
     --soil color. main stays opaque, so this never sits under text
     and never changes a contrast pairing. */
  body {
    background-image:
      radial-gradient(circle at 12% 18%, rgba(217, 164, 65, 0.07), transparent 38%),
      radial-gradient(circle at 88% 12%, rgba(28, 39, 24, 0.55), transparent 42%),
      radial-gradient(circle at 80% 82%, rgba(217, 164, 65, 0.05), transparent 34%),
      radial-gradient(circle at 15% 85%, rgba(28, 39, 24, 0.5), transparent 38%),
      repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.035) 0px,
        rgba(0, 0, 0, 0.035) 1px,
        transparent 1px,
        transparent 11px
      );
    background-attachment: fixed;
  }

  /* The threshold sigils grow into an actual medallion — layered
     rings via box-shadow (no new colors), centered under the reading
     column — so the motif reads as a signature, not a bullet. */
  .pitch::after,
  .devlogs::after {
    width: 1.5rem;
    height: 1.5rem;
    margin: 3rem auto 0;
    box-shadow:
      0 0 0 6px var(--soil),
      0 0 0 8px rgba(217, 164, 65, 0.4),
      0 0 20px 2px rgba(217, 164, 65, 0.2);
  }
}

/* Once there's real width to spend (900px+), spend it structurally:
   the recruiting card becomes a right-hand rail beside the existing
   34rem reading column, instead of the frame just growing around
   empty padding. This is the actual fix for "content in a narrow
   column, rest of the viewport flat" — the earlier 641px tier alone
   only textured the margins, it didn't use them. */
@media (min-width: 900px) {
  main {
    max-width: 74rem;
    padding: clamp(2rem, 6vw, 4.5rem) clamp(2rem, 5vw, 4rem) clamp(3rem, 8vw, 5rem);
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(18rem, 1fr);
    grid-template-areas:
      "title      recruiting"
      "pitch      recruiting"
      "devlogs    recruiting";
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }

  h1 {
    grid-area: title;
  }

  .pitch {
    grid-area: pitch;
  }

  .devlogs {
    grid-area: devlogs;
  }

  .recruiting {
    grid-area: recruiting;
    margin-top: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}