/* ---------------------------- FONT IMPORTS -------------------------------------------------- */
@font-face {
    font-family: 'Minion';
    src: url('/assets/fonts/minion3-regular-webfont.woff2') format('woff2'),
         url('/assets/fonts/minion3-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Minion';
    src: url('/assets/fonts/minion3-italic-webfont.woff2') format('woff2'),
         url('/assets/fonts/minion3-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Minion';
    src: url('/assets/fonts/minion3-bold-webfont.woff2') format('woff2'),
         url('/assets/fonts/minion3-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* ---------------------------- OLD FONT IMPORTS -------------------------------------------------- */
/* @font-face {
	font-family: 'EBGaramond';
	src: url('/assets/fonts/EBGaramond-VAR.ttf') format('truetype-variations');
	font-weight: 450;
	font-style: normal;
}

@font-face {
	font-family: 'EBGaramond';
	src: url('/assets/fonts/EBGaramond-Italic-VAR.ttf') format('truetype-variations');
	font-weight: 450;
	font-style: italic;
}

@font-face {
	font-family: 'EBGaramond';
	src: url('/assets/fonts/EBGaramond-Bold.otf') format('opentype');
	font-weight: 700;
}
*/
@font-face {
	font-family: 'Neohellenic';
	src: url('/assets/fonts/Neohellenic-Regular.otf') format('opentype');
	font-weight: 400;
}

/* ---------------------------- HOUSEKEEPING -------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI';
	/* color: var(--dk-text); */
	font-size: max(12px, 1.9vw);
	font-weight: 400;
	font-feature-settings: 'liga';
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--scroll-padding, 20vh);
	scrollbar-gutter: stable;
}

:root {
	--bg-gray: #f1f7f9;
	/* --bg-gray: #f3f3f4; */
	/* --bg-gray: #f9f9f9; */
	/* --bg-gray: #f1efec; */
	/* --highlight: #ec0951; */
	--highlight: #FE4A43;

	--width-prose: 60ch;
	--width-poetry: 55ch;
	--width-longline: 70ch;
}

body {
	background-color: #ffffff;
	/* overflow-x:hidden; */
	display: flex;
	flex-direction: column;
}

/* ---------------------------- HEADER -------------------------------------------------------- */
header {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px 0 10px;
	z-index: 6;
	background: var(--bg-gray);
	filter: brightness(.95);
}

header.danger {background-color: var(--highlight);}
/* ---------------------------- Menu ----------------------------------------------------------- */
nav {
	display: flex;
	align-items: center;
}

nav hgroup {
	margin: auto auto auto 10px;
	font-size: 14px;
	line-height: 14px;
	max-width: calc(100vw - 70px - 48px - 25px);
}

nav hgroup h1, nav hgroup h2 {
	display: inline-block;
	color: var(--side-material);
	font-size: 14px;
	font-feature-settings: "onum", "pnum";
}

nav hgroup h1 {
	font-variant-caps: all-small-caps;
	letter-spacing: .05em;
	display: none;
}

nav button {
	cursor: pointer;
	user-select: none;
	background:none;
	border:none;
	height: 24px;
	display: flex;
	vertical-align: middle;
}

nav button>svg {
	position:relative;
	top:0;
	height:24px;
	filter: drop-shadow(0px 1px 1px #000000a1);
	}

nav button > svg:hover {opacity:.5;}
/* nav label > svg:hover {filter: drop-shadow(0 0 4.5px #00000093);} */

.nav__list {
	/* display: none; */
	/* position: absolute; */
	/* left: 0; */
	margin:auto;
	/* bottom: 36px; */
	width: calc(100vw - 200px);
	/* padding: 35px 0; */
	/* height:calc(100vh - 36px);  */
	/* background: var(--accent);	 */
	filter:drop-shadow(0 5px 5px #00000025);}
/* // plus a little transition??? //
  transition: opacity 0.25s, scale 0.1s, overlay 0.5s allow-discrete,
  opacity: 0;
  scale: 0;
  transform-origin: 50% 50%;
  &:popover-open {
    opacity: 1;
    scale: 1;
  }
}

@starting-style {
  .nav__list:popover-open {
      opacity: 0;
      scale: 0.5;
    }
  }
*/

.nav__list ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(4.5ch,1fr));
	align-self: center;
	justify-items: center;
	justify-content: space-between;
	list-style-type: none;
	background-color: #ffffff;
	border-radius: 3px;
	height: min-content;
	margin: 0 auto;
	padding: 48px;
	column-gap: 10px;
	white-space: nowrap;
	/*overflow-y: scroll;*/
}

nav ul a{
	display: block;
	text-decoration: none;
	font-feature-settings: "tnum";
	color: var(--dk-text);
	font-size: max(14px,.7rem);
	padding: .25rem;
}

nav ul a:hover {
	/* font-weight: 700; */
	color: #ffffff;
	background: var(--highlight);
	border-radius: 3px;
}

#logo {
	width: 19px;
	height: 15px;
	background-image: url(/images/inusum-logo.svg);
	display: inline-flex;
}

#logo:hover{
	opacity:.5;
	/* filter: drop-shadow(0 0 4.5px #00000093); */
}

/* ---------------------------- PARSING --------------------------------------------------------- */
aside {
	position: sticky; top: 0; left: 0;
	width: 100%;
	z-index: 5;
	padding: 15px;
	background: var(--bg-gray);
}

/*
aside::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 28px 7px -20px rgba(0, 0, 0, 0.3);
} */


#info{
	margin: 0;
	position: relative;
	list-style-type: none;
}

#info li, #info li span, #info li .vocab, #info li .vocab2{
	font-size: 12px;
	/* line-height: 1rem; */
	line-height: 1.4;
	text-decoration: none;
}

#citation {
	color: var(--side-material);
	font-variant-numeric: proportional-nums;
	font-weight: bold;
	padding-right: .75rem;
	display: inline-block;
}

#entry {
	font-weight: 700;
}

#info #pos{
	font-feature-settings: 'c2sc', 'smcp','onum';
	margin-bottom: 8px;
}

.vocab i {font-size:inherit;}
.vocab2{font-style: italic;}

em {
	font-style: italic;
	font-size: inherit !important;
	font-weight: inherit !important;
}

b {
	color: var(--highlight);
	font-weight: bold;
	font-size: .75rem;
	font-feature-settings: "pnum";
	font-style: normal;
}
b[id] {font-size: inherit;}

/*
b[id]::before {content: '[';}
b[id]::after {content:']'}
*/

/* ---------------------------- MAIN ---------------------------------------------------------- */
main {
	width: 100%;
	margin: 0 0 33vh;
	padding: 0;
	padding-left: 15px;
}

section {
	width: calc(100vw - 2rem - 15px);
	padding: 0px;
	margin: 0;
}

section:has(h3) {padding-top: 25px;}

h3 {
	font-weight: 600;
  	text-transform: lowercase;
  	font-feature-settings: 'smcp','onum','pnum';
  	margin: 0 -15px 30px -15px;
  	padding: 10px 15px 10px 15px;
  	background: color-mix(in srgb, var(--accent) 12%, white);
  	border-block: 1px solid var(--accent);
}

p {
	line-height: 1.65rem;
	position: relative;
}

p+p {
	margin-top: 1rem;
}

section+section {
	margin-top: 2rem;
}

h3 + .para {margin-top: 0 !important;}

main.poetry p, main.inscription p {
	padding-left:2rem;
	text-indent:-2rem;
}
main.poetry p+p {margin-top:0;}

main.inscription p+p {margin-top:0;}

.couplets p:nth-of-type(even){
	padding-left:3.75ch;
	text-indent:0ch;
}

.invcouplets p:nth-of-type(odd){
	padding-left:3.75ch;
	text-indent:0ch;
}

.aaab p:nth-of-type(4n){
	padding-left:3.75ch;
	text-indent:0ch;
}
.aabc p:nth-of-type(4n+3){
	padding-left:3.75ch;
	text-indent:0ch;
}
.aabc p:nth-of-type(4n+4){
	padding-left:7.5ch;
	text-indent:0ch;
}

main.poetry p.indent {
	padding-left:1.75ch;
	text-indent:0ch;
}

/* use or not? */
p.indent {text-indent:1.75ch;margin-top:0;}

.sc, .num{
	font-variant-caps: all-small-caps;
}

.em{
	font-style: italic;
}

.topic {
	padding: 0 8px;
	/* border: .07rem solid var(--highlight);
	border-radius:3px; */
	line-height: 50%;
	background-color: rgb(77, 215, 253);
	/* font-variant-caps: all-small-caps; */
}

.quopoe {
	margin:.425rem auto;
	max-width:max-content;
	text-indent:0;
	font-style: italic;
}

.quopoe p+p{
	margin-top:0;
}

.quopro {
	max-width:max-content;
	margin:.425rem 2rem;
	/* padding:.425rem 2rem; */
}

.def {
	font-weight:bold;
	font-variant-caps: all-small-caps;
}

.txt {
	/* color: #FE4A43; */
	display:inline;
	background:#d6bdbd;
	font-style:italic;
	width:auto;
}

.strike {text-decoration:line-through;text-decoration-thickness: 1.75px;}

b.attr {
	font-weight: bold;
	color: unset;
	display:block;
	border-bottom:1.5px solid var(--highlight);
	margin-bottom:.25rem;
}

.lac{
	color:var(--highlight);
}

.lacline {
	display: block;
	color:var(--highlight);
	text-align: justify;
}

.lacline-center {
	display: block;
	color:var(--highlight);
	text-align: center;
}

main.poetry .lacline-center {
	max-width: 35ch;
}

.midline { /* Like so: <div class='midline' style='padding-left:12ch'>SPANS</div> */
	display:block;
	padding-top:1.5rem;
}
.midline-nopara { /* Like so: <div class='midline' style='padding-left:12ch'>SPANS</div> */
	display:block;
}

.speaker {padding:0px;}

.salutation {
	/* color:var(--highlight); */
	font-variant-caps:all-small-caps;
	}

.salutation + p {margin-top:0;}

.ref {
	font-size: 70%;
	/* font-variant-position: super; */
	/* color:var(--highlight) */
	color:#808080;
	}

p.center-matter{font-variant-caps:all-small-caps;color:var(--highlight);margin:.425rem auto;text-align:center;text-indent:0;}

[data-cite]:hover{
	/* color: var(--highlight); */
	background-color: var(--hoverback);
	cursor: pointer;
	/* border-radius: 4px; */
}

main section p.para{
	margin-top:.85rem;
}
/* drama line breaks */
main section p.halfp{
	margin-top:.425rem;
}

/* ---------------------------- RESPONSIVE ---------------------------------------------------- */

@media screen and (min-width:800px){
	* {
		font-family: 'Minion';
		font-weight:400;
		/* font-size: clamp(18px, 1.27vw, 30px); */
		font-size: clamp(18px, 1.55vw, 30px);
	}
	/* html{scroll-padding-top: 20vh;} */
	body {
		display: grid;
		grid-template-columns: calc(var(--width-prose) + 110px + 14ch) 1fr;
		grid-template-areas: "main aside";
		align-items: start;
		margin: 0;
		width: 100%;
		background: var(--bg-gray);
	}
	body:has(main.poetry) {
		grid-template-columns: calc(var(--width-poetry) + 110px + 14ch) 1fr;
	}
	body:has(main.comedy),
	body:has(main.inscription) {
		grid-template-columns: calc(var(--width-longline) + 110px + 14ch) 1fr;
	}
	aside {
		grid-area: aside;
		align-self: start;
		position: sticky;
		top: 28vh;
		width: auto;
		margin-inline: 35px;
		padding: 15px;
		background: none;
		min-width: 0;
	}

	#info {
		width: auto;
		max-width: 100%;
		padding: 0;
		margin: 0;
		color: var(--dk-text);
	}
	h3{font-weight: unset;}

	#info li {
		font-size: clamp(16px, 1.3vw, 40px);
		line-height: 1.1;
	}
	#info li span{font-size: clamp(20px, 1.7vw, 40px);}
	#firstline {text-indent: 0; margin-bottom: 0;}
	#citation {
		color: var(--highlight);
		font-variant-numeric: proportional-nums;
		width: auto;
		font-size: .7rem !important;
		padding: 0;
		text-align: left;
		display: block;
	}
	#entry {
		font-size: 1rem;
		line-height: .9rem;
		display: block;
	}
	main {
		grid-area: main;
		padding: 35px 0 0;
		margin-top: 0;
	}
	section {
		width: calc(var(--width-prose) + 70px);
		padding: 35px;
		margin: 0 auto;
		background-color: #ffffff;
		box-shadow: 0px 2px 9px -5px var(--side-material);
	}
	main.poetry section {width: calc(var(--width-poetry) + 70px)}
	main.comedy section {width: calc(var(--width-longline) + 70px)}
	main.inscription section {width: calc(var(--width-longline) + 70px);}
	p {
		line-height: 1.5rem;
		margin:0;
		text-indent:0;
	}
	b.speaker {
		padding: 0 .1rem 0 .5rem;
		font-size:inherit;
		text-transform: uppercase;
		font-variant-caps:all-small-caps;
	}
	b.speaker:not(span + b) {padding-left:0;} /* at beginning of line */

	nav hgroup h1, nav hgroup h2 {
		font-size: 18px;}
	header{
		padding: 5px 20px;
		height: 40px;
		/* background: var(--accent); */
		box-shadow: 0px -4px 8px -3px #0000003e;
	}

	.nav__list {background:none;border:none;}

	p[data-ln]::before, .textnote::before {
		position: absolute;
		left: calc(-55px - 8ch);
		font-size: .75rem;
		top: 2px;
		color: var(--side-material);
		content: attr(data-ln);
		width: 8ch;
		font-feature-settings: "lnum", "tnum" !important;
		text-align: right;
		text-indent: 0;
	}

	p[data-ln]:hover::before {
		font-weight: bold;
		content: '‣  ' attr(data-ln);
	}

	.textnote::before {
		content: "† " attr(data-ln) !important;
	}

	p::after {
/* sure about this right-edge business? */
		position: absolute;
		text-indent: 0;
		right: calc(-55px + -6ch);
/* sure about this right-edge business? */
		content: attr(data-meter);
		color: var(--side-material);
		/* float: right; */
		text-align: left;
		font-size: .65rem;
		font-style: italic;
		width:6ch;
	}

	nav hgroup h1 {display: inline-block;}

	nav hgroup :is(h1, h2) {white-space: nowrap;}

	.nav__list::backdrop{backdrop-filter:blur(4px);background:#0000003b;}

	#logo {
		width: 80px;
		height: 15px;
		background-image: url(/images/inusum.svg);
		filter: drop-shadow(0px 1px 1px #000000a1);
	}

	#scrollwatcher {
		height: 3px;
		position: fixed;
		bottom: 39px;
		z-index: 1000;
		background: var(--bg-gray);
		filter: brightness(.6);
		width: 100%;
		scale: 0 1;
		animation: scrollwatcher linear;
		animation-timeline: scroll(root); /* is root what I want here? */
		transform-origin: left;
	}
	@keyframes scrollwatcher {to {scale: 1 1 }}

}