/* Cygnus Works. One stylesheet, every page, no build step and no fonts to
   fetch.

   The palette is Meridian Void's, lifted from that repo's src/styles/global.css.
   It is the studio's teal rather than the game's: press.astro on the game site
   already documents the leading mark and the teal as the studio's, and this is
   the page that claim points at.

   The starfield stays behind on the game site. A page listing a minesweeper
   build under a parallaxing nebula reads as one game's marketing rather than a
   studio front door.

   Nothing here loads anything over the network. Add a webfont or a CDN image
   and the Content-Security-Policy in netlify.toml blocks it, which is the
   intended answer rather than a bug. */

:root{
  /* surfaces */
  --bg:#06080f;
  --panel:#111627;
  --panel-2:#0d1120;
  --line:#1e2640;
  --line-bright:#2b3a63;

  /* text */
  --ink:#e6e9f2;
  --text:#c3cade;
  --dim:#9aa3bd;
  --faint:#7d86a6;

  /* accents */
  --hot:#5eead4;
  --hot-dim:#2c7a72;
  --indigo:#818cf8;
  --warn:#fbbf24;
  --good:#4ade80;

  --wrap:68rem;
  --measure:70ch;
  --radius:14px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:17px/1.7 var(--font);
  -webkit-font-smoothing:antialiased;
}

/* ---- layout ---- */

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 1.25rem}
.prose{max-width:var(--measure)}
main{padding:2.5rem 0 4rem}
main > .wrap > :first-child{margin-top:0}

/* ---- skip link ---- */

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--hot); color:#04110f; padding:.6rem 1rem;
  border-radius:0 0 10px 0; font-weight:700; z-index:20;
}
.skip:focus{left:0}

/* ---- site header ---- */

.top{border-bottom:1px solid var(--line); background:var(--panel-2)}
.top .wrap{
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;
  align-items:center; justify-content:space-between;
  padding-top:.9rem; padding-bottom:.9rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--ink); text-decoration:none; font-weight:800;
  font-size:1.08rem; letter-spacing:-.01em;
}
.brand:hover{color:var(--hot)}
.brand .mark{color:var(--hot); font-size:.95rem}
nav.top-nav{display:flex; flex-wrap:wrap; gap:.35rem .25rem}
nav.top-nav a{
  color:var(--dim); text-decoration:none; font-size:.92rem;
  padding:.35rem .6rem; border-radius:8px;
}
nav.top-nav a:hover{color:var(--ink); background:var(--panel)}
nav.top-nav a[aria-current="page"]{color:var(--hot); background:var(--panel)}

/* ---- page head ---- */

.page-head{padding:3rem 0 1.75rem; border-bottom:1px solid var(--line)}
.kicker{
  margin:0 0 .5rem; font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hot);
}
h1{
  margin:0 0 .6rem; color:var(--ink);
  font-size:clamp(2rem,5.5vw,2.9rem); line-height:1.12; letter-spacing:-.02em;
}
.lede{margin:0; color:var(--dim); font-size:1.08rem; max-width:var(--measure)}
.lede a{color:var(--hot)}

/* ---- prose ---- */

h2{
  margin:3rem 0 .9rem; color:var(--ink);
  font-size:1.22rem; line-height:1.35; letter-spacing:-.005em;
  padding-bottom:.45rem; border-bottom:1px solid var(--line);
  scroll-margin-top:1.25rem;
}
h3{margin:1.9rem 0 .5rem; color:var(--ink); font-size:1rem; line-height:1.4}
p{margin:0 0 1.05rem; max-width:var(--measure)}
ul,ol{margin:0 0 1.05rem; padding-left:1.3rem; max-width:var(--measure)}
li{margin-bottom:.5rem}
li::marker{color:var(--faint)}
strong{color:var(--ink); font-weight:600}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

a{color:var(--hot); text-decoration:underline; text-underline-offset:.16em}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--hot); outline-offset:3px; border-radius:3px;
}

code{
  font-family:var(--mono); font-size:.86em;
  background:var(--panel); color:var(--ink);
  padding:.12em .38em; border-radius:5px; overflow-wrap:anywhere;
}

/* ---- section intro under an h2 ---- */

.sec-note{margin:-.35rem 0 1.4rem; color:var(--faint); font-size:.94rem}

/* ---- the shelf ----------------------------------------------------------
   One card per title. The featured cards span the grid because Meridian Void
   is the flagship and Thanatide is the only thing on the page somebody can
   click and play, so both earn the full width. --ico carries the game's own
   accent, which is a fact about the game rather than about this page. */

/* Two columns, not three. There are four titles and two of them are `.wide`,
   so a three-column track left one empty cell sitting next to Elephant Pop and
   made the row read as a card that failed to load. */
.shelf{
  display:grid; gap:1.1rem; margin:0 0 1.5rem; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(23rem,1fr));
  max-width:none;
}
.game{
  --ico:var(--hot);
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.3rem 1.4rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.game.wide{grid-column:1 / -1}
/* Prose stays at the reading measure on a full-width card, and the meta line
   under it matches, so the text block reads as one column rather than a narrow
   paragraph with a long caption running out from under it. */
.game.wide .blurb,
.game.wide .meta{max-width:var(--measure)}
.game-head{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.game-head svg{width:34px; height:34px; color:var(--ico); flex:none}
.game h3{margin:0; font-size:1.12rem; color:var(--ink)}
.game.wide h3{font-size:1.5rem; letter-spacing:-.015em}
.game p{margin:0; font-size:.96rem; color:var(--text); max-width:none}

.game .meta{
  margin-top:auto; padding-top:.85rem; font-size:.84rem; color:var(--dim);
  display:flex; flex-wrap:wrap; gap:.55rem 1rem; align-items:center;
}

/* Per-game accents. These are classes rather than a `style="--ico:#..."`
   attribute on the <li> because the Content-Security-Policy in netlify.toml
   sets `style-src 'self'` with no 'unsafe-inline', and an inline style
   attribute is exactly what that blocks. Inline would fail silently: every
   card would fall back to teal and the CSP violation only shows in the
   console. Each value is the game's own accent, taken from its own site. */
.g-thanatide{--ico:#6fb3d8}  /* AssaultGame/site/css */
.g-meridian {--ico:#5eead4}  /* meridian-void-web --accent */
.g-elephant {--ico:#ffc23c}  /* elephantpop/site --gold */
/* The Shell is ten games rather than one, and has no single accent of its own.
   Muted on purpose: in teal it read as a fourth featured title. */
.g-shell    {--ico:var(--faint)}

/* featured card gets a wash of its own accent so the eye lands there first */
.game.feature{
  background:
    radial-gradient(560px 200px at 0% 0%, color-mix(in srgb, var(--ico) 11%, transparent), transparent 70%),
    var(--panel);
  border-color:color-mix(in srgb, var(--ico) 32%, var(--line));
}

/* ---- status tags ---- */

.tag{
  display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line-bright);
  border-radius:99px; padding:.15rem .6rem; white-space:nowrap;
}
.tag.live{color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, var(--line))}
.tag.soon{color:var(--hot); border-color:var(--hot-dim)}
.tag.hold{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line))}

/* ---- buttons ---- */

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--hot); color:#04110f; font-weight:650;
  padding:.62rem 1.15rem; border-radius:10px; text-decoration:none;
  font-size:.96rem; line-height:1; border:1px solid transparent;
}
.btn:hover{filter:brightness(1.08); color:#04110f}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-bright)}
.btn.ghost:hover{border-color:var(--hot-dim); color:var(--hot); filter:none}
.btn-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.35rem}

/* ---- the ten Shell titles ---- */

.titles{
  display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:.35rem 0 0;
  list-style:none; max-width:none;
}
.titles li{
  margin:0; font-size:.88rem; color:var(--dim);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:99px; padding:.28rem .75rem;
}

/* ---- values list on the about page ---- */

.vals{list-style:none; padding:0; margin:.5rem 0 1.05rem; display:grid; gap:.75rem}
.vals li{margin:0; padding-left:1.4rem; position:relative; color:var(--text)}
.vals li::before{content:"\2726"; position:absolute; left:0; color:var(--hot)}
.vals strong{color:var(--ink)}

/* ---- role cards on the join page ---- */

.roles{
  display:grid; gap:1.1rem; margin:0 0 1.5rem; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); max-width:none;
}
.role{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.3rem 1.4rem;
  display:flex; flex-direction:column;
}
.role .glyph{font-size:1.5rem; color:var(--hot); line-height:1; margin-bottom:.5rem}
.role h3{margin:0 0 .5rem; font-size:1.15rem}
.role p{margin:0 0 .9rem; font-size:.96rem; max-width:none}
.role .fit{
  margin:auto 0 0; padding-top:.85rem; font-size:.9rem; color:var(--dim);
  border-top:1px solid var(--line);
}
.role .fit b{color:var(--hot); font-weight:600}

/* ---- link rows ---- */

.links{
  display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 0;
  padding:0; list-style:none; max-width:none;
}
.links li{margin:0}
.links a{
  display:inline-block; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:.5rem .9rem; font-size:.94rem; color:var(--ink);
}
.links a:hover{border-color:var(--hot-dim); color:var(--hot)}

/* ---- footer ---- */

footer.site{
  border-top:1px solid var(--line); background:var(--panel-2);
  padding:1.75rem 0 3rem; font-size:.88rem; color:var(--dim);
}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between}
footer.site p{margin:0; max-width:none}
footer.site nav{display:flex; flex-wrap:wrap; gap:1rem}
footer.site a{color:var(--dim)}
footer.site a:hover{color:var(--hot)}

/* ---- 404 ---- */

.centered{
  min-height:60vh; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
}