/* =============================================================================
   style.css — Portfolio of Markus Krogen Jensen
   Cybernetics & Robotics Engineering, NTNU
   =============================================================================
   Structure:
   1.  Google Fonts import
   2.  Custom properties (design tokens)
   3.  Reset & base
   4.  Typography
   5.  Layout & container
   6.  Navigation
   7.  Hero section
   8.  Sections (generic)
   9.  Components (cards, buttons, tags, form)
   10. Animations & transitions
   11. Utility classes
   12. Media queries (min-width — mobile first)
   ============================================================================= */


/* =============================================================================
   1. GOOGLE FONTS IMPORT
   Space Grotesk — geometric, technical feel for headings
   Inter       — neutral, highly legible for body text
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');


/* =============================================================================
   2. CUSTOM PROPERTIES (Design Tokens)
   All colors, fonts, spacing and radii are defined here.
   Change a value here and it updates everywhere.
   ============================================================================= */

:root {

  /* --- Colors ---
     Palette chosen for a dark-mode engineering/robotics portfolio.
     Deep navy-black backgrounds keep the focus on content.
     Electric blue primary accent conveys precision and technology.
     Teal secondary accent adds depth without competing with the primary.
  */

  /* Backgrounds */
  --color-bg:         #0d1117;   /* Page background — near-black */
  --color-surface:    #161b22;   /* Cards, nav, elevated surfaces */
  --color-surface-2:  #21262d;   /* Hover states, borders, subtle dividers */

  /* Accent colors */
  --color-primary:    #2f81f7;   /* Electric blue — primary CTAs, links, highlights */
  --color-primary-dim:#1a5fc4;   /* Darker primary for hover states */
  --color-secondary:  #39d0c8;   /* Teal — secondary highlights, tags, decorative */

  /* Text */
  --color-text:       #e6edf3;   /* Primary text — off-white, easy to read on dark bg */
  --color-text-muted: #7d8590;   /* Secondary / muted text — labels, captions */
  --color-text-faint: #484f58;   /* Faint — placeholders, disabled states */

  /* Semantic */
  --color-border:     #30363d;   /* Subtle borders and dividers */
  --color-focus:      #2f81f7;   /* Focus ring — same as primary for consistency */

  /* --- Typography --- */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Courier New', Courier, monospace; /* For code snippets if needed */

  /* Font sizes — fluid using clamp(min, preferred, max) */
  --text-xs:   clamp(0.70rem, 1.5vw, 0.75rem);
  --text-sm:   clamp(0.85rem, 2vw,   0.9rem);
  --text-base: clamp(1rem,    2.5vw,  1.0625rem);
  --text-lg:   clamp(1.1rem,  3vw,    1.25rem);
  --text-xl:   clamp(1.25rem, 4vw,    1.5rem);
  --text-2xl:  clamp(1.5rem,  5vw,    2rem);
  --text-3xl:  clamp(2rem,    6vw,    2.75rem);
  --text-4xl:  clamp(2.5rem,  8vw,    3.5rem);

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Font weights */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.12em;

  /* --- Spacing scale ---
     Based on a 4px base unit.
     Use these variables instead of raw px values to stay consistent.
  */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* --- Border radii --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* --- Shadows ---
     Shadows use the primary accent color very subtly to tie into the palette.
  */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(47, 129, 247, 0.15); /* Subtle blue glow for highlights */

  /* --- Glassmorphism tokens ---
     Reusable properties for the frosted-glass card treatment.
     --glass-bg      : semi-transparent surface derived from --color-surface (#161b22)
     --glass-border  : near-invisible white tint that reads as a "glass edge"
     --glass-inset   : top-edge highlight — mimics light catching on real glass
     --glass-blur    : backdrop blur amount — applied with backdrop-filter
  */
  --glass-bg:     rgba(22, 27, 34, 0.65);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass-blur:   blur(14px);

  /* --- Layout --- */
  --container-max: 1100px;  /* Max content width */
  --container-pad: var(--space-4); /* Horizontal padding — overridden at larger breakpoints */
  --nav-height: 64px;       /* Fixed nav height used for scroll offset */
}


/* =============================================================================
   3. RESET & BASE STYLES
   A modern minimal reset. Builds on top of browser defaults sensibly.
   ============================================================================= */

/* Box model: include padding and border in element dimensions */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Smooth scrolling — offset by nav height so anchor links don't hide behind nav */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%; /* Prevent font scaling on iOS orientation change */
}

/* Base body styles — dark background, primary text, body font */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;  /* Crisper text on macOS/iOS */
  -moz-osx-font-smoothing: grayscale;
}

/* Remove default list styles where lists are used for nav/ui, not content */
ul,
ol {
  list-style: none;
}

/* Make images responsive by default */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form elements — browsers don't do this automatically */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Remove default button styles — we'll style them explicitly as components */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Default anchor styling — no underline by default, color inherits */
a {
  color: inherit;
  text-decoration: none;
}

/* Focusable elements — accessible focus ring using the primary accent color */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}


/* =============================================================================
   4. TYPOGRAPHY
   All heading and text styles. Using Space Grotesk for headings, Inter for body.
   ============================================================================= */

/* Headings — Space Grotesk, tight letter spacing for a modern technical feel */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); }

/* Body text — paragraphs */
p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  max-width: 65ch; /* Optimal reading line length */
}

/* Lead / intro paragraph — slightly larger */
p.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* Small / label text */
small,
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-surface-2);
  color: var(--color-secondary);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}

/* Section label — small uppercase tracking above a heading */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* Accent text — inline span to highlight a word in a heading */
.accent {
  color: var(--color-primary);
}

.accent-teal {
  color: var(--color-secondary);
}

/* Muted text — secondary information */
.text-muted {
  color: var(--color-text-muted);
}


/* =============================================================================
   5. LAYOUT & CONTAINER
   The .container keeps content centered with consistent horizontal padding.
   ============================================================================= */

/* Main content wrapper */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;           /* Center horizontally */
  padding-inline: var(--container-pad);
}

/* Page wrapper — flex column so footer sticks to bottom */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content area grows to push footer down */
main {
  flex: 1;
}


/* =============================================================================
   6. NAVIGATION
   Fixed top nav. Transparent on load, solid on scroll (JS will add .scrolled).
   ============================================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* flex-direction: column so .nav__mobile can drop below .nav__inner */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--space-6);           /* Breathing room on sides */
  background-color: rgba(13, 17, 23, 0.85); /* --color-bg with opacity */
  backdrop-filter: blur(12px);              /* Frosted glass effect */
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
}

/* Nav scrolled state — adds a glow/shadow (toggled by JS adding .scrolled class) */
.nav.scrolled {
  border-bottom-color: var(--color-surface-2);
  box-shadow: var(--shadow-md);
}

/* Nav inner layout — mobile: flex row, hamburger on far left, lang toggle on far right.
   The hamburger is placed directly inside .nav__inner (before .nav__links) so it anchors
   to the left edge; .nav__controls (lang toggle only on mobile) pushes to the right via
   margin-left: auto.
   Desktop (768px+): three-column grid so nav links sit perfectly centered
   between an implicit left spacer and the controls on the right.
   The grid approach avoids position:absolute hacks and stays in normal flow. */
.nav__inner {
  display: flex;
  align-items: center;
  /* Mobile: hamburger left, everything else pushed right via margin-left: auto
     on .nav__controls. No justify-content needed here. */
  width: 100%;
  height: var(--nav-height); /* Keeps the bar exactly --nav-height tall */
}

/* Right-side group: language toggle only (hamburger is now a direct child of
   .nav__inner, positioned before .nav__links in the HTML).
   margin-left: auto pushes this group to the far right on mobile. */
.nav__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto; /* Push lang toggle to right edge on mobile */
}

/* Logo / site name */
.nav__logo {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.nav__logo:hover {
  color: var(--color-primary);
}

/* Logo accent dot or bracket — decorative */
.nav__logo span {
  color: var(--color-primary);
}

/* Nav links list */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Individual nav link */
.nav__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  position: relative;
  padding-bottom: 2px;
  transition: color var(--transition-fast);
}

/* Underline animation on nav links */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link.active {
  color: var(--color-text);
}

.nav__link:hover::after,
.nav__link.active::after {
  width: 100%;
}

/* Mobile hamburger button — visible only on small screens (< 768px).
   Hidden on desktop via the md media query below.
   display: flex is the shown state; the md query overrides to none. */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.nav__hamburger:hover {
  background-color: var(--color-surface-2);
}

/* Hamburger lines */
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base),
              opacity var(--transition-base);
}

/* Hamburger open state — animates into an X */
.nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav dropdown — solid surface panel.
   Uses --color-surface (fully opaque #161b22) so the menu background is never
   transparent; text must be fully readable regardless of the page content below.
   border-top separates it visually from the nav bar.
   z-index: 200 ensures it layers above all page content (nav itself is z-index 100).
   JS toggles .open class to show/hide. */
.nav__mobile {
  display: none; /* JS toggles visibility via .open class */
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background-color: var(--color-surface); /* Solid #161b22 — never transparent */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  box-shadow: var(--shadow-md);
  z-index: 200; /* Above all page content */
}

.nav__mobile.open {
  display: block;
}

.nav__mobile .nav__link {
  display: block;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

.nav__mobile .nav__link::after {
  display: none; /* No underline animation in mobile dropdown */
}


/* =============================================================================
   7. HERO SECTION
   Full-viewport-height landing area with centered content.
   ============================================================================= */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);     /* Offset for fixed nav */
  padding-bottom: var(--space-16);
  position: relative;
  overflow: hidden;
}

/* Subtle grid background — CSS only, no images */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(47, 129, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 129, 247, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Radial gradient vignette to fade the grid toward edges */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    transparent 30%,
    var(--color-bg) 100%
  );
  pointer-events: none;
}

/* Hero content sits above the decorative pseudo-elements */
.hero__content {
  position: relative;
  z-index: 1;
}

/* Hero eyebrow — small label above the main heading */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}

/* Decorative line before eyebrow text */
.hero__eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

/* Hero main heading */
.hero__heading {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin-bottom: var(--space-6);
  max-width: 16ch;
}

/* Hero sub-heading / description */
.hero__description {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  max-width: 52ch;
  margin-bottom: var(--space-8);
}

/* Hero CTA buttons row */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Scroll indicator — animated chevron at bottom of hero */
.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  animation: bounce 2s ease-in-out infinite;
}

.hero__scroll-hint svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}


/* =============================================================================
   8. SECTIONS (Generic)
   Reusable section styles. Every content section outside the hero uses these.
   ============================================================================= */

.section {
  padding-block: var(--space-16);
}

/* Alternate section background — creates visual rhythm between sections */
.section--alt {
  background-color: var(--color-surface);
}

/* Section header — label + heading + optional description */
.section__header {
  margin-bottom: var(--space-12);
}

.section__header p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

/* Decorative separator line under a section heading */
.section__divider {
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
  margin-top: var(--space-4);
}


/* =============================================================================
   9. COMPONENTS
   Reusable UI components: buttons, cards, tags, form elements, footer.
   ============================================================================= */

/* --- Buttons --- */

/* Base button — shared styles for all button variants */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

/* Primary button — filled blue */
.btn--primary {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-dim);
  border-color: var(--color-primary-dim);
  box-shadow: var(--shadow-glow);
}

/* Ghost button — outlined, no fill */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: rgba(47, 129, 247, 0.06);
}

/* Small button modifier */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

/* Icon inside a button */
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* --- Project Cards --- */

/* Card grid container */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* Individual card — glassmorphism surface
   backdrop-filter frosts whatever is rendered beneath the card.
   The semi-transparent background keeps depth while tying to the dark palette.
   -webkit- prefix required for Safari. */
.card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  /* Outer depth shadow + subtle top-edge glass highlight */
  box-shadow: var(--shadow-md), var(--glass-inset);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

/* On hover: slightly more opaque background + blue glow to match accent palette */
.card:hover {
  background-color: rgba(22, 27, 34, 0.80);
  border-color: rgba(47, 129, 247, 0.35);
  box-shadow: var(--shadow-lg), var(--glass-inset), var(--shadow-glow);
  transform: translateY(-3px);
}

/* Card header — icon + title row */
.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Card icon — small teal accent */
.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: rgba(57, 208, 200, 0.1);
  color: var(--color-secondary);
  flex-shrink: 0;
}

.card__icon svg {
  width: 20px;
  height: 20px;
}

/* Card title */
.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* Card body text */
.card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Card footer — tags + link row */
.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto; /* Push to bottom of card */
}

/* Card link arrow */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.card__link:hover {
  gap: var(--space-2);
  color: var(--color-text);
}

.card__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.card__link:hover svg {
  transform: translateX(3px);
}


/* --- Skill Cards (index.html skills snapshot section) ---
   Smaller, more compact variant of .card used for listing skill categories.
   Receives the same glass treatment as .card for visual consistency. */
.skill-card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.skill-card:hover {
  background-color: rgba(22, 27, 34, 0.80);
  border-color: rgba(47, 129, 247, 0.35);
  box-shadow: var(--shadow-md), var(--glass-inset), var(--shadow-glow);
  transform: translateY(-2px);
}


/* --- Tags / Skill Badges --- */

/* Tag container — wrapping flex row */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Individual tag */
.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-secondary);
  background-color: rgba(57, 208, 200, 0.08);
  border: 1px solid rgba(57, 208, 200, 0.2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
}

/* Primary-colored tag variant */
.tag--primary {
  color: var(--color-primary);
  background-color: rgba(47, 129, 247, 0.08);
  border-color: rgba(47, 129, 247, 0.2);
}


/* --- CV / Timeline --- */

/* Timeline list for education and experience */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: relative;
  padding-left: var(--space-6);
}

/* Vertical line along the left */
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-primary),
    var(--color-secondary),
    transparent
  );
  border-radius: var(--radius-full);
}

/* Timeline item */
.timeline__item {
  position: relative;
}

/* Dot on the timeline */
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-6) - 1px); /* Align with the vertical line */
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-primary);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* Timeline date range */
.timeline__date {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

/* Timeline heading */
.timeline__heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

/* Institution / company name */
.timeline__org {
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* Description text */
.timeline__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}


/* --- Contact Form --- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Form field wrapper */
.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Form label */
.form__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

/* Form input and textarea — glass surface
   Semi-transparent background with frosted blur reads as a recessed input well.
   The glass border keeps it consistent with card edges without feeling heavy. */
.form__input,
.form__textarea {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              background-color var(--transition-fast);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-text-faint);
}

.form__input:focus,
.form__textarea:focus {
  outline: none;
  background-color: rgba(22, 27, 34, 0.80); /* Slightly more opaque on focus */
  border-color: var(--color-primary);
  /* Inset highlight + blue glow focus ring — glass and palette consistent */
  box-shadow: var(--glass-inset), 0 0 0 3px rgba(47, 129, 247, 0.15);
}

.form__textarea {
  min-height: 140px;
  resize: vertical;
}


/* --- CTA Strip ---
   Full-width call-to-action band between sections (e.g. "Looking for an intern?").
   Glass treatment gives it a floating, elevated quality against the page background,
   without the heavy opacity of a solid surface. */
.cta-strip {
  background-color: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  /* Inset top highlight so it reads as a raised panel */
  box-shadow: var(--glass-inset);
  padding-block: var(--space-12);
}


/* --- Footer --- */

/* Footer — glass surface
   Slightly more opaque than cards (0.75) so it reads as a grounded base
   while still participating in the glass system.
   The inset highlight draws a faint light line along the top edge. */
.footer {
  padding-block: var(--space-8);
  background-color: rgba(22, 27, 34, 0.75); /* Slightly denser glass for footer anchoring */
  border-top: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

/* Footer social links */
.footer__links {
  display: flex;
  gap: var(--space-6);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-primary);
}

/* Footer copyright text */
.footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}


/* =============================================================================
   10. ANIMATIONS & TRANSITIONS
   CSS keyframe animations. JavaScript may add/remove classes to trigger these.
   ============================================================================= */

/* Scroll-in fade — elements start invisible and slide up */
/* Applied by JS (Intersection Observer) adding .is-visible to .reveal elements */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay helpers — add to sibling .reveal elements */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }
.reveal--delay-5 { transition-delay: 500ms; }

/* Bounce animation — used by scroll indicator */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* Fade in — generic entrance */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide up — generic entrance */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse glow — used on accent elements */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(47, 129, 247, 0.2); }
  50%       { box-shadow: 0 0 20px rgba(47, 129, 247, 0.4); }
}

/* Accessibility — honour user preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep reveal elements visible so content isn't hidden */
  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* =============================================================================
   11. UTILITY CLASSES
   Small single-purpose helpers.
   ============================================================================= */

/* Visually hidden — accessible text for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Flex helpers */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* Spacing helpers */
.mt-auto { margin-top: auto; }
.mb-0    { margin-bottom: 0; }

/* Max width for text blocks */
.prose {
  max-width: 68ch;
}

/* Inline flex center — for icon + text rows */
.inline-flex-center {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}


/* =============================================================================
   12. MEDIA QUERIES — Mobile first (min-width)
   Base styles above are for mobile.
   Each breakpoint progressively enhances for larger screens.

   Breakpoints:
   sm  — 480px   (large phones, landscape)
   md  — 768px   (tablets)
   lg  — 1024px  (desktops)
   xl  — 1280px  (large desktops)
   ============================================================================= */

/* --- sm: 480px --- */
@media (min-width: 480px) {
  :root {
    --container-pad: var(--space-6); /* More breathing room */
  }

  .cards-grid {
    grid-template-columns: 1fr; /* Still single column on large phones */
  }
}

/* --- md: 768px --- */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-8);
  }

  /* Nav inner — switch to three-column grid on desktop so the links are
     perfectly centered regardless of the controls width on the right.
     Column 1 (1fr): invisible left spacer — mirrors column 3 width so the
                     center column truly sits at the midpoint.
     Column 2 (auto): nav links — sized to their content, centered in bar.
     Column 3 (1fr): .nav__controls pulled to the far right via justify-self.
     Explicit grid-column placement is used because auto-placement would put
     .nav__links in col 1 and .nav__controls in col 2, not what we want. */
  .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  /* Nav links — restore visibility on desktop (hidden on mobile via max-width query),
     and place in center column of the three-column grid. */
  .nav__links {
    display: flex;    /* Show the desktop link list */
    grid-column: 2;   /* Center column of the nav__inner grid */
    justify-self: center;
  }

  /* Controls — right column, flushed to the right edge.
     Reset the mobile margin-left: auto because the grid handles placement. */
  .nav__controls {
    grid-column: 3;
    justify-self: end;
    margin-left: 0; /* Override mobile margin-left: auto — grid takes over */
  }

  /* Hamburger only needed on mobile — hidden on desktop */
  .nav__hamburger {
    display: none;
  }

  /* Mobile dropdown always hidden on desktop regardless of .open state */
  .nav__mobile {
    display: none !important;
  }

  /* Cards go 2-column on tablets */
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer row layout on wider screens */
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Hero actions can spread */
  .hero__actions {
    flex-wrap: nowrap;
  }
}

/* --- lg: 1024px --- */
@media (min-width: 1024px) {
  :root {
    --container-pad: var(--space-10);
  }

  /* Cards 3-column on desktop */
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* More generous section padding on large screens */
  .section {
    padding-block: var(--space-24);
  }
}

/* --- xl: 1280px --- */
@media (min-width: 1280px) {
  :root {
    --container-pad: var(--space-12);
  }
}

/* --- Hamburger visible only on small screens (below md) --- */
@media (max-width: 767px) {
  /* Hide desktop nav links on mobile */
  .nav__links {
    display: none;
  }
}


/* =============================================================================
   13. NEW COMPONENTS — Classes used in HTML but not yet defined above.
   Added in one block to avoid scattering; grouped by page/concern.
   Order inside this block mirrors the spec inventory:
     A. Shared (all pages)
     B. index.html
     C. cv.html
     D. projects.html
     E. contact.html
   ============================================================================= */


/* ─── A. SHARED ACROSS PAGES ─────────────────────────────────────────────── */

/* --- Page header ---
   The introductory banner that appears below the fixed nav on inner pages
   (cv, projects, contact). Glass panel — full-width, anchored to the top of
   <main>, with a faint border on the bottom edge.
   padding-top clears the fixed nav; padding-bottom gives breathing room. */
.page-header {
  padding-top: calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-10);
  background-color: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
}

/* Page header h1 — large, tight tracking, heading font */
.page-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* Lead paragraph beneath the page title */
.page-header__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}


/* --- Site footer ---
   The HTML uses .site-footer / .site-footer__* while the legacy CSS uses
   .footer / .footer__*. These rules mirror the .footer block exactly so both
   class sets produce the same result.
   Slightly denser glass (0.75) grounds the footer as a visual base. */
.site-footer {
  padding-block: var(--space-8);
  background-color: rgba(22, 27, 34, 0.75);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
}

/* Inner footer layout — stacks on mobile, row on md+ */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

/* Copyright line */
.site-footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Footer links row — email, LinkedIn, GitHub ghost buttons */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

.site-footer__link:hover {
  color: var(--color-primary);
}


/* --- Secondary button ---
   Ghost-style variant using the teal secondary accent.
   Pairs with .btn--primary for two-button CTA groups without
   competing visually. Used on both index.html and cv.html. */
.btn--secondary {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn--secondary:hover {
  background-color: rgba(57, 208, 200, 0.08); /* Teal fill at 8% opacity */
  border-color: var(--color-secondary);
  box-shadow: 0 0 20px rgba(57, 208, 200, 0.12); /* Teal glow on hover */
}


/* ─── B. INDEX.HTML ───────────────────────────────────────────────────────── */

/* --- Hero inner container ---
   Mirrors .hero__content (position + z-index) so content sits above the
   decorative grid pseudo-elements. */
.hero__inner {
  position: relative;
  z-index: 1;
}

/* Hero h1 — same treatment as .hero__heading */
.hero__name {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin-bottom: var(--space-4);
  max-width: 16ch;
}

/* Subtitle line below name — discipline and institution */
.hero__title {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-5);
}

/* Intro paragraph — concise value proposition */
.hero__intro {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  max-width: 52ch;
  margin-bottom: var(--space-8);
}

/* CTA button group — flex row, wraps on very small screens */
.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}


/* --- Skills snapshot section ---
   The section that wraps the four skill cards on index.html. */
.skills {
  padding-block: var(--space-16);
}

/* Section h2 — used directly on the skills heading (not .section__header).
   Kept lighter than the full section__header block; margin-bottom is
   tighter because .section-subtitle follows immediately. */
.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* Muted lead paragraph below a section title */
.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 60ch;
  margin-bottom: var(--space-10);
}

/* Skills grid — 1 col mobile, 2 col at 480px, 4 col at 1024px */
.skills__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
}

/* Skill card — updated with flex column layout and explicit padding.
   Glass surface styles are already defined in section 9 above (.skill-card);
   these declarations layer on the missing structural rules. */
.skill-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Skill card icon — large emoji/glyph container */
.skill-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--space-2);
  color: var(--color-secondary); /* Teal tint for non-emoji icons */
}

/* Skill card h3 — semibold, heading font */
.skill-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

/* Skill card body text */
.skill-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 100%; /* Override global p max-width so it fills the card */
}


/* --- CTA strip inner layout ---
   The .cta-strip surface is already defined in section 9.
   .cta-strip__inner is the inner flex wrapper — stacks on mobile,
   can align center on small viewports. */
.cta-strip__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* Text is centered on mobile; left-aligned on wider screens (see md query) */
}

/* CTA strip heading */
.cta-strip__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* CTA strip body paragraph */
.cta-strip__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 52ch;
}

/* CTA strip button group */
.cta-strip__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}


/* ─── C. CV.HTML ──────────────────────────────────────────────────────────── */

/* --- CV two-column layout ---
   Single column on mobile, 2fr/1fr side-by-side on tablet+.
   Padding-block gives breathing room equivalent to .section. */
.cv-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-block: var(--space-16);
}

/* CV main and sidebar — grid children with no special visual treatment needed */
.cv-main  { /* grid child — no additional styles */ }
.cv-sidebar { /* grid child — no additional styles */ }

/* CV section block — bottom margin separates stacked sections */
.cv-section {
  margin-bottom: var(--space-12);
}

/* CV section heading — with a short gradient underline as a decorative accent.
   The ::after pseudo-element draws a 40px gradient rule below the text,
   connecting the blue primary to teal secondary, matching the brand palette. */
.cv-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  position: relative;
}

.cv-section__title::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
}


/* --- CV entry card ---
   Full glass panel for each education / experience block.
   Matches the .card glass treatment but without the lift-on-hover transform
   (CV entries are denser and shouldn't bounce around like project cards). */
.cv-entry {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.cv-entry:hover {
  background-color: rgba(22, 27, 34, 0.80);
  border-color: rgba(47, 129, 247, 0.35);
  box-shadow: var(--shadow-md), var(--glass-inset), var(--shadow-glow);
}

/* Entry header row — title left, date meta right */
.cv-entry__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap; /* Wrap on very narrow screens */
}

/* Entry h3 */
.cv-entry__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

/* Date / institution label */
.cv-entry__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap; /* Keep date on one line where possible */
  flex-shrink: 0;
}

/* Body paragraph */
.cv-entry__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 100%;
}

/* Coursework details/summary — collapsible.
   summary is the visible trigger; the nested ul reveals on expand. */
.cv-entry__coursework summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  list-style: none; /* Remove default disclosure triangle */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}

/* Custom triangle via ::before */
.cv-entry__coursework summary::before {
  content: '▶';
  font-size: 0.6em;
  transition: transform var(--transition-fast);
}

.cv-entry__coursework[open] summary::before {
  transform: rotate(90deg);
}

.cv-entry__coursework summary:hover {
  color: var(--color-text);
}

/* Coursework list */
.cv-entry__coursework ul {
  margin-top: var(--space-3);
  padding-left: var(--space-4);
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cv-entry__coursework ul li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Highlights list — bullet list of key achievements inside an entry */
.cv-entry__highlights {
  list-style: disc;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cv-entry__highlights li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}


/* --- Skill groups (CV sidebar) ---
   Compact glass panels listing a category of skills.
   Lighter shadow than .cv-entry since these are smaller surface areas. */
.skill-group {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  margin-bottom: var(--space-5);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.skill-group:hover {
  background-color: rgba(22, 27, 34, 0.80);
  border-color: rgba(47, 129, 247, 0.35);
  box-shadow: var(--shadow-sm), var(--glass-inset), var(--shadow-glow);
}

/* Skill group category label — small uppercase tracked heading */
.skill-group__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* Skill list — vertical flex column with teal dot bullets via ::before */
.skill-group__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skill-group__list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  padding-left: var(--space-3);
  position: relative;
}

/* Decorative teal dot before each skill item */
.skill-group__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}


/* ─── D. PROJECTS.HTML ────────────────────────────────────────────────────── */

/* --- Projects section wrapper --- */
.projects-section {
  padding-block: var(--space-16);
}

/* Projects grid — 1 col mobile, 2 col at 768px (kept at 2 for readability) */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
}

/* --- Project card ---
   Primary glassmorphism card for the projects page.
   Same glass system as .card but defined independently so project-specific
   child elements (.project-card__*) remain clearly namespaced. */
.project-card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md), var(--glass-inset);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

/* Hover: more opaque glass, blue border tint, glow, lift */
.project-card:hover {
  background-color: rgba(22, 27, 34, 0.80);
  border-color: rgba(47, 129, 247, 0.35);
  box-shadow: var(--shadow-lg), var(--glass-inset), var(--shadow-glow);
  transform: translateY(-3px);
}

/* Project card body — grows to push footer to bottom */
.project-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Project title */
.project-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

/* Project description */
.project-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 100%;
}

/* Tags list — reuses the existing .tags/.tag visual system */
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin-top: auto; /* Push tags to bottom of body before footer */
}

/* Project card footer — CTA button pinned to card bottom with separator */
.project-card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--glass-border);
}


/* ─── E. CONTACT.HTML ─────────────────────────────────────────────────────── */

/* --- Contact two-column layout ---
   3fr main / 2fr sidebar on tablet+; stacks on mobile. */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-block: var(--space-16);
}

/* Form section and links section wrappers — no glass on the wrappers themselves,
   glass is applied to the individual interactive elements inside them. */
.contact-form-section  { /* wrapper only — no surface styles */ }
.contact-links-section { /* wrapper only — no surface styles */ }

/* Section headings inside contact layout */
.contact-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* Intro paragraph below the form heading */
.contact-section__intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

/* Contact form — vertical stack of field groups */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Form group — mirrors .form__field (label above input) */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Form label — mirrors .form__label */
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

/* Form input — glass surface matching .form__input.
   The textarea variant is handled by the .form-input--textarea modifier.
   Semi-transparent glass background reads as a recessed input well. */
.form-input {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  width: 100%;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.form-input::placeholder {
  color: var(--color-text-faint);
}

.form-input:focus {
  outline: none;
  background-color: rgba(22, 27, 34, 0.80);
  border-color: var(--color-primary);
  box-shadow: var(--glass-inset), 0 0 0 3px rgba(47, 129, 247, 0.15);
}

/* Textarea modifier — taller, resizable vertically */
.form-input--textarea {
  min-height: 140px;
  resize: vertical;
}


/* --- Contact links (email, LinkedIn, GitHub) ---
   Each link is a glass card with icon + label/value layout. */
.contact-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
}

/* Individual contact link card — glass surface */
.contact-link {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.contact-link:hover {
  background-color: rgba(22, 27, 34, 0.80);
  border-color: rgba(47, 129, 247, 0.35);
  box-shadow: var(--shadow-md), var(--glass-inset), var(--shadow-glow);
}

/* Icon column — fixed minimum width keeps label/value columns aligned */
.contact-link__icon {
  font-size: var(--text-lg);
  color: var(--color-secondary);
  min-width: 2rem;
  text-align: center;
  flex-shrink: 0;
}

/* Stacked label + value text column */
.contact-link__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Small uppercase label (e.g. "Email", "LinkedIn") */
.contact-link__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
}

/* Actual value link / text */
.contact-link__value {
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.contact-link__value:hover {
  color: var(--color-primary);
}


/* --- Availability note ---
   Glass card with a left teal accent border to draw the eye.
   Signals availability prominently without needing a heading. */
.availability-note {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--color-secondary); /* Teal accent stripe */
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-6);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), var(--glass-inset);
}

.availability-note p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 100%;
}

.availability-note strong {
  color: var(--color-secondary);
}


/* =============================================================================
   14. MEDIA QUERIES — New component responsive overrides
   These queries extend section 12 with breakpoints specific to the new
   components. Same breakpoints: sm 480px / md 768px / lg 1024px.
   ============================================================================= */

/* --- sm: 480px --- */
@media (min-width: 480px) {
  /* Skills grid — 2 columns on large phones */
  .skills__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- md: 768px --- */
@media (min-width: 768px) {
  /* Site footer — keep centered column at all sizes */
  .site-footer__inner {
    gap: var(--space-5);
  }

  /* CV layout — main content 2fr, sidebar 1fr */
  .cv-layout {
    grid-template-columns: 2fr 1fr;
  }

  /* Projects grid — 2 columns on tablet+ */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact layout — 3fr form, 2fr links sidebar */
  .contact-layout {
    grid-template-columns: 3fr 2fr;
  }

  /* CTA strip inner — restore left-aligned row layout */
  .cta-strip__inner {
    align-items: flex-start;
  }
}

/* --- lg: 1024px --- */
@media (min-width: 1024px) {
  /* Skills grid — 4 columns on desktop */
  .skills__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Projects — stays 2 columns for readability (no 3-col override) */

  /* More generous padding on the skills section at desktop */
  .skills {
    padding-block: var(--space-24);
  }

  /* Projects section at desktop */
  .projects-section {
    padding-block: var(--space-24);
  }
}


/* =============================================================================
   15. LANGUAGE SWITCHER
   The .lang-toggle button sits in the nav and switches between NO and EN.
   ============================================================================= */

/* Language toggle button — pill-shaped, sits inside .nav__controls flex group.
   Previously used position:absolute, now a normal flex item so the hamburger
   can sit beside it on mobile without overlapping. */
.lang-toggle {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.lang-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: rgba(47, 129, 247, 0.06);
}

.lang-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Slightly smaller font size on narrow screens — no longer needs right offset
   because lang-toggle is now a flex item, not absolutely positioned. */
@media (max-width: 767px) {
  .lang-toggle {
    font-size: clamp(0.65rem, 2vw, 0.75rem);
  }
}


/* =============================================================================
   16. PROJECT SUBPAGES
   Styles for individual project detail pages under projects/*.html
   ============================================================================= */

/* --- Back button bar ---
   Sits just below the fixed nav, giving a quick route back to projects.html */
.project-back {
  padding-top: calc(var(--nav-height) + var(--space-6));
  padding-bottom: var(--space-4);
}

/* --- Hero image area --- */
.project-hero {
  padding-block: var(--space-6);
}

/* Placeholder image — dashed border box shown until a real image is added.
   PLACEHOLDER: Replace .placeholder-image div with an <img> tag when ready. */
.placeholder-image {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--color-surface-2) 100%
  );
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  padding: var(--space-8);
  min-height: 200px;
}

.placeholder-image p {
  color: var(--color-text-faint);
  max-width: 40ch;
  margin: 0;
}

/* Variant for pages that are fully placeholder */
.placeholder-image--coming-soon {
  border-color: rgba(57, 208, 200, 0.3); /* Teal tint */
  background: linear-gradient(
    135deg,
    var(--glass-bg) 0%,
    rgba(57, 208, 200, 0.04) 100%
  );
}

/* --- Project detail layout ---
   Contains header, sections, and action buttons. */
.project-detail {
  padding-block: var(--space-10) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Project title + tags row */
.project-detail__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.project-detail__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Tags row */
.project-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

/* --- Content sections (Overview, Built, Learned) ---
   Each section is a glass card. */
.project-section {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Section heading inside each glass card */
.project-section__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  font-family: var(--font-heading);
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: var(--space-2);
}

/* Bullet list inside a section */
.project-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding-left: 0;
}

.project-section__list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  padding-left: var(--space-5);
  position: relative;
}

/* Teal bullet dot */
.project-section__list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--color-secondary);
}

/* Placeholder list items and paragraphs — visually distinct so they're easy to find */
.project-section__placeholder {
  color: var(--color-text-faint) !important;
  font-style: italic;
  border-left: 2px solid var(--color-secondary);
  padding-left: var(--space-3);
  font-size: var(--text-sm);
}

/* Action buttons row at the bottom of the detail page */
.project-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

/* --- Clickable project cards on projects.html ---
   .project-card__title-link makes the title the primary click target.
   .project-card__link-overlay is an invisible full-card overlay (for hover cursor),
   placed behind the content so real links inside still work. */
.project-card {
  position: relative; /* Required for the overlay */
}

.project-card__link-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  z-index: 0;         /* Behind card content */
  cursor: pointer;
}

.project-card__body,
.project-card__footer {
  position: relative;
  z-index: 1;         /* Above overlay so text is selectable */
}

/* Title as a link — no underline, inherits heading colour */
.project-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.project-card__title-link:hover {
  color: var(--color-primary);
}

/* Lift card on hover (title-link hover triggers via parent) */
.project-card:has(.project-card__link-overlay:hover) {
  transform: translateY(-3px);
  border-color: rgba(47, 129, 247, 0.35);
  box-shadow: var(--shadow-lg), var(--glass-inset), var(--shadow-glow);
}

/* --- Responsive --- */
@media (min-width: 768px) {
  .project-detail__title {
    font-size: var(--text-3xl);
  }

  .project-section {
    padding: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .project-detail {
    padding-block: var(--space-12) var(--space-24);
  }
}