@import url('./brand.css?v=464c9a97a4b9');
@import url('./pixels.css?v=4cbb71c2aa4e');
/* One quiet masthead across the character bank and its research pages.
   Desktop shows the full row; below 800px the row folds into a Menu sheet. */
.bank-header {
  box-sizing:border-box; position:relative; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:var(--space-6); width:var(--page-width); max-width:none;
  min-height:76px; margin:0 auto; padding:0; border:0; background:transparent;
  color:var(--ink); font:500 var(--type-small)/1.4 var(--font-sans);
}
.bank-header * { box-sizing:border-box; }
.bank-header a { color:inherit; text-decoration:none; }
.bank-brand { display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap; font:600 1.4375rem/1 var(--font-serif); letter-spacing:-.03em; color:var(--ink-strong); }
.bank-brand img { width:28px; height:28px; mix-blend-mode:multiply; }
.bank-nav { display:flex; align-items:center; gap:var(--space-8); }
.bank-nav > a,.bank-research summary {
  position:relative; display:block; padding:var(--space-3) 0; white-space:nowrap; color:var(--ink);
  transition:color var(--motion-fast) var(--ease-out);
}
/* The current page carries a copper rule; hover previews it in ink. */
.bank-nav > a::after,.bank-research summary::after {
  content:''; position:absolute; left:0; right:0; bottom:var(--space-1); height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left center; opacity:.35;
  transition:transform var(--motion-normal) var(--ease-out),opacity var(--motion-normal) var(--ease-out);
}
.bank-nav > a:hover::after,.bank-research summary:hover::after { transform:scaleX(1); }
.bank-nav > a[aria-current="page"],.bank-research summary.is-current { color:var(--ink-strong); }
.bank-nav > a[aria-current="page"]::after,.bank-research summary.is-current::after { transform:scaleX(1); opacity:1; background:var(--current); }
.bank-research { position:relative; margin:0; padding:0; border:0; background:none; }
.bank-research summary { cursor:pointer; list-style:none; }
.bank-research summary::-webkit-details-marker { display:none; }
.bank-research summary > span { display:inline-block; margin-left:var(--space-1); font-size:.8em; transition:transform var(--motion-normal) var(--ease-out); }
.bank-research[open] summary > span { transform:rotate(180deg); }
.bank-research-links {
  position:absolute; top:calc(100% + var(--space-2)); left:calc(-1 * var(--space-4)); display:grid; min-width:200px;
  padding:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-sm,5px); background:var(--paper-raised); box-shadow:var(--shadow-menu);
}
.bank-research[open] .bank-research-links { animation:bank-fade-up var(--motion-normal) var(--ease-out) both; }
.bank-research-links a { padding:var(--space-2) var(--space-3); border-radius:var(--radius-control); transition:background-color var(--motion-fast) var(--ease-out); }
.bank-research-links a:hover,.bank-research-links a[aria-current="page"] { background:var(--paper-sunk); }
.bank-actions { display:flex; align-items:center; gap:var(--space-3); }
.bank-search {
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink);
  transition:background-color var(--motion-fast) var(--ease-out);
}
.bank-search:hover,.bank-search[aria-current="page"] { background:var(--paper-sunk); }
.bank-explore {
  display:inline-flex; align-items:center; gap:var(--space-2); min-height:38px; padding:0 var(--space-4);
  border:1px solid var(--line-strong); border-radius:var(--radius-control); white-space:nowrap; color:var(--ink-strong);
  transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out);
}
.bank-explore:hover { background:var(--ink-strong); border-color:var(--ink-strong); color:var(--paper)!important; }
.bank-explore[aria-current="page"] { border-color:var(--ink-strong); }
.bank-explore > span { transition:transform var(--motion-normal) var(--ease-out); }
.bank-explore:hover > span { transform:translateX(2px); }

/* Folded menu: present in the markup everywhere, shown only when the row cannot fit. */
.bank-menu { display:none; position:static; }
.bank-menu > summary {
  display:inline-flex; align-items:center; gap:var(--space-2); min-height:40px; padding:0 var(--space-3);
  border:1px solid var(--line-strong); border-radius:var(--radius-control); cursor:pointer; list-style:none; color:var(--ink-strong);
}
.bank-menu > summary::-webkit-details-marker { display:none; }
.bank-menu-icon { position:relative; width:14px; height:10px; }
.bank-menu-icon::before,.bank-menu-icon::after {
  content:''; position:absolute; left:0; right:0; height:1.5px; background:currentColor;
  transition:transform var(--motion-normal) var(--ease-out),top var(--motion-normal) var(--ease-out);
}
.bank-menu-icon::before { top:1px; }
.bank-menu-icon::after { top:7.5px; }
.bank-menu[open] .bank-menu-icon::before { top:4.25px; transform:rotate(45deg); }
.bank-menu[open] .bank-menu-icon::after { top:4.25px; transform:rotate(-45deg); }
.bank-menu-panel {
  position:absolute; top:100%; left:calc(-1 * var(--gutter)); right:calc(-1 * var(--gutter)); z-index:30;
  display:grid; gap:var(--space-1); padding:var(--space-4) var(--gutter) var(--space-8);
  background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 24px 32px -24px rgba(38,28,12,.22);
}
.bank-menu[open] .bank-menu-panel { animation:bank-fade-up var(--motion-normal) var(--ease-out) both; }
.bank-menu-panel > a { padding:var(--space-3) 0; font:500 var(--type-lead)/1.3 var(--font-sans); color:var(--ink-strong); border-bottom:1px solid var(--line); }
.bank-menu-panel > a[aria-current="page"]:not(.bank-menu-explore) { color:var(--current); }
.bank-menu-group { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); padding:var(--space-4) 0 var(--space-2); color:var(--ink-muted); font-size:var(--type-body); }
.bank-menu-group > span { flex-basis:100%; font-size:var(--type-small); }
.bank-menu-group a { color:var(--ink); }
.bank-menu-group a[aria-current="page"] { color:var(--current); }
.bank-menu-panel .bank-menu-explore { margin-top:var(--space-4); border:0; display:inline-flex; justify-content:space-between; align-items:center; padding:var(--space-4) var(--space-5); border-radius:var(--radius-control); background:var(--ink-strong); color:var(--paper); font-size:var(--type-body); }

@media(max-width:1050px) { .bank-nav { gap:var(--space-5); }.bank-header { gap:var(--space-4); } }
@media(max-width:860px) {
  .bank-header { min-height:64px; }
  .bank-nav,.bank-explore { display:none; }
  .bank-menu { display:block; }
}
@media(max-width:360px) { .bank-brand { font-size:var(--type-lead); }.bank-brand img { width:24px; height:24px; } }
@media(prefers-reduced-motion:reduce) {
  .bank-menu-icon::before,.bank-menu-icon::after { transition:none; }
}