/* First-pass UX changes layered over the Cargo snapshot. Loaded after Cargo's own CSS. */
:root {
  --ap-ink: rgba(0, 0, 0, 0.85);
  --ap-mid: rgba(0, 0, 0, 0.62);
  --ap-line: rgba(0, 0, 0, 0.12);
}

a:focus-visible { outline: 2px solid #000; outline-offset: 3px; border-radius: 4px; }

/* Header (option B): role statement beside the logo, pills below a hairline.
   Sizes follow a perfect-fourth step from Cargo's fluid rem (18px at 1440): statement 1.97rem = 35.5px, pills 1.11rem = 20px. */
#Z2024047029 .ap-statement {
  font-family: "Neue Haas Grotesk";
  font-size: 1.97rem; --font-size: 1.97rem;
  line-height: 1.18;
  color: var(--ap-ink);
  max-width: 21em;
  text-wrap: balance;
}
#Z2024047029 .ap-rule {
  background: var(--ap-line);
  height: 1px;
  margin: 1.9rem 0 0.9rem;
}
#Z2024047029 .ap-filters { margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem 0.33rem; }
#Z2024047029 .ap-filters a {
  font-size: 1.11rem; --font-size: 1.11rem;
  padding: 0.36em 0.8em;
  margin: 0 !important;
  line-height: 1.2;
}

/* Project pages (everything except nav, header, footer, about and grid) */
.page:not(#C2244050512):not(#W2152567637):not(#Z2024047029):not(#P3894460573):not(#L0401917115):not(#I0663975131) bodycopy > column-set:first-of-type {
  align-items: baseline;
}
.page:not(#C2244050512):not(#W2152567637):not(#Z2024047029):not(#P3894460573):not(#L0401917115):not(#I0663975131) bodycopy > column-set:first-of-type > column-unit {
  font-size: 0.95rem; --font-size: 0.95rem;
  color: var(--ap-mid);
}
.page:not(#C2244050512):not(#W2152567637):not(#Z2024047029):not(#P3894460573):not(#L0401917115):not(#I0663975131) bodycopy > column-set:first-of-type > column-unit[slot="0"] {
  color: var(--ap-ink);
}
.page:not(#C2244050512):not(#W2152567637):not(#Z2024047029):not(#P3894460573):not(#L0401917115):not(#I0663975131) bodycopy > column-set:first-of-type > column-unit[slot="0"] a {
  color: inherit;
}

/* Project info panel: top aligned and pinned beside the media while it scrolls */
.page:not(#Z2024047029):not(#L0401917115) column-unit[span="4"] {
  align-self: flex-start !important;
  position: sticky;
  top: 1.5rem;
  height: auto !important;
}
.page:not(#Z2024047029):not(#L0401917115) column-unit[span="4"] .project-info {
  height: auto !important;
  justify-content: flex-start !important;
}

/* Grid captions: readable size */
[thumbnail-index] .caption {
  font-family: "Diatype Variable";
  font-variation-settings: 'slnt' 0, 'MONO' 0;
  font-size: 0.7rem; --font-size: 0.7rem;
  color: var(--ap-mid);
}

/* Footer */
.ap-foot { color: var(--ap-mid); }

/* About page */
#L0401917115 .ap-bio-top { margin: 0 0 2.2rem; }
#L0401917115 .ap-bio-name { font-size: 2.4rem; --font-size: 2.4rem; font-weight: 500; line-height: 1.05; color: var(--ap-ink); }
#L0401917115 .ap-bio-role { font-family: "Neue Haas Grotesk"; font-size: 1.15rem; color: var(--ap-ink); margin: 0.35rem 0 1.1rem; }
#L0401917115 .ap-contact a { margin: 0 0.35rem 0.5rem 0; }
#L0401917115 .ap-contact .button-3:hover,
#L0401917115 .ap-contact .button-4:hover { box-shadow: 3px 3px 0 #000, 6px 6px 0 #000, 9px 9px 0 #000; }
#L0401917115 column-unit[slot="1"] { justify-content: flex-start !important; }
#L0401917115 .ap-bio-text { top: 0 !important; }
#L0401917115 .ap-list-title {
  font-size: 0.72rem; --font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ap-mid);
  margin: 1.8rem 0 0.4rem;
}
#L0401917115 .ap-row {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 0.75fr;
  gap: 0.8rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--ap-line);
  font-size: 0.85rem; --font-size: 0.85rem;
  line-height: 1.25;
  color: var(--ap-ink);
}
#L0401917115 .ap-row span:last-child { color: var(--ap-mid); text-align: right; }
#L0401917115 .ap-row a { color: inherit; text-decoration: underline; }

/* Mobile nav: labelled links instead of unlabelled icons */
.ap-mnav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.ap-mnav a { color: var(--ap-ink); text-decoration: none; }
.ap-mnav .icon-link:first-of-type { margin-left: auto; }

@media (max-width: 768px) {
  /* Smaller logo and one swipeable row of pills, so the first project shows sooner */
  #Z2024047029 column-unit[slot="0"] media-item { width: 80% !important; margin: 0 auto; display: block; }
  #Z2024047029 .buttons-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.2rem 2rem 0.6rem 0;
    margin-right: -2rem;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  #Z2024047029 .buttons-group::-webkit-scrollbar { display: none; }
  #Z2024047029 .buttons-group a { flex: 0 0 auto; margin: 0 !important; }
  #Z2024047029 .ap-statement { font-size: 1.545rem; --font-size: 1.545rem; line-height: 1.22; margin-top: 0.4rem; }
  #Z2024047029 .ap-rule { margin: 1.1rem 0 0.7rem; }
  #Z2024047029 .ap-filters a { font-size: 1.3rem; --font-size: 1.3rem; }

  /* Project title on its own line, meta on one line under it */
  .page:not(#C2244050512):not(#W2152567637):not(#Z2024047029):not(#P3894460573):not(#L0401917115):not(#I0663975131) bodycopy > column-set:first-of-type {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    column-gap: 0.7em;
    row-gap: 0.2em;
  }
  .page:not(#C2244050512):not(#W2152567637):not(#Z2024047029):not(#P3894460573):not(#L0401917115):not(#I0663975131) bodycopy > column-set:first-of-type > column-unit {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .page:not(#C2244050512):not(#W2152567637):not(#Z2024047029):not(#P3894460573):not(#L0401917115):not(#I0663975131) bodycopy > column-set:first-of-type > column-unit[slot="0"] {
    flex-basis: 100% !important;
  }
  .page:not(#Z2024047029):not(#L0401917115) column-unit[span="4"] { position: static; }

  [thumbnail-index] .caption { font-size: 0.62rem; --font-size: 0.62rem; }

  #L0401917115 .ap-bio-name { font-size: 2rem; --font-size: 2rem; }
  #L0401917115 .ap-row { grid-template-columns: 1fr; gap: 0.1rem; }
  #L0401917115 .ap-row span:last-child { text-align: left; }
}

/* About page: photo stays in view while the text and lists scroll (desktop) */
@media (min-width: 769px) {
  #L0401917115 column-unit[slot="0"] { position: sticky; top: 1.5rem; align-self: flex-start !important; height: auto !important; }
}

/* Self-hosted project video (replaces Vimeo embeds) */
.ap-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }