.hero {
  padding-top: var(--sp-32);
  padding-bottom: var(--sp-16);
}

.hero__name {
  font-size: var(--fs-display);
  margin-bottom: 0;
  max-width: 14ch;
  line-height: 1;
}

.hero__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 300;
  color: var(--color-text-secondary);
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-6);
}

.hero__bio {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  max-width: 56ch;
  line-height: 1.7;
}

.hero__links {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.hero__links a {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Each header link carries a tint from the site's own palette, used twice: for
   the link's own hover state, and for a wash across the whole page while it is
   hovered. Deliberately not the destinations' brand colours. LinkedIn's #0A66C2
   at this strength composites to #EEF3F5, which reads as "slightly cold" rather
   than as LinkedIn, so it would cost the warm palette without buying the
   recognition. Same color-mix technique as .work-item:hover. */
.hero__link--email {
  --link-tint: var(--accent-saks-redesign);
}

.hero__link--linkedin {
  --link-tint: var(--accent-saks-ds);
}

.hero__link--resume {
  --link-tint: var(--accent-ai);
}

.hero__links a:hover {
  color: var(--link-tint, var(--accent-ai));
  border-color: var(--link-tint, var(--accent-ai));
}

/* The tint cannot be read from the hovered child, so the ground is set per link.
   5% rather than the work items' 6%: this is the largest paintable area on the
   page, and it is ambient rather than an affordance.

   Gated on a real pointer, unlike .work-item:hover. A tap on a touch device can
   leave :hover stuck on the tapped element, and a stuck tint across the entire
   page is a much louder mistake than a stuck tint on one list row. */
@media (hover: hover) {
  body:has(.hero__link--email:hover) {
    background: color-mix(in srgb, var(--accent-saks-redesign) 5%, var(--color-surface));
  }

  body:has(.hero__link--linkedin:hover) {
    background: color-mix(in srgb, var(--accent-saks-ds) 5%, var(--color-surface));
  }

  body:has(.hero__link--resume:hover) {
    background: color-mix(in srgb, var(--accent-ai) 5%, var(--color-surface));
  }
}

.work {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-32);
}

.work-list {
  display: flex;
  flex-direction: column;
}

.work-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-6);
  margin: 0 calc(-1 * var(--sp-6));
  border-radius: var(--radius-lg);
  transition: background 0.3s ease;
}

.work-item:hover {
  background: color-mix(in srgb, var(--item-accent) 6%, transparent);
}

.work-item__index {
  flex-shrink: 0;
  width: 3ch;
  padding-top: 0.3em;
  font-size: var(--fs-h4);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.work-item__content {
  max-width: 68ch;
}

.work-item__tag {
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--item-accent, var(--color-text-secondary));
  margin-bottom: var(--sp-3);
}

.work-item__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  margin-bottom: var(--sp-4);
  transition: color 0.3s ease;
}

.work-item:hover .work-item__title {
  color: var(--item-accent);
}

.work-item__blurb {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.work-item__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--item-accent, var(--color-text-primary));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-item:hover .work-item__arrow {
  transform: translateX(3px);
}

/* Box geometry copied from .work-item so the hover wash lines up with the three
   above it: the 48px that used to be margin-top is padding instead, giving the
   wash room above the heading, and the negative side margin plus matching
   padding widens the box to the work items' width without moving any content.
   The text rhythm is unchanged, 48px of padding either side of a touching edge
   is the same 96px gap the work items have between each other. */
.more-scroll {
  display: block;
  padding: var(--sp-12) var(--sp-6) 0;
  margin: 0 calc(-1 * var(--sp-6)) var(--sp-16);
  border-radius: var(--radius-lg);
  transition: background 0.3s ease;
}

/* Same idea as .work-item:hover, but neutral and at a lower percentage. This
   block is several times the area of a work item, so the same strength would
   read as a slab rather than a hint. There is no --item-accent here, and the
   title deliberately does not change, so the wash is the whole signal. */
.more-scroll:hover {
  background: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
}

.more-scroll__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  margin-bottom: var(--sp-4);
}

.more-scroll__zone {
  padding: var(--sp-4) 0 var(--sp-8);
}

.more-scroll__viewport {
  overflow: hidden;
}

.more-scroll__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  will-change: transform;
}

/* A peek at what is on the More Work page. Uniform height with natural width,
   the same rule that page's own strips use, so portrait phone screens and
   landscape photography sit in one row without either being cropped. */
.more-scroll__tile {
  flex: 0 0 auto;
  display: block;
  height: 240px;
  width: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.footer {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-32);
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--fs-body-sm);
}

@media (max-width: 640px) {
  .hero {
    padding-top: var(--sp-24);
    padding-bottom: var(--sp-8);
  }

  .work {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-16);
  }

  .footer {
    padding-top: var(--sp-8);
  }

  .work-item {
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-4);
    margin: 0 calc(-1 * var(--sp-4));
  }

  .more-scroll {
    padding: var(--sp-8) var(--sp-4) 0;
    margin: 0 calc(-1 * var(--sp-4)) var(--sp-12);
  }

  .more-scroll__head {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .more-scroll__tile {
    height: 180px;
  }
}