/* 
   Optimized & Consolidated CSS Template
   - All duplicates merged, cascade order protected, comments preserved.
*/

/* Responsive Modular Settings */
/* :root settings for Responsive Modular Scale */
:root {
  /* links (default) */
  --color-a: #004487;
  /* links (default) */
  --color-a-hover: #b54326;
  /* border color */
  --color-border: #aaa;
  /* used for boxes */
  --color-dark: #000;
  /* Errors & text-warnings */
  --color-error:  #c31014;
  /* used for input field and hr rule */
  --color-gray: #bbc6cc;
  /* used with button & .btn styling  */
  --color-graylight01: #f3f5f6;
  /* used with button & .btn styling, input fields, lang dropdown and iFrame */
  --color-graylight02: #e1e6e9;
   /* Text green for success */
  --color-green-dark: #009150;
  --color-session01: #0355a7;
  --color-session02: #007f5c;
  --color-session03: #b54326;
   --color-yellow01: #eee600;
  --color-yellow02: #ffdf00;
  --color-purple01: #bf00ff;
   /* used with button & .btn styling */
  --color-menubar-items: #576a74;
  /* Text color */
  --color-text: #1a1a1a;
  /* backgrounds, button and .btn styling */
  --color-white: #fffffe;
  /* font settings */
  --font-mono: Consolas, Menlo, Courier, Courier New, monospace;
  --font-plain: Geneva, "Segoe UI", Arial, system-ui, -apple-system, sans-serif;
  --font-w-heaviest: 700;
  --font-w-heavy: 600;
  --font-w-normal: 400;
  --font-weight-multiplier: 0.85;
  --ratio: 1.4;
  --s-5: clamp(0.18rem, 0.39rem - 0.29vw, 0.33rem);
  --s-4: clamp(0.25rem, 0.47rem - 0.31vw, 0.41rem);
  --s-3: clamp(0.35rem, 0.57rem - 0.31vw, 0.51rem);
  --s-2: clamp(0.5rem, 0.69rem - 0.27vw, 0.64rem);
  --s-1: clamp(0.75rem, 0.80rem - 0.10vw, 0.90rem);
  --s0:  clamp(1.00rem, 1.00rem + 0.00vw, 1.00rem);
  --s01:  clamp(1.10rem, 1.00rem + 0.50vw, 1.25rem);
  --s02:  clamp(1.25rem, 1.15rem + 1.00vw, 1.50rem);
  --s03:  clamp(1.50rem, 1.35rem + 1.50vw, 2.00rem);
  --s04:  clamp(2.00rem, 1.70rem + 2.00vw, 2.50rem);
  --s05:  clamp(2.50rem, 2.10rem + 2.50vw, 3.00rem);
  --s06:  clamp(3.15rem, 2.65rem + 3.00vw, 3.85rem);
  --s07:  clamp(4.00rem, 3.30rem + 3.50vw, 5.00rem);
  --s08:  clamp(5.00rem, 4.10rem + 4.00vw, 6.50rem);
  --s09:  clamp(6.25rem, 5.05rem + 4.50vw, 8.50rem);
  --s10: clamp(7.80rem, 6.20rem + 5.00vw, 11.00rem);
  --measure: 69ch;
  --line-height: var(--ratio);
  --line-height-normal: calc(1 * var(--ratio));
  --border-thin: var(--s-5);
  line-height: var(--ratio);
  font-size: var(--base-font-size);
  font-family: var(--font-plain);
  color: var(--color-text);
  --print-max-width: 900px; /* A standard, readable width for A4/Letter */
  --wider-max-width: 85vw;
  --base-font-size: clamp(1rem, 0.94rem + 0.26vw, 1.1875rem);
  --camera-color: var(--color-text);
}

/* Global */

body {
  background-color: var(--color-graylight02);
}

body, p, li { 
  font-size: var(--s0);
}

*, :after, :before {
  box-sizing: border-box;
  overflow-wrap: break-word;
  padding: 0;
  border: 0 solid;
}
[hidden] {
  display: none;
}
[hidden] + * {
  margin-top: 0 !important;
}
* + * {
  padding: 0;
  line-height: var(--line-height-normal);
}
footer, header, main, nav, div {
  display: block;
}
a {
  text-decoration: underline;
}
p {
  margin-block-start: 1.25rem;
}
p + p {
  margin-top: var(--s01);
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}
[tabindex="-1"]:focus,
shrink-grow:focus {
  outline: none;
}

/* removes text-shadow on the following elements */
h1, h2, h3, h4, h5, h6, .footnote, pre, address, blockquote, q, dt, dl, figcaption, label, p, small, span, ul, ol {
  text-shadow: none;
}

ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-top: 0rem;
  padding-bottom: 0rem;
  font-size: var(--s0);
  line-height: var(--line-height-normal);
  margin-bottom: 1rem;
  margin-left: 0rem;
  padding-left: 2rem;
}

ol ol {
  padding-left: 2rem;
}
ol li, ul li {
  padding: 0rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: var(--line-height-normal);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ol Adaption - this sets the indentation of ol lists based on the number of items in the list - needed for roman and alpha */
ol li {
  margin-left: 0rem;
}
ol li:first-child:nth-last-child(n + 18),
ol li:first-child:nth-last-child(n + 18) ~ li {
  margin-left: 0.35rem;
}
ol li:first-child:nth-last-child(n + 28),
ol li:first-child:nth-last-child(n + 28) ~ li {
  margin-left: 1.4rem;
}
ol li:first-child:nth-last-child(n + 38),
ol li:first-child:nth-last-child(n + 38) ~ li {
  margin-left: 2.2rem;
}
/* end ol adaption */

li {
  display: list-item;
  text-align: start;
  text-align: -webkit-match-parent;
  text-align: match-parent;
}

/* This controls the basic uls & some ol settings on content */
ul {
  list-style: none;
  padding-left: 0;
  list-style-position: outside;
  padding-top: 0rem;
  padding-bottom: 0rem;
  font-size: var(--s0);
  line-height: var(--line-height-normal);
  margin-bottom: 1rem;
  margin-left: 0rem;
}

ul > li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--s-1);
}

ul > li::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: var(--s03);
  height: var(--s03);
  background-image: url('/assets/svg/camera.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

/* General message styling */
.message {
    color: var(--color-text);
}

/* Specific error state styling */
.message.error {
    color: var(--color-error);
}

.guide-container ul > li {
  position: relative;
  padding-left: 1.5rem;
}

.guide-container ul > li::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 1em;
  transform: translateY(-50%);
  width: var(--s03);
  height: var(--s03);
  background-image: url('/assets/svg/camera.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

ul ul {
  list-style-type: none;
  padding-left: revert;
  margin-top: var(--s-1);
  margin-bottom: 0;
}

ul ul > li {
  position: static;
  padding-left: 0;
}

ul ul > li::before {
  content: none;
}

table {
  text-indent: initial;
  box-sizing: border-box;
  border-collapse: collapse;
}

/* This makes images responsive */
img {
  max-width: 100%;
  width: auto;
  height: auto;
  padding: 0px;
  margin: 0;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  border-radius: 0.5rem; /* Softens the corners so the shadow looks natural */
}

hr {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 1px;
  color: var(--color-gray);
  background-color: var(--color-gray);
}

/* Screen & Base Style: Merging <hr> properties onto the section container */
.print-block {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-gray);
  padding-bottom: 0.75rem; /* Maintains breathing room before the line */
}

/* Removes the trailing line from the very last block of the guide */
.print-block:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

pre {
  outline: var(--border-thin) solid transparent;
  outline-offset: calc(var(--border-thin) * -1);
}
/* font-size */
a, div, td, th, pre {
  font-size: var(--s0);
  line-height: var(--line-height-normal);
  font-family: var(--font-plain);
}
/* h1 h2 h3 h4 h5 h6 settings */
h1, h2, h3, h4, h5, h6 {
  -webkit-hyphens: auto;
  hyphens: auto;
  color: var(--color-text);
  margin-block-start: 1rem;
  margin-block-end: .5rem;
  line-height: var(--line-height-normal);
  font-family: var(--font-plain);
}
/* Updated Hierarchy: H4 = Base Size */
h1 {
  font-size: var(--s03); /* 2.44rem - 4rem */
  font-weight: var(--font-w-heaviest);
}

h2 {
  font-size: var(--s02); /* 1.95rem - 2.83rem */
  font-weight: var(--font-w-heaviest);
}
h3 {
  font-size: var(--s01); /* 1.56rem - 2rem */
  font-weight: var(--font-w-heaviest);
}
h4 {
  font-size: var(--s0); /* 1rem (The "Normal" Size) */
  font-weight: var(--font-w-heaviest);
}
h5 {
  font-size: var(--s-1); /* 0.8rem - 0.71rem */
  font-weight: var(--font-w-heavy);
}
h6 {
  font-size: var(--s-2); /* 0.64rem - 0.5rem */
  font-weight: var(--font-w-heavy);
}

/* ------------------------------ */
/* Link behavior */
/* This sets the link color */
a, a:visited {
  color: var(--color-a);
}
/* This sets the url link hover color */
a:hover {
  color: var(--color-a-hover);
}

footer.site-footer p {
  font-size: var(--s-1); /* Adjust this step variable as needed for your global footer */
}

footer.site-footer {
  background-color: var(--color-white);
}

.home-site-footer {
  position: relative;
  z-index: 20;
  background-color: transparent;
  text-align: center;
}

.home-site-footer p {
  font-size: var(--s-1);
  color: var(--color-yellow02);
  margin-block-start: .5rem;
  margin-left: 1em;
  background-color: var(--color-dark);
}

.home-site-footer a {
  color: var(--color-session03);
}

.home-site-footer a:hover {
  color: var(--color-purple01);
}
.home-site-footer.footer-contact a{
  font-size: var(--s0);
  margin-left: 1em;
  background-color: var(--color-dark);
}


/* ------------------------------ */
.stack {
  /* The flex context */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stack > * {
  /* Any extant vertical margins are removed */
  margin-block: 0;
}
.stack > * + * {
  /* Top margin is only applied to successive elements */
  margin-block-start: var(--s02, var(--s02));
}

.stack h2 {
  padding-top: var(--s02);
}

.box {
  padding: 0;
  border: none;
  color: var(--color-text);
  background-color: var(--color-white);
}
.boxr {
  text-align: right;
}
.boxl {
  text-align: left;
}
.boxs {
  max-width: 16ch;
  text-align: start;
}
.row {
  display: flex;
}
.column01 {
  flex: 50%;
}
/* shadow */

button, .btn {
	-moz-appearance: button;
	-webkit-appearance: button;
	appearance: button;
	writing-mode: horizontal-tb !important;
	font-style: normal;
	font-weight: var(--font-w-normal);
	font-size: var(--s01);
	font-family: var(--font-plain);
	text-rendering: auto;
	color: var(--color-menubar-items);
	letter-spacing: normal;
	word-spacing: normal;
	line-height: 1.1;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: center;
	cursor: default;
	box-sizing: border-box;
	background-color: var(--color-graylight01);
	margin: 0;
	padding: .7em 1.5em !important;
	border-width: 1px;
	border-style: outset;
	border-color: var(--color-graylight02);
	border-image: initial;
	border-radius: 10px;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  
}


input, button {
/*	box-shadow: #32325d40 3px 5px 10px -3px, #0000004d 0 5px 16px -18px; */
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

input[type="text"],
input[type="password"],
input[type="email"], 
input[type="date"] {
  font-size: var(--s01);
  padding: var(--s-1) var(--s0);
  border: none;
  border-radius: 10px;
  background-color: var(--color-white);
  color: var(--color-text);
  width: 100%;
  box-sizing: border-box;
}

.form-group label {
  font-size: var(--s0);
  font-weight: var(--font-w-heavy);
  color: var(--color-text);
}

/* Removes the default browser focus ring/border */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus {
 	border-color: var(--color-graylight02);
	/*box-shadow: inset 1px 1px 2px #32325d40, inset -1px -1px 2px #fff;*/
	outline: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
  box-shadow: inset rgba(14, 30, 37, 0.2) 0px 2px 4px 0px, inset rgba(14, 30, 37, 0.4) 0px 2px 8px 0px;
}


input {
	border: 1px solid var(--color-gray);
	padding: 1rem;
	border-radius: 10px;
	font-size: var(--s01);
	display: block;
}

#input:placeholder-shown {
	text-overflow: ellipsis
}

input:-internal-autofill-selected {
  background-color: var(--color-white) !important;
}

button {
	color: var(--color-a)
}

button:hover {
	background-color: var(--color-graylight02);
	color: var(--color-a)
}

button a, a:visited {
	text-decoration: none
}

button:focus {
	background-color: var(--color-graylight01)
}

.button:hover, button:hover a, button:hover a:visited {
	text-decoration: none
}

button:active {
	transform-origin: 100% 50%;
	transform: scale(.99);
	transition: all .2s;
	box-shadow: inset #32325d40 -3px -5px 10px -3px, inset #0000014d 0 -5px 16px -18px
}

/* Styles the dropdown box itself (font size, padding, spacing) */
select {
    font-family: var(--font-plain);
    font-size: var(--s0); /* Adjust to your preferred size */
    padding: var(--s01), var(--s0); /* Adds breathing room inside the box */
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--color-graylight02);
    background-color: var(--color-white);
}

/* dropdown options text */
select option {
    font-family: var(--font-plain);
    font-size: var(--s0);
    padding: var(--s-2);
}

/* ----- end shadowing ----- */

.guide-container {
  background-color: var(--color-white);
/* (Handles Mobile, Tablet, and Desktop) */
  max-width: 80%;
  margin: 0 auto;
}

.home-guide-container {
    background-color: transparent;
/* (Handles Mobile, Tablet, and Desktop) */
  max-width: 100%;
  margin: 0 auto;
}

.wrapper {
  display: block; /* Ensures it behaves as a block-level element */
  width: 98%; /* Takes up all available space up to the limit */
  max-width: var(--measure); /* Your 69ch or preferred limit */
  margin: 0 auto; /* Centers it horizontally */
  padding: var(--s-5);
  background-color: var(--color-white);
}

.home-style {
  background-color: var(--color-dark);
}

.home-style .hero-content ul > li, .hero-content h1, .hero-content h2, .hero-content p {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
}

.home-wrapper {
    display: block; /* Ensures it behaves as a block-level element */
  width: 98%; /* Takes up all available space up to the limit */
  max-width: var(--measure); /* Your 69ch or preferred limit */
  margin: 0 auto; /* Centers it horizontally */
  padding: var(--s-5);
  background-color: transparent;
}

.home-wrapper h1, .home-wrapper h2 {
  color: var(--color-yellow02);
}

.home-wrapper a {
  color: var(--color-yellow02);
}

.home-wrapper a:hover {
  color: var(--color-a-hover);
  filter: brightness(5);
}

.wrapper.wide-grid {
  max-width: var(--wider-max-width);
}

/* Target any ordered list inside your wide wrapper container */
.wrapper.wide-grid ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem,1fr));
/* First value is row gap (between items vertically), second is column gap */
  gap: var(--s04) var(--s02);
  list-style: none; /* Removes numbers/bullets for a clean poster grid */
  padding-left: 0;  /* Removes default browser indentation */
  margin: var(--s02) 0;
}

/* Style the individual items inside that list */
.wrapper.wide-grid ol li {
  margin: 0; /* Resets default list margins */
  }

.wrapper.wide-grid ol li a {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  font-weight: var(--font-w-heavy);
  gap: var(--s-5);
  text-align: center;
  padding-top: var(--s03); /* Generates breathing room at the top of the card for the icon */
}

.wrapper.wide-grid ol li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--s03);
  height: var(--s03);
  background-color: var(--color-a);
  -webkit-mask: url('/assets/svg/camera.svg') no-repeat center / contain;
  mask: url('/assets/svg/camera.svg') no-repeat center / contain;
}

.wrapper.wide-grid ol li img {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--s-5);
  /* Forces the image to true black-and-white, stripping out the brown/sepia color cast */
/* filter: grayscale(100%) brightness(95%) contrast(105%); */
}

/* Note-taking textarea: 4 lines intrinsic height */
/* The Container: Handles spacing, background, and positioning */
.note-input-box {
  display: block;
  margin-top: var(--s0);
  margin-bottom: var(--s02);
  padding: 0px;
  background-color: var(--color-graylight01);
  border: none;
  border-radius: 4px;
}

/* The textarea: Handles the internal input mechanics */
.note-input-box textarea {
  display: block;
  width: 100%;
  padding: var(--s-1);
  /* Reserve space for the focus border using a transparent border */
  /* This ensures the box dimensions are the same before and after the click */
  border: 1px solid transparent;
  transition: border-color 0.2s ease; /* Makes the transition smooth */
  background: none;  /* Transparent so it matches the container's background */
  font: inherit;
  field-sizing: content;
  min-height: 8rem;
  resize: vertical;
  box-sizing: border-box;

}

/* Add your own intentional focus style that matches your design */
.note-input-box textarea:focus {
  /* For example, a thicker or different colored border instead of the blue ring */
  border-color: var(--color-gray); 
  outline: none;
  transform-origin: 100% 100%;
  transform: scale(1.01);
  transition: all 0.2s;
  box-shadow: 0 11px 44px -22px #32325d40, 0 5px 14px #32325d40;
  filter: drop-shadow(1px 2px 4px hsl(0deg 0% 75%));
 }

.note-input-box textarea::placeholder {
  color: var(--color-menubar-items); /* Or a lighter grey than your main text */
  font-style: italic; /* Often helps visually separate the placeholder from the actual student text */
}

/* The container controls the float and width, keeping it locked to the right */
.instructions-wrapper {
  width: 30ch;
  max-width: 100%;
  margin-left: var(--s01);
  margin-bottom: var(--s01);
  box-sizing: border-box;
}

/* The actual box styles cleanly contained inside */
.instructions {
  box-sizing: border-box;
  font-size: var(--s0);
  padding: var(--s0);
  background: var(--color-graylight01);
  border-radius: 4px;
  border: 1px solid var(--color-graylight02);
  color: var(--color-error);
}

.instructions summary {
  cursor: pointer;
  font-weight: var(--font-w-heavy);
}

.instructions ol {
  margin: var(--s-1) 0 0 var(--s01);
  padding-left: 0;
}

.instructions li {
  margin-bottom: var(--s-2);
}


@media (max-width: 600px) {
  .instructions {
    float: none;
    width: 100%;
  }
}

.instructions, 
.instructions * {
  font-size: var(--s0) !important;
  line-height: var(--line-height-normal);
}

/* Specifically clean up the list spacing inside the box */
.instructions ol {
  margin-top: var(--s-1);
  margin-bottom: 0;
  padding-left: var(--s01); /* Keeps the bullets/numbers from looking cramped */
}

.hero-banner {
  position: relative;
  min-height: 92vh; /* Takes up the majority of the viewport height */
  display: grid;
  place-items: center; /* Centers the content dead-center */
  overflow: hidden;
  text-align: center;
  color: var(--color-white);
}

/* Force video to fill the entire large area */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: scale-down;
  z-index: 1;
}

/* Dark cinematic overlay so text is crystal clear */
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent; 
  z-index: 2;
}

/* Content sits on top of video and overlay */
.hero-content {
  position: relative;
  z-index: 3;
  padding: var(--s02);
}

.hero-banner h1 {
  font-size: var(--s05); /* Scales nicely and aggressively large */
  margin: 0 0 var(--s-1) 0;
  color: var(--color-yellow02);
}

.hero-content main ul {
  display: inline-block;
  text-align: left;
  margin: var(--s01) auto;
  padding-left: 0;
  list-style-position: inside; /* Pulls the bullets inside the text boundary */
}

/* Optional inline button styling for your quick links */
.hero-nav {
  display: flex;
  gap: var(--s01);
  justify-content: center;
  margin-top: var(--s02);
}

.hero-nav a {
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: var(--s-1) var(--s01);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.hero.wrapper {
  background-color: transparent;
  background: transparent;
}
/* Accessibility: Stop video motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
  .hero-banner {
    background-color: var(--color-gray); /* Fallback solid color */
  }
}

.user-nav {
  position: absolute;
  top: var(--s04);
  right: var(--s08);
  z-index: 10;
  font-size: var(--s-1);
}

.user-nav a, .user-nav a {
  color: var(--color-yellow02);
  text-decoration: none;
}

.user-nav a:hover {
   color: var(--color-a-hover);
  filter: brightness(5);
}

.form-group {
  padding: 0 0 var(--03) 0;
}

/* 1. Kill the global pseudo-element on the homepage */
.hero-content.home-wrapper ul > li::before {
    content: none !important;
}

/* 2. Clean list resets applied once to the parent UL and its items */
.hero-content.home-wrapper ul {
    list-style-type: none;
    padding-left: 0;
}

.hero-content.home-wrapper ul > li {
    padding-left: 0 !important;
    list-style-type: none !important;
    margin: var(--s0) 0;
}

/* 3. Utility list flex layout */
.hero-content .utility-list {
    display: flex;
    justify-content: center;
    gap: var(--s02);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 4. Link typography, sizing, and colors */
.hero-content.home-wrapper ul li a {
    font-size: var(--s02);
    color: var(--color-yellow02);
    text-decoration: none;
}

.hero-content.home-wrapper ul li a:hover {
    color: var(--color-a-hover);
    filter: brightness(5);
}

/* 5. SVG sizing and styling */
.hero-content.home-wrapper ul li svg,
.hero-content.home-wrapper ul li .list-icon {
    width: var(--s05);
    height: var(--s05);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    vertical-align: middle;
    /* margin-right: 0.5rem; */
}

/* Target the path elements directly inside the SVG */
.hero-content.home-wrapper ul li svg .camera-structure {
    stroke: var(--color-white) !important;
    stroke-width: 10px !important;
}

.hero-content.home-wrapper ul li svg .camera-gap {
    stroke: transparent !important;
}


/* tactile settings */

a, .tg img {
  /* This ensures the scaling happens smoothly */
  display: inline-block; 
  transition: transform 0.15s ease-out, color 0.15s ease-out;
  transform-origin: center;
}

/* Hover effect */
a:hover {
  transform: scale(1.08);
}

/* Click effect */
a:active {
  transform: scale(0.96); /* Slight "press-in" feel */
}

/* --- THE FOURTH LEVEL: CINEMA / GIANT SCREEN SCALE --- */
/* Targets ultra-high-resolution displays and large presentation screens (4K, 6K, 8K) */
/* "only screen" explicitly prevents these giant viewports from bleeding into your print styles */
@media only screen and (min-width: 2560px) {
  .guide-container {
    max-width: 75vw; /* Expands nicely across the vast landscape of an ultra-wide/IMAX viewport */
  }

  :root {
    /* Explicitly re-bind the root font-size to scale dynamically with the screen width */
    font-size: 1.25vw; 
    
    /* Recalculate your step variables using purely responsive percentages so the type hierarchy stays proportional */
    --s-1: 0.9vw;
    --s0:  1.25vw;
    --s1:  1.6vw;
    --s2:  2.1vw;
    --s3:  2.8vw;
    --s4:  3.8vw;
    --s5:  5.0vw;
  }
  
  /* Fix image scaling for ultra-wide screens so they don't look like postage stamps */
  img {
    max-width: 45vw;
  }
}

/* styling for the About and Info me pages */

.personal-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bio-layout {
   margin-top: var(--s-1);
}

.bio-image-cluster {
  float: right;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: var(--s-2);
  margin-bottom: var(--s-3);
}

/* Forces the image to strictly obey your sizing limits */
.bio-image {
  max-width: 150px;
  width: 100%
}

.bio-image img {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  height: auto;
  display: block;
  border: 1px solid var(--color-border);
  box-shadow: -4px 4px 0px var(--color-gray);
  margin-top: var(--s-3);
}

svg.starburst-icon {
  width: var(--s05);  /* Adjust size as you like */
  height: var(--s05);
  fill: var(--color-a-hover);
  color: var(--color-a-hover);
}

/* Ensures the text container clears the float properly */
.bio-text p {
  overflow: hidden; 
  margin-bottom: var(--s01);
}

/* styling for the sessions page */

.wide-grid ol {
  display: grid;
  /* Using 16rem (roughly 250px depending on root settings) instead of hard pixels */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s01);
  list-style: none;
  padding: 0;
  margin: var(--s02) 0;
}

/* Style the link and image inside */
ol li a {
  display: block;
  text-decoration: none;
  color: inherit;
}

ol li img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--s-1); /* Spacing between the image and the text title */
}

.session01  {
  color: var(--color-session01);
}

.wrapper.session01 h1 {
    color: var(--color-session01);
}
.session01.wrapper.wide-grid ol li a::before {
  background-color: var(--color-session01);
}

.session02 {
  color: var(--color-session02);
}

.wrapper.session02 h1 {
    color: var(--color-session02);
}

.session02.wrapper.wide-grid ol li a::before {
  background-color: var(--color-session02);
}

.session03 {
  color: var(--color-session03);
}

.wrapper.session03 h1 {
    color: var(--color-session03);
}

.session03.wrapper.wide-grid ol li a::before {
  background-color: var(--color-session03);
}

/* --- THE ULTIMATE CONSOLIDATED PRINT OVERRIDE SYSTEM --- */
@media print {
  @page {
    margin: 0.5in; 
  }
  
  /* Hard reset on base sizes for printing */
  :root {
    font-size: 11pt; 
    --s-2: 8pt;
    --s-1: 9.5pt;
    --s0:  11pt;    
    --s1:  13pt;    
    --s2:  15pt;    
    --s3:  18pt;    
    --s4:  20pt;
    --s5:  22pt;    
  }

  /* 1. NUCLEAR RESET: Completely flattens layout contexts so breaks can function */
  html, body, .guide-container, .wrapper, .stack {
    display: block !important;
    float: none !important;
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  h1, h2, h3, h4, h5, h6 {
    display: block !important;
    clear: both !important;
    color: #000 !important;
  }

  /* 2. HEADING PROTECTION: Keeps headings absolutely glued to the text below them */
  h1, h2, h3, h4, h5, h6, hr {
    page-break-inside: avoid; 
    break-inside: avoid;      
    page-break-after: avoid !important;  
    break-after: avoid !important;       
  }

  /* Ensure stacked headings (like an h4 right after an h3) never split */
  h2 + h3, h3 + h4, h4 + h5 {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }

  /* Force the element immediately following any heading to stay on the same page */
  h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }

  /* 3. FLUID SPLITS: Allows lists and normal paragraphs to split across page lines naturally */
  ul, ol, li {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* Paragraphs MUST be allowed to split, otherwise they pull headings down with them */
  p {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* 4. SOLID BLOCKS: Only keep elements that absolutely cannot split intact */
  table, img {
    page-break-inside: avoid; 
    break-inside: avoid;      
  }
  
  img {
    max-width: 60%;
    height: auto;
    object-fit: scale-down;
  }

 .wrapper {
    width: 100%;                    /* Use the full printable area */
    max-width: none;                /* Remove the web limit */
    margin: 0;
    padding: 0;
  }

 /* Prevent a page break immediately after an h2 or h3 */
  h2, h3, h4 {
    break-after: avoid;
  }

  .note-input-box {
    margin-bottom: 2rem !important;
    /* This ensures the entire container and its contents stay together */
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  
  .note-input-box textarea {
    height: auto !important;
    overflow: visible !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: var(--s-1);
    /* for text wrapping and flow */
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .instructions {
    display: none !important;
  }

  .breadcrumb {
    display: none !important;
  }

  /* 5. MANUAL OVERRIDE HELPER: Use class="print-force-drop" to manually force a break */
  .print-force-drop {
    page-break-before: always !important; 
    break-before: page !important;        
  }
}