:root {
  --bg: #f2f2f7;
  --bubble: #e7e7ec;
  --text: #1c1c1e;
  --text-muted: #6b6b70;
  --link: #007aff;
  --radius-bubble: 22px;
  --radius-image: 14px;
  --gap: 2rem;
  --maxw: 560px;
}

:root[data-theme="dark"] {
  --bg: #000000;
  --bubble: #1f1f22;
  --text: #f2f2f7;
  --text-muted: #98989f;
  --link: #0a84ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #000000;
    --bubble: #1f1f22;
    --text: #f2f2f7;
    --text-muted: #98989f;
    --link: #0a84ff;
  }
}

.cursor-glow {
  --glow: 0, 122, 255;
  position: fixed;
  top: 0;
  left: 0;
  width: 480px;
  height: 480px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow), 0.16) 0%, rgba(var(--glow), 0.07) 35%, transparent 70%);
  transition: opacity 0.4s ease;
  will-change: transform, opacity;
}

:root[data-theme="dark"] .cursor-glow {
  --glow: 10, 132, 255;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cursor-glow {
    --glow: 10, 132, 255;
  }
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge/IE */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;                /* Chrome, Safari */
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  padding: 48px 20px 80px;
}

.thread {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.header {
  text-align: center;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.avatar {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.5px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 50%),
    linear-gradient(135deg, #7c5cff 0%, #ff5b9f 55%, #ff8a4c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 14px 30px -12px rgba(124, 92, 255, 0.55),
    0 4px 10px -4px rgba(255, 91, 159, 0.4);
  user-select: none;
}

.avatar__initials {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.header__signature {
  width: 72px;
  height: auto;
  display: block;
  opacity: 0.4;
  /* Intro: the signature is drawn large at the viewport's vertical centre,
     then once the ink lands it shifts up into its header slot. Scaling from
     the centre keeps the glyph pinned to 50vh regardless of scale; the 81px
     offset is the signature's natural centre (48px body pad + ~33px half-h).
     transform stays out of the base state so reduced-motion just shows it. */
  transform-origin: center center;
  animation: sig-enter 1400ms cubic-bezier(.65, 0, .35, 1) backwards;
}

@keyframes sig-enter {
  0%, 75% {
    transform: translateY(calc(50vh - 81px)) scale(2.8);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
}

/* Signature draws itself on load: each glyph is revealed through a mask
   whose thick stroke retraces the same path (pathLength="1" normalizes the
   dash math), so the ink appears under the pen as it travels. Base state
   is fully revealed, so reduced-motion just shows it. */
.header__signature .sig-mask {
  /* Gap longer than the path so the hidden state has margin — an offset
     landing exactly on the dash boundary leaves a hairline of the wide
     mask stroke visible at the path's start point. */
  stroke-dasharray: 1 2;
  animation: sig-draw 900ms ease-in-out backwards;
}

.header__signature .sig-mask--swoosh {
  animation-duration: 650ms;
  animation-delay: 400ms;
}

@keyframes sig-draw {
  0% {
    stroke-dashoffset: 1.02;
    fill-opacity: 0;
  }
  72% {
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

.header__name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  opacity: 0.4;
  transition: opacity 250ms ease;
  animation: name-in 400ms ease 1100ms backwards;
}

@keyframes name-in {
  from { opacity: 0; }
  to { opacity: 0.4; }
}

/* Once the signature lands, the conversation bounces in. Backwards
   fill keeps everything visible when animations are disabled, and
   the finished animation releases transform back to hover transitions. */
.thread > :not(.header) {
  animation: page-in 550ms cubic-bezier(.34, 1.56, .64, 1) 1400ms backwards;
}

.thread > :nth-child(2) { animation-delay: 1120ms; }
.thread > :nth-child(3) { animation-delay: 1180ms; }
.thread > :nth-child(4) { animation-delay: 1240ms; }
.thread > :nth-child(5) { animation-delay: 1300ms; }

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.header__signature:hover ~ .header__name,
.header__signature:focus-visible ~ .header__name {
  opacity: 1;
}

.bubble {
  background: var(--bubble);
  border-radius: var(--radius-bubble);
  padding: 16px 20px;
  transition: transform 420ms cubic-bezier(.34,1.56,.64,1), box-shadow 350ms ease;
}

.bubble:not(.bubble--card):hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px -18px rgba(0, 0, 0, 0.18),
    0 4px 10px -8px rgba(0, 0, 0, 0.12);
}

.bubble p {
  margin: 0;
}

.bubble p + p {
  margin-top: 8px;
}

.bubble--card {
  padding: 8px 8px 4px;
  position: relative;
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* Cards that open a modal are <button>s — strip the native chrome. */
button.card {
  width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  background: #18181b;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 28px -16px rgba(0, 0, 0, 0.55),
    0 4px 10px -6px rgba(0, 0, 0, 0.35);
  transition: transform 420ms cubic-bezier(.34,1.56,.64,1), box-shadow 350ms ease;
}

/* Work cards open a text modal rather than showing media, so they don't need
   the full media height — halve it (5/4 → 5/2) to keep them compact. The same
   applies to the cloned hero inside the lightbox, which lives in .modal__media
   (outside .card--modal) and would otherwise revert to the default 5/4. */
.card--modal .card__media,
.modal__media .card__media {
  aspect-ratio: 5 / 2;
}

.card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #c9c9cf;
  transform: scale(1.01);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 500ms ease;
  will-change: transform;
  z-index: 0;
  /* iOS Safari doesn't clip composited (transformed) children to the parent's
     overflow:hidden border-radius, so round the layer itself. */
  border-radius: inherit;
}

/* Mesh gradients for the text-only work cards — several soft radial blooms
   layered over a deep base colour, the way design tools fake a mesh gradient.
   Each card keeps its own hue family so the three stay visually distinct. */
.card__image--mesh-blue {
  background-color: #1e3a8a;
  background-image:
    radial-gradient(at 18% 24%, #38bdf8 0px, transparent 55%),
    radial-gradient(at 83% 12%, #6366f1 0px, transparent 55%),
    radial-gradient(at 26% 92%, #2563eb 0px, transparent 50%),
    radial-gradient(at 78% 82%, #0ea5e9 0px, transparent 55%);
}

.card__image--mesh-warm {
  background-color: #7c2d12;
  background-image:
    radial-gradient(at 18% 22%, #fbbf24 0px, transparent 55%),
    radial-gradient(at 82% 14%, #fb7185 0px, transparent 55%),
    radial-gradient(at 24% 90%, #ea580c 0px, transparent 50%),
    radial-gradient(at 80% 84%, #f97316 0px, transparent 55%);
}

.card__image--mesh-teal {
  background-color: #134e4a;
  background-image:
    radial-gradient(at 18% 24%, #34d399 0px, transparent 55%),
    radial-gradient(at 84% 14%, #22d3ee 0px, transparent 55%),
    radial-gradient(at 28% 90%, #0d9488 0px, transparent 50%),
    radial-gradient(at 76% 82%, #2dd4bf 0px, transparent 55%);
}

.card__image--mesh-violet {
  background-color: #4c1d95;
  background-image:
    radial-gradient(at 18% 24%, #c084fc 0px, transparent 55%),
    radial-gradient(at 84% 14%, #818cf8 0px, transparent 55%),
    radial-gradient(at 26% 90%, #7c3aed 0px, transparent 50%),
    radial-gradient(at 78% 82%, #e879f9 0px, transparent 55%);
}

.card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 10%, transparent 40%, rgba(0,0,0,0.18) 100%),
    linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.72) 100%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.card__grain {
  position: absolute;
  inset: -2%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
}

.card__chip {
  position: absolute;
  z-index: 4;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px 5px;
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 20, 22, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.card__chip--tag {
  top: 12px;
  left: 12px;
}

.card__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 22px 20px 18px;
  color: #fff;
  transform: translateY(0);
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
}

.card__title {
  font-family: inherit;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.card__meta {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.78);
  margin: 5px 0 0;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
  color: var(--link);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
}

.card__cta {
  position: relative;
}

.card__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.6;
  transition: transform 350ms cubic-bezier(.2,.8,.2,1);
}

.card__arrow {
  display: block;
  transition: transform 350ms cubic-bezier(.2,.8,.2,1);
}

.card:hover .card__media,
.card:focus-visible .card__media {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 30px 50px -18px rgba(0, 0, 0, 0.65),
    0 12px 22px -8px rgba(0, 0, 0, 0.45);
}

.card:hover .card__caption,
.card:focus-visible .card__caption {
  transform: translateY(-2px);
}

.card:hover .card__arrow,
.card:focus-visible .card__arrow {
  transform: translateX(5px);
}

.card:hover .card__cta::after,
.card:focus-visible .card__cta::after {
  transform: scaleX(1);
}

.card:focus-visible {
  outline: none;
}

.card:focus-visible .card__media {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}

:root[data-theme="dark"] .card__media {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 28px -16px rgba(0, 0, 0, 0.85),
    0 4px 10px -6px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .card:hover .card__media,
:root[data-theme="dark"] .card:focus-visible .card__media {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 48px -18px rgba(0, 0, 0, 0.95),
    0 8px 16px -8px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .card__media {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 14px 28px -16px rgba(0, 0, 0, 0.85),
      0 4px 10px -6px rgba(0, 0, 0, 0.6);
  }
  :root:not([data-theme]) .card:hover .card__media,
  :root:not([data-theme]) .card:focus-visible .card__media {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 24px 48px -18px rgba(0, 0, 0, 0.95),
      0 8px 16px -8px rgba(0, 0, 0, 0.7);
  }
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  color: var(--link);
  font-weight: 500;
}

.post {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post__title {
  font-size: 17px;
  font-weight: 500;
  margin: 0;
}

.post__meta {
  font-size: 14px;
  color: var(--text-muted);
  margin: 4px 0 10px !important;
}

/* compact writing grid */
.post-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: -6px -10px;
}

.post--compact {
  padding: 10px 12px;
  border-radius: 12px;
  transition: background 200ms ease;
}

.post--compact:hover {
  background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="dark"] .post--compact:hover {
  background: rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .post--compact:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

.post--compact .post__title {
  font-size: 15px;
  line-height: 1.3;
}

.post--compact .post__meta {
  font-size: 13px;
  margin: 3px 0 0 !important;
}

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

.bubble--timeline {
  padding: 18px 22px;
  background: #dcdce2;
}

:root[data-theme="dark"] .bubble--timeline {
  background: #161618;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .bubble--timeline {
    background: #161618;
  }
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.work {
  position: relative;
  padding: 0 0 22px 26px;
}

.work:last-child {
  padding-bottom: 2px;
}

/* connecting line down the spine */
.work::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: -2px;
  width: 2px;
  background: linear-gradient(#34c759, transparent);
  opacity: 0.4;
}

.work:last-child::before {
  display: none;
}

.work__dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.16);
  transition: box-shadow 250ms ease, transform 250ms ease;
}

:root[data-theme="dark"] .work__dot {
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .work__dot {
    box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.2);
  }
}

.work:hover .work__dot {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(52, 199, 89, 0.18);
}

.work__role {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.work__org {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.work__sep {
  opacity: 0.6;
}

.work__period {
  font-variant-numeric: tabular-nums;
}

.work__note {
  font-size: 14px;
  color: var(--text-muted);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* volunteer aside — alongside the career track, not on it */
.volunteer {
  margin: 2px 0 18px;
  padding: 0 0 14px 26px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .volunteer {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .volunteer {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
}

.volunteer__item + .volunteer__item {
  margin-top: 14px;
}

.volunteer .work__role {
  display: flex;
  align-items: center;
  gap: 8px;
}

.volunteer__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #34c759;
  background: rgba(52, 199, 89, 0.12);
  padding: 2px 7px;
  border-radius: 999px;
}

.bubble--inline {
  padding: 0;
}

.socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.inline-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-bubble);
  transition: background-color 150ms ease;
}

.inline-link:hover {
  background-color: rgba(0, 122, 255, 0.06);
}

:root[data-theme="dark"] .inline-link:hover {
  background-color: rgba(10, 132, 255, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .inline-link:hover {
    background-color: rgba(10, 132, 255, 0.12);
  }
}

/* Featured contact tile — filled accent so the résumé reads as the primary action. */
.inline-link--featured {
  background-color: var(--link);
  color: #fff;
  font-weight: 600;
}

.inline-link--featured:hover {
  background-color: var(--link);
  filter: brightness(1.08);
}

:root[data-theme="dark"] .inline-link--featured:hover {
  background-color: var(--link);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .inline-link--featured:hover {
    background-color: var(--link);
  }
}

.inline-link--featured .chevron {
  opacity: 1;
}

.chevron {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
  opacity: 0.9;
}

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 40; /* above the side scrubber (30), below the modal overlay (50) */
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: var(--bubble);
  color: var(--text);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover { transform: scale(1.06); }
.theme-toggle:active { transform: scale(0.94); }

.theme-toggle:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.theme-toggle .icon {
  grid-area: 1 / 1;
  transition: opacity 200ms ease, transform 250ms ease;
}

.theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  :root:not([data-theme]) .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
  }
}

.footer {
  margin-top: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.footer p {
  margin: 0;
}

@media (max-width: 480px) {
  body {
    padding: 28px 14px 60px;
  }
  :root {
    --gap: 10px;
    --radius-bubble: 20px;
  }
  html, body {
    font-size: 16px;
  }
  .card__title {
    font-size: 22px;
  }
  .card__caption {
    padding: 18px 16px 14px;
  }
  .card__chip {
    font-size: 10.5px;
    padding: 4px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

.top-bubbles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Project modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease;
}

.modal {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bubble);
  color: var(--text);
  border-radius: var(--radius-bubble);
  padding: 8px 8px 4px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 40px 80px -24px rgba(0, 0, 0, 0.5),
    0 16px 32px -16px rgba(0, 0, 0, 0.35);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 320ms cubic-bezier(.34,1.56,.64,1), opacity 240ms ease;
}

.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal__media {
  border-radius: var(--radius-image);
  overflow: hidden;
}

.modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 20, 22, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  cursor: pointer;
  transition: transform 250ms ease, background 250ms ease;
}

.modal__close:hover {
  transform: scale(1.06);
  background: rgba(20, 20, 22, 0.6);
}

.modal__close:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.modal__body {
  padding: 16px 14px 12px;
}

.modal__desc {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

/* Case-study content cloned in from each card's <template> */
.modal__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Role / Timeline / Team strip */
.case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}
.case__meta li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.case__meta-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case__meta-value {
  font-size: 15px;
  color: var(--text);
}

/* Larger intro paragraph */
.case__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
}

/* Titled content block */
.case__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case__heading {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case__section p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
}
.case__list {
  margin: 0;
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

/* Image / video figure */
.case__figure {
  margin: 0;
}
.case__figure img,
.case__figure video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}
.case__figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}

/* Outbound link pill (live site, prototype, etc.) */
.case__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--link);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 200ms ease, opacity 200ms ease;
}
.case__link:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}
.case__link:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}
.case__link svg {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 14px;
    align-items: flex-end;
  }
  .modal {
    max-height: calc(100vh - 28px);
  }
}

/* Apple Photos–style side scrubber */
.scrubber {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 56px;
  z-index: 30;
  display: none; /* enabled at >= 640px, where there's gutter space */
  align-items: center;
  justify-content: flex-end;
  padding-right: 22px;
  opacity: 0;
  transition: opacity 320ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

@media (min-width: 640px) and (pointer: fine) {
  .scrubber { display: flex; }
}

.scrubber.is-visible {
  opacity: 1;
}

.scrubber__track {
  position: relative;
  width: 6px;
  height: min(62vh, 520px);
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.22);
  cursor: pointer;
  overflow: visible;
}

:root[data-theme="dark"] .scrubber__track {
  background: rgba(120, 120, 128, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .scrubber__track {
    background: rgba(120, 120, 128, 0.3);
  }
}

.scrubber__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  border-radius: 999px;
  background: var(--link);
  opacity: 0.5;
}

.scrubber__tick {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
  transform: scale(0.7);
  transition: transform 200ms ease, opacity 200ms ease, background-color 200ms ease;
  pointer-events: none;
}

.scrubber__tick.is-active {
  background: var(--link);
  opacity: 1;
  transform: scale(1);
}

.scrubber__tick.is-hover {
  opacity: 1;
  transform: scale(1.25);
}

.scrubber__thumb {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 9px;
  height: 32px;
  margin-left: -4.5px;
  margin-top: -16px;
  border-radius: 999px;
  background: var(--link);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}

.scrubber.is-dragging .scrubber__thumb {
  transform: scaleX(1.4);
}

.scrubber__label {
  position: absolute;
  right: calc(100% + 14px);
  top: 0%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  background: rgba(20, 20, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, top 120ms ease;
}

.scrubber.is-label-visible .scrubber__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .scrubber,
  .scrubber__thumb,
  .scrubber__label,
  .scrubber__tick {
    transition: none;
  }
}

/* ── Custom find-on-page (replaces the browser's ⌘/Ctrl+F) ───────────── */
.find-bar {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 60; /* above modal (50), toggle (40), scrubber (30) */
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 32px);
  padding: 6px 7px 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bubble) 80%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow:
    0 14px 44px -14px rgba(0, 0, 0, 0.5),
    0 2px 8px -4px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transform: translate(-50%, -28px);
  opacity: 0;
  pointer-events: none;
  transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1), opacity 220ms ease;
}

.find-bar.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.find-bar__icon {
  flex: none;
  color: var(--text-muted);
}

.find-bar__input {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  width: 200px;
  max-width: 42vw;
  padding: 4px 2px;
}

.find-bar__input::placeholder {
  color: var(--text-muted);
}

.find-bar__count {
  flex: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 3.5ch;
  text-align: right;
  white-space: nowrap;
}

.find-bar__count.is-empty {
  color: #ff453a;
}

.find-bar__sep {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
}

.find-bar__btn {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, transform 150ms ease, opacity 150ms ease;
}

.find-bar__btn:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.find-bar__btn:active {
  transform: scale(0.9);
}

.find-bar__btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 1px;
}

.find-bar__btn:disabled {
  opacity: 0.32;
  cursor: default;
  background: none;
  transform: none;
}

/* Every match: a soft amber tint, painted without touching the DOM. */
::highlight(find-all) {
  background-color: rgba(255, 204, 0, 0.32);
  color: inherit;
}

:root[data-theme="dark"] ::highlight(find-all) {
  background-color: rgba(255, 214, 10, 0.30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) ::highlight(find-all) {
    background-color: rgba(255, 214, 10, 0.30);
  }
}

/* The active match: a single accent box that glides between hits. */
.find-spotlight {
  --glow: 0, 122, 255;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 6px;
  background: rgba(var(--glow), 0.16);
  box-shadow:
    0 0 0 1.5px rgba(var(--glow), 0.6),
    0 8px 22px -8px rgba(var(--glow), 0.65);
  opacity: 0;
  transition:
    top 340ms cubic-bezier(.34, 1.4, .5, 1),
    left 340ms cubic-bezier(.34, 1.4, .5, 1),
    width 340ms cubic-bezier(.34, 1.4, .5, 1),
    height 340ms cubic-bezier(.34, 1.4, .5, 1),
    opacity 200ms ease;
}

.find-spotlight.is-visible {
  opacity: 1;
}

:root[data-theme="dark"] .find-spotlight {
  --glow: 10, 132, 255;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .find-spotlight {
    --glow: 10, 132, 255;
  }
}

@media (prefers-reduced-motion: reduce) {
  .find-bar,
  .find-spotlight {
    transition: opacity 200ms ease;
  }
}

@media (max-width: 480px) {
  .find-bar__input {
    width: 150px;
  }
}