:root {
  --ink: #080404;
  --deep: #040202;
  --surface: #140807;
  --paper: #cbc4ba;
  --muted: #817874;
  --oxide: #57191c;
  --oxide-light: #81292d;
  --green: #36532d;
  --green-light: #527843;
  --blue: #3f6680;
  --gold: #927349;
  --rule: rgba(126, 50, 45, .28);
  --soft-rule: rgba(203, 196, 186, .075);
}

html { scroll-behavior: auto; background: var(--ink); }

body,
body.page-home,
body.page-reading,
body.page-vert,
body.page-portal,
body.page-rvb {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: block;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% -15%, rgba(89, 19, 18, .18), transparent 46rem),
    var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.68;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  animation: rouge-grain-settle 3s steps(6, end) 1 forwards;
  will-change: opacity, background-position;
}

@keyframes rouge-grain-settle {
  0% { background-position: 0 0; opacity: .11; }
  20% { background-position: 7px -5px; opacity: .095; }
  40% { background-position: -6px 4px; opacity: .08; }
  60% { background-position: 4px 7px; opacity: .068; }
  80% { background-position: -3px -2px; opacity: .055; }
  100% { background-position: 0 0; opacity: .045; }
}

body.grain-settled::before {
  animation: none;
  background-position: 0 0;
  opacity: .045;
  will-change: auto;
}

a { color: inherit; }

/* Sommaire de ROUGE */
.page-home .toc-part { margin: 0 0 clamp(3rem, 6vw, 5rem); }

.page-home .toc-part-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 .5rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--rule);
  color: var(--gold);
  font: .65rem/1.4 Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.page-home .toc-chapter {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: baseline;
  gap: .65rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--soft-rule);
  color: var(--paper);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.25;
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}

.page-home .toc-chapter:hover,
.page-home .toc-chapter:focus-visible {
  padding-left: .45rem;
  color: var(--oxide-light);
}

.page-home .toc-chapter-num {
  width: auto;
  color: var(--muted);
  font: .62rem/1.5 Arial, sans-serif;
  letter-spacing: .13em;
}

.page-home .footer a:hover { color: var(--paper); }

/* Pages de lecture — marge architecturale et colonne décentrée */
.page-reading .container {
  position: relative;
  width: min(calc(100% - 3rem), 72rem);
  max-width: none;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 7rem) 0 4rem;
  display: grid;
  grid-template-columns: minmax(11rem, 18rem) minmax(0, 40rem);
  column-gap: clamp(3rem, 8vw, 8rem);
  justify-content: center;
  align-items: start;
}

.page-reading .container::before {
  content: "M7 × BRAISE";
  position: absolute;
  top: clamp(12rem, 19vw, 18rem);
  left: 0;
  color: rgba(181, 154, 98, .48);
  font: .6rem/1 Arial, sans-serif;
  letter-spacing: .25em;
  writing-mode: vertical-rl;
}

.page-reading .breadcrumb {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 clamp(4rem, 8vw, 7rem);
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font: .64rem/1.5 Arial, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.page-reading .breadcrumb a { color: var(--paper); opacity: .72; text-decoration: none; }
.page-reading .breadcrumb a:hover { color: var(--oxide-light); opacity: 1; }
.page-reading.accent-vert .breadcrumb a:hover { color: var(--green-light); }
.page-reading .breadcrumb .sep { margin: 0 .65rem; color: var(--gold); opacity: .55; }

.page-reading .chapter-num,
.page-reading .chapter-number {
  grid-column: 1;
  margin: .45rem 0 0;
  color: var(--muted);
  font: .65rem/1.5 Arial, sans-serif;
  letter-spacing: .24em;
  text-align: right;
  text-transform: uppercase;
}

.page-reading h1 {
  grid-column: 2;
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  color: var(--oxide-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 5.8vw, 5.4rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.045em;
  text-align: left;
}

.page-reading.accent-vert h1 { color: var(--green-light); }
.page-reading .subtitle,
.page-reading .year {
  grid-column: 2;
  margin: -3rem 0 3rem;
  color: var(--muted);
  font: .65rem/1.5 Arial, sans-serif;
  letter-spacing: .16em;
  text-align: left;
  text-transform: uppercase;
}

.page-reading .container > p,
.page-reading .separator,
.page-reading .end-separator,
.page-reading .nav-chapters,
.page-reading .footer,
.page-reading .credits,
.page-reading .ui-display,
.page-reading .opening-image,
.page-reading .final-image,
.page-reading .header-image,
.page-reading .closing-image,
.page-reading .chapter-image,
.page-reading .marv-image {
  grid-column: 2;
}

.page-reading .container > p {
  width: 100%;
  margin: 0 0 .85em;
  color: var(--paper);
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  line-height: 1.68;
}

.page-reading em { color: #eee8df; }
.page-reading .separator { margin: 2.7rem 0; color: var(--gold); opacity: .48; }
.page-reading .end-separator { margin-top: 5rem; border-color: var(--rule); color: var(--muted); }
.page-reading .nav-chapters { margin-top: 4rem; border-top: 1px solid var(--rule); }
.page-reading .nav-chapters a,
.page-reading .footer a { color: var(--muted); }
.page-reading .nav-chapters a:hover,
.page-reading .footer a:hover { color: var(--oxide-light); }
.page-reading.accent-vert .nav-chapters a:hover,
.page-reading.accent-vert .footer a:hover { color: var(--green-light); }

.page-reading .opening-image,
.page-reading .final-image,
.page-reading .header-image,
.page-reading .closing-image,
.page-reading .chapter-image,
.page-reading .marv-image {
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin: 0 0 3rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .22);
}

.page-reading .final-image,
.page-reading .closing-image { margin-top: 3rem; }
.page-reading .footer { margin-top: 3rem; border-color: var(--rule); }
.page-reading > .site-version { margin: 0; padding: 1.25rem 1.5rem 2rem; border-top: 1px solid var(--soft-rule); }

/* Portails BLEU et RVB */
.page-portal .container,
.page-rvb .container {
  width: min(calc(100% - 3rem), 72rem);
  max-width: none;
  min-height: calc(100svh - 6rem);
  margin: 0 auto;
  padding: 3rem 0;
  display: grid;
  grid-template-columns: minmax(18rem, .8fr) minmax(20rem, 1.2fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}
.page-portal .cover,
.page-rvb .cover {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  max-width: none;
  height: min(76svh, 48rem);
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid var(--rule);
}
.page-portal h1,
.page-rvb h1 {
  grid-column: 2;
  margin: 0;
  color: var(--blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.06em;
  text-align: left;
}
.page-rvb h1 { font-size: clamp(3rem, 6vw, 6.5rem); line-height: .95; }
.page-rvb h1 span { margin-bottom: .25rem; }
.page-portal .subtitle { grid-column: 2; margin: -5rem 0 0; text-align: left; color: var(--gold); }
.page-portal .footer,
.page-rvb .back { grid-column: 2; margin: -4rem 0 0; border-color: var(--rule); text-align: left; }
.page-portal > .site-version,
.page-rvb > .site-version { margin: 0; padding-bottom: 1.25rem; }

.site-version {
  color: var(--muted) !important;
  font: .6rem/1.4 Arial, sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .page-home .container,
  .page-vert .container { grid-template-columns: 1fr; }
  .page-home .cover,
  .page-home h1,
  .page-home .subtitle,
  .page-home .toc,
  .page-home .footer,
  .page-vert .cover,
  .page-vert h1,
  .page-vert .subtitle,
  .page-vert .tree,
  .page-vert .footer {
    grid-column: 1;
    grid-row: auto;
  }
  .page-home .toc,
  .page-vert .tree { border-left: 0; border-top: 1px solid var(--rule); }
  .page-home .cover { aspect-ratio: 2.05 / 1; object-fit: cover; }
  .page-home > .site-version,
  .page-vert > .site-version { position: static; }
  .page-vert .cover { height: min(70svh, 44rem); }
}

@media (max-width: 760px) {
  .page-reading .container {
    width: min(calc(100% - 2.5rem), 40rem);
    grid-template-columns: 1fr;
    padding-top: 2rem;
  }
  .page-reading .container::before { display: none; }
  .page-reading .breadcrumb,
  .page-reading .chapter-num,
  .page-reading .chapter-number,
  .page-reading h1,
  .page-reading .subtitle,
  .page-reading .year,
  .page-reading .container > p,
  .page-reading .separator,
  .page-reading .end-separator,
  .page-reading .nav-chapters,
  .page-reading .footer,
  .page-reading .credits,
  .page-reading .ui-display,
  .page-reading .opening-image,
  .page-reading .final-image,
  .page-reading .header-image,
  .page-reading .closing-image,
  .page-reading .chapter-image,
  .page-reading .marv-image { grid-column: 1; }
  .page-reading .breadcrumb { margin-bottom: 3rem; }
  .page-reading .chapter-num,
  .page-reading .chapter-number { margin: 0 0 .8rem; text-align: left; }
  .page-reading h1 { margin-bottom: 3rem; font-size: clamp(2.55rem, 12vw, 4rem); }
  .page-reading .subtitle,
  .page-reading .year { margin-top: -2rem; }
  .page-portal .container,
  .page-rvb .container { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2rem; }
  .page-portal .cover,
  .page-rvb .cover,
  .page-portal h1,
  .page-rvb h1,
  .page-portal .subtitle,
  .page-portal .footer,
  .page-rvb .back { grid-column: 1; grid-row: auto; margin: 0; }
  .page-portal .cover,
  .page-rvb .cover { height: min(62svh, 38rem); }
}

@media (max-width: 520px) {
  .page-home h1 { padding-inline: 1.25rem; font-size: 4.7rem; }
  .page-home .subtitle,
  .page-home .footer,
  .page-home .toc,
  .page-vert h1,
  .page-vert .subtitle,
  .page-vert .footer,
  .page-vert .tree { padding-inline: 1.25rem; }
  .page-home .toc-chapter { grid-template-columns: 2.35rem 1fr; }
  .page-vert .cover { height: 64svh; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* v0.3.1 — entrées narratives compactes */
.page-home .container,
.page-vert .container {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  display: block;
}

.landing-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(33rem, 68svh, 47rem);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--deep);
}

.landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 1, 1, .92) 0%, rgba(5, 2, 2, .70) 31%, rgba(5, 2, 2, .10) 67%),
    linear-gradient(0deg, rgba(4, 2, 2, .78), transparent 45%);
}

.landing-hero .cover,
.page-home .landing-hero .cover,
.page-vert .landing-hero .cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  transform: none;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  filter: saturate(.82) brightness(.72) contrast(1.12);
}

.landing-hero--vert .cover,
.page-vert .landing-hero--vert .cover {
  object-position: 50% 45%;
  filter: saturate(.68) brightness(.50) contrast(1.12);
}

.landing-copy {
  position: absolute;
  inset: auto auto clamp(3rem, 7vh, 5.5rem) clamp(1.5rem, 7vw, 7rem);
  width: min(calc(100% - 3rem), 44rem);
}

.page-home .landing-copy .subtitle,
.page-vert .landing-copy .subtitle {
  display: block;
  margin: 0 0 1.2rem;
  padding: 0;
  color: var(--gold);
  font: .66rem/1.5 Arial, sans-serif;
  letter-spacing: .23em;
  text-align: left;
  text-transform: uppercase;
}

.page-home .landing-copy h1,
.page-vert .landing-copy h1 {
  display: block;
  margin: 0 0 1.4rem;
  padding: 0;
  color: #852a2f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 11vw, 9rem);
  font-weight: 400;
  line-height: .76;
  letter-spacing: -.065em;
  text-align: left;
  text-indent: 0;
  text-shadow: 0 .15rem 1.2rem rgba(0, 0, 0, .75);
}

.page-vert .landing-copy h1 { color: var(--green-light); }

.synopsis {
  max-width: 40rem;
  margin: 0 0 1.8rem;
  color: #c7c0b7;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.55;
  text-shadow: 0 .1rem 1rem rgba(0, 0, 0, .85);
}

.read-button {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1.05rem .72rem;
  border: 1px solid rgba(133, 42, 47, .8);
  color: #d1c9bf;
  background: rgba(35, 8, 9, .58);
  font: .66rem/1.4 Arial, sans-serif;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .2s, background .2s, color .2s;
}

.read-button:hover,
.read-button:focus-visible {
  border-color: #a33a3f;
  color: #f0e9df;
  background: rgba(73, 17, 20, .78);
}

.landing-hero--vert .read-button {
  border-color: rgba(82, 120, 67, .78);
  background: rgba(12, 30, 12, .56);
}

.landing-hero--vert .read-button:hover,
.landing-hero--vert .read-button:focus-visible {
  border-color: #648f51;
  background: rgba(24, 56, 21, .72);
}

.page-home .toc {
  width: min(calc(100% - 3rem), 72rem);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .8fr);
  gap: clamp(3rem, 8vw, 8rem);
  border: 0;
  background: transparent;
}

.page-home .toc::before { display: none; content: none; }
.page-home .toc-part { margin: 0; }
.page-home .toc-part:last-child { grid-column: 1 / -1; }

.page-home .footer,
.page-vert .footer {
  width: min(calc(100% - 3rem), 72rem);
  margin: 0 auto;
  padding: 2rem 0 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  background: transparent;
  font: .62rem/1.5 Arial, sans-serif;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.page-home .footer a,
.page-vert .footer a { margin: 0; }

.page-home > .site-version,
.page-vert > .site-version {
  position: static;
  margin: 0;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--soft-rule);
}

.page-vert .tree {
  width: min(calc(100% - 3rem), 72rem);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3.5rem);
  overflow-x: auto;
  border: 0;
  color: var(--paper);
  font: clamp(.79rem, 1.25vw, .95rem)/1.9 "Courier New", monospace;
  background:
    radial-gradient(circle at 8% 5%, rgba(54, 83, 45, .10), transparent 22rem),
    linear-gradient(145deg, rgba(15, 12, 10, .94), rgba(5, 4, 4, .98));
  box-shadow: inset 0 0 0 1px rgba(82, 120, 67, .15);
}

.page-reading h1 { color: var(--oxide-light); }
.page-reading.accent-vert h1 { color: var(--green-light); }

@media (max-width: 820px) {
  .landing-hero {
    height: auto;
    min-height: 39rem;
    display: flex;
    align-items: flex-end;
  }
  .landing-hero::after {
    background:
      linear-gradient(0deg, rgba(3, 1, 1, .96) 0%, rgba(4, 2, 2, .70) 48%, rgba(4, 2, 2, .08) 100%);
  }
  .landing-copy {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 8rem 1.35rem 2.5rem;
  }
  .page-home .landing-copy h1,
  .page-vert .landing-copy h1 { font-size: clamp(4.7rem, 24vw, 7rem); }
  .synopsis { font-size: 1rem; }
  .page-home .toc {
    grid-template-columns: 1fr;
    gap: 4rem;
    width: min(calc(100% - 2.5rem), 40rem);
  }
  .page-home .toc-part:last-child { grid-column: 1; }
  .page-home .footer,
  .page-vert .footer,
  .page-vert .tree { width: min(calc(100% - 2.5rem), 40rem); }
  .page-vert .tree { padding-inline: 1rem; }
}

@media (max-width: 820px) {
  .page-vert .landing-hero {
    display: block;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .page-vert .landing-hero::after { display: none; }

  .page-vert .landing-hero .cover {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    width: 100%;
    height: clamp(13.5rem, 56vw, 23rem);
    object-fit: cover;
    object-position: 50% 38%;
  }

  .page-vert .landing-copy {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    padding: 2.5rem 1.35rem 3rem;
    background:
      radial-gradient(circle at 12% 0%, rgba(47, 78, 38, .16), transparent 22rem),
      var(--deep);
  }
}

/* v0.3.3 — identités chromatiques des portails */
.page-vert {
  background:
    radial-gradient(circle at 48% -12%, rgba(52, 103, 45, .30), transparent 46rem),
    radial-gradient(circle at 8% 52%, rgba(21, 62, 29, .18), transparent 35rem),
    #030805;
}

.landing-hero--vert::after {
  background:
    linear-gradient(90deg, rgba(1, 8, 3, .94) 0%, rgba(3, 16, 6, .74) 32%, rgba(4, 18, 8, .12) 68%),
    linear-gradient(0deg, rgba(2, 10, 4, .82), transparent 46%);
}

.page-vert .landing-copy h1 { color: #527d43; }
.page-vert .landing-copy .subtitle { color: #89a378; }
.page-vert .synopsis { color: #bec8ba; }
.page-vert .tree-root { color: #6d9a5b; }
.page-vert .tree-dir { color: #c5cec0; }
.page-vert .tree-branch { color: rgba(91, 139, 76, .56); }
.page-vert .tree-file { color: #bdc7ba; }
.page-vert .tree-file:hover,
.page-vert .footer a:hover { color: #79aa65; }
.page-vert .tree {
  background:
    radial-gradient(circle at 10% 7%, rgba(58, 105, 48, .20), transparent 28rem),
    linear-gradient(145deg, rgba(8, 20, 10, .98), rgba(2, 8, 4, .99));
  box-shadow: inset 0 0 0 1px rgba(91, 139, 76, .28);
}
.page-vert .footer { border-color: rgba(91, 139, 76, .28); }

.page-portal {
  background:
    radial-gradient(circle at 28% 12%, rgba(31, 85, 126, .34), transparent 43rem),
    radial-gradient(circle at 88% 78%, rgba(21, 55, 92, .18), transparent 34rem),
    #02070b;
}

.page-portal .cover {
  border-color: rgba(75, 125, 165, .36);
  box-shadow: 0 2rem 6rem rgba(0, 20, 38, .38);
  filter: saturate(.82) brightness(.72) contrast(1.08);
}

.page-portal h1 { color: #4e7fa4; }
.page-portal .subtitle { color: #7e9db5; }
.page-portal .footer { border-color: rgba(75, 125, 165, .30); }
.page-portal .footer a:hover { color: #6e9abe; }

.page-rvb .back { border-color: rgba(164, 57, 116, .28); }

@media (max-width: 820px) {
  .landing-hero--vert::after {
    background: linear-gradient(0deg, rgba(2, 10, 4, .97), rgba(3, 14, 6, .58) 55%, rgba(2, 8, 4, .08));
  }

  .page-vert .landing-copy {
    background:
      radial-gradient(circle at 12% 0%, rgba(55, 104, 44, .28), transparent 24rem),
      #020904;
  }
}

/* Couleur des récits VERT et matière des héros */
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='hero-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hero-noise)' opacity='.95'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

.landing-copy { z-index: 3; }

.page-reading.accent-vert {
  background:
    radial-gradient(circle at 48% -10%, rgba(48, 96, 40, .26), transparent 44rem),
    radial-gradient(circle at 92% 58%, rgba(19, 61, 27, .15), transparent 34rem),
    #020704;
}

.page-reading.accent-vert .container::before { color: rgba(96, 142, 80, .52); }
.page-reading.accent-vert .breadcrumb { border-color: rgba(91, 139, 76, .30); }
.page-reading.accent-vert .breadcrumb .sep { color: #668a58; }
.page-reading.accent-vert h1 { color: #5a864b; }
.page-reading.accent-vert .subtitle,
.page-reading.accent-vert .year { color: #82957b; }
.page-reading.accent-vert .container > p { color: #c5cbc0; }
.page-reading.accent-vert .separator { color: #5f8354; }
.page-reading.accent-vert .end-separator,
.page-reading.accent-vert .nav-chapters,
.page-reading.accent-vert .footer { border-color: rgba(91, 139, 76, .28); }
.page-reading.accent-vert .opening-image,
.page-reading.accent-vert .final-image,
.page-reading.accent-vert .header-image,
.page-reading.accent-vert .closing-image,
.page-reading.accent-vert .chapter-image,
.page-reading.accent-vert .marv-image { border-color: rgba(91, 139, 76, .34); }
.page-reading.accent-vert > .site-version { border-color: rgba(91, 139, 76, .20); }

.page-rvb {
  background:
    radial-gradient(circle at 22% 8%, rgba(177, 34, 110, .48), transparent 43rem),
    radial-gradient(circle at 86% 78%, rgba(119, 25, 133, .38), transparent 40rem),
    linear-gradient(145deg, #170310, #0d010a 62%, #150210);
}

.page-rvb .cover {
  border-color: rgba(197, 57, 135, .52);
  box-shadow: 0 2rem 7rem rgba(91, 0, 59, .54);
}

.page-rvb h1 .rouge { color: #913038; }
.page-rvb h1 .vert { color: #568348; }
.page-rvb h1 .bleu { color: #4e80a8; }
.page-rvb .back a { color: #ba6c9d; }
.page-rvb .back a:hover { color: #e160ad; }

/* BLEU — la Terre */
body.page-portal {
  background:
    radial-gradient(circle at 24% 10%, rgba(31, 116, 202, .64), transparent 44rem),
    radial-gradient(circle at 86% 82%, rgba(15, 70, 144, .48), transparent 38rem),
    linear-gradient(145deg, #041a31, #010b18 64%, #061d39);
}

.page-portal .container {
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(3rem, 8vw, 8rem);
  row-gap: 1.25rem;
  align-content: center;
}

.page-portal .cover { grid-row: 1 / 5; }
.page-portal h1 { grid-row: 1; align-self: end; }
.page-portal .subtitle { grid-row: 2; margin: 0; }

.page-portal .portal-synopsis {
  grid-column: 2;
  grid-row: 3;
  max-width: 35rem;
  margin: .6rem 0 0;
  color: #bdc9d2;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.6;
}

.page-portal .footer {
  grid-row: 4;
  margin: 1.4rem 0 0;
}

@media (max-width: 760px) {
  .page-portal .container { grid-template-rows: auto; row-gap: 1.4rem; }
  .page-portal .cover,
  .page-portal h1,
  .page-portal .subtitle,
  .page-portal .portal-synopsis,
  .page-portal .footer {
    grid-column: 1;
    grid-row: auto;
    margin: 0;
  }
  .page-portal .footer { margin-top: 1.5rem; }
}