/* The Tavern: the forum (Pages/Forum) and its strip on the home page. Tokens live in site.css.
   The look: threads are quest log entries, posts are letters with the writer's portrait in a medallion, the Town
   Crier is the notice board by the town gate, reactions are tiny crystals. Each board takes an element's colour,
   like the crystals of Vana'diel. Gold (Crystal) only marks pins, staff and the crystal glyphs. */

.wrap-mid { width: min(100% - 2 * var(--gutter), 1000px); margin-inline: auto; }

/* Each board's element. */
.board-crier, .sigil-crier { --tint: var(--el-light); }
.board-tavern, .sigil-tavern { --tint: var(--el-fire); }
.board-party, .sigil-party { --tint: var(--el-wind); }
.board-jobs, .sigil-jobs { --tint: var(--el-lightning); }
.board-tales, .sigil-tales { --tint: var(--el-water); }
.board-feedback, .sigil-feedback { --tint: var(--el-ice); }

/* The top bar holds six links since Forum joined it: each stays on one line, a little tighter on narrow desktops
   (site.css folds the bar into the menu below 1020px). */
.nav a { white-space: nowrap; }
@media (max-width: 1140px) { .nav { gap: 0; } .nav a { padding-inline: 9px; } }

/* ---------- Small pieces ---------- */

.sigil {
  --size: 52px;
  flex: none; display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 999px;
  color: var(--tint, var(--lilac));
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tint, var(--lilac)) 26%, transparent), rgb(15 11 30 / 0.9) 72%);
  border: 1px solid color-mix(in srgb, var(--tint, var(--lilac)) 45%, transparent);
  box-shadow: 0 0 0 4px rgb(15 11 30 / 0.55), 0 0 24px -6px color-mix(in srgb, var(--tint, var(--lilac)) 60%, transparent);
}
.sigil-lg { --size: 76px; }
.sigil-icon { width: 55%; height: 55%; }
.tag .sigil-icon, .reply-title .sigil-icon, .letter-hidden-note .sigil-icon { width: 14px; height: 14px; flex: none; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--ash-40); color: var(--mist-80);
  font: 600 0.6875rem/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.tag .crystal-glyph { width: 8px; height: 12px; --element: var(--crystal); }
.tag-pinned { border-color: rgb(243 199 106 / 0.5); color: var(--crystal); }
.tag-locked { color: var(--ash); }
.tag-hidden { border-color: rgb(240 122 107 / 0.5); color: var(--ember); }

.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--mist); }
.crumbs span { color: var(--ash); }

.badge-staff {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgb(227 154 196 / 0.5); color: var(--petal);
  font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
}
.badge-staff .crystal-glyph { width: 8px; height: 12px; --element: var(--crystal); }

.link-button { padding: 0; border: 0; background: none; color: var(--lilac); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.link-button:hover { color: var(--mist); }
.inline-form { display: inline; }

.input-sm { height: 38px; padding: 0 12px; font-size: 0.9375rem; }
.input-area { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
select.input {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23B7A3F0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
select.input option { background: var(--dusk); color: var(--mist); }

.check.radio input { border-radius: 999px; }
.check.radio input:checked::after { width: 8px; height: 8px; border: 0; border-radius: 999px; background: var(--night); rotate: none; translate: none; }

/* ---------- The medallion: a portrait in a round frame ---------- */

.medallion {
  --m: 64px;
  position: relative; flex: none; display: inline-block; width: var(--m); height: var(--m); padding: 3px; border-radius: 999px;
  background: conic-gradient(from 210deg, rgb(183 163 240 / 0.85), rgb(227 154 196 / 0.7), rgb(183 163 240 / 0.35), rgb(183 163 240 / 0.85));
  box-shadow: 0 12px 26px -14px #000, 0 0 0 1px rgb(15 11 30 / 0.8);
}
.medallion.is-staff { background: conic-gradient(from 210deg, rgb(255 241 201 / 0.95), rgb(243 199 106 / 0.85), rgb(183 163 240 / 0.55), rgb(255 241 201 / 0.95)); }
.medallion-sm { --m: 44px; padding: 2px; }
.medallion-lg { --m: 104px; }
.medallion-portrait { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; object-position: 50% 14%; background: radial-gradient(circle at 50% 35%, #2b2350, #120e24 75%); }
.medallion-blank { object-fit: contain; padding: 18%; filter: drop-shadow(0 0 10px rgb(183 163 240 / 0.45)); }
.medallion-crest { position: absolute; right: -4%; bottom: -4%; width: 38%; height: 38%; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.75)); }
.medallion-sm .medallion-crest { display: none; }

/* ---------- Heads of the inner pages ---------- */

.forum-head { --tint: var(--lilac); position: relative; isolation: isolate; padding: 128px 0 32px; }
.forum-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 90% at 15% 0%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 70%), radial-gradient(50% 70% at 90% 10%, rgb(183 163 240 / 0.08), transparent 70%);
}
.board-page .forum-head, .thread .forum-head { --tint: inherit; }
.forum-head-inner { display: grid; gap: 14px; }
.forum-head .lead { max-width: 680px; }
.forum-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.forum-main { padding-bottom: clamp(80px, 10vw, 120px); display: grid; gap: 18px; align-content: start; }
.board-title-row { display: flex; align-items: center; gap: 20px; }
.board-title-row > div { display: grid; gap: 8px; }

/* ---------- The front room ---------- */

.tavern-hero { position: relative; isolation: isolate; padding: 160px 0 56px; overflow: hidden; }
.tavern-hero-art { position: absolute; inset: 0; z-index: -2; }
.tavern-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0.5; }
.tavern-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40% 60% at 22% 70%, rgb(240 122 107 / 0.16), transparent 70%), linear-gradient(180deg, rgb(15 11 30 / 0.7) 0%, rgb(15 11 30 / 0.5) 45%, var(--night) 100%), linear-gradient(90deg, rgb(15 11 30 / 0.85), rgb(15 11 30 / 0.15) 75%);
}
.tavern-hero-inner { display: grid; gap: 18px; }
.tavern-hero-inner > .story { max-width: 620px; }
.tavern-title { font-size: clamp(3rem, 9vw, 7rem); }
.tavern-search { display: flex; gap: 10px; width: min(100%, 560px); }
.tavern-search .input { flex: 1; min-width: 0; }
.tavern-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tavern-stats { color: var(--mist-80); font-size: 0.9375rem; margin-left: 6px; }
.tavern-body { display: grid; gap: clamp(32px, 5vw, 56px); padding-bottom: clamp(80px, 10vw, 120px); }
.tavern-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 28px; align-items: start; }
.tavern-h { margin-bottom: 18px; }
@media (max-width: 960px) { .tavern-grid { grid-template-columns: 1fr; } }

/* The Town Crier's board: notices pinned up with a crystal. */
.notice-board {
  position: relative; padding: clamp(20px, 3vw, 32px); border-radius: 20px;
  border: 1px solid rgb(243 199 106 / 0.28);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 11px),
    linear-gradient(170deg, rgb(52 38 72 / 0.85), rgb(25 18 44 / 0.92));
  box-shadow: inset 0 0 0 6px rgb(15 11 30 / 0.35), inset 0 0 60px rgb(0 0 0 / 0.35), 0 24px 50px -30px #000;
}
.notice-board::before { content: ""; position: absolute; inset: 0 24px auto; height: 1px; background: linear-gradient(90deg, rgb(243 199 106 / 0), rgb(243 199 106 / 0.6), rgb(243 199 106 / 0)); }
.notice-board-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.notice-board-head > div { flex: 1; display: grid; gap: 4px; }
.notice-board-empty { color: var(--mist-60); }
.notice-board-full { padding-top: clamp(28px, 4vw, 40px); }

.slips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px 18px; }
.slip {
  --tilt: -0.6deg;
  position: relative; display: grid; gap: 8px; align-content: start; padding: 26px 20px 18px; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(172deg, #302659, #221b43 70%);
  border: 1px solid rgb(238 234 248 / 0.12);
  box-shadow: 0 16px 30px -18px #000, inset 0 1px 0 rgb(255 255 255 / 0.06);
  rotate: var(--tilt);
  transition: rotate 220ms var(--ease-out), translate 220ms var(--ease-out), border-color 220ms;
}
.slip:nth-child(2n) { --tilt: 0.5deg; }
.slip:nth-child(3n) { --tilt: -0.25deg; }
.slip:hover, .slip:focus-within { rotate: 0deg; translate: 0 -3px; border-color: rgb(243 199 106 / 0.4); }
.slip-pin { position: absolute; top: -9px; left: 50%; translate: -50% 0; width: 14px; height: 20px; background: linear-gradient(160deg, #fff, var(--crystal) 45%, #8a6a24); clip-path: polygon(50% 0, 94% 28%, 78% 49%, 50% 100%, 22% 49%, 6% 28%); filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.6)); }
.slip-date { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ash); font-size: 0.8125rem; }
.slip-title { font-family: var(--font-inscription); font-size: 1.3rem; line-height: 1.2; letter-spacing: 0.02em; }
.slip-title a { color: var(--mist); text-decoration: none; }
.slip-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.slip-title a:hover { color: var(--lilac); }
.slip-text { color: var(--mist-80); font-size: 0.9375rem; line-height: 1.55; }
.slip-foot { color: var(--ash); }
.slip.is-pinned { border-color: rgb(243 199 106 / 0.35); }
.slip.is-hidden { opacity: 0.6; border-style: dashed; }

/* The boards, one row each. */
.boards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.board {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 18px 22px; border-radius: 16px; border: 1px solid var(--ash-20);
  background: linear-gradient(100deg, color-mix(in srgb, var(--tint) 7%, rgb(27 21 51 / 0.8)), rgb(27 21 51 / 0.65) 45%);
  transition: border-color 180ms, translate 180ms var(--ease-out);
}
.board:hover, .board:focus-within { border-color: color-mix(in srgb, var(--tint) 45%, transparent); translate: 3px 0; }
.board-text { display: grid; gap: 4px; min-width: 0; }
.board-name { font-family: var(--font-inscription); font-size: 1.35rem; line-height: 1.2; letter-spacing: 0.02em; }
.board-name a { color: var(--mist); text-decoration: none; }
.board-name a:hover { color: var(--tint); }
.board-blurb { color: var(--mist-80); font-size: 0.9375rem; line-height: 1.5; }
.board-latest { color: var(--mist-80); overflow-wrap: anywhere; }
.board-latest a { font-weight: 600; text-decoration: none; }
.board-latest .mono { color: var(--ash); }
.board-counts { margin: 0; display: flex; gap: 18px; text-align: right; }
.board-counts div { display: grid; gap: 2px; }
.board-counts dt { color: var(--ash); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.board-counts dd { margin: 0; font-size: 1.35rem; color: var(--mist); }
@media (max-width: 640px) {
  .board { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 14px; }
  .board .sigil { --size: 44px; align-self: start; }
  .board-counts { grid-column: 2; text-align: left; }
  .board-counts dd { font-size: 1.1rem; }
}

/* ---------- The quest log: lists of threads ---------- */

.quest-log { padding: 20px 20px 10px; position: sticky; top: 88px; }
.quest-log-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-inscription); font-size: 1.25rem; letter-spacing: 0.04em; margin-bottom: 8px; }
.quest-log-title .crystal-glyph { --element: var(--crystal); }
@media (max-width: 960px) { .quest-log { position: static; } }

.quests { list-style: none; margin: 0; padding: 0; display: grid; }
.quests.panel { padding: 6px 0; }
.quest {
  position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto minmax(150px, 190px); gap: 6px 16px; align-items: center;
  padding: 16px 22px; border-top: 1px solid var(--ash-15);
  transition: background-color 150ms;
}
.quest:first-child { border-top: 0; }
.quest::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--lilac); opacity: 0; transition: opacity 150ms; }
.quest:hover, .quest:focus-within { background: rgb(183 163 240 / 0.05); }
.quest:hover::before, .quest:focus-within::before { opacity: 0.8; }
.quest-mark { width: 10px; height: 14px; clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); background: rgb(142 134 174 / 0.55); }
.quest.is-pinned .quest-mark { background: linear-gradient(160deg, #fff, var(--crystal)); filter: drop-shadow(0 0 6px rgb(243 199 106 / 0.7)); }
.quest.is-locked .quest-mark { background: rgb(142 134 174 / 0.3); }
.quest.is-hidden { opacity: 0.65; }
.quest-main { display: grid; gap: 4px; min-width: 0; }
.quest-title { font: 600 1.0625rem/1.35 var(--font-ui); overflow-wrap: anywhere; }
.quest-title a { color: var(--mist); text-decoration: none; }
.quest-title a:hover { color: var(--lilac); }
.quest-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ash); font-size: 0.8125rem; }
.quest-meta strong { color: var(--mist-80); font-weight: 600; }
.quest-board { color: var(--lilac); text-decoration: none; font-weight: 600; }
.quest-stats { margin: 0; display: flex; gap: 16px; }
.quest-stats div { display: grid; gap: 1px; text-align: center; min-width: 48px; }
.quest-stats dt { color: var(--ash); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.quest-stats dd { margin: 0; color: var(--mist); font-size: 1.05rem; }
.quest-last { display: grid; gap: 1px; font-size: 0.8125rem; color: var(--mist-80); text-align: right; }
.quest-last a { font-weight: 600; text-decoration: none; }
.quest-last time { color: var(--ash); }
@media (max-width: 760px) {
  .quest { grid-template-columns: 14px minmax(0, 1fr); padding: 14px 16px; }
  .quest-stats, .quest-last { grid-column: 2; }
  .quest-last { text-align: left; display: flex; flex-wrap: wrap; gap: 4px 8px; }
  .quest-stats div { text-align: left; min-width: 0; display: flex; gap: 6px; align-items: baseline; }
}
.quests-compact .quest { grid-template-columns: 14px minmax(0, 1fr); padding: 12px 4px; }
.quests-compact .quest-stats { display: none; }
.quests-compact .quest-last { grid-column: 2; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.quests-compact .quest-title { font-size: 0.9875rem; }

/* ---------- A thread: letters ---------- */

.thread-title { overflow-wrap: anywhere; }
.thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--mist-80); font-size: 0.9375rem; }
.thread-meta .mono { color: var(--mist); }

.watch-btn .watch-dot { width: 8px; height: 8px; border-radius: 999px; border: 1px solid var(--lilac); }
.watch-btn.is-on { border-color: rgb(183 163 240 / 0.6); }
.watch-btn.is-on .watch-dot { background: var(--lilac); box-shadow: 0 0 10px rgb(183 163 240 / 0.8); }

.staff-tools { margin-top: 8px; border-color: rgb(243 199 106 / 0.3); }
.staff-tools summary { display: flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer; font-weight: 600; color: var(--mist); list-style: none; }
.staff-tools summary::-webkit-details-marker { display: none; }
.staff-tools summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--ash); border-bottom: 1.5px solid var(--ash); rotate: 45deg; translate: 0 -2px; transition: rotate 160ms; }
.staff-tools[open] summary::after { rotate: 225deg; translate: 0 2px; }
.staff-tools summary .crystal-glyph { --element: var(--crystal); }
.staff-tools-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 18px 16px; }
.staff-move { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.staff-move .input { width: auto; min-width: 180px; }

.letters { display: grid; gap: 18px; }
.letter { --paper: rgb(30 23 56 / 0.82); display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 0; scroll-margin-top: 90px; }
.letter-author {
  display: grid; justify-items: center; align-content: start; gap: 12px; padding: 22px 14px; text-align: center;
  border: 1px solid var(--ash-20); border-right: 0; border-radius: 16px 0 0 16px;
  background: radial-gradient(120% 60% at 50% 0%, rgb(183 163 240 / 0.12), transparent 70%), rgb(17 13 33 / 0.75);
}
.letter-who { display: grid; justify-items: center; gap: 5px; }
.letter-name { font-size: 1.2rem; line-height: 1.15; color: var(--mist); overflow-wrap: anywhere; }
.letter-jobs { color: var(--lilac); font-size: 0.875rem; }
.letter-line { color: var(--mist-60); font-size: 0.8125rem; line-height: 1.4; }
.letter-count { color: var(--ash); font-size: 0.75rem; }
.letter-sheet {
  position: relative; min-width: 0; display: grid; align-content: start; gap: 14px; padding: 20px clamp(18px, 3vw, 30px) 16px;
  border: 1px solid var(--ash-20); border-radius: 0 16px 16px 0;
  background: linear-gradient(175deg, rgb(255 255 255 / 0.025), transparent 40%), var(--paper);
  box-shadow: 0 18px 40px -30px #000;
}
.letter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-bottom: 12px; color: var(--ash); font-size: 0.8125rem; position: relative; }
.letter-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgb(243 199 106 / 0.45), rgb(243 199 106 / 0.08) 60%, rgb(243 199 106 / 0)); }
.letter-number { color: var(--lilac); text-decoration: none; }
.letter-edited { font-style: italic; }
.letter.is-staff .letter-sheet { border-color: rgb(243 199 106 / 0.32); }
.letter.is-staff .letter-author { border-color: rgb(243 199 106 / 0.32); }
.letter.is-hidden .letter-sheet, .letter.is-hidden .letter-author { border-style: dashed; border-color: rgb(240 122 107 / 0.4); }
.letter.is-hidden .letter-body { opacity: 0.75; }
.letter-hidden-note { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgb(240 122 107 / 0.08); color: #f7b3a8; font-size: 0.875rem; }
.letter-hidden-only { background: none; padding: 4px 0; color: var(--ash); }

/* The Town Crier's opening post reads as the notice itself. */
.thread.is-notice .letter.is-first .letter-sheet { --paper: #2a2150; border-color: rgb(243 199 106 / 0.3); }
.thread.is-notice .letter.is-first .letter-sheet::before { content: ""; position: absolute; top: -9px; left: 50%; translate: -50% 0; width: 14px; height: 20px; background: linear-gradient(160deg, #fff, var(--crystal) 45%, #8a6a24); clip-path: polygon(50% 0, 94% 28%, 78% 49%, 50% 100%, 22% 49%, 6% 28%); }

@media (max-width: 760px) {
  .letter { grid-template-columns: 1fr; }
  .letter-author { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 4px 14px; padding: 14px 16px; text-align: left; border-right: 1px solid var(--ash-20); border-bottom: 0; border-radius: 16px 16px 0 0; background: radial-gradient(80% 140% at 0% 0%, rgb(183 163 240 / 0.12), transparent 70%), rgb(17 13 33 / 0.75); }
  .letter-author .medallion { --m: 60px; }
  .letter-who { justify-items: start; gap: 3px; }
  .letter-who .badge-staff { justify-self: start; }
  .letter-sheet { border-radius: 0 0 16px 16px; }
  .letter.is-hidden .letter-author { border-bottom: 0; }
}

/* The words of a post. */
.letter-body { font-size: 1rem; line-height: 1.7; color: rgb(238 234 248 / 0.9); overflow-wrap: anywhere; }
.letter-body > * + * { margin-top: 0.85em; }
.letter-body h3, .letter-body h4 { font-family: var(--font-inscription); font-size: 1.3rem; line-height: 1.25; color: var(--mist); margin-top: 1.3em; }
.letter-body h5, .letter-body h6 { font: 600 1rem/1.35 var(--font-ui); color: var(--mist); margin-top: 1.2em; }
.letter-body blockquote {
  margin: 0.4em 0 0.9em; padding: 10px 18px; border-left: 2px solid var(--lilac); border-radius: 0 12px 12px 0;
  background: rgb(37 29 69 / 0.5); color: var(--mist-80);
  font-family: var(--font-story); font-style: italic; font-weight: 500; font-size: 1.18rem; line-height: 1.45;
}
.letter-body blockquote > * + * { margin-top: 0.5em; }
.letter-body blockquote > p:first-child > strong:first-child { font-family: var(--font-ui); font-style: normal; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--petal); }
.letter-body blockquote blockquote { font-size: 1em; background: rgb(15 11 30 / 0.35); }
.letter-body img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--ash-20); }
.letter-body table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; display: block; overflow-x: auto; }
.letter-body th, .letter-body td { padding: 6px 10px; border: 1px solid var(--ash-20); text-align: left; }
.letter-body th { background: rgb(37 29 69 / 0.6); }
.letter-body code { font-size: 0.875em; padding: 1px 5px; border-radius: 6px; background: rgb(8 6 15 / 0.6); }
.letter-body pre { padding: 12px 14px; }
.letter-body pre code { padding: 0; background: none; }
.letter-body del { color: var(--ash); }

.letter-signature { position: relative; padding-top: 12px; color: var(--ash); font-family: var(--font-story); font-style: italic; font-size: 1.05rem; line-height: 1.4; overflow-wrap: anywhere; }
.letter-signature::before { content: ""; position: absolute; top: 0; left: 0; width: min(220px, 60%); height: 1px; background: linear-gradient(90deg, rgb(243 199 106 / 0.4), rgb(243 199 106 / 0)); }

.letter-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 4px; }
.letter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 0.875rem; }
.letter-actions a, .letter-actions .link-button, .staff-hide summary { color: var(--ash); text-decoration: none; font-weight: 600; }
.letter-actions a:hover, .letter-actions .link-button:hover, .staff-hide summary:hover { color: var(--mist); }
.staff-hide[open] { flex-basis: 100%; }
.staff-hide summary { cursor: pointer; list-style: none; color: #f7b3a8; }
.staff-hide summary::-webkit-details-marker { display: none; }
.staff-hide-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 12px; border: 1px solid rgb(240 122 107 / 0.4); background: rgb(240 122 107 / 0.06); }
.staff-hide-form .input { flex: 1 1 200px; width: auto; }

/* Reactions: tiny crystals. */
.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reaction {
  --gem: var(--lilac);
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--ash-20); background: rgb(15 11 30 / 0.35); color: var(--mist-80);
  font: 600 0.8125rem/1 var(--font-ui); cursor: pointer;
  transition: border-color 140ms, background-color 140ms, color 140ms;
}
.reaction-thanks { --gem: var(--petal); }
.reaction-ha { --gem: var(--lilac); }
.reaction-crystal { --gem: var(--crystal); }
.reaction-gem { width: 9px; height: 13px; clip-path: polygon(50% 0, 94% 28%, 78% 49%, 50% 100%, 22% 49%, 6% 28%); background: linear-gradient(160deg, #fff 0%, var(--gem) 50%, color-mix(in srgb, var(--gem) 50%, #000)); opacity: 0.75; transition: opacity 140ms, filter 140ms; }
.reaction-count:empty { display: none; }
button.reaction:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gem) 55%, transparent); color: var(--mist); }
.reaction[aria-pressed="true"] { border-color: color-mix(in srgb, var(--gem) 65%, transparent); background: color-mix(in srgb, var(--gem) 14%, transparent); color: var(--mist); }
.reaction[aria-pressed="true"] .reaction-gem { opacity: 1; filter: drop-shadow(0 0 6px var(--gem)); }
.reaction:disabled { cursor: default; opacity: 0.6; }
.reaction.is-static { cursor: default; }
.reaction.is-pop .reaction-gem { animation: gem-pop 420ms var(--ease-out); }
@keyframes gem-pop { 0% { scale: 1; } 40% { scale: 1.7; } 100% { scale: 1; } }
.reactions-note { flex-basis: 100%; color: var(--ember); font-size: 0.8125rem; }

/* ---------- Writing: the reply box and the editor ---------- */

.reply { padding: clamp(20px, 3vw, 30px); display: grid; gap: 14px; scroll-margin-top: 90px; }
.reply-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-inscription); font-size: 1.5rem; line-height: 1.2; }
.reply-guest { display: flex; flex-wrap: wrap; gap: 10px; }
.reply-form { display: grid; gap: 14px; }
.reply-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.reply-actions .btn-primary { margin-left: auto; }

.posting-as { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--ash-15); background: rgb(15 11 30 / 0.35); }
.posting-as p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 1 1 180px; min-width: 0; }
.posting-as p > span { white-space: nowrap; }
.posting-as-name { font-size: 1.1rem; color: var(--mist); }
.posting-as-jobs { color: var(--lilac); }
.posting-as-change { margin-left: auto; font-weight: 600; text-decoration: none; white-space: nowrap; }
.posting-as-account p { display: block; color: var(--mist-80); }

.editor { gap: 10px; }
.editor-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.editor-label { font: 600 0.9375rem/1.3 var(--font-ui); }
.editor-tabs { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--ash-20); background: rgb(15 11 30 / 0.4); }
.editor-tabs button { padding: 6px 16px; border: 0; border-radius: 999px; background: none; color: var(--mist-80); font: 600 0.875rem/1.2 var(--font-ui); cursor: pointer; }
.editor-tabs button[aria-selected="true"] { background: rgb(183 163 240 / 0.2); color: var(--mist); }
.editor-panel { display: grid; gap: 8px; }
.editor-panel[hidden] { display: none; }
.editor-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.editor-tools button { min-width: 36px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ash-20); background: rgb(37 29 69 / 0.45); color: var(--mist-80); font: 600 0.8125rem/1 var(--font-ui); cursor: pointer; }
.editor-tools button:hover { border-color: var(--lilac); color: var(--mist); }
.editor-tools i { font-family: var(--font-story); font-size: 1.05rem; }
.editor-input { height: auto; min-height: 190px; padding: 14px 16px; line-height: 1.6; resize: vertical; font-size: 1rem; }
.editor-preview { min-height: 190px; padding: 14px 18px; border-radius: var(--radius-control); border: 1px dashed rgb(183 163 240 / 0.4); background: rgb(15 11 30 / 0.35); }
.editor-preview[aria-busy="true"] { opacity: 0.6; }
.editor-note { color: var(--ash); font-style: italic; }
.editor-hint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.editor-count { color: var(--mist-80); }
html:not(.js) .editor-tabs, html:not(.js) .editor-tools { display: none; }

.compose-form { padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.compose-form .field + .field { margin-top: 0; }
.compose-row { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); align-items: start; }
@media (max-width: 640px) { .compose-row { grid-template-columns: 1fr; } }

.report-quote { margin: 0; padding: 14px 20px; border-left: 2px solid var(--lilac); border-radius: 0 12px 12px 0; background: rgb(37 29 69 / 0.45); display: grid; gap: 6px; }
.report-quote .story { font-size: 1.15rem; }
.report-reasons { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.report-reasons legend { margin-bottom: 6px; }

/* ---------- Pages, search, settings, reports ---------- */

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.pager-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pager-page, .pager-step { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ash-20); color: var(--mist-80); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.pager-page:hover, .pager-step:hover { border-color: var(--lilac); color: var(--mist); }
.pager-page.is-current { border-color: rgb(183 163 240 / 0.6); background: rgb(183 163 240 / 0.16); color: var(--mist); }
.pager-gap { display: grid; place-items: center; color: var(--ash); min-width: 20px; }

.search-hint { color: var(--mist-60); }
.hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hit { position: relative; padding: 18px 22px; display: grid; gap: 8px; transition: border-color 160ms; }
.hit:hover, .hit:focus-within { border-color: rgb(183 163 240 / 0.45); }
.hit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ash); }
.hit-title { font: 600 1.125rem/1.35 var(--font-ui); }
.hit-title a { color: var(--mist); text-decoration: none; }
.hit-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hit-text { color: var(--mist-80); font-size: 0.9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.hit-text mark { background: none; color: var(--mist); font-weight: 600; box-shadow: inset 0 -0.35em 0 rgb(227 154 196 / 0.3); }

.settings-form { display: grid; gap: 18px; }
.settings-card { padding: 22px 24px; display: grid; gap: 14px; }
.settings-card .hint, .reply .hint { font-size: 0.8125rem; line-height: 1.45; color: var(--ash); }
.as-choices { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.as-choices .hint { grid-column: 1 / -1; }
.as-choice { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ash-20); background: rgb(15 11 30 / 0.35); cursor: pointer; transition: border-color 140ms, background-color 140ms; }
.as-choice input { position: absolute; opacity: 0; pointer-events: none; }
.as-choice:hover { border-color: rgb(183 163 240 / 0.45); }
.as-choice:has(input:checked) { border-color: var(--lilac); background: rgb(183 163 240 / 0.12); box-shadow: 0 0 0 1px rgb(183 163 240 / 0.4); }
.as-choice:has(input:focus-visible) { outline: 2px solid var(--lilac); outline-offset: 2px; }
.as-choice-text { display: grid; gap: 2px; min-width: 0; }
.as-choice-name { font-size: 1.15rem; color: var(--mist); }
.as-choice-jobs { color: var(--lilac); }
.watch-list, .modlog-list, .report-reasons-list { list-style: none; margin: 0; padding: 0; display: grid; }
.watch-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ash-15); }
.watch-list li > div { min-width: 0; }
.watch-list a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.modlog-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--ash-15); font-size: 0.9375rem; }
.modlog-list time { color: var(--ash); padding-top: 2px; }
@media (max-width: 480px) { .modlog-list li { grid-template-columns: 1fr; gap: 2px; } }

.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.report-card { padding: 20px 22px; display: grid; gap: 12px; }
.report-card.is-hidden { border-color: rgb(240 122 107 / 0.35); }
.report-reasons-list li { padding: 8px 0; border-top: 1px solid var(--ash-15); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- The home page strip ---------- */

.tavern-strip { padding-bottom: 0; }
.tavern-strip + .news-strip { padding-top: clamp(40px, 6vw, 72px); }
.tavern-card { border-color: rgb(183 163 240 / 0.2); }
.tavern-card .news-tag, .hit .news-tag { text-transform: none; }
.tavern-card .title-3 a { overflow-wrap: anywhere; }
.tavern-card-by { color: var(--mist-80); margin-top: auto; }

@media (max-width: 480px) {
  .tavern-search { flex-direction: column; }
  .tavern-search .btn { width: 100%; }
  .board-title-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sigil-lg { --size: 56px; }
  .reply-actions .btn-primary { width: 100%; }
  .watch-list li { flex-direction: column; align-items: flex-start; }
}