/*=============================================
=                 GLOBAL STYLES               =
=============================================*/

/* Global variables */
:root {
    /* Color palette RGB values */
    --dark-navy: 26, 34, 56; /* Dark navy blue #1A2238 - page edge */
    --bright-navy: 26, 48, 93; /* Lighter navy blue #1A305D - page center */
    --night-navy: 0, 31, 63; /* Very dark navy blue #001F3F - dropdowns, forms */
    
    --white: 255, 255, 255; /* White #FFFFFF - header, link hover */
    --moon-silver: 235, 240, 245; /* Moonlight silver #EBF0F5 - text */
    --pale-azure: 173, 214, 255; /* Pale azure #ADD6FF - navbar links */
    --dark-azure: 133, 198, 255; /* Dark azure #85C6FF - body links */
    --ice-blue: 148, 179, 255; /* Ice blue #94B3FF - hover glow */
    --pale-cyan: 238, 255, 255; /* Pale cyan #EEFFFF - announcement */
    
    --medium-slate: 68, 107, 158; /* Medium slate blue #446B9E - form field border */
    --dark-slate: 54, 77, 126; /* Dark slate blue #364D7E - copyright */
    --mint-green: 200, 255, 220; /* Mint green #C8FFDC - success */
    --rose-pink: 255, 224, 232; /* Pinkish red #FFE0E8 - error */
    --pine-green: 0, 80, 50; /* Pine green #005032 - contrast with mint-green */
    --raspberry-pink: 120, 20, 40; /* Raspberry pink #781428 - contrast with rose-pink */
    
    /* Page background colors */
	--page-color: rgb(var(--dark-navy));
	--page-center-color: rgb(var(--bright-navy));
	--texture: url('/assets/stardust-texture.png') repeat; /* Stardust texture */
	--texture-opacity: 1;
	
    /* Border lattice */	
	--lattice-color: rgb(var(--white));
	--border-thickness: 2px; /* thickness of lattice lines */
	--lattice-edge: 0.375rem; /* space between lattice frame and page edge: 6px */
	--lattice-layer: clamp(0.75rem,2vw,1.5rem); /* space between outer and inner lattice: 12px */
	--lattice-total: calc(var(--lattice-edge) + var(--lattice-layer) + var(--border-thickness));
	
	/* Element background colors */
	--form-field: rgb(var(--night-navy));
	--form-border: rgb(var(--medium-slate));
	--tableau: rgba(var(--white), 0.05); /* White at 5% opacity */
	--dropdown-bg-color: rgb(var(--dark-navy)); /* Matches page edge */
	--dropdown-border-color: rgb(var(--white)); /* Matches lattice border */
	
	/* Text and link colors */
	--text-color: rgb(var(--moon-silver)); 
	--link-color-navbar: rgb(var(--pale-azure));
	--link-color: rgb(var(--dark-azure));
	--link-hover: rgb(var(--white));
	--hover-shadow: rgba(var(--ice-blue), 0.5); /* 50% opacity for hover glow */

	--button-color: rgb(var(--pale-azure));
	--button-hover: rgb(var(--white));
	--button-shadow: rgb(var(--ice-blue));

	/* Auxiliary text colors */
	--header-color: rgb(var(--white));
	--section-color: rgb(var(--white));
	--copyright: rgb(var(--dark-slate));
	--announcement: rgb(var(--pale-cyan));
	--success: rgb(var(--mint-green));
	--success-bg: rgb(var(--pine-green));
	--error: rgb(var(--rose-pink));
	--error-bg: rgb(var(--raspberry-pink));
	
	/* Font stacks */
	--header-font: 'Great Vibes', 'Lucida Handwriting', 'Brush Script MT', 'Segoe Script', 'Apple Chancery', 'Zapfino', cursive;
	--serif-font: 'Petrona', Georgia, serif;
	--sans-serif-font: 'Nunito Sans', Verdana, Arial, sans-serif;
}

/* Light Mode Global Variables */
@media (prefers-color-scheme: light) {
	:root {
	    /* Color palette RGB values */
	    --mist-silver: 200, 210, 230; /* Silver-white #C8D2E6 - page edge */
	    --mist-white: 240, 240, 250; /* Cool lavender white #F0F0FA - page center */
	    --twilight-purple: 72, 60, 125; /* Twilight purple #483C7D - header */
	    --dark-indigo: 50, 50, 85; /* Near-black indigo #323255 - text */	
	    --cornflower-blue: 84, 104, 221; /* Bright cornflower blue #5468DD - navbar links, announcement */
	    --bright-azure: 26,106,255; /* Bright azure 62, 131, 255 #3E83FF 2265E2 - body links */
	    --twilight-blue: 49, 58, 153; /* Twilight-blue #313A99 - link hover - */

	    --lavender: 155, 140, 200; /* Warm lavender #9B8CC8 - form field border */
	    --mauve-grey: 194, 190, 214; /* Muted mauve #C2BED6 - lattice, copyright */
	    
		/* Page background colors */
		--page-color: rgb(var(--mist-silver));
		--page-center-color: rgb(var(--mist-white));
		--texture: none; /* Blank fog */
		--texture-opacity: 0;
		
		/* Border lattice */
		--lattice-color: rgb(var(--mauve-grey));
		
		/* Element background colors */
		--form-field: rgb(var(--white));
		--form-border: rgb(var(--lavender)); /* CHANGE? */
		--tableau: rgba(var(--twilight-blue), 0.05); /* 5% opacity */
		--dropdown-bg-color: rgb(var(--mist-white)); /* Matches page center */
		--dropdown-border-color: rgb(var(--mauve-grey)); /* Matches lattice border */
		
		/* Text and link colors */
		
		--text-color: rgb(var(--dark-indigo));
		--link-color-navbar: rgb(var(--cornflower-blue));
		--link-color: rgb(var(--bright-azure));
		--link-hover: rgb(var(--twilight-blue));
		--hover-shadow: rgb(var(--white), 0.6); /* 30% opacity */
		
		--button-color: rgb(var(--cornflower-blue));
		--button-hover: rgb(var(--twilight-blue));
		--button-shadow: rgb(var(--twilight-blue));

		
		/* Auxiliary text colors */
		--header-color: rgb(var(--twilight-purple));
		--section-color: rgb(var(--twilight-purple));
		--copyright: rgb(var(--mauve-grey));
		--announcement: rgb(var(--cornflower-blue));
		--success: rgb(var(--pine-green));
		--success-bg: rgb(var(--mint-green));
		--error: rgb(var(--raspberry-pink));
		--error-bg: rgb(var(--rose-pink));
	}
}

/* ------------------------------------------------------------
	NEWSLETTER COLOR PALETTE
	These colors mirror Light Mode for brand consistency.
------------------------------------------------------------ */

/* --- Background --- */

/* mist-silver #E8EBF0 -- page border */
/* white #FFFFFF — main content background */

/* --- Typography --- */
/* deep-slate #3E4874 -- dark logo, newsletter header */
/* dark-indigo #323255 -- body text, darker than deep-slate */
/* soft-indigo #6673C0 — section headings, lighter than deep-slate */

/* --- Links & Buttons --- */
/* bright-azure #1A6AFF -- link color + button background. */

/* ------------------------------------------------------------
	End Newsletter Palette
------------------------------------------------------------ */


/* HTML/Body styles */
html,body {
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	font-family: var(--sans-serif-font);
	font-size: 1rem; /* fallback */
	font-size: clamp(16px,2vw,20px);
	background-color: var(--page-color); 
	background: radial-gradient(circle at center, var(--page-center-color) 0%, var(--page-color) 90%); 
	color: var(--text-color);
	z-index: 0;
}

/* Light Mode Background */

@media (prefers-color-scheme: light) {
	body {
	background-image:
		radial-gradient(circle at 50% 50%, rgba(255, 200, 255, 0.09) 0%, rgba(200, 255, 255, 0.15) 50%, rgba(255, 255, 210, 0.15) 70%, rgba(205, 215, 235, 0) 90%),
		radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.08) 0%, rgba(200, 210, 230, 0.05) 70%),
		radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.08) 0%, rgba(200, 210, 230, 0.1) 80%);
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: lighten;
	}
}

/* Pseudo-element for star texture */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  /* Stardust texture */
  background: var(--texture);
  opacity: var(--texture-opacity);
  /* Fade it out in the center using a mask */
  mask-image: radial-gradient(circle at center, rgba(255,255, 255, 0.15) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 1) 80%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 1) 80%);
}

/* Site icon */
.center-image {
	display: block;
	margin: auto;
	margin-top: clamp(2rem,3vw,4rem);
	margin-bottom: clamp(2rem,3vw,4rem);
}

/* Universal button style */
.button {
    background-color: var(--button-color);
    border: none;
    color: var(--form-field);
    padding: 0.75em 1.5em;
    font-size: 1em;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s ease-in-out;
    display: inline-block;
    text-align: center;
}

.button:hover {
    background-color: var(--button-hover);
    box-shadow: 0 0 2px var(--button-shadow);
}

.button:active {
    transform: scale(0.98);
}

/* Remove top/bottom spacing from ConvertKit form */
.newsletter-embed,
.newsletter-embed .formkit-form,
.newsletter-embed .formkit-form > div,
.newsletter-embed form {
    min-height: 165px;
    margin: 0 auto;
    padding: 0;
}

/* Optional: add controlled spacing */
.newsletter-embed {
    margin-top: -2rem; 
}

/*=============================================
=                 TEXT STYLES                 =
=============================================*/

/* Fonts */

/* Great Vibes (Header script) - subset of 'Jessie Roy' characters */
@font-face {
	font-family: 'Great Vibes';
	src: url('/assets/fonts/Great_Vibes/GreatVibes-JessieRoy.woff2') format('woff2'),
		url('/assets/fonts/Great_Vibes/GreatVibes-JessieRoy.woff') format('woff');
	font-display: swap;
}


/* Foglihten (alt Header script) - not minimized */
@font-face {
	font-family: 'Foglihten No07';
	src: url("/assets/fonts/Foglihten/FoglihtenNo07calt.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.unswashed {
	font-family: "Foglihten No07", serif;
	font-feature-settings: "calt" 0;
	font-variant-ligatures: none;
}

/* French Script MT (alt Header script) - not minimized, just for the J */
@font-face {
	font-family: 'French Script MT';
	src: url("/assets/fonts/Foglihten/frenchscriptmt.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.initialj {
    font-family: 'French Script MT';
}

/* Petrona (Page heading stack) - Variable Fonts with weight range */
@font-face {
	font-family: 'Petrona';
	src: url('/assets/fonts/Petrona/Petrona-Regular-Variable.woff2') format('woff2'),
		url('/assets/fonts/Petrona/Petrona-Regular-Variable.woff') format('woff');
	font-style: normal;
	font-weight: 100 900; /* full weight range */
	font-display: swap;
}
@font-face {
	font-family: 'Petrona';
	src: url('/assets/fonts/Petrona/Petrona-Italic-Variable.woff2') format('woff2'),
		url('/assets/fonts/Petrona/Petrona-Italic-Variable.woff') format('woff');
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
}

/* Nunito Sans (Body text stack) - Variable Fonts with weight range */
@font-face {
	font-family: 'Nunito Sans';
	src: url('/assets/fonts/Nunito_Sans/NunitoSans-Subset.woff2') format('woff2');
	font-style: normal;
	font-weight: 100 900; /* full weight range */
	font-display: swap;
}
@font-face {
	font-family: 'Nunito Sans';
	src: url('/assets/fonts/Nunito_Sans/NunitoSans-Italic-Subset.woff2') format('woff2');
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
}

/* Links */
a {
	color: var(--link-color);
	text-decoration: none;
}
a:hover {
	color: var(--link-hover);
	text-decoration: underline;
	text-shadow: 0 0 5px var(--hover-shadow); /* Slight glow */
}

.footer-socials {
  display: flex;
  justify-content: center; /* centers all icons horizontally */
  gap: 1.25rem;               /* space between icons */
  margin-top: 1rem;        /* spacing from content above */
}

.social-link {
	color: var(--link-color-navbar);
	text-decoration: none;
	fill: currentColor; 
	transition: fill 0.2s ease, transform 0.2s ease;
	display: inline-flex; /* vertical alignment for inline icons */
	align-items: center; /* centers icon vertically with text */
}

.social-link .icon {
	width: 1.5rem;
	height: 1.5rem;
}

/* Footer icons */
.social-link .bottom {
	width: 1.15rem;
	height: 1.15rem;
}

.social-link:hover {
	color: var(--link-hover);
	filter: drop-shadow(0 0 5px var(--hover-shadow));
	opacity: 0.999;
}

/* Website header */
h1 {
    flex-grow: 1; /* Ensures it uses available space */
    max-width: 100%;
    margin: 0;
    margin-left: 0.6em;
    margin-bottom: -0.26em;
    padding: 0;
    font-family: var(--header-font);
    font-size: clamp(2rem, 20vw, 96px);
    font-weight: normal;
    color: var(--header-color);
    text-align: left;
    line-height: 1;
    vertical-align: baseline;
    z-index: 100;
}
h1 a {
    color: inherit;
    text-decoration: none;
}
h1 a:hover {
    text-decoration: none;
    text-shadow: 0 0 8px var(--hover-shadow);
}

/* Section headings */
h2 {
	text-align: center;
	line-height: clamp(1.2em, 1.4, 1.6em);
	font-size: 1.8rem; /* fallback */
	font-size: clamp(28px,4vw,36px);
	font-family: var(--serif-font);
	font-style: normal;
	font-weight: normal;
	color: var(--section-color);
	margin-top: 1.5em;
	margin-bottom: 0.8em;
}
.big-text {
	font-size: 1.2rem; /* fallback */
	font-size: clamp(18px,2.5vw,24px);
	font-weight: normal;
}

/* Other text styles */
.byline-author {
	text-align: center;
	font-family: var(--serif-font);
	font-style: italic;
	margin: 0;
}
.byline-date {
	text-align: center;
	font-family: var(--serif-font);
	font-style: italic;
	margin: 0;
	margin-bottom: 2.5em;
}
blockquote {
	margin: 1em 0;
	padding-left: 4em; /* Indent the entire block */
	border-left: none; /* Remove the default bar */
	font-style: italic; /* Optional, for blockquote tone */
}
.left-align {
	text-align: left;
}
.center-align {
    text-align: center;
}

/* Scene separators*/
hr {
	border: none;
	text-align: center;
	position: relative;
	height: 1em;
	color: var(--text-color);
}
hr::before {
	content: '\25CD';
	font-size: 1rem;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	line-height: 1;
}
.hr-triple::before {
  content: '\263D \25CD \263E'; /* Hecate Threefold */
  display: block;
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0rem; /* Optional: add space between symbols */
  margin: 2rem 0;
}
@media (prefers-color-scheme: light) {

    hr::before {
	content: '\2734';
    }
    .hr-triple::before {
    content: '\2734 \2734 \2734'; /* SUNBURST */
    letter-spacing: 0.5rem; /* Optional: add space between symbols */
    }
}

/* Sparkly Text */
.announcement {
	font-size: 2rem; /* fallback */
	font-size: clamp(26px,3vw,40px);
	font-weight: normal;
	margin-bottom: 0.5em;
	color: var(--announcement); /* text color */
}
.announcement a { color: var(--link-color); }
.announcement a:hover {	color: var(--link-hover); }
@keyframes shimmer {
    0%, 100% { text-shadow: 0 0 1px rgba(170, 238, 255, 0.6); } /* very pale blue shimmer */
    50% { text-shadow: 0 0 2px rgba(204, 255, 255, 0.45); } 
}
.shimmer { animation: shimmer 0.7s ease-in-out infinite; display: inline-block; }
.shimmer a { animation: none !important; }
sparkly-text { --sparkly-text-color: verylight; }
@media (prefers-color-scheme: light) {
  .shimmer { animation: none !important; text-shadow: 1px 1px 0 var(--hover-shadow); } /* replace shimmer with drop shadow */
  sparkly-text { --sparkly-text-color: medium; }
}

/*=============================================
=                PAGE STRUCTURE               =
=============================================*/

/* ========== FLEXBOXES ========== */

/* Container for main, header, copyright */
.page { 
	display: flex;
	flex-direction: column; /* Stack children vertically */
	height: 100%; /* Full viewport height */
	width: 100vw; /* Full viewport width */
	align-items: center;
}

/* Container for page content */
.main-container {
	flex: 1; /* Fills available space */
    flex-direction: column;
	min-height: 0;
	width: 100%;
	display: flex;
	overflow: hidden; /* Stop it from scrolling */
}

/* Container for header */
.header-wrapper {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    align-items: flex-end;
    padding: 0;
    padding-top: clamp(0.2em,0.5vh,0.8em);
    margin: 0;
    z-index: 50;
}

/* Container for copyright */
.copyright {
	/* No fixed height-- let this grow or shrink with the content inside */
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	margin-right: calc(var(--lattice-edge) + var(--lattice-layer) + 3 * var(--border-thickness));
	margin-bottom: var(--border-thickness);
	padding: 0.1rem;
	text-align: right;
	font-size: 0.2rem;
	font-size: clamp(8px, 0.4vw, 10px);
	color: var(--copyright);
	z-index: 3;
}

/* Scrolling container for main page content */
/* Goes inside <div main-container> and <div lattice outer>, so I only have to pad the thickness of <div lattice inner> */
.scroll-wrapper {
	display: flex;
	flex-grow: 1;
	position: relative;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch; /* smooth scroll for iOS */
	margin-top: calc(var(--lattice-layer) + 2 * var(--border-thickness)); /*Push in the scrollbox*/
	margin-bottom: calc(var(--lattice-layer) + 2 * var(--border-thickness));
	margin-left: calc(var(--lattice-layer) + var(--border-thickness));
	margin-right: 0; /* shifted right to move scrollbar */
	align-items: center;
	justify-content: center;
	z-index: 1;
}

/* The content box itself */
.content {
	flex-grow: 1;
	min-height: auto;
	margin: auto;
	margin-left: calc(var(--lattice-layer) + var(--border-thickness) + var(--lattice-edge));
	margin-right: calc( 2 * (var(--lattice-layer) + var(--border-thickness)) + var(--lattice-edge));
	max-width: 800px;
	text-align: left;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.content.center {
	text-align: center;
}

/* ========== BORDER LATTICE ========== */

/* Lattice squares (outer and inner) */
.lattice.outer {
	display: flex;
	flex-grow: 1;
	min-height: 0;
	position: relative;
	margin-top: var(--lattice-edge); /*Push lattice away from the edge of the page*/
	margin-bottom: var(--lattice-edge);
	margin-left: var(--lattice-edge);
	margin-right: var(--lattice-edge); 
	border: var(--border-thickness) solid var(--lattice-color);
	z-index: 1;
}
.lattice.inner {
	display: flex;
	flex-grow: 1;
	position: absolute;
	top: calc(var(--lattice-layer) + var(--border-thickness)); /* Push inner lattice away from the edge of the outer lattice */
	bottom: calc(var(--lattice-layer) + var(--border-thickness));
	left: calc(var(--lattice-layer) + var(--border-thickness));
	right: calc(var(--lattice-layer) + var(--border-thickness));
	border: var(--border-thickness) solid var(--lattice-color);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease,visibility 0.5s ease;
	pointer-events: none;
	z-index: 2;
}
/* Shared corner block styles */
.lattice.outer::before,
.lattice.outer::after,
.lattice.inner::before,
.lattice.inner::after,
.lattice.outer .bottom-corners::before,
.lattice.outer .bottom-corners::after,
.lattice.inner .bottom-corners::before,
.lattice.inner .bottom-corners::after {
	position: absolute;
	border: var(--border-thickness) solid transparent;
	width: var(--lattice-layer);
	height: var(--lattice-layer);
	pointer-events: none;
	content: '';
}
/* Top corners */
.lattice.outer::before,
.lattice.inner::before {
	top: 0;
	left: 0;
	border-right-color: var(--lattice-color);
	border-bottom-color: var(--lattice-color);
}
.lattice.outer::after,
.lattice.inner::after {
	top: 0;
	right: 0;
	border-left-color: var(--lattice-color);
	border-bottom-color: var(--lattice-color);
}
/* Bottom corners */
.lattice.outer .bottom-corners::before,
.lattice.inner .bottom-corners::before {
	bottom: 0;
	left: 0;
	border-right-color: var(--lattice-color);
	border-top-color: var(--lattice-color);
}
.lattice.outer .bottom-corners::after,
.lattice.inner .bottom-corners::after {
	bottom: 0;
	right: 0;
	border-left-color: var(--lattice-color);
	border-top-color: var(--lattice-color);
}
/* Transitions for inner lattice corner pieces */
.lattice.inner::before,
.lattice.inner::after,
.lattice.inner .bottom-corners::before,
.lattice.inner .bottom-corners::after {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

/*=============================================
=                  NAVIGATION                 =
=============================================*/

/* ========== DESKTOP NAVBAR ========== */

/* Navbar */
.navbar {
	/* No fixed height-- let this grow or shrink with the content inside */
	margin-left: 1.6em;
	margin-right: 1em;
	padding: 0;
	text-align: center;
	color: var(--text-color);
	transition: opacity 0.5s ease, visibility 0.5s ease;
	display: flex;
	justify-content: center; /* Centers the links */
	align-items: center; /* Ensures items are vertically aligned */
}

/* Navbar links */
.navbar a {
	color: var(--link-color-navbar);
	text-decoration: none;
	font-variant: small-caps;
	text-transform: lowercase; /* ensures consistent styling */
	font-size: clamp(19.2px, 2vw, 24px);
	font-weight: 500;
	letter-spacing: 0.4px;
	padding: 0 0.25em;
	display: inline-flex;
	align-items: center; /* Align the star with the text */
}
.navbar a:hover {
	color: var(--link-hover);
	text-shadow: 0 0 8px var(--hover-shadow), 0 0 16px var(--hover-shadow), 0 0 24px var(--hover-shadow); /* Faint glow */
}
.navbar a::after {
	content: '\25CF'; /* Star symbol */
	margin-left: 1em; /* Adjust spacing between link and star */
	font-size: clamp(9.6px, 1vw, 12px);
	color: var(--link-color-navbar);
	text-shadow: none; /* Prevent hover glow */
	transition: none; /* Avoid hover transition */
	pointer-events: none; /* Don't make it clickable */
}
.navbar a:last-child::after {
  content: ''; /* Removes the star */
}

/* Dropdown Menu */

/* Dropdown wrapper */
.dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
/* Dropdown label styles */
.dropdown-label {
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 1;
    color: var(--link-color-navbar);
	text-decoration: none;
	font-variant: small-caps;
	text-transform: lowercase; /* ensures consistent styling */
	font-size: clamp(19.2px, 2vw, 24px);
	font-weight: 500;
	letter-spacing: 0.4px;
	padding: 0 0.25em;
}
.dropdown-label::after {
    display: inline-block;
    font-size: 0.5em;
    margin-top: 0.4em;
    margin-left: 0.25em;
    width: 1ch;
    line-height: 1;          /* ensure no extra height */
    transition: content 0.2s ease;
    user-select: none;
    content: '\25BC'; /* Unicode down-facing triangle */
    align-self: center;
}
.dropdown-label:hover {
	color: var(--link-hover);
	text-shadow: 0 0 8px var(--hover-shadow), 0 0 16px var(--hover-shadow), 0 0 24px var(--hover-shadow); /* Faint glow */
}

/* Dropdown menu styles */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;          /* anchor dropdown’s right edge to navbar */
    left: auto;        /* disable left anchoring */
    background: var(--dropdown-bg-color);
    border: 1px solid var(--dropdown-border-color);
    padding: 0.5rem 0;
    list-style: none;
    display: none;
    flex-direction: column;
    z-index: 1000;
    white-space: nowrap;       /* prevent link text wrapping */
    min-width: max-content;    /* expand to fit longest item */
    max-width: 90vw;           /* never wider than viewport */
    overflow-wrap: normal;
    text-align: left;
}
/* Dropdown menu link styles */
.dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--link-color-navbar);
    text-decoration: none;
    font-size: clamp(20px, 2.1vw, 25px);
}
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    color: var(--link-hover);
  	text-shadow: 0 0 8px var(--hover-shadow), 0 0 16px var(--hover-shadow), 0 0 24px var(--hover-shadow); /* Faint glow */
}
.dropdown-menu a::before {
    content: '\25CF';
    font-size: clamp(12px, 1.25vw, 15px);
    margin: 0 0.3rem;
}
/* Dropdown menu items */
.dropdown-menu li {
    padding: 0;
}

/* Checkbox toggle styles */
#toggle-more { 
  display: none; /* Hide the checkbox toggle */
}
.dropdown input[type="checkbox"] {
  display: none; 
}
#toggle-more:checked + label[for="toggle-more"]::after { /* When checkbox is checked, swap to X */
    content: '\2715'; /* Unicode multiplication X */
    font-weight: bold;
}
/* Show the menu when the checkbox is checked */
.dropdown input:checked + .dropdown-label + .dropdown-menu {
    display: flex;
}

/* ========== MOBILE NAV MENU ========== */

/* Mobile Nav menu area */
.mobile-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
	top: calc(var(--lattice-layer) + 2 * var(--border-thickness)); /* Push inner lattice away from the edge of the outer lattice */
	right: calc(var(--lattice-layer) + 2 * var(--border-thickness));
  width: 3rem;
  height: 3rem;
  backdrop-filter: blur(6px);
  border-radius: 0 0 0 100%; /* topleft topright bottomright bottomleft */
  cursor: pointer;      /* Make it clear it's clickable */
  transition: all 0.3s ease-in-out;
  pointer-events: auto;
  visibility: hidden;
  opacity: 0;
  padding: 0.3rem 0.3rem 0.3rem 0.4rem;
  z-index: 10;
}

/* Mobile Nav hamburger bars */
.mobile-nav div {
  width: 32px;
  height: 3px;
  margin: 4px;
  background-color: var(--link-color-navbar);
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
  flex-shrink: -10; /* prevent collapsing */
}
.mobile-nav div:last-child {
  margin-bottom: 1rem;
  z-index: 15;
}

/* Mobile Nav menu styles */
.mobile-nav-menu {
    display: -webkit-flex;
    display: flex;
	flex-grow: 1;
	min-height: 0;
	position: absolute;
	top: calc(var(--lattice-layer) + 2 * var(--border-thickness)); /* Fill up the inner lattice */
	bottom: calc(var(--lattice-layer) + 2 * var(--border-thickness));
	left: calc(var(--lattice-layer) + 2 * var(--border-thickness));
	right: calc(var(--lattice-layer) + 2 * var(--border-thickness));
  flex-direction: column; /* stack items vertically */
  justify-content: center; /* vertical centering */
  align-items: center; /* horizontal centering */
  text-align: center;
  gap: clamp(0.5rem, 2vh, 1rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 5;
}
.mobile-nav-menu::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Mobile Nav menu links */
.mobile-nav-menu a {
  position: relative;
  text-decoration: none;
  font-variant: small-caps;
  text-transform: lowercase; /* ensures consistent styling */
  color: var(--link-color-navbar);
  font-size: clamp(1.6rem, 2vw, 2rem);
  display: flex;
  padding: 0.5em 1em; /* consistent vertical spacing */
  transition: all 0.3s ease-in-out;
  letter-spacing: 1px;
}
.mobile-nav-menu a:hover {
  color: var(--link-hover);
  text-shadow:
    0 0 8px var(--hover-shadow),
    0 0 16px var(--hover-shadow),
    0 0 24px var(--hover-shadow);
}
/*
.mobile-nav-menu a::before, 
.mobile-nav-menu a::after {
  content: '\2726';
  font-size: 1rem;
  position: relative;
  align-self: center;
  margin: 0 0.3rem;
}
*/
.mobile-nav-menu a span {
    display: inline-block;
}

/* Mobile Nav checkbox toggle */

#toggle {
  display: none;
}

/* Animations - transforms each bar to look like an X and makes nav menu visible*/
#toggle:checked + .mobile-nav .top-bar {
  transform: rotate(-45deg);
  transform-origin: right;
}
#toggle:checked + .mobile-nav .middle-bar {
  transform: rotate(45deg);
  opacity: 0;
}
#toggle:checked + .mobile-nav .bottom-bar {
  transform: rotate(45deg);
  transform-origin: right;
}
#toggle:checked + .mobile-nav + .mobile-nav-menu {
  opacity: 1;
  visibility: visible;
}
/* Hide main content when nav menu is visible */
#toggle:checked ~ .scroll-wrapper .content {
    opacity: 0;
    visibility: hidden;
}
/* Fade in (restores instant visibility so opacity can transition) */
#toggle:not(:checked) ~ .scroll-wrapper .content,
#toggle:not(:checked) + .mobile-nav + .mobile-nav-menu {
  transition: opacity 0.3s ease, visibility 0s linear;
}


/*=============================================
=              MOBILE ADJUSTMENTS             =
=============================================*/

/* Max width 800 px (Tablets, Netbooks) */
@media (max-width: 800px) {
  :root {
    --border-thickness: 1px; /* 1px for smaller screens */
  }
  .navbar {
      display: none;
  }
  .header-wrapper {
      flex-direction: column;
      align-items: center;
  }
  h1 {
      text-align: center;
      margin-left: 0;
  }
  .mobile-nav {
      opacity: 1;
      visibility: visible;
	}
}

/* Max width 600 px (Large phones, Tablets) */
@media (max-width: 600px) {
	body {
		line-height: 1.4;
	}
	blockquote {
		padding-left: 1em; /* Smaller indent */
	}
	.lattice.inner,
	.lattice.inner .bottom {
		opacity: 0;
		visibility: hidden;
	}
	.card-image {
    max-height: 150px;
}

}

/* Max width 480 px (Phones) */
@media (max-width: 480px) {
  :root {
    align-self: center;
  }
}