/* MOOSSin Novel public stylesheet (STYLE batch, 2026-09-20).
 *
 * Hand-written and project-original: no stylesheet import, no resource
 * reference (every background is a gradient), no webfont and no script, so
 * every public page stays inside the Public App's `style-src 'self'` CSP. The shell (deep-space bands, cards,
 * buttons, footer) follows the www homepage; the chapter body keeps its own
 * reading contract (720px measure, `--reader-font-size` and
 * `--reader-line-height` driven by static/public.js) on a warm paper surface.
 * The header is the one-row MOOSSin bar all five sections share (2026-10-05):
 * the mooss-bar block at the end of this file, copied verbatim.
 */

/* moossin-tokens v1 (www portal.css, 2026-09-20)
 * Copied from the www portal stylesheet (base tokens plus the ADR-0015 block).
 * Measured contrast on the near-white page: ink 15.75:1, muted 7.67:1,
 * moss 6.19:1, moss-strong 8.67:1, line 3.54:1 (a card border is a non-text
 * element and has to clear 3:1). On the dark bands: white on space-deep
 * 17.80:1, on teal 6.69:1, on teal-mid 4.88:1 (the lightest colour that ever
 * carries white text; teal-light never does); moss-strong on mint 6.97:1;
 * moss on the light band 5.74:1; star on space-deep 14.81:1. */
:root {
  --moossin-page: #fbfcfa;
  --moossin-surface: #f1f4ef;
  --moossin-band: #eef4f6;
  --moossin-ink: #1c221d;
  --moossin-muted: #4a544b;
  --moossin-moss: #2f6b3f;
  --moossin-moss-strong: #24532f;
  --moossin-line: #7c8a78;
  --moossin-line-soft: #d5dfe3;
  --moossin-space-deep: #0b1730;
  --moossin-space: #12264a;
  --moossin-teal-deep: #1b4d4a;
  --moossin-teal: #23665f;
  --moossin-teal-mid: #2e7d74;
  --moossin-teal-light: #3f9a8b;
  --moossin-mint: #cfe9e2;
  --moossin-star: #ffe9a8;

  --moossin-space-1: 0.25rem;
  --moossin-space-2: 0.5rem;
  --moossin-space-3: 1rem;
  --moossin-space-4: 1.5rem;
  --moossin-space-5: 2.5rem;

  --moossin-measure: 38rem;
  --moossin-radius: 0.5rem;
  --moossin-radius-card: 1rem;
  --moossin-shadow: 0 8px 28px rgba(11, 23, 48, 0.12);
  --moossin-gutter: max(var(--moossin-space-3), calc((100% - 64rem) / 2));
  --moossin-stars:
    radial-gradient(1.6px 1.6px at 8% 22%, rgba(255, 255, 255, 0.95) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 19% 71%, rgba(255, 255, 255, 0.75) 50%, transparent 52%),
    radial-gradient(2px 2px at 27% 38%, rgba(255, 233, 168, 0.95) 50%, transparent 52%),
    radial-gradient(1px 1px at 36% 12%, rgba(255, 255, 255, 0.8) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 44% 64%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 52% 28%, rgba(255, 255, 255, 0.85) 50%, transparent 52%),
    radial-gradient(2px 2px at 61% 80%, rgba(207, 233, 226, 0.9) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 68% 18%, rgba(255, 255, 255, 0.8) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 77% 52%, rgba(255, 233, 168, 0.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 84% 30%, rgba(255, 255, 255, 0.75) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 91% 70%, rgba(255, 255, 255, 0.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 96% 10%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 13% 90%, rgba(255, 255, 255, 0.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 58% 6%, rgba(255, 255, 255, 0.7) 50%, transparent 52%);
}

/* Novel aliases. The old token names stay so long-tail rules keep resolving,
 * but every one of them now points at a MOOSSin token. `--paper` is the one
 * deliberate exception: the owner kept the warm paper for the chapter body
 * as a "book page" (decision 1B, 2026-09-20), so it is used only there and
 * never as the page background. */
:root {
  color-scheme: light;
  --paper: #f3efe7;
  --paper-light: #fff;
  --paper-deep: var(--moossin-band);
  --ink: var(--moossin-ink);
  --ink-soft: var(--moossin-muted);
  --midnight: var(--moossin-space-deep);
  --midnight-soft: var(--moossin-space);
  --accent: var(--moossin-moss);
  --accent-dark: var(--moossin-moss-strong);
  --gold: var(--moossin-star);
  --line: var(--moossin-line-soft);
  --line-strong: var(--moossin-line);
  --shadow: var(--moossin-shadow);
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --reader-font-size: 18px;
  --reader-line-height: 1.9;
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--moossin-page);
  color: var(--moossin-ink);
  /* System stack only: no webfont means no licence obligation and no load cost. */
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3 {
  line-height: 1.35;
  text-wrap: balance;
}

a {
  color: var(--moossin-moss);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--moossin-moss-strong);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* One focus rule for everything focusable; the ring turns star-yellow on the
 * dark bands where moss would vanish. */
:focus-visible {
  outline: 3px solid var(--moossin-moss);
  outline-offset: 2px;
  border-radius: var(--moossin-radius);
}

.home-hero :focus-visible,
.page-band :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--moossin-star);
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] .button {
  overflow-wrap: anywhere;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--moossin-moss-strong);
  font-weight: 700;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* The shell is the 64rem container of the www homepage with a 1rem gutter on
 * each side; full-bleed bands sit outside it and centre their own shell. */
.site-shell {
  width: min(64rem, 100% - 2rem);
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Deep-space bands: the home hero (full, with orbit ring and planet arc) and
 * the shorter, planet-less page band on list-like pages (the bookshelf too
 * since 2026-10-06). Chapter pages carry no band.
 * ------------------------------------------------------------------------ */

.home-hero,
.page-band {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 2.5rem 2.5rem;
  color: #fff;
  text-align: center;
  background-image:
    var(--moossin-stars),
    linear-gradient(160deg, var(--moossin-space-deep) 0%, var(--moossin-space) 40%, var(--moossin-teal-deep) 78%, var(--moossin-teal) 100%);
}

.home-hero {
  padding-block: 4rem 6.5rem;
}

.page-band {
  padding-block: 2.5rem 3.25rem;
}

/* The catalogue had a full band with the planet until 2026-10-06; it now has
   the short band like search (owner: list pages need no large banner). */
.home-hero::before {
  content: "";
  position: absolute;
  right: -16rem;
  bottom: -9rem;
  width: 46rem;
  height: 18rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transform: rotate(-10deg);
  pointer-events: none;
}

.home-hero::after {
  content: "";
  position: absolute;
  right: -9rem;
  bottom: -17rem;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--moossin-teal-light), var(--moossin-teal) 42%, var(--moossin-teal-deep) 72%, var(--moossin-space) 100%);
  box-shadow: 0 0 60px rgba(63, 154, 139, 0.35);
  pointer-events: none;
}

.home-hero > *,
.page-band > * {
  position: relative;
  z-index: 1;
}

.home-hero__grid {
  display: grid;
  justify-items: center;
}

.home-hero__content {
  max-width: 40rem;
}

.eyebrow {
  margin: 0 0 var(--moossin-space-2);
  color: var(--moossin-star);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.eyebrow--accent {
  color: var(--moossin-moss-strong);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-hero h1 {
  max-width: 30ch;
  margin: 0 auto var(--moossin-space-3);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  font-weight: 800;
}

.home-hero__title {
  white-space: pre-line;
}

.home-hero__lead {
  max-width: var(--moossin-measure);
  margin: 0 auto var(--moossin-space-4);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
}

.page-band h1 {
  max-width: 30ch;
  margin: 0 auto;
  font-size: clamp(1.7rem, 1.25rem + 2vw, 2.5rem);
  font-weight: 800;
}

/* The bookshelf's band is a slim strip since 2026-10-06 (owner: the list
   comes first; other novel sites give their lists no large banner). */
.page-band--slim {
  padding-block: 1.25rem 1.5rem;
  border-radius: 0 0 1.5rem 1.5rem;
}

.page-band--slim .eyebrow {
  margin-bottom: var(--moossin-space-1);
}

.page-band--slim h1 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
}

/* ---------------------------------------------------------------------------
 * Buttons and links
 * ------------------------------------------------------------------------ */

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--moossin-space-3);
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--moossin-space-4);
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--moossin-moss);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button:hover {
  background: var(--moossin-moss-strong);
  color: #fff;
}

/* The primary reading button ("從第一章開始") is the moss pill. */
.button--dark {
  background: var(--moossin-moss);
  color: #fff;
}

.button--dark:hover {
  background: var(--moossin-moss-strong);
}

.button--outline {
  border-color: var(--moossin-moss);
  background: transparent;
  color: var(--moossin-moss-strong);
}

.button--outline:hover {
  background: var(--moossin-mint);
  color: var(--moossin-moss-strong);
}

.button--light {
  background: #fff;
  color: var(--moossin-space-deep);
}

.button--light:hover {
  background: var(--moossin-mint);
  color: var(--moossin-space-deep);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--moossin-moss);
  font-weight: 700;
  text-decoration: none;
}

.text-link:hover {
  color: var(--moossin-moss-strong);
  text-decoration: underline;
}

.text-link--light {
  padding: 0 var(--moossin-space-4);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fff;
}

.text-link--light:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Pills: genre directory, catalogue filters, genre tags, title tags
 * ------------------------------------------------------------------------ */

.genre-directory,
.genre-filters,
.genre-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--moossin-space-2);
}

.browse-directory {
  display: grid;
  gap: var(--moossin-space-3);
  padding-block: var(--moossin-space-4);
  border-bottom: 1px solid var(--moossin-line-soft);
}

.genre-directory {
  padding-block: var(--moossin-space-4);
  border-bottom: 1px solid var(--moossin-line-soft);
}

.browse-directory .genre-directory {
  padding-block: 0;
  border-bottom: 0;
}

.genre-directory > span,
.filter-row__label {
  margin-right: var(--moossin-space-1);
  color: var(--moossin-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.genre-directory a,
.genre-filters a,
.genre-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--moossin-line);
  border-radius: 999px;
  background: #fff;
  color: var(--moossin-moss-strong);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.genre-directory a:hover,
.genre-filters a:hover,
.genre-tags a:hover,
.genre-filters a[aria-current="page"] {
  border-color: var(--moossin-moss);
  background: var(--moossin-moss);
  color: #fff;
}

.genre-directory small,
.genre-filters small {
  margin-left: 0.3rem;
  font-weight: 400;
  opacity: 0.85;
}

.genre-filters {
  margin: 0;
}

.catalog-filters {
  display: grid;
  gap: var(--moossin-space-2);
  margin: 0 0 var(--moossin-space-4);
}

.catalog-filters .genre-filters {
  margin: 0;
}

/* The catalogue's filters are words; only the chosen one is tinted (2026-10-06,
   nineteen outlined pills read as more boxes). The home keeps its pills. */
.catalog-filters .genre-filters a {
  padding: 0 0.7rem;
  border-color: transparent;
  background: none;
}

.catalog-filters .genre-filters a:hover,
.catalog-filters .genre-filters a[aria-current="page"] {
  border-color: transparent;
  background: var(--moossin-mint);
  color: var(--moossin-moss-strong);
}

.genre-tags {
  margin-top: var(--moossin-space-3);
}

.title-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--moossin-space-2);
  margin: var(--moossin-space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Words, not pills, since 2026-10-06: a pill is for a button. */
.title-tags li {
  color: var(--moossin-muted);
  font-size: 0.85rem;
}

/* On the work page the genres are plain links too (the home and the catalogue
   keep their own style). */
.novel-header .genre-tags a {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--moossin-moss-strong);
  text-decoration: underline;
  text-decoration-color: var(--moossin-line-soft);
  text-underline-offset: 0.25em;
}

.novel-header .genre-tags a:hover {
  background: none;
  color: var(--moossin-moss);
  text-decoration-color: currentColor;
}

.novel-header .title-tags {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Home sections and work cards
 * ------------------------------------------------------------------------ */

.home-section {
  padding-block: var(--moossin-space-5) 3rem;
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--moossin-space-3);
  margin-bottom: var(--moossin-space-4);
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.section-heading .eyebrow {
  margin-bottom: var(--moossin-space-1);
}

.works {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--moossin-space-4);
  list-style: none;
}

.work-card {
  min-width: 0;
  margin: 0;
}

.work-card__link {
  display: grid;
  min-height: 250px;
  grid-template-columns: 150px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--moossin-line);
  border-radius: var(--moossin-radius-card);
  background: #fff;
  box-shadow: var(--moossin-shadow);
  color: var(--moossin-ink);
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.work-card__link:hover {
  border-color: var(--moossin-moss);
  box-shadow: 0 12px 34px rgba(11, 23, 48, 0.18);
  color: var(--moossin-ink);
  transform: translateY(-3px);
}

.work-card__cover {
  position: relative;
  display: block;
  min-height: 250px;
  overflow: hidden;
  background: var(--moossin-band);
}

.work-card__cover .book-cover-placeholder > span {
  font-size: 3rem;
}

.work-card__cover > img,
.catalog-item__cover > img,
.novel-header__cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Missing cover: a planet-dark placeholder with the first character. */
.book-cover-placeholder {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 30% 25%, var(--moossin-teal-mid), var(--moossin-teal-deep) 55%, var(--moossin-space-deep) 100%);
  color: #fff;
  font-family: var(--serif);
}

.book-cover-placeholder::before {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 233, 168, 0.45);
  content: "";
}

.book-cover-placeholder > span {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
}

.book-cover-placeholder > small {
  position: absolute;
  bottom: 24px;
  color: var(--moossin-mint);
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.work-card__number {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--moossin-space-deep);
  color: var(--moossin-star);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.work-card__body {
  display: flex;
  min-width: 0;
  min-height: 250px;
  flex-direction: column;
  padding: var(--moossin-space-4);
}

.work-card__meta {
  margin-bottom: var(--moossin-space-2);
  color: var(--moossin-muted);
  font-size: 0.85rem;
}

.work-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reading-length {
  display: block;
  color: var(--moossin-muted);
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.work-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--moossin-space-2);
  color: var(--moossin-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.work-card__footer {
  display: flex;
  margin-top: auto;
  padding-top: var(--moossin-space-3);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--moossin-space-2) var(--moossin-space-3);
}

.work-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 36px;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: var(--moossin-moss);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.work-card__link:hover .work-card__cta {
  background: var(--moossin-moss-strong);
}

.work-card__updated {
  color: var(--moossin-muted);
  font-size: 0.8rem;
}

.empty-state {
  display: grid;
  grid-template-columns: 136px 1fr;
  align-items: center;
  gap: var(--moossin-space-4);
  padding: var(--moossin-space-4);
  border: 1px solid var(--moossin-line);
  border-radius: var(--moossin-radius-card);
  background: #fff;
  box-shadow: var(--moossin-shadow);
}

.empty-state__mark {
  display: grid;
  width: 136px;
  height: 136px;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--moossin-teal-mid), var(--moossin-teal-deep) 75%);
  color: #fff;
  font-family: var(--serif);
  font-size: 3.2rem;
}

.empty-state__eyebrow {
  margin: 0 0 var(--moossin-space-1);
  color: var(--moossin-moss-strong);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.empty-state h2,
.empty-state h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 700;
}

.empty-state p:last-child {
  margin: var(--moossin-space-2) 0 0;
  color: var(--moossin-muted);
}

.empty-state--compact {
  margin-top: var(--moossin-space-3);
}

.empty-state--compact .empty-state__mark {
  width: 96px;
  height: 96px;
  font-size: 2.4rem;
}

/* The reading guide on the home page is a light band card. */
.reader-welcome {
  margin-block: 0 var(--moossin-space-5);
  padding: var(--moossin-space-4);
  border-radius: var(--moossin-radius-card);
  background: var(--moossin-band);
}

.reader-welcome h2 {
  margin: 0 0 var(--moossin-space-2);
  font-size: 1.4rem;
}

.reader-welcome p {
  max-width: 70ch;
  line-height: 1.9;
}

/* ---------------------------------------------------------------------------
 * Page frame for list-like pages
 * ------------------------------------------------------------------------ */

.page-main {
  min-height: calc(100vh - 192px);
  padding-block: var(--moossin-space-5) 4rem;
}

.page-main--band {
  padding-top: 0;
}

.page-body {
  padding-top: var(--moossin-space-5);
}

/* Search is one centred 48rem column (owner, 2026-10-06: its form and results
   used to sit narrower, left-aligned in the 64rem shell). */
.page-body--narrow {
  width: min(48rem, 100% - 2rem);
}

/* ---------------------------------------------------------------------------
 * Bookshelf: each catalogue row is a white card
 * ------------------------------------------------------------------------ */

.catalog-list,
.result-list,
.chapter-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rows on the page, not boxes (2026-10-06): hairlines between the works. */
.catalog-list {
  display: grid;
  border-top: 1px solid var(--moossin-line-soft);
}

.catalog-item {
  border-bottom: 1px solid var(--moossin-line-soft);
}

.catalog-item a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--moossin-space-4);
  padding: var(--moossin-space-4) 0;
  color: var(--moossin-ink);
  text-decoration: none;
}

.catalog-item a:hover {
  color: var(--moossin-moss-strong);
}

.catalog-item__cover {
  display: block;
  width: 72px;
  height: 96px;
  overflow: hidden;
  border-radius: var(--moossin-radius);
  background: var(--moossin-band);
  box-shadow: 0 4px 14px rgba(11, 23, 48, 0.14);
}

.catalog-item__cover .book-cover-placeholder::before {
  inset: 6px;
}

.catalog-item__cover .book-cover-placeholder > span {
  font-size: 2rem;
}

.catalog-item__cover .book-cover-placeholder > small {
  bottom: 8px;
  font-size: 0.48rem;
}

.catalog-item__meta,
.catalog-item__updated {
  color: var(--moossin-muted);
  font-size: 0.8rem;
}

.catalog-item__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--moossin-space-1);
}

.catalog-item__title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.catalog-item__excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--moossin-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-item__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--moossin-space-1);
  text-align: right;
}

/* ---------------------------------------------------------------------------
 * Search
 * ------------------------------------------------------------------------ */

.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--moossin-space-2);
  margin: 0 0 var(--moossin-space-4);
}

.search-form input {
  width: 100%;
  min-height: 52px;
  padding: 0 1.2rem;
  border: 1px solid var(--moossin-line);
  border-radius: 999px;
  background: #fff;
  color: var(--moossin-ink);
  font-size: 1.05rem;
}

.search-form input::placeholder {
  color: var(--moossin-muted);
  opacity: 1;
}

.search-form input:focus {
  border-color: var(--moossin-moss);
}

.search-form button {
  min-height: 52px;
  padding: 0 var(--moossin-space-4);
  border: 0;
  border-radius: 999px;
  background: var(--moossin-moss);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.search-form button:hover {
  background: var(--moossin-moss-strong);
}

/* A line of text since 2026-10-06, not a box. */
.notice-card {
  display: flex;
  align-items: center;
  gap: var(--moossin-space-3);
  padding: var(--moossin-space-3) 0;
  color: var(--moossin-muted);
}

.notice-card > span {
  color: var(--moossin-moss);
  font-size: 1.8rem;
}

.notice-card p {
  margin: 0;
}

.search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--moossin-space-2);
  margin: 0 0 var(--moossin-space-4);
  color: var(--moossin-muted);
}

.search-summary strong {
  color: var(--moossin-moss-strong);
  font-size: 1.4rem;
}

.search-summary span {
  margin-left: auto;
  font-size: 0.85rem;
}

.search-snippet,
.search-meta {
  margin-top: 0.15rem;
  color: var(--moossin-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.result-section {
  margin-top: var(--moossin-space-4);
}

.result-section h2 {
  margin: 0 0 var(--moossin-space-3);
  font-size: 1.25rem;
}

/* Rows with hairlines, like the catalogue (2026-10-06), not boxes. */
.result-list {
  display: grid;
  border-top: 1px solid var(--moossin-line-soft);
}

.result-list li {
  border-bottom: 1px solid var(--moossin-line-soft);
}

.result-list a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--moossin-space-3);
  padding: var(--moossin-space-3) 0;
  color: var(--moossin-ink);
  text-decoration: none;
}

.result-list a:hover {
  color: var(--moossin-moss-strong);
}

.result-list__type {
  color: var(--moossin-moss-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.result-list__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
  overflow-wrap: anywhere;
}

.result-list__body strong {
  font-size: 1.1rem;
}

mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--moossin-star);
  color: var(--moossin-ink);
}

/* ---------------------------------------------------------------------------
 * Breadcrumb (work and chapter pages)
 * ------------------------------------------------------------------------ */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--moossin-space-2);
  margin-bottom: var(--moossin-space-4);
  color: var(--moossin-muted);
  font-size: 0.9rem;
}

/* A plain link since 2026-10-06 (the owner found the inner pages boxy): no pill. */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--moossin-moss-strong);
  font-weight: 600;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--moossin-moss);
  text-decoration: underline;
}

.breadcrumb > span:last-child {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Work page: header, synopsis, catalogue, rating. Since 2026-10-06 none of them
 * is a box (the owner found the page boxy): they sit on the page, separated by
 * whitespace and hairlines; only the cover keeps its own frame.
 * ------------------------------------------------------------------------ */

/* The whole work page is one centred 48rem column (owner, 2026-10-06: a
   narrower column left-aligned in the 64rem shell sat off to the left). */
.novel-page {
  width: min(48rem, 100% - 2rem);
}

.novel-header {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: var(--moossin-space-5);
  border-bottom: 1px solid var(--moossin-line-soft);
}

.novel-header__cover {
  width: 200px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--moossin-radius-card);
  background: #fff;
  box-shadow: var(--moossin-shadow);
}

.novel-header__cover .book-cover-placeholder > span {
  font-size: 5rem;
}

.novel-header h1 {
  margin: 0;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.novel-header__author {
  margin: var(--moossin-space-2) 0;
  color: var(--moossin-muted);
}

.novel-header .reading-length {
  margin: 0;
}

/* One column under the header, in the order a reader goes (UX-A): synopsis,
   the way in, the catalogue, then the rating. Two side-by-side boxes left
   one of them half empty whenever a work had few chapters or a short synopsis. */
.novel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--moossin-space-5);
  padding-top: var(--moossin-space-5);
}

.prose-card,
.chapter-panel,
.novel-rating {
  overflow-wrap: anywhere;
}

.prose-card h2,
.chapter-panel h2,
.novel-rating h2 {
  margin: var(--moossin-space-4) 0 var(--moossin-space-2);
  font-size: 1.2rem;
}

.prose-card h3 {
  margin: var(--moossin-space-3) 0 var(--moossin-space-2);
  font-size: 1.05rem;
}

.prose-card > :first-child,
.chapter-panel > :first-child,
.novel-rating > :first-child {
  margin-top: 0;
}

.prose-card p,
.prose-card ul,
.prose-card ol {
  max-width: 46rem;
}

.prose-card section {
  padding-top: var(--moossin-space-3);
  border-top: 1px solid var(--moossin-line-soft);
  scroll-margin-top: var(--moossin-space-3);
}

.synopsis {
  margin: var(--moossin-space-3) 0 0;
  color: var(--moossin-ink);
  font-family: var(--serif);
  line-height: 1.95;
}

.synopsis > :first-child {
  margin-top: 0;
}

/* The reading entry points sit in the header under the title, on the first
   screen (owner, 2026-10-06; UX-A had put them under the synopsis); the
   rating section follows the catalogue and keeps its #rating anchor. */
.novel-reading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--moossin-space-2) var(--moossin-space-3);
  margin-top: var(--moossin-space-4);
}

/* A long synopsis can fold to about five lines; it starts open (owner,
   2026-10-06: 「預設展開」, so the checkbox is checked on load). The checkbox
   is the control, visually hidden but focusable and kept by its label so
   focusing it never scrolls the page; the label under the text reads
   「收合簡介」 or 「展開全文」. Only the height changes; the whole text stays in
   the page for search engines and assistive technology. */
.prose-card {
  position: relative;
}

.synopsis-toggle {
  position: absolute;
  bottom: 22px;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.synopsis--folds {
  max-height: calc(5 * 1.95em);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.synopsis-toggle:checked ~ .synopsis--folds {
  max-height: none;
  mask-image: none;
}

.synopsis-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--moossin-space-1);
  color: var(--moossin-moss-strong);
  font-weight: 600;
  cursor: pointer;
}

.synopsis-more:hover {
  color: var(--moossin-moss);
  text-decoration: underline;
}

.synopsis-more__close,
.synopsis-toggle:checked ~ .synopsis-more .synopsis-more__open {
  display: none;
}

.synopsis-toggle:checked ~ .synopsis-more .synopsis-more__close {
  display: inline;
}

.synopsis-toggle:focus-visible ~ .synopsis-more {
  outline: 3px solid var(--moossin-moss);
  outline-offset: 2px;
  border-radius: var(--moossin-radius);
}

.novel-reading-actions .button {
  min-height: 44px;
  padding: 0 var(--moossin-space-4);
}

.chapter-panel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--moossin-space-3);
  padding-bottom: var(--moossin-space-2);
  border-bottom: 1px solid var(--moossin-line-soft);
}

.chapter-panel__heading h2 {
  margin: 0;
}

.chapter-panel__heading span {
  color: var(--moossin-muted);
  font-size: 0.85rem;
}

.chapter-list li {
  border-bottom: 1px solid var(--moossin-line-soft);
}

.chapter-list li:last-child {
  border-bottom: 0;
}

/* No arrow column since 2026-10-06: the whole row is the link. */
.chapter-list a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--moossin-space-3);
  min-height: 44px;
  padding: var(--moossin-space-2) 0.25rem;
  color: var(--moossin-ink);
  text-decoration: none;
}

.chapter-list a:hover {
  color: var(--moossin-moss-strong);
}

.chapter-list a > span:first-child {
  color: var(--moossin-moss-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

.chapter-list__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chapter-list__updated {
  color: var(--moossin-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Where there is room, a chapter is one line: its title, then its update date
   on the right; a long title still wraps and pushes the date under it. */
@media (min-width: 640px) {
  .chapter-list__body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2rem var(--moossin-space-4);
  }
}

/* Past twelve chapters the catalogue runs down two columns where they fit
   (owner, 2026-10-06): the first half on the left, then the rest. */
@media (min-width: 760px) {
  .chapter-list--columns {
    column-count: 2;
    column-gap: var(--moossin-space-5);
  }

  .chapter-list--columns li {
    break-inside: avoid;
  }
}

.muted {
  color: var(--moossin-muted);
}

.novel-rating {
  margin-top: var(--moossin-space-5);
  padding-top: var(--moossin-space-4);
  border-top: 1px solid var(--moossin-line-soft);
}

/* The score sits on a small deep-space chip so the star-yellow stars keep
 * their contrast (star on space-deep 14.81:1). */
.novel-rating__score {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  margin: var(--moossin-space-3) 0 0;
  padding: 0.6rem 1.1rem;
  border-radius: var(--moossin-radius-card);
  background-image: linear-gradient(120deg, var(--moossin-space-deep), var(--moossin-space) 60%, var(--moossin-teal-deep));
  color: #fff;
}

.novel-rating__average {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.novel-rating__scale,
.novel-rating__count {
  color: var(--moossin-mint);
  font-size: 0.9rem;
}

.novel-rating__stars {
  color: var(--moossin-star);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
}

.novel-rating__form {
  margin-top: var(--moossin-space-3);
}

.novel-rating__fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--moossin-space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.novel-rating__legend {
  width: 100%;
  padding: 0 0 var(--moossin-space-2);
  color: var(--moossin-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.novel-rating__choice {
  position: relative;
  cursor: pointer;
}

.novel-rating__choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.novel-rating__choice span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 1rem;
  border: 1px solid var(--moossin-line);
  border-radius: 999px;
  background: #fff;
  color: var(--moossin-moss-strong);
  font-size: 0.9rem;
  font-weight: 600;
}

.novel-rating__choice:hover span {
  border-color: var(--moossin-moss);
  background: var(--moossin-mint);
}

.novel-rating__choice input:checked + span {
  border-color: var(--moossin-moss);
  background: var(--moossin-moss);
  color: #fff;
}

.novel-rating__choice input:focus-visible + span {
  outline: 3px solid var(--moossin-moss);
  outline-offset: 2px;
}

.novel-rating__submit {
  min-height: 44px;
  padding: 0 var(--moossin-space-4);
  border: 2px solid var(--moossin-moss);
  border-radius: 999px;
  background: var(--moossin-moss);
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}

.novel-rating__submit:hover {
  border-color: var(--moossin-moss-strong);
  background: var(--moossin-moss-strong);
}

.novel-rating__note {
  margin: var(--moossin-space-3) 0 0;
  color: var(--moossin-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
 * Chapter page: masthead and footer only, no band, no stars. The toolbar,
 * breadcrumb and chapter navigation are pills and cards; the body is the
 * warm "book page" and keeps the 720px measure and the reader variables.
 * ------------------------------------------------------------------------ */

.reader-main {
  width: min(720px, 100% - 2rem);
  min-height: calc(100vh - 192px);
  padding-block: var(--moossin-space-4) 4rem;
}

.reader-heading {
  max-width: 720px;
  margin-bottom: var(--moossin-space-4);
}

.reader-heading h1 {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* The chapter's dates under its title (2026-10-04): the publication date
 * always, the update date only when it falls on a later day. Muted text on
 * the near-white page (7.67:1); on a phone the two dates wrap as units. */
.reader-heading__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--moossin-space-1) var(--moossin-space-3);
  margin: var(--moossin-space-2) 0 0;
  color: var(--moossin-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Since 2026-10-06 only the text sits on paper: the settings row, the end of
   chapter note, the chapter links and the comments are not boxes any more. */
.reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--moossin-space-2) var(--moossin-space-3);
  padding-bottom: var(--moossin-space-2);
  border-bottom: 1px solid var(--moossin-line-soft);
  color: var(--moossin-muted);
  font-size: 0.85rem;
}

.reader-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--moossin-space-2);
  margin: 0;
}

.reader-controls button {
  min-height: 44px;
  margin: 0;
  padding: 0 0.9rem;
  border: 1px solid var(--moossin-line);
  border-radius: 999px;
  background: #fff;
  color: var(--moossin-moss-strong);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
}

.reader-controls button:hover {
  border-color: var(--moossin-moss);
  background: var(--moossin-moss);
  color: #fff;
}

/* The whole chapter page is the paper since 2026-10-06, not a rounded card
   floating on the page: one 720px column from the title to the comments. */
body.reader-page {
  background: var(--paper);
}

.chapter-body {
  margin: var(--moossin-space-4) 0 var(--moossin-space-5);
  color: var(--moossin-ink);
  font-family: var(--serif);
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
}

.chapter-body > :first-child {
  margin-top: 0;
}

.chapter-body > :last-child {
  margin-bottom: 0;
}

.chapter-body p {
  margin: 0 0 1.35em;
}

.chapter-body h2,
.chapter-body h3 {
  margin: 2.4em 0 1em;
  line-height: 1.5;
}

.chapter-body--pending {
  margin-block: 2rem;
}

/* 「人物與名詞」 (2026-10-14): a closed list under the synopsis and above the chapter text.
   It lists only what the reader has already met, so opening it never spoils. No box, like the
   rest of the inner pages: hairlines between entries. */
.reader-notes {
  margin-block: var(--moossin-space-3);
  overflow-wrap: anywhere;
}

.reader-notes > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--moossin-space-2);
  min-height: 44px;
  color: var(--moossin-moss-strong);
  font-weight: 600;
  cursor: pointer;
}

.reader-notes > summary:hover {
  color: var(--moossin-moss);
  text-decoration: underline;
}

.reader-notes > summary:focus-visible {
  outline: 3px solid var(--moossin-moss);
  outline-offset: 2px;
}

.reader-notes__count {
  color: var(--moossin-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.reader-notes h2,
.reader-notes h3 {
  margin: var(--moossin-space-3) 0 var(--moossin-space-1);
  color: var(--moossin-muted);
  font-size: 0.95rem;
}

.reader-notes dl {
  margin: 0;
}

.reader-notes dl > div {
  padding-block: var(--moossin-space-2);
  border-bottom: 1px solid var(--moossin-line-soft);
}

.reader-notes dt {
  font-weight: 600;
}

.reader-notes dt span {
  color: var(--moossin-muted);
  font-weight: 400;
}

.reader-notes dd {
  margin: var(--moossin-space-1) 0 0;
  color: var(--moossin-ink);
  line-height: 1.7;
}

.reader-notes__note {
  margin: var(--moossin-space-2) 0 0;
  color: var(--moossin-muted);
  font-size: 0.85rem;
}

.reader-return {
  margin-block: var(--moossin-space-4);
  overflow-wrap: anywhere;
}

.reader-return p {
  margin: 0;
}

.reader-return p + p {
  margin-top: var(--moossin-space-2);
}

.reader-return a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--moossin-moss);
  font-weight: 600;
}

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--moossin-space-3);
  padding-top: var(--moossin-space-3);
  border-top: 1px solid var(--moossin-line-soft);
}

.chapter-nav > span {
  width: min(46%, 320px);
}

.chapter-nav > span:last-child {
  margin-left: auto;
  text-align: right;
}

.chapter-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 44px;
  padding: var(--moossin-space-3) 0;
  color: var(--moossin-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.chapter-nav a:hover {
  color: var(--moossin-moss-strong);
}

.chapter-nav small {
  color: var(--moossin-moss-strong);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Chapter comments (2026-10-04). One comment service for the whole site runs
 * in the blog app on this origin; a Chinese chapter page ends with its notice,
 * list and plain form in one white card across the reader column, like the
 * toolbar and the chapter navigation. Comments are readers' words, so they use
 * the interface sans rather than the chapter's serif. On white: ink 16.20:1,
 * muted 7.89:1, the moss link and button 6.37:1 (hover 8.92:1), the field
 * border 3.64:1 (a non-text boundary needs 3:1); the "sent" notice is
 * moss-strong on mint 6.97:1, the other notices ink on surface 14.60:1.
 * ------------------------------------------------------------------------ */

.comments {
  margin-top: var(--moossin-space-5);
  padding-top: var(--moossin-space-4);
  border-top: 1px solid var(--moossin-line-soft);
  overflow-wrap: anywhere;
  scroll-margin-top: var(--moossin-space-3);
}

.comments h2 {
  margin: 0 0 var(--moossin-space-3);
  font-size: 1.2rem;
}

.comments__notice {
  margin: 0 0 var(--moossin-space-3);
  padding: var(--moossin-space-2) var(--moossin-space-3);
  border: 1px solid var(--moossin-line);
  border-left-width: 4px;
  border-radius: var(--moossin-radius);
  background: var(--moossin-surface);
  color: var(--moossin-ink);
  font-weight: 600;
}

.comments__notice--pending {
  border-color: var(--moossin-moss);
  background: var(--moossin-mint);
  color: var(--moossin-moss-strong);
}

.comments__status {
  margin: 0;
  color: var(--moossin-muted);
}

.comments__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment {
  padding-block: var(--moossin-space-3);
  border-top: 1px solid var(--moossin-line-soft);
}

.comment:first-child {
  padding-top: 0;
  border-top: 0;
}

.comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--moossin-space-1) var(--moossin-space-3);
  margin: 0 0 var(--moossin-space-1);
}

.comment__author {
  font-weight: 700;
}

.comment__date {
  color: var(--moossin-muted);
  font-size: 0.875rem;
}

.comment__body {
  margin: 0;
  line-height: 1.8;
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--moossin-space-3);
  margin-top: var(--moossin-space-4);
  padding-top: var(--moossin-space-4);
  border-top: 1px solid var(--moossin-line-soft);
}

/* The script hides the form when the comment list cannot be read; `display:
 * grid` above would otherwise outrank the hidden attribute. */
.comment-form[hidden] {
  display: none;
}

.comment-form__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--moossin-space-1);
  margin: 0;
}

.comment-form__field label {
  font-weight: 700;
}

.comment-form__field input,
.comment-form__field textarea {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--moossin-line);
  border-radius: var(--moossin-radius);
  background: #fff;
  color: var(--moossin-ink);
  line-height: 1.6;
}

.comment-form__field textarea {
  min-height: 9rem;
  resize: vertical;
}

.comment-form__field input:focus,
.comment-form__field textarea:focus {
  border-color: var(--moossin-moss);
}

/* The honeypot field: no box, no focus stop, nothing for assistive
 * technology. The markup adds aria-hidden and tabindex="-1" in case this
 * stylesheet does not load, and its label asks people to leave it empty. */
.comment-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.comment-form__note {
  margin: 0;
  color: var(--moossin-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

.comment-form__submit {
  justify-self: start;
  min-height: 44px;
  padding: 0 var(--moossin-space-4);
  border: 2px solid var(--moossin-moss);
  border-radius: 999px;
  background: var(--moossin-moss);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.comment-form__submit:hover {
  border-color: var(--moossin-moss-strong);
  background: var(--moossin-moss-strong);
}


/* ---------------------------------------------------------------------------
 * Status pages (404 / 503)
 * ------------------------------------------------------------------------ */

.status-page {
  min-height: calc(100vh - 192px);
  padding-block: 5rem;
}

.status-page__code {
  display: inline-flex;
  margin: 0 0 var(--moossin-space-3);
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: var(--moossin-space-deep);
  color: var(--moossin-star);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.status-page h1 {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem);
  font-weight: 800;
}

.status-page > p:not(.status-page__code) {
  margin: var(--moossin-space-3) 0 var(--moossin-space-4);
  color: var(--moossin-muted);
}

/* ---------------------------------------------------------------------------
 * Machine-translated English pages: the notice, original link, Google badge
 * and disclaimer close the content as the last child of <main> (owner's
 * decision, 2026-10-03; on a chapter that is after the chapter navigation).
 * Google's attribution rules only ask for the unmodified badge next to the
 * translated text, linked to translate.google.com; they set no top or bottom
 * position. A quiet end block: one hairline, no fill, no frame, never
 * full-bleed. It always sits on the near-white page: on band pages the dark
 * band stays at the top, and the footer's 2.5rem top margin keeps it off the
 * dark footer. .page-main and .reader-main add their 4rem bottom padding to
 * that gap; the home page's <main> has no class or padding, so there the
 * footer margin alone separates them. Muted text on #fbfcfa is 7.67:1, the
 * moss link 6.19:1.
 * ------------------------------------------------------------------------ */

.machine-translation {
  margin: 3rem auto 0;
  padding-top: var(--moossin-space-3);
  border-top: 1px solid var(--moossin-line-soft);
  color: var(--moossin-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* On the novel and chapter pages <main> is already the shell, so the block
 * takes that column instead of losing a second gutter; on a chapter its rule
 * lines up with the chapter navigation's rule right above it. */
.site-shell > .machine-translation {
  width: auto;
}

.machine-translation p {
  max-width: var(--moossin-measure);
  margin: 0;
}

.machine-translation p + p {
  margin-top: var(--moossin-space-2);
}

.machine-translation__disclaimer {
  font-size: 0.75rem;
  line-height: 1.5;
}

/* google-translate-badge.png is Google's @2x file (352x32): it shows at its
 * 1x size of 176x16, keeps its ratio and never shrinks below it. It takes its
 * own line under the notice sentence, so it lines up with the text at every
 * width; 4px above and below make the link a 24px-high target. */
.machine-translation__badge {
  display: block;
  width: fit-content;
  margin-top: var(--moossin-space-1);
  padding-block: 0.25rem;
}

.machine-translation__badge img {
  display: block;
  width: 176px;
  max-width: none;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * Footer: four columns on deep space with a planet horizon. Column two is the
 * shared MOOSSin navigation (`nav.mooss-sections`), stacked vertically.
 * ------------------------------------------------------------------------ */

.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: var(--moossin-space-5);
  padding-block: var(--moossin-space-5) 4rem;
  color: rgba(255, 255, 255, 0.85);
  background-image:
    var(--moossin-stars),
    linear-gradient(180deg, var(--moossin-space-deep), var(--moossin-space));
}

/* Chapter pages carry no star field anywhere, footer included. */
body.reader-page .site-footer {
  background-image: linear-gradient(180deg, var(--moossin-space-deep), var(--moossin-space));
}

.site-footer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30rem;
  width: 90rem;
  height: 34rem;
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0.9;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, var(--moossin-teal-light), var(--moossin-teal) 30%, var(--moossin-teal-deep) 60%);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
  gap: var(--moossin-space-4);
}

.site-footer__col {
  min-width: 0;
}

.site-footer__col p {
  margin: 0;
}

.site-footer__brand {
  margin: 0 0 var(--moossin-space-1);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

.site-footer__heading,
.mooss-sections__label {
  display: block;
  margin: 0 0 var(--moossin-space-2);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.site-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links li {
  padding: 0;
}

.site-footer a,
.mooss-sections a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--moossin-mint);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.site-footer a:hover,
.mooss-sections a:hover,
.site-footer a:focus-visible,
.mooss-sections a:focus-visible {
  color: #fff;
}

.site-footer a[aria-current],
.mooss-sections a[aria-current="page"] {
  color: #fff;
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.mooss-sections {
  min-width: 0;
  margin: 0;
}

.mooss-sections__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1rem;
}

.mooss-sections a {
  white-space: nowrap;
}

.site-footer__note {
  margin: var(--moossin-space-3) 0 0;
  padding-top: var(--moossin-space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

/* The byline sizes its own column, so a long one used to squeeze the title
   down to a single character per line on tablet widths. Stack it under the
   title instead, and keep the wide five-column row for real desktops. */
@media (max-width: 1000px) {
  .catalog-item a {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "cover body"
      "cover aside";
    gap: 8px 24px;
  }

  .catalog-item__cover {
    grid-area: cover;
  }

  .catalog-item__body {
    grid-area: body;
  }

  .catalog-item__aside {
    grid-area: aside;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    text-align: left;
  }
}

@media (max-width: 820px) {
  .works {
    grid-template-columns: 1fr;
  }

  .work-card__link {
    grid-template-columns: 140px minmax(0, 1fr);
  }

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

  .novel-header {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .novel-header__cover {
    width: 170px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .home-hero,
  .page-band {
    border-radius: 0 0 1.5rem 1.5rem;
  }

  .home-hero {
    padding-block: 3rem 4.5rem;
  }

  .home-hero h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .home-hero__lead {
    font-size: 1rem;
  }

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

  .work-card__link {
    min-height: 220px;
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .work-card__cover,
  .work-card__body {
    min-height: 220px;
  }

  .work-card__cover .book-cover-placeholder > span {
    font-size: 2.25rem;
  }

  .work-card__cover .book-cover-placeholder::before {
    inset: 8px;
  }

  .work-card__cover .book-cover-placeholder > small {
    bottom: 16px;
    font-size: 0.52rem;
  }

  .work-card__number {
    top: 10px;
    left: 10px;
  }

  .work-card__body {
    padding: var(--moossin-space-3);
  }

  .work-card__meta {
    margin-bottom: var(--moossin-space-1);
    font-size: 0.78rem;
  }

  .work-card__title {
    font-size: 1.1rem;
  }

  .work-card__excerpt {
    margin-top: var(--moossin-space-1);
    font-size: 0.85rem;
    line-height: 1.65;
    -webkit-line-clamp: 3;
  }

  .work-card__footer {
    padding-top: var(--moossin-space-2);
  }

  .work-card__updated {
    font-size: 0.75rem;
  }

  .empty-state {
    grid-template-columns: 1fr;
    gap: var(--moossin-space-3);
  }

  .empty-state__mark {
    width: 88px;
    height: 88px;
    font-size: 2.4rem;
  }

  .home-section {
    padding-block: var(--moossin-space-4) var(--moossin-space-4);
  }

  .reader-welcome {
    padding: var(--moossin-space-3);
  }

  .page-body {
    padding-top: var(--moossin-space-4);
  }

  .breadcrumb {
    margin-bottom: var(--moossin-space-3);
  }

  .catalog-item a {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
      "cover body"
      "cover aside";
    gap: 10px 14px;
    padding: var(--moossin-space-3) 0;
  }

  .catalog-item__body {
    grid-area: body;
  }

  .catalog-item__aside {
    grid-area: aside;
    align-items: flex-start;
    text-align: left;
  }

  .catalog-item__meta {
    display: none;
  }

  /* One line per filter group on a phone, scrolled sideways, so the first
     work is not a whole screen down (2026-10-06). */
  .catalog-filters .genre-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .catalog-filters .genre-filters > * {
    flex: none;
  }

  .catalog-item__updated {
    font-size: 0.75rem;
  }

  .catalog-item__cover {
    grid-area: cover;
    width: 58px;
    height: 78px;
  }

  .novel-header {
    grid-template-columns: 1fr;
    gap: var(--moossin-space-3);
    padding-bottom: var(--moossin-space-4);
  }

  .novel-header__cover {
    width: min(58vw, 210px);
  }


  .search-form {
    grid-template-columns: 1fr;
  }

  .search-summary,
  .reader-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .search-summary span {
    margin-left: 0;
  }

  .result-list a {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .reader-controls {
    justify-content: flex-start;
  }

  .chapter-body {
    margin-block: var(--moossin-space-3) var(--moossin-space-4);
  }

  .chapter-nav {
    flex-direction: column;
  }

  .chapter-nav > span,
  .chapter-nav > span:last-child {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* Only hover and focus feedback exists, and even that is dropped on request. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* mooss-hero:begin */
/* MOOSSin home hero carousel (owner, 2026-10-06: the novel and blog homes rotate their own content
 * in the deep-space band, as the portal home has since 2026-10-03). This block is byte-identical in
 * the blog and the novel between the mooss-hero markers, and both test suites compare its SHA-256.
 * The band, the planet and every carousel measure copy the portal's `.home .hero-band` rules
 * (www `static/portal.css`), so the three homes look alike.
 *
 * CSS only: the page needs no script. All slides share one grid cell, so the band is as tall as the
 * tallest slide and nothing jumps; the one on show sits on top and takes the clicks. A hidden radio
 * group is the control: "auto" (checked on load) rotates, seven seconds a slide, and choosing a dot
 * shows that slide and stops the rotation (WCAG 2.2.2). The list item switches which slide is on
 * show in one step and its body fades inside that window, so a pause never freezes a half-faded
 * slide. A resting mouse or keyboard focus on a dot pauses every layer; focus on a link inside a
 * slide shows that slide. Only opacity changes. The rotation runs for every visitor, reduced motion
 * included (the owner's decision for the portal, 2026-10-03; see the end of this block).
 *
 * Two to five slides: `mooss-hero--N` on the carousel picks the cycle and the keyframes. A slide's
 * delay counts back from the end of the list, so it needs no rule per count (the first slide's
 * delay is one whole cycle, which is the same as none). One slide carries no radios or dots. */
.mooss-hero { position: relative; overflow: hidden; padding: 1.75rem max(1rem, calc((100% - 64rem) / 2)) 1.5rem; border-radius: 0 0 2rem 2rem; color: #fff; text-align: center; background-image: var(--moossin-stars), linear-gradient(160deg, var(--moossin-space-deep) 0%, var(--moossin-space) 40%, var(--moossin-teal-deep) 78%, var(--moossin-teal) 100%); }
.mooss-hero::before { content: ""; position: absolute; right: -13rem; bottom: -7rem; width: 36rem; height: 14rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); transform: rotate(-10deg); pointer-events: none; }
.mooss-hero::after { content: ""; position: absolute; right: -7rem; bottom: -14rem; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--moossin-teal-light), var(--moossin-teal) 42%, var(--moossin-teal-deep) 72%, var(--moossin-space) 100%); box-shadow: 0 0 60px rgba(63, 154, 139, 0.35); pointer-events: none; }
.mooss-hero > * { position: relative; z-index: 1; }
.mooss-hero .mooss-hero__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mooss-hero .mooss-hero__carousel { position: relative; }
/* The radios sit by the dot row: a browser scrolls a focused control into view, and one parked at
 * the top of the carousel would make the page jump there whenever a dot is pressed. */
.mooss-hero .mooss-hero__pick { position: absolute; left: 50%; bottom: 22px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.mooss-hero .mooss-hero__slides { display: grid; margin: 0; padding: 0; list-style: none; }
.mooss-hero .mooss-hero__slide { grid-area: 1 / 1; display: grid; min-width: 0; opacity: 0; z-index: 0; }
.mooss-hero .mooss-hero__slide:first-child { opacity: 1; z-index: 1; }
.mooss-hero .mooss-hero__body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.mooss-hero .mooss-hero__kind { margin: 0 0 var(--moossin-space-1); color: var(--moossin-star); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; }
.mooss-hero .mooss-hero__slide h2 { max-width: 34em; margin: 0 0 var(--moossin-space-2); font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem); font-weight: 800; line-height: 1.35; letter-spacing: normal; text-wrap: balance; overflow-wrap: anywhere; }
.mooss-hero .mooss-hero__slide h2 a { color: #fff; text-decoration: none; }
.mooss-hero .mooss-hero__slide h2 a:hover { color: #fff; text-decoration: underline; }
/* A title with natural pauses breaks at its punctuation and spaces instead of splitting a Chinese
 * word at the line end; the page adds the class only when every phrase fits a phone line. */
.mooss-hero .mooss-hero__slide h2.mooss-hero__phrases { word-break: keep-all; overflow-wrap: anywhere; }
.mooss-hero .mooss-hero__summary { max-width: var(--moossin-measure); margin: 0 0 var(--moossin-space-3); color: rgba(255, 255, 255, 0.92); line-height: 1.6; text-wrap: balance; }
.mooss-hero .mooss-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--moossin-space-2) var(--moossin-space-3); margin: 0; }
.mooss-hero .mooss-hero__button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--moossin-space-4); border-radius: 999px; font-weight: 700; text-decoration: none; }
.mooss-hero .mooss-hero__button--light { background: #fff; color: var(--moossin-space-deep); }
.mooss-hero .mooss-hero__button--light:hover { background: var(--moossin-mint); color: var(--moossin-space-deep); }
.mooss-hero .mooss-hero__button--ghost { border: 2px solid rgba(255, 255, 255, 0.85); color: #fff; }
.mooss-hero .mooss-hero__button--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
/* The moss focus ring measures 2.79:1 on space-deep; white keeps it visible. */
.mooss-hero a:focus-visible { outline-color: #fff; }
.mooss-hero--2 { --mooss-hero-cycle: 14s; --mooss-hero-rotate: mooss-hero-rotate-2; --mooss-hero-fade: mooss-hero-fade-2; --mooss-hero-dot: mooss-hero-dot-2; }
.mooss-hero--3 { --mooss-hero-cycle: 21s; --mooss-hero-rotate: mooss-hero-rotate-3; --mooss-hero-fade: mooss-hero-fade-3; --mooss-hero-dot: mooss-hero-dot-3; }
.mooss-hero--4 { --mooss-hero-cycle: 28s; --mooss-hero-rotate: mooss-hero-rotate-4; --mooss-hero-fade: mooss-hero-fade-4; --mooss-hero-dot: mooss-hero-dot-4; }
.mooss-hero--5 { --mooss-hero-cycle: 35s; --mooss-hero-rotate: mooss-hero-rotate-5; --mooss-hero-fade: mooss-hero-fade-5; --mooss-hero-dot: mooss-hero-dot-5; }
/* Each slide and its dot start one seven-second window after the one before. */
.mooss-hero .mooss-hero__slide:nth-last-child(1), .mooss-hero .mooss-hero__dots label:nth-last-child(1) { --mooss-hero-delay: -7s; }
.mooss-hero .mooss-hero__slide:nth-last-child(2), .mooss-hero .mooss-hero__dots label:nth-last-child(2) { --mooss-hero-delay: -14s; }
.mooss-hero .mooss-hero__slide:nth-last-child(3), .mooss-hero .mooss-hero__dots label:nth-last-child(3) { --mooss-hero-delay: -21s; }
.mooss-hero .mooss-hero__slide:nth-last-child(4), .mooss-hero .mooss-hero__dots label:nth-last-child(4) { --mooss-hero-delay: -28s; }
.mooss-hero .mooss-hero__slide:nth-last-child(5), .mooss-hero .mooss-hero__dots label:nth-last-child(5) { --mooss-hero-delay: -35s; }
.mooss-hero__pick--auto:checked ~ .mooss-hero__slides .mooss-hero__slide { animation: var(--mooss-hero-rotate) var(--mooss-hero-cycle) step-end var(--mooss-hero-delay, 0s) infinite; }
.mooss-hero__pick--auto:checked ~ .mooss-hero__slides .mooss-hero__body { animation: var(--mooss-hero-fade) var(--mooss-hero-cycle) var(--mooss-hero-delay, 0s) infinite; }
@keyframes mooss-hero-rotate-2 { 0% { opacity: 1; z-index: 2; } 50%, 100% { opacity: 0; z-index: 0; } }
@keyframes mooss-hero-rotate-3 { 0% { opacity: 1; z-index: 2; } 33.333%, 100% { opacity: 0; z-index: 0; } }
@keyframes mooss-hero-rotate-4 { 0% { opacity: 1; z-index: 2; } 25%, 100% { opacity: 0; z-index: 0; } }
@keyframes mooss-hero-rotate-5 { 0% { opacity: 1; z-index: 2; } 20%, 100% { opacity: 0; z-index: 0; } }
/* The body fades in and out over 0.525 s at each end of its window, as on the portal. */
@keyframes mooss-hero-fade-2 { 0% { opacity: 0; } 3.75%, 46.25% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mooss-hero-fade-3 { 0% { opacity: 0; } 2.5%, 30.833% { opacity: 1; } 33.333%, 100% { opacity: 0; } }
@keyframes mooss-hero-fade-4 { 0% { opacity: 0; } 1.875%, 23.125% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes mooss-hero-fade-5 { 0% { opacity: 0; } 1.5%, 18.5% { opacity: 1; } 20%, 100% { opacity: 0; } }
.mooss-hero__pick:not(.mooss-hero__pick--auto):checked ~ .mooss-hero__slides .mooss-hero__slide { opacity: 0; z-index: 0; }
.mooss-hero__pick--1:checked ~ .mooss-hero__slides .mooss-hero__slide:nth-child(1),
.mooss-hero__pick--2:checked ~ .mooss-hero__slides .mooss-hero__slide:nth-child(2),
.mooss-hero__pick--3:checked ~ .mooss-hero__slides .mooss-hero__slide:nth-child(3),
.mooss-hero__pick--4:checked ~ .mooss-hero__slides .mooss-hero__slide:nth-child(4),
.mooss-hero__pick--5:checked ~ .mooss-hero__slides .mooss-hero__slide:nth-child(5) { opacity: 1; z-index: 2; }
@media (hover: hover) {
  .mooss-hero .mooss-hero__carousel:hover .mooss-hero__slides .mooss-hero__slide,
  .mooss-hero .mooss-hero__carousel:hover .mooss-hero__slides .mooss-hero__body,
  .mooss-hero .mooss-hero__carousel:hover .mooss-hero__dots .mooss-hero__dot { animation-play-state: paused; }
  .mooss-hero .mooss-hero__carousel:hover .mooss-hero__body { opacity: 1 !important; }
}
.mooss-hero .mooss-hero__pick:focus-visible ~ .mooss-hero__slides .mooss-hero__slide,
.mooss-hero .mooss-hero__pick:focus-visible ~ .mooss-hero__slides .mooss-hero__body,
.mooss-hero .mooss-hero__pick:focus-visible ~ .mooss-hero__dots .mooss-hero__dot { animation-play-state: paused; }
.mooss-hero .mooss-hero__pick:focus-visible ~ .mooss-hero__slides .mooss-hero__body { opacity: 1 !important; }
/* Focus on a link inside a slide: every layer drops its animation in the same rule set, so none of
 * them can restart on its own clock afterwards. */
.mooss-hero .mooss-hero__carousel .mooss-hero__slides:focus-within .mooss-hero__slide:nth-child(n) { animation: none; opacity: 0; z-index: 0; }
.mooss-hero .mooss-hero__carousel .mooss-hero__slides .mooss-hero__slide:nth-child(n):focus-within { opacity: 1; z-index: 3; }
.mooss-hero .mooss-hero__carousel .mooss-hero__slides:focus-within .mooss-hero__body { animation: none; opacity: 1; }
.mooss-hero .mooss-hero__dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: fit-content; margin: var(--moossin-space-1) auto 0; }
.mooss-hero .mooss-hero__dots label { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; border-radius: 999px; cursor: pointer; }
/* The dot of the slide on show is a filled disc and the others are rings, so the state is a shape
 * and not only a colour. */
.mooss-hero .mooss-hero__dot { width: 0.7rem; height: 0.7rem; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; }
.mooss-hero__pick--auto:checked ~ .mooss-hero__dots label:nth-child(1) .mooss-hero__dot { border-color: var(--moossin-star); border-width: 0.35rem; background: var(--moossin-star); }
.mooss-hero__pick--auto:checked ~ .mooss-hero__dots .mooss-hero__dot { animation: var(--mooss-hero-dot) var(--mooss-hero-cycle) step-end var(--mooss-hero-delay, 0s) infinite; }
@keyframes mooss-hero-dot-2 { 0% { border-color: var(--moossin-star); border-width: 0.35rem; background: var(--moossin-star); } 50%, 100% { border-color: rgba(255, 255, 255, 0.85); border-width: 2px; background: transparent; } }
@keyframes mooss-hero-dot-3 { 0% { border-color: var(--moossin-star); border-width: 0.35rem; background: var(--moossin-star); } 33.333%, 100% { border-color: rgba(255, 255, 255, 0.85); border-width: 2px; background: transparent; } }
@keyframes mooss-hero-dot-4 { 0% { border-color: var(--moossin-star); border-width: 0.35rem; background: var(--moossin-star); } 25%, 100% { border-color: rgba(255, 255, 255, 0.85); border-width: 2px; background: transparent; } }
@keyframes mooss-hero-dot-5 { 0% { border-color: var(--moossin-star); border-width: 0.35rem; background: var(--moossin-star); } 20%, 100% { border-color: rgba(255, 255, 255, 0.85); border-width: 2px; background: transparent; } }
.mooss-hero__pick--1:checked ~ .mooss-hero__dots label:nth-child(1) .mooss-hero__dot,
.mooss-hero__pick--2:checked ~ .mooss-hero__dots label:nth-child(2) .mooss-hero__dot,
.mooss-hero__pick--3:checked ~ .mooss-hero__dots label:nth-child(3) .mooss-hero__dot,
.mooss-hero__pick--4:checked ~ .mooss-hero__dots label:nth-child(4) .mooss-hero__dot,
.mooss-hero__pick--5:checked ~ .mooss-hero__dots label:nth-child(5) .mooss-hero__dot { border-color: var(--moossin-star); border-width: 0.35rem; background: var(--moossin-star); }
/* While a link inside a slide has focus, no dot runs on a timer: they all go back to rings, and the
 * dot of the slide that holds the focus is the filled one (that rule needs `:has()`). */
.mooss-hero .mooss-hero__carousel .mooss-hero__slides:focus-within ~ .mooss-hero__dots label .mooss-hero__dot { animation: none; border-color: rgba(255, 255, 255, 0.85); border-width: 2px; background: transparent; }
.mooss-hero .mooss-hero__carousel .mooss-hero__slides:has(.mooss-hero__slide:nth-child(1):focus-within) ~ .mooss-hero__dots label:nth-child(1) .mooss-hero__dot,
.mooss-hero .mooss-hero__carousel .mooss-hero__slides:has(.mooss-hero__slide:nth-child(2):focus-within) ~ .mooss-hero__dots label:nth-child(2) .mooss-hero__dot,
.mooss-hero .mooss-hero__carousel .mooss-hero__slides:has(.mooss-hero__slide:nth-child(3):focus-within) ~ .mooss-hero__dots label:nth-child(3) .mooss-hero__dot,
.mooss-hero .mooss-hero__carousel .mooss-hero__slides:has(.mooss-hero__slide:nth-child(4):focus-within) ~ .mooss-hero__dots label:nth-child(4) .mooss-hero__dot,
.mooss-hero .mooss-hero__carousel .mooss-hero__slides:has(.mooss-hero__slide:nth-child(5):focus-within) ~ .mooss-hero__dots label:nth-child(5) .mooss-hero__dot { border-color: var(--moossin-star); border-width: 0.35rem; background: var(--moossin-star); }
/* The radios are invisible, so the dot they belong to shows their focus; the auto radio has no
 * visible label, so while it has keyboard focus the whole dot row shows it. */
.mooss-hero__pick--1:focus-visible ~ .mooss-hero__dots label:nth-child(1),
.mooss-hero__pick--2:focus-visible ~ .mooss-hero__dots label:nth-child(2),
.mooss-hero__pick--3:focus-visible ~ .mooss-hero__dots label:nth-child(3),
.mooss-hero__pick--4:focus-visible ~ .mooss-hero__dots label:nth-child(4),
.mooss-hero__pick--5:focus-visible ~ .mooss-hero__dots label:nth-child(5) { outline: 3px solid #fff; outline-offset: -4px; }
.mooss-hero__pick--auto:focus-visible ~ .mooss-hero__dots { outline: 3px solid #fff; outline-offset: 2px; border-radius: 999px; }
/* The rotation runs when a visitor asks for reduced motion: each site's own rule shortens every
 * animation to nothing with `!important`, and these selectors outrank its `*`. Only opacity
 * changes, and a dot still stops it while a resting mouse or keyboard focus pauses it. */
@media (prefers-reduced-motion: reduce) {
  .mooss-hero .mooss-hero__slide,
  .mooss-hero .mooss-hero__body,
  .mooss-hero .mooss-hero__dot { animation-duration: var(--mooss-hero-cycle) !important; animation-iteration-count: infinite !important; }
}
@media (max-width: 64rem) {
  .mooss-hero { padding-block: 1.5rem 2.75rem; border-radius: 0 0 1.5rem 1.5rem; }
  .mooss-hero::before { right: -12rem; bottom: -7rem; width: 28rem; height: 10.5rem; }
  .mooss-hero::after { right: -6rem; bottom: -15.5rem; width: 18rem; height: 18rem; }
}
/* mooss-hero:end */

/* mooss-bar:begin */
/* MOOSSin one-row header (owner decision 2026-10-05, plan A): the brand, the five sections with the
 * current section's own menu behind a chevron, and a few tools, in one row; one "選單" drawer below
 * 960px. Shared verbatim by all five sections; every rule is scoped to .mooss-bar and resets what a
 * section stylesheet could leak in. Colours are the portal's palette (ink 14.6:1, muted 7.7:1 and
 * moss 6.1:1 on the bar). Change it in every section at once, never in one. */
.mooss-bar {
  position: relative;
  z-index: 40;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #dfe5dc;
  background: #fbfcfa;
  color: #1c221d;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
}

.mooss-bar *,
.mooss-bar *::before,
.mooss-bar *::after {
  box-sizing: border-box;
}

.mooss-bar a {
  color: inherit;
  text-decoration: none;
}

.mooss-bar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mooss-bar li {
  margin: 0;
  padding: 0;
}

.mooss-bar summary {
  list-style: none;
  cursor: pointer;
}

.mooss-bar summary::-webkit-details-marker {
  display: none;
}

.mooss-bar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1180px;
  min-height: 56px;
  margin: 0 auto;
  padding: 0 20px;
}

.mooss-bar__brand {
  flex: none;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mooss-bar__here {
  display: none;
}

.mooss-bar__sections {
  flex: 1 1 auto;
  min-width: 0;
}

.mooss-bar__list {
  display: flex;
  align-items: center;
  gap: 2px;
}

.mooss-bar__list > li {
  position: relative;
  display: flex;
  align-items: center;
}

.mooss-bar__list a,
.mooss-bar__tools a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  color: #4a544b;
  white-space: nowrap;
}

.mooss-bar__list a:hover,
.mooss-bar__tools a:hover {
  background: #f1f4ef;
  color: #1c221d;
}

.mooss-bar__list > li > a[aria-current="page"] {
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 -2px 0 #2f6b3f;
  color: #1c221d;
  font-weight: 700;
}

.mooss-bar__more > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
  margin-left: -4px;
  border-radius: 6px;
  color: #4a544b;
}

.mooss-bar__more > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.mooss-bar__more[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.mooss-bar__more > summary:hover {
  background: #f1f4ef;
  color: #1c221d;
}

.mooss-bar__sub {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  padding: 6px;
  border: 1px solid #dfe5dc;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(28, 34, 29, 0.12);
}

.mooss-bar__sub a {
  display: flex;
  width: 100%;
  border-radius: 6px;
  color: #1c221d;
}

.mooss-bar__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.mooss-bar__drawer {
  display: none;
}

.mooss-bar a:focus-visible,
.mooss-bar summary:focus-visible {
  outline: 2px solid #2f6b3f;
  outline-offset: -2px;
}

@media (max-width: 959px) {
  .mooss-bar__sections,
  .mooss-bar__tools {
    display: none;
  }

  .mooss-bar__inner {
    gap: 8px;
    padding: 0 16px;
  }

  .mooss-bar__here {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #4a544b;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mooss-bar__drawer {
    display: block;
    flex: none;
    margin-left: auto;
  }

  .mooss-bar__drawer > summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #c9d2c5;
    border-radius: 8px;
    color: #1c221d;
  }

  .mooss-bar__drawer[open] > summary {
    background: #f1f4ef;
  }

  .mooss-bar__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 8px 16px 16px;
    border-bottom: 1px solid #dfe5dc;
    background: #fbfcfa;
    box-shadow: 0 12px 24px rgba(28, 34, 29, 0.1);
  }

  .mooss-bar__panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 6px;
    color: #1c221d;
  }

  .mooss-bar__panel a:hover {
    background: #f1f4ef;
  }

  .mooss-bar__panel > ul > li > a[aria-current="page"] {
    box-shadow: inset 3px 0 0 #2f6b3f;
    font-weight: 700;
  }

  .mooss-bar__panel .mooss-bar__sub-m a {
    padding-left: 26px;
    color: #4a544b;
  }

  .mooss-bar__panel-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dfe5dc;
  }
}
/* mooss-bar:end */