/* Lontra the Wizard · Codex Lontrae
   Pigmentos, tipografia, a folha de pergaminho, o modelo de capítulo, as cenas interativas,
   a capa e a contracapa, o celular e o reduced motion. */

/* ───────── pigmentos e medidas ───────── */
:root {
  --vellum: #efe3c8;
  --vellum-shade: #d9c7a0;
  --ink: #2a1d14;
  --ink-soft: rgba(42, 29, 20, 0.72);
  --vermilion: #b8321f;
  --lapis: #1f3f8f;
  --verdigris: #3f8f6b;
  --gold: #c9a227;
  --gold-deep: #8a6a14;
  --gold-light: #f3dc8a;
  --desk: #17110c;
  --gem: #c6ff70;
  --gothic: "UnifrakturMaguntia", "Old English Text MT", serif;
  --text: "EB Garamond", Garamond, "Times New Roman", serif;
  --gold-gradient: linear-gradient(110deg, var(--gold-deep) 0%, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, var(--gold-deep) 100%);
  --sheen-x: 50%;
  --shelf-h: 56px;
  --page-w: 1180px;
  --page-inner: calc(var(--frame) + var(--frame-gap) + 2.6%);
  --page-outer: calc(var(--frame) + var(--frame-gap) + 1.6%);
  --frame: 44px;                       /* espessura da borda iluminada */
  --frame-gap: 8px;                    /* folga entre a borda da folha e a moldura */
  --page-top: calc(var(--frame) + var(--frame-gap) + clamp(14px, 2.4vw, 30px));
  --page-bottom: calc(var(--frame) + var(--frame-gap) + clamp(40px, 5vw, 64px));
  --margin-col: 24%;
  --margin-gap: 4%;
  --initial-w: clamp(84px, 9vw, 118px);
  --line: 1.55;
  color-scheme: light;
}

/* ───────── base ───────── */
* { box-sizing: border-box; }
html { background: var(--desk); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.has-gsap:not(.is-reduced) { scroll-behavior: auto; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: var(--desk) url("assets/manuscript/desk-1024.webp") repeat;
  background-size: 1024px;
  font: 400 1.1875rem/var(--line) var(--text);
  font-feature-settings: "liga", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--lapis); }
img, video, svg { max-width: 100%; height: auto; }
img, video { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { display: inline-block; min-width: 1.3em; padding: 0 0.3em; border: 1px solid var(--ink); border-radius: 3px; font: 600 0.8em/1.4 var(--text); text-align: center; }
::selection { background: var(--lapis); color: var(--vellum); }
:focus-visible { outline: 2px solid var(--gem); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.skip-link:focus { position: fixed; z-index: 400; top: 12px; left: 12px; padding: 10px 14px; background: var(--vellum); color: var(--ink); font-variant-caps: small-caps; }

/* ───────── tipos ───────── */
.small-caps, .label, .running-head, .tabula__chapter, .tabula__folio, .gloss__label, .instrument__label, .tab, .call, .media__caption, .legend, .phylactery__counter, .medallion__label, .ring__name, .herald__session, .herald__previously, .map__title, .map__card-kind, .sheet__class, .explicit, .tabula-button, .language-switcher, .cover__edition, .cover__warning, .cover__hint, .band, .leader-card__role, .enemy__tag, .block__handle, .roll, .seal__text, .back-cover__links, .credits__sub, .tabula-panel__title, .manifest__copy, .map__back, .map__travel, .hidden-creature__label {
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
}
.label { margin: 0 0 0.6rem; color: var(--vermilion); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.14em; }
.gold-text {
  color: var(--gold);
  background: var(--gold-gradient);
  background-size: 220% 100%;
  background-position: var(--sheen-x) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rubric { margin: 0; font-family: var(--gothic); font-weight: 400; line-height: 1.05; color: var(--vermilion); text-wrap: balance; }
.rubric i { font-style: normal; color: var(--lapis); }
.rubric--incipit { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
.rubric--tabula, .rubric--colophon { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; }
.rubric--tabula i, .rubric--colophon i { font-style: normal; }
.chapter .rubric { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.lead { margin: 0.4rem 0 0; font-style: italic; font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.35; color: var(--ink); }
.copy { margin: 0; }
.pilcrow { color: var(--vermilion); font-weight: 600; }
.pilcrow--red { color: var(--vermilion); margin-right: 0.3em; }
.manicule { width: 1.25em; height: 1.25em; flex: none; fill: var(--vermilion); vertical-align: -0.2em; }

/* ───────── cabeçalho e painel ───────── */
.shelf {
  position: fixed; z-index: 120; top: 0; left: 0; right: 0; height: var(--shelf-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(14px, 2.5vw, 28px);
  color: var(--vellum);
  background: linear-gradient(rgba(23, 17, 12, 0.94), rgba(23, 17, 12, 0.82));
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--vellum); font-family: var(--gothic); font-size: 1.35rem; line-height: 1; }
.brand__mark { color: var(--gold); font-size: 0.9rem; }
.shelf__actions { display: flex; align-items: center; gap: 18px; }
.tabula-button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px;
  border: 1px solid rgba(201, 162, 39, 0.55); background: rgba(239, 227, 200, 0.06); color: var(--vellum);
  font-size: 0.86rem; letter-spacing: 0.12em;
}
.tabula-button:hover, .tabula-button:focus-visible, .tabula-button[aria-expanded="true"] { background: var(--gold); color: var(--desk); border-color: var(--gold); }
.tabula-button__current { color: var(--gold-light); font-style: italic; font-variant-caps: normal; letter-spacing: 0; text-transform: none; }
.tabula-button[aria-expanded="true"] .tabula-button__current { color: var(--desk); }
.tabula-button__current:empty { display: none; }
.language-switcher { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; letter-spacing: 0.1em; color: rgba(239, 227, 200, 0.7); }
.language-switcher button { min-width: 32px; min-height: 32px; padding: 0; border: 1px solid transparent; background: transparent; color: inherit; }
.language-switcher button:hover, .language-switcher button:focus-visible { color: var(--vellum); border-color: rgba(201, 162, 39, 0.55); }
.language-switcher button[aria-pressed="true"] { color: var(--desk); background: var(--gold); border-color: var(--gold); }

.tabula-panel {
  position: fixed; z-index: 115; top: calc(var(--shelf-h) + 10px); right: clamp(10px, 2vw, 24px);
  width: min(520px, calc(100% - 20px)); max-height: calc(100vh - var(--shelf-h) - 24px); overflow: auto;
  padding: 20px 22px 16px; color: var(--ink);
  background: var(--vellum) url("assets/manuscript/vellum-1024.webp"); background-size: 1024px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--gold);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.25s, transform 0.25s;
}
.tabula-panel.is-open { opacity: 1; transform: none; }
.tabula-panel__title { margin: 0 0 10px; color: var(--vermilion); font-size: 0.86rem; letter-spacing: 0.14em; }
.tabula-panel .tabula { font-size: 1rem; }
.tabula-panel__close { margin-top: 12px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--vermilion); background: none; color: var(--vermilion); font-size: 0.9rem; font-style: italic; }

/* ───────── a tabula (lista) ───────── */
.tabula { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.tabula__row + .tabula__row { margin-top: 0.35rem; }
.tabula__link {
  display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0 0.6em; padding: 0.3rem 0;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent;
}
.tabula__link:hover .tabula__name, .tabula__link:focus-visible .tabula__name, .tabula__link[aria-current="true"] .tabula__name { color: var(--vermilion); }
.tabula__chapter { flex: none; min-width: 7.5em; color: var(--vermilion); font-size: 0.86rem; }
.tabula__name { font-family: var(--gothic); font-size: 1.45em; line-height: 1; }
.tabula__readout { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; font-size: 0.9em; color: var(--ink-soft); }
.tabula__leader { flex: 1 1 1em; min-width: 1em; border-bottom: 2px dotted rgba(42, 29, 20, 0.55); transform: translateY(-0.3em); }
.tabula__folio { flex: none; color: var(--vermilion); font-size: 0.9em; }
.tabula__row--colophon .tabula__name { font-family: var(--text); font-style: italic; font-size: 1.1em; }

/* ───────── luz de vela ───────── */
.candle {
  position: fixed; z-index: 90; left: -600px; top: -600px; width: 1200px; height: 1200px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at center, rgba(255, 206, 128, 0.17) 0%, rgba(255, 180, 90, 0.07) 32%, rgba(255, 160, 70, 0) 62%);
  transition: opacity 0.6s; will-change: transform;
}
.candle.is-on { opacity: 1; animation: candle 2.8s ease-in-out infinite alternate; }
@keyframes candle { from { opacity: 0.82; } to { opacity: 1; } }

/* ───────── a folha ───────── */
main.codex { position: relative; z-index: 2; }
.folio { position: relative; padding: clamp(18px, 3vw, 40px) clamp(10px, 2vw, 28px); perspective: 2400px; }
.folio--incipit { padding-top: calc(var(--shelf-h) + clamp(18px, 3vw, 40px)); }
.folio__page {
  position: relative; width: min(var(--page-w), 100%); margin: 0 auto;
  padding: var(--page-top) var(--page-outer) var(--page-bottom) var(--page-inner);
  color: var(--ink);
  background: var(--vellum) url("assets/manuscript/vellum-1024.webp"); background-size: 1024px;
  border-radius: 3px 6px 6px 3px;
  box-shadow: inset 0 0 60px rgba(120, 86, 40, 0.16), inset 0 0 0 1px rgba(217, 199, 160, 0.9), 0 30px 70px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.5);
  transform-origin: left center;
}
/* pautado e picotagem, quase invisíveis */
.folio__page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) * 1.1875rem - 1px), rgba(42, 29, 20, 0.045) calc(var(--line) * 1.1875rem - 1px) calc(var(--line) * 1.1875rem)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) * 1.1875rem - 3px), rgba(42, 29, 20, 0.12) calc(var(--line) * 1.1875rem - 3px) calc(var(--line) * 1.1875rem - 1px), transparent calc(var(--line) * 1.1875rem - 1px) calc(var(--line) * 1.1875rem));
  background-size: 100% 100%, 3px 100%;
  background-position: 0 var(--page-top), calc(100% - 8px) var(--page-top);
  background-repeat: repeat, no-repeat;
  opacity: 0.9;
}
/* bordas gastas */
.folio__page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(160, 125, 70, 0.14), transparent 50%),
    radial-gradient(90% 50% at 0% 100%, rgba(160, 125, 70, 0.12), transparent 55%),
    linear-gradient(to right, rgba(120, 86, 40, 0.14), transparent 6%);
}
.folio__page > * { position: relative; z-index: 1; }
.folio__page > .vine { position: absolute; z-index: 0; }
.folio__page > .page-frame {
  position: absolute; z-index: 0; inset: var(--frame-gap); pointer-events: none;
  border: var(--frame) solid transparent;
  border-image: url("assets/manuscript/page-border.svg") 200 round;
}
.running-head { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 clamp(18px, 3vw, 36px); color: var(--vermilion); font-size: 0.9rem; letter-spacing: 0.14em; border-bottom: 1px solid rgba(184, 50, 31, 0.35); padding-bottom: 6px; }
.running-head p { margin: 0; }
.running-head__right { font-style: italic; letter-spacing: 0.04em; }

.catchword { position: absolute; right: var(--page-outer); bottom: calc(var(--frame) + var(--frame-gap) + 10px); margin: 0; font-style: italic; font-size: 1.05rem; z-index: 2; }
.catchword a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(42, 29, 20, 0.35); }
.catchword a:hover, .catchword a:focus-visible { color: var(--vermilion); border-color: var(--vermilion); }
.catchword__word::after { content: " →"; color: var(--vermilion); }

.vine { position: absolute; z-index: 0; top: 0; right: calc(var(--frame) + var(--frame-gap) + 6px); width: 60px; height: 100%; pointer-events: none; overflow: visible; color: var(--verdigris); }
.vine .vine__stem { fill: none; stroke: var(--verdigris); stroke-width: 1.6; stroke-linecap: round; }
.vine .vine__leaf { fill: var(--verdigris); fill-opacity: 0.85; transform-box: fill-box; transform-origin: 0 50%; }
.vine .vine__bud { fill: var(--vermilion); stroke: var(--gold); stroke-width: 0.6; transform-box: fill-box; transform-origin: center; }

/* ───────── capa ───────── */
.cover-wrap { position: relative; height: 100svh; min-height: 560px; overflow-x: clip; }
html.js:not(.is-reduced) .cover-wrap { height: 190svh; }
.cover { position: sticky; top: 0; z-index: 5; height: 100svh; min-height: 560px; display: grid; place-items: center; padding: calc(var(--shelf-h) + 12px) 12px 12px; perspective: 2200px; }
.cover.is-open { pointer-events: none; }
.cover__board {
  position: relative; width: min(var(--page-w), 100%); height: min(88svh, 900px); min-height: 480px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 48px 8%;
  text-align: center; color: var(--vellum);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0, rgba(0, 0, 0, 0.1) 46px, transparent 90px), url("assets/manuscript/leather-1024.webp") repeat, #3e1e14;
  background-size: 100% 100%, 1024px, auto;
  border-radius: 6px 18px 18px 6px;
  box-shadow: inset 0 0 0 2px rgba(201, 162, 39, 0.35), inset 0 0 0 10px rgba(0, 0, 0, 0.18), inset 0 0 0 12px rgba(201, 162, 39, 0.4), 0 40px 90px rgba(0, 0, 0, 0.7);
  transform-origin: left center; backface-visibility: hidden; will-change: transform;
}
.cover__board::before { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(201, 162, 39, 0.45); border-radius: 3px 10px 10px 3px; pointer-events: none; }
.cover__corner { position: absolute; width: clamp(56px, 7vw, 96px); height: clamp(56px, 7vw, 96px); fill: var(--gold); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.cover__corner--tl { top: 6px; left: 6px; }
.cover__corner--tr { top: 6px; right: 6px; transform: scaleX(-1); }
.cover__corner--bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.cover__corner--br { bottom: 6px; right: 6px; transform: scale(-1); }
.cover__edition, .cover__warning { margin: 0; color: var(--gold); font-size: 0.86rem; letter-spacing: 0.22em; line-height: 1.7; }
.cover__title { margin: 0.4rem 0 0; font-family: var(--gothic); font-size: clamp(3rem, 9.5vw, 8rem); line-height: 0.95; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.25em; }
.cover__the { font-size: 0.5em; }
.cover__motto { margin: 0; font-style: italic; font-size: 1.2rem; color: rgba(239, 227, 200, 0.85); }
.cover__hint { margin: 1.2rem 0 0; font-size: 0.86rem; color: rgba(239, 227, 200, 0.7); }
.cover__open { color: var(--gold-light); border-bottom-color: var(--gold); }
.cover__open .manicule { fill: var(--gold); }
.cover__clasp { position: absolute; right: -14px; top: 50%; width: clamp(90px, 10vw, 150px); transform: translateY(-50%); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); will-change: transform; }
.cover__clasp-svg { width: 100%; height: auto; fill: var(--gold); }
html.no-js .cover, html.is-reduced .cover { position: static; }
html.is-reduced .cover-wrap { display: none; }
html.js:not(.is-reduced) .folio--incipit { margin-top: -100svh; }

/* ───────── incipit ───────── */
.incipit { display: grid; grid-template-columns: minmax(220px, 36%) 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.incipit__initial { position: relative; margin: 0; }
.incipit__art { display: block; aspect-ratio: 1; width: 100%; }
.incipit__generated { position: relative; display: block; width: 100%; aspect-ratio: 1; transition: opacity 0.4s; }
.incipit__generated .initial--incipit { width: 100%; height: 100%; }
.incipit__otter { position: absolute; left: 24%; top: 18%; width: 60%; height: 64%; color: var(--ink); }
.incipit__motto { margin: 0.4rem 0 0; font-style: italic; color: var(--vermilion); font-size: 1.15rem; }
.incipit__intro { margin: 1.4rem 0 0; font-size: 1.3rem; max-width: 34ch; }
.calls { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin: 1.6rem 0 0; align-items: center; }
.call { display: inline-flex; align-items: center; gap: 0.45em; color: var(--lapis); text-decoration: none; font-size: 1rem; letter-spacing: 0.12em; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.call:hover, .call:focus-visible { color: var(--vermilion); }
.call--primary { color: var(--vermilion); }
.call--primary:hover, .call--primary:focus-visible { color: var(--ink); }
.call--minor { font-variant-caps: normal; letter-spacing: 0; font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.call--minor .manicule { display: none; }
.call--manifest { position: relative; display: inline-block; border: 0; }
.call--manifest summary { display: inline-flex; align-items: center; gap: 0.45em; cursor: pointer; list-style: none; border-bottom: 1px solid currentColor; }
.call--manifest summary::-webkit-details-marker { display: none; }
.call--manifest .manifest { margin-top: 0.8rem; padding: 0.8rem 1rem; max-width: 36rem; background: rgba(217, 199, 160, 0.35); border-left: 3px solid var(--gold); font-variant-caps: normal; letter-spacing: 0; color: var(--ink); }
.manifest p { margin: 0; }
.manifest__row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.5rem !important; }
.manifest__url { font: 0.82rem/1.4 ui-monospace, Consolas, monospace; word-break: break-all; }
.manifest__copy { padding: 2px 10px; border: 1px solid var(--lapis); background: var(--lapis); color: var(--vellum); font-size: 0.86rem; }
.manifest__done { margin-top: 0.4rem !important; color: var(--verdigris); font-style: italic; }

/* ───────── grade da página ───────── */
.page-grid {
  display: grid;
  grid-template-columns: var(--initial-w) minmax(0, 1fr) var(--margin-col);
  column-gap: 0 var(--margin-gap);
  grid-template-areas:
    "initial rubric glosses"
    "initial lead glosses"
    "mini mini glosses"
    "cols cols marginalia"
    "media media marginalia"
    "calls calls marginalia";
  grid-template-rows: auto auto auto auto auto 1fr;
}
.page-grid > .initial-slot { grid-area: initial; margin: 0.2rem 0.9rem 0 0; }
.page-grid > .rubric { grid-area: rubric; align-self: end; margin-top: 0.3rem; }
.page-grid > .lead { grid-area: lead; }
.page-grid > .glosses { grid-area: glosses; align-self: start; margin-left: var(--margin-gap); }
.page-grid > .miniature-stack { grid-area: mini; margin-top: clamp(20px, 3vw, 36px); }
.page-grid > .columns { grid-area: cols; margin-top: clamp(20px, 3vw, 36px); }
.page-grid > .marginalia { grid-area: marginalia; align-self: start; margin: clamp(20px, 3vw, 36px) 0 0 var(--margin-gap); }
.page-grid > .media-row { grid-area: media; margin-top: clamp(24px, 3.5vw, 44px); }
.page-grid > .calls, .page-grid > .explicit { grid-area: calls; margin-top: clamp(20px, 3vw, 36px); }
.page-grid--tabula { grid-template-columns: minmax(0, 1fr) var(--margin-col); grid-template-areas: "text margin"; }
.page-grid--tabula .tabula__text { grid-area: text; }
.page-grid--tabula .margin--tabula { grid-area: margin; margin-left: var(--margin-gap); align-self: center; }

/* ───────── capitular ───────── */
.initial-slot { display: block; width: var(--initial-w); }
.initial { display: block; width: 100%; height: auto; filter: drop-shadow(1px 2px 0 rgba(42, 29, 20, 0.25)); }
.initial__letter { paint-order: stroke; }
.rubric__word { white-space: nowrap; }

/* ───────── glosas ───────── */
.glosses { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 1px solid rgba(184, 50, 31, 0.4); font-size: 0.98rem; line-height: 1.4; font-style: italic; color: var(--ink); }
.gloss + .gloss { margin-top: 0.55rem; }
.gloss__label { display: block; font-style: normal; color: var(--vermilion); font-size: 0.82rem; letter-spacing: 0.14em; }
.gloss--version { font-style: normal; font-weight: 500; }
.gloss--c5 { position: relative; margin: 0; padding: 0.4rem 0 0.4rem 1.2rem; font-family: "Segoe Script", "Brush Script MT", var(--text); font-style: italic; font-size: 1.15rem; line-height: 1.3; color: var(--lapis); transform: rotate(-2.5deg); }
.gloss--c5 .gloss__pilcrow { position: absolute; left: 0; top: 0.35rem; color: var(--vermilion); opacity: 0; transition: opacity 0.3s; font-family: var(--text); font-style: normal; font-weight: 600; }
.gloss--c5:hover .gloss__pilcrow, .gloss--c5:focus-within .gloss__pilcrow { opacity: 1; }
.gloss--inline { margin: 0.2rem 0 0; padding: 0; border: 0; font-size: 0.9rem; font-style: italic; color: var(--ink-soft); }

/* ───────── colunas ───────── */
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3.5vw, 48px); }
.column--copy .copy { font-size: 1.12rem; }
.highlights { list-style: none; margin: 0; padding: 0; }
.highlight { position: relative; padding-left: 1.5em; margin: 0 0 0.55rem; }
.highlight .pilcrow { position: absolute; left: 0; top: -0.05em; font-size: 1.2em; }
.highlight--lapis .pilcrow { color: var(--lapis); }
.column--copy .label { margin-top: 1.2rem; }

/* ───────── marginalia ───────── */
.marginalia { margin: 0; text-align: center; }
.marginalia__art { display: block; width: min(100%, 300px); margin: 0 auto; aspect-ratio: 1; }
.marginalia__caption { margin: 0.6rem auto 0; max-width: 26ch; font-style: italic; font-size: 0.95rem; line-height: 1.35; color: var(--ink-soft); }
.marginalia--colophon { grid-area: marginalia; }

/* art slot: a figura só aparece quando carrega; a silhueta cobre o resto */
.art-slot { position: relative; display: block; }
.art-slot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.4s; }
.art-slot.is-loaded .art-slot__img, html.no-js .art-slot.is-present .art-slot__img { opacity: 1; }
.art-slot .art-placeholder { display: block; width: 100%; height: 100%; color: var(--ink); opacity: 0.86; transition: opacity 0.4s; }
.art-slot.is-loaded .art-placeholder, .art-slot.is-loaded .incipit__generated, html.no-js .art-slot.is-present .art-placeholder, html.no-js .art-slot.is-present .incipit__generated { opacity: 0; }
.art-slot__debug { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 2px 6px; background: rgba(42, 29, 20, 0.85); color: var(--vellum); font-size: 0.7rem; white-space: nowrap; }
.art-slot__debug code { font: inherit; }
.art-slot.is-loaded .art-slot__debug { display: none; }

/* ───────── miniaturas e molduras ───────── */
.miniature-stack > * + * { margin-top: 1.2rem; }
.miniature { margin: 0; }
.miniature--art .miniature__painting, .miniature--border img, .scene {
  display: block; width: 100%;
  border: 4px solid transparent;
  background: linear-gradient(var(--vellum-shade), var(--vellum-shade)) padding-box, var(--gold-gradient) border-box;
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, var(--sheen-x) 0;
  box-shadow: inset 0 0 0 1px var(--ink), 0 12px 30px rgba(0, 0, 0, 0.25);
}
.miniature--art .miniature__painting { aspect-ratio: 3/2; }
.miniature--art .art-slot__img { object-fit: cover; }
.miniature__hint { margin: 0.5rem 0 0; font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.media-row .label { margin-bottom: 0.8rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.media { margin: 0; }
.media--lead { grid-column: span 2; }
.media__frame {
  position: relative; overflow: hidden; aspect-ratio: var(--ratio, 16/9); background: var(--desk);
  border: 3px solid transparent;
  background-image: linear-gradient(var(--desk), var(--desk)), var(--gold-gradient);
  background-origin: border-box; background-clip: padding-box, border-box;
  background-size: 100% 100%, 220% 100%; background-position: 0 0, var(--sheen-x) 0;
  box-shadow: inset 0 0 0 1px var(--ink), 0 8px 20px rgba(0, 0, 0, 0.3);
}
.media__frame > video, .media__frame > picture, .media__frame > picture > img { width: 100%; height: 100%; object-fit: cover; }
.media__frame > picture { display: block; }
.media__caption { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--ink-soft); }
/* as gravações tocam com o mouse em cima: o selo de ouro avisa e some enquanto o vídeo roda */
.media--video .media__frame { cursor: pointer; }
.media__play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-gradient); background-size: 220% 100%; background-position: var(--sheen-x) 0; color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 6px 14px rgba(0, 0, 0, 0.45); opacity: 0.92; transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.media__play svg { width: 22px; height: 22px; margin-left: 3px; }
.media--video:hover .media__play { transform: scale(1.08); }
.media.is-playing .media__play { opacity: 0; transform: scale(0.8); }
html.no-js .media__play, html.is-reduced .media__play { display: none; }
.media__video:focus-visible { outline: 3px solid var(--gem); outline-offset: -3px; }

/* ───────── instrumentos (botões das cenas) ───────── */
.instruments { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; }
.instrument { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.instrument__label { margin-right: 0.3rem; color: var(--vermilion); font-size: 0.86rem; }
.tab {
  padding: 0.25em 0.8em; border: 1px solid var(--ink); border-radius: 2px;
  background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0)) , var(--vellum-shade);
  color: var(--ink); font-size: 0.92rem; letter-spacing: 0.1em; transition: background 0.2s, color 0.2s;
}
.tab:hover, .tab:focus-visible { background: var(--gold-light); }
.tab[aria-pressed="true"] { background: var(--vermilion); color: var(--vellum); border-color: var(--vermilion); }
.tab--small { padding: 0.1em 0.6em; font-size: 0.82rem; }
.instrument__note { flex-basis: 100%; margin: 0; font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.instrument__formats[hidden] { display: none; }
.instrument__formats { display: inline-flex; gap: 0.3rem; margin-left: 0.6rem; }
.pot { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.2em 0.7em 0.2em 0.4em; border: 1px solid var(--ink); border-radius: 2px; background: var(--vellum-shade); font-size: 0.9rem; letter-spacing: 0.08em; font-variant-caps: small-caps; }
.pot::before { content: ""; width: 1em; height: 1em; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--pot) 65%, white), var(--pot) 45%, color-mix(in srgb, var(--pot) 60%, black)); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.4); }
.pot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pot); }
.instrument__layers { display: block; font-style: normal; font-size: 0.86rem; }

/* ───────── capítulo I · Battle Replay ───────── */
.scene--replay { padding: 0; }
.scene__viewport { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--vellum-shade); }
.scene__bg, .replay__field { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 52% 55%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.scene__bg { object-fit: cover; }
[data-preset="cinematic"] .scene__bg, [data-preset="cinematic"] .replay__field { transform: scale(1.32); }
[data-preset="creator"] .scene__bg, [data-preset="creator"] .replay__field { transform: scale(1.14); }
.rider { position: absolute; bottom: 4%; width: 36%; height: auto; transform-origin: 50% 100%; will-change: transform; }
.rider--left { left: 14%; }
.rider--right { right: 12%; }
.rider--paint.rider--right { transform: rotate(9deg) translateY(2%); }
.rider--ghost { opacity: 0.72; filter: sepia(1) saturate(1.5) hue-rotate(72deg) brightness(0.95); }
html.no-js .rider--ghost.rider--left, html.is-static .rider--ghost.rider--left { transform: translateX(-130%); }
html.no-js .rider--ghost.rider--right, html.is-static .rider--ghost.rider--right { transform: translateX(130%); }
.clash { position: absolute; left: 48%; top: 46%; margin: -0.5em; font-size: clamp(2rem, 6vw, 4rem); line-height: 1; color: var(--gold-light); text-shadow: 0 0 10px var(--gold); transform: scale(0); will-change: transform; }
.hidden-creature { position: absolute; right: 3%; top: 10%; width: 22%; color: var(--ink); opacity: 0; transition: opacity 0.6s 0.3s, color 0.6s; }
.hidden-creature__svg { width: 100%; height: auto; }
.hidden-creature__label { display: block; margin-top: 2px; font-size: 0.72rem; text-align: center; color: var(--vellum); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
[data-mode="reveal"] .hidden-creature { opacity: 0.9; color: var(--verdigris); }
.veil {
  position: absolute; top: -2%; right: 0; width: 33%; height: 104%;
  background: repeating-linear-gradient(90deg, #a1341f 0 10px, #b8321f 10px 22px, #8e2a18 22px 26px), var(--vermilion);
  box-shadow: inset 0 0 0 3px var(--gold), -8px 0 20px rgba(0, 0, 0, 0.35);
  transform: translateY(0); transition: transform 1s cubic-bezier(0.3, 0.8, 0.2, 1); will-change: transform;
}
.veil::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: radial-gradient(circle at 10px -4px, transparent 10px, #8e2a18 11px) 0 0 / 20px 22px repeat-x; }
[data-mode="reveal"] .veil { transform: translateY(-106%); }
.viewfinder { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2px solid var(--gold); box-shadow: 0 0 0 999px rgba(23, 17, 12, 0.55); pointer-events: none; }
.viewfinder[hidden] { display: none; }
[data-format="16:9"] .viewfinder { width: 78%; aspect-ratio: 16/9; }
[data-format="9:16"] .viewfinder { height: 92%; aspect-ratio: 9/16; }
[data-format="1:1"] .viewfinder { height: 86%; aspect-ratio: 1; }
.viewfinder__label { position: absolute; left: 6px; top: 4px; color: var(--gold-light); font-size: 0.8rem; letter-spacing: 0.1em; }
.phylactery { position: relative; padding: 8px 10px 6px; background: var(--vellum-shade); border-top: 1px solid var(--ink); }
.phylactery__svg { display: block; width: 100%; height: 64px; }
.phylactery__ribbon { fill: var(--vellum); stroke: var(--ink); stroke-width: 1; }
.phylactery__fold { fill: none; stroke: var(--ink); stroke-width: 1; }
.phylactery__cursor { stroke: var(--vermilion); stroke-width: 2; }
.mark { stroke: var(--ink); stroke-width: 0.6; }
.mark--turn { fill: #8a7a66; }
.mark--movement, .legend__item--movement { --cat: var(--lapis); }
.mark--attack, .legend__item--attack { --cat: var(--vermilion); }
.mark--magic, .legend__item--magic { --cat: #6b3f8f; }
.mark--health, .legend__item--health { --cat: var(--verdigris); }
.mark--save, .legend__item--save { --cat: var(--gold); }
.mark--defeat, .legend__item--defeat { --cat: #6e1a12; }
.legend__item--turn { --cat: #8a7a66; }
.mark--movement, .mark--attack, .mark--magic, .mark--health, .mark--save, .mark--defeat { fill: var(--cat); }
.phylactery__counter { margin: 4px 0 0; text-align: center; font-size: 0.86rem; color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: var(--ink-soft); }
.legend__item { display: inline-flex; align-items: center; gap: 0.35em; }
.legend__item::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--cat); border: 1px solid var(--ink); }
.ledger { flex-basis: 100%; margin-top: 0.4rem; padding: 0.8rem 1rem; background: rgba(217, 199, 160, 0.35); border: 1px solid var(--vellum-shade); box-shadow: inset 0 0 0 1px rgba(42, 29, 20, 0.08); }
.ledger__title { margin: 0 0 0.4rem; font-family: var(--gothic); font-size: 1.4rem; color: var(--lapis); }
.ledger__table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.ledger__table th { text-align: left; font-weight: 400; font-style: italic; padding: 0.15rem 0; border-bottom: 1px dotted rgba(42, 29, 20, 0.35); }
.ledger__table td { padding: 0.15rem 0.4rem; border-bottom: 1px dotted rgba(42, 29, 20, 0.35); }
.ledger__tally svg { display: block; height: 18px; width: auto; }
.tally { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ledger__value { text-align: right; font-variant-numeric: oldstyle-nums; font-weight: 500; }

/* ───────── capítulo II · Actor Image Gallery ───────── */
.scene--gallery { padding: clamp(14px, 3vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "current original" "current token" "ring ring"; gap: 1rem 2rem; align-items: center; }
.gallery__current { grid-area: current; text-align: center; }
.gallery__original { grid-area: original; text-align: center; }
.gallery__token { grid-area: token; text-align: center; }
.ring { grid-area: ring; list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.medallion { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--vellum-shade); box-shadow: 0 0 0 3px var(--gold), 0 0 0 4px var(--ink), 0 10px 24px rgba(0, 0, 0, 0.25); }
.medallion--large { width: min(100%, 300px); margin: 0 auto; }
.medallion--original { width: 136px; margin: 0 auto; }
.medallion--small { width: 100%; max-width: 86px; margin: 0 auto; box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px var(--ink); }
.medallion .art-slot, .token .art-slot { position: absolute; inset: 0; }
.medallion .art-slot__img, .token .art-slot__img { object-fit: cover; transform-origin: center; }
.medallion .art-placeholder, .token .art-placeholder { width: 100%; height: 100%; }
.medallion__art--b { opacity: 0; }
.medallion__label { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--vermilion); }
.medallion__label b { font-weight: 500; color: var(--ink); }
.token { position: relative; display: block; width: 92px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden; background: var(--vellum-shade); box-shadow: 0 0 0 3px var(--verdigris), 0 0 0 4px var(--ink); }
.look--wounded .art-slot__img { filter: grayscale(1) brightness(0.78); }
.look--disguised .art-slot__img { filter: blur(2px) brightness(0.62); }
.look--corrupted .art-slot__img { filter: sepia(1) saturate(2.6) hue-rotate(62deg) brightness(0.95); }
.look--mirrored .art-slot__img { transform: scaleX(-1); }
.look--closeup .art-slot__img { transform: scale(1.6); }
.look--faded .art-slot__img { filter: brightness(1.22) contrast(0.78) saturate(0.7); }
.look--night .art-slot__img { filter: sepia(0.5) hue-rotate(175deg) saturate(1.3) brightness(0.8); transform: rotate(6deg) scale(1.08); }
.ring__item { display: grid; justify-items: center; gap: 0.25rem; width: 100%; padding: 0.4rem 0.2rem; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--ink); text-align: center; }
.ring__item:hover, .ring__item:focus-visible { background: rgba(217, 199, 160, 0.4); }
.ring__item[aria-pressed="true"] { border-color: var(--vermilion); }
.ring__item[aria-pressed="true"] .medallion { box-shadow: 0 0 0 2px var(--vermilion), 0 0 0 3px var(--ink); }
.ring__name { font-size: 0.86rem; color: var(--vermilion); }
.ring__recipe { font-size: 0.78rem; font-style: italic; color: var(--ink-soft); line-height: 1.2; }

/* ───────── capítulo III · Scene Director ───────── */
.scene--stage { --accent: var(--vermilion); padding: 0; }
[data-palette="cobalt"] { --accent: var(--lapis); }
[data-palette="gold"] { --accent: #b08a1c; }
[data-palette="jade"] { --accent: var(--verdigris); }
.theatre { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #2b1c12; }
.theatre__stage { position: absolute; inset: 9% 3% 0; overflow: hidden; background: #3b2a1e; }
.theatre__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.theatre__layer { position: absolute; will-change: transform; }
.theatre__layer--enemies { left: 6%; right: 6%; bottom: 4%; height: 36%; display: flex; justify-content: space-around; align-items: flex-end; pointer-events: none; }
.enemy { position: relative; width: 14%; color: var(--ink); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.enemy__svg { display: block; width: 100%; height: auto; }
.enemy--hidden { color: #0b0806; opacity: 0.7; }
.enemy__tag { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); color: var(--vellum); font-size: 0.72rem; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.theatre__layer--leader { left: 5%; top: 24%; width: 23%; }
.leader-card { display: block; padding: 0.4rem 0.4rem 0.5rem; background: var(--vellum) url("assets/manuscript/vellum-512.webp"); border: 3px solid var(--accent); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45); text-align: center; color: var(--ink); transition: border-color 0.3s; }
.leader-card__svg { display: block; width: 60%; height: auto; margin: 0 auto; }
.leader-card__name { display: block; margin-top: 0.3rem; font-family: var(--gothic); font-size: clamp(0.9rem, 1.6vw, 1.3rem); line-height: 1.05; }
.leader-card__role { display: block; font-size: 0.68rem; color: var(--accent); }
.theatre__layer--band { left: 0; right: 0; top: 15%; }
.band { display: flex; justify-content: center; gap: 1.4em; margin: 0; padding: 0.4em 1em; background: var(--accent); color: var(--vellum); font-size: clamp(0.72rem, 1.5vw, 1.05rem); letter-spacing: 0.16em; transform: skewX(-9deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); transition: background 0.3s, transform 0.3s; }
[data-style="chronicle"] .band { transform: none; background: rgba(23, 17, 12, 0.85); color: var(--gold-light); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.theatre__layer--title { left: 0; right: 0; top: 40%; display: flex; justify-content: center; }
.opening-title { margin: 0; padding: 0 0.3em; font-family: var(--gothic); font-size: clamp(2rem, 6.5vw, 5rem); line-height: 1; color: var(--vellum); background: var(--accent); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transform: rotate(-4deg); transition: background 0.3s; }
[data-style="chronicle"] .opening-title { font-family: var(--text); font-variant-caps: small-caps; letter-spacing: 0.32em; font-size: clamp(1.4rem, 4vw, 3rem); color: var(--gold-light); background: none; box-shadow: none; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: none; padding: 0.3em 1em; }
.curtain { position: absolute; top: 0; bottom: 0; width: 52%; z-index: 2; background: repeating-linear-gradient(90deg, #8d2317 0 12px, #b8321f 12px 26px, #7a1d12 26px 32px); box-shadow: inset 0 -30px 40px rgba(0, 0, 0, 0.35); will-change: transform; }
.curtain--left { left: 0; box-shadow: inset -24px 0 36px rgba(0, 0, 0, 0.4); }
.curtain--right { right: 0; box-shadow: inset 24px 0 36px rgba(0, 0, 0, 0.4); }
.theatre__valance { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 10%; background: #8d2317; }
.theatre__valance::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 14px; background: radial-gradient(circle at 12px -2px, transparent 11px, #8d2317 12px) 0 0 / 24px 14px repeat-x; }
.theatre__frame { position: absolute; z-index: 4; inset: 0; pointer-events: none; border: 8px solid var(--gold); border-image: var(--gold-gradient) 1; box-shadow: inset 0 0 0 1px var(--ink); }
.herald { padding: 14px clamp(12px, 3vw, 28px) 4px; }
.herald__scroll { padding: 0.7rem 1.2rem 0.9rem; background: var(--vellum) url("assets/manuscript/vellum-512.webp"); border-top: 3px double var(--gold); border-bottom: 3px double var(--gold); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); transform-origin: left center; }
.herald__session { margin: 0; color: var(--vermilion); font-size: 0.86rem; letter-spacing: 0.16em; }
.herald__title { margin: 0.1rem 0 0.3rem; font-family: var(--gothic); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; color: var(--lapis); }
.herald__recap { margin: 0; font-size: 1rem; }
.herald__previously { color: var(--vermilion); font-size: 0.8rem; margin-right: 0.3em; }
.map { position: relative; padding: 8px clamp(12px, 3vw, 28px) 14px; }
.map__sheet { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--gold), 0 0 0 5px var(--ink), 0 14px 30px rgba(0, 0, 0, 0.3); background: var(--vellum-shade); }
.map__sheet--linked { position: absolute; left: 50%; top: 8px; width: min(90%, 470px); transform: translateX(-50%); transform-origin: center; z-index: 2; }
.map__sheet--linked[hidden] { display: none; }
.map__img { width: 100%; height: 100%; object-fit: cover; }
.pin { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 2px solid var(--vellum); border-radius: 50%; background: var(--vermilion); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer; transition: transform 0.2s; }
.pin:hover, .pin:focus-visible, .pin[aria-expanded="true"] { transform: scale(1.2); }
.pin__dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--vellum); }
.pin--explore { background: var(--verdigris); }
.pin--gm { background: var(--ink); }
.pin--linked { background: var(--gold); }
.pin--linked::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0.7; animation: pin-pulse 2s ease-out infinite; }
@keyframes pin-pulse { 0% { transform: scale(0.7); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }
.map__title { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); margin: 0; padding: 2px 12px; background: rgba(239, 227, 200, 0.92); border: 1px solid var(--gold); color: var(--vermilion); font-size: 0.78rem; white-space: nowrap; }
.map__back { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.4em; padding: 2px 10px; border: 1px solid var(--gold); background: rgba(239, 227, 200, 0.92); color: var(--lapis); font-size: 0.8rem; }
.map__cards { margin-top: 10px; min-height: 0; }
.map__card { max-width: 520px; margin: 0 auto; padding: 0.6rem 0.9rem; background: rgba(239, 227, 200, 0.9); border: 1px solid var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); }
.map__card[hidden] { display: none; }
.map__card-name { margin: 0; font-family: var(--gothic); font-size: 1.3rem; color: var(--lapis); }
.map__card-text { margin: 0.1rem 0 0; font-size: 0.98rem; }
.map__card-kind { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--vermilion); }
.map__travel { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.4rem; padding: 0; border: 0; border-bottom: 1px solid var(--lapis); background: none; color: var(--lapis); font-size: 0.9rem; }
.map__hint { margin: 0.6rem 0 0; text-align: center; font-style: italic; font-size: 0.9rem; color: var(--ink-soft); }

/* ───────── capítulo IV · Sheet Tailor ───────── */
.scene--tailor { padding: clamp(10px, 2vw, 18px); }
.sheet { position: relative; aspect-ratio: 4/3; overflow: hidden; padding: 3.5% 4%; background: var(--vellum) url("assets/manuscript/vellum-1024.webp"); background-size: 700px; border: 1px solid var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
.sheet__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s; overflow: hidden; }
.sheet__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
[data-bg="illumination"] .sheet__bg, [data-bg="animated"] .sheet__bg { opacity: 0.92; }
.sheet__sheen { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgba(255, 243, 200, 0.42) 50%, transparent 62%); transform: translateX(-120%); }
[data-bg="animated"] .sheet__sheen { animation: sheen 5.5s linear infinite; }
@keyframes sheen { to { transform: translateX(120%); } }
.sheet__head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 3%; padding-bottom: 0.2rem; border-bottom: 1px solid var(--ink); }
[data-bg="illumination"] .sheet__head, [data-bg="animated"] .sheet__head { background: rgba(239, 227, 200, 0.82); padding: 0.2rem 0.6rem; border: 1px solid var(--ink); }
.sheet__name { margin: 0; font-family: var(--gothic); font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1; color: var(--lapis); }
.sheet__class { margin: 0; font-size: 0.86rem; color: var(--vermilion); }
.sheet__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3%; height: 76%; }
.block { position: relative; grid-column: var(--col); grid-row: var(--row); padding: 0.45rem 0.7rem 0.5rem; overflow: hidden; background: rgba(239, 227, 200, 0.88); border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgba(42, 29, 20, 0.18); font-size: clamp(0.76rem, 1.5vw, 0.98rem); line-height: 1.3; }
.block:focus-visible { outline-offset: -3px; }
.block.is-dragging { z-index: 5; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3); }
.block__handle { margin: 0 0 0.3rem; padding-bottom: 0.15rem; border-bottom: 1px dashed rgba(42, 29, 20, 0.4); color: var(--vermilion); font-weight: 500; font-size: 0.9em; cursor: grab; touch-action: none; }
.block.is-dragging .block__handle { cursor: grabbing; }
.block__list { list-style: none; margin: 0; padding: 0; }
.block__list li { display: flex; justify-content: space-between; gap: 0.4em; }
.block__list--grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.1rem 0.6rem; }
.block__list--grid li { justify-content: flex-start; }
.block__roll { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0; }
.roll { padding: 0.1em 0.7em; border: 1px solid var(--lapis); border-radius: 2px; background: var(--lapis); color: var(--vellum); font-size: 0.9em; letter-spacing: 0.1em; }
.roll:hover, .roll:focus-visible { background: var(--vermilion); border-color: var(--vermilion); }
.roll__result { font-style: italic; }
.roll__result.is-fresh { animation: ink-in 0.5s ease-out; }
@keyframes ink-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.path-note { display: none; }
.chapter[data-path="customize"] .path-note[data-path-text="customize"], .chapter[data-path="freeform"] .path-note[data-path-text="freeform"] { display: block; }
.chapter[data-path="customize"] .media[data-path="freeform"], .chapter[data-path="freeform"] .media[data-path="customize"] { display: none; }
html.no-js .media[data-path] { display: block !important; }
html.no-js .path-note { display: block; }

/* ───────── colofão ───────── */
.folio--colophon .page-grid { grid-template-columns: minmax(0, 1fr) var(--margin-col); grid-template-areas: "rubric glosses" "lead glosses" "cols marginalia" "calls marginalia"; grid-template-rows: auto auto auto 1fr; }
.colophon__text { font-size: clamp(1.2rem, 1.9vw, 1.4rem); }
.columns--colophon { align-items: start; }
.column--seal { display: flex; justify-content: center; padding-top: 0.5rem; }
.seal { display: inline-grid; justify-items: center; gap: 0.2rem; text-decoration: none; color: var(--ink); }
.seal__ribbon { width: 26px; height: 74px; background: linear-gradient(90deg, #7a1d12, #b8321f 50%, #7a1d12); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.seal__wax { position: relative; display: grid; place-items: center; width: 118px; height: 118px; margin-top: -14px; border-radius: 50%; color: rgba(239, 227, 200, 0.7); font-size: 2.6rem; background: radial-gradient(circle at 38% 32%, #d14a3a 0, #8d2317 50%, #5e140c 100%); box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.25), inset 0 -4px 8px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.45); transition: transform 0.18s, box-shadow 0.18s; }
.seal__wax::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px dashed rgba(239, 227, 200, 0.35); }
.seal:hover .seal__wax, .seal:focus-visible .seal__wax { transform: rotate(-6deg) scale(1.04); }
.seal.is-stamping .seal__wax { transform: scale(0.84) rotate(-3deg); box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 0 12px rgba(184, 50, 31, 0.25); }
.seal__text { margin-top: 0.6rem; color: var(--lapis); font-size: 1rem; letter-spacing: 0.14em; border-bottom: 1px solid currentColor; }
.seal:hover .seal__text { color: var(--vermilion); }
.explicit { margin: 0; align-self: end; text-align: center; color: var(--vermilion); font-size: 0.9rem; letter-spacing: 0.3em; }
.explicit::before, .explicit::after { content: " ✶ "; color: var(--gold); }

/* ───────── contracapa ───────── */
.back-cover { position: relative; z-index: 2; padding: clamp(20px, 4vw, 48px) clamp(10px, 2vw, 28px) clamp(40px, 6vw, 80px); }
.back-cover__board { width: min(var(--page-w), 100%); margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 72px); color: var(--vellum); background: url("assets/manuscript/leather-1024.webp") repeat, #3e1e14; background-size: 1024px; border-radius: 18px 6px 6px 18px; box-shadow: inset 0 0 0 2px rgba(201, 162, 39, 0.35), inset 0 0 0 10px rgba(0, 0, 0, 0.18), inset 0 0 0 12px rgba(201, 162, 39, 0.4), 0 30px 70px rgba(0, 0, 0, 0.6); }
.back-cover__name { margin: 0; font-family: var(--gothic); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; }
.back-cover__name span { font-size: 0.55em; margin: 0 0.2em; }
.back-cover__copy { margin: 0.6rem 0 0; font-style: italic; color: rgba(239, 227, 200, 0.8); }
.back-cover__links { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 1.4rem 0 0; }
.back-cover__links a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(201, 162, 39, 0.6); font-size: 0.95rem; }
.back-cover__links a:hover { color: var(--vellum); }
.credits { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(201, 162, 39, 0.4); font-size: 0.92rem; line-height: 1.5; color: rgba(239, 227, 200, 0.82); }
.credits .label { color: var(--gold); }
.credits__sub { margin: 0 0 0.4rem; color: var(--gold-light); font-size: 0.86rem; }
.credits__list { margin: 0 0 1rem; padding-left: 1.2rem; }
.credits__list a { color: var(--vellum); }
.credits p { margin: 0.5rem 0 0; }
.back-cover small { display: block; margin-top: 1.6rem; color: rgba(239, 227, 200, 0.6); }

/* ───────── estados do JS ───────── */
html.js:not(.is-reduced) .cover__board { backface-visibility: hidden; }
html.is-reduced .candle, html.is-touch .candle, html.is-mobile .candle { display: none; }
html.is-reduced .vine, html.is-mobile .vine { display: none; }
html.is-reduced .pin--linked::after, html.is-reduced [data-bg="animated"] .sheet__sheen, html.is-reduced .candle.is-on { animation: none; }
html.is-reduced .folio__page, html.is-reduced .rider--paint, html.is-reduced .enemy, html.is-reduced .theatre__layer, html.is-reduced .herald__scroll { transform: none !important; }
html.is-reduced .curtain { display: none; }
html.no-js .curtain, html.is-static .curtain, .miniature--stage.is-static .curtain { display: none; }
html.no-js .enemy, html.no-js .theatre__layer { transform: none; }
html.no-js .rider--ghost { opacity: 0.6; }
html.no-js .tabula-button, html.no-js .language-switcher { display: none; }

@media (max-width: 1140px) {
  .folio--tabula .tabula__readout { display: none; }
}
.tabula__name { white-space: nowrap; }

/* ───────── tablet ───────── */
@media (max-width: 1023px) {
  :root { --margin-col: 22%; --margin-gap: 3.5%; --initial-w: 84px; }
  .media--lead { grid-column: span 2; }
}

/* ───────── celular ───────── */
@media (max-width: 760px) {
  :root { --frame: 22px; --frame-gap: 5px; --page-inner: 16px; --page-outer: 16px; --page-top: calc(var(--frame) + var(--frame-gap) + 14px); --page-bottom: calc(var(--frame) + var(--frame-gap) + 44px); --initial-w: 76px; }
  .folio__page > .page-frame { border-width: var(--frame) 0; }
  body { font-size: 1.0625rem; }
  .folio { padding: 10px 0 18px; perspective: none; }
  .folio--incipit { padding-top: calc(var(--shelf-h) + 10px); }
  .folio__page { width: 100%; border-radius: 0; box-shadow: inset 0 0 40px rgba(120, 86, 40, 0.14), 0 10px 30px rgba(0, 0, 0, 0.5); }
  .folio__page::before { background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) * 1.0625rem - 1px), rgba(42, 29, 20, 0.045) calc(var(--line) * 1.0625rem - 1px) calc(var(--line) * 1.0625rem)); background-size: 100% 100%; }
  .running-head { font-size: 0.78rem; flex-wrap: wrap; }
  .page-grid, .page-grid--tabula, .folio--colophon .page-grid { display: block; }
  .page-grid > .initial-slot { float: left; margin: 0.1rem 0.7rem 0.2rem 0; }
  .page-grid > .rubric { margin-top: 0; }
  .page-grid > .lead { clear: none; }
  .page-grid > .glosses { clear: both; margin: 1rem 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.9rem; }
  .gloss + .gloss { margin: 0; }
  .glosses .gloss::after { content: " ·"; color: var(--vermilion); }
  .glosses .gloss:last-child::after { content: ""; }
  .gloss__label { display: inline; margin-right: 0.3em; }
  .page-grid > .miniature-stack, .page-grid > .columns, .page-grid > .media-row, .page-grid > .calls, .page-grid > .marginalia, .page-grid > .explicit { margin: 1.4rem 0 0; }
  .columns { display: block; }
  .highlights { margin-top: 1rem; }
  .marginalia { margin: 1.2rem auto 0; }
  .marginalia__art { width: min(60%, 180px); }
  .page-grid--tabula .margin--tabula { margin: 1.4rem 0 0; }
  .gloss--c5 { transform: none; }
  .incipit { grid-template-columns: 1fr; }
  .incipit__initial { width: min(70%, 300px); margin: 0 auto; }
  .incipit__intro { font-size: 1.15rem; }
  .cover { padding: calc(var(--shelf-h) + 8px) 8px 8px; }
  .cover__board { height: min(84svh, 760px); padding: 40px 6%; }
  .cover__clasp { right: -8px; width: 80px; }
  .media-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .media--lead { grid-column: span 2; }
  .scene--gallery { grid-template-columns: 1fr 1fr; grid-template-areas: "current current" "original token" "ring ring"; gap: 0.8rem; }
  .medallion--large { width: min(70%, 240px); }
  .ring { grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
  .ring__recipe { display: none; }
  .theatre__layer--leader { width: 28%; }
  .herald { padding: 10px 10px 2px; }
  .map { padding: 6px 10px 10px; }
  .pin { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .sheet { aspect-ratio: auto; height: 420px; }
  .instruments { gap: 0.5rem 1rem; }
  .ledger__table { font-size: 0.9rem; }
  .catchword { position: static; text-align: right; margin-top: 1.4rem; }
  .folio__page::after { display: none; }
  .shelf__actions { gap: 10px; }
  .tabula-button__current { display: none; }
  .brand__name { font-size: 1.15rem; }
  .back-cover__board { border-radius: 8px; }
}
@media (max-width: 420px) {
  .cover__title { font-size: 2.7rem; }
  .block__list--grid { grid-template-columns: 1fr 1fr; }
  .block { padding: 0.35rem 0.5rem; }
  .media-grid { grid-template-columns: 1fr; }
  .media--lead { grid-column: auto; }
  .tabula__link { flex-wrap: wrap; }
  .tabula__chapter { min-width: 0; flex-basis: 100%; }
  .tabula__readout { white-space: normal; }
  .ring { grid-template-columns: repeat(4, 1fr); }
  .scene--gallery { grid-template-columns: 1fr; grid-template-areas: "current" "original" "token" "ring"; }
}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}