/* Horizontal row of square cards; overflows off the right edge and scrolls
   (the mouse wheel moves it card by card: js/modules/wheel-scroll.js) */
.card-row {
  display: flex;
  gap: var(--card-gap);
  padding: 0 var(--gutter) var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.card-row::-webkit-scrollbar { display: none; }
/* With a mouse only (the projects card's peeking buddy shows on hover): the top padding is room for it
   (the row clips anything outside it), the negative margin keeps the cards where they were, and
   pointer-events lets clicks in that strip reach the header underneath. Not on touch screens, where a
   row with pointer-events: none can't be swiped (iPhone Safari). */
@media (hover: hover) and (pointer: fine) {
  .card-row {
    padding-top: 5rem;
    margin-top: -5rem;
    pointer-events: none;
  }
  .card-row > * { pointer-events: auto; }
}

.card {
  flex: 0 0 var(--card-size);
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
}
.card[hidden] { display: none; } /* cards with the hidden attribute stay out of the row */

/* Card 1: bio. Two faces on a flipper; .is-flipped (js/modules/bio-flip.js) turns it over.
   The faces carry the colors and corners so the card can turn in 3D without being clipped. */
.card-bio {
  overflow: visible;
  perspective: 2800px;
  container-type: inline-size;
}
.bio-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.card-bio.is-flipped .bio-flip { transform: rotateY(180deg); }
.bio-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem 2rem;
  border-radius: var(--radius);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bio-front {
  background-color: var(--color-bio);
  color: var(--color-wordmark);
}
.bio-back {
  background-color: var(--color-wordmark);
  color: var(--color-ink);
  transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .bio-flip { transition: none; }
}

/* Text sits in the top third of both sides */
.bio-text-area { height: 33cqi; }
.bio {
  font-size: clamp(1.1rem, 1.45vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
  max-width: 28ch;
}
.bio-more {
  font-size: clamp(0.85rem, 3.1cqi, 1.05rem);
  font-weight: 500;
  line-height: 1.55;
}
@container (max-width: 300px) {
  .bio-more { font-size: 0.8rem; line-height: 1.5; } /* small phones: fit more of the intro */
  /* ...and the last lines scroll, so fade the bottom edge instead of cutting a line in half */
  .bio-back .bio-text-area {
    padding-bottom: 1rem;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(#000 calc(100% - 1.5rem), transparent);
  }
}
/* Back side: the longer intro may use all the room above the footer; on very small cards it scrolls
   inside that room instead of running into the Contact me / - buttons */
.bio-back .bio-text-area {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 1rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
/* Secondary round button at the bottom right (20% black, no outline): + on the front next to Resume, - on the back in the same spot */
.bio-toggle {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}
.bio-toggle:hover {
  background-color: rgba(0, 0, 0, 0.3);
  transform: scale(1.06);
}
.bio-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
}

/* Resume + flip button sit together on the right of the footer */
.bio-actions { display: flex; align-items: center; gap: 0.6rem; }


/* Ghost button on the back side */
.btn-ghost {
  padding: 0.65rem 1.25rem;
  border: var(--border);
  border-radius: 999px;
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.btn-ghost:hover { background-color: var(--color-ink); color: var(--color-wordmark); }
/* Small phones: tighter so Contact me, copy and - fit on one row */
@container (max-width: 300px) {
  .btn-ghost { padding: 0.65rem 0.9rem; }
}

/* "Contact me" + the round copy-email button next to it */
.contact-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-copy {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.btn-copy:hover { background-color: var(--color-ink); color: var(--color-wordmark); }
.btn-copy svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.15s, transform 0.2s;
}
/* Copied: the copy icon swaps to a tick for a moment */
.btn-copy .icon-done { opacity: 0; transform: scale(0.6); stroke-width: 2.6; }
.btn-copy.is-copied .icon-copy { opacity: 0; transform: scale(0.6); }
.btn-copy.is-copied .icon-done { opacity: 1; transform: none; }

/* Toast at the bottom of the screen ("Email ... copied to clipboard") */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 100;
  max-width: calc(100vw - 2 * var(--gutter));
  width: max-content;
  padding: 0.75rem 1.25rem;
  border-radius: 1.4rem; /* pill on one line, still neat if it wraps on a phone */
  background: var(--color-ink);
  color: var(--color-wordmark);
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.25s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.2s; transform: translate(-50%, 0); }
}

.card-bio-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

/* Social icons */
.social-links { display: flex; align-items: center; gap: 1rem; }
.social-btn {
  display: block;
  color: inherit;
  transition: opacity 0.15s, transform 0.15s;
}
.social-btn:hover { opacity: 0.6; transform: translateY(-2px); }
.social-btn svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.social-btn svg.stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.social-btn svg .dot { fill: currentColor; stroke: none; }
/* Image icons (e.g. Medium): 22px + 1px margin to match the 22px squares drawn in the 24px SVGs */
.social-btn img {
  display: block;
  width: 22px;
  height: 22px;
  margin: 1px;
}

/* Résumé download button */
.btn-resume {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.65rem 1rem;
  border: var(--border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--color-ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-resume:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-ink);
}
.btn-resume:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
.btn-resume svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Narrow cards (phones): tighten the footer so icons, Resume and + all fit */
@container (max-width: 380px) {
  .social-links { gap: 0.7rem; }
  .btn-resume { padding: 0.55rem 0.8rem; }
  .bio-toggle { width: 38px; height: 38px; }
  .bio-actions { gap: 0.45rem; }
}

/* Card 2: photo */
.card-photo {
  background-image: linear-gradient(135deg, #6b7f99, #3d4f6b); /* shows until a photo is added */
}
.card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Photos are stacked; the button dissolves between them */
.card-photo .photo-slide {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card-photo .photo-slide.is-active { opacity: 1; }
.icon-btn-next {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  background: var(--color-white);
  color: var(--color-ink);
}
/* Arrow points left by default and flips to the right after each click */
.icon-btn-next svg {
  transform: scaleX(-1);
  transition: transform 0.4s ease;
}
.icon-btn-next.is-flipped svg { transform: scaleX(1); }

/* Card 4: testimonials with folder tabs along the top edge.
   The tabs run under the body; the selected tab shares the body color, so they read as one shape. */
.card-testimonial {
  container-type: inline-size; /* sizes below scale with the card (cqi) */
  --tab-h: 6.5cqi;       /* how far the tabs stick out above the body */
  --tab-lift: 5px;       /* headroom above the tabs so they can rise on hover */
  --t-bg: #336b7d;       /* set from the selected tab by js/modules/testimonials.js */
  --t-fg: #ffffff;
}
.testimonial-tabs {
  position: absolute;
  inset: var(--tab-lift) 0 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.testimonial-tab {
  position: relative;
  border: 0;
  border-radius: var(--radius);
  background: var(--tab-bg);
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s ease;
}
.testimonial-tab:hover {
  filter: brightness(1.08);
  transform: translateY(calc(-1 * var(--tab-lift)));
}
.testimonial-tab:focus-visible { outline: 2px solid var(--tab-fg); outline-offset: -4px; }
/* Selected tab sits above its neighbours so its soft shadow falls on them */
.testimonial-tab[aria-selected="true"] {
  z-index: 1;
  cursor: default;
  filter: none;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
}

.testimonial-body {
  position: absolute;
  inset: calc(var(--tab-lift) + var(--tab-h)) 0 0 0;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr); /* the review never grows past the card */
  border-radius: var(--radius);
  background: var(--t-bg);
  color: var(--t-fg);
}
.testimonial {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: min(1.5rem, 5cqi);
  min-height: 0;
  padding: 7cqi 6.5cqi;
}
.testimonial-intro { flex-shrink: 0; }
.testimonial[hidden] { display: none; }
.testimonial-intro {
  font-size: clamp(0.8rem, 2.7cqi, 1rem);
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.7;
  max-width: 44ch;
}
.testimonial-intro a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.testimonial-quote {
  font-size: clamp(0.95rem, 3.5cqi, 1.3rem);
  font-weight: 700;
  line-height: 1.45;
}
/* Lower part takes whatever room is left; if the text is longer it's cut with a fade
   (.is-clipped, set by js/modules/testimonials.js) while "Read more" stays visible */
.testimonial-bottom {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* Reviewer photo + name, above the lower text */
.testimonial-author {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem; /* a little extra room above the review text */
}
.testimonial-author[hidden] { display: none; }
.testimonial-photo {
  width: clamp(26px, 7.5cqi, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
/* Letter avatar for reviewers without a photo: a tint of the card's text colour */
.testimonial-initial {
  display: grid;
  place-items: center;
  background: rgba(127, 127, 127, 0.25);
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: clamp(0.8rem, 3.2cqi, 1rem);
  font-weight: 700;
  line-height: 1;
}
/* Name with the designation under it */
.testimonial-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.testimonial-name {
  font-size: clamp(0.85rem, 2.9cqi, 1rem);
  font-weight: 600;
}
.testimonial-role {
  font-size: clamp(0.75rem, 2.5cqi, 0.875rem);
  font-weight: 500;
  opacity: 0.7;
}
.testimonial-bottom .testimonial-quote {
  min-height: 0;
  overflow: hidden;
}
.testimonial-quote.is-clipped {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 2.5em), transparent);
  mask-image: linear-gradient(#000 calc(100% - 2.5em), transparent);
}
/* "Read more" under the shortened review: opens the full text in the popup below */
.testimonial-more {
  align-self: flex-start;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s;
}
.testimonial-more:hover { opacity: 1; }

/* Full review popup over a dimmed page, in the colours of the review's tab
   (--accent / --accent-fg, set by js/modules/testimonials.js) */
.review-dialog {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto; /* long reviews scroll inside the popup */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent, #ffffff);
  color: var(--accent-fg, var(--color-ink));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.review-dialog::backdrop { background: rgba(20, 18, 16, 0.55); }
.review-dialog[open] { animation: review-pop 0.25s ease; }
@keyframes review-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
}
.review-dialog-inner {
  position: relative;
  padding: 1.5rem 2rem 2rem;
}
/* Big opening quote mark, a soft version of the text colour */
.review-dialog-mark {
  display: block;
  height: 2.6rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  opacity: 0.45;
}
.review-dialog-text {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.6;
}
/* Reviewer under the review: the card's row (photo or letter avatar, name, designation), larger */
.review-dialog-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(127, 127, 127, 0.3);
  border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}
.review-dialog-author[hidden] { display: none; }
.review-dialog-author .testimonial-photo { width: 52px; }
.review-dialog-author .testimonial-initial { font-size: 1.35rem; } /* same tint as on the card */
.review-dialog-author .testimonial-name { font-size: 1.05rem; font-weight: 700; }
.review-dialog-author .testimonial-role { font-size: 0.9rem; opacity: 0.6; }
.review-dialog-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s;
}
.review-dialog-close:hover { background: rgba(127, 127, 127, 0.15); background: color-mix(in srgb, currentColor 12%, transparent); }
.review-dialog-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.review-dialog-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: reduce) {
  .review-dialog[open] { animation: none; }
}

/* Card 3: documents folder. The back and front panels are SVG shapes; the papers sit between them
   and peek up on hover (or when js/modules/folder.js adds .is-open on tap) */
.card-folder {
  container-type: inline-size; /* sizes below scale with the card (cqi) */
  cursor: pointer;
}
.card-folder:focus-visible { outline: 3px solid var(--color-wordmark); outline-offset: 3px; }
.folder-back,
.folder-front,
.folder-front-edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Frosted glass: blurs the papers behind it, tinted light blue with a soft white glow.
   The mask cuts it to the front-panel shape (same path as .folder-front-edge in index.html). */
.folder-front {
  --front-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 44.4 A4.4 4.4 0 0 1 4.4 40 H34 C42 40 42 30 50 30 H95.6 A4.4 4.4 0 0 1 100 34.4 V100 H0 Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--front-shape) 0 0 / 100% 100% no-repeat;
  mask: var(--front-shape) 0 0 / 100% 100% no-repeat;
  -webkit-backdrop-filter: blur(2.4cqi) saturate(1.3);
  backdrop-filter: blur(2.4cqi) saturate(1.3);
  background:
    radial-gradient(45% 45% at 62% 62%, rgba(255, 255, 255, 0.3), transparent),
    linear-gradient(rgba(143, 208, 248, 0.6), rgba(85, 176, 236, 0.85) 75%);
}
/* Thin light rim along the glass's top edge */
.folder-front-edge { pointer-events: none; }
.folder-front-edge path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.folder-papers { position: absolute; inset: 0; }
/* Three portrait cards stacked and slightly fanned so they fill the folder.
   On hover they spring up and fan out further, the middle one rising highest. */
.paper {
  position: absolute;
  left: 33%;
  top: 13%;
  width: 34%;
  aspect-ratio: 3 / 4;
  border-radius: 2.2cqi;
  box-shadow: 0 0.4cqi 2cqi rgba(10, 50, 100, 0.22);
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.paper-1 { --x: -18cqi; --y: 2cqi;   --r: -6deg; }
.paper-2 { --x: 18cqi;  --y: 2cqi;   --r: 6deg; }
.paper-3 { --x: 0cqi;    --y: 0cqi;   --r: 0deg; }

/* open: spring up and fan out, staggered so the deck "deals" itself */
@media (hover: hover) {
  .card-folder:hover .paper { transform: translate(var(--ox), var(--oy)) rotate(var(--or)) scale(1.04); }
}
.card-folder.is-open .paper { transform: translate(var(--ox), var(--oy)) rotate(var(--or)) scale(1.04); }
.card-folder:hover .paper,
.card-folder.is-open .paper { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.paper-1 { --ox: -22cqi; --oy: -6cqi;  --or: -12deg; }
.paper-2 { --ox: 22cqi;  --oy: -6cqi;  --or: 12deg; }
.paper-3 { --ox: 0cqi;   --oy: -9cqi;  --or: 0deg; }
.card-folder:hover .paper-1,
.card-folder.is-open .paper-1 { transition-delay: 0.07s; }
.card-folder:hover .paper-2,
.card-folder.is-open .paper-2 { transition-delay: 0.12s; }

/* Each card is filled edge to edge with its own playful pattern (assets/images/patterns/) */
.paper-1 { background: #f6efe0 url("../../assets/images/patterns/pattern-1.svg") -2cqi -4cqi / 34cqi 34cqi; }
.paper-2 { background: #e3eef0 url("../../assets/images/patterns/pattern-2.svg") -1cqi -4cqi / 34cqi 34cqi; }
.paper-3 { background: #fbe8e3 url("../../assets/images/patterns/pattern-3.svg") -9cqi -2cqi / 34cqi 34cqi; }

.folder-label {
  position: absolute;
  left: 6.5cqi;
  bottom: 6.5cqi;
  color: var(--color-white);
  pointer-events: none;
}
.folder-name {
  font-size: 8cqi;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Pills under the title: frosted white chips on the glass */
.folder-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2cqi;
  margin-top: 2.6cqi;
}
.folder-pills li {
  padding: 0.9cqi 2.2cqi;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-white);
  font-size: 2.5cqi;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

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

/* Card 5: promo with grid-paper background */
.card-promo {
  background-color: var(--color-mist);
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--color-ink);
  padding: 2.25rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
}
.promo-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.3vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.promo-title mark {
  background: linear-gradient(transparent 55%, var(--color-lavender) 55%);
  color: inherit;
  padding: 0 0.1em;
}
.promo-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.promo-name {
  color: var(--color-ink);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
}
.btn-pill {
  background: var(--color-bio);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  border: var(--border);
  box-shadow: 3px 3px 0 var(--color-ink);
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-pill:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-ink); }
.btn-pill:active { transform: translate(3px, 3px); box-shadow: none; }

/* Shared bits for cards 6–8 */
.card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

/* Card 6: featured project image */
.card-work {
  overflow: visible; /* lets the buddy peek out over the top edge; the slides clip themselves instead */
  isolation: isolate;
}
/* The card colour (shows while the image loads) sits on a layer of its own, so the buddy can hide behind it */
.card-work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--color-lavender);
}
/* Projects are stacked; the arrows dissolve between them */
.work-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: inherit;
  overflow: hidden;
  transition: opacity 0.4s ease;
  pointer-events: none; /* hidden projects can't be clicked */
}
.work-slide.is-active { opacity: 1; pointer-events: auto; }
.work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-arrows {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  gap: 0.5rem;
}
.work-arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s;
}
.work-arrow:hover { background: rgba(255, 255, 255, 0.35); }
.work-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.work-caption {
  position: absolute;
  top: 1.75rem;
  left: 2rem;
  color: var(--color-ink);
  font-family: var(--font-body);
}
.work-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}
.work-name-link {
  display: grid;
  place-items: center;
  padding: 0.2rem;
  margin: -0.2rem; /* bigger click area without moving the arrow */
  color: inherit;
  border-radius: 6px;
  transition: transform 0.15s, opacity 0.15s;
}
.work-name-link:hover {
  opacity: 0.6;
  transform: translate(2px, -2px);
}
.work-name svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.work-meta {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.6;
}
.icon-btn-arrow {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  background: var(--color-sage);
  color: var(--color-ink);
  /* pill with "Case study" label instead of a plain circle */
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.9rem 0 1.15rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.icon-btn-arrow svg { width: 20px; height: 20px; }

/* Hover doodle: a little yellow buddy peeks up from behind the top edge of the card, in the middle, up to
   its eyes, with "Selected Work!" above its head. It stays up while the mouse is on the card and blinks
   every 2.4 seconds. Clicks go straight through it. */
.work-peek {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: -2; /* behind the card colour layer */
  width: 72px;
  margin-left: -36px;
  pointer-events: none;
}
.work-peek-buddy {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(100%); /* fully hidden behind the card */
  transition: transform 0.25s ease-in;
}
.work-peek-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(46% + 8px); /* just above its head when the buddy is up */
  padding: 0.25rem 0.7rem 0.3rem;
  background: var(--color-white);
  border: var(--border);
  border-radius: 1rem;
  box-shadow: 2px 2px 0 var(--color-ink);
  color: var(--color-ink);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scale(0.4);
  transform-origin: 50% 100%; /* grows out of the buddy's head */
  transition: transform 0.15s ease-in, opacity 0.15s ease;
}
/* Speech tail pointing down at the buddy */
.work-peek-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  background: inherit;
  border-right: var(--border);
  border-bottom: var(--border);
  transform: rotate(45deg);
}
/* Hands reaching over the top edge from above, fingers curled down the front of the card,
   lined up with the buddy's sides */
.work-peek-hands {
  position: absolute;
  left: 50%;
  top: -11px; /* the knuckles sit just above the edge */
  z-index: 3;
  width: 88px;
  margin-left: -44px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px); /* they come down onto the edge */
  transition: transform 0.15s ease-in, opacity 0.1s ease;
}
.work-peek-eye {
  transform-box: fill-box;
  transform-origin: center;
}
/* Pupils look down-left until the mouse moves; then js/modules/peek-eyes.js points them at the mouse */
.work-peek-pupil {
  transform: translate(-1px, 2px);
  transition: transform 0.12s ease-out;
}
@media (hover: hover) {
  .card-work:hover .work-peek-buddy {
    transform: translateY(54%); /* only the top of the head and the eyes show */
    transition: transform 0.55s cubic-bezier(0.34, 1.6, 0.64, 1);
  }
  .card-work:hover .work-peek-hands {
    opacity: 1;
    transform: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1) 0.15s, opacity 0.1s ease 0.15s;
  }
  .card-work:hover .work-peek-bubble {
    opacity: 1;
    transform: translateX(-50%) rotate(-4deg);
    transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1) 0.25s, opacity 0.15s ease 0.25s;
  }
  /* Starts on each hover, so the first blink comes about 2.4 seconds in, then every 2.4 seconds */
  .card-work:hover .work-peek-eye { animation: work-peek-blink 2.4s ease-in-out infinite; }
}
@keyframes work-peek-blink {
  0%, 88%, 100% { transform: scaleY(1); }
  92%           { transform: scaleY(0.08); }
  95%           { transform: scaleY(1.12); } /* a tiny pop as the eyes open again */
}
@media (prefers-reduced-motion: reduce) {
  .work-peek-buddy, .work-peek-bubble, .work-peek-hands { transition: opacity 0.2s ease !important; }
  .card-work:hover .work-peek-eye { animation: none; }
}

/* Card 7: "Life Lately" photo carousel */
.card-gallery {
  background-color: var(--color-ink); /* shows while images load */
  color: var(--color-white);
}
/* Arrows and dots only appear once there's more than one photo */
.card-gallery:not(.has-many) .gallery-arrow,
.card-gallery:not(.has-many) .gallery-dots { display: none; }
.gallery-slides,
.gallery-slide {
  position: absolute;
  inset: 0;
}
.gallery-slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease; /* dissolve between photos (same timing as the photo card) */
}
.gallery-slide.is-active { opacity: 1; }

.gallery-label {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  opacity: 0.7;
  white-space: nowrap;
  pointer-events: none;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--color-white);
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s;
}
.gallery-arrow:hover { opacity: 1; }
.gallery-prev { left: 0.5rem; }
.gallery-next { right: 0.5rem; }
.gallery-arrow svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}
.gallery-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-white);
  opacity: 0.6;
  cursor: pointer;
  transition: width 0.3s, opacity 0.3s;
}
.gallery-dot:hover { opacity: 0.8; }
.gallery-dot.is-active {
  width: 20px;
  opacity: 1;
}

/* Card 8: availability / contact */
.card-contact {
  background-color: var(--color-sage);
  color: var(--color-ink);
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
}
.availability {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-live);
  box-shadow: 0 0 0 4px rgba(63, 155, 90, 0.2);
}
.contact-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  line-height: 1;
}
.contact-email {
  font-weight: 600;
  border-bottom: 2px solid currentColor;
  word-break: break-all;
}
.btn-pill-dark { background: var(--color-white); color: var(--color-ink); }