/* Cygnus Works site. One stylesheet for every page, no build step, no fonts
   to fetch. The five palette variables are the same ones the games use, so
   the site and the apps look like the same thing.

   Nothing here loads anything over the network. If you add a rule that does
   (a webfont, a background image from a CDN), the Content-Security-Policy in
   netlify.toml will block it, which is the intended answer. */

:root{
  /* the shell's palette */
  --bg:#101418;
  --panel:#1a2129;
  --ink:#e8edf2;
  --dim:#8a97a5;
  --hot:#ffc23c;

  /* derived from those five, nothing new invented */
  --text:#c8d2db;
  --line:#26303a;
  --line-soft:#1d252d;
  --panel-2:#151c23;
  --hot-dim:#e0a52f;

  --wrap:62rem;
  --measure:70ch;
  --font: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} }

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}
/* the page head already gives the first section its air */
main > .wrap > :first-child{margin-top:0}

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

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--hot); color:#241a04; 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-soft); 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:700; letter-spacing:.01em;
}
.brand:hover{color:var(--hot)}
.brand svg{width:25px; height:25px; color:var(--hot); flex:none}
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:2.75rem 0 1.5rem; border-bottom:1px solid var(--line-soft)}
.kicker{
  margin:0 0 .5rem; font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hot);
}
h1{
  margin:0 0 .5rem; color:var(--ink);
  font-size:clamp(1.85rem,5vw,2.5rem); line-height:1.15; letter-spacing:-.01em;
}
.lede{margin:0; color:var(--dim); font-size:1.02rem; max-width:var(--measure)}
.lede a{color:var(--hot)}
.title-row{display:flex; align-items:center; gap:.85rem; margin:0 0 .5rem}
.title-row h1{margin:0}
.title-row svg{width:38px; height:38px; color:var(--hot); flex:none}
.stamp{margin:.9rem 0 0; color:var(--dim); font-size:.86rem}

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

h2{
  margin:2.9rem 0 .85rem; 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;
}
h2 .num{color:var(--hot); font-variant-numeric:tabular-nums; margin-right:.45em}
h3{
  margin:1.9rem 0 .5rem; color:var(--ink);
  font-size:1rem; line-height:1.4; scroll-margin-top:1.25rem;
}
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(--dim)}
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;
}

/* ---- summary / note panels ---- */

.panel{
  background:var(--panel); border:1px solid var(--line);
  border-left:4px solid var(--hot);
  border-radius:12px; padding:1.1rem 1.25rem;
  margin:0 0 2rem; max-width:var(--measure);
}
.panel > :last-child{margin-bottom:0}
.panel h2{margin-top:0}
.note{border-left-color:var(--dim)}

/* ---- table of contents ---- */

.toc{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:1.1rem 1.25rem .9rem;
  margin:0 0 2.25rem;
}
.toc h2{
  margin:0 0 .7rem; padding:0; border:0;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.toc ol{
  margin:0; padding:0; list-style:none;
  columns:2; column-gap:2rem; max-width:none;
}
.toc li{margin:0 0 .35rem; break-inside:avoid; font-size:.94rem}
.toc a{color:var(--text); text-decoration:none}
.toc a:hover{color:var(--hot); text-decoration:underline}
.toc .n{color:var(--dim); font-variant-numeric:tabular-nums; margin-right:.4em}
@media (max-width:34rem){ .toc ol{columns:1} }

/* ---- tables ---- */

/* tables get more room than prose does; a three-column table at 70ch is a
   column of single words */
.table-scroll{overflow-x:auto; margin:0 0 1.3rem; max-width:none}
/* three-column tables squeeze into a column of single words on a phone, so
   they get a floor and scroll sideways instead */
.table-scroll.wide table{min-width:30rem}
table{border-collapse:collapse; width:100%; font-size:.94rem}
th,td{
  text-align:left; padding:.6rem .75rem;
  border:1px solid var(--line); vertical-align:top;
}
th{background:var(--panel); color:var(--ink); font-weight:600}
td{color:var(--text)}
td code{background:var(--panel-2)}

/* ---- the shelf ---- */

.shelf{
  display:grid; gap:1rem; margin:0 0 1.5rem; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  max-width:none;
}
.game{
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:1.15rem 1.25rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.game-head{display:flex; align-items:center; gap:.7rem}
.game-head svg{width:34px; height:34px; color:var(--hot); flex:none}
/* lets one shape in an icon knock out the one behind it */
.fill-panel{fill:var(--panel)}
.game h3{margin:0; font-size:1.05rem}
.game p{margin:0; font-size:.94rem; color:var(--text); max-width:none}
.game .meta{
  margin-top:auto; padding-top:.6rem; font-size:.82rem; color:var(--dim);
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline;
}
.game .meta code{font-size:.9em; background:var(--panel-2)}
.tag{
  display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line);
  border-radius:99px; padding:.15rem .55rem;
}
.tag.soon{color:var(--hot); border-color:var(--hot-dim)}

/* the six roster games with no folder yet */
.planned{
  display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0 0 1.05rem;
  list-style:none; max-width:var(--measure);
}
.planned li{
  margin:0; font-size:.9rem; color:var(--dim);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:99px; padding:.3rem .8rem;
}

/* ---- the posture list on the front page ---- */

.posture{
  display:grid; gap:.9rem 1.75rem; padding:0; margin:0 0 1.05rem; list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  max-width:none;
}
.posture li{margin:0; padding-left:1.4rem; position:relative; font-size:.96rem}
.posture li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.5rem; height:.5rem; border-radius:2px; background:var(--hot);
}
.posture b{color:var(--ink); 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)}

/* ---- Q and A on the support page ---- */

.qa{margin:0 0 2rem}
.qa h3{
  margin:1.8rem 0 .45rem; color:var(--ink); font-size:1.02rem;
}
.qa h3:first-child{margin-top:0}

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

footer.site{
  border-top:1px solid var(--line-soft); 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;
}

/* ---- print: the policy gets read on paper sometimes ---- */

@media print{
  body{background:#fff; color:#000; font-size:11pt}
  .top,footer.site,.skip,.toc{display:none}
  a{color:#000}
  h1,h2,h3,strong{color:#000}
  h2{border-bottom:1px solid #999}
  .panel{border:1px solid #999; border-left-width:1px}
  code{background:#eee; color:#000}
  th{background:#eee; color:#000}
  th,td{border:1px solid #999}
  .prose,p,ul,ol,table,.panel{max-width:none}
}