/*
  Agora: a community register inside a buried industrial cathedral.
  Basalt, aged brass, turquoise light. Reading panels stay opaque charcoal: art frames the page,
  it never sits behind a post. Everything here is plain CSS served from our own host.
*/

@font-face { font-family: Cinzel; src: url("fonts/Cinzel-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Cinzel; src: url("fonts/Cinzel-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Lora is wider and taller in the x-height than the face it replaced, so size-adjust brings its
   size back to the old titles. One file per script, loaded only when a page has those letters. */
@font-face { font-family: Lora; src: url("fonts/Lora-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; size-adjust: 94%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lora; src: url("fonts/Lora-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; size-adjust: 94%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Lora; src: url("fonts/Lora-cyrillic.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; size-adjust: 94%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Lora; src: url("fonts/Lora-cyrillic-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; size-adjust: 94%; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Lora; src: url("fonts/Lora-vietnamese.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; size-adjust: 94%; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Lora; src: url("fonts/Lora-Italic-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; size-adjust: 94%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lora; src: url("fonts/Lora-Italic-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; size-adjust: 94%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Lora; src: url("fonts/Lora-Italic-cyrillic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; size-adjust: 94%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Lora; src: url("fonts/Lora-Italic-cyrillic-ext.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; size-adjust: 94%; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Lora; src: url("fonts/Lora-Italic-vietnamese.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; size-adjust: 94%; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Spectral; src: url("fonts/Spectral-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Spectral; src: url("fonts/Spectral-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Spectral; src: url("fonts/Spectral-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* basalt, darkest to lightest */
  --basalt-0: #0b0e0d;
  --basalt-1: #111513;
  --basalt-2: #171c19;
  --basalt-3: #1d231f;
  --basalt-4: #262d27;
  --basalt-5: #323a33;
  --paper: #242823;

  /* text */
  --ink: #e8e0ce;
  --ink-dim: #c6bca5;
  --ink-faint: #a69d88;

  /* brass */
  --brass-hi: #f0d8a4;
  --brass: #d5b174;
  --brass-mid: #a98650;
  --brass-lo: #6f5a37;
  --brass-deep: #3d311e;

  /* light */
  --arc: #97d9d1;
  --arc-dim: #4a8f88;
  --ember: #f0a24a;
  --ember-hi: #ffd68f;
  --ember-deep: #8a4a14;
  --rust: #ffb39c;
  --rust-bg: #3a2a22;
  --ok: #a6dbae;

  --display: Cinzel, "Trajan Pro", Georgia, serif;
  --head: Lora, Georgia, serif;
  --body: Spectral, Georgia, serif;
  --ui: Verdana, "DejaVu Sans", Tahoma, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --col-a: 5.5rem;
  --col-b: 5.5rem;
  --col-last: 17rem;
  --rule: #0b0e0c;
  --lift: inset 0 1px 0 #ffffff12, 0 6px 12px #0008;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; scrollbar-color: #9a7b4d #121614; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--basalt-0);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  caret-color: var(--arc);
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #0b0e0d11 35%, #0b0e0d 100%),
    url("img/wallpaper.webp") center top / cover no-repeat;
}
::selection { background: var(--brass); color: #171a17; }
img, svg { max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--brass-hi); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--arc); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: .75rem; top: -6rem; z-index: 50; padding: .8rem 1rem; background: var(--brass); color: #171a17; font: 700 .875rem var(--ui); }
.skip:focus { top: .75rem; }
.muted { color: var(--ink-faint); }
.meta { font: .8125rem/1.45 var(--ui); color: var(--ink-faint); }
.meta a { color: var(--ink-dim); }
.linkline { margin-top: .6rem; font: .8125rem/1.5 var(--ui); }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.icon.flip { transform: scaleX(-1); }

/* ------------------------------------------------------------------ the frame */

.stage { padding: clamp(.4rem, 2vw, 1.75rem) clamp(.3rem, 3vw, 3rem) 3rem; overflow-x: clip; }
.nave {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--basalt-2);
  box-shadow:
    0 0 0 1px #050706,
    0 0 0 4px var(--brass-deep),
    0 0 0 5px var(--brass-mid),
    0 0 0 8px #0c0f0e,
    0 0 0 9px var(--brass-lo),
    0 34px 90px #000d;
}
/* Brass corner plates, riveted. They sit on the frame, outside the reading area. */
.nave::before,
.nave::after {
  content: "";
  position: absolute;
  left: -15px;
  right: -15px;
  height: 30px;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(circle at 7px 7px, #f0d8a4 0 1.6px, #6f5a37 2.4px, transparent 3.2px) left top / 30px 30px no-repeat,
    radial-gradient(circle at 23px 7px, #f0d8a4 0 1.6px, #6f5a37 2.4px, transparent 3.2px) left top / 30px 30px no-repeat,
    radial-gradient(circle at 7px 7px, #f0d8a4 0 1.6px, #6f5a37 2.4px, transparent 3.2px) right top / 30px 30px no-repeat,
    radial-gradient(circle at 23px 7px, #f0d8a4 0 1.6px, #6f5a37 2.4px, transparent 3.2px) right top / 30px 30px no-repeat,
    linear-gradient(135deg, #d5b174, #6f5a37 70%) left top / 30px 14px no-repeat,
    linear-gradient(225deg, #d5b174, #6f5a37 70%) right top / 30px 14px no-repeat;
}
.nave::before { top: -15px; }
.nave::after { bottom: -15px; transform: scaleY(-1); }

/* ------------------------------------------------------------------ masthead */

.masthead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 17rem;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, #121614d4, #0b0e0ddc),
    url("img/basalt.webp");
}
/* A brass rail along the foot of the masthead: two fine lines with a gap between. */
.masthead::after, .colophon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-block: 1px solid var(--brass-mid);
  pointer-events: none;
}
.masthead::after { bottom: 0; z-index: 2; }
/* The engraving is seen through a pointed arch, lit from above. */
.mast-window { position: absolute; z-index: -1; right: 1.6rem; top: 1.1rem; bottom: 0; width: min(47%, 36rem); }
.mast-window-art, .mast-window-glow, .mast-window-frame { position: absolute; inset: 0; }
.mast-window-art {
  background: #0b0e0d url("img/masthead.webp") 60% 35% / cover no-repeat;
  -webkit-mask: url("img/arch-mask.svg") center bottom / 100% 100% no-repeat;
  mask: url("img/arch-mask.svg") center bottom / 100% 100% no-repeat;
}
.mast-window-glow {
  background:
    linear-gradient(100deg, transparent 30%, #ecd29c1a 40%, transparent 50%),
    linear-gradient(100deg, transparent 52%, #ecd29c12 60%, transparent 70%),
    linear-gradient(180deg, transparent 55%, #0b0e0dcc 100%);
  -webkit-mask: url("img/arch-mask.svg") center bottom / 100% 100% no-repeat;
  mask: url("img/arch-mask.svg") center bottom / 100% 100% no-repeat;
}
.mast-window-frame { background: url("img/arch-frame.svg") center bottom / 100% 100% no-repeat; filter: drop-shadow(0 4px 6px #000c); }
.mast-plate { position: relative; align-self: center; padding: 2.5rem 2.6rem 2.3rem; max-width: 50%; }
.wordmark { display: block; width: fit-content; max-width: 100%; text-decoration: none; }
.wordmark-name {
  display: block;
  font: 400 clamp(2rem, 4.2vw, 3.9rem)/1 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-hi);
  text-shadow: 0 1px 0 #fff4cf66, 0 3px 0 #5b4522, 0 6px 14px #000c;
}
/* Under the name, one band as wide as the name: a seal at each end, a fine rule, and FORUMS between. */
.wordmark-band { display: flex; align-items: center; gap: .85rem; margin-top: .9rem; color: var(--brass-mid); }
.seal { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }
.band-rule { flex: 1; min-width: .5rem; height: 1px; background: linear-gradient(90deg, var(--brass-lo), var(--brass-mid)); }
.band-rule-end { background: linear-gradient(270deg, var(--brass-lo), var(--brass-mid)); }
.band-word {
  padding-left: .5em;
  font: 400 1.05rem/1 var(--display);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--brass);
  text-shadow: 0 1px 0 #fff4cf33, 0 2px 0 #5b4522aa, 0 4px 8px #000c;
}
@keyframes circuit-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

.nav-account { display: flex; align-items: center; gap: .8rem; margin-left: auto; padding: .2rem 0 .2rem 1rem; }
.nav-account-text { flex: 1 1 auto; min-width: 0; }
.account-name { font: .875rem/1.3 var(--ui); color: var(--ink-dim); }
.account-name a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--brass-hi); font-weight: 700; text-decoration: none; }
.account-name a:hover { text-decoration: underline; }
.account-meta { font: .75rem/1.35 var(--ui); color: var(--ink-faint); }
.account-links { display: flex; flex-wrap: wrap; gap: 0 .9rem; margin-top: .1rem; font: .75rem/1.5 var(--ui); }
.account-links a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--ink-dim); }
/* The narrow-screen rule for the navigation keys pads every link in the bar. These are not keys. */
.nav-account .account-name a, .nav-account .account-links a { padding-inline: 0; }
/* A signed-in member: the seal, the name, the sign-out button, and the links in a row of their own. */
.nav-account-member { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "seal text out" "seal links out"; align-items: center; gap: 0 .8rem; }
.nav-account-member > .sigil { grid-area: seal; }
.nav-account-member .nav-account-text { grid-area: text; align-self: end; }
.nav-account-member .account-links { grid-area: links; align-self: start; margin-top: 0; }
.nav-account-member .account-out { grid-area: out; }
.account-guest { font: .8125rem/1.3 var(--ui); color: var(--ink-faint); }
.account-out { margin: 0; }
.account-out .btn { white-space: nowrap; }

/* ------------------------------------------------------------------ navigation */

.mainnav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .6rem .8rem .7rem;
  background: linear-gradient(#0f1311, #171c19);
  border-bottom: 1px solid var(--brass-lo);
  box-shadow: inset 0 3px 8px #000a;
}
.mainnav ul { display: flex; flex-wrap: wrap; flex: 1 1 auto; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.mainnav li { display: flex; }
.mainnav ul a {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.85rem;
  padding: .45rem .95rem;
  font: 700 .8125rem/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
  background: linear-gradient(#3b4032, #232a22);
  border: 1px solid var(--brass-lo);
  border-bottom-color: #080a09;
  border-radius: 2px;
  box-shadow: inset 0 1px #f0d8a42b, inset 0 -2px #0007, 0 2px 4px #0007;
  transition: background-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out;
}
.mainnav ul a:hover { color: var(--brass-hi); background: linear-gradient(#444a39, #2a3228); box-shadow: inset 0 1px #f0d8a440, inset 0 -3px var(--arc), 0 2px 4px #0007; }
.mainnav ul a[aria-current] {
  color: #171a17;
  background: linear-gradient(#ecd29c, #b8935a);
  border-color: #f0d8a4;
  border-bottom-color: #6d5430;
  box-shadow: inset 0 1px #fff8, 0 2px 4px #0007;
}
.mainnav .count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; font: 700 .75rem/1 var(--ui); color: #171a17; background: var(--ember); border-radius: 1rem; }
.circuit-line {
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--arc-dim) 20%, var(--arc-dim) 80%, transparent);
  opacity: .55;
  animation: circuit-draw 1100ms cubic-bezier(.16, 1, .3, 1) 200ms both;
}

.crumbbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  padding: .5rem 1.25rem;
  background: var(--basalt-1);
  border-bottom: 1px solid #2a2f29;
  font: .8125rem/1.4 var(--ui);
}
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: ""; width: .4rem; height: .4rem; margin: 0 .7rem 0 .5rem; border: solid var(--brass-mid); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.crumbs a { padding: .35rem 0; }
.crumbs [aria-current] { color: var(--ink); }
.quicksearch { display: flex; gap: .35rem; }
.quicksearch input {
  width: min(15rem, 52vw);
  padding: .4rem .7rem;
  font: .8125rem/1.3 var(--ui);
  color: var(--ink);
  background: #0e1210;
  border: 1px solid #5d4d31;
  border-radius: 2px;
  box-shadow: inset 0 2px 5px #000a;
}
.quicksearch input::placeholder { color: var(--ink-faint); opacity: 1; }

main {
  position: relative;
  padding: 1.6rem 2.1rem 2.6rem;
  background:
    linear-gradient(90deg, #0b0e0d88, transparent 4%, transparent 96%, #0b0e0d88),
    linear-gradient(#1a1f1cd2, #171c19d8),
    url("img/basalt.webp");
  min-height: 24rem;
}
/* Fluted piers down both sides of the reading area. */
main::before, main::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: .7rem;
  background: url("img/pier.svg") center top / 8px 48px repeat-y;
  border-inline: 1px solid var(--brass-lo);
  opacity: .85;
  pointer-events: none;
}
main::before { left: 0; }
main::after { right: 0; }
.pagehead::after { content: ""; flex: 1 0 100%; height: 12px; margin-top: .2rem; background: url("img/rule.svg") left center / min(26rem, 100%) 12px no-repeat; }
.notices {
  margin: 0 0 1.4rem;
  background: linear-gradient(180deg, #2c2b1f, #1f2119);
  border: 1px solid var(--brass-mid);
  box-shadow: 0 0 0 3px #0c0f0e, 0 0 0 4px var(--brass-lo), inset 0 1px #f0d8a42b;
}
.notices ul { margin: 0; padding: 0; list-style: none; }
.notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .15rem .9rem; padding: .55rem 1rem; }
.notice + .notice { border-top: 1px solid #3b3626; }
.notice-mark { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--ember-hi); background: #1a1810; border: 1px solid var(--brass-mid); box-shadow: inset 0 2px 4px #000b; }
.notice-mark .icon { width: 1.05rem; height: 1.05rem; }
.notice-title { overflow: hidden; font: 400 1.2rem/1.3 var(--head); color: var(--brass-hi); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.notice-title:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.notice-meta { font: .75rem/1.3 var(--ui); color: var(--ink-faint); white-space: nowrap; }
.notice-meta a { color: var(--ink-dim); }

/* ------------------------------------------------------------------ buttons and forms */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .55rem 1.1rem;
  font: 700 .8125rem/1.2 var(--ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brass-hi);
  cursor: pointer;
  background: linear-gradient(#3b4032, #232a22);
  border: 1px solid var(--brass-lo);
  border-bottom-color: #080a09;
  border-radius: 2px;
  box-shadow: inset 0 1px #f0d8a42b, 0 2px 5px #0007;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out, color 120ms ease-out;
}
.btn:hover { color: #fff3d0; background: linear-gradient(#484f3b, #2b3329); border-color: var(--brass-mid); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px #000a; }
.btn-primary { color: #171a17; background: linear-gradient(#ecd29c, #b8935a); border-color: #f0d8a4; border-bottom-color: #6d5430; box-shadow: inset 0 1px #fff8, 0 3px 8px #0007; }
.btn-primary:hover { color: #171a17; background: linear-gradient(#f7e2b0, #c8a468); }
.btn-quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--brass); }
.btn-quiet:hover { background: #ffffff0a; border-color: var(--brass-lo); }
.btn-danger { color: var(--rust); background: linear-gradient(#4a2d25, #2f1d18); border-color: #8b4a3a; }
.btn-danger:hover { color: #fff; background: linear-gradient(#5b362c, #3a231d); }
.btn-small { min-height: 2.25rem; padding: .35rem .8rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.linkish { padding: 0; font: inherit; color: var(--brass); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; }

label { display: block; margin-bottom: .4rem; font: 700 .8125rem/1.3 var(--ui); letter-spacing: .03em; color: var(--ink-dim); }
.input, select.input, textarea.input {
  display: block;
  width: 100%;
  padding: .7rem .85rem;
  font: 1rem/1.5 var(--ui);
  color: var(--ink);
  background: #0f1311;
  border: 1px solid #6d5a3a;
  border-radius: 2px;
  box-shadow: inset 0 2px 7px #000a;
}
.input:focus { border-color: var(--arc); outline: 2px solid var(--arc); outline-offset: 1px; }
.field { margin-bottom: 1.1rem; }
.field-pair, .poll-edit-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1.2rem; }
.input.input-fit, select.input.input-fit { width: auto; min-width: 14rem; max-width: 100%; }
.btn-block { display: flex; width: 100%; }
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inline-field { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.inline-field label { margin: 0; }
.form-errors { margin-bottom: 1rem; padding: .8rem 1rem; color: var(--rust); background: var(--rust-bg); border: 1px solid #8b4a3a; font: .9375rem/1.5 var(--ui); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

/* ------------------------------------------------------------------ chips, lamps, badges */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .5rem;
  font: 700 .75rem/1.35 var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: #12160f;
  border: 1px solid #4a4a3a;
  border-radius: 2px;
  vertical-align: .15em;
}
.chip-new { color: #1a1206; background: var(--ember); border-color: var(--ember-hi); }
.chip-pin, .chip-announce { color: var(--brass-hi); background: #3a301c; border-color: var(--brass-mid); }
.chip-wait { color: var(--ember-hi); background: #3a2a14; border-color: #8a5a22; }
/* A prefix before a thread's title: Question, Solved. The look is the administrator's choice. */
.prefix { display: inline-block; margin-right: .35rem; padding: .1rem .5rem; font: 700 .75rem/1.35 var(--ui); letter-spacing: .08em; text-transform: uppercase; vertical-align: .15em; border: 1px solid; }
.prefix-plain { color: var(--ink-dim); background: #12160f; border-color: #4a4a3a; }
.prefix-brass { color: var(--brass-hi); background: #3a301c; border-color: var(--brass-mid); }
.prefix-arc { color: #b8ece0; background: #1c3a35; border-color: var(--arc-dim); }
.prefix-ember { color: var(--ember-hi); background: #3a2a14; border-color: #8a5a22; }
.prefix-rust { color: var(--rust); background: var(--rust-bg); border-color: #8b4a3a; }
.lamp {
  position: relative;
  display: inline-block;
  width: .85rem;
  height: .85rem;
  flex: none;
  vertical-align: middle;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5b625a, #1b1f1b 72%);
  box-shadow: inset 0 1px 1px #fff3, 0 0 0 1px #0a0c0b, 0 0 0 2px var(--brass-lo);
}
.lamp-on {
  background: radial-gradient(circle at 35% 30%, #fff3d0, var(--ember) 48%, var(--ember-deep));
  box-shadow: inset 0 1px 1px #fff9, 0 0 0 1px #2a1808, 0 0 0 2px var(--brass-mid);
}
.lamp-on::after { content: ""; position: absolute; inset: -.8rem; border-radius: 50%; background: radial-gradient(circle, #f0a24a55, transparent 62%); pointer-events: none; }
.badge { display: inline-block; padding: .1rem .55rem; font: 700 .75rem/1.5 var(--ui); letter-spacing: .1em; text-transform: uppercase; border: 1px solid; }
.badge-administrators { color: #ffe2a8; background: #4a3516; border-color: var(--ember); }
.badge-moderators { color: #b8ece0; background: #1c3a35; border-color: var(--arc-dim); }
.badge-mentors { color: #c9d8f4; background: #212c44; border-color: #5f78ad; }

/* ------------------------------------------------------------------ seals as avatars */

.sigil { display: inline-block; flex: none; line-height: 0; filter: drop-shadow(0 2px 2px #000a); }
.sigil svg { display: block; width: 100%; height: 100%; }
/* A profile picture shows in the same place and size as a seal, in a plain brass frame. */
.sigil.has-picture img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid #b9964f; border-radius: 6px; background: #181d18; }
.sigil-xs { width: 1.65rem; height: 1.65rem; }
.sigil-sm { width: 2.5rem; height: 2.5rem; }
.sigil-md { width: 3.1rem; height: 3.1rem; }
.sigil-lg { width: 5.6rem; height: 5.6rem; }
.sg-fill { fill: var(--sg-bg, #181d18); stroke: var(--sg); stroke-width: 2.8; stroke-linejoin: round; }
.sg-ring { fill: none; stroke: var(--sg-dim); stroke-width: 1.1; stroke-linejoin: round; }
.sg-bars path { fill: none; stroke: var(--sg); stroke-width: 4.6; }
.metal-brass { --sg: #d5b174; --sg-dim: #7d6439; }
.metal-copper { --sg: #d18a5c; --sg-dim: #81492b; }
.metal-verdigris { --sg: #84c7b0; --sg-dim: #3f7767; }
.metal-silver { --sg: #cfd7d4; --sg-dim: #707a79; }
.metal-iron { --sg: #98a9bd; --sg-dim: #4d5c70; }
.metal-bronze { --sg: #bf9a62; --sg-dim: #6a5230; }
.metal-gold { --sg: #f2c969; --sg-dim: #8d6d1f; }

/* ------------------------------------------------------------------ page headings */

.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.4rem; }
h1 { font: 400 clamp(1.9rem, 4vw, 2.6rem)/1.15 var(--head); color: var(--ink); text-wrap: balance; }
.lede { margin-top: .35rem; font: italic 400 1.15rem/1.4 var(--head); color: var(--ink-dim); }
h2.barhead, .barhead {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .6rem 1rem;
  font: 400 1rem/1.2 var(--display);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass-hi);
  background: linear-gradient(#383d30, #232920);
  border: 1px solid var(--brass-mid);
  border-bottom-color: var(--brass-lo);
  box-shadow: inset 0 1px #f0d8a425;
}
.panel { margin-bottom: 1.4rem; background: var(--paper); border: 1px solid var(--brass-lo); box-shadow: var(--lift); }
.panel > :not(.barhead):not(h2) { padding-inline: 1.1rem; }
.panel.empty p, .notice-line { padding: 1.1rem; color: var(--ink-dim); }
.notice-line { display: flex; align-items: center; gap: .6rem; font: .9375rem/1.4 var(--ui); }
/* A notice line is a panel whose own padding already frames its icon, link and words. */
.panel.notice-line > :not(.barhead):not(h2) { padding-inline: 0; }
.flashes { margin-bottom: 1.2rem; }
.flash { padding: .75rem 1rem; margin-bottom: .5rem; font: .9375rem/1.45 var(--ui); color: var(--ink); background: #1f2e29; border: 1px solid var(--arc-dim); }
.flash-error { background: var(--rust-bg); border-color: #8b4a3a; color: var(--rust); }

/* ------------------------------------------------------------------ the board: categories and rows */

.cat, .cat-static, .tlist { margin-bottom: 1.6rem; }
.catbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 3rem;
  padding: .5rem 1rem;
  list-style: none;
  cursor: pointer;
  background: linear-gradient(#3c4132, #232920);
  border: 1px solid var(--brass-mid);
  border-bottom-color: var(--brass-lo);
  box-shadow: inset 0 1px #f0d8a42b, 0 3px 8px #0006;
}
summary.catbar::-webkit-details-marker { display: none; }
.catbar h2 { flex: none; margin: 0; font: 400 1.05rem/1.2 var(--display); letter-spacing: .15em; text-transform: uppercase; color: var(--brass-hi); text-shadow: 0 1px 0 #0009; }
.catbar-note { flex: 1; min-width: 0; font: .9375rem/1.3 var(--ui); letter-spacing: .03em; color: var(--ink-dim); }
.emblem-sm { width: 2.3rem; height: 2.3rem; box-shadow: inset 0 1px #fff7, inset 0 -1px #0007, 0 0 0 1px #090b0a, 0 2px 4px #0009; }
.emblem-sm::before { inset: 3px; background: radial-gradient(circle at 50% 44%, #22312e 0, #0e1311 74%); }
.emblem-sm::after { inset: 3px; }
.emblem-sm svg { padding: .32rem; stroke-width: 3.2; }
.catbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--arc), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(.16, 1, .3, 1); }
summary.catbar:hover::after { transform: scaleX(1); }
.cat-chev { color: var(--brass); transition: transform 160ms ease-out; }
details.cat:not([open]) .cat-chev { transform: rotate(-90deg); }
.catbar-cols { display: grid; grid-template-columns: var(--col-a) var(--col-b) var(--col-last); gap: 0 1rem; font: 700 .75rem/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); text-align: center; }
.catbar-cols span:last-child { text-align: left; }
.tcols { grid-template-columns: var(--col-a) var(--col-b) var(--col-last); }

.board { margin: 0; padding: 0; list-style: none; background: var(--paper); border: 1px solid var(--brass-lo); border-top: 0; box-shadow: var(--lift); }
.frow, .trow {
  display: grid;
  align-items: center;
  gap: 0 1rem;
  padding: .95rem 1rem;
  border-top: 1px solid var(--rule);
  box-shadow: inset 0 1px #ffffff08;
  transition: background-color 120ms ease-out;
}
.frow:first-child, .trow:first-child { border-top: 0; }
.frow { grid-template-columns: 4.75rem minmax(0, 1fr) var(--col-a) var(--col-b) var(--col-last); }
.trow { grid-template-columns: 2.4rem minmax(0, 1fr) var(--col-a) var(--col-b) var(--col-last); padding-block: .8rem; }
.frow:nth-child(even), .trow:nth-child(even) { background-color: #21271f; }
.frow:hover, .trow:hover, .frow:focus-within, .trow:focus-within { background-color: #2a312a; }
.is-new { background-color: #2a281e !important; }
.is-held { opacity: .92; }

.frow-mark { position: relative; width: 4.5rem; height: 4.5rem; }
/* A forum's symbol on a riveted brass plate. The panel glows ember when there are new posts. */
.emblem {
  position: relative;
  display: block;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--brass-hi);
  background: linear-gradient(135deg, #d9b878, #6b5230 52%, #b08e57);
  border-radius: 3px;
  box-shadow: inset 0 1px #fff7, inset 0 -1px #0007, 0 0 0 1px #090b0a, 0 5px 10px #0009;
}
.emblem::before {
  content: "";
  position: absolute;
  inset: 4px;
  background:
    radial-gradient(circle at 5px 5px, #f0d8a4 0 1px, #6f5a37 1.8px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 5px) 5px, #f0d8a4 0 1px, #6f5a37 1.8px, transparent 2.6px),
    radial-gradient(circle at 5px calc(100% - 5px), #f0d8a4 0 1px, #6f5a37 1.8px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #f0d8a4 0 1px, #6f5a37 1.8px, transparent 2.6px),
    radial-gradient(circle at 50% 44%, #22312e 0, #0e1311 74%);
  box-shadow: inset 0 2px 7px #000d, inset 0 0 0 1px #000;
}
.emblem::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #97d9d112;
  transition: background-color 160ms ease-out;
}
.emblem svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: .72rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px #000);
}
.emblem-lg { width: 5.6rem; height: 5.6rem; }
.emblem-lg svg { padding: .95rem; }
.is-new .emblem::after { background: #f0a24a26; }
.frow:hover .emblem::after, .frow:focus-within .emblem::after { background: #97d9d124; }
.is-new:hover .emblem::after { background: #f0a24a33; }
.frow-mark .lamp { position: absolute; right: -.35rem; bottom: -.35rem; z-index: 3; }
.frow-title, .trow-title { margin: 0; font: 400 1.5rem/1.2 var(--head); }
.frow-title a, .trow-title a { color: var(--brass-hi); text-decoration: none; }
.frow-title a:hover, .trow-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.frow-title .chip, .trow-title .chip { margin-left: .4rem; }
.trow-title { font-size: 1.28rem; }
.trow-title .chip { margin: 0 .5rem 0 0; }
.frow-desc { margin-top: .25rem; font: 1rem/1.45 var(--body); color: var(--ink-dim); }
.frow-subs { margin-top: .35rem; font: .8125rem/1.5 var(--ui); color: var(--ink-faint); }
.frow-subs span:first-child { margin-right: .5rem; letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; }
.frow-subs a { color: var(--ink-dim); }
.frow-subs .sep { margin: 0 .4rem; color: var(--brass-lo); }
.frow-count, .trow-count {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 3.1rem;
  padding: .3rem .25rem;
  background: #121613;
  border: 1px solid #080a09;
  border-radius: 2px;
  box-shadow: inset 0 2px 6px #000b, 0 1px 0 #ffffff12;
}
.frow-count .num, .trow-count .num { font: 600 1.15rem/1.1 var(--body); color: var(--brass); font-variant-numeric: lining-nums tabular-nums; }
.frow-count .lbl, .trow-count .lbl { font: .75rem/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.frow-last, .trow-last { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.frow-last > div, .trow-last > div { min-width: 0; }
.frow-last-title { display: block; overflow: hidden; padding-block: .2rem; font: 400 1.05rem/1.25 var(--head); color: var(--brass); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.frow-private { grid-column: 3 / -1; }
.trow-mark { display: grid; place-items: center; color: var(--brass-mid); }
.trow-mark .icon { width: 1.35rem; height: 1.35rem; }
.ico-announce { color: var(--ember); }
.ico-pin { color: var(--brass); }
.mini-pages { display: inline-flex; gap: .25rem; margin-left: .7rem; font: .75rem/1 var(--ui); vertical-align: .15em; }
.mini-pages a { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; padding: .2rem .45rem; color: var(--ink-dim); background: #131713; border: 1px solid #3f4637; text-decoration: none; }
.mini-pages a:hover { color: var(--brass-hi); border-color: var(--brass-mid); }
.mini-pages .gap { padding: .2rem 0; color: var(--ink-faint); }
.divider { margin: 0; padding: .35rem 1rem; font: 700 .75rem/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); background: #11150f; border: 1px solid var(--brass-lo); border-bottom: 0; }
.tlist .divider:first-of-type { margin-top: 0; }
.tlist .board { border-top: 1px solid var(--brass-lo); }
.tlist .divider + .board { border-top: 1px solid var(--brass-lo); }
.empty-row { padding: 1.4rem 1rem; color: var(--ink-dim); }
.tlist-foot { padding: .6rem 1rem; font: .8125rem/1.4 var(--ui); color: var(--ink-faint); background: #11150f; border: 1px solid var(--brass-lo); border-top: 0; }

/* ------------------------------------------------------------------ forum head */

.forumhead, .threadhead {
  position: relative;
  margin-bottom: 1.4rem;
  overflow: hidden;
  isolation: isolate;
  background: #0d100f;
  border: 1px solid var(--brass-mid);
  box-shadow: 0 0 0 3px #0c0f0e, 0 0 0 4px var(--brass-lo), 0 6px 12px #000b;
}
.forumhead-art { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.forumhead::before, .threadhead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #0d100f 0%, #0d100ff0 34%, #0d100fa0 62%, #0d100f66 100%),
    linear-gradient(180deg, #0d100f55, transparent 40%, #0d100f99);
}
.forumhead-compact { margin-bottom: 1rem; }
.forumhead-compact .forumhead-body { padding-block: 1rem; }
.forumhead-compact h1 { font-size: 1.9rem; }
.forumhead-compact .forumhead-text p { margin-top: .1rem; }
.forumhead-body, .threadhead-body { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding: 1.4rem 1.6rem; }
.forumhead-text { flex: 1 1 18rem; min-width: 0; }
.forumhead h1 { text-shadow: 0 2px 8px #000; }
.forumhead-text p { margin-top: .3rem; max-width: 40rem; font: 1.02rem/1.45 var(--body); color: var(--ink-dim); text-shadow: 0 1px 5px #000; }
.forumhead-text .forumhead-stats { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .6rem; font: .8125rem/1.4 var(--ui); color: var(--brass); }
.forumhead-stats span { display: inline-flex; align-items: center; gap: .35rem; }
.forumhead-actions, .threadhead-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.threadhead-body > div:first-child { flex: 1 1 22rem; min-width: 0; }
.threadhead h1 { text-shadow: 0 2px 8px #000; }
.threadhead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .7rem; font: .8125rem/1.4 var(--ui); color: var(--ink-dim); }
.threadhead-meta a { color: var(--brass-hi); }
.rules { margin-bottom: 1.4rem; }
.rules > summary { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; cursor: pointer; font: 700 .8125rem/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--brass); }
.rules-body { padding: 0 1.1rem 1rem; font: .9375rem/1.55 var(--body); color: var(--ink-dim); }
.frieze-lamp .forumhead-art { background-image: url("img/frieze-lamp.webp"); }
.frieze-well .forumhead-art { background-image: url("img/frieze-well.webp"); }
.frieze-wheel .forumhead-art { background-image: url("img/frieze-wheel.webp"); }
.frieze-fire .forumhead-art { background-image: url("img/frieze-fire.webp"); }
.frieze-tower .forumhead-art { background-image: url("img/frieze-tower.webp"); }
.frieze-stair .forumhead-art { background-image: url("img/frieze-stair.webp"); }
.frieze-chains .forumhead-art { background-image: url("img/frieze-chains.webp"); }
.frieze-bridge .forumhead-art { background-image: url("img/frieze-bridge.webp"); }
.frieze-arch .forumhead-art { background-image: url("img/frieze-arch.webp"); }
.frieze-shell .forumhead-art { background-image: url("img/frieze-shell.webp"); }
.frieze-piazza .forumhead-art { background-image: url("img/frieze-piazza.webp"); }
.frieze-sawhorse .forumhead-art { background-image: url("img/frieze-sawhorse.webp"); }

/* ------------------------------------------------------------------ pager, jump bar, statistics */

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 0 0 1rem; font: .8125rem/1.3 var(--ui); }
.pager ul { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.pager-where { color: var(--ink-faint); }
.pager a { display: inline-flex; align-items: center; gap: .3rem; min-width: 2.4rem; min-height: 2.4rem; padding: .3rem .7rem; justify-content: center; color: var(--brass); text-decoration: none; background: linear-gradient(#2e342a, #1d231e); border: 1px solid var(--brass-lo); border-radius: 2px; }
.pager a:hover { color: var(--brass-hi); border-color: var(--brass-mid); }
.pager a[aria-current] { color: #171a17; background: linear-gradient(#ecd29c, #b8935a); border-color: #f0d8a4; font-weight: 700; }
.pager .gap { align-self: center; color: var(--ink-faint); }
.pager-goto { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.pager-goto label { margin: 0; }
.pager-goto input { width: 4.5rem; padding: .35rem .5rem; font: .8125rem var(--ui); color: var(--ink); background: #0e1210; border: 1px solid #5d4d31; }
.jumpbar { display: flex; justify-content: flex-end; margin-top: 1.4rem; }
.jump { display: flex; align-items: center; gap: .5rem; }
.jump label { margin: 0; }
.jump select { padding: .4rem .6rem; font: .8125rem var(--ui); color: var(--ink); background: #0e1210; border: 1px solid #5d4d31; }
.stats dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; padding: 1rem 1.1rem 1.1rem; margin: 0; }
.stats dl > div { padding: .6rem .8rem; background: #121613; border: 1px solid #080a09; box-shadow: inset 0 2px 6px #000b, 0 1px 0 #ffffff12; }
.stats dt { font: .75rem/1.3 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.stats dd { margin: 0; font: 600 1.3rem/1.3 var(--body); color: var(--brass); font-variant-numeric: lining-nums tabular-nums; }
.stats-online { margin: 0; padding: 0 1.1rem 1.1rem; font: .875rem/1.5 var(--ui); color: var(--ink-dim); }

/* ------------------------------------------------------------------ colophon */

.colophon { position: relative; padding: 4.8rem 1.6rem 1.2rem; background: linear-gradient(#10140f, #0c0f0d); color: var(--ink-dim); font: .875rem/1.55 var(--ui); }
/* An engraved cornice along the foot of the page. */
.colophon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 3.4rem;
  background: linear-gradient(180deg, #10140f55 0%, #10140fcc 80%, #0f130f 100%), url("img/frieze-sawhorse.webp") center 45% / cover no-repeat;
  border-bottom: 1px solid var(--brass-lo);
}
.colophon::after { top: 0; }
.notice-head { max-width: 46rem; }
.colophon-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem 2rem; }
.colophon-name { font: 400 1.35rem/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-hi); margin-bottom: .3rem; }
.colophon ul { margin: 0; padding: 0; list-style: none; }
.colophon li a { display: inline-block; padding: .25rem 0; }
.colophon p + p { margin-top: .15rem; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid #2a2f29; font: .8125rem/1.3 var(--ui); color: var(--ink-faint); }
.legend span { display: inline-flex; align-items: center; gap: .5rem; }

/* ------------------------------------------------------------------ plain pages and forms */

.notice-page { max-width: 40rem; padding: 1rem 0 2rem; }
.notice-page .actions { margin-top: 1.4rem; }
.choices { margin: 0 0 1rem; padding: 0; border: 0; }
.button-stack { display: grid; gap: .6rem; max-width: 30rem; }
.narrow > .lede { margin-bottom: 1.1rem; }
.choices legend { margin-bottom: .6rem; padding: 0; font: 700 .8125rem/1.3 var(--ui); letter-spacing: .03em; color: var(--ink-dim); }
.choice { display: flex; align-items: flex-start; gap: .7rem; margin: 0; padding: .65rem .8rem; font: .9375rem/1.45 var(--ui); font-weight: 400; letter-spacing: 0; color: var(--ink); background: #181d19; border: 1px solid #2f372f; cursor: pointer; }
.choice + .choice { border-top: 0; }
.choice:hover { background: #20271f; }
.choice input { margin-top: .25rem; accent-color: var(--brass); }
.narrow { max-width: 44rem; }
.page-form { padding: 1.1rem 1.2rem 1.3rem; }
.ledger { width: 100%; border-collapse: collapse; font: .875rem/1.45 var(--ui); }
.ledger th { padding: .6rem .8rem; text-align: left; font: 700 .75rem/1.3 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); background: #11150f; border-bottom: 1px solid var(--brass-lo); }
.ledger td { padding: .65rem .8rem; vertical-align: top; border-top: 1px solid var(--rule); }
.ledger tbody tr:nth-child(even) { background: #20261f; }
.plain { margin: 0; padding: 0; list-style: none; }
.plain li { padding: .35rem 0; }
.inline-form { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.stack > * + * { margin-top: 1rem; }

/* Search, member pages and other lists. */
.searchform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1.2rem; padding: 1.1rem 1.2rem 0; }
.searchform .wide { grid-column: 1 / -1; }
.searchform .checks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .5rem; }
.results .barhead { justify-content: flex-start; }
.results-count { margin-left: auto; font: .75rem/1 var(--ui); letter-spacing: .06em; color: var(--ink-dim); }
.result-list { margin: 0 0 1.2rem; padding: 0; list-style: none; background: var(--paper); border: 1px solid var(--brass-lo); border-top: 0; }
.result { padding: 1rem 1.2rem; border-top: 1px solid var(--rule); }
.result:first-child { border-top: 0; }
.result h3 { margin: 0; font: 400 1.35rem/1.25 var(--head); }
.result h3 a { color: var(--brass-hi); text-decoration: none; }
.result h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.snippet { margin-top: .4rem; max-width: 70ch; font: 1rem/1.55 var(--body); color: var(--ink-dim); }
.snippet mark { padding: 0 .12em; color: #171a17; background: var(--ember-hi); }
.memberhead-body { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; padding: 1.4rem 1.6rem; }
.memberfacts { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: .6rem 0 0; font: .8125rem/1.4 var(--ui); color: var(--ink-dim); }
.memberfacts dt { display: inline; margin-right: .4rem; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--ink-faint); }
.memberfacts dd { display: inline; margin: 0; }
.memberfacts > div { display: inline-flex; }
.member-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.4rem; align-items: start; }
.linklist li { display: grid; gap: .1rem; padding: .7rem 1.1rem; border-top: 1px solid var(--rule); }
.linklist li:first-child { border-top: 0; }
.linklist a { font: 400 1.1rem/1.3 var(--head); }
.helpgrid { display: grid; gap: 1.4rem; max-width: 62rem; }
.prose-body { padding: 1.1rem 1.3rem 1.3rem; font: 1.0625rem/1.65 var(--body); color: var(--ink-dim); }
.prose-body ol { padding-left: 1.4rem; }
.prose-body li { margin-bottom: .5rem; }
.prose-body p { margin: .8rem 0; }
.prose-body code, kbd { padding: .1em .4em; font: .85em var(--mono); color: #d5ebe4; background: #0e1211; border: 1px solid #2c3a36; }
.prose-body .ledger { margin: 1rem 0; }
.quote-preview { margin: 0 0 1.2rem; padding: 1rem 1.2rem; font-style: italic; color: var(--ink-dim); }

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

@media (max-width: 1120px) {
  :root { --col-last: 14rem; --col-a: 5rem; --col-b: 5rem; }
}
@media (max-width: 920px) {
  .masthead { min-height: 14rem; }
  .mast-window { width: 64%; right: .6rem; opacity: .7; }
  .mast-plate { max-width: 100%; padding: 1.7rem 1.4rem 1.7rem; }
  .wordmark-name { font-size: clamp(2.4rem, 7vw, 3.6rem); }
  .nav-account { flex: 1 0 100%; justify-content: space-between; margin-left: 0; padding: .6rem 0 0; border-top: 1px solid #080a09; box-shadow: 0 -1px #ffffff0c; }
  .nav-account-member { grid-template-areas: "seal text out" "links links links"; row-gap: .45rem; }
  .nav-account-member .nav-account-text { align-self: center; }
  .nav-account-member .account-links { gap: 0 1.4rem; padding-top: .35rem; border-top: 1px solid #0f1311; }
  .notice { grid-template-columns: auto minmax(0, 1fr); }
  .notice-title { white-space: normal; }
  .notice-meta { grid-column: 2; white-space: normal; }
  .mast-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b0e0df0 0%, #0b0e0dd0 60%, #0b0e0d00 100%); }
  .catbar-cols { display: none; }
  .frow { grid-template-columns: 4.5rem repeat(2, minmax(0, 1fr)); grid-template-areas: "mark main main" "mark cnt1 cnt2" "last last last"; gap: .7rem; align-items: start; }
  .trow { grid-template-columns: 2rem repeat(2, minmax(0, 1fr)); grid-template-areas: "mark main main" ". cnt1 cnt2" "last last last"; gap: .6rem .7rem; align-items: start; }
  .frow-mark, .trow-mark { grid-area: mark; }
  .frow-main, .trow-main { grid-area: main; }
  .frow-count:nth-of-type(1), .trow-count:nth-of-type(1) { grid-area: cnt1; }
  .frow-count:nth-of-type(2), .trow-count:nth-of-type(2) { grid-area: cnt2; }
  .frow-last, .trow-last { grid-area: last; padding-top: .2rem; border-top: 1px solid #0f1311; }
  .frow-private { grid-area: last; }
  .frow-count, .trow-count { min-height: 2.6rem; }
  .frow-last-title { white-space: normal; }
  .colophon-grid { grid-template-columns: 1fr; }
  main { padding: 1.2rem 1rem 2rem; }
}
@media (max-width: 700px) {
  .nave::before, .nave::after { display: none; }
}
@media (max-width: 560px) {
  .stage { padding: .3rem .3rem 2rem; }
  .wordmark-name { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .wordmark-band { gap: .6rem; margin-top: .7rem; }
  .seal { width: 1.25rem; height: 1.25rem; }
  .band-word { font-size: .85rem; letter-spacing: .34em; padding-left: .34em; }
  .mainnav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mainnav a { min-height: 2.9rem; padding-inline: .6rem; font-size: .75rem; }
  .mainnav ul a { width: 100%; justify-content: center; }
  .masthead { min-height: 12rem; }
  .mast-plate { padding: 1.3rem 1.2rem 1.3rem; }
  .crumbbar { padding: .5rem .8rem; }
  .quicksearch { display: none; }
  h1 { font-size: 1.75rem; }
  .frow-title { font-size: 1.3rem; }
  .forumhead-body, .threadhead-body { padding: 1.1rem; }
  .inline-field { grid-template-columns: 1fr; }
}
@media (prefers-contrast: more) {
  :root { --paper: #171a17; --ink-faint: #d3caa8; --rule: #aa8852; }
  body::before, .mast-window, .forumhead-art { display: none; }
  .nave { box-shadow: none; border: 2px solid var(--brass); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}