:root {
  --ink: #05070a;
  --ink-soft: #0b0f14;
  --steel: #16202a;
  --panel: rgba(8, 13, 18, 0.84);
  --panel-solid: #101820;
  --line: rgba(190, 211, 222, 0.18);
  --text: #edf4f5;
  --muted: #9caeb7;
  --dim: #647983;
  --cyan: #9dd8e6;
  --orange: #d7833d;
  --violet: #a18ebc;
  --paper: #d2b27b;
  --blood: #a3262f;
  --veil-blue: #102f5b;
  --veil-purple: #7d35ba;
  --veil-gold: #c28a2e;
  --danger: #d2b27b;
  --radius: 8px;
  --file-line: rgba(210, 178, 123, 0.32);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
}

.bib-haunt,
#portalTitle,
#archiveTitle {
  color: var(--paper);
  font-family: "Cinzel", "Georgia", "Times New Roman", serif;
  font-weight: 800;
  text-shadow:
    0 0 10px rgba(163, 38, 47, 0.32),
    0 0 22px rgba(157, 216, 230, 0.12);
}

.bib-haunt {
  white-space: nowrap;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

.portal-screen,
.archive-shell {
  min-height: 100vh;
}

.portal-screen {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: 42px 20px 36px;
  isolation: isolate;
  overflow-y: auto;
  transition: opacity 420ms ease, transform 420ms ease;
}

.portal-backdrop,
.city-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(4, 6, 9, 0.74), rgba(4, 6, 9, 0.92)),
    url("./public/assets/references/black-ink-bay-crescent-city-reference.png");
  background-size: cover;
  background-position: center 48%;
}

.portal-backdrop::after,
.city-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.62)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 5px);
}

.portal-video-layer {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 52%, rgba(28, 47, 62, 0.48), transparent 34%),
    rgba(0, 0, 0, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 340ms ease;
}

.portal-opening-video {
  width: min(1180px, 96vw);
  max-height: 82vh;
  object-fit: contain;
  filter: contrast(1.12) saturate(0.86) brightness(0.76);
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.72);
}

body:not(.mobile-preview-mode) .portal-video-layer {
  padding: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(96, 65, 134, 0.2), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.82) 72%),
    rgba(0, 0, 0, 0.98);
}

body:not(.mobile-preview-mode) .portal-opening-video {
  width: min(100vw, 1720px);
  max-height: 100vh;
  filter: contrast(1.16) saturate(0.92) brightness(0.82);
  box-shadow: 0 0 160px rgba(0, 0, 0, 0.9);
}

body:not(.mobile-preview-mode) .portal-screen.is-video-playing .portal-backdrop {
  opacity: 0;
}

.portal-video-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 30%, rgba(0, 0, 0, 0.36) 62%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.66), transparent 18%, transparent 72%, rgba(0, 0, 0, 0.72));
}

.portal-screen.is-video-playing .portal-video-layer {
  opacity: 1;
}

.portal-screen.is-video-playing .portal-copy,
.portal-screen.is-video-playing .main-book-button,
.portal-screen.is-video-playing .portal-instruction {
  opacity: 0;
}

.portal-copy {
  text-align: center;
  max-width: 720px;
}

.kicker {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 2.5rem;
  line-height: 1.05;
  font-weight: 750;
}

.book-button {
  width: min(76vw, 470px);
  aspect-ratio: 0.77 / 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 1400px;
}

.book-button:focus-visible,
.ghost-button:focus-visible,
.portal-object:focus-visible,
.category-button:focus-visible,
.record-card:focus-visible,
.search-input:focus-visible,
.community-form-prototype input:focus-visible,
.community-form-prototype select:focus-visible,
.community-form-prototype textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.feedback-status {
  min-height: 1.35em;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.feedback-status[data-status="success"] {
  color: #b7e7c2;
}

.feedback-status[data-status="error"] {
  color: #ffb2a9;
}

.book {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-9deg);
  transition: transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.main-origin-book {
  transform: rotateX(7deg) rotateZ(-3deg) translateY(4px);
  filter: drop-shadow(0 32px 48px rgba(0, 0, 0, 0.76));
}

.book-button:hover .main-origin-book {
  transform: rotateX(5deg) rotateZ(-2deg) translateY(-3px) scale(1.018);
}

.book-shadow {
  position: absolute;
  inset: 74% -4% 2% -3%;
  background: rgba(0, 0, 0, 0.58);
  filter: blur(16px);
  border-radius: 50%;
  transform: translateZ(-60px);
}

.book-cover,
.book-page {
  position: absolute;
  inset: 3% 6%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.main-origin-book .book-cover,
.main-origin-book .book-page {
  inset: 0;
}

.main-origin-book .front-cover {
  z-index: 4;
}

.main-origin-book .book-page {
  z-index: 3;
}

.main-origin-book .back-cover {
  z-index: 1;
  opacity: 0;
}

.main-origin-book .book-shadow {
  inset: 76% 2% 0;
  filter: blur(24px);
}

.back-cover {
  background:
    linear-gradient(90deg, rgba(117, 53, 186, 0.22), transparent 18%),
    linear-gradient(135deg, #06101d, #121528 44%, #06060a);
  border: 1px solid rgba(194, 138, 46, 0.44);
  transform: translateZ(-20px);
}

.book-page {
  background:
    linear-gradient(90deg, rgba(20, 17, 14, 0.35), rgba(255, 244, 220, 0.08) 6%, rgba(255, 244, 220, 0.72)),
    repeating-linear-gradient(0deg, rgba(46, 34, 24, 0.16) 0, rgba(46, 34, 24, 0.16) 1px, transparent 1px, transparent 13px);
  border: 1px solid rgba(42, 32, 24, 0.24);
  opacity: 0;
  transform: translateZ(-4px);
  transition: opacity 600ms ease 420ms;
}

.left-page {
  transform-origin: right center;
}

.right-page {
  transform-origin: left center;
}

.front-cover {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(1, 4, 9, 0.06), rgba(2, 4, 7, 0.2) 56%, rgba(3, 3, 7, 0.78)),
    url("./public/assets/references/the-veil-character-sheet.webp");
  background-size: cover;
  background-position: center top;
  border: 1px solid rgba(194, 138, 46, 0.74);
  transform-origin: left center;
  transform: translateZ(22px);
  transition: transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 500ms ease;
  overflow: hidden;
}

.origin-cover {
  background:
    url("./public/assets/portal/black-ink-bay-cursed-book.png");
  background-size: 126% auto;
  background-repeat: no-repeat;
  background-position: center 48%;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
  filter: brightness(1.25) contrast(1.26) saturate(0.88);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 51% 50%, #000 46%, rgba(0, 0, 0, 0.86) 61%, transparent 78%);
  mask-image: radial-gradient(ellipse at 51% 50%, #000 46%, rgba(0, 0, 0, 0.86) 61%, transparent 78%);
}

.front-cover::before,
.front-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.origin-cover::before {
  width: auto;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(64, 39, 33, 0.92) 12%, rgba(122, 77, 58, 0.26) 17%, transparent 24%),
    linear-gradient(0deg, transparent 0, rgba(0, 0, 0, 0.2) 52%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(194, 138, 46, 0.28) 0, rgba(194, 138, 46, 0.28) 1px, transparent 1px, transparent 38px);
  border-right: 0;
  box-shadow: inset 18px 0 20px rgba(0, 0, 0, 0.58);
}

.origin-cover::after {
  background:
    radial-gradient(circle at 50% 44%, rgba(157, 216, 230, 0.24), transparent 9%),
    radial-gradient(circle at 50% 44%, rgba(0, 0, 0, 0.78), transparent 26%),
    repeating-linear-gradient(84deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 18px);
  mix-blend-mode: normal;
  opacity: 0.72;
}

.front-cover::before {
  width: 18%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(16, 47, 91, 0.78) 44%, rgba(125, 53, 186, 0.28) 78%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 13px);
  border-right: 1px solid rgba(194, 138, 46, 0.34);
  box-shadow: 8px 0 18px rgba(0, 0, 0, 0.34);
}

.front-cover::after {
  background:
    radial-gradient(circle at 78% 18%, rgba(220, 177, 57, 0.28), transparent 7%),
    radial-gradient(circle at 72% 40%, rgba(125, 53, 186, 0.24), transparent 9%),
    repeating-linear-gradient(100deg, transparent 0, transparent 15px, rgba(216, 228, 236, 0.13) 16px, transparent 18px);
  mix-blend-mode: screen;
  opacity: 0.58;
}

.cover-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  padding: 18px;
  border: 1px solid rgba(194, 138, 46, 0.38);
  box-shadow: inset 0 0 0 6px rgba(2, 4, 7, 0.28), inset 0 0 42px rgba(0, 0, 0, 0.58);
}

.issue-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--veil-gold);
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(-8deg);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 0 10px rgba(216, 152, 44, 0.48);
}

.veil-title {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 25%;
  color: var(--veil-purple);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-weight: 900;
  line-height: 0.78;
  text-align: center;
  text-transform: uppercase;
  transform: skew(-5deg) rotate(-2deg);
  text-shadow:
    0 3px 0 #1c071f,
    3px 6px 0 rgba(0, 0, 0, 0.86),
    -3px 0 0 rgba(0, 0, 0, 0.82),
    0 0 16px rgba(125, 53, 186, 0.76);
}

.veil-title-small,
.veil-title-main {
  display: block;
  -webkit-text-stroke: 1px rgba(22, 6, 25, 0.95);
}

.veil-title-small {
  font-size: 1.4rem;
}

.veil-title-main {
  font-size: 3.7rem;
  position: relative;
}

.veil-title-main::before {
  content: "VEIL";
  position: absolute;
  inset: 3px 0 auto;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 9px rgba(0, 0, 0, 0.76);
}

.veil-title::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 10%;
  bottom: -20px;
  height: 24px;
  background:
    linear-gradient(var(--veil-purple), var(--veil-purple)) 8% 0 / 5px 23px no-repeat,
    linear-gradient(var(--veil-purple), var(--veil-purple)) 30% 0 / 4px 15px no-repeat,
    linear-gradient(var(--veil-purple), var(--veil-purple)) 52% 0 / 6px 21px no-repeat,
    linear-gradient(var(--veil-purple), var(--veil-purple)) 74% 0 / 4px 16px no-repeat,
    linear-gradient(var(--veil-purple), var(--veil-purple)) 92% 0 / 5px 24px no-repeat;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.8));
  opacity: 0.78;
}

.cover-subtitle {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 16%;
  color: #a843df;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 0.92;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #120617, 0 0 12px rgba(125, 53, 186, 0.7);
  transform: rotate(-1deg);
}

.cover-subtitle span {
  display: block;
}

.cover-credit {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 5%;
  color: var(--veil-gold);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.55rem;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.95), 0 0 12px rgba(216, 152, 44, 0.44);
  transform: rotate(-3deg);
}

.origin-cover-frame {
  border-color: rgba(122, 88, 60, 0.52);
  box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.28), inset 0 0 60px rgba(0, 0, 0, 0.82);
}

.origin-mark {
  position: absolute;
  top: 8%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 78px;
  aspect-ratio: 1;
  color: rgba(222, 239, 236, 0.88);
  border: 1px solid rgba(157, 216, 230, 0.28);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 7, 8, 0.92), rgba(0, 0, 0, 0.46));
  box-shadow: 0 0 28px rgba(157, 216, 230, 0.18), inset 0 0 18px rgba(0, 0, 0, 0.7);
  font-weight: 900;
  transform: translateX(-50%);
}

.origin-title {
  position: absolute;
  inset: 30% 12% auto;
  display: grid;
  gap: 2px;
  color: #dbc0a4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.18rem;
  font-weight: 800;
  line-height: 0.92;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.88), 0 0 16px rgba(157, 216, 230, 0.16);
}

.origin-title span {
  display: block;
}

.origin-subtitle {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 13%;
  color: rgba(194, 138, 46, 0.9);
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 0 12px rgba(194, 138, 46, 0.24);
}

.main-origin-book .origin-cover::before {
  display: none;
}

.main-origin-book .origin-cover::after {
  background:
    radial-gradient(ellipse at 51% 84%, rgba(29, 142, 218, 0.24), transparent 15%),
    linear-gradient(180deg, transparent 72%, rgba(7, 18, 24, 0.24));
  mix-blend-mode: screen;
  opacity: 0.5;
}

.portal-library {
  width: min(1180px, 100%);
  margin: 26px auto 10px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 360ms ease, transform 360ms ease;
}

.portal-screen.is-library-open {
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
}

.portal-screen.is-library-open .main-book-button {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.82);
}

.portal-screen.is-library-open .portal-library {
  opacity: 1;
  transform: translateY(0);
}

.library-heading {
  text-align: center;
  margin-bottom: 16px;
}

.library-heading h2 {
  margin-bottom: 0;
  font-size: 1.7rem;
}

.portal-object-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.first-visitor-path {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr);
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--file-line);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(5, 8, 10, 0.94), rgba(12, 18, 23, 0.74)),
    repeating-linear-gradient(0deg, rgba(210, 178, 123, 0.045) 0 1px, transparent 1px 10px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    0 18px 56px rgba(0, 0, 0, 0.42);
}

.first-visitor-path > div {
  display: grid;
  gap: 5px;
}

.first-visitor-path > div span,
.first-visitor-path button em {
  color: var(--orange);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.first-visitor-path > div strong {
  color: var(--text);
  font-family: "Cinzel", "Georgia", "Times New Roman", serif;
  font-size: 1.1rem;
}

.first-visitor-path > div p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.first-visitor-path ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.first-visitor-path button {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(210, 178, 123, 0.26);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(13, 20, 25, 0.92), rgba(2, 5, 7, 0.84));
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.first-visitor-path button:hover {
  border-color: rgba(157, 216, 230, 0.52);
  transform: translateY(-1px);
}

.first-visitor-path button span {
  color: var(--text);
  font-weight: 900;
}

.first-visitor-path button small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.38;
}

.story-trails {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(157, 216, 230, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(3, 7, 10, 0.9), rgba(11, 12, 17, 0.72)),
    repeating-linear-gradient(90deg, rgba(157, 216, 230, 0.032) 0 1px, transparent 1px 11px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    0 16px 48px rgba(0, 0, 0, 0.36);
}

.story-trails-heading {
  display: grid;
  gap: 5px;
  max-width: 860px;
}

.story-trails-heading span,
.story-trail-grid button em {
  color: var(--cyan);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.story-trails-heading strong {
  color: var(--text);
  font-family: "Cinzel", "Georgia", "Times New Roman", serif;
  font-size: 1.15rem;
}

.story-trails-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.story-trail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.story-trail-grid button {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 168px;
  padding: 12px;
  border: 1px solid rgba(157, 216, 230, 0.2);
  border-radius: 6px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(13, 20, 25, 0.9), rgba(2, 4, 7, 0.86));
  text-align: left;
  cursor: pointer;
}

.story-trail-grid button:hover {
  border-color: rgba(210, 178, 123, 0.52);
  transform: translateY(-1px);
}

.story-trail-grid button span {
  color: var(--paper);
  font-weight: 950;
  line-height: 1.15;
}

.story-trail-grid button small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.38;
}

.story-trail-grid button b {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  font-weight: 700;
}

.story-trail-grid button i {
  display: inline-block;
  padding: 3px 5px;
  color: rgba(237, 244, 245, 0.76);
  border: 1px solid rgba(210, 178, 123, 0.18);
  border-radius: 4px;
  font-size: 0.64rem;
  font-style: normal;
  line-height: 1.1;
}

.portal-object {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  min-height: 166px;
  padding: 15px;
  border: 1px solid rgba(210, 178, 123, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(7, 11, 15, 0.88), rgba(2, 5, 7, 0.74)),
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.028) 0 1px, transparent 1px 8px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    0 16px 44px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.portal-object:hover {
  border-color: rgba(157, 216, 230, 0.52);
  transform: translateY(-2px);
}

.portal-object-community,
.portal-object-about {
  grid-column: 3;
  min-height: 104px;
  grid-template-columns: 150px minmax(0, 1fr);
  margin-left: auto;
  opacity: 0.78;
  border-color: rgba(157, 216, 230, 0.18);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(9, 13, 17, 0.86)),
    radial-gradient(circle at 8% 50%, rgba(157, 216, 230, 0.1), transparent 36%);
}

.portal-object-community:hover,
.portal-object-about:hover {
  opacity: 1;
}

.portal-object-art {
  position: relative;
  display: block;
  width: 100px;
  height: 130px;
  max-width: 100%;
  transform: rotate(-4deg);
}

.portal-object-art img {
  position: absolute;
  display: block;
  width: 74px;
  height: 104px;
  object-fit: cover;
  border: 1px solid rgba(210, 178, 123, 0.42);
  border-radius: 5px;
  box-shadow: 0 18px 24px rgba(0, 0, 0, 0.52);
}

.portal-object-image {
  width: 112px;
  height: 112px;
  transform: rotate(-4deg);
}

.portal-object-image img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.72);
  border-color: rgba(210, 178, 123, 0.5);
}

.portal-object-image-origin img {
  object-fit: cover;
  object-position: center;
}

.portal-object-image-community,
.portal-object-image-about {
  width: 148px;
  height: 70px;
  transform: rotate(0deg);
}

.portal-object-image-community img,
.portal-object-image-about img {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.portal-object-image-about img {
  object-fit: cover;
  object-position: center 34%;
}

.publication-stack img:first-child {
  left: 16px;
  top: 10px;
  transform: rotate(8deg);
}

.publication-stack img:last-child {
  left: 0;
  top: 0;
  transform: rotate(-8deg);
}

.story-issue-stack {
  transform: rotate(-5deg);
}

.story-issue-stack img {
  left: 13px;
  top: 10px;
  width: 78px;
  height: 112px;
  border-color: rgba(91, 230, 210, 0.72);
}

.issue-feature-label {
  position: absolute;
  z-index: 2;
  left: -9px;
  top: 1px;
  max-width: 92px;
  padding: 4px 6px;
  color: #051417;
  background: #fbd657;
  border: 1px solid rgba(0, 0, 0, 0.48);
  font-size: 0.54rem;
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

.dossier-stack {
  transform: rotate(3deg);
}

.dossier-sheet {
  position: absolute;
  display: block;
  width: 76px;
  height: 98px;
  border: 1px solid rgba(210, 178, 123, 0.4);
  border-radius: 4px;
  background:
    linear-gradient(rgba(157, 216, 230, 0.35), rgba(157, 216, 230, 0.35)) 14px 24px / 42px 2px no-repeat,
    linear-gradient(rgba(210, 178, 123, 0.42), rgba(210, 178, 123, 0.42)) 14px 36px / 48px 1px no-repeat,
    linear-gradient(rgba(210, 178, 123, 0.3), rgba(210, 178, 123, 0.3)) 14px 48px / 42px 1px no-repeat,
    linear-gradient(135deg, rgba(21, 28, 34, 0.96), rgba(4, 6, 8, 0.96));
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.46);
}

.dossier-sheet.sheet-one {
  left: 6px;
  top: 16px;
  transform: rotate(-9deg);
}

.dossier-sheet.sheet-two {
  left: 22px;
  top: 2px;
  transform: rotate(7deg);
}

.dossier-photo {
  position: absolute;
  left: 30px;
  top: 30px;
  display: block;
  width: 46px;
  height: 56px;
  border: 1px solid rgba(194, 138, 46, 0.64);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 34%, rgba(210, 178, 123, 0.82) 0 8px, transparent 9px),
    radial-gradient(circle at 50% 82%, rgba(125, 53, 186, 0.58) 0 18px, transparent 19px),
    linear-gradient(135deg, #111c2b, #05070a);
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}

.object-face,
.object-detail {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 5px;
}

.object-face {
  border: 1px solid rgba(210, 178, 123, 0.42);
  background: linear-gradient(135deg, #101820, #05070a);
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.42);
}

.object-detail {
  pointer-events: none;
}

.portal-object-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.portal-object-copy span {
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-object-copy strong {
  font-size: 1rem;
  line-height: 1.08;
}

.portal-object-copy em {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.35;
}

.portal-object-origin .object-face {
  background:
    radial-gradient(circle at 52% 38%, rgba(157, 216, 230, 0.24), transparent 10%),
    linear-gradient(135deg, #5e3a2d, #15100e 48%, #020303);
  border-color: rgba(122, 88, 60, 0.8);
}

.portal-object-origin .object-detail {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent 22%),
    repeating-linear-gradient(0deg, transparent 0, transparent 18px, rgba(194, 138, 46, 0.22) 19px, transparent 20px);
}

.portal-object-constitution .object-face {
  background:
    radial-gradient(circle at 50% 22%, rgba(210, 178, 123, 0.34), transparent 12%),
    linear-gradient(135deg, #241a14, #05070a 62%, #111820);
  border-color: rgba(210, 178, 123, 0.72);
}

.portal-object-constitution .object-detail {
  inset: 12px 14px;
  border: 1px solid rgba(157, 216, 230, 0.2);
  background:
    linear-gradient(rgba(210, 178, 123, 0.8), rgba(210, 178, 123, 0.8)) 50% 18% / 34px 2px no-repeat,
    linear-gradient(rgba(210, 178, 123, 0.45), rgba(210, 178, 123, 0.45)) 50% 34% / 42px 1px no-repeat,
    linear-gradient(rgba(210, 178, 123, 0.45), rgba(210, 178, 123, 0.45)) 50% 48% / 42px 1px no-repeat,
    linear-gradient(rgba(210, 178, 123, 0.45), rgba(210, 178, 123, 0.45)) 50% 62% / 42px 1px no-repeat;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.62);
}

.portal-object-veil .object-face {
  background:
    linear-gradient(180deg, rgba(1, 4, 9, 0.04), rgba(3, 3, 7, 0.74)),
    url("./public/assets/references/the-veil-character-sheet.webp");
  background-size: cover;
  background-position: center top;
  border-color: rgba(194, 138, 46, 0.74);
}

.portal-object-veil .object-detail {
  background:
    linear-gradient(90deg, rgba(125, 53, 186, 0.42), transparent 24%),
    radial-gradient(circle at 72% 20%, rgba(194, 138, 46, 0.42), transparent 10%);
}

.portal-object-stories .object-face,
.portal-object-publications .object-face,
.portal-object-dossiers .object-face {
  background:
    linear-gradient(110deg, rgba(125, 53, 186, 0.32), transparent 38%),
    linear-gradient(135deg, #112033, #05070a);
}

.portal-object-stories .object-detail,
.portal-object-publications .object-detail,
.portal-object-dossiers .object-detail {
  inset: 8px -8px -8px 8px;
  border: 1px solid rgba(157, 216, 230, 0.18);
  background: linear-gradient(135deg, rgba(16, 47, 91, 0.9), rgba(5, 7, 10, 0.96));
  z-index: -1;
}

.portal-object-dossiers .object-face {
  background:
    radial-gradient(circle at 65% 28%, rgba(210, 178, 123, 0.28), transparent 16%),
    linear-gradient(110deg, rgba(125, 53, 186, 0.22), transparent 42%),
    linear-gradient(135deg, #13202c, #05070a);
}

.portal-object-bipd .object-face {
  height: 72px;
  top: 18px;
  background: linear-gradient(135deg, #9d825a, #453726);
  border-color: rgba(210, 178, 123, 0.65);
}

.portal-object-bipd .object-detail {
  inset: 12px 7px auto;
  height: 18px;
  border-radius: 4px 4px 0 0;
  background: #bca174;
}

.portal-object-radio .object-face {
  inset: 20px 0 16px;
  border-radius: 7px;
  background:
    radial-gradient(circle at 74% 48%, rgba(157, 216, 230, 0.85) 0 6px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(157, 216, 230, 0.24) 0, rgba(157, 216, 230, 0.24) 2px, transparent 2px, transparent 7px),
    linear-gradient(135deg, #16202a, #05070a);
}

.portal-object-radio .object-detail {
  inset: -2px auto auto 38px;
  width: 2px;
  height: 42px;
  background: rgba(157, 216, 230, 0.58);
  transform: rotate(-24deg);
}

.portal-object-map .object-face {
  height: 78px;
  top: 14px;
  border-radius: 50% / 18%;
  background:
    linear-gradient(90deg, rgba(157, 216, 230, 0.32), transparent),
    linear-gradient(135deg, #24313a, #101820);
}

.portal-object-map .object-detail {
  inset: 12px 16px;
  border: 1px solid rgba(194, 138, 46, 0.26);
  background:
    linear-gradient(45deg, transparent 0 45%, rgba(194, 138, 46, 0.5) 46% 48%, transparent 49%),
    linear-gradient(-35deg, transparent 0 54%, rgba(157, 216, 230, 0.34) 55% 57%, transparent 58%);
}

.portal-object-docks .object-face {
  inset: 26px 0 12px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 18%),
    repeating-linear-gradient(0deg, rgba(194, 138, 46, 0.24) 0, rgba(194, 138, 46, 0.24) 1px, transparent 1px, transparent 16px),
    linear-gradient(135deg, #32251a, #0c1115);
  border-color: rgba(194, 138, 46, 0.34);
}

.portal-object-docks .object-detail {
  inset: 13px 11px auto;
  height: 18px;
  border-radius: 2px;
  background: rgba(194, 138, 46, 0.42);
  box-shadow: 0 46px 0 rgba(0, 0, 0, 0.22);
}

.community-visual {
  min-height: 280px;
  background:
    radial-gradient(circle at 50% 50%, rgba(157, 216, 230, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(6, 9, 13, 0.92), rgba(0, 0, 0, 0.94));
}

.community-visual img {
  max-width: min(640px, 92%);
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.58));
}

.portal-instruction {
  color: var(--muted);
  margin: 0;
}

.library-footer,
.archive-footer {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 22px;
}

.close-book-button {
  border-color: rgba(210, 178, 123, 0.38);
  color: var(--danger);
  background: rgba(0, 0, 0, 0.38);
}

.radio-beacon {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 1px solid rgba(244, 85, 71, 0.5);
  border-radius: 16px;
  background: rgba(6, 8, 10, 0.78);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.58), 0 0 22px rgba(203, 32, 45, 0.22);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease;
}

body.book-opened .radio-beacon {
  opacity: 1;
  pointer-events: auto;
}

.radio-beacon:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 85, 71, 0.88);
}

.radio-dock {
  position: fixed;
  right: 104px;
  bottom: 22px;
  z-index: 19;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: min(430px, calc(100vw - 142px));
  min-height: 70px;
  padding: 18px 12px 10px;
  color: var(--text);
  border: 1px solid rgba(244, 85, 71, 0.34);
  border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.045) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, rgba(5, 8, 11, 0.9), rgba(0, 0, 0, 0.8));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.56), inset 0 0 22px rgba(203, 32, 45, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  backdrop-filter: blur(10px);
  transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, width 220ms ease;
}

body.book-opened .radio-dock {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.book-opened {
  padding-bottom: 110px;
}

.radio-dock.is-playing {
  border-color: rgba(244, 85, 71, 0.68);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.58), 0 0 26px rgba(203, 32, 45, 0.24);
}

.radio-dock-collapse {
  position: absolute;
  top: 5px;
  right: 9px;
  padding: 0;
  color: rgba(157, 216, 230, 0.82);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.52rem;
  font-weight: 950;
  letter-spacing: 0;
}

.radio-dock.is-collapsed {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 190px;
  gap: 8px;
}

.radio-dock.is-collapsed .radio-dock-readout span,
.radio-dock.is-collapsed .radio-dock-readout em,
.radio-dock.is-collapsed .radio-dock-button {
  display: none;
}

.radio-dock.is-collapsed .radio-dock-controls {
  grid-template-columns: 52px;
}

.radio-dock.is-collapsed .radio-dock-readout strong {
  font-size: 0.7rem;
}

.radio-dock-readout {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.radio-dock-readout span {
  color: var(--orange);
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.radio-dock-readout strong,
.radio-dock-readout em {
  overflow-wrap: anywhere;
}

.radio-dock-readout strong {
  font-size: 0.86rem;
  line-height: 1.1;
}

.radio-dock-readout em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.2;
}

.radio-dock-controls {
  display: grid;
  grid-template-columns: 48px 58px 48px;
  gap: 6px;
  align-items: center;
}

.radio-dock-button,
.radio-dock-play {
  color: var(--text);
  border: 1px solid rgba(157, 216, 230, 0.22);
  background: rgba(0, 0, 0, 0.34);
  cursor: pointer;
}

.radio-dock-button {
  min-height: 38px;
  border-radius: 7px;
  color: var(--cyan);
  font-size: 0.6rem;
  font-weight: 950;
}

.radio-dock-play {
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  border-radius: 50%;
  border-color: rgba(244, 85, 71, 0.58);
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 85, 71, 0.36) 0 24%, transparent 25%),
    repeating-conic-gradient(from -10deg, rgba(157, 216, 230, 0.2) 0 8deg, transparent 8deg 17deg),
    radial-gradient(circle, #141b20, #020405 72%);
  box-shadow: 0 0 22px rgba(203, 32, 45, 0.2), inset 0 0 18px rgba(0, 0, 0, 0.68);
}

.radio-dock-play span {
  display: grid;
  place-items: center;
  width: 36px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(4, 5, 6, 0.84);
  color: #fff3f0;
  font-size: 0.54rem;
  font-weight: 950;
}

.radio-dock-button:disabled,
.radio-dock-play:disabled,
.radio-skip-button:disabled,
.radio-dial-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.radio-bird,
.radio-bird-large {
  position: relative;
  display: block;
  width: 46px;
  height: 40px;
  background: url("./public/assets/media/pirate-radio/red-bird-icon-review-build-3.png") center / contain no-repeat;
}

.radio-bird::before,
.radio-bird-large::before {
  content: "";
  display: none;
}

.radio-wing {
  display: none;
}

.radio-beak {
  display: none;
}

.radio-wave {
  display: none;
}

.wave-one {
  width: 11px;
  height: 11px;
}

.wave-two {
  width: 19px;
  height: 19px;
  opacity: 0.72;
}

.wave-three {
  width: 28px;
  height: 28px;
  opacity: 0.46;
}

.portal-screen.is-library-opening,
.portal-screen.is-opening {
  pointer-events: none;
}

.portal-screen.is-library-opening .book,
.portal-screen.is-opening .book {
  transform: rotateX(18deg) rotateZ(0deg) translateY(-30px) scale(1.14);
}

.portal-screen.is-library-opening .front-cover,
.portal-screen.is-opening .front-cover {
  transform: translateZ(22px) rotateY(-146deg);
  filter: brightness(1.2);
}

.portal-screen.is-library-opening .book-page,
.portal-screen.is-opening .book-page {
  opacity: 1;
}

body.archive-open .portal-screen {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

.archive-shell {
  position: relative;
  padding: 20px;
  isolation: isolate;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.archive-shell.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.city-backdrop {
  position: fixed;
}

.archive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1480px, 100%);
  margin: 0 auto 18px;
  padding: 16px 18px;
  background: rgba(5, 8, 11, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
}

.archive-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.mode-toggle {
  min-height: 43px;
  padding: 0 14px;
  color: var(--cyan);
  border: 1px solid rgba(157, 216, 230, 0.28);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(157, 216, 230, 0.12), rgba(0, 0, 0, 0.18)),
    rgba(5, 8, 11, 0.78);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mode-toggle[aria-pressed="true"] {
  color: #180f07;
  border-color: rgba(215, 131, 61, 0.72);
  background:
    linear-gradient(135deg, rgba(215, 131, 61, 0.95), rgba(210, 178, 123, 0.76)),
    #d7833d;
}

.archive-header h2 {
  margin: 0;
  font-size: 1.6rem;
}

.archive-shell[data-room="stories"] .city-backdrop {
  background-image:
    linear-gradient(90deg, rgba(4, 5, 8, 0.88), rgba(15, 20, 31, 0.72), rgba(4, 5, 8, 0.92)),
    url("./public/assets/references/the-veil-rooftop.webp");
  background-position: center top;
}

.archive-shell[data-room="publications"] .city-backdrop {
  background-image:
    linear-gradient(90deg, rgba(3, 3, 4, 0.9), rgba(41, 28, 8, 0.64), rgba(3, 3, 4, 0.9)),
    url("./public/assets/publications/weaver-issue-3-cover.png");
  background-size: cover;
  background-position: center;
}

.archive-shell[data-room="bipd"] .city-backdrop {
  background-image:
    linear-gradient(rgba(11, 8, 5, 0.88), rgba(3, 3, 4, 0.94)),
    repeating-linear-gradient(90deg, rgba(210, 178, 123, 0.05) 0 1px, transparent 1px 18px);
}

.archive-shell[data-room="map"] .city-backdrop {
  background-image:
    linear-gradient(rgba(2, 7, 9, 0.86), rgba(2, 5, 8, 0.94)),
    url("./public/assets/references/black-ink-bay-crescent-city-reference.png");
}

.archive-shell[data-room="docks"] .city-backdrop,
.archive-shell[data-room="radio"] .city-backdrop {
  background-image:
    linear-gradient(rgba(2, 5, 7, 0.82), rgba(1, 3, 5, 0.96)),
    url("./public/assets/references/black-ink-bay-crescent-city-reference.png");
  background-position: center bottom;
}

.room-stage {
  width: min(1480px, 100%);
  margin: 0 auto;
}

.topic-room {
  display: grid;
  gap: 16px;
}

.room-hero {
  display: grid;
  grid-template-columns: minmax(260px, 460px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.room-visual,
.room-copy,
.room-file-rail,
.room-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 9, 12, 0.78);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(15px);
}

.room-visual {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}

.room-visual-image {
  display: grid;
  place-items: center;
  padding: 12px;
  background:
    radial-gradient(circle at 50% 42%, rgba(157, 216, 230, 0.08), transparent 38%),
    linear-gradient(135deg, rgba(6, 10, 14, 0.96), rgba(0, 0, 0, 0.96));
}

.room-visual-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: contain;
  border-radius: calc(var(--radius) - 2px);
  filter: contrast(1.04) brightness(1.02);
}

.room-copy {
  display: grid;
  align-content: end;
  padding: 24px;
}

.room-copy h3 {
  margin-bottom: 12px;
  font-size: 2.9rem;
  line-height: 0.98;
}

.room-copy p:last-child {
  max-width: 740px;
  color: #d8e3e5;
  font-size: 1.08rem;
  line-height: 1.58;
}

.room-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.room-file-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  padding: 12px;
}

.room-file-rail-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid rgba(157, 216, 230, 0.14);
}

.room-file-rail-heading span {
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.room-file-rail-heading strong {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
}

.room-file-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 82px;
  padding: 10px;
  color: var(--text);
  border: 1px solid rgba(157, 216, 230, 0.18);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  text-align: left;
}

.room-file-card[aria-pressed="true"] {
  border-color: rgba(215, 131, 61, 0.7);
  background: rgba(215, 131, 61, 0.12);
}

.room-file-card img {
  width: 48px;
  height: 66px;
  object-fit: cover;
  border: 1px solid rgba(210, 178, 123, 0.34);
  border-radius: 4px;
}

.room-file-card span {
  display: grid;
  gap: 5px;
}

.room-file-card em {
  color: var(--orange);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.room-file-card strong {
  line-height: 1.1;
}

.room-file-icon {
  width: 48px;
  height: 54px;
  border: 1px solid rgba(157, 216, 230, 0.22);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(22, 32, 42, 0.9), rgba(5, 7, 10, 0.94));
}

.room-file-icon-bipd {
  height: 38px;
  background: linear-gradient(135deg, #b99961, #4c3824);
}

.room-file-icon-publications {
  background: linear-gradient(135deg, #d6a40b, #0a0804 54%, #111820);
}

.room-file-icon-stories {
  background:
    radial-gradient(circle at 64% 25%, rgba(194, 138, 46, 0.42), transparent 14%),
    linear-gradient(135deg, #102f5b, #05070a 70%);
}

.room-file-icon-dossiers {
  background:
    linear-gradient(rgba(157, 216, 230, 0.34), rgba(157, 216, 230, 0.34)) 13px 17px / 22px 2px no-repeat,
    linear-gradient(rgba(210, 178, 123, 0.34), rgba(210, 178, 123, 0.34)) 13px 27px / 28px 1px no-repeat,
    radial-gradient(circle at 50% 70%, rgba(125, 53, 186, 0.32), transparent 28%),
    linear-gradient(135deg, #172331, #05070a 72%);
}

.room-detail {
  min-height: 460px;
  padding: 22px;
}

.room-detail-profile {
  overflow: hidden;
  padding: 0;
  border-color: rgba(157, 216, 230, 0.24);
  background:
    radial-gradient(circle at 18% 14%, rgba(125, 53, 186, 0.16), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(215, 131, 61, 0.12), transparent 26%),
    rgba(5, 8, 11, 0.82);
}

.profile-shell {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 0;
}

.profile-identity {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  border-right: 1px solid rgba(157, 216, 230, 0.16);
  background:
    linear-gradient(180deg, rgba(8, 13, 18, 0.74), rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.055) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(157, 216, 230, 0.04) 0 1px, transparent 1px 32px);
}

.profile-identity::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(215, 131, 61, 0.22);
  transform: rotate(-1deg);
  pointer-events: none;
}

.profile-portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 250px);
  aspect-ratio: 4 / 5;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(157, 216, 230, 0.34);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 32%, rgba(157, 216, 230, 0.24), transparent 26%),
    linear-gradient(135deg, rgba(16, 47, 91, 0.88), rgba(5, 7, 10, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.profile-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.profile-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-anyall .profile-portrait img {
  object-fit: contain;
  background: #020509;
}

.profile-trever-cadillac .profile-portrait img {
  object-position: center 38%;
}

.profile-portrait-placeholder span {
  color: var(--text);
  font-size: 3.6rem;
  font-weight: 900;
}

.profile-portrait-placeholder em {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--orange);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.profile-station-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(215, 131, 61, 0.32);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 50%, rgba(215, 131, 61, 0.18), transparent 30%),
    rgba(0, 0, 0, 0.3);
}

.profile-station-card span,
.profile-facts dt,
.profile-board-grid h4 {
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-station-card strong {
  color: var(--text);
  line-height: 1.1;
}

.profile-station-card em,
.profile-facts dd {
  color: var(--muted);
  font-style: normal;
}

.profile-facts {
  display: grid;
  gap: 10px;
  margin: 0;
}

.profile-facts div {
  padding: 10px 0;
  border-bottom: 1px solid rgba(157, 216, 230, 0.12);
}

.profile-main {
  padding: 24px;
}

.profile-main h3 {
  margin: 0 0 8px;
  font-size: 3.9rem;
  line-height: 0.94;
}

.profile-badge-line {
  margin: 0 0 14px;
  color: var(--orange);
  font-weight: 900;
  text-transform: uppercase;
}

.profile-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.profile-aliases span {
  min-height: 30px;
  padding: 7px 10px;
  color: var(--text);
  border: 1px solid rgba(157, 216, 230, 0.18);
  border-radius: 999px;
  background: rgba(157, 216, 230, 0.08);
  font-size: 0.82rem;
  font-weight: 800;
}

.profile-case-file {
  display: grid;
  gap: 12px;
  margin: 16px 0 18px;
  padding: 14px;
  border: 1px solid rgba(210, 178, 123, 0.22);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(210, 178, 123, 0.08), transparent 48%),
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.04) 0 1px, transparent 1px 18px),
    rgba(2, 5, 8, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.profile-case-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(157, 216, 230, 0.14);
}

.profile-case-heading span,
.profile-case-heading strong {
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-case-heading strong {
  color: var(--muted);
}

.profile-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-case-grid section {
  min-height: 116px;
  padding: 12px;
  border: 1px solid rgba(157, 216, 230, 0.13);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(0, 0, 0, 0.24);
}

.profile-case-grid h4 {
  margin: 0 0 8px;
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-case-grid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 17px;
}

.profile-case-grid li {
  color: #d8e3e5;
  font-size: 0.9rem;
  line-height: 1.45;
}

.profile-gallery {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid rgba(157, 216, 230, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(157, 216, 230, 0.07), transparent 42%),
    rgba(0, 0, 0, 0.22);
}

.profile-gallery-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.profile-gallery-heading span,
.profile-gallery-heading strong {
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-gallery-heading strong {
  color: var(--muted);
}

.profile-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.profile-gallery figure {
  position: relative;
  overflow: hidden;
  min-height: 124px;
  margin: 0;
  border: 1px solid rgba(210, 178, 123, 0.18);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.36);
}

.profile-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 124px;
  object-fit: cover;
}

.key-dossier-grid {
  margin: 22px 0;
  padding: 14px;
  border: 1px solid rgba(157, 216, 230, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(4, 7, 10, 0.9), rgba(13, 18, 23, 0.76)),
    repeating-linear-gradient(90deg, rgba(157, 216, 230, 0.026) 0 1px, transparent 1px 12px);
}

.key-dossier-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(210, 178, 123, 0.18);
}

.key-dossier-heading span {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.key-dossier-heading strong {
  color: var(--gold);
  font-family: "Cinzel", "Georgia", "Times New Roman", serif;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.key-dossier-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.key-dossier-tile {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 84px;
  padding: 8px;
  border: 1px solid rgba(210, 178, 123, 0.22);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.key-dossier-tile:hover,
.key-dossier-tile:focus-visible {
  border-color: rgba(157, 216, 230, 0.56);
  transform: translateY(-1px);
}

.key-dossier-tile img,
.key-dossier-tile > span {
  grid-row: span 2;
  width: 62px;
  height: 68px;
  border: 1px solid rgba(157, 216, 230, 0.22);
  border-radius: 4px;
  object-fit: cover;
  background: #05070a;
}

.key-dossier-tile > span {
  display: grid;
  place-items: center;
  color: var(--cyan);
  font-family: "Cinzel", "Georgia", "Times New Roman", serif;
  font-weight: 900;
}

.key-dossier-tile strong {
  align-self: end;
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
}

.key-dossier-tile em {
  align-self: start;
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.35;
}

.profile-anyall .profile-gallery img,
.profile-sling .profile-gallery img {
  object-fit: contain;
  background: #020509;
}

.profile-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
  gap: 14px;
}

.profile-board-grid section {
  padding: 14px;
  border: 1px solid rgba(157, 216, 230, 0.14);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
}

.profile-board-grid section:nth-child(3),
.profile-board-grid section:nth-child(4) {
  background: rgba(215, 131, 61, 0.075);
}

.profile-board-grid p,
.profile-board-grid li {
  color: #d8e3e5;
  line-height: 1.58;
}

.profile-gladys-rolls .profile-shell {
  background:
    radial-gradient(circle at 16% 12%, rgba(232, 237, 240, 0.13), transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(124, 14, 24, 0.16), transparent 30%),
    rgba(5, 7, 9, 0.82);
}

.profile-gladys-rolls .profile-portrait {
  border-color: rgba(232, 237, 240, 0.34);
}

.profile-lexis-park .profile-shell {
  background:
    radial-gradient(circle at 16% 14%, rgba(244, 85, 71, 0.18), transparent 30%),
    radial-gradient(circle at 82% 14%, rgba(125, 53, 186, 0.2), transparent 34%),
    rgba(6, 5, 9, 0.86);
}

.profile-lexis-park .profile-portrait {
  border-color: rgba(244, 85, 71, 0.38);
}

.community-detail .room-detail-cover {
  display: grid;
  place-items: center;
  min-height: 180px;
  background:
    radial-gradient(circle at 50% 50%, rgba(157, 216, 230, 0.12), transparent 34%),
    rgba(0, 0, 0, 0.24);
}

.community-detail .room-detail-cover img {
  width: min(560px, 94%);
  max-height: 140px;
  object-fit: contain;
}

.community-warning {
  display: grid;
  gap: 6px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(244, 85, 71, 0.48);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(244, 85, 71, 0.16), rgba(0, 0, 0, 0.18));
}

.community-warning strong {
  color: #ffb2a9;
  text-transform: uppercase;
}

.community-warning span {
  color: #dce9eb;
  line-height: 1.45;
}

.community-form-prototype {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(157, 216, 230, 0.16);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.24);
}

.community-form-prototype label {
  display: grid;
  gap: 6px;
}

.community-form-prototype span {
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.community-form-prototype input,
.community-form-prototype select,
.community-form-prototype textarea {
  width: 100%;
  border: 1px solid rgba(157, 216, 230, 0.18);
  border-radius: 0;
  padding: 11px 12px;
  color: var(--text);
  background: rgba(2, 4, 7, 0.7);
}

.community-form-prototype select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, rgba(210, 178, 123, 0.92) 50%),
    linear-gradient(135deg, rgba(210, 178, 123, 0.92) 50%, transparent 50%),
    rgba(2, 4, 7, 0.7);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
}

.community-form-prototype textarea {
  min-height: 120px;
  resize: vertical;
}

.community-consent {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.community-consent input {
  width: 18px;
  margin-top: 2px;
  accent-color: var(--paper);
}

.community-consent span {
  color: #cbd8dc;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
  text-transform: none;
}

.community-form-prototype button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.feedback-dashboard {
  margin: 0 0 18px;
  border: 1px solid rgba(210, 178, 123, 0.28);
  background: rgba(0, 0, 0, 0.28);
}

.feedback-dashboard-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(210, 178, 123, 0.2);
  color: var(--paper);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.feedback-table {
  display: grid;
  gap: 1px;
  background: rgba(210, 178, 123, 0.12);
}

.feedback-row,
.feedback-empty {
  margin: 0;
  padding: 12px 13px;
  background: rgba(5, 7, 10, 0.94);
}

.feedback-row {
  display: grid;
  gap: 8px;
}

.feedback-row div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--paper);
  font-size: 0.82rem;
}

.feedback-row span,
.feedback-empty {
  color: var(--muted);
}

.feedback-row p {
  margin: 0;
  color: #dce9eb;
  line-height: 1.5;
}

.about-visual {
  background:
    radial-gradient(circle at 50% 36%, rgba(194, 138, 46, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(5, 8, 11, 0.98), rgba(14, 18, 23, 0.92));
}

.about-visual img {
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.82) contrast(1.08) brightness(0.88);
}

.about-author-detail {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(157, 216, 230, 0.14), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(215, 131, 61, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(8, 13, 18, 0.94), rgba(3, 5, 8, 0.88));
}

.about-author-hero {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.about-author-portrait {
  position: relative;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(210, 178, 123, 0.34);
  border-radius: 6px;
  background: #040608;
  box-shadow: 0 24px 74px rgba(0, 0, 0, 0.42);
}

.about-author-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.78)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 6px);
}

.about-author-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(0.82) contrast(1.08) brightness(0.84);
}

.about-author-portrait figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.about-author-copy {
  display: grid;
  align-content: center;
  padding: 12px 0;
}

.about-author-copy h3 {
  margin-bottom: 10px;
  color: var(--paper);
  font-family: "Cinzel", "Georgia", "Times New Roman", serif;
  font-size: 4.2rem;
  line-height: 0.95;
  text-transform: uppercase;
}

.about-author-copy blockquote {
  margin: 20px 0 0;
  padding: 16px 18px;
  color: var(--text);
  border-left: 3px solid var(--orange);
  background:
    linear-gradient(90deg, rgba(215, 131, 61, 0.12), transparent),
    rgba(0, 0, 0, 0.2);
}

.about-author-copy blockquote p {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.62;
}

.about-author-body {
  display: grid;
  gap: 14px;
  max-width: 880px;
  margin: 26px auto 0;
}

.about-author-body p,
.about-author-ai p {
  margin: 0;
  color: #d8e3e5;
  font-size: 1.04rem;
  line-height: 1.72;
}

.about-author-ai {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 26px 0 0;
  padding: 18px;
  border: 1px solid rgba(157, 216, 230, 0.22);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(157, 216, 230, 0.08), transparent),
    repeating-linear-gradient(0deg, rgba(210, 178, 123, 0.04) 0 1px, transparent 1px 12px);
}

.about-author-ai span {
  display: block;
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.about-author-ai strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-family: "Cinzel", "Georgia", "Times New Roman", serif;
  font-size: 1.15rem;
}

.about-author-support {
  margin-top: 22px;
}

.room-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  gap: 18px;
}

.room-detail-cover {
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(157, 216, 230, 0.18);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.24);
}

.room-detail-cover img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.34);
}

.room-detail-grid section {
  padding: 14px;
  border: 1px solid rgba(210, 178, 123, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(6, 10, 13, 0.78), rgba(0, 0, 0, 0.24)),
    repeating-linear-gradient(0deg, rgba(210, 178, 123, 0.028) 0 1px, transparent 1px 9px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.52);
}

.room-detail-grid-support {
  margin-top: 16px;
}

.subfile-stack {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.subfile-stack-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 4px;
}

.subfile-stack-heading span,
.subfile-module summary span,
.subfile-summary span {
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.subfile-stack-heading strong {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.subfile-module {
  overflow: hidden;
  border: 1px solid rgba(210, 178, 123, 0.28);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(8, 13, 17, 0.94), rgba(2, 5, 7, 0.84)),
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.026) 0 1px, transparent 1px 7px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.66),
    0 14px 36px rgba(0, 0, 0, 0.2);
}

.subfile-module summary,
.subfile-summary {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 13px 16px;
}

.subfile-module summary {
  cursor: pointer;
  list-style: none;
}

.subfile-module summary::-webkit-details-marker {
  display: none;
}

.subfile-module summary::after {
  content: "OPEN";
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 950;
}

.subfile-module[open] summary::after {
  content: "CLOSE";
  color: var(--paper);
}

.subfile-module strong,
.subfile-summary strong {
  color: var(--text);
  font-family: "Cinzel", "Georgia", "Times New Roman", serif;
  font-size: 0.98rem;
}

.subfile-body {
  display: grid;
  gap: 10px;
  padding: 2px 16px 16px 140px;
  border-top: 1px solid rgba(210, 178, 123, 0.18);
}

.subfile-body p {
  margin: 0;
  color: #d8e3e5;
  font-size: 0.98rem;
  line-height: 1.62;
}

.subfile-sensitive {
  border-color: rgba(163, 38, 47, 0.42);
}

.story-cover-feature {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  padding: 0;
  color: var(--text);
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.story-cover-feature img {
  width: 100%;
  display: block;
  border: 1px solid rgba(125, 53, 186, 0.72);
  border-radius: 6px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.62);
}

.story-cover-feature > span:last-child {
  position: absolute;
  left: -18px;
  top: 16px;
  padding: 6px 9px;
  color: #120617;
  background: var(--veil-gold);
  border: 1px solid rgba(0, 0, 0, 0.52);
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

.story-cover-calamari {
  top: 50%;
  width: clamp(150px, 18vw, 215px);
  transform: translate(-50%, -50%) rotate(-4deg);
}

.calamari-cover-mark {
  display: grid;
  align-content: end;
  width: 100%;
  aspect-ratio: 1410 / 2250;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(91, 230, 210, 0.66);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 30%, rgba(251, 214, 87, 0.28), transparent 28%),
    radial-gradient(circle at 30% 72%, rgba(33, 195, 170, 0.34), transparent 34%),
    linear-gradient(160deg, #0d4660, #07232d 52%, #021014);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62), 0 0 34px rgba(33, 195, 170, 0.2);
}

.story-cover-calamari > span:last-child {
  left: -22px;
  top: 18px;
  color: #051417;
  background: #fbd657;
}

.calamari-cover-image {
  padding: 0;
  background: #031014;
}

.calamari-cover-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.calamari-cover-image + .calamari-cover-fallback {
  display: none;
}

.calamari-cover-mark strong {
  color: #fbd657;
  font-size: 2rem;
  line-height: 0.9;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.38);
}

.calamari-cover-mark em {
  color: #e9fffb;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.stories-visual {
  min-height: 420px;
  background:
    radial-gradient(circle at 52% 34%, rgba(251, 214, 87, 0.24), transparent 28%),
    radial-gradient(circle at 38% 66%, rgba(33, 195, 170, 0.28), transparent 34%),
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.055) 0 1px, transparent 1px 10px),
    linear-gradient(135deg, rgba(4, 32, 42, 0.9), rgba(0, 0, 0, 0.92));
}

.comic-reader-detail {
  display: grid;
  gap: 16px;
  background:
    radial-gradient(circle at 50% 0, rgba(33, 195, 170, 0.13), transparent 34%),
    rgba(3, 12, 16, 0.84);
}

.comic-reader-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.comic-reader-header h3 {
  margin: 0;
}

.comic-reader-header > span {
  color: #fbd657;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.comic-reader-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 14px;
  border: 1px solid rgba(91, 230, 210, 0.26);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(5, 34, 42, 0.52), rgba(0, 0, 0, 0.42)),
    rgba(0, 0, 0, 0.26);
}

.comic-reader-frame img {
  display: block;
  width: min(100%, 520px);
  max-height: 76vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.54);
}

.comic-page-missing {
  display: grid;
  gap: 8px;
  max-width: 420px;
  padding: 24px;
  text-align: center;
  border: 1px dashed rgba(251, 214, 87, 0.42);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
}

.comic-page-missing strong {
  color: #fbd657;
  font-size: 1.2rem;
}

.comic-page-missing span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.comic-reader-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.publication-reader-detail {
  background:
    radial-gradient(circle at 16% 18%, rgba(215, 131, 61, 0.18), transparent 30%),
    radial-gradient(circle at 78% 8%, rgba(125, 53, 186, 0.14), transparent 28%),
    rgba(6, 8, 10, 0.86);
}

.publication-reader-shell {
  display: grid;
  grid-template-columns: minmax(240px, 460px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.publication-page-column {
  display: grid;
  gap: 12px;
}

.publication-page-frame {
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 12px;
  border: 1px solid rgba(210, 178, 123, 0.32);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 38%),
    rgba(0, 0, 0, 0.34);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.publication-page-frame img {
  display: block;
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 6px;
}

.publication-reader-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.publication-reader-controls span {
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.publication-reader-cover {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(210, 178, 123, 0.32);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 38%),
    rgba(0, 0, 0, 0.34);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.publication-reader-cover img {
  display: block;
  width: 100%;
  border-radius: 6px;
}

.publication-reader-copy {
  display: grid;
  gap: 16px;
}

.publication-reader-copy h3 {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 0.92;
}

.publication-reader-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.publication-reader-meta div,
.publication-reader-notes section {
  padding: 13px;
  border: 1px solid rgba(157, 216, 230, 0.14);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
}

.publication-reader-meta dt,
.publication-reader-notes h4 {
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.publication-reader-meta dd {
  margin: 5px 0 0;
  color: #e8edf0;
  line-height: 1.38;
}

.publication-reader-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.publication-reader-notes li {
  color: #d8e3e5;
  line-height: 1.52;
}

.publications-visual {
  min-height: 390px;
  background:
    radial-gradient(circle at 48% 42%, rgba(215, 173, 24, 0.28), transparent 32%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(18, 10, 4, 0.92));
}

.cover-choice {
  position: absolute;
  width: 176px;
  padding: 0;
  border: 1px solid rgba(210, 178, 123, 0.38);
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.cover-choice img {
  display: block;
  width: 100%;
  border-radius: 5px;
}

.cover-choice-weaver {
  left: 26%;
  top: 10%;
  transform: rotate(-8deg);
}

.cover-choice-hands {
  left: 46%;
  top: 18%;
  transform: rotate(7deg);
}

.dossiers-visual {
  background:
    radial-gradient(circle at 48% 42%, rgba(125, 53, 186, 0.2), transparent 34%),
    repeating-linear-gradient(90deg, rgba(210, 178, 123, 0.06) 0 1px, transparent 1px 34px),
    linear-gradient(135deg, rgba(6, 10, 14, 0.96), rgba(0, 0, 0, 0.96));
}

.dossier-board {
  position: absolute;
  inset: 34px;
  border: 1px solid rgba(210, 178, 123, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(rgba(157, 216, 230, 0.1), rgba(157, 216, 230, 0.1)) 50% 50% / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(157, 216, 230, 0.1), rgba(157, 216, 230, 0.1)) 50% 50% / 100% 1px no-repeat,
    rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}

.dossier-card {
  position: absolute;
  display: grid;
  align-content: end;
  width: 126px;
  min-height: 88px;
  padding: 12px;
  color: #e8edf0;
  border: 1px solid rgba(210, 178, 123, 0.32);
  border-radius: 6px;
  background:
    linear-gradient(rgba(157, 216, 230, 0.36), rgba(157, 216, 230, 0.36)) 13px 17px / 48px 2px no-repeat,
    linear-gradient(135deg, rgba(19, 30, 42, 0.96), rgba(5, 7, 10, 0.98));
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.48);
}

.dossier-card strong,
.dossier-card em {
  position: relative;
  z-index: 1;
}

.dossier-card strong {
  font-size: 1rem;
  line-height: 1;
}

.dossier-card em {
  color: var(--orange);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.dossier-card-veil {
  left: 12%;
  top: 14%;
  transform: rotate(-6deg);
}

.dossier-card-anyall {
  right: 15%;
  top: 10%;
  transform: rotate(5deg);
}

.dossier-card-forage {
  left: 18%;
  bottom: 13%;
  transform: rotate(4deg);
}

.dossier-card-shipton {
  right: 13%;
  bottom: 17%;
  transform: rotate(-4deg);
}

.manilla-folder-large {
  position: absolute;
  left: 50%;
  top: 52%;
  display: grid;
  align-content: center;
  width: 320px;
  height: 215px;
  padding: 30px;
  color: #2a1d0e;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(135deg, #c6a66d, #725532);
  border: 1px solid rgba(47, 31, 14, 0.54);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.58);
  transform: translate(-50%, -50%) rotate(-3deg);
}

.manilla-folder-large::before {
  content: "";
  position: absolute;
  left: 0;
  top: -30px;
  width: 126px;
  height: 44px;
  border-radius: 8px 8px 0 0;
  background: #d2b27b;
}

.manilla-folder-large span,
.manilla-folder-large strong {
  position: relative;
  z-index: 1;
  font-weight: 950;
  text-transform: uppercase;
}

.manilla-folder-large span {
  font-size: 3.2rem;
}

.manilla-folder-large strong {
  font-size: 1.1rem;
}

.bipd-visual {
  background:
    linear-gradient(rgba(6, 10, 14, 0.6), rgba(2, 4, 7, 0.92)),
    url("./public/assets/organizations/bipd-police-files/profile.png");
  background-position: center;
  background-size: cover;
}

.bipd-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(157, 216, 230, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 216, 230, 0.05) 1px, transparent 1px);
  background-size: 12px 12px;
  pointer-events: none;
}

.bipd-terminal-card {
  position: absolute;
  inset: 28px auto 28px 32px;
  z-index: 1;
  display: grid;
  grid-template-columns: 134px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: min(82%, 560px);
  padding: 14px;
  border: 1px solid rgba(157, 216, 230, 0.36);
  background: rgba(4, 8, 12, 0.82);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.48);
}

.bipd-terminal-card img {
  width: 134px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(215, 74, 68, 0.58);
}

.bipd-terminal-card span,
.bipd-terminal-card strong,
.bipd-terminal-card em,
.bipd-terminal-lines span {
  position: relative;
  z-index: 1;
  display: block;
  text-transform: uppercase;
}

.bipd-terminal-card span {
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 950;
}

.bipd-terminal-card strong {
  color: #eff6f7;
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  font-weight: 950;
  line-height: 0.88;
}

.bipd-terminal-card em {
  margin-top: 8px;
  color: #d6a65b;
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
}

.bipd-terminal-lines {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 1;
  display: grid;
  gap: 8px;
  min-width: 250px;
}

.bipd-terminal-lines span {
  padding: 9px 12px;
  border: 1px solid rgba(157, 216, 230, 0.18);
  background: rgba(2, 5, 8, 0.78);
  color: #d8e3e5;
  font-size: 0.72rem;
  font-weight: 950;
  text-align: right;
}

.map-visual {
  background:
    linear-gradient(rgba(157, 216, 230, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 216, 230, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(157, 216, 230, 0.18), transparent 34%),
    #02080c;
  background-size: 18px 18px, 18px 18px, auto, auto;
}

.pixel-map {
  position: absolute;
  inset: 38px;
  image-rendering: pixelated;
}

.pixel-moon {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 220px;
  height: 220px;
  border: 20px solid rgba(157, 216, 230, 0.82);
  border-right-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(157, 216, 230, 0.3);
  transform: translate(-50%, -50%) rotate(-22deg);
}

.pixel-bridge {
  position: absolute;
  left: 51%;
  top: 52%;
  width: 150px;
  height: 8px;
  background: repeating-linear-gradient(90deg, #d7833d 0 10px, transparent 10px 18px);
  transform: rotate(20deg);
}

.pixel-harbor {
  position: absolute;
  left: 38%;
  top: 56%;
  width: 80px;
  height: 54px;
  border: 6px solid rgba(215, 131, 61, 0.72);
  border-top: 0;
}

.radio-visual {
  background:
    radial-gradient(circle at 50% 50%, rgba(203, 32, 45, 0.24), transparent 34%),
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.04) 0 1px, transparent 1px 6px),
    #05070a;
}

.radio-bird-large {
  position: absolute;
  left: 18%;
  top: 30%;
  width: 190px;
  height: 150px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 24px rgba(203, 32, 45, 0.32));
}

.pirate-radio-console {
  position: absolute;
  left: 48%;
  right: 22px;
  top: 28px;
  bottom: 24px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(244, 85, 71, 0.34);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0, rgba(157, 216, 230, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(10, 14, 18, 0.92), rgba(0, 0, 0, 0.86));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48), inset 0 0 22px rgba(203, 32, 45, 0.08);
}

.radio-dial-panel {
  display: grid;
  grid-template-columns: 1fr 112px 1fr;
  gap: 10px;
  align-items: center;
}

.radio-skip-button,
.radio-dial-button,
.radio-track-button {
  color: var(--text);
  border: 1px solid rgba(157, 216, 230, 0.22);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.32);
  cursor: pointer;
}

.radio-skip-button {
  min-height: 44px;
  color: var(--cyan);
  font-size: 0.7rem;
  font-weight: 900;
}

.radio-dial-button {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  border-color: rgba(244, 85, 71, 0.58);
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 85, 71, 0.38) 0 24%, transparent 25%),
    repeating-conic-gradient(from -12deg, rgba(157, 216, 230, 0.22) 0 8deg, transparent 8deg 17deg),
    radial-gradient(circle, #141b20, #020405 72%);
  box-shadow: 0 0 28px rgba(203, 32, 45, 0.22), inset 0 0 20px rgba(0, 0, 0, 0.66);
}

.radio-dial-button span {
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  color: #fff3f0;
  border-radius: 50%;
  background: rgba(4, 5, 6, 0.84);
  font-size: 0.68rem;
  font-weight: 950;
}

.radio-readout {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(157, 216, 230, 0.18);
  border-radius: 7px;
  background:
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.08) 0 1px, transparent 1px 5px),
    rgba(0, 0, 0, 0.34);
}

.radio-readout span {
  color: var(--orange);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.radio-readout strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.1;
}

.radio-readout em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
}

.radio-track-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.radio-track-button {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  text-align: left;
}

.radio-track-button[aria-pressed="true"] {
  border-color: rgba(244, 85, 71, 0.64);
  background: rgba(203, 32, 45, 0.14);
}

.radio-track-button span,
.radio-track-button em {
  overflow-wrap: anywhere;
}

.radio-track-button span {
  font-weight: 850;
}

.radio-track-button em,
.radio-empty {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.docks-visual {
  background:
    linear-gradient(180deg, rgba(3, 7, 9, 0.2), rgba(1, 3, 5, 0.78)),
    url("./public/assets/references/black-ink-bay-crescent-city-reference.png");
  background-size: cover;
  background-position: center bottom;
}

.dock-waterline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background:
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.12) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, rgba(4, 10, 13, 0.34), rgba(0, 0, 0, 0.86));
}

.dock-cranes::before,
.dock-cranes::after {
  content: "";
  position: absolute;
  bottom: 28%;
  width: 150px;
  height: 120px;
  border-left: 8px solid rgba(210, 178, 123, 0.5);
  border-top: 6px solid rgba(210, 178, 123, 0.5);
  transform: skewX(-12deg);
}

.dock-cranes::before {
  left: 18%;
}

.dock-cranes::after {
  right: 16%;
  transform: scaleX(-1) skewX(-12deg);
}

.origin-room-book {
  position: absolute;
  inset: 34px;
  background: url("./public/assets/portal/black-ink-bay-cursed-book.png") center / contain no-repeat;
  filter: brightness(1.18) contrast(1.22);
}

.constitution-visual {
  background:
    radial-gradient(circle at 50% 44%, rgba(210, 178, 123, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(12, 11, 8, 0.96), rgba(2, 3, 4, 0.96));
}

.constitution-page {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 18px;
  width: 260px;
  min-height: 310px;
  padding: 42px 30px;
  border: 1px solid rgba(210, 178, 123, 0.44);
  background: linear-gradient(135deg, rgba(26, 22, 16, 0.98), rgba(6, 7, 8, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62);
  transform: translate(-50%, -50%) rotate(-2deg);
}

.constitution-page span {
  display: block;
  height: 3px;
  background: rgba(210, 178, 123, 0.54);
}

.ghost-button,
.category-button,
.record-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(13, 19, 25, 0.74);
}

.ghost-button {
  min-height: 42px;
  padding: 0 16px;
  cursor: pointer;
}

.ghost-button:hover,
.category-button:hover,
.record-card:hover {
  border-color: rgba(157, 216, 230, 0.52);
}

.archive-layout {
  display: grid;
  grid-template-columns: 300px minmax(260px, 390px) minmax(0, 1fr);
  gap: 14px;
  width: min(1480px, 100%);
  margin: 0 auto;
  align-items: start;
}

.index-panel,
.results-panel,
.detail-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.28);
}

.index-panel,
.detail-panel {
  padding: 18px;
}

.panel-heading h3 {
  margin-bottom: 14px;
  font-size: 1.1rem;
}

.search-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.search-input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(157, 216, 230, 0.22);
  border-radius: var(--radius);
}

.search-input::placeholder {
  color: var(--dim);
}

.category-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.category-button {
  min-height: 38px;
  padding: 0 10px;
  cursor: pointer;
  color: var(--muted);
  overflow-wrap: anywhere;
  white-space: normal;
}

.category-button[aria-pressed="true"] {
  color: var(--text);
  border-color: rgba(215, 131, 61, 0.65);
  background: rgba(215, 131, 61, 0.14);
}

.archive-note {
  display: grid;
  gap: 6px;
  padding: 12px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(210, 178, 123, 0.26);
  border-radius: var(--radius);
  font-size: 0.88rem;
}

.archive-note strong {
  color: var(--danger);
}

.results-panel {
  overflow: hidden;
}

.results-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.record-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 132px);
  overflow: auto;
  padding: 12px;
}

.record-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.record-card[aria-pressed="true"] {
  border-color: rgba(157, 216, 230, 0.72);
  background: rgba(157, 216, 230, 0.12);
}

.record-card strong {
  font-size: 1rem;
}

.record-card span:last-child {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.42;
}

.record-type {
  color: var(--orange);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-panel {
  min-height: calc(100vh - 112px);
}

.detail-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.detail-topline span,
.related-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(157, 216, 230, 0.18);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.detail-topline .canon-status {
  color: #141007;
  border-color: rgba(210, 178, 123, 0.72);
  background: #d2b27b;
}

.detail-topline .canon-status-canon {
  color: #07130f;
  border-color: rgba(123, 210, 172, 0.72);
  background: #7bd2ac;
}

.detail-topline .canon-status-draft-canon {
  color: #111722;
  border-color: rgba(157, 216, 230, 0.72);
  background: #9dd8e6;
}

.detail-topline .canon-status-experimental {
  color: #160d1d;
  border-color: rgba(161, 142, 188, 0.78);
  background: #a18ebc;
}

.detail-topline .canon-status-non-canon {
  color: #180909;
  border-color: rgba(209, 117, 117, 0.78);
  background: #d17575;
}

.detail-panel h3 {
  margin-bottom: 10px;
  font-size: 2rem;
  line-height: 1.08;
}

.detail-summary {
  color: var(--text);
  font-size: 1.06rem;
  line-height: 1.55;
}

.metadata-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.metadata-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
}

dt {
  color: var(--dim);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

dd {
  margin: 5px 0 0;
  color: var(--text);
}

.entry-section {
  margin-top: 22px;
}

.entry-section h4,
.review-box h4 {
  margin-bottom: 8px;
  color: var(--cyan);
  font-size: 0.92rem;
  text-transform: uppercase;
}

.entry-section p,
.entry-section li,
.review-box p {
  color: #d8e3e5;
  line-height: 1.62;
}

.entry-section ul {
  margin: 0;
  padding-left: 20px;
}

.related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-box {
  margin-top: 22px;
  padding: 14px;
  border: 1px solid rgba(215, 131, 61, 0.34);
  border-radius: var(--radius);
  background: rgba(215, 131, 61, 0.1);
}

.room-detail-profile .review-box {
  margin: 0 24px 24px;
}

.review-box-public {
  border-color: rgba(157, 216, 230, 0.26);
  background: rgba(157, 216, 230, 0.07);
}

.review-box-archivist {
  border-color: rgba(215, 131, 61, 0.42);
  background: rgba(215, 131, 61, 0.1);
}

.empty-state,
.detail-empty {
  padding: 18px;
  color: var(--muted);
}

@media (max-width: 1320px) {
  .portal-object-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .first-visitor-path {
    grid-template-columns: 1fr;
  }

  .story-trail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-object-community,
  .portal-object-about {
    grid-column: auto;
    margin-left: 0;
  }
}

@media (max-width: 1100px) {

  .room-hero,
  .room-body {
    grid-template-columns: 1fr;
  }

  .profile-shell,
  .profile-case-grid,
  .profile-board-grid,
  .about-author-hero,
  .about-author-ai,
  .about-author-support,
  .publication-reader-shell,
  .publication-reader-notes {
    grid-template-columns: 1fr;
  }

  .publication-reader-meta {
    grid-template-columns: 1fr;
  }

  .publication-page-frame {
    min-height: auto;
    padding: 8px;
  }

  .publication-reader-controls {
    grid-template-columns: 1fr;
  }

  .publication-reader-controls span {
    order: -1;
    justify-self: center;
  }

  .profile-identity {
    border-right: 0;
    border-bottom: 1px solid rgba(157, 216, 230, 0.16);
  }

  .profile-main h3 {
    font-size: 3rem;
  }

  .about-author-copy h3 {
    font-size: 3rem;
  }

  .room-file-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-layout {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .detail-panel {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .record-list {
    max-height: 420px;
  }
}

@media (max-width: 760px) {
  .portal-screen {
    padding: 26px 14px;
  }

  h1 {
    font-size: 2rem;
  }

  .book-button {
    width: min(78vw, 310px);
  }

  .portal-screen.is-library-open {
    place-items: start center;
  }

  .portal-library {
    margin-top: 18px;
  }

  .portal-object-grid {
    grid-template-columns: 1fr;
  }

  .first-visitor-path {
    padding: 12px;
  }

  .first-visitor-path ol {
    grid-template-columns: 1fr;
  }

  .first-visitor-path button {
    min-height: 50px;
  }

  .portal-object {
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 142px;
  }

  .portal-object-community,
  .portal-object-about {
    grid-column: auto;
    grid-template-columns: 110px minmax(0, 1fr);
    min-height: 112px;
    margin-left: 0;
  }

  .portal-object-art {
    width: 82px;
    height: 112px;
  }

  .portal-object-image-community,
  .portal-object-image-about {
    width: 110px;
    height: 54px;
  }

  .portal-object-art img {
    width: 60px;
    height: 86px;
  }

  .story-issue-stack img {
    left: 10px;
    width: 62px;
    height: 90px;
  }

  .bipd-terminal-card {
    inset: 18px 18px auto;
    grid-template-columns: 84px minmax(0, 1fr);
    width: auto;
  }

  .bipd-terminal-card img {
    width: 84px;
  }

  .bipd-terminal-card strong {
    font-size: 2rem;
  }

  .bipd-terminal-lines {
    left: 18px;
    right: 18px;
    bottom: 18px;
    min-width: 0;
  }

  .bipd-terminal-lines span {
    text-align: left;
  }

  .radio-beacon {
    right: 14px;
    bottom: 14px;
    width: 60px;
    height: 60px;
  }

  .radio-dock {
    left: 14px;
    right: 84px;
    bottom: 14px;
    width: auto;
    min-height: 60px;
    padding: 18px 8px 8px;
    gap: 8px;
    max-width: calc(100vw - 112px);
  }

  .radio-dock.is-collapsed {
    left: auto;
    right: 84px;
    width: 64px;
    min-height: 60px;
    padding: 17px 8px 8px;
    grid-template-columns: 1fr;
  }

  .radio-dock.is-collapsed .radio-dock-readout {
    display: none;
  }

  .radio-dock.is-collapsed .radio-dock-readout strong {
    display: none;
  }

  .radio-dock.is-collapsed .radio-dock-controls {
    justify-self: center;
  }

  .radio-dock.is-collapsed .radio-dock-play {
    width: 42px;
  }

  .radio-dock.is-collapsed .radio-dock-play span {
    width: 30px;
    font-size: 0.46rem;
  }

  .radio-dock-readout strong {
    font-size: 0.76rem;
  }

  .radio-dock-readout em {
    font-size: 0.62rem;
  }

  .radio-dock-controls {
    grid-template-columns: 40px 52px 40px;
    gap: 4px;
  }

  .radio-dock-button {
    min-height: 34px;
    font-size: 0.52rem;
  }

  .radio-dock-play {
    width: 52px;
  }

  .library-footer,
  .archive-footer {
    padding-bottom: 128px;
  }

  .room-copy h3 {
    font-size: 2.05rem;
  }

  .archive-actions {
    width: 100%;
    justify-content: stretch;
  }

  .archive-actions > * {
    flex: 1 1 170px;
  }

  .profile-main {
    padding: 18px;
  }

  .profile-main h3 {
    font-size: 2.2rem;
  }

  .profile-identity {
    padding: 18px;
  }

  .profile-board-grid section {
    padding: 12px;
  }

  .room-detail-profile .review-box {
    margin: 0 18px 18px;
  }

  .room-visual {
    min-height: 270px;
  }

  .room-file-rail,
  .room-detail-grid {
    grid-template-columns: 1fr;
  }

  .subfile-module summary,
  .subfile-summary {
    grid-template-columns: 1fr auto;
  }

  .subfile-module summary span,
  .subfile-summary span {
    grid-column: 1 / -1;
  }

  .subfile-body {
    padding: 12px;
  }

  .bib-haunt {
    white-space: normal;
  }

  .cover-choice {
    width: 134px;
  }

  .cover-choice-weaver {
    left: 16%;
  }

  .cover-choice-hands {
    left: 43%;
  }

  .manilla-folder-large {
    width: 252px;
    height: 174px;
  }

  .manilla-folder-large span {
    font-size: 2.5rem;
  }

  .pixel-moon {
    width: 168px;
    height: 168px;
  }

  .radio-visual {
    min-height: 560px;
  }

  .radio-bird-large {
    left: 50%;
    top: 72px;
    transform: translate(-50%, -50%) scale(1.2);
  }

  .pirate-radio-console {
    left: 14px;
    right: 14px;
    top: 148px;
    bottom: 16px;
    padding: 12px;
  }

  .radio-dial-panel {
    grid-template-columns: 1fr 92px 1fr;
  }

  .radio-dial-button {
    width: 92px;
  }

  .radio-dial-button span {
    width: 50px;
  }

  .origin-title {
    font-size: 1.82rem;
  }

  .veil-title {
    bottom: 24%;
  }

  .veil-title-small {
    font-size: 1.15rem;
  }

  .veil-title-main {
    font-size: 3rem;
  }

  .cover-subtitle {
    font-size: 1.02rem;
  }

  .cover-credit {
    font-size: 1.28rem;
  }

  .archive-shell {
    padding: 10px;
  }

  .archive-header {
    display: grid;
  }

  .archive-layout {
    grid-template-columns: 1fr;
  }

  .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-list {
    max-height: none;
  }

  .metadata-grid {
    grid-template-columns: 1fr;
  }

  .detail-panel h3 {
    font-size: 1.55rem;
  }
}

/* Municipal Rainbow Archive Pass - sharper, official, corrupted, oil-slick interface. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.portal-copy {
  width: min(1180px, 100%);
  max-width: none;
}

.archive-banner {
  display: block;
  width: min(1120px, 96vw);
  max-height: 34vh;
  margin: 6px auto 0;
  object-fit: cover;
  border: 1px solid rgba(205, 218, 217, 0.3);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  filter: contrast(1.08) saturate(1.15) brightness(0.92);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.86),
    0 18px 70px rgba(0, 0, 0, 0.62),
    0 0 32px rgba(125, 53, 186, 0.16),
    0 0 24px rgba(157, 216, 230, 0.09);
}

.library-heading {
  margin-bottom: 18px;
}

.library-heading h2 {
  color: #f5f7f4;
  font-family: "Impact", "Arial Narrow", "Segoe UI Condensed", sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 900;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.95),
    0 0 18px rgba(157, 216, 230, 0.14);
}

.portal-object,
.archive-header,
.room-visual,
.room-copy,
.room-file-rail,
.room-detail,
.room-detail-grid section,
.room-detail-cover,
.detail-panel,
.subfile-module,
.room-file-card,
.mode-toggle,
.ghost-button,
.category-button,
.record-card,
.index-panel,
.reader-panel,
.reader-toolbar,
.comic-reader,
.publication-reader {
  border-radius: 3px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.portal-object,
.room-detail,
.room-file-rail,
.room-copy,
.archive-header,
.detail-panel,
.room-detail-grid section,
.subfile-module {
  border-color: rgba(205, 218, 217, 0.26);
  background:
    linear-gradient(135deg, rgba(2, 5, 8, 0.96), rgba(6, 10, 13, 0.86) 52%, rgba(1, 2, 4, 0.94)),
    repeating-linear-gradient(0deg, rgba(210, 178, 123, 0.035) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 12% 0%, rgba(157, 216, 230, 0.12), transparent 24%),
    radial-gradient(circle at 92% 100%, rgba(163, 38, 47, 0.13), transparent 24%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.82),
    inset 0 0 44px rgba(0, 0, 0, 0.46),
    0 18px 58px rgba(0, 0, 0, 0.4);
}

.portal-object {
  position: relative;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.portal-object::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(157, 216, 230, 0), rgba(157, 216, 230, 0.72), rgba(215, 131, 61, 0.68), rgba(125, 53, 186, 0.72), rgba(163, 38, 47, 0));
  opacity: 0.56;
}

.portal-object::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 12px;
  pointer-events: none;
  background:
    radial-gradient(12px 14px at 16% 0, rgba(157, 216, 230, 0.18), transparent 72%),
    radial-gradient(10px 16px at 48% 0, rgba(125, 53, 186, 0.2), transparent 72%),
    radial-gradient(14px 18px at 82% 0, rgba(163, 38, 47, 0.18), transparent 72%);
  opacity: 0.72;
}

.portal-object:hover {
  border-color: rgba(157, 216, 230, 0.7);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.86),
    0 20px 66px rgba(0, 0, 0, 0.48),
    0 0 26px rgba(125, 53, 186, 0.16);
  filter: saturate(1.08);
}

.portal-object-copy span,
.room-file-card em,
.subfile-stack-heading span,
.subfile-module summary span,
.subfile-summary span,
.kicker {
  letter-spacing: 0.03em;
  color: #94dce7;
  text-shadow: 0 0 10px rgba(157, 216, 230, 0.18);
}

.portal-object:nth-child(3n + 1) .portal-object-copy span {
  color: #d7833d;
}

.portal-object:nth-child(3n + 2) .portal-object-copy span {
  color: #9dd8e6;
}

.portal-object:nth-child(3n + 3) .portal-object-copy span {
  color: #b59be0;
}

.portal-object-copy strong,
.room-copy h3,
.detail-panel h3,
.profile-main h3,
.archive-header h2 {
  font-family: "Impact", "Arial Narrow", "Segoe UI Condensed", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.room-copy h3,
.detail-panel h3,
.profile-main h3 {
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.95),
    0 0 18px rgba(163, 38, 47, 0.14),
    0 0 26px rgba(157, 216, 230, 0.08);
}

.bib-haunt,
#archiveTitle {
  color: #f3efe3;
  font-family: "Cinzel", "Georgia", "Times New Roman", serif;
  text-shadow:
    0 0 8px rgba(163, 38, 47, 0.45),
    0 0 18px rgba(125, 53, 186, 0.2),
    0 0 28px rgba(157, 216, 230, 0.12);
}

.archive-header {
  background:
    linear-gradient(90deg, rgba(3, 5, 8, 0.95), rgba(8, 12, 15, 0.72), rgba(3, 5, 8, 0.95)),
    repeating-linear-gradient(90deg, rgba(210, 178, 123, 0.04) 0 1px, transparent 1px 18px);
}

.mode-toggle,
.ghost-button,
.room-file-card,
.category-button,
.record-card {
  border-radius: 3px;
}

.subfile-module summary::after {
  color: #94dce7;
}

.subfile-sensitive summary::after {
  color: #d06f76;
}

.subfile-body {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.36)),
    repeating-linear-gradient(0deg, rgba(157, 216, 230, 0.022) 0 1px, transparent 1px 8px);
}

.room-detail-cover img,
.room-visual-image img {
  border-radius: 2px;
}

@media (max-width: 760px) {
  .archive-banner {
    width: min(100%, 96vw);
    max-height: 24vh;
  }

  .portal-screen.is-library-open {
    padding-top: 18px;
  }

  .portal-object {
    min-height: 142px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Big Jump Preview Pass - stronger public-file flow and in-house Pirate Radio station board. */
.library-subline {
  max-width: 760px;
  margin: 8px auto 0;
  color: rgba(232, 239, 235, 0.76);
  font-size: 0.98rem;
}

.portal-library {
  border: 1px solid rgba(205, 218, 217, 0.24);
  background:
    linear-gradient(180deg, rgba(2, 5, 7, 0.92), rgba(4, 7, 10, 0.72)),
    radial-gradient(circle at 16% 12%, rgba(148, 220, 231, 0.1), transparent 30%),
    radial-gradient(circle at 88% 34%, rgba(139, 61, 190, 0.14), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(163, 38, 47, 0.12), transparent 42%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.82),
    inset 0 0 90px rgba(0, 0, 0, 0.54),
    0 30px 90px rgba(0, 0, 0, 0.52);
}

.portal-object-grid {
  align-items: stretch;
}

.portal-object {
  overflow: hidden;
  isolation: isolate;
}

.portal-object-art img {
  filter: contrast(1.08) saturate(1.08);
}

.portal-object-copy p {
  color: rgba(232, 239, 235, 0.76);
}

.room-body {
  grid-template-columns: minmax(0, 1fr);
}

.room-file-rail {
  margin-top: 10px;
}

.room-file-rail-heading {
  border-bottom: 1px solid rgba(205, 218, 217, 0.16);
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.room-detail,
.profile-case-file,
.subfile-module,
.room-detail-grid section,
.station-programming {
  position: relative;
}

.room-detail::before,
.profile-case-file::before,
.subfile-module::before,
.room-detail-grid section::before,
.station-programming::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(148, 220, 231, 0), rgba(148, 220, 231, 0.52), rgba(206, 150, 75, 0.48), rgba(139, 61, 190, 0.46), rgba(163, 38, 47, 0));
  opacity: 0.62;
}

.pirate-station-detail {
  background:
    linear-gradient(135deg, rgba(4, 3, 5, 0.96), rgba(10, 4, 5, 0.84) 46%, rgba(2, 6, 9, 0.96)),
    repeating-linear-gradient(0deg, rgba(210, 178, 123, 0.035) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 12% 18%, rgba(226, 61, 56, 0.17), transparent 28%),
    radial-gradient(circle at 88% 22%, rgba(255, 154, 49, 0.12), transparent 30%),
    radial-gradient(circle at 70% 100%, rgba(148, 220, 231, 0.11), transparent 34%);
}

.station-cover img {
  object-fit: contain;
  background: #020304;
}

.station-programming {
  margin: 22px 0;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(205, 218, 217, 0.22);
  background:
    linear-gradient(180deg, rgba(3, 5, 7, 0.96), rgba(10, 5, 6, 0.84)),
    repeating-linear-gradient(0deg, rgba(148, 220, 231, 0.036) 0 1px, transparent 1px 8px);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.station-programming-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(205, 218, 217, 0.16);
  padding-bottom: 12px;
}

.station-programming-heading span {
  color: #d7833d;
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.station-programming h4 {
  margin: 0;
  color: #f3efe3;
  font-family: "Impact", "Arial Narrow", "Segoe UI Condensed", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
}

.station-programming p {
  max-width: 820px;
  color: rgba(232, 239, 235, 0.78);
}

.station-playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.station-track-card {
  min-height: 112px;
  padding: 14px;
  text-align: left;
  color: #e8efeb;
  border: 1px solid rgba(205, 218, 217, 0.18);
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.72), rgba(8, 10, 12, 0.82)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 8px);
  cursor: pointer;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}

.station-track-card span,
.radio-track-button span {
  display: block;
}

.station-track-card span {
  color: #94dce7;
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.station-track-card strong {
  display: block;
  margin-top: 8px;
  color: #fffaf0;
  font-size: 1rem;
  line-height: 1.18;
}

.station-track-card em {
  display: block;
  margin-top: 6px;
  color: rgba(232, 239, 235, 0.64);
  font-size: 0.82rem;
  font-style: normal;
}

.station-track-card:hover,
.station-track-card.is-active,
.radio-track-button.is-active {
  border-color: rgba(226, 61, 56, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.74),
    0 0 18px rgba(226, 61, 56, 0.16),
    0 0 24px rgba(148, 220, 231, 0.08);
}

.station-track-card.is-active span,
.radio-track-button.is-active span {
  color: #ff9a31;
}

.radio-track-button.is-active {
  background:
    linear-gradient(135deg, rgba(45, 8, 8, 0.88), rgba(2, 8, 11, 0.9)),
    repeating-linear-gradient(0deg, rgba(148, 220, 231, 0.036) 0 1px, transparent 1px 8px);
}

@media (max-width: 760px) {
  .library-subline {
    font-size: 0.9rem;
  }

  .station-programming {
    padding: 16px;
  }

  .station-programming-heading {
    align-items: start;
    flex-direction: column;
  }

  .station-playlist-grid {
    grid-template-columns: 1fr;
  }

  .station-track-card {
    min-height: 96px;
  }

  .about-author-detail {
    padding: 16px;
  }

  .about-author-hero {
    gap: 16px;
  }

  .about-author-portrait {
    min-height: 300px;
  }

  .about-author-copy h3 {
    font-size: 2.4rem;
  }

  .about-author-body p,
  .about-author-ai p {
    font-size: 1rem;
    line-height: 1.66;
  }
}

@media (max-width: 1100px) {
  .key-dossier-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .key-dossier-heading {
    align-items: start;
    flex-direction: column;
  }

  .key-dossier-list {
    grid-template-columns: 1fr;
  }
}

body.mobile-preview-mode {
  max-width: 430px;
  margin: 0 auto;
  border-left: 1px solid rgba(157, 216, 230, 0.2);
  border-right: 1px solid rgba(157, 216, 230, 0.2);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.72);
}

body.mobile-preview-mode .portal-screen {
  padding: 24px 14px;
}

body.mobile-preview-mode.book-opened {
  padding-bottom: 128px;
}

body.mobile-preview-mode .portal-object-grid,
body.mobile-preview-mode .first-visitor-path,
body.mobile-preview-mode .story-trail-grid,
body.mobile-preview-mode .room-hero,
body.mobile-preview-mode .room-body,
body.mobile-preview-mode .profile-shell,
body.mobile-preview-mode .profile-case-grid,
body.mobile-preview-mode .profile-board-grid,
body.mobile-preview-mode .about-author-hero,
body.mobile-preview-mode .about-author-ai,
body.mobile-preview-mode .about-author-support,
body.mobile-preview-mode .key-dossier-list {
  grid-template-columns: 1fr;
}

body.mobile-preview-mode .radio-dock {
  left: auto;
  right: 84px;
  bottom: 14px;
  width: 64px;
  min-height: 60px;
  padding: 17px 8px 8px;
  grid-template-columns: 1fr;
  overflow: hidden;
}

body.mobile-preview-mode .radio-dock .radio-dock-readout,
body.mobile-preview-mode .radio-dock .radio-dock-button {
  display: none;
}

body.mobile-preview-mode .radio-dock .radio-dock-controls {
  justify-self: center;
  grid-template-columns: 42px;
}

body.mobile-preview-mode .radio-dock .radio-dock-play {
  width: 42px;
}

body.mobile-preview-mode .radio-dock .radio-dock-play span {
  width: 30px;
  font-size: 0.46rem;
}

body.public-preview-mode .mode-toggle {
  display: none;
}

/* Archive retrieval controls, foundation pass. */
#archiveSearchDialog { color: var(--text); background:#0b1015; border:1px solid #53747e; width:min(1000px,94vw); max-height:90dvh; padding:18px; }
#archiveSearchDialog::backdrop {background:rgba(0,0,0,.82);}
#archiveSearchDialog .archive-layout {grid-template-columns:minmax(170px,240px) minmax(0,1fr);}
.search-dialog-header {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;}
#archiveToolStatus {display:block;max-width:300px;overflow-wrap:anywhere;font-size:12px;}
.archive-actions {flex-wrap:wrap;}
.feedback-actions {display:flex;flex-wrap:wrap;gap:8px;margin-block:12px;}
.feedback-status {overflow-wrap:anywhere;}
@media(max-width:650px) {#archiveSearchDialog .archive-layout{grid-template-columns:minmax(0,1fr);}#archiveSearchDialog .category-list{display:flex;flex-wrap:wrap;}#archiveSearchDialog .category-button{width:auto;}#archiveSearchDialog{padding:10px;}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* City life: occupations stand alone; only established people receive links. */
.city-record-links { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0; }
.city-record-links button, .occupation-job button { color:inherit; background:rgba(128,96,158,.13); border:1px solid rgba(180,145,205,.45); border-radius:6px; padding:.7rem .9rem; font:inherit; text-align:left; cursor:pointer; overflow-wrap:anywhere; max-width:100%; }
.city-record-links button:hover, .occupation-job button:hover { background:rgba(128,96,158,.26); }
.city-record-links button:focus-visible, .occupation-job button:focus-visible, .occupation-department summary:focus-visible { outline:3px solid #bba1cf; outline-offset:3px; }
.occupation-legend { font-size:.9rem; }
.occupation-department { margin:1rem 0; border:1px solid rgba(155,135,169,.35); border-radius:8px; padding:1rem; }
.occupation-department summary { font-weight:700; cursor:pointer; padding:.4rem 0; }
.occupation-department dl { margin:0; }
.occupation-job { padding:1rem 0; border-top:1px solid rgba(155,135,169,.22); }
.occupation-job:first-child { margin-top:.7rem; }
.occupation-job dt { font-weight:700; }
.occupation-job dd { margin:.4rem 0 0; }
.occupation-job p { margin:0 0 .6rem; }
.occupation-sector { font-size:.75rem; letter-spacing:.06em; opacity:.8; margin-right:.4rem; }

/* Final two index entries remain together, with no forced empty grid cells. */
.portal-object-community, .portal-object-about { grid-column:auto; margin-left:0; }
.skip-opening { position:absolute; z-index:5; right:1rem; bottom:1rem; }
.portal-screen.is-video-playing .portal-video-layer { pointer-events:auto; }
.portal-screen.is-video-playing > .opening-film-control, .portal-screen.is-library-open > .opening-film-control { display:none; }
.portal-object-community, .portal-object-about { grid-column:1 / -1; width:100%; }

.dossier-section { padding:1rem; border:1px solid rgba(155,135,169,.3); border-radius:6px; }
.dossier-section summary { font-weight:700; cursor:pointer; }
.dossier-section summary:focus-visible { outline:3px solid #bba1cf; outline-offset:4px; }
.profile-case-grid { align-items:start; }

/* Weather controls; atmospheric identity is defined at the end of this stylesheet. */
.cover-weather-toggle { position:absolute; top:12px; right:14px; z-index:3; font-size:.75rem; }
.portal-screen.is-library-open .cover-weather-toggle,.portal-screen.is-video-playing .cover-weather-toggle { display:none; }
.portal-video-vignette { box-shadow:inset 1px 0 38px #263e3938,inset -1px 0 44px #69437124; }
.front-cover { box-shadow:inset 2px 0 2px #b0bba442,0 20px 65px #000; }
.archive-shell[data-material="metal"] .room-detail, .archive-shell[data-material="metal"] .archive-header {
 background:linear-gradient(112deg,#192123 0,#090e10 2%,#070b0d 48%,#101819 98%,#202725);
 border-color:#5a716b70; box-shadow:inset 0 1px #b5c6ba40,inset 0 -1px #574e6955,0 20px 60px #0006; }
.archive-shell[data-material="print"] .room-detail, .archive-shell[data-material="print"] .room-file-rail {
 background:repeating-linear-gradient(0deg,#c9b38804 0 1px,transparent 1px 4px),#100f0d;
 border-color:#97836760; box-shadow:inset 0 1px #bfb09235,0 18px 50px #0007; }
.archive-shell[data-material="print"] .room-detail::before { background:linear-gradient(90deg,transparent,#a38b5f88,transparent); }
.portal-object-publications,.portal-object-stories { border-color:#96816660; }
.room-orientation { border-bottom:1px solid #6e858138; }
.room-orientation > summary { padding:10px 4px; color:#b4c6c7; cursor:pointer; font-size:.85rem; }
.room-orientation[open] > summary { margin-bottom:12px; }
.city-notice { display:flex; gap:24px; align-items:center; border-left:2px solid #988666; background:#0a1010; padding:12px 18px; color:#c5cfca; }
.city-notice span { flex:0 0 auto; max-width:100%; font-size:.68rem; text-transform:uppercase; letter-spacing:.13em; color:#bba984; }
.city-notice p { margin:0; font-size:.85rem; line-height:1.6; }
.index-notice { margin:18px 0; }
.archive-header { padding:12px 16px; }
.archive-header h2 { font-size:1.2rem; }
.archive-header .kicker { margin:0 0 5px; font-size:.66rem; }
.room-detail { background-color:#070b0d; }
.room-detail p,.subfile-body p { line-height:1.75; }
.room-detail h3:focus:not(:focus-visible),.profile-main h3:focus:not(:focus-visible) { outline:none; }
@media(max-width:760px) {
 .bay-weather { mask-image:linear-gradient(90deg,#000,transparent 16px,transparent calc(100% - 16px),#000); }
 .bay-rain { background-size:240px 153px; opacity:.22; }
 .city-notice { flex-direction:column; align-items:flex-start; gap:6px; padding:12px; }
 .archive-header { gap:10px; padding:12px; }
 .archive-actions { justify-content:flex-start; gap:6px; }
 .archive-actions button { font-size:.73rem; min-height:40px; padding:8px 10px; }
 .archive-header h2 { font-size:1.1rem; }
 .room-hero { grid-template-columns:90px minmax(0,1fr); gap:8px; }
 .room-hero .room-visual { min-height:100px; }
 .room-hero .room-visual-image img { max-height:125px; object-fit:contain; }
 .room-hero .room-copy { padding:12px; }
 .room-hero .room-copy h3 { font-size:1.2rem; }
 .room-hero .room-copy p { font-size:.8rem; }
 .topic-room-radio .room-hero,.topic-room-publications .room-hero,.topic-room-stories .room-hero { grid-template-columns:1fr; }
}

@media(forced-colors:active) { .bay-weather { display:none; } }

/* Keep institutional illustrations present without delaying the actual file. */
.archive-shell[data-material="metal"] .room-detail-cover img { max-height:420px; object-fit:contain; }
@media(max-width:760px) {
 .archive-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
 .archive-actions #archiveToolStatus:empty { display:none; }
 .archive-actions button { width:100%; }
 .archive-shell[data-material="metal"] .room-detail-cover img { max-height:300px; }
}

.library-tools { display:flex; flex-wrap:wrap; gap:8px; }
@supports not (mask-image:linear-gradient(#000,transparent)) { .bay-weather { display:none; } }
@media(max-width:760px) {
 .room-detail-grid { grid-template-columns:minmax(0,1fr); }
 .room-detail-grid > section { min-width:0; overflow-wrap:anywhere; }
 .room-detail-grid .related-list > * { max-width:100%; white-space:normal; }
}


/* BLACK INK BAY: rain through distance, sliding oil on glass, water held by metal. */
.bay-weather { position:fixed; inset:0; z-index:9; pointer-events:none; overflow:hidden; contain:strict; mask-image:none; }
.bay-oil,.bay-glass,.bay-rain,.bay-rain-far { position:absolute; pointer-events:none; }
.bay-oil { inset:-24% -12%; opacity:.48;
 background:radial-gradient(ellipse at 10% 23%,transparent 21%,#466b6255 23%,#bf955f66 24%,#834d9866 25%,#2d778166 26%,transparent 29%),radial-gradient(ellipse at 88% 69%,transparent 16%,#395c5877 18%,#8e7c4c66 19%,#623d8966 20%,#34636e66 22%,transparent 25%);
 mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.65) 15%,rgba(0,0,0,.08) 35%,rgba(0,0,0,.08) 65%,rgba(0,0,0,.65) 85%,#000);
 animation:bay-oil-slide 28s ease-in-out infinite alternate; }
.bay-glass { inset:-20% -10%; opacity:.22;
 background:radial-gradient(ellipse at 36% 5%,transparent 40%,#769e9433 42%,transparent 44%),radial-gradient(ellipse at 63% 74%,transparent 35%,#9b718233 37%,transparent 39%),linear-gradient(112deg,transparent 25%,#b8d7cb14 28%,transparent 31%,transparent 70%,#6b6c9d18 74%,transparent 80%);
 animation:bay-glass-slide 39s ease-in-out infinite alternate; }
.bay-rain { inset:-240px -40px; opacity:.36;
 background-image:linear-gradient(101deg,transparent 48%,#9ebbbb88 49.4%,transparent 50.1%),linear-gradient(101deg,transparent 49%,#829f9d77 49.8%,transparent 50.5%);
 background-size:173px 227px,263px 307px; background-position:0 0,73px 91px;
 mask-image:linear-gradient(90deg,#000,#000 3%,rgba(0,0,0,.2) 16%,rgba(0,0,0,.035) 30%,rgba(0,0,0,.035) 70%,rgba(0,0,0,.2) 84%,#000 97%);
 animation:bay-rain-fall 2.6s linear infinite; }
.bay-rain-far { inset:-320px -40px; opacity:.1;
 background:repeating-linear-gradient(101deg,transparent 0 73px,#a7c2bf60 74px,transparent 75px 149px);
 mask-image:linear-gradient(#000,rgba(0,0,0,.18) 35%,rgba(0,0,0,.18) 75%,#000);
 animation:bay-far-fall 4.7s linear infinite; }
.bay-drips { position:absolute; inset:0; }
.bay-drips i { position:absolute; top:7%; left:12px; width:9px; height:16px; border-radius:55% 45% 48% 52%; opacity:0;
 background:radial-gradient(ellipse at 30% 28%,#e3e8cfaa 0 8%,#789a8577 15%,#291b3655 44%,#040a0bbb 75%); border-bottom:1px solid #a3bdb57a; box-shadow:1px 1px 3px #0008,inset -1px -2px 2px #274c4477;
 animation:bay-bead-fall 19s -4s cubic-bezier(.44,.05,.76,.5) infinite; }
.bay-drips i::before { content:''; position:absolute; width:2px; height:85px; bottom:75%; left:45%; background:linear-gradient(transparent,#6d9c8e44); border-radius:50%; }
.bay-drips i:nth-child(2) { left:7%; top:33%; animation-delay:-11s; animation-duration:29s; }
.bay-drips i:nth-child(3) { left:auto; right:14px; top:15%; animation-delay:-8s; animation-duration:23s; }
.bay-drips i:nth-child(4) { left:auto; right:8%; top:56%; animation-delay:-17s; animation-duration:31s; }
.archive-header,.portal-library { position:relative; }
.archive-header::after,.room-detail::after,.portal-library::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
 background:radial-gradient(ellipse 4px 7px at 18px 13px,#d2ddcc70,transparent 75%),radial-gradient(ellipse 3px 5px at calc(100% - 25px) 24px,#9bb3a45c,transparent 75%),linear-gradient(100deg,transparent 5%,#a8baa42c 17%,#684a7626 30%,transparent 47%,#4c776526 80%,transparent);
 background-size:auto,auto,100% 2px; background-repeat:no-repeat;
 box-shadow:inset 0 1px #adbfac28,inset 1px 0 #98b6a015,inset -1px 0 #84749320; }
@keyframes bay-oil-slide { 0% { transform:translate3d(-2%,-8%,0) scale(1.02); } 48% { transform:translate3d(2%,2%,0) scale(1.07,1.04); } 100% { transform:translate3d(-1%,12%,0) scale(1.02,1.09); } }
@keyframes bay-glass-slide { from { transform:translate3d(-2%,-4%,0); } to { transform:translate3d(3%,8%,0); } }
@keyframes bay-rain-fall { to { transform:translate3d(-44px,227px,0); } }
@keyframes bay-far-fall { to { transform:translate3d(-60px,307px,0); } }
@keyframes bay-bead-fall { 0% { opacity:0; transform:translateY(-5px) scale(.45,.35); } 12% { opacity:.6; transform:translateY(0) scale(.8,.75); } 39% { opacity:.65; transform:translateY(4px) scale(1,1.2); } 48% { opacity:.7; transform:translateY(38px) scale(.8,1.7); } 78% { opacity:.35; transform:translateY(65vh) scale(.65,1.5); } 84%,100% { opacity:0; transform:translateY(90vh) scale(.5,1); } }
body.atmosphere-paused .bay-weather *,body.atmosphere-hidden .bay-weather * { animation-play-state:paused !important; }
body.atmosphere-paused .bay-rain,body.atmosphere-paused .bay-rain-far,body.atmosphere-paused .bay-drips { visibility:hidden; }
@media(prefers-reduced-motion:reduce) {
 body:not(.atmosphere-enabled) .bay-weather * { animation:none !important; }
 body:not(.atmosphere-enabled) .bay-rain,body:not(.atmosphere-enabled) .bay-rain-far,body:not(.atmosphere-enabled) .bay-drips { display:none; }
 body.atmosphere-enabled .bay-oil { animation:bay-oil-slide 28s ease-in-out infinite alternate !important; }
 body.atmosphere-enabled .bay-glass { animation:bay-glass-slide 39s ease-in-out infinite alternate !important; }
 body.atmosphere-enabled .bay-rain { animation:bay-rain-fall 2.6s linear infinite !important; }
 body.atmosphere-enabled .bay-rain-far { animation:bay-far-fall 4.7s linear infinite !important; }
 body.atmosphere-enabled .bay-drips i { animation:bay-bead-fall 19s -4s cubic-bezier(.44,.05,.76,.5) infinite !important; }
 body.atmosphere-enabled .bay-drips i:nth-child(2) { animation-duration:29s !important; animation-delay:-11s !important; }
 body.atmosphere-enabled .bay-drips i:nth-child(3) { animation-duration:23s !important; animation-delay:-8s !important; }
 body.atmosphere-enabled .bay-drips i:nth-child(4) { animation-duration:31s !important; animation-delay:-17s !important; }
}
@media(max-width:760px) { .bay-rain { opacity:.26; } .bay-rain-far { opacity:.07; } .bay-glass { opacity:.16; } .bay-drips i:nth-child(even) { display:none; } .bay-drips i { left:5px; } .bay-drips i:nth-child(3) { right:5px; } }
@media(forced-colors:active) { .bay-weather { display:none; } }
@supports not(mask-image:linear-gradient(#000,transparent)) { .bay-weather { display:none; } }

/* Hidden-tab suspension wins over explicit reduced-motion opt-in. */
body.atmosphere-hidden .bay-weather * { animation-play-state:paused !important; }

/* Community is a discoverable image doorway, followed by the Creator File. */
.portal-object.portal-object-community { display:flex; justify-content:center; align-items:center; padding:24px 12px; min-height:0; background:transparent; border:0; box-shadow:none; clip-path:none; }
.portal-object-community::before,.portal-object-community::after { display:none; }
.portal-object-community .portal-object-art { width:min(620px,100%); height:auto; min-height:0; transform:none; }
.portal-object-community .portal-object-art img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; transform:none; filter:none; }
.portal-object-community:focus-visible { outline:2px solid #b5d9d0; outline-offset:4px; }
.portal-object-community:hover .portal-object-art { filter:brightness(1.15); }
.topic-room-community > .room-hero { display:block; }
.community-detail .community-cover { width:100%; }
.community-detail .community-cover img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; }
@media(max-width:760px) { .portal-object.portal-object-community { padding:18px 0; } .portal-object-community .portal-object-art { width:100%; } }

.portal-object-community .portal-object-art img { position:static; }
.portal-object-community .portal-object-art { display:block; flex-shrink:0; }

/* Community follows the Creator File at half its previous display width. */
.portal-object-community .portal-object-art { width:min(310px,50%); }
/* Trim the image's empty top/bottom canvas without rescaling the doorway. */
.portal-object.portal-object-community { padding:8px 0; }
.portal-object-community .portal-object-art { position:relative; aspect-ratio:3 / 1; overflow:hidden; }
.portal-object-community .portal-object-art img { position:absolute; top:50%; left:0; bottom:auto; width:100%; height:auto; transform:translateY(-50%); }

.skip-to-file { position:fixed; top:8px; left:8px; z-index:100; padding:12px; background:#10181a; color:#fff; transform:translateY(-200%); }
body.archive-open .skip-to-file:focus { transform:none; }
body:not(.archive-open) .skip-to-file { display:none; }
.feedback-privacy { font-size:.85rem; line-height:1.6; color:#c2cbc9; }


/* Fan Works: creator-owned collections, visually separate from Bay canon. */
.fw-page{--fw-accent:#b6a4ef;--fw-secondary:#e5bd70;color:#f4f3ee}
.fw-dc,.fw-core{--fw-accent:#3877ff;--fw-secondary:#ffe047}
.fw-marvel{--fw-accent:#f14b53;--fw-secondary:#f5efdf}
.fw-other{--fw-accent:#be91ef;--fw-secondary:#7ce2ce}
.fw-street{--fw-accent:#626e80;--fw-secondary:#b9c1cb}
.fw-cosmic{--fw-accent:#29d18b;--fw-secondary:#9763e5}
.fw-active{--fw-accent:#df3e57;--fw-secondary:#ffd04b}
.fw-legacy{--fw-accent:#208b92;--fw-secondary:#c59462}
.fw-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.fw-nav button,.fw-empty button{padding:11px 16px;border:1px solid #737a88;border-radius:4px;background:#151d2a;color:#f4f3ee;font:inherit;cursor:pointer}
.fw-nav button[aria-current=page]{border-color:var(--fw-secondary);color:var(--fw-secondary)}
.fw-hero{padding:clamp(22px,4vw,48px);background:linear-gradient(120deg,#152442,#0c111d 72%);border-top:6px solid var(--fw-accent);border-bottom:2px solid var(--fw-secondary);margin-bottom:28px}
.fw-hero h3{font-size:clamp(36px,6vw,72px);line-height:1.05;letter-spacing:-.025em;margin:14px 0 20px;color:var(--fw-secondary)}
.fw-hero p{max-width:70ch;line-height:1.75;font-size:18px}
.fw-tag,.fw-number{font-size:12px;letter-spacing:.15em;font-weight:700;color:var(--fw-secondary)}
.fw-brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fw-brand{display:flex;flex-direction:column;gap:20px;min-height:240px;text-align:left;padding:24px;background:#111926;color:#f4f3ee;border:1px solid #455063;border-top:6px solid var(--fw-accent);border-radius:3px;font:inherit;cursor:pointer}
.fw-brand strong{font-size:clamp(24px,3vw,38px);color:var(--fw-secondary)}
.fw-enter{margin-top:auto;color:var(--fw-secondary)}
.fw-brand:hover,.fw-nav button:hover{background:#202b3d}
.fw-page :is(button,a,summary):focus-visible{outline:3px solid var(--fw-secondary);outline-offset:5px}
.fw-personal,.fw-notice{line-height:1.7;max-width:78ch;margin-top:30px}
.fw-notice{color:#bbc3ce;border-top:1px solid #465064;padding-top:22px;font-size:14px}
.fw-feature{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);gap:28px;padding:24px;background:#0d1b1b;border:1px solid var(--fw-accent);border-left:6px solid var(--fw-secondary)}
.fw-feature>img{width:100%;height:auto;max-height:440px;object-fit:contain;background:#000}
.fw-feature h4,.fw-empty h4{font-size:clamp(26px,3vw,38px);line-height:1.15;margin:16px 0;color:#fff}
.fw-feature p,.fw-folder p,.fw-empty p{line-height:1.7}
.fw-status{color:#ccd4dd;font-size:14px}
.fw-link{display:inline-block;color:#8af2bd;padding:12px 0;text-underline-offset:5px}
.fw-preview{margin-top:18px;border:1px solid #607569;padding:20px;background:#101719;scroll-margin-top:25px}
.fw-preview summary{cursor:pointer;font-size:18px;font-weight:700;color:#a4f3c9;padding:6px}
.fw-pages{display:grid;gap:28px;max-width:850px;margin:24px auto}
.fw-pages figure{margin:0}.fw-pages img{display:block;width:100%;height:auto}.fw-pages figcaption{font-size:13px;line-height:1.6;padding:10px;color:#c0cbd5}
.fw-directory{margin-top:36px}.fw-directory>h4{font-size:26px}.fw-folder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.fw-folder{padding:22px;background:#111824;border:1px solid #465063;border-top:5px solid var(--fw-accent)}
.fw-folder h5{font-size:19px;line-height:1.35;margin:12px 0;color:#fff}.fw-palette{font-size:12px;color:var(--fw-secondary)}
.fw-swatch{display:block;width:64px;height:8px;background:linear-gradient(90deg,var(--fw-accent) 50%,var(--fw-secondary) 50%)}
.fw-empty{padding:36px;background:#151a25;border-left:4px solid var(--fw-accent)}
.portal-object-fanworks{border-color:#9c86c4}
@media(max-width:760px){.fw-brand-grid,.fw-feature,.fw-folder-grid{grid-template-columns:1fr}.fw-brand{min-height:180px}.fw-feature{padding:16px}.fw-nav button{padding:10px 12px}.fw-hero p{font-size:16px}}

.fw-page .fw-hero{padding:clamp(20px,4vw,48px)}
.fw-page .fw-hero h3{font-size:clamp(30px,6vw,72px);overflow-wrap:anywhere;max-width:100%;box-sizing:border-box}
@media(max-width:760px){.fw-page .fw-hero{padding:20px}.fw-page .fw-hero h3{font-size:32px}.fw-page .fw-empty{padding:20px}}

/* Alex's collection covers and Stories / Concepts shelves. */
.fw-other{--fw-accent:#e82d49;--fw-secondary:#f5f3ee}
.fw-book-cover{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;border-radius:5px}
.fw-collection-cover{display:block;width:min(280px,100%);height:auto;float:right;margin:0 0 24px 28px;border-radius:5px}
.fw-section{clear:both;margin-top:32px}.fw-section-title{font-size:30px;color:var(--fw-secondary);border-bottom:2px solid var(--fw-accent);padding-bottom:12px}
.fw-brand{justify-content:flex-start}.fw-page .fw-hero{overflow:hidden}
@media(max-width:760px){.fw-collection-cover{float:none;width:min(240px,100%);margin:0 auto 24px}.fw-book-cover{max-height:420px}.fw-brand{align-items:stretch}}

.fw-doodle-entry{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;width:100%;margin-top:24px;padding:24px;text-align:left;background:#eee3cb;color:#29251f;border:1px solid #a79470;border-radius:4px;font:inherit;cursor:pointer}.fw-doodle-entry strong{font-size:24px}.fw-doodle-entry:hover{background:#fff0d5}

.topic-room-fanworks .room-file-card img{width:62px;height:88px;object-fit:contain;background:transparent;border:0}.fw-doodle-entry{align-items:center;justify-content:flex-start}.fw-doodle-entry img{width:72px;height:108px;object-fit:contain}

.fw-brand-grid{clear:both}.portal-object-fanworks .portal-object-art{display:block;width:150px;flex-shrink:0;height:auto}.portal-object-fanworks .portal-object-art img{position:static;display:block;width:100%;height:auto;max-height:none;object-fit:contain;transform:none}

.welcome-bay{grid-column:1/-1;width:100%;margin:0 0 28px;background:rgba(8,15,19,.88);border:1px solid #47534f}.welcome-bay>img{display:block;width:100%;height:auto}.welcome-bay-copy{max-width:860px;margin:auto;padding:28px 32px}.welcome-bay-copy h3{font-size:clamp(28px,4vw,42px);color:#ead8af;margin:0 0 20px}.welcome-bay-copy p{font-size:17px;line-height:1.8;color:#e0e4df;margin:0 0 18px}.welcome-bay-copy a{color:#a7e4e1;text-decoration:underline;text-underline-offset:4px}.welcome-bay-copy a:focus-visible{outline:2px solid #ead8af;outline-offset:4px}.welcome-bay-copy .welcome-bay-notice{font-size:14px;color:#c1c9c2;margin-bottom:0}@media(max-width:600px){.welcome-bay-copy{padding:22px 18px}.welcome-bay-copy p{font-size:16px}}

/* Compact archive entrance controls */
.library-tools { justify-content:center; padding:10px 0 0; }
.archive-search-art { display:block; width:210px; max-width:65vw; padding:0; border:0; background:transparent; cursor:pointer; }
.archive-search-art img { display:block; width:100%; height:auto; }
.archive-search-art:hover { filter:brightness(1.15); }
.archive-search-art:focus-visible { outline:2px solid #dfc17a; outline-offset:4px; border-radius:12px; }
.index-notice { flex-direction:column; align-items:center; text-align:center; gap:6px; }

.doodles-intro {clear:both;padding-top:24px}.doodles-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;clear:both}.doodles-gallery figure{margin:0}.doodles-gallery img{display:block;width:100%;height:auto;object-fit:contain}.doodles-gallery figcaption{padding:10px 0;color:#cfbf9d}.doodles-gallery a:focus-visible{outline:3px solid #dfc17a;outline-offset:4px}@media(max-width:600px){.doodles-gallery{grid-template-columns:1fr;gap:18px}}

/* Keep pages and controls together on desktop; snug frames on mobile. */
.publication-reader-shell { grid-template-columns: minmax(0, 1fr); }
.publication-page-column { width: 100%; min-width: 0; }
.comic-reader-frame, .publication-page-frame {
  width: fit-content; max-width: 100%; min-height: 0; margin-inline: auto;
  padding: 8px; box-sizing: border-box;
}
.comic-reader-frame img, .publication-page-frame img {
  width: auto; max-width: 100%; height: auto;
  max-height: calc(100vh - 220px); max-height: calc(100svh - 220px);
  object-fit: contain;
}
.comic-reader-controls, .publication-reader-controls {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
}
@media (max-width: 760px) {
  .comic-reader-frame, .publication-page-frame { padding: 4px; }
  .comic-reader-frame img, .publication-page-frame img { width: 100%; max-height: none; }
}

/* DC project entries follow the existing collection grid. */
.fw-project-entry{display:grid;gap:12px;text-align:left;color:var(--text);cursor:pointer;font:inherit}.fw-project-entry img{width:100%;height:280px;object-fit:contain;background:#080d13}.fw-project-entry strong{font-size:20px}.fw-project-entry span{line-height:1.5}.fw-project-entry:focus-visible{outline:3px solid var(--fw-accent);outline-offset:4px}