@import (less) './themes/fonts/5e/fonts.less';
@import (less) './themes/assets/assets.less';

:root {
	//Colors
	--HB_Color_Background            : #EEE5CE; // Light parchment
	--HB_Color_Accent                : #E0E5C1; // Pastel green
	--HB_Color_HeaderUnderline       : #C0AD6A; // Gold
	--HB_Color_HorizontalRule        : #9C2B1B; // Maroon
	--HB_Color_HeaderText            : #58180D; // Dark Maroon
	--HB_Color_MonsterStatBackground : #F2E5B5; // Light orange parchment
	--HB_Color_CaptionText           : #766649; // Brown
	--HB_Color_WatercolorStain       : #BBAD82; // Light brown
	--HB_Color_Footnotes             : #C9AD6A; // Gold
}

@page { margin: 0; }
body {
	counter-reset : phb-page-numbers;
}
*{
	-webkit-print-color-adjust : exact;
}
.useSansSerif(){
	font-family : ScalySansRemake;
	font-size   : 0.318cm;
	line-height : 1.2em;
	p,dl,ul,ol {
		line-height : 1.2em;
	}
	ul, ol {
		padding-left : 1em;
	}
	em{
		font-style  : italic;
	}
	strong{
		font-weight    : 800;
		letter-spacing : -0.02em;
	}
	h5 + * {
		margin-top : 0.1cm;
	}
}
.useColumns(@multiplier : 1, @fillMode: balance){
	column-count         : 2;
	column-fill          : @fillMode;
	column-gap           : 0.9cm;
	column-width         : 8cm * @multiplier;
	-webkit-column-count : 2;
	-moz-column-count    : 2;
	-webkit-column-width : 8cm * @multiplier;
	-moz-column-width    : 8cm * @multiplier;
	-webkit-column-gap   : 0.9cm;
	-moz-column-gap      : 0.9cm;
}
.columnWrapper{
	max-height        : 100%;
	column-span       : all;
	columns           : inherit;
	column-gap        : inherit;
}
.page{
	.useColumns();
	counter-increment : phb-page-numbers;
	position          : relative;
	z-index           : 15;
	box-sizing        : border-box;
	overflow          : hidden;
	height            : 279.4mm;
	width             : 215.9mm;
	background-color  : var(--HB_Color_Background);
	background-image  : @backgroundImage;
	padding           : 1.4cm 1.9cm 1.7cm;
	font-family       : BookInsanityRemake;
	font-size         : 0.34cm;
	text-rendering    : optimizeLegibility;
	page-break-before : always;
	page-break-after  : always;
}
	//*****************************
	// *            BASE
	// *****************************/

.page{
	p{
		overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
		display       : block;
		line-height   : 1.25em;
		&+* {
			margin-top : 0.325cm;
		}
		&+p{
			margin-top : 0;
		}
	}
	ul{
		margin-bottom       : 0.8em;
		padding-left        : 1.4em;
		line-height         : 1.25em;
		list-style-position : outside;
		list-style-type     : disc;
	}
	ol{
		margin-bottom       : 0.8em;
		padding-left        : 1.4em;
		line-height         : 1.25em;
		list-style-position : outside;
		list-style-type     : decimal;
	}
	//Indents after p or lists
	p+p, ul+p, ol+p{
		text-indent : 1em;
	}
	img{
		z-index : -1;
	}
	strong{
		font-weight    : bold;
		letter-spacing : -0.02em;
	}
	em{
		font-style : italic;
	}
	sup{
		vertical-align : super;
		font-size      : smaller;
		line-height    : 0;
	}
	sub{
		vertical-align : sub;
		font-size      : smaller;
		line-height    : 0;
	}
	//*****************************
	// *           HEADERS
	// *****************************/
	h1,h2,h3,h4{
		font-family   : MrEavesRemake;
		font-weight   : 800;
		color         : var(--HB_Color_HeaderText);
	}
	h1{
		margin-bottom       : 0.18cm; //Margin-bottom only because this is WIDE
		column-span         : all;
		font-size           : 0.89cm;
		line-height         : 1em;
		-webkit-column-span : all;
		-moz-column-span    : all;
		&+p::first-letter{
			float                   : left;
			font-family             : SolberaImitationRemake;
			line-height             : 1em;
			font-size               : 3.5cm;
			padding-left            : 40px; //Allow background color to extend into margins
			margin-left             : -40px;
			margin-top              : -0.3cm;
			padding-bottom          : 2px;
			margin-bottom           : -20px;
			background-image        : linear-gradient(-45deg, #322814, #998250, #322814);
			background-clip         : text;
			-webkit-background-clip : text;
			color                   : rgba(0, 0, 0, 0);
		}
		&+p::first-line{
			font-variant : small-caps;
		}
	}
	h2{
		//margin-top    : 0px; //Font is misaligned. Shift up slightly
		//margin-bottom : 0.05cm;
		font-size     : 0.75cm;
		line-height   : 0.988em; //Font is misaligned. Shift up slightly
	}
	h3{
		//margin-top    : -0.1cm; //Font is misaligned. Shift up slightly
		//margin-bottom : 0.1cm;
		font-size     : 0.575cm;
		border-bottom : 2px solid var(--HB_Color_HeaderUnderline);;
		line-height   : 0.995em; //Font is misaligned. Shift up slightly
		& + * {
			margin-top: 0.17cm;
		}
	}
	* + h3 {
		margin-top    : 0.155cm; //(0.325 - 0.17)
	}
	h4{
		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
		//margin-bottom : 0.02cm;
		font-size     : 0.458cm;
		line-height   : 0.971em; //Font is misaligned. Shift up slightly
		& + * {
			margin-top: 0.09cm;
		}
	}
	* + h4 {
		margin-top    : 0.235cm; //(0.325 - 0.09)
	}
	h5{
		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
		//margin-bottom : 0.02cm;
		font-family   : ScalySansSmallCapsRemake;
		font-size     : 0.423cm;
		font-weight   : 900;
		line-height   : 0.951em; //Font is misaligned. Shift up slightly
		& + * {
			margin-top : 0.2cm;
		}
	}
	//*****************************
	// *          TABLE
	// *****************************/
	table{
		.useSansSerif();
		width         : 100%;
		line-height   : 16px;
		& + * {
			margin-top : 0.325cm;
		}
		thead{
			display: table-row-group;
			font-weight : 800;
			th{
				vertical-align : bottom;
				//padding        : 0.14em 0.4em;
				padding     : 0px 1.5px;   // Both of these are temporary, just to force
				//line-height : 16px;        // PDF to render at same height until Chrome 108
			}
		}
		tbody{
			tr{
				td{
					//padding : 0.14em 0.4em;
					padding     : 0px 1.5px;   // Both of these are temporary, just to force
          //line-height : 16px;        // PDF to render at same height until Chrome 108
				}
				&:nth-child(odd){
					background-color : var(--HB_Color_Accent);
				}
			}
		}
	}
	//*****************************
	// *            NOTE
	// *****************************/
	.note{
		.useSansSerif();
		background-color    : var(--HB_Color_Accent);
		border-style        : solid;
		border-width        : 1px;
		border-image        : @noteBorderImage 12 stretch;
		border-image-outset : 9px 0px;
		border-image-width  : 11px;
		padding             : 0.13cm 0.16cm;
		box-shadow          : 1px 4px 14px #888;
		.page :where(&) {
			margin-top        : 9px; //Prevent top border getting cut off on colbreak
		}
		& + * {
			margin-top : 0.45cm;
		}
		h5 {
			font-size : 0.375cm;
		}
		p{
			display        : block;
			padding-bottom : 0px;
		}
		:last-child {
			margin-bottom : 0;
		}
	}
	//************************************
	// *       DESCRIPTIVE TEXT BOX
	// ************************************/
	.descriptive{
		.useSansSerif();
		background-color    : #faf7ea;
		border-style        : solid;
		border-width        : 7px;
		border-image        : @descriptiveBoxImage 12 stretch;
		border-image-outset : 4px;
		padding             : 0.1em;
		box-shadow          : 0 0 6px #faf7ea;
		.page :where(&) {
			margin-top        : 4px; //Prevent top border getting cut off on colbreak
		}
		& + * {
			margin-top : 0.45cm;
		}
		h5 {
			font-size : 0.375cm;
		}
		p{
			display        : block;
			padding-bottom : 0px;
			line-height    : 1.5em;
		}
		:last-child {
			margin-bottom : 0;
		}
	}
	//*****************************
	// *    Images Snippets
	// *****************************/

	/* Arist Credit */
	.artist {
		position    : absolute;
		width       : auto;
		text-align  : center;
		font-family : WalterTurncoat;
		font-size   : 0.27cm;
		color       : var(--HB_Color_CaptionText);
		p, p + p {
			margin      : unset;
			text-indent : unset;
			line-height : 1em;
		}
	 	h5 {
			font-size   : 1.3em;
			font-family : WalterTurncoat;
		}
		a{
			color           : inherit;
			text-decoration : unset;
			&:hover {
				text-decoration : underline;
			}
		}
	}

	/* Watermark */
	.watermark {
		display         : grid !important;
		place-items     : center;
		justify-content	: center;
		position        : absolute;
		top             : 0;
		left            : 0;
		width           : 100%;
		height          : 100%;
		font-size       : 120px;
		text-transform	: uppercase;
		color           : black;
		mix-blend-mode  : overlay;
		opacity         : 30%;
		transform       : rotate(-45deg);
		z-index         : 500;
		p {
			margin-bottom : none;
		}
	}

	/* Watercolor */
	[class*="watercolor"] {
		position            : absolute;
		width               : 2000px;    /* dimensions need to be real big so the user can set */
		height              : 2000px;    /* height or width and the image will maintain aspect ratio */
		-webkit-mask-image  : var(--wc);
		-webkit-mask-size   : contain;
		-webkit-mask-repeat : no-repeat;
		mask-image          : var(--wc);
		mask-size           : contain;
		mask-repeat         : no-repeat;
		background-size     : cover;
		background-color    : var(--HB_Color_WatercolorStain);			/*default color*/
		--wc                : @watercolor1;         /*default image*/
		z-index             : -2;
	}

	.watercolor1  { --wc : @watercolor1; }
	.watercolor2  { --wc : @watercolor2; }
	.watercolor3  { --wc : @watercolor3; }
	.watercolor4  { --wc : @watercolor4; }
	.watercolor5  { --wc : @watercolor5; }
	.watercolor6  { --wc : @watercolor6; }
	.watercolor7  { --wc : @watercolor7; }
	.watercolor8  { --wc : @watercolor8; }
	.watercolor9  { --wc : @watercolor9; }
	.watercolor10 { --wc : @watercolor10; }
	.watercolor11 { --wc : @watercolor11; }
	.watercolor12 { --wc : @watercolor12; }

	//*****************************
	// *    MONSTER STAT BLOCK
	// *****************************/
	.monster {
		.useSansSerif();
		&.frame {
			border-style          : solid;
			border-width          : 7px 6px;
			background-color      : var(--HB_Color_MonsterStatBackground);
			background-image      : @monsterBlockBackground;
			border-image          : @monsterBorderImage 14 round;
			border-image-outset   : 0px 2px;
			background-blend-mode : overlay;
			background-attachment : fixed;
			box-shadow            : 1px 4px 14px #888;
			padding               : 4px 2px;
			margin-left           : -0.16cm;
			margin-right          : -0.16cm;
			width                 : calc(100% + 0.32cm);
		}

		position          : relative;
		padding           : 0px;
		margin-bottom     : 0.325cm;

		//Headers
		h2{
			font-size     : 0.62cm;
			line-height   : 1em;
			margin        : 0;
			&+p {
				font-size     : 0.304cm; //Monster size and type subtext
				margin-bottom : 0;
			}
		}
		h3{
			font-family    : ScalySansRemake;
			font-weight    : 800;
			font-variant   : small-caps;
			border-bottom  : 2px solid var(--HB_Color_HeaderText);
			// margin-top     : 0.05cm;  //Font is misaligned. Shift up slightly
  		padding-bottom : 0.05cm;
		}

		//Triangle dividers
		hr{
			visibility       : visible;
			height           : 6px;
			margin           : 0.12cm 0cm;
			background-image : @redTriangleImage;
			background-size  : 100% 100%;
			border           : none;
		}

		//Attribute Lists - All text between HRs is red
		hr ~ :is(dl,p) {
			color : var(--HB_Color_HeaderText);
		}
		hr:last-of-type {
			& ~ :is(dl,p) {
				color : inherit; // After the HRs, reset text to black
			}
			& + * {
				margin-top : 0.325cm; // Space after last HR
			}
		}

		// Monster Ability table
		hr + table:first-of-type{
			margin              : 0;
			column-span         : none;
			color               : var(--HB_Color_HeaderText);
			background-color    : transparent;
			border-style        : none;
			border-image        : none;
			-webkit-column-span : none;
			tr {
				background-color : transparent;
			}
			td,th {
				padding: 0px;
			}
		}

		:last-child {
			margin-bottom : 0;
		}
	}

	//Full Width
	.monster.wide{
		.useColumns(0.96, @fillMode: balance);
	}

	//*****************************
	// *           FOOTER
	// *****************************/
	&:after{
		content          : "";
		position         : absolute;
		bottom           : 0px;
		left             : 0px;
		z-index          : 100;
		height           : 50px;
		width            : 100%;
		background-image : @footerAccentImage;
		background-size  : cover;
	}
	&:nth-child(even){
		&:after{
			transform : scaleX(-1);
		}
		.pageNumber{
			left : 2px;
		}
		.footnote{
			left       : 80px;
			text-align : left;
		}
	}
	.pageNumber{
		position    : absolute;
		right       : 2px;
		bottom      : 22px;
		width       : 50px;
		font-size   : 0.9em;
		color       : var(--HB_Color_Footnotes);
		text-align  : center;
		text-indent : 0;
		&.auto::after {
			content : counter(phb-page-numbers);
		}
	}
	.footnote{
		position   : absolute;
		right      : 80px;
		bottom     : 32px;
		z-index    : 150;
		width      : 200px;
		font-size  : 0.8em;
		color      : var(--HB_Color_Footnotes);
		text-align : right;
	}
	//************************************
	// *           CODE BLOCKS
	// ************************************/
	code{
    font-family      : "Courier New", Courier, monospace;
		font-size        : 0.325;
		padding          : 0px 4px;
		color            : #58180d;
		background-color : #faf7ea;
		border-radius    : 4px;
		white-space      : pre-wrap;
		overflow-wrap    : break-word;
	}

	pre code{
		width               : 100%;
		display             : inline-block;
		border-style        : solid;
		border-width        : 1px;
		border-image        : @codeBorderImage 26 stretch;
		border-image-width  : 10px;
		border-image-outset : 2px;
		border-radius       : 12px;
		margin-bottom       : 2px;
		padding             : 0.15cm;
		.page :where(&) {
			margin-top        : 2px; //Prevent top border getting cut off on colbreak
		}
		& + * {
			margin-top : 0.325cm;
		}
	}
	//*****************************
	// *          EXTRAS
	// *****************************/
	hr{
		visibility : hidden;
		margin     : 0px;
	}
	.columnSplit {
		visibility                 : hidden;
		-webkit-column-break-after : always;
		break-after                : always;
		-moz-column-break-after    : always;
	}
	//Avoid breaking up
	blockquote,table{
		z-index                     : 15;
		-webkit-column-break-inside : avoid;
		page-break-inside           : avoid;
		break-inside                : avoid;
	}
	//Text indent right after table
	table+p{
		text-indent : 1em;
	}
	// Nested lists
	ul ul,ol ol,ul ol,ol ul{
		margin-bottom : 0px;
		margin-left   : 1.5em;
	}
	li{
		-webkit-column-break-inside : avoid;
		page-break-inside           : avoid;
		break-inside                : avoid;
	}
}
//*****************************
// *         SPELL LIST
// *****************************/
.page .spellList{
	.useSansSerif();
	column-count        : 2;
	ul+h5{
		margin-top : 15px;
	}
	p, ul{
		font-size   : 0.352cm;
		line-height : 1.265em;
	}
	ul{
		margin-bottom               : 0.5em;
		padding-left                : 1em;
		text-indent                 : -1em;
		list-style-type             : none;
		-webkit-column-break-inside : auto;
		page-break-inside           : auto;
		break-inside                : auto;
	}
	&.wide{
		column-count : 4;
	}
}

//*****************************
// *       CLASS TABLE
// *****************************/
.page .classTable{
th[colspan]:not([rowspan]) {
	white-space : nowrap;
}
&.frame {
	margin-top          : 0.7cm;
	margin-bottom       : 0.9cm;
	margin-left         : -0.1cm;
	margin-right        : -0.1cm;
	width               : calc(100% + 0.2cm);
	border-collapse     : separate;
	background-color    : white;
	border              : initial;
	border-style        : solid;
	border-image-outset : 0.4cm 0.3cm;
	border-image-repeat : stretch;
	border-image-slice  : 200;
	border-image-source : @frameBorderImage;
	border-image-width  : 47px;
	&.wide:first-child {
		margin-top: 0.12cm;
	}
	& + * {
		margin-top: 0;
	}
}
&.decoration {
	position:relative;
}
&.decoration::before {
	content             :'';
	position            : absolute;
	background-image    : @classTableDecoration,
	                      @classTableDecoration;
	background-size     : contain, contain;
	background-repeat   : no-repeat, no-repeat;
	background-position : top, bottom;
	width               : 7.75cm;
	height              : calc(100% + 3.3cm);
	top                 : 50%;
	left                : 50%;
	transform           : translateY(-50%) translateX(-50%);
	filter              : drop-shadow(0px 0px 1px #C8C5C080);
	z-index             : -1;
}
&.decoration.wide::before {
	width               : calc(100% + 3.3cm);
	height              : 7.75cm;
	background-position : left, right;
}
h5 + table{
	margin-top : 0.2cm;
}
}
//*****************************
// *    FRONT COVER PAGE
// *****************************/
.page:has(.frontCover) {
	columns    : 1;
	text-align : center;
	&:after {
		all: unset;
	}
	h1 {
		text-shadow: unset;
		filter         : drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black)
										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
		text-transform : uppercase;
		font-weight    : normal;
		margin-top     : 1.2cm;
		margin-bottom  : 0;
		color          : white;
		font-family    : NodestoCapsCondensed;
		font-size      : 2.245cm;
		line-height    : 0.85em;
	}
	h2 {
		filter         : drop-shadow(0 0 1px black) drop-shadow(0 0 0 black)
										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
		font-family    : NodestoCapsCondensed;
		font-weight    : normal;
		font-size      : 0.85cm;
		letter-spacing : 0.1cm;
		color          : white;
	}
	hr {
		display          : block;
		position         : relative;
		background-image : @horizontalRule;
		background-size  : 100% 100%;
		visibility       : visible;
		height           : 0.5cm;
		width            : 12cm;
		border           : none;
		margin           : auto;
		filter           : drop-shadow(0 0 3px black);
	}
	.banner {
		filter           : drop-shadow(2px 2px 2px black);
		position         : absolute;
		left             : 0;
		bottom           : 4.2cm;
		background-image : url('/assets/coverPageBanner.svg');
		height           : 1.7cm;
		width            : 10.5cm;
		color            : white;
		font-family      : NodestoCapsCondensed;
		font-weight      : normal;
		font-size        : 1cm;
		letter-spacing   : 0.014cm;
		text-align       : left;
		padding-left     : 1cm;
		display          : flex;
		justify-content  : center;
		flex-direction   : column;
		padding-top      : 0.1cm;
	}
	.footnote {
		filter       : drop-shadow(0 0 0.7px black) drop-shadow(0 0 0 black)
									 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
									 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
									 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
		position     : absolute;
		text-align   : center;
		color        : white;
		font-size    : 0.496cm;
		bottom       : 1.3cm;
		left         : 0;
    right        : 0;
    margin-left  : auto;
    margin-right : auto;
		width        : 70%;
		font-family  : Overpass;
	}
	.logo {
		position   : absolute;
		top        : 0.5cm;
		left       : 0;
		right      : 0;
		filter     : drop-shadow(0 0 0.075cm black);
		img {
			height : 2cm;
			width  : 100%;
		}
	}
}
//*****************************
// *    INSIDE COVER PAGE
// *****************************/
.page:has(.insideCover) {
	columns    : 1;
	text-align : center;
	&:after {
		all	: unset;
	}
	h1 {
		font-family		 : NodestoCapsCondensed;
		font-weight		 : normal;
		font-size		   : 2.1cm;
		margin-top     : 1.2cm;
		margin-bottom  : 0;
		text-transform : uppercase;
		line-height    : 0.85em;
	}
	h2 {
		font-family    : NodestoCapsCondensed;
		font-weight    : normal;
		font-size      : 0.85cm;
		letter-spacing : 0.5cm;
	}
	hr {
		display          : block;
		position         : relative;
		background-image : @horizontalRule;
		background-size  : 100% 100%;
		visibility       : visible;
		height           : 0.5cm;
		width            : 12cm;
		border           : none;
		margin           : auto;
	}
	.logo {
		position : absolute;
		bottom   : 1cm;
		left	   : 0;
		right	   : 0;
		height	 : 2cm;
		img {
			height : 2cm;
			width  : 100%;
		}
	}
}
//*****************************
// *      BACK COVER
// *****************************/
.page:has(.backCover) {
	color: #fff;
	columns: 1;
	padding: 2.25cm 1.3cm 2cm 1.3cm;
	&:after {
		all: unset;
	}
	.columnWrapper {
		width: 7.6cm;
	}
	.backCover {
		position: absolute;
		inset: 0;
		width: 11cm;
		background-image: @backCover;
		background-repeat: no-repeat;
		background-size: contain;
		z-index: -1;
	}
	.blank {
		height: 1.4em;
	}
	h1 {
		margin-bottom: .3cm;
		font-size: 1.35cm;
		line-height: 0.95em;
		font-family: NodestoCapsCondensed;
		text-align: center;
		color: #ED1C24;
	}
	h1+p::first-line,
	h1+p::first-letter {
		all: unset;
	}
	img {
		position: absolute;
		top: 0px;
		height: 100%;
		z-index: -2;
	}
	hr {
		margin-left: auto;
		margin-right: auto;
		margin-top: 1.1cm;
		height: .53cm;
		width: 4.5cm;
		visibility: visible;
		background-image: @horizontalRule;
		background-size: 100% 100%;
		border: none;
	}
	p {
		font-family: Overpass;
		line-height: 1.5em;
		font-size: 0.332cm;
	}
	hr+p {
		text-align: center;
		margin-top: .6cm;
	}
	.logo {
		position: absolute;
		z-index: 0;
		height: 1.5cm;
		left: 1.2cm;
		bottom: 2cm;
		width: 7.6cm;
		img {
			position: relative;
			height : 1.5cm;
			width  : 100%;
			z-index : 0;
		}
		p {
			position: relative;
			color: #fff;
			font-family: NodestoCapsWide;
			font-size: .4cm;
			letter-spacing: 0.08em;
			line-height: 1em;
			text-align: center;
			text-indent: 0;
			width: 100%;
		}
	}
}

//*****************************
	// *      PART COVER
	// *****************************/
	.page:has(.partCover) {
		columns    : 1;
		text-align : center;
		padding-top: 0;

		.partCover {
			background-image: @partCoverHeaderPHB;
			background-repeat: no-repeat;
			position: absolute;
			background-size: 100%;
			top: 0;
			left: 0;
			height: 6cm;
			width: 100%;
		}

		h1 {
			position: relative;
			text-align: center;
			text-transform: uppercase;
			font-size: 2.3cm;
			font-family: NodestoCapsCondensed;
			margin-top: .4cm;
		}

		h2 {
			font-family: Overpass;
			font-size: 0.45cm;
			position: relative;
			margin-top: -0.7em;
			line-height: 1.1em;
			margin-left  : auto;
			margin-right : auto;
		}
	}

//*****************************
// *      TABLE OF CONTENTS
// *****************************/
.page {
&:has(.toc):after {
	display: none;
}
.toc {
-webkit-column-break-inside : avoid;
page-break-inside           : avoid;
break-inside                : avoid;
	h1 {
		text-align    : center;
		margin-bottom : 0.3cm;
	}
	a{
		display         : inline;
		color           : inherit;
		text-decoration : none;
		&:hover{
			text-decoration : underline;
		}
	}
	h4 {
		margin-top  : 0.2cm;
		line-height : 0.4cm;
		& + ul li {
			line-height: 1.2em;
		}
	}
	ul{
		padding-left    : 0;
		list-style-type : none;
		margin-top      : 0;
		a {
			width           : 100%;
			display         : flex;
			flex-flow       : row nowrap;
			justify-content : space-between;
		}
		li + li h3 {
			margin-top  : 0.26cm;
			line-height : 1em
		}
		h3 span:first-child::after {
			border : none;
		}
		span {
			display : contents;
			&:first-child::after {
				content       : "";
				bottom        : 0.08cm;
				flex          : 1;
				margin-left   : 0.08cm;        /* Spacing before dot leaders */
				margin-right  : 0.16cm;
				border-bottom : 0.05cm dotted #000;
				margin-bottom : 0.08cm;
			}
			&:last-child {
				display     : inline-block;
				align-self  : flex-end;
				font-family : "BookInsanityRemake";
				font-size   : 0.34cm;
				font-weight : normal;
				color       : #000;
			}
		}
		ul { /*List indent*/
			margin-left : 1em;
		}
	}
	&.wide{
		.useColumns(0.96, @fillMode: balance);
	}
}
}

//*****************************
// *    DEFINITION LISTS
// *****************************/
.page {
	dl {
		line-height  : 1.25em;
		padding-left : 1em;
		white-space  : pre-line;
		& + * {
			margin-top : 0.28cm;
		}
	}
	dl + * {
  	margin-top : 0.17cm;
  }
	p + dl {
		margin-top: 0.17cm;
	}
  dt {
    display      : inline;
    margin-right : 5px;
		margin-left  : -1em;
  }
  dd {
		display     : inline;
		margin-left : 0px;
		text-indent : 0px;
  }
}

//*****************************
// *         WIDE
// *****************************/
.page .wide{
	margin-bottom       : 0.325cm;
}

.page h1 + *{
	margin-top : 0;
}

//*****************************
// *       RUNE TABLE
// *****************************/
.page {
	.runeTable {
		margin-block: 0.7cm;
		table {
			font-family : inherit;
			tbody tr {
				background: unset;
			}
			th, td {
				width: 1.3cm;
				height: 1.3cm;
				vertical-align: middle;
				text-transform: uppercase;
				outline: 1px solid #000;
				font-weight: normal;
			}
			th{
				font-family: BookInsanityRemake;
				font-size: 0.45cm;
			}
			td {
				font-size: 0.7cm;
			}
		}

		&.frame {
			border: initial;
			border-style: solid;
			border-image-outset: .45cm .35cm .4cm .4cm;
			border-image-repeat: stretch;
			border-image-slice: 170;
			border-image-source: @scriptBorder;
			border-image-width: 1.4cm;
		}
	}
}