/* ===================================================================
   CONTRABAND CODING — instructor site design system
   Concept: an intelligence "case file" cover — kraft paper, typewriter
   stamps, redacted bars, folder tabs. Reads underground/heist, but
   built with clean modern dev-portfolio structure underneath.

   NOTE FOR STUDENTS: every declaration below has a comment to its
   right explaining what that one line does. Read top to bottom —
   the file is organized in the same order the page reads: fonts,
   global resets, header/nav, hero, content sections, footer, mobile.
   =================================================================== */

/* Pulls in three Google Fonts we reference later via the --font-* variables */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* :root holds custom properties (CSS variables) usable anywhere with var(--name) */
:root {
  --paper: #eee3c8;         /* base kraft/manila page background color */
  --paper-raised: #e2d3ac;  /* slightly darker surface for cards / folder tabs */
  --paper-deep: #d6c396;    /* darkest paper tone, used for pressed/callout surfaces */
  --ink: #211d17;           /* near-black warm color used for all main text */
  --ink-soft: #4a4136;      /* lighter ink for secondary/supporting text */
  --stamp: #a5332a;         /* classified-stamp red, the main accent color */
  --stamp-dark: #7c231c;    /* darker red for hover/active states */
  --signal: #2e5e46;        /* terminal-green accent for links */
  --tape: #c99a3c;          /* mustard "redacted tape" accent for small labels */
  --line: rgba(33, 29, 23, 0.18);        /* faint border color for quiet dividers */
  --line-strong: rgba(33, 29, 23, 0.35); /* darker border color for visible outlines */
  --shadow: 0 6px 18px rgba(33, 29, 23, 0.18); /* reusable drop-shadow for raised cards */

  --font-stamp: 'Special Elite', 'Courier New', monospace; /* typewriter font for headlines/stamps */
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;  /* monospace font for labels/nav/code-ish text */
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;     /* main readable font for paragraphs */
}

/* Universal selector: applies to every element on the page */
* {
  box-sizing: border-box; /* padding/border are included IN the element's width, not added on top */
}

html {
  scroll-behavior: smooth; /* animates jumps to #anchor links instead of snapping instantly */
}

body {
  margin: 0;                                  /* removes the browser's default page margin */
  background-color: var(--paper);             /* sets the page background to our kraft-paper color */
  background-image: radial-gradient(rgba(33,29,23,0.05) 1px, transparent 1px); /* adds a subtle dot-grain texture */
  background-size: 3px 3px;                   /* controls how tightly packed the texture dots are */
  color: var(--ink);                          /* default text color for the whole page */
  font-family: var(--font-body);              /* default typeface for the whole page */
  line-height: 1.55;                          /* space between lines of text, for readability */
  -webkit-font-smoothing: antialiased;        /* smooths font edges on WebKit browsers (Safari/Chrome) */
}

a {
  color: var(--signal);          /* default link color (terminal green) */
  text-decoration: none;         /* removes the default underline from links */
}
a:hover,
a:focus-visible {
  text-decoration: underline;    /* re-adds the underline only on hover/keyboard focus, as a signal */
}

:focus-visible {
  outline: 2px solid var(--stamp);  /* visible focus ring for keyboard users, in stamp red */
  outline-offset: 3px;              /* pushes the ring out slightly so it doesn't touch the element */
}

img {
  max-width: 100%;  /* images never overflow their container, no matter the source size */
  display: block;   /* removes the small default gap under inline images */
}

/* .wrap centers content and caps its width — used inside sections that need it */
.wrap {
  max-width: 1100px;    /* content never gets wider than this, for readability on big screens */
  margin: 0 auto;       /* centers the block horizontally */
  padding: 0 24px;      /* keeps content off the edges on smaller screens */
}

/* ---------------- Header / navigation (folder tabs) ---------------- */

.site-header {
  position: sticky;                    /* header sticks to the top instead of scrolling away */
  top: 0;                              /* sticks exactly at the top edge of the viewport */
  z-index: 50;                         /* keeps the header above other page content while sticky */
  background: var(--paper);            /* matches page background so sticky header doesn't look pasted on */
  border-bottom: 2px solid var(--ink); /* solid line separating header from page content */
}

.nav-bar {
  display: flex;                    /* lays logo, toggle button, and nav out in a row */
  align-items: center;              /* vertically centers everything in that row */
  justify-content: space-between;   /* pushes logo to the left and nav/toggle to the right */
  padding: 14px 24px;                /* breathing room inside the header bar */
  max-width: 1100px;                 /* matches the .wrap content width */
  margin: 0 auto;                    /* centers the bar horizontally */
}

.brand {
  font-family: var(--font-stamp);   /* uses the typewriter font for the logo text */
  font-size: 1.15rem;                /* logo text size */
  letter-spacing: 0.5px;             /* slight spacing between logo letters */
  color: var(--ink);                 /* logo text color */
}
.brand span {
  color: var(--stamp); /* colors just the "//" divider inside the logo in stamp red */
}

.nav-toggle {
  display: none;                       /* hidden by default; shown only on mobile (see media query) */
  background: none;                    /* no fill, so it looks like an outline button */
  border: 2px solid var(--ink);        /* visible outline so it reads as a clickable button */
  border-radius: 3px;                  /* slightly rounded corners */
  padding: 6px 10px;                   /* clickable padding around the "MENU" label */
  font-family: var(--font-mono);       /* monospace label to match the nav style */
  cursor: pointer;                     /* shows a pointer cursor on hover */
  color: var(--ink);                   /* text color of the button label */
}

.nav-links {
  display: flex;      /* lays nav links out in a horizontal row on desktop */
  gap: 4px;            /* small space between each nav "tab" */
  list-style: none;    /* removes the bullet points from the <ul> */
  margin: 0;           /* removes default list margin */
  padding: 0;          /* removes default list padding */
  flex-wrap: wrap;     /* lets tabs wrap to a second line if the window is narrow */
}

.nav-links a {
  display: inline-block;             /* lets padding/border apply properly to the link */
  font-family: var(--font-mono);     /* monospace font, like a filed label */
  font-size: 0.82rem;                 /* nav link text size */
  text-transform: uppercase;         /* forces link text to all caps */
  letter-spacing: 0.06em;             /* spaces out the capital letters for readability */
  color: var(--ink);                  /* default nav link text color */
  background: var(--paper-raised);   /* gives each link a "tab" background */
  border: 1px solid var(--line-strong); /* outlines the tab shape */
  border-bottom: none;                /* removes bottom border so it visually merges into the header */
  border-radius: 5px 5px 0 0;         /* rounds only the top corners, like a real folder tab */
  padding: 8px 12px 7px;              /* clickable padding inside each tab */
  position: relative;                 /* allows the "top" offset below to nudge it */
  top: 1px;                            /* nudges tab down 1px so its border lines up with the header's border-bottom */
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: var(--paper-deep);   /* darkens the tab background on hover/focus */
  text-decoration: none;           /* keeps the underline off even on hover, tab styling is the feedback */
  color: var(--stamp-dark);        /* switches text to dark red on hover/focus */
}

.nav-links a.current {
  background: var(--ink);   /* fills the "current page" tab solid dark, so it stands out */
  color: var(--paper);      /* flips text to light so it stays readable on the dark fill */
  border-color: var(--ink); /* matches border to the fill color */
}

/* ---------------- Hero (page opener) ---------------- */

.hero {
  position: relative;                     /* lets us position child elements relative to this box later if needed */
  padding: 76px 24px 64px;                 /* generous space above/below/sides for the opening section */
  border-bottom: 2px solid var(--ink);     /* divider line under the hero */
  overflow: hidden;                        /* clips anything (like the rotated stamp) that pokes outside the box */
}

.hero-inner {
  max-width: 1100px;                                  /* caps hero content width, matching the rest of the page */
  margin: 0 auto;                                     /* centers the hero content */
  display: grid;                                      /* lays out the text block and photo/stamp cluster side by side */
  grid-template-columns: 1fr auto;                     /* text takes remaining space, media column takes only what it needs */
  gap: 40px;                                           /* space between the text block and the media column */
  align-items: start;                                  /* aligns both columns to the top */
}

/* .hero-media groups the photo and the stamp so the stamp can overlap the photo's corner */
.hero-media {
  position: relative;    /* lets the .stamp inside be positioned absolutely against this box */
  justify-self: end;      /* pushes the whole cluster to the right edge of its grid column */
}

/* .photo-frame is the "attached case-file photo" — a rotated, taped-on portrait */
.photo-frame {
  width: 300px;                          /* fixed frame width so the layout stays predictable */
  background: var(--paper-raised);       /* frame "paper" color behind the photo */
  border: 1px solid var(--line-strong);  /* thin outline around the whole frame */
  padding: 10px 10px 14px;                /* inner margin around the photo, extra at the bottom for the caption */
  box-shadow: var(--shadow);             /* drop shadow so the frame lifts off the page like a real print */
  transform: rotate(3deg);               /* slight rotation, like a photo clipped in at an angle */
  margin: 0;                              /* removes the default <figure> margin */
}

.photo-frame img {
  width: 100%;                                 /* photo fills the frame's inner width */
  aspect-ratio: 4 / 5;                          /* keeps a consistent portrait shape regardless of source image */
  object-fit: cover;                            /* crops the photo to fill that shape without distorting it */
  border: 1px solid var(--ink);                 /* thin dark border directly around the photo itself */
  filter: grayscale(35%) sepia(12%) contrast(1.02); /* mutes the color so the photo matches the kraft-paper palette */
}

.photo-frame figcaption {
  font-family: var(--font-mono);   /* monospace, matching the "filed evidence" label style used elsewhere */
  font-size: 0.68rem;               /* small caption text size */
  letter-spacing: 0.06em;           /* slightly spaced-out lettering */
  text-transform: uppercase;       /* forces caption text to all caps */
  color: var(--ink-soft);           /* softer text color for the caption */
  text-align: center;               /* centers the caption under the photo */
  padding-top: 8px;                 /* space between the photo and its caption */
}

/* ::before/::after fake two strips of tape holding the top corners of the photo frame down */
.photo-frame::before,
.photo-frame::after {
  content: "";                       /* required for generated content to render, even though it's empty */
  position: absolute;                /* takes the tape out of flow so it can overlap the frame's edge */
  width: 46px;                        /* tape strip length */
  height: 18px;                       /* tape strip thickness */
  background: var(--tape);           /* mustard "tape" color */
  opacity: 0.75;                      /* slightly see-through, like real translucent tape */
  box-shadow: var(--shadow);         /* faint shadow so the tape reads as sitting above the photo */
}
.photo-frame::before {
  top: -9px;                /* positions this strip so it overlaps the top edge of the frame */
  left: 8px;                 /* offsets it in from the left edge */
  transform: rotate(-8deg); /* angles the tape strip, like it was pressed on by hand */
}
.photo-frame::after {
  top: -9px;                 /* matches the other strip's vertical position */
  right: 8px;                 /* offsets it in from the right edge instead */
  transform: rotate(6deg);   /* angles this strip the opposite way, for a less uniform look */
}

/* ---------------- Sub-page header (lighter version of the homepage hero) ---------------- */

/* ---------------- Bio layout (text card + media side by side) ---------------- */

.bio-layout {
  display: flex;         /* lays the bio card and the media frame side by side */
  gap: 24px;               /* space between the text card and the image */
  align-items: flex-start; /* keeps both items aligned to the top, even if one is taller */
  flex-wrap: wrap;         /* lets the image drop below the text on narrow screens */
}

.bio-layout .folder {
  flex: 1 1 380px;  /* text card grows/shrinks but won't go below ~380px before wrapping */
}

/* .media-frame is a simple rounded, drop-shadowed frame for photos/GIFs dropped into body content */
.media-frame {
  flex: 1 1 100px;  /* image column grows/shrinks but won't go below ~300px before wrapping */
  margin: 0;          /* removes the default <figure> margin */
}

.cert-badge {
  position: absolute;                                     /* takes the badge out of the normal flow */
  top: -6px;                                                /* nudges it up to align with the file-meta tag */
  right: 0;                                                  /* pins it to the right edge of the header */
  width: 200px;                                              /* fixed badge size */
  height: auto;                                              /* keeps the badge's natural aspect ratio */
  filter: drop-shadow(0 6px 14px rgba(33, 29, 23, 0.28));   /* shadow that follows the badge's shape */
}
.media-frame img {
  width: 100%;                    /* image fills the width of its flex column */
  display: block;                  /* removes the small default gap under inline images */
  border-radius: 14px;             /* slightly rounded corners, as requested */
  box-shadow: var(--shadow);      /* drop shadow so the image lifts off the page */
  border: 1px solid var(--line-strong); /* thin outline so the rounded edge reads clearly against the paper */
}

.page-header {
  padding: 52px 24px 40px;                 /* smaller top/bottom padding than the full homepage hero */
  border-bottom: 2px solid var(--ink);     /* matches the hero's divider line, for visual consistency */
}

.page-header .wrap {
  max-width: 1100px;   /* keeps header text aligned with the rest of the page content */
  margin: 0 auto;       /* centers the header content */
  padding: 0;           /* padding is already handled by .page-header itself */
  position: relative;   /* gives the badge below something to position itself against */
}

.page-header h1 {
  font-family: var(--font-stamp);           /* typewriter font, matching every other page heading */
  font-size: clamp(1.9rem, 4.2vw, 2.8rem);  /* responsive size, a step down from the homepage h1 */
  margin: 0 0 10px;                          /* removes default margin, adds space below only */
}

.page-header p.lede {
  max-width: 62ch;         /* limits line length for comfortable reading */
  color: var(--ink-soft);  /* softer color for supporting text, matching the hero summary style */
  font-size: 1rem;          /* lede paragraph text size */
  margin: 0;                /* removes default paragraph margin */
}

/* ---------------- Module cards (used on individual course pages) ---------------- */

/* .module-grid reuses the same responsive grid pattern as .video-grid */
.module-grid {
  display: grid;                                            /* responsive grid layout for module cards */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* as many columns as fit, min 280px each */
  gap: 20px;                                                 /* spacing between module cards */
}

/* .module-card is a light "folder" style card (like .folder) so the title/description text stays readable */
.module-card {
  background: var(--paper-raised);       /* card surface color, matching .folder */
  border: 1px solid var(--line-strong);  /* visible card outline, matching .folder */
  border-radius: 3px;                     /* slightly rounded card corners */
  padding: 22px 20px 20px;                 /* inner spacing, matching .folder */
  box-shadow: var(--shadow);              /* soft drop shadow so the card feels "raised" off the page */
}

.module-card h3 {
  margin: 0 0 8px;                 /* removes default heading margin, adds space below */
  font-family: var(--font-body);   /* readable body font, matching .folder h3 */
  font-weight: 700;                 /* bold weight to stand out as a heading */
  font-size: 1.08rem;               /* module title size */
}

.module-desc {
  margin: 0 0 16px;         /* removes default paragraph margin, adds space below before the videos */
  color: var(--ink-soft);   /* softer text color for supporting copy, matching .folder p */
  font-size: 0.94rem;        /* description text size */
}

/* .module-video-block groups one video with its own label into a mini dark "screen" */
.module-video-block {
  border-radius: 4px;             /* slightly rounded corners for the mini video block */
  /*overflow: hidden; */              /* clips the video/label to those rounded corners */
  box-shadow: var(--shadow);      /* soft drop shadow, lifting each block off the card */
  margin-bottom: 12px;             /* space below each block, separating it from the next */
  margin-left: -2px;   /* cancels the card's left padding so the video reaches the edge */
  margin-right: -2px;  /* cancels the card's right padding on the other side */
}
.module-video-block:last-child {
  margin-bottom: 0; /* removes the extra gap after the final video block in a card */
}
.video-embed {
  border-radius: 4px 4px 0 0;  /* rounds just the top corners, since the video sits above the caption */
  overflow: hidden;             /* clips the iframe itself, not the whole block */
}
.module-video-block figcaption {
  background: var(--ink);          /* dark bar under the video, matching .video-card's caption style */
  color: var(--paper);              /* light text so it reads against the dark bar */
  font-family: var(--font-mono);   /* monospace caption style, matching every other label in the system */
  font-size: 0.76rem;                /* caption text size */
  letter-spacing: 0.03em;            /* slight letter spacing for readability */
  text-transform: uppercase;        /* forces the label to all caps, so it reads as a tag ("LESSON VIDEO") */
  padding: 7px 12px;                 /* padding inside the caption bar */
  transition: opacity 0.15s ease;  /* smoothly fades the caption in/out instead of an abrupt snap */
}

.module-video-block:hover figcaption {
  opacity: 100;  /* hides the caption while hovering the video, so it doesn't crowd the player's own controls */
}
/* .module-resources holds any remaining non-video resource links (e.g. Slides) */
.module-resources {
  display: flex;      /* lays the resource links out in a row */
  flex-wrap: wrap;      /* lets links wrap onto a second line on narrow cards */
  gap: 8px;              /* space between each resource link */
  margin-top: 14px;      /* space above, separating it from the last video block */
}

.module-resources a {
  font-family: var(--font-mono);  /* monospace link style, matching .folder a.file-link */
  font-size: 0.82rem;              /* link text size */
  color: var(--signal);            /* terminal-green, matching every other link on the page */
}

/* ---------------- Record list (used for Education / Certifications entries) ---------------- */

.record-list {
  margin: 0;    /* removes the default <dl> margin so spacing is controlled by the parent card */
  padding: 0;    /* removes default <dl> padding */
}

.record-list dt {
  font-family: var(--font-mono);   /* monospace label, matching the "filed record" theme */
  font-size: 0.72rem;               /* small label size */
  letter-spacing: 0.08em;           /* spaced-out lettering for the label */
  text-transform: uppercase;       /* forces the label to all caps */
  color: var(--ink-soft);           /* softer color since it's a label, not the main content */
  margin-top: 14px;                 /* space above each new label, separating record groups */
}
.record-list dt:first-child {
  margin-top: 0; /* removes the extra top space on the very first label in the list */
}

.record-list dd {
  margin: 4px 0 0;    /* small space below the label, no left indent (overrides the browser default) */
  font-size: 0.98rem;  /* record entry text size */
  color: var(--ink);   /* main ink color, since this is the actual content, not a label */
}

/* ---------------- Interest tags (used for the "Outside the Classroom" section) ---------------- */

.tag-list {
  display: flex;       /* lays tags out in a row that can wrap */
  flex-wrap: wrap;      /* allows tags to wrap onto multiple lines on narrow screens */
  gap: 8px;              /* space between individual tags */
  list-style: none;    /* removes bullet points from the <ul> */
  margin: 0;            /* removes default list margin */
  padding: 0;            /* removes default list padding */
}

.tag-list li {
  font-family: var(--font-mono);       /* monospace, matching the tape/label style elsewhere */
  font-size: 0.78rem;                   /* tag text size */
  letter-spacing: 0.04em;               /* slight letter spacing for readability */
  background: var(--paper-deep);       /* tag background, using the darkest paper tone */
  border: 1px solid var(--line-strong); /* thin outline around each tag */
  border-radius: 3px;                   /* slightly rounded tag corners */
  padding: 6px 11px;                     /* clickable/readable padding inside each tag */
  color: var(--ink);                     /* tag text color */
}

.file-meta {
  font-family: var(--font-mono);        /* monospace, like a stamped file number */
  font-size: 0.78rem;                    /* small label text size */
  color: var(--ink-soft);                /* softer text color, since it's secondary info */
  letter-spacing: 0.08em;                /* spaced-out lettering for a "stamped" feel */
  text-transform: uppercase;             /* forces all caps */
  margin-bottom: 18px;                   /* space below before the big headline */
  border: 1px solid var(--line-strong);  /* thin outline box around the label */
  display: inline-block;                 /* lets the border wrap tightly around just the text */
  padding: 5px 10px;                     /* padding inside the outline box */
}

.hero h1 {
  font-family: var(--font-stamp);           /* typewriter font for the name/headline */
  font-size: clamp(2.1rem, 5vw, 3.4rem);    /* responsive size: scales with viewport, within min/max limits */
  line-height: 1.1;                          /* tight line spacing appropriate for a large headline */
  margin: 0 0 14px;                          /* removes default margin, adds space below only */
}

.hero .role {
  font-family: var(--font-mono);   /* monospace, matches the "system label" feel */
  font-size: 1.05rem;               /* role/title text size */
  color: var(--signal);             /* terminal-green, ties this line to the accent color */
  margin: 0 0 20px;                 /* space below before the summary paragraph */
}

.hero p.summary {
  max-width: 56ch;         /* limits line length to ~56 characters for readability */
  color: var(--ink-soft);  /* softer text color for body copy */
  font-size: 1.02rem;       /* summary paragraph text size */
  margin: 0 0 28px;         /* space below before the action buttons */
}

.hero-actions {
  display: flex;     /* lays the two buttons out side by side */
  gap: 12px;           /* space between the buttons */
  flex-wrap: wrap;     /* lets buttons stack on very narrow screens */
}

.btn {
  font-family: var(--font-mono);     /* monospace label, matches nav/tag styling */
  font-size: 0.85rem;                 /* button label size */
  text-transform: uppercase;         /* forces button text to all caps */
  letter-spacing: 0.05em;             /* slight spacing for the caps text */
  padding: 11px 18px;                 /* clickable padding inside the button */
  border: 2px solid var(--ink);       /* solid outline, doubles as the button shape */
  border-radius: 3px;                 /* slightly rounded corners */
  display: inline-block;              /* lets a link behave like a button box */
  background: var(--ink);             /* solid dark fill for the primary button */
  color: var(--paper);                /* light text so it reads against the dark fill */
}
.btn:hover,
.btn:focus-visible {
  background: var(--stamp-dark);     /* switches fill to dark red on hover/focus */
  border-color: var(--stamp-dark);   /* matches border to the new fill color */
  text-decoration: none;             /* prevents the global link underline from also appearing */
  color: var(--paper);               /* keeps text light and readable */
}

.btn.ghost {
  background: transparent;  /* removes the fill, so only the outline shows */
  color: var(--ink);        /* dark text since there's no dark background anymore */
}
.btn.ghost:hover,
.btn.ghost:focus-visible {
  background: var(--ink);   /* fills solid dark on hover, like the primary button */
  color: var(--paper);      /* flips text light to stay readable on the new dark fill */
}

/* .stamp is the page's signature element: a rotated "verified" stamp graphic */
.stamp {
  position: absolute;                 /* takes the stamp out of flow so it can overlap the photo below */
  bottom: -18px;                       /* nudges the stamp down so it overlaps the photo's bottom edge */
  right: -22px;                        /* nudges the stamp right so it overlaps the photo's right edge */
  transform: rotate(-11deg);          /* rotates the whole stamp slightly, like a real ink stamp */
  border: 4px double var(--stamp);    /* thick double-line border, mimicking a stamp's ink outline */
  color: var(--stamp);                /* stamp text color */
  font-family: var(--font-stamp);     /* typewriter font for the stamp text */
  text-transform: uppercase;          /* forces stamp text to all caps */
  text-align: center;                 /* centers the text inside the stamp box */
  padding: 14px 16px;                  /* padding inside the stamp border */
  border-radius: 6px;                  /* slightly rounded stamp corners */
  font-size: 1rem;                     /* main stamp text size */
  letter-spacing: 0.12em;              /* wide letter spacing for a bold stamped look */
  opacity: 0.88;                       /* slightly transparent, like real stamp ink */
  white-space: nowrap;                 /* keeps the stamp text on one line */
  mix-blend-mode: multiply;            /* blends the stamp color with what's behind it, like real ink on paper */
}
.stamp small {
  display: block;                  /* forces the small text onto its own line inside the stamp */
  font-family: var(--font-mono);   /* switches to monospace for the fine-print line */
  font-size: 0.6rem;                /* small fine-print size */
  letter-spacing: 0.1em;            /* spacing to match the stamp's bold lettering */
  margin-top: 4px;                  /* small gap above the fine print */
}

/* ---------------- Generic content section shell ---------------- */

section.block {
  padding: 56px 24px;              /* consistent spacing for every content section */
  border-bottom: 1px solid var(--line); /* faint divider between sections */
}

.block-head {
  display: flex;                    /* lays the heading, index label, and "see all" link in a row */
  align-items: baseline;             /* aligns text baselines even though font sizes differ */
  justify-content: space-between;    /* pushes heading left, extra links right */
  gap: 16px;                          /* space between items if they wrap */
  margin-bottom: 28px;                /* space below the header, before the section's content */
  flex-wrap: wrap;                    /* allows wrapping on narrow screens */
}

.block-head h2 {
  font-family: var(--font-stamp);  /* typewriter font, consistent with the hero headline */
  font-size: 1.5rem;                /* section heading size */
  margin: 0;                        /* removes default heading margin so spacing is controlled by .block-head */
}

.tag-index {
  font-family: var(--font-mono);   /* monospace "file index" label style */
  font-size: 0.75rem;               /* small label size */
  color: var(--ink-soft);           /* softer color since it's a secondary label */
  letter-spacing: 0.08em;            /* spaced-out lettering */
}

.see-all {
  font-family: var(--font-mono);  /* matches the monospace label style */
  font-size: 0.82rem;              /* link text size */
  white-space: nowrap;             /* keeps "See all →" from breaking across lines */
}

/* ---------------- Folder cards (used for About / Courses) ---------------- */

.folder-grid {
  display: grid;                                          /* lays folder cards out in a responsive grid */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* as many columns as fit, each at least 240px wide */
  gap: 20px;                                               /* spacing between cards */
}

.folder {
  position: relative;                      /* lets the ::before "tab" position itself against this card */
  background: var(--paper-raised);         /* card surface color, slightly darker than the page */
  border: 1px solid var(--line-strong);    /* visible card outline */
  border-radius: 3px;                      /* slightly rounded card corners */
  padding: 22px 20px 20px;                  /* inner spacing, a bit less on top to make room for the tab */
  box-shadow: var(--shadow);               /* soft drop shadow so the card feels "raised" off the page */
  transition: transform 0.15s ease;        /* smoothly animates the hover lift below */
}
.folder:hover {
  transform: translateY(-3px); /* lifts the card slightly upward on hover, for interactivity feedback */
}

.folder::before {
  content: attr(data-tab);             /* pulls the tab label from the card's data-tab="" attribute */
  position: absolute;                  /* takes the tab out of normal flow so it can sit above the card */
  top: -14px;                           /* positions the tab so it overlaps the top edge of the card */
  left: 18px;                           /* offsets the tab in from the left edge */
  background: var(--ink);              /* solid dark fill for the folder-tab label */
  color: var(--paper);                 /* light text so it reads against the dark tab */
  font-family: var(--font-mono);       /* monospace, matches the filed/labeled aesthetic */
  font-size: 0.68rem;                   /* small tab label size */
  letter-spacing: 0.08em;               /* spaced-out lettering */
  padding: 4px 9px;                     /* padding inside the tab shape */
  border-radius: 3px 3px 0 0;           /* rounds only the top corners, like a real tab */
  text-transform: uppercase;           /* forces tab text to all caps */
}

.folder h3 {
  margin: 6px 0 8px;              /* small space above (clears the tab) and below the heading */
  font-family: var(--font-body);  /* readable body font, not the display font, since this is card content */
  font-weight: 700;                /* bold weight to stand out as a heading */
  font-size: 1.08rem;              /* card heading size */
}
.folder p {
  margin: 0 0 14px;         /* removes default margin, adds space below before the link */
  color: var(--ink-soft);   /* softer text color for card body copy */
  font-size: 0.94rem;        /* card paragraph text size */
}
.folder a.file-link {
  font-family: var(--font-mono);  /* monospace link style, matches the filed-document theme */
  font-size: 0.82rem;              /* link text size */
}
.folder a.file-link::after {
  content: " →";  /* automatically appends an arrow after every "file link", without editing the HTML */
}
.folder img, .folder video, .folder iframe {
  max-width: 100%;
  height: auto;
}
.folder, .module-card, .video-card {
  min-width: 0;   /* overrides Grid's default min-width:auto, so this card can shrink below the
                      iframe's own intrinsic size instead of forcing the grid track wider — this is
                      what was overflowing specifically on real mobile WebKit, not desktop dev tools */
}

/* ---------------- Video grid ---------------- */

.video-grid {
  display: grid;                                            /* responsive grid layout for video cards */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* as many columns as fit, min 260px each */
  gap: 20px;                                                 /* spacing between video cards */
}

.video-card {
  background: var(--ink);        /* dark card background, framing the video like a screen */
  border-radius: 4px;             /* slightly rounded card corners */
  overflow: hidden;               /* clips the video/caption to the card's rounded corners */
  box-shadow: var(--shadow);      /* soft drop shadow to match other raised cards */
}

.video-embed {
  position: relative;    /* lets the iframe below position itself against this box */
  width: 100%;             /* embed fills the full width of its card */
  padding-top: 56.25%;    /* creates a 16:9 aspect-ratio box (9 / 16 = 0.5625) using padding */
  background: #0c0b09;    /* near-black placeholder color shown before/if the video loads */
}
.video-embed iframe {
  position: absolute;  /* takes the iframe out of flow so it can fill the aspect-ratio box exactly */
  inset: 0;              /* shorthand for top/right/bottom/left: 0, stretching it to fill the box */
  width: 100%;           /* iframe fills the box's full width */
  height: 100%;          /* iframe fills the box's full height */
  border: 0;              /* removes the default iframe border */
}

.video-card figcaption {
  padding: 12px 14px;              /* spacing around the caption text */
  color: var(--paper);             /* light text color, readable against the dark card */
  font-family: var(--font-mono);   /* monospace caption style */
  font-size: 0.8rem;                /* caption text size */
  letter-spacing: 0.03em;           /* slight letter spacing for readability */
}

/* ---------------- Redacted strip / callout (used for the live demo section) ---------------- */

.redacted {
  background: var(--paper-deep);          /* darkest paper tone, to visually set this callout apart */
  border: 1px dashed var(--line-strong);  /* dashed border, echoing a "redacted/cut here" look */
  border-radius: 3px;                      /* slightly rounded corners */
  padding: 22px;                           /* inner spacing */
  display: flex;                           /* lays the text block and button side by side */
  gap: 18px;                                /* space between the text block and the button */
  align-items: center;                      /* vertically centers text and button */
  flex-wrap: wrap;                          /* allows stacking on narrow screens */
  justify-content: space-between;           /* pushes text left, button right */
}
.redacted + .redacted {
  margin-top: 16px; /* adds space between two stacked "redacted" callout cards, like on the homepage demo section */
}
.redacted .tape {
  background: var(--tape);         /* mustard "tape" background color */
  color: var(--ink);                /* dark text for contrast against the mustard */
  font-family: var(--font-mono);   /* monospace label style */
  font-size: 0.72rem;               /* small label size */
  letter-spacing: 0.1em;            /* spaced-out lettering */
  text-transform: uppercase;       /* forces label text to all caps */
  padding: 4px 10px;                /* padding inside the tape label */
  border-radius: 2px;               /* barely-rounded corners, like a strip of tape */
  display: inline-block;            /* lets the background wrap tightly around the text */
  margin-bottom: 6px;               /* small gap below before the heading */
}
.redacted h3 {
  margin: 0 0 4px;                 /* removes default margin, adds a little space below */
  font-family: var(--font-body);   /* readable body font for this heading */
  font-size: 1.1rem;                /* callout heading size */
}
.redacted p {
  margin: 0;                /* removes default paragraph margin */
  color: var(--ink-soft);   /* softer text color for supporting copy */
  font-size: 0.92rem;        /* callout paragraph text size */
}

/* ---------------- Footer ---------------- */

footer.site-footer {
  padding: 40px 24px 50px;  /* generous spacing around the footer content */
  text-align: center;        /* centers the footer's text and links */
}
footer.site-footer .end-stamp {
  font-family: var(--font-stamp);  /* typewriter font, bookending the page like the hero */
  color: var(--ink-soft);           /* softer, muted text color */
  letter-spacing: 0.2em;             /* wide letter spacing for a "closing stamp" feel */
  font-size: 0.8rem;                 /* small text size */
  text-transform: uppercase;        /* forces text to all caps */
  margin-bottom: 14px;               /* space below before the contact links */
}
footer.site-footer .contacts {
  font-family: var(--font-mono);  /* monospace style for the contact links */
  font-size: 0.85rem;              /* contact link text size */
  display: flex;                   /* lays the email and phone links side by side */
  gap: 18px;                        /* space between the two links */
  justify-content: center;         /* centers the links horizontally */
  flex-wrap: wrap;                 /* allows stacking on very narrow screens */
}
footer.site-footer .legal {
  font-family: var(--font-mono);  /* monospace, matching the rest of the footer's style */
  font-size: 0.72rem;              /* small — this is fine print, not a headline */
  color: var(--ink-soft);          /* softer/muted color so it doesn't compete with the contact links */
  max-width: 560px;                 /* keeps the disclaimer from stretching edge-to-edge on wide screens */
  margin: 14px auto 0;              /* space above, centered under the contact links */
  line-height: 1.5;                 /* a bit more breathing room for the wrapped lines */
}

/* ---------------- Course cards (used on the Courses landing page) ---------------- */

/* .course-meta holds the semester + meeting-time lines under a course card's title */
.course-meta {
  margin: 0 0 12px;    /* removes default margin, adds space below before the description */
  padding: 0;            /* removes default <dl> padding */
}
.course-meta dt {
  display: none; /* labels are hidden visually (the mono "SEMESTER:"/"MEETS:" prefix is added via CSS below instead) */
}
.course-meta dd {
  margin: 0 0 2px;              /* removes default indent, small space between the two meta lines */
  font-family: var(--font-mono); /* monospace, matching the "filed record" look used elsewhere */
  font-size: 0.8rem;              /* meta line text size */
  color: var(--ink-soft);         /* softer color since this is supporting info, not the main heading */
}
.course-meta dd:first-of-type::before {
  content: "Semester: "; /* prints a label before the semester value, without needing it in the HTML */
  color: var(--ink);       /* darker than the value text, so the label reads as a tag */
}
.course-meta dd:last-of-type::before {
  content: "Meets: ";  /* prints a label before the meeting-time value */
  color: var(--ink);    /* darker than the value text, so the label reads as a tag */
}

/* .course-image is the fixed 200x200 image box for each course's picture */
.course-image {
  width: 200px;                                     /* fixed box width, matching the 200x200 images Brandon generates */
  height: 200px;                                     /* fixed box height, same reasoning */
  margin: 0 auto 14px;                                   /* removes default <figure> margin, adds space below before the title */
  background: var(--paper-deep);                    /* placeholder fill shown until a real image is dropped in */
  border: 1.5px solid var(--ink);                    /* solid black border around the image box */
  border-radius: 5px;                                 /* slightly rounded corners */
  box-shadow: 0 4px 10px rgba(33, 29, 23, 0.22);      /* slight drop shadow so the image lifts off the card */
  overflow: hidden;                                  /* clips the image to the box's rounded corners */
  display: flex;    
  justify-content: center;
  align-items: center;                              
}
.course-image img {
  width: 100%;       /* image fills the box's width */
  height: 100%;       /* image fills the box's height */
  object-fit: cover;  /* crops the image to fill the square box without distorting it */
}

/* .course-card gives each course article a bit more breathing room than the plain .folder cards */
.course-card {
  display: flex;             /* stacks the image, title, meta, description, and link vertically */
  flex-direction: column;    /* explicitly sets the stacking direction to top-to-bottom */
}

.software-logo {
  max-width: 140px;                                   /* caps the logo size so it doesn't dominate the card */
  height: auto;                                        /* keeps the logo's natural aspect ratio */
  display: block;                                       /* lets the auto margins below actually center it */
  margin: 0 auto 14px;                                  /* centers horizontally, space below before the tags */
  border: 1.5px solid var(--ink);                       /* thin dark border around the logo */
  border-radius: 5px;                                    /* rounded corners, matching your course-image style */
  box-shadow: 0 3px 8px rgba(33, 29, 23, 0.16);          /* lighter drop shadow than course-image, since these are smaller */
}

/* ---------------- Snippet cards (used on the Live Demos page) ---------------- */
 
/* .snippet-grid reuses the same responsive grid pattern as .folder-grid */
.snippet-grid {
  display: grid;                                          /* responsive grid layout for snippet cards */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* as many columns as fit, min 280px each */
  gap: 20px;                                               /* spacing between snippet cards */
}
 
/* .snippet-frame is the bordered, centered box holding a live iframe preview of the demo page */
.snippet-frame {
  width: 100%;                          /* frame fills the card's width up to its own max-width */
  max-width: 320px;                      /* caps how wide the preview gets, even in a wide column */
  height: 220px;                          /* fixed preview height, so every card lines up evenly */
  margin: 0 auto 14px;                    /* centers the frame horizontally, space below before the link */
  background: #ffffff;                    /* white background, since most demo pages assume a light page */
  border: 1.5px solid var(--ink);         /* solid dark border around the preview */
  border-radius: 5px;                      /* rounded corners, matching .course-image / .software-logo */
  box-shadow: 0 4px 10px rgba(33, 29, 23, 0.22); /* drop shadow so the preview lifts off the card */
  overflow: hidden;                        /* clips the iframe to the frame's rounded corners */
}
 
.snippet-frame iframe {
  width: 100%;   /* iframe fills the frame's full width */
  height: 100%;   /* iframe fills the frame's full height */
  border: 0;       /* removes the default iframe border, since .snippet-frame already provides one */
}

/* ---------------- Video Library accordion sections ---------------- */
 
/* .video-section is a native <details> element — no JS required for
   the open/close mechanic itself, just for the lazy-loading below */
.video-section {
  border: 1px solid var(--line-strong);   /* visible section outline */
  border-radius: 4px;                      /* slightly rounded corners */
  background: var(--paper-raised);        /* card surface color, matching .folder */
  margin-bottom: 16px;                     /* space between one course section and the next */
  overflow: hidden;                        /* clips the summary/content to the rounded corners */
}
 
.video-section summary {
  cursor: pointer;                    /* shows a pointer cursor, signaling it's clickable */
  padding: 16px 20px;                  /* clickable padding for the whole header row */
  font-family: var(--font-stamp);     /* typewriter font, matching other section headings */
  font-size: 1.15rem;                  /* header text size */
  display: flex;                        /* lays the title, video-count badge, and indicator out in a row */
  align-items: center;                   /* vertically centers everything in the row */
  gap: 8px;                               /* small, even gap between the count badge and the +/- indicator */
  list-style: none;                      /* removes the default disclosure triangle in most browsers */
}
.video-section summary::-webkit-details-marker {
  display: none; /* removes the default disclosure triangle in WebKit browsers (Safari/Chrome) */
}
.video-title {
  flex: 1 1 auto; /* grows to fill all the leftover space, which pushes the count and indicator to the right edge together */
}
.video-section summary::after {
  content: "+";                     /* plus sign shown while the section is collapsed */
  font-family: var(--font-mono);   /* monospace, matching the indicator style used elsewhere */
  font-size: 1.3rem;                 /* indicator size */
  color: var(--signal);              /* terminal-green, matching the site's accent color */
}
.video-section[open] summary::after {
  content: "–"; /* swaps to a minus sign once the section is expanded */
}
 
.video-section summary:hover,
.video-section summary:focus-visible {
  background: var(--paper-deep); /* darkens the header background on hover/focus, for clear feedback */
}
 
.video-count {
  font-family: var(--font-mono);   /* monospace, matching the "filed record" label style */
  font-size: 0.72rem;                /* small badge text size */
  color: var(--ink-soft);            /* softer text color, since it's a secondary detail */
  font-weight: normal;                /* overrides the bold weight the summary's font otherwise implies */
}
 
.video-section .video-grid {
  padding: 4px 20px 20px;                    /* inner spacing around the grid of video cards */
  border-top: 1px solid var(--line-strong);  /* divider line between the header and the videos */
  padding-top: 20px;                          /* space between that divider and the first row of cards */
}

/* ---------------- Education list (used on the About page) ---------------- */
 
.edu-list {
  display: flex;           /* stacks each degree entry vertically */
  flex-direction: column;   /* explicitly sets top-to-bottom stacking */
  gap: 18px;                  /* space between one degree entry and the next */
}
 
.edu-row {
  display: flex;         /* lays the school logo and the degree text side by side */
  align-items: center;    /* vertically centers the logo against the two-line text block */
  gap: 16px;                /* space between the logo and the text */
}
 
/* Higher specificity (.folder .edu-row img) so this reliably beats the
   earlier, more general ".folder img { max-width:100%; height:auto }"
   rule instead of losing to it based on which one comes later in the file. */
.folder .edu-row img {
  width: 100px;                             /* larger fixed logo size, as requested */
  height: 100px;                              /* fixed logo size */
  object-fit: contain;                          /* shows the whole logo without cropping or distorting it */
  background: #ffffff;                           /* white backing, in case a logo has a transparent background */
  border: 1px solid var(--line-strong);          /* thin outline around the logo */
  border-radius: 6px;                             /* slightly rounded corners */
  flex-shrink: 0;                                  /* stops the logo from being squeezed by the text next to it */
}
 
.edu-degree {
  font-family: var(--font-mono);   /* monospace label, matching the site's other field labels */
  font-size: 0.78rem;                /* small label size */
  text-transform: uppercase;        /* forces the degree title to all caps */
  letter-spacing: 0.06em;            /* spaced-out lettering for a "filed record" feel */
  color: var(--ink-soft);            /* softer color, since it's a label rather than the main value */
  margin: 0 0 4px;                    /* removes default paragraph margin, adds space below */
}
 
.edu-school {
  font-family: var(--font-body);   /* readable body font for the school name */
  font-size: 1rem;                   /* school name text size */
  font-weight: 600;                   /* semi-bold weight so it reads as the primary value */
  color: var(--ink);                  /* main ink color */
  margin: 0;                           /* removes default paragraph margin */
}

/* ---------------- Certification tile grid (used on the About page) ---------------- */
 
.cert-grid {
  display: grid;                                             /* tiles instead of a single wrapping row */
  grid-template-columns: repeat(2, 1fr); /* as many tiles per row as fit, each at least 96px */
  gap: 10px;                                                   /* space between tiles */
  margin: 8px 0 16px;                                           /* space above/below the grid */
}
 
.cert-tile {
  display: flex;                            /* stacks the cert name and its thumbnail vertically */
  flex-direction: column;                    /* explicitly sets top-to-bottom stacking */
  align-items: center;                        /* centers both the name and the image horizontally */
  text-align: center;                          /* centers multi-line cert names */
  gap: 8px;                                     /* space between the name and the thumbnail below it */
  padding: 12px 8px;                             /* inner spacing for the whole tile */
  background: var(--paper-deep);                /* tile surface color, one shade darker than the card behind it */
  border: 1px solid var(--line-strong);          /* visible tile outline */
  border-radius: 5px;                             /* slightly rounded tile corners */
  text-decoration: none;                           /* removes the default link underline */
  transition: transform 0.15s ease, border-color 0.15s ease; /* smoothly animates the hover effects below */
}
.cert-tile:hover,
.cert-tile:focus-visible {
  transform: translateY(-2px);   /* lifts the tile slightly on hover, for interactivity feedback */
  border-color: var(--signal);    /* highlights the tile's border in terminal-green on hover/focus */
}
 
.cert-tile .cert-name {
  font-family: var(--font-body);   /* readable body font, so the name is the most legible element on the tile */
  font-weight: 700;                  /* bold weight, since the name should read larger/heavier than the image */
  font-size: 0.82rem;                 /* name text size — intentionally bigger relative to the small thumbnail */
  color: var(--ink);                   /* main ink color for the name */
  line-height: 1.2;                     /* tighter line spacing for names that wrap to two lines */
  min-height: 2.4em;         /* ← add this line: reserves space for 2 lines of text every time */
  display: flex;              /* ← add this line: lets the text below vertically-center in that space */
  align-items: center;         /* ← add this line: centers 1-line names within the reserved 2-line height */
} 
/* Higher specificity (.folder .cert-tile img) so this reliably beats the
   earlier, more general ".folder img { max-width:100%; height:auto }"
   rule instead of losing to it based on which one comes later in the file. */
.folder .cert-tile img {
  width: 100px;                              /* small fixed thumbnail size, as requested */
  height: 100px;                              /* fixed thumbnail size */
  object-fit: contain;                         /* shows the whole certificate image without cropping it */
  background: #ffffff;                        /* white backing, since certificate graphics often have transparent edges */
  border: 1px solid var(--line-strong);       /* thin outline around the thumbnail */
  border-radius: 4px;                          /* slightly rounded corners */
}
 
 
/* ---------------- Mobile layout ---------------- */

/* ---------------- Contact form (used on the Contact page) ---------------- */
 
.contact-form {
  max-width: 560px;   /* keeps the form from stretching too wide on large screens */
}
 
.contact-form label {
  display: block;                  /* puts each label on its own line above its field */
  font-family: var(--font-mono);   /* monospace label, matching the rest of the site's labels */
  font-size: 0.8rem;                /* label text size */
  text-transform: uppercase;       /* forces label text to all caps */
  letter-spacing: 0.05em;           /* slight spacing for the caps text */
  color: var(--ink-soft);           /* softer color, since it's a label rather than the value itself */
  margin: 16px 0 6px;                /* space above (separating fields) and below (before the input) */
}
.contact-form label:first-of-type {
  margin-top: 0; /* removes the extra top space above the very first label in the form */
}
 
.contact-form input,
.contact-form textarea {
  width: 100%;                              /* field fills the form's full width */
  padding: 10px 12px;                        /* inner padding so text isn't jammed against the edges */
  font-family: var(--font-body);            /* readable body font for typed input */
  font-size: 0.95rem;                        /* comfortable input text size */
  color: var(--ink);                         /* dark ink text inside fields */
  background: #ffffff;                      /* white field background, for clear contrast against the paper */
  border: 1px solid var(--line-strong);     /* visible field outline */
  border-radius: 3px;                        /* slightly rounded field corners */
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--signal);  /* terminal-green focus ring, matching the site's focus style */
  outline-offset: 1px;                /* small gap between the field edge and the focus ring */
}
 
.contact-form textarea {
  resize: vertical;    /* lets the person resize the message box taller, but not wider than the form */
  min-height: 140px;    /* a reasonably roomy starting height for a message field */
}
 
.contact-form button {
  margin-top: 20px; /* space above the submit button, separating it from the message field */
}

@media (max-width: 760px) {
  .nav-toggle {
    display: inline-block; /* reveals the hamburger/menu button only below the 760px breakpoint */
  }

  .nav-links {
    display: none;                        /* hides the nav links by default on mobile, until toggled open */
    position: absolute;                    /* takes the menu out of flow so it can overlay the page */
    top: 100%;                              /* positions the menu directly below the header */
    left: 0;                                /* aligns the menu to the left edge of the viewport */
    right: 0;                               /* stretches the menu to the right edge of the viewport */
    background: var(--paper);              /* matches the page background so the dropdown looks native */
    border-bottom: 2px solid var(--ink);    /* divider line under the open dropdown */
    flex-direction: column;                /* stacks nav links vertically instead of in a row */
    padding: 8px 16px 16px;                 /* inner spacing for the open dropdown */
  }
  .nav-links.open {
    display: flex; /* reveals the dropdown when JavaScript adds the .open class */
  }
  .nav-links a {
    border-radius: 3px;                       /* switches from "tab" rounding to a simple rounded rectangle */
    border-bottom: 1px solid var(--line-strong); /* adds a divider between stacked links */
    width: 100%;                               /* makes each link fill the full width of the dropdown */
    top: 0;                                     /* cancels the 1px desktop nudge, not needed in this layout */
  }

  .hero-inner {
    grid-template-columns: 1fr; /* stacks the text block and photo/stamp cluster vertically instead of side by side */
  }
  .hero-media {
    justify-self: start;   /* left-aligns the photo cluster once it's stacked below the text */
    margin-top: 8px;         /* small gap between the summary text above and the photo below */
  }
  .stamp {
    bottom: -14px;              /* pulls the stamp in slightly so it overlaps less on a smaller photo */
    right: -14px;                /* pulls the stamp in from the edge so it stays visible on narrow screens */
    transform: rotate(-6deg);   /* slightly reduces the rotation angle so it reads better at small sizes */
  }
  .cert-badge {
  	position: static;    /* takes the badge out of absolute positioning so it flows normally below the text */
  	display: block;        /* ensures it sits on its own line once it's back in normal flow */
  	width: 300px;           /* smaller size appropriate for a stacked mobile layout */
  	margin: 16px auto 0;    /* space above, and centers it horizontally under the text */
}
}