:root {
  --home-ink: #353437;
  --home-link: #7253a2;
  --home-focus: #1d5d9b;
  /* The ground the artwork sits on; only visible before the image paints. */
  --home-lilac: #9c7fc9;
  /* The pale lilac behind the copy column. */
  --home-copy-bg: #e2dbff;
  /* Fraunces for the display H1, IBM Plex Sans for the bio and the nav: the
     same self-hosted pair base.css uses site-wide (see fonts.css). Kept as
     local variables so the homepage can tune size and tracking independently. */
  --home-display: var(--font-display);
  --home-text: var(--font-sans);

  /* This file is only linked from the homepage, so these override base.css
     for this page alone. Painting the canvas the copy colour covers anything
     the two panels do not: the area below them on viewports taller than the
     content, and the overscroll strip at either end. Without it base.css
     paints that white, or near-black under a dark system theme.

     color-scheme belongs here rather than on .home. base.css declares it on
     :root, and the canvas and scrollbars read it from the root element, so
     the value .home used to carry never reached them. */
  background: var(--home-copy-bg);
  color-scheme: light dark;
}

/* Dark mode: the same layout, with the pale lilac copy column swapped for a
   deep plum and the ink inverted. Ink, link and copy background follow the
   site-wide dark tokens from base.css so the homepage and the rest of the
   site stay in sync; only the portrait ground and focus ring stay
   homepage-specific. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --home-ink: var(--text);
    --home-link: var(--accent);
    --home-focus: #6ea8e0;
    /* The ground the artwork sits on; baked-in lilac, so not a site token. */
    --home-lilac: #4b3a6b;
    --home-copy-bg: var(--background);
  }

  /* The portrait's lilac ground is baked into the artwork and stays bright.
     Easing it down a touch keeps it from glaring against the dark column
     without muddying the linework. */
  .home__portrait {
    filter: brightness(0.82) contrast(1.02);
  }
}

/* Stacked layout is the base; the two-column split is layered on at 60rem. */
.home {
  color: var(--home-ink);
}

.home__image-panel {
  /* The live site sizes this band off viewport height, not width: exactly
     half the screen at every stacked size. Keying it off width read a
     landscape phone as "wide, so make the image big" when the screen had in
     fact got shorter, giving a 447px band on a 375px-tall viewport and
     pushing the entire copy column below the fold. */
  height: 50vh;
  height: 50svh;
  background: var(--home-lilac);
  overflow: hidden;
}

.home__image-panel picture {
  display: block;
  height: 100%;
}

.home__portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The artwork's focal point (the eye), matching the live site's
     data-image-focal-point of 0.48,0.42, so the crop holds the face instead
     of drifting with the image's geometric centre. */
  object-position: 48% 42%;
}

.home__content-panel {
  background: var(--home-copy-bg);
  /* 60px below the copy, matching the live site at every stacked width. */
  padding: 2.5rem 1.25rem 3.75rem;
}

.home__content {
  /* Caps the measure so stacked widths do not run 700px lines. */
  width: min(100%, 34rem);
  margin-inline: auto;
}

.home__header h1 {
  margin: 0 0 2.25rem;
  font-family: var(--home-display);
  font-size: clamp(2.75rem, 4.2vw, 3.375rem);
  font-weight: 600;
  /* Fraunces is a serif, so it needs less negative tracking than the geometric
     sans that used to sit here; -.01em keeps it tight without crowding. */
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.home__bio {
  font-family: var(--home-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.home__bio p {
  margin: 0 0 1rem;
}

.home__bio p:last-child {
  margin-bottom: 0;
}

.home a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.home a:hover {
  color: var(--home-link);
}

.home a:focus-visible {
  outline: 0.1875rem solid var(--home-focus);
  outline-offset: 0.2rem;
  border-radius: 0.1rem;
}

.home__links a {
  text-decoration: none;
}

.home__links {
  margin-top: 2.75rem;
  font-family: var(--home-text);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  /* Uppercase with .1em tracking, matching the live nav. */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

.home__links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tablet: still stacked, but the portrait gets a taller band and the text
   column gets more breathing room than the phone padding allows. */
@media (min-width: 48rem) {
  .home__content-panel {
    padding: 3rem 2rem 3.75rem;
  }
}

/* Desktop: the two-column split. Below this width a 50/50 grid crops the
   square portrait past recognition and squeezes the measure too far. */
@media (min-width: 60rem) {
  .home {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .home__image-panel {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .home__content-panel {
    display: flex;
    align-items: center;
    /* The live site pads its copy group by 60px and centres it, capped at
       620px, being 500px of measure plus that padding. So the inset is not a
       constant: it is 60px plus whatever half the leftover panel comes to,
       measuring 60px at 1024, 110px at 1440 and 230px at 1920. Pairing 60px
       here with the centred 500px cap below reproduces all three. */
    padding: clamp(2.5rem, 4vw, 3rem) 3.75rem;
  }

  .home__content {
    width: min(100%, 31.25rem);
  }
}