@media (min-width: 850px) {
  body {
    background: #faf8ef;
    color: #101923;
  }
  header,
  main {
    max-width: 1400px;
    padding-inline: 4.4%;
  }
  header {
    height: 72px;
    border: none;
  }
  header b {
    font-size: 26px;
  }
  header summary {
    display: none;
  }
  header details::details-content {
    content-visibility: visible;
    display: contents;
  }
  header nav {
    display: flex;
    gap: 28px;
    background: transparent;
    position: static;
    padding: 0;
  }
  header nav a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
  }
  section {
    padding: 36px 0;
  }
  h2 {
    font-size: clamp(46px, 4.9vw, 76px);
    letter-spacing: -0.06em;
    margin: 8px 0 32px;
  }
  footer {
    padding: 50px 5%;
    background: #18212a;
  }
  footer b {
    font-size: 32px;
  }
}
@media (min-width: 1100px) {
  body.home {
    background: #faf8ef;
  }
  body.home .rk {
    max-width: 1280px;
    width: calc(100% - 9vw);
    margin-inline: auto;
  }
  body.home .rk .base {
    box-shadow: 0 0 0 100vmax #17202a;
    clip-path: inset(0 -100vmax);
  }
}

/* Ray Kwok identity */
body:not(.home) header > b {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
body:not(.home) header > b::before {
  content: "";
  display: inline-block;
  background: center/contain no-repeat url("../images/identity.svg");
  flex: none;
}

body:not(.home) header > b {
  font-size: 0;
  gap: 0;
}
body:not(.home) header > b::before {
  width: clamp(118px, 10vw, 150px);
  aspect-ratio: 686/169;
  background-image: url("../images/wordmark.jpg");
  mix-blend-mode: multiply;
}

/* Motion registered to the 457 x 443 hero artwork */
@media (max-width: 760px) {
  .rk .lead-art {
    width: min(76%, 309px);
    max-height: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 760px) {
    .rk .lead-art {
      position: relative;
      right: auto;
      top: auto;
    }
  }
}

/* Equipment status lights */
.rk .lead-art::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: center/100% 100% no-repeat url("../images/device-lights.svg");
}
@media (max-width: 760px) {
  .rk .lead-art {
    position: relative;
    right: auto;
    top: auto;
  }
}

.rk .client-notes {
  margin-top: 0;
  padding-top: clamp(16px, 1.5cqw, 20px);
}

/* Align the project cards, testimonials and footer on the homepage. */
body.home .rk {
  --lower-page-inset: 2.5cqw;
}
body.home .rk .portfolio {
  padding-inline: var(--lower-page-inset);
}
body.home .rk .client-notes {
  margin-inline: var(--lower-page-inset);
}
body.home .rk #contact.base.footer-a {
  padding-inline: var(--lower-page-inset);
}
body.home .rk .quote-grid,
body.home .rk #contact.footer-a .fa-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
}
@media (max-width: 760px) {
  body.home .rk {
    --lower-page-inset: 20px;
  }
  body.home .rk .quote-grid,
  body.home .rk #contact.footer-a .fa-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Align testimonial text and captions across each desktop row. */
@media (min-width: 761px) {
  .rk .quote-grid > figure {
    display: grid;
    grid-template-rows: 1fr auto;
    row-gap: 14px;
  }
  .rk .quote-grid > figure > figcaption {
    margin-top: 0;
  }
  @supports (grid-template-rows: subgrid) {
    .rk .quote-grid > figure {
      grid-row: span 2;
      grid-template-rows: subgrid;
    }
  }
}

/* The header link already draws the selected RayKwok wordmark. */
.rk .rk-nav a.brand {
  font-size: 0;
}

/* Mobile hero: introduce Ray, show the artwork, then describe his work. */
@media (max-width: 760px) {
  .rk .lead {
    padding-top: 32px;
  }
  .rk .lead-copy {
    display: contents;
  }
  .rk .lead-copy > * {
    margin-inline: 22px;
  }
  .rk .lead > .lead-art {
    order: 1;
    position: relative;
    inset: auto;
    width: 100%;
    max-height: none;
    margin-top: 12px;
  }
  .rk .lead-copy > p,
  .rk .lead-copy > .buttons {
    order: 2;
  }
}

/* Show each service illustration below its description on phones. */
@media (max-width: 760px) {
  .rk .svc .ink {
    display: block;
    position: static;
    width: min(100%, 260px);
    margin: 14px auto 4px;
  }
}

.rk-nav .mobmenu > a[href$="#ray-chat"],
.rk-nav .mobmenu > a[aria-controls="ray-conversation"] {
  display: none;
}

/* Transparent footer wordmark */
#contact.base.footer-a .footer-wordmark {
  background: transparent url("../images/footer-wordmark.png") left center /
    contain no-repeat;
  mix-blend-mode: normal;
}
#contact.base.footer-a .footer-wordmark img {
  opacity: 0;
  filter: none;
}