/*
 * brew.css — estilos de página estilo manual de D&D 5e.
 *
 * Este archivo es la única fuente de verdad del renderizado: la app lo carga
 * con <link> y el exportador de HTML lo incrusta tal cual en el archivo final.
 *
 * Las familias tipográficas se leen de variables CSS. Dentro de la app las
 * define next/font (self-hosted). Si la variable no existe, cae al segundo
 * valor del stack. Para usar las fuentes originales del PHB, mira
 * public/fonts/README.md.
 */

/*
 * Todo el archivo va dentro de la capa `brew`. Eso deja el CSS que el usuario
 * escribe en la pestaña «Estilo» *sin* capa, y en la cascada lo no-encapado gana
 * siempre a lo encapado, sin importar la especificidad. Así `.page h1 { … }`
 * escrito por el usuario vence a `.brew .page h1 { … }` de aquí, que es lo que
 * cualquiera espera al abrir esa pestaña.
 */
@layer brew;

@layer brew {

.brew {
  --font-brew-body-stack: var(--font-brew-body, "EB Garamond", Garamond, "Palatino Linotype", Palatino, Georgia, serif);
  --font-brew-heading-stack: var(--font-brew-heading, "Cinzel", "Trajan Pro", Georgia, serif);
  --font-brew-sans-stack: var(--font-brew-sans, "Alegreya Sans", "Segoe UI", Tahoma, sans-serif);
  --font-brew-hand-stack: var(--font-brew-hand, var(--font-brew-body, "EB Garamond"), Georgia, serif);
  --font-brew-display-stack: var(--font-brew-display, "Cinzel Decorative", "Cinzel", Georgia, serif);

  --hex-grid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='173' viewBox='0 0 100 173'><g fill='none' stroke='rgba(0,0,0,0.55)' stroke-width='2'><path d='M50 0 L100 28.9 L100 86.6 L50 115.5 L0 86.6 L0 28.9 Z'/><path d='M0 86.6 L0 144.3 L50 173'/><path d='M100 86.6 L100 144.3 L50 173'/></g></svg>");
  --brush-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='520' preserveAspectRatio='none' viewBox='0 0 400 520'><filter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'><feTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='4' seed='5' result='r'/><feDisplacementMap in='SourceGraphic' in2='r' scale='26' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='14' y='14' width='372' height='492' fill='black' filter='url(%23b)'/></svg>");
  --brush-mask-rough: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='520' preserveAspectRatio='none' viewBox='0 0 400 520'><filter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'><feTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='4' seed='12' result='r'/><feDisplacementMap in='SourceGraphic' in2='r' scale='46' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='14' y='14' width='372' height='492' fill='black' filter='url(%23b)'/></svg>");
  --chapter-flourish: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M64 12c14 0 22 11 22 24 0 18-16 28-30 34-10 4-18 9-18 17 0 6 5 10 11 10 7 0 12-5 12-11 0-5-3-9-8-9' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/><circle cx='53' cy='97' r='4'/></svg>");
  --torn-edge-top: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1040' height='22' preserveAspectRatio='none' viewBox='0 0 1040 22'><path d='M0,22 L0.0,10.1 L2.7,10.0 L5.5,8.7 L8.2,7.6 L10.9,8.3 L13.7,10.0 L16.4,9.8 L19.2,9.2 L21.9,8.6 L24.6,8.5 L27.4,8.2 L30.1,6.8 L32.8,6.9 L35.6,6.8 L38.3,7.0 L41.1,8.2 L43.8,8.0 L46.5,7.5 L49.3,6.1 L52.0,7.6 L54.7,7.5 L57.5,7.2 L60.2,8.0 L62.9,7.6 L65.7,8.7 L68.4,8.0 L71.2,6.7 L73.9,7.2 L76.6,8.3 L79.4,7.6 L82.1,8.8 L84.8,7.7 L87.6,8.2 L90.3,7.8 L93.1,7.5 L95.8,8.4 L98.5,8.6 L101.3,8.1 L104.0,10.1 L106.7,9.0 L109.5,8.7 L112.2,8.3 L114.9,7.2 L117.7,9.6 L120.4,7.0 L123.2,7.1 L125.9,8.8 L128.6,7.2 L131.4,7.2 L134.1,6.2 L136.8,6.5 L139.6,6.3 L142.3,7.2 L145.1,6.1 L147.8,7.2 L150.5,6.8 L153.3,7.4 L156.0,6.8 L158.7,4.8 L161.5,6.9 L164.2,7.3 L166.9,7.1 L169.7,6.3 L172.4,7.8 L175.2,7.3 L177.9,6.5 L180.6,7.2 L183.4,6.7 L186.1,7.6 L188.8,7.4 L191.6,5.3 L194.3,7.3 L197.1,8.2 L199.8,7.1 L202.5,7.0 L205.3,7.0 L208.0,7.5 L210.7,6.1 L213.5,6.2 L216.2,6.7 L218.9,6.2 L221.7,6.8 L224.4,5.7 L227.2,5.1 L229.9,6.0 L232.6,5.8 L235.4,6.7 L238.1,5.9 L240.8,6.8 L243.6,8.0 L246.3,7.5 L249.1,7.7 L251.8,8.6 L254.5,9.3 L257.3,9.4 L260.0,7.2 L262.7,6.7 L265.5,8.0 L268.2,7.2 L270.9,6.9 L273.7,6.8 L276.4,6.9 L279.2,5.9 L281.9,5.5 L284.6,5.5 L287.4,5.4 L290.1,6.5 L292.8,7.9 L295.6,8.0 L298.3,5.6 L301.1,7.6 L303.8,7.1 L306.5,6.0 L309.3,6.9 L312.0,8.1 L314.7,7.8 L317.5,7.7 L320.2,8.6 L322.9,7.2 L325.7,5.9 L328.4,5.7 L331.2,6.1 L333.9,4.1 L336.6,6.4 L339.4,6.0 L342.1,6.6 L344.8,6.6 L347.6,6.3 L350.3,6.6 L353.1,6.1 L355.8,5.3 L358.5,6.0 L361.3,6.6 L364.0,5.9 L366.7,5.9 L369.5,5.6 L372.2,6.9 L374.9,7.3 L377.7,6.6 L380.4,6.3 L383.2,5.6 L385.9,3.9 L388.6,6.2 L391.4,6.7 L394.1,6.9 L396.8,7.4 L399.6,7.4 L402.3,9.2 L405.1,8.9 L407.8,10.1 L410.5,10.3 L413.3,10.8 L416.0,9.0 L418.7,9.5 L421.5,9.4 L424.2,8.2 L426.9,9.6 L429.7,9.1 L432.4,8.6 L435.2,9.3 L437.9,10.7 L440.6,11.0 L443.4,11.1 L446.1,9.8 L448.8,7.2 L451.6,9.7 L454.3,9.4 L457.1,9.6 L459.8,9.9 L462.5,10.3 L465.3,12.6 L468.0,10.8 L470.7,11.0 L473.5,11.7 L476.2,11.5 L478.9,11.3 L481.7,10.9 L484.4,11.3 L487.2,11.1 L489.9,11.0 L492.6,10.6 L495.4,10.2 L498.1,11.3 L500.8,10.0 L503.6,8.6 L506.3,9.7 L509.1,8.5 L511.8,9.1 L514.5,9.1 L517.3,9.7 L520.0,9.2 L522.7,9.5 L525.5,9.2 L528.2,8.1 L530.9,9.7 L533.7,8.8 L536.4,8.3 L539.2,9.1 L541.9,8.6 L544.6,7.2 L547.4,6.8 L550.1,6.2 L552.8,7.7 L555.6,7.2 L558.3,6.1 L561.1,7.0 L563.8,8.6 L566.5,7.1 L569.3,8.2 L572.0,8.6 L574.7,8.7 L577.5,7.7 L580.2,9.1 L582.9,7.3 L585.7,8.4 L588.4,8.7 L591.2,10.3 L593.9,8.7 L596.6,6.9 L599.4,8.2 L602.1,7.1 L604.8,6.3 L607.6,5.6 L610.3,7.1 L613.1,6.3 L615.8,8.0 L618.5,6.7 L621.3,6.2 L624.0,5.8 L626.7,7.6 L629.5,8.2 L632.2,8.1 L634.9,7.3 L637.7,7.9 L640.4,7.7 L643.2,8.4 L645.9,7.3 L648.6,7.7 L651.4,7.4 L654.1,8.7 L656.8,8.7 L659.6,11.3 L662.3,9.4 L665.1,8.1 L667.8,9.5 L670.5,9.0 L673.3,10.7 L676.0,9.3 L678.7,9.5 L681.5,9.9 L684.2,11.8 L686.9,9.7 L689.7,10.5 L692.4,9.4 L695.2,9.6 L697.9,10.9 L700.6,10.7 L703.4,9.1 L706.1,11.2 L708.8,9.8 L711.6,10.1 L714.3,11.7 L717.1,11.0 L719.8,11.6 L722.5,11.0 L725.3,8.9 L728.0,10.3 L730.7,9.9 L733.5,9.6 L736.2,9.0 L738.9,10.0 L741.7,10.6 L744.4,10.6 L747.2,11.1 L749.9,9.8 L752.6,11.1 L755.4,11.7 L758.1,10.8 L760.8,10.5 L763.6,12.4 L766.3,10.5 L769.1,11.2 L771.8,10.9 L774.5,10.6 L777.3,11.1 L780.0,11.5 L782.7,10.9 L785.5,11.9 L788.2,10.4 L790.9,9.8 L793.7,10.8 L796.4,9.8 L799.2,9.5 L801.9,10.4 L804.6,11.0 L807.4,10.1 L810.1,11.9 L812.8,10.9 L815.6,10.3 L818.3,10.0 L821.1,9.8 L823.8,11.1 L826.5,10.3 L829.3,9.5 L832.0,10.0 L834.7,12.1 L837.5,11.3 L840.2,9.7 L842.9,11.0 L845.7,10.3 L848.4,10.2 L851.2,10.4 L853.9,10.8 L856.6,9.7 L859.4,10.0 L862.1,10.5 L864.8,10.8 L867.6,10.5 L870.3,10.9 L873.1,11.5 L875.8,10.4 L878.5,11.3 L881.3,10.6 L884.0,10.5 L886.7,10.4 L889.5,10.9 L892.2,9.7 L894.9,11.1 L897.7,11.8 L900.4,10.9 L903.2,12.3 L905.9,11.4 L908.6,9.8 L911.4,10.2 L914.1,9.4 L916.8,10.3 L919.6,8.4 L922.3,11.0 L925.1,10.3 L927.8,10.3 L930.5,10.6 L933.3,10.8 L936.0,11.2 L938.7,11.1 L941.5,11.4 L944.2,11.0 L946.9,11.3 L949.7,11.9 L952.4,8.0 L955.2,10.9 L957.9,11.4 L960.6,7.3 L963.4,9.2 L966.1,9.6 L968.8,9.1 L971.6,9.0 L974.3,6.9 L977.1,8.8 L979.8,7.0 L982.5,7.7 L985.3,8.7 L988.0,8.1 L990.7,7.3 L993.5,7.5 L996.2,6.8 L998.9,7.7 L1001.7,7.7 L1004.4,7.1 L1007.2,11.0 L1009.9,8.8 L1012.6,8.2 L1015.4,7.4 L1018.1,9.1 L1020.8,8.7 L1023.6,9.5 L1026.3,8.8 L1029.1,7.2 L1031.8,8.0 L1034.5,7.7 L1037.3,7.2 L1040.0,8.3 L1040,22 Z' fill='black'/></svg>");
  --torn-edge-bottom: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1040' height='22' preserveAspectRatio='none' viewBox='0 0 1040 22'><path d='M0,0 L0.0,10.2 L2.7,9.1 L5.5,9.3 L8.2,9.7 L10.9,12.3 L13.7,8.7 L16.4,10.1 L19.2,8.6 L21.9,9.6 L24.6,8.6 L27.4,9.3 L30.1,9.9 L32.8,10.7 L35.6,9.1 L38.3,9.5 L41.1,9.3 L43.8,11.8 L46.5,10.1 L49.3,10.0 L52.0,10.6 L54.7,9.8 L57.5,9.9 L60.2,10.0 L62.9,10.8 L65.7,8.6 L68.4,8.9 L71.2,9.7 L73.9,9.1 L76.6,10.0 L79.4,10.9 L82.1,10.2 L84.8,10.6 L87.6,9.8 L90.3,10.7 L93.1,9.5 L95.8,9.8 L98.5,10.5 L101.3,9.8 L104.0,11.0 L106.7,9.7 L109.5,9.7 L112.2,11.0 L114.9,11.9 L117.7,10.4 L120.4,12.1 L123.2,12.2 L125.9,11.3 L128.6,12.0 L131.4,12.2 L134.1,12.8 L136.8,13.1 L139.6,13.4 L142.3,11.7 L145.1,11.9 L147.8,11.8 L150.5,11.1 L153.3,10.6 L156.0,9.4 L158.7,9.1 L161.5,9.5 L164.2,10.0 L166.9,8.3 L169.7,9.3 L172.4,9.1 L175.2,8.7 L177.9,7.9 L180.6,7.8 L183.4,7.1 L186.1,8.3 L188.8,7.1 L191.6,6.7 L194.3,6.6 L197.1,7.3 L199.8,6.9 L202.5,9.0 L205.3,9.6 L208.0,9.3 L210.7,9.1 L213.5,10.0 L216.2,10.2 L218.9,8.7 L221.7,9.2 L224.4,8.7 L227.2,7.3 L229.9,8.2 L232.6,7.9 L235.4,8.3 L238.1,7.3 L240.8,9.0 L243.6,8.7 L246.3,8.6 L249.1,8.5 L251.8,6.5 L254.5,9.9 L257.3,6.7 L260.0,8.4 L262.7,7.5 L265.5,6.5 L268.2,6.8 L270.9,6.3 L273.7,7.5 L276.4,6.6 L279.2,6.9 L281.9,8.1 L284.6,8.3 L287.4,8.3 L290.1,8.5 L292.8,7.6 L295.6,7.3 L298.3,7.8 L301.1,7.8 L303.8,6.2 L306.5,7.0 L309.3,7.8 L312.0,7.3 L314.7,7.3 L317.5,7.5 L320.2,7.0 L322.9,6.9 L325.7,7.9 L328.4,6.7 L331.2,7.6 L333.9,6.9 L336.6,7.6 L339.4,8.7 L342.1,9.3 L344.8,8.3 L347.6,7.6 L350.3,7.3 L353.1,7.8 L355.8,6.9 L358.5,8.8 L361.3,6.9 L364.0,6.5 L366.7,7.8 L369.5,7.9 L372.2,7.8 L374.9,8.5 L377.7,6.9 L380.4,8.8 L383.2,6.9 L385.9,8.7 L388.6,12.3 L391.4,8.8 L394.1,8.2 L396.8,9.3 L399.6,9.9 L402.3,8.4 L405.1,9.2 L407.8,8.1 L410.5,7.6 L413.3,10.2 L416.0,9.5 L418.7,9.0 L421.5,9.2 L424.2,8.4 L426.9,8.4 L429.7,8.4 L432.4,8.3 L435.2,8.2 L437.9,8.3 L440.6,8.8 L443.4,7.1 L446.1,8.1 L448.8,7.9 L451.6,7.0 L454.3,8.8 L457.1,7.7 L459.8,8.5 L462.5,8.3 L465.3,7.2 L468.0,7.3 L470.7,6.5 L473.5,6.2 L476.2,6.7 L478.9,8.0 L481.7,7.1 L484.4,6.5 L487.2,6.3 L489.9,7.0 L492.6,8.1 L495.4,7.4 L498.1,7.3 L500.8,7.3 L503.6,8.7 L506.3,9.3 L509.1,7.2 L511.8,8.9 L514.5,8.8 L517.3,8.0 L520.0,10.0 L522.7,8.9 L525.5,7.4 L528.2,6.5 L530.9,7.3 L533.7,7.4 L536.4,6.2 L539.2,7.3 L541.9,6.1 L544.6,8.3 L547.4,6.4 L550.1,7.4 L552.8,6.8 L555.6,7.8 L558.3,8.3 L561.1,8.2 L563.8,8.6 L566.5,9.0 L569.3,9.1 L572.0,9.6 L574.7,8.5 L577.5,9.2 L580.2,8.5 L582.9,9.2 L585.7,8.5 L588.4,9.6 L591.2,8.7 L593.9,8.5 L596.6,9.1 L599.4,9.6 L602.1,8.6 L604.8,9.3 L607.6,8.7 L610.3,9.0 L613.1,7.9 L615.8,8.8 L618.5,8.1 L621.3,4.9 L624.0,6.5 L626.7,8.5 L629.5,7.7 L632.2,8.4 L634.9,8.0 L637.7,8.0 L640.4,9.1 L643.2,7.7 L645.9,9.5 L648.6,8.5 L651.4,8.7 L654.1,5.1 L656.8,7.1 L659.6,7.7 L662.3,9.2 L665.1,9.8 L667.8,10.5 L670.5,8.6 L673.3,9.1 L676.0,9.0 L678.7,9.6 L681.5,10.4 L684.2,10.6 L686.9,12.5 L689.7,10.1 L692.4,10.0 L695.2,10.1 L697.9,12.2 L700.6,12.0 L703.4,12.4 L706.1,11.7 L708.8,11.2 L711.6,10.0 L714.3,9.2 L717.1,7.9 L719.8,9.2 L722.5,7.5 L725.3,6.8 L728.0,6.6 L730.7,8.0 L733.5,8.1 L736.2,10.6 L738.9,6.9 L741.7,6.6 L744.4,7.8 L747.2,7.1 L749.9,6.6 L752.6,7.8 L755.4,7.4 L758.1,7.7 L760.8,7.0 L763.6,7.0 L766.3,8.4 L769.1,8.3 L771.8,8.6 L774.5,8.3 L777.3,8.6 L780.0,8.7 L782.7,9.7 L785.5,9.4 L788.2,10.4 L790.9,10.5 L793.7,10.1 L796.4,11.1 L799.2,9.9 L801.9,10.1 L804.6,11.2 L807.4,10.9 L810.1,10.2 L812.8,9.3 L815.6,9.0 L818.3,9.0 L821.1,9.4 L823.8,9.2 L826.5,8.8 L829.3,9.3 L832.0,9.8 L834.7,9.3 L837.5,9.8 L840.2,9.7 L842.9,10.3 L845.7,11.2 L848.4,11.2 L851.2,10.1 L853.9,10.5 L856.6,10.1 L859.4,9.1 L862.1,8.5 L864.8,8.5 L867.6,9.0 L870.3,8.2 L873.1,9.7 L875.8,9.0 L878.5,7.6 L881.3,8.3 L884.0,8.8 L886.7,9.8 L889.5,8.8 L892.2,7.8 L894.9,6.6 L897.7,8.3 L900.4,8.4 L903.2,7.4 L905.9,6.8 L908.6,6.6 L911.4,7.9 L914.1,6.8 L916.8,7.5 L919.6,7.7 L922.3,6.9 L925.1,8.4 L927.8,9.2 L930.5,7.8 L933.3,6.9 L936.0,7.8 L938.7,9.2 L941.5,7.9 L944.2,8.4 L946.9,7.3 L949.7,7.3 L952.4,7.6 L955.2,8.0 L957.9,8.9 L960.6,8.3 L963.4,8.9 L966.1,8.9 L968.8,9.5 L971.6,9.9 L974.3,9.6 L977.1,9.9 L979.8,11.1 L982.5,11.2 L985.3,10.5 L988.0,12.0 L990.7,12.5 L993.5,12.9 L996.2,12.8 L998.9,12.1 L1001.7,11.5 L1004.4,12.9 L1007.2,12.9 L1009.9,12.6 L1012.6,12.6 L1015.4,12.8 L1018.1,12.7 L1020.8,12.8 L1023.6,13.9 L1026.3,12.8 L1029.1,13.1 L1031.8,13.6 L1034.5,14.0 L1037.3,13.5 L1040.0,11.9 L1040,0 Z' fill='black'/></svg>");
  --torn-corners: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' preserveAspectRatio='none' viewBox='0 0 200 200'><path d='M6 9 Q28 4 50 8 T96 5 T142 9 T190 6 Q196 30 192 52 T195 98 T191 144 T194 191 Q170 196 148 192 T102 195 T56 191 T9 194 Q4 170 8 148 T5 102 T9 56 Z' fill='black'/></svg>");
  --page-stains: radial-gradient(ellipse at 22% 18%, rgba(176,138,74,.16), transparent 45%),radial-gradient(ellipse at 80% 30%, rgba(176,138,74,.12), transparent 40%),radial-gradient(ellipse at 36% 76%, rgba(150,110,60,.14), transparent 48%),radial-gradient(ellipse at 92% 88%, rgba(150,110,60,.13), transparent 40%),radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(130,96,48,.22) 100%);
  --page-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='5' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.14'/></feComponentTransfer></filter><rect width='260' height='260' filter='url(%23p)'/></svg>");
  --page-blend: normal, normal, normal, normal, normal, multiply;
  --muted-ink: rgba(0, 0, 0, 0.55);
  --shadow-ink: rgba(60, 45, 25, 0.3);
  --parchment: #f2e9d3;
  --ink: #000000;
  --accent: #58180d;
  --rule: #c0ad6a;

  --note-bg: #e0e5c1;
  --note-border: #cbd0a6;
  --descriptive-bg: #faf7ea;
  --table-stripe: #e0e5c1;

  --statblock-bg: #fdf1dc;
  --statblock-accent: #922610;
  --statblock-frame: #c9ad6a;

  --page-width: 21.59cm;
  --page-height: 27.94cm;
  --page-padding: 1.4cm 1.9cm 1.7cm;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cm;
  color: var(--ink);
}

.brew[data-size="a4"] {
  --page-width: 21cm;
  --page-height: 29.7cm;
}

/* Segundo tema, al modo de la Guía del Dungeon Master: papel más frío, tinta
   marrón en vez de roja y cajas verde grisáceo. Solo cambia variables. */
.brew[data-theme="dmg"] {
  --parchment: #e9e2d0;
  --accent: #4a2c17;
  --rule: #ac9b6f;

  --note-bg: #dde2dd;
  --note-border: #bfc7bd;
  --descriptive-bg: #f6f2e4;
  --table-stripe: #e2ddc9;

  --statblock-bg: #f8f3e5;
  --statblock-accent: #6b3410;
  --statblock-frame: #b8a274;
}

/* Imagen guardada en el navegador que ya no existe: mejor un hueco visible
   que un icono roto silencioso. */
.brew .page img[data-missing] {
  min-height: 2cm;
  border: 2px dashed #b04a34;
  background: rgba(176, 74, 52, 0.08);
}

/* ---------------------------------------------------------------- page --- */

.brew .page {
  position: relative;
  box-sizing: border-box;
  width: var(--page-width);
  height: var(--page-height);
  padding: var(--page-padding);
  overflow: hidden;

  columns: 2;
  column-gap: 0.9cm;
  column-fill: auto;

  /* Crea contexto de apilado propio: así una imagen de fondo con z-index
     negativo se queda sobre el pergamino y debajo del texto, sin escaparse
     detrás de la página. */
  isolation: isolate;

  font-family: var(--font-brew-body-stack);
  font-size: 0.34cm;
  line-height: 1.27em;
  text-align: justify;
  hyphens: auto;

  background-color: var(--parchment);
  background-image:
    var(--page-stains),
    var(--page-grain);
  background-blend-mode: var(--page-blend);
  box-shadow: 0 0 0.4cm rgba(0, 0, 0, 0.45);

  /* Fuerza a que pergamino, cajas y fichas salgan también en el PDF. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.brew .page > *:first-child {
  margin-top: 0;
}

.brew .page-number {
  position: absolute;
  bottom: 0.75cm;
  width: 0.5cm;
  font-family: var(--font-brew-sans-stack);
  font-size: 0.32cm;
  text-align: center;
  color: var(--muted-ink);
  z-index: 3;
}

.brew .page-odd .page-number {
  right: 1.1cm;
}

.brew .page-even .page-number {
  left: 1.1cm;
}

.brew .footnote {
  position: absolute;
  bottom: 0.7cm;
  left: 1.9cm;
  right: 1.9cm;
  font-family: var(--font-brew-sans-stack);
  font-size: 0.3cm;
  font-style: italic;
  text-align: center;
  color: var(--muted-ink);
  z-index: 3;
}

/* ---------------------------------------------------------- typography --- */

.brew .page h1,
.brew .page h2,
.brew .page h3,
.brew .page h4 {
  font-family: var(--font-brew-heading-stack);
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.16cm;
  line-height: 1.1em;
  text-align: left;
  hyphens: manual;
  break-after: avoid;
  break-inside: avoid;
}

.brew .page h1 {
  font-size: 0.9cm;
  letter-spacing: 0.01em;
}

.brew .page h2 {
  font-size: 0.65cm;
}

.brew .page h3 {
  font-size: 0.52cm;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 0.02cm;
}

.brew .page h4 {
  font-size: 0.4cm;
}

.brew .page h5 {
  font-family: var(--font-brew-sans-stack);
  font-size: 0.36cm;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.1cm;
  text-align: left;
  break-after: avoid;
}

.brew .page h6 {
  font-family: var(--font-brew-sans-stack);
  font-size: 0.32cm;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.1cm;
  text-align: left;
}

.brew .page p {
  margin: 0 0 0.26cm;
}

.brew .page a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.05cm;
}

.brew .page strong {
  font-weight: 700;
}

.brew .page code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.06);
  padding: 0 0.08cm;
  border-radius: 0.05cm;
}

.brew .page pre {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.2cm;
  border-radius: 0.08cm;
  overflow-x: auto;
  text-align: left;
}

/* Capitular automática: primer párrafo tras un H1. */
.brew .page h1 + p::first-letter {
  float: left;
  font-family: var(--font-brew-display-stack);
  font-size: 1.7cm;
  line-height: 0.85em;
  color: var(--accent);
  padding: 0.08cm 0.08cm 0 0;
}

.brew .page .no-dropcap + p::first-letter,
.brew .page h1.no-dropcap + p::first-letter {
  float: none;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  padding: 0;
}

/* ---------------------------------------------------------------- lists --- */

.brew .page ul,
.brew .page ol {
  margin: 0 0 0.26cm;
  padding-left: 0.6cm;
}

.brew .page li {
  margin-bottom: 0.05cm;
}

.brew .page dl {
  margin: 0 0 0.26cm;
}

.brew .page dt {
  display: inline;
  font-weight: 700;
}

.brew .page dt::after {
  content: " ";
}

.brew .page dd {
  display: inline;
  margin: 0;
}

.brew .page dd::after {
  content: "";
  display: block;
  margin-bottom: 0.04cm;
}

/* --------------------------------------------------------------- rules --- */

.brew .page hr {
  height: 0.16cm;
  border: none;
  background: var(--ink);
  margin: 0.28cm 0;
  clip-path: polygon(0 50%, 2.4% 0, 97.6% 0, 100% 50%, 97.6% 100%, 2.4% 100%);
  break-after: avoid;
}

.brew .page hr.flourish {
  height: 0.5cm;
  background: none;
  clip-path: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'><g fill='%23000'><path d='M2 5 L44 4.3 L44 5.7 Z'/><path d='M98 5 L56 4.3 L56 5.7 Z'/><path d='M50 1.4 L53.4 5 L50 8.6 L46.6 5 Z'/><circle cx='44.5' cy='5' r='0.9'/><circle cx='55.5' cy='5' r='0.9'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --------------------------------------------------------------- table --- */

.brew .page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.3cm;
  font-size: 0.98em;
  /* Una tabla larga continúa en la columna siguiente, como en los manuales.
     Con `avoid` no cabía entera en ningún sitio y acababa recortada. */
  break-inside: auto;
}

/* La cabecera se repite en cada trozo, para que la tabla partida se entienda. */
.brew .page thead {
  display: table-header-group;
  break-inside: avoid;
  break-after: avoid;
}

.brew .page tr {
  break-inside: avoid;
}

/* `{nobreak}` fuerza a mantener la tabla de una pieza. */
.brew .page .nobreak,
.brew .page table.nobreak {
  break-inside: avoid;
}

.brew .page th {
  font-family: var(--font-brew-heading-stack);
  font-weight: 700;
  text-align: left;
  padding: 0.04cm 0.12cm;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.brew .page td {
  padding: 0.04cm 0.12cm;
  vertical-align: top;
}

.brew .page tbody tr:nth-child(odd) {
  background: var(--table-stripe);
}

.brew .page table.plain tbody tr:nth-child(odd) {
  background: none;
}

/* -------------------------------------------------------------- boxes ---- */

.brew .page blockquote,
.brew .page .note {
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
    0.05cm 0.05cm 0.22cm rgba(60, 45, 25, 0.28);
  padding: 0.26cm 0.32cm;
  margin: 0 0 0.3cm;
  break-inside: avoid;
}

.brew .page blockquote > *:last-child,
.brew .page .note > *:last-child,
.brew .page .descriptive > *:last-child {
  margin-bottom: 0;
}

.brew .page .note h5,
.brew .page blockquote h5 {
  font-family: var(--font-brew-heading-stack);
  font-size: 0.4cm;
  color: var(--accent);
}

.brew .page .descriptive {
  background: var(--descriptive-bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.12cm;
  box-shadow: 0.05cm 0.05cm 0.22cm rgba(60, 45, 25, 0.26);
  padding: 0.28cm 0.34cm;
  margin: 0 0 0.3cm;
  font-style: italic;
  break-inside: avoid;
}

.brew .page .descriptive h5 {
  font-family: var(--font-brew-heading-stack);
  font-style: normal;
  font-size: 0.4cm;
  color: var(--accent);
}

.brew .page .quote {
  font-style: italic;
  border-left: 0.08cm solid var(--rule);
  padding-left: 0.28cm;
  margin: 0 0 0.3cm;
}

.brew .page .brew-error {
  background: #ffe6e6;
  border: 1px solid #c00;
  color: #900;
  font-family: var(--font-brew-sans-stack);
  font-size: 0.3cm;
  padding: 0.2cm;
  margin-bottom: 0.3cm;
  white-space: pre-wrap;
  text-align: left;
}

/* ----------------------------------------------------------- stat block --- */

.brew .page .statblock {
  position: relative;
  background: var(--statblock-bg);
  font-family: var(--font-brew-sans-stack);
  font-size: 0.33cm;
  line-height: 1.2em;
  text-align: left;
  padding: 0.3cm 0.34cm;
  margin: 0 0 0.34cm;
  box-shadow: 0.06cm 0.06cm 0.24cm rgba(60, 45, 25, 0.3);
  break-inside: avoid;
}

.brew .page .statblock.frame {
  border: 0.07cm solid var(--statblock-frame);
  padding: 0.24cm 0.28cm;
}

.brew .page .statblock.frame::before {
  content: "";
  position: absolute;
  inset: 0.04cm;
  border: 1px solid rgba(146, 38, 16, 0.3);
  pointer-events: none;
}

.brew .page .statblock.wide {
  column-span: all;
}

.brew .page .statblock.wide .statblock-inner {
  columns: 2;
  column-gap: 0.4cm;
  column-fill: balance;
}

.brew .page .statblock h1,
.brew .page .statblock h2,
.brew .page .statblock h3,
.brew .page .statblock h4 {
  color: var(--statblock-accent);
  margin: 0;
}

.brew .page .statblock .creature-heading h1 {
  font-family: var(--font-brew-heading-stack);
  font-size: 0.62cm;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05em;
}

.brew .page .statblock .creature-heading h2 {
  font-family: var(--font-brew-body-stack);
  font-size: 0.33cm;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.06cm;
}

.brew .page .statblock-divider {
  display: block;
  width: 100%;
  height: 0.14cm;
  margin: 0.09cm 0;
  fill: var(--statblock-accent);
  stroke: var(--statblock-accent);
  stroke-width: 1;
}

.brew .page .statblock .property-line {
  margin-bottom: 0.02cm;
  text-indent: -0.3cm;
  padding-left: 0.3cm;
}

.brew .page .statblock .property-line h4,
.brew .page .statblock .property-line p {
  display: inline;
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
}

.brew .page .statblock .property-line p {
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.brew .page .statblock .property-line h4::after {
  content: " ";
}

.brew .page .statblock .abilities {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin: 0.06cm 0;
}

.brew .page .statblock .ability {
  flex: 1 1 0;
}

.brew .page .statblock .ability h4 {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
}

.brew .page .statblock .ability p {
  color: var(--ink);
  margin: 0;
}

.brew .page .statblock-section h3 {
  font-family: var(--font-brew-heading-stack);
  font-size: 0.44cm;
  font-weight: 400;
  font-variant: small-caps;
  border: none;
  padding: 0;
  margin-top: 0.14cm;
}

.brew .page .statblock-section + .statblock-section {
  margin-top: 0.06cm;
}

.brew .page .statblock-entry p,
.brew .page .statblock-intro p,
.brew .page .statblock-description p {
  margin: 0 0 0.14cm;
  color: var(--ink);
  text-indent: -0.3cm;
  padding-left: 0.3cm;
}

.brew .page .statblock-description {
  font-family: var(--font-brew-body-stack);
  margin-top: 0.16cm;
}

.brew .page .statblock-description p {
  text-indent: 0;
  padding-left: 0;
}

/* -------------------------------------------------------------- layout --- */

.brew .page .column-break {
  break-before: column;
  height: 0;
}

.brew .page .wide {
  column-span: all;
}

.brew .page .columns-3 {
  columns: 3;
  column-gap: 0.5cm;
}

.brew .page .center {
  text-align: center;
}

.brew .page .right {
  text-align: right;
}

.brew .page img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Una imagen con medidas propias (inyectadas con `{width:816px,…}`) manda sobre
   el ajuste a la columna: es la vía para fondos a sangre y portadas. */
.brew .page img[style*="width"] {
  max-width: none;
}

.brew .page img[style*="absolute"],
.brew .page img[style*="fixed"] {
  z-index: -1;
}

/* Un párrafo cuyo único contenido es una imagen posicionada no debe ocupar
   sitio ni empujar el texto. */
.brew .page p:has(> img[style*="absolute"]:only-child) {
  margin: 0;
}

/* Ilustración a sangre. Se estira a la página entera, sea Carta o A4, así que
   no hace falta escribir medidas en píxeles. Vale como bloque
   (`{{cover ![](url) }}`) o como clase sobre la imagen (`![](url) {cover}`). */
.brew .page .cover,
.brew .page img.cover {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  z-index: -1;
}

.brew .page .cover img,
.brew .page img.cover {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* `{contain}` la encaja entera en vez de recortarla. */
.brew .page .cover.contain img,
.brew .page img.cover.contain {
  object-fit: contain;
}

.brew .page .frame-image img {
  border: 0.1cm solid var(--statblock-frame);
  box-shadow: 0.06cm 0.06cm 0.22cm rgba(60, 45, 25, 0.35);
}

.brew .page .artist {
  font-family: var(--font-brew-sans-stack);
  font-size: 0.26cm;
  font-style: italic;
  text-align: center;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 0.08cm;
}

/* ---------------------------------------------------- índice / portadas --- */

.brew .page .toc ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.1cm;
}

.brew .page .toc ul ul {
  padding-left: 0.5cm;
}

.brew .page .toc li {
  margin-bottom: 0;
}

.brew .page .toc h1,
.brew .page .toc h2,
.brew .page .toc h3,
.brew .page .toc h4,
.brew .page .toc h5 {
  margin: 0;
  border: none;
  padding: 0;
}

.brew .page .toc h3 {
  font-size: 0.42cm;
  margin-top: 0.16cm;
}

.brew .page .toc > ul > li:first-child h3 {
  margin-top: 0;
}

.brew .page .toc h4 {
  font-size: 0.36cm;
  color: var(--ink);
}

.brew .page .toc li li h4,
.brew .page .toc li li li {
  font-family: var(--font-brew-body-stack);
  font-size: 0.34cm;
  font-weight: 400;
  color: var(--ink);
}

.brew .page .toc a {
  display: flex;
  align-items: baseline;
  gap: 0.15cm;
  text-decoration: none;
  color: inherit;
}

/* Estructura de Homebrewery: `[{{ Nombre}}{{ 12}}](#p12)` — el primer span se
   estira con la guía de puntos y el segundo queda pegado al margen. */
.brew .page .toc a > span:first-child {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 0.15cm;
  min-width: 0;
}

.brew .page .toc a > span:first-child::after {
  content: "";
  flex: 1;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.45);
  transform: translateY(-0.06cm);
}

.brew .page .toc a > span:last-child {
  flex: 0 0 auto;
}

/* Portadas: una sola columna, a sangre y sin textura de pergamino. Quitar la
   textura importa: con `mix-blend-mode: multiply` la ilustración se multiplica
   por lo que haya debajo, y el pergamino la ensucia y la amarillea. */
.brew .page:has(> .frontCover),
.brew .page:has(> .backCover),
.brew .page:has(> .partCover) {
  columns: 1;
  padding: 0;
  text-align: center;
  background-color: #ffffff;
  background-image: none;
}

/* Una portada no lleva número de página. */
.brew .page:has(> .frontCover) .page-number,
.brew .page:has(> .backCover) .page-number,
.brew .page:has(> .partCover) .page-number {
  display: none;
}

.brew .page > .frontCover,
.brew .page > .backCover,
.brew .page > .partCover {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* La cenefa es opcional: `{{frontCover,framed }}`. La mayoría de las
   ilustraciones de portada ya traen la suya y dos marcos se estorban. */
.brew .page > .framed::before {
  content: "";
  position: absolute;
  inset: 0.6cm;
  border: 0.11cm solid var(--statblock-frame);
}

.brew .page > .framed::after {
  content: "";
  position: absolute;
  inset: 0.8cm;
  border: 0.035cm solid var(--statblock-frame);
}

/* Sobre una ilustración a sangre el texto va en blanco; sin ella, en el rojo
   de siempre, que sobre papel blanco sí se lee. */
.brew .page:has(.cover),
.brew .page:has(img[style*="absolute"]) {
  --cover-ink: #ffffff;
  --cover-shadow:
    0 0 0.24cm rgba(0, 0, 0, 0.85),
    0 0.05cm 0.12cm rgba(0, 0, 0, 0.7);
}

.brew .page:has(> .frontCover) > h1,
.brew .page:has(> .partCover) > h1,
.brew .page:has(> .frontCover) > h2,
.brew .page:has(> .partCover) > h2 {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: 0 2cm 0.3cm;
  color: var(--cover-ink, var(--accent));
  text-shadow: var(--cover-shadow, none);
}

.brew .page:has(> .frontCover) > h1 {
  font-size: 1.5cm;
  padding-top: 3.4cm;
}

.brew .page:has(> .frontCover) > h2 {
  font-size: 0.72cm;
  font-weight: 400;
}

.brew .page:has(> .frontCover) .footnote,
.brew .page:has(> .partCover) .footnote {
  z-index: 3;
  bottom: 1.5cm;
  color: var(--cover-ink, rgba(0, 0, 0, 0.6));
  font-style: normal;
  font-size: 0.36cm;
  text-shadow: var(--cover-shadow, none);
}

/* Número de página escrito a mano con {{pageNumber n}}. */
.brew .page .pageNumber {
  position: absolute;
  bottom: 0.75cm;
  width: 0.9cm;
  z-index: 3;
  font-family: var(--font-brew-sans-stack);
  font-size: 0.32cm;
  text-align: center;
  color: rgba(0, 0, 0, 0.55);
}

.brew .page-odd .pageNumber {
  right: 1.1cm;
}

.brew .page-even .pageNumber {
  left: 1.1cm;
}

.brew .page .pageNumber.auto {
  display: none;
}

/* Línea en blanco explícita, escrita con `:` en una línea suelta. */
.brew .page .blank-line {
  height: 1.27em;
}

/* --------------------------------------------------------------- print --- */

@media print {
  .brew {
    display: block;
    gap: 0;
  }

  .brew .page {
    box-shadow: none;
    break-after: page;
    /* Chrome redondea hacia arriba; 0.02cm de holgura evita páginas fantasma. */
    height: calc(var(--page-height) - 0.02cm);
  }

  .brew .page:last-child {
    break-after: auto;
  }
}

/* ------------------------------------------------------------ adornos --- */

/*
 * Bordes rasgados. Se hacen con `mask-image`: una onda irregular en SVG que
 * recorta el borde del elemento. `{torn}` los cuatro lados, o el lado suelto
 * con `{torn-bottom}`, `{torn-top}`, `{torn-left}`, `{torn-right}`.
 */
.brew .page .torn,
.brew .page .torn-top,
.brew .page .torn-bottom,
.brew .page .torn-left,
.brew .page .torn-right {
  --torn-wave-legacy: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='16' preserveAspectRatio='none' viewBox='0 0 240 16'><path d='M0 16 V7 Q8 3 16 6 T32 5 T48 8 T64 4 T80 7 T96 3 T112 6 T128 9 T144 4 T160 7 T176 5 T192 8 T208 4 T224 7 T240 6 V16 Z' fill='black'/></svg>");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 1040px 22px;
  mask-size: 1040px 22px;
}

.brew .page .torn-bottom {
  -webkit-mask-image: var(--torn-edge-bottom), linear-gradient(#000, #000);
  mask-image: var(--torn-edge-bottom), linear-gradient(#000, #000);
  -webkit-mask-position: bottom, top;
  mask-position: bottom, top;
  -webkit-mask-size: 1040px 22px, 100% calc(100% - 21px);
  mask-size: 1040px 22px, 100% calc(100% - 21px);
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
}

.brew .page .torn-top {
  -webkit-mask-image: var(--torn-edge-top), linear-gradient(#000, #000);
  mask-image: var(--torn-edge-top), linear-gradient(#000, #000);
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-size: 1040px 22px, 100% calc(100% - 21px);
  mask-size: 1040px 22px, 100% calc(100% - 21px);
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  transform: rotate(180deg);
}

.brew .page .torn-top > * {
  transform: rotate(180deg);
}

/* Los cuatro lados a la vez: una máscara de esquinas irregulares. */
.brew .page .torn {
  -webkit-mask-image: var(--torn-corners);
  mask-image: var(--torn-corners);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/*
 * Manchas de acuarela: una salpicadura suave detrás del texto. Se coloca sola
 * en la página; con `{{watercolor,wc-verde,top:4cm,left:2cm}}` la mueves.
 */
.brew .page .watercolor {
  --wc-color: #922610;
  position: absolute;
  width: 9cm;
  height: 9cm;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 45% 38% at 42% 40%, var(--wc-color), transparent 70%),
    radial-gradient(ellipse 30% 42% at 62% 55%, var(--wc-color), transparent 72%),
    radial-gradient(ellipse 38% 26% at 50% 66%, var(--wc-color), transparent 70%);
  filter: blur(6px) contrast(1.15);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='7'/><feDisplacementMap in='SourceGraphic' scale='90'/></filter><circle cx='150' cy='150' r='105' fill='black' filter='url(%23w)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='7'/><feDisplacementMap in='SourceGraphic' scale='90'/></filter><circle cx='150' cy='150' r='105' fill='black' filter='url(%23w)'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.brew .page .wc-rojo { --wc-color: #922610; }
.brew .page .wc-verde { --wc-color: #3f5d2a; }
.brew .page .wc-azul { --wc-color: #1d4e6b; }
.brew .page .wc-morado { --wc-color: #4b2a5e; }
.brew .page .wc-ocre { --wc-color: #8a6b1f; }
.brew .page .wc-tinta { --wc-color: #2b2118; }

/*
 * Iconos. Se pintan con `mask` y toman el color del texto que los rodea, así
 * que heredan el color de un encabezado o el de una nota sin tocar nada.
 * Se escriben en línea: `{{icon-d20}}`, `{{icon-espada}}`…
 */
.brew .page [class*="icon-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.brew .page .icon-d20 {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 3 95 28v44L50 97 5 72V28Z' fill='none' stroke='black' stroke-width='7'/><path d='M50 3 24 47h52ZM24 47 5 72l19-25Zm52 0 19 25-19-25ZM24 47l26 50 26-50ZM24 47H76' fill='none' stroke='black' stroke-width='5'/></svg>");
}
.brew .page .icon-d6 {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='10' y='10' width='80' height='80' rx='14' fill='none' stroke='black' stroke-width='8'/><circle cx='32' cy='32' r='7'/><circle cx='68' cy='32' r='7'/><circle cx='50' cy='50' r='7'/><circle cx='32' cy='68' r='7'/><circle cx='68' cy='68' r='7'/></svg>");
}
.brew .page .icon-d4 {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 8 92 88H8Z' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/><path d='M50 8v54M50 62 8 88m42-26 42 26' fill='none' stroke='black' stroke-width='5'/></svg>");
}
.brew .page .icon-espada {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M78 8 40 46l-8 16 16-8L86 16Z' fill='none' stroke='black' stroke-width='7' stroke-linejoin='round'/><path d='M32 62 12 82m8-12 10 10M24 88l-8-8' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/></svg>");
}
.brew .page .icon-escudo {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6 88 20v30c0 24-18 38-38 44C30 88 12 74 12 50V20Z' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/></svg>");
}
.brew .page .icon-calavera {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 8c22 0 34 16 34 34 0 12-6 18-6 26v8H22v-8c0-8-6-14-6-26C16 24 28 8 50 8Z' fill='none' stroke='black' stroke-width='7'/><circle cx='36' cy='46' r='8'/><circle cx='64' cy='46' r='8'/><path d='M50 60v10' stroke='black' stroke-width='6' stroke-linecap='round'/></svg>");
}
.brew .page .icon-pocion {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M40 8h20v22l18 34c6 12-2 26-16 26H48c-14 0-22-14-16-26l18-34Z' fill='none' stroke='black' stroke-width='7' stroke-linejoin='round'/><path d='M34 62h42' stroke='black' stroke-width='6'/></svg>");
}
.brew .page .icon-pergamino {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='20' y='14' width='60' height='72' rx='8' fill='none' stroke='black' stroke-width='7'/><path d='M34 34h32M34 50h32M34 66h20' stroke='black' stroke-width='6' stroke-linecap='round'/></svg>");
}
.brew .page .icon-corazon {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 86C24 68 10 52 10 36 10 22 20 12 32 12c8 0 14 4 18 10 4-6 10-10 18-10 12 0 22 10 22 24 0 16-14 32-40 50Z' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/></svg>");
}
.brew .page .icon-llama {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6c14 20 30 26 30 48a30 30 0 0 1-60 0c0-14 8-20 14-30 4 10 10 12 10 12 0-14-2-20 6-30Z' fill='none' stroke='black' stroke-width='7' stroke-linejoin='round'/></svg>");
}
.brew .page .icon-luna {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M62 8a44 44 0 1 0 30 62A38 38 0 0 1 62 8Z' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/></svg>");
}
.brew .page .icon-huella {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><ellipse cx='50' cy='62' rx='24' ry='20'/><ellipse cx='24' cy='36' rx='10' ry='13'/><ellipse cx='42' cy='22' rx='10' ry='13'/><ellipse cx='62' cy='22' rx='10' ry='13'/><ellipse cx='78' cy='38' rx='10' ry='13'/></svg>");
}

.brew .page [class*="icon-"] {
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
}

}

@layer brew {
  /* Página que está tocando el cursor del editor, cuando el seguimiento
     está activo. Un filete tenue basta: marca sin gritar. */
  .brew .page.is-current {
    outline: 0.08cm solid rgba(201, 173, 106, 0.75);
    outline-offset: 0.12cm;
  }

  @media print {
    .brew .page.is-current {
      outline: none;
    }
  }
}

@layer brew {
  /* ------------------------------------------- conjuros y objetos --- */

  .brew .page .spell,
  .brew .page .magic-item {
    margin-bottom: 0.3cm;
    break-inside: avoid;
  }

  .brew .page .spell h4,
  .brew .page .magic-item h4 {
    margin-bottom: 0.02cm;
  }

  .brew .page .spell-subtitle,
  .brew .page .item-subtitle {
    margin-bottom: 0.14cm;
  }

  .brew .page .spell dl {
    margin-bottom: 0.18cm;
  }
}

@layer brew {
  /* ------------------------- alias de nombres de Homebrewery --------- */
  /*
   * Mapeo parcial y a ojo: son los nombres que más se ven en brews copiados
   * de Homebrewery, no un port verificado de su hoja de estilos. Lo que no
   * esté aquí se renderiza como un bloque normal, sin romper nada.
   */
  .brew .page .imageMaskEdge,
  .brew .page .imageMaskCorner {
    -webkit-mask-image: var(--torn-corners);
    mask-image: var(--torn-corners);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .brew .page .watercolor1 { --wc-color: #922610; }
  .brew .page .watercolor2 { --wc-color: #3f5d2a; }
  .brew .page .watercolor3 { --wc-color: #1d4e6b; }
  .brew .page .watercolor4 { --wc-color: #4b2a5e; }
  .brew .page .watercolor5 { --wc-color: #8a6b1f; }
  .brew .page .watercolor6 { --wc-color: #2b2118; }
}

@layer brew {
  /* ------------------------------------- cabecera de capítulo -------- */
  /*
   * `{{chapter … }}` reproduce la apertura de capítulo de los manuales: una
   * ilustración que sangra por los tres lados, rasgada por arriba y por abajo,
   * y el título sobre una tira de papel roto.
   *
   * Los márgenes negativos son exactamente el relleno de la página, así que la
   * banda llega al borde del papel. Si cambias `--page-padding`, esto lo sigue.
   */
  .brew .page .chapter {
    column-span: all;
    position: relative;
    height: var(--chapter-height, 12.5cm);
    margin: -1.4cm -1.9cm 0.55cm;
    isolation: isolate;
  }

  .brew .page .chapter > p {
    margin: 0;
  }

  /* La ilustración llena la banda y se rasga arriba y abajo: por el hueco
     asoma el pergamino de la página. */
  .brew .page .chapter img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    z-index: 0;
    -webkit-mask-image: var(--torn-edge-top), linear-gradient(#000, #000),
      var(--torn-edge-bottom);
    mask-image: var(--torn-edge-top), linear-gradient(#000, #000),
      var(--torn-edge-bottom);
    -webkit-mask-position: top, center, bottom;
    mask-position: top, center, bottom;
    -webkit-mask-size: 1040px 22px, 100% calc(100% - 42px), 1040px 22px;
    mask-size: 1040px 22px, 100% calc(100% - 42px), 1040px 22px;
    -webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
    mask-repeat: repeat-x, no-repeat, repeat-x;
  }

  /* El título va sobre una tira de papel rasgada por los dos cantos. */
  .brew .page .chapter > h1 {
    position: absolute;
    top: var(--chapter-banner-top, 1.5cm);
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
    padding: 0.3cm 1.9cm 0.34cm;
    background: var(--chapter-banner-bg, #fbf8f0);
    color: var(--accent);
    font-size: var(--chapter-title-size, 0.8cm);
    line-height: 1.05em;
    text-align: left;
    -webkit-mask-image: var(--torn-edge-top), linear-gradient(#000, #000),
      var(--torn-edge-bottom);
    mask-image: var(--torn-edge-top), linear-gradient(#000, #000),
      var(--torn-edge-bottom);
    -webkit-mask-position: top, center, bottom;
    mask-position: top, center, bottom;
    -webkit-mask-size: 1040px 16px, 100% calc(100% - 30px), 1040px 16px;
    mask-size: 1040px 16px, 100% calc(100% - 30px), 1040px 16px;
    -webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
    mask-repeat: repeat-x, no-repeat, repeat-x;
  }

  /* Subtítulo opcional, dentro de la propia tira. */
  .brew .page .chapter > h2 {
    position: absolute;
    top: calc(var(--chapter-banner-top, 1.5cm) + var(--chapter-title-size, 0.8cm) + 0.5cm);
    left: 1.9cm;
    z-index: 2;
    margin: 0;
    font-size: 0.46cm;
    font-weight: 400;
    color: #fff;
    text-shadow: 0 0 0.2cm rgba(0, 0, 0, 0.85);
  }

  /* `{{chapter,flourish }}` añade el rasgo dorado del extremo. */
  .brew .page .chapter.flourish > h1::after {
    content: "";
    position: absolute;
    right: 0.7cm;
    top: 50%;
    width: 1.6cm;
    height: 1.6cm;
    transform: translateY(-50%);
    background-color: var(--statblock-frame);
    -webkit-mask-image: var(--chapter-flourish);
    mask-image: var(--chapter-flourish);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* El primer párrafo tras la cabecera lleva capitular, como tras un H1. */
  .brew .page .chapter + p::first-letter {
    float: left;
    font-family: var(--font-brew-display-stack);
    font-size: 1.7cm;
    line-height: 0.85em;
    color: var(--accent);
    padding: 0.08cm 0.08cm 0 0;
  }

  /* Sin ilustración: la tira se apoya sobre el propio pergamino. */
  .brew .page .chapter:not(:has(img)) {
    height: auto;
    margin: -1.4cm -1.9cm 0.5cm;
  }

  .brew .page .chapter:not(:has(img)) > h1 {
    position: static;
    padding-top: 1.6cm;
  }
}

@layer brew {
  /* ------------------------------------ tarjeta / nota de oficina --- */
  /*
   * `{{memo … }}` es la cuartilla ladeada con una cita, al modo de los
   * memorandos de Acquisitions Incorporated. El último párrafo, si empieza por
   * raya, se maqueta solo como firma.
   */
  .brew .page .memo {
    position: relative;
    z-index: 1;
    background: var(--memo-bg, #fdfbf4);
    color: var(--ink);
    font-family: var(--font-brew-hand-stack);
    font-style: italic;
    font-size: 1.05em;
    line-height: 1.35em;
    padding: 0.55cm 0.6cm 0.45cm;
    margin: 0.45cm 0 0.5cm;
    border: 1px solid rgba(0, 0, 0, 0.12);
    transform: rotate(var(--memo-rotate, -2deg));
    box-shadow: 0.08cm 0.1cm 0.3cm rgba(60, 45, 25, 0.35);
    break-inside: avoid;
  }

  .brew .page .memo > *:last-child {
    margin-bottom: 0;
  }

  /* La firma: última línea, alineada a la derecha y algo mayor. */
  .brew .page .memo > p:last-child {
    margin-top: 0.3cm;
    text-align: right;
    font-size: 1.15em;
    font-style: normal;
    font-family: var(--font-brew-heading-stack);
    color: var(--accent);
  }

  /* Con `{{memo,pinned }}` sobresale del margen, como pegada encima. */
  .brew .page .memo.pinned {
    margin-left: -1.1cm;
    margin-right: -0.2cm;
  }

  /* ------------------------------------------ borde de pincel ------- */
  /*
   * `{brush}` para ilustraciones recortadas a mano alzada: el borde lo dibuja
   * una turbulencia que desplaza el rectángulo de la máscara, así que sale
   * irregular y con astillas finas, no ondulado como el papel rasgado.
   */
  .brew .page .brush,
  .brew .page .ragged {
    -webkit-mask-image: var(--brush-mask);
    mask-image: var(--brush-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* Variante más comida, para bordes muy sueltos. */
  .brew .page .brush-rough {
    -webkit-mask-image: var(--brush-mask-rough);
    mask-image: var(--brush-mask-rough);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

@layer brew {
  /* --------------------------------------- ilustración a sangre ----- */
  /*
   * `{{bleed,bottom … }}` fija una ilustración al pie de la página, tocando
   * los tres bordes. La página se reserva el sitio sola: la misma variable
   * define la altura de la banda y el relleno inferior, así que el texto de
   * las columnas se detiene justo encima en vez de pasarle por debajo.
   */
  .brew .page:has(> .bleed.bottom) {
    padding-bottom: calc(var(--bleed-height, 11cm) + 0.5cm);
  }

  .brew .page:has(> .bleed.short) {
    --bleed-height: 8cm;
  }

  .brew .page:has(> .bleed.tall) {
    --bleed-height: 14cm;
  }

  .brew .page > .bleed {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--bleed-height, 11cm);
    z-index: 0;
    overflow: hidden;
  }

  .brew .page > .bleed.bottom {
    bottom: 0;
  }

  .brew .page > .bleed.top {
    top: 0;
  }

  .brew .page > .bleed > p {
    margin: 0;
  }

  .brew .page > .bleed img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* Pie de foto sobre la propia ilustración. */
  .brew .page > .bleed .artist {
    position: absolute;
    right: 0.35cm;
    bottom: 0.25cm;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 0 0.15cm rgba(0, 0, 0, 0.8);
  }

  /* Un índice a tres columnas necesita menos aire que el texto corrido. */
  .brew .page .toc.columns-3 {
    font-size: 0.95em;
  }

  .brew .page .toc.columns-3 h3 {
    font-size: 0.38cm;
  }

  .brew .page .toc.columns-3 h4 {
    font-size: 0.34cm;
  }
}

@layer brew {
  /* El título del índice cruza por encima de las columnas, como en el manual. */
  .brew .page .toc > h1 {
    column-span: all;
    margin-bottom: 0.25cm;
  }

  /* En una entrada que ocupa dos líneas, la guía y el número se quedan en la
     última: alineados arriba parecerían pertenecer a otra entrada. */
  .brew .page .toc a {
    align-items: flex-end;
  }

  .brew .page .toc a > span:first-child {
    align-items: flex-end;
    flex-wrap: wrap;
  }
}

@layer brew {
  /* En columnas estrechas partir con guion los títulos del índice queda mal
     y además estorba a la guía de puntos. */
  .brew .page .toc {
    hyphens: manual;
  }
}

@layer brew {
  /* Columnas de la página, elegidas por documento. Tres columnas piden menos
     aire entre ellas y un cuerpo algo menor para que quepan las palabras. */
  .brew[data-columns="3"] .page {
    columns: 3;
    column-gap: 0.6cm;
    font-size: 0.32cm;
  }

  .brew[data-columns="3"] .page h1 {
    font-size: 0.72cm;
  }

  .brew[data-columns="3"] .page h2 {
    font-size: 0.54cm;
  }

  .brew[data-columns="3"] .page h3 {
    font-size: 0.44cm;
  }

  /* Un bloque suelto puede llevar la contraria a la página. */
  .brew .page .columns-2 {
    columns: 2;
    column-gap: 0.9cm;
  }
}

@layer brew {
  /*
   * Tratamiento de papel de la tira del título: sombra que sigue al canto
   * rasgado —`drop-shadow` respeta la máscara, `box-shadow` no—, un punto de
   * grano y una inclinación mínima. En el manual la tira nunca está a nivel.
   */
  .brew .page .chapter > h1 {
    background-image: linear-gradient(
      175deg,
      rgba(255, 255, 255, 0.55),
      rgba(0, 0, 0, 0.05)
    );
    filter: drop-shadow(0.04cm 0.07cm 0.09cm rgba(40, 28, 12, 0.45));
    rotate: var(--chapter-banner-tilt, -0.35deg);
  }

  /* La ilustración también proyecta sombra por sus cantos rotos. */
  .brew .page .chapter img {
    filter: drop-shadow(0 0.05cm 0.08cm rgba(40, 28, 12, 0.3));
  }
}

@layer brew {
  /* ----------------------------------------- páginas enfrentadas ---- */
  /*
   * Los manuales se diseñan a pliego: una apertura de capítulo no se lee igual
   * en la página izquierda que en la derecha. La primera va suelta a la
   * derecha, como la portada de un libro, y a partir de ahí van por parejas.
   */
  .brew[data-spread="true"] {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.5cm 0;
    align-items: start;
  }

  .brew[data-spread="true"] .page:first-child {
    grid-column: 2;
  }

  /* En el pliego, las dos hojas se tocan por el lomo. */
  .brew[data-spread="true"] .page-even {
    box-shadow: -0.15cm 0 0.35cm rgba(0, 0, 0, 0.4) inset,
      0 0 0.4cm rgba(0, 0, 0, 0.45);
  }

  .brew[data-spread="true"] .page-odd {
    box-shadow: 0.15cm 0 0.35cm rgba(0, 0, 0, 0.4) inset,
      0 0 0.4cm rgba(0, 0, 0, 0.45);
  }

  /* Al imprimir, cada hoja va suelta otra vez. */
  @media print {
    .brew[data-spread="true"] {
      display: block;
    }

    .brew[data-spread="true"] .page {
      box-shadow: none;
    }
  }

  /* ------------------------------------------- rejilla de mapas ----- */
  /*
   * `{{map,grid … }}` superpone cuadrícula a una ilustración. El paso se da en
   * las mismas unidades que la página, así que 1cm de rejilla es 1cm impreso.
   */
  .brew .page .map {
    position: relative;
    margin-bottom: 0.3cm;
    break-inside: avoid;
  }

  .brew .page .map img {
    display: block;
    width: 100%;
  }

  .brew .page .map.grid::after,
  .brew .page .map.hexgrid::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--grid-opacity, 0.55);
  }

  .brew .page .map.grid::after {
    background-image:
      repeating-linear-gradient(
        to right,
        var(--grid-color, rgba(0, 0, 0, 0.55)) 0 var(--grid-line, 1px),
        transparent var(--grid-line, 1px) var(--grid-size, 1cm)
      ),
      repeating-linear-gradient(
        to bottom,
        var(--grid-color, rgba(0, 0, 0, 0.55)) 0 var(--grid-line, 1px),
        transparent var(--grid-line, 1px) var(--grid-size, 1cm)
      );
  }

  .brew .page .map.hexgrid::after {
    background-image: var(--hex-grid);
    background-size: var(--grid-size, 1.2cm) calc(var(--grid-size, 1.2cm) * 1.732);
  }

  /* Escala de la rejilla, al pie del mapa. */
  .brew .page .map .scale {
    position: absolute;
    right: 0.15cm;
    bottom: 0.15cm;
    margin: 0;
    padding: 0.04cm 0.14cm;
    background: rgba(255, 255, 255, 0.82);
    font-family: var(--font-brew-sans-stack);
    font-size: 0.28cm;
    color: #000;
  }
}

@layer brew {
  /* ------------------------------------------ familias tipográficas -- */
  /*
   * Atajos para cambiar de fuente sin escribir `font-family` a mano:
   * `{{f-sans texto}}`. Son las cuatro que trae el proyecto más las
   * genéricas; si defines las del manual en public/fonts, estas las cogen.
   */
  .brew .page .f-body { font-family: var(--font-brew-body-stack); }
  .brew .page .f-heading { font-family: var(--font-brew-heading-stack); }
  .brew .page .f-display { font-family: var(--font-brew-display-stack); }
  .brew .page .f-sans { font-family: var(--font-brew-sans-stack); }
  .brew .page .f-hand { font-family: var(--font-brew-hand-stack); }
  .brew .page .f-mono {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  }
  .brew .page .smallcaps {
    font-variant: small-caps;
    letter-spacing: 0.02em;
  }

  /* ------------------------------------------------ tablas del manual -- */

  /* Tabla de progresión de clase: muchas columnas, cuerpo menor y centrada. */
  .brew .page .class-table table {
    font-size: 0.86em;
    font-family: var(--font-brew-sans-stack);
  }

  .brew .page .class-table th,
  .brew .page .class-table td {
    text-align: center;
    padding: 0.03cm 0.08cm;
  }

  .brew .page .class-table th:first-child,
  .brew .page .class-table td:first-child,
  .brew .page .class-table th:nth-child(3),
  .brew .page .class-table td:nth-child(3) {
    text-align: left;
  }

  .brew .page .class-table thead th {
    font-family: var(--font-brew-heading-stack);
    border-bottom: 2px solid var(--rule);
  }

  /* Dos tablas cortas una al lado de la otra, en vez de una larga. */
  .brew .page .split-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.5cm;
    break-inside: avoid;
  }

  .brew .page .split-table table {
    margin-bottom: 0;
  }

  /* Tabla con marco, como las destacadas del manual. */
  .brew .page .framed-table {
    background: var(--statblock-bg);
    border: 0.06cm solid var(--statblock-frame);
    padding: 0.2cm 0.25cm 0.05cm;
    margin-bottom: 0.3cm;
    break-inside: avoid;
  }

  .brew .page .framed-table table {
    margin-bottom: 0.15cm;
  }

  /* ------------------------------------------------------- licencias -- */

  .brew .page .license {
    font-family: var(--font-brew-sans-stack);
    font-size: 0.26cm;
    line-height: 1.25em;
    color: rgba(0, 0, 0, 0.75);
    text-align: left;
    margin-bottom: 0.25cm;
  }

  .brew .page .license h5 {
    font-size: 0.3cm;
    margin-bottom: 0.06cm;
  }
}

@layer brew {
  /* ============================================================ temas ===
   * Un tema es un juego de variables: color de papel, manchas, grano, tinta
   * y las cajas. Nada de reglas nuevas, así que todo lo demás —fichas,
   * portadas, adornos— se adapta solo.
   * =================================================================== */

  /* Limpio: papel blanco sin textura. Para borradores, apéndices largos y
     para imprimir sin gastar medio cartucho en el pergamino. */
  .brew[data-theme="limpio"] {
    --parchment: #ffffff;
    --page-stains: none;
    --page-grain: none;
    --page-blend: normal;
    --ink: #14110e;
    --accent: #6b2018;
    --rule: #b9b0a0;
    --muted-ink: rgba(0, 0, 0, 0.45);
    --shadow-ink: rgba(0, 0, 0, 0.14);

    --note-bg: #f1f3e7;
    --note-border: #d7dcc6;
    --descriptive-bg: #f8f7f2;
    --table-stripe: #f0f0ec;

    --statblock-bg: #fbf8f2;
    --statblock-accent: #7a2a12;
    --statblock-frame: #cfc4ac;
  }

  /* Grimorio: tomo oscuro, tinta hueso y oro. Para necromancia y libros que
     nadie debería estar leyendo. */
  .brew[data-theme="grimorio"] {
    --parchment: #1d1a17;
    --page-stains:
      radial-gradient(ellipse at 25% 20%, rgba(120, 95, 55, 0.22), transparent 45%),
      radial-gradient(ellipse at 78% 70%, rgba(90, 70, 40, 0.2), transparent 45%),
      radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
    --page-blend: normal, normal, normal, multiply;
    --ink: #e4dbc6;
    --accent: #c9a227;
    --rule: #6e5a2c;
    --muted-ink: rgba(228, 219, 198, 0.5);
    --shadow-ink: rgba(0, 0, 0, 0.6);

    --note-bg: #26302a;
    --note-border: #3d4d40;
    --descriptive-bg: #2a2520;
    --table-stripe: #262220;

    --statblock-bg: #241f1a;
    --statblock-accent: #c9a227;
    --statblock-frame: #6e5a2c;
  }

  /* En un tema oscuro las cajas necesitan su propio color de texto: si no,
     heredan la tinta clara sobre fondos que ya son claros. */
  .brew[data-theme="grimorio"] .page blockquote,
  .brew[data-theme="grimorio"] .page .note,
  .brew[data-theme="grimorio"] .page .descriptive,
  .brew[data-theme="grimorio"] .page .statblock,
  .brew[data-theme="grimorio"] .page .memo {
    color: var(--ink);
  }

  .brew[data-theme="grimorio"] .page .memo {
    --memo-bg: #2c2620;
  }

  .brew[data-theme="grimorio"] .page .chapter > h1 {
    --chapter-banner-bg: #2b2620;
  }

  /* Diario: papel envejecido y tinta sepia, con pauta muy tenue. */
  .brew[data-theme="diario"] {
    --parchment: #efe3c8;
    --page-stains:
      repeating-linear-gradient(
        to bottom,
        transparent 0 0.62cm,
        rgba(120, 95, 60, 0.16) 0.62cm 0.64cm
      ),
      radial-gradient(ellipse at 18% 22%, rgba(150, 110, 55, 0.2), transparent 42%),
      radial-gradient(ellipse at 84% 74%, rgba(140, 100, 50, 0.22), transparent 44%),
      radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(110, 80, 40, 0.3) 100%);
    --page-blend: normal, normal, normal, normal, multiply;
    --ink: #3b2a18;
    --accent: #6b3a15;
    --rule: #b08b4a;
    --muted-ink: rgba(59, 42, 24, 0.55);

    --note-bg: #e6dcc0;
    --note-border: #c9b98f;
    --descriptive-bg: #f4ecd8;
    --table-stripe: #e6dcc0;

    --statblock-bg: #f2e8cf;
    --statblock-accent: #7a3d12;
    --statblock-frame: #b08b4a;
  }

  .brew[data-theme="diario"] .page {
    font-family: var(--font-brew-hand-stack);
  }
}


@layer brew {
  /* ------------------------------------------- hoja de personaje ----
   * Mismo lenguaje que las fichas de criatura: papel crema sobre el
   * pergamino, marco dorado, divisores rojos y titulares en la tipográfica
   * de encabezados. Así la hoja parece parte del manual y no un formulario.
   */
  .brew .page .sheet {
    column-span: all;
    font-family: var(--font-brew-sans-stack);
    font-size: 0.3cm;
    line-height: 1.25em;
    text-align: left;
  }

  /* ---- cabecera ---- */

  .brew .page .sheet-header {
    background: var(--statblock-bg);
    border: 0.06cm solid var(--statblock-frame);
    box-shadow: 0.05cm 0.06cm 0.2cm var(--shadow-ink);
    padding: 0.22cm 0.3cm 0.26cm;
    margin-bottom: 0.3cm;
  }

  .brew .page .sheet-name .sheet-label {
    display: none;
  }

  .brew .page .sheet-name .sheet-value {
    border: none;
    padding: 0;
    font-family: var(--font-brew-heading-stack);
    font-size: 0.78cm;
    line-height: 1.05em;
    color: var(--statblock-accent);
    letter-spacing: 0.01em;
  }

  .brew .page .sheet-header-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.14cm 0.4cm;
    margin-top: 0.12cm;
  }

  .brew .page .sheet-field {
    display: flex;
    flex-direction: column;
    gap: 0.02cm;
    min-width: 0;
  }

  .brew .page .sheet-label {
    font-size: 0.23cm;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--statblock-accent);
  }

  .brew .page .sheet-value {
    min-height: 0.44cm;
    padding: 0.02cm 0.06cm;
    border-bottom: 1px solid var(--statblock-frame);
    font-size: 0.32cm;
  }

  /* ---- retícula ---- */

  .brew .page .sheet-body {
    display: grid;
    grid-template-columns: 1fr 1.12fr 1fr;
    gap: 0.3cm;
    align-items: start;
  }

  .brew .page .sheet-col {
    display: flex;
    flex-direction: column;
    gap: 0.28cm;
    min-width: 0;
  }

  /* ---- características ---- */

  .brew .page .sheet-abilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3cm 0.18cm;
  }

  .brew .page .sheet-ability {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.12cm 0.06cm 0.3cm;
    background: var(--statblock-bg);
    border: 0.05cm solid var(--statblock-frame);
    box-shadow: 0.04cm 0.05cm 0.14cm var(--shadow-ink);
    text-align: center;
  }

  .brew .page .sheet-ability-name {
    font-size: 0.21cm;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--statblock-accent);
  }

  .brew .page .sheet-ability-mod {
    font-family: var(--font-brew-heading-stack);
    font-size: 0.78cm;
    line-height: 1em;
    color: var(--ink);
  }

  /* La puntuación va en un disco que monta sobre el borde inferior, como en
     las hojas del manual. */
  .brew .page .sheet-ability-score b {
    position: absolute;
    bottom: -0.19cm;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 0.62cm;
    height: 0.62cm;
    border-radius: 50%;
    background: var(--parchment);
    border: 0.05cm solid var(--statblock-frame);
    font-family: var(--font-brew-sans-stack);
    font-size: 0.28cm;
    font-weight: 700;
    color: var(--ink);
  }

  .brew .page .sheet-save {
    display: flex;
    align-items: center;
    gap: 0.07cm;
    margin-top: 0.1cm;
    font-size: 0.22cm;
    color: var(--ink);
  }

  /* ---- paneles ---- */

  .brew .page .sheet-panel {
    background: var(--statblock-bg);
    border: 0.05cm solid var(--statblock-frame);
    box-shadow: 0.04cm 0.05cm 0.16cm var(--shadow-ink);
    padding: 0.16cm 0.2cm 0.18cm;
    break-inside: avoid;
  }

  .brew .page .sheet-panel h5 {
    font-family: var(--font-brew-heading-stack);
    font-size: 0.34cm;
    font-variant: small-caps;
    letter-spacing: 0.02em;
    color: var(--statblock-accent);
    margin: 0;
  }

  .brew .page .sheet-panel .statblock-divider {
    margin: 0.04cm 0 0.1cm;
  }

  /* ---- habilidades ---- */

  .brew .page .sheet-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .brew .page .sheet-list li {
    display: flex;
    align-items: center;
    gap: 0.11cm;
    margin: 0;
    padding: 0.025cm 0;
  }

  .brew .page .sheet-list li + li {
    border-top: 1px dotted rgba(146, 38, 16, 0.22);
  }

  .brew .page .sheet-skill-name {
    flex: 1;
    min-width: 0;
  }

  .brew .page .sheet-skill-ability {
    font-size: 0.2cm;
    letter-spacing: 0.04em;
    color: var(--statblock-accent);
  }

  .brew .page .sheet-skill-mod {
    width: 0.8cm;
    text-align: right;
    font-family: var(--font-brew-heading-stack);
    font-size: 0.32cm;
    font-variant-numeric: tabular-nums;
  }

  .brew .page .sheet .dot {
    display: inline-block;
    width: 0.21cm;
    height: 0.21cm;
    border: 1px solid var(--statblock-frame);
    border-radius: 50%;
    flex: 0 0 auto;
  }

  .brew .page .sheet .dot.on {
    background: var(--statblock-accent);
    border-color: var(--statblock-accent);
  }

  .brew .page .sheet .dot.double {
    background: var(--statblock-accent);
    border-color: var(--statblock-accent);
    box-shadow: 0 0 0 1.5px var(--statblock-bg) inset;
  }

  /* ---- combate ---- */

  /* Dos por fila: a cuatro, «Clase de armadura» y «Puntos de golpe» partían
     la etiqueta en dos líneas y el bloque quedaba apretado. */
  .brew .page .sheet-combat {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2cm;
  }

  .brew .page .sheet-field.big {
    position: relative;
    align-items: center;
    padding: 0.14cm 0.05cm 0.1cm;
    background: var(--statblock-bg);
    border: 0.05cm solid var(--statblock-frame);
    box-shadow: 0.04cm 0.05cm 0.14cm var(--shadow-ink);
    text-align: center;
  }

  .brew .page .sheet-field.big .sheet-icon {
    width: 0.42cm;
    height: 0.42cm;
    color: var(--statblock-accent);
    opacity: 0.85;
  }

  .brew .page .sheet-field.big .sheet-label {
    font-size: 0.21cm;
    line-height: 1.1em;
  }

  .brew .page .sheet-field.big .sheet-value {
    border: none;
    min-height: 0.5cm;
    font-family: var(--font-brew-heading-stack);
    font-size: 0.5cm;
    line-height: 1.05em;
    color: var(--ink);
  }

  /* ---- ataques ---- */

  .brew .page table.sheet-attacks {
    margin: 0;
    font-size: 0.26cm;
  }

  .brew .page table.sheet-attacks th {
    font-family: var(--font-brew-heading-stack);
    font-size: 0.22cm;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--statblock-accent);
    border-bottom: 1px solid var(--statblock-frame);
  }

  .brew .page table.sheet-attacks td {
    height: 0.46cm;
    border-bottom: 1px dotted rgba(146, 38, 16, 0.28);
  }

  .brew .page table.sheet-attacks tbody tr:nth-child(odd) {
    background: none;
  }

  .brew .page .sheet-prose {
    min-height: 1cm;
    white-space: pre-wrap;
  }
}

@layer brew {
  /* Página cuyo contenido no cabe: el multicolumna lo manda a columnas
     invisibles a la derecha y `overflow: hidden` lo recorta, así que sin este
     aviso el texto desaparecería también del PDF sin decir nada. */
  .brew .page.is-overflowing {
    outline: 0.09cm solid #b03a26;
    outline-offset: 0.1cm;
  }

  .brew .page.is-overflowing::after {
    content: "El texto no cabe en esta página";
    position: absolute;
    right: 0;
    bottom: -0.72cm;
    padding: 0.06cm 0.2cm;
    background: #b03a26;
    color: #fff;
    font-family: var(--font-brew-sans-stack);
    font-size: 0.28cm;
    border-radius: 0 0 0.08cm 0.08cm;
  }

  @media print {
    .brew .page.is-overflowing {
      outline: none;
    }

    .brew .page.is-overflowing::after {
      display: none;
    }
  }
}

@layer brew {
  /* ------------------------------------------------ modo lectura ----
   * Para dirigir desde la tableta: una columna, cuerpo mayor y sin cortes de
   * página. Maquetar a dos columnas es precioso para imprimir e incómodo para
   * leer en la mesa.
   */
  .brew[data-reading="true"] {
    gap: 0;
  }

  .brew[data-reading="true"] .page {
    width: min(21.59cm, 100%);
    height: auto;
    min-height: 0;
    columns: 1;
    padding: 1.2cm 1.6cm;
    margin: 0;
    font-size: 0.42cm;
    line-height: 1.45em;
    box-shadow: none;
    overflow: visible;
  }

  .brew[data-reading="true"] .page + .page {
    border-top: 0.08cm solid var(--rule);
  }

  .brew[data-reading="true"] .page-number,
  .brew[data-reading="true"] .footnote,
  .brew[data-reading="true"] .chapter,
  .brew[data-reading="true"] .bleed {
    display: none;
  }

  .brew[data-reading="true"] .statblock.wide .statblock-inner {
    columns: 1;
  }

  /* ------------------------------------------ marcas de imprenta ----
   * Sangrado de 3 mm y ocho marcas de corte, dos por esquina, que es lo que
   * piden los servicios de impresión bajo demanda. Cada marca es una capa de
   * color sólido con su tamaño exacto: un degradado de dos paradas del mismo
   * color pinta toda la capa, que es justo el error que tenía antes.
   */
  .brew[data-marks="true"] {
    --bleed: 0.3cm;
    --mark: 0.4cm;
    --mark-gap: 0.1cm;
    --mark-edge: calc(var(--bleed) + var(--mark-gap) + var(--mark));
  }

  .brew .page-marks {
    position: relative;
    margin: var(--mark-edge);
  }

  .brew[data-marks="true"] .page {
    margin: 0;
    outline: var(--bleed) solid var(--parchment);
  }

  /* Ocho marcas, dos por esquina. Van en el envoltorio y no en la página
     porque esta recorta su contenido. Cada una es una capa de color sólido con
     su tamaño exacto: un degradado de dos paradas del mismo color pintaría
     toda la capa, que es el error que tenían antes. */
  .brew[data-marks="true"] .page-marks::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--mark-edge));
    pointer-events: none;
    z-index: 5;
    background-image:
      linear-gradient(#000, #000), linear-gradient(#000, #000),
      linear-gradient(#000, #000), linear-gradient(#000, #000),
      linear-gradient(#000, #000), linear-gradient(#000, #000),
      linear-gradient(#000, #000), linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-size:
      var(--mark) 1px, var(--mark) 1px, var(--mark) 1px, var(--mark) 1px,
      1px var(--mark), 1px var(--mark), 1px var(--mark), 1px var(--mark);
    background-position:
      0 var(--mark-edge),
      100% var(--mark-edge),
      0 calc(100% - var(--mark-edge)),
      100% calc(100% - var(--mark-edge)),
      var(--mark-edge) 0,
      calc(100% - var(--mark-edge)) 0,
      var(--mark-edge) 100%,
      calc(100% - var(--mark-edge)) 100%;
  }

  /* Viudas y huérfanas: una línea suelta al pie de columna canta mucho. */
  .brew .page p,
  .brew .page li {
    orphans: 2;
    widows: 2;
  }
}