/* ══════════════════════════════════════════════════════════════════════════
   characters.css — the character index

   This page is built to be long. There are seventy names on it today and the
   world has seven realms with nobody in them yet, so it is laid out as an
   index rather than a gallery: rows, not cards, grouped the way the bible
   groups them -- by where a person lives.

   The search box is the primary way in and stays on screen while you scroll,
   because at a thousand names scrolling to the top to type is the whole cost
   of using the page.
   ══════════════════════════════════════════════════════════════════════ */

/* The hidden attribute only works while nothing else sets display, and this
   sheet sets flex and grid on things that get hidden. Author CSS beats the
   user-agent rule, so without this a row can carry hidden and still be on
   the page -- which is exactly what happened to the filters. */
[hidden]{display:none!important}


.chars-page{padding-top:var(--nav-h)}
.wrap{width:100%;max-width:1060px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}

.page-head{text-align:center;padding:3rem 0 1.4rem}
.page-kick{font-family:'Oswald',sans-serif;font-weight:400;font-size:.62rem;
  letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;color:var(--rust-lt)}
.page-title{font-family:'Cinzel','Noto Serif',serif;font-weight:700;
  font-size:clamp(1.9rem,5.4vw,3rem);letter-spacing:.04em;line-height:1.15;
  color:var(--bone);margin-top:.7rem}
.page-rule{width:min(240px,52%);height:1px;margin:1.3rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dk) 22%,var(--gold) 50%,var(--gold-dk) 78%,transparent)}
.page-lead{max-width:58ch;margin:1.4rem auto 0;font-family:'Lora',serif;
  font-size:1rem;line-height:1.75;color:rgba(232,220,198,.78);text-align:center}

/* ── the search bar ───────────────────────────────────────────────────── */
.find{position:sticky;top:var(--nav-h);z-index:60;
  padding:.9rem 0 .85rem;margin-bottom:1.2rem;
  background:linear-gradient(180deg,var(--ink) 76%,transparent);
  border-bottom:1px solid var(--line)}
.find-row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.find input{flex:1 1 260px;min-width:0;appearance:none;
  background:rgba(12,9,7,.9);border:1px solid var(--line-2);
  padding:.7rem .9rem;color:var(--bone);
  font-family:'Lora',serif;font-size:.95rem}
.find input::placeholder{color:var(--iron)}
.find input:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(201,152,46,.3)}
.find-clear{appearance:none;cursor:pointer;border:1px solid var(--line-2);
  background:rgba(12,9,7,.9);color:var(--muted);
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.7rem .9rem}
.find-clear:hover{color:var(--gold-lt);border-color:var(--gold-dk)}
.find-count{font-family:'Oswald',sans-serif;font-weight:300;font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--iron);
  flex:0 0 auto}

/* ── the alphabet ─────────────────────────────────────────────────────── */
.alpha{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.7rem}
.alpha-key{appearance:none;cursor:pointer;border:1px solid transparent;
  background:none;min-width:1.7rem;padding:.2rem .3rem;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.66rem;
  letter-spacing:.1em;color:var(--muted);transition:color .15s,border-color .15s}
.alpha-key:hover:not([disabled]){color:var(--gold-lt);border-color:var(--line-2)}
.alpha-key.on{color:#1b1209;background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  border-color:var(--gold)}
.alpha-key[disabled]{color:rgba(111,106,96,.38);cursor:default}
.alpha-all{min-width:auto;padding:.2rem .55rem;letter-spacing:.18em;
  text-transform:uppercase;font-size:.58rem}

/* ── the facets ───────────────────────────────────────────────────────── */
.facets{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.7rem}
.facet{display:flex;align-items:center;gap:.45rem}
.facet span{font-family:'Oswald',sans-serif;font-weight:300;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--iron)}
.facet select{appearance:none;cursor:pointer;
  background:rgba(12,9,7,.9);border:1px solid var(--line-2);color:var(--muted);
  font-family:'Oswald',sans-serif;font-weight:400;font-size:.62rem;
  letter-spacing:.12em;padding:.34rem 1.6rem .34rem .55rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-dk) 50%),
                   linear-gradient(135deg,var(--gold-dk) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.facet select:focus{outline:none;border-color:var(--gold);color:var(--bone)}

/* ── the locations, which open and shut ───────────────────────────────── */
.loc[hidden]{display:none}
.loc > summary{cursor:pointer;list-style:none;position:relative;
  padding-left:1.15rem}
.loc > summary::-webkit-details-marker{display:none}
/* a caret drawn rather than a glyph, so it turns with the disclosure */
.loc > summary::before{content:'';position:absolute;left:.1rem;top:.55em;
  width:5px;height:5px;border-right:1.5px solid var(--gold-dk);
  border-bottom:1.5px solid var(--gold-dk);
  transform:rotate(-45deg);transition:transform .18s}
.loc[open] > summary::before{transform:rotate(45deg)}
.loc > summary:hover::before{border-color:var(--gold)}

.roster-place{font-family:'Cinzel','Noto Serif',serif;font-weight:700;
  font-size:1.3rem;letter-spacing:.06em;color:var(--bone);
  margin:2.2rem 0 .2rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
/* the glyn, polis or reik the place sits in, and then the realm */
.roster-where{font-family:'Oswald',sans-serif;font-weight:300;font-size:.58rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--iron)}
.roster-area{font-family:'Cinzel','Noto Serif',serif;font-weight:700;
  font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-lt);margin:1.7rem 0 .1rem}
.roster-group{font-family:'Oswald',sans-serif;font-weight:300;font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--iron);
  margin:1rem 0 .35rem}

.roster-list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(.8rem,2vw,1.6rem)}
@media(max-width:820px){.roster-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.roster-list{grid-template-columns:1fr}}

.who-row{display:flex;align-items:baseline;gap:.6rem;
  padding:.42rem 0;border-bottom:1px solid rgba(201,152,46,.09)}
.who-row a,.who-row span.nm{font-family:'Lora',serif;font-size:.94rem;
  color:rgba(232,220,198,.86);text-decoration:none;
  border-bottom:1px solid transparent}
.who-row a{color:var(--gold)}
.who-row a:hover{color:var(--gold-lt);border-bottom-color:var(--gold-dk)}

/* ● written up, ○ named and waiting. The same two marks the bible uses. */
.dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  margin-top:.42rem;background:var(--gold);box-shadow:0 0 0 2px rgba(201,152,46,.14)}
.dot.stub{background:none;border:1px solid var(--iron);box-shadow:none}

.roster-empty{text-align:center;padding:3rem 0;
  font-family:'Lora',serif;font-style:italic;color:var(--iron)}

.key-line{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;
  padding:1.2rem 0 0;font-family:'Oswald',sans-serif;font-weight:300;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--iron)}
.key-line span{display:flex;align-items:center;gap:.45rem}

.chars-foot{border-top:1px solid var(--line);margin-top:2.4rem;
  padding:1.5rem 0 3rem;text-align:center}
.chars-back{font-family:'Oswald',sans-serif;font-weight:500;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  text-decoration:none}
.chars-back:hover{color:var(--gold-lt)}