/* =========================================================
   Portfolio 2.0 — fully commented stylesheet
   Goal: teach what each style does while creating a modern look.
   Design direction: deep slate + teal accent, Syne + Manrope.
   ========================================================= */

/* CSS variables store brand colors and spacing in one place */
:root {
  /* Main dark background used across the site */
  --ink: #0f1c24;
  /* Slightly lighter dark surface for cards and panels */
  --ink-soft: #17303b;
  /* Soft paper-like page background for content sections */
  --paper: #f3efe6;
  /* Alternate section background for visual rhythm */
  --paper-alt: #ebe4d7;
  /* Primary text color on light backgrounds */
  --text: #1b2a31;
  /* Muted text for supporting sentences */
  --muted: #5b6b73;
  /* Teal accent used for buttons and highlights */
  --accent: #1f7a6c;
  /* Darker teal for hover states */
  --accent-dark: #155e53;
  /* Warm copper highlight for small emphasis moments */
  --copper: #b86b3d;
  /* Soft white used on dark hero text */
  --cream: #f7f3ea;
  /* Shared corner radius for modern but restrained shapes */
  --radius: 18px;
  /* Soft shadow for depth without heavy “card chrome” */
  --shadow: 0 18px 40px rgba(15, 28, 36, 0.12);
  /* Display font for brand and major headings */
  --font-display: "Syne", sans-serif;
  /* Body font for readable paragraphs and UI text */
  --font-body: "Manrope", sans-serif;
}

/* Reset default browser spacing for consistent layout control */
* {
  /* Remove default outer margin */
  box-sizing: border-box;
}

/* Style the document body as the global canvas */
html {
  /* Enable smooth in-page navigation for anchor links */
  scroll-behavior: smooth;
}

/* Style the page body */
body {
  /* Apply readable body typography */
  font-family: var(--font-body);
  /* Set default text color */
  color: var(--text);
  /* Use warm paper background instead of flat white */
  background: var(--paper);
  /* Remove unexpected body margin */
  margin: 0;
  /* Improve text rendering on modern screens */
  -webkit-font-smoothing: antialiased;
}

/* Make images never overflow their containers */
img {
  /* Cap image width to parent width */
  max-width: 100%;
  /* Preserve natural proportions */
  height: auto;
  /* Remove inline image baseline gap */
  display: block;
}

/* Remove default link underline and inherit color by default */
a {
  /* Keep links clean until hover styles apply */
  text-decoration: none;
  /* Links inherit surrounding text color unless overridden */
  color: inherit;
}

/* Shared section spacing block */
.section-block {
  /* Create breathing room between major page sections */
  padding: 6rem 0;
}

/* Alternate section background for visual pacing */
.section-alt {
  /* Switch to a slightly deeper paper tone */
  background: var(--paper-alt);
}

/*
 * Same-tone consecutive sections (e.g. Highlights → Resume)
 * stacked 6rem + 6rem reads as one empty void — pull them together.
 */
.section-block.section-alt:has(+ .section-block.section-alt) {
  padding-bottom: 2.25rem;
}

.section-block.section-alt + .section-block.section-alt {
  padding-top: 2.25rem;
}

/* Standard section heading stack */
.section-heading {
  /* Center the heading group */
  text-align: center;
  /* Limit width so lines stay readable */
  max-width: 760px;
  /* Center the heading block in the container */
  margin: 0 auto 3rem;
}

/* Section title typography */
.section-heading h2 {
  /* Use expressive display font for hierarchy */
  font-family: var(--font-display);
  /* Strong weight for presence */
  font-weight: 800;
  /* Large but not oversized heading */
  font-size: clamp(2rem, 4vw, 3rem);
  /* Tighten letter spacing for a modern mark feel */
  letter-spacing: -0.03em;
  /* Space below the title */
  margin-bottom: 0.75rem;
}

/* Supporting sentence under each section title */
.section-heading p {
  /* Softer color for secondary text */
  color: var(--muted);
  /* Comfortable reading size */
  font-size: 1.05rem;
  /* Remove extra paragraph margin */
  margin: 0;
}

/* Sticky top navigation bar */
.site-header {
  /* Stick to top while scrolling */
  position: sticky;
  /* Anchor at the top edge */
  top: 0;
  /* Keep header above page content */
  z-index: 1000;
  /* Semi-transparent dark bar */
  background: rgba(15, 28, 36, 0.92);
  /* Blur content behind the header for depth */
  backdrop-filter: blur(10px);
  /* Thin bottom edge for separation */
  border-bottom: 1px solid rgba(247, 243, 234, 0.08);
}

/* Header inner flex row */
.header-inner {
  /* Use flexbox for brand + nav alignment */
  display: flex;
  /* Vertically center header items */
  align-items: center;
  /* Push brand left and nav right */
  justify-content: space-between;
  /* Comfortable header height */
  min-height: 72px;
  /* Horizontal gap between items */
  gap: 1rem;
}

/* Brand name in the header */
.brand-mark {
  /* Display font reinforces brand identity */
  font-family: var(--font-display);
  /* Bold brand presence */
  font-weight: 700;
  /* Light text on dark header */
  color: var(--cream);
  /* Slightly larger than nav links */
  font-size: 1.05rem;
}

/* Mobile menu button */
.nav-toggle {
  /* Transparent button shell */
  background: transparent;
  /* No default border */
  border: 0;
  /* Light icon color */
  color: var(--cream);
  /* Easy tap target */
  font-size: 1.6rem;
  /* Pointer cursor for interactivity */
  cursor: pointer;
}

/* Primary navigation list */
.site-nav ul {
  /* Remove bullets */
  list-style: none;
  /* Reset list spacing */
  margin: 0;
  /* Reset list padding */
  padding: 0;
  /* Place links in a row on desktop */
  display: flex;
  /* Gap between nav items */
  gap: 1.25rem;
}

/* Navigation link look */
.site-nav a {
  /* Soft cream color on dark bar */
  color: rgba(247, 243, 234, 0.78);
  /* Medium weight for clarity */
  font-weight: 600;
  /* Slightly smaller than body copy */
  font-size: 0.95rem;
  /* Smooth hover transition */
  transition: color 0.2s ease;
}

/* Active and hovered nav links */
.site-nav a:hover,
.site-nav a.is-active {
  /* Brighten to full cream */
  color: var(--cream);
}

/* Full-viewport hero composition */
.hero-section {
  /* Relative positioning for layered bg/overlay/content */
  position: relative;
  /* Fill the first viewport */
  min-height: 100vh;
  /* Flex places content in the vertical middle-left */
  display: flex;
  /* Vertical centering */
  align-items: center;
  /* Prevent overflow from large background image */
  overflow: hidden;
  /* Dark fallback while image loads */
  background: var(--ink);
}

/* Edge-to-edge hero image */
.hero-bg {
  /* Pin image as a background layer */
  position: absolute;
  /* Stretch across the hero */
  inset: 0;
  /* Cover the full hero area */
  width: 100%;
  /* Fill height as well */
  height: 100%;
  /* Crop image to fill without distortion */
  object-fit: cover;
  /* Slight zoom so landscape feels immersive */
  transform: scale(1.04);
  /* Keep image behind text */
  z-index: 0;
}

/* Dark gradient overlay for readability */
.hero-overlay {
  /* Sit above the image */
  position: absolute;
  /* Cover the hero fully */
  inset: 0;
  /* Centered modern shade: readable middle, photo still visible */
  background:
    radial-gradient(ellipse at center, rgba(15, 28, 36, 0.28) 0%, rgba(15, 28, 36, 0.55) 48%, rgba(15, 28, 36, 0.78) 100%),
    linear-gradient(180deg, rgba(15, 28, 36, 0.45) 0%, rgba(15, 28, 36, 0.25) 40%, rgba(15, 28, 36, 0.55) 100%);
  /* Keep overlay under text content */
  z-index: 1;
}

/* Hero text container */
.hero-content {
  /* Place text above overlay */
  position: relative;
  /* Ensure content is the top layer */
  z-index: 2;
  /* Vertical spacing inside hero */
  padding: 8rem 0 5rem;
}

/* Centered modern hero alignment */
.hero-centered .hero-content {
  /* Center the composition */
  text-align: center;
  /* Keep large type from stretching too wide */
  max-width: 52rem;
  /* Center block in viewport */
  margin-left: auto;
  /* Center block in viewport */
  margin-right: auto;
}

/* Status chip above the role line */
.hero-status {
  /* Inline chip appearance */
  display: inline-flex;
  /* Soft glass chip */
  background: rgba(247, 243, 234, 0.1);
  /* Thin border */
  border: 1px solid rgba(247, 243, 234, 0.18);
  /* Pill shape */
  border-radius: 999px;
  /* Compact padding */
  padding: 0.4rem 0.9rem;
  /* Cream text */
  color: rgba(247, 243, 234, 0.9);
  /* Small label size */
  font-size: 0.82rem;
  /* Medium weight */
  font-weight: 600;
  /* Space under chip */
  margin-bottom: 1rem;
}

/* Small badge line above the name */
.hero-kicker {
  /* Accent color draws the eye softly */
  color: #8fd0c2;
  /* Uppercase for a technical label feel */
  text-transform: uppercase;
  /* Wide tracking for badge style */
  letter-spacing: 0.16em;
  /* Compact size */
  font-size: 0.78rem;
  /* Semi-bold for clarity */
  font-weight: 700;
  /* Space before the brand name */
  margin-bottom: 1rem;
}

/* Brand name as the dominant open hero signal */
.hero-name {
  /* Expressive display type */
  font-family: var(--font-display);
  /* Strong brand weight */
  font-weight: 800;
  /* Large modern centered type */
  font-size: clamp(3.2rem, 8vw, 6.2rem);
  /* Cream color on dark photo */
  color: var(--cream);
  /* Tight tracking for modern big-letter look */
  letter-spacing: -0.045em;
  /* Compact stacking between name lines */
  line-height: 0.94;
  /* Space under the name */
  margin: 0 0 1.25rem;
}

/* Force each name part onto its own visual line */
.hero-name-line {
  /* Block display creates two bold stacked lines */
  display: block;
}

/* Slight emphasis on last name */
.hero-name-emphasis {
  /* Keep last name optically balanced when centered */
  display: block;
}

/* One supporting sentence under the brand */
.hero-lead {
  /* Soft cream for secondary hero text */
  color: rgba(247, 243, 234, 0.92);
  /* Comfortable reading size */
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  /* Better line height for paragraph comfort */
  line-height: 1.65;
  /* Centered readable measure */
  max-width: 36rem;
  /* Center the paragraph block */
  margin: 0 auto 1.75rem;
}

/* Centered action row */
.hero-centered .hero-actions {
  /* Center buttons */
  justify-content: center;
}

/* Centered secondary links */
.hero-centered .hero-secondary {
  /* Center quiet links */
  justify-content: center;
  /* Place under buttons */
  margin-top: 1.1rem;
  /* Align items */
  display: flex;
  /* Allow wrap */
  flex-wrap: wrap;
  /* Gap between links */
  gap: 0.85rem 1.25rem;
}

/* Quiet text links in hero */
.hero-text-link {
  /* Soft cream link color */
  color: rgba(247, 243, 234, 0.86);
  /* Medium weight */
  font-weight: 600;
  /* Compact size */
  font-size: 0.95rem;
  /* Align icon and text */
  display: inline-flex;
  /* Vertical center */
  align-items: center;
  /* Gap between icon and label */
  gap: 0.4rem;
  /* Align with button row */
  align-self: center;
  /* Smooth hover */
  transition: color 0.2s ease;
}

/* Quiet text link hover */
.hero-text-link:hover {
  /* Brighter cream on hover */
  color: #fff;
}

/* Availability note under CTAs */
.hero-availability {
  /* Soft cream tone */
  color: rgba(247, 243, 234, 0.75);
  /* Compact size */
  font-size: 0.95rem;
  /* Space above the note */
  margin-top: 1.35rem;
  /* Align icon and text */
  display: inline-flex;
  /* Vertical center */
  align-items: center;
  /* Gap between icon and text */
  gap: 0.5rem;
}

/* Center availability under centered hero */
.hero-centered .hero-availability {
  /* Center the availability line */
  justify-content: center;
  /* Full-width centering helper */
  width: 100%;
}

/* Core vs learning stack groups */
.stack-groups {
  /* Vertical stack of labeled chip groups */
  display: grid;
  /* Gap between core and learning */
  gap: 1rem;
  /* Space above groups */
  margin-top: 1.25rem;
}

/* Label above a chip group */
.stack-group-label {
  /* Compact label */
  font-size: 0.8rem;
  /* Uppercase modern label */
  text-transform: uppercase;
  /* Tracking for clarity */
  letter-spacing: 0.08em;
  /* Soft cream */
  color: rgba(247, 243, 234, 0.7);
  /* Stronger weight */
  font-weight: 700;
  /* Space under label */
  margin-bottom: 0.55rem;
}

/* Learning chips get accent emphasis */
.stack-chip-learning {
  /* Slightly brighter border for “building now” */
  border-color: rgba(143, 208, 194, 0.45);
  /* Accent-tinted text */
  color: #b7ebe0;
}

/* Modern stats use 1 column on side panel */
.stats-grid-modern {
  /* Single column feels cleaner beside support copy */
  grid-template-columns: 1fr;
}

/* AI card kicker label */
.ai-card-kicker {
  /* Tiny uppercase label */
  text-transform: uppercase;
  /* Tracking */
  letter-spacing: 0.08em;
  /* Compact size */
  font-size: 0.72rem;
  /* Accent color */
  color: var(--accent);
  /* Strong weight */
  font-weight: 700;
  /* Space under kicker */
  margin-bottom: 0.45rem;
}

/* Shared button row spacing */
.hero-actions,
.action-row {
  /* Place buttons in a wrapping row */
  display: flex;
  /* Allow wrap on smaller screens */
  flex-wrap: wrap;
  /* Consistent gap between buttons */
  gap: 0.75rem;
}

/* Primary accent button */
.btn-accent {
  /* Teal fill */
  background: var(--accent);
  /* Light text for contrast */
  color: #fff;
  /* Remove default border */
  border: 0;
  /* Soft rounded corners */
  border-radius: 999px;
  /* Comfortable click area */
  padding: 0.85rem 1.35rem;
  /* Strong label weight */
  font-weight: 700;
  /* Smooth hover animation */
  transition: background 0.2s ease, transform 0.2s ease;
}

/* Accent button hover */
.btn-accent:hover {
  /* Darken teal on hover */
  background: var(--accent-dark);
  /* Light text remains */
  color: #fff;
  /* Subtle lift for feedback */
  transform: translateY(-1px);
}

/* Ghost button used on dark hero */
.btn-ghost {
  /* Transparent fill */
  background: transparent;
  /* Cream text */
  color: var(--cream);
  /* Soft cream outline */
  border: 1px solid rgba(247, 243, 234, 0.45);
  /* Pill shape */
  border-radius: 999px;
  /* Match accent button padding */
  padding: 0.85rem 1.35rem;
  /* Strong label */
  font-weight: 700;
  /* Smooth hover */
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Compact icon-only ghost button for secondary social actions */
.btn-icon-ghost {
  /* Transparent fill */
  background: transparent;
  /* Cream icon color */
  color: var(--cream);
  /* Soft cream outline */
  border: 1px solid rgba(247, 243, 234, 0.45);
  /* Circular hit target */
  border-radius: 50%;
  /* Equal width for circle */
  width: 48px;
  /* Equal height for circle */
  height: 48px;
  /* Center the icon */
  display: inline-flex;
  /* Vertical center */
  align-items: center;
  /* Horizontal center */
  justify-content: center;
  /* Readable icon size */
  font-size: 1.15rem;
  /* Smooth hover */
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Icon ghost hover state */
.btn-icon-ghost:hover {
  /* Soft cream fill on hover */
  background: rgba(247, 243, 234, 0.08);
  /* Brighter border on hover */
  border-color: rgba(247, 243, 234, 0.8);
  /* Keep cream icon */
  color: var(--cream);
}

/* Resume skill-group title */
.skill-group-title {
  /* Slightly smaller than card titles */
  font-size: 1rem;
  /* Strong label weight */
  font-weight: 700;
  /* Accent color for grouping */
  color: var(--accent);
  /* Space above chips */
  margin-bottom: 0.75rem;
}

/* AI lab project card */
.ai-card {
  /* Light surface */
  background: #fff;
  /* Soft radius */
  border-radius: var(--radius);
  /* Internal spacing */
  padding: 1.35rem;
  /* Full column height */
  height: 100%;
  /* Subtle border */
  border: 1px solid rgba(15, 28, 36, 0.08);
  /* Soft depth */
  box-shadow: var(--shadow);
}

/* AI lab card title */
.ai-card h3 {
  /* Display font for hierarchy */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Compact title size */
  font-size: 1.15rem;
  /* Space under title */
  margin-bottom: 0.7rem;
}

/* AI lab card body copy */
.ai-card p {
  /* Muted supporting text */
  color: var(--muted);
  /* Space before tech chips */
  margin-bottom: 1rem;
}

/* Ghost button hover */
.btn-ghost:hover {
  /* Slight fill on hover */
  background: rgba(247, 243, 234, 0.08);
  /* Brighter border */
  border-color: rgba(247, 243, 234, 0.8);
  /* Keep cream text */
  color: var(--cream);
}

/* Outline button for light sections */
.btn-outline-dark {
  /* Transparent fill */
  background: transparent;
  /* Dark text */
  color: var(--ink);
  /* Dark outline */
  border: 1px solid rgba(15, 28, 36, 0.25);
  /* Pill shape */
  border-radius: 999px;
  /* Comfortable padding */
  padding: 0.8rem 1.25rem;
  /* Strong label */
  font-weight: 700;
  /* Smooth hover */
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Outline button hover */
.btn-outline-dark:hover {
  /* Soft fill */
  background: rgba(15, 28, 36, 0.05);
  /* Stronger border */
  border-color: rgba(15, 28, 36, 0.55);
  /* Keep dark text */
  color: var(--ink);
}

/* Below-hero support section */
.hero-support {
  /* Section padding */
  padding: 4rem 0 5rem;
  /* Dark continuation from hero for cohesion */
  background: linear-gradient(180deg, #13252e 0%, #0f1c24 100%);
  /* Light text on dark surface */
  color: var(--cream);
}

/* Support section title */
.support-title {
  /* Display font for hierarchy */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Space under title */
  margin-bottom: 1.25rem;
}

/* Benefit checklist */
.benefit-list {
  /* Remove bullets */
  list-style: none;
  /* Reset padding */
  padding: 0;
  /* Reset margin */
  margin: 0 0 1.5rem;
}

/* Each benefit row */
.benefit-list li {
  /* Align icon and text */
  display: flex;
  /* Start from top for multi-line text */
  align-items: flex-start;
  /* Gap between icon and copy */
  gap: 0.7rem;
  /* Space between rows */
  margin-bottom: 0.75rem;
  /* Soft cream text */
  color: rgba(247, 243, 234, 0.88);
}

/* Check icon color */
.benefit-list i {
  /* Accent color for confirmation marks */
  color: #8fd0c2;
  /* Nudge icon slightly downward */
  margin-top: 0.15rem;
}

/* Typed specialties line */
.typed-line {
  /* Space around the typed line */
  margin: 1.5rem 0;
  /* Soft cream text */
  color: rgba(247, 243, 234, 0.9);
}

/* Label before typed words */
.typed-label {
  /* Emphasize the static label */
  font-weight: 700;
  /* Space before animated text */
  margin-right: 0.35rem;
}

/* Animated typed target */
.typed-target {
  /* Accent color for motion emphasis */
  color: #8fd0c2;
  /* Strong weight so motion is readable */
  font-weight: 700;
}

/* Horizontal chip row */
.stack-row {
  /* Wrap chips into multiple lines */
  display: flex;
  /* Allow wrapping */
  flex-wrap: wrap;
  /* Gap between chips */
  gap: 0.55rem;
}

/* Skill / tech chip */
.stack-chip {
  /* Soft translucent chip background */
  background: rgba(247, 243, 234, 0.08);
  /* Cream text */
  color: var(--cream);
  /* Thin border for definition */
  border: 1px solid rgba(247, 243, 234, 0.14);
  /* Pill shape */
  border-radius: 999px;
  /* Compact padding */
  padding: 0.35rem 0.8rem;
  /* Small label size */
  font-size: 0.85rem;
  /* Medium weight */
  font-weight: 600;
}

/* Light-section chips need darker styling */
.section-block .stack-chip,
.section-alt .stack-chip {
  /* Light chip surface */
  background: rgba(15, 28, 36, 0.05);
  /* Dark text for contrast */
  color: var(--ink);
  /* Subtle dark border */
  border-color: rgba(15, 28, 36, 0.1);
}

/* Stats grid under hero */
.stats-grid {
  /* Three flexible cards in a row */
  display: grid;
  /* Responsive columns */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Gap between cards */
  gap: 0.9rem;
}

/* Individual stat card */
.stat-card {
  /* Soft dark panel */
  background: rgba(247, 243, 234, 0.06);
  /* Rounded corners */
  border-radius: var(--radius);
  /* Internal spacing */
  padding: 1.2rem;
  /* Subtle border */
  border: 1px solid rgba(247, 243, 234, 0.1);
}

/* Big stat number */
.stat-card h3 {
  /* Display font for emphasis */
  font-family: var(--font-display);
  /* Large number */
  font-size: 2rem;
  /* Strong weight */
  font-weight: 800;
  /* Tight spacing under number */
  margin-bottom: 0.25rem;
}

/* Stat label text */
.stat-card p {
  /* Muted cream */
  color: rgba(247, 243, 234, 0.72);
  /* Remove extra margin */
  margin: 0;
  /* Compact size */
  font-size: 0.92rem;
}

/* Social icon row */
.social-row {
  /* Horizontal icon row */
  display: flex;
  /* Gap between icons */
  gap: 0.85rem;
}

/* Social icons under support section */
.support-social {
  /* Space above social icons */
  margin-top: 1.5rem;
}

/* Social icon link */
.social-row a {
  /* Circle hit area */
  width: 42px;
  /* Matching height */
  height: 42px;
  /* Center icon */
  display: inline-flex;
  /* Horizontal center */
  align-items: center;
  /* Vertical center */
  justify-content: center;
  /* Rounded circle */
  border-radius: 50%;
  /* Soft border */
  border: 1px solid rgba(247, 243, 234, 0.2);
  /* Cream icon */
  color: var(--cream);
  /* Smooth hover */
  transition: background 0.2s ease;
}

/* Social icon hover */
.social-row a:hover {
  /* Soft fill on hover */
  background: rgba(247, 243, 234, 0.1);
}

/* Footer social icons on light background */
.site-footer .social-row a {
  /* Dark icon on light footer */
  color: var(--ink);
  /* Darker border for light surface */
  border-color: rgba(15, 28, 36, 0.15);
}

/* About profile photo */
.about-photo {
  /* Soft rounded rectangle */
  border-radius: 28px;
  /* Subtle depth */
  box-shadow: var(--shadow);
  /* Constrain photo width on large screens */
  max-width: 340px;
  /* Center in column */
  margin: 0 auto;
}

/* About role title */
.about-title {
  /* Display font */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Space under title */
  margin-bottom: 1rem;
}

/* About body copy */
.about-copy {
  /* Muted readable text */
  color: var(--muted);
  /* Space between paragraphs */
  margin-bottom: 1rem;
}

/* Fanshawe education callout */
.education-banner {
  /* Flex layout for icon + text */
  display: flex;
  /* Align to top */
  align-items: flex-start;
  /* Gap between icon and copy */
  gap: 1rem;
  /* Soft tinted panel */
  background: rgba(31, 122, 108, 0.08);
  /* Border using accent tone */
  border: 1px solid rgba(31, 122, 108, 0.18);
  /* Rounded panel */
  border-radius: var(--radius);
  /* Internal spacing */
  padding: 1.25rem;
  /* Space around the banner */
  margin: 1.5rem 0;
}

/* Education icon bubble */
.education-icon {
  /* Fixed circle size */
  width: 48px;
  /* Matching height */
  height: 48px;
  /* Flex center */
  display: inline-flex;
  /* Vertical center */
  align-items: center;
  /* Horizontal center */
  justify-content: center;
  /* Accent fill */
  background: var(--accent);
  /* Light icon */
  color: #fff;
  /* Circle shape */
  border-radius: 50%;
  /* Prevent shrinking in flex row */
  flex-shrink: 0;
}

/* Education meta line */
.education-meta {
  /* Emphasize status line */
  font-style: italic;
  /* Muted color */
  color: var(--muted);
  /* Compact spacing */
  margin-bottom: 0.5rem;
}

/* Education location line */
.education-location {
  /* Muted supporting text */
  color: var(--muted);
  /* Remove bottom margin */
  margin-bottom: 0;
}

/* Fact lists in about */
.fact-list {
  /* Remove bullets */
  list-style: none;
  /* Reset padding */
  padding: 0;
  /* Reset margin */
  margin: 0;
}

/* Each fact row */
.fact-list li {
  /* Space between facts */
  margin-bottom: 0.55rem;
}

/* Mini metric cards under about */
.mini-grid {
  /* Three cards in a row */
  display: grid;
  /* Equal columns */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Gap between cards */
  gap: 0.8rem;
  /* Space above cards */
  margin: 1.25rem 0;
}

/* Mini metric card */
.mini-card {
  /* Light panel */
  background: #fff;
  /* Soft radius */
  border-radius: 14px;
  /* Internal padding */
  padding: 1rem;
  /* Subtle border instead of heavy card chrome */
  border: 1px solid rgba(15, 28, 36, 0.08);
  /* Center text */
  text-align: center;
}

/* Mini metric value */
.mini-card h4 {
  /* Display font */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 800;
  /* Accent color for emphasis */
  color: var(--accent);
  /* Compact spacing */
  margin-bottom: 0.2rem;
}

/* Mini metric label */
.mini-card p {
  /* Muted label */
  color: var(--muted);
  /* Remove margin */
  margin: 0;
  /* Compact size */
  font-size: 0.9rem;
}

/* Closing about summary */
.about-summary {
  /* Body text color */
  color: var(--text);
  /* Space before action buttons */
  margin: 1rem 0 1.25rem;
}

/* Resume subsection title */
.resume-heading {
  /* Display font */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Space above each group */
  margin: 2rem 0 1rem;
}

/* Resume / content panel */
.resume-card {
  /* Light surface */
  background: #fff;
  /* Soft radius */
  border-radius: var(--radius);
  /* Internal spacing */
  padding: 1.25rem 1.35rem;
  /* Subtle border */
  border: 1px solid rgba(15, 28, 36, 0.08);
  /* Space under each card */
  margin-bottom: 1rem;
}

/* Role / company line */
.resume-role {
  /* Muted supporting text */
  color: var(--muted);
  /* Slight italic for secondary line */
  font-style: italic;
  /* Remove extra bottom margin by default */
  margin-bottom: 0;
}

/* Date line */
.resume-dates {
  /* Accent color for chronology */
  color: var(--accent);
  /* Stronger weight */
  font-weight: 700;
  /* Compact size */
  font-size: 0.92rem;
  /* Tight spacing */
  margin-bottom: 0.35rem;
}

/* Compact contact list in resume summary */
.contact-mini {
  /* Reset list */
  padding-left: 1.1rem;
  /* Space above list */
  margin-top: 1rem;
}

/* Resume action button row */
.resume-actions {
  /* Center action buttons */
  justify-content: center;
  /* Space under actions */
  margin-bottom: 2rem;
}

/* Major resume block spacing */
.resume-block {
  /* Clear separation between summary / experience / skills / education */
  margin-top: 2.5rem;
}

/* Block heading + helper text */
.resume-block-head {
  /* Space under the block title group */
  margin-bottom: 1.1rem;
}

/* Block title */
.resume-block-head h3 {
  /* Display font for section labels */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Compact bottom spacing */
  margin-bottom: 0.35rem;
}

/* Helper sentence under block title */
.resume-block-head p {
  /* Muted helper copy */
  color: var(--muted);
  /* Remove extra margin */
  margin: 0;
}

/* Wide summary card at top */
.resume-summary-card {
  /* More internal padding for prominence */
  padding: 1.6rem 1.7rem;
}

/* Top row of summary: identity + contacts */
.resume-summary-top {
  /* Place name and contacts side by side on desktop */
  display: flex;
  /* Space between identity and contacts */
  justify-content: space-between;
  /* Align to top */
  align-items: flex-start;
  /* Gap when wrapping */
  gap: 1rem;
  /* Space before paragraph */
  margin-bottom: 1rem;
}

/* Person name in summary */
.resume-person-name {
  /* Display font */
  font-family: var(--font-display);
  /* Strong brand weight */
  font-weight: 800;
  /* Clear size */
  font-size: 1.6rem;
  /* Tight spacing under name */
  margin-bottom: 0.35rem;
}

/* Summary paragraph */
.resume-summary-text {
  /* Readable body color */
  color: var(--text);
  /* Comfortable line length feel */
  max-width: 70rem;
  /* Remove bottom margin */
  margin: 0;
}

/* Inline contact chips under summary */
.contact-mini-inline {
  /* Horizontal list */
  display: flex;
  /* Allow wrap on smaller screens */
  flex-wrap: wrap;
  /* Gap between contact items */
  gap: 0.55rem 1rem;
  /* Remove bullet padding */
  padding-left: 0;
  /* Reset top margin */
  margin: 0;
  /* Remove bullets */
  list-style: none;
}

/* Each inline contact item */
.contact-mini-inline li {
  /* Compact label size */
  font-size: 0.92rem;
  /* Muted color */
  color: var(--muted);
}

/* Experience timeline list */
.experience-list {
  /* Vertical stack of roles */
  display: grid;
  /* Gap between jobs */
  gap: 1rem;
}

/* Single experience card */
.experience-item {
  /* White panel */
  background: #fff;
  /* Soft radius */
  border-radius: var(--radius);
  /* Internal padding */
  padding: 1.35rem 1.45rem;
  /* Subtle border */
  border: 1px solid rgba(15, 28, 36, 0.08);
  /* Left accent bar for timeline feel */
  border-left: 4px solid var(--accent);
}

/* Date + company row */
.experience-meta {
  /* Place date and company on one line */
  display: flex;
  /* Wrap on narrow screens */
  flex-wrap: wrap;
  /* Gap between meta pieces */
  gap: 0.45rem 1rem;
  /* Space under meta */
  margin-bottom: 0.45rem;
}

/* Experience dates */
.experience-dates {
  /* Accent color for chronology */
  color: var(--accent);
  /* Strong weight */
  font-weight: 700;
  /* Compact size */
  font-size: 0.92rem;
}

/* Company line */
.experience-company {
  /* Muted supporting text */
  color: var(--muted);
  /* Medium weight */
  font-weight: 600;
}

/* Job title */
.experience-title {
  /* Display font */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Size for role title */
  font-size: 1.2rem;
  /* Space under title */
  margin-bottom: 0.7rem;
}

/* Experience bullet list */
.experience-bullets {
  /* Comfortable left indent */
  padding-left: 1.15rem;
  /* Remove bottom margin */
  margin: 0;
}

/* Each experience bullet */
.experience-bullets li {
  /* Space between bullets */
  margin-bottom: 0.45rem;
  /* Readable text color */
  color: var(--text);
}

/* Skills panel containing all groups */
.skills-panel {
  /* Remove stacked-card feel */
  padding: 0.4rem 1.35rem 0.6rem;
}

/* One labeled skill row */
.skill-row {
  /* Label left, chips right on desktop */
  display: grid;
  /* Fixed label column + flexible chips */
  grid-template-columns: 220px 1fr;
  /* Align label with first chip row */
  align-items: start;
  /* Gap between label and chips */
  gap: 0.85rem 1.25rem;
  /* Separators between skill groups */
  padding: 1rem 0;
  /* Soft divider line */
  border-bottom: 1px solid rgba(15, 28, 36, 0.08);
}

/* Remove divider from last skill row */
.skill-row:last-child {
  /* No bottom border on final row */
  border-bottom: 0;
}

/* Skill group label */
.skill-row-label {
  /* Strong label */
  font-weight: 700;
  /* Slightly compact */
  font-size: 0.95rem;
  /* Dark text for clarity */
  color: var(--ink);
  /* Keep label from looking floaty */
  padding-top: 0.25rem;
}

/* Highlight learning skills differently */
.skill-row-learning {
  /* Soft tint to mark “currently learning” */
  background: rgba(31, 122, 108, 0.05);
  /* Pull tint to card edges */
  margin: 0 -1.35rem;
  /* Restore horizontal padding after negative margin */
  padding-left: 1.35rem;
  /* Restore right padding */
  padding-right: 1.35rem;
  /* Soft rounded ends inside card */
  border-radius: 12px;
}

/* Education list */
.education-list {
  /* Stack education entries */
  display: grid;
  /* Gap between entries */
  gap: 0.9rem;
}

/* One education entry */
.education-item {
  /* Two-column: dates | details */
  display: grid;
  /* Date column + content */
  grid-template-columns: 160px 1fr;
  /* Align to top */
  align-items: start;
  /* Gap between columns */
  gap: 1rem;
  /* White panel */
  background: #fff;
  /* Soft radius */
  border-radius: var(--radius);
  /* Internal padding */
  padding: 1.15rem 1.3rem;
  /* Subtle border */
  border: 1px solid rgba(15, 28, 36, 0.08);
}

/* Education date column */
.education-dates {
  /* Accent chronology */
  color: var(--accent);
  /* Strong weight */
  font-weight: 700;
  /* Compact size */
  font-size: 0.92rem;
  /* Keep dates from wrapping awkwardly */
  line-height: 1.35;
}

/* Education title */
.education-body h4 {
  /* Display font */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Compact spacing */
  margin-bottom: 0.25rem;
}

/* Credential line under title */
.education-credential {
  /* Accent secondary label */
  color: var(--accent);
  /* Medium weight */
  font-weight: 700;
  /* Compact size */
  font-size: 0.9rem;
  /* Tight spacing */
  margin-bottom: 0.25rem;
}

/* School / institution line */
.education-school {
  /* Muted supporting text */
  color: var(--muted);
  /* Compact spacing */
  margin-bottom: 0.35rem;
}

/* Optional education note */
.education-note {
  /* Body text */
  color: var(--text);
  /* Remove extra margin */
  margin: 0;
}

/* Additional training list */
.training-list {
  /* Compact indent */
  padding-left: 1.1rem;
  /* Remove bottom margin */
  margin: 0.35rem 0 0;
}

/* Each additional training item */
.training-list li {
  /* Space between items */
  margin-bottom: 0.3rem;
  /* Readable color */
  color: var(--text);
}

/* Mobile adjustments for resume organization */
@media (max-width: 991.98px) {
  /* Stack summary identity and contacts */
  .resume-summary-top {
    /* Vertical stack on tablet/phone */
    flex-direction: column;
  }

  /* Stack skill label above chips */
  .skill-row {
    /* Single column layout */
    grid-template-columns: 1fr;
  }

  /* Stack education dates above details */
  .education-item {
    /* Single column layout */
    grid-template-columns: 1fr;
  }
}

/* Project card container */
.project-card {
  /* Flex column so body can stretch */
  display: flex;
  /* Vertical stacking */
  flex-direction: column;
  /* Fill column height */
  height: 100%;
  /* Light surface */
  background: #fff;
  /* Soft radius */
  border-radius: var(--radius);
  /* Clip image corners */
  overflow: hidden;
  /* Subtle border */
  border: 1px solid rgba(15, 28, 36, 0.08);
  /* Soft depth */
  box-shadow: var(--shadow);
}

/* Project image wrapper */
.project-media {
  /* Positioning context for impact badge */
  position: relative;
}

/* Project image */
.project-media img {
  /* Fill media width */
  width: 100%;
  /* Consistent crop height */
  height: 210px;
  /* Crop image nicely */
  object-fit: cover;
}

/* Impact badge over image */
.impact-badge {
  /* Overlay on image */
  position: absolute;
  /* Offset from top */
  top: 12px;
  /* Offset from left */
  left: 12px;
  /* Dark translucent pill */
  background: rgba(15, 28, 36, 0.82);
  /* Light text */
  color: var(--cream);
  /* Compact padding */
  padding: 0.35rem 0.7rem;
  /* Pill shape */
  border-radius: 999px;
  /* Small label */
  font-size: 0.78rem;
  /* Strong weight */
  font-weight: 700;
}

/* Project text area */
.project-body {
  /* Internal spacing */
  padding: 1.25rem;
  /* Allow body to grow */
  display: flex;
  /* Vertical stack */
  flex-direction: column;
  /* Stretch to fill card */
  flex: 1;
}

/* Project category line */
.project-subtitle {
  /* Accent color */
  color: var(--accent);
  /* Uppercase label style */
  text-transform: uppercase;
  /* Wide tracking */
  letter-spacing: 0.08em;
  /* Compact size */
  font-size: 0.75rem;
  /* Strong weight */
  font-weight: 700;
  /* Space under label */
  margin-bottom: 0.4rem;
}

/* Project title */
.project-body h3 {
  /* Display font */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Space under title */
  margin-bottom: 0.6rem;
}

/* Project result bullets */
.result-list {
  /* Compact left padding */
  padding-left: 1.1rem;
  /* Space around list */
  margin: 0.75rem 0 1rem;
  /* Muted text */
  color: var(--muted);
}

/* Project status line */
.project-status {
  /* Muted status */
  color: var(--muted);
  /* Compact size */
  font-size: 0.9rem;
  /* Push actions toward bottom when possible */
  margin-top: auto;
  /* Space before buttons */
  margin-bottom: 0.9rem;
}

/* Case study modal surface */
.case-modal {
  /* Soft radius */
  border-radius: 18px;
  /* Remove harsh border */
  border: 0;
}

/* Modal kicker label */
.modal-kicker {
  /* Uppercase small label */
  text-transform: uppercase;
  /* Tracking for label feel */
  letter-spacing: 0.08em;
  /* Compact size */
  font-size: 0.75rem;
  /* Accent color */
  color: var(--accent);
  /* Strong weight */
  font-weight: 700;
}

/* Case study content block */
.case-block {
  /* Space between blocks */
  margin-bottom: 1rem;
}

/* Case study block title */
.case-block h6 {
  /* Strong label */
  font-weight: 700;
  /* Compact spacing */
  margin-bottom: 0.35rem;
}

/* Feature / highlight card */
.feature-card,
.service-card {
  /* Light surface */
  background: #fff;
  /* Soft radius */
  border-radius: var(--radius);
  /* Internal spacing */
  padding: 1.5rem;
  /* Full column height */
  height: 100%;
  /* Subtle border */
  border: 1px solid rgba(15, 28, 36, 0.08);
}

/* Feature icon circle */
.feature-icon {
  /* Circle size */
  width: 48px;
  /* Matching height */
  height: 48px;
  /* Center icon */
  display: inline-flex;
  /* Vertical center */
  align-items: center;
  /* Horizontal center */
  justify-content: center;
  /* Accent fill */
  background: rgba(31, 122, 108, 0.12);
  /* Accent icon color */
  color: var(--accent);
  /* Circle shape */
  border-radius: 50%;
  /* Space under icon */
  margin-bottom: 1rem;
  /* Icon size */
  font-size: 1.2rem;
}

/* Feature / service titles */
.feature-card h3,
.service-card h3 {
  /* Display font */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Size for card titles */
  font-size: 1.25rem;
  /* Space under title */
  margin-bottom: 0.7rem;
}

/* Feature / service text */
.feature-card p,
.service-card p {
  /* Muted supporting copy */
  color: var(--muted);
  /* Remove extra margin */
  margin: 0;
}

/* Bottom CTA band in highlights */
.cta-band {
  /* Center content */
  text-align: center;
  /* Space above band */
  margin-top: 3rem;
}

/* CTA band supporting sentence */
.cta-band p {
  /* Muted text */
  color: var(--muted);
  /* Space under sentence */
  margin-bottom: 1rem;
}

/* Contact info stack */
.contact-info {
  /* Vertical spacing handled by children */
  display: grid;
  /* Gap between info rows */
  gap: 1rem;
}

/* Single contact info row */
.info-item {
  /* Icon + text row */
  display: flex;
  /* Align to top */
  align-items: flex-start;
  /* Gap between icon and text */
  gap: 0.9rem;
  /* Light panel */
  background: #fff;
  /* Soft radius */
  border-radius: 14px;
  /* Internal padding */
  padding: 1rem 1.1rem;
  /* Subtle border */
  border: 1px solid rgba(15, 28, 36, 0.08);
}

/* Contact info icon */
.info-item i {
  /* Accent color */
  color: var(--accent);
  /* Larger icon */
  font-size: 1.2rem;
  /* Nudge down slightly */
  margin-top: 0.15rem;
}

/* Contact info heading */
.info-item h3 {
  /* Compact heading size */
  font-size: 1rem;
  /* Strong weight */
  font-weight: 700;
  /* Tight spacing */
  margin-bottom: 0.2rem;
}

/* Contact info paragraph */
.info-item p {
  /* Remove extra margin */
  margin: 0;
  /* Muted text */
  color: var(--muted);
}

/* Copy email button */
.copy-btn {
  /* Transparent button */
  background: transparent;
  /* No border */
  border: 0;
  /* Muted icon */
  color: var(--muted);
  /* Pointer cursor */
  cursor: pointer;
  /* Space from email text */
  margin-left: 0.35rem;
}

/* Contact form panel */
.contact-form {
  /* Light surface */
  background: #fff;
  /* Soft radius */
  border-radius: var(--radius);
  /* Internal spacing */
  padding: 1.5rem;
  /* Subtle border */
  border: 1px solid rgba(15, 28, 36, 0.08);
  /* Soft depth */
  box-shadow: var(--shadow);
}

/* Form labels */
.contact-form .form-label {
  /* Stronger label weight */
  font-weight: 700;
}

/* Form controls */
.contact-form .form-control {
  /* Soft radius */
  border-radius: 12px;
  /* Subtle border */
  border-color: rgba(15, 28, 36, 0.15);
  /* Comfortable padding */
  padding: 0.8rem 0.9rem;
}

/* Legal note under form */
.form-legal {
  /* Compact muted note */
  color: var(--muted);
  /* Small text */
  font-size: 0.85rem;
  /* Space under note */
  margin-bottom: 0.85rem;
}

/* Form success/error status box */
.form-status {
  /* Soft panel */
  border-radius: 12px;
  /* Internal padding */
  padding: 0.85rem 1rem;
  /* Space under status */
  margin-bottom: 1rem;
  /* Medium weight */
  font-weight: 600;
}

/* Success state */
.form-status.is-success {
  /* Soft green tint */
  background: rgba(31, 122, 108, 0.12);
  /* Green text */
  color: var(--accent-dark);
}

/* Error state */
.form-status.is-error {
  /* Soft red tint */
  background: rgba(176, 62, 62, 0.12);
  /* Red text */
  color: #8f2f2f;
}

/* Site footer */
.site-footer {
  /* Dark footer canvas */
  background: var(--ink);
  /* Cream text */
  color: var(--cream);
  /* Footer spacing */
  padding: 3.5rem 0;
  /* Center content */
  text-align: center;
}

/* Footer name */
.footer-name {
  /* Display font */
  font-family: var(--font-display);
  /* Strong weight */
  font-weight: 700;
  /* Size for footer brand */
  font-size: 1.8rem;
  /* Space under name */
  margin-bottom: 0.75rem;
}

/* Footer supporting text */
.footer-text {
  /* Soft cream */
  color: rgba(247, 243, 234, 0.78);
  /* Limit width */
  max-width: 40rem;
  /* Center block */
  margin: 0 auto 1.25rem;
}

/* Footer social row spacing */
.site-footer .social-row {
  /* Center icons */
  justify-content: center;
  /* Space under icons */
  margin-bottom: 1.5rem;
}

/* Footer copyright line */
.footer-copy,
.footer-credits {
  /* Soft cream */
  color: rgba(247, 243, 234, 0.65);
  /* Compact size */
  font-size: 0.92rem;
  /* Tight spacing */
  margin-bottom: 0.35rem;
}

/* Scroll-to-top button */
.scroll-top {
  /* Fixed to viewport */
  position: fixed;
  /* Offset from bottom */
  bottom: 24px;
  /* Offset from right */
  right: 24px;
  /* Circle width */
  width: 46px;
  /* Circle height */
  height: 46px;
  /* Hidden by default */
  opacity: 0;
  /* Ignore clicks while hidden */
  pointer-events: none;
  /* Center icon */
  display: inline-flex;
  /* Vertical center */
  align-items: center;
  /* Horizontal center */
  justify-content: center;
  /* Accent fill */
  background: var(--accent);
  /* Light icon */
  color: #fff;
  /* No border */
  border: 0;
  /* Circle shape */
  border-radius: 50%;
  /* Keep above content */
  z-index: 1100;
  /* Smooth fade */
  transition: opacity 0.2s ease;
}

/* Visible scroll-to-top state */
.scroll-top.is-visible {
  /* Fully visible */
  opacity: 1;
  /* Allow clicks */
  pointer-events: auto;
}

/* Entrance motion helper */
.reveal {
  /* Start slightly lowered */
  transform: translateY(18px);
  /* Start invisible */
  opacity: 0;
  /* Animate into place */
  animation: rise-in 0.8s ease forwards;
}

/* Stagger second reveal item */
.reveal:nth-child(2) {
  /* Delay second item */
  animation-delay: 0.12s;
}

/* Stagger third reveal item */
.reveal:nth-child(3) {
  /* Delay third item */
  animation-delay: 0.2s;
}

/* Stagger fourth reveal item */
.reveal:nth-child(4) {
  /* Delay fourth item */
  animation-delay: 0.28s;
}

/* Stagger fifth reveal item */
.reveal:nth-child(5) {
  /* Delay fifth item */
  animation-delay: 0.36s;
}

/* Keyframes for rise-in motion */
@keyframes rise-in {
  /* End state: natural position and fully visible */
  to {
    /* Reset translation */
    transform: translateY(0);
    /* Fully opaque */
    opacity: 1;
  }
}

/* Tablet and down adjustments */
@media (max-width: 991.98px) {
  /* Stack navigation as a dropdown panel */
  .site-nav {
    /* Hidden until toggled */
    display: none;
    /* Position under header */
    position: absolute;
    /* Align to top below header bar */
    top: 72px;
    /* Stretch full width */
    left: 0;
    /* Full width */
    right: 0;
    /* Dark panel */
    background: rgba(15, 28, 36, 0.98);
    /* Internal padding */
    padding: 1rem 1.25rem 1.25rem;
  }

  /* Show mobile nav when open */
  .site-nav.is-open {
    /* Make nav visible */
    display: block;
  }

  /* Stack mobile nav links vertically */
  .site-nav ul {
    /* Vertical menu */
    flex-direction: column;
    /* Gap between links */
    gap: 0.85rem;
  }

  /* Reduce hero top padding on mobile */
  .hero-content {
    /* Less top padding on small screens */
    padding-top: 7rem;
  }

  /* Stack stats on smaller screens */
  .stats-grid,
  .mini-grid {
    /* Single column for readability */
    grid-template-columns: 1fr;
  }
}

/* Small phone adjustments */
@media (max-width: 575.98px) {
  /* Tighten section padding */
  .section-block {
    /* Less vertical padding on phones */
    padding: 4rem 0;
  }

  /* Keep consecutive alt sections tight on phones too */
  .section-block.section-alt:has(+ .section-block.section-alt) {
    padding-bottom: 1.75rem;
  }

  .section-block.section-alt + .section-block.section-alt {
    padding-top: 1.75rem;
  }

  /* Keep CTAs usable but compact */
  .btn-accent,
  .btn-ghost,
  .btn-outline-dark {
    /* Full-width buttons on very small screens */
    width: 100%;
    /* Center label */
    text-align: center;
  }

  /* Stack quiet links cleanly under buttons on phones */
  .hero-actions .hero-text-link {
    /* Full-width secondary links */
    width: 100%;
    /* Center label */
    justify-content: center;
  }
}