/* Generated foundation bundle. Edit source files, then rebuild. */

/* ---- assets/css/mode-1999-v4.css ---- */
@font-face {
  font-family: "Comic Neue";
  src: url("/assets/fonts/comic-neue-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Comic Neue";
  src: url("/assets/fonts/comic-neue-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Settings control: visible in the standard site and transformed with the rest of 1999 Mode. */
.settings-mode-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: center;
}

.settings-mode-copy .settings-panel-head {
  margin-bottom: 0.55rem;
}

.settings-mode-copy > p {
  max-width: 46rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.mode-1999-toggle {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.mode-1999-toggle:hover,
.mode-1999-toggle:focus-visible,
.mode-1999-toggle.is-active {
  border-color: var(--accent);
}

.mode-1999-toggle:disabled {
  cursor: wait;
  opacity: 0.72;
}

.mode-1999-switch {
  width: 2.8rem;
  height: 1.5rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 76%, #000 24%);
}

.mode-1999-switch span {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  border-radius: 50%;
  background: var(--muted);
  transform: translateX(0);
  transition: transform 180ms ease, background-color 180ms ease;
}

.mode-1999-toggle.is-active .mode-1999-switch span {
  background: var(--accent);
  transform: translateX(1.25rem);
}

.settings-1999-palettes {
  grid-column: 1 / -1;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.settings-1999-palette-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.75rem;
}

.settings-1999-palette-head > strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.settings-1999-palette-head > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.settings-1999-palette-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.settings-1999-accessibility {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.settings-1999-accessibility-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.75rem;
}

.settings-1999-accessibility-head > strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.settings-1999-accessibility-head > span {
  color: var(--muted);
  font-size: 0.72rem;
}

.settings-1999-preference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.settings-1999-preference-grid > button {
  min-height: 4.8rem;
  display: grid;
  gap: 0.3rem;
  align-content: center;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-1999-preference-grid > button strong {
  font-size: 0.78rem;
}

.settings-1999-preference-grid > button span {
  color: var(--muted);
  font-size: 0.68rem;
}

.settings-1999-preference-grid > button:hover,
.settings-1999-preference-grid > button:focus-visible,
.settings-1999-preference-grid > button.is-active {
  border-color: var(--accent);
}

.palette-swatch-1999 {
  min-height: 5.6rem;
}

.palette-swatch-1999.is-active {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}

.mode-1999-banner,
.mode-1999-signoff,
.mode-1999-neighborhood,
.mode-1999-community {
  display: none;
}

.mode-transition-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0;
  background-color: #050505;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.045) 0 1px,
    transparent 1px 4px
  );
  transition: opacity 140ms linear;
}

.mode-transition-curtain.is-active {
  opacity: 1;
}

.mode-transition-curtain.is-leaving {
  opacity: 0;
  transition-duration: 260ms;
}

/* Global late-1990s visual system. Geometry stays responsive; presentation changes everywhere. */
html[data-mode="1999"] {
  --1999-bg: #000066;
  --1999-surface: #000099;
  --1999-ink: #ffff66;
  --1999-muted: #ffffff;
  --1999-accent: #ff00ff;
  --1999-link: #00ffff;
  --1999-visited: #ff99ff;
  --1999-border: #ffff00;
  --1999-tileA: #000066;
  --1999-tileB: #000033;
  --1999-headingBg: #710071;
  --1999-headingInk: #ffff00;
  --1999-good: #00ff00;
  --1999-danger: #ff3300;
  color-scheme: dark;
  scrollbar-color: var(--1999-accent, #ff00ff) var(--1999-bg, #000066);
}

html[data-mode="1999"][data-1999-palette="cyberspace_night"] {
  --1999-bg: #000000;
  --1999-surface: #001a33;
  --1999-ink: #f5f5f5;
  --1999-muted: #99ccff;
  --1999-accent: #00ff66;
  --1999-link: #00ffff;
  --1999-visited: #ff00ff;
  --1999-border: #00ff66;
  --1999-tileA: #000000;
  --1999-tileB: #001133;
  --1999-headingBg: #0011aa;
  --1999-headingInk: #00ffff;
  --1999-good: #39ff14;
  --1999-danger: #ff3366;
}

html[data-mode="1999"][data-1999-palette="purple_planet"] {
  --1999-bg: #21003d;
  --1999-surface: #3d0066;
  --1999-ink: #ffffff;
  --1999-muted: #ffccff;
  --1999-accent: #ffcc00;
  --1999-link: #66ffff;
  --1999-visited: #ff99ff;
  --1999-border: #ff66cc;
  --1999-tileA: #21003d;
  --1999-tileB: #3d0066;
  --1999-headingBg: #72008f;
  --1999-headingInk: #ffff00;
  --1999-good: #66ff99;
  --1999-danger: #ff6633;
}

html[data-mode="1999"][data-1999-palette="under_construction"] {
  --1999-bg: #111111;
  --1999-surface: #292929;
  --1999-ink: #fff700;
  --1999-muted: #ffffff;
  --1999-accent: #ff7a00;
  --1999-link: #39ff14;
  --1999-visited: #ff66cc;
  --1999-border: #fff700;
  --1999-tileA: #111111;
  --1999-tileB: #333333;
  --1999-headingBg: #ff7a00;
  --1999-headingInk: #000000;
  --1999-good: #39ff14;
  --1999-danger: #ff2a2a;
}

html[data-mode="1999"][data-1999-contrast="high"] {
  --1999-bg: #000000;
  --1999-surface: #000000;
  --1999-ink: #ffffff;
  --1999-muted: #ffffff;
  --1999-accent: #ffff00;
  --1999-link: #00ffff;
  --1999-visited: #ff99ff;
  --1999-border: #ffffff;
  --1999-tileA: #000000;
  --1999-tileB: #000000;
  --1999-headingBg: #000000;
  --1999-headingInk: #ffff00;
  --1999-good: #00ff66;
  --1999-danger: #ff6666;
}

html[data-mode="1999"][data-1999-text="large"] {
  font-size: 112.5%;
}

html[data-mode="1999"],
html[data-mode="1999"] body {
  min-width: 0;
  background-color: var(--1999-bg, #000066) !important;
}

html[data-mode="1999"] body {
  overflow-x: hidden;
  color: var(--1999-ink, #ffff66) !important;
  background-image: repeating-linear-gradient(
    135deg,
    var(--1999-tileA, #000066) 0 14px,
    var(--1999-tileB, #000033) 14px 28px
  ) !important;
  background-attachment: fixed !important;
}

html[data-mode="1999"] body,
html[data-mode="1999"] body * {
  font-family: "Comic Sans MS", "Comic Neue", "Comic Sans", cursive !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-mode="1999"] body {
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

html[data-mode="1999"][data-1999-patterns="off"] body {
  background-image: none !important;
}

html[data-mode="1999"][data-1999-neighborhood="home"]:not([data-1999-patterns="off"]) body {
  background-image: repeating-linear-gradient(0deg, var(--1999-tileA) 0 10px, var(--1999-tileB) 10px 20px) !important;
}

html[data-mode="1999"][data-1999-neighborhood="books"]:not([data-1999-patterns="off"]) body {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 23px, var(--1999-border) 23px 24px),
    repeating-linear-gradient(0deg, var(--1999-tileA) 0 23px, var(--1999-tileB) 23px 24px) !important;
}

html[data-mode="1999"][data-1999-neighborhood="annex"]:not([data-1999-patterns="off"]) body {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--1999-accent) 18px 19px, transparent 19px 36px),
    repeating-linear-gradient(-45deg, var(--1999-tileA) 0 18px, var(--1999-tileB) 18px 36px) !important;
}

html[data-mode="1999"][data-1999-neighborhood="signals"]:not([data-1999-patterns="off"]) body {
  background-image: repeating-linear-gradient(0deg, var(--1999-tileA) 0 3px, var(--1999-tileB) 3px 12px) !important;
}

html[data-mode="1999"][data-1999-neighborhood="guestbook"]:not([data-1999-patterns="off"]) body,
html[data-mode="1999"][data-1999-neighborhood="mail"]:not([data-1999-patterns="off"]) body {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 31px, var(--1999-border) 31px 32px),
    repeating-linear-gradient(0deg, var(--1999-tileA) 0 31px, var(--1999-tileB) 31px 32px) !important;
}

html[data-mode="1999"] body::before,
html[data-mode="1999"] body::after,
html[data-mode="1999"] .site-main::before,
html[data-mode="1999"] .site-main::after,
html[data-mode="1999"] [class*="orb"],
html[data-mode="1999"] [class*="glow"] {
  display: none !important;
}

html[data-mode="1999"] ::selection {
  color: #000;
  background: var(--1999-accent, #ff00ff);
}

html[data-mode="1999"] a {
  color: var(--1999-link, #00ffff) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
}

html[data-mode="1999"] a:visited {
  color: var(--1999-visited, #ff99ff) !important;
}

html[data-mode="1999"] a:hover,
html[data-mode="1999"] a:focus-visible {
  color: var(--1999-headingInk, #ffff00) !important;
  background-color: transparent !important;
  outline: 2px dotted var(--1999-border, #ffff00) !important;
  outline-offset: 2px;
}

html[data-mode="1999"] :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--1999-headingInk, #ffff00) !important;
  outline-offset: 3px !important;
}

html[data-mode="1999"] .skip-link {
  position: fixed;
  z-index: 2147483647;
  border: 3px outset var(--1999-border, #ffff00);
  border-radius: 0;
  color: #000 !important;
  background: var(--1999-headingInk, #ffff00);
  font-weight: 900;
}

html[data-mode="1999"] body:not(.site-shell) :where(h1, h2, h3, h4, h5, h6) {
  width: fit-content;
  max-width: 100%;
  padding: 0 0 0.12em;
  border: 0 !important;
  border-bottom: 2px dotted var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: var(--1999-headingInk, #ffff00) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 2px 2px 0 #000 !important;
  letter-spacing: 0 !important;
}

html[data-mode="1999"] body:not(.site-shell) :where(p, li, dd, dt, label, small, time, blockquote, figcaption) {
  color: var(--1999-ink, #ffff66) !important;
}

html[data-mode="1999"] body:not(.site-shell) :where(.eyebrow, .lede, [class*="-meta"], [class*="-subtitle"], [class*="-kicker"]) {
  color: var(--1999-muted, #fff) !important;
  letter-spacing: 0.04em !important;
}

html[data-mode="1999"] :where(.site-main, .page-shell, .section-band) {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-mode="1999"] body:not(.site-shell) :where(.page-hero, .home-hero, .article-header) {
  border-top: 4px ridge var(--1999-border, #ffff00) !important;
  border-bottom: 4px ridge var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  background-color: var(--1999-tileA, #000066) !important;
  background-image: repeating-linear-gradient(
    90deg,
    var(--1999-tileA, #000066) 0 18px,
    var(--1999-tileB, #000033) 18px 36px
  ) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] body:not(.site-shell) .article-header::before,
html[data-mode="1999"] body:not(.site-shell) .article-header::after {
  display: none !important;
}

html[data-mode="1999"] .section-inner {
  width: min(calc(100% - 1rem), 72rem) !important;
}

html[data-mode="1999"] body:not(.site-shell) :is(
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-tile"],
  [class*="-tile "],
  [class$="-box"],
  [class*="-box "],
  .card,
  .panel,
  .tile,
  .box,
  details,
  fieldset
) {
  border: 3px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  background-color: var(--1999-surface, #000099) !important;
  background-image: none !important;
  box-shadow: 4px 4px 0 #000 !important;
}

html[data-mode="1999"] body:not(.site-shell) .site-main :is(
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-tile"],
  [class*="-tile "],
  [class$="-box"],
  [class*="-box "],
  .card,
  .panel,
  .tile,
  .box
) {
  border: 1px solid var(--1999-border, #ffff00) !important;
  background-color: var(--1999-tileB, #000033) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] body:not(.site-shell) :is(
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-tile"],
  [class*="-tile "],
  [class$="-box"],
  [class*="-box "],
  .card,
  .panel,
  .tile,
  .box
)::before,
html[data-mode="1999"] body:not(.site-shell) :is(
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-tile"],
  [class*="-tile "],
  [class$="-box"],
  [class*="-box "],
  .card,
  .panel,
  .tile,
  .box
)::after {
  background-image: none !important;
  filter: none !important;
}

html[data-mode="1999"] :where(button:not(.rotary-hole), .button, input[type="button"], input[type="submit"]) {
  min-height: 2.75rem;
  border: 3px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: var(--1999-link, #00ffff) !important;
  background: var(--1999-tileB, #000033) !important;
  box-shadow: 3px 3px 0 #000 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

html[data-mode="1999"] :where(button:not(.rotary-hole), .button, input[type="button"], input[type="submit"]):active {
  border-style: inset !important;
  box-shadow: 1px 1px 0 #000 !important;
  transform: translate(2px, 2px);
}

html[data-mode="1999"] :where(input:not([type="button"]):not([type="submit"]), select, textarea) {
  min-height: 2.75rem;
  border: 3px inset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: #000 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html[data-mode="1999"] :where(input, textarea)::placeholder {
  color: #555 !important;
  opacity: 1;
}

html[data-mode="1999"] :where(hr, .footer-line, .header-line) {
  height: 4px !important;
  border: 0 !important;
  background: var(--1999-border, #ffff00) !important;
}

html[data-mode="1999"] :where(table, th, td) {
  border: 2px ridge var(--1999-border, #ffff00) !important;
  border-collapse: collapse !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--1999-surface, #000099) !important;
}

html[data-mode="1999"] :where(pre, code, kbd, samp) {
  border-radius: 0 !important;
  color: #00ff00 !important;
  background: #000 !important;
  font-family: "Courier New", monospace !important;
}

html[data-mode="1999"] body:not(.site-shell) main img {
  border: 3px ridge var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
}

html[data-mode="1999"] svg {
  color: currentColor;
  filter: none !important;
}

html[data-mode="1999"] .mode-1999-banner {
  height: 2rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 3px ridge var(--1999-border, #ffff00);
  border-bottom: 3px ridge var(--1999-border, #ffff00);
  color: var(--1999-headingInk, #ffff00);
  background: var(--1999-headingBg, #ff00ff);
}

html[data-mode="1999"] .mode-1999-banner-track {
  width: max-content;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4rem;
  padding-left: 100%;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 #000;
  will-change: transform;
  animation: mode-1999-marquee 26s linear infinite;
}

html[data-mode="1999"] .mode-1999-banner-track span::before {
  content: "\2605";
  margin-right: 0.75rem;
  color: var(--1999-accent, #ff00ff);
}

html[data-mode="1999"] .mode-1999-banner:hover .mode-1999-banner-track {
  animation-play-state: running;
}

html[data-mode="1999"] .mode-1999-neighborhood {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 3px double var(--1999-border, #ffff00);
  color: var(--1999-ink, #ffff66);
  background: var(--1999-tileB, #000033);
}

html[data-mode="1999"] .mode-1999-neighborhood-mark {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 2px outset var(--1999-border, #ffff00);
  color: var(--1999-headingInk, #ffff00);
  background: #000;
  font-size: 1.2rem;
  font-weight: 900;
}

html[data-mode="1999"] .mode-1999-neighborhood > span:last-child {
  min-width: 0;
  display: grid;
  gap: 0.05rem;
}

html[data-mode="1999"] .mode-1999-neighborhood small {
  color: var(--1999-muted, #fff) !important;
  font-size: 0.62rem;
  text-transform: uppercase;
}

html[data-mode="1999"] .mode-1999-neighborhood strong {
  overflow-wrap: anywhere;
  color: var(--1999-headingInk, #ffff00);
  font-size: 0.82rem;
}

html[data-mode="1999"] .mode-1999-community {
  display: grid;
  gap: 0.85rem;
  margin: 1rem;
  padding: 1rem;
  border: 3px ridge var(--1999-border, #ffff00);
  color: var(--1999-ink, #ffff66);
  background: var(--1999-tileB, #000033);
}

html[data-mode="1999"] .mode-1999-community-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--1999-headingInk, #ffff00);
  text-align: center;
}

html[data-mode="1999"] .mode-1999-community-head span {
  color: var(--1999-accent, #ff00ff);
}

html[data-mode="1999"] .mode-1999-webring {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

html[data-mode="1999"] .mode-1999-webring a {
  min-height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0.45rem;
  border: 2px outset var(--1999-border, #ffff00);
  color: var(--1999-link, #00ffff) !important;
  background: var(--1999-surface, #000099);
  text-align: center;
}

html[data-mode="1999"] .mode-1999-site-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
}

html[data-mode="1999"] .mode-1999-site-stats > div {
  min-width: 0;
  padding: 0.6rem;
  border: 1px dotted var(--1999-border, #ffff00);
  text-align: center;
}

html[data-mode="1999"] .mode-1999-site-stats dt {
  margin-bottom: 0.25rem;
  color: var(--1999-muted, #fff) !important;
  font-size: 0.62rem;
  text-transform: uppercase;
}

html[data-mode="1999"] .mode-1999-site-stats dd {
  margin: 0;
  color: var(--1999-ink, #ffff66) !important;
  font-size: 0.82rem;
}

html[data-mode="1999"] .mode-1999-hit-counter {
  width: fit-content;
  margin-inline: auto !important;
  padding: 0.15rem 0.42rem;
  border: 2px inset var(--1999-border, #ffff00);
  color: #00ff66 !important;
  background: #000;
  font-family: "Courier New", monospace !important;
  font-weight: 900;
  letter-spacing: 0.14em;
}

html[data-mode="1999"] .mode-1999-web-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

html[data-mode="1999"] .mode-1999-web-button {
  width: 88px;
  min-width: 88px;
  height: 31px;
  min-height: 31px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1px 3px !important;
  border: 2px outset #fff !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: #000 !important;
  box-shadow: none !important;
  font-family: Arial, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 900;
  line-height: 1.02;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
}

html[data-mode="1999"] .mode-1999-web-button.is-radio {
  color: #ffff00 !important;
  background: #001166 !important;
}

html[data-mode="1999"] .mode-1999-web-button.is-guestbook {
  color: #000 !important;
  background: #00ffff !important;
}

html[data-mode="1999"] .mode-1999-web-button.is-audio {
  color: #000 !important;
  background: #ffff00 !important;
}

html[data-mode="1999"] .mode-1999-web-button.is-audio[aria-pressed="true"] {
  color: #fff !important;
  background: #880000 !important;
}

html[data-mode="1999"] .mode-1999-web-button.is-email {
  color: #fff !important;
  background: #710071 !important;
}

html[data-mode="1999"] .mode-1999-audio-status {
  min-height: 1em;
  margin: -0.4rem 0 0;
  color: var(--1999-muted, #fff) !important;
  font-size: 0.62rem;
  text-align: center;
}

html[data-mode="1999"][data-1999-motion="still"] *,
html[data-mode="1999"][data-1999-motion="still"] *::before,
html[data-mode="1999"][data-1999-motion="still"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

html[data-mode="1999"][data-1999-motion="still"] .mode-1999-banner-track {
  width: 100%;
  justify-content: center;
  padding-left: 0;
  animation: none !important;
}

html[data-mode="1999"][data-1999-motion="still"] .mode-1999-banner-track span:not(:first-child) {
  display: none;
}

@keyframes mode-1999-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100%, 0, 0);
  }
}

html[data-mode="1999"] .site-header {
  position: relative !important;
  inset: auto !important;
  z-index: 50;
  border-bottom: 5px ridge var(--1999-border, #ffff00) !important;
  background: var(--1999-surface, #000099) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .top-header {
  background: var(--1999-surface, #000099) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .header-inner {
  width: min(calc(100% - 1rem), 72rem) !important;
}

html[data-mode="1999"] .logo-img {
  border: 3px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  image-rendering: pixelated;
  box-shadow: 3px 3px 0 #000 !important;
}

html[data-mode="1999"] :where(.logo-text, .footer-brand-title, .drawer-title-link) {
  color: var(--1999-headingInk, #ffff00) !important;
  text-shadow: 2px 2px 0 #000 !important;
}

html[data-mode="1999"] :where(.logo-sub, .drawer-subtitle) {
  color: var(--1999-muted, #fff) !important;
}

html[data-mode="1999"] :where(.main-nav .nav-link, .header-social a) {
  border: 2px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: var(--1999-link, #00ffff) !important;
  background: var(--1999-tileB, #000033) !important;
  box-shadow: 2px 2px 0 #000 !important;
  text-decoration: underline !important;
}

html[data-mode="1999"] .dropdown-menu {
  border: 3px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  background: var(--1999-surface, #000099) !important;
  box-shadow: 5px 5px 0 #000 !important;
}

html[data-mode="1999"] .dropdown-menu a {
  border-bottom: 1px dotted var(--1999-border, #ffff00) !important;
  color: var(--1999-link, #00ffff) !important;
  background: transparent !important;
}

html[data-mode="1999"] :where(.drawer, .drawer-keypad) {
  border: 5px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--1999-bg, #000066) !important;
  box-shadow: 8px 0 0 #000 !important;
}

html[data-mode="1999"] .drawer-overlay {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: none !important;
}

html[data-mode="1999"] :where(.keycap, .keypad-status, .drawer-header) {
  border-color: var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--1999-surface, #000099) !important;
  box-shadow: 3px 3px 0 #000 !important;
}

html[data-mode="1999"] .site-footer {
  border-top: 6px ridge var(--1999-border, #ffff00) !important;
  border-bottom: 6px ridge var(--1999-border, #ffff00) !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--1999-surface, #000099) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .site-footer :where(h2, h3) {
  font-size: 1rem !important;
}

html[data-mode="1999"] .footer-social img,
html[data-mode="1999"] .footer-art img {
  border: 2px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  image-rendering: pixelated;
}

html[data-mode="1999"] .mode-1999-signoff {
  display: grid;
  gap: 0.6rem;
  padding: 0.65rem;
  border-bottom: 4px ridge var(--1999-border, #ffff00);
  color: var(--1999-ink, #ffff66);
  background: #000;
  text-align: center;
  font-size: 0.72rem;
}

html[data-mode="1999"] .mode-1999-gif-banners,
html[data-mode="1999"] .mode-1999-signoff-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

html[data-mode="1999"] .mode-1999-gif-banners {
  gap: 0.3rem;
}

html[data-mode="1999"] .mode-1999-signoff-line {
  gap: 0.4rem 2rem;
}

html[data-mode="1999"] .mode-1999-gif-banners a {
  width: 88px;
  height: 31px;
  display: block;
  flex: 0 0 auto;
  background: #000 !important;
  line-height: 0;
}

html[data-mode="1999"] .mode-1999-gif-banners img {
  width: 88px !important;
  height: 31px !important;
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain;
  image-rendering: pixelated;
  box-shadow: none !important;
}

html[data-mode="1999"] .mode-1999-gif-still {
  display: none !important;
}

html[data-mode="1999"][data-1999-motion="still"] .mode-1999-gif-animated {
  display: none !important;
}

html[data-mode="1999"][data-1999-motion="still"] .mode-1999-gif-still {
  display: block !important;
}

html[data-mode="1999"] :where(
  .cookie-banner,
  .welcome-bubble,
  .first-viewer-offer__dialog,
  .modal-dialog,
  #site-memory .sm-card
) {
  border: 4px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--1999-surface, #000099) !important;
  background-image: none !important;
  box-shadow: 8px 8px 0 #000 !important;
}

html[data-mode="1999"] :where(.bottom-console, .pane, .entry, #hud) {
  border: 3px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--1999-surface, #000099) !important;
  box-shadow: 4px 4px 0 #000 !important;
}

html[data-mode="1999"] #loading {
  color: var(--1999-ink, #ffff66) !important;
  background: #000 !important;
}

html[data-mode="1999"] .header-block h1 {
  margin-inline: auto !important;
}

html[data-mode="1999"] .mode-1999-switch,
html[data-mode="1999"] .mode-1999-switch span {
  border-radius: 0 !important;
}

html[data-mode="1999"] .article-progress,
html[data-mode="1999"] .signal-post .article-progress {
  top: 0 !important;
  height: 4px !important;
  background: #000 !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .article-progress span {
  background: var(--1999-accent, #ff00ff) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] #site-memory {
  padding: 0.5rem !important;
}

html[data-mode="1999"] #site-memory .sm-card {
  width: min(44rem, 100%) !important;
  gap: 0.75rem !important;
  box-shadow: 4px 4px 0 #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-mode="1999"] #site-memory .sm-actions {
  flex-wrap: wrap !important;
}

html[data-mode="1999"] #smWelcomeBubble {
  right: 0.5rem !important;
  bottom: 0.5rem !important;
  max-width: min(22rem, calc(100vw - 1rem)) !important;
  border: 3px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--1999-surface, #000099) !important;
  box-shadow: 4px 4px 0 #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-mode="1999"] #firstViewerOffer {
  border: 0 !important;
  padding: 0.5rem !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-mode="1999"] #firstViewerOffer .first-viewer-offer__backdrop {
  background: rgba(0, 0, 0, 0.86) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-mode="1999"] #firstViewerOffer .first-viewer-offer__dialog {
  width: min(42rem, 100%) !important;
  min-height: 0 !important;
  max-height: calc(100svh - 1rem) !important;
  grid-template-columns: 1fr !important;
  overflow: auto !important;
}

html[data-mode="1999"] #firstViewerOffer .first-viewer-offer__art {
  min-height: 10rem !important;
  max-height: 12rem !important;
  border-radius: 0 !important;
}

html[data-mode="1999"] #firstViewerOffer .first-viewer-offer__mockup {
  width: min(36%, 10rem) !important;
}

html[data-mode="1999"] #firstViewerOffer .first-viewer-offer__copy {
  padding: 1rem !important;
}

html[data-mode="1999"] :where(.modal-overlay, .reader-modal) {
  border: 0 !important;
  padding: 0.5rem !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.86) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-mode="1999"] .modal-dialog {
  width: min(42rem, calc(100vw - 1rem)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100svh - 1rem) !important;
  overflow: hidden !important;
}

html[data-mode="1999"] :where(table, pre) {
  max-width: 100%;
  overflow-x: auto;
}

html[data-mode="1999"] .settings-1999-palettes {
  border-top: 3px ridge var(--1999-border, #ffff00) !important;
}

html[data-mode="1999"] .palette-swatch-1999.is-active {
  border-style: inset !important;
  outline: 3px dotted var(--1999-accent, #ff00ff) !important;
}

html[data-mode="1999"] .astral-reader-page :where(
  .reader-main,
  .operator-phonebook,
  .operator-contact-row,
  .poem-card,
  .operator-card
) {
  border-color: var(--1999-border, #ffff00) !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--1999-tileB, #000033) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .astral-reader-page :where(
  .operator-contact-row,
  .poem-card,
  .operator-card
):hover,
html[data-mode="1999"] .astral-reader-page :where(
  .operator-contact-row,
  .poem-card,
  .operator-card
):focus-visible,
html[data-mode="1999"] .astral-reader-page :where(
  .operator-contact-row,
  .poem-card,
  .operator-card
):focus-within {
  border-color: var(--1999-accent, #ff00ff) !important;
  background: var(--1999-surface, #000099) !important;
  outline: 2px dotted var(--1999-accent, #ff00ff) !important;
  outline-offset: -3px;
}

/* Rotary Reader: a deliberate palette-driven 1999 telephone console. */
html[data-mode="1999"] .astral-reader-page .reader-main {
  border: 4px ridge var(--1999-border, #ffff00) !important;
  background: var(--1999-bg, #000066) !important;
}

html[data-mode="1999"] .astral-reader-page .rotary-phone {
  border: 4px outset var(--1999-border, #ffff00) !important;
  background: var(--1999-tileB, #000033) !important;
  box-shadow: 6px 6px 0 #000 !important;
}

html[data-mode="1999"] .astral-reader-page :where(
  .rotary-outer-ring,
  .rotary-middle-ring,
  .rotary-inner-ring,
  .rotary-center,
  .rotary-hole
) {
  background-image: none !important;
}

html[data-mode="1999"] .astral-reader-page .rotary-outer-ring {
  border: 3px double var(--1999-accent, #ff00ff) !important;
  background-color: var(--1999-surface, #000099) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .astral-reader-page .rotary-middle-ring {
  border: 3px outset var(--1999-border, #ffff00) !important;
  background-color: var(--1999-tileA, #000066) !important;
  box-shadow: 3px 3px 0 #000 !important;
}

html[data-mode="1999"] .astral-reader-page .rotary-inner-ring {
  border: 3px inset var(--1999-border, #ffff00) !important;
  background-color: var(--1999-tileB, #000033) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .astral-reader-page .rotary-center {
  border: 3px outset var(--1999-accent, #ff00ff) !important;
  color: var(--1999-headingInk, #ffff00) !important;
  background-color: var(--1999-headingBg, #ff00ff) !important;
  box-shadow: 3px 3px 0 #000 !important;
  text-shadow: 1px 1px 0 #000;
}

html[data-mode="1999"] .astral-reader-page .rotary-hole {
  border: 3px outset var(--1999-border, #ffff00) !important;
  background-color: var(--1999-tileA, #000066) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .astral-reader-page .rotary-hole.enabled:hover,
html[data-mode="1999"] .astral-reader-page .rotary-hole.enabled:focus-visible {
  border-style: inset !important;
  background-color: var(--1999-headingBg, #ff00ff) !important;
}

html[data-mode="1999"] .astral-reader-page :where(.rotary-numtext, .rotary-letter) {
  color: var(--1999-headingInk, #ffff00) !important;
  text-shadow: 1px 1px 0 #000 !important;
}

html[data-mode="1999"] .astral-reader-page .rotary-letter {
  color: var(--1999-link, #00ffff) !important;
}

html[data-mode="1999"] .astral-reader-page .rotary-dot {
  border-radius: 0 !important;
  background: var(--1999-accent, #ff00ff) !important;
}

html[data-mode="1999"] .astral-reader-page .finger-stopper {
  background: var(--1999-headingInk, #ffff00) !important;
}

html[data-mode="1999"] .astral-reader-page :where(
  .poem-list.entry-directory,
  .poem-list.entry-standard
) {
  border: 3px inset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  background: #000 !important;
}

html[data-mode="1999"] .astral-reader-page .entry-directory-row {
  border-left: 4px solid var(--entry-index-color, var(--1999-border, #ffff00)) !important;
  border-bottom: 1px dotted var(--1999-border, #ffff00) !important;
  background: var(--1999-tileB, #000033) !important;
}

html[data-mode="1999"] .astral-reader-page .entry-directory-row:hover,
html[data-mode="1999"] .astral-reader-page .entry-directory-row:has(.entry-directory-open:focus-visible) {
  background: var(--1999-surface, #000099) !important;
}

html[data-mode="1999"] .astral-reader-page :where(
  .entry-directory-title,
  .poem-title,
  .modal-title
) {
  color: var(--1999-headingInk, #ffff00) !important;
  text-shadow: 1px 1px 0 #000 !important;
}

html[data-mode="1999"] .astral-reader-page :where(
  .entry-directory-meta,
  .entry-standard-author,
  .poem-body,
  .poem-meta-footer
) {
  color: var(--1999-ink, #ffff66) !important;
}

html[data-mode="1999"] .astral-reader-page .modal-dialog {
  border: 4px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  background: var(--1999-tileA, #000066) !important;
  box-shadow: 6px 6px 0 #000 !important;
}

html[data-mode="1999"] .astral-reader-page .modal-header {
  border-bottom: 3px double var(--1999-border, #ffff00) !important;
  background: var(--1999-headingBg, #ff00ff) !important;
}

html[data-mode="1999"] .astral-reader-page .modal-index-row {
  border-bottom: 1px dotted var(--1999-border, #ffff00) !important;
  background: var(--1999-tileB, #000033) !important;
}

html[data-mode="1999"] .astral-reader-page .modal-body {
  background: #000 !important;
}

/* Book pages: keep neighborhood patterns outside the text-bearing surfaces. */
html[data-mode="1999"] body.books-index :where(
  .books-bizarre-hero,
  .books-library
),
html[data-mode="1999"] body.book-detail :where(
  .book-edition-band,
  .book-about-band,
  .astral-reader-gateway-band,
  .book-companion-band,
  .book-flex-band
) {
  background-color: var(--1999-tileA, #000066) !important;
  background-image: none !important;
}

html[data-mode="1999"] body.book-detail :where(
  .book-showcase-lede,
  .book-about-copy,
  .book-flex-copy
) {
  padding: 1rem !important;
  border: 2px solid var(--1999-border, #ffff00) !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--1999-tileB, #000033) !important;
}

/* Superseded by mode-1999-shell-v5.css. Retained inertly for rollback reference. */
@media (min-width: 761px) and (max-width: 760px) {
  html[data-mode="1999"] body:has(> .site-header) {
    width: min(calc(100% - 1rem), 65rem);
    min-height: 100%;
    display: grid;
    grid-template-columns: 10rem minmax(0, 54rem);
    grid-template-areas:
      "banner banner"
      "sidebar content"
      ". footer"
      ". signoff";
    align-items: start;
    justify-content: center;
    gap: 1rem;
    margin-inline: auto !important;
    border-inline: 0;
    box-shadow: none;
  }

  html[data-mode="1999"] body:has(> .site-header) > .mode-1999-banner {
    grid-area: banner;
    min-width: 0;
  }

  html[data-mode="1999"] body:has(> .site-header) > .site-header {
    grid-area: sidebar;
    align-self: start;
    position: sticky !important;
    top: 0.75rem !important;
    inset-inline: auto !important;
    width: 100%;
    max-height: none;
    min-width: 0;
    overflow: visible;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-mode="1999"] body:has(> .site-header) > .site-main {
    grid-area: content;
    min-width: 0;
    overflow: hidden;
    border: 4px ridge var(--1999-border, #ffff00) !important;
    background-color: var(--1999-tileA, #000066) !important;
    box-shadow: 4px 4px 0 #000 !important;
  }

  html[data-mode="1999"] body:has(> .site-header) > .site-footer {
    grid-area: footer;
    min-width: 0;
  }

  html[data-mode="1999"] body:has(> .site-header) > .mode-1999-signoff {
    grid-area: signoff;
    min-width: 0;
  }

  html[data-mode="1999"] .site-header .top-header,
  html[data-mode="1999"] .site-header .header-inner {
    min-height: 0 !important;
    background: transparent !important;
  }

  html[data-mode="1999"] .site-header .header-inner {
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    margin: 0 !important;
    padding: 0.25rem;
  }

  html[data-mode="1999"] .site-header .brand {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
  }

  html[data-mode="1999"] .site-header .brand-text {
    align-items: center;
    white-space: normal;
  }

  html[data-mode="1999"] .site-header .logo-btn,
  html[data-mode="1999"] .site-header .logo-img {
    width: 4.35rem !important;
    height: 4.35rem !important;
  }

  html[data-mode="1999"] .site-header .logo-text {
    font-size: 0.92rem !important;
    white-space: normal;
  }

  html[data-mode="1999"] .site-header .logo-sub {
    font-size: 0.66rem !important;
    line-height: 1.35;
    white-space: normal;
  }

  html[data-mode="1999"] .site-header .main-nav {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.38rem;
  }

  html[data-mode="1999"] .site-header .nav-item {
    width: 100%;
    display: block;
  }

  html[data-mode="1999"] .site-header .nav-item.has-dropdown::before,
  html[data-mode="1999"] .site-header .nav-item.has-dropdown::after,
  html[data-mode="1999"] .site-header .nav-link::after,
  html[data-mode="1999"] .site-header .nav-link-direct::after {
    display: none !important;
  }

  html[data-mode="1999"] .site-header :where(.nav-link, .nav-link-direct) {
    width: 100%;
    min-height: 2.55rem;
    justify-content: space-between;
    padding: 0.48rem 0.58rem !important;
    font-size: 0.75rem !important;
    text-align: left;
  }

  html[data-mode="1999"] .site-header .dropdown-menu {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 0;
    margin: 0 !important;
    padding-block: 0 !important;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border-width: 0 !important;
    transform: none !important;
    transition: max-height 160ms ease, opacity 120ms ease, margin 120ms ease, padding 120ms ease !important;
  }

  html[data-mode="1999"] .site-header .nav-item.has-dropdown:hover .dropdown-menu,
  html[data-mode="1999"] .site-header .nav-item.has-dropdown:focus-within .dropdown-menu,
  html[data-mode="1999"] .site-header .nav-item.has-dropdown.is-open .dropdown-menu {
    max-height: 32rem;
    margin-top: 0.35rem !important;
    padding: 0.4rem !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    border-width: 3px !important;
    transform: none !important;
  }

  html[data-mode="1999"] .site-header .header-social {
    width: 100%;
    justify-content: center;
    padding-top: 0.7rem;
    border-top: 2px dotted var(--1999-border, #ffff00);
  }

  html[data-mode="1999"] .site-header .header-line {
    display: none !important;
  }

  html[data-mode="1999"] .site-main .section-inner {
    width: min(calc(100% - 1rem), 45rem) !important;
  }

  html[data-mode="1999"] body:has(> .site-header) .article-progress {
    right: auto !important;
    left: max(11.5rem, calc(50% - 21.5rem)) !important;
    width: min(calc(100vw - 12rem), 54rem) !important;
    transform: none;
  }

  html[data-mode="1999"] .site-main > *,
  html[data-mode="1999"] .site-main :where(
    section,
    article,
    nav,
    aside,
    header,
    footer,
    form,
    fieldset,
    figure
  ) {
    min-width: 0;
  }

  html[data-mode="1999"] .home .home-hero-grid {
    width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
    padding: 1.25rem !important;
  }

  html[data-mode="1999"] .home .home-hero-copy {
    padding-top: 0 !important;
  }

  html[data-mode="1999"] .home .home-hero-copy h1 {
    max-width: none !important;
    font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
    line-height: 1 !important;
  }

  html[data-mode="1999"] .home-hero-library,
  html[data-mode="1999"] .home-hero-shelf,
  html[data-mode="1999"] .home-hero-release {
    width: min(100%, 32rem) !important;
    margin-inline: auto !important;
  }

  html[data-mode="1999"] .home-hero-shelf {
    min-height: 24rem !important;
  }

  html[data-mode="1999"] .home-hero-release {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  html[data-mode="1999"] :where(
    .home-featured-layout,
    .home-cover-gallery,
    .home-dispatch-layout,
    .home .signal-home .home-dispatch-layout,
    .home .signal-home .signal-home-header,
    .home-shop-layout,
    .books-hero-layout,
    .catalog-head,
    .catalog-band .catalog-tools,
    .book-detail-grid,
    .detail-layout-primary,

    .book-dossier-head,
    .book-dossier-grid,
    .book-profile-lead,
    .book-profile-grid,
    .book-record-grid,
    .book-profile-feature,
    .book-profile-feature .book-profile-desk,
    .book-about-layout,
    .book-flex-layout,
    .book-overview-shell,
    .book-overview-head,
    .book-overview-support,
    .astral-reader-gateway,
    .reader-landing-inner,
    .reader-directory-layout,
    .reader-tools,
    .author-profile-grid,
    .author-biography,
    .author-statement,
    .events-desk-grid,
    .events-request-grid,
    .press-room-grid,
    .press-bio-list article,
    .newsletter-receiver-grid,
    .signal-console,
    .signals-index .signal-console,
    .signal-archive-head,
    .signal-status-board,
    .reader-router-head,
    .signal-focus,
    .settings-layout,
    .subscribe-layout,
    .subscribe-intro,
    .article-record,
    .signal-post .article-record,
    .signal-post .article-utilities,
    .footer-layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-mode="1999"] :where(
    .journal-index-grid,
    .newsletter-signal-list,
    .reader-router-grid,
    .reader-list,
    .events-confirmed-list,
    .book-note-grid,
    .book-showcase-facts,
    .book-profile-actions
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-mode="1999"] :where(
    .settings-palette-board,
    .press-asset-grid,
    .subscribe-choice-grid,
    .author-shelf
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-mode="1999"] .book-spec-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html[data-mode="1999"] .book-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-mode="1999"] .signals-index .signal-lanes > div:not(.signal-lanes-head) {
    grid-template-columns: 4.5rem minmax(0, 1fr) !important;
  }

  html[data-mode="1999"] :where(h1, h2, h3, h4, h5, h6) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  html[data-mode="1999"] h1 {
    font-size: clamp(2.2rem, 4.2vw, 3.7rem) !important;
  }

  html[data-mode="1999"] h2 {
    font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
  }
}

@media (min-width: 761px) {
  /*
   * In the compact 1999 layout, keep the carousel full-width and place its
   * excerpt and record side by side immediately underneath.
   */
  html[data-mode="1999"] .home .home-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-mode="1999"] .home :where(.home-hero-copy, .home-hero-library) {
    display: contents !important;
  }

  html[data-mode="1999"] .home .home-hero-copy > :where(
    h1,
    .lede,
    .action-row
  ) {
    grid-column: 1 / -1;
  }

  html[data-mode="1999"] .home .home-hero-copy > h1 {
    grid-row: 1;
  }


  html[data-mode="1999"] .home .home-hero-copy > .lede {
    grid-row: 2;
  }

  html[data-mode="1999"] .home .home-hero-copy > .action-row {
    grid-row: 3;
  }

  html[data-mode="1999"] .home .home-hero-shelf {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  html[data-mode="1999"] .home .home-hero-excerpt,
  html[data-mode="1999"] .home .home-hero-release {
    width: 100% !important;
    min-height: 0 !important;
    align-self: stretch;
    margin: 0 !important;
    padding: 1rem !important;
    border: 2px outset var(--1999-border, #ffff00) !important;
    background: var(--1999-tileB, #000033) !important;
  }

  html[data-mode="1999"] .home .home-hero-excerpt {
    grid-column: 1;
    grid-row: 6;
    max-width: none !important;
  }

  html[data-mode="1999"] .home .home-hero-release {
    grid-column: 2;
    grid-row: 6;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Signals archive: keep the narrow 1999 reading column from creating implicit overflow columns. */
html[data-mode="1999"] .signals-index .signal-index-band {
  min-height: 0 !important;
  padding: 1rem 0 2rem !important;
}

html[data-mode="1999"] .signals-index .signal-index-shell {
  display: grid;
  gap: 1rem;
}

html[data-mode="1999"] .signals-index .signal-focus {
  min-height: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.85rem !important;
  padding: 1rem !important;
  border: 2px solid var(--1999-border, #ffff00) !important;
  background: var(--1999-surface, #000099) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .signals-index .signal-focus-label {
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0 0.65rem;
  border-right: 0;
  border-bottom: 1px dotted var(--1999-border, #ffff00);
}

html[data-mode="1999"] .signals-index .signal-focus-label i {
  border-radius: 0;
  box-shadow: none;
}

html[data-mode="1999"] .signals-index .signal-focus-copy h1 {
  max-width: 100%;
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  line-height: 1 !important;
}

html[data-mode="1999"] .signals-index .signal-focus-link {
  width: fit-content;
  min-width: 0;
}

html[data-mode="1999"] .signals-index .signal-archive {
  min-width: 0;
  padding: 1rem !important;
  border: 2px solid var(--1999-border, #ffff00) !important;
  background: var(--1999-tileB, #000033) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] .signals-index .signal-archive-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.9rem !important;
  padding-bottom: 1rem !important;
}

html[data-mode="1999"] .signals-index .signal-tools,
html[data-mode="1999"] .signals-index .search-field {
  width: 100%;
  min-width: 0;
}

html[data-mode="1999"] .signals-index .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

html[data-mode="1999"] .signals-index .journal-index-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.75rem !important;
  border: 0 !important;
}

html[data-mode="1999"] .signals-index .journal-card {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 3.25rem minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 0.45rem 0.9rem !important;
  align-items: start !important;
  padding: 1rem !important;
  overflow: hidden;
  border: 1px dotted var(--1999-border, #ffff00) !important;
  background: var(--1999-bg, #000066) !important;
}

html[data-mode="1999"] .signals-index .journal-card:hover,
html[data-mode="1999"] .signals-index .journal-card:focus-within {
  padding: 1rem !important;
  border-style: solid !important;
  background: var(--1999-surface, #000099) !important;
}

html[data-mode="1999"] .signals-index .journal-card-number {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  color: var(--1999-accent, #ff00ff) !important;
  font-size: 0.78rem !important;
}

html[data-mode="1999"] .signals-index .journal-card :is(
  .journal-meta,
  h3,
  .journal-card-subtitle,
  .journal-card-summary,
  .journal-card-cta
) {
  grid-column: 2 !important;
  grid-row: auto !important;
  min-width: 0;
  max-width: 100% !important;
  justify-self: start;
  align-self: start;
}

html[data-mode="1999"] .signals-index .journal-card h3 {
  width: fit-content;
  font-size: clamp(1.45rem, 3.4vw, 2.2rem) !important;
  line-height: 1.08 !important;
}

html[data-mode="1999"] .signals-index .journal-card > :is(
  .journal-card-subtitle,
  .journal-card-summary
) {
  margin: 0.15rem 0 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

html[data-mode="1999"] .signals-index .journal-card .journal-card-cta {
  margin-top: 0.35rem;
  white-space: normal;
}

/* Superseded by the explicit desktop rail in mode-1999-shell-v5.css. */
@media (min-width: 1180px) and (max-width: 1179px) {
  /*
   * Detach the navigation from the page grid once the viewport has enough
   * outer space. The marquee, reading panel, footer, and badge strip then
   * share one centered 54rem column.
   */
  html[data-mode="1999"] body:has(> .site-header) {
    width: min(calc(100% - 1rem), 54rem);
    grid-template-columns: minmax(0, 54rem);
    grid-template-areas:
      "banner"
      "content"
      "footer"
      "signoff";
  }

  html[data-mode="1999"] body:has(> .site-header) > .site-header {
    grid-area: auto;
    position: fixed !important;
    top: 3rem !important;
    right: calc(50% + 28rem) !important;
    left: auto !important;
    width: clamp(8.5rem, calc((100vw - 54rem) / 2 - 1rem), 10rem);
    margin: 0 !important;
  }

  html[data-mode="1999"] body:has(> .site-header) .article-progress {
    right: auto !important;
    left: max(0.5rem, calc(50% - 27rem)) !important;
    width: min(calc(100vw - 1rem), 54rem) !important;
  }

  html[data-mode="1999"] .site-footer .footer-art-fixed {
    width: clamp(3.5rem, calc((100vw - 54rem) / 2 - 0.75rem), 5.8rem);
    position: fixed !important;
    right: 0.5rem !important;
    bottom: 0 !important;
    z-index: 45;
    display: block;
    transform: none !important;
    pointer-events: none;
  }

  html[data-mode="1999"] .site-footer .footer-art-fixed .footer-square {
    width: 100%;
    display: block;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto;
  }

  html[data-mode="1999"] .site-footer .footer-art-fixed img {
    width: 100% !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

html[data-mode="1999"] .site-footer .footer-art-fixed {
  width: clamp(3.25rem, 12vw, 5.8rem);
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 45;
  display: block;
  transform: none !important;
  pointer-events: none;
}

html[data-mode="1999"] .site-footer .footer-art-fixed .footer-square {
  width: 100%;
  display: block;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto;
}

html[data-mode="1999"] .site-footer .footer-art-fixed img {
  width: 100% !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .settings-mode-panel {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .mode-1999-toggle {
    width: 100%;
  }

  .settings-1999-palette-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-1999-preference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-mode="1999"] .mode-1999-banner {
    height: 1.8rem;
  }

  html[data-mode="1999"] .mode-1999-banner-track {
    gap: 2.5rem;
    font-size: 0.7rem;
    animation-duration: 16s;
  }

  html[data-mode="1999"] .section-inner,
  html[data-mode="1999"] .header-inner {
    width: min(calc(100% - 0.75rem), 72rem) !important;
  }

  html[data-mode="1999"] body {
    background-attachment: scroll !important;
  }

  html[data-mode="1999"] .mode-1999-neighborhood {
    min-height: 3.5rem;
    padding-inline: 0.6rem;
  }

  html[data-mode="1999"] .mode-1999-community {
    margin: 0.5rem;
    padding: 0.75rem;
  }

  html[data-mode="1999"] .mode-1999-webring {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-mode="1999"] .mode-1999-site-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-mode="1999"] .mode-1999-web-button {
    min-height: 44px;
    height: 44px;
  }

  html[data-mode="1999"] :where(h1, h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
  }

  html[data-mode="1999"] h1 {
    font-size: clamp(2rem, 12vw, 3.35rem) !important;
  }

  html[data-mode="1999"] :where(button:not(.rotary-hole), .button, input, select, textarea) {
    min-height: 2.75rem;
  }

  html[data-mode="1999"] :where(input, select, textarea) {
    font-size: 1rem !important;
  }

  html[data-mode="1999"] :where(.footer-layout, .footer-nav) {
    gap: 1rem !important;
  }

  html[data-mode="1999"] .gate {
    width: 100%;
    min-height: 0;
    gap: 2rem !important;
    padding: 1rem !important;
  }

  html[data-mode="1999"] .gate .row {
    gap: min(24vw, 6rem) !important;
  }

  html[data-mode="1999"] .gate .tight-row {
    gap: min(14vw, 3rem) !important;
  }

  html[data-mode="1999"] .bottom-console {
    width: min(calc(100% - 1rem), 32rem);
    margin-top: 1rem !important;
    padding: 1rem !important;
  }

  html[data-mode="1999"] .bottom-console .bar {
    width: min(58vw, 15rem) !important;
  }

  html[data-mode="1999"] .wrap {
    min-width: 0;
  }

  html[data-mode="1999"] .wrap > .card {
    padding: 1rem !important;
  }

  html[data-mode="1999"] :where(table, pre) {
    max-width: 100%;
    overflow-x: auto;
  }

  html[data-mode="1999"] .signals-index .journal-card {
    grid-template-columns: 2.55rem minmax(0, 1fr) !important;
    padding: 0.85rem !important;
  }

  html[data-mode="1999"] .signals-index .journal-card:hover,
  html[data-mode="1999"] .signals-index .journal-card:focus-within {
    padding: 0.85rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-transition-curtain {
    transition: none;
  }

  html[data-mode="1999"] .mode-1999-banner-track {
    padding-left: 0.75rem;
    animation: none;
  }

  .mode-1999-switch span {
    transition: none;
  }

  html[data-mode="1999"] .mode-1999-gif-animated {
    display: none !important;
  }

  html[data-mode="1999"] .mode-1999-gif-still {
    display: block !important;
  }
}
/* Relocated homepage metadata */
html[data-mode="1999"] .home .home-hero-excerpt-source {
  color: var(--1999-muted) !important;
}
/* Books index catalog. */
html[data-mode="1999"] :where(
  .hero-section,
  .home .home-hero,
  .page-hero,
  .article-header,
  .book-detail-hero,
  .books-bizarre-hero,
  .home-dispatch-feature,
  .reader-bg,
  .press-room-hero
) {
  background-color: var(--1999-tileA, #000066) !important;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--1999-tileA, #000066) 58%, transparent), color-mix(in srgb, var(--1999-tileB, #000033) 20%, transparent)),
    url("/assets/img/1999/pixel-phone-bg.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

/* Books index catalog. */
html[data-mode="1999"] body.books-index .books-library-item {
  border: 2px solid var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  background-color: #000 !important;
  background-image: linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,32,.88) 52%, rgba(0,0,32,.98)), var(--book-library-bg) !important;
  box-shadow: 5px 5px 0 #000 !important;
}
html[data-mode="1999"] body.books-index .books-library-title { color: var(--1999-headingInk, #ffff00) !important; font-family: inherit !important; letter-spacing: 0 !important; text-shadow: 2px 2px 0 #000 !important; }
html[data-mode="1999"] body.books-index .books-library-subtitle,
html[data-mode="1999"] body.books-index .books-library-facts { color: var(--1999-ink, #ffff66) !important; }
html[data-mode="1999"] body.books-index .books-library-arrow { color: var(--1999-link, #00ffff) !important; }
@media (max-width: 620px) {
  html[data-mode="1999"] body.books-index .books-library-item { background-image: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,32,.78) 52%, rgba(0,0,32,.98)), var(--book-library-bg) !important; }
}

/* Book-edition selector. */
html[data-mode="1999"] .book-edition-toggle,
html[data-mode="1999"] .book-edition-menu {
  border: 2px outset var(--1999-border, #ffff00) !important;
  border-radius: 0 !important;
  background: var(--1999-bg, #000066) !important;
  color: var(--1999-ink, #ffff66) !important;
  box-shadow: 4px 4px 0 #000 !important;
}

html[data-mode="1999"] .book-edition-toggle:active,
html[data-mode="1999"] .book-edition-toggle[aria-expanded="true"] {
  border-style: inset !important;
}

html[data-mode="1999"] .book-edition-option {
  border-radius: 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  font-family: inherit !important;
}

html[data-mode="1999"] .book-edition-option strong {
  color: var(--1999-headingInk, #ffff00) !important;
  font-family: inherit !important;
}

html[data-mode="1999"] .book-edition-option span {
  color: var(--1999-link, #00ffff) !important;
}

html[data-mode="1999"] .book-edition-option:hover,
html[data-mode="1999"] .book-edition-option:focus-visible,
html[data-mode="1999"] .book-edition-option.is-selected {
  background: var(--1999-surface, #000033) !important;
}

html[data-mode="1999"] .book-edition-band {
  z-index: 1 !important;
}

html[data-mode="1999"] .book-edition-ledger {
  border: 2px outset var(--1999-border, #ffff00) !important;
  background: #000 !important;
}

html[data-mode="1999"] .book-edition-ledger::before {
  display: none !important;
}

html[data-mode="1999"] .book-edition-ledger > div {
  border-color: var(--1999-border, #ffff00) !important;
  background: #000 !important;
}

html[data-mode="1999"] .book-edition-ledger dt {
  color: var(--1999-link, #00ffff) !important;
}

html[data-mode="1999"] .book-edition-ledger dd {
  color: var(--1999-ink, #ffff66) !important;
  font-family: inherit !important;
}

html[data-mode="1999"] .book-about-heading h2 {
  color: var(--1999-headingInk, #ffff00) !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-shadow: 2px 2px 0 #000 !important;
}

html[data-mode="1999"] .book-about-heading::after {
  border-top: 1px dotted var(--1999-border, #ffff00) !important;
  background: none !important;
}

html[data-mode="1999"] .book-about-copy .book-about-intro,
html[data-mode="1999"] .book-about-columns p {
  color: var(--1999-ink, #ffff66) !important;
  font-family: inherit !important;
}

html[data-mode="1999"] .book-about-copy .book-about-intro::first-letter {
  color: var(--1999-accent, #ff00ff) !important;
  font-family: inherit !important;
}

html[data-mode="1999"] .book-about-columns {
  column-rule: 1px dotted var(--1999-border, #ffff00) !important;
}


/* ---- assets/css/mode-1999-foundation-v5.css ---- */
/*
 * 1999 Mode foundation v5
 *
 * This file owns the mode's shared contract: tokens, sizing, safe areas,
 * typography hooks, focus behavior, and reusable window/control primitives.
 * Page-specific treatments remain in the compatibility stylesheet until the
 * page-adapter pass, but no page is allowed to define the outer shell.
 */

@font-face {
  font-family: "Comic Neue";
  src: url("/assets/fonts/comic-neue-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Comic Neue";
  src: url("/assets/fonts/comic-neue-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

html[data-mode="1999"] {
  --retro-font-body: "Comic Sans MS", "Comic Neue", "Comic Sans", cursive;
  --retro-font-terminal: "Courier New", Courier, monospace;
  --retro-content-max: 54rem;
  --retro-rail-width: 10rem;
  --retro-decor-width: 7rem;
  --retro-shell-gap: clamp(0.65rem, 1.4vw, 1rem);
  --retro-page-gutter: max(0.5rem, env(safe-area-inset-left));
  --retro-page-gutter-right: max(0.5rem, env(safe-area-inset-right));
  --retro-safe-top: max(0.5rem, env(safe-area-inset-top));
  --retro-safe-bottom: max(0.5rem, env(safe-area-inset-bottom));
  --retro-touch-target: 2.75rem;
  --retro-z-content: 1;
  --retro-z-sticky: 100;
  --retro-z-progress: 1100;
  --retro-z-navigation: 1000;
  --retro-z-popover: 2000;
  --retro-z-overlay: 3000;
  --retro-z-modal: 4000;
  --retro-z-accessibility: 5000;
  --retro-canvas-bg: var(--1999-tileA, #000066);
  --retro-window-bg: color-mix(in srgb, var(--1999-tileB, #000033) 88%, #000 12%);
  --retro-utility-bg: #000;
  --retro-interactive-bg: color-mix(in srgb, var(--1999-surface, #000099) 64%, #000 36%);
  --retro-title-bg: color-mix(in srgb, var(--1999-headingBg, #710071) 78%, #000 22%);
  --retro-window-border: var(--1999-border, #ffff00);
  --retro-window-shadow: #000;
  --retro-control-bg: var(--1999-surface, #000099);
  --retro-control-ink: var(--1999-link, #00ffff);
  font-family: var(--retro-font-body);
  scroll-padding-top: calc(var(--retro-safe-top) + 4.5rem);
}

html[data-mode="1999"],
html[data-mode="1999"] body {
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
}

html[data-mode="1999"] body.site-shell {
  margin: 0;
  padding: 0;
  font-family: var(--retro-font-body);
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html[data-mode="1999"] body.site-shell {
    overflow-x: clip;
  }
}

html[data-mode="1999"] body.site-shell > :where(
  [data-retro-region="marquee"],
  [data-retro-region="navigation"],
  [data-retro-region="content"],
  [data-retro-region="footer"],
  [data-retro-region="signoff"]
) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-mode="1999"] :where(
  [data-retro-window],
  .retro-window
) {
  min-inline-size: 0;
  border: 2px solid var(--retro-window-border);
  border-radius: 0;
  color: var(--1999-ink, #ffff66);
  background: var(--retro-window-bg);
}

html[data-mode="1999"] :where(
  [data-retro-titlebar],
  .retro-titlebar
) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-block-size: 2rem;
  padding: 0.3rem 0.55rem;
  border-block-end: 2px solid var(--retro-window-border);
  color: var(--1999-headingInk, #ffff00);
  background: var(--1999-headingBg, #710071);
  font-weight: 700;
}

html[data-mode="1999"] :where(
  [data-retro-control],
  .retro-control
) {
  min-block-size: var(--retro-touch-target);
  border: 2px outset var(--retro-window-border);
  border-radius: 0;
  color: var(--retro-control-ink);
  background: var(--retro-control-bg);
}

html[data-mode="1999"] :where(
  [data-retro-control],
  .retro-control
):active {
  border-style: inset;
}

html[data-mode="1999"] :where(
  [data-retro-scroll],
  .retro-scroll
) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

html[data-mode="1999"] :where(a, button, input, select, textarea, summary) {
  touch-action: manipulation;
}

html[data-mode="1999"] :where(a, button, input, select, textarea, summary):focus-visible {
  position: relative;
  z-index: var(--retro-z-accessibility);
}

html[data-mode="1999"][data-1999-text="large"] {
  --retro-content-max: 58rem;
}

html[data-mode="1999"][data-1999-motion="still"] {
  scroll-behavior: auto;
}


/* ---- assets/css/mode-1999-components-v5.css ---- */
/*
 * 1999 Mode components v5
 * Explicit component mappings shared by all three responsive shell states.
 */

html[data-mode="1999"] [data-retro-region="marquee"] {
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
}

html[data-mode="1999"] [data-retro-region="content"] {
  position: relative;
  z-index: var(--retro-z-content);
  inline-size: 100%;
  min-inline-size: 0;
}

html[data-mode="1999"] [data-retro-region="navigation"] {
  z-index: var(--retro-z-navigation);
  min-inline-size: 0;
}

html[data-mode="1999"] [data-retro-region="footer"],
html[data-mode="1999"] [data-retro-region="signoff"] {
  inline-size: 100%;
  min-inline-size: 0;
}

html[data-mode="1999"] :where(
  .dropdown-menu,
  .header-popover-panel,
  .header-notifications-menu,
  .header-account-menu
) {
  z-index: var(--retro-z-popover);
  border: 3px outset var(--retro-window-border);
  border-radius: 0;
  color: var(--1999-ink, #ffff66);
  background-color: var(--1999-surface, #000099);
  background-image: none;
  box-shadow: 5px 5px 0 var(--retro-window-shadow);
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-mode="1999"] :where(
  .dropdown-menu,
  .header-popover-panel,
  .header-notifications-menu,
  .header-account-menu
) :where(a, button, p, span, strong, time) {
  text-shadow: none;
}

html[data-mode="1999"] .drawer-overlay {
  z-index: var(--retro-z-overlay);
}

html[data-mode="1999"] :where(.drawer, .drawer-keypad) {
  z-index: calc(var(--retro-z-overlay) + 1);
  max-block-size: calc(100svh - var(--retro-safe-top) - var(--retro-safe-bottom));
}

html[data-mode="1999"] [data-retro-component="location"],
html[data-mode="1999"] [data-retro-component="community"] {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-mode="1999"] [data-retro-component="community"] :where(a, button) {
  min-block-size: var(--retro-touch-target);
}

html[data-mode="1999"] .article-progress,
html[data-mode="1999"] .site-navigation-progress {
  z-index: var(--retro-z-sticky);
}

html[data-mode="1999"] :where(.cookie-banner, #site-memory, #smWelcomeBubble, #firstViewerOffer) {
  z-index: var(--retro-z-overlay);
}

html[data-mode="1999"] .site-footer .footer-art-fixed {
  bottom: 0;
  margin-bottom: 0;
}



/* ---- assets/css/mode-1999-assets-v5.css ---- */
/*
 * 1999 Mode asset kit v5
 * Shared, fixed-size retro primitives. Everything here is CSS or an existing
 * site-owned asset; animated badges always have a still-image fallback.
 */

html[data-mode="1999"] {
  --retro-pixel-checker:
    repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--1999-border, #ffff00) 12%, transparent) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--1999-border, #ffff00) 12%, transparent) 7px 8px);
  --retro-pixel-stripe:
    repeating-linear-gradient(135deg, #000 0 5px, var(--1999-headingBg, #710071) 5px 10px);
  --retro-badge-width: 88px;
  --retro-badge-height: 31px;
}

html[data-mode="1999"] [data-retro-pixel-pattern="checker"] {
  background-image: var(--retro-pixel-checker) !important;
  background-size: 8px 8px !important;
}

html[data-mode="1999"] [data-retro-pixel-pattern="stripe"] {
  background-image: var(--retro-pixel-stripe) !important;
  background-size: 14px 14px !important;
}

html[data-mode="1999"] [data-retro-asset="badge-strip"] {
  min-inline-size: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

html[data-mode="1999"] [data-retro-asset="badge-88x31"] {
  inline-size: var(--retro-badge-width) !important;
  min-inline-size: var(--retro-badge-width) !important;
  max-inline-size: var(--retro-badge-width) !important;
  block-size: var(--retro-badge-height) !important;
  min-block-size: var(--retro-badge-height) !important;
  max-block-size: var(--retro-badge-height) !important;
  flex: 0 0 var(--retro-badge-width) !important;
  overflow: hidden;
  contain: layout paint;
  image-rendering: pixelated;
}

html[data-mode="1999"] [data-retro-asset="badge-88x31"] :where(img, picture) {
  inline-size: var(--retro-badge-width) !important;
  block-size: var(--retro-badge-height) !important;
  max-inline-size: none !important;
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: fill !important;
  image-rendering: pixelated;
  box-shadow: none !important;
}

html[data-mode="1999"] [data-retro-asset="counter"] {
  inline-size: fit-content;
  min-inline-size: 7ch;
  padding: 0.18rem 0.42rem !important;
  border: 2px inset var(--retro-window-border) !important;
  color: #00ff66 !important;
  background: #000 !important;
  font-family: var(--retro-font-terminal) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 0 1px currentColor;
}

html[data-mode="1999"] [data-retro-asset="divider"] {
  position: relative;
  isolation: isolate;
}

html[data-mode="1999"] [data-retro-asset="divider"]::before,
html[data-mode="1999"] [data-retro-asset="divider"]::after {
  content: "";
  min-inline-size: 1.5rem;
  block-size: 3px;
  flex: 1 1 auto;
  border-block-start: 1px solid var(--1999-accent, #ff00ff);
  border-block-end: 1px solid var(--1999-border, #ffff00);
  background: transparent;
}

/* A truly continuous marquee: two identical groups share one moving track. */
html[data-mode="1999"] .mode-1999-banner {
  overflow: hidden;
  contain: paint;
}

html[data-mode="1999"] .mode-1999-banner-track {
  inline-size: max-content;
  min-inline-size: 200%;
  display: flex;
  align-items: center;
  gap: 0;
  padding-inline-start: 0;
  animation: mode-1999-marquee-seamless 30s linear infinite;
}

html[data-mode="1999"] .mode-1999-banner-copy {
  min-inline-size: 50%;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-around;
  gap: 4rem;
  padding-inline: 2rem;
}

html[data-mode="1999"] .mode-1999-banner-copy span {
  flex: 0 0 auto;
}

@keyframes mode-1999-marquee-seamless {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-mode="1999"] .mode-1999-banner-track {
    inline-size: 100%;
    min-inline-size: 100%;
    justify-content: center;
    transform: none !important;
    animation: none !important;
  }

  html[data-mode="1999"] .mode-1999-banner-copy {
    min-inline-size: 100%;
    justify-content: center;
    padding-inline: 0.75rem;
  }

  html[data-mode="1999"] .mode-1999-banner-copy[aria-hidden="true"],
  html[data-mode="1999"] .mode-1999-banner-copy span:not(:first-child) {
    display: none;
  }
}

html[data-mode="1999"][data-1999-motion="still"] .mode-1999-banner-track {
  inline-size: 100%;
  min-inline-size: 100%;
  justify-content: center;
  transform: none !important;
  animation: none !important;
}

html[data-mode="1999"][data-1999-motion="still"] .mode-1999-banner-copy {
  min-inline-size: 100%;
  justify-content: center;
  padding-inline: 0.75rem;
}

html[data-mode="1999"][data-1999-motion="still"] .mode-1999-banner-copy[aria-hidden="true"],
html[data-mode="1999"][data-1999-motion="still"] .mode-1999-banner-copy span:not(:first-child) {
  display: none;
}

html[data-mode="1999"] .mode-1999-gif-animated,
html[data-mode="1999"] .mode-1999-gif-still {
  aspect-ratio: 88 / 31;
}

html[data-mode="1999"] .mode-1999-gif-still {
  display: none !important;
}

html[data-mode="1999"][data-1999-motion="still"] .mode-1999-gif-animated,
html[data-mode="1999"][data-reduced-data] .mode-1999-gif-animated {
  display: none !important;
}

html[data-mode="1999"][data-1999-motion="still"] .mode-1999-gif-still,
html[data-mode="1999"][data-reduced-data] .mode-1999-gif-still {
  display: block !important;
}

html[data-mode="1999"] img[data-retro-pixel-art] {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

html[data-mode="1999"] .retro-rule {
  inline-size: 100%;
  block-size: 6px;
  margin-block: 0.75rem;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--1999-accent, #ff00ff) 0 8px, transparent 8px 12px, var(--1999-border, #ffff00) 12px 20px, transparent 20px 24px);
  image-rendering: pixelated;
}

@media (max-width: 29.999rem) {
  html[data-mode="1999"] [data-retro-asset="badge-strip"] {
    gap: 0.25rem;
  }
}


/* ---- assets/css/mode-1999-surfaces-v5.css ---- */
/*
 * 1999 Mode surfaces v5
 * Four deliberate roles replace the old "every class ending in card is a box"
 * rule: canvas, content window, utility inset, and interactive control.
 */

/* 1. Page canvas: structural bands remain quiet and let the tiled field show. */
html[data-mode="1999"] body.site-shell :where(
  .section-band,
  .page-shell,
  .account-dashboard-shell,
  .account-center-shell,
  .community-shell,
  .subscribe-shell,
  .legal-shell,
  .article-page,
  .reader-shell
) {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Hero canvases may carry the pixel-phone artwork, but never a glowing orb. */
html[data-mode="1999"] body.site-shell :where(
  .hero-section,
  .home-hero,
  .page-hero,
  .article-header,
  .book-showcase-hero,
  .books-bizarre-hero,
  .reader-hero,
  .author-profile-hero,
  .newsletter-receiver-hero,
  .events-desk-hero,
  .press-room-hero
) {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border: 0 !important;
  border-block-end: 3px ridge var(--retro-window-border) !important;
  border-radius: 0 !important;
  background-color: var(--retro-canvas-bg) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] body.site-shell :where(
  .hero-section,
  .home-hero,
  .page-hero,
  .article-header,
  .book-showcase-hero,
  .books-bizarre-hero,
  .reader-hero,
  .author-profile-hero,
  .newsletter-receiver-hero,
  .events-desk-hero,
  .press-room-hero
)::before,
html[data-mode="1999"] body.site-shell :where(
  .hero-section,
  .home-hero,
  .page-hero,
  .article-header,
  .book-showcase-hero,
  .books-bizarre-hero,
  .reader-hero,
  .author-profile-hero,
  .newsletter-receiver-hero,
  .events-desk-hero,
  .press-room-hero
)::after {
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* 2. Content windows: dark reading surfaces with restrained palette outlines. */
html[data-mode="1999"] body.site-shell :where(
  [data-retro-component="community"],
  .home-hero-excerpt,
  .home-hero-release,
  .home-dispatch-feature,
  .home-dispatch-side,
  .home-shop-layout,
  .newsletter-layout,
  .books-library,
  .book-about-copy,
  .book-flex-copy,
  .book-edition-ledger,
  .signal-focus,
  .signal-archive,
  .article-body,
  .article-record,
  .article-related-mini,
  .reader-main,
  .operator-phonebook,
  .settings-panel,
  .subscribe-card,
  .guestbook-form-panel,
  .guestbook-entry-panel,
  .shop-console,
  .shop-panel,
  .legal-card,
  .author-statement,
  .author-biography,
  .account-center-section,
  .account-profile-summary,
  .account-security-panel,
  .community-page-header,
  .broadcast-composer,
  .broadcast-card,
  .broadcast-comments,
  .public-profile-header,
  .public-profile-sections > section
) {
  min-inline-size: 0;
  border: 2px solid var(--retro-window-border) !important;
  border-radius: 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  background-color: var(--retro-window-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 3. Utility insets: metadata and tools should recede, not compete with prose. */
html[data-mode="1999"] body.site-shell :where(
  .home-hero-meta,
  .journal-meta,
  .signal-tools,
  .filter-row,
  .book-showcase-facts,
  .book-edition-ledger > div,
  .book-spec-strip,
  .book-stat-grid,
  .article-record > div,
  .article-utilities,
  .article-published,
  .account-summary-grid,
  .account-security-methods,
  .account-network-search,
  .achievement-progress,
  .broadcast-card-meta,
  .broadcast-card-actions,
  .public-profile-stats,
  .modal-meta-row,
  .modal-index-row,
  .shop-console-stats,
  .subscribe-verification,
  .guestbook-verification,
  .legal-meta
) {
  min-inline-size: 0;
  border: 1px dotted var(--retro-window-border) !important;
  border-radius: 0 !important;
  color: var(--1999-muted, #fff) !important;
  background-color: var(--retro-utility-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 4. Interactive surfaces: clear affordance without filling the page in pink. */
html[data-mode="1999"] body.site-shell :where(
  .books-library-item,
  .journal-card,
  .article-neighbor,
  .entry-directory-row,
  .poem-card,
  .shop-item,
  .account-collection-card,
  .account-connection-card,
  .account-network-person,
  .achievement-card,
  .achievement-catalog-card,
  .account-notifications-page-list > a,
  .person-card,
  .public-profile-shelf > *,
  .broadcast-comment-list > article
) {
  min-inline-size: 0;
  border: 2px outset var(--retro-window-border) !important;
  border-radius: 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  background-color: var(--retro-interactive-bg) !important;
  background-image: none !important;
  box-shadow: 2px 2px 0 var(--retro-window-shadow) !important;
}

html[data-mode="1999"] body.site-shell :where(
  .books-library-item,
  .journal-card,
  .article-neighbor,
  .entry-directory-row,
  .poem-card,
  .shop-item,
  .account-collection-card,
  .account-connection-card,
  .account-network-person,
  .achievement-card,
  .achievement-catalog-card,
  .account-notifications-page-list > a,
  .person-card,
  .public-profile-shelf > *,
  .broadcast-comment-list > article
):is(:hover, :focus-visible, :focus-within) {
  border-style: solid !important;
  background-color: color-mix(in srgb, var(--retro-interactive-bg) 74%, var(--1999-accent, #ff00ff) 26%) !important;
  outline: 2px dotted var(--1999-link, #00ffff);
  outline-offset: 2px;
}

/* Deliberate title bars for windows that actually need labels. */
html[data-mode="1999"] body.site-shell :where(
  .guestbook-panel-head,
  .settings-panel-head,
  .signal-archive-head,
  .account-center-header,
  .community-page-header,
  .broadcast-comments > h2,
  .modal-header,
  .section-heading
) {
  border-block-end: 2px solid var(--retro-window-border) !important;
  border-radius: 0 !important;
  background-color: var(--retro-title-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Media frames are opt-in; ordinary images no longer inherit chunky borders. */
html[data-mode="1999"] body.site-shell main img {
  max-inline-size: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-mode="1999"] body.site-shell :where(
  .home-hero-shelf,
  .book-flip-card,
  .books-library-art,
  .book-flex-media,
  .author-portrait-stage,
  .shop-cover,
  .account-avatar-frame,
  .account-collection-cover,
  .person-card-avatar,
  .public-profile-avatar
) {
  border: 3px ridge var(--retro-window-border) !important;
  border-radius: 0 !important;
  background-color: #000 !important;
  box-shadow: 3px 3px 0 var(--retro-window-shadow) !important;
}

/* Forms retain a familiar white 1990s input field with predictable spacing. */
html[data-mode="1999"] body.site-shell :where(fieldset, details) {
  min-inline-size: 0;
  border: 2px solid var(--retro-window-border) !important;
  border-radius: 0 !important;
  background: var(--retro-window-bg) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] body.site-shell :where(.field, .settings-field) {
  min-inline-size: 0;
}

@media (max-width: 47.999rem) {
  html[data-mode="1999"] body.site-shell :where(
    [data-retro-component="community"],
    .signal-focus,
    .signal-archive,
    .article-body,
    .reader-main,
    .settings-panel,
    .subscribe-card,
    .guestbook-form-panel,
    .guestbook-entry-panel,
    .shop-console,
    .legal-card,
    .account-center-section,
    .community-page-header,
    .broadcast-composer,
    .broadcast-card,
    .broadcast-comments,
    .public-profile-header,
    .public-profile-sections > section
  ) {
    border-inline-width: 0 !important;
  }

  html[data-mode="1999"] body.site-shell :where(
    .books-library-item,
    .journal-card,
    .shop-item,
    .account-collection-card,
    .account-connection-card,
    .achievement-card,
    .person-card
  ) {
    box-shadow: none !important;
  }
}


/* ---- assets/css/mode-1999-typography-v5.css ---- */
/* 1999 Mode typography v5: expressive titles, calm reading copy. */

html[data-mode="1999"] body.site-shell {
  font-size: 1rem;
  line-height: 1.62;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html[data-mode="1999"] body.site-shell :where(h1, h2, h3, h4, h5, h6) {
  inline-size: auto;
  max-inline-size: 100%;
  margin-block-start: 0;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--1999-headingInk, #ffff00) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--retro-font-body) !important;
  letter-spacing: 0 !important;
  line-height: 1.08;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-shadow: 2px 2px 0 #000 !important;
}

html[data-mode="1999"] body.site-shell h1 {
  font-size: clamp(2.35rem, 7vw, 4.8rem) !important;
}

html[data-mode="1999"] body.site-shell h2 {
  font-size: clamp(1.55rem, 4vw, 2.65rem) !important;
}

html[data-mode="1999"] body.site-shell h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.7rem) !important;
}

html[data-mode="1999"] body.site-shell :where(h4, h5, h6) {
  font-size: 1rem !important;
}

html[data-mode="1999"] body.site-shell :where(
  .book-showcase-title-banner,
  .books-library-title,
  .article-header h1,
  .signal-focus-copy h1,
  .author-profile-copy h1,
  .account-center-heading h1,
  .community-page-header h1,
  .public-profile-heading h1,
  .legal-hero h1
) {
  margin-block-end: 0.35em;
}

html[data-mode="1999"] body.site-shell :where(
  .section-heading,
  .guestbook-panel-head,
  .settings-panel-head,
  .signal-archive-head,
  .account-center-header,
  .broadcast-comments > h2
) :where(h2, h3),
html[data-mode="1999"] body.site-shell :where(
  .section-heading > h2,
  .section-heading > h3,
  .guestbook-panel-head > h2,
  .settings-panel-head > h2,
  .signal-archive-head > h2
) {
  margin: 0;
  padding: 0.35rem 0.55rem;
  font-size: clamp(1.05rem, 2vw, 1.45rem) !important;
  line-height: 1.2;
}

html[data-mode="1999"] body.site-shell :where(p, li, dd, dt, label, blockquote, figcaption) {
  color: var(--1999-ink, #ffff66) !important;
  font-family: var(--retro-font-body) !important;
  overflow-wrap: break-word;
}

html[data-mode="1999"] body.site-shell p {
  margin-block: 0 1em;
  text-wrap: pretty;
  orphans: 3;
  widows: 3;
}

html[data-mode="1999"] body.site-shell :where(
  .lede,
  .article-subtitle,
  .signal-subtitle,
  .books-library-subtitle,
  .public-profile-heading > p
) {
  max-inline-size: 62ch;
  color: var(--1999-muted, #fff) !important;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.55;
}

html[data-mode="1999"] body.site-shell :where(
  .article-body,
  .book-about-copy,
  .book-flex-copy,
  .author-biography-copy,
  .author-statement,
  .legal-card-body,
  .broadcast-card-body,
  .guestbook-entry
) {
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.72;
}

html[data-mode="1999"] body.site-shell :where(
  .article-body,
  .legal-card-body,
  .author-biography-copy
) {
  max-inline-size: 70ch;
  margin-inline: auto;
}

html[data-mode="1999"] body.site-shell :where(
  .journal-meta,
  .article-published,
  .article-reading-time,
  .article-read-count,
  .book-showcase-facts,
  .book-edition-ledger,
  .signal-archive-meta,
  .entry-directory-meta,
  .modal-meta-row,
  .account-field-note,
  .community-role-list,
  .broadcast-card-meta,
  .legal-meta,
  time
) {
  color: var(--1999-muted, #fff) !important;
  font-family: var(--retro-font-terminal) !important;
  font-size: 0.76rem;
  letter-spacing: 0.025em;
  line-height: 1.45;
}

html[data-mode="1999"] body.site-shell :where(ul, ol) {
  padding-inline-start: 1.4em;
}

html[data-mode="1999"] body.site-shell :where(li + li) {
  margin-block-start: 0.35em;
}

html[data-mode="1999"] body.site-shell blockquote {
  margin-inline: 0;
  padding: 0.75rem 1rem;
  border-inline-start: 4px solid var(--1999-accent, #ff00ff);
  background: var(--retro-utility-bg);
}

html[data-mode="1999"] body.site-shell :where(
  .book-about-intro,
  .article-body > p:first-of-type,
  .author-biography-copy > p:first-of-type
)::first-letter {
  float: left;
  float: inline-start;
  margin: 0.08em 0.12em 0 0;
  color: var(--1999-accent, #ff00ff) !important;
  font-family: var(--retro-font-body) !important;
  font-size: 3.1em;
  font-weight: 700;
  line-height: 0.78;
  text-shadow: 2px 2px 0 #000;
}

html[data-mode="1999"] body.site-shell :where(.button, button, input, select, textarea) {
  font-family: var(--retro-font-body) !important;
}

html[data-mode="1999"] body.site-shell :where(pre, code, kbd, samp, output) {
  font-family: var(--retro-font-terminal) !important;
}

@media (min-width: 48rem) {
  html[data-mode="1999"] body.site-shell :where(
    .article-body p,
    .book-about-intro,
    .book-about-columns p,
    .book-flex-copy p,
    .author-biography-copy p,
    .author-statement p,
    .legal-card-body p
  ) {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
}

@media (max-width: 47.999rem) {
  html[data-mode="1999"] body.site-shell {
    line-height: 1.58;
  }

  html[data-mode="1999"] body.site-shell h1 {
    font-size: clamp(2rem, 11vw, 3.3rem) !important;
  }

  html[data-mode="1999"] body.site-shell :where(
    .article-body p,
    .book-about-intro,
    .book-about-columns p,
    .book-flex-copy p,
    .author-biography-copy p,
    .author-statement p,
    .legal-card-body p
  ) {
    text-align: start;
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  html[data-mode="1999"] body.site-shell :where(
    .book-about-intro,
    .article-body > p:first-of-type,
    .author-biography-copy > p:first-of-type
  )::first-letter {
    font-size: 2.45em;
  }
}


/* ---- assets/css/mode-1999-shell-v5.css ---- */
/*
 * 1999 Mode shell v5
 *
 * Three deliberate layouts:
 *   1. mobile     < 48rem: full-width, touch-first, no desktop rail
 *   2. compact    48rem-79.99rem: one centered 54rem column
 *   3. desktop    >= 80rem: free-floating left rail + centered 54rem page
 *
 * The shell uses explicit data regions from layout.php. It does not depend on
 * :has(), fixed horizontal calculations, or page-specific class names.
 */

/* Mobile is the base state. */
html[data-mode="1999"] body.site-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "marquee"
    "navigation"
    "content"
    "footer"
    "signoff";
  align-items: start;
  justify-items: stretch;
  gap: 0;
}

html[data-mode="1999"] body.site-shell > [data-retro-region="marquee"] {
  grid-area: marquee;
}

html[data-mode="1999"] body.site-shell > [data-retro-region="navigation"] {
  grid-area: navigation;
}

html[data-mode="1999"] body.site-shell > [data-retro-region="content"] {
  grid-area: content;
}

html[data-mode="1999"] body.site-shell > [data-retro-region="footer"] {
  grid-area: footer;
}

html[data-mode="1999"] body.site-shell > [data-retro-region="signoff"] {
  grid-area: signoff;
}

html[data-mode="1999"] body.site-shell > .site-header {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  inline-size: 100%;
  max-inline-size: none;
  border-inline: 0 !important;
}

html[data-mode="1999"] body.site-shell > .site-main {
  inline-size: 100%;
  overflow: visible !important;
  border-inline: 0 !important;
  box-shadow: none !important;
}

html[data-mode="1999"] body.site-shell .section-inner,
html[data-mode="1999"] body.site-shell .header-inner,
html[data-mode="1999"] body.site-shell .footer-inner,
html[data-mode="1999"] body.site-shell .footer-bottom {
  inline-size: min(
    calc(100% - var(--retro-page-gutter) - var(--retro-page-gutter-right)),
    var(--retro-content-max)
  ) !important;
  max-inline-size: 100%;
}

html[data-mode="1999"] body.site-shell .mode-1999-community {
  margin-inline: var(--retro-page-gutter);
}

html[data-mode="1999"] body.site-shell > .mode-1999-signoff {
  padding-block-end: var(--retro-safe-bottom);
}

html[data-mode="1999"] body.site-shell .article-progress {
  inset-inline: 0 !important;
  inline-size: 100% !important;
  transform: none !important;
}

@media (max-width: 47.999rem) {
  html[data-mode="1999"] body.site-shell > .mode-1999-banner {
    border-inline: 0;
  }

  html[data-mode="1999"] body.site-shell > .site-header .header-inner {
    min-block-size: max(3.55rem, calc(3rem + env(safe-area-inset-top)));
    padding-block-start: env(safe-area-inset-top);
  }

  html[data-mode="1999"] body.site-shell > .site-header .main-nav {
    display: none !important;
  }

  html[data-mode="1999"] body.site-shell :where(.logo-sub, .header-social a[aria-label="Contact"]) {
    display: none !important;
  }

  html[data-mode="1999"] body.site-shell :where(
    .home-featured-layout,
    .home-cover-gallery,
    .home-dispatch-layout,
    .home-shop-layout,
    .books-hero-layout,
    .book-detail-grid,
    .book-about-layout,
    .book-flex-layout,
    .book-overview-shell,
    .astral-reader-gateway,
    .reader-directory-layout,
    .author-profile-grid,
    .newsletter-receiver-grid,
    .settings-layout,
    .subscribe-layout,
    .article-record,
    .footer-layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-mode="1999"] body.site-shell :where(table, pre, .retro-scroll) {
    max-inline-size: 100%;
    overflow-x: auto;
  }
}

/* Compact/tablet: a centered site without desktop side rails. */
@media (min-width: 48rem) and (max-width: 79.999rem) {
  html[data-mode="1999"] body.site-shell {
    grid-template-columns: minmax(0, min(var(--retro-content-max), calc(100vw - 1.5rem)));
    grid-template-areas:
      "marquee"
      "navigation"
      "content"
      "footer"
      "signoff";
    justify-content: center;
    row-gap: 0.7rem;
    padding-block: 0.4rem 0.7rem;
  }

  html[data-mode="1999"] body.site-shell > .site-header {
    top: var(--retro-safe-top) !important;
    border: 3px ridge var(--retro-window-border) !important;
    background: var(--1999-surface, #000099) !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .top-header,
  html[data-mode="1999"] body.site-shell > .site-header .header-inner {
    min-block-size: 3.75rem !important;
    background: transparent !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .header-inner {
    inline-size: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
    padding: 0.35rem 0.55rem !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .brand {
    inline-size: auto !important;
    flex: 1 1 auto;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.55rem !important;
    text-align: left !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .brand-text {
    align-items: flex-start !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header :where(.logo-btn, .logo-img) {
    inline-size: 2.65rem !important;
    block-size: 2.65rem !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .logo-text {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header :where(.logo-sub, .main-nav) {
    display: none !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .header-social {
    inline-size: auto !important;
    flex: 0 0 auto;
    justify-content: flex-end !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .header-line {
    display: none !important;
  }

  html[data-mode="1999"] body.site-shell > .site-main {
    border: 4px ridge var(--retro-window-border) !important;
    background-color: var(--1999-tileA, #000066) !important;
    box-shadow: 4px 4px 0 var(--retro-window-shadow) !important;
  }

  html[data-mode="1999"] body.site-shell > .site-footer,
  html[data-mode="1999"] body.site-shell > .mode-1999-signoff {
    border-inline: 4px ridge var(--retro-window-border) !important;
  }

  html[data-mode="1999"] body.site-shell .article-progress {
    left: 50% !important;
    right: auto !important;
    inline-size: min(var(--retro-content-max), calc(100vw - 1.5rem)) !important;
    transform: translateX(-50%) !important;
  }
}

/* Desktop: free side fields with a sticky navigation rail. */
@media (min-width: 80rem) {
  html[data-mode="1999"] body.site-shell {
    grid-template-columns:
      minmax(var(--retro-rail-width), 1fr)
      minmax(0, var(--retro-content-max))
      minmax(var(--retro-decor-width), 1fr);
    grid-template-areas:
      ". marquee ."
      "navigation content ."
      ". footer ."
      ". signoff .";
    align-items: start;
    column-gap: var(--retro-shell-gap);
    row-gap: 0.7rem;
    padding-block: 0.4rem 0.7rem;
  }

  html[data-mode="1999"] body.site-shell > .site-header {
    align-self: start;
    justify-self: end;
    position: sticky !important;
    inset: auto !important;
    top: var(--retro-safe-top) !important;
    inline-size: var(--retro-rail-width) !important;
    max-block-size: calc(100svh - var(--retro-safe-top) - var(--retro-safe-bottom));
    overflow-x: visible;
    overflow-y: auto;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: thin;
  }

  html[data-mode="1999"] body.site-shell > .site-header .top-header,
  html[data-mode="1999"] body.site-shell > .site-header .header-inner {
    min-block-size: 0 !important;
    background: transparent !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .header-inner {
    inline-size: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 0.25rem !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .brand {
    inline-size: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .brand-text {
    align-items: center !important;
    white-space: normal !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header :where(.logo-btn, .logo-img) {
    inline-size: 4.35rem !important;
    block-size: 4.35rem !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .logo-text {
    font-size: 0.92rem !important;
    white-space: normal !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .logo-sub {
    display: block !important;
    font-size: 0.66rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .main-nav {
    inline-size: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.38rem !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .nav-item {
    inline-size: 100% !important;
    display: block !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header :where(.nav-link, .nav-link-direct) {
    inline-size: 100% !important;
    min-block-size: 2.55rem !important;
    justify-content: space-between !important;
    padding: 0.48rem 0.58rem !important;
    font-size: 0.75rem !important;
    text-align: left !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .dropdown-menu {
    position: static !important;
    inset: auto !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-block-size: 0;
    margin: 0 !important;
    padding-block: 0 !important;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border-width: 0 !important;
    transform: none !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .nav-item.has-dropdown:is(:hover, :focus-within, .is-open) .dropdown-menu {
    max-block-size: min(32rem, calc(100svh - 10rem));
    margin-block-start: 0.35rem !important;
    padding: 0.4rem !important;
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    border-width: 3px !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .header-social {
    inline-size: 100% !important;
    justify-content: center !important;
    padding-block-start: 0.65rem !important;
    border-block-start: 2px dotted var(--retro-window-border) !important;
  }

  html[data-mode="1999"] body.site-shell > .site-header .header-line {
    display: none !important;
  }

  html[data-mode="1999"] body.site-shell > .site-main {
    border: 4px ridge var(--retro-window-border) !important;
    background-color: var(--1999-tileA, #000066) !important;
    box-shadow: 4px 4px 0 var(--retro-window-shadow) !important;
  }

  html[data-mode="1999"] body.site-shell > .site-footer,
  html[data-mode="1999"] body.site-shell > .mode-1999-signoff {
    grid-column: 2;
  }

  html[data-mode="1999"] body.site-shell .article-progress {
    left: 50% !important;
    right: auto !important;
    inline-size: var(--retro-content-max) !important;
    transform: translateX(-50%) !important;
  }

  html[data-mode="1999"] body.site-shell .site-footer .footer-art-fixed {
    inline-size: clamp(3.5rem, calc((100vw - var(--retro-content-max)) / 2 - 1rem), 5.8rem);
    right: max(0px, env(safe-area-inset-right)) !important;
    bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-mode="1999"] body.site-shell {
    scroll-behavior: auto;
  }
}



/* ---- assets/css/mode-1999-pages-v5.css ---- */
/* 1999 Mode page adapters v5: shared system, distinct route identities. */

html[data-mode="1999"] body.home { --retro-route-accent: var(--1999-accent, #ff00ff); }
html[data-mode="1999"] body.books-index,
html[data-mode="1999"] body.book-detail { --retro-route-accent: var(--1999-headingInk, #ffff00); }
html[data-mode="1999"] body.signals-index,
html[data-mode="1999"] body.signal-post { --retro-route-accent: var(--1999-link, #00ffff); }
html[data-mode="1999"] body.astral-reader-page { --retro-route-accent: var(--1999-good, #00ff66); }
html[data-mode="1999"] body:is(.account-page, .account-auth-page, .broadcasts-page, .broadcast-detail-page, .people-page, .public-profile-page) {
  --retro-route-accent: var(--1999-visited, #ff99ff);
}

/* Home: showcase first, compact dispatches beneath. */
html[data-mode="1999"] body.home :where(.home-dispatch-band, .home-shop-band, .newsletter-band) {
  padding-block: clamp(1.25rem, 3vw, 2.25rem) !important;
  border-block-start: 2px solid var(--retro-window-border) !important;
}

html[data-mode="1999"] body.home .home-dispatch-feature {
  border-inline-start: 5px solid var(--retro-route-accent) !important;
}

html[data-mode="1999"] body.home .home-post-list {
  display: grid;
  gap: 0.55rem;
}

html[data-mode="1999"] body.home .home-post-list > * {
  padding: 0.7rem;
  border-block-end: 1px dotted var(--retro-window-border);
}

html[data-mode="1999"] body.home .home-shop-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* Books index: covers lead; copy remains calm and scan-friendly. */
html[data-mode="1999"] body.books-index .books-library {
  padding: clamp(0.75rem, 2vw, 1.25rem) !important;
}

html[data-mode="1999"] body.books-index .books-library-list {
  display: grid;
  gap: 1rem;
}

html[data-mode="1999"] body.books-index .books-library-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-inline-start: 5px solid var(--retro-route-accent) !important;
}

html[data-mode="1999"] body.books-index .books-library-copy {
  min-inline-size: 0;
  padding: clamp(0.85rem, 2vw, 1.35rem) !important;
  background: color-mix(in srgb, var(--retro-window-bg) 88%, transparent) !important;
}

html[data-mode="1999"] body.books-index .books-library-arrow {
  color: var(--1999-link, #00ffff) !important;
  font-size: 1.25rem;
}

/* Book detail: the edition selector remains above every following band. */
html[data-mode="1999"] body.book-detail .book-showcase-hero,
html[data-mode="1999"] body.book-detail .book-showcase-inner,
html[data-mode="1999"] body.book-detail .book-showcase-actions,
html[data-mode="1999"] body.book-detail .book-edition-selector {
  overflow: visible !important;
}

html[data-mode="1999"] body.book-detail .book-showcase-hero {
  z-index: 3;
}

html[data-mode="1999"] body.book-detail .book-edition-menu {
  z-index: var(--retro-z-popover) !important;
  max-block-size: min(22rem, 60svh);
  overflow-y: auto;
}

html[data-mode="1999"] body.book-detail .book-edition-band {
  position: relative;
  z-index: 2 !important;
  border-block: 2px solid var(--retro-window-border);
}

html[data-mode="1999"] body.book-detail :where(.book-about-layout, .book-flex-layout) {
  gap: clamp(1rem, 3vw, 2rem) !important;
}

html[data-mode="1999"] body.book-detail .book-about-copy {
  border-inline-start: 5px solid var(--retro-route-accent) !important;
  padding: clamp(1rem, 3vw, 1.75rem) !important;
}

html[data-mode="1999"] body.book-detail .book-about-columns {
  column-gap: 2rem;
}

/* Signals archive: one obvious featured record, then compact clickable entries. */
html[data-mode="1999"] body.signals-index .signal-focus {
  border-block-start: 5px solid var(--retro-route-accent) !important;
}

html[data-mode="1999"] body.signals-index .signal-archive {
  padding: clamp(0.85rem, 2vw, 1.25rem) !important;
}

html[data-mode="1999"] body.signals-index .journal-index-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.7rem !important;
}

html[data-mode="1999"] body.signals-index .journal-card {
  border-inline-start: 4px solid var(--retro-route-accent) !important;
}

html[data-mode="1999"] body.signals-index .journal-card h3 {
  margin-block-end: 0.25rem;
}

/* Signals reading: prose owns the column; the record is visibly secondary. */
html[data-mode="1999"] body.signal-post .article-header {
  border-block-end-color: var(--retro-route-accent) !important;
}

html[data-mode="1999"] body.signal-post .article-layout {
  min-inline-size: 0;
  gap: clamp(1rem, 3vw, 2rem) !important;
}

html[data-mode="1999"] body.signal-post .article-body {
  padding: clamp(1rem, 3vw, 2rem) !important;
}

html[data-mode="1999"] body.signal-post .article-record {
  align-content: start;
  padding: 0.7rem !important;
  border-style: dotted !important;
}

html[data-mode="1999"] body.signal-post .article-record > div {
  padding: 0.45rem 0.55rem !important;
}

html[data-mode="1999"] body.signal-post .article-neighbors {
  gap: 0.75rem;
}

@media (min-width: 84rem) {
  html[data-mode="1999"] body.signal-post .article-record {
    top: var(--retro-safe-top) !important;
    z-index: var(--retro-z-sticky) !important;
  }
}

/* Rotary Reader: arcade telephone hardware with readable title cards. */
html[data-mode="1999"] body.astral-reader-page .reader-main {
  border-block-start: 5px solid var(--retro-route-accent) !important;
}

html[data-mode="1999"] body.astral-reader-page .reader-toolbar {
  border-block-end: 2px solid var(--retro-window-border) !important;
  background: var(--retro-utility-bg) !important;
}

html[data-mode="1999"] body.astral-reader-page :where(.poem-card, .entry-directory-row) {
  border-inline-start: 4px solid var(--entry-index-color, var(--retro-route-accent)) !important;
}

html[data-mode="1999"] body.astral-reader-page :where(.poem-title, .entry-directory-title, .modal-title) {
  display: block;
  color: var(--1999-headingInk, #ffff00) !important;
  background: #000 !important;
  padding: 0.35rem 0.5rem !important;
  text-shadow: none !important;
}

html[data-mode="1999"] body.astral-reader-page .modal-body {
  color: var(--1999-ink, #ffff66) !important;
  background: var(--retro-window-bg) !important;
}

/* Account center and community: shared window language, route accent on top. */
html[data-mode="1999"] body:is(.account-page, .account-auth-page) :where(.account-dashboard-inner, .account-auth-layout),
html[data-mode="1999"] body:is(.broadcasts-page, .broadcast-detail-page, .people-page, .public-profile-page) .community-inner {
  inline-size: min(calc(100% - 1rem), 50rem) !important;
  margin-inline: auto;
}

html[data-mode="1999"] body:is(.account-page, .account-auth-page) :where(.account-center-header, .account-auth-intro),
html[data-mode="1999"] body:is(.broadcasts-page, .broadcast-detail-page, .people-page, .public-profile-page) :where(.community-page-header, .public-profile-header) {
  border-block-start: 5px solid var(--retro-route-accent) !important;
}

html[data-mode="1999"] body.account-page :where(.account-summary-grid, .account-security-grid, .account-collection-grid) {
  gap: 0.75rem !important;
}

html[data-mode="1999"] body.account-page .account-center-section {
  padding: clamp(0.85rem, 2.5vw, 1.35rem) !important;
}

html[data-mode="1999"] body.broadcasts-page .broadcast-channel-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

html[data-mode="1999"] body.broadcasts-page .broadcast-channel-tabs a.is-active {
  border-style: inset !important;
  color: var(--1999-headingInk, #ffff00) !important;
  background: var(--retro-title-bg) !important;
}

html[data-mode="1999"] body:is(.broadcasts-page, .broadcast-detail-page) .broadcast-card.is-official {
  border-block-start: 5px solid var(--1999-link, #00ffff) !important;
}

html[data-mode="1999"] body.people-page .people-grid {
  gap: 0.75rem !important;
}

html[data-mode="1999"] body.public-profile-page .public-profile-sections {
  gap: 0.75rem !important;
}

/* Forms, settings, shop, and legal pages use the same system without cosplay copy. */
html[data-mode="1999"] body:is(.settings-page, .subscribe-page, .contact-page, .guestbook-page, .shop-page, .legal-page, .about-page) :where(
  .settings-layout,
  .subscribe-layout,
  .contact-request-grid,
  .guestbook-layout,
  .shop-layout,
  .author-profile-grid
) {
  gap: clamp(0.9rem, 2.5vw, 1.5rem) !important;
}

html[data-mode="1999"] body.settings-page .settings-panel,
html[data-mode="1999"] body.subscribe-page .subscribe-card,
html[data-mode="1999"] body.guestbook-page :where(.guestbook-form-panel, .guestbook-entry-panel),
html[data-mode="1999"] body.shop-page :where(.shop-console, .shop-panel),
html[data-mode="1999"] body.legal-page .legal-card {
  padding: clamp(0.85rem, 2.5vw, 1.4rem) !important;
}

html[data-mode="1999"] body.settings-page .settings-1999-palette-grid,
html[data-mode="1999"] body.settings-page .settings-1999-preference-grid {
  gap: 0.55rem !important;
}

html[data-mode="1999"] body.shop-page .shop-item {
  border-inline-start: 4px solid var(--1999-accent, #ff00ff) !important;
}

html[data-mode="1999"] body.about-page .author-statement,
html[data-mode="1999"] body.about-page .author-biography {
  padding: clamp(1rem, 3vw, 1.75rem) !important;
}

@media (max-width: 47.999rem) {
  html[data-mode="1999"] body.books-index .books-library-item {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-mode="1999"] body.book-detail .book-about-columns {
    columns: 1 !important;
  }

  html[data-mode="1999"] body.signal-post .article-layout,
  html[data-mode="1999"] body.account-page :where(.account-summary-grid, .account-security-grid, .account-collection-grid),
  html[data-mode="1999"] body:is(.broadcasts-page, .broadcast-detail-page, .people-page, .public-profile-page) :where(.people-grid, .public-profile-sections) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* ---- assets/css/mode-1999-home-v6.css ---- */
/*
 * 1999 Mode homepage v6
 * A route-isolated correction for the homepage. It deliberately replaces the
 * legacy display:contents/six-row composition without changing modern mode or
 * any other route.
 */

html[data-mode="1999"] body.home {
  --retro-home-gap: clamp(0.8rem, 2vw, 1.25rem);
  --retro-home-pad: clamp(0.85rem, 2.5vw, 1.35rem);
}

html[data-mode="1999"] body.home .home-hero {
  min-block-size: 0 !important;
  overflow: hidden !important;
  border-block: 0 !important;
  background-color: var(--retro-canvas-bg) !important;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--retro-window-bg) 64%, transparent), var(--retro-canvas-bg)),
    url("/assets/img/1999/pixel-phone-bg.png") !important;
  background-position: center !important;
  background-size: cover !important;
}

html[data-mode="1999"] body.home .home-hero::before,
html[data-mode="1999"] body.home .home-hero::after {
  content: none !important;
  display: none !important;
}

html[data-mode="1999"] body.home .home-hero-grid {
  inline-size: 100% !important;
  max-inline-size: none !important;
  min-block-size: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "copy"
    "library" !important;
  align-items: start !important;
  justify-items: stretch !important;
  gap: var(--retro-home-gap) !important;
  margin: 0 !important;
  padding: var(--retro-home-pad) !important;
}

html[data-mode="1999"] body.home .home-hero-copy {
  grid-area: copy !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  justify-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html[data-mode="1999"] body.home .home-hero-copy > * {
  grid-column: 1 !important;
  grid-row: auto !important;
}

html[data-mode="1999"] body.home .home-hero-copy h1 {
  max-inline-size: 10ch !important;
  margin: 0 !important;
  color: var(--1999-headingInk, #ffff00) !important;
  font-size: clamp(2.65rem, 12vw, 4rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.045em !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-shadow: 2px 2px 0 #000 !important;
}

html[data-mode="1999"] body.home .home-hero-copy h1 span {
  display: block !important;
}

html[data-mode="1999"] body.home .home-hero-copy .lede {
  max-inline-size: 36rem !important;
  margin: 0.85rem 0 0 !important;
  color: var(--1999-ink, #ffff66) !important;
  font-size: clamp(0.94rem, 2.6vw, 1.08rem) !important;
  line-height: 1.45 !important;
}

/* The mobile homepage starts with identity and books, not a wall of CTAs. */
html[data-mode="1999"] body.home .home-hero-copy > .action-row {
  display: none !important;
}

html[data-mode="1999"] body.home .home-hero-excerpt {
  inline-size: 100% !important;
  max-inline-size: none !important;
  min-block-size: 0 !important;
  display: grid !important;
  gap: 0.5rem !important;
  margin: 1rem 0 0 !important;
  padding: 0.8rem 0 0 !important;
  border: 0 !important;
  border-block-start: 2px solid var(--retro-window-border) !important;
  color: var(--1999-ink, #ffff66) !important;
  background: transparent !important;
}

html[data-mode="1999"] body.home .home-hero-excerpt blockquote {
  min-block-size: 0 !important;
  display: -webkit-box;
  margin: 0 !important;
  overflow: hidden;
  color: var(--1999-ink, #ffff66) !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

html[data-mode="1999"] body.home .home-hero-excerpt-source {
  color: var(--1999-muted, #fff) !important;
  font: 700 0.66rem/1.3 var(--retro-font-terminal) !important;
}

html[data-mode="1999"] body.home .home-hero-excerpt .text-link {
  justify-self: start;
  min-block-size: var(--retro-touch-target);
  display: inline-flex;
  align-items: center;
  color: var(--1999-link, #00ffff) !important;
  font-size: 0.76rem !important;
}

html[data-mode="1999"] body.home .home-hero-library {
  grid-area: library !important;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  justify-items: stretch !important;
  gap: 0.7rem !important;
  margin: 0 !important;
}

html[data-mode="1999"] body.home .home-hero-library > :where(.home-hero-shelf, .home-hero-release) {
  grid-column: 1 !important;
  grid-row: auto !important;
}

html[data-mode="1999"] body.home .home-hero-shelf {
  inline-size: 100% !important;
  max-inline-size: 27rem !important;
  min-block-size: 16.5rem !important;
  block-size: 16.5rem !important;
  justify-self: center !important;
  margin: 0 !important;
  padding: 0 0 2.8rem !important;
  overflow: visible !important;
}

html[data-mode="1999"] body.home .home-hero-shelf::before {
  bottom: 2.15rem !important;
  background: linear-gradient(90deg, transparent, var(--retro-window-border), transparent) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] body.home .home-hero-shelf::after {
  content: none !important;
  display: none !important;
}

html[data-mode="1999"] body.home .home-hero-book {
  bottom: 2.75rem !important;
  transition: transform 220ms ease, filter 160ms ease !important;
}

html[data-mode="1999"] body.home .home-hero-book img {
  border: 2px solid var(--retro-window-border) !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
}

html[data-mode="1999"] body.home .home-hero-book.is-active {
  inline-size: clamp(7.4rem, 29vw, 9rem) !important;
  transform: translateX(-103%) rotate(-2deg) translateY(-0.25rem) !important;
}

html[data-mode="1999"] body.home .home-hero-book.is-next {
  inline-size: clamp(6rem, 23vw, 7.25rem) !important;
  transform: translateX(-24%) rotate(3deg) translateY(0.55rem) !important;
}

html[data-mode="1999"] body.home .home-hero-book.is-prev {
  inline-size: clamp(5.45rem, 21vw, 6.6rem) !important;
  transform: translateX(42%) rotate(-1deg) translateY(1rem) !important;
}

html[data-mode="1999"] body.home .home-hero-book:is(:hover, :focus-visible) {
  filter: brightness(1.12) !important;
}

html[data-mode="1999"] body.home .home-hero-controls {
  bottom: 0 !important;
  min-block-size: var(--retro-touch-target);
  gap: 0.38rem !important;
  padding: 0.25rem !important;
  border: 2px outset var(--retro-window-border) !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
}

html[data-mode="1999"] body.home .home-hero-control {
  inline-size: var(--retro-touch-target) !important;
  block-size: var(--retro-touch-target) !important;
  border: 2px outset var(--retro-window-border) !important;
  border-radius: 0 !important;
  color: #000 !important;
  background: var(--1999-headingInk, #ffff00) !important;
  box-shadow: none !important;
}

html[data-mode="1999"] body.home .home-hero-dots button {
  position: relative;
  inline-size: var(--retro-touch-target) !important;
  block-size: var(--retro-touch-target) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-mode="1999"] body.home .home-hero-dots button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: 0.65rem;
  block-size: 0.65rem;
  border: 1px solid var(--retro-window-border);
  background: var(--1999-muted, #fff);
  transform: translate(-50%, -50%);
}

html[data-mode="1999"] body.home .home-hero-dots button[aria-current="true"] {
  inline-size: var(--retro-touch-target) !important;
}

html[data-mode="1999"] body.home .home-hero-dots button[aria-current="true"]::before {
  inline-size: 1.2rem;
  background: var(--1999-accent, #ff00ff);
}

html[data-mode="1999"] body.home .home-hero-release {
  inline-size: 100% !important;
  max-inline-size: none !important;
  min-block-size: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.5rem 0.75rem !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 0.85rem !important;
  border: 2px solid var(--retro-window-border) !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--retro-window-bg) !important;
}

html[data-mode="1999"] body.home .home-hero-release-copy h2 {
  min-block-size: 0 !important;
  margin: 0 !important;
  color: var(--1999-headingInk, #ffff00) !important;
  font-size: clamp(1.25rem, 5vw, 1.65rem) !important;
  line-height: 1.05 !important;
}

html[data-mode="1999"] body.home .home-hero-release-copy p:not(.eyebrow) {
  min-block-size: 0 !important;
  display: -webkit-box;
  margin: 0.45rem 0 0 !important;
  overflow: hidden;
  color: var(--1999-muted, #fff) !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

html[data-mode="1999"] body.home .home-hero-meta {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.35rem !important;
  margin: 0.65rem 0 0 !important;
}

html[data-mode="1999"] body.home .home-hero-meta div {
  min-inline-size: 0 !important;
  padding: 0.45rem !important;
  border: 1px solid var(--retro-window-border) !important;
  border-radius: 0 !important;
  background: #000 !important;
}

html[data-mode="1999"] body.home .home-hero-meta dt {
  color: var(--1999-link, #00ffff) !important;
  font-size: 0.55rem !important;
}

html[data-mode="1999"] body.home .home-hero-meta dd {
  overflow-wrap: anywhere;
  color: var(--1999-ink, #ffff66) !important;
  font-size: 0.68rem !important;
}

html[data-mode="1999"] body.home .home-hero-release > .text-link {
  align-self: end !important;
  min-block-size: var(--retro-touch-target);
  display: inline-flex;
  align-items: center;
  color: var(--1999-link, #00ffff) !important;
  font-size: 0.75rem !important;
}

/* Shared homepage bands: remove the inherited stretched-card behavior. */
html[data-mode="1999"] body.home :where(.home-dispatch-band, .home-shop-band, .newsletter-band) {
  min-block-size: 0 !important;
  padding-block: 1rem !important;
  overflow: hidden !important;
  border-block-start: 3px double var(--retro-window-border) !important;
  background-image: none !important;
}

html[data-mode="1999"] body.home :where(.home-dispatch-layout, .home-shop-layout, .newsletter-layout) {
  inline-size: calc(100% - 1rem) !important;
  max-inline-size: none !important;
  min-block-size: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.75rem !important;
  margin-inline: 0.5rem !important;
}

html[data-mode="1999"] body.home .signal-home-header {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0 0 0.7rem !important;
  border-block-end: 2px solid var(--retro-window-border) !important;
}

html[data-mode="1999"] body.home .signal-home-header h2 {
  margin: 0 !important;
  font-size: clamp(1.8rem, 9vw, 2.75rem) !important;
}

html[data-mode="1999"] body.home .signal-home-more {
  justify-self: auto !important;
  min-block-size: var(--retro-touch-target);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

html[data-mode="1999"] body.home .home-dispatch-feature {
  min-block-size: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 0.7rem !important;
  padding: 0.9rem !important;
  border: 2px solid var(--retro-window-border) !important;
  border-inline-start-width: 5px !important;
  background: var(--retro-window-bg) !important;
}

html[data-mode="1999"] body.home .home-dispatch-feature::before,
html[data-mode="1999"] body.home .home-dispatch-feature::after,
html[data-mode="1999"] body.home .home-dispatch-side::before {
  content: none !important;
  display: none !important;
}

html[data-mode="1999"] body.home .home-dispatch-feature > :where(h2, p, .journal-meta, .button) {
  margin-block: 0 !important;
}

html[data-mode="1999"] body.home .home-dispatch-feature > h2 {
  font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
}

html[data-mode="1999"] body.home .signal-waveform {
  block-size: 2rem !important;
  margin: 0 !important;
}

html[data-mode="1999"] body.home .home-dispatch-feature .button {
  justify-self: start;
  margin-block-start: 0.25rem !important;
}

html[data-mode="1999"] body.home .home-dispatch-side,
html[data-mode="1999"] body.home .home-post-list {
  min-block-size: 0 !important;
  display: grid !important;
  gap: 0.45rem !important;
  overflow: visible !important;
}

html[data-mode="1999"] body.home .home-post-list > a {
  min-block-size: var(--retro-touch-target) !important;
  display: grid !important;
  grid-template-columns: 2rem minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 0.15rem 0.55rem !important;
  align-items: center !important;
  padding: 0.65rem !important;
  border: 1px solid var(--retro-window-border) !important;
  background: var(--retro-interactive-bg) !important;
}

html[data-mode="1999"] body.home .home-post-list b {
  inline-size: auto !important;
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  color: var(--1999-accent, #ff00ff) !important;
  font-size: 0.8rem !important;
}

html[data-mode="1999"] body.home .home-post-list :where(span, strong, small) {
  grid-column: 2 !important;
}

html[data-mode="1999"] body.home .home-post-list span {
  grid-row: 1 !important;
  font-size: 0.56rem !important;
}

html[data-mode="1999"] body.home .home-post-list strong {
  grid-row: 2 !important;
  font-size: 1rem !important;
}

html[data-mode="1999"] body.home .home-post-list small {
  display: none !important;
}

html[data-mode="1999"] body.home .home-post-list em {
  grid-column: 3 !important;
  grid-row: 1 / -1 !important;
}

html[data-mode="1999"] body.home .home-post-list em span {
  display: none !important;
}

html[data-mode="1999"] body.home .home-shop-copy {
  min-block-size: 0 !important;
  padding: 0.9rem !important;
  border: 2px solid var(--retro-window-border) !important;
  background: var(--retro-window-bg) !important;
}

html[data-mode="1999"] body.home .home-shop-copy h2 {
  margin-block: 0 !important;
  font-size: clamp(1.45rem, 7vw, 2rem) !important;
}

html[data-mode="1999"] body.home .home-shop-copy p {
  margin: 0.6rem 0 0 !important;
  color: var(--1999-muted, #fff) !important;
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
}

html[data-mode="1999"] body.home .home-shop-copy .action-row {
  margin-block-start: 0.8rem !important;
}

html[data-mode="1999"] body.home .home-shop-links {
  min-block-size: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.45rem !important;
}

html[data-mode="1999"] body.home .home-shop-links > a {
  min-block-size: var(--retro-touch-target) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.15rem 0.6rem !important;
  padding: 0.65rem !important;
  border: 1px solid var(--retro-window-border) !important;
  background: var(--retro-interactive-bg) !important;
}

html[data-mode="1999"] body.home .home-shop-links > a span {
  grid-column: 1 !important;
  color: var(--1999-muted, #fff) !important;
  font-size: 0.58rem !important;
}

html[data-mode="1999"] body.home .home-shop-links > a strong {
  grid-column: 1 !important;
  font-size: 0.9rem !important;
}

html[data-mode="1999"] body.home .home-shop-links > a em {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  font-size: 0.66rem !important;
}

html[data-mode="1999"] body.home .newsletter-layout > div:first-child {
  min-inline-size: 0;
}

html[data-mode="1999"] body.home .newsletter-layout h2 {
  margin: 0 !important;
  font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
}

html[data-mode="1999"] body.home .newsletter-layout p {
  margin: 0.45rem 0 0 !important;
  color: var(--1999-muted, #fff) !important;
  font-size: 0.84rem !important;
}

html[data-mode="1999"] body.home .newsletter-form {
  min-inline-size: 0 !important;
}

@media (min-width: 48rem) {
  html[data-mode="1999"] body.home .home-hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    grid-template-areas: "copy library" !important;
    gap: 1.25rem !important;
    padding: 1.25rem !important;
  }

  html[data-mode="1999"] body.home .home-hero-copy > .action-row {
    display: flex !important;
    margin-block-start: 1rem !important;
  }

  html[data-mode="1999"] body.home .home-hero-copy h1 {
    font-size: clamp(3rem, 6vw, 4.15rem) !important;
  }

  html[data-mode="1999"] body.home .home-hero-excerpt {
    margin-block-start: 1.15rem !important;
  }

  html[data-mode="1999"] body.home .home-hero-shelf {
    min-block-size: 19.5rem !important;
    block-size: 19.5rem !important;
  }

  html[data-mode="1999"] body.home .home-hero-book.is-active {
    inline-size: clamp(9.6rem, 15vw, 11rem) !important;
  }

  html[data-mode="1999"] body.home .home-hero-book.is-next {
    inline-size: clamp(7.6rem, 12vw, 8.7rem) !important;
  }

  html[data-mode="1999"] body.home .home-hero-book.is-prev {
    inline-size: clamp(7rem, 11vw, 8rem) !important;
  }

  html[data-mode="1999"] body.home .home-dispatch-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 0.85rem !important;
  }

  html[data-mode="1999"] body.home .home-shop-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    align-items: stretch !important;
  }

  html[data-mode="1999"] body.home .newsletter-layout {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) !important;
    align-items: center !important;
    gap: 1rem !important;
  }
}

@media (max-width: 47.999rem) {
  html[data-mode="1999"] body.home .home-hero-grid {
    padding: 0.85rem !important;
  }

  html[data-mode="1999"] body.home .home-hero-release-copy p:not(.eyebrow) {
    display: none !important;
  }

  html[data-mode="1999"] body.home .home-hero-excerpt blockquote {
    -webkit-line-clamp: 2;
  }

  html[data-mode="1999"] body.home .home-hero-shelf {
    min-block-size: 15rem !important;
    block-size: 15rem !important;
  }

  html[data-mode="1999"] body.home .home-hero-meta {
    margin-block-start: 0.5rem !important;
  }

  html[data-mode="1999"] body.home .home-hero-release {
    padding: 0.7rem !important;
  }

  html[data-mode="1999"] body.home .home-dispatch-feature .signal-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  html[data-mode="1999"] body.home .home-shop-copy .action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-mode="1999"] body.home .home-shop-copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  html[data-mode="1999"] body.home .home-shop-links > a {
    padding-block: 0.5rem !important;
  }
}

@media (max-width: 25rem) {
  html[data-mode="1999"] body.home .home-hero-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-mode="1999"] body.home .home-shop-copy .action-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-mode="1999"] body.home .home-hero-book {
    transition: none !important;
  }
}


/* ---- assets/css/mode-1999-overlays-v5.css ---- */
/* 1999 Mode overlays v5: one stacking contract, no accidental collisions. */

html[data-mode="1999"] body.site-shell > .site-header {
  z-index: var(--retro-z-navigation) !important;
}

html[data-mode="1999"] body.site-shell :where(.article-progress, .site-navigation-progress) {
  top: 0 !important;
  z-index: var(--retro-z-progress) !important;
}

html[data-mode="1999"] body.site-shell .skip-link {
  z-index: var(--retro-z-accessibility) !important;
}

html[data-mode="1999"] body.site-shell .header-popover {
  position: relative;
  isolation: isolate;
}

html[data-mode="1999"] body.site-shell .header-popover-panel {
  z-index: var(--retro-z-popover) !important;
  max-block-size: min(32rem, calc(100svh - var(--retro-safe-top) - var(--retro-safe-bottom) - 1rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 3px outset var(--retro-window-border) !important;
  color: var(--1999-ink, #ffff66) !important;
  background: var(--retro-window-bg) !important;
  box-shadow: 5px 5px 0 #000 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-mode="1999"] body.site-shell .header-popover-panel[hidden] {
  display: none !important;
}

html[data-mode="1999"] body.site-shell .header-popover-panel :where(a, button) {
  min-block-size: var(--retro-touch-target);
  border-block-end: 1px dotted var(--retro-window-border) !important;
  color: var(--1999-link, #00ffff) !important;
  background: var(--retro-window-bg) !important;
}

html[data-mode="1999"] body.site-shell .header-popover-panel :where(a, button):is(:hover, :focus-visible) {
  color: var(--1999-headingInk, #ffff00) !important;
  background: var(--retro-interactive-bg) !important;
}

html[data-mode="1999"] body.site-shell :where(.drawer-overlay, .modal-overlay, .reader-modal, #firstViewerOffer) {
  z-index: var(--retro-z-overlay) !important;
}

html[data-mode="1999"] body.site-shell :where(.drawer, .drawer-keypad) {
  z-index: calc(var(--retro-z-overlay) + 1) !important;
}

html[data-mode="1999"] body.site-shell :where(.modal-dialog, .reader-modal .modal-dialog, #firstViewerOffer .first-viewer-offer__dialog) {
  z-index: var(--retro-z-modal) !important;
}

html[data-mode="1999"] body.site-shell :where(#site-memory, .cookie-banner) {
  z-index: var(--retro-z-modal) !important;
}

html[data-mode="1999"] body.site-shell :where(#smWelcomeBubble, .welcome-bubble) {
  z-index: var(--retro-z-overlay) !important;
  right: var(--retro-page-gutter-right) !important;
  bottom: var(--retro-safe-bottom) !important;
  max-inline-size: min(22rem, calc(100vw - var(--retro-page-gutter) - var(--retro-page-gutter-right))) !important;
}

html[data-mode="1999"] body.site-shell .site-footer .footer-art-fixed {
  z-index: calc(var(--retro-z-sticky) - 1) !important;
  right: max(0px, env(safe-area-inset-right)) !important;
  bottom: 0 !important;
  margin: 0 !important;
}

html[data-mode="1999"] body.site-shell .site-footer .footer-art-fixed :where(a, img) {
  margin-block-end: 0 !important;
}

/* Phone and compact layouts reserve a bottom landing area for Starduster. */
@media (max-width: 79.999rem) {
  html[data-mode="1999"] body.site-shell > .mode-1999-signoff {
    min-block-size: 7rem;
    padding-block-end: calc(4.75rem + var(--retro-safe-bottom)) !important;
  }
}

/* Mobile popovers become bounded viewport sheets below the header. */
@media (max-width: 47.999rem) {
  html[data-mode="1999"] body.site-shell .header-popover-panel {
    position: fixed !important;
    inset: auto var(--retro-page-gutter-right) auto var(--retro-page-gutter) !important;
    top: calc(env(safe-area-inset-top) + 3.8rem) !important;
    inline-size: auto !important;
    max-inline-size: none !important;
    max-block-size: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 4.3rem) !important;
    margin: 0 !important;
  }

  html[data-mode="1999"] body.site-shell :where(.modal-overlay, .reader-modal, #firstViewerOffer) {
    padding:
      calc(0.5rem + env(safe-area-inset-top))
      var(--retro-page-gutter-right)
      calc(0.5rem + env(safe-area-inset-bottom))
      var(--retro-page-gutter) !important;
  }

  html[data-mode="1999"] body.site-shell :where(.modal-dialog, .reader-modal .modal-dialog, #firstViewerOffer .first-viewer-offer__dialog) {
    inline-size: 100% !important;
    max-block-size: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem) !important;
    margin: 0 !important;
  }
}

/* Compact header menus anchor to their controls and stay inside the column. */
@media (min-width: 48rem) and (max-width: 79.999rem) {
  html[data-mode="1999"] body.site-shell .header-popover-panel {
    position: absolute !important;
    inset: calc(100% + 0.55rem) 0 auto auto !important;
    inline-size: min(22rem, calc(100vw - 2rem)) !important;
    margin: 0 !important;
  }
}

/* Desktop rail menus open inward from the free-floating navigation field. */
@media (min-width: 80rem) {
  html[data-mode="1999"] body.site-shell > .site-header {
    overflow: visible !important;
  }

  html[data-mode="1999"] body.site-shell .header-popover-panel {
    position: absolute !important;
    inset: auto auto 0 calc(100% + 0.55rem) !important;
    inline-size: clamp(15rem, calc(50vw - 28rem), 20rem) !important;
    margin: 0 !important;
  }
}


/* ---- assets/css/mode-1999-controls-v5.css ---- */
/* 1999 Mode persistent control deck: palette, comfort, and site MIDI. */

.mode-1999-control-deck,
.mode-1999-control-deck[hidden] {
  display: none;
}

html[data-mode="1999"] body.site-shell > .mode-1999-control-deck:not([hidden]) {
  position: fixed;
  z-index: var(--retro-z-popover);
  left: var(--retro-page-gutter);
  bottom: calc(var(--retro-safe-bottom) + 0.25rem);
  inline-size: min(20rem, calc(100vw - var(--retro-page-gutter) - var(--retro-page-gutter-right)));
  display: block;
  color: var(--1999-ink, #ffff66);
  font-family: var(--retro-font-body);
}

html[data-mode="1999"] .mode-1999-control-launcher {
  inline-size: 5.5rem;
  min-block-size: var(--retro-touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.35rem 0.5rem;
  border: 3px outset var(--retro-window-border);
  border-radius: 0;
  color: #000;
  background: var(--1999-headingInk, #ffff00);
  box-shadow: 3px 3px 0 #000;
  font-family: var(--retro-font-terminal);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

html[data-mode="1999"] .mode-1999-control-launcher[aria-expanded="true"] {
  border-style: inset;
  color: var(--1999-headingInk, #ffff00);
  background: var(--1999-headingBg, #710071);
}

html[data-mode="1999"] .mode-1999-control-launcher > span {
  font-size: 1rem;
}

html[data-mode="1999"] .mode-1999-control-panel {
  position: absolute;
  left: 0;
  bottom: calc(var(--retro-touch-target) + 0.55rem);
  inline-size: 100%;
  max-block-size: min(35rem, calc(100svh - var(--retro-safe-top) - var(--retro-safe-bottom) - 4rem));
  overflow: auto;
  overscroll-behavior: contain;
  border: 4px outset var(--retro-window-border);
  border-radius: 0;
  color: var(--1999-ink, #ffff66);
  background: var(--retro-window-bg);
  box-shadow: 5px 5px 0 #000;
  opacity: 1;
  isolation: isolate;
}

html[data-mode="1999"] .mode-1999-control-panel[hidden] {
  display: none !important;
}

html[data-mode="1999"] .mode-1999-control-titlebar {
  position: sticky;
  z-index: 1;
  top: 0;
  min-block-size: 2.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.45rem 0.35rem 0.65rem;
  border-block-end: 2px solid var(--retro-window-border);
  color: var(--1999-headingInk, #ffff00);
  background: var(--retro-title-bg);
  font-size: 0.82rem;
}

html[data-mode="1999"] .mode-1999-control-titlebar button {
  inline-size: 2rem;
  min-inline-size: 2rem;
  block-size: 2rem;
  min-block-size: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px outset #fff;
  border-radius: 0;
  color: #000;
  background: #c0c0c0;
  font: 700 1.1rem/1 var(--retro-font-terminal);
  cursor: pointer;
}

html[data-mode="1999"] .mode-1999-control-body {
  display: grid;
  gap: 0.7rem;
  padding: 0.7rem;
  background: var(--retro-window-bg);
}

html[data-mode="1999"] .mode-1999-control-field,
html[data-mode="1999"] .mode-1999-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-inline-size: 0;
  color: var(--1999-muted, #fff);
  font-size: 0.72rem;
  font-weight: 700;
}

html[data-mode="1999"] .mode-1999-control-field select {
  grid-column: 2 / -1;
  min-inline-size: 0;
  min-block-size: var(--retro-touch-target);
  padding: 0.35rem 1.8rem 0.35rem 0.45rem;
  border: 2px inset var(--retro-window-border);
  border-radius: 0;
  color: var(--1999-ink, #ffff66);
  background-color: #000;
  font: 700 0.75rem/1.2 var(--retro-font-body);
}

html[data-mode="1999"] .mode-1999-control-field select option {
  color: #fff;
  background: #000;
}

html[data-mode="1999"] .mode-1999-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

html[data-mode="1999"] .mode-1999-control-grid > button {
  min-inline-size: 0;
  min-block-size: 3.2rem;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.08rem;
  padding: 0.4rem 0.5rem;
  border: 2px outset var(--retro-window-border);
  border-radius: 0;
  color: var(--1999-link, #00ffff);
  background: var(--retro-interactive-bg);
  text-align: left;
  cursor: pointer;
}

html[data-mode="1999"] .mode-1999-control-grid > button[aria-checked="true"] {
  border-style: inset;
  color: var(--1999-headingInk, #ffff00);
  background: var(--retro-title-bg);
}

html[data-mode="1999"] .mode-1999-control-grid > button strong {
  color: currentColor;
  font-size: 0.72rem;
}

html[data-mode="1999"] .mode-1999-control-grid > button span {
  overflow-wrap: anywhere;
  color: var(--1999-muted, #fff);
  font-size: 0.58rem;
  line-height: 1.2;
}

html[data-mode="1999"] .mode-1999-audio-console {
  min-inline-size: 0;
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0.65rem;
  border: 2px inset var(--retro-window-border);
  color: var(--1999-ink, #ffff66);
  background: var(--retro-utility-bg);
}

html[data-mode="1999"] .mode-1999-audio-console legend {
  padding-inline: 0.3rem;
  color: var(--1999-headingInk, #ffff00);
  background: var(--retro-utility-bg);
  font: 700 0.7rem/1 var(--retro-font-terminal);
}

html[data-mode="1999"] .mode-1999-audio-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

html[data-mode="1999"] .mode-1999-audio-actions button,
html[data-mode="1999"] .mode-1999-modern-return {
  min-inline-size: 0;
  min-block-size: var(--retro-touch-target);
  padding: 0.4rem 0.35rem;
  border: 2px outset var(--retro-window-border);
  border-radius: 0;
  color: var(--1999-link, #00ffff);
  background: var(--retro-control-bg);
  font: 700 0.68rem/1.1 var(--retro-font-body);
  cursor: pointer;
}

html[data-mode="1999"] .mode-1999-audio-actions button[aria-pressed="true"] {
  border-style: inset;
  color: var(--1999-headingInk, #ffff00);
  background: var(--retro-title-bg);
}

html[data-mode="1999"] .mode-1999-audio-actions button:disabled {
  border-style: inset;
  color: #aaa;
  background: #333;
  cursor: not-allowed;
}

html[data-mode="1999"] .mode-1999-volume input {
  min-inline-size: 0;
  inline-size: 100%;
  accent-color: var(--1999-accent, #ff00ff);
}

html[data-mode="1999"] .mode-1999-volume output {
  min-inline-size: 3.1em;
  color: var(--1999-link, #00ffff);
  font: 700 0.68rem/1 var(--retro-font-terminal);
  text-align: right;
}

html[data-mode="1999"] .mode-1999-audio-console [data-1999-audio-status] {
  min-block-size: 1.1em;
  margin: 0;
  color: var(--1999-muted, #fff) !important;
  font: 0.62rem/1.35 var(--retro-font-terminal) !important;
  text-align: left;
}

html[data-mode="1999"] .mode-1999-modern-return {
  inline-size: 100%;
  color: #fff;
  background: #710000;
}

html[data-mode="1999"] .mode-1999-control-deck :where(button, select, input):focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
}

html[data-mode="1999"][data-1999-contrast="high"] .mode-1999-control-panel,
html[data-mode="1999"][data-1999-contrast="high"] .mode-1999-control-body {
  color: #fff;
  background: #000;
}

@media (max-width: 47.999rem) {
  html[data-mode="1999"] body.site-shell > .mode-1999-control-deck:not([hidden]) {
    bottom: calc(var(--retro-safe-bottom) + 0.35rem);
  }

  html[data-mode="1999"] .mode-1999-control-panel {
    inline-size: min(20rem, calc(100vw - var(--retro-page-gutter) - var(--retro-page-gutter-right)));
    max-block-size: min(32rem, calc(100svh - var(--retro-safe-top) - var(--retro-safe-bottom) - 4.5rem));
  }
}

@media (min-width: 80rem) {
  html[data-mode="1999"] body.site-shell > .mode-1999-control-deck:not([hidden]) {
    left: max(
      var(--retro-page-gutter),
      calc((100vw - var(--retro-content-max)) / 2 - var(--retro-rail-width) - var(--retro-shell-gap))
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-mode="1999"] .mode-1999-control-deck * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* ---- assets/css/site-shell-v1.css ---- */
/* Sebastian Michaels responsive shell v1.
   Geometry only: visual palettes remain owned by their existing themes. */
:root {
  --shell-tap: 44px;
  --shell-gutter: clamp(.85rem, 3.8vw, 1.25rem);
  --shell-safe-top: env(safe-area-inset-top, 0px);
  --shell-safe-bottom: env(safe-area-inset-bottom, 0px);
  --shell-header-height: 4.15rem;
}

.site-header :where(.logo-btn, .header-social > a, .header-social .header-control) {
  min-width: var(--shell-tap);
  min-height: var(--shell-tap);
}

.drawer :where(.close-btn, a, button),
.site-footer :where(a, button) {
  min-height: var(--shell-tap);
}

.site-header .header-popover-panel {
  background-color: var(--bg);
  opacity: 1;
}

@media (max-width: 760px) {
  :root {
    --shell-header-height: calc(3.75rem + var(--shell-safe-top));
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .site-header {
    min-height: var(--shell-header-height);
    padding-top: var(--shell-safe-top);
  }

  .site-header .top-header,
  .site-header .header-inner {
    min-height: 3.75rem;
  }

  .site-header .header-inner {
    width: 100%;
    max-width: none;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: .45rem;
    padding-inline: max(var(--shell-gutter), env(safe-area-inset-left)) max(var(--shell-gutter), env(safe-area-inset-right));
  }

  .site-header .brand {
    flex: 1 1 auto !important;
    min-width: 0;
    gap: .45rem;
  }

  .site-header .logo-btn {
    width: var(--shell-tap);
    height: var(--shell-tap);
    flex: 0 0 var(--shell-tap);
  }

  .site-header .logo-btn .logo-tower,
  html[data-mode="1999"] .site-header .logo-btn .logo-tower {
    width: 2rem;
    height: 2rem;
  }

  .site-header .brand-text,
  .site-header .logo-text-link,
  .site-header .logo-text {
    min-width: 0;
    max-width: 100%;
  }

  .site-header .logo-text {
    overflow: hidden;
    font-size: clamp(.72rem, 3.5vw, .86rem);
    letter-spacing: .045em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header .logo-sub,
  .site-header .main-nav,
  .site-header .header-social > a[href="/contact/"] {
    display: none;
  }

  .site-header .header-social {
    min-width: 0;
    width: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    justify-self: end;
    justify-content: flex-end;
    margin-left: auto !important;
    gap: .2rem;
  }

  .site-header .header-social > a:not([aria-label="Contact"]) {
    display: inline-flex !important;
  }

  .site-header .header-social > a,
  .site-header .header-social .header-control {
    width: var(--shell-tap);
    height: var(--shell-tap);
    flex: 0 0 var(--shell-tap);
  }

  .site-header .header-popover-panel,
  .site-header .header-account-popover .header-popover-panel,
  .site-header .header-notifications-menu {
    position: fixed;
    top: calc(var(--shell-header-height) + .45rem);
    right: max(.55rem, env(safe-area-inset-right));
    left: max(.55rem, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - var(--shell-header-height) - 1rem - var(--shell-safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 96%, var(--surface) 4%);
  }

  .site-header .header-notification-list {
    max-height: min(56dvh, 24rem);
  }

  .drawer-overlay {
    overscroll-behavior: contain;
  }

  .drawer,
  html[data-mode="1999"] .drawer {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - max(.5rem, var(--shell-safe-top)));
    padding-bottom: var(--shell-safe-bottom);
    transform: translateY(calc(100% + 1rem));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    opacity: 1;
  }

  .drawer.open,
  html[data-mode="1999"] .drawer.open {
    transform: translateY(0);
  }

  .drawer-header {
    min-height: 3.75rem;
    padding: .55rem var(--shell-gutter);
  }

  .drawer .close-btn {
    width: var(--shell-tap);
    height: var(--shell-tap);
    display: grid;
    place-items: center;
    padding: 0;
  }

  .drawer .keypad-status {
    top: 3.75rem;
  }

  .drawer .keypad-wrap {
    padding: .75rem var(--shell-gutter);
  }

  .drawer .keycap {
    min-height: 4.35rem;
  }

  .drawer-account-access {
    padding: .65rem var(--shell-gutter) max(.7rem, var(--shell-safe-bottom));
  }

  .site-main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
  .site-main :where(button, .button, [role="button"]) {
    min-height: var(--shell-tap);
  }

  .site-footer :where(a, button) {
    display: inline-flex;
    align-items: center;
    padding-block: .55rem;
  }

  #site-memory {
    padding-right: max(.65rem, env(safe-area-inset-right));
    padding-bottom: max(.65rem, var(--shell-safe-bottom));
    padding-left: max(.65rem, env(safe-area-inset-left));
  }

  #site-memory .sm-card {
    max-height: calc(100dvh - 1.3rem - var(--shell-safe-bottom));
    overflow-y: auto;
  }

  #smWelcomeBubble {
    right: max(.75rem, env(safe-area-inset-right)) !important;
    bottom: max(.75rem, var(--shell-safe-bottom)) !important;
  }

  .first-viewer-offer__dialog {
    max-height: calc(100dvh - max(1rem, var(--shell-safe-top)) - max(1rem, var(--shell-safe-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 360px) {
  .site-header .header-inner {
    gap: .2rem;
    padding-inline: .45rem;
  }

  .site-header .brand {
    gap: .2rem;
  }

  .site-header .logo-text {
    font-size: .68rem;
  }

  .site-header .header-social {
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer-overlay,
  .header-popover-panel {
    transition: none !important;
  }
}