/* Astris — astristcg.com */

:root {
  --bg: #0b0d12;
  --bg-2: #11141b;
  --bg-3: #171b24;
  --line: #232936;
  --line-2: #2e3646;
  --ink: #e8eaf0;
  --ink-2: #a7aebd;
  --ink-3: #737b8c;
  --accent: #d8a44a;
  --accent-2: #f0c274;
  --link: #8fb6e8;
  --radius: 6px;
  --wide: 1240px;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  --fac-pv: #b47ad6;
  --fac-ihn: #d4574a;
  --fac-nt: #4f9ad8;
  --fac-gu: #48b39a;
  --fac-hlm: #d8a44a;
  --fac-emb: #e07a3c;
  --fac-con: #8d94a6;
  --fac-xx: #6b7386;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
code { font-family: var(--mono); font-size: .85em; color: var(--ink-2); }
img { max-width: 100%; height: auto; display: block; }

main {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.lede { color: var(--ink-2); font-size: 1.05rem; margin-top: 0; }
.crumb { margin: 0 0 1rem; font-size: .85rem; text-transform: uppercase;
         letter-spacing: .08em; color: var(--ink-3); }

/* ---------- chrome ---------- */

header.site {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 0 1.25rem;
  height: 58px;
  background: rgba(11, 13, 18, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .brand {
  font-weight: 700; letter-spacing: .22em; font-size: 1rem;
  color: var(--ink); text-decoration: none;
  display: flex; align-items: center; flex: none;
}
/* The global img{height:auto} would otherwise ignore the height attribute. */
header.site .brand img { height: 21px; width: auto; }
header.site nav { display: flex; gap: 1.5rem; }
header.site nav a {
  color: var(--ink-2); font-size: .92rem; padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
header.site nav a:hover { color: var(--ink); text-decoration: none; }
header.site nav a.on { color: var(--accent); border-bottom-color: var(--accent); }

footer.site {
  border-top: 1px solid var(--line);
  padding: 2rem 1.25rem;
  color: var(--ink-3);
  font-size: .85rem;
}
footer.site p { max-width: var(--wide); margin: 0 auto; }
footer.site .copyright {
  margin-top: .75rem; padding-top: .75rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: .8rem;
}

/* ---------- home ---------- */

.hero {
  display: grid; grid-template-columns: 1fr 300px; gap: 3rem;
  align-items: center; margin-bottom: 4rem;
}
.hero h1 {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  letter-spacing: .12em; margin: 0 0 .75rem;
}
.hero .wordmark { width: min(420px, 70%); height: auto; margin-bottom: 1.25rem; }

/* Banner fills the hero panel. It is clipped to the panel rather than bled to
   the viewport edge, which would widen the document and scroll it sideways. */
.hero.has-banner {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 3.25rem 2.25rem 3rem; margin-top: -.5rem;
  border: 1px solid var(--line); border-radius: 12px;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Unlike the page banners, body copy sits on this one, so a light gradient
   stays on the left edge. The art itself is no longer dimmed. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11,13,18,.62) 0%, rgba(11,13,18,.22) 48%, rgba(11,13,18,0) 100%),
    linear-gradient(to bottom, rgba(11,13,18,.25) 0%, rgba(11,13,18,0) 30%, rgba(11,13,18,.6) 100%);
}
.hero .tagline {
  font-family: var(--serif); font-size: 1.3rem; font-style: italic;
  color: var(--accent-2); margin: 0 0 1.25rem;
}
.hero p { color: var(--ink-2); max-width: 52ch; }
/* Shadows carry legibility now that the art is at full brightness. */
.hero.has-banner .wordmark { filter: drop-shadow(0 3px 14px rgba(0,0,0,.85)); }
.hero.has-banner .hero-text p {
  color: var(--ink);
  text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9);
}
.hero.has-banner .tagline { color: var(--accent-2); }
.hero-art img {
  border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
  transition: opacity .35s ease;
}
.hero-art img.swapped { animation: hero-in .45s ease both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(6px); } }
.hero-caption {
  margin: .85rem 0 0; text-align: center;
  font-size: .8rem; letter-spacing: .04em; color: var(--ink-3);
}
.cta { margin-top: 1.75rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: .7rem 1.3rem; border-radius: var(--radius);
  background: var(--accent); color: #1a1206; font-weight: 600; font-size: .95rem;
}
.btn:hover { background: var(--accent-2); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn.ghost:hover { background: var(--bg-3); }

.strip { margin-bottom: 3.5rem; }
.strip h2, .cols h2 { font-size: .82rem; text-transform: uppercase;
                      letter-spacing: .12em; color: var(--ink-3); }
.strip-row {
  display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .75rem;
  scrollbar-width: thin;
}
.strip-row img { width: 132px; border-radius: 6px; border: 1px solid var(--line); }
.strip-row a:hover img { border-color: var(--accent); }

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.cols h2 { margin-top: 0; }
.cols p { color: var(--ink-2); font-size: .95rem; }

/* ---------- card browser ---------- */

.filters {
  display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0 1rem;
}
.filters input, .filters select, .filters button {
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: .55rem .7rem; font: inherit; font-size: .92rem;
}
.filters input { flex: 1 1 260px; }
.filters input:focus, .filters select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
.filters button { cursor: pointer; color: var(--ink-2); }
.filters button:hover { color: var(--ink); border-color: var(--ink-3); }

.count { color: var(--ink-3); font-size: .85rem; margin: 0 0 1.25rem; }
.empty { color: var(--ink-3); padding: 3rem 0; text-align: center; }

.grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.tile { display: block; color: inherit; }
.tile:hover { text-decoration: none; }
.tile-art {
  position: relative; aspect-ratio: 600 / 840; border-radius: 7px;
  overflow: hidden; background: var(--bg-3); border: 1px solid var(--line);
  transition: border-color .15s, transform .15s;
}
.tile:hover .tile-art { border-color: var(--accent); transform: translateY(-3px); }
.tile-art img { width: 100%; height: 100%; object-fit: cover; }
.tile-art .noart {
  display: grid; place-items: center; height: 100%;
  color: var(--ink-3); font-size: .8rem;
}
.tile-art .faces {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,.75); color: var(--ink-2);
  border-radius: 4px; padding: 1px 6px; font-size: .7rem;
}
.tile h3 { font-size: .88rem; margin: .55rem 0 .1rem; font-weight: 500; }
.tile .t { color: var(--ink-3); font-size: .76rem; }

/* ---------- card detail ---------- */

.card-head {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 2.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.card-head > div { flex: 1; min-width: 0; }
.card-head h1 { margin: 0 0 .25rem; }
.card-head .crest { width: 44px; height: auto; flex: none; opacity: .95; }
.card-head .acts { flex: none; opacity: .9; }
.card-detail .sub { color: var(--ink-2); margin: 0; font-size: .95rem; }
.card-detail .dot { color: var(--ink-3); margin: 0 .4rem; }
.fac { font-weight: 600; }
.fac-pv { color: var(--fac-pv); }   .fac-ihn { color: var(--fac-ihn); }
.fac-nt { color: var(--fac-nt); }   .fac-gu  { color: var(--fac-gu); }
.fac-hlm { color: var(--fac-hlm); } .fac-emb { color: var(--fac-emb); }
.fac-con { color: var(--fac-con); } .fac-xx  { color: var(--fac-xx); }

.face {
  display: grid; grid-template-columns: 340px 1fr; gap: 2.5rem;
  padding: 2rem 0; border-top: 1px solid var(--line);
}
.face-art img { border-radius: 9px; box-shadow: 0 16px 44px rgba(0,0,0,.5); }
.face-art .noart {
  aspect-ratio: 600/840; display: grid; place-items: center;
  background: var(--bg-3); border: 1px dashed var(--line-2);
  border-radius: 9px; color: var(--ink-3); font-size: .85rem;
}
.face-info h3 { font-size: 1.4rem; margin: 0 0 .2rem; }
.typeline {
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em;
  font-size: .76rem; margin: 0 0 1.5rem;
}

.stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.stat {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .4rem .7rem; min-width: 62px;
}
.stat dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
           color: var(--ink-3); }
.stat dd { margin: 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tok-img {
  display: inline-block; width: 18px; height: 18px;
  vertical-align: -.22em; margin: 0 .1em;
}
.textblock p.ind { padding-left: 1.4rem; color: var(--ink-2); font-size: .95em; }
.textblock { margin: 0 0 1.25rem; }
.textblock h4 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); margin: 0 0 .3rem;
}
.textblock p { margin: 0 0 .6rem; }

.kws { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.25rem 0; }
.kw {
  font-size: .76rem; padding: .18rem .55rem; border-radius: 20px;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink-2);
}

.meta { margin: 1.5rem 0 0; border-top: 1px solid var(--line); padding-top: 1rem; }
.meta-row { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: .3rem 0; }
.meta-row dt { color: var(--ink-3); font-size: .8rem; text-transform: uppercase;
               letter-spacing: .06em; }
.meta-row dd { margin: 0; font-size: .92rem; }

.tok {
  display: inline-block; font-family: var(--mono); font-size: .72em;
  font-weight: 700; letter-spacing: .04em;
  padding: .05em .38em; border-radius: 3px; vertical-align: .05em;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--accent-2);
}
.tok-cur { color: #7fd6a8; } .tok-vote { color: var(--fac-nt); }
.tok-sp  { color: var(--fac-pv); } .tok-ind { color: var(--fac-ihn); }

/* ---------- rules ---------- */

.toc { list-style: none; padding: 0; margin: 2rem 0 0;
       columns: 2; column-gap: 2.5rem; }
.toc li {
  break-inside: avoid; padding: .6rem 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.toc a { font-size: 1rem; }
.subcount { color: var(--ink-3); font-size: .76rem; white-space: nowrap; }

.rules-layout { display: grid; grid-template-columns: 250px 1fr; gap: 3rem; }
.rules-nav { position: sticky; top: 78px; align-self: start; max-height: calc(100vh - 100px);
             overflow-y: auto; scrollbar-width: thin; }
.rules-nav h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
                color: var(--ink-3); margin: 0 0 .75rem; }
.rules-nav ol { list-style: none; padding: 0; margin: 0; }
.rules-nav li { margin-bottom: .1rem; }
.rules-nav a {
  display: block; padding: .35rem .6rem; border-radius: 4px;
  color: var(--ink-2); font-size: .86rem; border-left: 2px solid transparent;
}
.rules-nav a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.rules-nav li.on a { color: var(--accent); border-left-color: var(--accent);
                     background: var(--bg-2); }

.rules-body { min-width: 0; max-width: 76ch; }
.rules-body h1 { margin-bottom: 1.5rem; }
.rules-body p, .rules-body li { color: var(--ink-2); }
.rules-body strong { color: var(--ink); }
.subnav {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 2rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.subnav a {
  font-size: .78rem; padding: .2rem .6rem; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2);
}
.subnav a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.sub { scroll-margin-top: 78px; padding-top: 1rem; }
.sub h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; color: var(--ink); }
.anchor { opacity: 0; margin-left: .4rem; color: var(--ink-3); font-weight: 400; }
.sub h2:hover .anchor { opacity: 1; }

.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .8rem; border-bottom: 1px solid var(--line);
         vertical-align: top; }
th { color: var(--ink); font-weight: 600; border-bottom-color: var(--line-2);
     white-space: nowrap; }
td { color: var(--ink-2); }
tbody tr:hover { background: var(--bg-2); }

.pager {
  display: flex; justify-content: space-between; gap: 2rem;
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: .9rem;
}

/* ---------- factions ---------- */

.faction-grid {
  display: grid; gap: 1.25rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.faction-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; color: inherit; min-height: 250px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 9px; transition: border-color .18s, transform .18s;
}
.faction-card:hover { text-decoration: none; border-color: currentColor; transform: translateY(-3px); }
.faction-bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; opacity: .42;
  transition: opacity .25s, transform .4s;
}
.faction-card:hover .faction-bg { opacity: .6; transform: scale(1.04); }
.faction-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(11,13,18,.94) 30%, rgba(11,13,18,.55) 100%);
}
.faction-card.has-blurb { cursor: default; }
.faction-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faction-inner {
  display: flex; gap: 1.1rem; align-items: center; padding: 1.4rem;
  transition: opacity .25s;
}
.faction-card .n a { color: var(--ink-2); }
.faction-card:hover .n a, .faction-card:focus-within .n a { color: var(--accent); }

/* The blurb covers the card on hover and scrolls if the lore runs long. */
.faction-blurb {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(rgba(9,11,15,.95), rgba(9,11,15,.97));
  opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s;
  scrollbar-width: thin;
}
.faction-card:hover .faction-blurb,
.faction-card:focus-within .faction-blurb { opacity: 1; visibility: visible; }
.faction-card:hover .faction-inner,
.faction-card:focus-within .faction-inner { opacity: 0; }
.faction-blurb-inner { padding: 1.25rem 1.4rem 1.4rem; }
.faction-blurb p {
  margin: 0 0 .7rem; font-size: .82rem; line-height: 1.62; color: var(--ink-2);
}
.faction-blurb p:last-child { margin-bottom: 0; }
.faction-blurb .epigraph {
  font-family: var(--serif); font-style: italic; font-size: .88rem;
  color: var(--accent-2); border-left: 2px solid var(--accent);
  padding-left: .8rem; margin-bottom: .9rem;
}
.faction-blurb .n { margin-top: .9rem; font-size: .8rem; }
.faction-emblem { width: 76px; height: auto; flex: none;
                  filter: drop-shadow(0 3px 10px rgba(0,0,0,.7)); }
.faction-text h2 { font-size: 1.05rem; margin: 0 0 .2rem; color: var(--ink); }
.faction-text .nick { margin: 0; font-size: .85rem; }
.faction-text .n { margin: .4rem 0 0; font-size: .76rem; color: var(--ink-3); }

/* ---------- page banners + contact ---------- */

.page-hero {
  position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--line); margin-bottom: 2.5rem;
}
.page-hero img { width: 100%; height: clamp(220px, 34vw, 380px); object-fit: cover; }
/* No scrim over the art -- the banners are already dark. Legibility comes from
   a shadow on the type itself, which costs the image nothing. */
.page-hero-text {
  position: absolute; z-index: 1; left: 0; bottom: 0;
  padding: 2rem 2.25rem; max-width: 40ch;
}
.page-hero-text h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .4rem; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
}
.page-hero-text .tagline {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--accent-2); margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.9);
}

.contact-body { max-width: 68ch; }
.contact-body p { color: var(--ink-2); margin: 0 0 1.15rem; }

.contact-card {
  margin-top: 2.25rem; padding: 1.5rem 1.75rem;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 9px;
}
.contact-card h2 {
  margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3);
}
.contact-line { margin: 0 !important; font-size: 1.05rem; color: var(--ink) !important; }
.contact-line .email {
  font-weight: 600; color: var(--accent);
  border-bottom: 1px solid rgba(216,164,74,.4);
}
.contact-line .email:hover { color: var(--accent-2); text-decoration: none; }
.contact-line .at { color: var(--ink-3); font-style: italic; }

.notfound { text-align: center; padding: 5rem 0; }
.notfound h1 { font-size: 4rem; color: var(--ink-3); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .hero-art { max-width: 240px; }
  .cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .face { grid-template-columns: 1fr; gap: 1.5rem; }
  .face-art { max-width: 320px; }
  .rules-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .rules-nav { position: static; max-height: none; border-bottom: 1px solid var(--line);
               padding-bottom: 1rem; }
  .rules-nav ol { display: flex; flex-wrap: wrap; gap: .3rem; }
  .rules-nav a { border-left: 0; border: 1px solid var(--line); }
  .toc { columns: 1; }
  header.site { gap: 1rem; }
  header.site nav { gap: 1rem; }
}

@media (max-width: 560px) {
  main { padding: 1.75rem 1rem 3rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .75rem; }
  .meta-row { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}