/* ==========================================================================
   Home, Masthead layout (templates/home-masthead.php). Loaded only for this
   template; delete it together with the template and its blueprint.
   The name, edge to edge, is the hero; the portrait sits inside it like a
   letter. Everything else is small: the biggest jump in scale on the site.
   ========================================================================== */

/* Name ------------------------------------------------------------------------ */

.masthead { padding-top: var(--space-8); container-type: inline-size; }

.masthead__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  /* Sized to the container, not the viewport, so it always fills the
     content width edge to edge, whatever the screen */
  font-size: 19.6cqi;
  line-height: 0.82;
  letter-spacing: -0.035em;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.masthead__portrait {
  flex: none;
  height: 0.7em;
  aspect-ratio: 194 / 116;
  overflow: hidden;
  border-radius: var(--radius-pill);
}
.masthead__portrait .picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.masthead__word { display: inline-block; }
/* Room for the glyphs' overhangs (ascenders, the dots of the ï) inside each
   word's box, so the dot mask of the intro (blueprint.js) doesn't crop
   them; the negative margin keeps the layout as it was */
.masthead__word { padding: 0.2em 0.06em; margin: -0.2em -0.06em; }
/* The portrait's pill: holds the photo (and the optional view over it) */
.masthead__clip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  clip-path: inset(0 round 999px);
  /* Placeholder while the photo loads */
  background: var(--color-placeholder);
}

/* What the portrait was looking at (optional, set in the Panel): stacked
   over the portrait and shown through the 4px dot grid. main.js grows the
   dots while the pointer stays on the portrait; at 0 nothing shows, so
   without JS (or without a second photo) the portrait is unchanged. */
.masthead__view { position: absolute; inset: 0; }
.masthead__view .picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask: radial-gradient(circle, #000 var(--dot, 0px), transparent calc(var(--dot, 0px) + 0.5px)) 0 0 / 4px 4px;
          mask: radial-gradient(circle, #000 var(--dot, 0px), transparent calc(var(--dot, 0px) + 0.5px)) 0 0 / 4px 4px;
}
.masthead__portrait[data-portrait-view] { cursor: default; }

/* Info row: statement on the left half, intro on the right half -------------- */

.masthead__info {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.masthead__statement {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); /* 24 → 32 */
  line-height: 1.12;
  text-wrap: balance;
}
.masthead .intro { padding-top: 0; grid-template-columns: minmax(0, 1fr); }
.masthead .intro__text { font-size: var(--text-body); line-height: 1.55; color: var(--color-text-body); }


@media (min-width: 1024px) {
  .masthead__info {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }
  .masthead__statement { grid-column: 1 / span 5; }
  /* "More about me" sits under the intro it continues */
  .masthead .intro { grid-column: 7 / span 5; }
}

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

.template-home-masthead .work { margin-top: var(--space-11); }