/* Kleos. A war table: green felt, and the pages of the war laid on it. */

@font-face { font-family: 'Big Shoulders Stencil'; src: url(fonts/big-shoulders-stencil.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(fonts/ibm-plex-sans.woff2) format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(fonts/ibm-plex-sans-400i.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url(fonts/spectral-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url(fonts/spectral-400i.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url(fonts/spectral-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --felt: #1c2621;
  --felt-lit: #2a382f;
  --felt-deep: #111713;
  --paper: #dcd8cc;
  --paper-hi: #e8e4d9;
  --paper-lo: #c9c4b5;
  --ink: #1b2030;
  --ink-2: #4a4f5c;
  --ink-3: #6c7078;
  --rule: rgba(27, 32, 48, 0.16);
  --rule-blue: rgba(78, 104, 140, 0.32);
  --star: #ffb627;
  --wax: #9a2921;
  --wax-hi: #b8352b;
  --legion: #2d5ca6;
  --wild: #c8572a;
  --weave: #7150ae;
  --on-felt: #dfe3d8;
  --on-felt-2: #a9b3a5;
  --display: 'Big Shoulders Stencil', Impact, 'Arial Narrow', sans-serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--felt-deep); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 400 16px/1.6 var(--sans); color: var(--on-felt);
  background: radial-gradient(1200px 600px at 50% -200px, rgba(255, 214, 150, 0.12), transparent 70%), radial-gradient(130% 100% at 50% 20%, var(--felt-lit), var(--felt) 55%, var(--felt-deep));
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: var(--noise); opacity: 0.45; z-index: 0; }
::selection { background: rgba(255, 182, 39, 0.45); color: inherit; }
a { color: inherit; }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
button, .btn, .navlink, .brand, summary, .region, .tabs a { -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--star); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--paper-hi); color: var(--ink); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* --- the bar ----------------------------------------------------------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(15, 21, 18, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(223, 227, 216, 0.08); }
.top-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .star { width: 24px; height: 24px; fill: var(--star); }
.brand span { font: 800 25px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-hi); }
.nav-wide { flex: 1; display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; }
.menu { display: none; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.navlink { text-decoration: none; color: var(--on-felt-2); font-weight: 500; font-size: 15px; padding: 8px 10px; border-radius: 2px; white-space: nowrap; }
.navlink:hover { color: var(--paper-hi); }
.navlink.is-here { color: var(--paper-hi); box-shadow: inset 0 -2px 0 var(--star); }
.account { display: flex; align-items: center; gap: 8px; }
.utc { font: 500 12px var(--mono); letter-spacing: 0.08em; color: var(--on-felt-2); white-space: nowrap; }
.utc b { font-weight: 500; color: var(--paper-hi); font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .utc { display: none; } }
.me { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--paper-hi); font-weight: 500; font-size: 15px; padding: 4px 8px 4px 4px; border-radius: 2px; }
.me img { border-radius: 50%; }
.me:hover, .me.is-here { background: rgba(223, 227, 216, 0.08); }

/* --- buttons ------------------------------------------------------------
   Printed labels: square, with a fine inner rule like the double rules on
   the forms, lettered like the forms' own labels, and they press down when
   clicked. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 13px 18px 12px; border: 0; border-radius: 0; background: var(--paper-hi); color: var(--ink); font: 600 13px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 6px 14px rgba(0, 0, 0, 0.16); transition: background 0.15s, transform 0.1s, box-shadow 0.1s; }
.btn::after { content: ''; position: absolute; inset: 3px; border: 1px solid currentColor; opacity: 0.3; pointer-events: none; }
.btn:hover { background: #fff8e8; transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 10px 18px rgba(0, 0, 0, 0.2); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2); }
.btn[disabled], .btn[disabled]:hover, .btn[disabled]:active { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px rgba(27, 32, 48, 0.25); cursor: not-allowed; transform: none; }
.btn[disabled]::after { border-style: dashed; opacity: 0.35; }
.btn[disabled]::before { display: none; }
.btn-quiet { background: transparent; color: var(--paper-hi); box-shadow: inset 0 0 0 1px rgba(223, 227, 216, 0.4); }
.btn-quiet::after { display: none; }
.btn-quiet:hover { background: rgba(223, 227, 216, 0.08); }
.btn-quiet:active { box-shadow: inset 0 0 0 1px rgba(223, 227, 216, 0.4); }
.btn-wax { background: var(--wax); color: #f8ece6; }
.btn-wax:hover { background: var(--wax-hi); }
.btn-ink { background: var(--ink); color: var(--paper-hi); }
.btn-ink:hover { background: #2a3147; }
.btn-discord { background: #5865f2; color: #fff; }
.btn-discord::before { content: ''; width: 20px; height: 15px; flex: none; background: currentColor; -webkit-mask: var(--discord-mark) no-repeat center / contain; mask: var(--discord-mark) no-repeat center / contain; }
.btn-discord:hover { background: #4752c4; }
.btn-quiet-ink { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(27, 32, 48, 0.55); }
.btn-quiet-ink::after { display: none; }
.btn-quiet-ink:active { box-shadow: inset 0 0 0 1.5px rgba(27, 32, 48, 0.55); }
.account .btn { min-height: 38px; padding: 11px 14px 10px; font-size: 12px; }

/* Turning a sheet: a card with its corner turned down, and an arrow that
   leans the way the sheet goes. */
.btn-turn { background: var(--ink); color: var(--paper-hi); padding-right: 22px; }
.btn-turn:hover { background: #2a3147; }
.btn-turn::before { content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: linear-gradient(to bottom left, var(--paper) 50%, #4a5470 50%); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.25); transition: width 0.15s, height 0.15s; }
.btn-turn:hover::before { width: 16px; height: 16px; }
.btn-turn i { font: 400 17px/1 var(--sans); font-style: normal; transition: transform 0.15s; }
.btn-turn:hover i { transform: translateX(3px); }

/* Filing: the one red button, lettered like the stamp that answers it. */
.btn-stamp { background: var(--wax); color: #fbeee8; padding: 15px 24px 14px; font-size: 14px; letter-spacing: 0.14em; }
.btn-stamp::after { inset: 4px; border-width: 1.5px; opacity: 0.55; }
.btn-stamp:hover { background: var(--wax-hi); }
.btn-stamp:active { transform: translateY(2px) scale(0.985); }

/* Small actions on a form: back a sheet, clear a drawing. */
.btn-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 10px 2px; color: var(--ink-2); font: 500 12.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-decoration-color: rgba(27, 32, 48, 0.3); text-underline-offset: 4px; }
.btn-back:hover { color: var(--wax); text-decoration-color: var(--wax); }
.btn-back i { font: 400 15px/1 var(--sans); font-style: normal; }

/* --- the pages on the table ----------------------------------------------- */
main { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 20px 56px; }
.sheet { position: relative; background: var(--paper); color: var(--ink); padding: 34px 40px 40px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); }
.sheet::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--noise); opacity: 0.12; mix-blend-mode: multiply; }
.sheet + .sheet { margin-top: 26px; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.sheet a:not(.btn) { color: var(--ink); text-decoration-color: rgba(27, 32, 48, 0.4); text-underline-offset: 3px; }
.sheet a:not(.btn):hover { color: var(--wax); text-decoration-color: var(--wax); }

h1, h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.035em; line-height: 0.95; margin: 0; text-wrap: balance; }
h1 { font-size: 46px; }
h2 { font-size: 30px; margin: 44px 0 12px; }
h3 { font: 600 18px/1.3 var(--sans); margin: 28px 0 8px; }
.sheet > h2:first-child, .card h2 { margin-top: 0; }
.doc section + section { margin-top: 50px; }
h1 + p, h1 + .prose-serif { margin-top: 14px; }
.sheet p { margin: 0 0 14px; max-width: 72ch; }
.lead { font-size: 18px; color: var(--ink-2); max-width: 64ch; margin-top: 12px !important; }
.small, .meta { font-size: 13.5px; color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 30px 0; }

.prose-serif p, .prose-serif li { font: 400 19px/1.72 var(--serif); }
.prose-serif { max-width: 680px; }
.prose-serif ol { padding-left: 1.4em; margin: 0 0 18px; }
.prose-serif li { margin: 6px 0; padding-left: 4px; }
.prose-serif li::marker { font-weight: 600; color: var(--wax); }

ul.plain, ol.plain { margin: 0 0 16px; padding-left: 1.2em; }
ul.plain li, ol.plain li { margin: 5px 0; max-width: 72ch; }

/* --- tables that look like the ledger they are ---------------------------- */
.ledger { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ledger th { text-align: left; font-weight: 600; font-size: 13.5px; color: var(--ink-2); padding: 8px 12px 8px 0; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.ledger td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule-blue); vertical-align: top; }
.ledger td.n, .ledger th.n { text-align: right; }
.ledger tr.is-you td { background: rgba(255, 182, 39, 0.22); font-weight: 600; }
.ledger th .fac { white-space: nowrap; }
.ledger .who-cell { display: flex; align-items: center; gap: 10px; }
.ledger .who-cell img { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.table-wrap { overflow-x: auto; margin: 12px 0 8px; }

/* --- faction marks --------------------------------------------------------- */
.fac { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.fac::before { content: ''; width: 10px; height: 10px; background: currentColor; flex: none; }
.fac-legion { color: var(--legion); }
.fac-wild { color: var(--wild); }
.fac-weave { color: var(--weave); }
.fac-none { color: var(--ink-3); }

/* --- the map --------------------------------------------------------------- */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; }
.mapsheet { position: relative; background: var(--paper); padding: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.35); }
.mapsheet::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0.4;
  background: var(--noise), linear-gradient(90deg, transparent 33.1%, rgba(0,0,0,.09) 33.3%, rgba(255,255,255,.18) 33.5%, transparent 33.9%, transparent 66.4%, rgba(0,0,0,.08) 66.6%, rgba(255,255,255,.16) 66.8%, transparent 67.2%), linear-gradient(180deg, transparent 49.6%, rgba(0,0,0,.09) 49.9%, rgba(255,255,255,.18) 50.1%, transparent 50.5%); }
.warmap { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 780; max-width: 100%; }
.warmap .region { fill: transparent; stroke: #1b2030; stroke-width: 1.3; stroke-dasharray: 11 3 2 3; cursor: pointer; transition: stroke 0.15s, stroke-width 0.15s; outline: none; }
.warmap .region:hover, .warmap .region:focus-visible { stroke: var(--wax); stroke-width: 2.6; }
.warmap .region.is-picked { stroke: var(--wax); stroke-width: 3; stroke-dasharray: none; }
.warmap .wash { mix-blend-mode: multiply; }
.warmap .eng, .warmap .letters, .warmap .glow, .warmap .wash, .warmap .hatch { pointer-events: none; }
.warmap text { paint-order: stroke; stroke: rgba(222, 219, 208, 0.82); stroke-width: 3.2px; stroke-linejoin: round; }
.warmap .rg { font: 600 17px var(--serif); letter-spacing: 0.3em; fill: var(--ink); }
.warmap .rc { font-size: 12px; letter-spacing: 0.32em; }
.warmap .rt { font-size: 14px; letter-spacing: 0.24em; }
.warmap .rs { font: italic 400 12px var(--serif); fill: var(--ink-2); }
.warmap .rsd { font-size: 12.5px; letter-spacing: 0.22em; }
.warmap .rlong { font-size: 15px; letter-spacing: 0.12em; }
.warmap .st { font: italic 400 11px var(--serif); fill: var(--ink-2); }
.warmap .wt { font: italic 400 14px var(--serif); fill: #2c4f7a; letter-spacing: 0.06em; }
.warmap .gl { font: 500 10px var(--mono); fill: var(--ink-2); letter-spacing: 0.08em; }
.mapbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 2px 0; color: var(--on-felt-2); font-size: 14px; }
.mapbar button { background: none; border: 1px solid rgba(223, 227, 216, 0.3); color: var(--paper-hi); padding: 6px 12px; border-radius: 2px; }
.mapbar button:hover { background: rgba(223, 227, 216, 0.08); }
.map-tools { display: flex; gap: 6px; }
.map-page { max-width: 1240px; }
.map-stage { position: relative; }
.map-cards { position: absolute; top: 18px; right: 18px; width: min(340px, 42%); max-height: calc(100% - 36px); overflow-y: auto; }
.map-cards .card { box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55); }
.map-below { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: 26px; }
/* A member sees the season across the page; someone new, the season and the way into the Discord. */
.map-below.is-one { grid-template-columns: minmax(0, 1fr); }
.map-below.is-two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; }
.map-below.is-one .map-season-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
.map-season-in p { max-width: 68ch; }
@media (max-width: 1080px) {
  .map-cards { position: static; width: auto; max-height: none; margin-top: 14px; }
  .map-below, .map-below.is-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .map-below.is-one .map-season-in { grid-template-columns: minmax(0, 1fr); }
}
.map-tools [data-zoom] { width: 34px; padding: 4px 0; font: 600 18px/1 var(--sans); }
.warmap:not([data-quiz]) { touch-action: none; cursor: grab; }
.warmap.is-zoomed:active { cursor: grabbing; }
.map-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 2px 0; padding: 0; font-size: 13.5px; color: var(--on-felt-2); }
.map-key li { display: flex; align-items: center; gap: 7px; }
.map-key i { width: 16px; height: 12px; border: 1px solid rgba(223, 227, 216, 0.5); }
.key-home { background: linear-gradient(90deg, rgba(45, 92, 166, 0.8) 33%, rgba(200, 87, 42, 0.8) 33% 66%, rgba(113, 80, 174, 0.8) 66%); }
.key-side { background: linear-gradient(90deg, rgba(45, 92, 166, 0.4) 33%, rgba(200, 87, 42, 0.4) 33% 66%, rgba(113, 80, 174, 0.4) 66%); }
.key-border { background: repeating-linear-gradient(-45deg, #c9c4b5 0 2px, #9c988c 2px 3px); }
.key-crater { background: radial-gradient(#ffc84a, #7a6a3d); border-radius: 50%; width: 12px !important; }

.side { display: grid; gap: 18px; align-content: start; }
.sides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 28px; }
.side-link { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; text-decoration: none; color: var(--on-felt); }
.side-link .banner svg { width: 44px; height: auto; display: block; transition: transform 0.2s; transform-origin: top center; }
.side-link:hover .banner svg { transform: rotate(-3deg); }
.side-link strong { display: block; font: 800 20px/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper-hi); margin-bottom: 4px; }
.side-link em { display: block; font: italic 400 15px var(--serif); color: var(--on-felt-2); margin-bottom: 4px; }
.side-link > span:last-child > span { font-size: 14px; color: var(--on-felt-2); }
.side-link:hover strong { color: var(--star); }
.card { background: var(--paper-hi); color: var(--ink); padding: 18px 20px 20px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4); position: relative; }
.card h2 { font-size: 24px; margin: 0 0 10px; }
.card p { margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
.card .facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 14.5px; }
.card .facts dt { color: var(--ink-3); }
.card .facts dd { margin: 0; }
.region-card[hidden] { display: none; }
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 16px; }
.numbers div { border-top: 2px solid var(--ink); padding-top: 6px; }
.numbers b { display: block; font: 800 30px/1 var(--display); letter-spacing: 0.02em; }
.numbers span { font-size: 13.5px; color: var(--ink-3); }

.news { display: grid; gap: 0; }
.news article { padding: 14px 0; border-bottom: 1px solid var(--rule-blue); }
.news article:last-child { border-bottom: 0; padding-bottom: 0; }
.news .when { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.discord-text p { margin: 0 0 8px; }
.discord-text h3, .discord-text h4, .discord-text h5 { margin: 14px 0 6px; font: 600 16px/1.3 var(--sans); }
.discord-text blockquote { margin: 8px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--paper-lo); color: var(--ink-2); }
.discord-text ul { margin: 4px 0 10px; padding-left: 1.2em; }
.discord-text pre { background: var(--paper-lo); padding: 10px; overflow-x: auto; font: 13px/1.5 var(--mono); }
.discord-text code { font: 0.9em var(--mono); background: rgba(27, 32, 48, 0.07); padding: 1px 4px; }
.discord-text .mention { color: #3f4a9e; font-weight: 500; }
.discord-text .spoiler { background: var(--ink); color: var(--ink); border-radius: 2px; }
.discord-text .spoiler:hover { color: var(--paper-hi); }
.discord-text .emoji { width: 22px; height: 22px; vertical-align: -5px; }
.discord-text .small { font-size: 13px; color: var(--ink-3); }

/* --- long pages: a contents column beside the text ------------------------- */
.doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
.doc > div, .two > *, .home-grid > * { min-width: 0; }
.contents { position: sticky; top: 84px; align-self: start; font-size: 14.5px; }
.contents p { margin: 0 0 8px; color: var(--ink-3); font-size: 13.5px; }
.contents a { display: block; padding: 4px 0 4px 10px; border-left: 2px solid var(--rule); text-decoration: none; color: var(--ink-2); }
.contents a:hover { color: var(--ink); border-left-color: var(--ink); }
.doc section { scroll-margin-top: 80px; }

/* --- factions -------------------------------------------------------------- */
.factions { display: grid; gap: 26px; }
.faction { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 26px; padding-top: 22px; border-top: 5px solid currentColor; }
.faction .banner { width: 120px; }
.faction .banner svg { width: 100%; height: auto; display: block; }
.faction h2 { margin: 0 0 4px; color: currentColor; }
.faction .motto { font: italic 400 17px var(--serif); color: var(--ink-2); margin: 0 0 14px; }
.faction .body { color: var(--ink); }
.faction .facts { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; margin: 16px 0 0; font-size: 15px; }
.faction .facts dt { color: var(--ink-3); }
.faction .facts dd { margin: 0; }

/* --- people ---------------------------------------------------------------- */
.person { display: flex; align-items: center; gap: 14px; }
.person img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper-hi), 0 4px 10px rgba(0, 0, 0, 0.25); }
.person h1 { font-size: 40px; text-transform: none; letter-spacing: 0.02em; }
.person .meta { margin-top: 6px; }
.bar { height: 10px; background: var(--paper-lo); position: relative; overflow: hidden; margin: 8px 0 6px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; margin-top: 18px; }
.roles { display: flex; flex-wrap: wrap; gap: 6px; }
.roles span { font-size: 13.5px; padding: 3px 8px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.25); }
.roles span b { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--dot, var(--ink-3)); }

/* --- forms (staff search, login) ----------------------------------------- */
.field { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.field input { flex: 1; min-width: 200px; padding: 9px 12px; border: 1px solid var(--ink-3); background: var(--paper-hi); color: var(--ink); font: inherit; border-radius: 2px; }
.login-ways { display: grid; gap: 16px; margin: 22px 0 18px; }
.login-ways .way { padding: 18px 20px; background: var(--paper-hi); border-left: 4px solid var(--ink); }
.login-ways .way h2 { font-size: 22px; margin: 0 0 8px; }
.kbd { font: 500 14px var(--mono); background: var(--ink); color: var(--paper-hi); padding: 2px 7px; border-radius: 2px; }

/* --- case files ------------------------------------------------------------ */
.kind { font-weight: 600; }
.kind-ban, .kind-kick { color: var(--wax); }
.kind-timeout, .kind-warn, .kind-strike { color: #8a5a12; }
.kind-unban, .kind-untimeout { color: #2f6b3f; }
.evidence { display: grid; gap: 14px; margin-top: 12px; }
.evidence figure { margin: 0; }
.evidence img { max-height: 420px; border: 1px solid var(--rule); background: #fff; }
.evidence figcaption { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.revoked { text-decoration: line-through; color: var(--ink-3); }
.pager { display: flex; justify-content: space-between; margin-top: 16px; }

/* --- ranks ----------------------------------------------------------------- */
.rank-n { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--mono); color: var(--ink-2); }
.rank-n .ins { width: 24px; height: 22px; color: var(--ink); }
.ranks-table tr.post td { background: rgba(27, 32, 48, 0.04); }
.ranks-table td.needs { font-size: 12.5px; line-height: 1.45; min-width: 12ch; }
.ranks-table td.gives { min-width: 26ch; }
.ranks-table td.gives p { margin: 0; font-size: 14px; line-height: 1.45; }
.ranks-table td.gives p + p { margin-top: 6px; }
.ranks-table .gives-later { color: var(--ink-3); }
.deeds { margin: 6px 0 14px; padding-left: 1.2em; }
.deeds li { margin: 0 0 6px; max-width: 72ch; }
.record-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.record-list li { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 12px; padding: 7px 0 6px; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.record-list time { font: 500 12px var(--mono); color: var(--ink-3); padding-top: 2px; }
.record-list .is-struck { color: var(--wax); }
.rank-banners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 14px; }
.rank-banner { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: start; color: var(--ink); }
.rank-banner .banner svg { width: 54px; height: auto; display: block; }
.rank-banner p { margin: 0; font-size: 15px; }

/* --- lists of people and steps -------------------------------------------- */
.people { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 10px; }
.people li { display: flex; align-items: center; gap: 12px; }
.people img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
ol.steps { margin: 6px 0 18px; padding-left: 1.4em; }
ol.steps li { margin: 0 0 12px; padding-left: 4px; max-width: 70ch; }
ol.steps li::marker { font: 800 18px var(--display); color: var(--ink); }
.error { background: rgba(154, 41, 33, 0.1); border-left: 4px solid var(--wax); padding: 10px 14px; color: #6d1d17; }
.btn-quiet-ink:hover { background: rgba(27, 32, 48, 0.06); }
.logout { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule); }
.wide-facts { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; margin: 14px 0; }
.wide-facts dt { color: var(--ink-3); }
.wide-facts dd { margin: 0; }
td.chan { white-space: nowrap; }
.chan-table tr.group th { padding: 22px 0 6px; border-bottom: 1px solid var(--ink); font: 600 15px var(--sans); color: var(--ink); }
.chan-table tbody:first-of-type tr.group th { padding-top: 10px; }

@media (max-width: 760px) {
  .rank-banners { grid-template-columns: 1fr; }
  .sides { grid-template-columns: 1fr; gap: 16px; }
  .wide-facts { grid-template-columns: 1fr; gap: 0; }
  .wide-facts dd { margin-bottom: 8px; }
}

/* --- enlistment papers -------------------------------------------------------
   A pad of forms clipped together. Typed answers are in a typewriter face
   and blue-black ink; notes in the margin are in pencil; the Archon's stamp
   is red. public/papers.js turns the sheets one at a time. */
:root {
  --pen: #1d2a4a;
  --pencil: #57534b;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 15.5c3 1.6 5.2 4.6 7.2 8.8C15 15 20.4 8.4 27 3.6' fill='none' stroke='%231d2a4a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 15.5c3 1.6 5.2 4.6 7.2 8.8C15 15 20.4 8.4 27 3.6' fill='none' stroke='%239a2921' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cross-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M7 7.5c5 4.6 10.6 10 16 15.4M22.6 6.6C17 12 12.2 17.4 7.4 23.2' fill='none' stroke='%2357534b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --discord-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127 96'%3E%3Cpath d='M107.7 8.1A105 105 0 0 0 81.5 0a72 72 0 0 0-3.4 6.8 97.7 97.7 0 0 0-29.1 0A72 72 0 0 0 45.6 0a105.9 105.9 0 0 0-26.3 8.1C2.8 32.6-1.7 56.6.5 80.2a105.7 105.7 0 0 0 32.2 16.2 77.7 77.7 0 0 0 6.9-11.2 68.4 68.4 0 0 1-10.8-5.2c.9-.7 1.8-1.4 2.6-2.1a75.6 75.6 0 0 0 64.3 0c.9.7 1.7 1.4 2.6 2.1a68.7 68.7 0 0 1-10.8 5.2 77 77 0 0 0 6.9 11.2 105.3 105.3 0 0 0 32.2-16.2c2.7-27.3-4.6-51.1-18.9-72.1ZM42.5 65.7c-6.3 0-11.5-5.8-11.5-12.8s5-12.8 11.5-12.8S54 45.9 53.9 52.9s-5.1 12.8-11.4 12.8Zm42.2 0c-6.3 0-11.5-5.8-11.5-12.8s5-12.8 11.5-12.8 11.5 5.8 11.4 12.8-5 12.8-11.4 12.8Z'/%3E%3C/svg%3E");
  --stamp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.papers { max-width: 880px; margin: 0 auto; }
.pad { position: relative; isolation: isolate; }
.form-sheet { position: relative; background: var(--paper); color: var(--ink); padding: 24px 40px 32px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); }
.form-sheet::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--noise); opacity: 0.12; mix-blend-mode: multiply; }
.form-sheet + .form-sheet { margin-top: 26px; }
.form-sheet a:not(.btn) { color: var(--ink); text-underline-offset: 3px; }
.form-sheet a:not(.btn):hover { color: var(--wax); }
.form-sheet p { max-width: 70ch; }
.form-sheet h2 { margin: 6px 0 14px; }
.form-sheet h1:focus, .form-sheet h2:focus { outline: none; }
.papers.js .form-sheet { display: none; margin-top: 0; z-index: 1; }
.papers.js .form-sheet.is-current { display: block; }
/* The sheets still to come, under the one on top. */
.papers.js .pad::before, .papers.js .pad::after { content: ''; position: absolute; inset: 0; background: var(--paper-lo); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35); pointer-events: none; }
/* Offset, never rotated: a sheet two thousand pixels tall turned by one
   degree swings its corners forty pixels sideways. */
.papers.js .pad::before { transform: translate(5px, 6px); z-index: 0; }
.papers.js .pad::after { transform: translate(10px, 12px); background: #b9b3a2; z-index: -1; }
.papers.js .pad[data-left="1"]::after, .papers.js .pad[data-left="0"]::after { display: none; }
.papers.js .pad[data-left="0"]::before { display: none; }
.clip { position: absolute; top: -26px; left: 38px; width: 20px; height: auto; z-index: 3; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.35)); }
.papers.js .form-sheet.is-leaving { animation: sheet-lift 0.26s ease-in forwards; }
.papers.js .form-sheet.is-leaving-back { animation: sheet-sink 0.26s ease-in forwards; }
.papers.js .form-sheet.is-arriving { animation: sheet-lay 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes sheet-lift { to { transform: translate(-46px, -34px) rotate(-4deg); opacity: 0; } }
@keyframes sheet-sink { to { transform: translateY(22px); opacity: 0; } }
@keyframes sheet-lay { from { transform: translateY(14px) rotate(0.35deg); opacity: 0; } }

.form-head { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 8px; border-bottom: 3px double var(--ink); margin-bottom: 20px; }
.papers-title { font-size: 68px; letter-spacing: 0.05em; margin-top: 8px; }
.papers-sub { font: italic 400 19px/1.4 var(--serif); color: var(--ink-2); margin: 6px 0 0 !important; }
.typed { font: 400 16.5px/1.5 var(--mono); color: var(--pen); }
.fields { display: grid; grid-template-columns: 190px minmax(0, 1fr); margin: 22px 0 18px; border-top: 1px solid var(--ink); }
.fields dt, .fields dd { margin: 0; padding: 9px 0 7px; border-bottom: 1px solid var(--rule-blue); }
.fields dt { font: 500 11.5px/2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fields dd { overflow-wrap: anywhere; }
.fields.blank dd { min-height: 40px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.linkish { background: none; border: 0; padding: 4px 0; color: var(--ink); font: inherit; font-size: 15px; text-decoration: underline; text-decoration-color: rgba(27, 32, 48, 0.4); text-underline-offset: 3px; }
.linkish:hover { color: var(--wax); text-decoration-color: var(--wax); }

.roll { margin-top: 26px; padding: 16px 18px 14px; background: var(--paper-hi); color: var(--ink); border-left: 4px solid var(--star); }
.roll h2 { font-size: 22px; margin: 0 0 12px; }
.roll-sides { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.roll-sides li { display: flex; flex-direction: column; gap: 2px; border-top: 3px solid currentColor; padding-top: 5px; }
.roll-sides li span { font-size: 13px; font-weight: 600; }
.roll-sides b { font: 800 28px/1 var(--display); color: var(--ink); }
.roll-name { font-weight: 600; color: var(--ink); }

/* questions: tick one box; the note in the margin says why */
.q { border: 0; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px dashed rgba(27, 32, 48, 0.3); min-width: 0; }
.q legend { float: left; width: 100%; font: 600 17px/1.45 var(--sans); padding: 0; margin: 0 0 12px; }
.q legend + * { clear: both; }
.q-n { display: inline-block; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-hi); background: var(--ink); padding: 5px 7px 4px; margin-right: 8px; vertical-align: 2px; }
.ticks { display: grid; gap: 4px; }
.tick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; padding: 7px 6px; border-radius: 2px; color: var(--ink); font: 400 16px/1.4 var(--sans); }
.tick:hover { background: rgba(27, 32, 48, 0.05); }
.tick-box { position: relative; flex: none; width: 22px; height: 22px; border: 2px solid var(--ink); background: var(--paper-hi); }
.tick.is-picked .tick-box::after { content: ''; position: absolute; left: -4px; top: -9px; width: 32px; height: 32px; background: var(--tick) no-repeat center / contain; }
.tick.is-picked > span:last-child { text-decoration: underline; text-decoration-color: rgba(29, 42, 74, 0.45); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pencil { position: relative; margin: 12px 0 0; padding-left: 34px; font: italic 400 17.5px/1.5 var(--serif); color: var(--pencil); max-width: 62ch; }
.pencil::before { content: ''; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; background: no-repeat center / contain; }
.pencil.is-right::before { background-image: var(--tick-red); }
.pencil.is-wrong::before { background-image: var(--cross-pencil); }

.rules-box { margin: 18px 0 6px; padding: 14px 20px 14px 44px; border: 2px solid var(--ink); background: var(--paper-hi); font: 400 17px/1.55 var(--serif); max-width: 640px; }
.rules-box li { margin: 4px 0; padding-left: 4px; }
.rules-box li::marker { font: 800 18px var(--display); color: var(--wax); }
.quiz-map { margin-top: 4px; }
.warmap .region.is-right { fill: rgba(255, 182, 39, 0.3); }
.warmap .region.is-wrong { fill: rgba(154, 41, 33, 0.12); }

.side-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 18px 0 8px; }
.side-col { border-top: 5px solid currentColor; padding-top: 12px; }
.side-col .banner svg { width: 38px; height: auto; display: block; }
.side-col h3 { margin: 10px 0 2px; color: currentColor; font: 800 25px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.side-col p { color: var(--ink); font-size: 15px; margin: 0 0 8px; }
.side-col .motto { font: italic 400 16px var(--serif); color: var(--ink-2); }
.tri-fig { margin: 16px auto 0; max-width: 470px; text-align: center; }
.triangle { width: 100%; height: auto; display: block; overflow: visible; }
.tri-n { font: 800 17px var(--display); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ink); }
.tri-t { font: italic 400 14px var(--serif); fill: var(--ink-2); }
.tri-fig figcaption { font-size: 14px; color: var(--ink-3); margin-top: 6px; }
/* Under the three sides on the papers: they are even. */
.even-note { margin: 22px 0 0; padding: 12px 16px; border-left: 3px solid var(--ink); background: rgba(27, 32, 48, 0.04); font: italic 400 16.5px/1.5 var(--serif); color: var(--ink-2); max-width: 70ch; }

.week { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 2px solid var(--ink); background: var(--paper-hi); }
.week li { padding: 10px 9px 12px; border-left: 1px solid var(--rule-blue); font-size: 13px; line-height: 1.4; }
.week li:first-child { border-left: 0; }
.week b { display: block; font: 800 20px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.week li.siege { background: var(--ink); color: var(--paper-hi); }
.dice-box { margin: 24px 0 6px; padding: 18px 22px 16px; background: var(--paper-hi); border-left: 4px solid var(--ink); }
.dice-box h3 { margin: 0 0 8px; }
.dice-box p { margin: 0 0 10px; }
.dice-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 14px 0; }
.die { position: relative; flex: none; width: 96px; height: 104px; display: grid; place-items: center; background: var(--ink); color: var(--paper-hi); clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); font: 800 40px/1 var(--display); transition: background 0.2s; }
.die::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 104'%3E%3Cpath d='M48 18L82 78H14z M48 0v18 M92 26L82 78 M4 26l10 52 M48 104l34-26 M48 104L14 78 M4 26l44-8 M92 26l-44-8' fill='none' stroke='%23e8e4d9' stroke-opacity='.28' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.die span { position: relative; top: 6px; font-variant-numeric: tabular-nums; }
.die.is-rolling span { animation: die-jitter 0.09s linear infinite; }
.die.is-crit { background: var(--star); color: var(--ink); }
.die.is-fumble { background: var(--wax); }
@keyframes die-jitter { 50% { transform: translate(1px, -1px) rotate(4deg); } }
.dice-out { font: 500 17px/1.4 var(--mono); color: var(--pen); min-height: 1.4em; margin: 12px 0 2px !important; }

.helper { margin: 6px 0 4px; }
.helper-qs { margin-top: 6px; padding: 4px 18px 16px; background: var(--paper-hi); border-left: 4px solid var(--rule-blue); }
.q-lean { margin-top: 14px; }
.ballot { position: relative; aspect-ratio: 600 / 440; max-width: 100%; margin: 20px 0 8px; -webkit-user-select: none; user-select: none; }
.ballot canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: none; cursor: crosshair; }
.box { position: absolute; display: flex; flex-direction: column; overflow: hidden; padding: 12px 14px 10px; background: var(--paper-hi); border: 2px solid var(--ink); transition: background 0.2s, box-shadow 0.2s; }
.box-name { position: relative; z-index: 1; font: 800 23px/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.box-line { position: relative; z-index: 1; margin-top: 5px; font: italic 400 15px/1.3 var(--serif); color: var(--ink-2); max-width: 30ch; }
.box-count { position: relative; z-index: 1; margin-top: auto; font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.box-mark { position: absolute; right: 7%; bottom: 10%; width: 19%; opacity: 0.13; }
.box-mark svg { display: block; width: 100%; height: auto; }
.box-legion { border-top: 7px solid var(--legion); }
.box-legion .box-name { color: var(--legion); }
.box-wild { border-top: 7px solid var(--wild); }
.box-wild .box-name { color: var(--wild); }
.box-weave { border-top: 7px solid var(--weave); }
.box-weave .box-name { color: var(--weave); }
.box-free { border-top: 7px solid var(--ink-3); }
.box-free .box-name { color: var(--ink-2); }
.box.is-marked { background: #fbf1d6; box-shadow: inset 0 0 0 3px rgba(255, 182, 39, 0.55); }
.ballot-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ballot-bar p { margin: 0; }
.nodraw { margin: 12px 0; font-size: 14.5px; }
.nodraw summary { cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.nodraw-list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
.nodraw-list label { display: flex; align-items: center; gap: 6px; }
.nodraw .field { margin: 8px 0 0; }
.nodraw input[type="text"] { font: 400 16px var(--mono); color: var(--pen); }

.oath { margin: 8px 0 0; font: 400 18px/1.6 var(--serif); }
.oath ol { margin: 8px 0 12px; padding-left: 1.4em; }
.oath li { margin: 3px 0; padding-left: 4px; }
.oath li::marker { font: 800 17px var(--display); color: var(--wax); }
.oath .fill { font-size: 16px; padding: 0 4px 1px; border-bottom: 1px solid var(--ink); }
.sign-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; align-items: end; margin-top: 22px; }
.sign-col { min-width: 0; }
.sigpad { position: relative; aspect-ratio: 600 / 180; max-width: 100%; background: var(--paper-hi); }
.sigpad::before { content: ''; position: absolute; left: 3%; right: 3%; top: 78%; border-top: 1.5px solid var(--ink); pointer-events: none; }
.sigpad canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: none; cursor: crosshair; }
.sig-x { position: absolute; left: 4%; top: 57%; font: 500 22px/1 var(--mono); color: var(--ink-2); pointer-events: none; }
.sig-hint { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font: italic 400 16px var(--serif); color: var(--ink-3); pointer-events: none; }
.sig-under { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; font: 500 11.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.sig-under .typed { font-size: 14px; letter-spacing: 0; text-transform: none; }
.sig-under .linkish { font-size: 13px; letter-spacing: 0; text-transform: none; }
.archon-use { position: relative; aspect-ratio: 1; border: 1.5px dashed rgba(27, 32, 48, 0.45); display: grid; place-items: center; }
.use-label { position: absolute; top: 7px; left: 9px; right: 9px; font: 500 10px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.stamp { display: grid; justify-items: center; gap: 3px; padding: 9px 14px 8px; color: var(--wax); border: 3px solid currentColor; outline: 1.5px solid currentColor; outline-offset: 3px; transform: rotate(-8deg); font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; mix-blend-mode: multiply; -webkit-mask-image: var(--stamp-grain); mask-image: var(--stamp-grain); }
.stamp b { font: 800 29px/1 var(--display); letter-spacing: 0.08em; }
.stamp.is-landing { animation: stamp-down 0.3s cubic-bezier(0.3, 0.7, 0.35, 1.25) both; }
@keyframes stamp-down { from { transform: rotate(-15deg) scale(2.1); opacity: 0; } 55% { opacity: 1; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.form-sheet.is-thud { animation: thud 0.24s ease-out; }
@keyframes thud { 35% { transform: translateY(3px) scale(0.998); } }

.filed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 10px; }
.filed-paper { position: relative; padding: 16px 22px 24px; background: var(--paper-hi); border: 1px solid var(--rule); box-shadow: 0 2px 0 var(--paper-lo); }
.filed-no { margin: 0 0 4px !important; font: 800 46px/1 var(--display); letter-spacing: 0.03em; }
.filed-paper .fields { margin: 10px 0 12px; grid-template-columns: 90px minmax(0, 1fr); }
.filed-sig { color: var(--pen); border-bottom: 1.5px solid var(--ink); min-height: 40px; }
.sig-ink { display: block; width: 100%; height: auto; }
.sig-typed { font: italic 400 34px/1.3 var(--serif); padding: 8px 0 4px; }
.filed-paper .stamp { position: absolute; right: 14px; top: 16px; }

@media (max-width: 760px) {
  .side-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .week { grid-template-columns: minmax(0, 1fr); }
  .week li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; border-left: 0; border-top: 1px solid var(--rule-blue); }
  .week li:first-child { border-top: 0; }
  .week b { margin: 0; font-size: 18px; }
  .filed-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .form-sheet { padding: 18px 16px 24px; }
  .papers-title { font-size: 48px; }
  .fields { grid-template-columns: 124px minmax(0, 1fr); }
  .fields dt { font-size: 10.5px; line-height: 1.5; padding-right: 8px; }
  .typed { font-size: 15px; }
  .roll-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box { padding: 7px 8px 6px; border-width: 1.5px; }
  .box-name { font-size: 16px; }
  .box-line { font-size: 12px; margin-top: 3px; }
  .box-count { font-size: 9.5px; letter-spacing: 0.04em; }
  .box-legion, .box-wild, .box-weave, .box-free { border-top-width: 5px; }
  .sign-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .archon-use { width: 170px; justify-self: end; }
  .oath { font-size: 17px; }
  .dice-box { padding: 14px 14px 12px; }
  .die { width: 80px; height: 87px; font-size: 34px; }
  .clip { left: 22px; }
  .papers.js .pad::before { transform: translate(3px, 4px); }
  .papers.js .pad::after { transform: translate(6px, 8px); }
  .filed-paper .stamp { top: auto; bottom: 54px; right: 10px; }
}
.me-papers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; align-items: center; padding: 16px 20px; background: var(--paper-hi); border-left: 4px solid var(--star); }
.me-papers p { margin: 0 0 8px; }
.me-news { max-width: 72ch; margin: 0 0 8px; }
@media (max-width: 640px) { .me-papers { grid-template-columns: minmax(0, 1fr); } }

.gate-note { margin: 0 !important; font: italic 400 16px/1.4 var(--serif); color: var(--pencil); }
.cover-top { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 26px; align-items: start; }
.slip { margin: 14px 0 0; padding: 14px 16px 12px; background: #efe8d2; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(0, 0, 0, 0.1); transform: rotate(1.5deg); font: italic 400 16px/1.45 var(--serif); color: var(--pencil); }
.slip p { margin: 0 0 8px !important; }
.slip .slip-by { margin: 0 !important; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.ooc { margin: 10px 0 0 !important; font: 400 13.5px/1.5 var(--mono); color: var(--ink-3); }
.entered { margin: 12px 0 0 !important; font: italic 400 15px var(--serif); color: var(--pencil); }
.stamp-by { font-size: 9px; letter-spacing: 0.18em; }
.helper-open { padding-left: 0; }
.ballot.is-column .box { padding: 12px 16px 10px; }
.ballot.is-column .box-name { font-size: 22px; }
.ballot.is-column .box-line { font-size: 14px; margin-top: 4px; }
.ballot.is-column .box-count { font-size: 11px; }
.ballot.is-column .box-mark { width: 12%; right: 5%; bottom: 14%; }
@media (max-width: 760px) {
  .cover-top { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .slip { max-width: 330px; margin: 12px 0 4px auto; }
}

.for-whom { margin: 10px 0 0 !important; font-size: 15px; color: var(--ink-2); }
.box.is-closed { background: repeating-linear-gradient(-45deg, rgba(27, 32, 48, 0.05) 0 8px, transparent 8px 16px), var(--paper-lo); }
.box.is-closed .box-name, .box.is-closed .box-line { opacity: 0.55; }
.box-closed { position: absolute; left: 50%; top: 52%; z-index: 1; transform: translate(-50%, -50%) rotate(-7deg); padding: 6px 12px 5px; border: 3px solid var(--wax); color: var(--wax); font: 800 20px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; mix-blend-mode: multiply; -webkit-mask-image: var(--stamp-grain); mask-image: var(--stamp-grain); }
.code-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0 18px; padding: 14px 18px; background: var(--paper-hi); border: 2px dashed var(--ink); width: fit-content; max-width: 100%; }
.code { font: 500 34px/1 var(--mono); letter-spacing: 0.24em; color: var(--pen); -webkit-user-select: all; user-select: all; }
.roll-under { max-width: 880px; margin: 30px auto 0; }
/* The roll, under the ballot on the side sheet: the boxes already say how many signed for each side. */
.roll-in { margin-top: 22px; padding: 12px 16px 10px; }
.roll-in h3 { margin: 0 0 6px; font: 800 20px/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.roll-in p { margin: 0 0 4px !important; }
/* Received: the clerk's blue date stamp, before a Warden's red one. */
.stamp.is-received { color: var(--pen); }
.stamp.is-received b { font-size: 25px; }
/* A note clipped to the cover when the last papers came back. */
.slip-back { max-width: 560px; margin: 18px 0 4px; transform: rotate(-0.8deg); border-left: 3px solid var(--wax); }
.slip-back strong { font-style: normal; color: var(--ink); }
@media (max-width: 640px) {
  .code { font-size: 28px; letter-spacing: 0.18em; }
  .box-closed { font-size: 15px; }
}

/* the front page of the papers, set like an exam booklet */
.cover-frame { padding: 24px 28px 26px; border: 4px double var(--ink); }
.cover-seal { display: block; width: 58px; height: 58px; margin: 0 0 10px; color: var(--ink); }
.cover-kicker { margin: 0 0 4px !important; font: 500 12px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.cover .papers-title { font-size: 58px; }
.cover-fields { margin: 22px 0 8px; }
.cover-fields .muted { color: var(--ink-3); font-style: italic; }
.cover-h { font-size: 22px; margin: 22px 0 8px !important; }
.cover-rules { margin: 0; padding: 4px 0 4px 34px; border-left: 3px solid var(--ink); font-size: 15.5px; }
.cover-rules li { margin: 6px 0; padding-left: 4px; max-width: 70ch; }
.cover-rules li::marker { font: 800 17px var(--display); color: var(--wax); }
.promise { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; padding: 14px 18px; background: var(--paper-hi); border: 2px solid var(--ink); font: 600 17px/1.4 var(--sans); cursor: pointer; }
.promise:hover { background: #fff6dd; }
.promise input { position: relative; flex: none; width: 28px; height: 28px; margin: 0; border: 2px solid var(--ink); background: var(--paper); -webkit-appearance: none; appearance: none; cursor: pointer; }
.promise input:checked::after { content: ''; position: absolute; left: -5px; top: -11px; width: 38px; height: 38px; background: var(--tick) no-repeat center / contain; }
.promise input:focus-visible { outline: 2px solid var(--star); outline-offset: 3px; }
@media (max-width: 640px) {
  .cover-frame { padding: 16px 14px 18px; border-width: 3px; }
  .cover .papers-title { font-size: 42px; }
  .promise { font-size: 16px; padding: 12px 14px; }
}

/* --- a region up close ------------------------------------------------------ */
.crumbs { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px !important; }
.crumbs a { color: var(--ink-2); }
.region-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; margin-top: 20px; }
.regionmap { display: block; width: 100%; height: auto; max-width: 100%; }
/* The areas of a region up close: see-through, so the ground shows, with ink borders. */
.regionmap .place { fill: rgba(250, 246, 235, 0.06); stroke: #1b2030; stroke-width: 1.3; stroke-opacity: 0.75; stroke-linejoin: round; cursor: pointer; transition: fill 0.15s, stroke-width 0.15s; outline: none; }
.regionmap .place:hover, .regionmap .place:focus-visible { fill: rgba(255, 246, 221, 0.5); stroke: var(--wax); stroke-width: 2.6; stroke-opacity: 1; }
.regionmap .place.is-picked { fill: rgba(251, 236, 196, 0.72); stroke: var(--wax); stroke-width: 3; stroke-opacity: 1; }
.regionmap .place.is-shut { cursor: default; }
.regionmap .r-pin { fill: var(--ink); stroke: rgba(232, 228, 217, 0.9); stroke-width: 1.6; }
.regionmap .eng, .regionmap .letters, .regionmap .wash { pointer-events: none; }
.regionmap text { paint-order: stroke; stroke: rgba(222, 219, 208, 0.85); stroke-width: 3px; stroke-linejoin: round; }
.regionmap .r-place { font: 600 15px var(--serif); letter-spacing: 0.18em; fill: var(--ink); stroke: rgba(232, 228, 217, 0.92); stroke-width: 4px; }
.regionmap .r-front { font: 800 20px var(--display); letter-spacing: 0.08em; fill: var(--ink); }
.regionmap .r-rule { font: italic 400 14px var(--serif); fill: var(--ink-2); }
.regionmap .r-end { font: 500 11px var(--mono); letter-spacing: 0.22em; stroke: none; }
.place-list { display: grid; gap: 18px; }
.place-card h2 { font-size: 24px; }
.front-block h2 { font-size: 22px; margin: 0 0 2px; }
.front-block .rule { font: italic 400 15px var(--serif); color: var(--ink-2); margin: 0 0 6px !important; }
.front-block ol { margin: 0; padding-left: 1.3em; font-size: 14.5px; }
.front-block li { margin: 4px 0; padding: 2px 4px; }
.front-block li::marker { font: 500 12px var(--mono); color: var(--ink-3); }
.front-block li.is-picked { background: rgba(255, 182, 39, 0.24); }
.region-nav { margin-top: 26px !important; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 15px; }
@media (max-width: 1080px) { .region-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .regionmap .r-place { font-size: 17px; letter-spacing: 0.12em; }
  .regionmap .r-front { font-size: 24px; }
  .regionmap .r-rule { display: none; }
}

/* --- the two frames: a plain one for newcomers, the panel for members ------- */
.frame { position: relative; z-index: 1; flex: 1; width: 100%; }
.utc { margin-left: auto; }
.is-panel .frame { display: grid; grid-template-columns: 228px minmax(0, 1fr); max-width: 1480px; margin: 0 auto; }
.is-panel main { max-width: none; margin: 0; padding: 28px 30px 56px; }
.side-nav { position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 24px 14px 30px 20px; border-right: 1px solid rgba(223, 227, 216, 0.08); }
.side-group { margin: 18px 0 6px 12px; font: 500 11px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-felt-2); }
.side-group:first-child { margin-top: 0; }
.side-link-nav { display: block; padding: 8px 12px; border-left: 2px solid transparent; color: var(--on-felt); text-decoration: none; font-weight: 500; font-size: 15px; }
.side-link-nav:hover { background: rgba(223, 227, 216, 0.06); color: var(--paper-hi); }
.side-link-nav.is-here { background: rgba(255, 182, 39, 0.1); border-left-color: var(--star); color: var(--paper-hi); }
.side-out { margin: 20px 0 0; padding: 0 12px; }
.side-out .btn-back { color: var(--on-felt-2); text-decoration-color: rgba(223, 227, 216, 0.3); }
.side-out .btn-back:hover { color: var(--star); }
.menu[open] nav { max-height: 80vh; overflow-y: auto; }
.menu nav .side-group { margin-left: 12px; }

/* --- a member's overview --------------------------------------------------- */
.overview { max-width: 1120px; }
.ov-head { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.ov-head img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 182, 39, 0.55); }
.ov-head h1 { color: var(--paper-hi); font-size: 42px; text-transform: none; letter-spacing: 0.02em; }
.ov-head .meta { margin: 6px 0 0; color: var(--on-felt-2); }
.ov-papers.is-todo, .ov-char.is-todo { box-shadow: inset 0 4px 0 var(--star), 0 12px 26px rgba(0, 0, 0, 0.4); }
.ov-papers .filed-no { font-size: 38px; }
.ov-papers .filed-sig { max-width: 320px; margin-bottom: 14px; }
.ov-map-link { display: block; margin-bottom: 12px; padding: 6px; background: var(--paper); }
.ov-map-link svg { pointer-events: none; }
/* The lower half: your papers and character over the map, and beside them
   your rank over the season. Both columns end on one line: the last card of
   each takes what is left, and the buttons sit at the foot of theirs. */
.ov-bottom { container: ovb / inline-size; }
.ov-cols { display: grid; gap: 20px; }
.ov-main, .ov-aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ov-pair { display: grid; gap: 20px; }
.ov-cols .card { display: flex; flex-direction: column; }
.ov-cols .ov-go { margin-top: auto; padding-top: 4px; }
@container ovb (min-width: 600px) {
  .ov-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container ovb (min-width: 900px) {
  .ov-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .ov-main > :last-child, .ov-aside > :last-child { flex: 1 0 auto; }
}
.ov-season .season-line { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.ov-season .season-line li { margin: 0; }
.ov-map .ov-map-link { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
.ov-map .ov-map-link svg { display: block; width: 100%; height: auto; }
.ov-char-name { margin: 0 0 2px !important; font: 800 32px/1 var(--display); letter-spacing: 0.03em; overflow-wrap: anywhere; }
.ov-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; margin: 12px 0 14px; font-size: 14px; }
.ov-stats dt { color: var(--ink-3); }
.ov-stats dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 10px; align-items: center; }
.ov-stats .stat-bar { grid-column: auto; }
.ov-stats b { font: 800 17px/1 var(--display); text-align: right; }
.rank-key { display: flex; justify-content: space-between; margin: 0 0 4px !important; padding: 0 8px; font: 500 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.rank-ladder { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--rule); }
.rank-ladder li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 8px 6px; border-bottom: 1px solid var(--rule); }
.rank-ladder.is-when .rank-t { font-size: 14px; font-weight: 400; }
.rank-n { font: 800 15px/1 var(--display); letter-spacing: 0.04em; color: var(--ink-3); }
.rank-t { min-width: 0; font-size: 14.5px; font-weight: 600; }
.rank-m { font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.rank-ladder li.is-you { background: rgba(255, 182, 39, 0.2); box-shadow: inset 3px 0 0 var(--star); }
.rank-ladder li.is-you .rank-n { color: var(--ink); }
@media (max-width: 1000px) {
  .is-panel .frame { display: block; }
  .side-nav { display: none; }
  .is-panel main { padding: 24px 20px 48px; }
}
@media (max-width: 760px) {
  .ov-head h1 { font-size: 34px; }
}

/* --- the control panel ------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; }
.chip { display: inline-flex; align-items: center; padding: 4px 9px 3px; border: 1px solid rgba(223, 227, 216, 0.3); font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--on-felt); }
.card .chip { border-color: var(--rule); color: var(--ink-2); }
.chip-side { font-weight: 600; border-color: currentColor; background: rgba(223, 227, 216, 0.06); }
.chip-side.fac-legion { color: #7ea6e6; }
.chip-side.fac-wild { color: #ef9064; }
.chip-side.fac-weave { color: #b49be6; }
.chip-open { color: #2f6b3f !important; border-color: rgba(47, 107, 63, 0.5) !important; }
.chip-closed { color: var(--wax) !important; border-color: rgba(154, 41, 33, 0.5) !important; }
.ov-head .chip-closed { color: #f0a097 !important; border-color: rgba(240, 160, 151, 0.5) !important; }
.chip-warden { font-weight: 600; color: var(--star); border-color: currentColor; background: rgba(255, 182, 39, 0.08); }
.board { margin: 0 0 20px; }
.board-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 10px 0 12px; }
.board-col { position: relative; padding: 14px 16px 10px; border-top: 5px solid currentColor; background: rgba(27, 32, 48, 0.03); }
.board-col.is-mine { background: rgba(255, 182, 39, 0.12); }
.board-top { display: flex; gap: 12px; align-items: flex-start; }
.board-top .banner svg { width: 34px; height: auto; display: block; }
.board-top h3 { margin: 0; color: currentColor; font: 800 22px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.board-top .motto { margin: 3px 0 0 !important; font: italic 400 14px var(--serif); color: var(--ink-2); }
.board-you { position: absolute; top: 10px; right: 12px; margin: 0 !important; font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.board-col .facts { grid-template-columns: 96px minmax(0, 1fr); color: var(--ink); }
.board-col .facts b { font: 800 22px/1 var(--display); margin-right: 6px; }
.season-line { list-style: none; margin: 6px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--rule); }
.season-line li { position: relative; margin: 0 0 12px; padding-left: 4px; }
.season-line li::before { content: ''; position: absolute; left: -23px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper-hi); border: 2px solid var(--ink-3); }
.season-line li.is-now::before { background: var(--star); border-color: var(--ink); }
@media (max-width: 900px) { .board-cols { grid-template-columns: minmax(0, 1fr); } }

/* --- footer ---------------------------------------------------------------- */
.foot { position: relative; z-index: 1; border-top: 1px solid rgba(223, 227, 216, 0.08); background: rgba(15, 21, 18, 0.6); }
.foot-in { max-width: 1240px; margin: 0 auto; padding: 22px 20px 30px; display: grid; gap: 6px; font-size: 14px; color: var(--on-felt-2); }
.foot-in p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.foot-links a { color: var(--on-felt); text-decoration: none; }
.foot-links a:hover { color: var(--star); }
.sound { background: none; border: 0; padding: 0; color: var(--on-felt-2); text-decoration: underline; text-underline-offset: 3px; }
.status { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #7a7f78; }
.dot.on { background: #5bbf6a; box-shadow: 0 0 0 3px rgba(91, 191, 106, 0.18); }

/* --- turning the page ------------------------------------------------------
   When the site swaps pages without a reload (site.js), the old sheet lifts
   away and the new one is laid down on top, the way paper lands on a table. */
main.leaving > * { animation: sheet-out 0.16s ease-in forwards; }
main.arriving > * { animation: sheet-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
main.arriving > *:nth-child(2) { animation-delay: 0.04s; }
main.arriving > *:nth-child(3) { animation-delay: 0.08s; }
@keyframes sheet-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(20px) rotate(-0.35deg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } }

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

/* --- narrow screens -------------------------------------------------------- */
@media (max-width: 1080px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .contents { position: static; display: none; }
}
@media (max-width: 1000px) {
  .menu { display: block; position: relative; order: 5; }
  .utc { order: 3; }
  .account { order: 4; }
  .menu summary { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 9px; border: 1px solid rgba(223, 227, 216, 0.3); border-radius: 2px; cursor: pointer; }
  .menu summary span { display: block; height: 2px; background: var(--paper-hi); }
  .menu[open] nav { display: flex; flex-direction: column; position: absolute; right: 0; top: 48px; width: 250px; background: #111713; padding: 12px 8px; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5); }
}
@media (max-width: 900px) {
  .top-in { gap: 10px; }
  .two { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
  main { padding: 18px 12px 40px; }
  .sheet { padding: 24px 18px 28px; }
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  .faction { grid-template-columns: 1fr; gap: 12px; }
  .faction .banner { width: 72px; }
  .faction .facts { grid-template-columns: 1fr; gap: 2px; }
  .faction .facts dd { margin-bottom: 8px; }
  .me span { display: none; }
  .brand span { font-size: 22px; }
  .prose-serif p, .prose-serif li { font-size: 18px; }
}

/* ---------------------------------------------------------------------------
   The War Table: a side's people on its regions, and the radio.
   Each region is a sheet on the felt; each front a row of three places
   drawn as dashed boxes; each person a paper token with their side's
   colour down its edge. The radio is a dark console beside it. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wt { max-width: 1320px; }
.wt-top { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 22px; }
.wt-top .banner svg { width: 48px; height: auto; display: block; }
.wt-top h1 { margin: 0 0 8px; font: 800 44px/0.95 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--paper-hi); }
.wt-top h1 span { display: block; margin-top: 6px; font: 500 13px/1.4 var(--mono); letter-spacing: 0.14em; color: var(--on-felt-2); }
.wt-top p { margin: 0 0 6px; color: var(--on-felt); max-width: 78ch; }
.wt-top .small { color: var(--on-felt-2); }
.wt-top a { color: var(--paper-hi); }
.wt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.wt-boards { display: grid; gap: 18px; transition: opacity 0.15s; }
.wt.is-busy .wt-boards { opacity: 0.72; }
.wt-aside { display: grid; gap: 18px; position: sticky; top: 76px; }
.wt-region { background: var(--paper-hi); color: var(--ink); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4); padding: 14px 16px 16px; }
.wt-region.is-home { background: var(--paper); }
.wt-region-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: baseline; margin-bottom: 10px; }
.wt-region-head h2 { margin: 0; font: 800 26px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.wt-region-head p { margin: 0; font-size: 13.5px; color: var(--ink-2); grid-column: 1; }
.wt-region-head .wt-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.wt-count b { font: 800 26px/1 var(--display); color: var(--ink); margin-right: 4px; }
.wt-contact { margin: 0 0 10px; padding: 6px 10px; font-size: 13.5px; background: rgba(154, 41, 33, 0.08); border-left: 3px solid var(--wax); }
.wt-zone { position: relative; min-height: 64px; padding: 6px 6px 8px; border: 1.5px dashed rgba(27, 32, 48, 0.28); background: rgba(27, 32, 48, 0.025); display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; transition: background 0.12s, border-color 0.12s; }
.wt-pool { min-height: 52px; }
.wt-place-name { flex-basis: 100%; margin: 0 0 2px; font: 600 12.5px/1.25 var(--serif); letter-spacing: 0.04em; color: var(--ink-2); }
.wt-empty { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.wt-zone.has-contact { border-color: rgba(154, 41, 33, 0.55); background: rgba(154, 41, 33, 0.06); }
.wt.is-dragging .wt-zone[data-drop] { border-color: rgba(27, 32, 48, 0.5); }
.wt-zone.is-over { border-style: solid; border-color: var(--wax); background: rgba(255, 182, 39, 0.22); }
.wt-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 3px 8px 3px 3px; border: 0; border-left: 4px solid currentColor; background: #fffdf6; font: 500 13px/1.1 var(--sans); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.12); text-align: left; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wt-chip img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.wt-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.wt-chip i { flex: none; font: 600 13px/1 var(--sans); font-style: normal; color: #a86f0a; }
button.wt-chip { cursor: grab; }
button.wt-chip:hover { background: #fff; }
button.wt-chip:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }
.wt-chip.is-me { background: #fff1c9; }
.wt-chip.is-enemy { background: transparent; box-shadow: inset 0 0 0 1px currentColor; padding-left: 8px; }
.wt-chip.is-lifted { opacity: 0.35; }
.wt-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4); }
.wt-you h2, .wt-radio h2 { font-size: 22px; }
.wt-radio-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.wt-radio-tabs a { padding: 5px 8px 4px; border: 1px solid var(--rule); font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.wt-radio-tabs a.is-here { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); }
.wt-feed { list-style: none; margin: 8px 0 10px; padding: 10px 12px; max-height: 380px; overflow-y: auto; background: #151a26; color: #dfe3d8; font-size: 14px; line-height: 1.45; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5); }
.wt-line { margin: 0 0 7px; overflow-wrap: anywhere; }
.wt-line:last-child { margin-bottom: 0; }
.wt-line b { color: #fff; margin-right: 6px; }
.wt-line i { margin-right: 6px; font: 500 10px var(--mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #a9b3a5; }
.wt-when { margin-right: 8px; font: 500 11px var(--mono); color: #7f8a7c; }
.wt-line.is-system { color: #a9b3a5; font-style: italic; }
.wt-line .discord-text, .wt-line .discord-text p { display: inline; margin: 0; }
.wt-say { display: flex; gap: 8px; }
.wt-say input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1.5px solid rgba(27, 32, 48, 0.35); border-radius: 0; background: #fffdf6; color: var(--ink); font: 400 16px var(--sans); }
.wt-say input:focus { outline: 2px solid var(--wax); outline-offset: 1px; }
.wt-say-error, .wt-trouble { color: var(--wax) !important; }
.wt-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 14, 12, 0.6); }
.wt-sheet[hidden] { display: none; }
.wt-sheet-in { width: 100%; max-width: 560px; max-height: min(80vh, 720px); overflow-y: auto; padding: 18px 18px 14px; background: var(--paper-hi); color: var(--ink); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); }
.wt-sheet-title { margin: 0 0 6px; font: 800 26px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.wt-sheet-group { margin: 14px 0 6px; font: 600 11.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.wt-sheet-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wt-dest { min-height: 44px; padding: 8px; border: 1px solid rgba(27, 32, 48, 0.3); background: #fffdf6; color: var(--ink); font: 500 13.5px/1.2 var(--sans); text-align: left; cursor: pointer; }
.wt-dest:hover, .wt-dest:focus-visible { border-color: var(--wax); background: #fff1c9; outline: none; }
.wt-sheet .btn { width: 100%; margin-top: 16px; }
body.has-sheet { overflow: hidden; }
.wt-toast { position: fixed; left: 50%; bottom: 20px; z-index: 95; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; background: var(--ink); color: var(--paper-hi); font: 500 14px/1.35 var(--sans); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.wt-toast.is-bad { background: var(--wax); }
.wt-toast[hidden] { display: none; }
@media (max-width: 1100px) {
  .wt-grid { grid-template-columns: minmax(0, 1fr); }
  .wt-aside { position: static; order: -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .wt-aside { grid-template-columns: minmax(0, 1fr); }
  .wt-feed { max-height: 260px; }
  .wt-sheet { align-items: flex-end; padding: 0; }
  .wt-sheet-in { max-width: none; max-height: 78vh; }
}
@media (max-width: 640px) {
  .wt-top .banner svg { width: 36px; }
  .wt-top h1 { font-size: 34px; }
  .wt-region { padding: 12px 10px; }
  .wt-region-head h2 { font-size: 22px; }
  .wt-zone { min-height: 58px; padding: 5px 4px 6px; gap: 4px; }
  .wt-place-name { font-size: 12px; letter-spacing: 0.02em; }
  .wt-chip { gap: 4px; padding-right: 6px; font-size: 12.5px; }
  .wt-chip img { display: none; }
  .wt-chip { padding-left: 6px; }
  .wt-sheet-row { gap: 5px; }
  .wt-dest { padding: 8px 6px; font-size: 13px; }
}

/* The overview's "where you are" strip, above the three sides. */
.post-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 18px 26px; align-items: center; margin: 0 0 20px; border-top: 5px solid currentColor; }
.post-card > * { color: var(--ink); }
.post-card h2 { margin: 2px 0 4px; font: 800 30px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.post-card h2 span { display: block; margin-top: 4px; font: italic 400 16px var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.post-label { margin: 0 !important; font: 600 11.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.post-radio p:last-child { margin: 4px 0 0; }
.post-go { margin: 0 !important; }
@media (max-width: 900px) {
  .post-card { grid-template-columns: minmax(0, 1fr); }
  .post-go .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   The two halves of the member's site: a switch in the bar. */
.sections { display: flex; align-items: stretch; height: 100%; margin-left: 8px; }
.sections a { display: flex; align-items: center; padding: 0 14px; border-bottom: 2px solid transparent; font: 600 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-felt-2); text-decoration: none; white-space: nowrap; }
.sections a:hover { color: var(--paper-hi); }
.sections a.is-here { color: var(--paper-hi); border-bottom-color: var(--star); }
.menu nav .sections { display: flex; height: auto; margin: 0 0 14px; border-bottom: 1px solid rgba(223, 227, 216, 0.14); }
.menu nav .sections a { flex: 1; justify-content: center; padding: 12px 8px; }
@media (max-width: 760px) { .top-in > .sections { display: none; } }

/* ---------------------------------------------------------------------------
   Your character: a sheet with the name, the four roles as cards, the stats
   with steppers, a few lines of story. */
.char-page { max-width: 980px; }
.char-page h1 { margin-bottom: 6px; }
.char-saved { padding: 10px 14px; background: rgba(47, 107, 63, 0.12); border-left: 3px solid #2f6b3f; }
.char-note { padding: 10px 14px; background: rgba(27, 32, 48, 0.05); border-left: 3px solid var(--ink-2); }
.char-error { padding: 10px 14px; background: rgba(154, 41, 33, 0.1); border-left: 3px solid var(--wax); color: var(--wax); }
.char-card { margin: 12px 0 8px; padding: 12px 16px; background: rgba(27, 32, 48, 0.04); border-top: 3px solid var(--ink); }
.char-card .facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.char-card dt { color: var(--ink-3); }
.char-card dd { margin: 0; }
.char-block { margin: 26px 0 0; }
.char-block h2 { margin: 0 0 4px; font: 800 24px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.char-block > .small { margin: 0 0 12px; max-width: 70ch; }
.char-name { width: min(420px, 100%); min-height: 48px; padding: 10px 12px; border: 1.5px solid rgba(27, 32, 48, 0.4); border-radius: 0; background: #fffdf6; color: var(--ink); font: 600 20px var(--serif); letter-spacing: 0.02em; }
.char-name:focus, .char-form textarea:focus, .stat-row input:focus { outline: 2px solid var(--wax); outline-offset: 1px; }
.role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.role-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border: 1.5px solid rgba(27, 32, 48, 0.25); background: #fffdf6; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; }
.role-card:hover { border-color: rgba(27, 32, 48, 0.55); }
.role-card input { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; accent-color: var(--wax); }
.role-card:has(input:checked) { border-color: var(--wax); box-shadow: inset 0 0 0 1.5px var(--wax), 0 6px 16px rgba(0, 0, 0, 0.12); background: #fff6df; }
.role-card:has(input:focus-visible) { outline: 2px solid var(--wax); outline-offset: 2px; }
.role-card.is-off { opacity: 0.45; cursor: not-allowed; }
.role-name { font: 800 22px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; padding-right: 26px; }
.role-job { font-weight: 600; font-size: 14px; }
.role-look { font: italic 400 14px/1.35 var(--serif); color: var(--ink-2); }
.role-card ul { margin: 2px 0 0; padding-left: 16px; font-size: 13.5px; line-height: 1.4; }
.role-card li { margin: 0 0 3px; }
.role-ult { margin-top: auto; padding-top: 6px; border-top: 1px dashed rgba(27, 32, 48, 0.25); font-size: 13.5px; line-height: 1.4; }
.stat-rows { display: grid; gap: 10px; max-width: 720px; }
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(80px, 180px); align-items: center; gap: 8px; }
.stat-row label { display: flex; flex-direction: column; }
.stat-row label b { font: 600 16px var(--sans); }
.stat-row label span { font-size: 13px; color: var(--ink-3); }
.stat-row input { width: 3.2em; min-height: 40px; padding: 6px 4px; border: 1.5px solid rgba(27, 32, 48, 0.35); border-radius: 0; background: #fffdf6; color: var(--ink); font: 700 18px var(--mono); text-align: center; -moz-appearance: textfield; }
.stat-row input::-webkit-outer-spin-button, .stat-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stat-step { width: 40px; height: 40px; border: 1.5px solid rgba(27, 32, 48, 0.35); background: var(--paper-hi); color: var(--ink); font: 700 20px/1 var(--sans); cursor: pointer; }
.stat-step:hover:not(:disabled) { background: #fff6df; border-color: var(--wax); }
.stat-step:disabled { opacity: 0.35; cursor: not-allowed; }
.stat-bar { height: 8px; background: rgba(27, 32, 48, 0.1); }
.stat-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b07a12, var(--star)); transition: width 0.15s; }
.stat-left { margin: 12px 0 0; font: 600 13px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.stat-left.is-over { color: var(--wax); }
.char-form textarea { width: min(720px, 100%); padding: 10px 12px; border: 1.5px solid rgba(27, 32, 48, 0.35); border-radius: 0; background: #fffdf6; color: var(--ink); font: 400 16px/1.5 var(--serif); resize: vertical; }
.char-form .btn-stamp { margin-top: 22px; }
.char-form button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 980px) { .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .role-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .stat-bar { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Comms: the list of nets, the command room and scenes, and the feed. */
.comms { max-width: 1180px; }
.comms-top h1 { margin: 0 0 6px; font: 800 44px/0.95 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--paper-hi); }
.comms-top .lead { max-width: 78ch; color: var(--on-felt); }
.comms-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px; }
.comms-list { display: grid; gap: 6px; position: sticky; top: 76px; }
.comms-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-left: 3px solid transparent; background: rgba(223, 227, 216, 0.05); color: var(--on-felt); text-decoration: none; }
.comms-item b { font-weight: 600; }
.comms-item span { font-size: 13px; color: var(--on-felt-2); }
.comms-item:hover { background: rgba(223, 227, 216, 0.1); }
.comms-item.is-here { border-left-color: var(--star); background: rgba(255, 182, 39, 0.12); color: var(--paper-hi); }
.comms-item.is-scene { border-left-color: rgba(154, 41, 33, 0.7); }
.comms-item.is-scene.is-here { border-left-color: var(--wax); }
.feed .wt-feed { max-height: 520px; }
.feed.is-compact .wt-feed { max-height: 340px; }
.wt-line.is-radio b { color: #ffd780; }
.feed-more { margin: 8px 0 0 !important; }
.feed-more a { color: var(--paper-hi); }
/* The list in groups, who is on each feed, and how it all works. */
.comms-group { margin: 12px 0 0 !important; padding: 0 12px; font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-felt-2); }
.comms-group:first-child { margin-top: 0 !important; }
.feed-people b { font-weight: 600; color: var(--ink); }
.comms-guide, .comms-empty { margin-top: 22px; }
/* The guide: the first steps in a row, the three sides side by side, the questions. */
.guide-steps { margin: 18px 0 0; }
.guide-sides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 18px; }
.guide-side { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 12px; border-top: 4px solid currentColor; background: rgba(27, 32, 48, 0.03); }
.guide-side .banner svg { width: 34px; height: auto; display: block; }
.guide-side h3 { margin: 0; font: 800 20px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: currentColor; }
.guide-side .motto { margin: 3px 0 8px !important; font: italic 400 14px var(--serif); color: var(--ink-2); }
.guide-side p { margin: 0 0 6px; color: var(--ink); }
.guide-faq dt { margin: 16px 0 4px; font-weight: 700; }
.guide-faq dd { margin: 0; color: var(--ink-2); max-width: 72ch; }
@media (max-width: 900px) { .guide-sides { grid-template-columns: minmax(0, 1fr); } }
.comms-guide > p { max-width: 80ch; }
.guide-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; margin: 14px 0 0; }
.guide-list > div { border-top: 1.5px solid var(--rule); padding-top: 10px; }
.guide-list dt { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-weight: 700; }
.guide-mark { flex: none; min-width: 1.7em; font-weight: 400; }
.guide-list dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1200px) { .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .comms-grid { grid-template-columns: minmax(0, 1fr); }
  .comms-list { position: static; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); overflow-x: auto; padding-bottom: 4px; }
  .comms-list .comms-group { display: none; }
}
@media (max-width: 700px) { .guide-list { grid-template-columns: minmax(0, 1fr); } }

/* The overview's steps: what to do next, left to right. */
.steps { margin: 0 0 20px; }
.steps h2 { margin-bottom: 12px; }
/* Wrapped rather than in a grid, so a short last row stretches instead of leaving a hole. */
.steps-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.steps-row li { position: relative; flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 12px; border-top: 3px solid rgba(27, 32, 48, 0.2); background: rgba(27, 32, 48, 0.03); }
.steps-row li b { font-size: 15px; }
.steps-row li .small { flex: 1; }
.steps-row li a { font: 600 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.step-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(27, 32, 48, 0.4); font: 700 12px var(--mono); color: var(--ink-2); }
.steps-row li.is-done { border-top-color: #2f6b3f; opacity: 0.75; }
.steps-row li.is-done .step-mark { background: #2f6b3f; border-color: #2f6b3f; color: #fff; }
.steps-row li.is-next { border-top-color: var(--star); background: rgba(255, 182, 39, 0.12); }
.steps-row li.is-next .step-mark { background: var(--star); border-color: #b07a12; color: var(--ink); }
/* The Warden desk's list of renames, under the tiles. */
.desk-renames { margin-top: 18px; }
.desk-renames h3 { font-size: 17px; margin: 0 0 4px; }
/* The Warden desk's list of those willing to lead, a table per side. */
.desk-willing { margin-top: 18px; }
.desk-willing h3 { font-size: 17px; margin: 0 0 4px; }
.desk-side { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
.desk-side h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 15.5px; }
.desk-side .table-wrap { margin: 6px 0 0; }
.desk-note { margin: 8px 0 0; padding: 8px 12px; background: rgba(255, 182, 39, 0.14); border-left: 3px solid var(--star); font-size: 14.5px; }
.willing-table td { vertical-align: middle; }
.willing-table td:first-child .small { display: block; }
.willing-table form { margin: 0; }
.willing-table .btn { white-space: nowrap; }
@media (max-width: 640px) { .steps-row li { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; } .steps-row li .small { flex-basis: 100%; } }

/* The field: the War Table's chips on the way, running, and intercepted lines. */
.wt-chip small { margin-left: 4px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.wt-run { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.wt-line.is-intercept { opacity: 0.85; font-style: italic; }
.wt-line.is-intercept b { color: var(--wax); }
/* The War Table's regions as maps: each place's people stand in its area,
   under its name. Tap a name and where it can go lights up with the time. */
.wt-map { position: relative; container: wtmap / inline-size; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(27, 32, 48, 0.2); }
.wt-map .regionmap { display: block; }
.regionmap.is-table .r-place { font-size: 17px; }
.regionmap.is-table .r-rule { font-size: 15px; }
.regionmap.is-table .place, .regionmap.is-table .place:hover { cursor: default; fill: rgba(250, 246, 235, 0.06); stroke: #1b2030; stroke-width: 1.3; stroke-opacity: 0.75; }
.regionmap.is-table .place.has-mine { fill: rgba(255, 250, 232, 0.22); }
.regionmap.is-table .place.has-contact, .regionmap.is-table .place.has-contact:hover { fill: rgba(154, 41, 33, 0.14); stroke: var(--wax); stroke-width: 2.2; stroke-opacity: 1; }
.regionmap.is-table .place.is-choice { cursor: pointer; fill: rgba(255, 236, 186, 0.36); stroke: #9c6a0c; stroke-width: 2.4; stroke-opacity: 1; }
.regionmap.is-table .place.is-choice:hover, .regionmap.is-table .place.is-choice:focus-visible { fill: rgba(255, 228, 160, 0.56); stroke-width: 3; }
.regionmap.is-table .place.is-far, .regionmap.is-table .place.is-far:hover { cursor: not-allowed; fill: rgba(27, 32, 48, 0.34); }
.regionmap.is-table .place.is-here, .regionmap.is-table .place.is-here:hover { stroke: var(--ink); stroke-width: 2.4; stroke-dasharray: 7 6; stroke-opacity: 1; }
.regionmap.is-table .place.is-over, .regionmap.is-table .place.is-picked, .regionmap.is-table .place.is-picked:hover { fill: rgba(255, 206, 110, 0.62); stroke: var(--wax); stroke-width: 3.4; stroke-opacity: 1; }
.wt-stands { position: absolute; inset: 0; pointer-events: none; }
.wt-stand { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; transition: opacity 0.15s; }
.wt-stand-name { display: none; }
.wt-stand-people { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 4px; width: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.wt-stand .wt-chip { pointer-events: auto; min-height: 28px; padding: 2px 7px 2px 2px; font-size: 12.5px; }
.wt-stand .wt-chip img { width: 20px; height: 20px; }
.wt-stand.is-far { opacity: 0.45; }
.wt-take { margin: 0; padding: 4px 8px 3px; background: var(--ink); color: var(--paper-hi); font: 600 11px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.is-here > .wt-take { background: var(--paper-hi); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.is-picked > .wt-take { background: var(--wax); }
.wt-pool > .wt-take { flex-basis: 100%; align-self: flex-start; max-width: max-content; }
.wt-chip.is-picking-me { outline: 2px solid var(--wax); outline-offset: 2px; background: #fff1c9; }
.wt-onway { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; padding: 6px 8px; border: 1.5px dashed rgba(27, 32, 48, 0.28); }
.wt-onway .wt-place-name { flex-basis: auto; margin: 0 6px 0 0; }
.wt-zone.is-choice { cursor: pointer; border-style: solid; border-color: #9c6a0c; background: rgba(255, 236, 186, 0.34); }
.wt-zone.is-here { border-style: solid; border-color: var(--ink); }
.wt-zone.is-picked { border-color: var(--wax); background: rgba(255, 206, 110, 0.4); }
.wt-zone.is-far { opacity: 0.4; }
/* while a name is being moved: what to do next, at the foot of the screen */
.wt-pickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--paper-hi); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4); }
.wt-pickbar[hidden] { display: none; }
.wt-pickbar-text { margin: 0; font: 500 15px/1.35 var(--sans); }
.wt-pickbar-do { display: flex; flex-wrap: wrap; gap: 8px; }
.wt-pickbar .btn { min-height: 42px; padding: 11px 16px 10px; }
.wt.is-picking { padding-bottom: 96px; }
.wt.is-picking .wt-toast { bottom: 104px; }
/* A narrow map keeps its drawing, and its people stand in a row of three under it. */
@container wtmap (max-width: 560px) {
  .regionmap.is-table text { display: none; }
  .wt-stands { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 6px; background: var(--paper-hi); pointer-events: auto; }
  .wt-stand { position: static; width: auto; height: auto; min-height: 58px; align-items: stretch; gap: 4px; padding: 5px 4px 6px; border: 1.5px dashed rgba(27, 32, 48, 0.28); pointer-events: auto; }
  .wt-stand-name { display: block; margin: 0; font: 600 12px/1.25 var(--serif); letter-spacing: 0.02em; color: var(--ink-2); }
  .wt-stand-people { justify-content: flex-start; overflow: visible; }
  .wt-stand .wt-chip { padding-left: 6px; }
  .wt-stand .wt-chip img { display: none; }
  .wt-take { align-self: flex-start; }
  .wt-stand.has-contact { border-color: rgba(154, 41, 33, 0.55); background: rgba(154, 41, 33, 0.06); }
  .wt-stand.is-choice { cursor: pointer; border-style: solid; border-color: #9c6a0c; background: rgba(255, 236, 186, 0.34); }
  .wt-stand.is-here { border-style: solid; border-color: var(--ink); }
  .wt-stand.is-over, .wt-stand.is-picked { border-style: solid; border-color: var(--wax); background: rgba(255, 206, 110, 0.4); }
}
@media (max-width: 640px) {
  .wt-pickbar { justify-content: stretch; }
  .wt-pickbar-text { flex-basis: 100%; }
  .wt-pickbar-do { flex: 1; }
  .wt-pickbar-do .btn { flex: 1; padding-inline: 10px; }
}
.wt-chip.is-moving { opacity: 0.8; border-style: dashed; }
/* Resting: on the map, but nothing played for 12 hours. Only the side's own table shows it. */
.wt-chip.is-resting { opacity: 0.55; }
.wt-chip.is-resting img { filter: grayscale(1); }
.wt-dest small { display: block; font-size: 11px; opacity: 0.75; }