/* Home page: a full-bleed gradient hero with a large headline, a white top
   bar with outlined nav chips, and pure black on white below. Loaded after
   styles.css; every rule is scoped to body.bold so no other page is
   affected. */

.bold {
  --bg: #fff;
  --fg: #000;
  --muted: #000;
  --rule: #000;
  --accent: #000;
  --hero: #ffd12a;
  --hero-bg: #c8c8c8;
  --hero-fg: #000;
  --bar-bg: #fff;
  --bar-fg: #000;
  --home-measure: 58rem;
}

@media (prefers-color-scheme: dark) {
  .bold {
    --bg: #000;
    --fg: #fff;
    --muted: #fff;
    --rule: #fff;
    --accent: #fff;
    --bar-bg: #000;
    --bar-fg: #fff;
  }
}

/* A wider column than the site-wide 44rem, midway to the restyle's first
   72rem; the responsive gutter is unchanged. */
.bold .wrap {
  max-width: calc(var(--home-measure) + 2 * var(--gutter));
}

/* ---- Top bar ---- */

.bold .topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bar-bg);
  color: var(--bar-fg);
  border-bottom: 1px solid var(--bar-fg);
}

.bold .site-header {
  align-items: center;
  padding-block: 0.875rem;
  font-size: var(--step--1);
}

.bold .site-header .name {
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bar-fg);
}

.bold .site-header nav {
  gap: 0.5rem;
}

.bold .site-header nav a {
  padding: 0.35em 0.8em;
  border: 1px solid var(--bar-fg);
  border-radius: 8px;
  color: var(--bar-fg);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bold .site-header nav a:hover,
.bold .site-header nav a[aria-current="page"] {
  background: var(--bar-fg);
  color: var(--bar-bg);
}

.bold .site-header a:focus-visible,
.bold .menu-toggle:focus-visible {
  outline: 2px solid var(--bar-fg);
  outline-offset: 2px;
}

.bold .menu-toggle {
  color: var(--bar-fg);
}

@media (max-width: 40rem) {
  .bold .site-header.has-menu nav {
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--bar-fg);
  }

  .bold .site-header.has-menu nav a {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--bar-fg);
  }
}

/* ---- Hero ---- */

.bold main {
  padding-top: 0;
}

/* A grainy silver gradient with a soft white glow at the lower right,
   2560px wide so it stays sharp on wide and 2x screens. The whole image
   is lifted evenly in sRGB (black maps to mid grey, white stays white), so
   the gradient and glow keep their shape while the black headline holds
   at least 5:1 on every pixel (about 12:1 typically), past WCAG AA for
   text of any size. The flat light grey behind it is the image's average
   and shows while it loads. It stays the same in dark mode. The yellow
   remains the page's accent for hovers, the toast and selections. */
.bold .hero {
  background: var(--hero-bg) url("assets/home/hero-grain-light.webp") center / cover no-repeat;
  color: var(--hero-fg);
}

/* The headline sits low in the band, anchored like a poster: padding moves
   from the bottom to the top so the band's height is unchanged. The base
   20px shift plus --hero-drop (nothing on phones, 24px on desktop) keeps the
   visible band above the type at about 2.5x the band below it, and
   --hero-lift (16px on phones, 40px on desktop) adds more band under the
   nav without changing the band below the type. */
.bold .hero .wrap {
  --hero-drop: clamp(0px, 2.6vw - 8px, 24px);
  --hero-lift: clamp(1rem, 4vw, 2.5rem);
  padding-block:
    calc(clamp(2.5rem, 7vw, 5rem) + 20px + var(--hero-drop) + var(--hero-lift))
    calc(clamp(2.75rem, 8vw, 5.5rem) - 20px - var(--hero-drop));
}

.bold .lede {
  max-width: none;
  margin: 0;
  /* At least about 40px where it fits, and never more than 8.48vw, so the
     widest line ("Product designer") sits well inside the 90vw phone column;
     about 85px at most on desktop. */
  font-size: min(5.29rem, 8.48vw, max(0.92rem + 5.152vw, 2.53rem));
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--hero-fg);
}

/* ---- Below the hero: pure black on white ---- */

.bold section {
  margin-top: clamp(3.5rem, 10vw, 6rem);
}

.bold #work {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
}

.bold .label {
  margin-bottom: 1rem;
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bold a {
  text-decoration-color: currentColor;
}

.bold a:focus-visible {
  outline-color: var(--fg);
}

.bold .work-list {
  border-top: 2px solid var(--fg);
}

.bold .work-list li {
  border-bottom: 1px solid var(--fg);
}

.bold .work-list a {
  margin-inline: -0.75rem;
  padding: 1.25rem 0.75rem;
  transition: background-color 0.15s ease;
}

.bold .work-list .title {
  font-weight: 600;
}

.bold .work-list .desc,
.bold .work-list .year {
  font-weight: 400;
}

.bold .work-list .badge {
  background: var(--fg);
  color: var(--bg);
}

.bold .work-list a:hover {
  background: var(--hero);
  color: #000;
}

.bold .work-list a:hover .badge {
  background: #000;
  color: var(--hero);
}

.bold #about p {
  max-width: 40rem;
  margin: 0;
  font-weight: 400;
}

/* Round portrait. On phones it sits centered below the paragraph at 80%
   of the column; from 600px the label and paragraph keep the page's left
   margin and the portrait moves to the right margin. While the paragraph
   is still growing toward its 40rem measure the portrait spans from the
   top of the label to the bottom of the paragraph (about 136px up to
   152px); once the paragraph reaches its measure the portrait takes up
   the rest of the column instead, so the gap to the paragraph's rag stays
   at about 5% of the column rather than widening (about 240px at the
   full 58rem column). Sizes come from the section's own width (cqi), so
   they track the column smoothly as the window resizes. It can't be
   dragged, selected or long-pressed, which keeps casual saving off the
   page. */
.bold #about {
  display: flex;
  flex-direction: column;
}

.bold .portrait {
  order: 1;
  align-self: center;
  width: 80%;
  height: auto;
  aspect-ratio: 1;
  max-width: 21.6rem;
  margin-top: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

@media (min-width: 600px) {
  .bold #about {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr auto;
    /* A portrait taller than the text adds its extra height below the
       paragraph, keeping the paragraph snug under the label. */
    grid-template-rows: auto 1fr;
    align-content: start;
  }

  .bold #about .label,
  .bold #about p {
    grid-column: 1;
  }

  /* The gap is the portrait's own margin so it can be measured in cqi,
     which a property of the container itself can't use. */
  .bold .portrait {
    --about-gap: clamp(1.75rem, 5cqi, 3rem);
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    width: max(
      clamp(8.5rem, 13.5cqi + 3.5rem, 9.5rem),
      100cqi - 40rem - var(--about-gap)
    );
    max-width: none;
    margin-top: 0;
    margin-left: var(--about-gap);
  }
}

/* Logos at 50% ink: 50% black on white (#808080, 3.9:1) and 50% white on
   black in dark mode (#808080, 5.3:1), both above the 3:1 WCAG minimum for
   graphics. */
.bold .marquee img {
  filter: brightness(0);
  opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
  .bold .marquee img {
    filter: brightness(0) invert(1);
    opacity: 0.5;
  }
}

/* A full-width bar in the reverse of the page: black with white text in
   light mode, white with black text in dark mode. */
.bold .site-footer {
  display: block;
  /* 75% of the site-wide clamp(4rem, 12vw, 8rem) gap above the footer. */
  margin-top: clamp(3rem, 9vw, 6rem);
  padding: 0;
  border: 0;
  background: var(--fg);
  color: var(--bg);
}

.bold .site-footer .wrap {
  /* About four times as much black below the text as above it, less
     20px to keep the bar from running too tall. */
  padding-block: clamp(2rem, 5vw, 3rem) calc(clamp(8rem, 20vw, 12rem) - 20px);
}

/* Email, location and LinkedIn stack on three lines at the page's left
   margin, on phones as on desktop. */
.bold .site-footer .links {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-left: 0;
}

.bold .site-footer a:focus-visible {
  outline-color: var(--bg);
}

/* The "Copied" toast pops up over the footer bar, so it can't share the
   bar's colour; it borrows the hero yellow instead. */
.bold .toast {
  background: var(--hero);
  color: #000;
}

.bold .site-footer ::selection {
  background: var(--bg);
  color: var(--fg);
}

.bold ::selection {
  background: var(--hero);
  color: #000;
}