/* «A empresa que se lê a si própria» — folha de estilo do artigo.
   Registo Editorial do sistema pessoal. NENHUMA cor literal: tudo vem das variáveis
   do ficheiro de tokens (injectado pelo build a partir do sistema de design).
   Re-skin = trocar o ficheiro de tokens. O check.py falha se aparecer um hex aqui. */

@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/schibsted-grotesk-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 17px; line-height: 1.6; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: var(--rule-strong) solid var(--cyanotype); outline-offset: 2px; }
::selection { background: var(--cyanotype-wash); color: var(--ink); }
h1, h2, h3, h4, p, blockquote, figure, ul, ol { margin: 0; }
strong { font-weight: 500; }

/* papel: dente fino, fixo, na cor do próprio chão (JMM «texture is tooth») */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: var(--tooth);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.16 0 0 0 0 0.15 0 0 0 1 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>"); }

/* ---------- barra de leitura ---------- */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 40px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); background: var(--paper); border-bottom: var(--rule) solid var(--hairline);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.bar .bar-title { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.bar .bar-ch { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; text-align: right; }
.bar .bar-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cyanotype); transform-origin: 0 50%; transform: scaleX(0); }
/* a orientação não é movimento: o progresso existe também com reduced motion (actualizado sem animação) */

/* ---------- capa ---------- */
.cover { min-height: 100svh; display: grid; align-content: end; padding: 104px var(--gutter) var(--space-5); max-width: var(--page); margin: 0 auto; position: relative; }
.cover .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cover h1 { font-weight: 500; font-size: clamp(46px, 9.2vw, 112px); line-height: 0.93; letter-spacing: -0.025em; margin-top: var(--space-4); max-width: 11.5ch; }
.cover .sub { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.45; color: var(--ink-muted); max-width: 34ch; margin-top: var(--space-4); }
.cover .gesture { position: relative; height: 40px; margin-top: var(--space-5); }
.cover .gesture svg { width: 600px; max-width: 100%; height: 40px; overflow: visible; display: block; }
.cover .meta { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.split-line { display: block; overflow: hidden; padding-bottom: 0.04em; }

/* ---------- índice ---------- */
.toc { max-width: var(--measure); margin: var(--space-6) auto 0; padding: 0 var(--gutter); }
.toc ol { list-style: none; padding: 0; border-top: var(--rule) solid var(--hairline); }
.toc li { border-bottom: var(--rule) solid var(--hairline); }
.toc a { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-2); padding: 12px 0; text-decoration: none; font-size: 16px; line-height: 1.4; }
.toc a .k { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); padding-top: 3px; }
.toc a:hover .t { text-decoration: underline; text-decoration-color: var(--ink); }
.toc .toc-part { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-3) 0 8px; border-bottom: var(--rule) solid var(--hairline); }

/* ---------- prosa ---------- */
.prose { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.prose > * + * { margin-top: var(--space-3); }
.prose p { font-size: 18px; line-height: 1.62; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose h3 { font-size: 21px; line-height: 1.3; font-weight: 500; margin-top: var(--space-5); }
.prose h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--space-4); color: var(--ink-muted); }
.prose hr { border: 0; height: 1px; background: var(--hairline); margin: var(--space-5) 0; }
.chapter { margin-top: var(--space-6); scroll-margin-top: 64px; }
.chapter .ck { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: var(--rule) solid var(--hairline); margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.chapter h2 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.06; letter-spacing: -0.015em; font-weight: 500; max-width: 20ch; }
.part { margin: var(--space-7) auto var(--space-5); max-width: var(--page); padding: 0 var(--gutter); scroll-margin-top: 64px; }
.part .pk { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); border-top: var(--rule) solid var(--ink); padding-top: 12px; }
.part h1 { font-size: clamp(44px, 7vw, 88px); line-height: 0.95; letter-spacing: -0.02em; font-weight: 500; margin-top: var(--space-4); max-width: 13ch; }

.prose blockquote { border-top: var(--rule) solid var(--hairline); border-bottom: var(--rule) solid var(--hairline); padding: var(--space-3) 0; margin: var(--space-4) 0; }
.prose blockquote p { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.prose blockquote p + p { margin-top: 10px; }
.prose blockquote p.q-main { font-family: var(--font-serif); font-size: 25px; line-height: 1.32; color: var(--ink); }
.prose blockquote p.q-attr { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-muted); }
a.footnote-ref { text-decoration: none; color: var(--cyanotype); font-family: var(--font-mono); font-size: 11px; padding: 0 1px; }
a.footnote-ref sup { font-size: 11px; vertical-align: super; }
.fnsep { font-family: var(--font-mono); font-size: 11px; vertical-align: super; color: var(--ink-muted); }
.prose sup { line-height: 0; }
.tablewrap { overflow-x: auto; margin: var(--space-4) calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.prose table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; line-height: 1.5; }
.prose th { text-align: left; vertical-align: bottom; padding: 10px 10px; background: var(--concrete); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.prose td { vertical-align: top; padding: 10px; border-bottom: var(--rule) solid var(--hairline); color: var(--ink-muted); }
.prose td:first-child { color: var(--ink); }
.tablewrap.wide { max-width: var(--page); margin-left: auto; margin-right: auto; }
.pending { display: none; }

/* ---------- frase-tese (F7) ---------- */
.thesis { max-width: var(--page); margin: var(--space-6) auto; padding: 0 var(--gutter); }
.thesis p { font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -0.01em; max-width: 16ch; }
.thesis p strong { font-weight: 400; }
.thesis .tk { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); display: block; }

/* ---------- figuras ---------- */
.figsvg { display: block; width: 100%; height: auto; overflow: visible; }
.figsvg.v-m { display: none; }
@media (max-width: 859px) { .figsvg.v-d { display: none; } .figsvg.v-m { display: block; } }

.fig { position: relative; }
.fig-hud { display: flex; justify-content: space-between; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: 8px; margin-bottom: var(--space-2); border-bottom: var(--rule) solid var(--hairline); }
.fig-hud .hud-k { color: var(--ink); }
.fig-hud .hud-step { font-variant-numeric: tabular-nums; }
.fig-hud .hud-bar { position: relative; flex: 1; align-self: center; height: 1px; background: var(--hairline); margin: 0 var(--space-2); }
.fig-hud .hud-bar i { position: absolute; inset: 0; background: var(--cyanotype); transform-origin: 0 50%; transform: scaleX(1); }
.fig-cap { margin-top: var(--space-2); max-width: 62ch; }
.fig-cap .ct { font-size: 15px; line-height: 1.4; font-weight: 500; }
.fig-cap .cc { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin-top: 4px; }
.fig-src { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--ink-muted); max-width: 90ch; }
.fig-src b { font-weight: 500; color: var(--ink); letter-spacing: 0.06em; }
.solo .fig-src, .scene + .fig-src { margin-top: var(--space-2); }

/* cena com passos (pin + steps, receita R1) */
.scene { max-width: var(--page); margin: var(--space-5) auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); position: relative; }
.scene-graphic { grid-column: 2; grid-row: 1; position: sticky; top: 56px; height: calc(100svh - 72px); display: flex; flex-direction: column; justify-content: center; align-self: start; }
.scene-graphic .fig { max-height: 100%; display: flex; flex-direction: column; }
.scene-graphic .figwrap { min-height: 0; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.scene-graphic .figsvg { max-height: calc(100svh - 230px); }
.scene-steps { grid-column: 1; grid-row: 1; padding: 30vh 0 40vh; }
.step { min-height: 72vh; display: flex; align-items: center; }
.step-in { border-left: var(--rule) solid var(--hairline); padding: 0 0 0 var(--space-3); transition: color 400ms var(--ease), border-color 400ms var(--ease); }
.step-in p { font-size: 18px; line-height: 1.6; }
.step-in p + p, .step-in blockquote { margin-top: var(--space-2); }
.step .sk { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 10px; }
.is-motion .step:not(.is-active) .step-in { color: var(--ink-muted); }
.is-motion .step.is-active .step-in { border-left-color: var(--cyanotype); }
.scene-after { max-width: var(--page); margin: calc(-1 * var(--space-4)) auto var(--space-5); padding: 0 var(--gutter); }
.scene-after .fig-src { margin-left: calc((100% - var(--space-5)) * 5 / 12 + var(--space-5)); }

/* figura isolada (scrub com pin) */
.solo { max-width: var(--page); margin: var(--space-5) auto; padding: 0 var(--gutter); }
.solo-pin { min-height: calc(100svh - 56px); display: flex; flex-direction: column; justify-content: center; padding: 16px 0; }
.solo .fig { max-width: 880px; width: 100%; margin: 0 auto; }
.solo .figsvg { max-height: calc(100svh - 250px); margin: 0 auto; }
.solo.wide .fig { max-width: var(--page); }
.solo .fig-src { max-width: 880px; margin: var(--space-2) auto 0; }

/* F5: painel de texto do degrau activo */
.f5-panel { display: grid; gap: 0; margin-top: var(--space-2); border-top: var(--rule) solid var(--hairline); }
.f5-row { padding: 10px 0; border-bottom: var(--rule) solid var(--hairline); }
.f5-k { display: flex; gap: 12px; align-items: baseline; font-family: var(--font-mono); }
.f5-num { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyanotype); }
.f5-deg { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.f5-name { font-size: 16px; font-weight: 500; margin-top: 2px; }
.f5-role { font-weight: 400; color: var(--ink-muted); }
.f5-dl { display: none; }
.is-motion .f5-live .f5-row { display: none; }
.is-motion .f5-live .f5-row.is-on { display: block; border-bottom: 0; }
.is-motion .f5-live .f5-dl { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
.f5-dl dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); padding-top: 2px; }
.f5-dl dd { margin: 0; }
.f5-curta .f5-panel { display: none; }

/* ---------- SVG: cores só por classe → tokens ---------- */
.f-ink { fill: var(--ink); } .f-muted { fill: var(--ink-muted); } .f-paper { fill: var(--paper); } .f-raised { fill: var(--paper-raised); }
.f-concrete { fill: var(--concrete); } .f-cyan { fill: var(--cyanotype); } .f-wash { fill: var(--cyanotype-wash); } .f-verm { fill: var(--vermilion); }
.f-rose { fill: var(--rose); } .f-pine { fill: var(--pine); } .f-none { fill: none; } .f-paper-t { fill: var(--paper-on-field); }
.s-ink { stroke: var(--ink); stroke-width: 1; } .s-hair { stroke: var(--hairline); stroke-width: 1; } .s-muted { stroke: var(--ink-muted); stroke-width: 1; }
.s-cyan { stroke: var(--cyanotype); stroke-width: 1.25; } .s-verm { stroke: var(--vermilion); stroke-width: 1.5; } .sw2 { stroke-width: 2; }
.figsvg text { font-kerning: normal; }
.t-mono { font-family: var(--font-mono); } .t-sans { font-family: var(--font-sans); } .t-track { letter-spacing: 0.08em; }
.figsvg .strike { text-decoration: line-through; }
.figsvg line, .figsvg path, .figsvg rect, .figsvg circle { vector-effect: none; }

/* ---------- notas e fontes ---------- */
.notes { max-width: calc(var(--measure-wide) + 2 * var(--gutter)); margin: var(--space-6) auto var(--space-6); padding: 0 var(--gutter); }
.notes h2 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; border-bottom: var(--rule) solid var(--hairline); padding-bottom: 8px; }
.notes ol { padding-left: 3.2em; margin-top: var(--space-3); font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.notes li + li { margin-top: 8px; }
.notes li::marker { font-family: var(--font-mono); font-size: 12px; }
.notes a { word-break: break-word; }
.notes hr { display: none; }
.footnote-back { text-decoration: none; font-family: var(--font-mono); }
.colophon { max-width: var(--page); margin: 0 auto; padding: var(--space-4) var(--gutter) var(--space-6); border-top: var(--rule) solid var(--hairline); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- telemóvel ---------- */
@media (max-width: 859px) {
  :root { --gutter: 18px; }
  .prose p { font-size: 17px; }
  .scene { display: block; padding: 0; }
  /* telemóvel: a figura fica pinada no topo, POR CIMA do texto; os passos lêem-se na metade de baixo
     e passam por baixo da figura depois de lidos (nenhum parágrafo longo tapa o gráfico). */
  .scene-graphic { position: sticky; top: 40px; height: auto; padding: 10px var(--gutter) 10px; background: var(--paper); z-index: 4; border-bottom: var(--rule) solid var(--hairline); display: block; }
  .scene-graphic .fig-hud { margin-bottom: 8px; }
  .scene-graphic .figsvg { max-height: calc(56svh - 70px); width: auto; max-width: 100%; margin: 0 auto; }
  .scene-graphic .fig-cap { display: none; }
  .scene-graphic .f5-panel { display: none; }
  .scene-steps { padding: 6svh var(--gutter) 34svh; position: relative; z-index: 1; }
  .step { min-height: 0; padding: 12svh 0; display: block; }
  .step-in { padding-left: var(--space-2); }
  .step-in p { font-size: 17px; }
  .scene-after { margin-top: 0; }
  .scene-after .fig-src { margin-left: 0; }
  .solo-pin { min-height: calc(100svh - 40px); }
  .solo .figsvg { max-height: calc(100svh - 190px); width: auto; max-width: 100%; }
  .cover { padding-top: 88px; }
  .thesis p { max-width: 14ch; }
}

/* sem movimento: tudo no frame-chave, sem sticky enganador */
.no-motion .scene { display: block; }
.no-motion .scene-graphic { position: relative; top: auto; height: auto; max-height: none; border-bottom: 0; }
.no-motion .scene-graphic .figsvg { max-height: none; }
.no-motion .solo .figsvg { max-height: none; }   /* sem pino não há ecrã a respeitar: a figura usa a largura toda (A1) */
.no-motion .scene-steps { padding: var(--space-3) 0 0; }
.no-motion .step { min-height: 0; margin-top: var(--space-3); }
@media (min-width: 860px) {
  .no-motion .scene { display: grid; }
  .no-motion .scene-graphic { position: relative; top: auto; }
  .no-motion .scene-steps { padding: 10vh 0; }
  .no-motion .step { min-height: 40vh; }
}
.print-only { display: none; }
.prose a, .notes a, .step-in a, .fig-src { overflow-wrap: anywhere; }
.thesis.long p { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; max-width: 22ch; }

/* tabela larga: tabela no desktop, blocos por linha no telemóvel e na impressão */
.tblocks { display: block; max-width: calc(var(--measure-wide) + 2 * var(--gutter)); margin: var(--space-4) auto; padding: 0 var(--gutter); }
.tb { border-top: var(--rule) solid var(--ink); padding: var(--space-2) 0 var(--space-3); }
.tb-h { font-size: 17px; line-height: 1.4; }
.tb-h strong { font-weight: 500; }
.tb-meta { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.tb dl { margin: var(--space-2) 0 0; }
.tb dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 12px; }
.tb dd { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }
@media (min-width: 860px) { .tb dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; } }
.tb-p dt { margin-top: 12px; }
.notes li { scroll-margin-top: 64px; }
.footnote-back { margin-left: 4px; }

/* =====================================================================================
   TEMA — cor e hierarquia (tokens em src/tema-*.css). Tudo com recuo para o sistema pessoal:
   sem ficheiro de tema, cada var() cai no valor original (cyanotype / ink). Nenhuma cor literal.
   ===================================================================================== */
/* chrome */
.bar .bar-prog { background: var(--accent, var(--cyanotype)); }
.fig-hud .hud-k { color: var(--accent, var(--ink)); }
.fig-hud .hud-bar i { background: var(--accent-big, var(--cyanotype)); }
.is-motion .step.is-active .step-in { border-left-color: var(--accent, var(--cyanotype)); }
a.footnote-ref { color: var(--accent, var(--cyanotype)); }
.f5-num { color: var(--accent, var(--cyanotype)); }
.chapter .ck span:first-child { color: var(--accent, var(--ink-muted)); }
.part .pk { color: var(--accent, var(--ink-muted)); border-top-color: var(--accent, var(--ink)); }
.part h1 { font-family: var(--display, var(--font-sans)); font-weight: 400; color: var(--accent, var(--ink)); font-size: clamp(52px, 8vw, 104px); }
.thesis p { color: var(--accent, var(--ink)); }
.prose blockquote .qm { color: var(--quote, inherit); }

/* capa (tema C: título em serifa de exibição, petróleo; versaletes mono; aspas em cor) */
.cover h1 { font-family: var(--display, var(--font-sans)); font-weight: 400; font-size: clamp(56px, 10vw, 128px); line-height: .92; letter-spacing: -0.01em; color: var(--accent, var(--ink)); }
.cover .eyebrow, .cover .meta { font-variant-caps: all-small-caps; letter-spacing: .12em; font-size: 14px; text-transform: none; }
/* (o subtítulo não é citação: sem aspas decorativas) */
.cover .g-p { fill: var(--c-pessoas, var(--ink)); } .cover .g-a { fill: var(--c-agentes, var(--cyanotype)); } .cover .g-l { stroke: var(--c-agentes, var(--cyanotype)); }

/* índice com hierarquia */
.vtoc { max-width: var(--measure-wide); }
.vtoc ol { border-top: 0; }
.vtoc > h2 { font-family: var(--font-mono); font-size: 14px; font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--ink-muted); font-weight: 500; margin-bottom: var(--space-3); }
.vt-part { margin-top: var(--space-4); --pt: var(--part-0, var(--ink)); --pt-tint: var(--part-0-tint, var(--paper-raised)); }
.vt-part[data-p="1"] { --pt: var(--part-1, var(--ink)); --pt-tint: var(--part-1-tint, var(--paper-raised)); }
.vt-part[data-p="2"] { --pt: var(--part-2, var(--ink)); --pt-tint: var(--part-2-tint, var(--paper-raised)); }
.vt-head { display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--pt); }
.vt-roman { font-family: var(--display, var(--font-sans)); font-size: 44px; line-height: .9; color: var(--pt); }
.vt-title { font-family: var(--display, var(--font-sans)); font-size: 32px; line-height: 1.1; color: var(--pt); }
.vt-count { font-family: var(--font-mono); font-size: 14px; font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--ink-muted); }
.vtoc .vt-part ol { list-style: none; margin: 0; padding: 0 0 0 80px; }
.vtoc .vt-part li { border-bottom: 1px solid var(--hairline); }
.vtoc .vt-part li a { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 11px 0; text-decoration: none; align-items: baseline; }
.vt-n { font-family: var(--font-mono); font-size: 13px; color: var(--pt); font-weight: 500; }
.vt-t { font-size: 17px; line-height: 1.35; color: var(--ink); }
.vtoc a:hover .vt-t { text-decoration: underline; text-decoration-color: var(--ink); }
.vt-part[data-p="0"] .vt-head, .vt-part[data-p="9"] .vt-head { grid-template-columns: 1fr auto; }
.vt-part[data-p="0"] .vt-roman, .vt-part[data-p="9"] .vt-roman { display: none; }
@media (max-width: 859px) {
  .vt-head { grid-template-columns: 44px 1fr; } .vt-count { grid-column: 2; }
  .vt-roman { font-size: 34px; } .vt-title { font-size: 26px; }
  .vtoc .vt-part ol { padding-left: 0; } .vtoc .vt-part li a { grid-template-columns: 36px 1fr; }
}

/* figuras — uma cor por camada, a mesma em todas; «agente» é sempre --c-agentes */
.figsvg .f-cyan { fill: var(--c-agentes, var(--cyanotype)); }
.figsvg .s-cyan { stroke: var(--c-agentes, var(--cyanotype)); }
.figsvg .f-wash { fill: color-mix(in srgb, var(--accent, var(--cyanotype)) 16%, var(--paper)); }
.cursorline { stroke: var(--accent, var(--cyanotype)); }
/* F1 */
.f1 .L1 .node { fill: var(--c-pessoas, var(--ink)); } .f1 .L1 .edge { stroke: var(--c-pessoas, var(--ink)); }
.f1 .L2 .plane { fill: color-mix(in srgb, var(--c-cerebro, var(--paper-raised)) 16%, var(--paper)); stroke: var(--c-cerebro, var(--hairline)); }
.f1 .L2 .drop { stroke: var(--c-cerebro, var(--hairline)); }
.f1 .L3 .sopr { stroke: var(--c-instrucoes, var(--ink)); fill: color-mix(in srgb, var(--c-instrucoes, var(--paper)) 14%, var(--paper)); } .f1 .L3 .sopl { stroke: var(--c-instrucoes, var(--ink)); }
.f1 .L5 .tool rect:first-child { stroke: var(--c-ferramentas, var(--ink)); fill: color-mix(in srgb, var(--c-ferramentas, var(--paper)) 10%, var(--paper)); }
.f1 .L5 .tool rect:nth-child(2) { fill: var(--c-ferramentas, var(--ink)); } .f1 .L5 .tlink { stroke: var(--c-ferramentas, var(--ink)); }
/* F2 */
.f2 .n-person circle { fill: var(--c-pessoas, var(--ink)); }
.f2 .brain > rect { fill: color-mix(in srgb, var(--c-cerebro, var(--paper-raised)) 12%, var(--paper)); stroke: var(--c-cerebro, var(--hairline)); }
.f2 .n-sop rect { stroke: var(--c-instrucoes, var(--ink)); }
.f2 .n-mem rect { stroke: var(--c-cerebro, var(--ink)); } .f2 .memnew { stroke: var(--c-cerebro, var(--cyanotype)); }
.f2 .n-tool rect:first-child { stroke: var(--c-ferramentas, var(--ink)); } .f2 .n-tool rect:nth-child(2) { fill: var(--c-ferramentas, var(--ink)); }
/* F3 — cor pelo que se mede */
.f3 .pa .series, .f3 .pa .dot { stroke: var(--d-empresas, var(--ink)); } .f3 .pa .series.s-ink { stroke-opacity: .55; }
.f3 .pb .series, .f3 .pb .dot { stroke: var(--d-inquiridos, var(--ink)); }
.f3 .pc .slope, .f3 .pc .slopedot { stroke: var(--d-agentes, var(--cyanotype)); } .f3 .pc circle.f-cyan { fill: var(--d-agentes, var(--cyanotype)); }
.f3 .pa .vlab, .f3 .pa > text.t-track { fill: var(--d-empresas-text, var(--ink)); }
.f3 .pb .vlab, .f3 .pb > text.t-track { fill: var(--d-inquiridos-text, var(--ink)); }
.f3 .pc .vlab, .f3 .pc > text.t-track { fill: var(--d-agentes-text, var(--ink)); }
.f3 .panel > text.t-track { font-weight: 500; }
.f3-counter, .f9-counter { fill: var(--accent, var(--ink)); }
/* F4 — sinais (ferramentas) · memória (cérebro) · instruções · saída */
.f4 .floor[data-k="1"] .fl-bg { stroke: var(--c-ferramentas, var(--hairline)); fill: color-mix(in srgb, var(--c-ferramentas, var(--paper-raised)) 8%, var(--paper)); }
.f4 .floor[data-k="2"] .fl-bg { stroke: var(--c-cerebro, var(--hairline)); fill: color-mix(in srgb, var(--c-cerebro, var(--paper-raised)) 10%, var(--paper)); }
.f4 .floor[data-k="3"] .fl-bg { stroke: var(--c-instrucoes, var(--hairline)); fill: color-mix(in srgb, var(--c-instrucoes, var(--paper-raised)) 9%, var(--paper)); }
.f4 .floor[data-k="2"] .f-cyan { fill: var(--c-cerebro, var(--cyanotype)); }
.f4 .floor[data-k="4"] circle.f-ink, .f4 .owner circle { fill: var(--c-pessoas, var(--ink)); }
.f4 .floor[data-k="4"] line.s-cyan { stroke: var(--c-agentes, var(--cyanotype)); }
.f4 .ret, .f4 .reth { stroke: var(--c-cerebro, var(--cyanotype)); }
/* F5 */
.f5 .glyph circle { fill: var(--c-pessoas, var(--ink)); }
.f5 .climber circle:first-child { stroke: var(--accent, var(--cyanotype)); } .f5 .climber circle:last-child { fill: var(--accent, var(--cyanotype)); }
/* F6 */
.f6 .f6bar.f-ink { fill: var(--c-pessoas, var(--ink)); } .f6 .f6bar.f-cyan { fill: var(--d-empresas, var(--cyanotype)); }
.f6 .flat { stroke: var(--d-empresas, var(--cyanotype)); } .f6 .inset circle.s-cyan { stroke: var(--d-empresas, var(--cyanotype)); } .f6 .inset circle.f-cyan { fill: var(--d-empresas, var(--cyanotype)); }
/* F8 — datas novas no acento */
.f8 .cbg.f-wash { stroke: var(--accent, var(--cyanotype)); } .f8 circle.f-cyan { fill: var(--accent, var(--cyanotype)); }
/* F9 — o consumo é trabalho de agentes */
.f9 .f9p1 .series, .f9 .f9p1 .dot { stroke: var(--c-agentes, var(--cyanotype)); }
/* F10 */
.f10 .core > circle:first-child { fill: color-mix(in srgb, var(--c-cerebro, var(--concrete)) 22%, var(--paper)); }
.f10 .mrow circle { fill: var(--c-pessoas, var(--ink)); }

/* telemóvel: zona segura (entalhe/ilha) e ritmo dos passos sem vazios longos (medido em WebKit-iPhone) */
/* o cabeçalho cobre a zona segura inteira (relógio/ilha) com papel opaco: nada do artigo passa por cima do banner */
.bar { padding-top: env(safe-area-inset-top); height: calc(40px + env(safe-area-inset-top)); align-items: center; box-sizing: border-box; }
/* iOS Safari 26 (medido no Simulador, iPhone 17 Pro): env(safe-area-inset-top) = 0 mesmo com viewport-fit=cover;
   o Safari ESTENDE a cor do elemento fixo do topo por trás da barra de estado — mas só se esse elemento for o
   cabeçalho. A camada fixa de «dente do papel» (body::before, ecrã inteiro) roubava esse lugar e deixava o artigo
   visível por cima do banner. Em ecrãs de toque o dente sai; o cabeçalho volta a cobrir a zona do relógio. */
@media (hover: none) { body::before { display: none; } }
.cover { padding-top: calc(104px + env(safe-area-inset-top)); }
.chapter, .part, .notes li { scroll-margin-top: calc(64px + env(safe-area-inset-top)); }
@media (max-width: 859px) {
  .scene-graphic { top: calc(40px + env(safe-area-inset-top)); }
  .scene-steps { padding: 4svh var(--gutter) 8svh; }
  .step { padding: 5svh 0; }
  .solo .figsvg { max-height: calc(100svh - 260px); }
  .solo-pin { min-height: 0; }
}
@media (max-width: 859px) {
  .part { margin: var(--space-5) auto var(--space-4); }
  .prose hr { margin: var(--space-4) 0; }
  .notes { margin-bottom: var(--space-4); }
}
@media (max-width: 859px) { .cover { padding-top: calc(88px + env(safe-area-inset-top)); } }

/* barra: título e capítulo levam ao índice */
.bar a { color: inherit; text-decoration: none; }
.bar a:hover, .bar a:focus-visible { text-decoration: underline; text-decoration-color: var(--hairline); }
@media (max-width: 859px) { .bar .bar-title { display: none; } .bar .bar-ch { max-width: 100%; text-align: left; } }

/* citações: frase citada em serifa; tradução e atribuição fora das aspas */
.prose blockquote p.q-tr { font-size: 16px; color: var(--ink-muted); margin-top: 10px; }
.prose blockquote p.q-attr { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-muted); margin-top: 8px; }

/* títulos sem viúvas; parágrafos com quebra «bonita» */
h1, h2, h3, .fig-cap .ct, .vt-t, .vt-title { text-wrap: balance; }
.prose p, .step-in p { text-wrap: pretty; }

/* cor de Parte: aberturas, números de capítulo e (via data-part no <html>) barra de progresso e HUD */
[data-part="1"] { --pt: var(--part-1, var(--accent, var(--ink))); }
[data-part="2"] { --pt: var(--part-2, var(--accent, var(--ink))); }
.part .pk { color: var(--pt, var(--accent, var(--ink-muted))); border-top-color: var(--pt, var(--accent, var(--ink))); }
.part h1 { color: var(--pt, var(--accent, var(--ink))); }
.chapter .ck span:first-child { color: var(--pt, var(--accent, var(--ink-muted))); }
html[data-part] .bar .bar-prog, html[data-part] .fig-hud .hud-bar i { background: var(--pt, var(--accent, var(--cyanotype))); }
html[data-aparato] .bar .bar-prog { background: var(--ink-faint); }

/* =====================================================================================
   POLIMENTO r2 (2026-09-28): capa-placa, blocos recolhíveis, ritmo de leitura, listas, máscaras sob o chrome.
   Só var(): as cores novas vivem em placa-tokens.css.
   ===================================================================================== */

/* ---------- capa = placa (registo das aberturas de Parte) ---------- */
.cover.placa-capa { max-width: none; margin: 0; padding: calc(40px + env(safe-area-inset-top)) 0 0; min-height: 100vh; min-height: 100svh;
  display: block; position: relative; overflow: clip; isolation: isolate; background: var(--placa-0); color: var(--placa-creme);
  --placa-acento: var(--placa-acento-0); }
.cover.placa-capa::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image: var(--placa-trama); background-size: var(--placa-trama-passo) var(--placa-trama-passo); image-rendering: pixelated; }
.capa-in { position: relative; z-index: 2; max-width: 1360px; margin: 0 auto; min-height: calc(100svh - 40px - env(safe-area-inset-top));
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5vw; align-items: center; padding: 5vh 5.5vw 6vh; }
.capa-art { margin: 0; justify-self: end; position: relative; }
.capa-art img { display: block; height: min(80svh, 780px); width: auto; max-width: 100%; object-fit: contain;
  outline: 1px solid var(--placa-filete); outline-offset: 12px; filter: var(--placa-sombra); }
.capa-txt { max-width: 600px; }
.cover.placa-capa .pk { display: flex; gap: 14px; align-items: center; color: var(--placa-creme);
  font-family: var(--placa-mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.cover.placa-capa .pk .placa-sep { flex: 1; min-width: 40px; max-width: 220px; height: 1px; background: currentColor; opacity: .55; }
.cover.placa-capa h1 { font-family: var(--placa-serifa); font-weight: 400; color: var(--placa-creme); margin-top: 22px; max-width: 11ch;
  font-size: clamp(54px, 6.6vw, 108px); line-height: .96; letter-spacing: -.015em; text-shadow: var(--placa-sombra-texto); }
.cover.placa-capa h1 .placa-mao { font-family: var(--placa-mao); font-size: 1.16em; line-height: 0; padding-right: .16em; }
.cover.placa-capa .placa-filete { display: block; width: 112px; height: 4px; margin-top: 26px; background: var(--placa-acento); }
.cover.placa-capa .sub { font-family: var(--placa-serifa); font-size: clamp(21px, 1.9vw, 27px); line-height: 1.3; max-width: 30ch; margin-top: 24px;
  color: var(--placa-creme); opacity: .9; }
.capa-autor { margin-top: 26px; color: var(--placa-creme); display: flex; flex-direction: column; gap: 4px; }
.capa-autor-nome { font-family: var(--placa-mono); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.capa-autor-com { font-family: var(--placa-serifa); font-style: italic; font-size: 17px; opacity: .8; }
.capa-pe { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 36px; }
.capa-ler { display: inline-flex; gap: 10px; align-items: center; padding: 12px 18px 12px 20px; border: 1px solid var(--placa-creme); color: var(--placa-creme);
  text-decoration: none; font-family: var(--placa-mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.capa-ler:hover, .capa-ler:focus-visible { background: var(--placa-creme); color: var(--placa-0); text-decoration: none; }
.capa-meta { font-family: var(--placa-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--placa-creme); opacity: .8; }
@media (max-width: 859px) {
  .capa-in { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: 14px 18px 22px; min-height: calc(100svh - 40px - env(safe-area-inset-top)); }
  /* a gravura enche o espaço que sobra; a imagem é ABSOLUTA dentro da moldura — no Safari (Simulador, iPhone 17 Pro)
     height:100% num item flexível sem altura definida caía na altura natural (527 px) e tapava o título */
  .capa-art { order: 0; justify-self: stretch; width: 100%; flex: 1 1 0; min-height: 180px; max-height: 52svh; position: relative; overflow: visible; }
  .capa-art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 36%; outline-offset: 6px; }
  .capa-txt { order: 1; margin-top: 22px; }
  .cover.placa-capa h1 { font-size: clamp(42px, 12.4vw, 56px); margin-top: 14px; max-width: 12ch; }
  .cover.placa-capa .placa-filete { margin-top: 16px; width: 84px; height: 3px; }
  .cover.placa-capa .sub { font-size: 19px; margin-top: 14px; max-width: none; }
  .capa-pe { margin-top: 20px; gap: 16px; }
  .capa-autor { margin-top: 14px; gap: 2px; }
  .capa-autor-nome { font-size: 12px; }
  .capa-autor-com { font-size: 15px; }
}
@media (max-width: 859px) and (max-height: 720px) { .cover.placa-capa h1 { font-size: 40px; } .cover.placa-capa .sub { font-size: 17px; } }
.cover.placa-capa + .toc-box { margin-top: var(--space-5); }

/* ---------- blocos recolhíveis: índice, «O que foi mudado», Anexo — Fontes, Notas ---------- */
details.toc-box, details.aparato-bloco { max-width: calc(var(--measure-wide) + 2 * var(--gutter)); margin: var(--space-4) auto 0; padding: 0 var(--gutter); }
details.aparato-bloco { padding: 0; }
.notes details.aparato-bloco { max-width: none; margin-top: 0; }
details.toc-box > summary, details.aparato-bloco > summary, details.aparato > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: var(--rule) solid var(--hairline); border-bottom: var(--rule) solid var(--hairline); }
details > summary::-webkit-details-marker { display: none; }
details.toc-box > summary::after, details.aparato-bloco > summary::after, details.aparato > summary::after {
  content: "+"; margin-left: auto; font-family: var(--font-mono); font-size: 18px; line-height: 1; color: var(--accent, var(--ink)); transition: transform 200ms var(--ease); }
details[open] > summary::after { transform: rotate(45deg); }
.tb-k { font-family: var(--font-mono); font-size: 14px; font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--ink); font-weight: 500; }
.tb-r { font-size: 15px; color: var(--ink-muted); }
details.toc-box > summary:hover .tb-r, details.aparato-bloco > summary:hover .tb-r { color: var(--ink); }
details.toc-box[open] > summary { border-bottom-color: transparent; }
details.toc-box .vtoc { max-width: none; margin: 0; padding: 0 0 var(--space-3); }
details.toc-box .vtoc > h2 { display: none; }
details.toc-box .vt-part:first-of-type { margin-top: var(--space-2); }
.anexo-aberto { outline: 0; }
/* «O que foi mudado» (cap. 10): aparato metodológico, fechado, discreto */
.prose details.aparato { margin: var(--space-4) 0; }
.prose details.aparato > summary { font-family: var(--font-mono); font-size: 14px; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--ink-muted); }
.prose details.aparato[open] > summary { border-bottom-color: transparent; }
.prose details.aparato > ol { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.prose details.aparato > ol li { font-size: 15px; }
.notes details.aparato-bloco > ol { margin-top: var(--space-3); }
.notes h2 { display: none; }

/* ---------- ritmo e fronteiras de leitura ---------- */
/* capitular no 1.º parágrafo de cada capítulo */
.prose p.abre:not(.rub)::first-letter { font-family: var(--display, var(--font-serif)); font-weight: 400; float: left; font-size: 4.1em; line-height: .78;
  padding: .06em .08em 0 0; margin-top: .02em; color: var(--pt, var(--accent, var(--ink))); }
@media (max-width: 859px) { .prose p.abre:not(.rub)::first-letter { font-size: 3.4em; } }
/* rubrica: o título-em-linha a negrito ganha linha própria em versalete (as palavras não mudam) */
.prose p.rub .rubrica, .step-in p.rub .rubrica { display: block; margin-bottom: 2px; font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  letter-spacing: .07em; font-variant-caps: all-small-caps; color: var(--pt, var(--accent, var(--ink))); }
.prose p.rub + p.rub { margin-top: var(--space-4); }
/* subsecções: filete curto na cor da Parte, mais ar por cima */
.prose h3 { margin-top: var(--space-5); }
.prose h3::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: 14px; background: var(--pt, var(--accent, var(--ink))); }
/* quebra de cena (---): três pontos, não um fio cinzento */
.prose hr { height: auto; background: none; border: 0; margin: var(--space-5) 0; text-align: center; overflow: visible; }
.prose hr::after { content: "·\2003·\2003·"; font-family: var(--display, var(--font-serif)); font-size: 30px; line-height: 1; color: var(--pt, var(--accent, var(--ink-muted))); }
/* número do capítulo na margem (desktop largo) */
.chapter[data-num] { position: relative; }
@media (min-width: 1200px) {
  .chapter[data-num]::before { content: attr(data-num); position: absolute; right: calc(100% + 40px); top: 26px; font-family: var(--display, var(--font-serif));
    font-size: 104px; line-height: .8; color: var(--pt, var(--accent, var(--ink))); font-variant-numeric: lining-nums; }
}
/* (r3, decisão do autor 2026-09-28) web alinhada à esquerda em todas as larguras; só o PDF justifica (print.css) */

/* ---------- listas: numerais e travessões DENTRO da coluna, alinhados com a margem do parágrafo ---------- */
.prose ol:not(.placa-caps), .step-in ol { list-style: none; padding-left: 0; counter-reset: n; }
.prose ol[start="0"] { counter-reset: n -1; }
.prose ol:not(.placa-caps) > li, .step-in ol > li { counter-increment: n; position: relative; padding-left: 2.1em; }
.prose ol:not(.placa-caps) > li::before, .step-in ol > li::before { content: counter(n) "."; position: absolute; left: 0; top: 0; min-width: 1.6em;
  font-variant-numeric: tabular-nums; font-weight: 500; color: var(--pt, var(--accent, var(--ink))); }
.prose ul, .step-in ul { list-style: none; padding-left: 0; }
.prose ul > li, .step-in ul > li { position: relative; padding-left: 1.4em; }
.prose ul > li::before, .step-in ul > li::before { content: "–"; position: absolute; left: 0; top: 0; color: var(--ink-muted); }

/* ---------- nada desliza por baixo do chrome sem máscara ---------- */
.bar { background: var(--paper); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(to bottom, var(--paper), color-mix(in srgb, var(--paper) 0%, transparent)); transition: opacity 200ms var(--ease); }
.sob-placa .bar::after { opacity: 0; }
@media (max-width: 859px) {
  .is-motion .scene-graphic::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; pointer-events: none;
    background: linear-gradient(to bottom, var(--paper), color-mix(in srgb, var(--paper) 0%, transparent)); }
  /* (c) aperto à volta das figuras: a cena termina com a figura, a FONTE vem logo a seguir */
  .scene { margin-bottom: var(--space-3); }
  .scene-steps { padding-bottom: 2svh; }
  .scene-after { margin-bottom: var(--space-4); }
  .solo { margin: var(--space-4) auto var(--space-3); }
}
/* listas de fontes (Anexo) e glossário: alinhadas à esquerda — URLs longos não se justificam (medido no PDF: linhas com folgas de 5–8 espaços) */
.chapter[data-aparato] ~ ul > li, .chapter[data-aparato] ~ p, #anexo-bloco li, #anexo-bloco p, .creditos li { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
/* voltar de uma nota: a chamada fica a meio do ecrã, não debaixo do cabeçalho */
a.footnote-ref { scroll-margin-top: 30vh; scroll-margin-bottom: 20vh; }
/* o bloco do Anexo vive fora de .prose: mesma coluna e mesma medianiz que a prosa */
#anexo-bloco { max-width: calc(var(--measure) + 2 * var(--gutter)); padding: 0 var(--gutter); }
#anexo-bloco > .prose { padding: 0; }
.notes { margin-top: var(--space-4); }

/* r3: figuras no telemóvel numa banda estreita de tamanho de letra — o texto dos SVG (11,3 no viewBox) não passa de
   ~10,3 px (tecto de largura 328 px); as figuras que o painel limita pela altura ficam abaixo, nunca acima */
:root { --fig-max-m: 328px; }
@media (max-width: 859px) { .figsvg.v-m { max-width: min(100%, var(--fig-max-m)); margin-left: auto; margin-right: auto; } }
details:not([open]) > summary .st-fe, details[open] > summary .st-ab { display: none; }

/* Placas de abertura de Parte (variante A: gravura à direita, a sair da moldura).
   Acrescentar ao fim de app.css. As fontes Instrument Serif e IBM Plex Mono já existem no site;
   a Pinyon Script (só maiúsculas, OFL) vem em assets/placas/.
   Todas as cores vivem em placa-tokens.css; estas regras só usam var() (passa no G4 do check.py). */
@font-face { font-family: "Pinyon Script"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("placas/pinyon-script-maiusculas.woff2") format("woff2"); }


.part.placa { max-width: none; margin: 0; padding: 0; position: relative; min-height: 100vh; min-height: 100svh;
  overflow: clip; isolation: isolate; color: var(--placa-creme); scroll-margin-top: 0; }
.part.placa[data-p="1"] { background: var(--placa-1); --placa-acento: var(--placa-acento-1); }
.part.placa[data-p="2"] { background: var(--placa-2); --placa-acento: var(--placa-acento-2); }
/* a trama por cima de TUDO (chão, gravura, texto), como no vídeo */
.part.placa::after { content: ""; position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background-image: var(--placa-trama); background-size: var(--placa-trama-passo) var(--placa-trama-passo); image-rendering: pixelated; }

.placa-in { position: relative; min-height: inherit; display: grid; grid-template-columns: minmax(0, 46%) 1fr;
  align-items: end; padding: 0 5.5vw 8vh; }
.placa-txt { position: relative; z-index: 30; will-change: transform; padding-top: 14vh; max-width: 560px; }
.part.placa .pk { display: flex; gap: 14px; align-items: center; border: 0; padding: 0; color: var(--placa-creme);
  font-family: var(--placa-mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.part.placa .pk span { white-space: nowrap; }
.part.placa .pk .placa-sep { flex: 1; min-width: 40px; height: 1px; background: currentColor; opacity: .55; }
.part.placa h1 { font-family: var(--placa-serifa); font-weight: 400; color: var(--placa-creme); margin-top: 18px; max-width: 9ch;
  font-size: clamp(56px, 7.2vw, 112px); line-height: .98; letter-spacing: -.015em; text-shadow: var(--placa-sombra-texto); }
.placa-mao { font-family: var(--placa-mao); font-size: 1.18em; line-height: 0; letter-spacing: 0; padding-right: .02em; }
.placa-filete { display: block; width: 112px; height: 4px; margin-top: 22px; background: var(--placa-acento); }
.placa-caps { list-style: none; margin: 26px 0 0; padding: 0; font-family: var(--placa-serifa); font-size: 22px; line-height: 1.24; }
.placa-caps li { display: grid; grid-template-columns: 34px 1fr; padding: 5px 0; border-top: 1px solid var(--placa-filete); }
.placa-caps li b { font-family: var(--placa-mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; padding-top: 5px; }
.placa-caps a { color: inherit; text-decoration: none; }
.placa-caps a:hover { text-decoration: underline; text-decoration-color: var(--placa-acento); }
.placa-conta { display: none; margin-top: 22px; font-family: var(--placa-mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

.placa-num { position: absolute; z-index: 10; left: 54vw; top: 5vh; font-family: var(--placa-serifa); font-weight: 400;
  font-size: min(74vh, 40vw); line-height: .8; letter-spacing: -.02em; color: var(--placa-creme); opacity: .96; }
.placa-art { position: absolute; z-index: 20; margin: 0; right: -3vw; bottom: -14vh; height: 112vh; aspect-ratio: var(--ar); }
.placa-art img { display: block; height: 100%; width: auto; filter: var(--placa-sombra); }
.placa-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* camada animada discreta (fita perfurada / folhas); sem movimento com reduced motion */
.placa-art .pf-borda { stroke: var(--placa-borda-1); }
.placa-art .pf-papel { stroke: var(--placa-papel); }
.placa-art .pf-tinta { stroke: var(--placa-tinta-1); }
.placa-art .pf-meia { stroke-opacity: .5; }
.placa-art .placa-sombra-1 { flood-color: var(--placa-sombra-1); }
.placa-art .placa-sombra-2 { flood-color: var(--placa-sombra-2); }
.placa-art .pg-papel { fill: var(--placa-papel); }
.placa-art .pg-borda { stroke: var(--placa-tinta-2); stroke-opacity: .35; }
.placa-art .pg-tinta { stroke: var(--placa-tinta-2); }
.placa-furos { animation: placa-avanco 9s linear infinite; }
@keyframes placa-avanco { to { stroke-dashoffset: -240; } }
.placa-folha { transform-box: fill-box; transform-origin: 50% 12%; animation: placa-balanco var(--d, 8s) ease-in-out infinite alternate; }
@keyframes placa-balanco { from { transform: translate(0, -6px) rotate(calc(var(--r, 2deg) * -1)); } to { transform: translate(4px, 8px) rotate(var(--r, 2deg)); } }

@media (max-width: 760px) {
  .placa-in { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; padding: 0 22px 30px; }
  .part.placa + .prose > .chapter:first-child { margin-top: var(--space-4); }  /* sem faixa vazia entre a placa e o capítulo (medido: 40 % do ecrã) */
  .placa-txt { padding-top: 0; }
  .placa-num { left: 14px; top: 5vh; font-size: 44vh; }
  .placa-art { right: -16vw; top: 3vh; bottom: auto; height: 62vh; height: min(56svh, calc(100svh - 330px)); }
  .part.placa h1 { font-size: 60px; }
  .placa-caps { display: none; }
  .placa-conta { display: block; }
}
@media (prefers-reduced-motion: reduce) { .placa-furos, .placa-folha { animation: none; } }
@media print { .part.placa::after, .placa-art svg { display: none; } .part.placa { min-height: auto; break-after: page; } }

/* Momentos (r4, protótipo) — só var(): as cores vêm dos tokens. Camada por cima do texto, sem efeito no layout. */
.momento { position: absolute; left: 0; right: 0; z-index: 40; pointer-events: none; overflow: hidden; contain: layout paint; }
.momento > * { position: absolute; will-change: transform, opacity; }
/* onda: gravura recortada, uma só tinta, sem campo nem trama (um passo ao lado das placas) */
.m-onda { left: 0; bottom: 0; height: auto; opacity: 0; transform: translate3d(-110%, 20%, 0);
  /* a gravura acaba num corte recto: esbate-se em baixo para não se ver a aresta a passar */
  -webkit-mask-image: linear-gradient(to bottom, var(--ink) 72%, transparent); mask-image: linear-gradient(to bottom, var(--ink) 72%, transparent); }
/* vidro fosco: o texto continua lá, desfocado — «o vulto do amanhã» */
.m-vidro { top: 0; bottom: 0; -webkit-backdrop-filter: blur(3.5px) saturate(.6); backdrop-filter: blur(3.5px) saturate(.6);
  background: color-mix(in srgb, var(--paper) 42%, transparent); border: 1px solid color-mix(in srgb, var(--accent, var(--ink)) 30%, transparent);
  clip-path: inset(0 100% 0 0); display: flex; align-items: center; justify-content: center; }
.m-olhos { display: flex; gap: 14px; opacity: 0; }
.m-olho-svg { width: 62px; height: 46px; overflow: visible; }
.m-mira { transform-box: view-box; }
.m-olho { transform-origin: 24px 18px; transform-box: view-box; }
.m-contorno { fill: var(--paper); stroke: var(--accent, var(--ink)); stroke-width: 1.6; }
.m-iris { fill: var(--accent, var(--ink)); opacity: .85; } .m-pupila { fill: var(--ink); } .m-brilho { fill: var(--paper); }
.m-palpebra { fill: color-mix(in srgb, var(--accent, var(--ink)) 25%, var(--paper)); stroke: var(--accent, var(--ink)); stroke-width: 1.2; }
/* agente: a criatura quadrada das figuras, com a ficha de instrução às costas */
.m-agente { left: 0; top: 0; width: 32px; height: 33px; overflow: visible; transform: translate3d(-30px, 0, 0); }
.m-agente .m-corpo { fill: var(--paper); stroke: var(--c-agentes, var(--accent)); stroke-width: 1.6; }
.m-agente .m-traco { stroke: var(--c-agentes, var(--accent)); stroke-width: .7; }
.m-agente .m-tinta { fill: var(--ink); } .m-agente .m-luz { fill: var(--paper); } .m-agente .m-hachura { opacity: .55; }
.m-agente .m-braco { stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; fill: none; }
.m-agente .m-papel { fill: var(--paper); stroke: var(--c-instrucoes, var(--ink)); stroke-width: 1.2; }
.m-agente .m-linha { stroke: var(--c-instrucoes, var(--ink)); stroke-width: 1; }
.m-agente .m-perna { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.m-agente .m-pernas-b, .m-agente.m-b .m-pernas-a { display: none; } .m-agente.m-b .m-pernas-b { display: inline; }
.m-pessoa { top: 12px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--c-pessoas, var(--ink)); opacity: 0; }
/* andorinhas: pousam no fio da citação, nunca nas letras */
.m-fio { height: 1px; background: var(--hairline); transform-origin: 0 50%; }
.m-ave { left: 0; top: 44px; height: 52px; width: auto; opacity: 0; }
.m-ave.m-pousada { top: 78px; height: 46px; }
@media print { .momento { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .momento { display: none !important; } }