@charset "UTF-8";

:root {
	--tile-gap: 20;
	--tile-height: 912;
	
	--body-padding: 2.5rem;
	--article-spacing: 15rem;
	--header-margin-bottom: 5rem;
	--content-width: 85%;

	--sans-serif-font: Lato, "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	--serif-font: "dashiell-fine", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	
	--grid-columns: 1;
	--double-column-width: 420px;

	--counter-width: 115px;
	--primary-color: #AF1218;
	--secondary-color: #000000;
	--muted: #6c757d;
	
	--as-logo: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 27" width="85"><path fill="%23FFFFFF" d="M39.19,4.19c-.28,0-.78-.07-1.24-.2-.92-.22-2.2-.41-3.31-.41-4.62,0-7.25,2.46-7.25,5.49,0,1.59.76,2.9,1.76,3.9,1.61-.31,2.96-.52,4.29-.63l-.54-.31c-1.31-.74-3.03-2.07-3.03-3.92,0-1.48.74-3.55,4.23-3.55s4.38,2.07,4.84,3.62c.17.2.74.09.89-.11.02-1.31-.31-3.09-.63-3.88"/><path fill="%23FFFFFF" d="M22.24,8.25c-.5-1.31-1.02-2.68-1.46-3.99-.07-.22-.31-.26-.5-.26-.37.39-.94.92-1.72,1.13.11.48-.11,1.05-.57,2.11l-3.4,8.04c-.07.17-.15.37-.22.52.48-.07.98-.15,1.48-.22l.41-1.02,2.09-5.19c.37-.89.7-1.61.81-1.76h.07c.2.37.5,1.15.76,1.87l1.81,4.86.04.13c.94-.2,1.79-.35,2.59-.52l-2.2-5.71Z"/><path fill="%23FFFFFF" d="M15.38,23.48l-1.11-.09c-.81-.07-.96-.24-.96-.61,0-.33.24-1.13.74-2.48l.74-2c-.54.11-1.09.2-1.61.26-.65,1.46-1.13,2.51-1.5,3.33-.46,1.07-1.2,1.39-2,1.46l-1.09.09c-.2.15-.13.63.07.74.89-.02,2.09-.09,3.18-.09,1.57.02,2.59.02,3.46.09.31-.09.31-.54.09-.7"/><path fill="%23FFFFFF" d="M35.22,13c-3.55,0-6.58.85-13.73,2.27-8.26,1.63-16.88,2.96-17.71.31-.98-3.16,4.75-5.86,10.35-4.86.63.11.76-.11.11-.28-5.69-1.48-13.38,1.61-12.51,5.6.89,4.12,8.04,2.53,19.87.28,8.47-1.59,12.33-1.83,15.38,0,1.9,1.13,3.86,2.92,3.22,5.66-.65,2.75-3.49,3.62-6.38,3.07-4.75-.89-7.25-4.4-8.71-8.41l-2.2.41c1.31,3.64,4.84,8.52,10.83,9.26,6.17.76,9.59-2.64,9.59-6.54-.04-3.9-3.86-6.78-8.1-6.78"/></svg>')
}

html {
	scroll-behavior: smooth;
	scroll-padding: 2rem;
	overflow-x: clip;
}

body, body * {
	margin: 0;
	padding: 0;
	box-shadow: none;
	background: transparent;
	line-height: 1.5;
	color: inherit;
	scroll-behavior: smooth;
}

body {
	padding-inline: var(--body-padding);
	font-size: 1.125rem;
}

.bg-image {
	margin-inline: calc(var(--body-padding) * -1);
}

nav {
	overflow: hidden;
	max-width: 1920px;
	margin-inline: auto;
}

nav ul {
	counter-reset: nav;
	padding: 0;
	
	/* ENSURE WE REMOVE BULLETS IN SAFARI */
	list-style: none;
}
		
.box-shadow {
	background: black;
	box-shadow: 0 0 15px 20px #000;
}
		
body > header .doc-heading {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	max-width: 1920px;
	margin-inline: auto;
	margin-bottom: var(--header-margin-bottom);
	justify-content: center;
	text-align: center;
	align-items: center;
	row-gap: 2rem;

	& h1 {
		font-weight: 800;
		font-size: clamp(2rem, 10vw, 5rem);
		line-height: 1;
		letter-spacing: 1px;
		text-wrap: balance;
		max-width: 745px; 
	}

	& u {
		flex: 1 1;
		margin-inline: 1rem;
		border-bottom: solid;
		width: 75%;
	}

	& #pub-month {
		position: relative;
		width: clamp(75px, 10%, 110px);
		padding: .5rem;
		aspect-ratio: 1 / 1;
		border: solid var(--secondary-color) 3px;
		border-bottom-width: 1.5rem;
		vertical-align: text-bottom;
		text-align: center;
		font-family: var(--sans-serif-font);
		font-weight: 200;
		text-transform: uppercase;
		text-wrap: nowrap;
		color: var(--secondary-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
	}
}
	
footer section, article, .article {
	padding-bottom: calc(var(--article-spacing) / 2);
}

:where(.nav-item, h2)::before {
	content: counter(nav);
	display: grid;
	place-content: center;
	position: absolute;
	top: 1rem;
	left: 1rem;
	color: white;
	font-family: var(--sans-serif-font);
	font-size: 3rem;
	border: solid white 4px;
	border-bottom-width: 40px;
	width: var(--counter-width);
	aspect-ratio: 1 / 1;
	text-align: center;
	scale: .7;
	transform-origin: top left;
	pointer-events: none;
	z-index: 2;
}

.nav-item {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	counter-increment: nav;
	margin-bottom: calc(var(--tile-gap) * 1px);
	margin-top: 0;
}

.nav-item img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	min-height: 280px;
}

.nav-item a {
	position: relative;
	height: 100%;
	color: white;
	background-color: #AF1218;
}

.nav-item .title {
    position: absolute;
    bottom: 15%;
    left: 50%;
    font-size: 1.5rem;
    font-family: var(--sans-serif-font);
    font-weight: 800;
    text-align: center;
    text-wrap: balance;
    color: white;
    translate: -50% 50%;
    transition: bottom 0.3s ease-out,
		opacity 0.3s ease-out;
    z-index: 2;
    width: 100%;
	padding-inline: 1rem;
}

.nav-item .title::after {
	content: '';
	height: 2px;
	width: 100%;
}

.nav-item::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, rgba(0 0 0 / 0.85) 30%, rgba(0 0 0 / 0.25) 50%);
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 0;
}

.nav-item .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(175 18 24 / .95);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.nav-item.archive-item::before {
	content: attr(data-date);
	text-transform: uppercase;
	font-weight: 500;
	text-align: center;
	line-height: 1.2;
	white-space: pre-wrap;
	width: calc(var(--counter-width) * 1.15 + 1.1rem);
	padding: 1rem;
}

.nav-item::before {
	scale: 0.5;
	filter: drop-shadow(0px 0px 5px black);
}

a {
	color: var(--primary-color);
	font-weight: bold;
	position: relative;
}

a:is(:hover, :focus) {
	text-decoration: none;
	color: var(--primary-color);
}

section a:not(.external-link) {
	background: 
		linear-gradient(to right, transparent, transparent),
		linear-gradient(to right, var(--primary-color), var(--primary-color));
	background-size: 100% 2px, 0 2px;
	background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms;
	padding-bottom: 3px;
	
	&:is(:hover, :focus) {
		background-size: 0 2px, 100% 2px;
	}
}

a:is(:hover, :focus) {
	text-decoration: none;
	color: var(--primary-color);
}

/*
section a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: -2px;
	width: 0;
	height: 2px;
	background: var(--primary-color);
	transition: width 0.3s ease;
}
*/

/*
section a:is(:hover, :focus)::after {
	width: calc(100% + 4px);
}
*/

#pub-month .date {
	display: block;
	font-size: clamp(0.9rem, 2vw, 1.125rem);
}

body > header {
	margin-inline: auto;
	margin-top: 5rem;
	margin-bottom: 10rem;
	counter-reset: article;
	font-family: var(--serif-font);
	font-weight: 900;
}

:where(nav, ul) {
	/* Make containers respect height of floated content */
/*	overflow: hidden;*/
	display: flow-root;
}

main {
	margin-inline: auto;
	counter-reset: articles;
}

article, .article {
	counter-increment: articles;
}

article ul, 
.article ul {
	padding-left: 3rem;
	margin-block: 1.5rem;
}

article ul li:first-child,
.article ul li:first-child {
	margin-top: 0;
}

article ul li,
.article ul li {
	margin-bottom: 0.5rem;
}

p {
	margin-bottom: 1rem;
}

strong {
	color: inherit;
}

ol {
	padding-left: 3rem;
	margin-block: 1.5rem;
}

li {
	margin-block: 0;
}

@supports selector(a::details-content) {
	details::details-content {
		overflow: clip;
		max-height: 0;
		padding-top: 0;
		transition:
		max-height 0.6s cubic-bezier(0.74, 0.02, 0.26, 1.02),
		padding-top 0.6s ease-out 0.1s,
		content-visibility 0.6s allow-discrete ease-out;
	}
	
	.article details ul {
		margin: 0;
	}
	
	details[open]::details-content {
		content-visibility: visible;
		max-height: 300rem;
		padding-top: 1.5rem;
	}
	
	.list-long[open]::details-content {
		max-height: 400rem;
	}
}

.newsletter-title {
	font-family: var(--sans-serif-font);
	font-size: 2.25rem;
	font-weight: 600;
	margin-bottom: var(--header-margin-bottom);
	color: var(--primary-color);
	text-align: center;
	max-width: 1920px;
	margin-inline: auto;
}

.content {
	position: relative;
}

.h5 {
	margin-top: 2rem;
	font-weight: 600;
	color: var(--primary-color);
}

.calendar-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	list-style: none;
	padding: 0;
	max-width: 1000px;
	margin-inline: auto;		
	padding-inline: 5rem;
}

.calendar-image {
    width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    height: 250px;
    object-fit: cover;
    object-position: top center;
}

.calendar-location {
	text-wrap: balance;
	display: flex;
	column-gap: .5rem;
	margin-bottom: .5rem;
	font-size: 1.25rem;
	font-weight: 200;
}

.calendar-title {
	font-family: var(--serif-font);
	font-size: 2rem;
	font-weight: 700;
	margin-block: 0.5rem 1rem;
	line-height: normal;
	color: white;
	text-wrap: balance;
}

.calendar-date {
	font-size: 2.75rem;
	font-weight: 300;
	font-family: var(--sans-serif-font);
	text-transform: uppercase;
	margin-top: 0;
	text-align: left;
}

.calendar-date > .date-number {
	font-weight: 600;
}		

.calendar-date > .date-days {
	text-wrap: nowrap;
}

p:has(.display-3) {
	break-after: column;
	margin-top: 0;
}

.display-3 {
	font-size: 2rem;
	font-weight: 500;
}

h3:has(+ .questions-grey) {
    padding-left: 2.5rem;
    color: black;
}

.questions-grey {
	counter-reset: questions;
	list-style: none;
	padding-left: 0;
}

.questions-grey > li {
	padding-left: 2.5rem;
	counter-increment: questions;
	position: relative;
}

.question {
	font-size: 1.4375rem;
	color: var(--primary-color);
	line-height: normal;
	font-weight: 700;
	text-wrap: balance;
	margin-block: 2.5rem 0;	
}

.questions-grey > li::before {
    content: counter(questions, decimal-leading-zero) " ";
    width: 40px;
    font-family: Lato, "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-weight: 800;
    font-size: 1.4375rem;
    color: var(--secondary-color);
    position: absolute;
    top: -5px;
    left: 0;
}

.questions-grey .question + ol {
	list-style-type: circled-lower-alpha;
}

.questions-grey > li:has(h3)::before {
	top: 0;
}

@counter-style alpha-circled {
	system: alphabetic;
	symbols: ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ;
	suffix: " ";
	fallback: lower-alpha;
	speak-as: spell-out;
}

.alpha-round {
	list-style: alpha-circled;
	
	& li {
		margin-block: 1.5rem;
	}
}

[data-answer]::before {
	display: inline-block;
	margin-right: 0.5rem;
}

[data-answer="a"]::before {
	content: "ⓐ";
}

[data-answer="b"]::before {
	content: "ⓑ";
}

[data-answer="c"]::before {
	content: "ⓒ";
}

[data-answer="d"]::before {
	content: "ⓓ";
}

small {
	font-weight: 200;
	margin-top: .25rem;
}

.single-column-offset-round-image,
.single-column-offset-square-image,
.book-club
{
	display: flex;
	flex-direction: column-reverse;
}

.img-portrait figure {
	margin-bottom: var(--header-margin-bottom);
	text-align: center;
	
}

.img-portrait figcaption {
	padding: .5rem;
	line-height: normal;
	color: var(--muted);
	padding: 1rem;
	text-align: center;
}

.img-portrait img {
	border-radius: 50%; 
	object-fit: cover; 
	border: solid white 5px;
	width: 100%;
	border: solid var(--primary-color) 10px;
	aspect-ratio: 1 / 1;
}

.single-column-offset-square-image .img-portrait,
.book-club .img-portrait{
	background-color: transparent;	
}
.single-column-offset-square-image .img-portrait img,
.book-club .img-portrait img{
	border-color: var(--primary-color);
	border-bottom-width: 50px;
	border-radius: 0;
	aspect-ratio: auto;
	max-height: 450px;
}

.book-club .img-portrait figure.book-cover img {
	max-height: initial;
}

.single-column-offset-square-image .img-portrait figure:has(figcaption),
.book-club .img-portrait figure:has(figcaption){
	border-radius: 0;
}

.single-column-offset-square-image .img-portrait figure:has(figcaption) img,
.book-club .img-portrait figure:has(figcaption) img {
	border-radius: 0;
	border-bottom-width: 0;
}

.single-column-offset-square-image .img-portrait figcaption,
.book-club .img-portrait figcaption  {
	background: var(--primary-color);
	border-radius: 0;
	color: white;
	padding-inline: 1rem;
	padding-bottom: 1rem;
	translate: unset;
	min-height: unset;
	margin-inline: auto;
}

h3 {
	font-size: clamp(1.45rem, 2vw, 2rem);
	margin-block: 4rem 2rem;
	color: var(--primary-color);
}

h3:has(small) {
	line-height: 1;
}

h3 small {
	font-size: medium;
}

h3:has(+ ul),
p:has(strong):has(+ ul) {
	margin-bottom: 0;
	
	& + ul {
		margin-top: 0;
	}
	
	& + ul li {
		margin: 0;
	}
}

.content h3:first-child {
    margin-top: 0;
}

h4 {
	margin-block: 1rem;
	display: inline-block;
	width: 90%;
}

h3, h4, .h3, .h4 {
	font-family: var(--serif-font);
	font-weight: 800;
	line-height: normal;
	letter-spacing: 1.2px;
}

hgroup :is(h3, h4, h5, h6, .h3, .h4, .h5, .h6) {
	margin-bottom: 0;
}

p.h5 img {
	width: 25px;
	aspect-ratio: 1 / 1;
}

.single-column-list > div > ul {
	padding: 0;
}

.article ul .list-card {
	isolation: isolate;
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 10rem;
	max-width: 1920px;
	margin-inline: auto;
}
.article ul .list-card:last-child {
	margin-bottom: 0;
}

.list-card > section {
	background: var(--secondary-color);
	color: white;
	padding: 2rem;
	padding-bottom: 4rem;
	width: 100%;
	background: rgb(0 0 0 / .9);
}

.list-card hgroup {
	margin-bottom: 2rem;
	color: white;
	background: black;
	box-shadow: 0 0 20px 20px #000;
}

.list-card h3 {
	border-bottom: solid white 3px;
	padding-bottom: 0.5rem;
	margin: 0;
	font-size: clamp(1.5rem, 2vw, 2.625rem);
	text-wrap: balance;
	color: white;
}

.list-card h4 {
	color: white;
}

ul:has(.list-card) {
	padding: 0;
	margin-inline: calc((var(--body-padding)/2) * -1);
}

.list-card ol ol {
	padding-left: 2rem;
}

.list-card img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	object-position: center;
}

.list-card:nth-of-type(even) section {
	margin-left: auto;
}

.list-card:last-of-type {
	margin-bottom: 0;
}

.list-card .subheading {
	margin-top: .25rem;
}

summary :is(h3, h4) {
	position: relative;
    padding-left: 2rem;
}

.list-card a {
	color: white;
}

.list-card a:after {
	background: white;
}

p:has(.display-3) {
	column-span: all;
	margin-bottom: 2rem;
}

figure {
	position: relative;
	margin-inline: auto;			
	margin-bottom: 2rem;
}

figure img {
	width: 100%;
}

figure figcaption {	
	padding-block: .5rem;
	width: 100%;
	vertical-align: middle;
/*	text-wrap: pretty;*/
	font-size: .85rem;
}

.content .text-content figure {
	text-align: center;
	margin: 2rem auto;
	display: block;
	color: var(--muted);
	width: 100%;
}

.content .text-content .text-danger {
	color: var(--primary-color) !important;
}

/***************** BEGIN OLD 2024 CALENDAR STYLES ****************/

table {
	width: 100%;
}

.calendar-tile {
	display: grid;
	gap: calc(var(--tile-gap) * 1px);
	place-content: center;
	grid-template-columns: repeat(var(--grid-columns), minmax(250px, 500px));
}

tr {
	display: flex;
	flex-direction: column;
	background-color: var(--primary-color);
	color: white;
	padding: 1.5rem;
	position: relative;
	--tile-color-primary: #ad132a40;
	--tile-color-secondary: #d9203940;
	--pattern-x-position: 50%;
	--pattern-y-position: 50%;
}

tr.pattern-1 {
	/* Sunburst */
	background-image: 
	conic-gradient(from 0deg at var(--pattern-x-position) var(--pattern-y-position), var(--tile-color-primary) 0deg, var(--tile-color-primary) 45deg, var(--tile-color-secondary) 45deg, var(--tile-color-secondary) 90deg, var(--tile-color-primary) 90deg, var(--tile-color-primary) 135deg, var(--tile-color-secondary) 135deg, var(--tile-color-secondary) 180deg, var(--tile-color-primary) 180deg, var(--tile-color-primary) 225deg, var(--tile-color-secondary) 225deg, var(--tile-color-secondary) 270deg, var(--tile-color-primary) 270deg, var(--tile-color-primary) 315deg, var(--tile-color-secondary) 0deg);
}

tr.pattern-2 {
	/* Triangle */
	--pattern-y-position: 50%;
	
	background-image: 
	conic-gradient(from 0deg at var(--pattern-x-position) var(--pattern-y-position), transparent 0deg, transparent 45deg, transparent 45deg, transparent 90deg, var(--tile-color-primary) 90deg, var(--tile-color-primary) 135deg, var(--tile-color-secondary) 135deg, var(--tile-color-secondary) 180deg, var(--tile-color-primary) 180deg, var(--tile-color-primary) 225deg, var(--tile-color-secondary) 225deg, var(--tile-color-secondary) 270deg, var(--tile-color-primary) 270deg, transparent 315deg, transparent 0deg)
}

tr.pattern-3 {
	/* Two-tone */
	background-image: 
	linear-gradient(37deg, var(--tile-color-primary) 50%, var(--tile-color-secondary) 50%);
}

tr.pattern-4 {
	/* Half circle */
	--tile-circle-color: #AF1218;
	--tile-circle-angle: 37deg;
	
	background-image: 
	radial-gradient(circle at 50% var(--pattern-y-position), var(--tile-circle-color) 20%, transparent 20%),
	linear-gradient(var(--tile-circle-angle), var(--tile-color-secondary) 50%, var(--tile-color-primary) 50%);
}

tr:hover .external-link {
	scale: 1;
}

/*
tr.highlighted {
	background-color: var(--secondary-color);
	--tile-color-primary: #00000070;
	--tile-color-secondary: #2D282870;
	--tile-circle-color: #000000;
	--tile-circle-angle: 15deg;
} 
*/

tr.highlighted img {				
	border-color: var(--primary-color);
}

tr.highlighted .external-link img {
	filter: brightness(0);
}

.external-link {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 0;
	scale: 0.75;
	transform-origin: bottom right;
	background-image: linear-gradient(-45deg, #FFFFFF 50%, transparent 50%);
	width: 80px;
	aspect-ratio: 1 / 1;
	transition: scale 0.3s ease;
	display: grid;
	place-content: end;
}

/******** END OLD 2024 CALENDAR STYLE **************/

.calendar-tile {
	display: grid;
	gap: calc(var(--tile-gap) * 1px);
	place-content: center;
	grid-template-columns: repeat(var(--grid-columns), minmax(250px, 500px));
}

dl[class*="pattern"] {
	display: flex;
	flex-direction: column;
	background-color: var(--primary-color);
	color: white;
	padding: 1.5rem;
	position: relative;
	--tile-color-primary: #ad132a40;
	--tile-color-secondary: #d9203940;
	--pattern-x-position: 50%;
	--pattern-y-position: 50%;
	
	&.pattern-1 {
		/* Sunburst */
		background-image: 
		conic-gradient(from 0deg at var(--pattern-x-position) var(--pattern-y-position), var(--tile-color-primary) 0deg, var(--tile-color-primary) 45deg, var(--tile-color-secondary) 45deg, var(--tile-color-secondary) 90deg, var(--tile-color-primary) 90deg, var(--tile-color-primary) 135deg, var(--tile-color-secondary) 135deg, var(--tile-color-secondary) 180deg, var(--tile-color-primary) 180deg, var(--tile-color-primary) 225deg, var(--tile-color-secondary) 225deg, var(--tile-color-secondary) 270deg, var(--tile-color-primary) 270deg, var(--tile-color-primary) 315deg, var(--tile-color-secondary) 0deg);
	}

	&.pattern-2 {
		/* Triangle */
		--pattern-y-position: 50%;

		background-image: 
		conic-gradient(from 0deg at var(--pattern-x-position) var(--pattern-y-position), transparent 0deg, transparent 45deg, transparent 45deg, transparent 90deg, var(--tile-color-primary) 90deg, var(--tile-color-primary) 135deg, var(--tile-color-secondary) 135deg, var(--tile-color-secondary) 180deg, var(--tile-color-primary) 180deg, var(--tile-color-primary) 225deg, var(--tile-color-secondary) 225deg, var(--tile-color-secondary) 270deg, var(--tile-color-primary) 270deg, transparent 315deg, transparent 0deg)
	}

	&.pattern-3 {
		/* Two-tone */
		background-image: 
		linear-gradient(37deg, var(--tile-color-primary) 50%, var(--tile-color-secondary) 50%);
	}

	&.pattern-4 {
		/* Half circle */
		--tile-circle-color: #AF1218;
		--tile-circle-angle: 37deg;

		background-image: 
		radial-gradient(circle at 50% var(--pattern-y-position), var(--tile-circle-color) 20%, transparent 20%),
		linear-gradient(var(--tile-circle-angle), var(--tile-color-secondary) 50%, var(--tile-color-primary) 50%);
	}
	
	&:hover .external-link {
		scale: 1;
	}
	
	& dd:empty {
		display: none;
	}
}

.highlighted img {
	border-color: var(--primary-color);
}

.highlighted .external-link img {
	filter: brightness(0);
}

td:empty {
	display: none;
}

details {
	position: relative;
	margin-top: 2rem;
}

details + section {
	font-size: .9rem;
	box-shadow: unset;
	max-height: 0;
	opacity: 0;
	transition: 
		max-height 0.3s ease,
		opacity 0.3s ease,
		margin-bottom 0.3s ease;
	margin-bottom: 0;
	padding-top: 1rem;
	overflow: hidden;
}

details[open] + section {
	opacity: 1;
	margin-bottom: 2rem;
	max-height: 200vh;
}

details + section :where(ul, ol) {
	margin-block: 0;
	overflow: hidden;
	transition: margin-bottom 0.3s ease-out;
	column-count: 2;
	column-width: 250px;
	column-gap: 2rem;
	orphans: 5;
	padding-left: 3rem;
}

details + section :where(ul, ol) :is(ol, ul) {
	column-count: unset;
}

details summary :is(h3, h4, h5, h6)::before {
	content: ' + ';
	rotate: 0deg;
	width: 25px;
	display: inline-grid;
	place-content: center;
	position: absolute;
	left: 0;
	top: 0;
}

details[open] summary :is(h3, h4, h5, h6)::before {
	content: ' \2013 ';
}

details ul li small {
	display: block;
	text-wrap: pretty;
}

.collapsible :is(h3, h4, h5, h6) {
	color: var(--primary-color);
	font-size: 1.2rem;
}

.collapsible ul {
	column-count: 3;
	column-width: 215px;
}

.collapsible li {
	font-size: 0.7rem;
	margin-bottom: 1.5rem;
}

.collapsible li strong {
	font-size: 1rem;
}

.list-card details summary :is(h3, h4, h5, h6)::before {
	filter: brightness(100);
	font-family: var(--sans-serif-font);
	top: -3px;
}

.list-card details summary :is(h3, h4, h5, h6)::after {
	border-color: white;
}

details summary::marker {
	content: none;
	
	/* Hide marker on Safari 18.4+ */
	font-size: 0;
}

/* Hide marker in Safari pre-18.4 */
summary::-webkit-details-marker {
	display: none;
}

summary :is(h1,h2,h3,h4,h5,h6) {
	margin: 0;
}

.double-column details h3 {
	font-family: var(--sans-serif-font);
	padding-left: 1.5rem;
	position: relative;
}

.sub-list {	
	column-count: 2;
	column-width: 200px;
	column-gap: 2rem;
}

.sub-list li {
	break-inside: avoid;
}

.bg-image {
	background-image:
		linear-gradient(to bottom, rgba(0 0 0 / .35) -20%, rgba(0 0 0 / .85) 35%),
        var(--bg-image);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	background-color: var(--display-color, var(--primary-color));
	color: white;
	padding: 2rem;
	margin-bottom: var(--header-margin-bottom);
}

.bg-image hgroup {
	min-height: min-content;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 0;
}

.bg-image .intro {
	padding-top: 2rem;
}

.bg-image .intro a {
	color: white;
}

.bg-image .intro a::after {
	background-color: white;
}

.bg-image :is(h2, h3, p) {
	color: inherit;
}

.bg-image ::selection {
	background: white;
	color: black;
}

.bg-image .subheading::selection {
	background: black;
	color: white;
}

.bg-image h2 {
	border-bottom: solid white 3px;
	font-family: var(--serif-font);
	font-weight: 800;
	font-size: 3.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: normal;
}

.bg-image .article-title {
	max-width: 820px;
	text-wrap: balance;
}

.bg-image h2::before {
	content: counter(articles);
	position: static;
	margin-bottom: 2rem;
	transform-origin: bottom left;
	vertical-align: bottom;
	scale: 1;
}

.bg-image .subheading {
	text-align: center;
	background: white;
	color: var(--secondary-color);
	min-height: 40px;
	margin-inline: auto;
	width: 75%;
	text-wrap: balance;
	font-size: 0.85rem;
}

.as-logo::before {
	content: var(--as-logo) !important;
}

.inverted {
	filter: invert(1); 
}

.icon {
	min-width: 25px;
	padding-top: 5px;
}

.list-style-none {
	list-style-type: none;
}

.text-black {
	color: black !important;
}

.event-details {
	display: block;
    border-left: solid 1rem var(--primary-color);
    padding-left: 0.5rem;
	margin-bottom: 1.5rem;
}

#backtotop {
	position: fixed;
	bottom: 50px;
	right: 50px;
	height: 50px;
	aspect-ratio: 1 / 1;
	opacity: 0.5;
	scale: 1;
	transition: 
		opacity 0.3s ease,
		scale 0.3s ease;
}

#backtotop:hover {
	opacity: 1;
	scale: 1.1;
}

::selection {
	background: black;
	color: white;
}

blockquote {
    font-size: 2.125rem;
    text-align: center;
    margin-inline: auto;
    margin-block: 4rem;
    color: var(--primary-color);
    font-weight: 600;
    position: relative;
    isolation: isolate;
    line-height: normal;
	width: 100%;
}

blockquote::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.03 3.24"><path fill="%2300000040" d="M1.89.4c-.71.08-1.27.54-1.27,1.26,0,.08.06.08.08.04.11-.11.3-.13.46-.13.35,0,.66.25.66.74,0,.37-.35.73-.72.73-.59,0-.86-.53-.86-1.16C.23.75,1.14.29,1.83.25l.06.14ZM3.78.4c-.71.08-1.26.54-1.26,1.26,0,.08.05.08.07.04.11-.11.3-.13.46-.13.35,0,.67.25.66.74,0,.37-.34.73-.71.73-.59,0-.88-.53-.88-1.16,0-1.13.91-1.58,1.61-1.62l.05.14Z"/></svg>');
    position: absolute;
    top: -40px;
    left: -40px;
    width: 35%;
    z-index: -1;
    scale: .5;
    transform-origin: top left;
}

hr {
    margin-block: 2rem;
    border-color: black;
    border-width: 2px;
}

.profile {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
}

.profile h3 {
	margin-top: 2rem;
}

.profile .img-profile {
    border: solid var(--primary-color) 10px;
    border-radius: 50%;
    margin-block: 4rem 2rem;
    width: min(100%, 400px);
	height: min(100%, 400px);
    margin-inline: auto;
	position: sticky;
	top: var(--header-margin-bottom);
}

.profile .img-portrait figure {
	margin-inline: auto;
	text-align: center;
}

.profile:first-of-type .img-profile {
	margin-top: 0;
}

.img-placeholder {
	object-position: center !important;
}

.text-content:has(section.d-flex) {
	container: flex-container / inline-size;
}

#answer-key {
	display: grid;
	grid-template-rows: 65px 0fr;
	transition: grid-template-rows 0.3s ease-out;
	
	&:has(details[open]) {
		grid-template-rows: 65px 1fr;
	}
}

#answer-key-btn {
	justify-self: start;
}

#answer-key-answers {
	overflow: hidden;
}


.rate:disabled {
	pointer-events: none;
}
.rate :is(label:hover ~ label, input:checked ~ label :is(.right-half, .left-half)),
input:focus + label {
	fill: #af1218;
}

.rater {
	--hover-fill: 0;
	--fill: #AF1218;
	--fillbg: gray;
	--star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M48.856,22.73c0.983-0.958,1.33-2.364,0.906-3.671c-0.425-1.307-1.532-2.24-2.892-2.438l-12.092-1.757c-0.515-0.075-0.96-0.398-1.19-0.865L28.182,3.043c-0.607-1.231-1.839-1.996-3.212-1.996c-1.372,0-2.604,0.765-3.211,1.996L16.352,14c-0.23,0.467-0.676,0.79-1.191,0.865L3.069,16.622c-1.359,0.197-2.467,1.131-2.892,2.438c-0.424,1.307-0.077,2.713,0.906,3.671l8.749,8.528c0.373,0.364,0.544,0.888,0.456,1.4L8.224,44.701c-0.183,1.06,0.095,2.091,0.781,2.904c1.066,1.267,2.927,1.653,4.415,0.871l10.814-5.686c0.452-0.237,1.021-0.235,1.472,0l10.815,5.686c0.526,0.277,1.087,0.417,1.666,0.417c1.057,0,2.059-0.47,2.748-1.288c0.687-0.813,0.964-1.846,0.781-2.904l-2.065-12.042c-0.088-0.513,0.083-1.036,0.456-1.4L48.856,22.73z"/></svg>');
	--stars: 5;
	--starsize: 2rem;
	--symbol: var(--star);
	--value: 1;
	--w: calc(var(--stars) * var(--starsize));
	--x: calc(100% * (var(--value) / var(--stars)));
	block-size: var(--starsize);
	inline-size: var(--w);
	position: relative;
	touch-action: none;
	appearance: none;
	display: block;

	/* CHROME/SAFARI/OPERA */
	&::-webkit-slider-runnable-track {
		--hover-fill: inherit;
		block-size: 100%;
		mask: repeat left center/var(--starsize) var(--symbol);
		background-color: var(--fillbg);
		background-image: linear-gradient(to right, red, red);
		background-position: 0;
		background-repeat: no-repeat;
		background-size: var(--hover-fill);
	}
	&::-webkit-slider-thumb {
		height: var(--starsize);
		width: 1px;
		background-color: transparent;
		box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
		appearance: none;
		margin-left: 1px;
	}

	/* FIREFOX */
	&::-moz-range-track {
		--hover-fill: inherit;
		block-size: 100%;
		mask: repeat left center/var(--starsize) var(--symbol);
		background-color: var(--fillbg);
		background-image: linear-gradient(to right, red, red);
		background-position: 0;
		background-repeat: no-repeat;
		background-size: var(--hover-fill);
	}
	&::-moz-range-thumb {
		opacity: 0;
	}
	&::-moz-range-progress {
		background: var(--fill);
		block-size: 100%;
		mask: repeat left center/var(--starsize) var(--star);
	}
}

data, output {
	display: grid;
	place-content: center;
	width: 35px;
	height: 30px;
	float: right;
	font-size: 0.75rem;
	font-weight: 700;
}
:where(data, output) small {
	font-size: clamp(12px, 1.75vmin, 14px);
}

.left-half,
.right-half {
	height: 30px;
	width: 14px;
	pointer-events: none;
	cursor: pointer;
}

.right-half {
	transform: scaleX(-1);
}

.rate label {
	/* display: inline-block; */
	position: relative;
	float: right;
	fill: gray;
}

.rate :is(label:hover ~ label, input:checked ~ label :is(.right-half, .left-half)),
input:focus + label {
	fill: #af1218;
}

@container flex-container (width < 750px) {
	section.d-flex {
		flex-direction: column;
	}
}

@container flex-container (width >= 750px) {
	.flex-50 {
		flex-basis: 45%;
	}
	
	section.d-flex {
		flex-direction: row;
		justify-content: space-between;
		align-items: start;
		column-gap: 2rem;
		
	}
	
	section.d-flex .flex-50 figure {
		margin: 0 !important;
	}
}

.nav-item img {
	height: -webkit-fill-available;
/*	height: -moz-available;*/
}

.nav-alt {
	font-family: var(--sans-serif-font);
	position: relative;
}

.nav-alt::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	width: 0;
	border-bottom: solid var(--primary-color) 2px;
	transition: 
		opacity 0.3s ease-out,
		width 0.3s ease-out
}

.nav-alt:hover::before {
	width: 100%;
	opacity: 1;
}

.text-muted {
	color: #52595f !important;
}

@property --item-min {
	syntax: "<length> | min-content";
	inherits: false;
	initial-value: min-content
}

@property --item-max {
	syntax: "<length> | max-content";
	inherits: false;
	initial-value: max-content;
}

.d-grid {
	display: grid;
	--item-min: initial;
	--item-max: initial;
	grid-template-columns: repeat(auto-fit, minmax(var(--item-min), var(--item-max)));
}

.d-columns {
	column-count: var(--cols, 5);
	column-width: var(--col-width, 140px);
	gap: 2rem;
	
	& > div {
		break-inside: avoid;
	}
}

.article ul.d-columns li {
	margin-bottom: 1.5rem;
	break-inside: avoid;
}

.book-list {
	container: book-list / inline-size;
}

.book-list-content {
	display: flex;
	gap: 2rem;
	border-bottom: solid rgb(127 127 127 / 0.5);
	padding-block: 3rem;
}

.book-list-content:last-child {
	border-bottom: none;
}

.book-list-content details summary {
	color: var(--primary-color);
	font-weight: bold;
}

.book-list-content details summary::before {
	content: " + ";
	width: 25px;
	display: inline-block;
}

.book-list-content details[open] summary::before {
	content: " \2013 ";
}

.book-list-content details::details-content {
	opacity: 0;
	translate: 0 -10%;
	content-visibility: hidden;
	transition: all 0.6s ease allow-discrete;
}

.book-list-content details[open]::details-content {
	opacity: 1;
	translate: 0 0;
	content-visibility: visible;
}

.book-list-content p.h4 {
	margin-bottom: 0;
	text-wrap: balance;
	text-wrap: pretty;
}

@container book-list (width < 624px) {
	.book-list-content {
		flex-direction: column;
	}
	img {
		margin-inline: auto;
	}
}

@container book-list (width >= 624px) {
	.book-list-content {
		flex-direction: row;
	}
}

@media screen and (min-width: 768px) {
	:root {
		--grid-columns: 2;
		--round-img-x-offset: -20%;
		--square-img-x-offset: -15%;
		--tile-height: 500;
	}

	.nav-item {
		width: calc(50% - (var(--tile-gap) * 1px));
		margin-inline: calc((var(--tile-gap) * 1px) / 2);
		float: left;
		height: calc(var(--tile-height) * 1px);
	}

	.calendar-list {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.calendar-tile dl {
		grid-column: span 1;
/*		min-height: 500px;*/
	}
		
	tr {
		grid-column: span 1;
		min-height: 500px;
	}
	
	.list-card > section {
		padding: 2rem 4rem 4rem;
	}
	
	figure {
		display: block;
	}
	
	.img-portrait figure{
		max-width: 450px;
		
	}
	
	.content {
		margin-inline: auto;
		column-gap: 5rem;
	}
		
	summary :is(h1,h2,h3,h4,h5,h6)::after {
		content: '';
		width: -webkit-fill-available;
		width: -moz-available;
		height: 100%;
		position: absolute;
		bottom: 0%;
		border-bottom: solid #AF1218 2px;
		margin-left: 1rem;
		translate: 0% -35%;
	}
	
	blockquote {	
		width: 100%;
		
		& cite {
			display: inline-block;
			margin-inline: auto;
			width: 90%;
		}
	}
}

@media screen and (min-width: 992px) {
	:root {
		--grid-columns: 3;
		--content-width: 95%;
		--round-img-x-offset: -25%;
		--square-img-x-offset: -25%;
	}
	
	
	body > header .doc-heading {
		flex-direction: row;
		align-items: flex-end;

		& h1 {
			text-align: left;
			margin-bottom: -.75rem;				
		}
	}
	
	.newsletter-title {
		text-align: left;
	}
	
	.bg-image {
		background-image: 
			linear-gradient(-45deg, rgba(0 0 0 / .35) 15%, rgba(0 0 0 / 0.95) 55%),
			var(--bg-image);
	}
	
/*
	.list-card hgroup + p {
    	max-width: 500px;
	}	
*/
	
	.content {
		--scroll-y-offset: 0;
		flex-direction: row;
	}
	
	.img-portrait figure {
		position: sticky;
		top: var(--header-margin-bottom);
		transform: translateY(calc(var(--scroll-y-offset) * 1px));
		filter: drop-shadow(0px clamp(-5px, calc(var(--scroll-y-offset) * 1px), 5px) 10px rgba(0 0 0 / 0.5));
		transition:
			transform 0.3s cubic-bezier(.4,.31,.35,1.47);
		margin-bottom: initial;
	}
	
	.text-content,
	.img-portrait 
	{
		flex-basis: 50%;
	}
	
	.bg-image {
		padding: 6.25rem var(--body-padding);
	}

	.bg-image:has(.intro) {
		padding: 3rem var(--body-padding);
	}
	
	.bg-image h2 {
		flex-direction: row;
		text-align: left;
		display: inline-flex;
		align-items: end;
		border: 0;
		position: relative;
	}

	.bg-image h2::before {
		margin-bottom: 0;
		margin-right: 2rem;
		border-bottom-width: 0;
		align-self: end;
	}
	
	.bg-image h2::after {
		content: '';
		left: 0;
		bottom: 0;
		position: absolute;
		height: 2px;
		background: white;
		width: 75%;
	}

	.bg-image .subheading, .intro p {
		margin-left: 0;
		width: 75%;
		text-align: left;
	}

	.bg-image .subheading {
		padding-left: calc(var(--counter-width) + 2rem);
		display: inline-flex;
		align-items: center;
	}
	
	.content > .img-portrait {
		margin-block: calc(var(--header-margin-bottom) * -1) calc(var(--article-spacing) * -1);
		margin-right: calc(var(--body-padding) * -1);
		padding-block: var(--header-margin-bottom) var(--article-spacing);
	}
	
	.img-portrait figure {
		width: min(100%, 675px);
		translate: calc(var(--body-padding) * -1);
	}

	.img-portrait figure:has(figcaption) {
		background: transparent;
	}

	.img-portrait figcaption {
		border-radius: 0;
		background: transparent;
		color: initial;
		text-align: center;
	}
	
	.profile {
		padding-bottom: 5rem;
	}
	
	.profile .img-portrait {
		position: sticky;
		top: var(--header-margin-bottom);
		text-align: center;
	}
	
	.profile .img-portrait figure {
		translate: unset;
	}
	
	.double-column {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--double-column-width), 1fr));
		justify-content: space-between;
		column-gap: 1rem;
	}
	
	.profile {
		flex-direction: row;
		column-gap: 2rem;
	}
	
	.profile .img-profile {
		margin-top: 0;
		opacity: 0;
		translate: 100% 0;
		transition:
			filter 0.3s ease-in,
			translate 0.3s ease-in,
			opacity 0.3s ease-in;
	}
	
	.profile.observed .img-profile {
		opacity: 1;
		translate: 0 0;
	}	
		
	tr.highlighted {
		overflow: hidden;
		grid-column: span 2;
	}
	
/*
	tr.highlighted hgroup {
		width: 50%;
	}
*/
	
	tr.highlighted .calendar-image {
		position: absolute;
	}
	
	tr.highlighted.img-top .calendar-image {
		top: 24px;
	}
	
	tr.highlighted.img-top {
		padding-top: 250px;
	}
	
	tr.highlighted:is(.img-right, .img-left) .calendar-image {
		height: 100%;
		width: 54.5%;
	}
	
	tr.highlighted:is(.img-right, .img-left) :is(td, th) {
		width: 45.5%;
	}
	
	tr.highlighted.img-right .calendar-image {
		right: 0;
	}
	
	tr.highlighted.img-left .calendar-image {
		left: 0;
	}
	
	tr.highlighted.img-left {
		padding-left: 54.5%;
	}
	
	tr.cal-coast {
		--tile-color-primary: #00808080;
		--tile-color-secondary: #00a39033;
		--tile-circle-color: #008080;
		--external-link-color: #008080;
		background-color: #008080;
	}
	
	tr.viejas-arena,
	tr.highlighted {
		--tile-color-primary: #000000;
		--tile-color-secondary: #2d282880;
		--tile-circle-color: #000000;
		--external-link-color: #000000;
		background-color: #000000;
	}
	
	.break-before-column {
		break-before: column;
	}
}

@media screen and (min-width: 1200px) {
	:root {
		--body-padding: 5rem;
		--double-column-width: 500px;
		--counter-width: 170px;
		--content-width: 100%;
		--tile-height: 912;
	}
	
	.content .text-content figure {
		max-width: 300px;
	}
	
	footer section, article, .article {
		padding-bottom: var(--article-spacing);
	}

	.nav-item.large {
		height: calc((var(--tile-height)) * 1px);
	}


	.nav-item.small {
		height: calc(((var(--tile-height) - var(--tile-gap)) / 2) * 1px)
	}

	.nav-item.third {
		width: calc((100% / 3) - (var(--tile-gap) * 1px));
	}
	
	.nav-item.quarter {
		width: calc((100% / 4) - (var(--tile-gap) * 1px));		
	}

	.nav-item.article-link:nth-child(8n) {
		float: right;
	}
	
	.bg-image .subheading, .intro p {
		width: 50%;
	}	
			
	.list-card img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		object-fit: cover;
		object-position: center;
		z-index: -1;				
	}

	.list-card > section {
		background: rgba(0 0 0 / .85);
		width: 50%;
		padding: 4rem 3rem;
	}

	.list-card section > :where(ol, ul) {
		column-count: 2;
		column-gap: 4rem;
		margin: 0;
	}
	
	.content.single-column-offset-round-image {
		column-gap: 22%;
	}
	
	.img-portrait {		
		background-color: transparent;
		background-image: var(--bg-image), linear-gradient(#AF1218, #AF1218);
	}
	
	.img-portrait figcaption {
		background: var(--primary-color);
		color: white;
		text-align: left;
		translate: 50% 20%;
		min-height: 100px;
	}
	
	.single-column-offset-round-image .img-portrait figcaption {
		background: transparent;
		color: white;
		padding: 0 0 0 1rem;
	}
	
	.profile {
		display: flex;
		gap: 5rem;
		justify-content: space-around;
		align-items: flex-start;
	}
	
	.double-column {
		grid-template-columns: repeat(2, minmax(var(--double-column-width), 1fr));
	}
	
	.nav-item .title {
		position: absolute;
		bottom: 40%;
		left: 50%;
		font-size: 2rem;
		font-family: var(--sans-serif-font);
		font-weight: 800;
		text-align: center;
		text-wrap: balance;
		color: white;
		width: 90%;
		translate: -50% 50%;
		opacity: 0;
		transition: 
			bottom 0.3s ease-out,
			opacity 0.3s ease-out;
		z-index: 2;
	}
	
	.nav-item:where(:hover, :focus, :focus-within) .title {
		bottom: 50%;
		opacity: 1;
	}
	
	.nav-item:where(:hover, :focus, :focus-within) .overlay {
		opacity: 1;
	}

	.nav-item::after {
		content: '';
		width: 100%;
		height: 100%;
		background-image: linear-gradient(113deg, rgba(0 0 0 / .85) 10%, transparent 80%);
		position: absolute;
		left: 0;
		top: 0;
		pointer-events: none;
		z-index: 0;
	}
	
	.content > .img-portrait {
		padding-right: var(--body-padding);
	}
	
	.single-column-offset-round-image .img-portrait {
		transform-origin: right center;		
		background-color: var(--display-color, var(--primary-color));
		background-image: var(--bg-image);
		background-position: center;
		background-size: cover;
	}
	
	.img-portrait figure:not(.book-cover) {		
		max-width: unset;
	}
	
	.book-club .img-portrait figure:is(.book-cover) img {
		max-height: unset;
	}
	
	.book-club .img-portrait .book-cover {
		max-width: fit-content;
		max-height: unset;
		scale: 0.75;
		transform-origin: top;
	}

	.single-column-offset-round-image .img-portrait img {
		border-color: white;
	}

	.single-column-offset-round-image .img-portrait figure {
		translate: -50%;
	}
	
	.single-column-offset-square-image .img-portrait figure,
	.book-club .img-portrait figure{
		translate: 0;
	}

}

@media screen and (min-width: 1400px) {
	:root {
		--grid-columns: 4;
	}
}

@media screen and (prefers-reduced-motion) {
	html {
		scroll-behavior: auto;
	}
	
	:is(.single-column-offset-round-image, .single-column-offset-square-image, .book-club) .img-portrait figure {
		transition: unset;
		filter: drop-shadow(0 0 5px rgb(0 0 0 / 0.5));
	}
	
	details + section :where(ul, ol), 
	details summary :is(h3, h4, h5, h6)::before,
	.nav-item .title, .nav-item .overlay, 
	details + section, .external-link, #backtotop
	{
		transition: unset;
	}
	
	.img-portrait figure {
		transition: opacity 0.3s ease 0.3s !important;
		transform: unset !important;
	}
	
	.profile .img-profile {
		translate: 0 0;
	}
}