/* ==========================================================================
   Tales Archive — interior pages (game rosters + character status screens)

   Extends assets/theme.css. Deep indigo ground, gold hairline frames, hard
   unblurred shadows. The character page is laid out as a Tales status screen;
   the game page as a title card followed by the party roster.
   ========================================================================== */

/* --- Shell -------------------------------------------------------------- */

.page { width: min(1500px, 100%); margin: 0 auto; padding: 0 var(--gutter) 4rem; }
.page--narrow { width: min(1180px, 100%); }

img { max-width: 100%; display: block; }

/* --- Breadcrumb rail ---------------------------------------------------- */

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.1rem 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.crumbs a { color: var(--ink-2); border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--gold-2); border-bottom-color: var(--gold); }
.crumbs .here { color: var(--gold-2); }

/* --- Title card (game page hero) ---------------------------------------- */

.title-card {
  display: grid;
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

.cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border: var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--bevel), var(--hard), 0 0 44px rgba(201, 162, 39, 0.14);
}

.cover img { width: 100%; height: 100%; object-fit: cover; }

.cover .year {
  position: absolute;
  top: 0;
  left: 0.7rem;
  padding: 0.3rem 0.5rem 0.36rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: none;
  color: var(--gold-2);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* The title lockup: small caps kicker over a gold-leafed display word. */
/* Flat gold, no gradient fill. A Tales logo is a ruled construction -- the
   small tracked kicker sitting on a hairline with the title dropped under it --
   and that is what carries the lockup, not a sheen across the letterforms. */
.title-card h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--gold-2);
}

.title-card h1 .of {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.28rem;
  font-family: var(--ui-alt);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.title-card h1 .of::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(124, 101, 38, 0));
}

/* The invented genre is the one thing every Tales box carries, so it leads. */
.genre-line {
  margin: 1.25rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  max-width: 26ch;
  color: var(--ink);
}

.genre-line .qm { color: var(--gold); }

.genre-line em {
  font-style: normal;
  color: var(--gold-2);
  border-bottom: 1px solid rgba(201, 162, 39, 0.45);
}

.stat-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  max-width: 34rem;
}

.stat-rail div { min-width: 6.5rem; }

.stat-rail dt {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat-rail dd {
  margin: 0.15rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}

/* --- Section heads ------------------------------------------------------ */

/* The hairline does the separating on its own. There used to be a gold diamond
   pinned to its left end; the rule reads cleaner without one, and the motif is
   still carried by the wordmark and the search field. */
.rule-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 2.1rem 0 1.15rem;
  border-top: 1px solid var(--line);
}

/* The series sets a diamond into the rule above a section heading. */
.rule-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  margin: 0;
  color: var(--gold-2);
}

.rule-head .note {
  margin-left: auto;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Roster ------------------------------------------------------------- */

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 1.5rem 1.15rem;
}

.unit { display: block; }

.unit-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border: var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--hard-sm);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.unit-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.unit-noart {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(242, 223, 160, 0.06) 0 8px, transparent 8px 18px);
}

.unit:hover .unit-frame,
.unit:focus-visible .unit-frame {
  transform: translate(-2px, -3px);
  border-color: var(--gold);
  box-shadow: 5px 6px 0 var(--shadow), 0 0 26px rgba(201, 162, 39, 0.28);
}

.unit-name {
  margin-top: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--ink);
}

.unit:hover .unit-name { color: var(--gold-2); }

.unit-sub {
  margin-top: 0.15rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Release-order pager ------------------------------------------------ */

.pager {
  display: flex;
  gap: 0.9rem;
  justify-content: space-between;
  margin-top: 2.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.pager a {
  display: block;
  flex: 0 1 22rem;
  padding: 0.8rem 1.1rem 0.9rem;
  background: var(--panel);
  border: var(--stroke);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--bevel), var(--hard-sm);
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}

.pager a:hover {
  transform: translate(-2px, -2px);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--bevel), 5px 5px 0 var(--shadow);
}

.pager a:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 1px var(--bevel); }
.pager .to-next { margin-left: auto; text-align: right; }

.pager .dir {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pager .name { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--gold-2); }

/* --- Status screen (character page hero) -------------------------------- */

.status {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(1.25rem, 3vw, 2rem);
}

.portrait {
  border: var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--bevel), var(--hard), 0 0 46px rgba(201, 162, 39, 0.13);
}

.portrait img { width: 100%; }

.portrait.is-noart {
  aspect-ratio: 3 / 4;
  background: repeating-linear-gradient(45deg,
    rgba(242, 223, 160, 0.06) 0 8px, transparent 8px 18px);
}

.status h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.04;
  margin: 0.28rem 0 0;
  letter-spacing: -0.015em;
  color: var(--gold-2);
}

/* The same kicker-on-a-rule as the game and home pages: the character's title
   of origin, then the name under it. */
.status .from {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--ui-alt);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.status .from::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(124, 101, 38, 0));
}

/* Role, weapon class and race are a word each. They used to take a dotted-leader
   row apiece, which spent the whole status window on four facts you can read off
   the portrait. As tags they sit under the name and leave the window for the
   things a reader actually came looking for. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.tags .tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.24rem 0.6rem 0.28rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--bevel);
}

/* One line on who this is. Long enough to place them, short enough that it
   never becomes the plot summary this archive exists to avoid. */
.who {
  max-width: 46ch;
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Japanese name and its romanisation, for anyone cross-reading a JP guide. */
.profile .jp {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
}

.profile .romaji {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-3);
}

/* Dotted leaders, the way a status window lists its fields. */
.profile {
  margin: 1.5rem 0 0;
  max-width: 30rem;
  border-top: 1px solid var(--line);
}

.profile div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.44rem 0;
  border-bottom: 1px solid rgba(242, 223, 160, 0.07);
}

.profile dt {
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.profile .lead {
  flex: 1;
  height: 0;
  border-bottom: 1px dotted rgba(242, 223, 160, 0.22);
  transform: translateY(-0.22em);
}

.profile dd { margin: 0; font-weight: 500; text-align: right; color: var(--ink); }
.profile dd a { color: var(--gold-2); border-bottom: 1px solid rgba(201, 162, 39, 0.5); }
.profile dd a:hover { color: #FFF1C4; }

/* --- Mechanics ---------------------------------------------------------- */

.mechanics { margin-top: 1.7rem; display: grid; gap: 0.95rem; max-width: 38rem; }

.mechanic {
  position: relative;
  padding: 1.15rem 1.15rem 1rem;
  background: var(--panel);
  border: var(--stroke);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--bevel), var(--hard-sm);
}

.mechanic .plate { position: absolute; top: -0.7rem; left: 0.9rem; }
.mechanic h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin: 0.4rem 0 0.3rem; color: var(--gold-2); }
.mechanic p { margin: 0; color: var(--ink-2); font-size: 0.92rem; }

/* --- Menu tabs ---------------------------------------------------------- */

.tab-bar {
  display: flex;
  gap: 0.3rem;
  margin: 0.5rem 0 0;
  padding: 0 0.35rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  margin-bottom: -1px;
  padding: 0.62rem 1.2rem 0.64rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
}

.tab:hover { color: var(--gold-2); background: rgba(242, 223, 160, 0.05); }

/* The live tab breaks the rule and joins the panel below it. */
.tab[aria-selected="true"] {
  color: var(--gold-2);
  background: var(--panel);
  border-color: var(--line);
  border-bottom-color: var(--panel);
}

.tab .count {
  margin-left: 0.5rem;
  font-size: 0.9em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.tab[aria-selected="true"] .count { color: var(--gold); }

.panel {
  padding: 1.4rem clamp(0.9rem, 2vw, 1.5rem) 1.5rem;
  background: var(--panel);
  border: var(--stroke);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--hard);
}

/* A panel can carry its own sub-sections — mystic artes under the arte list. */
.panel h2,
.panel h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  margin: 2rem 0 0.8rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
  color: var(--gold-2);
}

.panel h2:first-child,
.panel h3:first-child { margin-top: 0; }

.panel .nothing {
  margin: 1.2rem 0 0;
  padding: 1.3rem;
  text-align: center;
  font-weight: 700;
  color: var(--ink-2);
  border: 1px dashed var(--ink-3);
  border-radius: var(--radius);
}

/* --- Search ------------------------------------------------------------- */

.finder { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.15rem; }

.finder input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.62rem 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper);
  border: var(--stroke);
  border-radius: var(--radius);
}

.finder input::placeholder { color: var(--ink-3); }
.finder input:focus { background: #0A0F1C; border-color: var(--gold); }

.finder .tally {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

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

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 12, 22, 0.35);
}

table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.62rem 0.75rem;
  background: linear-gradient(180deg, #1D2745 0%, #131B2E 100%);
  border-bottom: 1px solid var(--line);
  color: var(--gold-2);
  text-align: left;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody td {
  padding: 0.62rem 0.75rem;
  border-top: 1px solid rgba(242, 223, 160, 0.06);
  vertical-align: top;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

tbody tr:nth-child(even) td { background: rgba(242, 223, 160, 0.025); }
tbody tr:hover td { background: rgba(201, 162, 39, 0.11); color: var(--ink); }

/* First column is the name of the thing, so it carries the weight. */
tbody td:first-child { font-weight: 700; color: var(--ink); min-width: 11rem; }

/* Requirement cells run to bullet lists and formulas. */
tbody td code {
  padding: 0.05em 0.4em 0.12em;
  background: rgba(201, 162, 39, 0.14);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 3px;
  color: var(--gold-2);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.86em;
}

/* Group headings inside a long arte list */
tr.section-row td {
  background: linear-gradient(180deg, #1D2745 0%, #182138 100%) !important;
  border-top: 1px solid var(--line);
  color: var(--gold-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
}

/* Element chips, tinted per element */
.el {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.14rem 0.55rem 0.18rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.el-fire      { color: #F58A78; background: rgba(210, 84, 74, 0.16); }
.el-water     { color: #7FC0F0; background: rgba(95, 168, 222, 0.16); }
.el-ice       { color: #7FD9E6; background: rgba(111, 211, 232, 0.14); }
.el-wind      { color: #7FD8A4; background: rgba(95, 201, 140, 0.15); }
.el-earth     { color: #D8B87C; background: rgba(190, 150, 80, 0.16); }
.el-lightning { color: #F5B860; background: rgba(228, 160, 60, 0.16); }
.el-light     { color: #F2DFA0; background: rgba(242, 223, 160, 0.13); }
.el-dark      { color: #C2A4EE; background: rgba(150, 110, 220, 0.16); }

/* Elementless entries stay quiet so the elemental ones carry the eye. */
.el-blank { color: var(--ink-3); }

/* --- Empty state -------------------------------------------------------- */

.empty {
  padding: 1.8rem 1.4rem;
  text-align: center;
  background: repeating-linear-gradient(45deg,
    rgba(242, 223, 160, 0.045) 0 6px, transparent 6px 14px);
  border: 1px dashed var(--ink-3);
  border-radius: var(--radius);
}

.empty strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--gold-2); }
.empty p { margin: 0.35rem auto 0; color: var(--ink-2); font-size: 0.9rem; max-width: 42ch; }
.empty .plate { margin-bottom: 0.65rem; }

/* --- Party strip at the foot of a character page ------------------------ */

.party-strip { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.chip-unit {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.95rem 0.35rem 0.35rem;
  background: var(--panel);
  border: var(--stroke);
  border-radius: 999px;
  box-shadow: var(--hard-sm);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--ink-2);
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s, color 0.1s;
}

.chip-unit img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top center; }

.chip-unit:hover {
  transform: translate(-2px, -2px);
  border-color: var(--gold);
  color: var(--gold-2);
  box-shadow: 4px 4px 0 var(--shadow);
}

.chip-unit:active { transform: translate(3px, 3px); box-shadow: none; }

.chip-unit.is-here {
  background: var(--panel-2);
  border-color: var(--gold);
  color: var(--gold-2);
  box-shadow: none;
  transform: translate(3px, 3px);
}

/* --- Simple prose card (contact / credits) ------------------------------ */

.sheet {
  max-width: 46rem;
  margin: clamp(1.75rem, 4vw, 3rem) auto 0;
  padding: clamp(1.7rem, 4vw, 2.8rem);
  background: var(--panel);
  border: var(--stroke);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--bevel), var(--hard);
}

.sheet h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.05;
  margin: 0.45rem 0 0.5rem;
  color: var(--gold-2);
}

.sheet .lede { margin: 0 0 1.9rem; color: var(--ink-2); max-width: 46ch; }

.sheet section { padding-top: 1.5rem; border-top: 1px solid var(--line); margin-top: 1.5rem; }

.sheet h2 {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}

.sheet p { margin: 0 0 0.7rem; color: var(--ink-2); }
.sheet p:last-child { margin-bottom: 0; }

.name-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.name-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.9rem 0.38rem;
  background: var(--panel-2);
  border: var(--stroke);
  border-radius: var(--radius);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

/* A hairline dash, in keeping with the rules the rest of the site is built
   from. */
.name-list li::before {
  content: "";
  width: 10px;
  height: 1px;
  flex: none;
  background: var(--line);
}

.reach { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.mailto {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  word-break: break-all;
  color: var(--gold-2);
  border-bottom: 1px solid rgba(201, 162, 39, 0.5);
}

.mailto:hover { color: #FFF1C4; border-bottom-color: var(--gold-2); }

.fineprint { margin-top: 1.7rem; font-size: 0.84rem; color: var(--ink-3); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .title-card { grid-template-columns: minmax(0, 168px) minmax(0, 1fr); gap: 1.4rem; }
  .status { grid-template-columns: 1fr; }
  .portrait { max-width: 320px; }
}

@media (max-width: 620px) {
  .title-card { grid-template-columns: 1fr; }
  .cover { max-width: 190px; }
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 0.8rem; }
  .pager { flex-direction: column; }
  .pager .to-next { margin-left: 0; text-align: left; }
  .profile dd { text-align: left; }
  thead th { position: static; }
}

/* --------------------------------------------------------------------------
   Japanese under the English name

   The archive is written in English, so the English name is the line you read
   and the Japanese sits under it at a smaller size. It stays because it is the
   only field that identifies the same arte across two games: Eternia's Sonic
   Blade and Symphonia's Demon Fang are both 魔神剣.
   -------------------------------------------------------------------------- */
.n-en { display: block; }

.jp-sub {
  display: block;
  margin-top: 0.12rem;
  font-family: var(--ui);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}

/* The name column is bold; the reading under it must not inherit that. */
tbody td:first-child .jp-sub { font-weight: 400; }

/* On a section heading the rule is the same, but the ground is lighter and the
   gold heading would drown a grey sub-line. */
tr.section-row .jp-sub {
  font-family: var(--ui);
  font-size: 0.72rem;
  color: var(--ink-2);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Missables

   A card on the game page, and the table it leads to. The card only exists for
   a game with entries, so it never advertises an empty page.
   -------------------------------------------------------------------------- */
.teaser {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 1.6rem 0 0.4rem;
  padding: 0.85rem 1rem;
  background: var(--panel-2);
  border: var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--hard-sm);
  color: var(--ink);
  text-decoration: none;
}

.teaser:hover,
.teaser:focus-visible { border-color: var(--gold); }

.teaser strong { font-family: var(--display); font-weight: 700; }

.teaser-go {
  margin-left: auto;
  font-family: var(--ui-alt);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-2);
}

/* The kind column is a label rather than a sentence, so it reads as a chip. */
.kind {
  display: inline-block;
  padding: 0.1rem 0.5rem 0.14rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-2);
  font-family: var(--ui-alt);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

/* The name the rest of the series uses.

   Eternia's 2001 localisation never became the standard, so its Sonic Blade is
   Demon Fang everywhere else. Both names sit in the cell so either one finds
   the row, and the alternate is quiet enough not to compete with the name the
   game itself prints on screen. */
.n-alt {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
}

.n-alt::before {
  content: "aka ";
  font-family: var(--ui-alt);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Systems page: prose rather than a table, so it gets a reading measure. */
.teaser--sys .teaser-go { color: var(--focus); }

.teaser-sub {
  flex-basis: 100%;
  font-family: var(--ui);
  font-size: 0.86rem;
  color: var(--ink-3);
}

.sys-toc { margin: 1.2rem 0 2rem; }
.sys-toc ol { margin: 0; padding-left: 1.2rem; }
.sys-toc li { margin: 0.25rem 0; }
.sys-toc a { color: var(--gold-2); }

.sys { margin: 0 0 2.4rem; }

.sys h2 {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--gold-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
}

.sys p { margin: 0 0 0.9rem; max-width: 62ch; line-height: 1.65; }
.sys ul { margin: 0 0 0.9rem; padding-left: 1.15rem; max-width: 62ch; }
.sys li { margin: 0.35rem 0; line-height: 1.6; }