/* ── Home v2: Impulse-inspired horizontal carousel ──
   Inherits classic styles.css for the floating header and footer.
   This file adds the v2-specific layout, hero, and carousel components. */

/* Body override — only background and antialiasing; keep classic font for the header/footer */
body.v2-page {
  background: #ffffff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The classic script.js auto-adds `is-intro` to the body on every page load
   and styles.css hides main/footer/header during the intro overlay.
   v2 doesn't use the intro overlay — force everything visible. */
body.v2-page main,
body.v2-page.is-intro main,
body.v2-page .site-footer,
body.v2-page.is-intro .site-footer,
body.v2-page .site-header,
body.v2-page.is-intro .site-header,
body.v2-page .scroll-progress,
body.v2-page.is-intro .scroll-progress {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.v2-page,
body.v2-page.is-intro {
  overflow: visible;
}

/* Main container — give space for the floating pill header
   And scope v2 typography here so it doesn't bleed into the classic header/footer */
.v2-main {
  padding-top: calc(var(--header-height, 88px) + 4px);
  color: #111111;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: normal;
}

.v2-main a {
  text-decoration: none;
}

/* ── Hero ── */
.v2-hero {
  text-align: center;
  padding: 32px 40p 0px;
}

.v2-hero__title {
  /* Match project detail page title style */
  font-family: "Geologica", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 2.1vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #111;
  margin: 0 auto 16px;
  padding: 0 60px;
  max-width: 1200px;
}

.v2-hero__subtitle {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 17px;
  color: #4a4a4a;
  line-height: 1.5;
  max-width: 520px;
  margin: 0 auto 14px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}

.v2-hero__hint {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6a6a6a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When user has dragged the carousel, fade out both hint elements gracefully */
body.has-dragged .v2-hero__hint,
body.has-dragged .v2-carousel-hint {
  opacity: 0;
  pointer-events: none;
}

/* ── Carousel ── */
.v2-carousel-wrap {
  position: relative;
  padding: 0 0 24px;
  /* Mask edges with soft gradient fade so cards bleed off-screen cleanly */
}

/* v2-page: remove the footer's top dividing line for a cleaner look */
body.v2-page .site-footer {
  border-top: none;
  padding-top: 16px;
}

.v2-carousel {
  display: flex;
  align-items: flex-start; /* Don't stretch cards to container height */
  gap: 18px;
  /* Big left padding pushes first card to ~30% of viewport on load.
     Right padding leaves shadow-clipping room. */
  padding: 40px 80px 60px;
  padding-left: 21vw;
  /* scroll-padding tells snap behavior to leave this much space at the start
     so snap doesn't auto-scroll the first card flush to the left edge */
  scroll-padding-left: 21vw;
  overflow-x: auto;
  cursor: grab;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position, transform;
  /* CSS-only elastic feel on supported browsers (Safari/iOS) */
  overscroll-behavior-x: contain;
}

.v2-carousel::-webkit-scrollbar {
  display: none;
}

.v2-carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.v2-carousel.is-dragging * {
  pointer-events: none;
}

/* ── Card ── */
.v2-card {
  flex: 0 0 360px !important;
  width: 360px !important;
  height: 480px !important;
  min-height: 480px !important;
  max-height: 480px !important;
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  /* Flex column with explicit centering — iOS Safari handles column direction more reliably with fixed heights */
  display: flex;
  flex-direction: column;
  align-items: center;       /* horizontal */
  justify-content: center;   /* vertical (main axis) */
  box-sizing: border-box;
  /* Slow, gentle easing — Shopify-style "settle" feel */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
  /* Resting state — animation only applies during entrance, then reverts to these */
  opacity: 1;
  /* Staggered entrance: backwards fill-mode applies FROM state during delay,
     then reverts to author styles after — so hover transitions can work normally */
  animation: v2CardEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

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

/* Stagger animation delays — JS sets --i index per card */
.v2-card { animation-delay: calc(var(--i, 0) * 0.1s + 0.12s); }

.v2-card:hover {
  transform: scale(1.03);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
}

/* Per-card color palette (assigned by JS) */
.v2-card[data-color="forest"]    { background: #2d4a3a; color: #eaf0ec; }
.v2-card[data-color="terracotta"]{ background: #c46a4f; color: #fff4ee; }
.v2-card[data-color="midnight"]  { background: #1a2342; color: #e6e9f5; }
.v2-card[data-color="cream"]     { background: #ecdfc4; color: #3a2f1c; }
.v2-card[data-color="gold"]      { background: #d9a232; color: #2a1d05; }
.v2-card[data-color="sky"]       { background: #b9d6e8; color: #1c2f3a; }
.v2-card[data-color="rose"]      { background: #e8b8c0; color: #3a1a23; }
.v2-card[data-color="charcoal"]  { background: #1a1a1a; color: #e8e8e8; }

/* Background project name (the partially-hidden big type) — absolute overlay, centered via inner flex */
.v2-card__bg-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geologica", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(72px, 9vw, 110px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  opacity: 0.5;
  pointer-events: none;
  text-transform: uppercase;
  z-index: 1;
}

/* Foreground image — absolute centering via inset:0 + margin:auto, 4:3 aspect (wider than tall) */
.v2-card__image-wrap {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72%;
  /* 4:3 aspect: card 360×480 → image 259×194 = 40.5% of height. Card 280×373 → image 201×151 = 40.5%. */
  height: 40.5%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  transform: rotate(-2deg);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.v2-card:nth-child(even) .v2-card__image-wrap {
  transform: rotate(2deg);
}

/* Subtle hover: just a small "settle" rotation toward neutral */
.v2-card:hover .v2-card__image-wrap {
  transform: rotate(-1deg);
}

.v2-card:nth-child(even):hover .v2-card__image-wrap {
  transform: rotate(1deg);
}

.v2-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Top tag (project type) */
.v2-card__tag {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
  z-index: 3;
}

/* Bottom metadata bar */
.v2-card__meta {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 3;
}

.v2-card__title {
  max-width: 60%;
  line-height: 1.2;
}

.v2-card__year {
  opacity: 0.75;
}

/* ── Pure-type variant (no image, like Shopify's "Building Artifact" cards) ── */
.v2-card--type-only .v2-card__statement {
  font-family: "Geologica", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  z-index: 2;
  position: absolute;
  top: 60px; /* Sits below the tag (which is at top: 24px) with breathing room */
  left: 24px;
  right: 24px;
}

/* Optional decorative element for type-only cards — radiating concentric circles */
.v2-card--type-only::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.15;
  box-shadow:
    inset 0 0 0 1px currentColor,
    0 0 0 40px transparent,
    0 0 0 80px transparent;
  pointer-events: none;
}

/* ── Fan variant — absolute centering, same 4:3 aspect ── */
.v2-card--fan .v2-card__fan {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72%;
  height: 40.5%;
  z-index: 2;
}

.v2-card__fan-item {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-card__fan-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Default rotations create a contained "stacked deck" look — back items peek out subtly */
.v2-card__fan-item--3 {
  transform: rotate(-7deg) translate(-7%, 4%);
  z-index: 1;
}

.v2-card__fan-item--2 {
  transform: rotate(5deg) translate(6%, 3%);
  z-index: 2;
}

.v2-card__fan-item--1 {
  transform: rotate(-2deg) translate(0, 0);
  z-index: 3;
}

/* Hover: subtle settle — each item shifts a hair, like the deck nudged */
.v2-card--fan:hover .v2-card__fan-item--3 {
  transform: rotate(-9deg) translate(-9%, 5%);
}
.v2-card--fan:hover .v2-card__fan-item--2 {
  transform: rotate(6deg) translate(7%, 4%);
}
.v2-card--fan:hover .v2-card__fan-item--1 {
  transform: rotate(-1deg) translate(0, -1%);
}

/* Lazy-load sentinel — invisible element after the initial cards.
   IntersectionObserver fires when the user scrolls near it, triggering
   the rest of the projects to render. Width is small so it doesn't
   create a visible gap; height matches cards so flex doesn't collapse. */
.v2-carousel-sentinel {
  flex: 0 0 1px;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Drag hint */
.v2-carousel-hint {
  position: absolute;
  right: 40px;
  top: -32px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6a6a6a;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .v2-hero {
    padding: 60px 20px 40px;
  }
  .v2-carousel {
    padding: 30px 0 50px;
    /* Symmetric padding so cards land centered with peek of next/prev on both sides */
    padding-left: 10vw;
    padding-right: 10vw;
    scroll-padding-left: 10vw;
    scroll-padding-right: 10vw;
    gap: 12px;
    /* Snappy native swipe on mobile: mandatory snap = always lands on a card */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Disable the rubber-band JS transform on mobile so native scroll handles edges */
    overscroll-behavior-x: contain;
  }
  .v2-card {
    /* Taller, screen-filling cards on mobile */
    flex: 0 0 80vw !important;
    width: 80vw !important;
    height: 65vh !important;
    min-height: 65vh !important;
    max-height: 65vh !important;
    padding: 20px;
    /* Snap to center instead of start so cards land centered in viewport with peek on both sides */
    scroll-snap-align: center;
  }
  .v2-card__image-wrap,
  .v2-card--fan .v2-card__fan {
    /* Maintain 4:3 aspect using vw units: 72% of 80vw = 57.6vw wide, height = 57.6vw × 3/4 = 43.2vw */
    height: 43.2vw;
  }
  .v2-card__bg-text {
    /* Bigger on mobile so edges peek past the image/fan and create the layered look */
    font-size: 88px;
  }
  .v2-carousel-hint {
    right: 20px;
  }
}

@media (max-width: 600px) {
  .v2-hero {
    padding: 16px 20px 16px;
  }
  /* Title stays at desktop size — the clamp() handles small viewports naturally */

  /* Hide BOTH drag hints on mobile — swiping is self-explanatory on touch devices */
  .v2-carousel-hint,
  .v2-hero__hint {
    display: none;
  }

  /* Flatten card image rotation on mobile so it doesn't look off-center in small cards */
  .v2-card__image-wrap,
  .v2-card:nth-child(even) .v2-card__image-wrap {
    transform: rotate(0);
  }
  .v2-card:hover .v2-card__image-wrap,
  .v2-card:nth-child(even):hover .v2-card__image-wrap {
    transform: rotate(0);
  }

  /* Tighten the fan stack on mobile so back items don't peek too far out */
  .v2-card__fan-item--3 {
    transform: rotate(-5deg) translate(-4%, 3%);
  }
  .v2-card__fan-item--2 {
    transform: rotate(4deg) translate(4%, 2%);
  }
  .v2-card__fan-item--1 {
    transform: rotate(0);
  }
  .v2-card--fan:hover .v2-card__fan-item--3 {
    transform: rotate(-6deg) translate(-5%, 4%);
  }
  .v2-card--fan:hover .v2-card__fan-item--2 {
    transform: rotate(5deg) translate(5%, 3%);
  }
  .v2-card--fan:hover .v2-card__fan-item--1 {
    transform: rotate(0) translate(0, -1%);
  }
}

/* ──────────────────────────────────────────────────────────
   Resume Modal — clean takeover with solid backdrop
   ────────────────────────────────────────────────────────── */

/* Page underneath stays visible briefly then is covered by opaque backdrop.
   Lock pointer events so nothing under is clickable while modal is open. */
body.v2-modal-open .v2-main,
body.v2-modal-open .site-header,
body.v2-modal-open .site-footer {
  pointer-events: none;
}

/* Modal container */
.v2-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.45s;
}

.v2-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}

/* Backdrop — semi-transparent cream so a hint of the page peeks through */
.v2-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(245, 240, 232, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-modal.is-open .v2-modal__backdrop {
  opacity: 1;
}

/* Scroll container — fills viewport, hosts the article panel */
.v2-modal__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 24px 80px;
  /* Hide system cursor on backdrop — custom cursor handles it */
  cursor: none;
}

/* Article — the actual readable content */
.v2-modal__content {
  position: relative;
  max-width: 720px;
  width: 100%;
  background: #ffffff;
  border-radius: 24px;
  padding: 64px 56px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18),
              0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(40px) scale(0.96);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  /* Restore normal cursor inside content for selecting/copying */
  cursor: text;
  /* Override main-content text styles — body has global uppercase + small caps */
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 15px;
  color: #1a1a1a;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: normal;
}

/* Reset all child elements to sentence case by default */
.v2-modal__content,
.v2-modal__content * {
  text-transform: none;
  letter-spacing: normal;
}

/* Bring back uppercase ONLY for explicit label/meta styles */
.v2-modal__content .v2-resume__role,
.v2-modal__content .v2-resume__section-label,
.v2-modal__content .v2-resume__job-meta {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.v2-modal__content .v2-resume__section-label {
  letter-spacing: 0.14em;
}

.v2-modal.is-open .v2-modal__content {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition-delay: 0.08s;
}

/* Allow text selection inside the modal */
.v2-modal__content,
.v2-modal__content * {
  user-select: text;
  -webkit-user-select: text;
}

/* Close X button (top right corner, always visible) */
.v2-modal__close-x {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #e6e6e6;
  background: #ffffff;
  color: #111;
  font-size: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.v2-modal__close-x:hover {
  background: #f5f5f5;
  transform: scale(1.05);
}

/* Custom cursor — only appears when modal is open */
.v2-modal__cursor {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  background: #111;
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.v2-modal__cursor.is-active {
  opacity: 1;
}

.v2-modal__cursor.is-over-content {
  opacity: 0;
}

/* ── Resume content layout inside modal ── */
.v2-resume__header {
  border-bottom: 1px solid #ececec;
  padding-bottom: 24px;
  margin-bottom: 28px;
}

.v2-resume__header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.v2-resume__name {
  font-family: "Geologica", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 6px;
  color: #0a0a0a;
}

.v2-resume__role {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6a6a6a;
}

.v2-resume__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
}

.v2-resume__links a {
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-color: #c8c8c8;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.v2-resume__links a:hover {
  text-decoration-color: #1a1a1a;
}

.v2-resume__section {
  margin-bottom: 28px;
}

.v2-resume__section-label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6a6a;
  margin-bottom: 14px;
}

.v2-resume__summary {
  font-size: 15px;
  line-height: 1.65;
  color: #2a2a2a;
}

.v2-resume__job {
  margin-bottom: 22px;
}

.v2-resume__job:last-child {
  margin-bottom: 0;
}

.v2-resume__job-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.v2-resume__job-title {
  font-family: "Geologica", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: #0a0a0a;
}

.v2-resume__job-meta {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a6a6a;
  white-space: nowrap;
}

.v2-resume__job-bullets {
  list-style: disc;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #3a3a3a;
}

.v2-resume__job-bullets li {
  margin-bottom: 4px;
}

.v2-resume__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-resume__chip {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  background: #f5f3ef;
  color: #2a2a2a;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.v2-resume__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.v2-resume__download:hover {
  transform: translateY(-1px);
  background: #2a2a2a;
}

/* Small variant for the header CTA */
.v2-resume__download--small {
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  gap: 6px;
  flex-shrink: 0;
}

.v2-resume__download--small i {
  font-size: 10px;
}

@media (max-width: 700px) {
  /* ── Bottom sheet on mobile ──
     The modal becomes a sheet anchored to the bottom of the viewport,
     sliding up on open and down on close. */

  /* Scroll container: align content to bottom-end so the sheet hugs the bottom edge */
  .v2-modal__scroll {
    padding: 0;
    align-items: flex-end;
    cursor: pointer; /* whole backdrop area = "click to dismiss" affordance */
  }

  /* Content panel: full-width, 85vh tall, rounded only on the top */
  .v2-modal__content {
    width: 100vw;
    max-width: 100vw;
    max-height: 85vh;
    height: 85vh;
    padding: 28px 24px 32px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    /* Slide up from below on open, down on close */
    transform: translateY(100%);
    opacity: 1; /* override desktop's fade — only translate animates */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    /* Internal scroll for resume content */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .v2-modal.is-open .v2-modal__content {
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Drag handle indicator at the top of the sheet — visual hint that this is a sheet */
  .v2-modal__content::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    margin: 0 auto 18px;
    flex-shrink: 0;
  }

  /* Close button: smaller and tighter on mobile sheet */
  .v2-modal__close-x {
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  /* Resume content layout adjustments for narrow sheet */
  .v2-resume__name {
    font-size: 28px;
  }

  /* Stack the header on mobile so name has full width */
  .v2-resume__header-top {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .v2-resume__download--small {
    align-self: flex-start;
  }

  .v2-resume__links {
    gap: 10px 18px;
    font-size: 12px;
  }
}