/* =========================================================
   Alex Maddox portfolio — Direction A (clean editorial)
   Accent: cyan #0E7490
   ========================================================= */

:root {
  --accent: #0E7490;
  --accent-dark: #155E75;
  --accent-light: #ECFEFF;
  --accent-border: #67E8F9;
  --text: #111827;
  --text-secondary: #4B5563;
  --text-tertiary: #9CA3AF;
  --border: rgba(17, 24, 39, 0.08);
  --border-stronger: rgba(17, 24, 39, 0.16);
  --bg: #FFFFFF;
  --bg-subtle: #F9FAFB;
  --radius: 8px;
  --radius-lg: 12px;
  --max-width: 1080px;
  --gutter: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* ========== Motion ========== */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}

/* Hero entrance on page load */
.hero .status-badge,
.hero .hero-headline,
.hero .hero-sub,
.case-back,
.case-title,
.case-meta,
.case-intro {
  animation: fade-up 0.6s ease-out both;
}
.hero .hero-headline,
.case-title { animation-delay: 0.08s; }
.hero .hero-sub,
.case-meta  { animation-delay: 0.16s; }
.case-intro { animation-delay: 0.24s; }

/* Scroll-reveal: sections below the fold start hidden, JS adds .visible */
section.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  will-change: opacity, transform;
}
section.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pulse the cyan dot in the status badge */
.status-badge::before {
  animation: pulse-dot 2.4s ease-in-out infinite;
}

/* Project row hover: subtle slide + thumbnail zoom + bg tint */
.project-row {
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.project-row:hover {
  background-color: var(--bg-subtle);
  transform: translateX(2px);
}
.project-thumb {
  overflow: hidden;
}
.project-thumb img {
  transition: transform 0.5s ease;
}
.project-row:hover .project-thumb img {
  transform: scale(1.05);
}

/* Gallery / artifact / interest image hover zoom */
.gallery img,
.interest-img img,
.about-portrait img,
.case-keyart img {
  transition: transform 0.5s ease;
}
.gallery img:hover,
.interest-img:hover img {
  transform: scale(1.025);
}

/* Tool pill hover: subtle lift */
.tool-pill {
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.tool-pill:hover {
  transform: translateY(-1px);
}
.tool-pill.accent:hover {
  background: #CFFAFE;
}

/* Nav underline grow on hover (links without .active) */
.nav-links a {
  position: relative;
  padding-bottom: 4px;
}
.nav-links a:not(.active)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.2s ease, left 0.2s ease;
}
.nav-links a:not(.active):hover {
  text-decoration: none;
  color: var(--text);
}
.nav-links a:not(.active):hover::after {
  width: 100%;
  left: 0;
}

/* Buttons: gentle scale on press */
.btn {
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:active {
  transform: scale(0.97);
}

/* ========== Trailer + Steam widget ========== */

.watch-play {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-subtle);
  border: 0.5px solid var(--border);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.steam-widget {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-subtle);
}

.steam-widget iframe {
  width: 100%;
  height: 190px;
  border: 0;
  display: block;
}

.steam-widget-label {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

@media (max-width: 768px) {
  .watch-play {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ========== Contact form ========== */

.contact-form {
  display: grid;
  gap: 16px;
  max-width: 560px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.form-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}

.form-field input,
.form-field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 0.5px solid var(--border-stronger);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  line-height: 1.5;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.form-note {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ========== 404 ========== */

.not-found {
  text-align: center;
  padding: 80px 0;
}

.not-found-code {
  font-size: 96px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 16px;
}

.not-found-message {
  font-size: 20px;
  margin-bottom: 8px;
}

.not-found-sub {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 28px;
}

/* ========== Lightbox ========== */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, 0.92);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.open {
  display: flex;
  opacity: 1;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  user-select: none;
}

.lightbox-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.05); }

.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  letter-spacing: 0.5px;
}

body.lightbox-open { overflow: hidden; }

/* Make gallery + key art images visibly clickable */
.gallery img,
.case-keyart img,
.about-portrait img {
  cursor: zoom-in;
}

/* Respect prefers-reduced-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;
  }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.2; color: var(--text); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ========== Layout containers ========== */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ========== Navigation ========== */

.nav {
  border-bottom: 0.5px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text);
}

.nav-brand:hover { text-decoration: none; }

.nav-mark {
  width: 6px;
  height: 22px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-links {
  display: flex;
  gap: 26px;
  font-size: 13px;
}

.nav-links a {
  color: var(--text-secondary);
  padding-bottom: 4px;
}

.nav-links a:hover {
  color: var(--text);
  text-decoration: none;
}

.nav-links a.active {
  color: var(--text);
  border-bottom: 2px solid var(--accent);
}

/* ========== Hero ========== */

.hero {
  padding: 56px 0 32px;
}

.eyebrow {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 500;
  margin-bottom: 20px;
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.hero-headline {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 16px;
  max-width: 720px;
  letter-spacing: -0.01em;
}

.hero-sub {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 640px;
  margin: 0;
}

/* ========== Section ========== */

section {
  padding: 32px 0;
  border-top: 0.5px solid var(--border);
}

.section-label {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.section-title {
  font-size: 22px;
  margin: 0 0 6px;
}

/* ========== Featured project rows (home) ========== */

.project-row {
  display: grid;
  grid-template-columns: 168px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 18px 0 18px 18px;
  border-bottom: 0.5px solid var(--border);
  color: inherit;
}

.project-row:last-of-type { border-bottom: none; }

.project-row.featured {
  border-left: 2px solid var(--accent);
}

.project-row:hover { text-decoration: none; }
.project-row:hover .project-cta { text-decoration: underline; text-underline-offset: 4px; }

.project-thumb {
  background: var(--bg-subtle);
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--text);
}

.project-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 4px;
}

.project-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.55;
}

.project-cta {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}

/* ========== Project case study page ========== */

.case-back {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  display: inline-block;
}

.case-back:hover { color: var(--accent); text-decoration: none; }

.case-title {
  font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.case-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.case-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 0;
}

.case-intro-text { font-size: 15px; color: var(--text-secondary); line-height: 1.65; }
.case-intro-sub { margin-top: 10px; font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.2px; }
.case-intro-links { margin-top: 14px; display: flex; gap: 20px; font-size: 13px; }

.case-keyart {
  background: var(--bg-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.case-keyart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* What I did grid */
.responsibilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
}

.responsibility h3 {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px;
}

.responsibility p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Process artifacts */
.artifacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.artifact {
  aspect-ratio: 1;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  align-items: flex-end;
  padding: 8px;
  position: relative;
  text-decoration: none;
  transition: transform 0.15s ease;
}

a.artifact:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

a.artifact:hover span {
  color: var(--accent);
}

.artifact img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artifact span {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.95);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  color: var(--text);
}

.tools-line {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 14px;
}

/* Tool pills */
.tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--bg-subtle);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.1px;
  border: 0.5px solid var(--border);
}

.tool-pill.accent {
  background: var(--accent-light);
  color: var(--accent-dark);
  border-color: transparent;
}

/* Games-studied dual group */
.games-studied {
  display: grid;
  gap: 24px;
}

.games-group h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 10px;
}

.games-group h3 span {
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: 12px;
  margin-left: 4px;
}

/* Lessons learned */
.lessons {
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.lessons li { margin-bottom: 10px; }
.lessons li:last-child { margin-bottom: 0; }
.lessons li strong { color: var(--text); font-weight: 500; }

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Case nav (prev / next) */
.case-nav {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  font-size: 13px;
  border-top: 0.5px solid var(--border);
}

.case-nav a { color: var(--text-secondary); }
.case-nav a:hover { color: var(--accent); text-decoration: none; }

/* ========== About page ========== */

.about-hero {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px 0 32px;
}

.about-portrait {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-subtle);
}

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  image-rendering: -webkit-optimize-contrast;
}

.about-headline {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.about-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.prose p { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 14px; }
.prose p:last-child { margin-bottom: 0; }

/* Outside of work grid */
.interests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}

.interest {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: center;
}

.interest-img {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-subtle);
}

.interest-img img { width: 100%; height: 100%; object-fit: cover; }

.interest h3 { font-size: 16px; font-weight: 500; margin: 0 0 5px; }
.interest p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* ========== Contact / resume ========== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 24px 0;
}

.contact-block h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 10px;
}

.contact-block p { font-size: 15px; margin: 0; }
.contact-block a { color: var(--accent); font-weight: 500; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn:hover { background: var(--accent-dark); text-decoration: none; color: white; }

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn-secondary:hover { background: var(--accent-light); color: var(--accent-dark); }

/* ========== Footer ========== */

footer {
  border-top: 0.5px solid var(--border);
  padding: 18px 0 36px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.footer-inner a { color: var(--accent); font-weight: 500; }

/* ========== Responsive ========== */

@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .nav-inner { padding: 14px var(--gutter); }
  .nav-links { gap: 14px; font-size: 12px; }
  .nav-brand { font-size: 13px; }
  .hero { padding: 32px 0 24px; }
  .hero-headline { font-size: clamp(22px, 5.5vw, 28px); }
  .hero-sub { font-size: 14px; }
  .project-row {
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding-left: 10px;
  }
  .project-row .project-cta { grid-column: 2; margin-top: 4px; }
  .project-title { font-size: 15px; }
  .case-title { font-size: clamp(24px, 6vw, 30px); }
  .case-intro { grid-template-columns: 1fr; gap: 18px; }
  .case-intro-links { flex-wrap: wrap; gap: 14px; }
  .responsibilities { grid-template-columns: 1fr; }
  .artifacts { grid-template-columns: 1fr 1fr; }
  .about-hero { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .about-headline { font-size: clamp(20px, 5vw, 24px); }
  .about-portrait { margin: 0 auto; width: 140px; height: 140px; }
  .interests { grid-template-columns: 1fr; gap: 18px; }
  .interest { grid-template-columns: 100px 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-inner { flex-direction: column; gap: 8px; text-align: center; }
  .games-studied { gap: 20px; }
  .lessons { padding-left: 18px; font-size: 13px; }
  .lightbox { padding: 16px; }
  .lightbox-btn { width: 40px; height: 40px; font-size: 18px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

@media (max-width: 480px) {
  .nav-inner { padding: 12px var(--gutter); }
  .nav-links { gap: 10px; font-size: 11px; }
  .nav-brand span:last-child { display: none; }
  .nav-links a { padding-bottom: 3px; }
  .gallery { grid-template-columns: 1fr; }
  .case-meta { font-size: 12px; line-height: 1.5; }
  .artifacts { grid-template-columns: 1fr; }
}

/* ============================================================
   Polish pass v3
   ============================================================ */

/* Skip-to-content link (visually hidden, focusable) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  z-index: 1000;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
  transition: top 180ms ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}

/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  z-index: 999;
  transition: width 60ms linear;
  pointer-events: none;
}

/* Back-to-top button */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(14, 116, 144, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease, background 180ms ease, visibility 240ms;
  z-index: 998;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
}

/* Parallax on case-keyart (subtle) */
.case-keyart {
  overflow: hidden;
}
.case-keyart img {
  will-change: transform;
  transition: transform 80ms linear;
}

/* Cursor follower (scoped to .case-keyart) */
.cursor-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(14, 116, 144, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 200ms ease, transform 80ms ease-out;
  z-index: 5;
  mix-blend-mode: screen;
}
.case-keyart {
  position: relative;
}
.case-keyart.cursor-active .cursor-dot {
  opacity: 1;
}

/* Subtle noise/grain texture on background — pseudo-element on body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
/* Ensure regular content sits above the grain overlay. We DON'T set position
   on fixed-position elements (lightbox, back-to-top, reading-progress, skip-link)
   since their own z-index already exceeds the noise overlay's z-index: 1. */
.nav, main, footer { position: relative; z-index: 2; }

/* Resume preview hover state — scale + shadow lift */
.artifact {
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.artifact:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Reduced-motion: disable parallax/cursor/progress effects */
@media (prefers-reduced-motion: reduce) {
  .case-keyart img { transform: none !important; }
  .cursor-dot { display: none; }
  .back-to-top { transition: opacity 0ms, visibility 0ms; }
  .reading-progress { transition: none; }
  .artifact:hover { transform: none; }
}

/* Print stylesheet — hide nav/footer/back-to-top, neutralize color */
@media print {
  .nav,
  footer,
  .back-to-top,
  .reading-progress,
  .skip-link,
  .lightbox,
  .video-embed,
  .steam-widget,
  .contact-form,
  .case-nav {
    display: none !important;
  }
  body::before { display: none !important; }
  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
    line-height: 1.45;
  }
  main.container, .container { max-width: 100%; padding: 0; }
  a { color: #000; text-decoration: underline; }
  .hero-headline, .case-title, .section-label { color: #000; }
  section { page-break-inside: avoid; border-top: 1px solid #ccc; }
  img { max-width: 100%; page-break-inside: avoid; }
  .gallery img, .case-keyart img { filter: grayscale(40%); }
}

/* ============================================================
   Section design v2 — bigger text, prominent section titles,
   alternating cyan tints, more whitespace.
   Appended AFTER earlier rules so this wins the cascade.
   ============================================================ */

/* ---- Typography bump ---- */

body {
  font-size: 16px;
  line-height: 1.6;
}

.prose p {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.hero-sub,
.case-intro-text,
.about-sub {
  font-size: 17px;
  line-height: 1.6;
}

.project-desc { font-size: 15px; }
.responsibility p { font-size: 15px; line-height: 1.6; }
.lessons li { font-size: 15px; line-height: 1.7; margin-bottom: 10px; }
.interest p { font-size: 14px; line-height: 1.6; }
.contact-block p { font-size: 16px; }

/* ---- Section labels: tiny eyebrow, cyan, with a leading bar ---- */

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.section-label::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* ---- New: section headlines (H2 below eyebrow) ---- */

.section-headline {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 28px;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ---- More breathing room between sections ---- */

main > section {
  padding: 64px 0;
  border-top: none;
}
main > section:first-of-type {
  padding-top: 36px;
}

/* ---- Alternating cyan tint on sections ---- */

main > section:nth-of-type(even) {
  position: relative;
  background: linear-gradient(180deg, rgba(236, 254, 255, 0.55), rgba(236, 254, 255, 0.35));
  /* full-bleed background using negative margin + padding so the band reaches page edges */
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* Round the inner edges of tinted bands slightly so they feel like soft panels */
main > section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14, 116, 144, 0.18), transparent);
}
main > section:nth-of-type(even)::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14, 116, 144, 0.18), transparent);
}

/* ---- Lift the eyebrow into the colored band header ---- */

main > section > .section-label {
  margin-top: 0;
}

/* ---- Responsibilities cards: lift them and brighten with cyan top accent ---- */

.responsibility {
  position: relative;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.responsibility::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
  opacity: 0.85;
}
.responsibility:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(14, 116, 144, 0.08);
  border-color: rgba(14, 116, 144, 0.25);
}
.responsibility h3 { font-size: 16px; margin: 6px 0 6px; color: var(--text); }

/* ---- Lessons list: cyan numbers + softer card panels ---- */

.lessons {
  counter-reset: lesson;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lessons li {
  counter-increment: lesson;
  position: relative;
  padding: 16px 18px 16px 56px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lessons li::before {
  content: counter(lesson);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-feature-settings: "tnum";
}
.lessons li:hover {
  border-color: rgba(14, 116, 144, 0.3);
  background: linear-gradient(180deg, var(--bg), rgba(236, 254, 255, 0.35));
}

/* ---- Tool pills: a touch more presence ---- */

.tool-pill { font-size: 13px; padding: 7px 13px; }

/* ---- Mobile: dial back padding and headline size ---- */

@media (max-width: 768px) {
  main > section { padding: 44px 0; }
  main > section:nth-of-type(even) {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    border-radius: 0;
  }
  .section-headline { margin-bottom: 22px; }
  .lessons li { padding-left: 50px; }
  .lessons li::before { left: 14px; }
}

/* ============================================================
   Section design v3 — eyebrow becomes the real heading.
   Drops the tiny uppercase treatment; goes title-case + larger.
   Bumps body text another notch.
   ============================================================ */

/* Body bump */
body { font-size: 17px; line-height: 1.65; }
.prose p { font-size: 17px; line-height: 1.8; }
.hero-sub, .case-intro-text, .about-sub { font-size: 18px; line-height: 1.6; }
.project-desc { font-size: 16px; line-height: 1.55; }
.project-meta { font-size: 14px; }
.responsibility p { font-size: 16px; line-height: 1.6; }
.responsibility h3 { font-size: 17px; }
.lessons li { font-size: 16px; line-height: 1.75; padding-top: 18px; padding-bottom: 18px; }
.interest p { font-size: 15px; line-height: 1.6; }
.interest h3 { font-size: 18px; }
.contact-block p { font-size: 17px; }
.contact-block h3 { font-size: 14px; }
.case-meta { font-size: 14px; }
.tool-pill { font-size: 14px; padding: 8px 14px; }

/* Section labels: now a real H2-style heading */
.section-label {
  display: block;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  padding-bottom: 14px;
  position: relative;
}
/* Cyan accent bar UNDER the heading, replacing the tiny dash before */
.section-label::before {
  content: none;
}
.section-label::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* Hero / about headlines a touch larger */
.hero-headline { font-size: clamp(30px, 4.6vw, 42px); }
.about-headline { font-size: clamp(28px, 4vw, 38px); }
.case-title { font-size: clamp(30px, 4.6vw, 42px); }

/* Mobile dial-back for the new heading size */
@media (max-width: 768px) {
  .section-label { margin-bottom: 18px; padding-bottom: 10px; }
  .section-label::after { width: 40px; height: 2px; }
  body { font-size: 16px; }
  .prose p { font-size: 16px; }
  .hero-sub, .case-intro-text, .about-sub { font-size: 17px; }
}

/* ============================================================
   About page — side-by-side rows, currently-into, quick-hits
   ============================================================ */

/* Side-by-side prose + photo rows */
.about-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.about-row.reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.about-row.reverse .about-row-text { order: 2; }
.about-row.reverse .about-row-image { order: 1; }

.about-row-text { min-width: 0; }
.about-row-text p:last-child { margin-bottom: 0; }

.about-row-image {
  margin: 0;
  position: relative;
}
.about-row-image picture,
.about-row-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(14, 116, 144, 0.10);
  transition: transform 0.4s ease;
}
.about-row-image:hover img { transform: translateY(-3px); }
.about-row-image figcaption {
  margin-top: 12px;
  font-size: 13px;
  font-style: italic;
  color: var(--text-tertiary);
  text-align: center;
}

/* Currently into — three-card grid */
.currently-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.currently-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.currently-card::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}
.currently-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(14, 116, 144, 0.08);
  border-color: rgba(14, 116, 144, 0.25);
}
.currently-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.currently-card h3 {
  font-size: 18px;
  margin: 0 0 8px;
  line-height: 1.3;
  color: var(--text);
}
.currently-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* Quick hits — small fun-fact grid */
.quick-hits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.quick-hit {
  background: linear-gradient(180deg, rgba(236, 254, 255, 0.45), rgba(236, 254, 255, 0.15));
  border: 0.5px solid rgba(14, 116, 144, 0.15);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.quick-hit:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 116, 144, 0.35);
}
.quick-hit-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.quick-hit-value {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}

/* Mobile collapse */
@media (max-width: 768px) {
  .about-row,
  .about-row.reverse {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .about-row.reverse .about-row-text { order: 2; }
  .about-row.reverse .about-row-image { order: 1; }
  .currently-grid { grid-template-columns: 1fr; }
  .quick-hits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .quick-hits { grid-template-columns: 1fr; }
}

/* ============================================================
   Color pass — bigger cyan presence
   ============================================================ */

/* Stronger tinted alternating section bands */
main > section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(207, 250, 254, 0.65), rgba(207, 250, 254, 0.35)) !important;
}

/* Cyan-tinted hero band on first section of every page */
main > section:first-of-type {
  background: linear-gradient(180deg, rgba(207, 250, 254, 0.85), rgba(207, 250, 254, 0.65)) !important;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  border-top: none;
  position: relative;
}
main > section:first-of-type::after {
  content: none;
}

/* Nav: cyan accent line + active link pill */
.nav {
  border-bottom: 2px solid var(--accent);
  background: var(--bg);
}
.nav-links a.active {
  background: var(--accent-light);
  color: var(--accent-dark);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
}
.nav-links a.active::after { display: none; }

/* Stat strip: big cyan numbers, small label */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid rgba(14, 116, 144, 0.15);
  border-bottom: 1px solid rgba(14, 116, 144, 0.15);
  margin-top: 16px;
}
.stat-strip__item {
  text-align: center;
}
.stat-strip__number {
  display: block;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  font-feature-settings: "tnum";
}
.stat-strip__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .stat-strip { gap: 18px; padding: 22px 0; }
  .stat-strip__number { font-size: clamp(28px, 7vw, 40px); }
}

/* Fix: case-title clipping at the right edge */
.case-title {
  letter-spacing: 0 !important;
  padding-right: 6px;
}

/* Fix: case-keyart was cropping the image. Source is 16:9, container was 16:10. */
.case-keyart {
  aspect-ratio: 16 / 9 !important;
}
/* Disable the +5% parallax scale that added extra cropping */
.case-keyart img {
  transform: none !important;
}

/* Fix: accent tool-pills were invisible on cyan-tinted section bands.
   Switch to solid cyan background + white text for high contrast. */
.tool-pill.accent {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent-dark) !important;
}
.tool-pill.accent:hover {
  background: var(--accent-dark) !important;
  color: #ffffff !important;
}

/* Bump the non-accent (Roguelike) pills' contrast too: stronger border on cyan bg */
.tool-pill {
  background: #ffffff;
  border: 1px solid rgba(14, 116, 144, 0.2);
}

/* ============================================================
   Projects nav dropdown
   ============================================================ */

.nav-item-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* The trigger anchor inherits .nav-links a styles. We just add room for the caret. */
.nav-item-dropdown > a .dropdown-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  transition: transform 0.18s ease;
  vertical-align: middle;
}
.nav-item-dropdown:hover > a .dropdown-caret,
.nav-item-dropdown.open > a .dropdown-caret {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  background: var(--bg);
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(14, 116, 144, 0.14);
  padding: 8px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
  z-index: 50;
}
.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 8px);
}

/* Invisible hover bridge so the menu does not vanish between trigger and panel */
.nav-item-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.dropdown-menu a {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.dropdown-menu a:hover {
  background: var(--accent-light);
  color: var(--accent-dark);
}

/* Override: dropdown anchors should NOT inherit the underline-grow effect */
.dropdown-menu a:not(.active)::after,
.dropdown-menu a::after { content: none !important; }
.dropdown-menu a { padding-bottom: 8px; }

@media (max-width: 768px) {
  .dropdown-menu {
    left: 0;
    right: 0;
    transform: none;
    min-width: auto;
  }
  .nav-item-dropdown:hover .dropdown-menu,
  .nav-item-dropdown.open .dropdown-menu {
    transform: none;
  }
}

/* Fix: dropdown links inherited the secondary-grey color from .nav-links a.
   Force dark text + make sure hover routes to accent-dark + ensure clickable. */
.dropdown-menu a {
  color: var(--text) !important;
  pointer-events: auto;
}
.dropdown-menu a:hover {
  color: var(--accent-dark) !important;
  background: var(--accent-light);
}

/* Fix: align dropdown wrapper vertically with sibling nav links (was sitting lower). */
.nav-links {
  align-items: center;
}
.nav-item-dropdown {
  align-self: center;
}
.nav-item-dropdown > a {
  padding-bottom: 4px;
  line-height: 1.4;
}

/* ============================================================
   Dropdown: defensive override (final)
   ============================================================ */

/* Ensure the wrapper is treated as a normal nav-link in the flex row */
.nav-links .nav-item-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
}

/* Trigger anchor: same alignment as sibling .nav-links a */
.nav-links .nav-item-dropdown > a {
  display: inline-block !important;
  padding-bottom: 4px !important;
  line-height: inherit !important;
}

/* Hover-bridge: bigger so cursor doesn't fall off between trigger and menu */
.nav-links .nav-item-dropdown::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: -10px !important;
  right: -10px !important;
  height: 18px !important;
  background: transparent;
  pointer-events: auto;
  z-index: 49;
}

/* Dropdown menu: ensure it's actually clickable when visible */
.nav-links .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #ffffff !important;
  border: 1px solid rgba(14, 116, 144, 0.25) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 14px 30px rgba(14, 116, 144, 0.18) !important;
  padding: 8px !important;
  min-width: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0.16s ease;
  z-index: 100 !important;
}

.nav-links .nav-item-dropdown:hover .dropdown-menu,
.nav-links .nav-item-dropdown:focus-within .dropdown-menu,
.nav-links .nav-item-dropdown.open .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Dropdown menu links: clickable, dark text, cyan hover */
.nav-links .dropdown-menu a {
  display: block !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  position: relative !important;
  line-height: 1.4 !important;
}
.nav-links .dropdown-menu a::after { content: none !important; }
.nav-links .dropdown-menu a:hover {
  background: var(--accent-light) !important;
  color: var(--accent-dark) !important;
}

/* ============================================================
   Dropdown: nuclear option — no transitions, hard color overrides
   ============================================================ */

.nav-links .nav-item-dropdown .dropdown-menu {
  transition: none !important;
}

/* When dropdown is hover/focus/click-open, force full opacity instantly */
.nav-links .nav-item-dropdown:hover .dropdown-menu,
.nav-links .nav-item-dropdown:focus-within .dropdown-menu,
.nav-links .nav-item-dropdown.open .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: #ffffff !important;
}

/* Links inside dropdown: bold dark text always, never inherit secondary grey */
.nav-links .nav-item-dropdown .dropdown-menu a,
.nav-links .nav-item-dropdown .dropdown-menu a:link,
.nav-links .nav-item-dropdown .dropdown-menu a:visited {
  color: #111827 !important;
  background: transparent !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
.nav-links .nav-item-dropdown .dropdown-menu a:hover,
.nav-links .nav-item-dropdown .dropdown-menu a:focus {
  color: #155E75 !important;
  background: #ECFEFF !important;
}

/* Make sure the noise overlay never sits over the dropdown menu */
body::before { z-index: 0 !important; }
.nav { z-index: 10 !important; }

/* Fix: status badge was invisible cyan-on-cyan on the new hero band.
   Solid white pill with cyan border + green dot = high-contrast, reads as "available." */
.status-badge {
  background: #ffffff !important;
  color: var(--accent-dark) !important;
  border: 1px solid rgba(14, 116, 144, 0.35) !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(14, 116, 144, 0.08);
}
.status-badge::before {
  background: #10B981 !important; /* green dot — universal "online/available" signal */
}

/* ============================================================
   Full-bleed action-shot hero (home page)
   ============================================================ */

.hero-action {
  position: relative !important;
  margin-left: calc(-1 * var(--gutter)) !important;
  margin-right: calc(-1 * var(--gutter)) !important;
  padding: 0 !important;
  height: min(70vh, 620px);
  min-height: 480px;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #0E7490 !important;
}

.hero-action-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-action-bg picture,
.hero-action-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* Dark overlay top, fade to cyan-light at bottom so it blends into the page */
.hero-action::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.35) 75%,
    rgba(207, 250, 254, 0.70) 100%
  );
  pointer-events: none;
}

.hero-action-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 0 var(--gutter);
  max-width: 900px;
}

.hero-action .status-badge {
  margin-bottom: 24px;
}

.hero-action-name {
  font-size: clamp(48px, 9vw, 108px) !important;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  letter-spacing: -0.02em;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

.hero-action-subtitle {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 400;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  opacity: 0.96;
}

/* Lead paragraph section (sits below the action hero) */
.hero-lead {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  text-align: center;
}
.hero-lead .hero-headline {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  margin: 0 auto 14px;
  max-width: 720px;
  color: var(--text);
}
.hero-lead .hero-sub {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 760px;
}

/* On the index page, the FIRST section is no longer eligible for the cyan band hero treatment */
main > section.hero-action:first-of-type {
  background: #0E7490 !important;
}
main > section.hero-action:first-of-type::after {
  /* Use our gradient, not the generic first-of-type one */
  content: "";
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.35) 75%,
    rgba(207, 250, 254, 0.70) 100%
  ) !important;
}

@media (max-width: 768px) {
  .hero-action {
    height: 70vh;
    min-height: 420px;
  }
  .hero-action-name { font-size: clamp(40px, 12vw, 64px) !important; }
}

/* Fix: hero-action bottom fade was too strong, washing out the photo */
.hero-action::after,
main > section.hero-action:first-of-type::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.20) 50%,
    rgba(0, 0, 0, 0.30) 100%
  ) !important;
}

/* Status badge when placed below the hero subtitle */
.hero-action-content .status-badge {
  margin-top: 22px !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   Resume page — skill groups
   ============================================================ */

.resume-skills {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.resume-skill-group h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

/* ============================================================
   Footer upgrade — icon row with LinkedIn / Email / Resume
   ============================================================ */

footer {
  background: var(--bg-subtle);
  border-top: 1px solid rgba(14, 116, 144, 0.18);
  padding: 28px 0;
  margin-top: 40px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.footer-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.footer-meta {
  font-size: 13px;
  color: var(--text-tertiary);
}

.footer-links {
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(14, 116, 144, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 116, 144, 0.22);
}

@media (max-width: 600px) {
  .footer-inner {
    justify-content: center;
    text-align: center;
  }
  .footer-left {
    align-items: center;
  }
}

/* ---- Artifact tiles: category tag + readable title overlay ---- */

.artifact {
  display: block;
  padding: 0;
}

.artifact picture,
.artifact > img {
  display: block;
}

.artifact img {
  object-position: top;
}

.artifact::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
  z-index: 1;
}

.artifact > .artifact-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.artifact > .artifact-title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  z-index: 2;
  background: none;
  padding: 0;
  border-radius: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

a.artifact:hover > .artifact-title {
  color: #fff;
}

a.artifact:hover > .artifact-tag {
  background: var(--accent-dark, #155E75);
}

/* ============================================================
   Per-case accent system
   Each case study page gets a secondary accent. Defaults to
   brand cyan everywhere; body.page-hd and body.page-bq override.
   ============================================================ */

:root {
  --case-accent: #0E7490;
  --case-accent-dark: #155E75;
  --case-accent-soft: rgba(14, 116, 144, 0.15);
  --case-accent-tint: rgba(14, 116, 144, 0.06);
}

body.page-hd {
  --case-accent: #C2410C;
  --case-accent-dark: #9A3412;
  --case-accent-soft: rgba(194, 65, 12, 0.18);
  --case-accent-tint: rgba(194, 65, 12, 0.07);
}

body.page-bq {
  --case-accent: #15803D;
  --case-accent-dark: #166534;
  --case-accent-soft: rgba(21, 128, 61, 0.18);
  --case-accent-tint: rgba(21, 128, 61, 0.07);
}

/* Stat strip: gradient panel, colored borders, case-accent numbers */
.stat-strip {
  border-top-color: var(--case-accent-soft) !important;
  border-bottom-color: var(--case-accent-soft) !important;
  background: linear-gradient(180deg, var(--case-accent-tint), transparent 70%);
  border-radius: var(--radius);
  padding-left: 16px;
  padding-right: 16px;
}
.stat-strip__number {
  color: var(--case-accent) !important;
}

/* Section label underline picks up the case accent */
.section-label::after {
  background: var(--case-accent) !important;
}

/* Lesson numerals as case-accent badges */
.lessons li::before {
  background: var(--case-accent) !important;
}
.lessons li:hover {
  border-color: var(--case-accent-soft) !important;
  background: linear-gradient(180deg, var(--bg), var(--case-accent-tint)) !important;
}

/* Responsibility cards: case-accent on hover */
.responsibility:hover {
  border-color: var(--case-accent-soft) !important;
  box-shadow: 0 8px 22px var(--case-accent-tint) !important;
}

/* Tool pills: accent pills use case-accent on case pages */
body.page-hd .tool-pill.accent,
body.page-bq .tool-pill.accent {
  background: var(--case-accent) !important;
  border-color: var(--case-accent-dark) !important;
}
body.page-hd .tool-pill.accent:hover,
body.page-bq .tool-pill.accent:hover {
  background: var(--case-accent-dark) !important;
}
body.page-hd .tool-pill,
body.page-bq .tool-pill {
  border-color: var(--case-accent-soft);
}

/* Back-to-projects link on case pages picks up case accent */
body.page-hd .case-back,
body.page-bq .case-back {
  color: var(--case-accent);
}
body.page-hd .case-back:hover,
body.page-bq .case-back:hover {
  color: var(--case-accent-dark);
}

/* Case nav arrows (prev/next) pick up case accent */
body.page-hd .case-nav a,
body.page-bq .case-nav a {
  color: var(--case-accent);
}
body.page-hd .case-nav a:hover,
body.page-bq .case-nav a:hover {
  color: var(--case-accent-dark);
}

/* Artifact tag pill picks up case accent on case pages */
body.page-hd a.artifact > .artifact-tag,
body.page-bq a.artifact > .artifact-tag {
  background: var(--case-accent);
}
body.page-hd a.artifact:hover > .artifact-tag,
body.page-bq a.artifact:hover > .artifact-tag {
  background: var(--case-accent-dark);
}

/* Global elements that flip to case accent on case pages.
   Nav brand mark stays cyan everywhere for site identity. */

/* Scroll progress bar */
body.page-hd .reading-progress,
body.page-bq .reading-progress {
  background: linear-gradient(90deg, var(--case-accent), var(--case-accent-dark)) !important;
}

/* Back-to-top floating button */
body.page-hd .back-to-top,
body.page-bq .back-to-top {
  background: var(--case-accent) !important;
  box-shadow: 0 4px 14px var(--case-accent-soft) !important;
}
body.page-hd .back-to-top:hover,
body.page-bq .back-to-top:hover {
  background: var(--case-accent-dark) !important;
}
body.page-hd .back-to-top:focus-visible,
body.page-bq .back-to-top:focus-visible {
  outline-color: var(--case-accent-dark) !important;
}

/* Inline content links inside main */
body.page-hd main a,
body.page-bq main a {
  color: var(--case-accent);
}
body.page-hd main a:hover,
body.page-bq main a:hover {
  color: var(--case-accent-dark);
}

/* Footer icon links (LinkedIn, email, resume) */
body.page-hd .footer-inner a,
body.page-bq .footer-inner a {
  color: var(--case-accent);
}
body.page-hd .footer-inner a:hover,
body.page-bq .footer-inner a:hover {
  color: var(--case-accent-dark);
}

/* Section band tints flip per case page.
   Default cyan bands are defined globally at main > section:nth-of-type(even)
   and main > section:first-of-type. These rules override only on case pages. */

/* HardDriverz: soft peach/orange bands */
body.page-hd main > section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(255, 237, 213, 0.65), rgba(255, 237, 213, 0.35)) !important;
}
body.page-hd main > section:first-of-type {
  background: linear-gradient(180deg, rgba(255, 237, 213, 0.85), rgba(255, 237, 213, 0.65)) !important;
}

/* Beaver Quest: soft mint/green bands */
body.page-bq main > section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(220, 252, 231, 0.65), rgba(220, 252, 231, 0.35)) !important;
}
body.page-bq main > section:first-of-type {
  background: linear-gradient(180deg, rgba(220, 252, 231, 0.85), rgba(220, 252, 231, 0.65)) !important;
}

/* Responsibility card top accent stripe picks up case accent on case pages */
body.page-hd .responsibility::before,
body.page-bq .responsibility::before {
  background: var(--case-accent) !important;
}

/* Per-project left-border colors on index page Featured work list.
   Use a pseudo-element with top/bottom inset instead of border-left so
   adjacent rows don't run their colored stripes together. */
.project-row.featured,
.project-row[href="harddriverz.html"],
.project-row[href="beaverquest.html"] {
  border-left: none !important;
  position: relative;
}
.project-row.featured::before,
.project-row[href="harddriverz.html"]::before,
.project-row[href="beaverquest.html"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 1px;
}
.project-row.featured::before { background: var(--accent); }
.project-row[href="harddriverz.html"]::before { background: #C2410C; }
.project-row[href="beaverquest.html"]::before { background: #15803D; }

/* Staggered fade-up entrance for the hero-action text on index page.
   Reuses the existing fade-up keyframe defined at the top of the file. */
.hero-action-name,
.hero-action-subtitle,
.hero-action .status-badge {
  animation: fade-up 0.7s ease-out both;
}
.hero-action-name { animation-delay: 0.15s; }
.hero-action-subtitle { animation-delay: 0.32s; }
.hero-action .status-badge { animation-delay: 0.5s; }

/* ---------------------------------------------------------------
   Horizontal card grid for Featured Work on the home page.
   Replaces the vertical .project-row layout for index.html.
   --------------------------------------------------------------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 960px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .project-grid { grid-template-columns: 1fr; }
}

.project-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid #e6e8eb;
  border-radius: var(--radius, 10px);
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #d0d4d9;
}

/* Accent top stripe per project. */
.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  z-index: 2;
}
.project-card-kila::before { background: #0E7490; }
.project-card-hd::before   { background: #C2410C; }
.project-card-bq::before   { background: #15803D; }

.project-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f3f4f6;
}
.project-card-image picture,
.project-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.project-card:hover .project-card-image img {
  transform: scale(1.03);
}

.project-card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.project-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.project-card-meta {
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
  margin: 0;
  letter-spacing: 0.01em;
}
.project-card-desc {
  font-size: 0.92rem;
  color: var(--text, #1f2937);
  margin: 4px 0 0;
  line-height: 1.45;
  flex: 1;
}
.project-card-cta {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
}
.project-card-kila .project-card-cta { color: #0E7490; }
.project-card-hd   .project-card-cta { color: #C2410C; }
.project-card-bq   .project-card-cta { color: #15803D; }

/* ---------------------------------------------------------------
   Mobile hamburger menu.
   On desktop: hamburger hidden, links visible inline (existing behavior).
   On mobile (<=768px): hamburger shown, links collapse behind it.
   --------------------------------------------------------------- */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  position: relative;
  z-index: 1001;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text, #1f2937);
  margin: 4px auto;
  transition: transform 0.3s ease, opacity 0.2s ease;
  border-radius: 1px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav { position: relative; }
  .nav-inner { position: relative; }
  .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; }

  /* Bring back the brand text on mobile (we no longer need to hide it). */
  .nav-brand span:last-child { display: inline !important; font-size: 14px; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid #e6e8eb;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 0 var(--gutter);
    flex-direction: column !important;
    align-items: stretch;
    gap: 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .nav-links.open {
    max-height: 600px;
    padding: 8px var(--gutter) 16px;
  }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid #f0f1f3;
    text-align: left;
  }
  .nav-links a:last-child,
  .nav-links .nav-item-dropdown:last-child > a {
    border-bottom: none;
  }
  /* Project dropdown on mobile: stack the menu items inline below the trigger */
  .nav-links .nav-item-dropdown {
    width: 100%;
  }
  .nav-links .nav-item-dropdown > a {
    padding: 14px 0;
  }
  .nav-links .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 0 0 14px !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-links .nav-item-dropdown.open .dropdown-menu,
  .nav-links .nav-item-dropdown:focus-within .dropdown-menu {
    max-height: 240px;
  }
  .nav-links .dropdown-menu a {
    padding: 10px 0 !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f0f1f3;
  }
  .nav-links .dropdown-menu a:last-child { border-bottom: none; }
}

/* Stronger hero overlay so name/subtitle pop against the busy classroom photo. */
.hero-action::after,
main > section.hero-action:first-of-type::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.40) 50%,
    rgba(0, 0, 0, 0.50) 100%
  ) !important;
}
.hero-action-name,
.hero-action-subtitle {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Hero photo crop on mobile: shift focal point to the LEFT of the photo
   so Alex (arms crossed, looking down) stays centered in the mobile crop
   instead of being cut off by the default center crop. */
@media (max-width: 768px) {
  .hero-action-bg picture,
  .hero-action-bg img {
    object-position: 18% center !important;
  }
}
@media (max-width: 480px) {
  .hero-action-bg picture,
  .hero-action-bg img {
    object-position: 18% center !important;
  }
}

/* ---------------------------------------------------------------
   Project-card CTA: turned into solid pill buttons so they read
   as obvious clickable affordances instead of inline text links.
   --------------------------------------------------------------- */
.project-card-cta {
  display: inline-flex !important;
  align-items: center;
  align-self: center;
  margin-top: 16px !important;
  padding: 9px 16px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: var(--accent) !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.project-card-kila .project-card-cta { background: #0E7490 !important; }
.project-card-hd   .project-card-cta { background: #C2410C !important; }
.project-card-bq   .project-card-cta { background: #15803D !important; }

/* Darker shade when card is hovered */
.project-card-kila:hover .project-card-cta,
.project-card-kila:focus-visible .project-card-cta { background: #155E75 !important; }
.project-card-hd:hover .project-card-cta,
.project-card-hd:focus-visible   .project-card-cta { background: #9A3412 !important; }
.project-card-bq:hover .project-card-cta,
.project-card-bq:focus-visible   .project-card-cta { background: #166534 !important; }

/* Stronger card hover lift + shadow so the whole card feels interactive. */
.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12) !important;
  border-color: #c0c5cc !important;
}

/* Tinted bottom band on each card body. Fades from transparent at top to
   a soft accent tint at the bottom so the button sits on a colored "shelf"
   that separates the card from the white page background. */
.project-card-body {
  background: linear-gradient(180deg, transparent 55%, rgba(14, 116, 144, 0.18) 100%);
}
.project-card-kila .project-card-body {
  background: linear-gradient(180deg, transparent 55%, rgba(14, 116, 144, 0.20) 100%);
}
.project-card-hd .project-card-body {
  background: linear-gradient(180deg, transparent 55%, rgba(194, 65, 12, 0.20) 100%);
}
.project-card-bq .project-card-body {
  background: linear-gradient(180deg, transparent 55%, rgba(21, 128, 61, 0.20) 100%);
}

/* Research callout CTA: same pill treatment using the default cyan accent. */
.project-row .project-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff !important;
  background: var(--accent);
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.project-row:hover .project-cta {
  background: var(--accent-dark, #155E75);
  text-decoration: none !important;
}

/* ---------------------------------------------------------------
   About page: stack the portrait above the headline and center
   both on desktop too (matches the mobile layout). Portrait sits
   above the eyebrow / headline / sub instead of beside them.
   --------------------------------------------------------------- */
.about-hero {
  grid-template-columns: 1fr !important;
  text-align: center !important;
  gap: 22px !important;
  justify-items: center !important;
  padding: 48px 0 32px !important;
}
.about-portrait {
  margin: 0 auto !important;
  width: 200px !important;
  height: 200px !important;
}
.about-hero .eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.about-hero .about-sub {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Thesis page: prominent hook between H1 and meta. Answers the
   "why/what/point" question above the fold. */
.case-hook {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
  color: var(--text);
  margin: 14px 0 18px;
  max-width: 760px;
  font-weight: 500;
}

/* About portrait: slight scale + leftward shift so the head sits a touch
   left of dead center within the circle. Scale compensates for the gap
   that the translate would otherwise leave on the right side. */
.about-portrait img {
  transform: scale(1.08) translateX(-3%);
}

/* PDF.js viewer container. PDFs are rendered to canvas elements that
   are appended into this div. Provides a styled placeholder while loading. */
.pdf-viewer {
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 8px;
  background: var(--bg-subtle, #f6f7f9);
  min-height: 400px;
}
.pdf-viewer canvas {
  background: #ffffff;
}