/* Pondhawk's own identity: all-sans (Jost), pale powder-blue -- the color
   of a mature male eastern pondhawk dragonfly -- in light mode. Distinct
   on purpose from nodalitygame.com's ink-on-parchment serif look; the one
   deliberate exception is the Nodality card below, which keeps that
   game's own serif identity (Cinzel/IM Fell English) rather than folding
   into Pondhawk's -- it's a mark of a specific game, not the studio. */
:root {
  --ink: #1b2b33;
  --paper: #d9ecf2;
  --text-dim: #4d6b78;
  --text-faint: #7c98a3;
  --rule: #b9d4dd;
  --accent: #3d7a99;
  --font-display: 'Jost', sans-serif;
  --font-body: 'Jost', sans-serif;
  --font-mark: 'Jost', sans-serif;
  --font-nodality-display: 'Cinzel', Georgia, serif;
  --font-nodality-body: 'IM Fell English', Georgia, serif;
  /* Nodality's own card/text colors (site/app.js's CARD/TEXT/BADGE_BORDER
     tables), INVERTED from Pondhawk's own mode -- Nodality's dark scheme
     while this page is light, and vice versa -- so the card pops as a
     little window into the game rather than blending into the page. */
  --nodality-card-bg: #2b2419;
  --nodality-card-text: #e8dcc4;
  --nodality-card-border: #a99872;
  /* Title-screen ring mark, corner-cropped onto the game card below (see
     .game-ring) -- these are Nodality's own CONFIG_ACCENT/MUTED dark-mode
     values, matching the dark-mode look --nodality-card-bg already puts
     the card in while this page is light. */
  --nodality-ring-red: #d15a6e;
  --nodality-ring-yellow: #d6b54a;
  --nodality-ring-green: #5fa07f;
  --nodality-ring-blue: #6e86b8;
  --nodality-ring-node-stroke: #a99872;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #d9eef4;
    --paper: #10191d;
    --text-dim: #7fa3b0;
    --text-faint: #52707a;
    --rule: #223339;
    --accent: #6fb2d4;
    --nodality-card-bg: #f4ecd6;
    --nodality-card-text: #3d2b1a;
    --nodality-card-border: #3d2b1a;
    /* Card flips to Nodality's light-mode look when the page itself is
       dark, so the ring mark flips to that mode's own accent values too. */
    --nodality-ring-red: #a12f42;
    --nodality-ring-yellow: #a8862c;
    --nodality-ring-green: #3f6b52;
    --nodality-ring-blue: #35486b;
    --nodality-ring-node-stroke: #6b5a3a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
}

.hero {
  padding: 72px 24px 40px;
  text-align: center;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.crest {
  display: flex;
  color: var(--ink);
}

.wordmark {
  margin: 0;
  font-family: var(--font-mark);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 42px);
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.tagline {
  margin: 0;
  font-weight: 300;
  color: var(--text-dim);
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

section {
  margin-bottom: 44px;
}

section h2 {
  font-family: var(--font-mark);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--text-faint);
  margin: 0 0 14px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
}

#about p {
  text-align: justify;
  hyphens: auto;
}

a {
  color: var(--accent);
}

/* Nodality gets its own serif identity here, not Pondhawk's sans, AND its
   own (inverted) color scheme -- not Pondhawk's palette -- so this card
   pops as a little window into the game rather than blending into
   whatever page it sits on. */
.game-card {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--nodality-card-bg);
  border: 2px solid var(--nodality-card-border);
  padding: 16px 18px;
  transition: box-shadow 0.15s ease;
}
.game-card:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nodality-card-border) 35%, transparent);
}
/* Corner crop of the title screen's ring mark -- same "0 -60 390 320"
   viewBox crop the game itself uses, and the same fixed (non-animated)
   look the game falls back to under Reduce Motion, rather than the
   in-game version's continuous spin/pulse. Positioned elements paint
   after non-positioned ones regardless of DOM order, so game-name/
   game-desc (also given position: relative below) stay on top of it.
   The mount clips to the card's own box -- the ring's aspect-ratio-driven
   height doesn't always match the card's (text-driven) height, so without
   this the ring can run past the card's bottom edge. Clipping here rather
   than on .game-card itself keeps that element's own hover box-shadow,
   which lives outside its border box, from being clipped too. */
.game-ring-mount {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.game-ring {
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  max-width: 170px;
  aspect-ratio: 390 / 320;
}
.game-name {
  position: relative;
  display: block;
  font-family: var(--font-nodality-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--nodality-card-text);
}
.game-desc {
  position: relative;
  display: block;
  font-family: var(--font-nodality-body);
  font-style: italic;
  font-size: 15px;
  color: var(--nodality-card-text);
  opacity: 0.75;
  margin-top: 2px;
}

footer {
  text-align: center;
  padding: 24px;
  color: var(--text-faint);
  font-family: var(--font-mark);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.06em;
}