/* Northpoint Roleplay, demonstration build.
   One stylesheet across five pages, which is what the Standard package buys:
   a real multi page site rather than one long scroll. */

:root{
  --night:#0A0E17; --night-2:#070A11; --card:#121A27; --card-2:#18222F;
  --line:#223042;
  --gold:#E4B25C; --gold-dim:#6B5227; --cyan:#5FD3E0;
  /* --faint was #5C6878. Lifted to clear 4.5:1 on --card (#121A27), the
     lightest background it is used on and so the worst case. */
  --text:#E7ECF3; --mute:#8895A8; --faint:#7B8491;
  --mono:ui-monospace,"Consolas",monospace;
  --face:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

/* This build had no focus style of its own, so keyboard focus was whatever the
   browser drew by default over a dark background, which is a thin dark ring
   that is very hard to see. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--face);font-size:17px;line-height:1.65}
h1,h2,h3,h4{margin:0;line-height:1.06;text-wrap:balance}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0}
.mute{color:var(--mute)}

.demo-bar{background:var(--gold);color:#0B0F17;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;padding:.55rem 1rem;font-weight:700}
.demo-bar a{color:#0B0F17}

header.top{position:sticky;top:0;z-index:30;background:rgba(7,10,17,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:1.6rem;padding:.85rem 0}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:800;letter-spacing:-.02em}
.mark svg{width:28px;height:28px}
.mark small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;color:var(--faint);
  text-transform:uppercase;font-weight:400;margin-top:.15rem}
nav.links{margin-left:auto;display:flex;gap:1.5rem}
nav.links a{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;padding-bottom:.2rem;border-bottom:1px solid transparent}
nav.links a:hover{color:var(--text)}
nav.links a[aria-current="page"]{color:var(--gold);border-color:var(--gold)}
@media(max-width:900px){nav.links{gap:1rem}nav.links a{font-size:.62rem;letter-spacing:.08em}}
@media(max-width:660px){nav.links{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:.72rem 1.15rem;background:var(--gold);
  color:#0B0F17;border:1px solid var(--gold);text-decoration:none;cursor:pointer;transition:transform .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* page banner used by every page except the home page */
.banner{border-bottom:1px solid var(--line);background:
  radial-gradient(90% 130% at 15% 0%,rgba(228,178,92,.13),transparent 60%),var(--night-2);
  padding:clamp(2.5rem,7vh,4.5rem) 0}
.banner h1{font-size:clamp(2rem,5.5vw,3.6rem);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;margin-top:.7rem}
.banner p{color:var(--mute);max-width:60ch;margin:1rem 0 0}

section{padding:clamp(3rem,8vh,5.5rem) 0}
.head h2{font-size:clamp(1.6rem,4.2vw,2.7rem);font-weight:900;letter-spacing:-.035em;text-transform:uppercase;margin-top:.7rem}
.head p{color:var(--mute);max-width:60ch;margin:1rem 0 0}

.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.4rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cell{background:var(--card);padding:1.7rem}
.cell h3{font-size:1.05rem;font-weight:800}
.cell p{color:var(--mute);font-size:.92rem;margin:.6rem 0 0}
.cell .num{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--gold);display:block;margin-bottom:.9rem}

.stat{background:var(--card);padding:1.2rem 1.3rem}
.stat b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* direct child only, so a span used inside the figure keeps the figure's size */
.stat > span{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.stat b.live{display:flex;align-items:center;gap:.5rem}
.live i{display:inline-block;width:9px;height:9px;background:#5FBF6A;border-radius:50%;box-shadow:0 0 10px #5FBF6A}

.note{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--faint);margin-top:1.8rem;
  border-left:2px solid var(--gold-dim);padding-left:.9rem;line-height:1.9}
.note code{color:var(--gold)}

footer{background:var(--night-2);border-top:1px solid var(--line);padding:2.8rem 0;color:var(--faint)}
.foot{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase}
.foot a{color:var(--gold);text-decoration:none}
.foot nav{display:flex;flex-wrap:wrap;gap:1.1rem}

#toast{position:fixed;left:50%;bottom:1.5rem;translate:-50% 0;z-index:60;background:var(--card-2);
  border:1px solid var(--gold);color:var(--text);padding:.85rem 1.2rem;font-family:var(--mono);font-size:.72rem;
  max-width:min(540px,90vw);opacity:0;pointer-events:none;transition:opacity .25s ease,translate .25s ease}
#toast.on{opacity:1;translate:-50% -6px}

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

/* Skip link: a keyboard user would otherwise tab the whole nav on every page. */
.skip{position:fixed;top:0;left:0;z-index:200;padding:.7rem 1.1rem;background:var(--gold);
  color:#0A0E17;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transform:translateY(-120%)}
.skip:focus{transform:translateY(0)}