/* Portfolio page styles (extracted from inline CSS) */

/* 1) Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f7f2e1;
  --panel: #fff9ea;
  --panel-2: #f2ead2;
  --border: #e3dac1;
  --muted: #4b5563;
  --muted-2: #6b7280;
  --accent: #3566a0;
  --text: #1f2937;
  --radius: 10px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --maxw: 1220px;
  --card-min: 380px;

  /* Badge palette (accessible on dark) */
  --badge-cf-bg: #e7f2f4;
  --badge-cf-bd: #178c8c;
  --badge-cf-fg: #0e3d42;

  --badge-fe-bg: #edeaf6;
  --badge-fe-bd: #6a5acd;
  --badge-fe-fg: #2f2a57;

  --badge-ai-bg: #fff3d6;
  --badge-ai-bd: #d99200;
  --badge-ai-fg: #5c3e00;

  --badge-ml-bg: #fbe8f7;
  --badge-ml-bd: #cf4acf;
  --badge-ml-fg: #631a53;

  --badge-data-bg: #e7f5ed;
  --badge-data-bd: #00a86b;
  --badge-data-fg: #1f513e;

  --badge-meta-bg: #e8f2fb;
  --badge-meta-bd: #5aa0d8;
  --badge-meta-fg: #14324b;

  /* Light-specific tokens promoted to defaults */
  --heading: #374151;

  /* Card accents */
  --card-accent-bd: color-mix(in oklab, var(--accent) 48%, var(--border));
  --card-glow: color-mix(in oklab, var(--accent) 35%, white 65%);
  --card-shadow: rgba(0,0,0,0.14);

  /* Media accents/surfaces */
  --media-accent-bd: var(--card-accent-bd);
  --media-glow: var(--card-glow);
  --chip-bg: #ece5d1;
  --chip-text: #374151;
  --media-bg: #efe7cf;
  --media-grad-a: #f4ecd6;
  --media-grad-b: #efe6cd;
  --media-card-bg: #ece5d1;

  /* Buttons */
  --primary: #3566a0;
  --primary-hover: #2a5180;
  --btn-text-on-primary: #ffffff;

  /* Case study typography on light */
  --prose-muted: #4b5563;
  --prose-subtle: #6b7280;
}

/* Light tokens are now the defaults in :root; removed theme-scoped variable overrides */


/* Buttons and controls */
/* Primary buttons */
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--btn-text-on-primary);
}
.btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}


/* Neutral controls */
.btn:not(.primary),
.filter-btn,
.carousel__prev,
.carousel__next,
.tabs__tab {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}

/* Accent CTA variants (declared after neutral controls to win cascade) */
.btn.btn--learn-more,
.btn.btn--what,
.btn.btn--tell {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-text-on-primary);
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  padding-block: 0.42rem;
  padding-inline: 1rem;
  line-height: 1.1;
}
.btn.btn--learn-more:hover,
.btn.btn--what:hover,
.btn.btn--tell:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--btn-text-on-primary);
}
@media (max-width: 600px) {
  .btn--learn-more,
  .btn--what,
  .btn--tell { padding-block: 0.38rem; }
}



/* Media and carousel surfaces */
/* Media surfaces */
.card__media {
  margin: -0.25rem -0.25rem var(--space-2);
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  background: var(--media-card-bg);
  border: 1px solid var(--card-accent-bd);
  box-shadow: 0 0 0 1px var(--card-glow), 0 2px 8px rgba(0,0,0,0.08);
  min-height: 160px;
}
.card__media img {
  background: var(--media-card-bg);
}
.card__media model-viewer {
  background: var(--media-card-bg);
  border-radius: inherit;
}
/* Media container outline/focus/hover */
.card:hover .card__media {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 42%, white 58%), 0 2px 8px rgba(0,0,0,0.10);
}
.card__media:focus-within {
  outline: 2px solid color-mix(in oklab, var(--accent) 55%, white 45%);
  outline-offset: 2px;
}
/* Carousel */
.carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  background: linear-gradient(135deg, var(--media-grad-a), var(--media-grad-b));
  padding: 0;
  /* Gutters moved to slides for correct centering math */
  padding-inline: 0;
  clip-path: inset(0 round var(--radius));
  transform: translateZ(0);
  overscroll-behavior-x: contain;
}


/* Heading colors */
section > header h3,
main.container h3,
.tabs__title,
.quick-facts h3 {
  color: var(--heading);
}





html, body { min-height: 100vh; background: var(--bg); color: var(--text); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 2px; }



/* 2) Layout */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

/* Ensure header spans full width and won't wrap under width constraints */
body > header.site { width: 100%; box-sizing: border-box; }

/* Ensure content paints below sticky header (prevents transformed sections from overpainting) */
#main-content-wrapper { position: relative; z-index: 0; }
main.container { position: relative; z-index: 0; }

/* Sticky header for portfolio pages */
body > header.site {
  position: fixed;
  top: 0;
  z-index: 1001; /* ensure above transformed cards/carousels */
  isolation: isolate; /* create a new top-level stacking context */
}

@supports (top: max(0px)) {
  body > header.site { top: max(0px, env(safe-area-inset-top)); }
}

/* 3) Hero */
.hero { margin-bottom: var(--space-3); }
.hero h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); margin-bottom: var(--space-2); }
.hero p.sub { color: var(--muted); margin-bottom: var(--space-3); }

.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  font-weight: 600;
}
.btn:hover { text-decoration: none; border-color: var(--accent); }

/* Filter bar */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 6px); /* sits under the fixed header with small gap */
  z-index: 200;          /* above cards and transformed content; below fixed site header */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  border-color: color-mix(in oklab, var(--border) 85%, transparent);
}
.filter-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
}
.filter-btn:hover { border-color: var(--accent); color: var(--text); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--btn-text-on-primary); }
.filter-btn.active:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--btn-text-on-primary); }
.filter-btn:focus-visible { outline: 2px solid #8ec5ff; outline-offset: 2px; }

/* Safe-area aware sticky offset so the filter bar doesn't slide under iOS notch */
@supports (top: max(0px)) {
  .filter-bar { top: calc(var(--header-h) + max(env(safe-area-inset-top), 0px) + 6px); }
}

/* Mobile: keep filter bar single-row & scrollable to avoid wrap/cropping under header */
@media (max-width: 600px) {
  .filter-bar {
    flex-wrap: nowrap;                 /* single row */
    overflow-x: auto;                  /* horizontal scroll */
    -webkit-overflow-scrolling: touch; /* iOS momentum */
    scrollbar-width: none;             /* Firefox hide */
    padding-inline: var(--space-2);
    gap: 0.5rem;
    /* soft edges to hint scrollability */
    mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  }
  .filter-bar::-webkit-scrollbar { display: none; } /* WebKit hide */
  .filter-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* 4) Sections */
section { margin-bottom: var(--space-6); }
section > header { margin-bottom: var(--space-3); }
section > header h3 { font-size: 1.1rem; letter-spacing: 0.06em; }

/* 5) Grid & cards */
.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  align-items: start; /* prevent items from stretching to tallest card */
}

/* Prevent cards from stretching within a row */
.grid > .card { align-self: start; }

/* Multimedia section: keep card width consistent with 3-col layout */
#multimedia .grid {
  grid-template-columns: repeat(3, minmax(var(--card-min), 1fr));
}
@media (max-width: 900px) {
  #multimedia .grid {
    grid-template-columns: repeat(2, minmax(var(--card-min), 1fr));
  }
}
@media (max-width: 600px) {
  #multimedia .grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--panel);
  border: 1px solid var(--card-accent-bd);
  box-shadow: 0 0 0 1px var(--card-glow), 0 8px 24px var(--card-shadow);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.card header h4 { font-size: 1rem; }
.card:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 42%, white 58%), 0 10px 28px rgba(0,0,0,0.15); }
.summary, .outcome { color: var(--muted); font-size: 0.95rem; }
.cta { margin-top: auto; }

/* Web Dev card collapsed/expanded behavior */
#web-dev .card .card__details {
  overflow: clip;
  transition: height 240ms ease, opacity 240ms ease, transform 240ms ease;
  will-change: height, opacity, transform;
}

/* Collapsed by default (JS sets data-expanded="false") */
#web-dev .card[data-expanded="false"] .card__details {
  opacity: 0;
  transform: translateY(-4px);
}

/* Expanded state */
#web-dev .card[data-expanded="true"] .card__details {
  opacity: 1;
  transform: translateY(0);
}

/* Overlay reveal to avoid neighbor reflow on initial expand */
#web-dev .card { position: relative; }
#web-dev .card .card__details.is-revealing {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(0.42rem + 1rem);
  z-index: 2;
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  transform: translateY(-6px);
  transition: clip-path 240ms ease, opacity 240ms ease, transform 240ms ease;
}
#web-dev .card .card__details.is-revealing.show {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
}

/* Button swap */
#web-dev .card[data-expanded="false"] .btn--what { display: block; }
#web-dev .card[data-expanded="false"] .btn--learn-more { display: none; }
#web-dev .card[data-expanded="true"] .btn--what { display: none; }
#web-dev .card[data-expanded="true"] .btn--learn-more { display: block; }

/* Data Science card collapsed/expanded behavior */
#data-science .card .card__details {
  overflow: clip;
  transition: height 240ms ease, opacity 240ms ease, transform 240ms ease;
  will-change: height, opacity, transform;
}

/* Collapsed by default (JS sets data-expanded="false") */
#data-science .card[data-expanded="false"] .card__details {
  opacity: 0;
  transform: translateY(-4px);
}

/* Expanded state */
#data-science .card[data-expanded="true"] .card__details {
  opacity: 1;
  transform: translateY(0);
}

/* Overlay reveal to avoid neighbor reflow on initial expand */
#data-science .card { position: relative; }
#data-science .card .card__details.is-revealing {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(0.42rem + 1rem);
  z-index: 2;
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  transform: translateY(-6px);
  transition: clip-path 240ms ease, opacity 240ms ease, transform 240ms ease;
}
#data-science .card .card__details.is-revealing.show {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
}

/* Button swap - Data Science */
#data-science .card[data-expanded="false"] .btn--tell { display: block; }
#data-science .card[data-expanded="false"] .btn--learn-more { display: none; }
#data-science .card[data-expanded="true"] .btn--tell { display: none; }
#data-science .card[data-expanded="true"] .btn--learn-more { display: block; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  #web-dev .card .card__details,
  #data-science .card .card__details {
    transition: none;
  }
}

/* Tech badges */
.meta.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.15rem; }
.badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--chip-text);
  border-radius: 999px;
  font-size: 0.78rem; /* micro-legibility */
  line-height: 1.2;
  letter-spacing: 0.015em;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.badge:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  filter: brightness(1.04);
} /* subtle hover */
/* Fallback: ensure visible hover for ungrouped badges (those without any badge--* class) */
.badge:not([class*="badge--"]):hover {
  border-color: color-mix(in oklab, var(--border) 80%, #fff 20%);
  background: color-mix(in oklab, var(--chip-bg) 88%, #fff 12%);
  filter: brightness(1.06);
}

/* Filtered views (progressive enhancement: only applies if JS sets data-filter) */
main[data-filter="web"] .card:not([data-category="web"]) { display: none; }
main[data-filter="multimedia"] .card:not([data-category="multimedia"]) { display: none; }
main[data-filter="data"] .card:not([data-category="data"]) { display: none; }

/* 6) Footer space */
footer { height: var(--space-5); }

/* Media block */
/* replaced above by global media surfaces */
/* If no image provided, the gradient background still renders a visual hook */
.card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--media-card-bg); }
.card__media model-viewer { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--media-card-bg); }
/* Hide captions during active playback to prevent text peeking under video */
.card__media.is-playing figcaption { display: none; }

/* Featured emphasis */
.card--featured { border-color: color-mix(in oklab, var(--accent) 55%, var(--border) 45%); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 45%, white 55%), 0 10px 28px rgba(0,0,0,0.18); }

/* CTA stacking and touch targets */


/* Uniform badge groups (override hints above; placed later for precedence) */
/* 1) Cloudflare Platform */
.badge--cf, .badge--workers, .badge--do, .badge--r2, .badge--stream, .badge--vectorize, .badge--d1, .badge--websockets, .badge--wrangler {
  border-color: var(--badge-cf-bd);
  background: var(--badge-cf-bg);
  color: var(--badge-cf-fg);
}
.badge--cf:hover, .badge--workers:hover, .badge--do:hover, .badge--r2:hover, .badge--stream:hover, .badge--vectorize:hover, .badge--d1:hover, .badge--websockets:hover, .badge--wrangler:hover {
  border-color: color-mix(in oklab, var(--badge-cf-bd) 80%, #fff 20%);
  background: color-mix(in oklab, var(--badge-cf-bg) 88%, #fff 12%);
  filter: brightness(1.06);
}

/* 2) Frontend & Frameworks */
.badge--fe, .badge--react, .badge--typescript, .badge--vite, .badge--stripe, .badge--tailwind, .badge--javascript, .badge--three, .badge--modelviewer, .badge--reactthreefiber {
  border-color: var(--badge-fe-bd);
  background: var(--badge-fe-bg);
  color: var(--badge-fe-fg);
}
.badge--fe:hover, .badge--react:hover, .badge--typescript:hover, .badge--vite:hover, .badge--stripe:hover, .badge--tailwind:hover, .badge--javascript:hover, .badge--three:hover, .badge--modelviewer:hover, .badge--reactthreefiber:hover {
  border-color: color-mix(in oklab, var(--badge-fe-bd) 80%, #fff 20%);
  background: color-mix(in oklab, var(--badge-fe-bg) 88%, #fff 12%);
  filter: brightness(1.06);
}

/* 3) AI & LLMs */
.badge--ai, .badge--openai, .badge--llms, .badge--dalle, .badge--convex, .badge--prompteng, .badge--gpt, .badge--huggingface {
  border-color: var(--badge-ai-bd);
  background: var(--badge-ai-bg);
  color: var(--badge-ai-fg);
}
.badge--ai:hover, .badge--openai:hover, .badge--llms:hover, .badge--dalle:hover, .badge--convex:hover, .badge--prompteng:hover, .badge--gpt:hover, .badge--huggingface:hover {
  border-color: color-mix(in oklab, var(--badge-ai-bd) 80%, #fff 20%);
  background: color-mix(in oklab, var(--badge-ai-bg) 88%, #fff 12%);
  filter: brightness(1.06);
}

/* 4) Machine Learning / Deep Learning */
.badge--ml, .badge--machinelearning, .badge--tensorflow, .badge--decisiontrees, .badge--imblearn, .badge--logreg, .badge--logisticregression, .badge--sklearn, .badge--scikitlearn, .badge--bagging, .badge--adaboost, .badge--keras, .badge--json, .badge--resnet, .badge--resnet50, .badge--cnn, .badge--cnns, .badge--deeplearning, .badge--neuralnets, .badge--smote, .badge--regularization, .badge--computervision, .badge--nlp, .badge--sentiment, .badge--dataaugmentation, .badge--opencv, .badge--xgboost, .badge--gradientboosting, .badge--randomforest, .badge--ensemble, .badge--ensemblelearning, .badge--naturalanguageprocessing, .badge--sentimentanalysis, .badge--computerVision, .badge--openCV, .badge--scikit-learn {
  border-color: var(--badge-ml-bd);
  background: var(--badge-ml-bg);
  color: var(--badge-ml-fg);
}
.badge--ml:hover, .badge--machinelearning:hover, .badge--tensorflow:hover, .badge--decisiontrees:hover, .badge--imblearn:hover, .badge--logreg:hover, .badge--logisticregression:hover, .badge--bagging:hover, .badge--adaboost:hover, .badge--sklearn:hover, .badge--scikitlearn:hover, .badge--json:hover, .badge--keras:hover, .badge--resnet:hover, .badge--resnet50:hover, .badge--cnn:hover, .badge--cnns:hover, .badge--deeplearning:hover, .badge--neuralnets:hover, .badge--smote:hover, .badge--regularization:hover, .badge--computervision:hover, .badge--nlp:hover, .badge--sentiment:hover, .badge--dataaugmentation:hover, .badge--opencv:hover, .badge--xgboost:hover, .badge--gradientboosting:hover, .badge--randomforest:hover, .badge--ensemble:hover, .badge--ensemblelearning:hover, .badge--naturalanguageprocessing:hover, .badge--sentimentanalysis:hover, .badge--computerVision:hover, .badge--openCV:hover, .badge--scikit-learn:hover {
  border-color: color-mix(in oklab, var(--badge-ml-bd) 80%, #fff 20%);
  background: color-mix(in oklab, var(--badge-ml-bg) 88%, #fff 12%);
  filter: brightness(1.06);
}

/* 5) Data & Analytics */
.badge--data, .badge--pandas, .badge--numpy, .badge--seaborn, .badge--eda, .badge--dataviz, .badge--python, .badge--matplotlib, .badge--jupyter, .badge--scipy, .badge--exploratorydataanalysis {
  border-color: var(--badge-data-bd);
  background: var(--badge-data-bg);
  color: var(--badge-data-fg);
}
.badge--data:hover, .badge--pandas:hover, .badge--numpy:hover, .badge--seaborn:hover, .badge--eda:hover, .badge--dataviz:hover, .badge--python:hover, .badge--matplotlib:hover, .badge--jupyter:hover, .badge--scipy:hover, .badge--exploratorydataanalysis:hover {
  border-color: color-mix(in oklab, var(--badge-data-bd) 80%, #fff 20%);
  background: color-mix(in oklab, var(--badge-data-bg) 88%, #fff 12%);
  filter: brightness(1.06);
}

/* 6) Concept / Writing */
.badge--meta, .badge--concept, .badge--essays, .badge--fiction, .badge--ideas, .badge--multimedia {
  border-color: var(--badge-meta-bd);
  background: var(--badge-meta-bg);
  color: var(--badge-meta-fg);
}
.badge--meta:hover, .badge--concept:hover, .badge--essays:hover, .badge--fiction:hover, .badge--ideas:hover {
  border-color: color-mix(in oklab, var(--badge-meta-bd) 80%, #fff 20%);
  background: color-mix(in oklab, var(--badge-meta-bg) 88%, #fff 12%);
  filter: brightness(1.06);
}

/* Removed theme-scoped badge overrides; badges are colored globally by group classes */

/* Motion with reduced-motion guard */
@media (prefers-reduced-motion: no-preference) {
  .card { transform: translateY(8px); opacity: 0; transition: transform 420ms ease, opacity 420ms ease, box-shadow 200ms ease; }
  .card.is-visible { transform: translateY(0); opacity: 1; }
}
.card:active { transform: translateY(1px); }

/* Filter pill counts */
.filter-btn .count { opacity: 0.75; margin-left: 0.25rem; }

/* Anchor comfort under sticky headers and safe area */
[id] { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

/* Optional hero accent hairline (disabled) */
.hero h2 { position: relative; }
.hero h2::after { content: none; }

/* Carousel */
.carousel { margin-top: var(--space-3); }
/* replaced above by global carousel viewport with light gradient */
.carousel__slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; /* snap should honor viewport padding */ scroll-padding-inline: var(--flow-gutter, 16px); }
/* Padded variant: slides are full width; gutters applied to inner media */
.carousel.carousel--padded .carousel__slides {
  grid-auto-columns: 100%;
  scroll-padding-inline: 0;
}
.carousel__slides::-webkit-scrollbar { display: none; }

/* Guarded use of both-edges to avoid asymmetric right gutter on engines that don't support it */
@supports (scrollbar-gutter: stable both-edges) {
  .carousel__slides { scrollbar-gutter: stable both-edges; }
}
.carousel__slide { position: relative; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; }
.carousel__slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--media-bg); }
.carousel__slide video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--media-bg); }

/* Center media inside carousels; remove card bleed margins applied to generic .card__media */
.carousel .card__media {
  margin: 0 auto var(--space-2); /* center horizontally and retain bottom spacing */
  width: 100%;
  box-sizing: border-box;        /* include border in width calc */
  box-shadow: 0 0 0 1px var(--card-glow); /* flatten shadow inside carousels to avoid edge clipping bias */
}
/* Extra guard to center any non-100%-width media in slides */
.carousel .carousel__slide {
  display: grid; /* retains existing position/overflow rules above via cascade */
  place-items: center; /* ensure inner media is visually centered */
}
.carousel .carousel__slide > .card__media {
  justify-self: center;
}

/* Add interior gutters so media does not kiss the viewport edges */
.carousel.carousel--padded .carousel__slide {
  /* Use a 3-column grid to guarantee equal gutters regardless of subpixel rounding */
  display: grid;
  grid-template-columns: var(--flow-gutter, 16px) 1fr var(--flow-gutter, 16px);
  justify-items: stretch;
  align-items: center;
  padding-inline: 0;
  box-sizing: border-box;
}
.carousel.carousel--padded .card__media {
  grid-column: 2;
  width: 100%;
  padding-inline: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
}
/* Support direct media children (no .card__media wrapper) */
.carousel.carousel--padded .carousel__slide > video,
.carousel.carousel--padded .carousel__slide > img,
.carousel.carousel--padded .carousel__slide > figure:not(.card__media) {
  grid-column: 2;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
}

.carousel__controls { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: .5rem; margin-top: .5rem; }
.carousel__prev, .carousel__next { appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 10px; padding: .4rem .6rem; cursor: pointer; }
.carousel__prev:disabled, .carousel__next:disabled { opacity: 0.5; cursor: default; }
.carousel__dots { display: flex; justify-content: center; gap: .5rem; }
.carousel__dot { width: .6rem; height: .6rem; border-radius: 50%; background: #b6b6b6; border: 0; cursor: pointer; }
.carousel__dot.is-active { background: #6b7280; }
.carousel__prev:focus-visible, .carousel__next:focus-visible, .carousel__dot:focus-visible { outline: 2px solid #8ec5ff; outline-offset: 2px; }
.carousel__count { font-size: 0.85rem; color: var(--muted-2); user-select: none; }

/* Caption displayed under dots/controls, sourced from active slide's figcaption */
.carousel__caption {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
  min-height: 1.2em; /* avoids layout shift when captions change */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .carousel__slides { scroll-behavior: auto; } }

/* Visually hidden (for live region) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Tabs for UX flows */
.tabs { margin: var(--space-3) 0 var(--space-4); }
.tabs__list { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: var(--space-3); margin-bottom: 0; }
.tabs__tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: .35rem .75rem;
  cursor: pointer;
  font: inherit;
}
.tabs__tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--btn-text-on-primary); }
.tabs__tab:focus-visible { outline: 2px solid #8ec5ff; outline-offset: 2px; }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }
.tabs__title { font-size: 1rem; color: var(--muted); margin-bottom: .25rem; }

/* Spacing for relocated CTAs under media galleries */
.media > .cta-row { margin-top: var(--space-3); }

/* Carousel contain variant: ensure screenshots are fully visible (no crop) */
.carousel--contain .carousel__viewport { background: var(--media-bg); }
.carousel--contain .carousel__slide {
  display: grid;
  place-items: center;
  padding: var(--space-2);
}
.carousel--contain .carousel__slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72svh, 820px);
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--media-bg);
  box-shadow: none;
}

/* Mobile typography and spacing improvements */
@media (max-width: 600px) {
  /* 1) Typographic rhythm (scoped) */
  main.container p {
    line-height: 1.7;
    font-size: 1.02rem;        /* subtle readability bump */
    margin-block: 0.65rem;     /* restore paragraph spacing */
  }
  main.container ul,
  main.container ol {
    margin-block: 0.65rem;
    padding-left: 1.2rem;      /* readable list indent */
    line-height: 1.7;
  }

  /* 2) Card interiors */
  .card {
    padding: var(--space-4);
    gap: var(--space-2);
  }
  .card header h4 {
    margin-bottom: 0.2rem;
  }
  .summary,
  .outcome {
    line-height: 1.65;
    margin-top: 0.25rem;
  }

  /* 3) Badge stack comfort */
  .meta.badges {
    column-gap: 0.45rem; /* horizontal */
    row-gap: 0.55rem;    /* vertical – more than columns */
  }

  /* 4) Section/heading spacing */
  section { margin-bottom: var(--space-5); }
  section > header { margin-bottom: var(--space-2); }
  .hero { margin-bottom: var(--space-3); }
  .hero p.sub {
    line-height: 1.7;
    margin-top: var(--space-2);
  }

  /* 5) CTA spacing */
  .cta-row,
  .cta { margin-top: var(--space-3) !important; }
}


/* Mobile width widening v2: reduce gutters further and recenter media */

/* Mobile width widening v3: tighter container, slimmer cards, reduced grid gap */

/* Mobile width widening v4: edge-to-edge container, slimmer cards, smaller gaps */
:root {
  /* Light mobile side padding so card outlines remain visible */
  --pad-mob-max: clamp(0.6rem, 3vw, 0.85rem); /* safe-area-aware below */
}
@media (max-width: 600px) {
  /* 1) Container edge-to-edge with safe-area symmetry */
  .container {
    padding-left: var(--pad-mob-max);
    padding-right: var(--pad-mob-max);
  }
  @supports (padding: max(0px)) {
    .container {
      padding-left: max(var(--pad-mob-max), env(safe-area-inset-left));
      padding-right: max(var(--pad-mob-max), env(safe-area-inset-right));
    }
  }

  /* 2) Slimmer card gutters */
  .card {
    padding: clamp(0.6rem, 1.6vw + 0.2rem, 0.85rem);
  }

  /* neutralize side negative margins to avoid visual left bias */
  .card__media {
    margin-left: 0;
    margin-right: 0;
  }

  /* 3) Tighter grid gap for a wider feel */
  .grid {
    gap: var(--space-1); /* 0.5rem */
  }
}

/* Case‑study typography and hierarchy */
:root{
  --prose-max: 72ch;
}

/* 1) H2 section anchors */
main.container section > header h2{
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
  color: var(--heading);
  position: relative;
}
main.container section > header h2::before{
  content: none;
}

/* 2) H3 sub‑section labels (Goal, Approach, Outcome) */
main.container h3{
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.35;
  font-weight: 650;            /* semi‑bold to contrast H2 */
  letter-spacing: 0.02em;
  color: var(--prose-muted);
  text-transform: none;        /* keep sentence case */
  margin-top: 1.25rem;
  margin-bottom: 0.35rem;      /* tight to next paragraph */
}

/* 3) Lead paragraph under H2 */
main.container h2 + p{
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.75;
  color: var(--prose-muted);
  max-width: var(--prose-max);
}

/* 4) General body paragraphs (desktop rhythm) */
@media (min-width: 901px){
  main.container p{
    max-width: var(--prose-max);
  }
}

/* 5) Lists: legible spacing, accent markers */
main.container ul{
  margin: 0.6rem 0 1rem 1.2rem;
  padding: 0;
}
main.container li{
  margin: 0.35rem 0;
  line-height: 1.65;
}
main.container ul{ list-style: disc outside; }
main.container li::marker{ color: color-mix(in oklab, var(--accent) 70%, #fff 30%); }
/* Soften strong within lists */
main.container li b,
main.container li strong{ font-weight: 650; }

/* 6) Section grouping (subtle) */
main.container section{
  padding-block: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
}
main.container section:first-of-type{ border-top: 0; }

/* 7) KPI callout */
.callout{
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border) 70%);
  background: #fffaf0;
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  max-width: var(--prose-max);
  margin: 0.75rem 0 1.1rem;
}
.callout b, .callout strong{ color: var(--text); }

/* Mobile adjustments keep earlier rhythm */
@media (max-width: 600px){
  main.container section{ border-top-width: 0; padding-block: 0.25rem 0.75rem; }
  main.container h3{ margin-top: 1rem; }
}

/* Case study two-column layout (desktop) */
.case-grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .case-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr); align-items: start; }
  .case-aside { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
}

/* Case study mobile: show Quick facts at top and keep visible while scrolling */
@media (max-width: 899px) {
  .case-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "aside"
      "prose";
    align-items: start;
  }
  .case-prose { grid-area: prose; }
  .case-aside {
    grid-area: aside;
    position: static;          /* scrolls normally by default */
    top: auto;
    z-index: auto;
    margin-bottom: var(--space-3);
  }
  .case-aside.is-sticky {
    position: sticky;          /* becomes sticky only when compact mode enables it */
    top: calc(var(--header-h) + var(--space-2));
    z-index: 3;
  }
  @supports (top: max(0px)) {
    .case-aside.is-sticky {
      top: calc(var(--header-h) + max(env(safe-area-inset-top), 0px));
    }
  }
  .case-aside .quick-facts {
    /* quick-facts already has background/border; add subtle separation while stuck */
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  }
}

/* Mobile: minimize Quick facts to just the site link + badges */
@media (max-width: 899px) {
  /* Tighten the panel a bit */
  .case-aside .quick-facts {
    padding: clamp(0.5rem, 2.5vw + 0.2rem, 0.9rem);
  }

  /* Hide "Quick facts" heading to save space */
  .case-aside .quick-facts > h3:first-of-type { display: none; }

  /* Show only the link item in the list */
  .case-aside .quick-facts ul {
    margin: 0 0 .5rem 0;
    padding-left: 0;
    list-style: none;
  }
  .case-aside .quick-facts ul li { display: none; }

  /* Prefer robust selector: any list item that contains an anchor */
  @supports selector(:has(a)) {
    .case-aside .quick-facts ul li:has(a[href]) { display: block; }
  }
  /* Fallback: current markup places Link as the 4th li */
  @supports not selector(:has(a)) {
    .case-aside .quick-facts ul li:nth-child(4) { display: block; }
  }

  /* Remove the "Link:" label text for compactness */
  .case-aside .quick-facts ul li b { display: none; }

  /* Hide the "Tech badges" heading label; keep badges row */
  .case-aside .quick-facts .tabs__title { display: none; }

  /* Compact badges slightly */
  .case-aside .quick-facts .meta.badges {
    margin: 0;
    gap: 0.35rem;
  }
  .case-aside .quick-facts .badge {
    font-size: 0.72rem;
    padding: 0.14rem 0.5rem;
  }

  /* Hide Contact CTA on mobile to reduce intrusiveness */
  .case-aside .quick-facts .cta { display: none; }

  /* Make the link visually strong but single-line with ellipsis */
  .case-aside .quick-facts ul li a::before {
    content: "Link: ";
    font-weight: 700;
    color: var(--muted);
    margin-right: 0.25rem;
  }
  .case-aside .quick-facts ul li a {
    display: inline-block;
    max-width: 100%;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.quick-facts {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: var(--space-4);
  padding-inline-end: clamp(0.9rem, 1.2vw + 0.6rem, 1.2rem);
}
.quick-facts h3 { color: var(--muted); font-size: 1rem; margin-bottom: .35rem; }
.quick-facts ul { margin: .25rem 0 1rem 1.2rem; }
.quick-facts li { margin: .25rem 0; line-height: 1.6; }

/* Hide figcaptions in carousels (UX flow titles) */
.carousel .card__media figcaption { display: none !important; }


/* Bottom pager for project-to-project navigation */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.pager a {
  display: grid;
  gap: 2px;
  text-decoration: none;
  color: var(--accent);
}
.pager a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pager__prev { justify-self: start; grid-column: 1; }
.pager__next { justify-self: end; text-align: right; grid-column: 3; }
.pager__home { justify-self: center; color: var(--muted); grid-column: 2; }
.pager__kicker {
  font-size: 0.8rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pager__title {
  font-weight: 600;
  color: var(--text);
}

/* Mobile: stack pager items */
@media (max-width: 600px) {
  .pager {
    grid-template-columns: 1fr;
    text-align: center;
    row-gap: var(--space-2);
  }
  .pager__prev,
  .pager__next,
  .pager__home {
    justify-self: center;
    text-align: center;
    grid-column: auto; /* reset fixed columns on mobile stack */
  }
}

/* MOBILE QUICK FACTS: show full desktop content in mobile */
@media (max-width: 899px) {
  /* Restore heading */
  .case-aside .quick-facts > h3:first-of-type { display: block; }

  /* Restore full list */
  .case-aside .quick-facts ul {
    margin: .25rem 0 1rem 1.2rem;
    padding-left: 0;
    list-style: disc outside;
  }
  .case-aside .quick-facts ul li { display: list-item; }
  .case-aside .quick-facts ul li b { display: inline; }

  /* Ensure the link item also uses list-item even if earlier :has rule applied */
  @supports selector(:has(a)) {
    .case-aside .quick-facts ul li:has(a[href]) { display: list-item; }
  }
  @supports not selector(:has(a)) {
    .case-aside .quick-facts ul li:nth-child(4) { display: list-item; }
  }

  /* Restore "Tech Stack" subheading and badges sizing */
  .case-aside .quick-facts .tabs__title { display: block; }
  .case-aside .quick-facts .meta.badges {
    margin: 0.15rem 0 0 0;
    gap: 0.4rem;
  }
  .case-aside .quick-facts .badge {
    font-size: 0.78rem;
    padding: 0.18rem 0.6rem;
  }

  /* Restore Contact CTA */
  .case-aside .quick-facts .cta { display: block; }

  /* Remove mobile-only link compaction */
  .case-aside .quick-facts ul li a::before { content: none; }
  .case-aside .quick-facts ul li a {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Use desktop panel padding for consistency */
  .case-aside .quick-facts {
    padding: var(--space-4);
    padding-inline-end: clamp(0.6rem, 2.5vw + 0.2rem, 1rem);
  }
}

/* MOBILE QUICK FACTS: hide 'Tech Stack' label and Contact button */
@media (max-width: 899px) {
  .case-aside .quick-facts .tabs__title { display: none; }
  .case-aside .quick-facts .cta { display: none; }
}

/* MOBILE QUICK FACTS: compact variant after threshold (only Link + badges) */
@media (max-width: 899px) {
  /* Panel padding tightened */
  .case-aside .quick-facts.is-compact {
    padding: clamp(0.5rem, 2.5vw + 0.2rem, 0.9rem);
    padding-inline-end: clamp(0.35rem, 2vw + 0.1rem, 0.6rem);
  }

  /* Hide "Quick facts" heading */
  .case-aside .quick-facts.is-compact > h2:first-of-type,
  .case-aside .quick-facts.is-compact > h3:first-of-type { display: none; }

  /* Show only the Link item in the list */
  .case-aside .quick-facts.is-compact ul {
    margin: .25rem 0 .5rem 1.2rem;
    padding-left: 1.2rem;
    list-style: disc outside;
  }
  .case-aside .quick-facts.is-compact ul li { display: none; }

  /* Prefer robust selector: any list item that contains an anchor */
  @supports selector(:has(a)) {
    .case-aside .quick-facts.is-compact ul li:has(a[href]) { display: list-item; }
  }
  /* Fallback: current markup places Link as the 4th li */
  @supports not selector(:has(a)) {
    .case-aside .quick-facts.is-compact ul li:nth-child(4) { display: list-item; }
  }

  /* Remove the "Link:" label bold element and restore compact prefix */
  .case-aside .quick-facts.is-compact ul li b { display: inline; }
  .case-aside .quick-facts.is-compact ul li a::before {
    content: none;
  }
  .case-aside .quick-facts.is-compact ul li a {
    display: inline-block;
    max-width: 100%;
    font-weight: 650;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Keep badges visible; hide label; compact badge sizing */
  .case-aside .quick-facts.is-compact .tabs__title { display: none; }
  .case-aside .quick-facts.is-compact .meta.badges {
    margin: 0.15rem 0 0 0;
    gap: 0.4rem;
  }
  .case-aside .quick-facts.is-compact .badge {
    font-size: 0.78rem;
    padding: 0.18rem 0.6rem;
  }

  /* Hide CTA in compact mode (already hidden globally, but explicit here) */
  .case-aside .quick-facts.is-compact .cta { display: none; }
}

/* Spacer to prevent content jump when compact sticky activates */
@media (max-width: 899px) {
  .quick-facts-spacer {
    height: 0;
    transition: height 140ms ease;
  }
}

/* Portfolio header: keep title + nav on one line on mobile */
@media (max-width: 600px) {
  /* Single-line header */
  body > header.site {
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
  }
  body > header.site h1 {
    flex: 0 0 auto;
    margin-bottom: 0; /* cancel mobile margin from nav.css */
  }

  /* Put nav back inline on the right */
  body > header.site .fd-nav--inline {
    width: auto;
    padding-top: 0;
  }
  body > header.site .fd-nav--inline .fd-nav__list {
    display: flex !important;
    gap: var(--fd-nav-gap, 8px);
    background: transparent;
    border: 0;
    padding: 0;
    grid-template-columns: none; /* cancel mobile grid */
    flex-wrap: nowrap;
  }
  body > header.site .fd-nav--inline .fd-nav__link {
    display: inline-flex; /* revert from block/grid item */
    padding: var(--fd-nav-pill-pad-y, 6px) var(--fd-nav-pill-pad-x, 12px);
    font-size: 14px;
    background: transparent;
    border: 1px solid transparent;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  }
  body > header.site .fd-nav--inline .fd-nav__link.is-active,
  body > header.site .fd-nav--inline .fd-nav__link[aria-current="page"] {
    background: var(--fd-nav-bg-hover);
    box-shadow: inset 0 -2px 0 0 var(--fd-nav-active-underline, #fff);
  }

  /* Optional: closer initial offset until JS syncs --header-h */
  :root { --header-h: 56px; }
}

/* Ultra‑narrow tweak to reduce chance of wrapping */
@media (max-width: 360px) {
  body > header.site .fd-nav--inline .fd-nav__link {
    font-size: 12px;
    padding: 6px 10px;
  }
  body > header.site .fd-nav--inline .fd-nav__list {
    gap: 6px;
  }
}