/* Desmoteria — dark by default. Bright white hurts Ken's eyes, so there is
   no light theme and there never will be. Gold on black is the game's own
   HUD palette, so the site and the product read as one thing. */
:root{
  --bg:#07080a;          /* near-black, not pure black: pure black crushes the art */
  --bg-2:#0d0f13;
  --line:#1e232c;
  --ink:#d7dae0;
  --ink-dim:#8d94a2;
  --gold:#c9a227;        /* dim antique gold. NOT bright gold — that reads as Zeus */
  --gold-dim:#8a6f1c;
  --teal:#2fb6c4;        /* the underworld river; the only cool accent */
  --rose:#b45360;        /* Persephone's crimson, dimmed to badge weight */
  --max:1100px;
}
/* Tell the browser this is a dark document. Without it, native controls --
   selects, checkboxes, scrollbars, date pickers -- are drawn light by the
   OS no matter what colours we set, which is exactly the glare the whole
   palette exists to avoid. One line, and it fixes every widget we never
   wrote CSS for. */
:root{color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.7 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-dim)}
a:hover{color:#e4c354;border-color:#e4c354}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---- header ---- */
header{
  position:sticky;top:0;z-index:20;background:rgba(7,8,10,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{
  font:600 15px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);border:0
}
nav a{
  margin-left:30px;border:0;color:var(--ink-dim);
  font:500 13px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase
}
nav a:hover{color:var(--gold)}
@media(max-width:720px){nav{display:none}}

/* ---- hero ---- */
.hero{position:relative;min-height:min(84vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:saturate(.9)
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,10,.5) 0%,rgba(7,8,10,.1) 38%,var(--bg) 97%)
}
.hero .wrap{position:relative;z-index:2;padding-bottom:84px;padding-top:120px}
h1{
  margin:0 0 .3em;font:600 clamp(42px,8vw,96px)/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:#f1ead6;
  text-shadow:0 2px 40px rgba(0,0,0,.9)
}
.tag{
  max-width:46ch;margin:0;font-size:clamp(18px,2.4vw,23px);color:#e7e9ee;
  text-shadow:0 1px 20px rgba(0,0,0,.9)
}
.rule{width:76px;height:2px;background:var(--gold);margin:30px 0 26px}
.note{
  display:inline-block;margin-top:34px;padding:7px 15px;border:1px solid var(--gold-dim);
  color:var(--gold);font:500 12px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.2em;text-transform:uppercase
}

/* ---- sections ---- */
section{padding:92px 0;border-top:1px solid var(--line)}
section:nth-of-type(even){background:var(--bg-2)}
h2{
  margin:0 0 .9em;font:600 13px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold)
}
h3{margin:0 0 .5em;font:600 21px/1.3 ui-sans-serif,system-ui,sans-serif;color:#eceef2}
.lede{font-size:clamp(21px,2.7vw,28px);line-height:1.45;max-width:30ch;color:#eceef2;margin:0 0 1.1em}
p{max-width:62ch;color:var(--ink)}
.dim{color:var(--ink-dim)}

.grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));margin-top:46px}
.card{padding:26px;border:1px solid var(--line);background:rgba(255,255,255,.015)}
.card p{font-size:15.5px;color:var(--ink-dim);margin:0}

.split{display:grid;gap:56px;grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
figure{margin:0}
figcaption{margin-top:12px;font-size:13px;color:var(--ink-dim);letter-spacing:.04em}

.steps{list-style:none;padding:0;margin:40px 0 0;max-width:640px}
.steps li{display:flex;gap:22px;padding:18px 0;border-top:1px solid var(--line)}
.steps .when{
  flex:0 0 112px;color:var(--gold);
  font:600 12px/1.55 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase
}
.steps .what{color:var(--ink-dim);font-size:15.5px}
.steps li.now .what{color:var(--ink)}
.steps li.now .when{color:var(--teal)}

footer{padding:52px 0 70px;border-top:1px solid var(--line);color:var(--ink-dim);font-size:13.5px}
footer p{max-width:70ch}

/* The two character plates are different heights (one was cropped from a wider
   piece), so match them to one frame rather than letting the taller one drag
   the row out of line. Anchored near the top so faces are never cropped. */
.split figure img{aspect-ratio:2/3;object-fit:cover;object-position:50% 10%}

/* One figure in the art section rather than a pair. Hades is held back until
   the model exists -- Ken, 2026-10-18: the character reads fine but the
   bident does not, and that gets fixed at the model stage, not in a crop. */
figure.solo{margin:46px 0 0;max-width:820px}
figure.solo img{width:100%}

/* ---------------------------------------------------------------- app UI
   Accounts, roles, the admin view. Same palette as the public page: this
   is not a separate product and must not look like one. */
.pad-top{padding-top:118px}
.wrap.narrow{max-width:720px}
h3.sub{margin:54px 0 10px;font:600 12px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.hint{font-size:14.5px;color:var(--ink-dim);max-width:60ch}

nav a.cta{color:var(--gold);border:1px solid var(--gold-dim);padding:8px 15px}
nav a.cta:hover{background:rgba(201,162,39,.1)}
nav a.me{display:inline-flex;align-items:center;gap:9px}
nav a.me img{width:23px;height:23px;border-radius:50%}

.flashes{padding:92px 28px 0}
.flash{margin:0 0 10px;padding:12px 16px;border-left:3px solid var(--gold-dim);
  background:rgba(201,162,39,.07);font-size:15px;max-width:70ch}
.flash.ok{border-color:var(--teal);background:rgba(47,182,196,.07)}
.warnbox{padding:16px 18px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--ink-dim);font-size:15px}

.btn{display:inline-block;padding:12px 22px;border:1px solid var(--gold-dim);
  background:transparent;color:var(--gold);cursor:pointer;
  font:500 13px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase}
.btn:hover{background:rgba(201,162,39,.12);color:#e4c354;border-color:#e4c354}
.btn.big{padding:18px 30px;font-size:14px}
.btn.small{padding:7px 12px;font-size:11px;letter-spacing:.1em}
.signins{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.stack{display:flex;flex-direction:column;gap:10px;margin-top:36px;max-width:460px}
.stack label{font:600 12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-top:8px}
input[type=email],input[type=text],select{
  padding:12px 14px;background:#101318;border:1px solid var(--line);color:var(--ink);
  font:400 15px/1.4 ui-sans-serif,system-ui,sans-serif}
input:focus,select:focus{outline:none;border-color:var(--gold-dim)}
label.check{display:flex;align-items:center;gap:10px;text-transform:none;
  letter-spacing:0;font-weight:400;font-size:15px;color:var(--ink)}
.stack .btn{align-self:flex-start;margin-top:16px}

dl.facts{margin:34px 0 0;display:grid;grid-template-columns:150px 1fr;gap:12px 20px}
dl.facts dt{font:600 11px/1.7 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim)}
dl.facts dd{margin:0;color:var(--ink)}

.grid.tools{margin-top:18px}
a.card.tool{display:block;text-decoration:none;border-bottom:1px solid var(--line)}
a.card.tool:hover{border-color:var(--gold-dim);background:rgba(201,162,39,.05)}
a.card.tool.off{opacity:.42;cursor:default}
a.card.tool .ext{color:var(--ink-dim);font-size:14px}

table.people{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
table.people th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  font:600 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim)}
table.people td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.people td.dim{color:var(--ink-dim)}
form.inline{display:flex;gap:8px;align-items:center}
.role{padding:4px 10px;border:1px solid var(--line);font:600 11px/1 ui-sans-serif,
  system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.role.tester{color:var(--teal);border-color:rgba(47,182,196,.45)}
.role.artist{color:var(--rose);border-color:rgba(180,83,96,.45)}
/* The admin People controls. Search and filters above, pager above AND
   below -- Ken's layout, so a long page can be turned from either end
   without scrolling back to where you came in. */
.peoplefind{display:flex;gap:8px;align-items:center;margin:14px 0 10px;flex-wrap:wrap}
.peoplefind input[type=search]{
  background:var(--bg-2);color:var(--ink);border:1px solid var(--line);
  padding:7px 10px;min-width:260px;font:14px inherit}
.peoplefind input[type=search]:focus{outline:none;border-color:var(--gold-dim)}
.clearf{color:var(--ink-dim);font-size:12px}
.clearf:hover{color:var(--gold)}
.found{color:var(--ink-dim);font-size:12.5px;margin-left:auto}
.rolefilters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.rf{
  border:1px solid var(--line);padding:4px 10px;font:600 11px/1.6 ui-sans-serif,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.rf b{font-weight:600;opacity:.65;margin-left:3px}
.rf:hover{border-color:var(--gold-dim);color:var(--ink)}
/* The selected filter is filled rather than merely brighter: on a dark
   board a brighter outline reads as a hover, not a state. */
.rf.on{background:var(--bg-2);color:var(--ink);border-color:var(--gold-dim)}
.rf.tester.on{color:var(--teal)}
.rf.artist.on{color:var(--rose)}
.rf.admin.on{color:var(--gold)}
.pager{display:flex;gap:16px;align-items:center;margin:10px 0;font-size:12.5px}
.pager a{color:var(--gold)}
.pager .off{color:#2a303a}
.pager .where{color:var(--ink-dim)}
.nobody{padding:18px 0}
.role.admin{color:var(--gold);border-color:var(--gold-dim)}
.tag-news{font-size:11px;color:var(--teal);border:1px solid rgba(47,182,196,.35);
  padding:2px 6px;margin-left:6px}

/* A warning written in sentences, as opposed to .note, which is an
   uppercase letter-spaced CHIP. Three paragraphs set in .note came out
   as a wall of small caps -- unreadable, and visible the moment the page
   was looked at rather than read in a template. */
.callout{
  margin-top:34px;padding:20px 24px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);max-width:62ch
}
.callout p{margin:0 0 .85em;font-size:15px;line-height:1.6;color:var(--ink)}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--gold)}