/* =========================================================
   Suruchi Gokhale , Portfolio Design System
   Typography: Caudex (headings) + Mulish (body/UI) , finalized
   ========================================================= */

:root {
  /* Color tokens , warm editorial, richer/more saturated pass */
  --color-bg: #FBF3E6;
  --color-bg-alt: #F3E5CD;
  --color-surface: #FFFCF6;
  --color-border: #E5D5B8;
  --color-border-strong: #CBB185;

  --color-text: #2A1B10;
  --color-text-secondary: #5C4A38;
  --color-text-muted: #7A6A57;

  --color-accent: #D9542E;        /* vivid coral-terracotta , backgrounds, illustration, buttons */
  --color-accent-text: #A63D1E;   /* darker clay , meets AA for inline text/links */
  --color-accent-soft: #FBE2D4;   /* tinted accent surface */

  --color-accent-2: #1F6F64;      /* rich teal , secondary accent */
  --color-accent-2-text: #17564D;
  --color-accent-2-soft: #DCEEEA;

  --color-accent-3: #D89A2B;      /* warm amber/gold , tertiary accent for illustration variety */
  --color-accent-3-text: #A6741A;
  --color-accent-3-soft: #F7E8C9;

  --color-focus: #A63D1E;

  /* Evidence-type system colors (never color-only , always paired with text label) */
  --tag-observed-bg: #E4EEF0; --tag-observed-text: #2E5261;
  --tag-inferred-bg: #ECE7F5; --tag-inferred-text: #4A3B78;
  --tag-designed-bg: #F7E7DE; --tag-designed-text: #93411F;
  --tag-tested-bg:   #E9F0DE; --tag-tested-text:   #45532F;
  --tag-proposed-bg: #F1EAE0; --tag-proposed-text: #5C4A38;

  /* Type scale */
  --font-head: "Caudex", Georgia, serif;
  --font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.92rem, 0.89rem + 0.15vw, 1rem);
  --step-0:  clamp(1.08rem, 1.03rem + 0.25vw, 1.2rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.65vw, 1.875rem);
  --step-3:  clamp(1.9rem, 1.65rem + 1vw, 2.5rem);
  --step-4:  clamp(2.4rem, 1.95rem + 1.9vw, 3.5rem);
  --step-5:  clamp(3rem, 2.3rem + 2.8vw, 4.5rem);

  /* Spacing (8pt-ish scale) */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --container: 1180px;
  --container-narrow: 760px;

  --shadow-card: 0 1px 2px rgba(42, 27, 16, 0.05), 0 8px 24px -12px rgba(42, 27, 16, 0.18);
  --transition: 180ms ease;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 700; }

p { margin: 0 0 var(--space-3); max-width: 62ch; }
p.wide { max-width: none; }

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

/* Visible, consistent focus ring everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section { padding-block: var(--space-8); }
.section-tight { padding-block: var(--space-6); }
.section-alt { background: var(--color-bg-alt); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-2);
}

.lede {
  font-size: var(--step-1);
  color: var(--color-text-secondary);
  max-width: 60ch;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
}
.btn-primary:hover { background: var(--color-accent-text); color: #fff; }
.btn-secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-secondary:hover { border-color: var(--color-text); background: var(--color-surface); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 246, 236, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}
.nav-logo {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.nav-logo:hover { color: var(--color-accent-text); }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-text);
}
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.85rem 0; width: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-7);
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 63px);
  display: flex;
  align-items: center;
}
.hero-inner { max-width: 46rem; }
.hero h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(3.2rem, 2.4rem + 3.4vw, 5.4rem);
}
.hero .lede { font-size: var(--step-2); color: var(--color-text-secondary); font-family: var(--font-head); font-weight: 400; line-height: 1.35; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero-mark {
  position: absolute;
  right: -6%;
  top: -10%;
  width: 46%;
  max-width: 520px;
  opacity: 0.9;
}
@media (max-width: 860px) {
  .hero-mark { display: none; }
}

/* ---------- Hero with photo (two-column) ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.hero-photo-frame {
  position: relative;
  justify-self: center;
  max-width: 500px;
  width: 100%;
}
.hero-photo-frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: linear-gradient(135deg, var(--color-accent-soft), var(--color-accent-2-soft));
  border-radius: var(--radius-lg);
  z-index: 0;
  transform: rotate(3deg);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms ease;
}
.hero-photo-frame:hover .hero-photo,
.hero-photo-frame:focus-within .hero-photo {
  transform: translateY(-6px) rotate(-1deg) scale(1.02);
  box-shadow: 0 20px 40px -16px rgba(42, 27, 16, 0.35);
}
.hero-photo-frame:hover::before,
.hero-photo-frame:focus-within::before {
  transform: rotate(5deg);
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero-photo-frame::before { transition: none; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-block: var(--space-7) var(--space-6); }
  .hero-photo-frame { margin-top: var(--space-5); max-width: 360px; }
}

/* ---------- Skills strip ---------- */
.skills-strip {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-4);
}
.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0; padding: 0;
}
.skills-list li {
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

/* ---------- Section headers ---------- */
.section-head {
  max-width: 42rem;
  margin-bottom: var(--space-6);
}

/* ---------- Cards / Work grids ---------- */
.work-grid-featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.work-grid-secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.work-grid-secondary .card-secondary {
  flex: 1 1 calc((100% - 2 * var(--space-4)) / 3);
  max-width: calc((100% - 2 * var(--space-4)) / 3);
}
@media (max-width: 900px) {
  .work-grid-secondary .card-secondary {
    flex-basis: calc((100% - var(--space-4)) / 2);
    max-width: calc((100% - var(--space-4)) / 2);
  }
}
@media (max-width: 560px) {
  .work-grid-secondary .card-secondary {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media (max-width: 900px) {
  .work-grid-featured { grid-template-columns: 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  height: 100%;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-border-strong);
}
.card-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-accent-soft), var(--color-bg-alt));
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.card-media svg { width: 62%; height: 62%; color: var(--color-accent-text); transition: transform 320ms cubic-bezier(.2,.8,.2,1); }
.card:hover .card-media svg { transform: scale(1.08) rotate(-1deg); }
.card-media.tone-teal { background: linear-gradient(135deg, var(--color-accent-2-soft), var(--color-bg-alt)); }
.card-media.tone-teal svg { color: var(--color-accent-2-text); }
.card-media.tone-amber { background: linear-gradient(135deg, var(--color-accent-3-soft), var(--color-bg-alt)); }
.card-media.tone-amber svg { color: var(--color-accent-3-text); }
.card-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.05), transparent 40%);
  pointer-events: none;
}
.card {
  border-bottom: 3px solid transparent;
}
.card:hover {
  border-bottom-color: var(--color-accent);
}
.card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.card-category {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.card-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--color-text);
}
.card-line {
  color: var(--color-text-secondary);
  font-size: var(--step-0);
  margin: 0;
}
.card-cta {
  margin-top: auto;
  font-weight: 700;
  color: var(--color-accent-text);
  font-size: var(--step--1);
  display: flex; align-items: center; gap: 0.35rem;
}
.card:hover .card-cta { color: var(--color-text); }
.card:hover .card-cta .arrow { transform: translateX(3px); }
.arrow { transition: transform var(--transition); display: inline-block; }

.card-secondary .card-media { aspect-ratio: 16/10; }
.card-secondary .card-title { font-size: var(--step-0); }
.card-media-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-media-photo { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .card-media-photo { transition: none; }
}

/* ---------- Curiosity strip ---------- */
.curiosity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 780px) {
  .curiosity-grid { grid-template-columns: 1fr; }
}
.curiosity-card {
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.curiosity-card .card-category { color: var(--color-accent-2-text); }

/* ---------- Curiosity carousel (manually controlled, no autoplay) ---------- */
.carousel-wrap {
  position: relative;
}
.carousel-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track .curiosity-card {
  flex: 0 0 calc((100% - 2 * var(--space-4)) / 3);
  scroll-snap-align: start;
  min-width: 260px;
}
@media (max-width: 900px) {
  .carousel-track .curiosity-card { flex: 0 0 calc((100% - var(--space-4)) / 1.15); }
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.carousel-btn:hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-btn:disabled:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.carousel-dots {
  display: flex;
  gap: 0.5rem;
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-border-strong);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.carousel-dot[aria-current="true"] {
  background: var(--color-accent);
  transform: scale(1.3);
}

/* ---------- About teaser ---------- */
.about-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 780px) {
  .about-teaser { grid-template-columns: 1fr; }
}
.teaser-photo-frame {
  position: relative;
  justify-self: center;
  max-width: 380px;
  width: 100%;
}
.teaser-photo-frame::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: linear-gradient(135deg, var(--color-accent-3-soft), var(--color-accent-2-soft));
  border-radius: var(--radius-lg);
  z-index: 0;
  transform: rotate(-3deg);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.teaser-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms ease;
}
.teaser-photo-frame:hover .teaser-photo,
.teaser-photo-frame:focus-within .teaser-photo {
  transform: translateY(-6px) rotate(1deg) scale(1.02);
  box-shadow: 0 20px 40px -16px rgba(42, 27, 16, 0.35);
}
.teaser-photo-frame:hover::before,
.teaser-photo-frame:focus-within::before {
  transform: rotate(-5deg);
}
@media (prefers-reduced-motion: reduce) {
  .teaser-photo, .teaser-photo-frame::before { transition: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6);
  background: var(--color-bg-alt);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0; padding: 0;
}
.footer-links a { font-weight: 700; }
.footer-meta {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

/* ---------- Methods & tools chip row (case studies) ---------- */
.methods-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.methods-row .m-label {
  flex-basis: 100%;
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.methods-row .m-chip {
  font-size: var(--step--1);
  font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}

/* ---------- Quick facts strip (case studies) ---------- */
.quick-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-6);
}
@media (max-width: 640px) {
  .quick-facts { grid-template-columns: 1fr; }
}
.quick-facts dt {
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.quick-facts dd { margin: 0; font-weight: 600; }

.quick-facts.is-light {
  border-style: dashed;
  background: transparent;
  padding: var(--space-3) var(--space-4);
}

/* ---------- Snapshot (scannable problem/approach/outcome summary) ---------- */
.snapshot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
.snapshot > div {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}
.snapshot dt {
  flex: 0 0 110px;
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.snapshot dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .snapshot > div { flex-direction: column; gap: 0.2rem; }
  .snapshot dt { flex-basis: auto; }
}

/* ---------- Case study content ---------- */
.case-hero {
  padding-block: var(--space-7) var(--space-4);
}
.case-hero .eyebrow { color: var(--color-accent-text); }
.case-hero h1 { max-width: 20ch; }

.case-section {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 90px;
}
.case-section:first-of-type { border-top: none; }

/* Divider marking a distinct part/section within a long case study */
.part-divider {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-accent);
}
.part-divider:first-child { margin-top: 0; }
.part-divider + .case-section { border-top: none; }
.part-divider .part-index {
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--color-accent-text);
  white-space: nowrap;
}
.part-divider .part-title {
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.case-section h2 {
  max-width: 22ch;
  font-size: var(--step-2);
}
.case-section .section-note {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-3);
}

.evidence-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.evidence-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.tag {
  flex-shrink: 0;
  font-size: var(--step--1);
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 0.1rem;
}
.tag-observed { background: var(--tag-observed-bg); color: var(--tag-observed-text); }
.tag-inferred { background: var(--tag-inferred-bg); color: var(--tag-inferred-text); }
.tag-designed { background: var(--tag-designed-bg); color: var(--tag-designed-text); }
.tag-tested   { background: var(--tag-tested-bg);   color: var(--tag-tested-text); }
.tag-proposed { background: var(--tag-proposed-bg); color: var(--tag-proposed-text); border: 1px dashed var(--color-border-strong); }
.evidence-item p { margin: 0; }

/* A single tag marking every item in the list below as one evidence type,
   used instead of repeating the same pill on every item. */
.section-tag {
  display: inline-flex;
  margin: var(--space-3) 0 0;
}
.clean-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.clean-list li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0;
}
.clean-list.type-observed li { border-left-color: var(--tag-observed-text); }
.clean-list.type-inferred li { border-left-color: var(--tag-inferred-text); }
.clean-list.type-designed li { border-left-color: var(--tag-designed-text); }
.clean-list.type-tested li   { border-left-color: var(--tag-tested-text); }
.clean-list.type-proposed li { border-left-color: var(--tag-proposed-text); }
.clean-list li.is-dimmed { opacity: 0.35; }

.evidence-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.evidence-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }

.placeholder-block {
  background: var(--color-bg-alt);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--step--1);
}

.diagram-frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block: var(--space-4);
}
.diagram-frame figcaption {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-4);
}
.stat {
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.stat-number {
  font-family: var(--font-head);
  font-size: var(--step-3);
  color: var(--color-accent-text);
  display: block;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.stat-label {
  font-size: var(--step--1);
  color: var(--color-text-secondary);
  font-weight: 600;
}

.case-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- Case study real photography & screenshots ---------- */
.case-screenshot {
  margin-block: var(--space-4);
}
.case-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}
.case-screenshot:hover img,
.case-screenshot:focus-within img {
  transform: translateY(-4px) scale(1.008);
  box-shadow: 0 24px 44px -18px rgba(42, 27, 16, 0.32);
}
.case-screenshot figcaption {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.case-photo-banner {
  margin-block: var(--space-4);
}
.case-photo-banner img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}
.case-photo-banner:hover img,
.case-photo-banner:focus-within img {
  transform: scale(1.015);
  box-shadow: 0 24px 44px -18px rgba(42, 27, 16, 0.32);
}
.case-photo-banner figcaption {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.case-screenshot-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-block: var(--space-4);
  align-items: start;
}
.case-screenshot-duo figure { margin: 0; }
.case-screenshot-duo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}
.case-screenshot-duo figure:hover img,
.case-screenshot-duo figure:focus-within img {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -16px rgba(42, 27, 16, 0.3);
}
.case-screenshot-duo figcaption {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
@media (max-width: 640px) {
  .case-screenshot-duo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .case-screenshot-duo img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .case-screenshot img, .case-photo-banner img { transition: none; }
}

.employer-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.employer-badge img { height: 26px; width: auto; display: block; }
.employer-badge span { font-size: var(--step--1); color: var(--color-text-muted); font-weight: 600; }

/* ---------- Skill-bed grid (Learning Journey) ---------- */
.skill-bed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.skill-bed-card {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 250ms ease;
}
.skill-bed-card:hover,
.skill-bed-card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}
.skill-bed-card svg {
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: var(--space-2);
}
.skill-bed-card span {
  display: block;
  font-weight: 700;
  font-size: var(--step--1);
}
@media (prefers-reduced-motion: reduce) {
  .skill-bed-card { transition: none; }
}

/* ---------- Project marker (chapter divider within a multi-project case study) ---------- */
.project-marker {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-top: var(--space-6);
  margin-top: var(--space-7);
  border-top: 3px solid var(--color-accent);
}
.project-marker .project-marker-index {
  font-family: var(--font-head);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--color-accent-text);
}
.project-marker .project-marker-label {
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.case-section.project-start {
  border-top: none;
  padding-top: 0;
}

/* ---------- Screen gallery (masonry-style screenshot grid) ---------- */
.screen-gallery {
  columns: 3 220px;
  column-gap: var(--space-4);
  margin-block: var(--space-4);
}
.screen-gallery figure {
  break-inside: avoid;
  margin: 0 0 var(--space-4);
}
.screen-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}
.screen-gallery figure:hover img,
.screen-gallery figure:focus-within img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 36px -16px rgba(42, 27, 16, 0.32);
}
.screen-gallery figcaption {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-text-muted);
  text-align: center;
}
@media (max-width: 700px) {
  .screen-gallery { columns: 2 160px; }
}
@media (max-width: 480px) {
  .screen-gallery { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-gallery img { transition: none; }
}

/* Wider variant for dense, text-heavy screenshots (research boards, documents) */
.screen-gallery.gallery-lg {
  columns: 2 340px;
}
@media (max-width: 700px) {
  .screen-gallery.gallery-lg { columns: 1; }
}

/* Narrower variant for full-page screenshots, click to enlarge for full clarity */
.screen-gallery.gallery-sm {
  columns: 4 150px;
}
@media (max-width: 700px) {
  .screen-gallery.gallery-sm { columns: 2 140px; }
}

/* ---------- Testimonials (LinkedIn recommendations) ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-4);
}
.testimonial-card {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 250ms ease;
}
.testimonial-card:hover,
.testimonial-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.testimonial-card:nth-child(2) { background: var(--color-accent-2-soft); }
.testimonial-card:nth-child(3) { background: var(--color-accent-3-soft); }
.testimonial-quote {
  font-style: italic;
  color: var(--color-text);
  font-size: var(--step--1);
  flex-grow: 1;
  margin: 0;
}
.testimonial-card footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testimonial-avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--color-text);
}
.testimonial-meta { display: flex; flex-direction: column; }
.testimonial-name { font-weight: 700; font-size: var(--step--1); }
.testimonial-role { font-size: var(--step--1); color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .testimonial-card { transition: none; }
}

/* ---------- Persona cards (Sahay) ---------- */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-4);
}
.persona-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 250ms ease;
}
.persona-card:hover,
.persona-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.persona-card header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.persona-avatar {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-accent-2-soft);
  border: 1.5px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--color-accent-2-text);
}
.persona-card:nth-child(2) .persona-avatar { background: var(--color-accent-soft); color: var(--color-accent-text); }
.persona-card:nth-child(3) .persona-avatar { background: var(--color-accent-3-soft); color: var(--color-accent-3-text); }
.persona-name { font-family: var(--font-head); font-size: var(--step-1); margin: 0; }
.persona-meta { font-size: var(--step--1); color: var(--color-text-muted); margin: 0.1rem 0 0; }
.persona-bio { font-size: var(--step--1); margin: 0; color: var(--color-text-secondary); }
.persona-scenario {
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: 0;
}
.persona-scenario-label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}
.persona-scenario p { font-size: var(--step--1); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .persona-card { transition: none; }
}

/* ---------- Swatches & type specimen (visual identity) ---------- */
.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.swatch {
  width: 110px;
}
.swatch-color {
  width: 100%;
  height: 72px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  margin-bottom: 0.4rem;
}
.swatch-name {
  display: block;
  font-weight: 700;
  font-size: var(--step--1);
}
.swatch-hex {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.type-specimen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-4);
}
.type-specimen-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.type-specimen-sample {
  font-size: var(--step-3);
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.type-specimen-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--color-text-muted);
}
.type-specimen-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0.2rem 0 0;
}

/* ---------- About page ---------- */
.about-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-7);
}
@media (max-width: 780px) {
  .about-hero { grid-template-columns: 1fr; }
}
.photo-placeholder {
  aspect-ratio: 4/5;
  background: var(--color-bg-alt);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4);
}
.photo-placeholder svg { width: 2.5rem; height: 2.5rem; opacity: 0.6; }
.photo-placeholder .ph-label { font-weight: 700; font-size: var(--step--1); }
.photo-placeholder .ph-file { font-size: 0.78rem; font-family: monospace; opacity: 0.8; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.gallery-grid .photo-placeholder { aspect-ratio: 1/1; border-radius: var(--radius-sm); }

/* Real photo grid: staggered reveal per tile, no carousel/autoplay */
.gallery-grid.is-photos figure {
  margin: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.gallery-grid.is-photos img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms cubic-bezier(.2,.8,.2,1);
}
.gallery-grid.is-photos figure:hover img { transform: scale(1.06); }
.gallery-grid.is-photos figure:nth-child(1) { transition-delay: 0ms; }
.gallery-grid.is-photos figure:nth-child(2) { transition-delay: 80ms; }
.gallery-grid.is-photos figure:nth-child(3) { transition-delay: 160ms; }
.gallery-grid.is-photos figure:nth-child(4) { transition-delay: 240ms; }
.gallery-grid.is-photos figure:nth-child(5) { transition-delay: 320ms; }
.gallery-grid.is-photos figure:nth-child(6) { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  .gallery-grid.is-photos img { transition: none; }
}

/* Fade carousel: 2-3 photos visible at once, each slot cross-dissolves to
   the next photo on its own timer, auto-advances, pauses on hover/focus. */
.fade-carousel { margin-top: var(--space-4); }
.fade-carousel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .fade-carousel-row { grid-template-columns: repeat(2, 1fr); }
  .fade-carousel-row .fade-carousel-slot:nth-child(3) { display: none; }
}
.fade-carousel-slot {
  margin: 0;
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.fade-carousel-slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 500ms ease;
}
.fade-carousel-slot img.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fade-carousel-slot img { transition: none; }
}
.photo-carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.photo-carousel-btn {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.photo-carousel-btn:hover { background: var(--color-accent-soft); }
.photo-carousel-btn:active { transform: scale(0.94); }

/* Headshot photo frame (replaces the dashed placeholder once a real photo exists) */
.about-headshot-frame {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.about-headshot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Wide real-photo banner above the About hero */
.about-banner {
  width: 100%;
  height: 320px;
  overflow: hidden;
}
.about-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 62%; display: block; }
@media (max-width: 700px) {
  .about-banner { height: 220px; }
}

/* Small inline photo next to a timeline milestone */
.timeline-photo {
  width: 100%;
  max-width: 220px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-top: var(--space-3);
}

.timeline {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  border-left: 2px solid var(--color-border-strong);
}
.timeline li {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-5);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px; top: 0.35rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
}
.timeline .t-year {
  font-family: var(--font-head);
  font-size: var(--step-1);
  color: var(--color-accent-text);
  display: block;
  margin-bottom: 0.25rem;
}
.timeline h3 { font-size: var(--step-0); margin-bottom: 0.35rem; }

/* ---------- Utility ---------- */
.flow-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--step--1);
}
.flow-node {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
}
.flow-node.is-gap {
  border-style: dashed;
  color: var(--color-text-muted);
  font-weight: 400;
  font-style: italic;
}
.flow-arrow { color: var(--color-text-muted); }

/* =========================================================
   Interactivity additions
   ========================================================= */

/* ---------- Reading progress bar (case studies) ---------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-accent);
  z-index: 200;
  transition: width 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar { transition: none; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Filter pills (More Work) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.filter-pill {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-pill:hover { border-color: var(--color-text); color: var(--color-text); }
.filter-pill[aria-pressed="true"] {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.work-grid-secondary .card-secondary {
  transition: opacity var(--transition), transform var(--transition);
}
.work-grid-secondary .card-secondary.is-hidden {
  display: none;
}

/* ---------- Evidence legend as interactive filter ---------- */
.evidence-legend button.legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: var(--step--1);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.evidence-legend button.legend-toggle:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.evidence-legend button.legend-toggle[aria-pressed="true"] {
  background: var(--color-bg-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  font-weight: 700;
}
.evidence-legend .legend-hint {
  font-style: italic;
  color: var(--color-text-muted);
}
.evidence-item.is-dimmed {
  opacity: 0.28;
}
.evidence-item {
  transition: opacity var(--transition);
  scroll-margin-top: 100px;
}
.clean-list li {
  transition: opacity var(--transition);
}
.section-tag.is-dimmed {
  opacity: 0.35;
}
.section-tag {
  transition: opacity var(--transition);
}

/* ---------- Progressive disclosure (details/summary) ---------- */
.disclosure {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  background: var(--color-bg-alt);
}
.disclosure summary {
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-head);
  font-size: var(--step-1);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-accent-text);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.disclosure[open] summary::after { transform: rotate(45deg); }
.disclosure .disclosure-body { padding-top: var(--space-3); }

.disclosure-static {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  background: var(--color-bg-alt);
}
.disclosure-static .disclosure-label {
  font-weight: 700;
  font-family: var(--font-head);
  font-size: var(--step-1);
  display: block;
  margin-bottom: var(--space-2);
}
.disclosure summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- Tabs (SmartKit-style explorable case study) ---------- */
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}
.tab {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-0);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.9rem 0.3rem;
  margin-right: var(--space-4);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--color-text); }
.tab[aria-selected="true"] {
  color: var(--color-accent-text);
  border-bottom-color: var(--color-accent);
}
.tabpanel { display: none; }
.tabpanel.is-active { display: block; }

/* ---------- Scrollspy side nav (NBME-style deep dive) ---------- */
.case-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.case-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .case-layout { grid-template-columns: 1fr; }
  .scrollspy { display: none; }
}
.scrollspy {
  position: sticky;
  top: 90px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--color-border);
}
.scrollspy li a {
  display: block;
  padding: 0.5rem 0 0.5rem var(--space-3);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.scrollspy li a:hover { color: var(--color-text); }
.scrollspy li a.is-active {
  color: var(--color-accent-text);
  border-left-color: var(--color-accent);
}

/* ---------- Two-column research layout (Sahay-style) ---------- */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 780px) {
  .split-layout { grid-template-columns: 1fr; }
}

/* ---------- Trust-factor interactive toggle (Sahay) ---------- */
.factor-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0; padding: 0;
}
.factor-btn {
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  transition: border-color var(--transition), background var(--transition);
}
.factor-btn:hover { border-color: var(--color-border-strong); }
.factor-btn[aria-expanded="true"] {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
.factor-btn .factor-icon {
  font-family: var(--font-head);
  font-size: 1.2rem;
  transition: transform var(--transition);
}
.factor-btn[aria-expanded="true"] .factor-icon { transform: rotate(45deg); }
.factor-response {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-top: -1px;
}
.factor-response[hidden] { display: none; }

/* ---------- Number reveal (FocusMode+ style engagement hook) ---------- */
.guess-widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block: var(--space-4);
  text-align: center;
}
.guess-widget .reveal-number {
  font-family: var(--font-head);
  font-size: var(--step-4);
  color: var(--color-accent-text);
  display: block;
  margin: var(--space-2) 0;
}
.guess-widget .reveal-number[hidden] { display: none; }

/* ---------- Playground pages (Research / Code / Prototype) ---------- */
.playground-hero {
  padding-block: var(--space-7) var(--space-5);
}
.playground-nav-strip {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.playground-nav-strip a {
  font-weight: 700;
  font-size: var(--step--1);
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-text-secondary);
}
.playground-nav-strip a[aria-current="page"] {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.playground-nav-strip a:hover:not([aria-current="page"]) {
  border-color: var(--color-text);
  color: var(--color-text);
}

.demo-frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-block: var(--space-5);
}
.demo-frame h3 { margin-bottom: var(--space-2); }

.state-machine {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.state-node {
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--color-border-strong);
  font-weight: 700;
  color: var(--color-text-muted);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.state-node.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: scale(1.06);
}
.state-machine .flow-arrow { font-weight: 700; }

.log-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-family: monospace;
  font-size: var(--step--1);
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 160px;
  overflow-y: auto;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.prototype-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.prototype-tile {
  background: var(--color-surface);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.prototype-tile .p-type {
  display: block;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}

.writing-block {
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-3);
}

/* =========================================================
   Visual refresh , grain, ambient gradients, marquee, richer hover
   ========================================================= */

/* ---------- Sitewide grain texture (subtle, decorative, non-interactive) ---------- */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Ambient gradient-mesh hero backdrop ---------- */
.mesh-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.mesh-hero > .container {
  position: relative;
  z-index: 2;
}
.mesh-hero::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(28% 32% at 82% 45%, rgba(217,84,46,0.30), transparent 70%),
    radial-gradient(24% 28% at 18% 55%, rgba(31,111,100,0.22), transparent 70%),
    radial-gradient(22% 25% at 55% 65%, rgba(216,154,43,0.24), transparent 70%);
  background:
    radial-gradient(28% 32% at 82% 45%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%),
    radial-gradient(24% 28% at 18% 55%, color-mix(in srgb, var(--color-accent-2) 22%, transparent), transparent 70%),
    radial-gradient(22% 25% at 55% 65%, color-mix(in srgb, var(--color-accent-3) 24%, transparent), transparent 70%);
  filter: blur(40px);
  -webkit-mask-image: radial-gradient(65% 65% at 50% 40%, black 30%, transparent 75%);
  mask-image: radial-gradient(65% 65% at 50% 40%, black 30%, transparent 75%);
  animation: mesh-drift 22s ease-in-out infinite alternate;
}
.mesh-hero > * { position: relative; z-index: 2; }
@keyframes mesh-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-2%, 2%) scale(1.05); }
  100% { transform: translate(2%, -1%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-hero::before { animation: none; }
}

/* ---------- Marquee (skills strip) ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: var(--space-2);
  animation: marquee-scroll 32s linear infinite;
}
.marquee-track li {
  flex: 0 0 auto;
  white-space: nowrap;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- Enhanced buttons: shine sweep on hover ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 500ms ease;
}
.btn:hover::after { left: 130%; }
.btn-secondary::after { background: linear-gradient(115deg, transparent, rgba(42,27,16,0.06), transparent); }

/* ---------- Signature project illustration (case-study hero) ---------- */
.project-mark {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

/* ---------- Real-photo case-study hero (used when real work is shareable) ---------- */
.case-hero-photo {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.case-hero-photo::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: linear-gradient(135deg, var(--color-accent-soft), var(--color-accent-2-soft));
  border-radius: var(--radius-lg);
  z-index: 0;
  transform: rotate(-3deg);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.case-hero-photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms ease;
}
.case-hero-photo:hover img,
.case-hero-photo:focus-within img {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 24px 48px -16px rgba(42, 27, 16, 0.4);
}
.case-hero-photo:hover::before {
  transform: rotate(-5deg);
}
@media (prefers-reduced-motion: reduce) {
  .case-hero-photo img, .case-hero-photo::before { transition: none; }
}
@media (max-width: 860px) {
  .case-hero-photo { max-width: 320px; }
}
.hero-illustration {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 860px) {
  .hero-illustration { grid-template-columns: 1fr; }
  .project-mark { max-width: 260px; }
}

/* ---------- Case-hero band (consistent shell across all case studies) ---------- */

/* ---------- Apple-style pin-and-stack scroll (Featured Work) ---------- */
.stack-group {
  position: relative;
}
.stack-item {
  height: 150vh;
  min-height: 1000px;
}
.stack-item:last-child { height: auto; min-height: 0; }
.stack-card {
  position: sticky;
  top: 96px;
  height: 70vh;
  max-height: 560px;
  min-height: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  text-decoration: none;
  color: inherit;
  transform-origin: center top;
  will-change: transform, opacity;
  border-bottom: 3px solid transparent;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 250ms ease, border-color 250ms ease;
}
.stack-card:hover,
.stack-card:focus-visible {
  box-shadow: 0 28px 52px -20px rgba(42, 27, 16, 0.35);
  border-bottom-color: var(--color-accent);
}
.stack-card-media svg {
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.stack-card:hover .stack-card-media svg {
  transform: scale(1.06) rotate(-1deg);
}
.stack-card:hover .card-cta,
.stack-card:focus-visible .card-cta {
  color: var(--color-text);
}
.stack-card .card-cta .arrow { transition: transform var(--transition); display: inline-block; }
.stack-card:hover .card-cta .arrow {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .stack-card-media svg { transition: none; }
}
.stack-item:nth-child(1) .stack-card { z-index: 1; }
.stack-item:nth-child(2) .stack-card { z-index: 2; }
.stack-item:nth-child(3) .stack-card { z-index: 3; }

.stack-card-media {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  overflow: hidden;
}
.stack-card-media svg { width: 82%; height: 82%; max-width: 340px; }
.stack-card-media .stack-card-media-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  max-width: 460px;
  aspect-ratio: 900 / 823;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-3deg);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), opacity 350ms ease;
}
.stack-card:hover .stack-card-media-bg {
  transform: translate(-50%, -50%) rotate(-3deg) scale(1.08);
  opacity: 1;
}
.stack-card-photo {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 420px;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms ease;
}
.stack-card-photo.crop-wide {
  aspect-ratio: 900 / 823;
  object-fit: cover;
}
.stack-card:hover .stack-card-photo {
  transform: scale(1.08) rotate(-1deg);
  box-shadow: 0 20px 40px -14px rgba(42, 27, 16, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .stack-card-photo, .stack-card-media-bg { transition: none; }
}
.stack-card-body {
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.stack-card-body .card-title { font-size: var(--step-3); }
.stack-card-body .card-line { font-size: var(--step-0); max-width: 42ch; }

@media (max-width: 860px) {
  .stack-card { grid-template-columns: 1fr; height: auto; }
  .stack-card-media { padding: var(--space-5); min-height: 220px; }
  .stack-item { height: auto; min-height: 0; margin-bottom: var(--space-5); }
  .stack-card { position: relative; top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-item { height: auto; min-height: 0; margin-bottom: var(--space-5); }
  .stack-card { position: relative; top: 0; transform: none !important; opacity: 1 !important; }
}

/* ---------- Finding cards (usability-test results, grid instead of stacked list) ---------- */
.finding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.finding-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--tag-tested-text);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.finding-icon { font-size: 1.1rem; line-height: 1; }
.finding-title {
  font-weight: 700;
  margin: 0;
  font-size: var(--step-0);
}
.finding-body {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-text-secondary);
}

/* ---------- Horizontal screen carousel (app screenshots) ---------- */
.carousel-block { margin-top: var(--space-6); }
.carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.carousel-title {
  font-weight: 700;
  margin: 0;
}
.carousel-nav { display: flex; gap: 0.4rem; }
.carousel-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.carousel-btn:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-btn:disabled:hover { background: var(--color-surface); border-color: var(--color-border-strong); }

.screen-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.screen-carousel::-webkit-scrollbar { height: 7px; }
.screen-carousel::-webkit-scrollbar-track { background: transparent; }
.screen-carousel::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; }
.screen-carousel figure {
  flex: 0 0 auto;
  width: 200px;
  margin: 0;
  scroll-snap-align: start;
}
.screen-carousel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}
.screen-carousel figure:hover img,
.screen-carousel figure:focus-within img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 36px -16px rgba(42, 27, 16, 0.32);
}
.screen-carousel figcaption {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-text-muted);
  text-align: center;
}
@media (max-width: 480px) {
  .screen-carousel figure { width: 168px; }
  .carousel-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-carousel img { transition: none; }
  .screen-carousel { scroll-behavior: auto; }
}

/* ---------- Lightbox (click any case-study image to enlarge) ---------- */
img.is-zoomable {
  cursor: zoom-in;
}
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease;
  cursor: zoom-out;
}
.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { background: var(--color-accent-soft); }
body.lightbox-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay { transition: none; }
}