/* Kandrax Rol — an open book on a desk, by candlelight.
   Day: parchment and iron-gall ink. Night (the candle is out): black vellum and ink that glows.
   Layers: the desk (body) > the leather cover (.spread::before) > the pages (.verso, .recto). */

/* ---------- tokens ---------- */
:root {
  --desk: #140d08;
  --paper: #efe3c7;
  --paper-hi: #f6eedb;
  --paper-lo: #e1cfa9;
  --page-back: #d9c59c;
  --ink: #1b1109;
  --ink-2: #33241a;
  --ink-soft: #523f2c;
  --ink-faint: rgba(27, 17, 9, .5);
  --rule: rgba(84, 58, 30, .4);
  --rubric: #801c10;
  --rubric-2: #5e150b;
  --gold: #765516;
  --gold-grad: linear-gradient(115deg, #5f4210 0%, #946b22 22%, #c9a24e 38%, #80601c 52%, #d2b263 66%, #745417 82%, #553b0e 100%);
  --link-line: rgba(128, 28, 16, .55);
  --glow: rgba(255, 190, 90, .5);
  --heading-glow: none;
  --gutter: rgba(70, 42, 14, .34);
  --edge-burn: rgba(128, 84, 34, .2);
  --stack-a: #f1e6cc;
  --stack-b: #c9b48b;
  --plate-filter: sepia(.6) saturate(.7) contrast(1.06) brightness(.97);
  --plate-blend: multiply;
  --tex-grain: url(/static/img/paper-grain.svg);
  --tex-mottle: url(/static/img/paper-stain.svg);
  --tex-fibers: none;
  --fox-color: rgba(150, 96, 40, .16);
  --leather-1: #4a1d16;
  --leather-2: #2a0f0b;
  --font-text: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-fell: 'IM Fell English', 'EB Garamond', Georgia, serif;
  --font-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --font-primer: 'IM Fell Great Primer', 'IM Fell English', Georgia, serif;
  --c-garnet: #7d1d24; --c-moss: #4f6b34; --c-slate: #4b5563; --c-none: #8a6a32;
  --pad-outer: 70px;
  --pad-inner: 54px;
  --pad-margin: 104px;
  color-scheme: light;
}
/* Night: the same tokens, twice (system preference, and the candle). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #040507; --paper: #18161b; --paper-hi: #1f1d23; --paper-lo: #131116; --page-back: #0e0d11;
    --ink: #eee4cf; --ink-2: #e0d5bc; --ink-soft: #c2b69e; --ink-faint: rgba(238, 228, 207, .45);
    --rule: rgba(214, 186, 132, .28); --rubric: #f7a580; --rubric-2: #fbbf9f; --gold: #f0d389; --gold-grad: linear-gradient(115deg, #b8913f 0%, #e9cd84 22%, #fff0c2 38%, #e0bb62 52%, #fff4d0 66%, #d4ae55 82%, #a8802f 100%);
    --link-line: rgba(247, 165, 128, .6); --glow: rgba(255, 205, 120, .65);
    --heading-glow: 0 0 14px rgba(227, 192, 106, .35), 0 0 2px rgba(227, 192, 106, .4);
    --gutter: rgba(0, 0, 0, .6); --edge-burn: rgba(0, 0, 0, .55); --stack-a: #2a272e; --stack-b: #0b0a0d;
    --plate-filter: sepia(.35) saturate(.65) brightness(.72) contrast(1.08); --plate-blend: normal;
    --tex-grain: url(/static/img/night-grain.svg); --tex-mottle: url(/static/img/night-stain.svg); --tex-fibers: none;
    --fox-color: rgba(120, 110, 170, .07); --leather-1: #1b1013; --leather-2: #09060a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: #040507; --paper: #18161b; --paper-hi: #1f1d23; --paper-lo: #131116; --page-back: #0e0d11;
  --ink: #eee4cf; --ink-2: #e0d5bc; --ink-soft: #c2b69e; --ink-faint: rgba(238, 228, 207, .45);
  --rule: rgba(214, 186, 132, .28); --rubric: #f7a580; --rubric-2: #fbbf9f; --gold: #f0d389; --gold-grad: linear-gradient(115deg, #b8913f 0%, #e9cd84 22%, #fff0c2 38%, #e0bb62 52%, #fff4d0 66%, #d4ae55 82%, #a8802f 100%);
  --link-line: rgba(247, 165, 128, .6); --glow: rgba(255, 205, 120, .65);
  --heading-glow: 0 0 14px rgba(227, 192, 106, .35), 0 0 2px rgba(227, 192, 106, .4);
  --gutter: rgba(0, 0, 0, .6); --edge-burn: rgba(0, 0, 0, .55); --stack-a: #2a272e; --stack-b: #0b0a0d;
  --plate-filter: sepia(.35) saturate(.65) brightness(.72) contrast(1.08); --plate-blend: normal;
  --tex-grain: url(/static/img/night-grain.svg); --tex-mottle: url(/static/img/night-stain.svg); --tex-fibers: none;
  --fox-color: rgba(120, 110, 170, .07); --leather-1: #1b1013; --leather-2: #09060a;
  color-scheme: dark;
}

/* ---------- the desk ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--desk); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font-family: var(--font-text); font-size: 19px; line-height: 1.56;
  font-variant-numeric: oldstyle-nums proportional-nums; font-kerning: normal;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  background-color: var(--desk);
  background-image: url(/static/img/desk-wood.svg);
  background-size: 1200px 600px;
  overflow-x: hidden;
}
:root[data-theme="dark"] body { background-image: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-image: none; } }
.candlelight {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background:
    radial-gradient(ellipse 60% 45% at 50% -6%, rgba(255, 186, 96, .16), transparent 70%),
    radial-gradient(ellipse 125% 95% at 50% 45%, transparent 62%, rgba(8, 4, 0, .28) 100%);
  animation: flicker 7s infinite;
}
:root[data-theme="dark"] .candlelight { background: radial-gradient(ellipse 50% 40% at 85% -10%, rgba(140, 160, 220, .07), transparent 70%), radial-gradient(ellipse 125% 95% at 50% 45%, transparent 60%, rgba(0, 0, 0, .38) 100%); animation: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .candlelight { background: radial-gradient(ellipse 50% 40% at 85% -10%, rgba(140, 160, 220, .07), transparent 70%), radial-gradient(ellipse 125% 95% at 50% 45%, transparent 60%, rgba(0, 0, 0, .38) 100%); animation: none; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 8% { opacity: .9; } 11% { opacity: 1; } 34% { opacity: .95; } 52% { opacity: .86; } 55% { opacity: .98; } 78% { opacity: .92; } }
.motes { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; }

/* The candle: the light of the scene, and the switch between day and night. */
.candle {
  position: absolute; top: 0; left: 50%; z-index: 6; width: 34px; height: 76px; margin-left: -17px;
  padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.candle svg { width: 100%; height: 100%; overflow: visible; }
.candle .flame { transform-origin: 20px 28px; animation: flame 2.6s ease-in-out infinite; transition: opacity .35s, transform .35s; }
.candle .glow { transform-origin: 20px 22px; animation: glow 3.4s ease-in-out infinite; }
.candle .smoke { opacity: 0; }
.candle:focus-visible { outline: 1px dashed var(--gold); outline-offset: 4px; }
@keyframes flame { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.94, 1.06) skewX(2deg); } 50% { transform: scale(1.03, .96) skewX(-1.5deg); } 75% { transform: scale(.97, 1.04) skewX(1deg); } }
@keyframes glow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .75; transform: scale(.92); } }
:root[data-theme="dark"] .candle .flame, :root[data-theme="dark"] .candle .glow { opacity: 0; transform: scale(.2, .1); animation: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .candle .flame, :root:not([data-theme="light"]) .candle .glow { opacity: 0; transform: scale(.2, .1); animation: none; } }
.candle.puff .smoke { animation: smoke 1.8s ease-out; }
@keyframes smoke { 0% { opacity: .8; transform: translateY(0) scaleY(.6); } 100% { opacity: 0; transform: translateY(-26px) scaleY(1.3); } }

/* ---------- the book ---------- */
.book { position: relative; z-index: 2; max-width: 1400px; margin: 70px auto 26px; padding: 0 26px; }
.spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.spread::before { /* the leather cover */
  content: ""; position: absolute; inset: -16px -18px -24px; z-index: 0; border-radius: 7px 7px 10px 10px;
  background-color: var(--leather-1);
  background-image: url(/static/img/leather.svg), radial-gradient(ellipse at 30% 0%, rgba(255, 220, 170, .08), transparent 60%), linear-gradient(180deg, var(--leather-1), var(--leather-2));
  background-size: 300px 300px, auto, auto;
  box-shadow: 0 50px 90px -10px rgba(0, 0, 0, .75), 0 14px 26px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 220, 160, .07), inset 0 0 50px rgba(0, 0, 0, .65);
}
.spread::after { /* the gilt fillet of the cover */
  content: ""; position: absolute; inset: -9px -11px -15px; z-index: 0; pointer-events: none; border-radius: 5px;
  border: 1px solid rgba(214, 178, 98, .32); box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(214, 178, 98, .14);
}
.page {
  --stack: 6px;
  position: relative; z-index: 1; min-width: 0; min-height: calc(100vh - 110px);
  padding: 104px var(--pad-outer) 96px;
  background-color: var(--paper);
  background-image: var(--gutter-shade), var(--fox, none), var(--tex-fibers), var(--tex-mottle), var(--tex-grain);
  background-size: auto, auto, 600px 600px, 900px 900px, 320px 320px;
  box-shadow: inset 0 0 90px var(--edge-burn), inset 0 0 14px var(--edge-burn);
}
.verso {
  padding-left: var(--pad-outer); padding-right: var(--pad-inner); border-radius: 4px 0 0 6px;
  --gutter-shade: linear-gradient(to left, var(--gutter) 0, rgba(0, 0, 0, .1) 16px, rgba(0, 0, 0, .035) 60px, transparent 130px), linear-gradient(to right, rgba(0, 0, 0, .07), transparent 24px);
  --stack: calc(3px + var(--progress, .5) * 10px);
}
.recto {
  padding-left: var(--pad-inner); padding-right: var(--pad-margin); border-radius: 0 4px 6px 0;
  --gutter-shade: linear-gradient(to right, var(--gutter) 0, rgba(0, 0, 0, .1) 16px, rgba(0, 0, 0, .035) 60px, transparent 130px), linear-gradient(to left, rgba(0, 0, 0, .07), transparent 24px);
  --stack: calc(3px + (1 - var(--progress, .5)) * 10px);
}
.recto:focus { outline: none; }
/* The edges of the other leaves: thicker on the side that holds more pages. */
.verso::before, .recto::before {
  content: ""; position: absolute; top: 4px; bottom: -6px; width: var(--stack); z-index: -1;
  background: repeating-linear-gradient(90deg, var(--stack-a) 0 1px, var(--stack-b) 1px 2px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}
.verso::before { left: calc(-1 * var(--stack)); border-radius: 4px 0 0 6px; }
.recto::before { right: calc(-1 * var(--stack)); border-radius: 0 4px 6px 0; }
.verso::after, .recto::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; z-index: -1;
  background: repeating-linear-gradient(180deg, var(--stack-a) 0 1px, var(--stack-b) 1px 2px);
}
.fox-1 { --fox: radial-gradient(circle at 88% 210px, var(--fox-color) 0 3px, transparent 9px), radial-gradient(circle at 14% calc(100% - 240px), var(--fox-color) 0 5px, transparent 16px), radial-gradient(circle at 72% 46%, var(--fox-color) 0 1px, transparent 5px); }
.fox-2 { --fox: radial-gradient(circle at 20% 160px, var(--fox-color) 0 2px, transparent 7px), radial-gradient(circle at 80% calc(100% - 150px), var(--fox-color) 0 6px, transparent 20px), radial-gradient(ellipse 40px 18px at 92% 60%, var(--fox-color), transparent); }
.fox-3 { --fox: radial-gradient(circle at 60% 120px, var(--fox-color) 0 1px, transparent 5px), radial-gradient(circle at 9% 50%, var(--fox-color) 0 4px, transparent 13px), radial-gradient(circle at 86% calc(100% - 90px), var(--fox-color) 0 2px, transparent 8px); }
.fox-4 { --fox: radial-gradient(ellipse 60px 26px at 12% 260px, var(--fox-color), transparent), radial-gradient(circle at 92% 38%, var(--fox-color) 0 3px, transparent 10px), radial-gradient(circle at 40% calc(100% - 60px), var(--fox-color) 0 2px, transparent 7px); }

/* The running heads: the folio at the outer corner, the chapters toward the gutter, and a
   double rule under them. */
.rh {
  position: absolute; top: 40px; left: var(--pad-outer); right: var(--pad-inner);
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding-bottom: 9px; border-bottom: 1px solid var(--rule);
  font-family: var(--font-sc); font-size: 14.5px; letter-spacing: .09em; color: var(--ink-soft);
}
.recto .rh { left: var(--pad-inner); right: var(--pad-outer); }
.rh::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; border-bottom: 1px solid var(--rule); opacity: .6; }
.rh ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.page .rh a { color: inherit; text-decoration: none; background: none; position: relative; transition: color .25s, text-shadow .25s; }
.page .rh a:hover, .page .rh a:focus-visible { color: var(--rubric); text-shadow: 0 0 10px var(--glow); }
.page .rh a.active { color: var(--rubric); }
.rh a.active::before { /* the silk ribbon that marks the chapter */
  content: ""; position: absolute; left: 50%; top: -62px; width: 15px; height: 54px; margin-left: -7.5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 28%, rgba(255, 255, 255, .22) 48%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .32)), var(--ribbon, var(--rubric));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transform-origin: 50% 0; animation: ribbon 1.9s cubic-bezier(.3, .7, .3, 1) both;
}
@keyframes ribbon { 0% { transform: translateY(-40px) rotate(7deg); } 45% { transform: translateY(3px) rotate(-4deg); } 65% { transform: translateY(0) rotate(2deg); } 82% { transform: rotate(-.8deg); } 100% { transform: rotate(0); } }
.rh a.active:hover::before { animation: sway 1.6s ease-in-out; }
@keyframes sway { 30% { transform: rotate(4deg); } 65% { transform: rotate(-2deg); } }
.folio-n { font-family: var(--font-fell); font-size: 16px; letter-spacing: 0; color: var(--ink-soft); font-variant-numeric: oldstyle-nums; }

/* The foot of the page: the catchwords, and the folded corner that turns the page. */
.foot { position: absolute; left: var(--pad-outer); right: var(--pad-inner); bottom: 34px; display: flex; font-family: var(--font-fell); font-style: italic; font-size: 16px; }
.recto .foot { left: var(--pad-inner); right: var(--pad-outer); justify-content: flex-end; }
.page .catch { color: var(--ink-soft); text-decoration: none; background: none; transition: color .25s, text-shadow .25s; }
.catch:hover, .catch:focus-visible { color: var(--rubric); text-shadow: 0 0 10px var(--glow); }
.dogear {
  position: absolute; right: calc(-1 * var(--pad-outer)); bottom: -34px; width: 30px; height: 30px; background: none;
  background-image: linear-gradient(to top left, var(--leather-2) 0 49%, transparent 50%), linear-gradient(to top left, transparent 50%, var(--page-back) 50%, var(--paper-lo) 75%, var(--paper) 100%);
  filter: drop-shadow(-2px -2px 2px rgba(0, 0, 0, .18)); transition: width .3s ease, height .3s ease;
}
.dogear:hover { width: 54px; height: 54px; }

/* ---------- inside a page ---------- */
.verso-in, .recto-in { position: relative; container-type: inline-size; }
.verso-in { position: sticky; top: 28px; }
/* The verso with a scroll of its own (Fede, 2026-11-09: /calendario, body class verso-scroll). The
   window scrolls the recto, as on every page, and the verso stays at the top of the window, as on
   /personajes, instead of being held by its foot. A verso taller than the window scrolls by itself
   under the pointer, and that scroll does not move the window. Under 1000 px the book has one page. */
@media (min-width: 1001px) {
  .verso-scroll .verso-in {
    max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior-y: contain;
    scrollbar-width: thin; scrollbar-color: var(--rule) transparent; scrollbar-gutter: stable;
  }
}
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--paper); color: var(--ink); padding: 8px 14px; }
.skip:focus { left: 12px; }
p { margin: 0 0 .9em; }
h1, h2, h3, h4 { font-weight: 400; text-shadow: var(--heading-glow); }
h1 { font-family: var(--font-primer); font-size: clamp(2.3rem, 3.3vw, 3.25rem); line-height: 1.05; margin: .05em 0 .45em; letter-spacing: -.005em; text-wrap: balance; }
h1.center, .center { text-align: center; }
.kicker { font-family: var(--font-sc); font-size: .8rem; letter-spacing: .17em; color: var(--rubric); margin: 0 0 .7em; }
.kicker a { color: inherit; }
.kicker--center { text-align: center; }
.rubric { font-family: var(--font-sc); font-size: 1.32rem; letter-spacing: .1em; color: var(--rubric); text-align: center; margin: 1.5em 0 .9em; text-shadow: var(--heading-glow); }
.rubric--first { margin-top: .2em; }
.rubric a { color: inherit; background: none; }
.v-h { font-family: var(--font-sc); font-size: .86rem; letter-spacing: .15em; color: var(--ink-soft); margin: 2em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--rule); text-shadow: none; }
.subtitle { font-family: var(--font-fell); font-style: italic; font-size: 1.25rem; text-align: center; color: var(--ink-2); margin: -.2em 0 .8em; }
.muted { color: var(--ink-soft); }
.small { font-size: .86em; }
.sc { font-family: var(--font-sc); letter-spacing: .08em; color: var(--ink-soft); }
.empty { font-family: var(--font-fell); font-style: italic; color: var(--ink-soft); }
.notice { font-family: var(--font-fell); font-style: italic; color: var(--ink-2); border-left: 2px solid var(--rubric); padding: .1em 0 .1em .9em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: .9em; height: .9em; vertical-align: -.08em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Links: an explicit link has a hairline of red ink; a name of the book has a dotted line. On a
   hover the ink catches the light. */
.page a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--link-line), var(--link-line)); background-size: 100% 1px; background-position: 0 94%; background-repeat: no-repeat; transition: color .25s, text-shadow .3s; }
.page a:hover, .page a:focus-visible { color: var(--rubric); text-shadow: 0 0 12px var(--glow), 0 0 2px var(--glow); }
.page a.xref { background-image: radial-gradient(circle, var(--link-line) .7px, transparent 1px); background-size: 4px 3px; background-position: 0 100%; background-repeat: repeat-x; }
.page a[target="_blank"]:not(.plate-img):not(.net):not(.cal-ep):not(.pub-tile)::after { content: "↗"; font-family: var(--font-text); font-size: .62em; vertical-align: .45em; margin-left: .12em; color: var(--ink-faint); }
.page a:focus-visible { outline: 1px dashed var(--rubric); outline-offset: 2px; }

/* Prose: justified, hyphenated, with a first-line indent like a printed book. */
.prose p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hanging-punctuation: first; }
.prose p + p { text-indent: 1.4em; margin-top: -.9em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .25em 0; }
.prose h2 { font-family: var(--font-sc); font-size: 1.28rem; letter-spacing: .08em; color: var(--rubric); text-align: center; margin: 1.8em 0 .8em; }
.prose h3 { font-family: var(--font-fell); font-style: italic; font-size: 1.32rem; margin: 1.8em 0 .5em; position: relative; }
.prose h4 { font-family: var(--font-sc); font-size: 1rem; letter-spacing: .08em; margin: 1.4em 0 .4em; color: var(--ink-2); }
.prose blockquote { margin: 1em 1.2em; font-style: italic; color: var(--ink-2); }
.prose hr { border: 0; height: 24px; background: none; text-align: center; margin: 1.6em 0; }
.prose hr::after { content: "⁂"; color: var(--ink-soft); }
.prose table { border-collapse: collapse; width: 100%; font-size: .9em; margin: 1em 0; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .35em .5em; text-align: left; vertical-align: top; }
.prose th { font-family: var(--font-sc); font-weight: 400; letter-spacing: .06em; color: var(--ink-soft); }
/* The illuminated initial: gold leaf, with a slow glint. */
.opening > p:first-child::first-letter, p.incipit::first-letter {
  float: left; font-family: var(--font-primer); font-size: 4.7em; line-height: .8; margin: .06em .1em 0 -.02em; padding: .04em .02em 0 0;
  color: var(--gold); background: var(--gold-grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: sheen 11s ease-in-out infinite; text-shadow: none;
}
@keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.opening > p:first-child { text-indent: 0; }

/* The chronicle: scenes with a red pilcrow, the hour of the video in the margin, and the
   dialogue set like a play. */
.chronicle h2 { margin-top: 1.4em; }
.chronicle h3::before { content: "¶"; color: var(--rubric); font-style: normal; margin-right: .3em; }
.chronicle h3 .ts, .chronicle .ts-line .ts { position: absolute; left: calc(100% + 16px); top: .35em; width: 80px; font-family: var(--font-fell); font-style: italic; font-size: .8rem; line-height: 1.2; color: var(--rubric); background: none; text-shadow: none; }
.chronicle .ts-line { position: relative; height: 0; margin: 0; text-indent: 0; }
.chronicle .ts-line + p { text-indent: 0; margin-top: 0; }
.chronicle .ts { color: var(--rubric); font-family: var(--font-fell); font-style: italic; font-size: .86em; background: none; }
.chronicle .ts::after { content: none !important; }
.chronicle p.line { text-align: left; text-indent: -1.3em; padding-left: 1.3em; margin: .32em 0; hyphens: manual; }
.chronicle p.line + p.line { text-indent: -1.3em; margin-top: .32em; }
.chronicle p.line + p:not(.line):not(.ts-line) { margin-top: .6em; }
.chronicle .sp { font-family: var(--font-sc); font-weight: 400; color: var(--rubric); letter-spacing: .05em; margin-right: .3em; }
.chronicle .sp a { color: inherit; }
.argument { font-style: italic; color: var(--ink-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1em 0 .4em; margin: 1.2em 0 1.4em; }
.argument p { text-align: justify; hyphens: auto; }
.argument-k { font-family: var(--font-sc); font-style: normal; color: var(--rubric); letter-spacing: .18em; font-size: .78rem; text-align: center; margin: 0 0 .6em !important; }
.key { margin: 0 0 1.6em; font-size: .88rem; color: var(--ink-soft); }
.key summary { font-family: var(--font-sc); letter-spacing: .1em; cursor: pointer; color: var(--ink-soft); }
.key[open] { border-left: 1px solid var(--rule); padding-left: 1em; }
.finis { text-align: center; font-family: var(--font-sc); letter-spacing: .22em; color: var(--rubric); margin: 2.4em 0 .6em; }

/* The title page of the book. */
.frontis { text-align: center; padding-top: 4px; }
.sigil { display: block; width: min(300px, 74%); margin: 0 auto 1.4em; color: var(--gold); overflow: visible; }
.sigil * { fill: none; stroke: currentColor; stroke-width: .6; }
.sigil .fill { fill: currentColor; stroke: none; }
.sigil text { fill: currentColor; stroke: none; font-family: var(--font-sc); font-size: 8.4px; letter-spacing: .4px; }
.sigil .ticks line { stroke-width: .5; opacity: .8; }
.sigil .ring-text { transform-origin: 100px 100px; animation: spin 300s linear infinite; }
.sigil .star { transform-origin: 100px 100px; animation: spin 520s linear infinite reverse; }
.sigil .draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 3.4s .25s cubic-bezier(.4, .2, .2, 1) forwards; }
.sigil .eye { animation: draw 3.4s .25s forwards, breathe 7s ease-in-out 3.6s infinite; transform-origin: 100px 100px; }
.sigil .pupil { animation: breathe 7s ease-in-out 3.6s infinite; transform-origin: 100px 100px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.9); } }
:root[data-theme="dark"] .sigil { filter: drop-shadow(0 0 5px rgba(227, 192, 106, .55)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sigil { filter: drop-shadow(0 0 5px rgba(227, 192, 106, .55)); } }
.frontis-k { font-family: var(--font-sc); letter-spacing: .24em; font-size: .82rem; color: var(--rubric); margin: 0; }
.frontis-title { font-family: var(--font-primer); font-size: clamp(3.6rem, 6.4vw, 5.6rem); letter-spacing: .16em; text-transform: uppercase; line-height: 1; margin: .12em 0 .08em .16em; }
.frontis-sub { font-family: var(--font-fell); font-style: italic; font-size: 1.5rem; color: var(--rubric); margin: 0; }
.frontis-rule { width: 120px; height: 7px; margin: 1.1em auto; border-top: 1px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); }
.frontis-imprint { font-family: var(--font-fell); font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.frontis-year { font-family: var(--font-sc); letter-spacing: .3em; color: var(--rubric); }
.exlibris { margin: 2em auto 0; width: 230px; padding: 14px 10px 12px; border: 3px double var(--rubric); text-align: center; transform: rotate(-1.5deg); }
.exlibris span { display: block; font-family: var(--font-sc); letter-spacing: .3em; color: var(--rubric); font-size: .8rem; }
.exlibris b { display: block; font-family: var(--font-primer); font-weight: 400; font-size: 1.6rem; }
.exlibris small { font-family: var(--font-fell); font-style: italic; color: var(--ink-soft); }
.exlibris-mark { font-family: var(--font-sc); font-size: .74rem; letter-spacing: .12em; margin: -.4em 0 1.4em; }
.exlibris-mark a { color: var(--rubric) !important; background: none !important; }

/* Contents with leaders. */
.contents, .contents ol { list-style: none; margin: 0; padding: 0; }
.contents > li { margin: .5em 0; }
.contents ol { margin: .2em 0 .5em 1.5em; }
.page a.leader { display: flex; align-items: baseline; gap: .35em; background: none; }
.l-t { font-family: var(--font-fell); font-size: 1.14rem; }
.contents ol .l-t { font-size: 1rem; }
.l-t i { color: var(--ink-soft); }
.l-dots { flex: 1; min-width: 1.2em; height: .2em; border-bottom: 2px dotted var(--ink-faint); transform: translateY(-.25em); }
.l-n { font-family: var(--font-fell); color: var(--ink-soft); min-width: 1.6em; text-align: right; }
.next-line { font-family: var(--font-sc); letter-spacing: .1em; color: var(--rubric); font-size: .86rem; margin: 1em 0 .3em; text-align: left !important; text-indent: 0 !important; }
.next-list { list-style: none; padding: 0; margin: 0 0 .6em; }
.next-list li { margin: .2em 0; }
.next-list .when { font-family: var(--font-fell); font-style: italic; }
.colophon-line { text-align: center; font-family: var(--font-fell); font-style: italic; color: var(--ink-soft); font-size: .95rem; margin-top: 1.6em; }

/* Ornaments. */
.fleuron { width: 120px; margin: 1.8em auto; color: var(--ink-soft); }
.fleuron svg, .tailpiece svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; overflow: visible; }
.fleuron .fill, .tailpiece .fill { fill: currentColor; stroke: none; }
.tailpiece { width: 70px; margin: 2.4em auto .4em; color: var(--ink-soft); opacity: .8; }

/* Plates: pictures tipped into the book. They rest in sepia and wake up in colour. */
.plate { margin: 1.2em 0; text-align: center; }
.page a.plate-img, .plate-img { display: block; position: relative; padding: 7px; background: var(--paper-hi); border: 1px solid rgba(70, 48, 24, .4); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px rgba(70, 48, 24, .2), 0 8px 16px -8px rgba(40, 25, 10, .45); }
.plate-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: var(--plate-filter); mix-blend-mode: var(--plate-blend); transition: filter 1.2s ease; }
.plate-img:hover img, .plate-img:focus-visible img, .plate-img.awake img { filter: none; mix-blend-mode: normal; }
.plate figcaption { font-family: var(--font-fell); font-style: italic; font-size: .92rem; line-height: 1.35; color: var(--ink-soft); margin-top: .8em; }
.plate figcaption b { font-family: var(--font-sc); font-style: normal; font-weight: 400; letter-spacing: .06em; color: var(--rubric); }
.plate--portrait .plate-img img { aspect-ratio: 9 / 14; }
/* The presentation image of a campaign (images/campanas/<slug>.<ext> of the content repository). */
.plate--cover { margin: .4em 0 1.1em; }
/* At night the presentation images of the campaigns (the list of /campanas and the frontispiece of a
   campaign) rest in their true colour and lighten on hover (Fede, 2026-11-05). The lower contrast
   keeps the highlights under white: about 37% more light, no burnt pixel (measured on both images).
   By day they rest in sepia and wake up in colour, like the other plates.
   The thumbnails of the episodes on the page of a campaign (.ep) do the same, and a hover on the
   title of an episode wakes its thumbnail too (Fede, 2026-11-08). */
.ep:has(.ep-title a:is(:hover, :focus-visible)) .plate-img img { filter: none; mix-blend-mode: normal; }
:root[data-theme="dark"] :is(.plate--cover, .ep) .plate-img img { filter: none; transition: filter .6s ease; }
:root[data-theme="dark"] :is(.plate--cover, .ep) .plate-img:is(:hover, :focus-visible) img,
:root[data-theme="dark"] .ep:has(.ep-title a:is(:hover, :focus-visible)) .plate-img img { filter: brightness(1.25) contrast(.95); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.plate--cover, .ep) .plate-img img { filter: none; transition: filter .6s ease; }
  :root:not([data-theme="light"]) :is(.plate--cover, .ep) .plate-img:is(:hover, :focus-visible) img,
  :root:not([data-theme="light"]) .ep:has(.ep-title a:is(:hover, :focus-visible)) .plate-img img { filter: brightness(1.25) contrast(.95); }
}
.plate--frontis { margin: 0 0 1.6em; }
.plate--small { margin: 0; }
.plate--small .plate-img { padding: 4px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(70, 48, 24, .18), 0 6px 12px -8px rgba(40, 25, 10, .5); }
.plate .dur { position: absolute; right: 12px; bottom: 11px; font-family: var(--font-fell); font-size: .74rem; background: rgba(20, 12, 6, .7); color: #efe3c7; padding: 0 6px; border-radius: 2px; }
.plate .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 32%, #b8484d, #7d1d24 55%, #4d0f14); box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(0, 0, 0, .25); transition: transform .3s; }
.plate .play svg { width: 26px; height: 26px; fill: #f3e2c4; margin-left: 4px; }
.plate-img:hover .play { transform: scale(1.08); }
.plate--video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.plate--empty { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--rule); font-family: var(--font-fell); font-style: italic; color: var(--ink-soft); }
.plates-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px; }
.plates-row .plate { margin: 0; }
.shorts-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px; margin: .6em 0 1em; }
.shorts-row--verso { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.kicker--center + .shorts-row { margin-top: .4em; }

/* Seals, shields, cartouches. */
.seal { display: block; filter: drop-shadow(0 2px 2px rgba(40, 10, 5, .45)); transition: transform .4s cubic-bezier(.3, .7, .3, 1.3); }
a:hover .seal, a:focus-visible .seal { transform: rotate(-8deg) scale(1.06); }
.shield { display: block; filter: drop-shadow(0 4px 5px rgba(30, 10, 5, .35)); }
.monogram { display: inline-block; vertical-align: middle; }
.monogram.m-dios { filter: drop-shadow(0 0 4px rgba(227, 192, 106, .35)); }
:root[data-theme="dark"] .monogram:not(.m-dios) { filter: brightness(2.6) saturate(.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .monogram:not(.m-dios) { filter: brightness(2.6) saturate(.85); } }
.arms { display: flex; justify-content: center; margin: 0 0 1em; }
.shields { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 30px; margin: 1.6em 0; }
.page a.shield-link { display: flex; flex-direction: column; align-items: center; gap: .5em; width: 132px; text-align: center; font-family: var(--font-fell); font-size: 1rem; line-height: 1.2; background: none; }
.shield-link .shield { transition: transform .5s cubic-bezier(.3, .7, .3, 1.2), filter .5s; }
.shield-link:hover .shield, .shield-link:focus-visible .shield { transform: translateY(-4px); filter: drop-shadow(0 9px 9px rgba(30, 10, 5, .3)) drop-shadow(0 0 10px rgba(227, 192, 106, .25)); }

/* Crests (server/crests.mjs). The charge of each campaign has its own movement on hover: on the
   list of the campaigns, on the page of a campaign and in the tiles of the calendar. Each movement
   starts from the shape at rest and stops on it. */
.crest :is(.ce-moonset, .ce-blade, .ce-paw, .ce-toe, .ce-wave, .ce-hood, .ce-eye, .ce-lens, .ce-star) { transform-box: fill-box; transform-origin: center; }
/* Los Dioses Olvidados: the moon becomes full and turns, the dagger goes down into it, and a light runs down the blade. */
.crest .ce-disc { opacity: 0; transition: opacity 1.2s ease; }
.crest .ce-ring { stroke-dasharray: 32; stroke-dashoffset: 32; transition: stroke-dashoffset 1.1s cubic-bezier(.5, 0, .2, 1); }
.crest .ce-moonset { transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); }
.crest .ce-blade { transition: transform .8s cubic-bezier(.3, .7, .3, 1.5); }
.crest .ce-gleam { stroke-dasharray: 10 120; stroke-dashoffset: 10; opacity: 0; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-disc { opacity: .18; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-ring { stroke-dashoffset: 0; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-moonset { transform: rotate(-10deg); }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-blade { transform: translateY(3px); }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-gleam { animation: ce-gleam 1.1s .45s ease-in-out both; }
@keyframes ce-gleam { 0% { stroke-dashoffset: 10; opacity: 0; } 15%, 80% { opacity: 1; } 100% { stroke-dashoffset: -54; opacity: 0; } }
/* Crónicas de Kandrax: the paw rises and steps, its toes press one after the other, and the waves of the lake move. */
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-paw { animation: ce-step .9s cubic-bezier(.4, 0, .3, 1) both; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-toe { animation: ce-toe .5s .5s ease-out both; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-toe:nth-child(3) { animation-delay: .57s; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-toe:nth-child(4) { animation-delay: .64s; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-toe:nth-child(5) { animation-delay: .71s; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-toe:nth-child(6) { animation-delay: .78s; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-wave { animation: ce-wave 2.8s ease-in-out infinite; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-wave--2 { animation-direction: reverse; }
@keyframes ce-step { 0%, 100% { transform: none; } 35% { transform: translateY(-6px) rotate(-5deg); } 65% { transform: translateY(1.5px); } }
@keyframes ce-toe { 0%, 100% { transform: none; } 45% { transform: scale(1.22); } }
@keyframes ce-wave { 0%, 100% { transform: none; } 25% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }
/* La Compañía del Perfil Bajo: the hood bows and the eyes open, then blink. */
.crest .ce-hood { transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.crest .ce-eye { transform: scaleY(.3); opacity: .7; transition: transform .45s ease, opacity .45s ease; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-hood { transform: translateY(2px); }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-eye { transform: none; opacity: 1; animation: ce-blink 4s 1.4s ease-in-out infinite; }
@keyframes ce-blink { 0%, 6%, 100% { transform: none; } 3% { transform: scaleY(.08); } }
/* The spin-offs: the glass searches in a small circle and the star turns. */
.crest .ce-star { transition: transform .9s cubic-bezier(.3, .7, .3, 1.3); }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-lens { animation: ce-search 2.6s ease-in-out infinite; }
:is(.shield-link:hover, .shield-link:focus-visible, .arms:hover, .pub:hover) .crest .ce-star { transform: rotate(45deg) scale(1.15); }
@keyframes ce-search { 0%, 100% { transform: none; } 25% { transform: translate(3px, -2px) rotate(-3deg); } 50% { transform: translate(0, -4px); } 75% { transform: translate(-3px, -2px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .crest *, .shield-link .shield { animation: none !important; transition: none !important; } }

/* Status and private marks. */
.status { font-family: var(--font-sc); font-size: .8rem; letter-spacing: .12em; color: var(--ink-soft); white-space: nowrap; }
.status--live { color: var(--rubric); }
.status--live::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .4em; border-radius: 50%; background: var(--rubric); box-shadow: 0 0 8px var(--rubric); vertical-align: .1em; animation: ember 2.8s ease-in-out infinite; }
@keyframes ember { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.badge-private { font-family: var(--font-sc); font-size: .72rem; letter-spacing: .1em; color: var(--rubric); white-space: nowrap; }

/* Facts, lists, clouds of names. */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25em 1em; margin: 1.2em 0; font-size: .95rem; }
.facts > div { display: contents; }
.facts dt { font-family: var(--font-sc); letter-spacing: .08em; color: var(--ink-soft); font-size: .82rem; padding-top: .18em; }
.facts dd { margin: 0; }
.facts-line { text-align: center; font-family: var(--font-fell); font-style: italic; color: var(--ink-2); }
.verso-links { list-style: none; padding: 0; margin: 1.2em 0; font-family: var(--font-fell); }
.verso-links li { margin: .3em 0; }
.verso-links li::before { content: "☙"; color: var(--rubric); margin-right: .5em; font-family: var(--font-text); }
.name-cloud { font-family: var(--font-fell); font-size: 1.08rem; line-height: 1.7; }
.name-cloud--minor { font-size: .95rem; color: var(--ink-soft); }
.cast { list-style: none; padding: 0; margin: .4em 0; }
.cast li { margin: 0 0 .8em; line-height: 1.3; }
.cast-name { font-family: var(--font-fell); font-size: 1.12rem; }
.cast-role { display: block; font-style: italic; font-size: .92rem; color: var(--ink-2); }
.cast-player { display: block; font-family: var(--font-sc); font-size: .74rem; letter-spacing: .1em; color: var(--ink-soft); }
.cast-inline { font-family: var(--font-fell); }
.scenes-box > summary { list-style: none; cursor: pointer; }
.scenes-box > summary::-webkit-details-marker { display: none; }
.scenes-box > summary::after { content: " ▾"; color: var(--rubric); font-family: var(--font-text); }
.scenes-box[open] > summary::after { content: " ▴"; }
.scenes { list-style: none; counter-reset: sc; padding: 0; margin: .4em 0; font-size: .95rem; }
.scenes li { counter-increment: sc; display: flex; gap: .6em; margin: .18em 0; line-height: 1.3; }
.scenes li::before { content: counter(sc, upper-roman); font-family: var(--font-sc); font-size: .74rem; color: var(--rubric); min-width: 2.4em; text-align: right; padding-top: .2em; }
.scenes--toc li::before { content: none; }
.scenes--toc li.d2 { padding-left: 0; font-family: var(--font-fell); }
.scenes--toc li.d3 { padding-left: 1.2em; font-size: .92em; }
.scenes a.is-here { color: var(--rubric); }
.backlinks { list-style: none; padding: 0; margin: .4em 0; font-family: var(--font-fell); }
.backlinks li { margin: .2em 0; }
.appendix { list-style: none; padding: 0; }
.appendix li { margin: .35em 0; }

/* Campaigns and episodes. */
.camp-entry .camp-title { font-family: var(--font-primer); font-size: 2.1rem; margin: 0; line-height: 1.1; }
.camp-sub { font-family: var(--font-fell); color: var(--ink-2); margin: .2em 0 .9em; }
/* The head of the page of a campaign (Fede, 2026-11-08): the shield beside the title, the subtitle
   and the status, then the presentation image. */
.camp-head { display: flex; align-items: center; gap: 20px; margin: .2em 0 1.3em; }
.camp-head .arms { flex: none; margin: 0; }
.camp-head-text { min-width: 0; }
.camp-head h1 { margin: 0 0 .12em; }
.camp-head .subtitle { text-align: left; margin: 0 0 .3em; }
.camp-status { margin: 0; }
/* The episodes of a campaign: one line each, the thumbnail (to YouTube) beside the number and the
   title (to the page of the episode). */
.episodes { list-style: none; padding: 0; margin: 0; }
.ep { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 0 18px; padding: .85em 0; border-bottom: 1px solid var(--rule); align-items: center; }
.ep:last-child { border-bottom: 0; }
.ep-nothumb { display: block; aspect-ratio: 16 / 9; border: 1px dashed var(--rule); }
.ep-k { font-family: var(--font-sc); font-size: .76rem; letter-spacing: .12em; color: var(--ink-soft); margin: 0 0 .15em; }
.ep-k a { color: inherit; }
.ep-title { font-family: var(--font-fell); font-size: 1.42rem; line-height: 1.15; margin: 0; }
.ep-title a { background: none; }
.ep.is-private { opacity: .92; }
@container (max-width: 480px) {
  .camp-head { gap: 14px; }
  .camp-head .shield { width: 60px; height: auto; }
  .ep { grid-template-columns: 104px minmax(0, 1fr); gap: 0 14px; }
  .ep-title { font-size: 1.22rem; }
}

/* Dramatis personae. */
.legend-kinds { list-style: none; padding: 0; margin: 1.4em 0; }
.legend-kinds li { display: flex; align-items: center; gap: .8em; margin: .4em 0; font-size: .95rem; }
.dp-k { font-family: var(--font-sc); letter-spacing: .14em; font-size: .8rem; color: var(--ink-soft); margin: 1.2em 0 .4em; }
.dp-list { list-style: none; padding: 0; margin: 0; }
.dp { margin: 0 0 .7em; line-height: 1.3; }
.dp-name { font-family: var(--font-fell); font-size: 1.15rem; }
.dp-role { display: block; font-size: .92rem; font-style: italic; color: var(--ink-2); }
.appear { list-style: none; padding: 0; margin: 0; }
.appear li { padding: .7em 0; border-bottom: 1px solid var(--rule); }
.appear .ap-ep { font-family: var(--font-fell); font-size: 1.12rem; }
.ap-k { font-family: var(--font-sc); font-size: .76rem; letter-spacing: .1em; color: var(--ink-soft); display: block; }
.ap-n { display: block; font-size: .88rem; color: var(--ink-soft); }
.page a.ap-first { font-family: var(--font-fell); font-style: italic; font-size: .92rem; }

/* The almanac of the real world. */
.month-nav { display: flex; justify-content: space-between; font-family: var(--font-fell); font-style: italic; margin: -.3em 0 1em; }
.almanac { margin: 1em 0; }
.al-head, .al-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.al-head span { text-align: center; font-family: var(--font-sc); font-size: .78rem; letter-spacing: .1em; color: var(--rubric); padding-bottom: .4em; border-bottom: 1px solid var(--rule); }
.al-d { position: relative; height: 3.1em; display: grid; place-items: center; font-family: var(--font-fell); font-size: 1.05rem; border-bottom: 1px solid rgba(84, 58, 30, .12); }
.page a.al-d { background: none; }
.al-d--has span { color: var(--ink); }
.al-d.is-today::before { content: ""; position: absolute; inset: 12%; border: 1.6px solid var(--rubric); border-radius: 48% 54% 46% 56% / 55% 45% 56% 44%; transform: rotate(-9deg); opacity: .85; }
.al-marks { position: absolute; left: 2px; right: 2px; bottom: 10%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 3px; }
.al-mark { display: inline-block; flex: none; border-radius: 50%; vertical-align: -.05em; background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2) 58%, var(--m3)); box-shadow: 0 1px 1px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(0, 0, 0, .25); }
.al-episodio { width: 11px; height: 11px; }
.al-short { width: 9px; height: 9px; }
.al-other { width: 9px; height: 9px; background: none; box-shadow: none; border: 1.5px solid var(--ink-soft); }
:root[data-theme="dark"] .al-mark:not(.al-other) { filter: brightness(1.35) saturate(1.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .al-mark:not(.al-other) { filter: brightness(1.35) saturate(1.1); } }
.al-legend { list-style: none; padding: 0; margin: .6em 0 0; font-size: .9rem; color: var(--ink-2); }
.al-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: .2em 1em; margin: .3em 0; }
.al-legend .lg-name { font-family: var(--font-fell); min-width: 11em; color: var(--ink); }
.al-legend .lg-k { display: inline-flex; align-items: center; gap: .4em; color: var(--ink-soft); }
.cal-type .al-mark { margin-right: .45em; vertical-align: .02em; }
.years { margin: .2em 0; font-family: var(--font-fell); }
.years b { font-family: var(--font-sc); font-weight: 400; color: var(--rubric); margin-right: .4em; }
.years a.active { color: var(--rubric); }
.cal-days { list-style: none; padding: 0; margin: 0; }
.cal-day { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) auto; gap: 0 14px; padding: .9em 0; border-bottom: 1px solid var(--rule); align-items: start; }
.cal-day .plate { width: 120px; grid-column: 3; grid-row: 1 / span 2; }
.cal-date { margin: 0; grid-row: 1 / span 2; line-height: 1.1; }
.cal-date b { display: block; font-family: var(--font-primer); font-weight: 400; font-size: 2rem; color: var(--rubric); }
.cal-date span { font-family: var(--font-fell); font-style: italic; font-size: .86rem; color: var(--ink-soft); }
.cal-day ul { list-style: none; padding: 0; margin: 0; }
.cal-e { margin: 0 0 .5em; line-height: 1.3; }
.cal-type { display: block; font-family: var(--font-sc); font-size: .74rem; letter-spacing: .1em; color: var(--ink-soft); }
.cal-t { display: block; font-family: var(--font-fell); font-size: 1.1rem; }
.cal-sub { display: block; font-size: .88rem; color: var(--ink-soft); }
/* The links of a published entry (its video on YouTube, its post on X): small stamps under the
   title, with the marks of the networks in the inks of the book. */
.cal-net { display: flex; flex-wrap: wrap; gap: .4em .55em; margin: .4em 0 .35em; }
.page a.net { display: inline-flex; align-items: center; gap: .42em; padding: .14em .7em .12em .55em; border: 1px solid var(--rule); border-radius: 3px; background: none; font-family: var(--font-sc); font-size: .8rem; letter-spacing: .09em; line-height: 1.45; color: var(--ink-2); transition: color .25s, border-color .25s, box-shadow .3s, background-color .25s; }
.page a.net:hover, .page a.net:focus-visible { color: var(--rubric); border-color: var(--link-line); background-color: rgba(128, 84, 34, .07); box-shadow: 0 0 12px var(--glow); text-shadow: none; }
@media (pointer: coarse) { .page a.net { padding: .38em .85em .34em .7em; } }
.brand { flex: none; fill: currentColor; vertical-align: -.1em; }
.brand--youtube { width: 1.34em; height: .95em; color: var(--rubric); }
.brand--x { width: .92em; height: .84em; color: var(--ink); }
/* An entry with these links stands a little apart from the next entry of its day. */
.cal-e:has(> .cal-net) { margin-bottom: 1em; }
.cal-e:has(> .cal-net):last-child { margin-bottom: .5em; }
/* The episode of a short, on YouTube: the hairline under its words, not under the mark. */
.page a.cal-ep { background-image: none; }
.page a.cal-ep > span { background-image: linear-gradient(var(--link-line), var(--link-line)); background-size: 100% 1px; background-position: 0 94%; background-repeat: no-repeat; }
.cal-ep .brand { margin-right: .32em; }
.cal-e.is-cancelled .cal-t { text-decoration: line-through; color: var(--ink-soft); }
@container (max-width: 520px) { .cal-day { grid-template-columns: 4.2em minmax(0, 1fr); } .cal-day .plate { display: none; } }

/* The entries of /calendario (2026-11-05). Each entry says at a glance what it is: a tile whose
   shape is the type (wide: an episode; tall: a short; round: any other publication) and whose colour
   is the campaign, then a line with the type, the campaign (in its colour) and the time, then the
   title. A published video shows its thumbnail in the tile; a planned one shows the wax of its
   campaign. The almanac and its legend use the same shapes and colours (.pm). */
/* The day column holds the number and three letters of the day name (Fede, 2026-11-05: the room it
   had goes to the tile of an episode). A list of other months keeps a wide column for its label. */
.cal-day--pub { grid-template-columns: 2.5em minmax(0, 1fr); scroll-margin-top: 28px; }
.cal-days--wide .cal-day--pub { grid-template-columns: 4.6em minmax(0, 1fr); }
.cal-day--pub .dw-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cal-day--pub .cal-date .dw-s { display: block; font-family: var(--font-sc); font-style: normal; font-size: .74rem; letter-spacing: .12em; margin-top: .1em; }
/* The day in the address (#d-AAAA-MM-DD): a band of gold light, as on the months of Kandrax. */
.cal-day--pub:target { background: linear-gradient(90deg, rgba(196, 150, 60, .16), transparent 85%); }
.al-d { scroll-margin-top: 60px; }
.cal-day ul.pubs { list-style: none; padding: 0; margin: 0; }
.pub { --ci-t: var(--ci); display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0 14px; align-items: start; margin: 0 0 1em; }
.pub:last-child { margin-bottom: .15em; }
.al-legend li { --ci-t: var(--ci, var(--ink)); }
:root[data-theme="dark"] .pub, :root[data-theme="dark"] .al-legend li[style] { --ci-t: var(--ci-n); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pub, :root:not([data-theme="light"]) .al-legend li[style] { --ci-t: var(--ci-n); } }
.pub-when { display: flex; flex-direction: column; align-items: center; gap: .3em; padding-top: .25em; }
.page a.pub-tile, .pub-tile { position: relative; display: grid; place-items: center; border-radius: 3px; overflow: hidden; color: #f6eedb; background: radial-gradient(circle at 34% 26%, var(--m1), var(--m2) 58%, var(--m3)); box-shadow: 0 1px 2px rgba(20, 10, 4, .4), inset 0 0 0 1px rgba(255, 240, 210, .16), inset 0 0 0 3px rgba(0, 0, 0, .1); transition: box-shadow .3s, transform .3s; }
.page a.pub-tile:hover, .page a.pub-tile:focus-visible { transform: translateY(-1px); box-shadow: 0 0 12px var(--glow), 0 1px 2px rgba(20, 10, 4, .4); }
.pub-tile--wide { width: 116px; aspect-ratio: 16 / 9; }
.pub-tile--tall { width: 34px; aspect-ratio: 9 / 16; }
.pub-tile--round { width: 40px; aspect-ratio: 1; border-radius: 50%; }
.pub-glyph { width: 34%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
.pub-glyph .f { fill: currentColor; stroke: none; }
.pub-tile--tall .pub-glyph { width: 66%; }
.pub-tile--round .pub-glyph { width: 56%; }
.pub-tile .brand--x { width: 42%; height: auto; color: #f6eedb; }
/* A thumbnail of the calendar has no overlay of the campaign colour (Fede, 2026-11-05): no multiply
   blend, the light sepia tone of the night in both themes (at night, the filter of the plates, which
   also dims it). It wakes up in colour when the pointer is on the entry. */
.pub-tile--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(.65) contrast(1.08); transition: filter 1s ease; }
:root[data-theme="dark"] .pub-tile--img img { filter: var(--plate-filter); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pub-tile--img img { filter: var(--plate-filter); } }
.pub:hover .pub-tile--img img, .pub-tile--img:focus-visible img { filter: none; }
.page a.pub-tile--img, .pub-tile--img { box-shadow: 0 0 0 2px var(--m2), 0 2px 5px rgba(20, 10, 4, .45); }
.pub-play { position: absolute; left: 3px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--m2); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.pub-play::after { content: ""; position: absolute; left: 5.5px; top: 4px; border-left: 5.5px solid #f6eedb; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
/* A planned episode or short: the crest of its campaign, set for the shape of the tile (Crests, above). */
.pub-tile--crest { color: #f0d993; }
.pub-crest { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.pub-crest-frame { fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .5; }
.pub-crest-orn { fill: currentColor; opacity: .75; }
.pub-crest .ce-wave { stroke-width: 6; }
.pub-crest .ce-ring { stroke-width: 2.6; }
.pub-body { min-width: 0; }
.pub-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .55em; margin: 0 0 .12em; font-family: var(--font-sc); font-size: .8rem; letter-spacing: .08em; line-height: 1.55; }
.pub-kind { padding: .05em .5em 0; border: 1px solid var(--ci-t); border-radius: 2px; color: var(--ci-t); white-space: nowrap; }
.pub--episodio .pub-kind { background: var(--m2); border-color: var(--m2); color: #f6eedb; }
.page a.pub-camp { color: var(--ci-t); background-image: none; }
.page a.pub-camp:hover, .page a.pub-camp:focus-visible { background-image: linear-gradient(currentColor, currentColor); }
.pub-time { font-family: var(--font-fell); font-size: .86rem; line-height: 1; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
.pub-t { margin: 0; font-family: var(--font-fell); font-size: 1.12rem; line-height: 1.28; overflow-wrap: anywhere; }
.pub-t--none { font-style: italic; font-size: 1.02rem; color: var(--ink-soft); }
.pub-sub { margin: .18em 0 0; font-size: .88rem; line-height: 1.35; color: var(--ink-soft); }
.pub .cal-net { margin: .45em 0 .1em; }
.pub.is-cancelled .pub-t { text-decoration: line-through; color: var(--ink-soft); }
.pub.is-cancelled .pub-tile { opacity: .45; filter: grayscale(.8); }
@container (max-width: 440px) {
  .cal-day--pub { grid-template-columns: minmax(0, 1fr); }
  .cal-day--pub .cal-date { display: flex; align-items: baseline; gap: .45em; margin-bottom: .55em; }
  .cal-day--pub .cal-date b { display: inline; font-size: 1.7rem; }
  .cal-day--pub .dw-l { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cal-day--pub .cal-date .dw-s { display: none; }
  .pub { grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; }
  .pub-tile--wide { width: 64px; }
  .pub-tile--tall { width: 30px; }
  .pub-tile--round { width: 36px; }
}
.pm { display: inline-block; flex: none; vertical-align: -.02em; background: linear-gradient(160deg, var(--m1), var(--m2) 55%, var(--m3)); box-shadow: 0 1px 1px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(0, 0, 0, .25); }
/* Twice the size they had (Fede, 2026-11-05), so the shapes differ at a glance: an episode is a
   bright banner with the crest of its campaign in gold, a short is a muted bar. */
.pm--episodio { width: 32px; height: 18px; border-radius: 2.5px; display: inline-grid; place-items: center; color: #f0d993; }
.pm--short { width: 11px; height: 19px; border-radius: 2px; }
.pm--otro { width: 10px; height: 10px; border-radius: 50%; background: none; box-shadow: none; border: 1.5px solid var(--ink-soft); }
.pm-crest { display: block; width: 15px; height: 15px; filter: drop-shadow(0 .5px 0 rgba(0, 0, 0, .4)); }
.al-marks .pm { margin: 0 1px; }
/* The grid of the month of /calendario: the number at the top of the cell, the marks under it, and
   the card of the day on hover (.kcard, as on the calendar of Kandrax). */
.almanac--pub .al-d { height: 3.9em; place-items: start center; padding-top: .3em; }
.almanac--pub .al-marks { bottom: 13%; gap: 3px; }
.almanac--pub .al-marks .pm { margin: 0; }
.almanac--pub .kc-cell:hover .al-d { background: rgba(196, 150, 60, .1); }
.kc-c .pm { margin-right: .45em; vertical-align: -.15em; }
@container (max-width: 480px) {
  .almanac--pub .pm--episodio { width: 25px; height: 14px; }
  .almanac--pub .pm-crest { width: 12px; height: 12px; }
  .almanac--pub .pm--short { width: 9px; height: 15px; }
  .almanac--pub .al-marks { gap: 2px; }
}
.al-legend li[style] .lg-name { color: var(--ci-t); }
:root[data-theme="dark"] .pm:not(.pm--otro):not(.pm--short), :root[data-theme="dark"] .pub-tile:not(.pub-tile--img):not(.pub-tile--crest), :root[data-theme="dark"] .pub--episodio .pub-kind { filter: brightness(1.3) saturate(1.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pm:not(.pm--otro):not(.pm--short), :root:not([data-theme="light"]) .pub-tile:not(.pub-tile--img):not(.pub-tile--crest), :root:not([data-theme="light"]) .pub--episodio .pub-kind { filter: brightness(1.3) saturate(1.1); } }
/* At night a crest tile keeps its muted inks: a little more light, no more saturation. The pale mark
   of a short needs no more light: it already shows on the black vellum, quieter than an episode. */
:root[data-theme="dark"] .pub-tile--crest { filter: brightness(1.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pub-tile--crest { filter: brightness(1.12); } }

/* The year of Kandrax. */
.wheel { display: block; width: 100%; max-width: 540px; margin: .2em auto .8em; overflow: visible; }
.wheel text { font-family: var(--font-fell); fill: var(--ink); }
.wheel .w-ring { fill: none; stroke: var(--ink-soft); stroke-width: 1; }
.wheel .w-ring--thin { stroke-width: .5; opacity: .7; }
.wheel .draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 2.6s .2s ease-out forwards; }
.wheel .w-ticks line { stroke: var(--ink-soft); stroke-width: .6; opacity: .7; }
.wheel .m-seg { fill: transparent; stroke: var(--ink-soft); stroke-width: .8; transition: fill .3s; cursor: pointer; }
.wheel .m-seg.has-events { fill: rgba(196, 150, 60, .28); }
.wheel a:hover .m-seg, .wheel a:focus .m-seg { fill: rgba(196, 150, 60, .5); }
.wheel .m-label { font-size: 14px; pointer-events: none; }
.wheel .f-star { fill: var(--gold); stroke: none; transition: transform .3s; transform-box: fill-box; transform-origin: center; }
.wheel .f-star.has-events { fill: var(--rubric); }
.wheel a:hover .f-star { transform: scale(1.4) rotate(22deg); }
.wheel .f-label { font-family: var(--font-sc); font-size: 13px; letter-spacing: .08em; fill: var(--gold); }
.wheel .center-t { font-family: var(--font-sc); font-size: 21px; letter-spacing: .3em; }
.wheel .center-s { font-family: var(--font-fell); font-style: italic; font-size: 15px; fill: var(--ink-soft); }
/* The year selector in the centre of the wheel: ‹ ● ● ›. */
.wheel .center-s--year { font-style: normal; font-size: 19px; fill: var(--ink); }
.wheel .w-years a { cursor: pointer; }
.wheel .w-hit { fill: transparent; stroke: none; }
.wheel .w-dot-c { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; transition: fill .2s; }
.wheel .w-dot:hover .w-dot-c, .wheel .w-dot:focus-visible .w-dot-c { fill: var(--gold); stroke: var(--gold); }
.wheel .w-dot.is-current .w-dot-c { fill: var(--rubric); stroke: var(--rubric); }
.wheel .w-arrow-c { fill: var(--paper-hi); stroke: var(--ink-soft); stroke-width: 1; transition: stroke .2s, fill .2s; }
.wheel .w-arrow path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.wheel .w-arrow:hover .w-arrow-c, .wheel .w-arrow:focus-visible .w-arrow-c { stroke: var(--rubric); fill: rgba(196, 150, 60, .22); }
.wheel .w-arrow:hover path, .wheel .w-arrow:focus-visible path { stroke: var(--rubric); }
.wheel a:focus { outline: none; }
.wheel a:focus-visible .w-arrow-c, .wheel a:focus-visible .w-dot-c { stroke-width: 2.2; }
.chips { display: flex; flex-wrap: wrap; gap: .3em .9em; font-family: var(--font-sc); font-size: .82rem; letter-spacing: .08em; margin: .8em 0; }
.page .chips a { background: none; color: var(--ink-soft); border-bottom: 1px solid transparent; }
.page .chips a.active { color: var(--rubric); border-bottom-color: var(--rubric); }
.kmonth, .festival { padding: 1em 0; border-bottom: 1px solid var(--rule); }
.kmonth h3, .festival h3 { font-family: var(--font-fell); font-size: 1.35rem; margin: 0 0 .5em; }
.kmonth h3 small { font-family: var(--font-sc); font-size: .72rem; letter-spacing: .1em; color: var(--ink-soft); margin-left: .4em; }
.kn { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border: 1px solid var(--rule); border-radius: 50%; font-size: .72em; color: var(--rubric); margin-right: .2em; vertical-align: .12em; }
.festival h3 { color: var(--gold); text-align: center; }
.fest-note { text-align: center; font-family: var(--font-fell); font-style: italic; color: var(--ink-soft); margin: 0 0 .5em; }
/* The year: each month a grid of thirty days (ten to a row, the week of Kandrax). A day with
   entries has one wax mark for each campaign (the colours of /calendario) and a card on hover. */
.kmonth h3 a, .festival h3 a { color: inherit; background: none; }
.kmonth h3 a:hover .kn, .kmonth h3 a:hover { color: var(--rubric); }
.kgrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0; margin: .2em 0 .4em; }
.kgrid--fest { grid-template-columns: minmax(0, 1fr); max-width: 9em; margin: .2em auto .4em; }
.kc-cell { position: relative; }
.kd { position: relative; display: block; height: 2.7em; text-align: center; font-family: var(--font-fell); font-size: .9rem; color: var(--ink-soft); padding-top: .25em; border-bottom: 1px solid rgba(84, 58, 30, .12); }
.page a.kd { color: var(--ink-faint); background: none; }
.page a.kd.has { color: var(--ink); }
.page a.kd:hover, .page a.kd:focus-visible { color: var(--rubric); }
.kd-m { position: absolute; left: 1px; right: 1px; bottom: 18%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.kd--fest { font-size: 1rem; }
.kmonth:not(.has-events) .kgrid { opacity: .75; }
.kmonth:hover, .festival:hover { position: relative; z-index: 6; }
.kcard {
  position: absolute; top: calc(100% - 4px); left: 50%; z-index: 20; width: 17.5em; max-width: 78vw; transform: translateX(-50%);
  padding: .65em .85em .55em; background: var(--paper-hi); color: var(--ink); text-align: left;
  border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 10px 24px -10px rgba(30, 15, 5, .55), 0 0 0 3px var(--paper);
  font-size: .9rem; line-height: 1.32;
  visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s .15s;
}
.kc--l .kcard { left: 0; transform: none; }
.kc--r .kcard { left: auto; right: 0; transform: none; }
@media (hover: hover) {
  .kc-cell:hover .kcard, .kc-cell:focus-within .kcard { visibility: visible; opacity: 1; transition: opacity .18s .22s, visibility 0s .22s; }
}
.kcard p { margin: 0 0 .2em; }
.kc-d { font-family: var(--font-sc); font-size: .78rem; letter-spacing: .1em; color: var(--rubric); border-bottom: 1px solid var(--rule); padding-bottom: .25em; margin-bottom: .4em !important; }
.kc-e + .kc-e { border-top: 1px dotted var(--rule); margin-top: .45em; padding-top: .4em; }
.kc-c { font-family: var(--font-fell); font-size: 1.02rem; }
.kc-c .al-mark { margin-right: .3em; }
.kcard .hl { margin-right: .35em; }
.kc-n { font-style: italic; color: var(--ink-2); }
.k-eps { font-size: .9rem; margin-top: .2em; }
.k-eps .hl { margin-right: .35em; }
.k-eps i { color: var(--ink-soft); }
.k-eps-list, .cal-day ul.k-eps-list { list-style: disc; margin: .25em 0 0; padding: 0 0 0 1.15em; font-size: .92rem; }
.k-eps-list li { margin: .1em 0; padding-left: .1em; }
.k-eps-list li::marker { color: var(--rubric); }
.k-eps-list i { color: var(--ink-soft); }

/* The page of a month: the almanac of /calendario with weeks of ten days. */
.almanac--k .al-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.almanac--k .al-d { font-size: .98rem; }
.page a.al-d--add { color: var(--ink-faint); }
.page a.al-d--add:hover, .page a.al-d--add:focus-visible { color: var(--rubric); }
.al-d:target { background: rgba(196, 150, 60, .2); }
.al-fest-row { text-align: center; margin: .7em 0 0; font-family: var(--font-fell); }
.page a.al-fest, .al-fest { display: inline-flex; align-items: center; gap: .4em; color: var(--gold); background: none; padding: .1em .6em; border-bottom: 1px solid var(--rule); }
.page a.al-fest.al-d--add { color: var(--ink-faint); }
.al-fest .al-marks { position: static; display: inline-flex; gap: 3px; }
.kmonths a.has { color: var(--ink); font-weight: 600; }
.rubric-sub { display: block; font-family: var(--font-fell); font-style: italic; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-top: .2em; }
.kday-m { scroll-margin-top: 60px; }
/* The day column: the date, then a thumbnail for each episode of the day (Fede, 2026-11-05: the
   column is wider for them). The tiles of /calendario: light sepia until the pointer is on the day. */
.cal-day.kday-m { grid-template-columns: clamp(120px, 28cqi, 172px) minmax(0, 1fr); }
.kday-eps { display: flex; flex-direction: column; gap: 10px; margin: .6em 0 0; }
.kday-eps .pub-tile--wide { width: 100%; }
.kday-m:hover .kday-eps img { filter: none; }
/* When the thumbnails make the day taller than its entries, the last entry grows to the bottom of the
   day: its line in the colour of the campaign goes down to there, and its list of episodes sits at
   the bottom (Fede, 2026-11-05). */
.cal-day.kday-m > ul { align-self: stretch; display: flex; flex-direction: column; }
.kday-m .kentry { display: flex; flex-direction: column; }
.kday-m .kentry:last-child { flex: 1 0 auto; margin-bottom: 0; }
.kday-m .kentry .k-eps-list { margin-top: auto; padding-top: .25em; }
@container (max-width: 480px) {
  .cal-day.kday-m { grid-template-columns: minmax(0, 1fr); }
  .kday-m .cal-date { grid-row: auto; display: flex; align-items: baseline; gap: .4em; margin-bottom: .3em; }
  .kday-m .cal-date b { display: inline; }
  .kday-eps { flex-direction: row; flex-wrap: wrap; gap: 8px; margin: .2em 0 .8em; }
  .kday-eps .pub-tile--wide { width: 104px; }
}
.kday-m:target { background: linear-gradient(90deg, rgba(196, 150, 60, .16), transparent 85%); }
.kentry { margin: 0 0 .9em; padding-left: .7em; border-left: 3px solid var(--c-none); line-height: 1.35; }
.kentry.c-garnet { border-left-color: var(--c-garnet); } .kentry.c-moss { border-left-color: var(--c-moss); } .kentry.c-slate { border-left-color: var(--c-slate); }
.kentry .cal-type { margin-bottom: .2em; }
.kentry .halves { margin: .1em 0 .25em; }
.kentry .n { margin: .1em 0; font-size: .92rem; font-style: italic; color: var(--ink-2); }
.page .kentry a.ev-edit { font-family: var(--font-sc); font-size: .7rem; letter-spacing: .08em; color: var(--rubric); margin-left: .5em; }
.ep-days { margin: .2em 0; font-family: var(--font-fell); }
.ep-days .sc { margin-right: .4em; font-size: .85rem; }

/* The boxes of the episodes in the form. */
.kf-eps { border: 0; padding: 0; margin: 0 0 .8em; min-width: 0; }
.kf-eps legend { padding: 0; }
.eps { display: flex; flex-wrap: wrap; gap: .35em .45em; }
.ep-box { display: inline-flex; align-items: center; gap: .25em; font-family: var(--font-fell); font-size: .95rem; padding: .15em .5em .1em .35em; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; }
.ep-box:has(input:checked) { border-color: var(--rubric); background: rgba(196, 150, 60, .14); }
.ep-box input { accent-color: var(--rubric); margin: 0; }
.events { list-style: none; padding: 0; margin: 0; }
/* One day of one campaign: the day, then its two halves side by side (Mañana | Tarde). */
.events li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: .15em .8em; padding: .35em 0 .35em .7em; border-left: 3px solid var(--c-none); margin: .4em 0; scroll-margin-top: 60px; }
.events li.c-garnet { border-left-color: var(--c-garnet); }
.events li.c-moss { border-left-color: var(--c-moss); }
.events li.c-slate { border-left-color: var(--c-slate); }
.events li:target { background: linear-gradient(90deg, rgba(196, 150, 60, .16), transparent 80%); }
.events .d { font-family: var(--font-sc); font-size: .78rem; letter-spacing: .06em; color: var(--ink-soft); padding-top: .2em; grid-row: span 3; }
.events .halves, .events .meta, .events .n { grid-column: 2; }
.halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); line-height: 1.35; }
.half { display: flex; flex-direction: column; gap: .05em; min-width: 0; }
.half + .half { border-left: 1px solid var(--rule); padding-left: .8em; }
.half:first-child { padding-right: .8em; }
.hl { font-family: var(--font-sc); font-size: .68rem; letter-spacing: .14em; color: var(--ink-soft); }
.ht { overflow-wrap: break-word; hyphens: auto; }
.ht .none { color: var(--ink-faint); }
.events .meta { font-size: .9rem; }
.events .meta:empty { display: none; }
.events .n { display: block; font-size: .9rem; color: var(--ink-2); font-style: italic; }
.page .events a.ev-camp { font-family: var(--font-sc); font-size: .7rem; letter-spacing: .06em; color: var(--ink-soft); }
.page .events a.ev-edit, .page .fest-add a { font-family: var(--font-sc); font-size: .7rem; letter-spacing: .08em; color: var(--rubric); margin-left: .5em; }
.fest-add { text-align: center; margin: .2em 0 0; }
.page a.kd.add { color: var(--ink-soft); background: none; }
.page a.kd.add:hover, .page a.kd.add:focus-visible { color: var(--rubric); background: radial-gradient(circle, rgba(128, 28, 16, .12) 0 42%, transparent 46%); }
.page a.kd.cur { color: var(--rubric); font-weight: 600; box-shadow: inset 0 -2px 0 var(--rubric); }
@container (max-width: 480px) {
  .events li { grid-template-columns: minmax(0, 1fr); }
  .events .d { grid-row: auto; }
  .events .halves, .events .meta, .events .n { grid-column: 1; }
}

@supports (animation-timeline: view()) {
  .ep, .appear li, .kmonth.has-events { animation: ink-appear linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
}
@keyframes ink-appear { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }

/* The codex: its sections are books on a shelf. */
.shelf { position: relative; display: flex; align-items: flex-end; gap: 5px; min-height: 270px; padding: 0 12px; margin: 1.8em 0 2.2em; }
.shelf::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -14px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, #6b4524, #4a2d15 60%, #2e1b0c); box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .5); }
.page a.spine {
  position: relative; display: block; width: 46px; height: var(--h, 210px); border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(255, 255, 255, .1) 28%, rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .45)), url(/static/img/leather.svg), var(--leather);
  background-size: auto, 200px 200px, auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 2px 0 3px rgba(0, 0, 0, .25);
  transition: transform .4s cubic-bezier(.3, .7, .3, 1.2), box-shadow .4s;
}
.spine::before, .spine::after { content: ""; position: absolute; left: 4px; right: 4px; height: 7px; border-top: 1px solid rgba(233, 207, 134, .75); border-bottom: 1px solid rgba(233, 207, 134, .75); }
.spine::before { top: 16px; } .spine::after { bottom: 16px; }
.spine span { position: absolute; inset: 30px 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-sc); font-size: 13px; letter-spacing: .08em; color: #e9cf86; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); white-space: nowrap; }
.spine:hover, .spine:focus-visible { transform: translateY(-12px); }
.spine.is-current { transform: translateY(-18px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 18px rgba(233, 207, 134, .35); }
.articles { list-style: none; padding: 0; margin: 0; }
.articles li { margin: 0 0 1em; }
.art-t { font-family: var(--font-fell); font-size: 1.2rem; }
.art-x { display: block; font-size: .94rem; color: var(--ink-2); text-align: justify; hyphens: auto; }
.art-d { display: block; font-family: var(--font-fell); font-style: italic; font-size: .85rem; color: var(--ink-soft); }
.articles--big .art-t { font-size: 1.5rem; }
.article img { max-width: 100%; height: auto; }
.article .plate img { aspect-ratio: auto; object-fit: contain; }

/* The analytic index. */
.seek { display: block; margin: 1.4em 0 1em; }
.seek span { display: block; font-family: var(--font-sc); font-size: .8rem; letter-spacing: .14em; color: var(--rubric); }
.seek input { width: 100%; font: inherit; font-family: var(--font-fell); font-size: 1.25rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-soft); padding: .3em 0; outline: none; }
.seek input:focus { border-bottom-color: var(--rubric); box-shadow: 0 6px 12px -10px var(--glow); }
.seek input::placeholder { color: var(--ink-soft); opacity: .85; font-style: italic; }
.letters { font-family: var(--font-primer); font-size: 1.3rem; line-height: 1.6; word-spacing: .2em; }
.page .letters a { background: none; color: var(--rubric); }
.ai-letter { margin: 0 0 .8em; }
.ai-L { font-family: var(--font-primer); font-size: 2.4rem; color: var(--rubric); margin: .4em 0 .1em; line-height: 1; }
.ai-letter ul { list-style: none; padding: 0; margin: 0; }
.ai-letter li { margin: .15em 0; padding-left: 1em; text-indent: -1em; line-height: 1.35; }
.ai-n { font-family: var(--font-fell); font-size: 1.06rem; }
.ai-k { font-style: italic; color: var(--ink-soft); font-size: .9rem; }
.ai-refs { font-size: .88rem; color: var(--ink-2); }

/* Portraits: a gilded oval frame, the image in sepia until the reader looks at it. */
.portrait { margin: 0 auto; width: 236px; padding: 7px; border-radius: 50%; background: conic-gradient(from 210deg, #6b4c16, #e8cd84, #9a7128, #f4e0a2, #7d5a1c, #d9b964, #6b4c16); box-shadow: 0 12px 24px -10px rgba(30, 15, 5, .6), 0 0 0 1px rgba(60, 40, 10, .35); }
.portrait-frame { display: block; position: relative; aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; border: 3px solid var(--paper); background: var(--paper-lo); }
.portrait-frame::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 22px rgba(30, 15, 5, .45); pointer-events: none; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--plate-filter); transition: filter 1.2s ease; }
.portrait:hover img, .portrait.awake img { filter: none; }
.cameo { display: inline-block; flex: none; width: var(--cameo, 44px); aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; vertical-align: middle; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px #a47b2c, 0 3px 6px -2px rgba(30, 15, 5, .5); background: var(--paper-lo); }
.cameo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--plate-filter); transition: filter .8s ease; }
a:hover .cameo img, a:focus-visible .cameo img { filter: none; }
.cameos { list-style: none; padding: 0; margin: .6em 0 1em; display: flex; flex-wrap: wrap; gap: .9em 1.1em; }
.cameos li { margin: 0; }
.page .cameos a { display: flex; flex-direction: column; align-items: center; gap: .35em; background: none; font-family: var(--font-fell); font-size: .98rem; line-height: 1.1; text-align: center; max-width: 6.5em; }
.cameos--minor { margin-top: -.2em; }
.page .cameos--minor a { font-size: .86rem; color: var(--ink-2); }
.dp { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: .8em; align-items: center; }
.dp > .dp-face { grid-row: span 2; justify-self: center; background: none; }
.dp-name, .dp-role { grid-column: 2; }
.dp-name { justify-self: start; }
.cast li { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: .8em; align-items: center; }
.cast li > .cast-face { grid-row: span 3; justify-self: center; background: none; }
.cast li > :not(.cast-face) { grid-column: 2; }
.cast li > .cast-name { justify-self: start; }
.mnote img.mn-portrait { float: left; width: 64px; aspect-ratio: 4 / 5; height: auto; border-radius: 50%; margin: 2px 12px 4px 0; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px #a47b2c; }
:root[data-theme="dark"] .portrait { background: conic-gradient(from 210deg, #8a6420, #ffe8a8, #b88c3a, #fff3c4, #9a7128, #f0d389, #8a6420); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portrait { background: conic-gradient(from 210deg, #8a6420, #ffe8a8, #b88c3a, #fff3c4, #9a7128, #f0d389, #8a6420); } }

/* The note in the margin, written when a reader points at a link. */
.mnote {
  position: absolute; z-index: 40; width: 270px; padding: 16px 18px 14px; pointer-events: none;
  background-color: var(--paper-hi); background-image: var(--tex-grain); background-size: 320px 320px;
  color: var(--ink); font-size: .9rem; line-height: 1.38; text-align: left;
  box-shadow: 0 14px 30px -10px rgba(25, 12, 4, .55), 0 0 0 1px rgba(84, 58, 30, .22);
  opacity: 0; filter: blur(4px); transform: rotate(var(--tilt, -1deg)) translateY(4px);
  transition: opacity .35s ease, filter .45s ease, transform .35s ease;
}
.mnote.on { opacity: 1; filter: none; transform: rotate(var(--tilt, -1deg)); }
.mnote .mn-k { font-family: var(--font-sc); font-size: .7rem; letter-spacing: .12em; color: var(--rubric); margin: 0 0 .2em; }
.mnote .mn-t { font-family: var(--font-fell); font-size: 1.16rem; line-height: 1.15; margin: 0 0 .35em; }
.mnote .mn-x { font-style: italic; color: var(--ink-2); margin: 0; }
.mnote img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 .6em; filter: var(--plate-filter); mix-blend-mode: var(--plate-blend); }
/* The note of an episode on the page of a campaign: its picture has the tones of the thumbnail,
   which the hover of the title wakes (Fede, 2026-11-08; «.ep» near the presentation image). */
.mnote--ep img { filter: none; mix-blend-mode: normal; }
:root[data-theme="dark"] .mnote--ep img { filter: brightness(1.25) contrast(.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mnote--ep img { filter: brightness(1.25) contrast(.95); } }
.mnote .mn-f { font-family: var(--font-fell); font-style: italic; font-size: .8rem; color: var(--ink-soft); margin: .4em 0 0; text-align: right; }

/* Under the book: the colophon on the desk. */
.colophon { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.6em; padding: 26px 20px 40px; font-family: var(--font-sc); font-size: .78rem; letter-spacing: .14em; color: rgba(233, 214, 175, .66); }
.colophon a { color: rgba(233, 214, 175, .86); text-decoration: none; }
.colophon a:hover { color: #f3dfae; text-shadow: 0 0 10px rgba(255, 190, 90, .5); }
.colophon .keys { color: rgba(233, 214, 175, .5); }

/* The form of a day of the calendar of Kandrax (private copy only): ink on the page, no boxes of an
   application. A field is a line to write on; the buttons are stamps of red ink. */
.notice--ok { border-left-color: var(--gold); }
.notice--error { color: var(--rubric); border-left-width: 3px; font-style: normal; }
.notice code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .85em; font-style: normal; }
.ed-year { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; font-family: var(--font-fell); margin: .4em 0 1em; }
.ed-year b { font-family: var(--font-sc); font-weight: 400; letter-spacing: .08em; color: var(--ink-2); flex: 1; text-align: center; }
.kform { margin: 0 0 1.6em; padding: .2em 0 .6em .9em; border-left: 3px solid var(--c-none); scroll-margin-top: 60px; }
.kform.c-garnet { border-left-color: var(--c-garnet); } .kform.c-moss { border-left-color: var(--c-moss); } .kform.c-slate { border-left-color: var(--c-slate); }
.kform--new { border-left-style: dashed; border-left-color: var(--rule); }
.kform:target { background: linear-gradient(90deg, rgba(196, 150, 60, .12), transparent 70%); }
.kform-h { font-family: var(--font-fell); font-size: 1.2rem; font-weight: 400; margin: 0 0 .5em; }
.kform-h a { color: inherit; }
.kform-halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1em; }
.kf { display: block; margin: 0 0 .7em; }
.kf-l { display: block; font-family: var(--font-sc); font-size: .74rem; letter-spacing: .13em; color: var(--ink-soft); margin-bottom: .2em; }
.kf-l small { font-family: var(--font-fell); font-style: italic; letter-spacing: 0; font-size: .95em; }
.kf--inline { display: flex; align-items: baseline; gap: .8em; flex-wrap: wrap; }
.kf--inline .kf-l { margin: 0; }
.kf-help { font-family: var(--font-fell); font-style: italic; font-size: .88rem; color: var(--ink-soft); margin: -.5em 0 .8em; }
.kf-now { font-size: .92rem; color: var(--ink-2); background: rgba(196, 150, 60, .12); padding: .3em .6em; margin: 0 0 .7em; }
.kform textarea, .kform select {
  font: inherit; font-size: 1rem; color: var(--ink); background: rgba(255, 250, 235, .35); width: 100%;
  border: 0; border-bottom: 1px solid var(--ink-soft); border-radius: 0; padding: .3em .2em; resize: vertical; line-height: 1.4;
}
.kform select { width: auto; max-width: 100%; background: transparent; padding-right: 1em; }
.kform select option { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .kform textarea { background: rgba(255, 255, 255, .04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kform textarea { background: rgba(255, 255, 255, .04); } }
.kform textarea:focus, .kform select:focus { outline: none; border-bottom: 2px solid var(--rubric); background: rgba(196, 150, 60, .1); }
.kform-actions { display: flex; gap: .8em; align-items: center; margin-top: .3em; }
.btn { font-family: var(--font-sc); font-size: .86rem; letter-spacing: .12em; color: var(--paper-hi); background: var(--rubric); border: 1px solid var(--rubric-2); border-radius: 2px; padding: .45em 1.2em .35em; cursor: pointer; box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
:root[data-theme="dark"] .btn { color: #1a1210; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color: #1a1210; } }
.btn:hover, .btn:focus-visible { filter: brightness(1.1); }
.btn--quiet { background: none; color: var(--rubric); border-color: transparent; box-shadow: none; padding-left: .4em; padding-right: .4em; }
:root[data-theme="dark"] .btn--quiet { color: var(--rubric); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--quiet { color: var(--rubric); } }
.btn--quiet:hover, .btn--quiet:focus-visible { text-decoration: underline; filter: none; }
@container (max-width: 480px) { .kform-halves { grid-template-columns: minmax(0, 1fr); } }
.kform[aria-busy="true"] .btn { opacity: .55; cursor: progress; }

/* The small-screen book: one page, the index in a ribbon tab. */
.mnav { display: none; }
@media (max-width: 1000px) {
  body { font-size: 18px; }
  .book { margin: 64px 10px 18px; padding: 0; }
  .spread { grid-template-columns: minmax(0, 1fr); }
  .spread::before { inset: -10px -8px -14px; }
  .spread::after { inset: -6px -5px -9px; }
  .page { min-height: 0; padding: 26px 22px 30px; border-radius: 0; --gutter-shade: linear-gradient(to left, rgba(0, 0, 0, .08), transparent 20px), linear-gradient(to right, rgba(0, 0, 0, .06), transparent 20px); }
  .verso { padding-top: 22px; padding-bottom: 6px; box-shadow: inset 0 60px 60px -60px var(--edge-burn); }
  .recto { padding-top: 6px; padding-bottom: 70px; box-shadow: inset 0 -80px 80px -80px var(--edge-burn); }
  .verso::before, .verso::after { display: none; }
  .recto::before, .recto::after { display: none; }
  .rh { display: none; }
  .verso-in { position: static; }
  .foot { left: 22px; right: 22px; bottom: 26px; }
  .verso .foot { display: none; }
  .recto .foot { justify-content: space-between; }
  .dogear { right: -22px; bottom: -26px; }
  .recto-in::before { content: ""; display: block; width: 90px; height: 1px; margin: 1.6em auto 2em; border-top: 1px solid var(--rule); }
  .mnav { display: block; position: relative; z-index: 3; grid-column: 1; background-color: var(--paper); background-image: var(--tex-grain); background-size: 320px 320px; border-bottom: 1px solid var(--rule); }
  .mnav summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; padding: 16px 22px 12px; font-family: var(--font-sc); letter-spacing: .16em; cursor: pointer; color: var(--ink); }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav-title { font-size: 1.05rem; }
  .mnav-open { color: var(--rubric); font-size: .9rem; }
  .mnav-open::after { content: " ☰"; letter-spacing: 0; }
  .mnav[open] .mnav-open::after { content: " ×"; }
  .mnav ul { list-style: none; margin: 0; padding: 4px 22px 18px; columns: 2; column-gap: 24px; }
  .mnav li a { display: block; padding: 7px 0; font-family: var(--font-fell); font-size: 1.12rem; color: var(--ink); text-decoration: none; }
  .mnav li a.active { color: var(--rubric); }
  .chronicle h3 .ts, .chronicle .ts-line .ts { position: static; display: inline-block; width: auto; margin-left: .3em; }
  .chronicle .ts-line { height: auto; margin: .6em 0 .2em; }
  .candle { width: 28px; height: 62px; margin-left: -14px; }
  .colophon .keys { display: none; }
}
@media (max-width: 1250px) and (min-width: 1001px) {
  :root { --pad-outer: 52px; --pad-inner: 40px; --pad-margin: 92px; }
  body { font-size: 18px; }
  .rh { font-size: 13px; }
  .rh ul { gap: 4px 14px; }
}
@media (max-width: 520px) {
  .page { padding-left: 18px; padding-right: 18px; }
  h1 { font-size: 2.1rem; }
  .frontis-title { font-size: 3.1rem; letter-spacing: .12em; }
}

/* Page turns between the pages of the book (cross-document view transitions). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) { animation-duration: .62s; }
  ::view-transition-old(root) { animation: .62s cubic-bezier(.45, .05, .25, 1) both turn-old; }
  ::view-transition-new(root) { animation: .62s cubic-bezier(.45, .05, .25, 1) both turn-new; }
  html:active-view-transition-type(back)::view-transition-new(root) { animation-name: turn-new-back; }
  html:active-view-transition-type(back)::view-transition-old(root) { animation-name: turn-old-back; }
}
@keyframes turn-new { from { clip-path: polygon(104% 0, 130% 0, 130% 100%, 100% 100%); } to { clip-path: polygon(-30% 0, 130% 0, 130% 100%, 0 100%); } }
@keyframes turn-old { from { filter: brightness(1); } to { filter: brightness(.7); } }
@keyframes turn-new-back { from { clip-path: polygon(-30% 0, -4% 0, 0 100%, -30% 100%); } to { clip-path: polygon(-30% 0, 130% 0, 100% 100%, -30% 100%); } }
@keyframes turn-old-back { from { filter: brightness(1); } to { filter: brightness(.7); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ink-in { -webkit-mask-image: none !important; mask-image: none !important; }
  .sigil .draw, .wheel .draw { stroke-dashoffset: 0 !important; }
}

/* The title writes itself: the ink runs from left to right. */
.ink-in {
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%); mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: ink-in 1.8s .15s cubic-bezier(.35, .6, .2, 1) both;
}
@keyframes ink-in { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

@media print {
  body { background: #fff; }
  .candle, .candlelight, .motes, .rh, .foot, .mnav, .colophon { display: none !important; }
  .spread { display: block; }
  .spread::before, .spread::after, .page::before, .page::after { display: none; }
  .page { background: none; box-shadow: none; padding: 0; min-height: 0; }
}