:root {
  --paper: #eee5d5;
  --ink: #211912;
  --muted: #8f806b;
  --gild: #c49a4a;
  --shadow: #090706;
  --accent: #8f1f1f;
  --mist: rgba(255, 255, 255, .08);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--backdrop, #17120f);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(196, 154, 74, .24)), transparent 34%),
    linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 26% 70%, rgba(0, 0, 0, .22));
  mix-blend-mode: screen;
}

body::after {
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: var(--grid, 44px 44px);
  opacity: var(--grain, .35);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.2));
}

a {
  color: inherit;
}

.table-page {
  --backdrop: #0a0908;
  --glow: rgba(128, 72, 34, .2);
  --glow-x: 50%;
  --glow-y: 10%;
  padding: clamp(14px, 3vw, 42px);
}

.codex-cover {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.cover-panel {
  min-height: clamp(360px, 58vh, 620px);
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: clamp(10px, 2vw, 18px);
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(146, 176, 190, .26);
  color: var(--paper);
  background:
    radial-gradient(ellipse at 50% 47%, rgba(0, 0, 0, .28) 0 18%, rgba(0, 0, 0, .62) 42%, rgba(0, 0, 0, .9) 82%),
    linear-gradient(90deg, rgba(5, 7, 8, .92), rgba(10, 8, 9, .42) 18%, rgba(0,0,0,.14) 50%, rgba(10, 8, 9, .44) 82%, rgba(5, 7, 8, .94)),
    linear-gradient(180deg, rgba(244, 247, 230, .1), rgba(0, 0, 0, .36) 28%, rgba(0, 0, 0, .7) 100%),
    url("assets/ninth-level-cover-hero.jpg?v=cover-hero-20260802"),
    linear-gradient(180deg, #172632 0%, #06090d 44%, #010102 100%);
  background-size: cover, cover, cover, cover, cover;
  background-position: center, center, center, center 46%, center;
  background-repeat: no-repeat;
  box-shadow: 0 34px 96px rgba(0,0,0,.68), inset 28px 0 84px rgba(203, 235, 244, .14), inset -28px 0 84px rgba(203, 235, 244, .14), inset 0 0 150px rgba(0, 0, 0, .82);
  position: relative;
  overflow: hidden;
}

.cover-panel::before,
.cover-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(640px, 70%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(188, 126, 52, .8), transparent);
}

.cover-panel::before {
  top: clamp(52px, 9vw, 78px);
  background: linear-gradient(90deg, transparent, rgba(204, 235, 244, .64), rgba(112, 151, 170, .34), rgba(204, 235, 244, .64), transparent);
}

.cover-panel::after {
  bottom: clamp(28px, 5vw, 44px);
  background: linear-gradient(90deg, transparent, rgba(171, 211, 225, .44), rgba(230, 247, 250, .5), rgba(171, 211, 225, .44), transparent);
}

.author,
.edition,
.dedication,
.canto-number,
.motif,
.contents-link,
.page-turner {
  letter-spacing: .16em;
  text-transform: uppercase;
}

.author,
.edition,
.dedication {
  color: rgba(202, 225, 234, .68);
  margin: 0;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .84);
}

.cover-title {
  width: min(640px, 100%);
  margin: 0;
  display: grid;
  gap: clamp(2px, .8vw, 8px);
  position: relative;
  z-index: 1;
}

.title-article,
.title-main {
  display: block;
  color: #7f2024;
  background: linear-gradient(180deg, #9a2a2f 0%, #7f2024 48%, #4b1014 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .65px rgba(0, 0, 0, .94);
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.94))
    drop-shadow(0 0 5px rgba(84, 13, 18, .5))
    drop-shadow(0 12px 22px rgba(0,0,0,.9));
}

.title-article {
  font-size: clamp(1rem, 2.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.title-main {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.cover-foot {
  display: grid;
  gap: 6px;
  position: relative;
  z-index: 1;
  align-self: center;
  padding-bottom: 0;
}

.table-of-contents {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(12px, 2vw, 22px);
  background: rgba(238, 229, 213, .14);
  border: 1px solid rgba(238, 229, 213, .14);
  overflow: hidden;
}

.descent-reader {
  position: relative;
  margin-top: clamp(34px, 7vw, 86px);
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  background: #020202;
  overflow: hidden;
}

.descent-reader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 18% 82%, rgba(255,255,255,.035)),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.86) 52%, rgba(0,0,0,.16));
  opacity: .82;
  z-index: 0;
}

.descent-canto {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: clamp(46px, 8vw, 120px) 0;
  scroll-margin-top: 16px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.9), transparent 15%, transparent 82%, rgba(0,0,0,.92)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(196,154,74,.2)), transparent 36%),
    linear-gradient(180deg, var(--backdrop, #17120f), #030202 100%);
}

.descent-canto::before,
.descent-canto::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.descent-canto::before {
  top: 0;
  height: clamp(120px, 18vw, 260px);
  background: linear-gradient(180deg, rgba(0,0,0,.94), transparent);
}

.descent-canto::after {
  bottom: -1px;
  height: clamp(160px, 22vw, 320px);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.98));
}

.descent-canto > .leaf {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.descent-canto .canto-frontispiece {
  min-height: clamp(420px, 72vh, 720px);
}

.descent-canto.giudizio,
.canto-page.giudizio {
  background:
    url("assets/hospital-fluorescent.svg"),
    url("assets/hospital-fluorescent.svg"),
    url("assets/hospital-fluorescent.svg"),
    url("assets/hospital-fluorescent.svg"),
    url("assets/hospital-fluorescent.svg"),
    url("assets/hospital-fluorescent.svg"),
    linear-gradient(180deg, rgba(0,0,0,.36), transparent 18%, transparent 78%, rgba(0,0,0,.5)),
    radial-gradient(circle at 50% 12%, rgba(245, 252, 249, .12), transparent 32%),
    linear-gradient(90deg, rgba(0,0,0,.38), transparent 24% 76%, rgba(0,0,0,.42)),
    radial-gradient(circle, rgba(42, 56, 53, .38) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255, 255, 255, .16) 0 .8px, transparent 1.4px),
    linear-gradient(0deg, rgba(20, 32, 30, .95) 2px, transparent 2px),
    linear-gradient(90deg, rgba(20, 32, 30, .88) 2px, transparent 2px),
    linear-gradient(180deg, #b8c6c1, #92a29d 48%, #60706d 100%);
  background-size:
    430px 620px,
    430px 620px,
    430px 620px,
    430px 620px,
    430px 620px,
    430px 620px,
    auto,
    auto,
    auto,
    18px 18px,
    23px 23px,
    104px 88px,
    104px 88px,
    auto;
  background-position:
    left calc(10% - 215px) top calc(20% - 310px),
    left calc(18% - 215px) top calc(48% - 310px),
    left calc(10% - 215px) top calc(76% - 310px),
    left calc(90% - 215px) top calc(20% - 310px),
    left calc(82% - 215px) top calc(48% - 310px),
    left calc(90% - 215px) top calc(76% - 310px),
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    repeat,
    repeat,
    no-repeat;
  animation: fluorescent-flicker 7s infinite steps(1, end);
}

.descent-canto.giudizio::before {
  z-index: 0;
  height: 100%;
  background:
    url("assets/hospital-fluorescent.svg"),
    url("assets/hospital-fluorescent.svg"),
    url("assets/hospital-fluorescent.svg"),
    radial-gradient(circle, rgba(22, 36, 33, .2) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, .07) 0 .8px, transparent 1.4px),
    linear-gradient(0deg, rgba(34, 50, 47, .36) 2px, transparent 2px),
    linear-gradient(90deg, rgba(34, 50, 47, .33) 2px, transparent 2px),
    linear-gradient(180deg, rgba(0,0,0,.37), transparent 18%, transparent 78%, rgba(0,0,0,.44));
  background-size:
    430px 620px,
    430px 620px,
    430px 620px,
    18px 18px,
    23px 23px,
    104px 88px,
    104px 88px,
    auto;
  background-position:
    left calc(10% - 215px) top calc(20% - 310px),
    left calc(18% - 215px) top calc(48% - 310px),
    left calc(10% - 215px) top calc(76% - 310px),
    0 0,
    8px 10px,
    0 0,
    0 0,
    0 0;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    repeat,
    repeat,
    no-repeat;
}

.descent-canto.giudizio::after {
  top: 0;
  bottom: auto;
  z-index: 0;
  height: 100%;
  background:
    url("assets/hospital-fluorescent.svg"),
    url("assets/hospital-fluorescent.svg"),
    url("assets/hospital-fluorescent.svg");
  background-size:
    430px 620px,
    430px 620px,
    430px 620px;
  background-position:
    left calc(10% - 215px) top calc(34% - 310px),
    left calc(18% - 215px) top calc(62% - 310px),
    left calc(10% - 215px) top calc(90% - 310px);
  background-repeat: no-repeat;
  transform: scaleX(-1);
}

@keyframes fluorescent-flicker {
  0%, 88%, 94%, 100% { filter: brightness(1); }
  90% { filter: brightness(.84); }
  92% { filter: brightness(1.12); }
}

.descent-canto:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript,
.canto-page:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript {
  position: relative;
  overflow: hidden;
  --flash-x: 50%;
  --flash-y: 18%;
  --flash-core: 120px;
  --flash-falloff: 250px;
  --flash-darkness: .66;
  --flash-edge: .62;
  --flash-glow: .12;
  --flash-light-r: 255;
  --flash-light-g: 248;
  --flash-light-b: 207;
  --reader-light-anchor: var(--flash-x) var(--flash-y);
  transition: --flash-core .2s ease, --flash-falloff .2s ease, --flash-darkness .2s ease, --flash-edge .2s ease, --flash-glow .2s ease;
}

.descent-canto:is(.cunicoli) .manuscript,
.canto-page:is(.cunicoli) .manuscript {
  --flash-darkness: .52;
  --flash-edge: .46;
  --flash-glow: .16;
}

.descent-canto:is(.secare) .manuscript,
.canto-page:is(.secare) .manuscript {
  --flash-darkness: .62;
  --flash-edge: .56;
  --flash-glow: .14;
}

.descent-canto:is(.discendenza) .manuscript,
.canto-page:is(.discendenza) .manuscript {
  --flash-darkness: .7;
  --flash-edge: .66;
  --flash-glow: .12;
}

.descent-canto:is(.ignoto) .manuscript,
.canto-page:is(.ignoto) .manuscript {
  --flash-darkness: .78;
  --flash-edge: .74;
  --flash-glow: .1;
}

.descent-canto:is(.brutalita) .manuscript,
.canto-page:is(.brutalita) .manuscript {
  --flash-darkness: .84;
  --flash-edge: .82;
  --flash-glow: .08;
}

.descent-canto:is(.disperazione) .manuscript,
.canto-page:is(.disperazione) .manuscript {
  --flash-darkness: .9;
  --flash-edge: .88;
  --flash-glow: .06;
}

.descent-canto:is(.lutto) .manuscript,
.canto-page:is(.lutto) .manuscript {
  --flash-darkness: .958;
  --flash-edge: .9;
  --flash-glow: .11;
  --flash-core: 62px;
  --flash-falloff: 164px;
  --lutto-warmth-anchor: var(--flash-x) calc(var(--flash-y) - 10%);
  --lutto-green-tint-anchor: var(--flash-x) calc(var(--flash-y) - 10%);
}

.descent-canto:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript::after,
.canto-page:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--reader-light-anchor), rgba(var(--flash-light-r), var(--flash-light-g), var(--flash-light-b), var(--flash-glow)), transparent var(--flash-core)),
    rgba(0, 0, 0, var(--flash-darkness));
  -webkit-mask-image: radial-gradient(circle at var(--reader-light-anchor), transparent 0 var(--flash-core), rgba(0,0,0,var(--flash-edge)) calc(var(--flash-core) + 52px), black var(--flash-falloff));
  mask-image: radial-gradient(circle at var(--reader-light-anchor), transparent 0 var(--flash-core), rgba(0,0,0,var(--flash-edge)) calc(var(--flash-core) + 52px), black var(--flash-falloff));
  mix-blend-mode: multiply;
}

.descent-canto:is(.discendenza) .manuscript.glowstick-active::after,
.canto-page:is(.discendenza) .manuscript.glowstick-active::after {
  background: rgba(0, 0, 0, var(--flash-darkness));
}

.descent-canto:is(.discendenza) .manuscript.glowstick-active::before,
.canto-page:is(.discendenza) .manuscript.glowstick-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--reader-light-anchor), rgba(118, 255, 58, .42) 0 42px, rgba(48, 190, 38, .24) 98px, transparent 184px);
  mix-blend-mode: screen;
}

.descent-canto:is(.lutto) .manuscript::after,
.canto-page:is(.lutto) .manuscript::after {
  background:
    radial-gradient(circle at var(--lutto-warmth-anchor), rgba(255, 190, 48, .26) 0 30px, rgba(224, 96, 10, .34) 62px, rgba(136, 39, 4, .14) 108px, transparent 164px),
    rgba(0, 0, 0, var(--flash-darkness));
  -webkit-mask-image: radial-gradient(circle at var(--reader-light-anchor), transparent 0 54px, rgba(0,0,0,.32) 82px, rgba(0,0,0,.8) 126px, black 174px);
  mask-image: radial-gradient(circle at var(--reader-light-anchor), transparent 0 54px, rgba(0,0,0,.32) 82px, rgba(0,0,0,.8) 126px, black 174px);
}

.descent-canto:is(.lutto) .manuscript::before,
.canto-page:is(.lutto) .manuscript::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--reader-light-anchor), rgba(255, 214, 78, .3) 0 24px, transparent 70px),
    radial-gradient(circle at var(--reader-light-anchor), rgba(248, 116, 12, .32) 0 42px, transparent 102px),
    radial-gradient(circle at var(--reader-light-anchor), rgba(255, 164, 26, .24) 0 32px, transparent 84px),
    radial-gradient(circle at var(--reader-light-anchor), rgba(215, 78, 5, .3) 0 72px, rgba(126, 34, 3, .13) 118px, transparent 176px);
  mix-blend-mode: multiply;
  filter: blur(5px);
  animation: lutto-light-flicker .72s infinite steps(5, end);
}

@keyframes lutto-light-flicker {
  0%, 100% { opacity: .48; }
  18% { opacity: .96; }
  38% { opacity: .58; }
  58% { opacity: 1; }
  78% { opacity: .42; }
}

.descent-canto:is(.lutto) .manuscript.green-flame-active::after,
.canto-page:is(.lutto) .manuscript.green-flame-active::after {
  background:
    radial-gradient(ellipse 58px 132px at var(--lutto-green-tint-anchor), rgba(72, 238, 68, .32) 0 40px, rgba(12, 132, 42, .18) 88px, transparent 142px),
    rgba(0, 0, 0, .982);
  -webkit-mask-image: radial-gradient(ellipse 58px 142px at var(--reader-light-anchor), transparent 0 40px, rgba(0,0,0,.58) 84px, black 142px);
  mask-image: radial-gradient(ellipse 58px 142px at var(--reader-light-anchor), transparent 0 40px, rgba(0,0,0,.58) 84px, black 142px);
}

.descent-canto:is(.lutto) .manuscript.green-flame-active::before,
.canto-page:is(.lutto) .manuscript.green-flame-active::before {
  background:
    radial-gradient(ellipse 44px 132px at var(--reader-light-anchor), rgba(180, 255, 114, .38) 0 24px, rgba(42, 220, 66, .32) 58px, rgba(5, 118, 34, .18) 104px, transparent 142px);
  mix-blend-mode: multiply;
  filter: blur(3px);
  animation: green-flame-bloom .58s infinite steps(5, end);
}

@keyframes green-flame-bloom {
  0%, 100% { opacity: .34; }
  18% { opacity: 1; }
  36% { opacity: .46; }
  58% { opacity: .94; }
  78% { opacity: .28; }
}

.descent-canto:is(.lutto) .manuscript.red-light-active::after,
.canto-page:is(.lutto) .manuscript.red-light-active::after {
  background:
    radial-gradient(circle at var(--reader-light-anchor), rgba(132, 4, 32, .82) 0 360px, rgba(82, 0, 22, .58) 760px, rgba(38, 0, 12, .38) 1120px),
    rgba(20, 0, 8, .9);
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: multiply;
  animation: none;
  filter: none;
  opacity: 1;
}

.descent-canto:is(.lutto) .manuscript.red-light-active::before,
.canto-page:is(.lutto) .manuscript.red-light-active::before {
  background:
    radial-gradient(circle at var(--reader-light-anchor), rgba(122, 0, 30, .82) 0 360px, rgba(82, 0, 22, .58) 780px, rgba(40, 0, 12, .32) 1200px);
  mix-blend-mode: multiply;
  filter: blur(18px);
  opacity: .96;
  animation: none;
}

.descent-canto:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript:hover,
.canto-page:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript:hover {
  cursor: crosshair;
}

.toc-entry {
  min-height: clamp(132px, 16vw, 184px);
  display: grid;
  grid-template-columns: minmax(70px, .42fr) minmax(210px, .95fr) minmax(260px, 1.35fr);
  grid-template-areas:
    "number title opening"
    "number motif opening";
  align-items: center;
  justify-items: stretch;
  column-gap: clamp(18px, 4vw, 54px);
  row-gap: 8px;
  padding: clamp(20px, 4vw, 38px) clamp(20px, 5vw, 62px);
  text-decoration: none;
  text-align: left;
  color: var(--paper);
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(90deg, transparent 7%, rgba(238,229,213,.12) 7.4%, transparent 7.8% 92.2%, rgba(238,229,213,.12) 92.6%, transparent 93%),
    radial-gradient(circle at 18% 0%, var(--card-glow, rgba(196,154,74,.16)), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.42)),
    var(--card-back, #17120f);
  transition: filter .2s ease, box-shadow .2s ease;
}

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

.toc-entry:hover {
  filter: brightness(1.16);
  box-shadow: inset 0 0 0 1px rgba(238, 229, 213, .24);
}

.toc-entry > span {
  position: relative;
  z-index: 1;
}

.toc-number {
  grid-area: number;
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid color-mix(in srgb, var(--card-accent, var(--gild)) 42%, transparent);
  padding-right: clamp(14px, 3vw, 34px);
  font-size: clamp(.88rem, 1.5vw, 1.2rem);
  color: var(--card-accent, var(--gild));
  letter-spacing: .18em;
  text-transform: uppercase;
}

.toc-title {
  grid-area: title;
  align-self: end;
  max-width: 100%;
  padding: 0 0 12px;
  font-size: clamp(1.45rem, 3vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  position: relative;
}

.toc-title::before,
.toc-title::after {
  content: "";
  position: absolute;
  left: 0;
  width: min(180px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-accent, var(--gild)), transparent);
  opacity: .7;
}

.toc-title::before {
  display: none;
}

.toc-title::after {
  bottom: 0;
}

.toc-motif {
  grid-area: motif;
  align-self: start;
  font-size: .72rem;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(238, 229, 213, .62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toc-opening {
  grid-area: opening;
  align-self: center;
  min-width: 0;
  max-height: 5.1em;
  padding: 0 0 0 clamp(18px, 3vw, 38px);
  border-top: 0;
  border-left: 1px solid rgba(238, 229, 213, .14);
  font-size: clamp(.88rem, 1.2vw, 1.02rem);
  line-height: 1.55;
  color: rgba(238, 229, 213, .66);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--gild));
  box-shadow: 0 0 18px var(--accent);
}

.contents-link {
  position: fixed;
  z-index: 9;
  top: 18px;
  left: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(238, 229, 213, .2);
  color: rgba(238, 229, 213, .72);
  background: rgba(0,0,0,.42);
  text-decoration: none;
  font-size: .68rem;
}

.gallery-toggle {
  position: fixed;
  z-index: 9;
  top: 18px;
  right: 18px;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(238, 229, 213, .22);
  color: rgba(238, 229, 213, .78);
  background: rgba(3, 3, 3, .68);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42);
  backdrop-filter: blur(7px);
  text-decoration: none;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.gallery-toggle:hover,
.gallery-toggle:focus-visible {
  border-color: rgba(196, 154, 74, .58);
  color: var(--paper);
}

.reader-gallery {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 56px);
  background:
    radial-gradient(circle at 50% 40%, rgba(84, 10, 10, .2), transparent 42%),
    rgba(0, 0, 0, .88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.reader-gallery.is-open {
  opacity: 1;
  pointer-events: auto;
}

.reader-gallery-frame {
  width: min(92vw, 560px);
  max-height: min(88vh, 920px);
  margin: 0;
}

.reader-gallery-frame img {
  display: block;
  width: 100%;
  max-height: calc(88vh - 42px);
  object-fit: contain;
  border: 1px solid rgba(238, 229, 213, .22);
  background: #050505;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .68);
}

.reader-gallery-frame figcaption {
  margin-top: 10px;
  color: rgba(238, 229, 213, .72);
  font-size: .68rem;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.gallery-close {
  position: fixed;
  top: 18px;
  right: 18px;
  min-height: 36px;
  padding: 10px 12px;
  border: 1px solid rgba(238, 229, 213, .22);
  color: rgba(238, 229, 213, .78);
  background: rgba(3, 3, 3, .68);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42);
  backdrop-filter: blur(7px);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.gallery-close:hover,
.gallery-close:focus-visible {
  border-color: rgba(196, 154, 74, .58);
  color: var(--paper);
}

.contents-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid rgba(238, 229, 213, .22);
  color: rgba(238, 229, 213, .78);
  background: rgba(3, 3, 3, .68);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42);
  backdrop-filter: blur(7px);
  text-decoration: none;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.contents-float:hover {
  border-color: rgba(196, 154, 74, .58);
  color: var(--paper);
}

.reader-effect-controls {
  position: fixed;
  right: 18px;
  bottom: 62px;
  z-index: 9;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.reader-audio-controls {
  position: fixed;
  left: 18px;
  bottom: 62px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.ambiance-toggle,
.ambient-sound-toggle,
.audiobook-toggle,
.auto-scroll-toggle,
.dark-mode-toggle {
  min-height: 36px;
  padding: 10px 12px;
  border: 1px solid rgba(238, 229, 213, .22);
  color: rgba(238, 229, 213, .78);
  background: rgba(3, 3, 3, .68);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42);
  backdrop-filter: blur(7px);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.audio-volume-control {
  width: 190px;
  min-height: 36px;
  padding: 8px 11px 9px;
  border: 1px solid rgba(238, 229, 213, .22);
  color: rgba(238, 229, 213, .78);
  background: rgba(3, 3, 3, .68);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42);
  backdrop-filter: blur(7px);
  display: grid;
  gap: 6px;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.audio-volume-control[hidden] {
  display: none;
}

.audio-volume-slider {
  width: 100%;
  accent-color: #c49a4a;
  cursor: pointer;
}

.audio-volume-text {
  white-space: nowrap;
}

.narration-cursor-light {
  position: fixed;
  left: -999px;
  top: -999px;
  z-index: 7;
  width: 230px;
  height: 118px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -52%);
  background:
    radial-gradient(ellipse at center, rgba(255, 248, 214, .38) 0 14%, rgba(216, 183, 100, .22) 42%, rgba(216, 183, 100, .1) 62%, transparent 80%);
  filter: blur(10px);
  mix-blend-mode: screen;
  transition: opacity .22s ease;
}

body.narration-cursor-active:not(.ambiance-off) .narration-cursor-light {
  opacity: .64;
}

body.narration-cursor-active.narration-cursor-native-light:not(.ambiance-off) .narration-cursor-light,
body.narration-cursor-native-light .narration-cursor-light {
  opacity: 0;
  visibility: hidden;
}

.ambiance-toggle:hover,
.ambiance-toggle[aria-pressed="false"],
.ambient-sound-toggle:hover,
.ambient-sound-toggle[aria-pressed="true"],
.audiobook-toggle:hover,
.audiobook-toggle[aria-pressed="true"],
.auto-scroll-toggle:hover,
.auto-scroll-toggle[aria-pressed="true"],
.dark-mode-toggle:hover,
.dark-mode-toggle[aria-pressed="true"] {
  border-color: rgba(196, 154, 74, .58);
  color: var(--paper);
}

body.reader-dark-mode {
  --ink: #f1efe8;
  --paper: #0a0a0a;
  --muted: #bbb4a8;
  color: #f1efe8;
  background: #050505;
}

body.reader-dark-mode::before,
body.reader-dark-mode::after {
  opacity: .22;
}

body.reader-dark-mode .leaf {
  color: #f1efe8;
}

body.reader-dark-mode .manuscript {
  color: #f3f0e8;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 9% 91%, rgba(255,255,255,.035)),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
    #050505;
  border: 1px solid rgba(255, 244, 214, .16);
  box-shadow: 0 28px 90px rgba(0,0,0,.72);
}

body.reader-dark-mode .manuscript p {
  color: #f3f0e8;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}

body.reader-dark-mode .dropcap::first-letter {
  color: #d8b764;
}

body.reader-dark-mode .canto-frontispiece {
  color: #f4ead2;
  border-color: rgba(216, 183, 100, .28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 24px 70px rgba(0,0,0,.58);
}

body.reader-dark-mode .canto-frontispiece h1,
body.reader-dark-mode .canto-frontispiece p,
body.reader-dark-mode .motif,
body.reader-dark-mode .canto-number {
  color: #f4ead2;
  text-shadow: 0 2px 12px rgba(0,0,0,.62);
}

body.reader-dark-mode .toc-entry {
  color: #f3f0e8;
}

body.reader-dark-mode .toc-motif,
body.reader-dark-mode .toc-opening {
  color: rgba(243, 240, 232, .84);
}

body.reader-dark-mode .contents-link,
body.reader-dark-mode .contents-float,
body.reader-dark-mode .gallery-toggle,
body.reader-dark-mode .gallery-close,
body.reader-dark-mode .chapter-select-toggle,
body.reader-dark-mode .chapter-select-panel,
body.reader-dark-mode .ambiance-toggle,
body.reader-dark-mode .ambient-sound-toggle,
body.reader-dark-mode .audiobook-toggle,
body.reader-dark-mode .audio-volume-control,
body.reader-dark-mode .auto-scroll-toggle,
body.reader-dark-mode .dark-mode-toggle {
  color: rgba(244, 234, 210, .86);
  background: rgba(0,0,0,.82);
  border-color: rgba(244, 234, 210, .28);
}

body.reader-dark-mode .chapter-select-link {
  color: rgba(244, 234, 210, .86);
}

body.reader-dark-mode .chapter-select-link:hover,
body.reader-dark-mode .chapter-select-link.is-current {
  color: #fff8e8;
  background: rgba(216, 183, 100, .18);
}

body.ambiance-off .descent-canto:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript::after,
body.ambiance-off .canto-page:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript::after,
body.ambiance-off .descent-canto:is(.lutto) .manuscript::before,
body.ambiance-off .canto-page:is(.lutto) .manuscript::before {
  display: none;
}

body.ambiance-off .descent-canto:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript:hover,
body.ambiance-off .canto-page:is(.cunicoli, .secare, .discendenza, .ignoto, .brutalita, .disperazione, .lutto) .manuscript:hover {
  cursor: auto;
}

.chapter-select {
  position: fixed;
  right: 18px;
  bottom: 150px;
  z-index: 10;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.chapter-select-toggle {
  min-height: 36px;
  padding: 10px 12px;
  border: 1px solid rgba(238, 229, 213, .22);
  color: rgba(238, 229, 213, .78);
  background: rgba(3, 3, 3, .68);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42);
  backdrop-filter: blur(7px);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.chapter-select-toggle:hover,
.chapter-select.is-open .chapter-select-toggle {
  border-color: rgba(196, 154, 74, .58);
  color: var(--paper);
}

.chapter-select-panel {
  width: min(230px, calc(100vw - 36px));
  max-height: min(68vh, 540px);
  display: none;
  overflow-y: auto;
  border: 1px solid rgba(238, 229, 213, .18);
  background: rgba(3, 3, 3, .88);
  box-shadow: 0 18px 54px rgba(0,0,0,.58);
  backdrop-filter: blur(10px);
}

.chapter-select.is-open .chapter-select-panel {
  display: grid;
}

.chapter-select-link {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(238, 229, 213, .08);
  color: rgba(238, 229, 213, .66);
  text-decoration: none;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chapter-select-link:last-child {
  border-bottom: 0;
}

.chapter-select-link span {
  color: rgba(196, 154, 74, .72);
  font-size: .62rem;
}

.chapter-select-link strong {
  font-weight: 600;
}

.chapter-select-link:hover,
.chapter-select-link.is-current {
  color: rgba(255, 245, 220, .96);
  background: rgba(196, 154, 74, .14);
}

.leaf {
  width: min(980px, calc(100% - 28px));
  margin: clamp(18px, 5vw, 76px) auto;
  color: var(--ink);
}

.canto-frontispiece {
  min-height: 82vh;
  display: grid;
  align-content: center;
  padding: clamp(34px, 8vw, 84px);
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  color: var(--front-ink, var(--paper));
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18)),
    radial-gradient(circle at var(--sigil-x, 50%) var(--sigil-y, 30%), var(--sigil, rgba(255,255,255,.14)), transparent 31%),
    var(--front, #15110f);
  box-shadow: 0 42px 120px rgba(0,0,0,.48), inset 0 0 90px rgba(255,255,255,.036);
}

.canto-number {
  color: var(--accent);
  font-size: .78rem;
  margin-bottom: 24px;
}

.canto-frontispiece h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 5.6rem);
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.canto-epigraph {
  max-width: 680px;
  margin: 28px 0 0;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--front-ink, var(--paper)) 76%, transparent);
}

.motif {
  margin-top: 34px;
  max-width: 620px;
  color: color-mix(in srgb, var(--front-ink, var(--paper)) 54%, transparent);
  font-size: .7rem;
  line-height: 1.6;
}

.manuscript {
  margin: 0 auto;
  padding: clamp(34px, 7vw, 84px);
  background:
    linear-gradient(90deg, rgba(0,0,0,.06), transparent 8% 92%, rgba(0,0,0,.08)),
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.28)),
    var(--paper);
  box-shadow: 0 26px 80px rgba(0,0,0,.44);
}

.manuscript p {
  max-width: 70ch;
  margin: 0 auto 1.35em;
  font-size: clamp(1.06rem, 1.8vw, 1.27rem);
  line-height: 1.9;
}

.dropcap::first-letter {
  float: left;
  padding: 10px 14px 0 0;
  font-size: 5.8rem;
  line-height: .78;
  color: var(--accent);
}

.page-turner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 26px 0 70px;
  color: rgba(238, 229, 213, .72);
  font-size: .7rem;
}

.page-turner a {
  padding: 14px 0;
  text-decoration: none;
}

.page-turner a:last-child {
  text-align: right;
}

.page-turner span {
  color: rgba(238, 229, 213, .42);
}

.giudizio {
  --backdrop: #111817;
  --front: #d8e0df;
  --front-ink: #141817;
  --paper: #f0eee9;
  --accent: #8f1f1f;
  --gild: #6a918a;
  --glow: rgba(216, 224, 223, .2);
  --sigil: rgba(143, 31, 31, .18);
  --card-back: #b9c6c2;
  --card-glow: rgba(236, 247, 244, .45);
  --card-accent: #8f2a2c;
}

.giudizio .canto-frontispiece {
  --front-ink: #18201f;
  background:
    radial-gradient(ellipse 10% 52% at 67% 49%, rgba(150, 27, 30, .58) 0 16%, rgba(96, 18, 20, .34) 44%, transparent 86%),
    radial-gradient(ellipse 48% 18% at 42% 68%, rgba(246, 249, 244, .48) 0 18%, rgba(214, 224, 219, .3) 46%, transparent 86%),
    radial-gradient(circle, rgba(255,255,255,.18) 0 .8px, transparent 1.7px),
    linear-gradient(180deg, rgba(198, 209, 204, .42), rgba(58, 70, 67, .72) 58%, rgba(28, 35, 34, .84)),
    #4a5754;
  background-size: cover, cover, 19px 19px, cover, auto;
  background-position: center, center, 0 0, center, center;
  box-shadow:
    0 42px 120px rgba(0,0,0,.5),
    inset 0 0 100px rgba(236, 244, 240, .08),
    inset 0 0 140px rgba(3, 8, 7, .34);
}

.toc-entry.giudizio {
  color: #10201f;
  background:
    linear-gradient(90deg, transparent 9%, rgba(53,71,67,.16) 9.5%, transparent 10% 90%, rgba(53,71,67,.16) 90.5%, transparent 91%),
    linear-gradient(180deg, rgba(214,226,222,.82), rgba(158,178,172,.58) 46%, rgba(43,55,53,.76)),
    radial-gradient(circle at 70% 68%, rgba(52, 21, 20, .22), transparent 17%),
    #9fb0ac;
}

.toc-entry.giudizio .toc-motif,
.toc-entry.giudizio .toc-opening {
  color: rgba(16, 32, 31, .76);
}

.toc-entry.giudizio .toc-opening {
  border-top-color: rgba(16, 32, 31, .22);
}

.toc-entry.giudizio::before {
  background:
    linear-gradient(90deg, transparent 6%, rgba(232,240,237,.34) 7%, transparent 8% 92%, rgba(224,233,230,.26) 93%, transparent 94%),
    linear-gradient(180deg, rgba(216, 230, 226, .42) 0 8%, transparent 8% 28%, rgba(210, 224, 220, .28) 28% 33%, transparent 33%),
    radial-gradient(ellipse at 30% 71%, rgba(216, 226, 223, .38) 0 12%, rgba(70, 82, 80, .2) 13% 24%, transparent 25%),
    radial-gradient(ellipse at 70% 58%, rgba(139, 32, 34, .32) 0 8%, rgba(64, 27, 28, .24) 9% 15%, transparent 16%),
    radial-gradient(ellipse at 38% 62%, rgba(34, 43, 43, .2) 0 7%, transparent 8%);
  filter: blur(9px);
  opacity: .78;
}

.toc-entry.giudizio::after {
  background:
    radial-gradient(circle at 18% 16%, rgba(226,236,233,.46), transparent 10%),
    radial-gradient(circle at 82% 22%, rgba(220,232,228,.34), transparent 11%),
    linear-gradient(180deg, rgba(225,235,232,.36), rgba(225,235,232,.13) 42%, rgba(225,235,232,.06)),
    repeating-linear-gradient(96deg, rgba(225,235,232,.12) 0 1px, transparent 1px 9px);
  backdrop-filter: blur(5px);
  opacity: .58;
}

.tradimento {
  --backdrop: #030706;
  --front: #06100f;
  --paper: #e9eadb;
  --accent: #dceeff;
  --gild: #78d7a2;
  --glow: rgba(220, 238, 255, .18);
  --grid: 18px 18px;
  --card-back: #030706;
  --card-glow: rgba(235, 247, 255, .34);
  --card-accent: #dceeff;
}

.tradimento .leaf {
  position: relative;
}

.tradimento .leaf::before,
.tradimento .leaf::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: clamp(180px, 28vw, 440px);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, .34), rgba(186, 226, 255, .2) 28%, rgba(80, 150, 205, .08) 52%, transparent 76%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1px, transparent 1px 6px);
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: .36;
  animation: tradimento-tv-margin-pulse 5.2s infinite steps(1, end);
}

.tradimento .leaf::before {
  right: calc(100% - 96px);
}

.tradimento .leaf::after {
  left: calc(100% - 96px);
  animation-delay: -1.35s;
}

.tradimento .canto-frontispiece {
  --front-ink: #edf8ff;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(137,210,255,.1) 0 1px, transparent 1px 9px),
    radial-gradient(ellipse at 50% 46%, rgba(174, 226, 255, .38), transparent 42%),
    linear-gradient(180deg, rgba(3, 12, 18, .18), rgba(0, 0, 0, .68)),
    url("assets/tradimento-title-laptop.svg");
  background-size:
    100% 100%,
    100% 100%,
    cover,
    cover,
    cover;
  background-position:
    0 var(--static-y, 0),
    var(--static-x, 0) 0,
    center,
    center,
    center;
  box-shadow:
    0 42px 120px rgba(0,0,0,.56),
    inset 0 0 120px rgba(185, 229, 255, .1),
    inset 0 0 150px rgba(0, 0, 0, .5);
  animation: tradimento-title-static 4.6s infinite steps(1, end);
}

@keyframes tradimento-title-static {
  0%, 58%, 100% {
    --static-x: 0;
    --static-y: 0;
  }
  60% {
    --static-x: 11px;
    --static-y: -7px;
  }
  62% {
    --static-x: -8px;
    --static-y: 5px;
  }
  64% {
    --static-x: 3px;
    --static-y: -3px;
  }
}

@keyframes tradimento-tv-margin-pulse {
  0%, 18%, 42%, 66%, 100% {
    opacity: .3;
    filter: blur(18px) brightness(1);
  }
  20% {
    opacity: .62;
    filter: blur(20px) brightness(1.28);
  }
  22% {
    opacity: .24;
    filter: blur(17px) brightness(.82);
  }
  46% {
    opacity: .52;
    filter: blur(22px) brightness(1.18);
  }
  49% {
    opacity: .38;
    filter: blur(18px) brightness(.96);
  }
  72% {
    opacity: .68;
    filter: blur(23px) brightness(1.36);
  }
  74% {
    opacity: .28;
    filter: blur(18px) brightness(.88);
  }
}

.toc-entry.tradimento {
  color: #eef8ff;
  background:
    linear-gradient(90deg, transparent 9%, rgba(220,238,255,.13) 9.5%, transparent 10% 90%, rgba(220,238,255,.13) 90.5%, transparent 91%),
    radial-gradient(ellipse at 50% 53%, rgba(217, 240, 255, .18), transparent 30%),
    radial-gradient(ellipse at 50% 78%, rgba(96, 110, 110, .26), transparent 44%),
    linear-gradient(180deg, #010202, #020403 48%, #070a09 100%);
}

.toc-entry.tradimento .toc-motif,
.toc-entry.tradimento .toc-opening {
  color: rgba(238, 248, 255, .84);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .82);
}

.toc-entry.tradimento .toc-opening {
  border-top-color: rgba(238, 248, 255, .2);
}

.toc-entry.tradimento::before {
  background:
    radial-gradient(ellipse at 50% 72%, rgba(160, 174, 174, .36) 0 22%, rgba(54, 64, 64, .42) 23% 42%, transparent 52%),
    linear-gradient(168deg, transparent 0 42%, rgba(154, 170, 170, .2) 43% 55%, transparent 66%),
    linear-gradient(14deg, transparent 0 48%, rgba(184, 196, 194, .18) 49% 58%, transparent 69%),
    radial-gradient(ellipse at 42% 80%, rgba(194, 204, 202, .14), transparent 26%);
  filter: blur(8px);
  opacity: .74;
}

.toc-entry.tradimento::after {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.28) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(180,221,255,.14) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(199, 230, 255, .82) 54%, rgba(126, 162, 176, .42)),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.95), rgba(172, 215, 245, .78) 46%, transparent 68%);
  width: 46%;
  height: 24%;
  inset: 40% auto auto 27%;
  border-radius: 8px;
  filter: blur(10px);
  opacity: .82;
  box-shadow: 0 0 42px rgba(206, 237, 255, .58), 0 0 90px rgba(206, 237, 255, .24);
}

.chiamare {
  --backdrop: #0f1110;
  --front: #141716;
  --paper: #ebe8df;
  --accent: #f0d36f;
  --gild: #9aa17b;
  --glow: rgba(240, 211, 111, .18);
  --sigil-x: 72%;
  --card-back: #101412;
  --card-glow: rgba(246, 223, 130, .22);
  --card-accent: #f0d36f;
}

.descent-canto.chiamare,
.canto-page.chiamare {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0,0,0,.38) 18%, transparent 30% 70%, rgba(0,0,0,.4) 82%, rgba(0, 0, 0, .74)),
    url("assets/chiamare-margin-debris.svg"),
    linear-gradient(90deg, rgba(0, 0, 0, .82), transparent 23% 77%, rgba(0, 0, 0, .84)),
    linear-gradient(90deg, rgba(246, 223, 130, .03), transparent 20% 80%, rgba(246, 223, 130, .03)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(240, 211, 111, .18)), transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,.9), transparent 15%, transparent 82%, rgba(0,0,0,.92)),
    linear-gradient(180deg, var(--backdrop, #17120f), #030202 100%);
  background-size:
    auto,
    100% 1280px,
    auto,
    auto,
    auto,
    auto,
    auto;
  background-position:
    center,
    top center,
    center,
    center,
    center,
    center,
    center;
  background-repeat:
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}

.chiamare .canto-frontispiece {
  --front-ink: #fff2bf;
  background:
    radial-gradient(circle at 36% 70%, rgba(255, 244, 176, .94) 0 1.5%, rgba(255, 219, 105, .36) 3%, transparent 8%),
    radial-gradient(circle at 46% 64%, rgba(255, 244, 176, .9) 0 1.3%, rgba(255, 219, 105, .3) 2.8%, transparent 7.4%),
    radial-gradient(circle at 56% 58%, rgba(255, 244, 176, .84) 0 1.15%, rgba(255, 219, 105, .24) 2.5%, transparent 6.8%),
    radial-gradient(circle at 66% 52%, rgba(255, 244, 176, .78) 0 1%, rgba(255, 219, 105, .2) 2.2%, transparent 6.2%),
    linear-gradient(180deg, transparent 0 62%, rgba(0,0,0,.88) 63% 79%, transparent 80%),
    radial-gradient(ellipse 4.8% 12% at 36% 79%, rgba(0, 0, 0, .92) 0 54%, transparent 72%),
    radial-gradient(ellipse 4.4% 11% at 46% 73%, rgba(0, 0, 0, .88) 0 54%, transparent 72%),
    radial-gradient(ellipse 4% 10% at 56% 67%, rgba(0, 0, 0, .84) 0 54%, transparent 72%),
    radial-gradient(ellipse 3.8% 9.5% at 66% 61%, rgba(0, 0, 0, .8) 0 54%, transparent 72%),
    radial-gradient(ellipse 25% 46% at 51% 52%, rgba(255, 238, 169, .82) 0 24%, rgba(145, 157, 102, .34) 39%, transparent 66%),
    linear-gradient(180deg, transparent 0 54%, rgba(255, 230, 144, .28) 55% 66%, rgba(108, 119, 84, .16) 67% 79%, transparent 88%),
    radial-gradient(ellipse at 50% 44%, transparent 0 23%, rgba(2, 3, 3, .84) 46%, rgba(0, 0, 0, .98) 74%),
    radial-gradient(ellipse at 50% 74%, rgba(81, 92, 77, .32), transparent 36%),
    linear-gradient(164deg, transparent 0 42%, rgba(108, 120, 92, .28) 43% 53%, transparent 63%),
    linear-gradient(18deg, transparent 0 46%, rgba(124, 132, 99, .22) 47% 55%, transparent 66%),
    radial-gradient(circle, rgba(246, 223, 130, .16) 0 .8px, transparent 1.8px),
    linear-gradient(180deg, #111713, #030403 72%);
  background-size:
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    cover,
    21px 21px,
    cover;
  background-position:
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    0 0,
    center;
  box-shadow:
    0 42px 120px rgba(0,0,0,.56),
    inset 0 0 130px rgba(0,0,0,.58),
    inset 0 0 58px rgba(246, 223, 130, .08);
}

.toc-entry.chiamare {
  color: #fff2bf;
  background:
    linear-gradient(90deg, transparent 9%, rgba(255,238,174,.12) 9.5%, transparent 10% 90%, rgba(255,238,174,.12) 90.5%, transparent 91%),
    radial-gradient(ellipse at 50% 39%, rgba(255, 231, 133, .56) 0 18%, rgba(134, 155, 111, .22) 19% 31%, transparent 44%),
    radial-gradient(ellipse at 50% 54%, transparent 0 27%, rgba(7, 9, 8, .86) 41%, #030403 76%),
    linear-gradient(180deg, #171b17, #040504 72%);
}

.toc-entry.chiamare::before {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 245, 181, .82) 0 17%, rgba(184, 195, 125, .42) 18% 29%, transparent 38%),
    radial-gradient(ellipse at 50% 61%, rgba(2, 3, 3, .85) 0 24%, transparent 34%),
    radial-gradient(ellipse at 12% 50%, rgba(0,0,0,.86) 0 24%, transparent 44%),
    radial-gradient(ellipse at 88% 50%, rgba(0,0,0,.86) 0 24%, transparent 44%),
    radial-gradient(ellipse at 50% 8%, rgba(0,0,0,.88) 0 21%, transparent 46%);
  filter: blur(13px);
  opacity: .82;
}

.toc-entry.chiamare::after {
  background:
    radial-gradient(circle at 35% 69%, rgba(255, 247, 183, .82) 0 2%, transparent 5%),
    radial-gradient(circle at 44% 65%, rgba(255, 247, 183, .74) 0 2%, transparent 5%),
    radial-gradient(circle at 55% 68%, rgba(255, 247, 183, .74) 0 2%, transparent 5%),
    radial-gradient(circle at 66% 62%, rgba(255, 247, 183, .82) 0 2%, transparent 5%),
    radial-gradient(ellipse at 35% 76%, rgba(5, 7, 7, .88) 0 5%, transparent 8%),
    radial-gradient(ellipse at 44% 72%, rgba(5, 7, 7, .88) 0 5%, transparent 8%),
    radial-gradient(ellipse at 55% 75%, rgba(5, 7, 7, .88) 0 5%, transparent 8%),
    radial-gradient(ellipse at 66% 69%, rgba(5, 7, 7, .88) 0 5%, transparent 8%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  filter: blur(7px);
  opacity: .78;
}

.riti {
  --backdrop: #120d0c;
  --front: #17100f;
  --paper: #f1e4d0;
  --accent: #b33a2d;
  --gild: #d8b489;
  --glow: rgba(179, 58, 45, .18);
  --card-back: #16110f;
  --card-glow: rgba(216, 180, 137, .18);
  --card-accent: #d8b489;
}

.descent-canto.riti,
.canto-page.riti {
  background:
    linear-gradient(90deg, rgba(7,4,4,.68), transparent 25% 75%, rgba(7,4,4,.7)),
    url("assets/riti-margin-scrawl.svg"),
    linear-gradient(90deg, rgba(79,9,8,.16), transparent 24% 76%, rgba(79,9,8,.18)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(179,58,45,.14)), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.9), transparent 16%, transparent 82%, rgba(0,0,0,.92)),
    linear-gradient(180deg, var(--backdrop, #120d0c), #040202 100%);
  background-size:
    auto,
    100% 1200px,
    auto,
    auto,
    auto,
    auto;
  background-position:
    center,
    top center,
    center,
    center,
    center,
    center;
  background-repeat:
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}

.riti .canto-frontispiece {
  --front-ink: #f6e8d8;
  background:
    linear-gradient(90deg, rgba(23, 11, 9, .78), transparent 31% 69%, rgba(23, 8, 7, .82)),
    radial-gradient(ellipse at 50% 56%, rgba(255, 250, 240, .18), transparent 42%),
    url("assets/riti-title-shroud.svg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  box-shadow:
    0 42px 120px rgba(0,0,0,.58),
    inset 0 0 130px rgba(0,0,0,.56),
    inset 0 0 48px rgba(179, 58, 45, .1);
}

.toc-entry.riti {
  color: #f6e8d8;
  background:
    linear-gradient(90deg, transparent 9%, rgba(216,180,137,.12) 9.5%, transparent 10% 90%, rgba(216,180,137,.12) 90.5%, transparent 91%),
    radial-gradient(ellipse at 52% 60%, rgba(191, 183, 170, .18), transparent 38%),
    linear-gradient(180deg, #17100f, #070504 66%, #110807);
}

.toc-entry.riti::before {
  background:
    linear-gradient(180deg, transparent 0 60%, rgba(168, 174, 171, .54) 61% 63%, rgba(55, 61, 60, .46) 64% 66%, transparent 67%),
    linear-gradient(90deg, transparent 17%, rgba(205, 214, 211, .42) 18% 20%, transparent 21% 79%, rgba(205, 214, 211, .34) 80% 82%, transparent 83%),
    radial-gradient(ellipse 48% 12% at 50% 76%, rgba(246, 241, 230, .62) 0 56%, rgba(118, 124, 121, .34) 58% 72%, transparent 76%),
    radial-gradient(ellipse 44% 8% at 51% 70%, rgba(229, 231, 224, .42) 0 58%, transparent 70%);
  filter: blur(10px);
  opacity: .74;
}

.toc-entry.riti::after {
  background:
    repeating-linear-gradient(18deg, rgba(161, 25, 20, .44) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-12deg, rgba(126, 18, 15, .32) 0 1px, transparent 1px 15px),
    radial-gradient(ellipse at 64% 75%, rgba(5, 4, 4, .92) 0 5%, rgba(20, 9, 8, .5) 6% 9%, transparent 10%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  mask-image: linear-gradient(180deg, transparent 0 66%, black 70% 84%, transparent 90%);
  filter: blur(6px);
  opacity: .72;
}

.viaggio {
  --backdrop: #0d0e10;
  --front: #171511;
  --paper: #eee2c8;
  --accent: #e4d7b1;
  --gild: #a46d3c;
  --glow: rgba(228, 215, 177, .22);
  --sigil-x: 20%;
  --card-back: #15110e;
  --card-glow: rgba(228, 215, 177, .24);
  --card-accent: #e4d7b1;
}

.descent-canto.viaggio,
.canto-page.viaggio {
  background:
    radial-gradient(ellipse 20% 34% at 9% 18%, rgba(7,7,7,.48), transparent 76%),
    radial-gradient(ellipse 22% 38% at 91% 62%, rgba(7,7,7,.5), transparent 78%),
    repeating-linear-gradient(172deg, rgba(7,7,7,.28) 0 42px, rgba(25,24,20,.16) 84px, transparent 144px 240px),
    linear-gradient(90deg, rgba(0,0,0,.76), transparent 26% 74%, rgba(0,0,0,.78)),
    url("assets/viaggio-margin-junk-canyon.svg"),
    linear-gradient(90deg, rgba(32,26,17,.68), transparent 24% 76%, rgba(32,26,17,.7)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(183,162,59,.14)), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.92), transparent 15%, transparent 82%, rgba(0,0,0,.94)),
    linear-gradient(180deg, var(--backdrop, #080808), #020202 100%);
  background-size:
    auto,
    auto,
    100% 960px,
    auto,
    100% 1200px,
    auto,
    auto,
    auto,
    auto;
  background-position:
    center,
    center,
    top center,
    center,
    top center,
    center,
    center,
    center,
    center;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-y,
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}

.viaggio .canto-frontispiece {
  --front-ink: #f0e6c6;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86), rgba(7,7,7,.46) 38% 62%, rgba(0,0,0,.88)),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62)),
    url("assets/viaggio-title-road-mounds.svg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  text-shadow:
    0 2px 4px rgba(0,0,0,.96),
    0 0 16px rgba(0,0,0,.78);
  box-shadow:
    0 42px 120px rgba(0,0,0,.62),
    inset 0 0 132px rgba(0,0,0,.58),
    inset 0 0 34px rgba(193,173,63,.12);
}

.toc-entry.viaggio {
  color: #f2e7c8;
  background:
    linear-gradient(90deg, transparent 9%, rgba(228,215,177,.1) 9.5%, transparent 10% 90%, rgba(228,215,177,.1) 90.5%, transparent 91%),
    radial-gradient(circle at 50% 18%, rgba(245, 239, 214, .74) 0 8%, rgba(199, 188, 158, .28) 9% 17%, transparent 28%),
    linear-gradient(180deg, #10141b, #08090b 48%, #100c09 100%);
}

.toc-entry.viaggio::before {
  background:
    radial-gradient(ellipse at -4% 56%, rgba(64, 42, 26, .9) 0 32%, rgba(29, 22, 17, .72) 33% 55%, transparent 66%),
    radial-gradient(ellipse at 104% 56%, rgba(70, 45, 26, .9) 0 33%, rgba(30, 22, 16, .74) 34% 56%, transparent 67%),
    radial-gradient(ellipse at 50% 88%, rgba(2, 2, 2, .96) 0 26%, transparent 40%),
    conic-gradient(from 199deg at 50% 108%, transparent 0 28deg, rgba(0, 0, 0, .98) 29deg 80deg, transparent 81deg 360deg);
  filter: blur(12px);
  opacity: .86;
}

.toc-entry.viaggio::after {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 253, 232, .92) 0 5%, rgba(225, 217, 190, .46) 6% 13%, transparent 24%),
    radial-gradient(circle at 6% 46%, rgba(202, 132, 58, .58) 0 1.4%, transparent 3%),
    radial-gradient(circle at 14% 55%, rgba(177, 106, 44, .48) 0 1.2%, transparent 2.8%),
    radial-gradient(circle at 24% 42%, rgba(209, 142, 68, .42) 0 1.1%, transparent 2.6%),
    radial-gradient(circle at 76% 48%, rgba(202, 132, 58, .56) 0 1.4%, transparent 3%),
    radial-gradient(circle at 88% 42%, rgba(177, 106, 44, .48) 0 1.2%, transparent 2.8%),
    radial-gradient(circle at 96% 57%, rgba(209, 142, 68, .42) 0 1.1%, transparent 2.6%),
    linear-gradient(90deg, transparent 46%, rgba(228, 215, 177, .16) 49% 51%, transparent 54%);
  filter: blur(5px);
  opacity: .76;
}

.cunicoli {
  --backdrop: #050403;
  --front: #0b0806;
  --paper: #c6ccbf;
  --accent: #8f9a8d;
  --gild: #6f7a70;
  --glow: rgba(143, 154, 141, .18);
  --grid: 70px 28px;
  --card-back: #060403;
  --card-glow: rgba(143, 154, 141, .18);
  --card-accent: #8f9a8d;
}

.descent-canto.cunicoli,
.canto-page.cunicoli {
  background:
    linear-gradient(90deg, rgba(0,0,0,.98), rgba(0,0,0,.72) 18%, rgba(0,0,0,.2) 28% 72%, rgba(0,0,0,.74) 82%, rgba(0,0,0,.99)),
    url("assets/cunicoli-margin-inscriptions.svg"),
    linear-gradient(90deg, rgba(2,3,2,.96), rgba(4,5,4,.48) 24%, transparent 76%, rgba(2,3,2,.98)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(143,154,141,.12)), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.3) 15%, rgba(0,0,0,.18) 82%, rgba(0,0,0,.99)),
    linear-gradient(180deg, var(--backdrop, #020302), #000000 100%);
  background-size:
    auto,
    100% 1200px,
    auto,
    auto,
    auto,
    auto;
  background-position:
    center,
    top center,
    center,
    center,
    center,
    center;
  background-repeat:
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}

.cunicoli .canto-frontispiece {
  --front-ink: #d4dccd;
  background:
    linear-gradient(90deg, rgba(0,0,0,.84), rgba(4,6,4,.38) 40% 60%, rgba(0,0,0,.86)),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.68)),
    url("assets/cunicoli-title-caverns.svg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  text-shadow:
    0 2px 4px rgba(0,0,0,.98),
    0 0 18px rgba(0,0,0,.84);
  box-shadow:
    0 42px 120px rgba(0,0,0,.7),
    inset 0 0 142px rgba(0,0,0,.68),
    inset 0 0 32px rgba(143,154,141,.12);
}

.toc-entry.cunicoli {
  color: #c6ccbf;
  background:
    linear-gradient(90deg, transparent 9%, rgba(174,185,169,.1) 9.5%, transparent 10% 90%, rgba(174,185,169,.1) 90.5%, transparent 91%),
    linear-gradient(180deg, #080503, #010101 72%);
}

.toc-entry.cunicoli::before {
  background:
    radial-gradient(ellipse at 18% 28%, rgba(0,0,0,.98) 0 13%, rgba(96, 106, 96, .34) 14% 22%, transparent 30%),
    radial-gradient(ellipse at 43% 26%, rgba(0,0,0,.98) 0 15%, rgba(96, 106, 96, .34) 16% 25%, transparent 33%),
    radial-gradient(ellipse at 69% 29%, rgba(0,0,0,.98) 0 14%, rgba(96, 106, 96, .34) 15% 24%, transparent 32%),
    radial-gradient(ellipse at 88% 49%, rgba(0,0,0,.98) 0 14%, rgba(86, 96, 86, .3) 15% 23%, transparent 31%),
    radial-gradient(ellipse at 26% 54%, rgba(0,0,0,.98) 0 16%, rgba(102, 112, 101, .34) 17% 27%, transparent 36%),
    radial-gradient(ellipse at 55% 55%, rgba(0,0,0,.98) 0 17%, rgba(102, 112, 101, .34) 18% 29%, transparent 38%),
    radial-gradient(ellipse at 78% 74%, rgba(0,0,0,.98) 0 16%, rgba(86, 96, 86, .3) 17% 27%, transparent 36%),
    radial-gradient(ellipse at 38% 81%, rgba(0,0,0,.98) 0 14%, rgba(86, 96, 86, .3) 15% 24%, transparent 32%);
  filter: blur(10px);
  opacity: .9;
}

.toc-entry.cunicoli::after {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(221, 165, 47, .78) 0 8%, rgba(126, 84, 22, .46) 9% 15%, transparent 21%),
    radial-gradient(circle at 46% 56%, rgba(244, 204, 86, .55) 0 2%, transparent 4%),
    radial-gradient(circle at 52% 60%, rgba(244, 204, 86, .5) 0 2%, transparent 4%),
    radial-gradient(circle at 55% 55%, rgba(244, 204, 86, .45) 0 1.6%, transparent 3.6%),
    linear-gradient(90deg, transparent 48.8%, rgba(202, 211, 208, .72) 49.5% 50.5%, transparent 51.2%),
    linear-gradient(32deg, transparent 43%, rgba(202, 211, 208, .42) 44% 45.2%, transparent 46.4%),
    linear-gradient(-34deg, transparent 43%, rgba(202, 211, 208, .42) 44% 45.2%, transparent 46.4%),
    linear-gradient(65deg, transparent 39%, rgba(202, 211, 208, .32) 40% 41%, transparent 42%),
    linear-gradient(-64deg, transparent 39%, rgba(202, 211, 208, .32) 40% 41%, transparent 42%),
    repeating-linear-gradient(14deg, rgba(2, 2, 2, .62) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-18deg, rgba(3, 2, 2, .5) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(86deg, rgba(0,0,0,.42) 0 1px, transparent 1px 18px),
    radial-gradient(ellipse at 50% 54%, rgba(98, 110, 99, .13), transparent 68%);
  mask-image: radial-gradient(ellipse at 50% 54%, black 0 66%, transparent 86%);
  filter: blur(6px);
  opacity: .68;
}

.secare {
  --backdrop: #160806;
  --front: #2a0907;
  --paper: #f0dfcf;
  --accent: #ff8a32;
  --gild: #5b0908;
  --glow: rgba(255, 138, 50, .24);
  --card-back: #2a0606;
  --card-glow: rgba(255, 138, 50, .24);
  --card-accent: #ff9a3e;
}

.descent-canto.secare,
.canto-page.secare {
  background:
    linear-gradient(90deg, rgba(0,0,0,.82), transparent 26% 74%, rgba(0,0,0,.84)),
    url("assets/secare-margin-bronze-statues.svg"),
    linear-gradient(90deg, rgba(48,13,8,.76), transparent 24% 76%, rgba(48,13,8,.78)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(255,138,50,.16)), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.94), transparent 15%, transparent 82%, rgba(0,0,0,.96)),
    linear-gradient(180deg, var(--backdrop, #100403), #020101 100%);
  background-size:
    auto,
    100% 1200px,
    auto,
    auto,
    auto,
    auto;
  background-position:
    center,
    top center,
    center,
    center,
    center,
    center;
  background-repeat:
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}

.secare .canto-frontispiece {
  --front-ink: #ffe0c0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.8), rgba(25,5,3,.28) 42% 66%, rgba(0,0,0,.72)),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.58)),
    url("assets/secare-title-burning-door.svg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  text-shadow:
    0 2px 4px rgba(0,0,0,.98),
    0 0 18px rgba(0,0,0,.84);
  box-shadow:
    0 42px 120px rgba(0,0,0,.66),
    inset 0 0 138px rgba(0,0,0,.6),
    inset 0 0 38px rgba(255,138,50,.12);
}

.toc-entry.secare {
  color: #ffe0c0;
  background:
    linear-gradient(90deg, transparent 9%, rgba(255,154,62,.12) 9.5%, transparent 10% 90%, rgba(255,154,62,.12) 90.5%, transparent 91%),
    linear-gradient(180deg, #d5571e 0%, #9e1812 28%, #3b0707 72%, #160202 100%);
}

.toc-entry.secare::before {
  background:
    conic-gradient(from 198deg at 50% 112%, transparent 0 25deg, rgba(3, 1, 1, .98) 26deg 44deg, transparent 45deg 55deg, rgba(3, 1, 1, .96) 56deg 78deg, transparent 79deg 360deg),
    radial-gradient(ellipse at 50% 80%, rgba(1, 0, 0, .94) 0 14%, transparent 28%),
    radial-gradient(ellipse at 48% 48%, rgba(9, 1, 1, .8) 0 7%, transparent 15%),
    radial-gradient(ellipse at 54% 26%, rgba(16, 2, 2, .74) 0 5%, transparent 12%);
  filter: blur(9px);
  opacity: .88;
}

.toc-entry.secare::after {
  background:
    radial-gradient(circle at 16% 39%, rgba(3, 1, 1, .92) 0 1.8%, transparent 3.5%),
    radial-gradient(ellipse at 16% 47%, rgba(3, 1, 1, .9) 0 4.2%, transparent 6.6%),
    radial-gradient(circle at 25% 49%, rgba(3, 1, 1, .9) 0 1.7%, transparent 3.3%),
    radial-gradient(ellipse at 24% 57%, rgba(3, 1, 1, .88) 0 4.4%, transparent 6.8%),
    radial-gradient(circle at 11% 62%, rgba(3, 1, 1, .88) 0 1.8%, transparent 3.6%),
    radial-gradient(ellipse at 13% 71%, rgba(3, 1, 1, .86) 0 4.6%, transparent 7%),
    radial-gradient(circle at 32% 69%, rgba(3, 1, 1, .86) 0 1.7%, transparent 3.4%),
    radial-gradient(ellipse at 31% 78%, rgba(3, 1, 1, .84) 0 4.4%, transparent 6.8%),
    radial-gradient(circle at 8% 78%, rgba(3, 1, 1, .82) 0 1.6%, transparent 3.2%),
    radial-gradient(ellipse at 9% 86%, rgba(3, 1, 1, .8) 0 4%, transparent 6.4%),
    radial-gradient(circle at 83% 37%, rgba(3, 1, 1, .92) 0 1.8%, transparent 3.5%),
    radial-gradient(ellipse at 82% 45%, rgba(3, 1, 1, .9) 0 4.2%, transparent 6.6%),
    radial-gradient(circle at 74% 51%, rgba(3, 1, 1, .9) 0 1.7%, transparent 3.3%),
    radial-gradient(ellipse at 74% 59%, rgba(3, 1, 1, .88) 0 4.4%, transparent 6.8%),
    radial-gradient(circle at 89% 63%, rgba(3, 1, 1, .88) 0 1.8%, transparent 3.6%),
    radial-gradient(ellipse at 88% 72%, rgba(3, 1, 1, .86) 0 4.6%, transparent 7%),
    radial-gradient(circle at 68% 72%, rgba(3, 1, 1, .86) 0 1.7%, transparent 3.4%),
    radial-gradient(ellipse at 68% 81%, rgba(3, 1, 1, .84) 0 4.4%, transparent 6.8%),
    radial-gradient(circle at 94% 78%, rgba(3, 1, 1, .82) 0 1.6%, transparent 3.2%),
    radial-gradient(ellipse at 93% 86%, rgba(3, 1, 1, .8) 0 4%, transparent 6.4%),
    radial-gradient(circle at 5% 34%, rgba(2, 1, 1, .9) 0 1.5%, transparent 3%),
    radial-gradient(ellipse at 5% 41%, rgba(2, 1, 1, .86) 0 3.6%, transparent 5.8%),
    radial-gradient(circle at 27% 34%, rgba(2, 1, 1, .88) 0 1.5%, transparent 3%),
    radial-gradient(ellipse at 28% 42%, rgba(2, 1, 1, .84) 0 3.8%, transparent 6%),
    radial-gradient(circle at 20% 73%, rgba(2, 1, 1, .86) 0 1.5%, transparent 3%),
    radial-gradient(ellipse at 20% 81%, rgba(2, 1, 1, .82) 0 3.8%, transparent 6%),
    radial-gradient(circle at 36% 84%, rgba(2, 1, 1, .84) 0 1.4%, transparent 2.8%),
    radial-gradient(ellipse at 36% 91%, rgba(2, 1, 1, .8) 0 3.4%, transparent 5.6%),
    radial-gradient(circle at 97% 34%, rgba(2, 1, 1, .9) 0 1.5%, transparent 3%),
    radial-gradient(ellipse at 97% 41%, rgba(2, 1, 1, .86) 0 3.6%, transparent 5.8%),
    radial-gradient(circle at 70% 35%, rgba(2, 1, 1, .88) 0 1.5%, transparent 3%),
    radial-gradient(ellipse at 70% 43%, rgba(2, 1, 1, .84) 0 3.8%, transparent 6%),
    radial-gradient(circle at 80% 76%, rgba(2, 1, 1, .86) 0 1.5%, transparent 3%),
    radial-gradient(ellipse at 80% 84%, rgba(2, 1, 1, .82) 0 3.8%, transparent 6%),
    radial-gradient(circle at 61% 86%, rgba(2, 1, 1, .84) 0 1.4%, transparent 2.8%),
    radial-gradient(ellipse at 61% 93%, rgba(2, 1, 1, .8) 0 3.4%, transparent 5.6%),
    linear-gradient(90deg, rgba(0,0,0,.36), transparent 22% 78%, rgba(0,0,0,.36)),
    repeating-linear-gradient(90deg, transparent 0 7%, rgba(0,0,0,.18) 7.5% 8.5%, transparent 9% 14%);
  mask-image: radial-gradient(ellipse at 50% 62%, transparent 0 19%, black 28% 78%, transparent 94%);
  filter: blur(7px);
  opacity: .78;
}

.discendenza {
  --backdrop: #070604;
  --front: #120f08;
  --paper: #e3e2d4;
  --accent: #e4bd55;
  --gild: #8a6a24;
  --glow: rgba(228, 189, 85, .22);
  --grid: 24px 48px;
  --card-back: #090704;
  --card-glow: rgba(228, 189, 85, .24);
  --card-accent: #e4bd55;
}

.descent-canto.discendenza,
.canto-page.discendenza {
  background:
    linear-gradient(90deg, rgba(43,13,13,.66), rgba(28,11,9,.46) 22%, rgba(8,2,3,.14) 34% 66%, rgba(28,11,9,.48) 78%, rgba(43,13,13,.68)),
    linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.46) 24%, transparent 31% 69%, rgba(0,0,0,.48) 76%, rgba(0,0,0,.86)),
    url("assets/discendenza-margin-faces.svg"),
    linear-gradient(90deg, rgba(5,6,4,.78), rgba(8,7,5,.34) 24%, transparent 76%, rgba(5,6,4,.8)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(228,189,85,.12)), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.2) 15%, rgba(0,0,0,.16) 82%, rgba(0,0,0,.96)),
    linear-gradient(180deg, var(--backdrop, #040202), #010101 100%);
  background-size:
    auto,
    auto,
    100% 1200px,
    auto,
    auto,
    auto,
    auto;
  background-position:
    center,
    center,
    top center,
    center,
    center,
    center,
    center;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}

.canto-page.discendenza .leaf {
  position: relative;
}

.descent-canto.discendenza > .leaf::before,
.descent-canto.discendenza > .leaf::after,
.canto-page.discendenza .leaf::before,
.canto-page.discendenza .leaf::after {
  content: "";
  position: absolute;
  top: -260px;
  bottom: -260px;
  width: clamp(108px, 18vw, 250px);
  z-index: 0;
  pointer-events: none;
  opacity: .58;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 12%, rgba(179, 63, 58, .3) 0 2px, rgba(205, 176, 151, .18) 3px 4px, transparent 6px),
    radial-gradient(circle at 54% 24%, rgba(214, 191, 162, .2) 0 1px, rgba(121, 39, 38, .18) 2px 4px, transparent 6px),
    radial-gradient(circle at 77% 42%, rgba(160, 51, 48, .28) 0 2px, rgba(220, 196, 164, .16) 3px 5px, transparent 7px),
    radial-gradient(circle at 31% 58%, rgba(227, 204, 170, .18) 0 1px, rgba(119, 38, 39, .17) 2px 4px, transparent 6px),
    radial-gradient(circle at 68% 73%, rgba(147, 43, 44, .26) 0 2px, rgba(219, 190, 157, .14) 3px 5px, transparent 8px),
    radial-gradient(circle at 43% 88%, rgba(212, 184, 152, .16) 0 1px, rgba(104, 33, 36, .16) 2px 3px, transparent 6px);
  background-size:
    122px 176px,
    154px 214px,
    118px 188px,
    168px 244px,
    138px 206px,
    194px 268px;
  filter: blur(.2px) saturate(.78);
  animation: discendenza-bubble-rise 18s linear infinite;
}

.descent-canto.discendenza > .leaf::before,
.canto-page.discendenza .leaf::before {
  right: calc(100% - 128px);
  mask-image: linear-gradient(90deg, transparent 0 4%, black 16% 86%, transparent 100%);
}

.descent-canto.discendenza > .leaf::after,
.canto-page.discendenza .leaf::after {
  left: calc(100% - 74px);
  opacity: .5;
  animation-duration: 22s;
  animation-delay: -8s;
  transform: scaleX(-1);
}

@keyframes discendenza-bubble-rise {
  0% {
    background-position:
      0 220px,
      26px 280px,
      58px 350px,
      10px 410px,
      82px 500px,
      34px 620px;
  }
  100% {
    background-position:
      0 -180px,
      26px -260px,
      58px -320px,
      10px -390px,
      82px -480px,
      34px -600px;
  }
}

.discendenza .canto-frontispiece {
  --front-ink: #e7e5d8;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.42) 34% 66%, rgba(0,0,0,.9)),
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.7)),
    url("assets/discendenza-title-singularity.svg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  text-shadow:
    0 2px 4px rgba(0,0,0,.98),
    0 0 18px rgba(0,0,0,.9);
  box-shadow:
    0 42px 120px rgba(0,0,0,.74),
    inset 0 0 158px rgba(0,0,0,.76),
    inset 0 0 30px rgba(228,189,85,.08);
}

.toc-entry.discendenza {
  color: #ffe4a4;
  background:
    linear-gradient(90deg, transparent 9%, rgba(228,189,85,.12) 9.5%, transparent 10% 90%, rgba(228,189,85,.12) 90.5%, transparent 91%),
    radial-gradient(ellipse at 50% 52%, rgba(122, 83, 20, .22), transparent 42%),
    radial-gradient(ellipse at 46% 43%, rgba(255, 236, 162, .14), transparent 30%),
    linear-gradient(180deg, #080705, #020201 78%);
}

.toc-entry.discendenza::before {
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 219, 101, .62) 0 2.5%, rgba(147, 102, 27, .42) 3% 5.5%, transparent 8%),
    radial-gradient(ellipse at 50% 60%, rgba(231, 181, 52, .34) 0 4%, rgba(116, 78, 19, .3) 5% 9%, transparent 13%),
    conic-gradient(from 238deg at 50% 54%, transparent 0 22deg, rgba(246, 204, 91, .38) 23deg 28deg, transparent 29deg 78deg, rgba(226, 172, 49, .34) 79deg 84deg, transparent 85deg 143deg, rgba(252, 221, 126, .34) 144deg 149deg, transparent 150deg 214deg, rgba(221, 159, 35, .28) 215deg 221deg, transparent 222deg 360deg),
    radial-gradient(ellipse at 50% 54%, transparent 0 11%, rgba(255, 218, 106, .24) 12% 14%, transparent 15% 24%, rgba(168, 115, 30, .24) 25% 27%, transparent 28% 38%, rgba(224, 170, 52, .2) 39% 41%, transparent 42%);
  filter: blur(8px);
  opacity: .82;
}

.toc-entry.discendenza::after {
  background:
    radial-gradient(circle at 18% 72%, rgba(255, 230, 131, .84) 0 2.4%, rgba(130, 88, 23, .42) 3.4% 6.2%, transparent 9%),
    radial-gradient(circle at 27% 43%, rgba(255, 230, 131, .86) 0 2.5%, rgba(130, 88, 23, .42) 3.5% 6.4%, transparent 9%),
    radial-gradient(circle at 43% 25%, rgba(255, 230, 131, .88) 0 2.4%, rgba(130, 88, 23, .44) 3.4% 6.2%, transparent 9%),
    radial-gradient(circle at 66% 31%, rgba(255, 230, 131, .86) 0 2.5%, rgba(130, 88, 23, .42) 3.5% 6.4%, transparent 9%),
    radial-gradient(circle at 79% 55%, rgba(255, 230, 131, .84) 0 2.6%, rgba(130, 88, 23, .42) 3.6% 6.6%, transparent 9.5%),
    radial-gradient(circle at 68% 76%, rgba(255, 230, 131, .82) 0 2.3%, rgba(130, 88, 23, .4) 3.3% 6%, transparent 9%),
    radial-gradient(circle at 47% 70%, rgba(255, 230, 131, .78) 0 2%, rgba(130, 88, 23, .36) 3% 5.5%, transparent 8%),
    radial-gradient(circle at 38% 56%, rgba(255, 230, 131, .78) 0 1.8%, rgba(130, 88, 23, .34) 2.8% 5%, transparent 7.6%),
    radial-gradient(circle at 57% 51%, rgba(255, 230, 131, .76) 0 1.7%, rgba(130, 88, 23, .32) 2.6% 4.8%, transparent 7.2%),
    radial-gradient(ellipse at 34% 34%, rgba(255,255,255,.48), transparent 14%),
    linear-gradient(112deg, transparent 0 38%, rgba(255, 245, 190, .42) 44%, transparent 57%);
  filter: blur(6px);
  opacity: .8;
}

.ignoto {
  --backdrop: #060304;
  --front: #100607;
  --paper: #e8e5da;
  --accent: #b7322e;
  --gild: #9f8f88;
  --glow: rgba(183, 50, 46, .24);
  --sigil-y: 70%;
  --card-back: #080304;
  --card-glow: rgba(183, 50, 46, .24);
  --card-accent: #d44a44;
}

.ignoto .canto-frontispiece {
  --front-ink: #f0dfd6;
  background:
    linear-gradient(90deg, rgba(4, 1, 2, .7), transparent 18% 82%, rgba(4, 1, 2, .7)),
    linear-gradient(180deg, rgba(5, 1, 2, .12), rgba(0, 0, 0, .58)),
    url("assets/ignoto-title-medusa.svg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  box-shadow:
    0 42px 120px rgba(0,0,0,.66),
    inset 0 0 130px rgba(0,0,0,.54),
    inset 0 0 48px rgba(183, 50, 46, .12);
}

.canto-page.ignoto .leaf {
  position: relative;
}

.descent-canto.ignoto::before,
.descent-canto.ignoto::after,
.canto-page.ignoto .leaf::before,
.canto-page.ignoto .leaf::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  width: clamp(210px, 30vw, 480px);
  pointer-events: none;
  z-index: 0;
  background:
    url("assets/ignoto-margin-flaming-graves.svg"),
    radial-gradient(ellipse 44% 24% at 50% 84%, rgba(255, 198, 86, .52), rgba(207, 60, 26, .36) 42%, transparent 84%),
    radial-gradient(ellipse 36% 42% at 48% 54%, rgba(222, 71, 28, .42), rgba(110, 11, 14, .3) 56%, transparent 88%),
    radial-gradient(ellipse 42% 34% at 52% 24%, rgba(190, 37, 22, .36), rgba(80, 7, 11, .24) 58%, transparent 88%);
  background-size:
    88% 1200px,
    88% 1200px,
    88% 1200px,
    88% 1200px;
  background-position:
    center,
    center,
    center,
    center;
  background-repeat:
    repeat-y,
    repeat-y,
    repeat-y,
    repeat-y;
  filter: blur(6px);
  opacity: 0;
  animation: ignoto-margin-fire 6.4s infinite ease-in-out;
}

.descent-canto.ignoto::before {
  right: calc(50% + 390px);
}

.descent-canto.ignoto::after {
  left: calc(50% + 390px);
  transform: scaleX(-1);
  animation-delay: -3.2s;
}

.canto-page.ignoto .leaf::before {
  right: calc(100% - 88px);
}

.canto-page.ignoto .leaf::after {
  left: calc(100% - 88px);
  transform: scaleX(-1);
  animation-delay: -3.2s;
}

body.ignoto-audio-synced .descent-canto.ignoto::before,
body.ignoto-audio-synced .canto-page.ignoto .leaf::before {
  animation-name: ignoto-margin-fire-synced;
}

body.ignoto-audio-synced .descent-canto.ignoto::after,
body.ignoto-audio-synced .canto-page.ignoto .leaf::after {
  animation-name: ignoto-margin-fire-synced;
}

@keyframes ignoto-margin-fire {
  0%, 46%, 100% {
    opacity: .06;
    filter: blur(10px) brightness(.72);
  }
  12% {
    opacity: .36;
    filter: blur(8px) brightness(.92);
  }
  24% {
    opacity: .62;
    filter: blur(6px) brightness(1.18);
  }
  34% {
    opacity: .42;
    filter: blur(9px) brightness(.9);
  }
}

@keyframes ignoto-margin-fire-synced {
  0%, 46%, 100% {
    opacity: .06;
    filter: blur(10px) brightness(.72);
  }
  12% {
    opacity: .36;
    filter: blur(8px) brightness(.92);
  }
  24% {
    opacity: .62;
    filter: blur(6px) brightness(1.18);
  }
  34% {
    opacity: .42;
    filter: blur(9px) brightness(.9);
  }
}

.descent-canto.ignoto .manuscript::before,
.canto-page.ignoto .manuscript::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 96% 72% at var(--ignoto-text-light-x, -8%) 50%,
      rgba(255, 224, 151, .32) 0,
      rgba(244, 174, 88, .24) 24%,
      rgba(202, 75, 35, .16) 50%,
      rgba(115, 19, 18, .07) 72%,
      transparent 94%
    ),
    linear-gradient(
      90deg,
      rgba(222, 139, 72, .035),
      rgba(244, 191, 112, .065) 50%,
      rgba(222, 139, 72, .035)
    );
  mix-blend-mode: screen;
  filter: blur(15px) brightness(.72);
  opacity: 0;
  animation: ignoto-text-fire 6.4s infinite ease-in-out;
}

body.ignoto-audio-synced .descent-canto.ignoto .manuscript::before,
body.ignoto-audio-synced .canto-page.ignoto .manuscript::before {
  animation-name: ignoto-text-fire-synced;
}

@keyframes ignoto-text-fire {
  0%, 46%, 50%, 96%, 100% {
    --ignoto-text-light-x: -8%;
    opacity: 0;
  }
  10% {
    --ignoto-text-light-x: 2%;
    opacity: .34;
  }
  22% {
    --ignoto-text-light-x: 18%;
    opacity: .46;
  }
  34% {
    --ignoto-text-light-x: 10%;
    opacity: .36;
  }
  50.01% {
    --ignoto-text-light-x: 108%;
    opacity: 0;
  }
  60% {
    --ignoto-text-light-x: 98%;
    opacity: .34;
  }
  72% {
    --ignoto-text-light-x: 82%;
    opacity: .46;
  }
  84% {
    --ignoto-text-light-x: 90%;
    opacity: .36;
  }
}

@keyframes ignoto-text-fire-synced {
  0%, 46%, 50%, 96%, 100% {
    --ignoto-text-light-x: -8%;
    opacity: 0;
  }
  10% {
    --ignoto-text-light-x: 2%;
    opacity: .34;
  }
  22% {
    --ignoto-text-light-x: 18%;
    opacity: .46;
  }
  34% {
    --ignoto-text-light-x: 10%;
    opacity: .36;
  }
  50.01% {
    --ignoto-text-light-x: 108%;
    opacity: 0;
  }
  60% {
    --ignoto-text-light-x: 98%;
    opacity: .34;
  }
  72% {
    --ignoto-text-light-x: 82%;
    opacity: .46;
  }
  84% {
    --ignoto-text-light-x: 90%;
    opacity: .36;
  }
}

body.ambiance-off .descent-canto.ignoto .manuscript::before,
body.ambiance-off .canto-page.ignoto .manuscript::before {
  display: none;
}

.toc-entry.ignoto {
  color: #f0dfd6;
  background:
    linear-gradient(90deg, transparent 9%, rgba(212,74,68,.12) 9.5%, transparent 10% 90%, rgba(212,74,68,.12) 90.5%, transparent 91%),
    linear-gradient(90deg, rgba(4, 3, 4, .96) 0 31%, rgba(99, 11, 12, .8) 36% 64%, rgba(4, 3, 4, .96) 69% 100%),
    linear-gradient(180deg, #100607, #030102 72%);
}

.toc-entry.ignoto::before {
  background:
    linear-gradient(103deg, rgba(3, 3, 4, .95) 0 31%, transparent 32%),
    linear-gradient(257deg, rgba(3, 3, 4, .95) 0 31%, transparent 32%),
    linear-gradient(90deg, transparent 0 34%, rgba(139, 13, 14, .88) 39% 61%, transparent 66% 100%),
    linear-gradient(180deg, rgba(217, 43, 37, .54), rgba(116, 10, 12, .72) 55%, rgba(65, 4, 6, .74));
  filter: blur(9px);
  opacity: .88;
}

.toc-entry.ignoto::after {
  background:
    radial-gradient(circle at 17% 35%, rgba(216,216,206,.72) 0 1.2%, transparent 2.8%),
    radial-gradient(circle at 22% 48%, rgba(216,216,206,.58) 0 1.1%, transparent 2.6%),
    radial-gradient(circle at 14% 62%, rgba(216,216,206,.52) 0 1.1%, transparent 2.5%),
    radial-gradient(circle at 30% 72%, rgba(216,216,206,.5) 0 1%, transparent 2.4%),
    radial-gradient(circle at 8% 43%, rgba(216,216,206,.56) 0 1%, transparent 2.4%),
    radial-gradient(circle at 27% 30%, rgba(216,216,206,.6) 0 1%, transparent 2.4%),
    radial-gradient(circle at 10% 76%, rgba(216,216,206,.48) 0 .9%, transparent 2.2%),
    radial-gradient(circle at 33% 55%, rgba(216,216,206,.5) 0 .9%, transparent 2.2%),
    radial-gradient(circle at 82% 34%, rgba(216,216,206,.72) 0 1.2%, transparent 2.8%),
    radial-gradient(circle at 76% 49%, rgba(216,216,206,.58) 0 1.1%, transparent 2.6%),
    radial-gradient(circle at 88% 62%, rgba(216,216,206,.52) 0 1.1%, transparent 2.5%),
    radial-gradient(circle at 70% 73%, rgba(216,216,206,.5) 0 1%, transparent 2.4%),
    radial-gradient(circle at 94% 42%, rgba(216,216,206,.56) 0 1%, transparent 2.4%),
    radial-gradient(circle at 73% 29%, rgba(216,216,206,.6) 0 1%, transparent 2.4%),
    radial-gradient(circle at 92% 77%, rgba(216,216,206,.48) 0 .9%, transparent 2.2%),
    radial-gradient(circle at 67% 56%, rgba(216,216,206,.5) 0 .9%, transparent 2.2%),
    radial-gradient(circle at 12% 22%, rgba(216,216,206,.66) 0 1%, transparent 2.3%),
    radial-gradient(circle at 24% 18%, rgba(216,216,206,.58) 0 .9%, transparent 2.2%),
    radial-gradient(circle at 31% 39%, rgba(216,216,206,.54) 0 .9%, transparent 2.2%),
    radial-gradient(circle at 6% 57%, rgba(216,216,206,.5) 0 .9%, transparent 2.1%),
    radial-gradient(circle at 88% 22%, rgba(216,216,206,.66) 0 1%, transparent 2.3%),
    radial-gradient(circle at 78% 18%, rgba(216,216,206,.58) 0 .9%, transparent 2.2%),
    radial-gradient(circle at 69% 39%, rgba(216,216,206,.54) 0 .9%, transparent 2.2%),
    radial-gradient(circle at 96% 56%, rgba(216,216,206,.5) 0 .9%, transparent 2.1%),
    radial-gradient(circle at 43% 18%, rgba(0,0,0,.92) 0 1.35%, transparent 2.8%),
    radial-gradient(circle at 52% 22%, rgba(0,0,0,.9) 0 1.2%, transparent 2.7%),
    radial-gradient(circle at 58% 31%, rgba(0,0,0,.88) 0 1.2%, transparent 2.7%),
    radial-gradient(circle at 46% 34%, rgba(0,0,0,.9) 0 1.3%, transparent 2.8%),
    radial-gradient(circle at 54% 44%, rgba(0,0,0,.88) 0 1.2%, transparent 2.7%),
    radial-gradient(circle at 41% 48%, rgba(0,0,0,.9) 0 1.25%, transparent 2.7%),
    radial-gradient(circle at 50% 55%, rgba(0,0,0,.92) 0 1.4%, transparent 3%),
    radial-gradient(circle at 59% 59%, rgba(0,0,0,.88) 0 1.2%, transparent 2.7%),
    radial-gradient(circle at 45% 66%, rgba(0,0,0,.9) 0 1.25%, transparent 2.8%),
    radial-gradient(circle at 55% 72%, rgba(0,0,0,.9) 0 1.3%, transparent 2.8%),
    radial-gradient(circle at 49% 80%, rgba(0,0,0,.94) 0 1.45%, transparent 3.1%),
    radial-gradient(circle at 58% 88%, rgba(0,0,0,.88) 0 1.25%, transparent 2.8%),
    radial-gradient(circle at 42% 91%, rgba(0,0,0,.88) 0 1.25%, transparent 2.8%),
    repeating-radial-gradient(ellipse at 50% 96%, rgba(0,0,0,.95) 0 3px, rgba(36, 34, 34, .9) 4px 6px, transparent 7px 12px),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  mask-image: radial-gradient(ellipse at 50% 58%, black 0 78%, transparent 94%);
  filter: blur(3px);
  opacity: .84;
}

.brutalita {
  --backdrop: #030202;
  --front: #050404;
  --paper: #e9e4ce;
  --accent: #c7312d;
  --gild: #d8d3bd;
  --glow: rgba(199, 49, 45, .2);
  --card-back: #030202;
  --card-glow: rgba(199, 49, 45, .22);
  --card-accent: #d8d3bd;
}

.descent-canto.brutalita,
.canto-page.brutalita {
  background:
    url("assets/brutalita-margin-red-canopy.svg"),
    linear-gradient(90deg, rgba(0,0,0,.82), transparent 25% 75%, rgba(0,0,0,.84)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(199, 49, 45, .2)), transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,.92), transparent 15%, transparent 82%, rgba(0,0,0,.94)),
    linear-gradient(180deg, var(--backdrop, #030202), #010101 100%);
  background-size:
    100% 1100px,
    auto,
    auto,
    auto,
    auto;
  background-position:
    top center,
    center,
    center,
    center,
    center;
  background-repeat:
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}

.descent-canto.brutalita > .leaf::before,
.descent-canto.brutalita > .leaf::after,
.canto-page.brutalita .leaf::before,
.canto-page.brutalita .leaf::after {
  content: "";
  position: absolute;
  top: -90px;
  bottom: -90px;
  width: clamp(150px, 19vw, 300px);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 4px 14px at 18% 8%, rgba(148, 8, 10, .64) 0 42%, transparent 74%),
    radial-gradient(ellipse 5px 18px at 72% 21%, rgba(117, 4, 8, .6) 0 38%, transparent 76%),
    radial-gradient(ellipse 3px 13px at 44% 38%, rgba(190, 20, 19, .52) 0 34%, transparent 74%),
    radial-gradient(ellipse 5px 20px at 84% 61%, rgba(137, 7, 12, .62) 0 36%, transparent 78%),
    radial-gradient(ellipse 3px 12px at 30% 78%, rgba(206, 28, 22, .46) 0 36%, transparent 78%),
    radial-gradient(ellipse 4px 16px at 58% 11%, rgba(165, 10, 12, .5) 0 34%, transparent 76%),
    radial-gradient(ellipse 3px 11px at 10% 31%, rgba(130, 5, 8, .52) 0 36%, transparent 78%),
    radial-gradient(ellipse 4px 15px at 66% 46%, rgba(194, 24, 19, .42) 0 34%, transparent 76%),
    radial-gradient(ellipse 3px 13px at 24% 56%, rgba(100, 2, 6, .58) 0 38%, transparent 78%),
    radial-gradient(ellipse 5px 17px at 91% 82%, rgba(160, 8, 12, .46) 0 36%, transparent 78%),
    radial-gradient(ellipse 3px 10px at 51% 88%, rgba(208, 31, 24, .34) 0 36%, transparent 78%),
    radial-gradient(ellipse 4px 14px at 39% 18%, rgba(121, 4, 7, .46) 0 34%, transparent 76%);
  background-size:
    100% 520px,
    100% 640px,
    100% 590px,
    100% 720px,
    100% 560px,
    100% 610px,
    100% 470px,
    100% 690px,
    100% 540px,
    100% 760px,
    100% 500px,
    100% 620px;
  background-position:
    0 0,
    0 -120px,
    0 -240px,
    0 -80px,
    0 -310px,
    0 -180px,
    0 -60px,
    0 -340px,
    0 -220px,
    0 -420px,
    0 -140px,
    0 -280px;
  filter: blur(.35px) saturate(1.12);
  opacity: .68;
  mix-blend-mode: screen;
  animation: brutalita-red-drip 7.6s linear infinite;
}

.descent-canto.brutalita > .leaf::before,
.canto-page.brutalita .leaf::before {
  right: calc(100% - 74px);
}

.descent-canto.brutalita > .leaf::after,
.canto-page.brutalita .leaf::after {
  left: calc(100% - 74px);
  transform: scaleX(-1);
  animation-delay: -3.8s;
  opacity: .62;
}

@keyframes brutalita-red-drip {
  0% {
    background-position:
      0 -520px,
      0 -640px,
      0 -590px,
      0 -720px,
      0 -560px,
      0 -610px,
      0 -470px,
      0 -690px,
      0 -540px,
      0 -760px,
      0 -500px,
      0 -620px;
  }
  55% {
    opacity: .74;
    filter: blur(.45px) saturate(1.24);
  }
  100% {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
}

.brutalita .canto-frontispiece {
  --front-ink: #f0ead7;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(18, 2, 4, .68) 26%, rgba(8, 1, 2, .48) 44% 56%, rgba(18, 2, 4, .68) 74%, rgba(0, 0, 0, .92)),
    linear-gradient(180deg, rgba(3, 0, 1, .62), rgba(0, 0, 0, .9)),
    url("assets/brutalita-title-canopy.svg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  box-shadow:
    0 42px 120px rgba(0,0,0,.66),
    inset 0 0 170px rgba(0,0,0,.78),
    inset 0 0 48px rgba(199, 49, 45, .1);
}

.toc-entry.brutalita {
  color: #f0ead7;
  background:
    linear-gradient(90deg, transparent 9%, rgba(216,211,189,.1) 9.5%, transparent 10% 90%, rgba(216,211,189,.1) 90.5%, transparent 91%),
    radial-gradient(ellipse at 50% 54%, rgba(110, 17, 16, .2), transparent 44%),
    linear-gradient(180deg, #050404, #000 76%);
}

.toc-entry.brutalita::before {
  background:
    radial-gradient(ellipse 3.4% 48% at 16% 67%, rgba(221, 216, 196, .62) 0 52%, transparent 61%),
    radial-gradient(ellipse 2.8% 36% at 29% 58%, rgba(221, 216, 196, .52) 0 52%, transparent 61%),
    radial-gradient(ellipse 3.7% 55% at 46% 72%, rgba(221, 216, 196, .66) 0 52%, transparent 62%),
    radial-gradient(ellipse 3% 42% at 62% 60%, rgba(221, 216, 196, .54) 0 52%, transparent 61%),
    radial-gradient(ellipse 3.3% 50% at 80% 70%, rgba(221, 216, 196, .6) 0 52%, transparent 61%),
    radial-gradient(ellipse 2.4% 30% at 72% 48%, rgba(221, 216, 196, .38) 0 52%, transparent 61%),
    radial-gradient(ellipse 2.4% 28% at 37% 45%, rgba(221, 216, 196, .36) 0 52%, transparent 61%),
    radial-gradient(ellipse at 48% 76%, rgba(88, 10, 10, .52) 0 18%, transparent 31%);
  filter: blur(8px);
  opacity: .82;
}

.toc-entry.brutalita::after {
  background:
    radial-gradient(circle at 22% 26%, rgba(185, 24, 20, .66) 0 2.1%, transparent 4%),
    radial-gradient(circle at 36% 18%, rgba(191, 31, 25, .58) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 58% 28%, rgba(185, 24, 20, .62) 0 2%, transparent 3.8%),
    radial-gradient(circle at 72% 17%, rgba(191, 31, 25, .56) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 83% 34%, rgba(185, 24, 20, .6) 0 2%, transparent 3.8%),
    radial-gradient(circle at 29% 46%, rgba(154, 13, 12, .5) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 67% 49%, rgba(154, 13, 12, .5) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 14% 39%, rgba(178, 22, 18, .52) 0 1.8%, transparent 3.5%),
    radial-gradient(circle at 45% 38%, rgba(185, 24, 20, .52) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 53% 16%, rgba(160, 14, 13, .46) 0 1.6%, transparent 3.4%),
    radial-gradient(circle at 76% 48%, rgba(162, 14, 13, .5) 0 1.7%, transparent 3.4%),
    radial-gradient(circle at 88% 22%, rgba(185, 24, 20, .52) 0 1.7%, transparent 3.5%),
    radial-gradient(circle at 18% 58%, rgba(128, 8, 8, .42) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 41% 62%, rgba(128, 8, 8, .42) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 59% 64%, rgba(128, 8, 8, .42) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 80% 61%, rgba(128, 8, 8, .42) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 10% 21%, rgba(191, 31, 25, .5) 0 1.5%, transparent 3.1%),
    radial-gradient(circle at 17% 33%, rgba(154, 13, 12, .48) 0 1.4%, transparent 3%),
    radial-gradient(circle at 31% 29%, rgba(185, 24, 20, .5) 0 1.5%, transparent 3.1%),
    radial-gradient(circle at 48% 24%, rgba(191, 31, 25, .46) 0 1.4%, transparent 3%),
    radial-gradient(circle at 64% 35%, rgba(185, 24, 20, .5) 0 1.5%, transparent 3.1%),
    radial-gradient(circle at 78% 29%, rgba(154, 13, 12, .48) 0 1.4%, transparent 3%),
    radial-gradient(circle at 92% 41%, rgba(185, 24, 20, .46) 0 1.4%, transparent 3%),
    radial-gradient(circle at 23% 68%, rgba(128, 8, 8, .4) 0 1.4%, transparent 3%),
    radial-gradient(circle at 51% 73%, rgba(128, 8, 8, .42) 0 1.4%, transparent 3%),
    radial-gradient(circle at 72% 70%, rgba(128, 8, 8, .4) 0 1.4%, transparent 3%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  filter: blur(6px);
  opacity: .76;
}

.disperazione {
  --backdrop: #090708;
  --front: #0d090a;
  --paper: #e7ddd2;
  --accent: #c71f24;
  --gild: #5775a8;
  --glow: rgba(199, 31, 36, .2);
  --grid: 32px 32px;
  --card-back: #080606;
  --card-glow: rgba(199, 31, 36, .2);
  --card-accent: #c7474b;
}

.descent-canto.disperazione,
.canto-page.disperazione {
  background:
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(4,5,6,.48) 18%, transparent 31% 69%, rgba(4,5,6,.5) 82%, rgba(0,0,0,.8)),
    repeating-linear-gradient(172deg, rgba(0,0,0,.22) 0 26px, rgba(13,15,17,.12) 54px, transparent 96px 184px),
    linear-gradient(90deg, rgba(0,0,0,.62), transparent 25% 75%, rgba(0,0,0,.66)),
    url("assets/disperazione-margin-machinery.svg"),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(65, 123, 168, .12)), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.94), transparent 15%, transparent 82%, rgba(0,0,0,.96)),
    linear-gradient(180deg, var(--backdrop, #050506), #010101 100%);
  background-size:
    auto,
    100% 760px,
    auto,
    100% 1200px,
    auto,
    auto,
    auto;
  background-position:
    center,
    top center,
    center,
    top center,
    center,
    center,
    center;
  background-repeat:
    no-repeat,
    repeat-y,
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat;
}

.descent-canto.disperazione > .leaf::before,
.descent-canto.disperazione > .leaf::after,
.canto-page.disperazione .leaf::before,
.canto-page.disperazione .leaf::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(190px, 27vw, 440px);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 46% 8%, rgba(255, 250, 205, .9) 0 1px, rgba(251, 160, 54, .42) 2px, transparent 8px),
    radial-gradient(circle at 72% 23%, rgba(255, 246, 190, .82) 0 1px, rgba(245, 111, 40, .28) 2px, transparent 7px),
    radial-gradient(circle at 36% 39%, rgba(255, 249, 200, .76) 0 1px, rgba(238, 128, 35, .24) 2px, transparent 8px),
    radial-gradient(circle at 68% 58%, rgba(255, 246, 194, .78) 0 1px, rgba(241, 139, 42, .24) 2px, transparent 7px),
    radial-gradient(circle at 31% 76%, rgba(255, 249, 207, .72) 0 1px, rgba(230, 91, 30, .2) 2px, transparent 7px),
    radial-gradient(ellipse at 48% 34%, rgba(255, 179, 73, .16), transparent 34%),
    radial-gradient(ellipse at 54% 69%, rgba(255, 234, 150, .1), transparent 40%);
  background-size:
    100% 680px,
    100% 760px,
    100% 720px,
    100% 820px,
    100% 780px,
    100% 860px,
    100% 940px;
  background-position:
    center 0,
    center 110px,
    center 60px,
    center 220px,
    center 150px,
    center 0,
    center 120px;
  background-repeat: repeat-y;
  mix-blend-mode: screen;
  opacity: .36;
  filter: blur(.45px) drop-shadow(0 0 7px rgba(255, 159, 55, .36));
  animation: disperazione-sparks-fall 8.5s linear infinite, disperazione-bulb-flicker 5.8s steps(1, end) infinite;
}

.descent-canto.disperazione > .leaf::before,
.canto-page.disperazione .leaf::before {
  right: calc(100% - 72px);
}

.descent-canto.disperazione > .leaf::after,
.canto-page.disperazione .leaf::after {
  left: calc(100% - 72px);
  transform: scaleX(-1);
  animation-delay: -3.1s, -1.7s;
}

@keyframes disperazione-sparks-fall {
  0% {
    background-position:
      center -160px,
      center -40px,
      center -110px,
      center 0,
      center -80px,
      center 0,
      center -60px;
  }
  100% {
    background-position:
      center 520px,
      center 720px,
      center 610px,
      center 820px,
      center 700px,
      center 860px,
      center 880px;
  }
}

@keyframes disperazione-bulb-flicker {
  0%, 16%, 19%, 24%, 48%, 53%, 80%, 100% {
    opacity: .22;
    filter: blur(.55px) drop-shadow(0 0 4px rgba(255, 145, 42, .24));
  }
  17%, 23%, 49% {
    opacity: .5;
    filter: blur(.25px) drop-shadow(0 0 12px rgba(255, 194, 89, .48));
  }
  54%, 58% {
    opacity: .4;
    filter: blur(.35px) drop-shadow(0 0 9px rgba(255, 170, 56, .34));
  }
}

.disperazione .canto-frontispiece {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,9,12,.18), rgba(4,4,6,.42)),
    linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.38) 48%, rgba(0,0,0,.14) 76%, rgba(0,0,0,.64)),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.64)),
    url("assets/disperazione-title-iv.svg");
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  box-shadow:
    0 42px 120px rgba(0,0,0,.62),
    inset 0 0 120px rgba(0,0,0,.48),
    inset 0 0 34px rgba(76, 139, 193, .12);
}

.disperazione .canto-frontispiece::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 36%, rgba(48, 88, 119, .12), transparent 22%),
    radial-gradient(ellipse at 30% 48%, rgba(0,0,0,.58), transparent 42%),
    radial-gradient(ellipse at 82% 72%, rgba(0,0,0,.64), transparent 38%),
    linear-gradient(115deg, rgba(0,0,0,.74), rgba(6,7,9,.38) 34% 66%, rgba(0,0,0,.8)),
    repeating-linear-gradient(168deg, rgba(0,0,0,.14) 0 3px, transparent 3px 14px);
  backdrop-filter: blur(7px);
  opacity: .94;
}

.disperazione .canto-frontispiece > * {
  position: relative;
  z-index: 1;
}

.toc-entry.disperazione {
  color: #f0ddd8;
  background:
    linear-gradient(90deg, transparent 9%, rgba(199,71,75,.12) 9.5%, transparent 10% 90%, rgba(199,71,75,.12) 90.5%, transparent 91%),
    radial-gradient(ellipse at 50% 58%, rgba(100, 13, 17, .2), transparent 44%),
    linear-gradient(180deg, #0d090a, #010101 78%);
}

.toc-entry.disperazione::before {
  background:
    radial-gradient(ellipse at 26% 35%, rgba(174, 23, 24, .7) 0 8%, rgba(38, 3, 4, .78) 9% 15%, transparent 23%),
    radial-gradient(ellipse at 72% 32%, rgba(48, 96, 180, .58) 0 7%, rgba(4, 10, 34, .78) 8% 14%, transparent 22%),
    radial-gradient(ellipse at 42% 65%, rgba(190, 28, 26, .68) 0 9%, rgba(42, 4, 4, .78) 10% 17%, transparent 25%),
    radial-gradient(ellipse at 75% 72%, rgba(164, 24, 24, .62) 0 8%, rgba(37, 3, 4, .78) 9% 16%, transparent 24%),
    radial-gradient(ellipse at 23% 78%, rgba(45, 89, 172, .52) 0 7%, rgba(3, 10, 32, .76) 8% 14%, transparent 22%);
  filter: blur(8px);
  opacity: .84;
}

.toc-entry.disperazione::after {
  background:
    linear-gradient(28deg, transparent 0 30%, rgba(0,0,0,.92) 31% 36%, transparent 37% 47%, rgba(0,0,0,.9) 48% 53%, transparent 54%),
    linear-gradient(-26deg, transparent 0 42%, rgba(0,0,0,.88) 43% 48%, transparent 49% 62%, rgba(0,0,0,.9) 63% 68%, transparent 69%),
    radial-gradient(ellipse at 50% 52%, rgba(0,0,0,.95) 0 7%, transparent 13%),
    radial-gradient(ellipse at 50% 52%, rgba(118, 9, 10, .28), transparent 24%);
  mask-image: radial-gradient(ellipse at 50% 56%, black 0 62%, transparent 82%);
  filter: blur(7px);
  opacity: .82;
}

.lutto {
  --backdrop: #07090b;
  --front: #d7dfe5;
  --front-ink: #17202a;
  --paper: #f3f0e9;
  --accent: #d9e3e8;
  --gild: #8fa0aa;
  --glow: rgba(217, 227, 232, .22);
  --card-back: #07090b;
  --card-glow: rgba(217, 227, 232, .24);
  --card-accent: #d9e3e8;
}

.descent-canto.lutto,
.canto-page.lutto {
  background:
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.3) 10%, transparent 22% 78%, rgba(0,0,0,.32) 90%, rgba(0,0,0,.6) 100%),
    radial-gradient(ellipse 12% 36% at 7% 24%, rgba(184,202,207,.1), transparent 72%),
    radial-gradient(ellipse 14% 44% at 92% 62%, rgba(166,186,192,.08), transparent 74%),
    radial-gradient(ellipse 9% 28% at 16% 84%, rgba(199,213,216,.07), transparent 72%),
    linear-gradient(90deg, rgba(0,0,0,.68), transparent 27% 73%, rgba(0,0,0,.7)),
    url("assets/lutto-margin-black-ice.svg"),
    linear-gradient(90deg, rgba(3,6,8,.76), transparent 25% 75%, rgba(3,6,8,.78)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(217, 227, 232, .12)), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,.96), transparent 15%, transparent 82%, rgba(0,0,0,.98)),
    linear-gradient(180deg, var(--backdrop, #020304), #000000 100%);
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    100% 1200px,
    auto,
    auto,
    auto,
    auto;
  background-position:
    center,
    center,
    center,
    center,
    center,
    top center,
    center,
    center,
    center,
    center;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}

.lutto .canto-frontispiece {
  --front-ink: #eef3f4;
  background:
    radial-gradient(ellipse 23% 48% at 50% 48%, #000000 0 52%, rgba(0,0,0,.92) 58%, rgba(4,5,6,.78) 68%, transparent 82%),
    radial-gradient(ellipse 38% 64% at 50% 48%, rgba(0,0,0,.96) 0 44%, rgba(18,22,25,.86) 57%, rgba(79,88,93,.28) 72%, transparent 84%),
    repeating-radial-gradient(ellipse 58% 78% at 50% 48%, rgba(171,183,187,.13) 0 2px, rgba(17,20,22,.18) 7px 20px, transparent 25px 42px),
    linear-gradient(180deg, #171c20, #030405 100%);
  box-shadow:
    0 42px 120px rgba(0,0,0,.72),
    inset 0 0 160px rgba(0,0,0,.88),
    inset 0 0 36px rgba(197, 213, 218, .12);
}

.lutto .canto-number {
  display: inline-block;
  width: fit-content;
  padding: 7px 11px;
  color: #ffffff;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(233,242,244,.28);
  text-shadow:
    0 1px 2px rgba(0,0,0,.98),
    0 0 12px rgba(255,255,255,.34);
}

.toc-entry.lutto {
  color: #edf5f7;
  background:
    linear-gradient(90deg, rgba(230, 239, 241, .74) 0 24%, rgba(3, 4, 5, .98) 34% 66%, rgba(230, 239, 241, .74) 76% 100%),
    linear-gradient(180deg, #0a0c0e, #010101 100%);
}

.toc-entry.lutto::before {
  background:
    linear-gradient(90deg, transparent 0 32%, rgba(0,0,0,.98) 36% 64%, transparent 68%),
    repeating-linear-gradient(18deg, rgba(255,255,255,.16) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-16deg, rgba(174,195,204,.16) 0 1px, transparent 1px 16px),
    radial-gradient(ellipse at 50% 54%, rgba(125, 134, 138, .42) 0 15%, transparent 26%);
  filter: blur(8px);
  opacity: .84;
}

.toc-entry.lutto::after {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(123, 128, 130, .78) 0 10%, rgba(47, 50, 52, .66) 11% 18%, transparent 25%),
    linear-gradient(180deg, transparent 0 46%, rgba(154, 158, 160, .72) 47% 64%, transparent 65%),
    radial-gradient(circle at 50% 60%, rgba(169, 12, 13, .94) 0 2.4%, transparent 5%),
    radial-gradient(ellipse at 50% 84%, rgba(215, 230, 234, .18), transparent 24%);
  filter: blur(6px);
  opacity: .78;
}

.speranza {
  --backdrop: #172014;
  --front: #e7d9aa;
  --front-ink: #251e11;
  --paper: #fff4dc;
  --accent: #618743;
  --gild: #c58b37;
  --glow: rgba(231, 217, 170, .24);
  --sigil-y: 18%;
  --card-back: #22311e;
  --card-glow: rgba(231, 217, 170, .24);
  --card-accent: #e7d9aa;
}

.descent-canto.speranza,
.canto-page.speranza {
  background:
    linear-gradient(90deg, rgba(18,20,18,.42), transparent 25% 75%, rgba(18,20,18,.44)),
    url("assets/speranza-margin-fields.svg"),
    linear-gradient(90deg, rgba(196,195,171,.32), transparent 26% 74%, rgba(196,195,171,.34)),
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 18%), var(--glow, rgba(231,217,170,.22)), transparent 36%),
    linear-gradient(180deg, rgba(27,29,24,.26), transparent 18%, transparent 78%, rgba(22,23,20,.42)),
    linear-gradient(180deg, #9b9e8b, #4d594a 62%, #282b25 100%);
  background-size:
    auto,
    100% 1200px,
    auto,
    auto,
    auto,
    auto;
  background-position:
    center,
    top center,
    center,
    center,
    center,
    center;
  background-repeat:
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}

.speranza .canto-frontispiece {
  --front-ink: #fff5cc;
  background:
    linear-gradient(90deg, rgba(26,27,24,.64), rgba(49,45,38,.26) 42%, rgba(42,43,37,.18) 62%, rgba(20,22,20,.58)),
    linear-gradient(180deg, rgba(235,226,198,.06), rgba(17,19,17,.48)),
    url("assets/speranza-title-valley.svg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  text-shadow:
    0 2px 4px rgba(0,0,0,.94),
    0 0 18px rgba(0,0,0,.72);
  box-shadow:
    0 42px 120px rgba(0,0,0,.46),
    inset 0 0 118px rgba(0,0,0,.32),
    inset 0 0 32px rgba(255,238,164,.18);
}

.toc-entry.speranza {
  color: #fff1bf;
  background:
    linear-gradient(90deg, transparent 9%, rgba(231,217,170,.15) 9.5%, transparent 10% 90%, rgba(231,217,170,.15) 90.5%, transparent 91%),
    radial-gradient(circle at 50% 7%, rgba(255, 252, 210, .92) 0 10%, rgba(250, 220, 120, .46) 11% 24%, transparent 38%),
    linear-gradient(90deg, rgba(255, 245, 184, .54), transparent 18% 82%, rgba(255, 245, 184, .54)),
    linear-gradient(180deg, #d7d58f 0%, #9dc577 16%, #4f7a42 40%, #24391e 60%, #130d09 100%);
}

.toc-entry.speranza::before {
  background:
    radial-gradient(ellipse at 18% 46%, rgba(185, 190, 184, .74) 0 6%, rgba(87, 91, 88, .58) 7% 12%, transparent 18%),
    linear-gradient(180deg, transparent 0 44%, rgba(178, 184, 180, .68) 45% 64%, rgba(79, 83, 81, .42) 65% 76%, transparent 77%),
    radial-gradient(ellipse at 81% 44%, rgba(184, 190, 187, .7) 0 5%, rgba(82, 86, 85, .54) 6% 11%, transparent 17%),
    linear-gradient(180deg, transparent 0 43%, rgba(171, 178, 175, .62) 44% 61%, rgba(75, 80, 78, .38) 62% 75%, transparent 76%),
    radial-gradient(circle at 12% 62%, rgba(249, 217, 101, .94) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 15% 78%, rgba(255, 246, 188, .88) 0 1.7%, transparent 3.5%),
    radial-gradient(circle at 18% 70%, rgba(239, 116, 106, .9) 0 2.2%, transparent 4.2%),
    radial-gradient(circle at 22% 66%, rgba(220, 126, 184, .86) 0 1.9%, transparent 3.8%),
    radial-gradient(circle at 27% 60%, rgba(255, 244, 180, .92) 0 1.9%, transparent 3.8%),
    radial-gradient(circle at 34% 73%, rgba(200, 90, 152, .88) 0 2.1%, transparent 4%),
    radial-gradient(circle at 37% 84%, rgba(255, 222, 116, .86) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 42% 64%, rgba(245, 196, 78, .92) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 46% 70%, rgba(255, 246, 188, .84) 0 1.7%, transparent 3.5%),
    radial-gradient(circle at 51% 75%, rgba(245, 133, 94, .9) 0 2.2%, transparent 4.4%),
    radial-gradient(circle at 55% 83%, rgba(220, 126, 184, .82) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 59% 60%, rgba(255, 242, 176, .9) 0 1.9%, transparent 3.8%),
    radial-gradient(circle at 68% 72%, rgba(208, 104, 161, .86) 0 2%, transparent 4%),
    radial-gradient(circle at 72% 78%, rgba(255, 246, 188, .84) 0 1.7%, transparent 3.5%),
    radial-gradient(circle at 77% 63%, rgba(250, 207, 84, .92) 0 1.8%, transparent 3.6%),
    radial-gradient(circle at 82% 82%, rgba(245, 196, 78, .82) 0 1.6%, transparent 3.5%),
    radial-gradient(circle at 87% 70%, rgba(239, 116, 106, .86) 0 2.1%, transparent 4.2%),
    radial-gradient(circle at 23% 82%, rgba(255, 244, 180, .84) 0 1.6%, transparent 3.5%),
    radial-gradient(circle at 47% 86%, rgba(245, 196, 78, .82) 0 1.6%, transparent 3.5%),
    radial-gradient(circle at 73% 84%, rgba(245, 133, 94, .82) 0 1.7%, transparent 3.6%),
    repeating-linear-gradient(84deg, transparent 0 8px, rgba(66, 104, 43, .68) 9px 10px, transparent 11px 18px),
    radial-gradient(ellipse at 50% 86%, rgba(46, 76, 33, .86) 0 28%, rgba(18, 13, 9, .94) 56%, transparent 72%);
  filter: blur(4px);
  opacity: .86;
}

.toc-entry.speranza::after {
  background:
    radial-gradient(ellipse at 19% 58%, rgba(255, 232, 96, .96) 0 1.2%, rgba(64, 42, 16, .9) 1.3% 2.1%, transparent 3.2%),
    radial-gradient(ellipse at 64% 52%, rgba(255, 232, 96, .9) 0 1%, rgba(64, 42, 16, .88) 1.1% 1.9%, transparent 3%),
    radial-gradient(ellipse at 82% 56%, rgba(255, 232, 96, .88) 0 1%, rgba(64, 42, 16, .86) 1.1% 1.9%, transparent 3%),
    radial-gradient(circle at 8% 61%, rgba(244, 139, 120, .96) 0 1.1%, rgba(122, 50, 40, .84) 1.2% 2.1%, transparent 3.3%),
    radial-gradient(circle at 10% 70%, rgba(255, 245, 183, .98) 0 1.1%, rgba(236, 166, 68, .92) 1.2% 2.1%, transparent 3.4%),
    radial-gradient(circle at 18% 69%, rgba(255, 218, 118, .96) 0 1.2%, transparent 3%),
    radial-gradient(circle at 21% 78%, rgba(231, 135, 184, .96) 0 1.1%, rgba(124, 48, 91, .84) 1.2% 2.1%, transparent 3.3%),
    radial-gradient(circle at 26% 61%, rgba(255, 248, 202, .98) 0 1%, rgba(232, 178, 74, .9) 1.1% 2%, transparent 3.2%),
    radial-gradient(circle at 31% 82%, rgba(255, 232, 112, .94) 0 1%, rgba(180, 111, 38, .82) 1.1% 2%, transparent 3.2%),
    radial-gradient(circle at 35% 73%, rgba(230, 138, 179, .98) 0 1.2%, rgba(126, 48, 93, .84) 1.3% 2.2%, transparent 3.4%),
    radial-gradient(circle at 43% 65%, rgba(255, 232, 112, .98) 0 1.1%, rgba(180, 111, 38, .84) 1.2% 2.1%, transparent 3.3%),
    radial-gradient(circle at 47% 80%, rgba(255, 249, 206, .96) 0 1%, rgba(232, 178, 74, .84) 1.1% 2%, transparent 3.2%),
    radial-gradient(circle at 52% 75%, rgba(252, 158, 118, .96) 0 1.2%, rgba(140, 60, 36, .84) 1.3% 2.3%, transparent 3.5%),
    radial-gradient(circle at 60% 61%, rgba(255, 249, 206, .98) 0 1%, rgba(232, 178, 74, .88) 1.1% 2%, transparent 3.2%),
    radial-gradient(circle at 63% 82%, rgba(255, 218, 118, .92) 0 1%, transparent 3%),
    radial-gradient(circle at 69% 72%, rgba(226, 130, 178, .96) 0 1.1%, rgba(124, 45, 91, .82) 1.2% 2.1%, transparent 3.3%),
    radial-gradient(circle at 78% 64%, rgba(255, 229, 100, .98) 0 1.1%, rgba(178, 111, 36, .86) 1.2% 2.1%, transparent 3.3%),
    radial-gradient(circle at 83% 78%, rgba(255, 245, 183, .94) 0 1%, rgba(236, 166, 68, .82) 1.1% 2%, transparent 3.2%),
    radial-gradient(circle at 88% 70%, rgba(255, 159, 127, .94) 0 1.2%, rgba(132, 57, 39, .82) 1.3% 2.3%, transparent 3.5%),
    radial-gradient(circle at 92% 61%, rgba(231, 135, 184, .92) 0 1%, rgba(124, 48, 91, .78) 1.1% 2%, transparent 3.2%),
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 42%, rgba(0,0,0,.18));
  filter: blur(2px);
  opacity: .86;
}

.toc-entry.riti .toc-motif,
.toc-entry.riti .toc-opening,
.toc-entry.lutto .toc-motif,
.toc-entry.lutto .toc-opening,
.toc-entry.speranza .toc-motif,
.toc-entry.speranza .toc-opening {
  color: rgba(255, 246, 224, .9);
  -webkit-text-stroke: .18px rgba(0, 0, 0, .64);
  text-shadow:
    0 1px 1px rgba(0, 0, 0, .95),
    0 2px 5px rgba(0, 0, 0, .86),
    0 0 14px rgba(0, 0, 0, .78),
    0 0 26px rgba(0, 0, 0, .52);
}

.toc-entry.riti .toc-opening,
.toc-entry.lutto .toc-opening,
.toc-entry.speranza .toc-opening {
  border-top-color: rgba(255, 246, 224, .24);
}

@media (max-width: 860px) {
  html {
    scroll-padding-top: 72px;
    scroll-padding-bottom: 176px;
  }

  body {
    padding-bottom: calc(152px + env(safe-area-inset-bottom, 0px));
  }

  .table-page {
    padding: calc(72px + env(safe-area-inset-top, 0px)) 12px calc(152px + env(safe-area-inset-bottom, 0px));
  }

  .cover-panel,
  .canto-frontispiece,
  .manuscript {
    padding: 28px 20px;
  }

  .cover-panel {
    min-height: clamp(380px, 72vh, 560px);
    gap: 10px;
    background-position: center, center, center, center 48%, center;
  }

  .toc-entry {
    min-height: 210px;
    grid-template-columns: minmax(48px, auto) 1fr;
    grid-template-areas:
      "number title"
      "number motif"
      "opening opening";
    column-gap: 16px;
    padding: 22px 18px;
  }

  .toc-number {
    padding-right: 14px;
    font-size: .84rem;
  }

  .toc-title {
    font-size: clamp(1.35rem, 8vw, 2.4rem);
  }

  .toc-opening {
    max-height: 4.8em;
    padding: 12px 0 0;
    border-top: 1px solid rgba(238, 229, 213, .14);
    border-left: 0;
    -webkit-line-clamp: 3;
  }

  .cover-panel::before,
  .cover-panel::after {
    width: 82%;
  }

  .title-article {
    font-size: clamp(1rem, 6vw, 1.8rem);
  }

  .title-main {
    font-size: clamp(2.1rem, 12vw, 3.5rem);
  }

  .canto-frontispiece h1 {
    font-size: clamp(1.7rem, 8.6vw, 3.2rem);
    line-height: .94;
  }

  .contents-link {
    position: absolute;
  }

  .contents-float {
    display: none;
  }

  .gallery-toggle {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
  }

  .reader-effect-controls {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    bottom: auto;
    flex-direction: row;
    align-items: flex-start;
    max-width: calc(100vw - 36px);
    gap: 6px;
  }

  .reader-audio-controls {
    right: 10px;
    left: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    max-width: none;
    gap: 6px;
  }

  .chapter-select {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: auto;
    bottom: auto;
    left: 10px;
    justify-items: start;
    max-width: calc(100vw - 20px);
  }

  .ambiance-toggle,
  .ambient-sound-toggle,
  .audiobook-toggle,
  .audio-volume-control,
  .auto-scroll-toggle,
  .dark-mode-toggle,
  .chapter-select-toggle {
    min-height: 44px;
    padding-inline: 9px;
    font-size: .59rem;
    letter-spacing: .1em;
    white-space: normal;
  }

  .reader-audio-controls > button {
    width: 100%;
    padding: 8px 6px;
    text-align: center;
  }

  .reader-audio-controls .auto-scroll-toggle {
    order: 1;
  }

  .reader-audio-controls .ambient-sound-toggle {
    order: 2;
  }

  .reader-audio-controls .audiobook-toggle {
    order: 3;
  }

  .reader-audio-controls .ambient-volume-control {
    order: 4;
  }

  .reader-audio-controls .audiobook-volume-control {
    order: 5;
  }

  .audio-volume-control {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
  }

  .chapter-select-panel {
    width: min(280px, calc(100vw - 20px));
    max-height: min(62vh, 460px);
  }

  .leaf {
    width: min(100% - 16px, 980px);
    margin-top: max(72px, clamp(18px, 5vw, 76px));
  }

  .descent-canto {
    padding-top: max(72px, clamp(46px, 8vw, 120px));
  }

  .page-turner {
    grid-template-columns: 1fr;
  }

  .page-turner span,
  .page-turner a:last-child {
    text-align: left;
  }
}

@media (max-width: 560px) {
  body {
    padding-bottom: calc(172px + env(safe-area-inset-bottom, 0px));
  }

  .table-page {
    padding-inline: 8px;
    padding-bottom: calc(172px + env(safe-area-inset-bottom, 0px));
  }

  .cover-panel,
  .canto-frontispiece,
  .manuscript {
    padding: 24px 16px;
  }

  .manuscript p {
    font-size: 1rem;
    line-height: 1.74;
    margin-bottom: 1.18em;
  }

  .dropcap::first-letter {
    padding: 7px 10px 0 0;
    font-size: 4.4rem;
  }

  .title-main,
  .canto-frontispiece h1 {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .title-main {
    font-size: 3rem;
    line-height: .92;
  }

  .canto-frontispiece h1 {
    font-size: 2.35rem;
  }

  .canto-epigraph {
    font-size: 1.06rem;
    line-height: 1.48;
  }

  .motif,
  .page-turner,
  .contents-link,
  .gallery-toggle,
  .gallery-close,
  .contents-float {
    font-size: .66rem;
  }

  .reader-audio-controls > button,
  .audio-volume-control {
    min-height: 42px;
  }

  .audio-volume-text {
    white-space: normal;
  }

  .reader-effect-controls,
  .chapter-select {
    max-width: calc(50vw - 14px);
  }

  .ambiance-toggle,
  .dark-mode-toggle,
  .chapter-select-toggle {
    min-height: 40px;
    padding: 8px 7px;
    font-size: .54rem;
  }

  .chapter-select-panel {
    width: min(260px, calc(100vw - 20px));
  }

  .chapter-select-link {
    min-height: 42px;
    grid-template-columns: 34px 1fr;
  }

  .narration-cursor-light {
    width: 190px;
    height: 104px;
  }
}