/* Self-hosted Google Fonts. Generated; safe to regenerate. */

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/playfair-display-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/playfair-display-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/playfair-display-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/playfair-display-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/source-sans-3-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/source-sans-3-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   OPTION FINAL — Hybrid Design System
   Option 4 grid layout · Option 2 editorial warmth
   ============================================================ */

/* --- Google Fonts (includes italic for pull quotes) ------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap');

/* --- Variables -------------------------------------------- */
:root {
  /* Option 2 color palette */
  --cream:        #F5F0EB;
  --white:        #FFFFFF;
  --charcoal:     #1A1A1A;
  --terracotta:   #C45D3E;
  --terra-hover:  #A84B30;
  --warm-border:  #E0D8CF;
  --subtle-border: rgba(224, 216, 207, 0.5);
  --taupe:        #8B7D6B;
  --hover-bg:     #FDFCFA;

  /* Soft terracotta surface wash — backgrounds, hover tints, glow gradients */
  --terra-tint:   rgba(196, 93, 62, 0.08);

  /* Interaction tokens */
  --glow-color:   var(--terra-tint);
  --glow-radius:  480px;

  /* Option 2 typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

  /* Option 4 layout tokens */
  --radius-sm:  12px;
  --radius-md:  16px;
  --radius-pill: 12px;

  --gap:    24px;
  --max-w:  1120px;
  --read-w: 640px;

  --nav-h: 64px;
}

/* --- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* --- Grain texture overlay -------------------------------- */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* --- Section atmosphere gradients ------------------------- */
.hero {
  background: linear-gradient(180deg, var(--cream) 0%, #F2ECE4 100%);
}

.projects {
  background: linear-gradient(180deg, #F2ECE4 0%, var(--cream) 40%, #F7F3EF 100%);
}

.footer {
  background: linear-gradient(180deg, #F7F3EF 0%, #EDE7DF 100%);
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--terracotta);
  z-index: 1001;
  width: 0%;
  transition: none;
}

/* --- Navigation (Option 4 frosted glass, warm cream) ------ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  background: rgba(245, 240, 235, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.nav.scrolled {
  background: rgba(245, 240, 235, 0.92);
  border-bottom: 1px solid var(--subtle-border);
  box-shadow: 0 1px 12px rgba(26, 26, 26, 0.05);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--charcoal);
}

/* Toggle / segmented-control nav */
.nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
  background: rgba(26, 26, 26, 0.048);
  border: 1px solid rgba(224, 216, 207, 0.8);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border-radius: calc(var(--radius-sm) - 2px);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--taupe);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.nav-pill:hover {
  color: var(--charcoal);
  background: rgba(255, 255, 255, 0.4);
}

.nav-pill.active {
  background: rgba(255, 255, 255, 0.8);
  color: var(--charcoal);
  border-color: rgba(224, 216, 207, 0.8);
  box-shadow: 0 1px 4px rgba(26, 26, 26, 0.08);
}

/* --- Layout containers ------------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.reading-width {
  max-width: var(--read-w);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   HERO — Option 2 editorial layout
   ============================================================ */
.hero {
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: 80px;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hero__greeting {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.15;
  color: var(--charcoal);
  margin-bottom: 28px;
}

.hero__greeting .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero__greeting .word.revealed {
  opacity: 1;
  transform: translateY(0);
}

.hero__role {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.7s;
}

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.9s;
}

.hero__pill {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--taupe);
  background: var(--white);
  border: 1px solid var(--warm-border);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hero__pill:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(196, 93, 62, 0.1);
}

.hero__stats {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--warm-border);
  border-radius: var(--radius-md);
}

.hero__stat-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--terracotta);
}

.hero__stat-label {
  display: block;
  font-size: 13px;
  color: var(--taupe);
  margin-top: 2px;
}

.hero__narrative {
  font-size: 19px;
  line-height: 1.75;
  color: var(--taupe);
  max-width: 500px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 1.1s;
}

.hero__photo-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 0.5s;
}

/* Trigger all hero stagger animations */
body.loaded .hero__role,
body.loaded .hero__pills,
body.loaded .hero__narrative,
body.loaded .hero__photo-wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-md);
  filter: blur(20px);
  opacity: 0;
  transition: filter 1.2s ease, opacity 1s ease;
}

/* Node-portrait variant — used when hero__photo is the animated dot-matrix
   <canvas>. The portrait paints with a transparent background so the page's
   cream shows through behind the dots; the blur reveal would smear the
   crisp dots, so we suppress it.
   See node-portrait/TUNING.md for how to tweak the animation. */
.hero__photo--node {
  display: block;
  border: 0;
  background: transparent;
  filter: none;
  /* object-fit/object-position are inert on <canvas>; the portrait script
     centers the cutout via its own cutoutScale/cutoutAnchorY tuning. */
}

.hero__photo.revealed {
  filter: blur(0);
  opacity: 1;
}

/* About-page caption under the portrait. */
.hero__photo-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.hero__photo-caption {
  margin-top: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--taupe);
  text-align: center;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 1.3s;
}
body.loaded .hero__photo-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PROJECTS GRID — Option 4 card layout
   ============================================================ */
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--charcoal);
  position: relative;
  display: inline-block;
}

.section-heading::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--terracotta), transparent);
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.section-heading.revealed::after {
  width: 100%;
}

/* --- Section divider (hero → work bridge) ----------------- */
.section-divider {
  width: min(60%, 480px);
  height: 1px;
  background: linear-gradient(90deg, var(--warm-border), rgba(196, 93, 62, 0.3), var(--warm-border));
  margin: 0 auto 48px;
}

.projects {
  padding-bottom: 100px;
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

/* --- Card base -------------------------------------------- */
.card-link {
  display: block;
  position: relative;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--warm-border);
  overflow: hidden;
  filter: drop-shadow(0 2px 4px rgba(26, 26, 26, 0.03));
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
              border-color 0.6s ease,
              filter 0.6s ease;
}

.card-link:hover {
  transform: translateY(-6px);
  border-color: rgba(196, 93, 62, 0.3);
  filter: drop-shadow(0 12px 24px rgba(26, 26, 26, 0.1));
}

/* Cursor-following radial glow — terracotta */
.card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 1;
}

.card-link:hover .card-glow,
.glow-surface:hover > .card-glow {
  opacity: 1;
}

/* Ensure glow-surface parents are positioned */
.glow-surface {
  position: relative;
  overflow: hidden;
}

/* --- Featured card (full-width, two-column) --------------- */
.card-featured {
  grid-column: 1 / -1;
}

.card-featured-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.card-featured .card-thumb {
  min-height: 280px;
  margin: 12px;
  margin-right: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.card-featured .card-thumb img,
.card-featured .card-thumb .thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.card-link:hover .card-thumb img,
.card-link:hover .card-thumb .thumb-placeholder {
  transform: scale(1.04);
}

.card-featured .card-body {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* --- Standard card (vertical) ----------------------------- */
.card-standard .card-thumb {
  aspect-ratio: 4 / 3;
  margin: 12px;
  margin-bottom: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.card-standard .card-thumb img,
.card-standard .card-thumb .thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.card-standard .card-body {
  padding: 24px 28px 28px;
  position: relative;
  z-index: 2;
}

/* --- Full-width card (two-column like featured) ----------- */
.card-fullwidth {
  grid-column: 1 / -1;
}

.card-fullwidth .card-featured-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* --- Card content elements -------------------------------- */
.card-meta {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--taupe);
  margin-bottom: 8px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--charcoal);
  transition: color 0.3s ease;
}

.card-featured .card-title {
  font-size: 26px;
}

.card-link:hover .card-title {
  color: var(--terracotta);
}

.card-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--taupe);
  margin-bottom: 16px;
}

.card-stat {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--terracotta);
  background: rgba(196, 93, 62, 0.07);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.card-arrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.card-link:hover .card-arrow {
  gap: 12px;
}

.card-arrow span {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-link:hover .card-arrow span {
  transform: translateX(6px);
}

/* --- Thumbnail placeholders ------------------------------- */
.thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-placeholder.gradient-terra {
  background: linear-gradient(135deg, var(--terracotta) 0%, #E8856B 50%, #F5C1A8 100%);
}

.thumb-placeholder.gradient-purple {
  background: linear-gradient(135deg, var(--terracotta) 0%, #D4956B 40%, #C9B99A 100%);
}

/* --- Thumb stage: UI floating on a colored backdrop -------- */
/* Used inside .card-thumb. The stage paints the backdrop and
   bottom-anchors the UI with margin on top + sides. The UI gets
   rounded top corners and a lift shadow for depth.            */
.card-thumb-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 24px 24px 0;
  overflow: hidden;
  background: rgba(196, 93, 62, 0.10);
}

.card-thumb-stage--terra {
  background: linear-gradient(135deg, var(--terracotta) 0%, #E8856B 50%, #F5C1A8 100%);
}

.card-thumb-stage--cream {
  background: linear-gradient(160deg, #F0E5DA 0%, #F5EDE3 60%, #FAF5EE 100%);
}

.card-thumb-ui {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  border: 1px solid var(--warm-border);
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow:
    0 -2px 8px rgba(26, 26, 26, 0.06),
    0 -12px 32px rgba(26, 26, 26, 0.12);
  transition: transform 0.5s ease;
}

.card-link:hover .card-thumb-ui {
  transform: translateY(-4px) scale(1.02) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 80px 0 40px;
  border-top: none;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 800px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--warm-border), var(--terracotta), var(--warm-border), transparent);
}

.footer-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--charcoal);
  max-width: 560px;
  margin-bottom: 40px;
  padding-left: 24px;
  border-left: 3px solid var(--terracotta);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.footer-quote.revealed {
  opacity: 1;
  transform: translateX(0);
}

.footer-currently {
  font-size: 15px;
  font-weight: 500;
  color: var(--taupe);
  margin-bottom: 32px;
  font-style: italic;
}

.footer-links {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
}

.footer-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--terracotta);
  transition: color 0.2s;
}

.footer-link:hover {
  color: var(--terra-hover);
}

.footer-copy {
  font-size: 13px;
  color: var(--taupe);
}

/* --- Scroll reveal ---------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stat-card stagger: when the parent .container.reveal becomes .revealed,
   the stat cards inside fade up one after another with a small lift.
   No JS needed — pure CSS triggered by the parent's class change. */
.reveal .stats-grid > .stat-card {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.revealed .stats-grid > .stat-card {
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed .stats-grid > .stat-card:nth-child(1) { transition-delay: 0.18s; }
.reveal.revealed .stats-grid > .stat-card:nth-child(2) { transition-delay: 0.32s; }
.reveal.revealed .stats-grid > .stat-card:nth-child(3) { transition-delay: 0.46s; }
.reveal.revealed .stats-grid > .stat-card:nth-child(4) { transition-delay: 0.60s; }

@media (prefers-reduced-motion: reduce) {
  .reveal .stats-grid > .stat-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Image quality indicator (dev/review mode) ----------- */
.img-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: auto;
}

.img-pill {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  pointer-events: auto;
}

.img-pill--warn {
  background: #F59E0B;
  color: #1A1A1A;
}

.img-pill--error {
  background: #EF4444;
  color: #FFFFFF;
}

.img-pill--ok {
  background: rgba(34, 197, 94, 0.9);
  color: #FFFFFF;
}

.img-reason {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--charcoal);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--warm-border);
  max-width: 220px;
  text-align: right;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.img-indicator:hover .img-reason {
  opacity: 1;
  transform: translateY(0);
}

/* --- Video embed (responsive 16:9) ----------------------- */
.video-embed {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: 12px;
  padding: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.video-embed-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 8px;
  overflow: hidden;
}

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

.video-embed figcaption {
  font-size: 14px;
  color: var(--taupe);
  text-align: center;
  margin-top: 16px;
}

/* ============================================================
   CASE STUDY STYLES
   ============================================================ */

/* --- Article header --------------------------------------- */
.article-header {
  padding-top: calc(var(--nav-h) + 72px);
  padding-bottom: 56px;
  background: var(--white);
  border-bottom: 1px solid var(--warm-border);
  margin-bottom: 0;
}

/* Staggered case study header entrance */
.article-meta {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--taupe);
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.2s;
}

.article-header h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--charcoal);
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.35s;
}

.article-subtitle {
  font-size: 19px;
  line-height: 1.6;
  color: var(--taupe);
  max-width: var(--read-w);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.5s;
}

.article-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--warm-border);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.65s;
}

/* Hero image entrance */
.article-hero-image {
  width: 100%;
  background: var(--white);
  padding: 48px 0 64px;
  border-bottom: 1px solid var(--warm-border);
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: 0.8s;
}

body.loaded .article-meta,
body.loaded .article-header h1,
body.loaded .article-subtitle,
body.loaded .article-metadata,
body.loaded .article-hero-image {
  opacity: 1;
  transform: translateY(0);
}

.article-hero-image .container {
  max-width: var(--max-w);
}

.article-hero-image img,
.article-hero-image .hero-placeholder {
  width: 100%;
  border-radius: var(--radius-md);
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.article-hero-image .hero-placeholder {
  background: linear-gradient(135deg, rgba(196,93,62,0.08) 0%, rgba(139,125,107,0.06) 100%);
  border: 2px dashed var(--warm-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--taupe);
  font-size: 15px;
  text-align: center;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.article-metadata dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--taupe);
  margin-bottom: 4px;
}

.article-metadata dd {
  font-size: 15px;
  font-weight: 400;
  color: var(--charcoal);
}

/* --- Article sections ------------------------------------- */
.article-section {
  padding: 48px 0;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

/* In-content section heading. Replaces the old .section-sticky
   banner — the left-rail .toc now provides the "where am I" cue. */
.section-heading-full {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 24px;
  line-height: 1.2;
}

.article-section h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 12px;
}

.article-section p {
  margin-bottom: 20px;
  color: var(--charcoal);
}

.article-section p:last-child {
  margin-bottom: 0;
}

/* --- Stats grid ------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: 56px 0;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius-md);
  padding: clamp(44px, 5vw, 68px) clamp(28px, 4vw, 44px);
  text-align: center;
  filter: drop-shadow(0 4px 16px rgba(26, 26, 26, 0.04));
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 16px;
  color: var(--taupe);
  line-height: 1.5;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

/* --- Timeline (chronological rail) ----------------------- */
/* Horizontal 5-column career rail with a left-to-right drawing
   spine, a brighter terracotta "draw head" trailing on reveal,
   and dots that align across columns. Falls back to a vertical
   spine under 880px. Custom props let consumers tune row heights,
   dot size, and gap without editing rules. */
.timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 28px;
  align-items: start;
  --org-row-h: 44px;
  --dot-size: 14px;
  --dot-gap: 22px;
  /* Spine sits at: org-row-h + dot-gap + dot-size/2 from top */
  --spine-y: calc(var(--org-row-h) + var(--dot-gap) + (var(--dot-size) / 2));
}

/* Base hairline spine that "draws" left to right on reveal */
.timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--dot-size) / 2);
  right: 0;
  top: var(--spine-y);
  height: 1px;
  background: var(--warm-border);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.timeline.revealed::before {
  transform: scaleX(1);
}

/* Bright terracotta "draw head" that traces the spine and fades */
.timeline.revealed::after {
  content: '';
  position: absolute;
  left: calc(var(--dot-size) / 2);
  right: 0;
  top: calc(var(--spine-y) - 0.5px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--terracotta) 60%, var(--terracotta) 100%);
  transform-origin: left center;
  animation: timeline-spine-glow 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes timeline-spine-glow {
  from { transform: scaleX(0); opacity: 1; }
  to   { transform: scaleX(1); opacity: 0; }
}

.timeline__entry {
  position: relative;
  display: grid;
  grid-template-rows: var(--org-row-h) var(--dot-gap) var(--dot-size) auto;
  align-items: start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline.revealed .timeline__entry {
  opacity: 1;
  transform: translateY(0);
}

/* Cascade entries left -> right, behind the drawing spine */
.timeline.revealed .timeline__entry:nth-child(1) { transition-delay: 0.45s; }
.timeline.revealed .timeline__entry:nth-child(2) { transition-delay: 0.65s; }
.timeline.revealed .timeline__entry:nth-child(3) { transition-delay: 0.85s; }
.timeline.revealed .timeline__entry:nth-child(4) { transition-delay: 1.05s; }
.timeline.revealed .timeline__entry:nth-child(5) { transition-delay: 1.25s; }

.timeline__dot {
  grid-row: 3;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 5px var(--cream);
  justify-self: start;
}

.timeline__org {
  grid-row: 1;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  align-self: end;
}

.timeline__role {
  grid-row: 4;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 18px 0 0;
  max-width: 22ch;
}

/* Stack vertically when the rail gets cramped */
@media (max-width: 880px) {
  .timeline {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding-left: 32px;
    --spine-y: 0;
  }
  .timeline::before {
    left: 5px;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 1px;
    height: auto;
    transform-origin: top center;
    transform: scaleY(0);
    transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .timeline.revealed::before { transform: scaleY(1); }
  .timeline.revealed::after {
    left: 5px;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--terracotta), transparent);
    transform-origin: top center;
    animation: timeline-spine-glow-v 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
  @keyframes timeline-spine-glow-v {
    from { transform: scaleY(0); opacity: 1; }
    to   { transform: scaleY(1); opacity: 0; }
  }
  .timeline__entry {
    display: block;
    padding: 0 0 36px;
  }
  .timeline__entry:last-child { padding-bottom: 0; }
  .timeline__dot {
    position: absolute;
    left: -32px;
    top: 10px;
  }
  .timeline__org { margin-bottom: 4px; }
  .timeline__role { margin-top: 4px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline::before,
  .timeline.revealed::after { transition: none; animation: none; transform: scaleX(1); opacity: 0; }
  .timeline__entry { opacity: 1; transform: none; transition: none; }
}

/* --- Pull quotes (Option 2 italic Playfair) --------------- */
.pull-quote {
  margin: 24px 0;
  padding: 20px 0 20px 28px;
  border-left: 3px solid var(--terracotta);
}

.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 200;
  line-height: 1.6;
  color: var(--charcoal);
  margin-bottom: 12px !important;
}

.pull-quote cite {
  font-style: normal;
  font-size: 14px;
  color: var(--taupe);
}

/* Card variant — promotes a pull quote to a standalone, elevated
   surface. Use when the quote IS the section content (e.g. About
   page testimonials), not in-line punctuation within an article.
   Compound selector keeps specificity above any page-scoped overrides. */
.pull-quote.pull-quote--card {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius-md);
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3.5vw, 44px);
  margin: 0 0 24px;
  filter: drop-shadow(0 4px 16px rgba(26, 26, 26, 0.04));
}

.pull-quote.pull-quote--card:last-child { margin-bottom: 0; }

/* --- Numbered principles ---------------------------------- */
.principles-list {
  counter-reset: principle;
  margin: 32px 0;
}

.principle-item {
  counter-increment: principle;
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  align-items: flex-start;
}

.principle-item::before {
  content: counter(principle);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--terracotta);
  background: rgba(196, 93, 62, 0.08);
  border-radius: 50%;
}

.principle-item div h4 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.principle-item div p {
  font-size: 15px;
  color: var(--taupe);
  margin-bottom: 0;
}

/* --- Image placeholder ------------------------------------ */
.image-placeholder {
  border: 2px dashed var(--warm-border);
  border-radius: var(--radius-md);
  padding: 60px 24px;
  text-align: center;
  color: var(--taupe);
  font-size: 14px;
  margin: 32px 0;
  background: rgba(245, 240, 235, 0.5);
  position: relative;
  overflow: hidden;
}

/* --- Browser frame --------------------------------------- */
/* Treatment D from the design system: a warm minimal browser chrome
   for screenshots of web UI. Documented in design-system.html. */
.browser-frame {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(26, 26, 26, 0.08);
}

.browser-bar {
  background: #F5F0EB;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--warm-border);
}

.browser-bar__dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-bar__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E0D8CF;
}

.browser-bar__url {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12px;
  color: var(--taupe);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-frame__content {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Diagrams & flows ------------------------------------- */
/* Reusable primitives for case-study diagrams and flow charts.
   Visual examples and usage guidance live in design-system.html under
   "Diagrams & Process Artifacts".

   Convention (matches Treatment A in the image system):
   - Cream node backgrounds (#F5F0EB), warm-border strokes
   - Charcoal labels in Source Sans 3 600 / 13-14px
   - Terracotta accents (arrows, current-state indicators)
   - Display font (Playfair) for large numerical metrics only
   - Contained in a white card surface (.diagram__surface)
   - Optional caption below in taupe / 13px

   Building blocks:
   - .diagram               — figure wrapper (margin only, no visuals)
   - .diagram__surface      — white card container; opt out for raw layouts
   - .diagram__caption      — figcaption (taupe, centered)
   - .flow / .flow__node / .flow__arrow
                            — horizontal sequence with arrow connectors

   Pair with `.reveal` on the wrapper to get the established scroll-in
   behavior.
   ---------------------------------------------------------- */

.diagram {
  margin: 32px 0;
}

.diagram__surface {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius-md);
  padding: clamp(28px, 4vw, 48px);
}

.diagram__caption {
  font-size: 13px;
  color: var(--taupe);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* --- Flow primitive: a sequence of steps ---------------- */
.flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.flow--vertical {
  flex-direction: column;
  align-items: stretch;
}

.flow__node {
  background: var(--cream);
  border: 1px solid var(--warm-border);
  border-radius: 8px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.3;
  text-align: center;
}

.flow__node--accent {
  border-color: var(--terracotta);
  color: var(--terracotta);
}

/* Branching outcome — node with a row of small chips beneath the label */
.flow__node--outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.flow__outcomes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow__outcomes li {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.4;
}

.flow__arrow {
  color: var(--terracotta);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.flow--vertical .flow__arrow {
  transform: rotate(90deg);
  align-self: center;
}

/* --- Behind the Work card --------------------------------- */
.reflection-card {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-left: 4px solid var(--terracotta);
  border-radius: var(--radius-md);
  padding: 36px;
  margin: 48px 0;
}

.reflection-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 16px;
}

.reflection-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--charcoal);
}

/* --- Case-study pager (next / back / previous) ------------ */
.case-pager {
  margin-top: 48px;
  padding: 48px 0 96px;
  border-top: 1px solid var(--warm-border);
  background: linear-gradient(180deg, transparent 0%, rgba(196, 93, 62, 0.02) 100%);
}

.case-pager__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: stretch;
}

.case-pager__card {
  display: grid;
  grid-template-columns: 1fr 88px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "direction thumb"
    "title     thumb"
    "meta      thumb";
  column-gap: 20px;
  row-gap: 6px;
  align-items: center;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-align: left;
  color: var(--charcoal);
}

.case-pager__card--next {
  grid-template-columns: 88px 1fr;
  grid-template-areas:
    "thumb direction"
    "thumb title"
    "thumb meta";
  text-align: right;
}

.case-pager__card:hover,
.case-pager__card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--terracotta);
  box-shadow:
    0 4px 12px rgba(26, 26, 26, 0.04),
    0 16px 32px rgba(196, 93, 62, 0.08);
}

.case-pager__direction {
  grid-area: direction;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terracotta);
}

.case-pager__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.2;
  margin: 0;
}

.case-pager__meta {
  grid-area: meta;
  font-size: 13px;
  color: var(--taupe);
  margin: 0;
}

.case-pager__thumb {
  grid-area: thumb;
  display: block;
  width: 88px;
  height: 88px;
  border-radius: calc(var(--radius-sm) - 4px);
  overflow: hidden;
  background: var(--cream);
  align-self: center;
}

.case-pager__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.case-pager__thumb.gradient-terra {
  background: linear-gradient(135deg, var(--terracotta) 0%, #E8856B 50%, #F5C1A8 100%);
}

.case-pager__thumb.gradient-purple {
  background: linear-gradient(135deg, var(--terracotta) 0%, #D4956B 40%, #C9B99A 100%);
}

.case-pager__back {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--terracotta);
  background: transparent;
  border: 1px solid var(--warm-border);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.case-pager__back:hover,
.case-pager__back:focus-visible {
  background: var(--white);
  border-color: var(--terracotta);
  color: var(--terra-hover);
}

@media (max-width: 900px) {
  .case-pager__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .case-pager__back {
    order: 3;
    justify-self: center;
  }

  .case-pager__card--next { order: 1; }
  .case-pager__card--prev { order: 2; }
}

/* --- Floating "Next project" nudge ------------------------- */
/* Two-state floating CTA in the bottom-right:
   - Pill state (after ~15% scroll, past the Results/opening section):
     compact dark pill with just label + title + arrow.
   - Expanded card state (after ~70% scroll): morphs into a white
     card with thumbnail and meta — a richer preview as the reader
     gets close to the end.
   Hides entirely once the full .case-pager scrolls into view. */
.next-nudge {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 10px 24px 10px 30px;
  background: var(--charcoal);
  color: var(--white);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  max-width: 320px;
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(26, 26, 26, 0.18),
    0 2px 6px rgba(26, 26, 26, 0.08);
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease,
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    border-radius 0.4s ease,
    padding 0.4s ease,
    max-width 0.4s ease,
    box-shadow 0.3s ease;
}

.next-nudge.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.next-nudge:hover,
.next-nudge:focus-visible {
  background: var(--terracotta);
  color: var(--white);
  outline: none;
}

.next-nudge__thumb {
  display: block;
  width: 0;
  height: 56px;
  margin-left: -18px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0;
  background: var(--cream);
  transition:
    width 0.4s ease,
    opacity 0.3s ease,
    margin-left 0.4s ease;
}

.next-nudge__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.next-nudge__thumb.gradient-terra {
  background: linear-gradient(135deg, var(--terracotta) 0%, #E8856B 50%, #F5C1A8 100%);
}

.next-nudge__thumb.gradient-purple {
  background: linear-gradient(135deg, var(--terracotta) 0%, #D4956B 40%, #C9B99A 100%);
}

.next-nudge__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.next-nudge__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  transition: color 0.4s ease;
}

.next-nudge__title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.next-nudge__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0);
  margin-top: 2px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    color 0.4s ease;
}

.next-nudge__arrow {
  font-weight: 600;
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.next-nudge:hover .next-nudge__arrow,
.next-nudge:focus-visible .next-nudge__arrow {
  transform: translateX(3px);
}

/* Expanded card state */
.next-nudge.is-expanded {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--warm-border);
  border-radius: var(--radius-sm);
  padding: 10px 24px 10px 10px;
  max-width: 380px;
}

.next-nudge.is-expanded:hover,
.next-nudge.is-expanded:focus-visible {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--terracotta);
  box-shadow:
    0 12px 32px rgba(26, 26, 26, 0.16),
    0 4px 12px rgba(196, 93, 62, 0.12);
}

.next-nudge.is-expanded .next-nudge__thumb {
  width: 56px;
  margin-left: 0;
  opacity: 1;
}

.next-nudge.is-expanded .next-nudge__label {
  color: var(--terracotta);
}

.next-nudge.is-expanded .next-nudge__meta {
  max-height: 20px;
  opacity: 1;
  color: var(--taupe);
}

@media (max-width: 600px) {
  .next-nudge {
    left: 16px;
    right: 16px;
    bottom: 16px;
    justify-content: center;
    padding: 10px 18px;
    max-width: none;
  }

  .next-nudge.is-expanded {
    justify-content: flex-start;
  }
}

/* --- Left-rail Table of Contents -------------------------- */
/* Anchored to the gutter outside the 1120px article container so it
   never crashes into wide content (stats grids, image rows, hero
   images). Math: container max-w + TOC width + 2×16px gaps ≈ 1520px,
   so we hide below that. Faded in via .toc--visible once the article
   header has scrolled by, so the H1 stays uncluttered at the top. */
.toc {
  position: fixed;
  top: calc(var(--nav-h) + 40px);
  left: max(16px, calc(50% - var(--max-w) / 2 - 196px));
  z-index: 40;
  width: 180px;
  max-height: calc(100vh - var(--nav-h) - 80px);
  overflow-y: auto;
  padding: 4px 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.toc.toc--visible {
  opacity: 1;
  pointer-events: auto;
}

.toc__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--taupe);
  margin: 0 0 12px 16px;
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--warm-border);
}

.toc__list li {
  margin: 0;
}

.toc__link {
  position: relative;
  display: block;
  padding: 6px 12px 6px 16px;
  margin-left: -1px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--taupe);
  border-left: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.toc__link:hover,
.toc__link:focus-visible {
  color: var(--charcoal);
  outline: none;
}

.toc__link[aria-current="location"] {
  color: var(--terracotta);
  font-weight: 600;
  border-left-color: var(--terracotta);
  transform: translateX(2px);
}

@media (max-width: 1520px) {
  .toc {
    display: none;
  }
}

/* --- Bottom nav (legacy, retained for any old pages) ------ */
.bottom-nav {
  display: flex;
  justify-content: space-between;
  padding: 48px 0 80px;
  border-top: 1px solid var(--warm-border);
  margin-top: 48px;
}

.bottom-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--terracotta);
  transition: color 0.2s;
}

.bottom-nav a:hover {
  color: var(--terra-hover);
}

/* --- Also worked on cards --------------------------------- */
.also-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: 32px 0;
}

.also-card {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius-md);
  padding: 24px;
}

.also-card h4 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.also-card p {
  font-size: 14px;
  color: var(--taupe);
  margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero__photo-fig {
    max-width: 360px;
    margin: 0 auto;
  }

  .hero__photo-wrap {
    max-width: 360px;
    margin: 0 auto;
  }

  .hero {
    min-height: auto;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .card-featured-inner,
  .card-fullwidth .card-featured-inner {
    grid-template-columns: 1fr;
  }

  .card-featured .card-thumb {
    margin-right: 12px;
  }

  .card-featured .card-body {
    padding: 24px 28px 28px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .also-grid {
    grid-template-columns: 1fr;
  }

  .article-metadata {
    gap: 20px;
  }
}

@media (max-width: 600px) {
  :root {
    --nav-h: 56px;
  }

  body {
    font-size: 16px;
  }

  .nav-links {
    gap: 2px;
    padding: 2px;
  }

  .nav-pill {
    padding: 5px 12px;
    font-size: 13px;
  }

  .hero {
    padding-top: calc(var(--nav-h) + 48px);
    padding-bottom: 48px;
  }

  .hero__greeting {
    font-size: 36px;
  }

  .hero__narrative {
    font-size: 17px;
  }

  .hero__stats {
    gap: 20px;
    flex-wrap: wrap;
  }

  .hero__stat-number {
    font-size: 22px;
  }

  .container {
    padding: 0 20px;
  }

  .section-heading {
    font-size: 26px;
    margin-bottom: 28px;
  }

  .card-featured .card-title {
    font-size: 22px;
  }

  .footer {
    padding: 48px 0 32px;
  }

  .footer-quote {
    font-size: 20px;
  }

  .pull-quote p {
    font-size: 20px;
  }

  .bottom-nav {
    flex-direction: column;
    gap: 16px;
  }

  .case-pager {
    padding: 32px 0 64px;
  }

  .case-pager__card {
    padding: 18px;
    column-gap: 14px;
    grid-template-columns: 1fr 64px;
  }

  .case-pager__card--next {
    grid-template-columns: 64px 1fr;
  }

  .case-pager__thumb {
    width: 64px;
    height: 64px;
  }

  .case-pager__title {
    font-size: 19px;
  }
}

/* --- Skip link (a11y) ------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--charcoal);
  color: var(--white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  z-index: 1100;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 8px;
}

/* --- Focus styles ----------------------------------------- */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* --- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }

  .reveal { opacity: 1; transform: none; }
  .footer-quote { opacity: 1; transform: none; }
  .hero__photo { filter: none; opacity: 1; }
  .hero__greeting .word { opacity: 1; transform: none; }
  .hero__role { opacity: 1; transform: none; }
  .hero__pills { opacity: 1; transform: none; }
  .hero__narrative { opacity: 1; transform: none; }
  .hero__photo-wrap { opacity: 1; transform: none; }
  .article-meta { opacity: 1; transform: none; }
  .article-header h1 { opacity: 1; transform: none; }
  .article-subtitle { opacity: 1; transform: none; }
  .article-metadata { opacity: 1; transform: none; }
  .article-hero-image { opacity: 1; transform: none; }
  .toc__link { transform: none !important; }
  .case-pager__card { transform: none !important; }
  .next-nudge {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* ============================================================
   HOMEPAGE WORK INDEX (May 2026 direction)
   ----------------------------------------------------------
   The canonical Work section pattern: a vertical numbered index
   with editorial typography, image right, lifted on hover with
   focus-dim on siblings, plus an ink bleed and growing number.
   Activated via body.home-index on index.html only.
   ============================================================ */

body.home-index .projects {
  padding-top: 64px;
  padding-bottom: 96px;
}

body.home-index .projects-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

body.home-index .card-featured,
body.home-index .card-fullwidth,
body.home-index .card-standard {
  grid-column: 1 / -1;
}

/* The row */
body.home-index .card-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-areas: "body thumb";
  gap: 56px;
  padding: 56px 40px;
  align-items: start;
  border-radius: 0;
  border: 1px solid transparent;
  border-top: 1px solid var(--warm-border);
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: translateY(0);
  overflow: visible;
  transition:
    background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
body.home-index .projects-grid > .card-link:last-child {
  border-bottom: 1px solid var(--warm-border);
}

/* Flatten featured wrapper so children participate in the outer grid */
body.home-index .card-featured-inner { display: contents; }
body.home-index .card-glow { display: none; }

/* Number marker — anchored to the eyebrow line's vertical center */
body.home-index .card-link::before {
  content: attr(data-num);
  position: absolute;
  top: 66px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  color: var(--taupe);
  letter-spacing: 0.04em;
  line-height: 1;
  transform: translateY(-50%);
  transition: color 0.18s, font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Body column — left, top-aligned */
body.home-index .card-body {
  grid-area: body;
  padding: 0 0 0 32px;
  max-width: 56ch;
  display: block;
  align-self: start;
}
body.home-index .card-meta {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 14px;
}
body.home-index .card-title {
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
body.home-index .card-desc {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 14px;
}
body.home-index .card-stat {
  font-size: 13px;
  margin-bottom: 18px;
}
body.home-index .card-arrow {
  margin-top: 0;
}

/* Image column — right, top-aligned, 16:10 to match the text height */
body.home-index .card-thumb {
  grid-area: thumb;
  margin: 0;
  aspect-ratio: 16 / 10;
  min-height: 0;
  max-height: none;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-mid, #F2ECE4);
  box-shadow:
    0 1px 2px rgba(26,26,26,0.04),
    0 12px 32px -8px rgba(26,26,26,0.10);
  align-self: start;
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
body.home-index .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Hide dev-only image indicators */
body.home-index .img-indicator { display: none; }

/* ============================================================
   HOVER STACK (the May 2026 chosen combo)
   1. Whisper lift — row rises 2px with a soft shadow
   2. Focus dim others — un-hovered rows fade to 45%
   3. Ink bleed — accent gradient washes in from the left
   4. Number grows — 01 scales 13→28px and turns terracotta
   ============================================================ */

/* 1. Whisper lift */
body.home-index .card-link:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(26,26,26,0.04),
    0 12px 28px -10px rgba(26,26,26,0.10);
  z-index: 2;
}

/* 2. Focus dim others */
body.home-index .projects-grid:hover .card-link:not(:hover) {
  opacity: 0.45;
}

/* 3. Ink bleed (accent-tinted gradient from the left) */
body.home-index .card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(196, 93, 62, 0.07) 0%,
    rgba(196, 93, 62, 0.02) 30%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
  z-index: 0;
  border-radius: 6px;
}
body.home-index .card-link:hover::after { opacity: 1; }

/* 4. Number grows (centered on eyebrow line via translateY(-50%)) */
body.home-index .card-link:hover::before {
  font-size: 28px;
  color: var(--terracotta);
}

/* Responsive: stack at narrow widths */
@media (max-width: 880px) {
  body.home-index .card-link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "thumb" "body";
    gap: 24px;
    padding: 48px 16px;
  }
  body.home-index .card-link::before {
    position: static;
    display: block;
    margin-bottom: 12px;
    transform: none;
  }
  body.home-index .card-body { padding-left: 0; }
  body.home-index .card-link:hover::before {
    font-size: 22px; /* slightly smaller bump on mobile */
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-index .card-link,
  body.home-index .card-link:hover,
  body.home-index .card-link::after,
  body.home-index .card-link::before {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   PRODUCTION: hide development image indicators
   ----------------------------------------------------------
   Markup is preserved across sub-pages so it's easy to swap
   in real screenshots later. We just don't surface the
   "Screenshot Needed" / "Not Optimal" warnings to viewers.
   ============================================================ */
.img-indicator,
.card-thumb > .img-pill--warn,
.card-thumb .img-pill--warn,
.case-image .img-pill--warn,
img + .img-pill--warn,
.img-pill--warn[style*="inline-block"] {
  display: none !important;
}

/* ============================================================
   ANNOTATED FIGURE — clean UI screenshot with side-mounted
   numbered annotations. Used in case studies where annotations
   would otherwise overlap and obscure the artifact.

   Anchors:
   - .annotated-figure                 — figure wrapper (grid: image + legend)
   - .annotated-figure__image-wrap     — relative position container for hotspots
   - .annotated-figure__image          — the screenshot itself
   - .annotated-figure__hotspot        — small numbered circle overlaid on image
   - .annotated-figure__legend         — ordered list, right column
   - .annotated-figure__item           — single legend entry
   - .annotated-figure__num            — numbered circle in legend (matches hotspot)
   - .annotated-figure__body           — text container
   - .annotated-figure__line           — one labeled line (Problem / Solution / etc.)
   - .annotated-figure__label          — the small uppercase label
   ============================================================ */
.annotated-figure {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin: 32px 0;
}

.annotated-figure__image-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--warm-border);
}

.annotated-figure__image {
  display: block;
  width: 100%;
  height: auto;
}

.annotated-figure__hotspot {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(255, 255, 255, 0.92);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.annotated-figure__legend {
  list-style: none;
  margin: 0;
  padding: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.annotated-figure__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}

.annotated-figure__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.annotated-figure__body {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--charcoal);
}

.annotated-figure__line {
  display: block;
  margin-bottom: 10px;
}

.annotated-figure__line:last-child {
  margin-bottom: 0;
}

.annotated-figure__label {
  display: block;
  color: var(--taupe);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

@media (max-width: 900px) {
  .annotated-figure {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ============================================================
   FIGURE MAGNIFIER — lift-on-hover variant of .annotated-figure
   ------------------------------------------------------------
   Reusable for any annotated screenshot. Each call-out region
   gets a `.lift-overlay` div positioned with CSS vars
   (percentages of the image dimensions). On hover, the matching
   card "lifts" off the dimmed base image with shadow + scale.

   Template:
     <figure class="annotated-figure figure-magnifier"
             data-magnifier
             style="--lift-img: url('images/foo.png');">
       <div class="annotated-figure__image-wrap">
         <img class="annotated-figure__image" src="images/foo.png" alt="…">
         <div class="lift-overlay" data-target="1"
              style="--lx: 3.18; --ly: 5.28; --wx: 54.84; --wy: 36.67;"></div>
         <div class="lift-overlay" data-target="2"
              style="--lx: 60.16; --ly: 5.28; --wx: 27.50; --wy: 36.67;"></div>
         <!-- optional .annotated-figure__hotspot[data-target="N"] badges -->
       </div>
       <ol class="annotated-figure__legend">
         <li class="annotated-figure__item" data-target="1">…</li>
         <li class="annotated-figure__item" data-target="2">…</li>
       </ol>
     </figure>

   Coords (--lx/--ly/--wx/--wy) are UNITLESS percentages of the
   image's intrinsic dimensions. Get them from Figma frame x/y/w/h
   divided by the parent frame's width/height, then × 100.

   Wire up at page load with: initFigureMagnifiers();
   (defined in /js/figure-magnifier.js)

   By default cards scale to 1.30 on lift. If a card is wide and
   crowds neighbors, override with --lift-scale on that overlay:
     <div class="lift-overlay" data-target="1" style="…; --lift-scale: 1.15;"></div>

   Transform-origin defaults to center; override per overlay with
   --lift-origin if a card needs to anchor (e.g. 95% 50% to grow
   leftward, 50% 95% to grow upward).

   Crisp-zoom mode — when the figure shows a lot of surrounding
   context (e.g. a full-screen dashboard), individual call-outs are
   small and zooming the background image gets blurry. Instead,
   export each card as its own high-res PNG and use the
   `.lift-overlay--card` modifier with `--lift-card-img`:

     <div class="lift-overlay lift-overlay--card" data-target="1"
          style="--lift-card-img: url('images/card1.png');
                 --lx: 17.14; --ly: 32.16; --wx: 80.31; --wy: 27.87;
                 --lift-scale: 1.15; --lo-x: 0.50; --lo-y: 0.50;"></div>

   The overlay then renders the card image stretched (100% 100%)
   over its bounds, so the source PNG's resolution determines
   sharpness at any --lift-scale. Pair this with `--lift-img` on
   the figure if you want a fallback for overlays that don't opt
   into the card image override.

   Layout variants:
     - default                              — image left, legend right (2fr/1fr)
     - .figure-magnifier--reverse           — legend left, image right (1fr/2fr)
   Alternate consecutive figures to break visual monotony.
   ============================================================ */
.figure-magnifier .annotated-figure__image-wrap {
  overflow: visible;
  box-shadow: none;
  position: relative;
}

/* Reverse layout — legend on the LEFT, image on the RIGHT.
   Alternate this across consecutive figures to break monotony. */
.figure-magnifier.figure-magnifier--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.figure-magnifier.figure-magnifier--reverse .annotated-figure__image-wrap {
  order: 2;
}
.figure-magnifier.figure-magnifier--reverse .annotated-figure__legend {
  order: 1;
}
@media (max-width: 900px) {
  .figure-magnifier.figure-magnifier--reverse .annotated-figure__image-wrap,
  .figure-magnifier.figure-magnifier--reverse .annotated-figure__legend {
    order: initial;
  }
}
.figure-magnifier .annotated-figure__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 25, 18, 0);
  border-radius: var(--radius-md);
  pointer-events: none;
  z-index: 6;
  transition: background-color 260ms ease;
}
.figure-magnifier[class*="zoom-"] .annotated-figure__image-wrap::after {
  background: rgba(40, 25, 18, 0.42);
}
.figure-magnifier .annotated-figure__image {
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 var(--warm-border);
  position: relative;
  z-index: 1;
}
.figure-magnifier .annotated-figure__hotspot {
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 5;
}
.figure-magnifier .annotated-figure__item {
  cursor: pointer;
  padding: 10px 12px;
  margin: -10px -12px;
  border-radius: 8px;
  transition: background-color 200ms ease, opacity 200ms ease,
              transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 200ms ease;
}
.figure-magnifier .annotated-figure__item:hover {
  background: rgba(193, 102, 75, 0.06);
  transform: translateY(-2px);
}

/* Lift overlay — a copy of one card region; invisible until activated.
   The active state grows the box via width/height (not transform: scale)
   so the browser re-rasterizes the background image at the new size.
   transform: scale would just upscale a low-res GPU bitmap → pixelation. */
.lift-overlay {
  position: absolute;
  left: calc(var(--lx) * 1% - var(--lift-pad, 0px));
  top: calc(var(--ly) * 1% - var(--lift-pad, 0px));
  width: calc(var(--wx) * 1% + 2 * var(--lift-pad, 0px));
  height: calc(var(--wy) * 1% + 2 * var(--lift-pad, 0px));
  padding: var(--lift-pad, 0px);
  box-sizing: border-box;
  background-image: var(--lift-img);
  background-origin: content-box;
  background-clip: padding-box;
  background-size: calc(10000% / var(--wx)) calc(10000% / var(--wy));
  background-position:
    calc(var(--lx) / (100 - var(--wx)) * 100%)
    calc(var(--ly) / (100 - var(--wy)) * 100%);
  background-repeat: no-repeat;
  border-radius: 8px;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition:
    left 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    top 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 220ms ease,
    box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 10;
}

/* Crisp-zoom variant — overlay paints a pre-cropped high-res card
   image at native resolution, so the lifted state stays sharp at any
   --lift-scale instead of upscaling pixels from the background image.
   Opaque white background fills any transparent areas of the card
   PNG so the dimmed dashboard underneath doesn't ghost through.
   --lift-pad: 14px adds breathing room around the card content so
   text/graphs don't touch the lifted card's edges. */
.lift-overlay.lift-overlay--card {
  --lift-pad: 14px;
  background-image: var(--lift-card-img);
  background-size: 100% 100%;
  background-position: 0 0;
  background-color: #ffffff;
  background-origin: content-box;
  background-clip: padding-box;
  border-radius: 6px;
}

/* Faux browser chrome for figures showing in-product screens.
   Wraps an image-wrap with a top "address bar" + viewport area whose
   aspect ratio crops out an embedded browser frame from the source PNG.
   Border lives on the outer frame; viewport stays overflow:visible so
   .lift-overlay cards can rise above the frame without being clipped. */
.figure-browser {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(26, 26, 26, 0.08);
}
.figure-browser__bar {
  background: #F5F0EB;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--warm-border);
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}
.figure-browser__bar .browser-bar__url {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12px;
  color: var(--taupe);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.figure-browser__viewport {
  position: relative;
  aspect-ratio: var(--browser-aspect, 1920 / 1226);
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}
.figure-browser__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 100%;
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}
.figure-magnifier .figure-browser {
  position: relative;
}
.figure-magnifier .figure-browser__bg {
  box-shadow: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Active state — card grows in CSS dimensions (re-rasterized crisp)
   and lifts via translateY. Origin emulated by shifting left/top so
   the anchor point stays put as width/height grow. */
.figure-magnifier.zoom-1 .lift-overlay[data-target="1"],
.figure-magnifier.zoom-2 .lift-overlay[data-target="2"],
.figure-magnifier.zoom-3 .lift-overlay[data-target="3"],
.figure-magnifier.zoom-4 .lift-overlay[data-target="4"],
.figure-magnifier.zoom-5 .lift-overlay[data-target="5"],
.figure-magnifier.zoom-6 .lift-overlay[data-target="6"] {
  opacity: 1;
  pointer-events: auto;
  width: calc(var(--wx) * var(--lift-scale, 1.30) * 1% + 2 * var(--lift-pad, 0px));
  height: calc(var(--wy) * var(--lift-scale, 1.30) * 1% + 2 * var(--lift-pad, 0px));
  left: calc((var(--lx) - (var(--lift-scale, 1.30) - 1) * var(--wx) * var(--lo-x, 0.5)) * 1% - var(--lift-pad, 0px));
  top: calc((var(--ly) - (var(--lift-scale, 1.30) - 1) * var(--wy) * var(--lo-y, 0.5)) * 1% - var(--lift-pad, 0px));
  transform: translateY(var(--lift-offset, -22px));
  box-shadow:
    0 36px 72px -18px rgba(40, 25, 18, 0.36),
    0 16px 32px -10px rgba(40, 25, 18, 0.22),
    0 0 0 1px rgba(40, 25, 18, 0.04);
}

/* Hide the matching hotspot while its card is lifted */
.figure-magnifier[class*="zoom-"] .annotated-figure__hotspot { opacity: 0.7; }
.figure-magnifier.zoom-1 .annotated-figure__hotspot[data-target="1"],
.figure-magnifier.zoom-2 .annotated-figure__hotspot[data-target="2"],
.figure-magnifier.zoom-3 .annotated-figure__hotspot[data-target="3"],
.figure-magnifier.zoom-4 .annotated-figure__hotspot[data-target="4"],
.figure-magnifier.zoom-5 .annotated-figure__hotspot[data-target="5"],
.figure-magnifier.zoom-6 .annotated-figure__hotspot[data-target="6"] { opacity: 0; }

/* Dim non-active legend items, highlight the active one */
.figure-magnifier[class*="zoom-"] .annotated-figure__item { opacity: 0.45; }
.figure-magnifier[class*="zoom-"] .annotated-figure__item.is-active {
  opacity: 1;
  background: rgba(193, 102, 75, 0.08);
  transform: translateY(-2px);
}

/* Hint pulse — subtle "these are hoverable" affordance, no dim wash */
.lift-overlay.is-hint {
  opacity: 1;
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 14px 28px -10px rgba(40, 25, 18, 0.20),
    0 6px 12px -4px rgba(40, 25, 18, 0.12);
}
.figure-magnifier[class*="zoom-"] .lift-overlay.is-hint {
  opacity: 0;
  transform: none;
  box-shadow: none;
}

.figure-magnifier__hint {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12px;
  color: var(--taupe);
  margin: 12px 0 0;
  text-align: center;
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .lift-overlay,
  .figure-magnifier .annotated-figure__image,
  .figure-magnifier .annotated-figure__item,
  .figure-magnifier .annotated-figure__hotspot,
  .flow-tag {
    transition: none;
  }
}

/* ============================================================
   FIGURE MAGNIFIER --solo — single-column variant (no side legend).
   Use for flow diagrams or any figure where the visual fills the
   full width and per-region annotations float on the chart itself.
   ============================================================ */
.figure-magnifier.figure-magnifier--solo {
  grid-template-columns: minmax(0, 1fr);
}
.figure-magnifier.figure-magnifier--solo .annotated-figure__image-wrap {
  order: initial;
}

/* ============================================================
   FIGURE FLOW — annotated flow / journey diagram.
   ------------------------------------------------------------
   Underlying chart fills the figure. Five (or more) hover regions
   sit invisibly on top of the chart. On hover, the region zooms
   in crisp (.lift-overlay--card) AND a small annotation tag
   (.flow-tag) fades in nearby with phase number, day marker,
   title, and one-line description.

   No numbered hotspot dots, no side legend — the chart is clean
   at rest, and the interaction reveals the storytelling layer.

   Template:
     <figure class="annotated-figure figure-magnifier
                    figure-magnifier--solo figure-flow"
             data-magnifier>
       <div class="annotated-figure__image-wrap figure-flow__chart">
         <img class="annotated-figure__image" src="…base.png" alt="…">
         <div class="lift-overlay lift-overlay--card" data-target="N"
              style="--lift-card-img: url('…phaseN.png');
                     --lx --ly --wx --wy --lift-scale --lo-x --lo-y"></div>
         <div class="flow-tag" data-tag="N" style="--tx: 50%; --ty: 50%;">
           <span class="flow-tag__meta">
             <span class="flow-tag__num">0N</span> Day X–Y
           </span>
           <h4 class="flow-tag__title">…</h4>
           <p class="flow-tag__desc">…</p>
         </div>
       </div>
       <figcaption class="diagram__caption">…</figcaption>
     </figure>

   --tx / --ty position the tag's top-left corner relative to the
   chart (percent of chart dimensions). Hand-tune each tag so it
   sits in a clear zone of the lifted state (opposite the direction
   the card grows). Tags default ~280px max-width; mobile shrinks.
   ============================================================ */
.figure-flow .figure-flow__chart {
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 1px 0 var(--warm-border);
  overflow: visible;
}
.figure-flow .annotated-figure__image {
  border-radius: 6px;
  box-shadow: none;
  position: relative;
  z-index: 1;
}

/* Dim wash sits inside the padded chart container, not over the
   whole white frame, so the surrounding padding stays bright while
   the chart itself dims when a phase is lifted. */
.figure-flow .figure-flow__chart::after {
  inset: 36px 40px;
  border-radius: 6px;
}

/* figure-flow--dim modifier — for dense diagrams where the hover
   targets are small UI regions inside a larger image.

   Architecture (single-source-of-truth):
   - Per-region geometry lives ONCE on .figure-flow__chart as
     --rN-x/--rN-y/--rN-wx/--rN-wy (lift bounds in chart-%)
     and --rN-s/--rN-ox/--rN-oy (zoom scale + transform origin 0..1).
     Both lift-overlays and flow-tags read from these same vars.
   - The base image PNG already has the dim wash + bright cutout
     windows baked in (exported from Figma's Userflow1-2 / Journeymap1-2
     frames). At rest, the user sees that composite directly — no
     CSS dim layer, no SVG mask, no lift cards visible.
   - On zoom: the matching lift card grows from inside its bright
     cutout and covers it (the grown card is larger than the cutout
     by design — verify via --rN-s * --rN-wx >= cutout width). A
     full-image dim overlay fades in via the chart ::after to deepen
     the surrounding context further.
   - Flow tags position themselves at a uniform --tag-gap-px from the
     visual edge of the zoomed card, accounting for --lift-pad (14px)
     and --lift-offset (-22px). data-side="right|left|above|below"
     picks the edge; side choice should be hand-picked per region to
     fit the available chart space. */
.figure-flow--dim .figure-flow__chart {
  --dim-active: 0.30;
}
.figure-flow--dim .figure-flow__chart::after {
  content: '';
  position: absolute;
  inset: 36px 40px;
  border-radius: 6px;
  background: rgb(40, 25, 18);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.figure-flow--dim[class*="zoom-"] .figure-flow__chart::after {
  opacity: var(--dim-active, 0.30);
}

/* Flow tags — attached annotation pills positioned at a uniform
   --tag-gap-px from the visual edge of the zoomed lift card.
   Math:
     1. Per-tag --r-x/--r-y/--r-wx/--r-wy/--r-s/--r-ox/--r-oy map
        from the chart's --rN-* vars via [data-tag="N"] rules below.
     2. --zoom-l/t/r/b are the zoomed lift card's inner content bounds
        in chart-%. The visual card is bigger by --lift-pad on each
        side and shifted by --lift-offset on translateY.
     3. data-side="right|left|above|below" anchors one edge of the
        tag to (visual card edge ± tag gap), and the perpendicular
        axis to the visual card's centerline.
     4. The transform composes a centering translate (--center-x/y)
        with a slide-in delta (--slide-x/y) that goes to 0 on zoom. */
.flow-tag {
  position: absolute;
  width: min(280px, 38%);
  background: var(--white);
  border: 1px solid var(--warm-border);
  border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow:
    0 24px 48px -12px rgba(40, 25, 18, 0.22),
    0 8px 16px -4px rgba(40, 25, 18, 0.12),
    0 0 0 1px rgba(40, 25, 18, 0.04);
  opacity: 0;
  pointer-events: none;
  z-index: 12;
  --tag-gap-px: 18px;
  --slide-x: 0px;
  --slide-y: 8px;
  --center-x: 0%;
  --center-y: 0%;
  transform: translate(
    calc(var(--center-x) + var(--slide-x)),
    calc(var(--center-y) + var(--slide-y))
  );
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Per-tag — map chart-level --rN-* vars into per-tag --r-* vars */
.flow-tag[data-tag="1"] {
  --r-x: var(--r1-x); --r-y: var(--r1-y); --r-wx: var(--r1-wx); --r-wy: var(--r1-wy);
  --r-s: var(--r1-s); --r-ox: var(--r1-ox); --r-oy: var(--r1-oy);
}
.flow-tag[data-tag="2"] {
  --r-x: var(--r2-x); --r-y: var(--r2-y); --r-wx: var(--r2-wx); --r-wy: var(--r2-wy);
  --r-s: var(--r2-s); --r-ox: var(--r2-ox); --r-oy: var(--r2-oy);
}
.flow-tag[data-tag="3"] {
  --r-x: var(--r3-x); --r-y: var(--r3-y); --r-wx: var(--r3-wx); --r-wy: var(--r3-wy);
  --r-s: var(--r3-s); --r-ox: var(--r3-ox); --r-oy: var(--r3-oy);
}
.flow-tag[data-tag="4"] {
  --r-x: var(--r4-x); --r-y: var(--r4-y); --r-wx: var(--r4-wx); --r-wy: var(--r4-wy);
  --r-s: var(--r4-s); --r-ox: var(--r4-ox); --r-oy: var(--r4-oy);
}
.flow-tag[data-tag="5"] {
  --r-x: var(--r5-x); --r-y: var(--r5-y); --r-wx: var(--r5-wx); --r-wy: var(--r5-wy);
  --r-s: var(--r5-s); --r-ox: var(--r5-ox); --r-oy: var(--r5-oy);
}

/* Compute zoom card inner content bounds (chart-%) from lift bound + scale + origin */
.flow-tag {
  --zoom-l: calc(var(--r-x) + var(--r-ox) * var(--r-wx) * (1 - var(--r-s)));
  --zoom-t: calc(var(--r-y) + var(--r-oy) * var(--r-wy) * (1 - var(--r-s)));
  --zoom-r: calc(var(--r-x) + var(--r-ox) * var(--r-wx) + (1 - var(--r-ox)) * var(--r-wx) * var(--r-s));
  --zoom-b: calc(var(--r-y) + var(--r-oy) * var(--r-wy) + (1 - var(--r-oy)) * var(--r-wy) * var(--r-s));
}

/* data-side placements. Includes --lift-pad and --lift-offset so the
   tag-gap is measured from the visual card edge, not the math box. */
.flow-tag[data-side="right"] {
  left: calc(var(--zoom-r) * 1% + var(--lift-pad, 14px) + var(--tag-gap-px, 18px));
  top: calc((var(--zoom-t) + var(--zoom-b)) / 2 * 1% + var(--lift-offset, -22px));
  --center-y: -50%;
  --slide-x: 8px;
  --slide-y: 0px;
}
.flow-tag[data-side="left"] {
  right: calc((100 - var(--zoom-l)) * 1% + var(--lift-pad, 14px) + var(--tag-gap-px, 18px));
  top: calc((var(--zoom-t) + var(--zoom-b)) / 2 * 1% + var(--lift-offset, -22px));
  --center-y: -50%;
  --slide-x: -8px;
  --slide-y: 0px;
}
.flow-tag[data-side="below"] {
  left: calc((var(--zoom-l) + var(--zoom-r)) / 2 * 1%);
  top: calc(var(--zoom-b) * 1% + var(--lift-pad, 14px) + var(--lift-offset, -22px) + var(--tag-gap-px, 18px));
  --center-x: -50%;
  --slide-x: 0px;
  --slide-y: 8px;
}
.flow-tag[data-side="above"] {
  left: calc((var(--zoom-l) + var(--zoom-r)) / 2 * 1%);
  bottom: calc((100 - var(--zoom-t)) * 1% + var(--lift-pad, 14px) - var(--lift-offset, -22px) + var(--tag-gap-px, 18px));
  --center-x: -50%;
  --slide-x: 0px;
  --slide-y: -8px;
}

.figure-flow.zoom-1 .flow-tag[data-tag="1"],
.figure-flow.zoom-2 .flow-tag[data-tag="2"],
.figure-flow.zoom-3 .flow-tag[data-tag="3"],
.figure-flow.zoom-4 .flow-tag[data-tag="4"],
.figure-flow.zoom-5 .flow-tag[data-tag="5"],
.figure-flow.zoom-6 .flow-tag[data-tag="6"] {
  opacity: 1;
  --slide-x: 0px;
  --slide-y: 0px;
}

.flow-tag__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--taupe);
  margin-bottom: 10px;
}
.flow-tag__num {
  background: var(--terracotta);
  color: var(--white);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.3;
}
.flow-tag__title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.3;
  margin: 0 0 6px;
}
.flow-tag__desc {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--taupe);
  margin: 0;
}

@media (max-width: 900px) {
  .figure-flow .figure-flow__chart {
    padding: 20px;
  }
  .figure-flow .figure-flow__chart::after {
    inset: 20px;
  }
  .figure-flow--dim .figure-flow__chart::after {
    inset: 20px;
  }
  /* Mobile: tag is too wide for right/left placement next to a zoom
     card — force all sides to "below" so it always fits. */
  .flow-tag {
    width: min(220px, 60%);
    padding: 12px 14px 10px;
  }
  .flow-tag[data-side] {
    left: calc((var(--zoom-l) + var(--zoom-r)) / 2 * 1%);
    right: auto;
    top: calc(var(--zoom-b) * 1% + var(--lift-pad, 14px) + var(--lift-offset, -22px) + var(--tag-gap-px, 14px));
    bottom: auto;
    --center-x: -50%;
    --center-y: 0%;
    --slide-x: 0px;
    --slide-y: 8px;
  }
  .flow-tag__title { font-size: 15px; }
  .flow-tag__desc { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .figure-flow--dim .figure-flow__chart::after { transition: none; }
}