/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout ===== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-16);
}

/* ===== Utilities ===== */
/* Small all-caps section label / kicker — apply to <span>, <div>, <p>, etc.
   Sits above a heading or block. Matches the eyebrow treatment already used
   on .about-card__eyebrow, .callout__label, .case-study__tags, etc. */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-eyebrow);
  margin: 0 0 var(--space-3);
}

/* ===== Navbar =====
   Three-slot layout: logo (left) · slot (center) · theme toggle (right).
   The center slot holds the filter bar on desktop. On mobile, the filter
   bar is position: fixed to the bottom of the viewport, so the center
   slot is empty (no visual impact). */
.navbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6);
}
.navbar__center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar__brand {
  font-weight: 600;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
}
.navbar__brand:hover { text-decoration: none; }
.navbar__logo {
  display: block;
  height: 36px;
  width: auto;
  color: var(--color-brand);   /* paths use currentColor → adopts the theme */
  transition: opacity 0.15s ease, color 0.2s ease;
}
.navbar__brand:hover .navbar__logo { opacity: 0.85; }
.navbar__links {
  list-style: none;
  display: flex;
  gap: var(--space-6);
  padding: 0;
  margin: 0;
}
.navbar__links a {
  color: var(--color-text-muted);
}
.navbar__links a:hover { color: var(--color-text); }

/* Hide the top-nav link list (Work / About / Contact) at small breakpoints.
   The hero quick-links act as the primary navigation on mobile. The brand
   logo and theme toggle remain visible. */
@media (max-width: 640px) {
  .navbar__links { display: none; }
}

/* ===== Theme toggle (icon-only segmented control) ===== */
.theme-toggle {
  display: inline-flex;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.theme-toggle__btn:hover {
  color: var(--color-text);
}
.theme-toggle__btn.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.theme-toggle__icon {
  font-size: var(--text-base);
  line-height: 1;
}

/* Navbar layout tweak: push toggle to the right edge alongside links */
.navbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* ===== Hero ===== */
.hero {
  padding: var(--space-12) 0 var(--space-8);
}
.hero h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.02em;
}
.hero .tagline {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 36rem;
  margin: 0;
}

/* Quick links — inline, dot-separated, mchiu.co.uk style.
   Sits below the tagline as a compact contact/nav row. */
.hero-links {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.hero-links a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease;
}
.hero-links a:hover { opacity: 0.6; }
.hero-links__sep {
  color: var(--color-text-muted);
  user-select: none;
}

/* ===== Filter bar (All / About / Work) =====
   Desktop: a centered pill toggle just below the NavBar — same visual
   language as the case-study Brief/Full toggle for consistency.
   Mobile (≤640px): fixed to the bottom of the viewport as a full-width
   tab bar, where it's reachable with one thumb. */
.filter-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: fit-content;
  margin: 0;
  padding: 4px;
  background: var(--color-surface-translucent, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--color-border);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 20;
}
.filter-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 var(--space-6);    /* 24px — was var(--space-5) which doesn't exist in tokens */
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;            /* keep multi-word labels (Side Quests) on one line */
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filter-bar__btn:hover { color: var(--color-text); }
.filter-bar__btn.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Mobile: the filter bar keeps the same compact pill styling it has on
   desktop (same padding, button sizes, gap, shadow) — the only change is
   it becomes fixed near the bottom of the viewport and centered. */
@media (max-width: 640px) {
  .filter-bar {
    position: fixed;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    /* Cap width so it doesn't touch screen edges on narrow phones. */
    max-width: calc(100% - var(--space-8));
    z-index: 30;
    /* Padding, gap, button sizes, background, border, blur — all inherited
       from the base .filter-bar rule above. */
  }
  /* Leave room above the floating bar so the last card isn't covered. */
  .container {
    padding-bottom: calc(var(--space-16) + 56px + env(safe-area-inset-bottom));
  }
}

/* ===== Bento grid =====
   12-column base lets us cleanly express:
   - --wide    → spans full row (12/12)
   - --third   → 1/3 of row (4/12) — kept for legacy usage
   - --quarter → 1/4 of row (3/12) — used for the 4 link cards
   - default   → half-width (6/12) — project cards */
.bento {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(12, 1fr);
  margin-top: var(--space-8);
}
.bento-item {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
  min-height: 220px;
  grid-column: span 6;          /* default: half-width */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bento-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.bento-item--wide    { grid-column: 1 / -1; }
.bento-item--third   { grid-column: span 4; }
.bento-item--quarter { grid-column: span 3; }

@media (max-width: 960px) {
  /* Tablet: link cards drop to halves (2 per row), projects stack to halves too. */
  .bento-item--quarter { grid-column: span 6; }
  .bento-item--third   { grid-column: span 6; }
}

@media (max-width: 720px) {
  /* Mobile uses a 2-column grid so paired cards (Gmail + LinkedIn) can
     sit side-by-side. Everything else spans both columns by default. */
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-item,
  .bento-item--wide,
  .bento-item--third,
  .bento-item--quarter { grid-column: 1 / -1; }
  /* Exception: cards marked --pair-on-mobile share a row (1 col each). */
  .bento-item--pair-on-mobile { grid-column: span 1; }
}

/* ===== Resume page ===== */
.resume__header { margin-bottom: var(--space-12); }
.resume__section { margin-bottom: var(--space-12); }
.resume__section h2 { margin-bottom: var(--space-4); }
.resume__role {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}
.resume__role:last-child { border-bottom: 1px solid var(--color-border); }
.resume__role-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.resume__role-header h3 {
  margin: 0;
  font-size: var(--text-lg);
}
.resume__company { color: var(--color-text); }
.resume__dates {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.resume__bullets {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
}
.resume__bullets li {
  margin-bottom: var(--space-2);
  line-height: 1.6;
}
.resume__skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.resume__skills h3 {
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.resume__skills p { margin: 0; }
@media (max-width: 600px) {
  .resume__skills { grid-template-columns: 1fr; }
  .resume__dates  { margin-left: 0; }
}

/* ===== Sub-page wrapper (about / resume) — slight top breathing room ===== */
.page { padding-top: var(--space-6); }

/* ===== About card ===== */
.about-card__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.about-card__title {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.about-card__body {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 50rem;
}

/* ===== Project card ===== */
.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* ===== Icon-only link cards =====
   Used for About / Gmail / LinkedIn / Resume — purely visual cards with
   the icon centered, no text. The card's accessible label still describes
   it (via aria-label on the anchor) for screen readers. */
.link-card--icon-only {
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  /* Slight extra padding so the icon doesn't crowd the card edges. */
  padding: var(--space-6);
}
.link-card__center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 140px;
  position: relative;
  z-index: 1;
}
.link-card__big {
  width: clamp(56px, 35%, 96px);
  height: auto;
  display: block;
  transition: transform 0.2s ease;
}
.link-card--icon-only:hover .link-card__big {
  transform: scale(1.06);
}
.link-card__photo {
  width: clamp(72px, 45%, 128px);
  height: clamp(72px, 45%, 128px);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

/* ===== Link card icon (top-right hint) =====
   Used on cards whose click action isn't the obvious "navigate to page":
   - copy   → copy icon, swaps to checkmark on success
   - external → external-link icon (box + arrow), signalling new page
   Positioned above the blurred ::before accent blob via z-index. */
.link-card__icon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  z-index: 1;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.link-card:hover .link-card__icon {
  color: var(--color-text);
  transform: translateY(-1px);
}
.link-card.is-copied .link-card__icon {
  color: var(--color-brand);
  border-color: var(--color-brand);
}
.project-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: var(--card-accent, var(--color-accent-1));
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
}
.project-card:hover { text-decoration: none; }
.project-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.project-card__title {
  font-size: var(--text-xl);
  margin: 0;
  letter-spacing: -0.01em;
}
.project-card__summary {
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}
.project-card__cta {
  font-size: var(--text-sm);
  color: var(--color-link);
  margin-top: var(--space-2);
}

/* ===== Footer ===== */
.site-footer {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ===== Case study view toggle (Brief / Full) ===== */
/* ===== Full-screen case study layout =====
   Applies when <html data-page="case-study"> is set by case-study.js.
   Hides the regular site nav, lets the case study fill the viewport, and
   prepares the scroll context for the sticky toolbar + floating buttons. */
html[data-page="case-study"] .navbar { display: none; }
html[data-page="case-study"] body { background: var(--color-bg); }

.cs-expanded {
  min-height: 100vh;
  background: var(--color-bg);
  position: relative;
}

.cs-header {
  position: fixed;            /* stays in view as the reader scrolls */
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  padding: var(--space-6);
  z-index: 20;
  pointer-events: none;       /* let clicks through to content under it */
}
.cs-close-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
}
.cs-close-btn:hover  { background: var(--color-surface-muted); }
.cs-close-btn:active { transform: scale(0.94); }
.cs-close-btn svg    { display: block; }

/* The content column inside the expanded case study. Mirrors the original
   .container width but lives inside .cs-expanded so the header can overlay. */
.cs-expanded-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
}

/* Toolbar — Brief / Full pill. Sticky just below the close button so it
   stays in view while the reader scrolls. */
.case-study-toolbar {
  position: sticky;
  top: var(--space-6);
  z-index: 10;
  display: flex;
  width: fit-content;            /* shrink to pill size so auto margins can center it */
  margin: 0 auto var(--space-8); /* horizontally center within the block-level parent */
  gap: 2px;
  padding: 4px;
  background: var(--color-surface-translucent, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--color-border);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.case-study-toolbar__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.view-toggle__btn:hover { color: var(--color-text); }
.view-toggle__btn.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.view-toggle__lock {
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}

/* Visibility rules driven by data attribute on <html> */
[data-case-study-view="brief"] .full-only { display: none !important; }
[data-case-study-view="full"]  .brief-only { display: none !important; }
/* Note: .impact-item rules live further down in this file —
   they hide the support <p> in Brief and tighten spacing. */

/* Impact items: each impact <div class="impact-item"> contains an .eyebrow
   headline plus a support <p>. In Brief mode we keep the headlines so the
   reader can scan the wins at a glance, but hide the descriptive paragraphs
   to keep Brief view truly brief. Full mode shows everything. */
.impact-item {
  margin-bottom: var(--space-4);
}
[data-case-study-view="brief"] .impact-item p {
  display: none;
}
[data-case-study-view="brief"] .impact-item {
  margin-bottom: var(--space-3);
}
[data-case-study-view="brief"] .impact-item .eyebrow {
  margin-bottom: 0;
}

/* ===== Password modal ===== */
.lock-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.lock-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lock-modal__panel {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 420px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.lock-modal__title {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.lock-modal__body {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.lock-modal__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-base);
}
.lock-modal__input:focus {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}
.lock-modal__error {
  margin: var(--space-3) 0 0;
  color: #f87171;
  font-size: var(--text-sm);
}
.lock-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.lock-modal__btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.lock-modal__btn:hover { background: var(--color-surface-muted); }
.lock-modal__btn--primary {
  background: var(--color-link);
  border-color: var(--color-link);
  color: var(--color-bg);
  font-weight: 500;
}
.lock-modal__btn--primary:hover {
  background: var(--color-link);
  opacity: 0.85;
}

/* ===== Case study page ===== */
.case-study {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-8) 0;
}
.case-study h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}
.case-study__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-12);
}
.case-study h2 {
  font-size: var(--text-xl);
  margin: var(--space-12) 0 var(--space-3);
  letter-spacing: -0.01em;
}
.case-study p {
  margin: 0 0 var(--space-6);  /* 24px — was --space-4 (16px) for more breathing room */
  line-height: 1.65;            /* slightly looser than body's 1.55 for long-form reading */
}
.case-study li {
  line-height: 1.65;
  margin-bottom: var(--space-2);
}
.case-study__footer {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ===== Case study: richer building blocks ===== */

/* Hero image that breaks out of the text column */
.case-study__hero {
  margin: 0 0 var(--space-12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case-study__hero img,
.case-study__hero svg {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Click-to-promote: the JS adds this class so the user knows the hero is
   interactive. Click moves it to the top of the article (see case-study.js). */
.case-study__hero--clickable {
  cursor: pointer;
}
.case-study__hero--clickable:hover img,
.case-study__hero--clickable:hover svg {
  opacity: 0.92;
  transform: translateY(-2px);
}

/* Meta row: role / timeline / team — sits under the title */
.case-study__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-6);
  padding: var(--space-6) 0;
  margin: 0 0 var(--space-8);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.case-study__meta dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.case-study__meta dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Stats / impact numbers — three or four tiles in a row */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
}
.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.stat__number {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--space-1);
}
.stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Callout — for "key insight" moments */
.callout {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface-muted);
  border-left: 4px solid var(--color-link);
  border-radius: var(--radius-md);
}
.callout__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.callout p { margin: 0; }

/* Pull-quote */
.pull-quote {
  margin: var(--space-12) 0;
  padding: 0;
  font-size: var(--text-2xl);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text);
  border: none;
}
.pull-quote cite {
  display: block;
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* Figure with caption */
.case-study figure {
  margin: var(--space-8) 0;
}
.case-study figure img,
.case-study figure svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  /* No border by default. Opt in with <figure class="bordered">
     when an image benefits from a frame (e.g. light screenshots on
     a light background). See rule below. */
}

/* Opt-in border for figures that need a defined edge.
   Usage: <figure class="bordered"><img …/></figure> */
.case-study figure.bordered img,
.case-study figure.bordered svg {
  border: 1px solid var(--color-border);
}
.case-study figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* Side-by-side two-column comparison (e.g. before/after) */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
.comparison figure { margin: 0; }
@media (max-width: 600px) {
  .comparison { grid-template-columns: 1fr; }
}

/* Figure that breaks out wider than the text column */
.case-study .wide {
  margin-left: calc(50% - 50vw + var(--space-6));
  margin-right: calc(50% - 50vw + var(--space-6));
  max-width: 1100px;
  margin-inline: auto;
}
@media (max-width: 1100px) {
  .case-study .wide {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Tags row at the top of the article */
.case-study__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.case-study__tags span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   Interactive image viewer
   Used by src/enhancers/interactiveImage.js to render a zoomable, scrollable
   window over a large image. See that file for usage in HTML.
   --------------------------------------------------------------------------- */

.iv-figure {
  margin: var(--space-8) 0;
}

.iv-viewer {
  position: relative;
  width: 100%;
  height: 448px;        /* overridden inline if data-viewer-height is set */
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.iv-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Hide scrollbars — viewer feels more like an embed than a window */
  scrollbar-width: none;
}
.iv-scroll::-webkit-scrollbar { display: none; }

/* The selector below is intentionally specific (figure.iv-figure img.iv-img)
   so it beats the default `.case-study figure img { width: 100% }` rule.
   Without this, the global rule would force the image to fill its scroll
   container and the zoom math would never take visible effect. */
.case-study figure.iv-figure img.iv-img,
figure.iv-figure img.iv-img {
  display: block;
  width: auto;                /* let inline width from JS take over */
  height: auto;
  max-width: none;            /* override global img { max-width: 100% } */
  border: none;
  border-radius: 0;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.18));
  transition: width 0.3s ease, margin 0.3s ease;
}

.iv-controls {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 2;
}

.iv-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.iv-btn:hover  { background: var(--color-surface); }
.iv-btn:active { transform: scale(0.94); }
.iv-btn--disabled,
.iv-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.iv-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.iv-pill {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-bg);
  background: var(--color-eyebrow);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}

.iv-caption {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------------
   View Transitions — opt-in cross-fade between the homepage and case studies
   in browsers that support the View Transitions API. Other browsers just
   navigate normally. The card markup sets view-transition-name per card; on
   the case study page, .cs-expanded participates in the same animation.
   --------------------------------------------------------------------------- */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.35s;
  }
}

/* ---------------------------------------------------------------------------
   Scroll-to-top button
   Rendered by src/enhancers/scrollToTop.js — fades in once the reader has
   scrolled past a threshold and smooth-scrolls back to the top on click.
   --------------------------------------------------------------------------- */
.scroll-to-top {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-8);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
  z-index: 30;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
}
.scroll-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.scroll-to-top:hover  { background: var(--color-surface-muted); }
.scroll-to-top:active { transform: translateY(0) scale(0.94); }
.scroll-to-top svg    { display: block; }

/* ---------------------------------------------------------------------------
   Responsive breakpoints for the full-screen case study layout
   --------------------------------------------------------------------------- */

/* Tablet and below — tighten the page chrome */
@media (max-width: 768px) {
  .cs-expanded-inner {
    padding: var(--space-8) var(--space-4) var(--space-12);
  }
  .cs-header {
    padding: var(--space-4);
  }
  .case-study-toolbar {
    top: var(--space-4);
    margin-bottom: var(--space-6);
  }
  .scroll-to-top {
    right: var(--space-4);
    bottom: var(--space-6);
  }
}

/* Phone — smaller floating buttons + tighter spacing */
@media (max-width: 480px) {
  .cs-close-btn,
  .scroll-to-top {
    width: 36px;
    height: 36px;
  }
  .cs-expanded-inner {
    padding-top: var(--space-12); /* leave room under the close button */
  }
}