/* ARTIST HERO p3 - the exclusive light artist hero (Johan 2026-10-12).
   Same light editorial base as p2, pushed further toward quiet and air:
   wider grid gap, taller section padding, name at h1 scale, intro with
   more breathing room. Scoped to .p3-hero - touches nothing else.
   apply-page-b.css paints `.public-hero *{color:#fff!important}` for the
   dark apply/event heroes, so ink colors here carry !important. */
html body .p3-hero { background: var(--fusion-color-page); color: var(--fusion-color-ink); position: relative; overflow: hidden; }
html body .p3-hero__grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "txt media";
  gap: clamp(56px, 8vw, 132px);
  align-items: center;
  padding: clamp(96px, 12vw, 168px) 0 clamp(84px, 10vw, 140px);
}
/* Johan 2026-10-13: the text column centres against the IMAGE, not the
   whole panel - the info rows under the portrait must not pull the
   centre of gravity down. */
html body .p3-hero__txt { grid-area: txt; }
html body .p3-panel { display: contents; }
/* panel children become real grid items - they need their own min-width:0
   or long info strings (urls, exhibition names) force a sideways scroll. */
html body .p3-panel .p3-hero__media { grid-area: media; min-width: 0; }
html body .p3-hero .fusion-eyebrow { margin: 0 0 22px; letter-spacing: .12em; color: var(--fusion-color-ink)!important; }
html body .p3-hero h1 { margin: 0; font-size: var(--t-h1); letter-spacing: -0.025em; line-height: 1.05; color: var(--fusion-color-ink)!important; }
html body .p3-hero .public-hero__intro { max-width: 34em; margin: 34px 0 42px; line-height: 1.6; color: var(--fusion-color-ink)!important; }
html body .p3-hero .fusion-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* The shared `.public-hero *{color:#fff!important}` reaches every anchor
   inside the hero - links in the light hero keep ink. */
html body .p3-hero a { color: var(--fusion-color-ink) !important; }
/* Johan 2026-10-13: the two quiet hero actions are solid ink buttons. */
html body .p3-hero .fusion-btn:not(.fusion-btn--light):not(.fusion-btn--accent) {
  color: #fff !important;
  background: var(--fusion-color-ink);
  border-color: var(--fusion-color-ink);
}
html body .p3-hero .fusion-btn:not(.fusion-btn--light):not(.fusion-btn--accent):hover { background: transparent; color: var(--fusion-color-ink) !important; }
/* The accent action (Johan 2026-10-13): coral face, same width as the
   other two, after them in the row. */
html body .p3-hero .fusion-btn--accent {
  color: #fff !important;
  background: var(--fusion-color-cta);
  border-color: var(--fusion-color-cta);
}
html body .p3-hero .fusion-btn--accent:hover { background: var(--fusion-color-ink); border-color: var(--fusion-color-ink); }
/* Shared runtime orders hero buttons by position (.fusion-btn--light etc
   pull order:0 on some layouts) - the artist hero keeps DOM order at every
   width: quiet buttons first, the coral action last on its own row. */
html body .p3-hero .fusion-actions .fusion-btn { order: 0; }
html body .p3-hero .fusion-actions .fusion-btn--accent { order: 1; }
/* The profile panel (Johan 2026-10-12): the media frame is a SQUARE, the
   portrait crops inside it, and the facts the data carries sit below as
   quiet definition rows - location, education, links. */
html body .p3-panel { min-width: 0; }
html body .p3-hero .p3-hero__media, html body #top.p3-hero .p3-hero__media { margin: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; min-height: 0; aspect-ratio: 1 / 1 !important; overflow: hidden; }
html body .p3-hero__media img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; background: transparent; border-radius: 0; }
html body .p3-hero__media::after { content: none; }
html body .p3-hero__media figcaption,
html body .p3-cap { margin: 14px 0 0; font-size: var(--t-body-sm); font-weight: var(--fw-regular); letter-spacing: var(--track-text); line-height: var(--lead-text); text-align: right; color: var(--fusion-color-ink)!important; }

/* profile info rows under the square */
html body .p3-info { margin: 26px 0 0; padding: 0; }
html body .p3-info__row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid var(--fusion-color-border); }
html body .p3-info__row:first-child { border-top: 0; padding-top: 0; }
html body .p3-info dt { margin: 0; font-size: 12px; font-weight: var(--fw-bold, 700); letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--fusion-color-ink)!important; }
html body .p3-info dd { margin: 0; font-size: var(--t-body-sm, 15px); line-height: 1.6; letter-spacing: 1.1px; color: var(--fusion-color-ink)!important; }
html body .p3-info dd a { display: inline-block; padding: 13px 0; margin: -13px 0; color: inherit; text-decoration: none; }

@media (max-width: 900px) {
  html body .p3-hero__grid { grid-template-columns: 1fr; grid-template-areas: "media" "txt"; gap: 32px; padding: 48px 0 56px; }
  html body .p3-hero .fusion-eyebrow { margin-bottom: 14px; }
  html body .p3-hero .public-hero__intro { margin: 18px 0 24px; }
  /* mobile-touch.css shapes .public-hero__media for the flash stack
     (order:-1 image-first, aspect-ratio 8/5, max-height 42svh, img absolute).
     The panel goes first on phones; the square stays square but capped so
     the CTA can still land inside the first screen (G03). */
  html body .p3-panel { display: contents; }
  /* mobile-touch.css pins .public-hero__media to width:100% + margin:0 with
     !important for the dark flash heroes - without flags of our own those
     rules win and the "square" renders as a full-bleed ~1.5:1 band. Width is
     capped at 30svh so the box stays a true square and centred (margin auto)
     with the CTA still inside the first screen (G03). */
  html body .p3-hero .p3-hero__media, html body #top.p3-hero .p3-hero__media { order: -1; aspect-ratio: 1 / 1 !important; width: min(100%, 30svh) !important; max-height: 30svh !important; min-height: 0; height: auto !important; margin: 0 auto !important; }
  html body .p3-hero__media img { margin: 0; }
  html body .p3-hero__media figcaption,
  html body .p3-cap { text-align: left; }
  html body .p3-hero .public-hero__intro { margin: 18px 0 20px; }
  html body .p3-hero .fusion-actions { margin-top: 0; gap: 10px; }
  /* shared runtime assigns order:0/1/2 to hero buttons on the phone and
     pulls the action to the top - the artist hero keeps DOM order with
     the coral action last (Johan 2026-10-13). */
  html body .p3-hero .fusion-actions .fusion-btn { order: 0; }
  html body .p3-hero .fusion-actions .fusion-btn--accent { order: 1; }
  html body .p3-info { order: 1; margin-top: 44px; }
  html body .p3-info__row { grid-template-columns: minmax(104px, 34%) 1fr; }
}

/* hero eyebrow matches .p2-kicker weight (Johan 2026-10-13) */
html body .p3-hero .fusion-eyebrow { font-weight: 500 !important; }