/* ==========================================================================
   1. GLOBAL ARCHITECTURE & SYSTEM VARIABLES
   ========================================================================== */

:root {

	interpolate-size: allow-keywords;
	
	/* Cohesive Luxury Palette */
	--bg-page: #fffaf2;
	/*--bg-page-accent: #e6ded3;
	--bg-page-accent-light: #eee7db;*/
	--bg-dialog: #fffdf7;
	--bg-hero: #433c39;
	--text-light: #F5F4F0;           
	--text-dark: #1a1a19;            
	--text-dark-faded: #1a1a1944;  
	--text-muted: #666666;
	--accent: #ece2d9;
	--accent-gold: #c5a880;
	--accent-sample: #90422D;
	--accent-color: #603050;
	--accent-light: #f3e9e1;
	--accent-dark: #7C5F4C;
	
	--popover-header: #f5efe5;
	--popover-header: #f8eee2;
	--go-color: #8A9A5B;
	
	--link-light: #F5F4F0;
	--link-light-soft: #F5F4F066;
	--link-underline: #8f5a5a99;
	--link-mid: #FFDCF5;
	--link-dark: #a57900;
	
	--link-bg: #FCF2E9;
	--link-light-bg: var( --bg-color-hover );
	--link-bg-on: #F3E9E0;
	--link-light-bg-on: var( --bg-color-medium );
	--grid-lines: #666666;
	--dialog-border: #CCC;
	--solution-bg: #e6ded3;
	--tile-bg: #fef6eb;
	
	--heading-dark: #916f65;
	--button-dark: #606e70;
	
	--thin-line: 1px solid rgba( 0, 0, 0, 0.3 );
	--thinner-line: 1px solid rgba( 0, 0, 0, 0.1 );
  
	/* Font Stacks */
	--font-display: "Fraunces", "Times New Roman", "Georgia", serif;
	--font-serif: "PT Serif", "Times New Roman", "Georgia", serif;
	--font-body: "PT Serif", "Times New Roman", "Georgia", serif;
	--font-sans: "Poppins", "Arial", sans-serif;
	--cover-sans: "Poppins", "Century Gothic", "Trebuchet MS", sans-serif;
	--font-script: "Poppins", cursive;
	--font-block: "Poppins", sans-serif;
	
	/* Global Layout Constants */
	--scroll-padding-top: 80px;
	--game-width: 560px;
	--page-width: 1024px;
	--cover-width: 768px;
	--toc-width: 560px;
	--toc-width-narrow: 420px;
	--headline-width: 360px;
	--headline-width-narrow: 280px;
	--hero-width: 1024px;
	--hero-height: 720px;
	
	--muted-putty: #CFBEB2;
	--cool-teal-blue: #6881a7;
	--olive-green: #99ae82;
	--dark-muted-putty: #5F4E44;
	--light-muted-putty: #E6DDD7; 
	--medium-muted-putty: #9F8E82; 
	--box-background-color: #F6F3EF; 
	--box-accent-color: #8C6F5C;
	--footnote-bg: #c5a880;
	--footnote-bg-on: #a58860;
	
	/* Define your brand's focus theme in one central place */
	--focus-color: #c372b3;
	--focus-color: var( --link-dark );
	--focus-color-light: #FFCCEE;
	--focus-width: 2px;
	--focus-offset: 2px;
	
	/*--bg-color-darker: #e4dbd4;
	--bg-base-faded: #efe8e044;
	--bg-color-medium: #857768;
	--bg-color-medium-faded: #85776844;
	--bg-color-light: #958573;
	--bg-color-lighter: #c4bbb4;
	--bg-color-hover: #e4ddd4;
	--bg-color-hover-faded: #e4ddd444;
	
	--bg-color-light: #ecded1;
	--bg-base: #f3e8dc;
	--bg-color-hover: #fcf3e7;
	--card-background: #fffcf5;
	--card-background-hover: #fff9eF;
	--bg-color-hover: #f9eee2;
	--card-border: #f4ebe0;
	--card-border-hover: #e4d7b0;
	--navbar-background: #f3e8dc;
	--bg-footer: #9c7e51;
	--bg-base: #f8eee2;
	--bg-base: #f3e8dc;*/
	
	--bg-color-medium: #9c7e51;
	--bg-footer: #a8906f;
	--faded-bg: #c3b8ac44;
	--card-background-selected: #f7efe5;
	
	--bg-base: #e6dbcf;
	--bg-navbar: #f3e8dc;
	--bg-navbar: #fbf1e5;
	--hero-bg: #e3d8cc;
	--hero-bg: #e6dbcf;
	--hero-bg-light: #eee8dc;
	
	--text-accent: #b57900;
	
	--heading-dark: #9C7600;
	
	--category-border: #7bacc8;
	--exercise-category-border: #5abb89;
	--original-category-border: #cb9a00;
	--game-category-border: var( --link-dark );
	
	--border-radius: 3px;
}


HTML {
    box-sizing: border-box;
	scroll-padding-top: var( --scroll-padding-top );
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background-color: var(--bg-base);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

HTML, BODY{
	padding: 0;
	margin: 0;
	background-color: var(--bg-base);
	color: var(--text-dark);
	font-family: var(--font-sans);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
details:focus-visible,
[tabindex="0"]:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: inherit; 
}

#table-of-contents[tabindex="-1"]:focus {
  outline: none;
}

summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-color-light);
  outline-offset: var(--focus-offset);
  border-radius: inherit; 
}

A:link, A:visited, A:active, A:hover{
	color: var( --link-dark );
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
}

.inlink, .inlink:link, .inlink:visited, .inlink:active, .inlink:hover{
	display: inline;
	background: none;
	border: none;
	font-weight: 500;
	font-size: 1em;
	color: var( --link-dark );
	cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var( --link-underline );
    transition: all 0.2s ease;
    background-color: var( --link-bg ); /* Very faint highlight */
}

.inlink:hover {
    text-decoration-color: var( --link-dark ); /* Underline "inks in" on hover */
    background-color: var( --link-bg-on ); /* Very faint highlight */
}

.inlink.light:link, .inlink.light:visited, .inlink.light:active, .inlink.light:hover{

	color: var( --link-light );
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: #fff7;
    transition: all 0.2s ease;
    background-color: var( --link-light-bg ); /* Very faint highlight */
	background-image: url( '/icons/ne-arrow-light.svg');
    
}

.inlink.light:hover {
    text-decoration-color: var( --link-light ); /* Underline "inks in" on hover */
    background-color: var( --link-light-bg-on ); /* Very faint highlight */
}

.outlink:link, .outlink:visited, .outlink:active, .outlink:hover{
	display: inline;
	background: none;
	border: none;
	background-image: url( '/icons/ne-arrow.svg');
	background-size: 0.5em;
	background-repeat: no-repeat;
	background-position: right 50%;
	padding-right: 0.75em;
	font-weight: 500;
	font-size: 0.95em;
	color: var( --link-dark );
	cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var( --link-underline );
    transition: all 0.2s ease;
    background-color: var( --link-bg ); /* Very faint highlight */
}

.outlink:hover {
    text-decoration-color: var( --link-dark ); /* Underline "inks in" on hover */
    background-color: var( --link-bg-on ); /* Very faint highlight */
}

.buttonlink:link, .buttonlink:visited, .buttonlink:active, .buttonlink:hover{

	color: var( --link-light );
	background-color: var( --link-dark );
	border-radius: 3px;
	padding: 0.5em 1em;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 500;
}

.arrow, .ne-arrow {
  display: inline;
  background-image: url( '/icons/ne-arrow.svg') !important;
  background-size: 0.5em;
  background-repeat: no-repeat;
  background-position: right 60%;
  padding-right: 0.75em;
  font-weight: 500;
  font-size: 1em;
}
.arrow.light, .ne-arrow.light {
  background-image: url( '/icons/ne-arrow-light.svg') !important;
}
.buttonlink.arrow, .buttonlink.ne-arrow {
  background-image: url( '/icons/ne-arrow-light.svg') !important;
  background-position: right 1em top 55%;
  padding-right: 1.75em;
  
}

.se-arrow {
  display: inline;
  
  /* The mini-encoded Southeast SVG */
  background-image: url( '/icons/se-arrow-link.svg') !important;
  background-size: 0.5em;
  background-repeat: no-repeat;
  background-position: right 60%;
  padding-right: 0.75em;
  margin-right: 0.2em;
  font-weight: 500;
  font-size: 1em;
}

/**:focus{
	outline: 6px solid var( --muted-putty );
	outline-offset: 0.2em;
	border-radius: 3px;
}*/

.skip-link {
  position: absolute;
  top: -100px;
  left: 2rem;
  color: var(--text-dark);
  background-color: var(--bg-page);
  padding: 1rem 2rem;
  z-index: 9999;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: top 0.3s ease;
  border-radius: 6px;
}
.skip-link:focus { top: 2rem; }

.bold-500{ font-weight: 500; }
.bold-700{ font-weight: 700; }

UL {

}

UL.none{
	padding: 0;
	list-style-type: none;
}

/* 1. Reset the counter and hide default markers on the parent OL */
.styled-list {
    display: flex;
    flex-direction: column;
    row-gap: 0px;
    list-style: none; /* Hide the default list markers (numbers) */
    counter-reset: custom-counter; /* Initialize the counter */
    padding-left: 0; /* Important: reset default padding from list-style */
}

.styled-list.expanded {
    row-gap: 60px;
}

.styled-list.margins {
    margin: 2rem 4vw 2rem 3vw;
}

/* 2. Style the list items and increment the counter */
.styled-list > li {
    justify-content: flex-start;
    counter-increment: custom-counter; /* Increment the counter for each item */
    margin-bottom: 0.5rem; /* Standard spacing */
    position: relative; /* Needed to position the custom number */
    font-size: 1em;
    font-weight: inherit;
    text-align: inherit;
    line-height: inherit;
}

.styled-list.wordlist > LI {
    font-weight: inherit;
}

.styled-list.justify > li{
    text-align: justify;
}

.styled-list > li > *{
	display: inline;
}

.styled-list > li > *.block{
	display: block;
	margin: 0px 0px 0px 0px;
}

.styled-list > li > *.top-margin{
	display: block;
	margin: 20px 0px 0px 0px;
}

.styled-list > li > *.block:not(DETAILS) > *{
	display: inline;
}

.styled-list > li > .styled-list {
    display: block;
    margin: 0.5em 0 0.5em 1em;
}

.styled-list > li > .styled-list > li{
    margin-bottom: 0;
}

/* 3. Create, position, and color the custom number */
.styled-list:not(.none) > li::before {
    content: counter(custom-counter) ".";
    color: var( --link-dark );
    font-weight: 600;
    font-size: 1em;
    padding-right: 0.5em;
}

.styled-list:not(.none).decimal > li::before{
  content: counter(custom-counter, decimal) "." !important;
}

.styled-list:not(.none).lower-alpha > li::before{
  content: counter(custom-counter, lower-alpha) "." !important;
  font-size: 0.95em;
} 

.styled-list:not(.none).lower-roman > li::before{
  content: counter(custom-counter, lower-roman) "." !important;
  font-size: 0.95em;
} 
.inline-list {
  list-style: none; /* Remove default list markers */
  counter-reset: var( --start-at, inline-list-counter ); /* Initialize custom counter */
  margin: 0;
  padding: 0;
  line-height: inherit;
  text-align: left;
}

.inline-list.block {
  margin: 1rem 0;
}

.inline-list.indent {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.inline-list > li {
  display: inline; /* Inline flow for natural text wrapping */
  counter-increment: inline-list-counter; /* Increment counter */
  margin-right: 1em; /* Gap between items */
  font-weight: inherit;
  font-size: 1em;
}

.inline-list.indent > li {
  margin-right: 0.5em; /* Gap between items */
}

.inline-list > li:last-of-type {
  margin-right: 0;
}

.inline-list:not(.none) > li::before {
  content: counter(inline-list-counter, lower-alpha) "."; /* Lowercase letters with dot */
  margin-right: 0.3em; /* Space between marker and text */
  color: var( --link-dark ); /* Style marker differently */
  font-weight: 700; /* Optional: style the marker */
}

.inline-list:not(.none).decimal > li::before{
  content: counter(inline-list-counter, decimal) "." !important;
}

.inline-list:not(.none).lower-roman > li::before{
  content: counter(inline-list-counter, lower-roman) "." !important;
}

.inline-list:not(.none).upper-alpha > li::before{
  content: counter(inline-list-counter, upper-alpha) "." !important;
}

.inline-content > *{
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
}

DETAILS{}

DETAILS > SUMMARY{

	display: flex;
	flex-flow: row;
	justify-content: flex-start;
	align-items: center;
	list-style: none;
	font-weight: 700;
	font-family: var( --font-sans );
	font-size: 0.85rem;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var( --link-dark );
  
}

DETAILS > SUMMARY::after {
	background-color: var( --accent-light );
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 3px;
	background-image: url( '/icons/arrow-down-dark.svg' );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
	border: solid 1px var( --link-dark );
	border-radius: 50%;
	margin-left: 0.75em;
	transition: 0.2s;
}

DETAILS[open] > SUMMARY::after {
  transform: rotate(180deg);
}

DETAILS > .content, DETAILS > .examples{

	margin: 1rem 0;
	color: var( --text-dark );
	font-family: var( --font-sans );
	font-size: 0.9em;
	
}

DETAILS > .content > P{

	margin: 1rem 0;
	
}

DETAILS > .examples UL LI::marker{
	
	color: var( --heading-color );
	
}

.block{
	display: block;
}

.small{
	font-size: 0.8em;
}

.smaller{
	font-size: 0.7em;
}

.smallest{
	font-size: 0.6em;
}

.italic{
	font-style: italic;
}

.disclaimer {
	font-size: 0.8em;
	font-style: italic;
	line-height: 1.3em;
}

.comment {
	font-size: 0.8em;
	font-style: italic;
	line-height: 1.3em;
	font-family: var( --font-sans );
}

.comment CITE, .comment EM{
	font-style: normal;
}

.comment CITE::before, .comment EM::before{
	content: '‘';
}
.comment CITE::after, .comment EM::after{
	content: '’';
}

.word-count {
	font-size: 0.9em;
	font-style: italic;
	line-height: 1.3em;
	opacity: 0.8;
	font-family: var( --font-sans );
	white-space: nowrap;
}

.top-margin{
	margin-top: 2rem !important;
}
.bottom-margin{
	margin-bottom: 2rem !important;
}
.vertical-margin{
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
}
.top-padding{
	padding-top: 2rem !important;
}
.bottom-padding{
	padding-bottom: 2rem !important;
}
.vertical-padding{
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
}
.card-link::after{

	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    
}

.sr-only, .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.nowrap{
	white-space: nowrap;
}

.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Start off-screen */
    background: #333;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 0.95rem;
    z-index: 4000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    pointer-events: none; /* Don't block clicks to things behind it */
}

.toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Base dialog styling */
.dialog {
	max-height: 70vh;
}
.dialog:open {
	position: fixed;
	inset: unset;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 560px;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	background-color: var(--bg-dialog);
	border: 1px solid var(--text-dark);
	box-shadow: 6px 6px 0px rgba(26,26,25,0.2);
	overflow: hidden; 
}

.dialog-top{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var( --popover-header );
	padding: 2rem 2.5rem 1rem 2.5rem;
}

.dialog .dialog-title {
    font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.6rem;
	margin: 1.5rem 0 0.75rem 0;
	color: var(--text-dark);
	text-align: center;
	font-style: normal;
}

.dialog .dialog-subtitle {
    font-family: var(--font-sans);
	font-weight: 650;
	font-size: 1.1rem;
	margin-bottom: 0.75rem;
	color: var(--text-dark);
	text-align: center;
	font-style: normal;
	text-wrap: balance;
}

.dialog .dialog-form {
	display: flex;
	justify-content: flex-end;
}
.dialog .close-dialog {
    display: inline-block;
	background: var( --link-dark );
	border-radius: 24px;
	padding: 0.5em 1em;
	cursor: pointer;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.7rem;
	color: var(--link-light);
	margin: 0 0 1em auto;
	border: solid 1px var( --muted-putty );
	outline: solid 6px var( --light-muted-putty );
	outline-offset: 0.1em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dialog-bottom{
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.dialog-content{
	display: flex;
	flex-direction: column;
	padding: 0 2.5rem 2rem 2.5rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-dark);
	font-family: var(--font-sans);
	overflow-y: auto;
}

.dialog-content P{
	margin: 1em 0;
}

.dialog::backdrop {
    background-color: var( --bg-page );
    opacity: 0.4;
}

/* Subtle typography/layout for the inner dialog */
#dialog .dialog-content {
}

.popover{
	max-height: 70vh;
}

.popover:popover-open {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: 2rem;
	position: fixed;
	inset: unset;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 560px;
	background-color: var(--bg-dialog);
	border: 1px solid var(--text-dark);
	box-shadow: 6px 6px 0px rgba(26,26,25,0.2);
	overflow: hidden; 
}

.popover-top{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var( --popover-header );
	padding: 2rem 2.5rem 0 2.5rem;
}

.popover-bottom{
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-anchor: none;
}

.popover-content{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0 2.5rem 2rem 2.5rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-dark);
	font-family: var(--font-sans);
	margin-bottom: 1rem;
}

.popover-content P{
	margin: 1em 0;
}

.popover-context {
    font-family: var(--font-sans);
	font-weight: 800;
	font-size: 0.75rem;
	margin: 1.5rem 0 0.75rem 0;
	color: var(--text-muted);
	text-align: left;
	text-transform: uppercase;
}

/* Style the content inside */
.popover .popover-top .popover-title {
    font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.6rem;
	margin: 1.5rem 0;
	color: var(--text-dark);
	text-align: left;
	font-style: normal;
}

/* Style the content inside */
.popover .popover-subtitle {
    font-family: var(--font-sans);
	font-weight: 650;
	font-size: 1.3rem;
	margin: 1.5rem 0 0.75rem 0;
	color: var(--text-muted);
	text-align: left;
	font-style: italic;
}

.popover .close-popover {
    display: inline-block;
	background: var( --link-dark );
	border-radius: 24px;
	padding: 0.5em 1em;
	cursor: pointer;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.7rem;
	color: var(--link-light);
	margin: 0 0 1em auto;
	border: solid 1px var( --muted-putty );
	outline: solid 6px var( --light-muted-putty );
	outline-offset: 0.1em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.popover .close-target-popover:hover {
    background-color: #555;
}

/* The Backdrop: Dims the rest of the magazine window beautifully */
.popover::backdrop {
    background-color: #FEF9F077;
    background-color: #11111177;
}

.video-resource{
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 1rem;
}

.video-container {
    width: 100%;
    margin: 2em auto 1em 0;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.video-titles{
	display: flex;
	flex-direction: column;
	row-gap: 0;
	margin: 0 0;
	margin: 0.75rem 0 0 0;
}

.video-duration{
	margin: 0;
	font-family: var( --font-sans );
	font-size: 0.85em;
	font-weight: 800;
	font-style: normal;
	margin-bottom: 0.5rem;
	color: var( --text-muted );
}

.video-title{
	margin: 0;
	font-family: var( --font-sans );
	font-size: 1em;
	font-weight: 600;
}

.video-subtitle{
	margin: 0;
	font-family: var( --font-sans );
	font-size: 1em;
	font-weight: 500;
	font-style: italic;
}

.video-description{
	margin: 0.75rem 0 0.75rem 0;
	font-family: var( --font-sans );
	font-size: 1em;
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
}

.video-transcript{
	margin: 2rem 0;
	font-family: var( --font-sans );
	font-size: 0.95em;
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	text-align: justify;
}

.video-comments{
	margin: 2rem 0;
	font-family: var( --font-sans );
	font-size: 1.1em;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	text-align: justify;
	hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
}

.video-composers{
	display: flex;
	flex-direction: column;
	row-gap: 0.25rem;
	margin: 1rem 0;
}

.video-composer{
	margin: 0;
	font-family: var( --font-sans );
	font-size: 1em;
}

.video-composer-name{
	font-weight: 500;
	font-style: normal;
	text-transform: uppercase;
	font-size: 0.95em;
}

.video-composer-dates{
	font-weight: 400;
	font-style: italic;
	font-size: 0.9em;
}

.video-watch-link{
	margin: 0;
	font-family: var( --font-sans );
	font-size: 0.85em;
	font-weight: 600;
	font-style: italic;
}

.video-standalone{
	grid-column: 2;
	background-color: var( --bg-page );
	padding: 2rem 0 4rem 0;
}

.video-standalone .content{
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
	align-items: stretch;
	margin: 0 auto;
	font-size: clamp( 0.85rem, 0.6vw + 0.5rem, 1rem );
}

.video-standalone .content .video-main-titles{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 360px;
	margin: 3rem auto 1rem auto;
	row-gap: 0.75rem;
}

.video-standalone .content .video-main-supertitle{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var( --font-sans );
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	font-size: 0.95em;
	row-gap: 1rem;
	margin-bottom: 2rem;
	color: var( --text-dark );
}

.video-standalone .content .video-main-supertitle::after{
	content: '';
	width: 120px;
	height: 2px;
	background-color: var( --link-dark );
}

.video-standalone .content .video-main-title{
	font-family: var( --font-display );
	font-weight: 500;
	font-size: 2.6em;
	text-align: center;
	text-wrap: balance;
	line-height: 1;
}

.video-standalone .content .video-subtitle{
	font-family: var( --font-serif );
	font-weight: 400;
	font-style: italic;
	font-size: 1.4em;
	text-align: center;
	text-wrap: balance;
}

.video-standalone .content .video-main-meta{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 360px;
	margin: 1rem auto;
}

.video-standalone .content .video-description{
	font-family: var( --font-sans );
	font-weight: 400;
	font-style: italic;
	font-size: 1em;
	text-align: center;
	text-wrap: balance;
	border-radius: 6px;
	padding: 2rem 0rem;
	margin: 1rem 0;
	font-size: 0.9em;
}

.video-standalone .content .video-duration{
	margin-top: 1rem;
}

.video-articles{
	margin: 6rem auto 2rem auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: center;
}

.video-articles-titles{
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2rem;
}

.video-articles-title{
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2rem;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1em;
}
.video-articles-title::after{
	content: '';
	width: 240px;
	height: 2px;
	background-color: var( --link-dark );	
}

.video-articles-prompt{
	font-size: 0.9em;
	max-width: 240px;
	margin-bottom: 2rem;
	text-align: center;
	text-wrap: balance;
	font-style: italic;
}

.video-container iframe, 
.yt-facade {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    cursor: pointer;
}

.play-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translateY( -50% );
    width: auto;
    aspect-ratio: 1/1;
    background-color: #0004;
    border-radius: 50%;
    line-height: 1;
}

.play-button svg {
    width: 48px;      /* Change size here */
    height: 48px;     /* Match the width */
    fill: #ffffff;    /* Change color here (e.g., #ff0000 for YouTube Red) */
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5)); /* Adds depth */
    margin: 0.5rem;
}

.yt-facade {
	background-position: center; 
	background-size: cover; 
	background-repeat: no-repeat;
}

/* Add a hover effect */
.yt-facade:hover .play-button svg {
    fill: #f00;    /* Lighten the color on hover */
    transform: scale(1.1); /* Slight "pop" effect */
    transition: 0.2s ease-in-out;
}

.border-indent{
	padding: 1.25rem 1rem 1.5rem 2rem;
	border-left: 4px solid var( --toc-menu-background );
	border-radius: 4px;
}

.game-page-error{
	width: 100%;
	max-width: 480px;
	margin: 4rem auto 4rem 0;
}
		
.game-page-error-title{
	font-weight: 550;
	font-family: var( --font-sans );
	font-size: 1.1rem;
	font-style: italic;
}
		
.game-page-error-content{
	font-weight: 450;
	font-family: var( --font-sans );
	font-size: 0.95rem;

}
		
.game-page-error-content P{
	margin: 1em 0;
	line-height: 1.4;
}