/*
  The Hall's windows, and the small things that go in them.

  A page on the Hall is made of gumps: a window with a bar on top, a frame cut from brass, and a
  body that holds one thing. Inside a gump the things are the ones an old game had: a party
  frame for a person, a menu with a pointer that steps down it, a line of dots between a name and
  its number, a tablet of the best, a month with its days, a bar of lit cells, a command shown as a
  key on a keyboard, and a screen that prints what the game prints. Everything is drawn in whole
  pixels or in the board's bitmap face, so nothing here is soft. The keys, fields and chips are the
  kit's (components.css); this file is the windows and what stands in them.

  Order: pointers, banner and its title, the gump and its bar, a log, fields, keys, dot lines, menus,
  party frames, tablets, lit cells, commands and screens, notes, where you are, dates and lists of
  events, narrow screens, preferences.
*/

:root {
  --gump-fill: linear-gradient(#1a1917f6, #12110ffa);
  --gump-hi: #f0d8a4;
  --gump-lo: #6f5a37;
  --bar-fill: linear-gradient(90deg, #3d311e, #231c12 55%, #17130e);
}

/* ------------------------------------------------------------------ pointers */

/* The pointers are pixel art, drawn at two screen pixels to a pixel. A browser scales a cursor to the
   screen (at 125 per cent, a pixel of art is two and a half), and the art comes out skewed, a pixel
   two wide beside one three wide. So each one is also a bitmap at whole numbers of device pixels to
   a pixel of art, and the screen is given the one that fits: 2 for a normal screen, 3 for 125 and 150
   per cent, 4 for 175 and 200, 6 for 300. The SVG stays for a browser that cannot choose. */
.hall { cursor: url("img/cursor.svg") 0 0, auto; }
.hall a, .hall button, .hall summary, .hall select, .hall label[for], .hall [role="button"],
.hall input[type="checkbox"], .hall input[type="radio"] { cursor: url("img/cursor-hand.svg") 11 1, pointer; }
@supports (cursor: -webkit-image-set(url("img/cursor-x2.png") 1x)) or (cursor: image-set(url("img/cursor-x2.png") 1x)) {
  .hall { cursor: -webkit-image-set(url("img/cursor-x2.png") 1x, url("img/cursor-x3.png") 1.25x, url("img/cursor-x3.png") 1.5x, url("img/cursor-x4.png") 1.75x, url("img/cursor-x4.png") 2x, url("img/cursor-x6.png") 3x) 0 0, auto; }
  .hall a, .hall button, .hall summary, .hall select, .hall label[for], .hall [role="button"],
  .hall input[type="checkbox"], .hall input[type="radio"] { cursor: -webkit-image-set(url("img/cursor-hand-x2.png") 1x, url("img/cursor-hand-x3.png") 1.25x, url("img/cursor-hand-x3.png") 1.5x, url("img/cursor-hand-x4.png") 1.75x, url("img/cursor-hand-x4.png") 2x, url("img/cursor-hand-x6.png") 3x) 11 1, pointer; }
}
.hall input[type="text"], .hall input[type="search"], .hall input[type="password"],
.hall input[type="email"], .hall textarea { cursor: text; }

/* ------------------------------------------------------------------ the banner */

/* Under the header: a picture made of pixels, the name of the place in block letters, and room
   for the few things that say where you are. The picture is a tile, so it fills any width. */
.banner {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 14.5rem;
  margin-top: -.75rem;
  padding: 5rem 0 1.4rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, #0d0d0d 0, #0d0d0d00 34%),
    linear-gradient(0deg, #000000c8 0, #00000000 62%),
    #0b0908;
  border-bottom: 2px solid var(--brass-mid);
  box-shadow: 0 4px 0 #000, 0 12px 18px #000a;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: 50% 100%;
  background-repeat: repeat-x;
  background-size: auto 216px;
}
.scene-colonnade::before { background-image: url("img/scene-colonnade.svg"); }
.scene-capsules::before { background-image: url("img/scene-capsules.svg"); }
.scene-stacks::before { background-image: url("img/scene-stacks.svg"); }
.scene-desk::before { background-image: url("img/scene-desk.svg"); }
.scene-dispatch::before { background-image: url("img/scene-dispatch.svg"); }
.scene-dyeworks::before { background-image: url("img/scene-dyeworks.svg"); }
.scene-scriptorium::before { background-image: url("img/scene-scriptorium.svg"); }
.scene-studio::before { background-image: url("img/scene-studio.svg"); }
/* A scene drawn in one piece (the gate, the forum's theatre) is not tiled. It is as wide as it was
   drawn, three screen pixels to a pixel, in the middle, and its two ends fade into the dark. */
.scene-wide::before {
  inset: 0 auto 0 50%;
  width: 1200px;
  margin-left: -600px;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.scene-agora::before { background-image: url("img/scene-agora.svg"); }
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 2px, #00000026 2px 4px);
}
.banner-embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.banner-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.banner-title { margin: 0; line-height: 1; }
/* The title is block letters, one square to a dot, in the bands of heat the name on the front
   page burns in, with a black edge under it. */
.title-art { display: block; width: auto; height: 48px; overflow: visible; filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 14px #ff741a55); }
.title-art .b0 { fill: var(--heat-5); }
.title-art .b1 { fill: var(--heat-4); }
.title-art .b2 { fill: var(--heat-3); }
.title-art .b3 { fill: var(--heat-2); }

/* Words in the board's face given the same bands of heat, for a title that is not a fixed word. */
.hx {
  display: inline-block;
  font: 400 32px/1 var(--pixel);
  letter-spacing: .02em;
  color: var(--heat-3);
  background: linear-gradient(180deg, transparent 0 .125em, var(--heat-5) .125em .3125em, var(--heat-4) .3125em .5em, var(--heat-3) .5em .6875em, var(--heat-2) .6875em .875em, transparent .875em);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #000);
  overflow-wrap: anywhere;
}

/* What the city is doing, in the corner of a banner: a small window of its own. */
.status {
  --s: 3px;
  display: grid;
  gap: .15rem;
  min-width: 14rem;
  padding: 1rem 1.2rem 1.05rem;
  font: 400 16px/1.35 var(--pixel);
  color: var(--ink);
  background: var(--gump-fill);
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--gump-hi), inset -2px -2px 0 2px var(--gump-lo), inset 0 0 0 6px #14120f;
}
.status-head { display: flex; align-items: center; gap: .6rem; color: var(--tube); text-transform: uppercase; letter-spacing: .08em; }
.status-line { display: flex; justify-content: space-between; gap: 1.2rem; color: var(--ink-dim); }
.status-line b { font-weight: 400; color: var(--heat-4); }

/* ------------------------------------------------------------------ sprites */

.spr { display: inline-block; flex: none; width: 32px; height: 32px; vertical-align: middle; image-rendering: pixelated; shape-rendering: crispEdges; }
.spr-1 { width: 16px; height: 16px; }
.spr-3 { width: 48px; height: 48px; }
.spr-4 { width: 64px; height: 64px; }

/* ------------------------------------------------------------------ the gump */

/* A frame cut from brass: a black line, a bevel lit from the top left, a dark inner rim. The
   corners are cut in steps. Everything is a ring of whole pixels, so it is the same at any size.
   The forum's panel is the same window. */
.gump, .panel {
  --s: 4px;
  position: relative;
  margin: 0 0 1.8rem;
  background: var(--gump-fill);
  clip-path: var(--step);
  box-shadow:
    inset 0 0 0 2px #000,
    inset 2px 2px 0 2px var(--gump-hi),
    inset -2px -2px 0 2px var(--gump-lo),
    inset 0 0 0 6px #14120f;
}
.gump-bar, h2.barhead, .barhead {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 2.5rem;
  margin: 6px 6px 0;
  padding: 0 .9rem;
  font: 400 16px/1 var(--pixel);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-hi);
  text-shadow: 2px 2px 0 #000;
  background:
    repeating-linear-gradient(180deg, #ffffff0a 0 2px, transparent 2px 4px),
    var(--bar-fill);
  box-shadow: inset 0 2px 0 #000, inset 0 -2px 0 var(--brass-deep);
}
.gump-bar h1, .gump-bar h2, .gump-bar h3, .bar-title { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit; }
.gump-bar .spr, .barhead .spr { margin-left: -.15rem; }
.bar-end { display: flex; align-items: center; gap: .8rem; margin-left: auto; color: var(--ink-dim); text-shadow: none; }
.bar-end b { font-weight: 400; color: var(--heat-4); }
.gump-body { padding: 1.1rem 1.3rem 1.3rem; }
.gump-body > :first-child { margin-top: 0; }
.gump-body > :last-child { margin-bottom: 0; }
.panel > :not(.barhead):not(h2) { padding-inline: 1.1rem; }
.panel.notice-line > :not(.barhead):not(h2) { padding-inline: 0; }
/* A window that matters most on its page wears a line of heat inside its frame. */
.gump-hot { box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-3), inset -2px -2px 0 2px var(--heat-1), inset 0 0 0 6px #1a110a, 0 0 24px #ff741a33; }
.gump-hot .gump-bar { color: var(--heat-4); box-shadow: inset 0 2px 0 #000, inset 0 -2px 0 var(--heat-1); }
.gump-foot { margin: 0; padding: .7rem 1.3rem 1rem; font: 400 16px/1.4 var(--pixel); border-top: 2px solid var(--brass-deep); }
.gump-foot a { display: inline-block; padding-block: .25rem; }
.gump-foot a::before { content: "> "; color: var(--brass-mid); }
.empty { margin: 0; padding: .3rem 0; font: 400 16px/1.5 var(--pixel); color: var(--ink-dim); }

/* ------------------------------------------------------------------ a log of lines */

/* A channel log: the month, a handle in angle brackets in its own colour, what was said. */
.log { margin: 0; padding: 0; list-style: none; }
.log li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; padding: .5rem .1rem; font: 400 16px/1.45 var(--pixel); border-top: 2px solid #1f1c18; }
.log li:first-child { border-top: 0; }
.log-when { flex: none; color: var(--heat-3); }
.log-who { font-weight: 400; }
.log-who::before { content: "<"; }
.log-who::after { content: ">"; }
.log-say { flex: 1 1 10rem; color: var(--ink); overflow-wrap: anywhere; }
.who-0 { color: #ffa93d; }
.who-1 { color: #ffd37e; }
.who-2 { color: #7fe3d6; }
.who-3 { color: #ff7a5c; }
.who-4 { color: #c9d86a; }
.who-5 { color: #8fb8ff; }
.who-6 { color: #e0a0ff; }
.who-7 { color: #f4f0e2; }
.who-anon { color: var(--ink-faint); }

/* ------------------------------------------------------------------ fields in a window */

.page-form .field { margin-bottom: 1.2rem; }
.page-form label { display: block; margin: 0 0 .4rem; }
.page-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select) {
  display: block;
  width: 100%;
  padding: .6rem .85rem;
  font: 400 15px/1.5 var(--read);
  color: var(--ink);
  background: linear-gradient(#000 0, #0c0b0a 6px) #0c0b0a;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
  caret-color: var(--heat-3);
}
.page-form textarea { min-height: 6rem; resize: vertical; }
.page-form :is(input, textarea, select):focus { box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--heat-3); }
.field-error { margin: .35rem 0 0; font: 400 16px/1.4 var(--pixel); color: var(--rust); }

/* ------------------------------------------------------------------ keys in a window */

/* A key in a window is the same raised plate as every other button (components.css). On the front
   page, under the seal, a key stays the bracketed word. */
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin: 1.1rem 0 0; }
.keys form { margin: 0; }
.gump .key, .panel .key, .key-small, .key-plain {
  --s: 2px;
  min-width: 0;
  min-height: 2.5rem;
  padding: .3rem 1.1rem .4rem;
  font: 400 16px/1.1 var(--pixel);
  letter-spacing: .06em;
  color: var(--brass-hi);
  text-shadow: 2px 2px 0 #000;
  background: linear-gradient(var(--plate-a) 0 50%, var(--plate-b) 50% 100%);
  border: 0;
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo);
  animation: none;
}
.gump .key::before, .gump .key::after, .panel .key::before, .panel .key::after,
.key-small::before, .key-small::after, .key-plain::before, .key-plain::after { content: none; }
.key-small { min-height: 2.1rem; padding: .2rem .8rem .3rem; }
.key-plain { padding-inline: .6rem; }
.gump .key:hover, .panel .key:hover, .key-small:hover, .key-plain:hover {
  color: var(--heat-ink);
  text-shadow: none;
  background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-5), inset -2px -2px 0 2px #b0561a;
}
.gump .key:active, .panel .key:active, .key-small:active, .key-plain:active {
  padding-top: calc(.3rem + 2px);
  padding-bottom: calc(.4rem - 2px);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #b0561a, inset -2px -2px 0 2px var(--heat-5);
}
.gump .key:focus-visible, .panel .key:focus-visible, .key-small:focus-visible, .key-plain:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--arc); }
.gump .key-hot, .key-small.key-hot {
  color: var(--heat-5);
  background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #ffb067, inset -2px -2px 0 2px #5e220a;
}
.gump .key-warn, .key-small.key-warn {
  color: #ffd9cf;
  background: linear-gradient(#7c3427 0 50%, #652a1f 50% 100%);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #d98b76, inset -2px -2px 0 2px #2c0f09;
}
.gump .key-hot:hover, .key-small.key-hot:hover, .gump .key-warn:hover, .key-small.key-warn:hover {
  color: var(--heat-ink);
  background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-5), inset -2px -2px 0 2px #b0561a;
}

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

/* Places as the tabs of a book: each a raised plate, the one you are on lit. The forum's own places and
   the wiki's kinds of page are two rows of them. */
.tabs { margin: 0 0 1.4rem; }
.tabs ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tabs li.tabs-gap { margin-left: auto; padding-left: 1rem; }
.tabs :is(a, button) {
  --s: 2px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .35rem .9rem .35rem .7rem;
  font: 400 16px/1 var(--pixel);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  color: var(--brass);
  text-shadow: 2px 2px 0 #000;
  background: linear-gradient(var(--plate-a) 0 50%, var(--plate-b) 50% 100%);
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo);
}
.tabs :is(a, button):hover, .tabs :is(a, button):focus-visible { color: var(--heat-ink); text-shadow: none; background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-5), inset -2px -2px 0 2px #b0561a; }
.tabs :is(a, button):focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--arc); }
.tabs :is(a, button)[aria-current] { color: var(--heat-5); text-shadow: 2px 2px 0 #000; background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #ffb067, inset -2px -2px 0 2px #5e220a; }
/* A number on a plate: how many are waiting. */
.count { display: inline-block; min-width: 1.4em; margin-left: .5em; padding: 0 .35em; font: 400 16px/1.2 var(--pixel); color: var(--heat-ink); text-align: center; text-shadow: none; background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%); }

/* ------------------------------------------------------------------ a name, dots, a number */

.dots { margin: 0; padding: 0; }
.dots > div { display: flex; align-items: baseline; gap: .6rem; padding: .22rem 0; font: 400 16px/1.4 var(--pixel); }
.dots dt { display: flex; flex: 1 1 auto; align-items: baseline; gap: .6rem; margin: 0; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .05em; }
.dots dt::after { content: ""; flex: 1 1 1rem; min-width: 1rem; margin-bottom: 4px; background: linear-gradient(90deg, var(--brass-lo) 2px, transparent 2px) 0 100% / 6px 2px repeat-x; height: 2px; align-self: flex-end; }
.dots dd { margin: 0; text-align: right; color: var(--ink); overflow-wrap: anywhere; }
.dots dd b { font-weight: 400; color: var(--heat-4); }

/* ------------------------------------------------------------------ a menu */

/* A list of places, as an old menu was: a name, a run of dots, a number, and a pointer that
   steps to the row you are on. */
.menu { margin: 0; padding: 0; list-style: none; }
.menu a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .5rem .8rem .5rem 2rem;
  font: 400 16px/1.35 var(--pixel);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-top: 2px solid #1f1c18;
}
.menu li:first-child a { border-top: 0; }
.menu a::before { content: "\25BA"; position: absolute; left: .7rem; top: .5rem; color: var(--heat-3); opacity: 0; }
.menu a::after { content: ""; order: 1; flex: 1 1 1rem; min-width: 1rem; height: 2px; align-self: flex-end; margin-bottom: 5px; background: linear-gradient(90deg, var(--brass-lo) 2px, transparent 2px) 0 100% / 6px 2px repeat-x; }
.menu .menu-n { order: 2; color: var(--heat-3); }
.menu a:hover, .menu a:focus-visible, .menu a[aria-current] { color: var(--heat-4); background: #2a1c0e; }
.menu a:hover::before, .menu a:focus-visible::before, .menu a[aria-current]::before { opacity: 1; }
.menu .spr { align-self: center; margin-left: -.2rem; }

/* ------------------------------------------------------------------ a person */

/* A party frame: the member's mark in a slot of its own, the name over what they last said,
   and a few lit cells for how long they have been still. */
.party { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 .8rem;
  align-items: center;
  padding: .55rem .75rem .55rem .55rem;
  background: #16130f;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #3b3326, inset -2px -2px 0 2px #0a0907;
}
.member:hover { background: #1c1812; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #5a4b32, inset -2px -2px 0 2px #0a0907; }
.member-mark { display: grid; place-items: center; width: 80px; height: 80px; background: #080707; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi); }
.member-mark .sigil { width: 60px; height: 60px; }
.member-main { display: grid; min-width: 0; }
.member-name { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; font: 400 16px/1.3 var(--pixel); letter-spacing: .03em; }
.member-name a { color: var(--brass-hi); text-decoration: none; overflow-wrap: anywhere; }
.member-name a:hover { color: var(--heat-4); text-decoration: underline; }
.member-say { font: 400 16px/1.4 var(--pixel); color: var(--ink-dim); overflow-wrap: anywhere; }
.member-side { display: grid; justify-items: end; gap: .15rem; font: 400 14px/1.2 var(--pixel); color: var(--ink-faint); }
.tag .spr { width: 16px; height: 16px; }
.more-line { margin: .7rem 0 0; font: 400 16px/1.4 var(--pixel); color: var(--ink-dim); }

/* ------------------------------------------------------------------ a tablet of the best */

.tablet { margin: 0; padding: 0; list-style: none; counter-reset: place; }
.tablet li { display: flex; align-items: center; gap: .7rem; padding: .45rem .2rem; font: 400 16px/1.3 var(--pixel); border-top: 2px solid #1f1c18; }
.tablet li:first-child { border-top: 0; }
.place { flex: none; min-width: 2.2rem; text-align: center; font: 400 32px/1 var(--pixel); color: var(--ink-faint); text-shadow: 2px 2px 0 #000; }
.tablet li:nth-child(1) .place { color: #f2c969; text-shadow: 2px 2px 0 #000, 0 0 10px #f2c96966; }
.tablet li:nth-child(2) .place { color: #cfd7d4; }
.tablet li:nth-child(3) .place { color: #d18a5c; }
.tablet .who { display: flex; flex: 1 1 auto; align-items: center; gap: .6rem; min-width: 0; }
.tablet .who a { color: var(--brass-hi); text-decoration: none; overflow-wrap: anywhere; }
.tablet .who a:hover { color: var(--heat-4); text-decoration: underline; }
.tablet .sigil { width: 40px; height: 40px; }
.score { display: inline-flex; align-items: center; gap: .35rem; color: var(--heat-4); }
.score .spr { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ lit cells */

/* A bar of cells, some lit. It is a picture of a number, and the number is always beside it. */
.cells { display: inline-block; width: auto; height: 12px; vertical-align: middle; shape-rendering: crispEdges; }
.cells .on { fill: var(--heat-3); }
.cells .off { fill: #2a241b; }
.cells.cool .on { fill: var(--arc); }

/* ------------------------------------------------------------------ a command, and a screen */

/* A command is a key on a keyboard: a lit top and a dark side standing off the plate. */
kbd, .cap {
  display: inline-block;
  margin: 0 .1rem .2rem;
  padding: .02rem .55rem .1rem;
  font: 400 16px/1.35 var(--pixel);
  color: #f6ecd0;
  text-shadow: 2px 2px 0 #000;
  background: linear-gradient(#6b5f45 0, #6b5f45 calc(100% - 4px), #2e2619 calc(100% - 4px));
  box-shadow: 0 0 0 2px #000, inset 0 2px 0 #a89a74;
  vertical-align: .05em;
}

.in-play { margin: 0 0 1.1rem; font: 400 16px/1.9 var(--pixel); color: var(--ink-dim); }

/* A screen prints what the game prints: warm white in the board's face, scanlines, a cut-corner
   glass sunk into its frame, and a cursor waiting at the end. */
.screen {
  --s: 6px;
  position: relative;
  max-width: 50rem;
  padding: 1.1rem 1.3rem 1.2rem;
  font: 400 16px/1.6 var(--pixel);
  color: #f3e9cc;
  text-shadow: 0 0 6px #ffb04a3a;
  background: radial-gradient(ellipse at 50% 30%, #1a160d 0, #0c0a06 60%, #060504 100%);
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 3px 3px 0 2px #000, inset -2px -2px 0 2px var(--well-hi), inset 0 0 40px #000d;
  overflow-wrap: break-word;
}
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 2px, #0000002b 2px 4px); }
.screen > :last-child::after { content: "\2588"; margin-left: .35em; color: var(--heat-3); text-shadow: none; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
html[data-fx="calm"] .screen > :last-child::after { animation: none; }
.screen p { margin: 0 0 1em; }
.screen p:last-child { margin-bottom: 0; }
.screen h2 { margin: 1.6em 0 .6em; font: 400 16px/1.4 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--heat-4); scroll-margin-top: 1rem; }
.screen h2::before { content: "== "; color: var(--brass-mid); }
.screen h2::after { content: " =="; color: var(--brass-mid); }
.screen h2:first-child { margin-top: 0; }
.screen a { color: var(--brass-hi); }
.screen a:hover { color: var(--heat-4); }

/* ------------------------------------------------------------------ a note */

.notes { margin: 0 0 1.6rem; }
.note { display: flex; align-items: flex-start; gap: .6rem; margin: .5rem 0; padding: .6rem .85rem; font: 400 16px/1.45 var(--pixel); color: var(--ink); background: #0f1d1b; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--arc-dim), inset -2px -2px 0 2px #0a1513; }
.note .spr { margin-top: .1rem; }
.note-bad { color: var(--rust); background: var(--rust-bg); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #b8705c, inset -2px -2px 0 2px #4a1f15; }
.note-good { color: var(--ink); }

/* ------------------------------------------------------------------ targets */

/* A link that stands on a line of its own has a target of 24 pixels or more to hit. */
.member-name a, .tablet .who a, .acct-name a, .pixel-link, .crumbs a, .log .log-say, .gump-bar a { display: inline-block; padding-block: .25rem; }

/* ------------------------------------------------------------------ where you are */

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 1.2rem; padding: 0; list-style: none; font: 400 16px/1.5 var(--pixel); letter-spacing: .05em; text-transform: uppercase; }
.crumbs li + li::before { content: ">"; margin: 0 .6em; color: var(--brass-mid); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--heat-4); }
.crumbs [aria-current] { color: var(--ink-dim); overflow-wrap: anywhere; }

/* An event in a list: the day on a tear-off leaf, its name, and when it is in both clocks. The month
   is the red band and the day is the number under it. */
.leaf { position: relative; display: flex; flex-direction: column-reverse; flex: none; width: 3.75rem; text-align: center; background: #0d0b08; }
.leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #6b5a3a, inset -2px -2px 0 2px #1a140b; }
.leaf b { padding: .3rem 0 .35rem; font: 400 32px/1 var(--pixel); color: var(--heat-4); text-shadow: 2px 2px 0 #000; }
.leaf span { padding: .22rem 0 .18rem; font: 400 16px/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--heat-5); text-shadow: 2px 2px 0 #000; background: linear-gradient(#b9301a 0 50%, #9b2815 50% 100%); }
.row-main { display: grid; gap: .1rem; min-width: 0; }
.row-title { font: 400 16px/1.6 var(--pixel); letter-spacing: .02em; color: var(--brass-hi); text-decoration: none; overflow-wrap: anywhere; }
.row-title:hover { color: var(--heat-4); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.agenda { margin: 0; padding: 0; list-style: none; }
.agenda li { display: flex; align-items: center; gap: 1.1rem; padding: .8rem .1rem; border-top: 2px solid #1f1c18; }
.agenda li:first-child { border-top: 0; }
.agenda .when { font: 400 14px/1.4 var(--read); color: var(--ink-dim); }
.agenda .when b { font-weight: 400; font-family: var(--pixel); font-size: 16px; color: var(--heat-4); }
.countdown { font: 400 16px/1.3 var(--pixel); color: var(--tube); letter-spacing: .05em; text-transform: uppercase; }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 860px) {
  .banner { min-height: 12rem; padding-top: 3rem; }
  .title-art { height: 40px; }
  .gump-body { padding: 1rem 1rem 1.1rem; }
}
@media (max-width: 560px) {
  .title-art { height: 32px; }
  .status { min-width: 0; width: 100%; }
  .member { grid-template-columns: auto minmax(0, 1fr); }
  .member-side { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; gap: .8rem; }
}

/* ------------------------------------------------------------------ preferences */

@media (prefers-contrast: more) {
  .gump, .panel { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 6px var(--brass); }
  .banner::before { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-embers { display: none; }
  .screen > :last-child::after { animation: none; }
}

/* ------------------------------------------------------------------ the plain face */

/* The pixel face is for what names a thing: the plates, the bar of a window, a key, a chip. A page that
   people work in reads in bulk (tables, forms, long lines), and for that the pixel face tires the eye.
   `body.plain` gives everything else the reading face, and what is a code or a count a monospace.
   A page opts in with the class, and nothing else about it changes. */
body.plain {
  --pixel-name: "Px437 IBM VGA 8x16", ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --code: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --pixel: var(--read);
}
.plain :is(.slab, .gump-bar, .key, .key-small, .chip, .prefix, .badge, .tag, .banner, kbd, .cap, .tabs) {
  --pixel: var(--pixel-name);
}
.plain .dots dt { font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.plain .dots dd { font-size: 15px; }
.plain .note { font-size: 15px; line-height: 1.55; }
.plain .empty { font-size: 15px; }