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

/* ==========================================================================
   Initial load — prevent flash of mid-animation gradient
   ========================================================================== */

html.is-loading body {
  opacity: 0;
}

body {
  opacity: 1;
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

/* Skip link: visible only when keyboard-focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--color-text);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: 6px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--color-accent-coral);
  outline-offset: 2px;
}

/* Global focus ring — applies to every keyboard-focused interactive element */
:focus-visible {
  outline: 2px solid var(--color-accent-coral);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Project image links get a fuller ring matching the rounded corners */
.project__media:focus-visible {
  outline-offset: 4px;
  border-radius: 8px;
}

/* ==========================================================================
   Continuous gradient surface — runs under the whole page.
   Sections with .solid-section paint opaque white on top to hide it.
   ========================================================================== */

.surface {
  position: relative;
  isolation: isolate;
}

.surface__base {
  position: fixed;
  inset: 0;
  height: 100lvh;
  background: #ffe4d1;
  z-index: 0;
  /* Promote to its own GPU layer so scroll doesn't trigger repaints */
  transform: translateZ(0);
}

.surface__gradient {
  position: fixed;
  inset: -30%;
  height: 160lvh;
  z-index: 1;
  filter: blur(40px);
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}

.surface__gradient::before,
.surface__gradient::after,
.hero__blob {
  content: "";
  position: absolute;
  /* Initial irregular border-radius so blobs aren't visibly circular
     before the morph animation kicks in on first paint. */
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  mix-blend-mode: multiply;
  will-change: transform, border-radius;
}

/* Fluid morphing — each blob cycles through 6 irregular border-radius
   values at different speeds, creating organic shape change. The mismatched
   periods mean no two blobs ever return to the same shape at the same time. */
@keyframes morph-a {
  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  20% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  40% {
    border-radius: 50% 50% 40% 60% / 40% 70% 30% 60%;
  }
  60% {
    border-radius: 70% 30% 50% 60% / 30% 40% 70% 50%;
  }
  80% {
    border-radius: 40% 60% 70% 30% / 70% 40% 50% 60%;
  }
}

@keyframes morph-b {
  0%,
  100% {
    border-radius: 40% 60% 70% 30% / 30% 60% 50% 70%;
  }
  25% {
    border-radius: 70% 30% 60% 40% / 60% 50% 60% 40%;
  }
  50% {
    border-radius: 50% 60% 30% 70% / 40% 50% 70% 30%;
  }
  75% {
    border-radius: 30% 70% 50% 50% / 70% 40% 60% 40%;
  }
}

@keyframes morph-c {
  0%,
  100% {
    border-radius: 50% 50% 60% 40% / 50% 60% 40% 50%;
  }
  33% {
    border-radius: 70% 30% 40% 60% / 60% 30% 70% 40%;
  }
  66% {
    border-radius: 30% 70% 60% 40% / 40% 70% 30% 60%;
  }
}

.surface__gradient::before {
  width: 75vw;
  height: 75vw;
  top: -20%;
  left: -20%;
  background: radial-gradient(
    circle,
    #ff9a7b 0%,
    #ffb89c 35%,
    #ffd4b8 60%,
    transparent 85%
  );
  animation:
    drift-1 22s ease-in-out infinite alternate,
    morph-a 18s ease-in-out infinite;
}

.surface__gradient::after {
  width: 70vw;
  height: 70vw;
  bottom: -20%;
  right: -15%;
  background: radial-gradient(
    circle,
    #8fc8b8 0%,
    #b0d8c8 35%,
    #d0e4d8 60%,
    transparent 85%
  );
  animation:
    drift-2 28s ease-in-out infinite alternate,
    morph-b 22s ease-in-out infinite;
}

.hero__blob--1 {
  width: 65vw;
  height: 65vw;
  top: 15%;
  left: 10%;
  background: radial-gradient(
    circle,
    #d4a8e8 0%,
    #e0bce8 35%,
    #ecd4ec 60%,
    transparent 85%
  );
  animation:
    drift-3 32s ease-in-out infinite alternate,
    morph-c 24s ease-in-out infinite;
}

.hero__blob--2 {
  width: 60vw;
  height: 60vw;
  top: -10%;
  right: -10%;
  background: radial-gradient(
    circle,
    #ffe08a 0%,
    #ffe8a8 35%,
    #fff0c8 60%,
    transparent 85%
  );
  animation:
    drift-4 26s ease-in-out infinite alternate,
    morph-a 20s ease-in-out infinite reverse;
}

.hero__blob--3 {
  width: 55vw;
  height: 55vw;
  bottom: -10%;
  left: 5%;
  background: radial-gradient(
    circle,
    #a8c8e8 0%,
    #c0d4e8 35%,
    #d8e4f0 60%,
    transparent 85%
  );
  animation:
    drift-5 30s ease-in-out infinite alternate,
    morph-b 26s ease-in-out infinite reverse;
}

.hero__blob--4 {
  width: 50vw;
  height: 50vw;
  top: 35%;
  right: 15%;
  background: radial-gradient(
    circle,
    #f0a8c0 0%,
    #f4bcc8 35%,
    #f8d4d8 60%,
    transparent 85%
  );
  animation:
    drift-6 24s ease-in-out infinite alternate,
    morph-c 19s ease-in-out infinite reverse;
}

.hero__blob--5 {
  width: 55vw;
  height: 55vw;
  top: -5%;
  left: 30%;
  background: radial-gradient(
    circle,
    #a8e8c8 0%,
    #c0e8d0 35%,
    #d8f0dc 60%,
    transparent 85%
  );
  animation:
    drift-7 25s ease-in-out infinite alternate,
    morph-a 21s ease-in-out infinite;
}

.hero__blob--6 {
  width: 50vw;
  height: 50vw;
  top: 40%;
  left: -10%;
  background: radial-gradient(
    circle,
    #ffb098 0%,
    #ffc8b0 35%,
    #ffdcc8 60%,
    transparent 85%
  );
  animation:
    drift-8 21s ease-in-out infinite alternate,
    morph-b 17s ease-in-out infinite;
}

.hero__blob--7 {
  width: 55vw;
  height: 55vw;
  bottom: -5%;
  left: 35%;
  background: radial-gradient(
    circle,
    #b8b8e8 0%,
    #c8c8e8 35%,
    #dcdcec 60%,
    transparent 85%
  );
  animation:
    drift-9 29s ease-in-out infinite alternate,
    morph-c 23s ease-in-out infinite;
}

.hero__blob--8 {
  width: 48vw;
  height: 48vw;
  top: 50%;
  right: -8%;
  background: radial-gradient(
    circle,
    #ffd070 0%,
    #ffdc90 35%,
    #ffe8b8 60%,
    transparent 85%
  );
  animation:
    drift-10 23s ease-in-out infinite alternate,
    morph-a 25s ease-in-out infinite reverse;
}

/* On mobile (portrait, narrow viewport), scale blobs up so they fill the
   taller viewport instead of becoming tiny squares of color.
   We switch from vw sizing to the larger of vw or vh-based sizing. */
@media (max-width: 768px) {
  .surface__gradient::before {
    width: 130vw;
    height: 130vw;
    top: -30%;
    left: -30%;
  }
  .surface__gradient::after {
    width: 120vw;
    height: 120vw;
    bottom: -30%;
    right: -25%;
  }
  .hero__blob--1 {
    width: 115vw;
    height: 115vw;
    top: 10%;
    left: 0%;
  }
  .hero__blob--2 {
    width: 110vw;
    height: 110vw;
    top: -15%;
    right: -25%;
  }
  .hero__blob--3 {
    width: 105vw;
    height: 105vw;
    bottom: -15%;
    left: -10%;
  }
  .hero__blob--4 {
    width: 100vw;
    height: 100vw;
    top: 30%;
    right: 0%;
  }
  .hero__blob--5 {
    width: 110vw;
    height: 110vw;
    top: -10%;
    left: 15%;
  }
  .hero__blob--6 {
    width: 100vw;
    height: 100vw;
    top: 35%;
    left: -25%;
  }
  .hero__blob--7 {
    width: 110vw;
    height: 110vw;
    bottom: -10%;
    left: 20%;
  }
  .hero__blob--8 {
    width: 100vw;
    height: 100vw;
    top: 45%;
    right: -20%;
  }
}

@keyframes drift-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20vw, 15vh) scale(1.2);
  }
  100% {
    transform: translate(30vw, 22vh) scale(0.9);
  }
}
@keyframes drift-2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-22vw, -16vh) scale(1.25);
  }
  100% {
    transform: translate(-15vw, -28vh) scale(1.05);
  }
}
@keyframes drift-3 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-25vw, 18vh) scale(0.9);
  }
  100% {
    transform: translate(18vw, -18vh) scale(1.2);
  }
}
@keyframes drift-4 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-20vw, 22vh) scale(1.15);
  }
  100% {
    transform: translate(-28vw, 12vh) scale(0.85);
  }
}
@keyframes drift-5 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(25vw, -15vh) scale(1.2);
  }
  100% {
    transform: translate(12vw, -25vh) scale(0.95);
  }
}
@keyframes drift-6 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(15vw, 12vh) scale(0.85);
  }
  100% {
    transform: translate(-20vw, 18vh) scale(1.25);
  }
}
@keyframes drift-7 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-18vw, 20vh) scale(1.15);
  }
  100% {
    transform: translate(22vw, 15vh) scale(0.9);
  }
}
@keyframes drift-8 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20vw, -18vh) scale(1.2);
  }
  100% {
    transform: translate(28vw, 10vh) scale(0.85);
  }
}
@keyframes drift-9 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-22vw, -20vh) scale(0.9);
  }
  100% {
    transform: translate(15vw, -12vh) scale(1.2);
  }
}
@keyframes drift-10 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-25vw, 15vh) scale(1.15);
  }
  100% {
    transform: translate(-15vw, 25vh) scale(0.9);
  }
}

/* When JS takes over drift, kill the CSS drift keyframes (morph keeps running) */
.surface[data-js-enhanced="true"] .surface__gradient::before {
  animation: morph-a 18s ease-in-out infinite;
}
.surface[data-js-enhanced="true"] .surface__gradient::after {
  animation: morph-b 22s ease-in-out infinite;
}
.surface[data-js-enhanced="true"] .hero__blob--1 {
  animation: morph-c 24s ease-in-out infinite;
}
.surface[data-js-enhanced="true"] .hero__blob--2 {
  animation: morph-a 20s ease-in-out infinite reverse;
}
.surface[data-js-enhanced="true"] .hero__blob--3 {
  animation: morph-b 26s ease-in-out infinite reverse;
}
.surface[data-js-enhanced="true"] .hero__blob--4 {
  animation: morph-c 19s ease-in-out infinite reverse;
}
.surface[data-js-enhanced="true"] .hero__blob--5 {
  animation: morph-a 21s ease-in-out infinite;
}
.surface[data-js-enhanced="true"] .hero__blob--6 {
  animation: morph-b 17s ease-in-out infinite;
}
.surface[data-js-enhanced="true"] .hero__blob--7 {
  animation: morph-c 23s ease-in-out infinite;
}
.surface[data-js-enhanced="true"] .hero__blob--8 {
  animation: morph-a 25s ease-in-out infinite reverse;
}

/* Grain — two layers for depth */
.surface__grain {
  position: fixed;
  inset: 0;
  height: 100lvh;
  z-index: 2;
  pointer-events: none;
  opacity: 0.75;
  mix-blend-mode: multiply;
  transform: translateZ(0);
}

.surface__grain--coarse {
  opacity: 0.35;
  mix-blend-mode: overlay;
}

.surface__grain svg {
  width: 100%;
  height: 100%;
  display: block;
}

.surface__content {
  position: relative;
  z-index: 3;
}

/* Any section with .solid-section paints opaque over the gradient */
.solid-section {
  position: relative;
  background: #fafaf7;
  z-index: 1;
  /* Promote to its own GPU layer so the opaque background composites
     independently from the fixed gradient underneath — prevents mobile
     scroll flicker where the gradient briefly bleeds through. */
  transform: translateZ(0);
  /* Create a new stacking context so blend modes on blobs (multiply) can
     never affect how this layer is composited. */
  isolation: isolate;
}

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

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}

.hero__content {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 6rem);
  max-width: 1400px;
  margin: 0 auto;
}

.hero__eyebrow {
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fade-up 0.8s 0.2s ease forwards;
}

.hero__title {
  margin-bottom: 1.5rem;
  max-width: 14ch;
  opacity: 0;
  animation: fade-up 1s 0.4s ease forwards;
}

.hero__lead {
  max-width: 48ch;
  opacity: 0;
  animation: fade-up 1s 0.6s ease forwards;
}

.hero__meta {
  position: absolute;
  bottom: clamp(2rem, 4vw, 4rem);
  left: clamp(2rem, 5vw, 6rem);
  right: clamp(2rem, 5vw, 6rem);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fade-up 1s 0.9s ease forwards;
}

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

/* ==========================================================================
   About section (solid white over the gradient)
   ========================================================================== */

.about {
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(6rem, 12vw, 11rem);
  overflow: hidden;
  /* Explicit background-color so the grain layer above has a solid layer
     to multiply against, even if .solid-section's background is repainting. */
  background-color: #fafaf7;
}

.about__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
}

.about__grain svg {
  width: 100%;
  height: 100%;
  display: block;
}

.about__content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

.about__top {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: clamp(5rem, 10vw, 8rem);
}

@media (max-width: 800px) {
  .about__top {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3rem);
  }
}

.about__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  width: 100%;
  justify-self: start;
}

.about__photo-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(42, 24, 16, 0.25),
    0 10px 20px -10px rgba(42, 24, 16, 0.15);
}

.about__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about__photo-accent {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1.5px solid var(--color-accent-coral);
  border-radius: 6px;
  transform: translate(18px, 18px);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.about__photo:hover .about__photo-accent {
  transform: translate(12px, 12px);
}

.about__eyebrow {
  margin-bottom: 1.5rem;
}

.about__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: var(--fw-semibold);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 1.75rem;
  color: var(--color-text);
}

.about__heading em {
  font-style: italic;
  color: var(--color-accent-coral);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100;
}

.about__body {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-bottom: 1.25rem;
}

.about__body:last-child {
  margin-bottom: 0;
}

/* Experience list — definition list, no cards */
.experience + .experience {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.experience__heading {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(42, 24, 16, 0.1);
}

.experience__list {
  margin: 0;
}

.experience__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid rgba(42, 24, 16, 0.08);
}

.experience__row:last-child {
  border-bottom: none;
}

@media (max-width: 700px) {
  .experience__row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.experience__year {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent-coral);
  padding-top: 0.5rem;
}

.experience__detail {
  margin: 0;
}

.experience__role {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 0.25rem;
  color: var(--color-text);
}

.experience__company {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.experience__summary {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 60ch;
}

/* ==========================================================================
   Projects (solid white over the gradient)
   ========================================================================== */

.projects {
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(6rem, 12vw, 11rem);
  overflow: hidden;
  background-color: #fafaf7;
}

.projects__content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

.projects__header {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  max-width: 720px;
}

.projects__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: var(--fw-semibold);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0 0 1rem;
}

.projects__heading em {
  font-style: italic;
  color: var(--color-accent-coral);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100;
}

.projects__intro {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 50ch;
}

/* Auto-fit grid keeps cards comfortable on every viewport */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.project {
  display: flex;
  flex-direction: column;
}

.project__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: #f0eae0;
  box-shadow:
    0 20px 40px -20px rgba(42, 24, 16, 0.18),
    0 6px 12px -6px rgba(42, 24, 16, 0.1);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project__media:hover {
  transform: translateY(-4px);
  box-shadow:
    0 30px 60px -20px rgba(42, 24, 16, 0.25),
    0 10px 20px -10px rgba(42, 24, 16, 0.15);
}

.project__media:hover img {
  transform: scale(1.03);
}

.project__body {
  padding: 1.5rem 0.25rem 0;
}

.project__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.4rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.project__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-coral);
  background: rgba(168, 66, 31, 0.08);
  border: 1px solid rgba(168, 66, 31, 0.2);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  line-height: 1.2;
  letter-spacing: 0.07em;
}

.project__description {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  max-width: 50ch;
}

.project__links {
  display: flex;
  gap: 1.25rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.project__links a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 24, 16, 0.2);
  padding-bottom: 0.15rem;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.project__links a:hover {
  color: var(--color-accent-coral);
  border-bottom-color: var(--color-accent-coral);
}

/* ==========================================================================
   Connect (transparent — gradient shows through)
   ========================================================================== */

.connect {
  position: relative;
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
}

.connect__content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 8vw, 6rem);
}

/* Recommendation pull-quote — translucent backdrop, big italic quote mark */
.recommendation {
  position: relative;
  max-width: 620px;
  margin: 0;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem);
  background: rgba(255, 250, 242, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(42, 24, 16, 0.06);
  border-radius: 12px;
  /* Promote to own layer so the backdrop-filter doesn't trigger repaints
     in adjacent sections during scroll. */
  transform: translateZ(0);
  isolation: isolate;
}

.recommendation__mark {
  position: absolute;
  top: -0.35em;
  left: 0.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(5rem, 10vw, 8rem);
  line-height: 1;
  color: var(--color-accent-coral);
  opacity: 0.35;
  pointer-events: none;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100;
}

.recommendation__quote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 1.75rem;
  padding-left: 0;
  border: none;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100;
}

.recommendation__cite {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-style: normal;
}

.recommendation__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.recommendation__person {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.recommendation__name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.recommendation__role,
.recommendation__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* CTA block — large editorial type and a single primary email link */
.connect__cta {
  text-align: center;
}

.connect__heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 1rem 0 1.5rem;
}

.connect__heading em {
  font-style: italic;
  color: var(--color-accent-coral);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100;
}

.connect__body {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: 0 auto 2rem;
  max-width: 40ch;
}

.connect__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: italic;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent-coral);
  padding-bottom: 0.25rem;
  transition: color 0.3s ease;
}

.connect__email:hover {
  color: var(--color-accent-coral);
}

.connect__socials {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.connect__socials a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1rem;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.connect__socials a:hover {
  color: var(--color-accent-coral);
  border-bottom-color: var(--color-accent-coral);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .surface__gradient::before,
  .surface__gradient::after,
  .hero__blob,
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__meta,
  .about__photo-accent,
  .project__media,
  .project__media img,
  .project__links a,
  .connect__email,
  .connect__socials a,
  .skip-link {
    animation: none;
    transition: none;
  }
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__meta {
    opacity: 1;
  }
}