/* Below-the-hero sections, rebuilt 2026-10-04.

   One editorial index instead of four card grids. Rows and 1px hairlines, flat
   fills, no radius, no shadows, one accent. Media appears only where the thing
   has a face (a globe, a site); repositories are text. This file is loaded
   after styles.css and owns every class it names; the hero's stylesheet is
   untouched. Section grounds alternate paper and ink so the page keeps a
   rhythm without boxes. */

:root {
  --pg-paper: #f3efe8;
  --pg-ink: #101111;
  --pg-line: rgba(16, 17, 17, 0.16);
  --pg-line-strong: rgba(16, 17, 17, 0.42);
  --pg-mute: rgba(16, 17, 17, 0.6);
  --pg-accent: #ff5e00;
  --pg-gutter: max(28px, calc((100vw - 1240px) / 2));
  --pg-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ---- Section frame ------------------------------------------------------- */

.idx {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 9vw, 128px) var(--pg-gutter);
  background: var(--pg-paper);
  color: var(--pg-ink);
}

.idx-dark {
  --pg-ink: #f3efe8;
  --pg-line: rgba(243, 239, 232, 0.16);
  --pg-line-strong: rgba(243, 239, 232, 0.42);
  --pg-mute: rgba(243, 239, 232, 0.62);
  background: #0c0c0c;
}

.idx-head {
  max-width: 1240px;
  margin: 0 auto clamp(36px, 5vw, 64px);
}

.idx-head h2 {
  margin: 0;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--pg-ink);
  max-width: 14ch;
}


/* ---- Work index ---------------------------------------------------------- */

.work-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1240px;
  border-top: 1px solid var(--pg-line-strong);
}

.work-row {
  border-bottom: 1px solid var(--pg-line);
}

.work-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-areas: "body go";
  column-gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding: clamp(26px, 3vw, 40px) 0;
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease;
}

.work-row-media .work-link {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px) 150px;
  grid-template-areas: "body media go";
  align-items: start;
}

.work-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.work-kind {
  font-family: var(--pg-mono);
  font-size: 0.82rem;
  color: var(--pg-mute);
}

.work-title {
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--pg-ink);
  transition: color 160ms ease;
}

.work-copy {
  max-width: 64ch;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--pg-mute);
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: 4px;
  font-family: var(--pg-mono);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--pg-mute);
}

.work-meta span + span::before {
  content: "\00b7";
  margin: 0 0.6em;
  color: var(--pg-line-strong);
}

.work-media {
  grid-area: media;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--pg-line);
}

.work-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-go {
  grid-area: go;
  justify-self: end;
  align-self: start;
  margin-top: 2.1em;
  white-space: nowrap;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--pg-ink);
  transition: transform 180ms ease, color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .work-link:hover {
    background-color: rgba(16, 17, 17, 0.035);
    box-shadow: 0 0 0 clamp(14px, 1.6vw, 22px) rgba(16, 17, 17, 0.035);
  }

  .work-link:hover .work-title,
  .work-link:hover .work-go {
    color: var(--pg-accent);
  }

  .work-link:hover .work-go {
    transform: translateX(6px);
  }
}

.work-link:focus-visible {
  outline: 2px solid var(--pg-accent);
  outline-offset: 6px;
}

.work-also {
  max-width: 1240px;
  margin: 28px auto 0;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--pg-mute);
}

.work-also a {
  color: var(--pg-ink);
  text-decoration: underline;
  text-decoration-color: var(--pg-line-strong);
  text-underline-offset: 3px;
}

.work-also a:hover {
  color: var(--pg-accent);
  text-decoration-color: var(--pg-accent);
}

/* ---- Capabilities and stack ---------------------------------------------- */

.cap-list {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--pg-line-strong);
}

.cap-row {
  display: grid;
  grid-template-columns: minmax(200px, 0.34fr) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 64px);
  padding: 22px 0;
  border-bottom: 1px solid var(--pg-line);
}

.cap-row dt {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--pg-ink);
}

.cap-row dd {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--pg-mute);
}

.cap-ref {
  display: block;
  margin-top: 6px;
  font-family: var(--pg-mono);
  font-size: 0.8rem;
  color: var(--pg-mute);
}

.cap-ref::before {
  content: "see ";
  color: var(--pg-line-strong);
}



/* ---- Experience ---------------------------------------------------------- */

.xp-list {
  list-style: none;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--pg-line-strong);
}

.xp-row {
  display: grid;
  grid-template-columns: minmax(200px, 0.3fr) minmax(0, 0.4fr) minmax(0, 0.3fr);
  column-gap: clamp(24px, 4vw, 56px);
  padding: clamp(26px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--pg-line);
}

.xp-role h3 {
  margin: 0 0 6px;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pg-ink);
}

.xp-role span {
  display: block;
  font-family: var(--pg-mono);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--pg-mute);
}

.xp-sum {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--pg-mute);
}

.xp-points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.xp-points li {
  padding: 7px 0;
  border-top: 1px solid var(--pg-line);
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--pg-mute);
}

.xp-points li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ---- Additional public work ---------------------------------------------- */

.more-title {
  max-width: 1240px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--pg-ink);
}

.more-list {
  list-style: none;
  max-width: 1240px;
  margin: 14px auto 0;
  padding: 0;
  border-top: 1px solid var(--pg-line-strong);
}

.more-list li {
  border-bottom: 1px solid var(--pg-line);
}

.more-list a {
  display: grid;
  grid-template-columns: minmax(160px, 0.26fr) minmax(0, 1fr) 150px;
  column-gap: clamp(20px, 3vw, 48px);
  align-items: baseline;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}

.more-list strong {
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--pg-ink);
}

.more-list span {
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--pg-mute);
}

.more-list em {
  justify-self: end;
  font-style: normal;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--pg-ink);
}

@media (hover: hover) and (pointer: fine) {
  .more-list a:hover strong,
  .more-list a:hover em {
    color: var(--pg-accent);
  }
}

/* ---- Education and credentials ------------------------------------------ */

.rec-table {
  max-width: 1240px;
  margin: 0 auto;
  border-top: 1px solid var(--pg-line-strong);
}

.rec-group + .rec-group {
  border-top: 1px solid var(--pg-line-strong);
}

.rec-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.24fr) minmax(0, 1fr) minmax(96px, 0.16fr) minmax(0, 0.22fr);
  column-gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--pg-line);
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease;
}

.rec-issuer {
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--pg-ink);
}

.rec-what {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rec-what strong {
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--pg-ink);
  transition: color 160ms ease;
}

.rec-what span {
  max-width: 62ch;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--pg-mute);
}

.rec-when {
  font-family: var(--pg-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--pg-mute);
  white-space: nowrap;
}

.rec-go {
  justify-self: end;
  white-space: nowrap;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--pg-ink);
  transition: transform 180ms ease, color 160ms ease;
}

.rec-row-edu .rec-what strong {
  font-size: 1.15rem;
}

@media (hover: hover) and (pointer: fine) {
  a.rec-row:hover {
    background-color: rgba(243, 239, 232, 0.05);
    box-shadow: 0 0 0 clamp(14px, 1.6vw, 22px) rgba(243, 239, 232, 0.05);
  }

  a.rec-row:hover .rec-what strong,
  a.rec-row:hover .rec-go {
    color: var(--pg-accent);
  }

  a.rec-row:hover .rec-go {
    transform: translateX(6px);
  }
}

a.rec-row:focus-visible {
  outline: 2px solid var(--pg-accent);
  outline-offset: 6px;
}

/* ---- Proof strip fixes (markup unchanged) --------------------------------
   The Trucking Tutor mark is inlined in the page so it can take the brand
   orange; the SVG file paints ink. The four marks are spaced by their painted
   width, not their file box, which is what made the gaps uneven. */

.social-proof-logo-tt svg {
  display: block;
  width: 40px;
  height: 24px;
}

.social-proof-logo-tt svg rect {
  fill: var(--pg-accent);
}

.proof-group .social-proof-logos {
  gap: 0;
}

.proof-group .social-proof-logos .social-proof-logo {
  margin: 0;
}

/* Painted bounds measured at 4x on 2026-10-04: the StaFull wordmark has 5.5px
   of clear space on its right, angrynirds 4.8px left and 7.1px right, the
   dbhavery.ai mark 27.1px right, the TT mark 1px left. Each margin below is
   36px minus the clear space on both sides of the join, so the ink-to-ink gap
   is 36px at every join. */
.proof-group .social-proof-logos .social-proof-logo:nth-child(2) {
  margin-left: 25.7px;
}

.proof-group .social-proof-logos .social-proof-logo:nth-child(3) {
  margin-left: 27.9px;
}

.proof-group .social-proof-logos .social-proof-logo:nth-child(4) {
  margin-left: 7.9px;
}

/* ---- Reveal (keeps the page's existing hook, one fade per section) ------- */

.reveal-on .idx.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal-on .idx.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Narrow widths -------------------------------------------------------- */

@media (max-width: 900px) {
  .work-row-media .work-link {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "media media"
      "body go";
    row-gap: 18px;
  }

  .work-media {
    max-width: 100%;
  }

  .xp-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .xp-row .xp-role {
    grid-column: 1 / -1;
  }

  .rec-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "issuer when"
      "what what"
      "go go";
    row-gap: 6px;
  }

  .rec-issuer { grid-area: issuer; }
  .rec-what { grid-area: what; }
  .rec-when { grid-area: when; }
  .rec-go { grid-area: go; justify-self: start; }
}

@media (max-width: 640px) {
  .work-link,
  .work-row-media .work-link {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "body"
      "go";
    row-gap: 14px;
  }

  .work-go {
    align-self: start;
    justify-self: start;
    margin-top: 0;
  }

  .proof-group .social-proof-logos {
    gap: 14px 28px;
  }

  .proof-group .social-proof-logos .social-proof-logo:nth-child(n) {
    margin-left: 0;
  }

  .cap-row,
  .xp-row {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .more-list a {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .more-list em {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-link,
  .work-go,
  .rec-row,
  .rec-go,
  .work-title,
  .rec-what strong {
    transition: none;
  }
}

/* ---- Contact form footer: the send button sat 77px in from the fields and
   the links; it now shares their left edge, with the status and the direct
   email after it. */
.form-foot .form-submit {
  order: -2;
  margin: 0;
}

.form-foot .form-status {
  order: 0;
  margin-right: 0;
}

.form-foot .contact-direct {
  margin-left: 0;
}

/* ---- Shipped grid: six tiles of real footage at one aspect ratio --------- */

.grp-title {
  max-width: 1240px;
  margin: 0 auto 14px;
  font-family: var(--pg-mono);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--pg-mute);
}

.ship-grid + .grp-title {
  margin-top: clamp(48px, 6vw, 80px);
}

.ship-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 48px) clamp(20px, 2.5vw, 36px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px) 0 0;
  border-top: 1px solid var(--pg-line-strong);
}

.ship {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.ship-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--pg-line);
}

.ship-title {
  margin-top: 4px;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--pg-ink);
  transition: color 160ms ease;
}

.ship-copy {
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--pg-mute);
}

@media (hover: hover) and (pointer: fine) {
  .ship:hover .ship-title {
    color: var(--pg-accent);
  }
}

.ship:focus-visible {
  outline: 2px solid var(--pg-accent);
  outline-offset: 6px;
}

@media (max-width: 1000px) {
  .ship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ship-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Proof strip: section links where the paper sat ---------------------- */

.proof-nav {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}

.proof-nav a {
  position: relative;
  padding: 6px 0;
  margin-right: 22px;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--pg-ink);
  text-decoration: none;
}

.proof-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--pg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.proof-nav a:hover::after,
.proof-nav a:focus-visible::after {
  transform: scaleX(1);
}

.proof-nav a:focus-visible {
  outline: none;
}

.proof-group-label {
  font-family: var(--pg-mono);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(16, 17, 17, 0.55);
}

.intro-band.proof-band {
  grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 900px) {
  .proof-nav {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---- 2026-10-04 evening pass ------------------------------------------------
   Depth without boxes: each ground is a shallow gradient, the footage tiles
   cast a shadow and lift, action links take the accent. The stack strip is a
   bar again, white with black labels, so it reads as a separator between the
   dark capabilities ground and the paper experience ground. */

.idx {
  background: linear-gradient(180deg, #f7f4ee 0%, var(--pg-paper) 38%, #ede8df 100%);
}

.idx-dark {
  background: linear-gradient(180deg, #151515 0%, #0c0c0c 42%, #060606 100%);
}

.idx-dark + .idx,
.idx + .idx-dark {
  border-top: 1px solid rgba(16, 17, 17, 0.5);
}

/* Shipped tiles */
.ship-media {
  border: 0;
  box-shadow:
    0 1px 2px rgba(16, 17, 17, 0.12),
    0 12px 28px -10px rgba(16, 17, 17, 0.45);
  transform: translateY(0);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ship:hover .ship-media {
    transform: translateY(-4px);
    box-shadow:
      0 2px 4px rgba(16, 17, 17, 0.14),
      0 22px 40px -12px rgba(16, 17, 17, 0.55);
  }
}

/* Repositories: tighter than the tiles, not larger */
.work-link {
  padding: 18px 0;
  grid-template-columns: minmax(0, 1fr) 130px;
}

.work-title {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.work-copy {
  max-width: 78ch;
  font-size: 0.93rem;
  line-height: 1.5;
}

.work-body {
  gap: 6px;
}

.work-kind {
  font-size: 0.78rem;
}

.work-go {
  margin-top: 1.55em;
  color: var(--pg-accent);
}

.work-meta {
  margin-top: 0;
}

/* Action links take the accent: work, repositories, credentials */
.rec-go,
.ship:hover .ship-title,
.work-link:hover .work-title {
  color: var(--pg-accent);
}

a.rec-row:hover .rec-go,
.work-link:hover .work-go {
  color: var(--pg-ink);
}

/* Capabilities: the rows read as a list again */
.cap-row {
  padding: 24px 0;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
}

.cap-row dd {
  max-width: 72ch;
}

/* Stack bar: white, black labels, short */
.stack-band {
  padding: 10px 28px;
  background: #ffffff;
  color: #2a2a2a;
  border-top: 1px solid rgba(16, 17, 17, 0.5);
  border-bottom: 1px solid rgba(16, 17, 17, 0.18);
}

.stack-row {
  max-width: 1240px;
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.stack-row + .stack-row {
  margin-top: 2px;
}

.stack-row b {
  color: #101111;
  letter-spacing: 0.06em;
}

/* Experience: role on the left, summary and points share the right column */
.xp-row {
  grid-template-columns: minmax(200px, 0.28fr) minmax(0, 1fr);
  padding: clamp(24px, 3vw, 36px) 0;
}

.xp-sum {
  max-width: 78ch;
}

.xp-points {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
  margin-top: 14px;
}

.xp-points li,
.xp-points li:first-child {
  padding: 7px 0;
  border-top: 1px solid var(--pg-line);
}

/* Credentials: three columns, no date column */
.rec-row {
  grid-template-columns: minmax(150px, 0.24fr) minmax(0, 1fr) minmax(0, 0.18fr);
}

.rec-note {
  max-width: 1240px;
  margin: 14px auto 0;
  font-family: var(--pg-mono);
  font-size: 0.78rem;
  color: var(--pg-mute);
}

.rec-pending {
  cursor: default;
}

.rec-pending .rec-go {
  color: var(--pg-mute);
}

/* Contact: a scrim so the type reads over the photograph */
.contact-section {
  background-image:
    linear-gradient(90deg, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.66) 48%, rgba(8, 8, 8, 0.28) 100%),
    url("./assets/generated/contact-avatar-pose-g-v18.jpg");
  background-size: cover, cover;
  background-position: 0% center, 0% center;
  background-repeat: no-repeat, no-repeat;
}

.contact-section h2,
.contact-copy {
  color: #ffffff;
  text-shadow: none;
}

.contact-copy {
  font-size: 1.08rem;
  line-height: 1.6;
}

.contact-section .form-field span,
.contact-section .contact-direct,
.contact-section .contact-direct a,
.contact-section .contact-links a {
  color: #ffffff;
}

@media (max-width: 900px) {
  .xp-points {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .rec-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "issuer"
      "what"
      "go";
  }
}

@media (max-width: 720px) {
  .stack-band {
    padding: 10px 20px;
  }

  .stack-row {
    font-size: 0.74rem;
  }
}

/* ---- Depth pass 2 (Don: "I still do not see any gradient BGs. Needs more 3D
   depth"). Stronger gradients, every ground casts a shadow onto the one below
   it, a light edge along the top of each paper ground, and the stack bar sits
   on the page like a strip of card rather than a paler patch of paper. */

.idx,
.stack-band {
  position: relative;
  z-index: 2;
}

.idx {
  background: linear-gradient(180deg, #fbf9f5 0%, #f1ece3 55%, #e3dccf 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 24px 48px -24px rgba(16, 17, 17, 0.55);
}

.idx-dark {
  background: linear-gradient(180deg, #232323 0%, #0f0f0f 45%, #000000 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 56px -24px rgba(0, 0, 0, 0.9);
}

.stack-band {
  z-index: 3;
  background: linear-gradient(180deg, #ffffff 0%, #f6f3ee 100%);
  border-top: 0;
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 0 rgba(16, 17, 17, 0.55),
    0 -1px 0 rgba(16, 17, 17, 0.55),
    0 18px 36px -16px rgba(16, 17, 17, 0.6);
}

/* Every Verify is orange, including the two still being wired */
.rec-go,
.rec-pending .rec-go {
  color: var(--pg-accent);
}

/* Rows lift slightly on hover */
@media (hover: hover) and (pointer: fine) {
  .work-link:hover,
  a.rec-row:hover {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow:
      0 0 0 clamp(14px, 1.6vw, 22px) rgba(255, 255, 255, 0.5),
      0 14px 28px -14px rgba(16, 17, 17, 0.45);
  }

  .idx-dark a.rec-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow:
      0 0 0 clamp(14px, 1.6vw, 22px) rgba(255, 255, 255, 0.05),
      0 14px 28px -14px rgba(0, 0, 0, 0.9);
  }
}

/* Footage tiles: a deeper shadow and a top highlight */
.ship-media {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(16, 17, 17, 0.18),
    0 20px 40px -14px rgba(16, 17, 17, 0.6);
}

/* The trust strip under the hero casts a shadow onto the work below it */
.intro-band.proof-band {
  position: relative;
  z-index: 4;
  box-shadow:
    0 1px 0 rgba(16, 17, 17, 0.35),
    0 22px 44px -18px rgba(16, 17, 17, 0.6);
}

/* Hover keeps the ground colour (Don: "hover effects should not turn white
   like that. same BG color"). Only the title and the arrow change. */
@media (hover: hover) and (pointer: fine) {
  .work-link:hover,
  a.rec-row:hover,
  .idx-dark a.rec-row:hover {
    background-color: transparent;
    box-shadow: none;
  }
}

/* ---- 2026-10-04 late pass ---------------------------------------------------
   Don: the avatar moved, the stack bar and the trust bar carry a different
   hue than the other light grounds, the stack bar should read left, and the
   sections should stay put while scrolling. */

/* 1. Contact: hand background-image and background-position back to
   styles.css (its responsive 68% positions place the avatar). The scrim is a
   pseudo-element under the content instead of a gradient layer in the
   background shorthand. */
.contact-section {
  background-image: url("./assets/generated/contact-avatar-pose-g-v18.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% center;
}

@media (min-width: 1001px) {
  .contact-section {
    background-position: 68% top;
  }
}

@media (max-width: 1000px) {
  .contact-section {
    background-position: 68% center;
  }
}

.contact-section::after {
  /* styles.css gives this pseudo a cutout shape (left 50%, min-width 880px,
     a fixed height) and then hides it. Re-enabled here as a full-bleed scrim,
     so every geometry value is reset, not just display. */
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  transform: none;
  clip-path: none;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.72) 0%, rgba(8, 8, 8, 0.5) 40%, rgba(8, 8, 8, 0) 62%);
  background-size: 100% 100%;
  mix-blend-mode: normal;
  filter: none;
}

/* 2. Stack bar and trust bar sit on the same paper as the other light grounds */
.stack-band,
.intro-band.social-proof-band,
.intro-band.proof-band {
  background: linear-gradient(180deg, #fbf9f5 0%, #f1ece3 55%, #e3dccf 100%);
  color: var(--pg-ink);
}

.stack-band {
  text-align: left;
  padding-inline: max(var(--pg-gutter), calc((100vw - 1240px) / 2));
}

.stack-row {
  margin: 0;
  max-width: none;
}

.stack-row + .stack-row {
  margin-top: 2px;
}

/* 3. No scroll reveal: every section is in place from first paint */
.reveal,
.reveal.is-visible,
.reveal-on .reveal,
.reveal-on .idx.reveal,
.reveal-on .idx.reveal.is-visible {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Don, 2026-10-04: "give this section more room. It looks cramped and doesn't
   match the site padding." The stack bar keeps the page gutter and takes the
   same vertical rhythm as a short section. */
.stack-band {
  padding-top: clamp(28px, 3.2vw, 44px);
  padding-bottom: clamp(28px, 3.2vw, 44px);
}

.stack-row {
  font-size: 0.84rem;
  line-height: 1.6;
}

.stack-row + .stack-row {
  margin-top: 8px;
}

/* ---- 2026-10-04 adaptive pass ----------------------------------------------
   Don: "Make sure portfolio looks good on any sized screen or window." The
   evening pass above re-set .cap-row to two columns with no media query, which
   beat the 640px single-column rule earlier in this file: at 390px the right
   column was about 100px wide and read one word per line. Below 700px the
   capability rows, experience rows and work links stack. */
@media (max-width: 700px) {
  .cap-row,
  .xp-row,
  .work-link {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .cap-row dd,
  .xp-sum,
  .work-copy {
    max-width: none;
  }

  .work-go {
    margin-top: 0;
  }

  .xp-points {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
}

/* At tablet width the role column is 200px and the summary was wrapping inside
   it at eight words a line. Up to 900px the experience row stacks. */
@media (max-width: 900px) {
  .xp-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .xp-sum {
    grid-column: 1;
    max-width: none;
  }
}