/* Desktop homepage layout transcribed from the approved 1920 × 4066 SVG.
   The SVG is a measurement source only; page content stays semantic and interactive. */

/* The SVG master scales continuously across desktop widths.
   Tablet/mobile layouts below 981px remain untouched. */
@media (min-width: 981px) {
  .intro-version .footer-row {
    grid-template-columns: minmax(230px, 0.42fr) minmax(0, 0.58fr);
  }
}

/* Approved homepage Profile and Contact artwork. Keep each 1920px SVG canvas
   intact: proportional scaling only, with no fixed-height crop or cover mode. */
body.intro-version .home-responsive-section {
  min-width: 0;
  background: #050505;
  scroll-margin-top: 90px;
}

body.intro-version .home-responsive-section--about { order: 7; }
body.intro-version .home-responsive-section--contact { order: 8; }

html[data-site-device="desktop"] body.intro-version .motion-hero .pixel-field {
  display: none !important;
}

body.intro-version .home-mobile-section {
  display: none;
}

body.intro-version .education-history {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.intro-version .education-history li {
  display: grid;
  grid-template-columns: minmax(88px, 0.22fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.intro-version .education-history time {
  padding-top: 3px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.35;
  white-space: nowrap;
}

body.intro-version .home-svg-section {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: #050505;
  color: #ffffff;
  font-size: 0;
  line-height: 0;
  overflow: visible;
}

body.intro-version .home-svg-section-art {
  display: block;
  width: min(100%, 1920px);
  max-width: 1920px;
  height: auto;
  margin: 0 auto;
  border: 0;
  object-fit: contain;
  object-position: center top;
}

body.intro-version .home-svg-contact-links {
  position: absolute;
  inset: 0;
  width: min(100%, 1920px);
  max-width: 1920px;
  margin: 0 auto;
  pointer-events: none;
}

body.intro-version .home-svg-contact-links a {
  position: absolute;
  left: 45.5%;
  z-index: 1;
  width: 22%;
  height: 4%;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  pointer-events: auto;
}

body.intro-version .home-svg-contact-email { top: 14.5%; }
body.intro-version .home-svg-contact-phone { top: 18.2%; }
body.intro-version .home-svg-contact-pdf { top: 21.9%; }

body.intro-version .home-svg-contact-links a:focus-visible {
  outline: 2px solid #b8f911;
  outline-offset: 3px;
}

@media (max-width: 980px) {
  html[data-site-device="mobile"] {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.intro-version .home-desktop-section {
    display: none;
  }

  body.intro-version .home-mobile-section.about-section {
    display: grid;
  }

  body.intro-version .home-mobile-section.contact-section {
    display: block;
  }

  body.intro-version .about-education-row .about-row-copy {
    gap: 20px;
  }

  body.intro-version .education-history {
    gap: 22px;
  }

  body.intro-version .education-history li {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  body.intro-version .education-history time {
    padding-top: 0;
  }

  html[data-site-device="mobile"] body.intro-version .home-mobile-section .footer-bottom span {
    visibility: hidden;
  }

  html[data-site-device="mobile"] body.intro-version .footer-wordmark {
    font-size: clamp(68px, 22vw, 88px);
    white-space: nowrap;
  }
}

/* Keep the desktop PDF label optically centered at every computer width.
   Mobile retains its existing header/button rules. */
@media (min-width: 621px) {
  .intro-version .pdf-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 49px;
    min-width: 49px;
    min-height: 28px;
    height: 28px;
    padding: 0;
    text-align: center;
    line-height: 1;
  }
}

@media (min-width: 981px) {
  body.intro-version {
    --home-scale: clamp(0.5109375, calc(100vw / 1920px), 1);
    --home-gutter: calc(108px * var(--home-scale));
    --home-canvas-offset: max(0px, calc((100vw - 1920px) / 2));
    --home-paper: #f7f7f5;
    --home-ink: #111111;
  }

  .intro-version .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: calc(39px * var(--home-scale));
    min-height: 72px;
    height: 72px;
    padding: 0 calc(var(--home-canvas-offset) + 107px * var(--home-scale)) 0 calc(var(--home-canvas-offset) + var(--home-gutter));
    background: rgba(247, 247, 245, 0.98);
    border-bottom: 1px solid #c7c6c2;
    backdrop-filter: none;
  }

  .intro-version .brand {
    font-size: clamp(26px, calc(36px * var(--home-scale)), 36px);
    font-weight: 600;
    line-height: 1;
  }

  .intro-version .site-header nav {
    position: static;
    justify-self: end;
    gap: clamp(28px, calc(52px * var(--home-scale)), 52px);
    color: var(--home-ink);
    font-size: 14px;
    line-height: 1;
  }

  .intro-version .pdf-link {
    position: static;
    justify-self: end;
    width: 49px;
    min-height: 28px;
    height: 28px;
    padding: 0;
    background: #b8f911;
    color: var(--home-ink);
    font-size: 14px;
    line-height: 1;
  }

  .intro-version .motion-hero {
    height: calc(540px * var(--home-scale));
    min-height: calc(540px * var(--home-scale));
    aspect-ratio: auto;
    margin-top: 72px;
    padding: 0;
    background: var(--home-paper);
    color: var(--home-ink);
  }

  .intro-version .homepage-intro-desktop-art,
  .intro-version .intro-topline,
  .intro-version .scroll-cue,
  .intro-version .motion-wordmark {
    display: none !important;
  }

  .intro-version .motion-hero-inner {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .intro-version .motion-statement {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    mix-blend-mode: normal;
  }

  .intro-version .intro-kicker {
    position: absolute;
    top: calc(205px * var(--home-scale));
    left: calc(var(--home-canvas-offset) + 259px * var(--home-scale));
    display: block;
    width: calc(520px * var(--home-scale));
    max-width: none;
    height: calc(255px * var(--home-scale));
    padding: 0;
    color: var(--home-ink);
    font-size: clamp(11px, calc(16px * var(--home-scale)), 16px);
    font-weight: 300;
    line-height: 1.03;
  }

  .intro-version .intro-kicker p {
    margin: 0;
    font-size: clamp(34px, calc(66px * var(--home-scale)), 66px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
  }

  .intro-version .intro-kicker dl {
    position: absolute;
    top: calc(128px * var(--home-scale));
    left: calc(-5px * var(--home-scale));
    display: grid;
    gap: 0;
    margin: 0;
    font-size: 16px;
    line-height: calc(33px * var(--home-scale));
  }

  .intro-version .intro-kicker dt,
  .intro-version .intro-kicker dd {
    font-size: inherit;
  }

  .intro-version .intro-copy {
    position: absolute;
    top: calc(200px * var(--home-scale));
    left: calc(var(--home-canvas-offset) + 919px * var(--home-scale));
    display: grid;
    width: calc(712px * var(--home-scale));
    max-width: none;
    gap: calc(62px * var(--home-scale));
  }

  .intro-version .motion-statement h1 {
    margin: 0;
    font-size: clamp(22px, calc(40px * var(--home-scale)), 40px);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -0.02em;
  }

  .intro-version .intro-copy > p {
    width: calc(696px * var(--home-scale));
    max-width: none;
    margin: 0;
    color: var(--home-ink);
    font-size: clamp(11px, calc(16px * var(--home-scale)), 16px);
    font-weight: 300;
    line-height: 1.35;
  }

  html[data-home-preview="current"] .intro-version .work-section,
  html[data-home-preview="previous"] .intro-version .work-section {
    position: relative;
    min-height: calc(2282px * var(--home-scale));
    height: calc(2282px * var(--home-scale));
    padding: calc(279px * var(--home-scale)) 0 0;
    border-top: 0;
    background: var(--home-paper);
  }

  html[data-home-preview="current"] .intro-version .work-section::before,
  html[data-home-preview="previous"] .intro-version .work-section::before {
    content: "";
    position: absolute;
    top: calc(86px * var(--home-scale));
    right: calc(var(--home-canvas-offset) + 94px * var(--home-scale));
    left: calc(var(--home-canvas-offset) + var(--home-gutter));
    height: 1px;
    background: #c7c6c2;
  }

  html[data-home-preview="current"] .intro-version .work-section .section-head,
  html[data-home-preview="previous"] .intro-version .work-section .section-head {
    display: block;
    width: calc(1195px * var(--home-scale));
    max-width: none;
    margin: 0 0 calc(81px * var(--home-scale)) calc(var(--home-canvas-offset) + 342px * var(--home-scale));
    text-align: center;
  }

  .intro-version .work-section .section-head h2,
  html[data-home-preview="previous"] .intro-version .work-section .section-head h2 {
    margin: 0;
    width: 100%;
    max-width: none;
    color: var(--home-ink);
    font-size: clamp(24px, calc(36px * var(--home-scale)), 36px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .intro-version .project-grid,
  html[data-home-preview="current"] .intro-version .work-section .project-grid,
  html[data-home-preview="previous"] .intro-version .work-section .project-grid {
    grid-template-columns: repeat(3, calc(365px * var(--home-scale)));
    column-gap: calc(50px * var(--home-scale));
    row-gap: calc(105px * var(--home-scale));
    width: calc(1195px * var(--home-scale));
    max-width: none;
    margin: 0 0 0 calc(var(--home-canvas-offset) + 342px * var(--home-scale));
  }

  .intro-version .project-card,
  .intro-version .project-card.size-l {
    width: calc(365px * var(--home-scale));
    gap: calc(25px * var(--home-scale));
  }

  .intro-version .project-card picture {
    display: block;
    width: calc(365px * var(--home-scale));
    height: calc(461px * var(--home-scale));
    overflow: hidden;
  }

  .intro-version .project-card .work-image,
  .intro-version .project-card.size-l .work-image {
    width: calc(365px * var(--home-scale));
    height: calc(461px * var(--home-scale));
    aspect-ratio: auto;
    object-fit: cover;
  }

  .intro-version .project-card span {
    min-height: 15px;
    padding: 0;
    color: var(--home-ink);
    font-size: clamp(10px, calc(12px * var(--home-scale)), 12px);
    line-height: calc(15px * var(--home-scale));
    letter-spacing: 0;
  }

  .intro-version .project-card.selected-rckless { order: 1; }
  .intro-version .project-card.selected-running { order: 2; }
  .intro-version .project-card.selected-cmf { order: 3; }
  .intro-version .project-card.selected-l508 { order: 4; }
  .intro-version .project-card.selected-basis { order: 5; }
  .intro-version .project-card.selected-828 { order: 6; }
  .intro-version .project-card.selected-simian { order: 7; margin-top: calc(35px * var(--home-scale)); }
  .intro-version .project-card.selected-olive { order: 8; margin-top: calc(35px * var(--home-scale)); }
  .intro-version .project-card.selected-li { order: 9; margin-top: calc(35px * var(--home-scale)); }

  body.intro-version .file-section {
    position: relative;
    display: block;
    min-height: calc(909px * var(--home-scale));
    height: calc(909px * var(--home-scale));
    padding: 0;
    border-top: 0;
    background: var(--home-paper);
    overflow: hidden;
  }

  body.intro-version .file-section::before {
    content: "";
    position: absolute;
    top: calc(86px * var(--home-scale));
    right: calc(var(--home-canvas-offset) + 62px * var(--home-scale));
    left: calc(var(--home-canvas-offset) + 62px * var(--home-scale));
    height: 1px;
    background: #c7c6c2;
  }

  body.intro-version .file-intro {
    position: absolute;
    top: calc(187px * var(--home-scale));
    left: calc(var(--home-canvas-offset) + var(--home-gutter));
    display: block;
    width: calc(390px * var(--home-scale));
    min-height: 0;
    padding: 0;
  }

  body.intro-version .file-intro > p,
  body.intro-version .file-intro > span {
    margin: 0;
    color: #787775;
    font-size: clamp(10px, calc(14px * var(--home-scale)), 14px);
    font-weight: 300;
    line-height: 1;
  }

  body.intro-version .file-intro h2 {
    width: calc(388px * var(--home-scale));
    max-width: none;
    margin: calc(140px * var(--home-scale)) 0 calc(66px * var(--home-scale));
    color: var(--home-ink);
    font-size: clamp(34px, calc(64px * var(--home-scale)), 64px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  body.intro-version .file-intro > span {
    color: #787775;
    font-size: clamp(10px, calc(16px * var(--home-scale)), 16px);
  }

  body.intro-version .file-stack.is-scroll-deck {
    --desktop-card-width: calc(336px * var(--home-scale));
    --desktop-card-height: calc(424px * var(--home-scale));
    --desktop-step: calc(114px * var(--home-scale));
    --desktop-rise: 0px;
    position: absolute;
    top: calc(252px * var(--home-scale));
    left: calc(var(--home-canvas-offset) + 648px * var(--home-scale));
    width: calc(1048px * var(--home-scale));
    height: calc(426px * var(--home-scale));
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    perspective: none;
  }

  body.intro-version .file-stack.is-scroll-deck .file-card:not(.mobile-deck-only),
  body.intro-version .file-stack.is-scroll-deck .file-card:not(.mobile-deck-only):hover,
  body.intro-version .file-stack.is-scroll-deck .file-card:not(.mobile-deck-only):focus-visible,
  body.intro-version .file-stack.is-scroll-deck .torras-file-card:not(.mobile-deck-only):focus-within {
    top: 0;
    width: var(--desktop-card-width);
    height: var(--desktop-card-height);
  }

  .intro-version .poster-section {
    gap: calc(64px * var(--home-scale));
    padding: calc(108px * var(--home-scale)) 0 calc(128px * var(--home-scale));
    border-top: 0;
    background: #111111;
  }

  .intro-version .poster-head {
    display: block;
    padding-right: calc(var(--home-canvas-offset) + var(--home-gutter));
    padding-left: calc(var(--home-canvas-offset) + var(--home-gutter));
  }

  .intro-version .poster-head p {
    margin: 0 0 calc(22px * var(--home-scale));
    color: #6b6b6b;
    font-size: clamp(10px, calc(13px * var(--home-scale)), 13px);
    line-height: 1;
  }

  .intro-version .poster-head h2 {
    width: auto;
    max-width: none;
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, calc(64px * var(--home-scale)), 64px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  .intro-version .poster-track {
    gap: calc(30px * var(--home-scale));
    padding-right: calc(var(--home-canvas-offset) + var(--home-gutter));
    padding-left: calc(var(--home-canvas-offset) + var(--home-gutter));
  }

  .intro-version .poster-item {
    width: calc(350px * var(--home-scale));
    gap: calc(12px * var(--home-scale));
  }

  .intro-version .poster-item img,
  .intro-version .poster-item.square img {
    height: calc(515px * var(--home-scale));
  }

  .intro-version .poster-item.landscape {
    width: calc(515px * var(--home-scale));
  }

  .intro-version .about-section,
  .intro-version .contact-section {
    padding-right: calc(var(--home-canvas-offset) + var(--home-gutter));
    padding-left: calc(var(--home-canvas-offset) + var(--home-gutter));
  }
}