/* artist2 (Artist Profile 2) - the gallery-direction artist/artwork family.
   Harvested 2026-10-12 from the approved donor open-calls/artist-profile2/
   (WEB5F, Johan's spec: artworks dominate, calm editorial structure, visible
   prices, personal contact path to the gallery). Only tokens.css values.
   Footer, header, mobile-menu and base-type rules are owned by the shared
   footer/header parts and the platform runtime - not repeated here.
   "html body" wins over the runtime component rules, same as the donor. */

/* ---------- gate typography for artist2 classes ---------- */
html body .p2-kicker,
html body .artwork-card__title,
html body .artwork-card__status,
html body .artwork-card__view,
html body .work-status { font-weight: var(--fw-medium); letter-spacing: var(--track-caps); line-height: var(--lead-caps); text-transform: uppercase; }

html body .p2-hero h1,
html body .p2-section-title,
html body .artist-story h2,
html body .artist-exhibitions h2,
html body .artist-contact h2,
html body .work-panel__title { font-weight: var(--fw-thin); letter-spacing: var(--track-heading); line-height: var(--lead-display); text-transform: none; }

html body .public-hero__intro,
html body .artwork-card__meta,
html body .artwork-card__price,
html body .artist-story p:not(.p2-kicker),
html body .artist-exhibitions li,
html body .artist-contact p:not(.p2-kicker),
html body .work-desc p,
html body .p2-cap { font-weight: var(--fw-regular); letter-spacing: var(--track-text); line-height: var(--lead-text); }

html body .p2-kicker { font-size: var(--t-eyebrow); }
html body .public-hero__intro,
html body .artwork-card__meta,
html body .artwork-card__price,
html body .artist-story p:not(.p2-kicker),
html body .artist-exhibitions li,
html body .artist-contact p:not(.p2-kicker),
html body .work-desc p,
html body .p2-cap,
html body .artwork-card__title { font-size: var(--t-body-sm); }
html body .artwork-card__status,
html body .work-status { font-size: var(--t-small); letter-spacing: var(--track-caps); line-height: var(--lead-caps); }
html body .artwork-card__view { font-size: var(--t-button); letter-spacing: .12em; }

/* ---------- hero: light editorial, featured work uncropped ---------- */
html body .p2-hero { background: var(--fusion-color-page); color: var(--fusion-color-ink); position: relative; overflow: hidden; }
html body .p2-hero__grid { min-height: 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(42px, 6vw, 104px); align-items: center; padding: 72px 0 64px; }
/* apply-page-b.css carries `.public-hero *{color:#fff!important}` for the dark
   apply/event heroes. The p2 hero is the light editorial variant, so the ink
   colors below must carry !important to outrank that universal rule. */
html body .p2-hero .fusion-eyebrow { margin: 0 0 14px; color: var(--fusion-color-ink)!important; }
html body .p2-hero h1 { margin: 0; max-width: 760px; font-size: var(--t-h2); color: var(--fusion-color-ink)!important; }
html body .p2-hero .public-hero__intro { max-width: 620px; margin: 24px 0; color: var(--fusion-color-ink)!important; }
html body .p2-hero .fusion-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* workshop-page.css inverts .public-hero buttons to a white face for dark
   heroes; the p2 hero keeps that face and restores the ink label. A --light
   coral CTA keeps its own white label. */
html body .p2-hero .fusion-btn:not(.fusion-btn--light) { color: var(--fusion-color-ink)!important; }
html body .p2-hero__media { margin: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; min-height: 0; }
/* The whole work, bare: no ink letterbox, no badge pill, no rounding. Spec:
   no crop, no overlay text, no decorative frame. */
html body .p2-hero__media img { position: static; width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; background: transparent; border-radius: 0; }
html body .p2-hero__media::after { content: none; }
html body .p2-hero__media figcaption,
html body .p2-cap { margin: 12px 0 0; font-size: var(--t-body-sm); color: var(--fusion-color-ink)!important; }

/* ---------- local sub-navigation ---------- */
html body .artist-subnav {
  border-block: 1px solid var(--fusion-color-border);
}
html body .artist-subnav > .fusion-shell > nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--gutter);
}
html body .artist-subnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--fusion-color-ink);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-caps);
  line-height: var(--lead-caps);
  text-decoration: none;
  text-transform: uppercase;
}
html body .artist-subnav a:focus-visible {
  outline: 2px solid var(--fusion-color-ink);
  outline-offset: 2px;
}

/* ---------- artwork grid (module artwork-grid) ---------- */
html body .artwork-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; margin: 0; padding: 0; list-style: none; }
html body .artwork-card { display: block; color: inherit; text-decoration: none; margin: 0; }
html body .artwork-card__media { display: block; overflow: hidden; box-shadow: var(--shadow-photo); }
html body .artwork-card__media img { display: block; width: 100%; height: auto; transition: transform 0.7s ease; }
html body .artwork-card:hover .artwork-card__media img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  html body .artwork-card__media img { transition: none; }
  html body .artwork-card:hover .artwork-card__media img { transform: none; }
}
html body .artwork-card__title { display: block; color: var(--fusion-color-ink); }
html body .artwork-card__meta { display: block; color: var(--fusion-color-ink); margin-top: 2px; }
html body .artwork-card__price { display: block; font-weight: var(--fw-bold); color: var(--fusion-color-ink); margin-top: 6px; }
html body .artwork-card__status { display: block; color: var(--fusion-color-ink); margin-top: 6px; }
html body .artwork-card__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; padding: 16px 0 0; }
html body .artwork-card__main { min-width: 0; }
html body .artwork-card__side { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
html body .artwork-card__side .artwork-card__price, html body .artwork-card__side .artwork-card__status { margin-top: 0; }
html body .artwork-card__view { grid-column: 1 / -1; justify-self: start; display: inline-flex; margin-top: 12px; text-decoration: none; }
html body .artist-links__title { font-size: var(--t-h3); margin: 0 0 18px; }

/* ---------- related-work cards on the work view (module artwork-detail) ----------
   Same family as the artist page's sale rail, but the image keeps its own
   proportions: no crop on a work, that is the Profile 2 rule. */

html body .artwork-card:hover .artwork-card__view { color: var(--fusion-color-ink); }

/* ---------- artist story ---------- */
html body .artist-story__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(42px, 6vw, 96px); align-items: start; }
html body .artist-story__grid--noimg { grid-template-columns: minmax(0, 680px); }
html body .artist-story__media img { display: block; width: 100%; height: auto; }
html body .artist-story h2 { font-size: var(--t-h3); margin: 0 0 24px; }
html body .artist-story p { margin: 0 0 16px; max-width: 620px; }

/* ---------- artist quote ---------- */
html body .artist-quote blockquote { margin: 0; max-width: 860px; font-size: var(--t-h4); font-weight: var(--fw-thin); letter-spacing: var(--track-heading); line-height: var(--lead-heading); color: var(--fusion-color-ink); }
html body .artist-quote cite { display: block; margin-top: 18px; font-size: var(--t-label); font-weight: var(--fw-medium); letter-spacing: var(--track-caps); line-height: var(--lead-caps); text-transform: uppercase; font-style: normal; color: var(--fusion-color-ink); }

/* ---------- exhibitions list ---------- */
html body .artist-exhibitions h2 { font-size: var(--t-h3); margin: 0 0 32px; }
html body .exhibit-list { margin: 0; padding: 0; list-style: none; }
html body .exhibit-list li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-top: 1px solid var(--fusion-color-border); }
html body .exhibit-list li:last-child { border-bottom: 1px solid var(--fusion-color-border); }
html body .exhibit-list .exhibit-year { font-weight: var(--fw-bold); }
html body .exhibit-list .exhibit-title-link { color: inherit; text-decoration: none; display: inline-block; padding: 13px 0; margin: -13px 0; }
html body .exhibit-film { margin-top: 28px; }
html body .exhibit-film iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* ---------- gallery contact ---------- */
html body .artist-contact h2 { font-size: var(--t-h3); margin: 0 0 16px; }
html body .artist-contact p { max-width: 620px; margin: 0 0 24px; }

/* ---------- work detail view (module artwork-detail) ---------- */
html body .artwork-detail__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr); gap: clamp(42px, 6vw, 96px); align-items: start; }
html body .work-media { background: var(--fusion-color-ink); }
html body .work-media__main { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
html body .work-media__thumbs { display: flex; gap: 8px; padding: 8px; margin: 0; list-style: none; background: var(--fusion-color-ink); }
html body .work-media__thumbs li { margin: 0; padding: 0; }
html body .work-media__thumbs img { display: block; width: 72px; height: 72px; object-fit: cover; }
html body .work-media__zoom { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: inherit; overflow: hidden; }
html body .work-media__zoom .work-media__main { transition: transform 0.7s ease; }
html body .work-media__zoom:hover .work-media__main { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  html body .work-media__zoom .work-media__main { transition: none; }
  html body .work-media__zoom:hover .work-media__main { transform: none; }
}
html body .work-media__zoom--thumb { width: 72px; height: 72px; }
html body .work-media__zoom:focus-visible { outline: 2px solid var(--fusion-color-ink); outline-offset: 2px; }
html body .work-zoom { max-width: 94vw; max-height: 94vh; margin: auto; padding: 0; border: 0; background: transparent; }
html body .work-zoom::backdrop { background: rgba(12, 12, 12, .92); }
html body .work-zoom__img { display: block; max-width: 94vw; max-height: 94vh; width: auto; height: auto; object-fit: contain; }
html body .work-zoom__close { position: fixed; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: 0; border-radius: 0; background: var(--fusion-color-ink); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
html body .work-zoom__close:hover { background: #333; }
html body .work-zoom__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html body .work-panel__kicker { font-size: var(--t-label); font-weight: var(--fw-medium); letter-spacing: var(--track-caps); line-height: var(--lead-caps); text-transform: uppercase; margin: 0 0 8px; }
html body .work-panel__title { font-size: var(--t-h3); margin: 0 0 16px; }
/* Johan 2026-10-13: 5px between fact rows (was 44px min-height rows);
   links keep a 44px hit area through the padding/margin trick so the row
   itself stays tight. No underline - the book's rule, see EXTERNAL-AGENT-BOOK. */
html body .work-meta { margin: 0 0 20px; padding: 0; display: grid; gap: 5px; }
html body .work-meta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
html body .work-meta dt { text-align: left; font-size: var(--t-label); font-weight: var(--fw-bold); letter-spacing: var(--track-caps); line-height: var(--lead-caps); text-transform: uppercase; display: flex; align-items: center; }
html body .work-meta dd { margin: 0; font-size: var(--t-body); font-weight: var(--fw-regular); letter-spacing: var(--track-text); line-height: var(--lead-text); display: flex; align-items: center; }
html body .work-meta dd a { color: var(--fusion-color-ink); display: inline-flex; align-items: center; padding: 10px 0; margin: -10px 0; text-decoration: none; }
html body .work-price { font-size: var(--t-h5); font-weight: var(--fw-bold); letter-spacing: var(--track-heading); line-height: var(--lead-heading); margin: 0 0 8px; }
html body .work-status { margin: 0 0 20px; }
html body .work-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
html body .work-ctas .fusion-btn { flex: 1 1 220px; justify-content: center; min-height: var(--tap-min); }

/* related works reuse the public-art-card rhythm: 3-col, cover media */

/* ---------- mobile ---------- */

/* Works detail: last section needs the same 150px gap to the footer as the
   artist page's links section (Johan 2026-10-13). Scoped by the detail
   section's presence so artist pages are untouched. */
html body .artwork-detail ~ #contact { padding-bottom: 150px; }

@media (max-width: 899px) {
  html body .artwork-detail__grid { grid-template-columns: 1fr; }
  html body .artist-story__grid { grid-template-columns: 1fr; }
}
@media (max-width: 619px) {
  /* Subnav scrolls sideways in one row instead of wrapping to two; keeps the
     work view's first screen inside the fold in every language. */
  /* Spec order: name, short intro, work image, caption, View the works. */
  html body .p2-hero__grid { grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
  /* mobile-touch.css flattens the hero's first child to flex; the extra class
     on the child selector wins so the name/intro/image/CTA order stands. */
  html body .p2-hero__grid > .p2-hero__txt { display: contents; }
  html body .p2-hero .fusion-eyebrow { order: 1; }
  html body .p2-hero h1 { order: 2; font-size: var(--t-h3); }
  html body .p2-hero .public-hero__intro { order: 3; margin: 12px 0; }
  html body .p2-hero__media { order: 4; }
  html body .p2-hero .fusion-actions { order: 5; }
  html body .artwork-grid { grid-template-columns: 1fr; }
  html body .exhibit-list li { grid-template-columns: 56px minmax(0, 1fr); }
  html body .exhibit-list .exhibit-venue { grid-column: 2; }
}

/* ---------- work view phone order: image, facts, contact (G03 first screen).
   These rules sit at the file's end so they win over the base work rules of
   the same specificity. The image is height-capped, never cropped. */
@media (max-width: 900px) {
  html body .work-media__main { max-height: 40vh; width: auto; max-width: 100%; margin: 0 auto; }
  html body .work-media__thumbs { gap: 6px; }
  html body .work-media__zoom--thumb,
  html body .work-media__thumbs img { width: 56px; height: 56px; }
  html body .work-panel { display: flex; flex-direction: column; }
  /* CTA before facts on phones (G03: the ask button must land inside the
     first screen - desktop keeps Johan's text-facts-buttons order). */
  html body .work-ctas { order: 5; margin-top: 18px; }
  html body .work-desc { order: 6; }
  html body .work-meta { order: 7; }
  html body .work-panel__kicker { order: 1; }
  html body .work-panel__title { order: 2; }
  html body .work-price { order: 3; }
  html body .work-status { order: 4; }
}

/* Phone fold: after the work-view reorder above (which must stay last-ish),
   the media block is tightened so the ask CTA lands inside the first screen
   in every language. Same specificity, later source order wins. */
@media (max-width: 619px) {
  html body .work-media__main { max-height: 28vh; }
  html body .work-media__zoom--thumb,
  html body .work-media__thumbs img { width: 44px; height: 44px; }
}

/* ---------- collector voices (module collector-quote) ---------- */
html body .collector-quote__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 56px; }
html body .collector-quote blockquote { margin: 0; }
html body .collector-quote blockquote p { margin: 0; font-size: var(--t-h5, 20px); font-weight: var(--fw-thin); letter-spacing: var(--track-heading); line-height: var(--lead-heading); color: var(--fusion-color-ink); }
html body .collector-quote cite { display: block; margin-top: 16px; font-size: var(--t-label); font-weight: var(--fw-medium); letter-spacing: var(--track-caps); line-height: var(--lead-caps); text-transform: uppercase; font-style: normal; color: var(--fusion-color-ink); }


/* Johan 2026-10-13: standard 40px gap between sections on artist pages.
   Each section contributes 20px block padding -> 40px between them. */
/* Uniform ~150px visual gap between artist-page sections (Johan 2026-10-13):
   edge margins inside sections are zeroed so the gap is padding-only. */
html body .fusion-section { padding: 75px 0; }
html body .fusion-section > :last-child,
html body .fusion-section > .fusion-shell > :last-child { margin-bottom: 0 !important; }
html body .fusion-section > :first-child,
html body .fusion-section > .fusion-shell > :first-child { margin-top: 0 !important; }
html body .fusion-section h1, html body .fusion-section h2, html body .fusion-section h3,
html body .fusion-section .p2-section-title, html body .fusion-section .p2-kicker { margin-top: 0 !important; }
html body .fusion-section > .fusion-shell > :not(.artist-links__row) > :last-child { margin-bottom: 0 !important; }
html body .artist-links.fusion-section { padding-bottom: 150px; }

/* Footer gap for EVERY artist/artwork page (Johan 2026-10-13): the 150px
   rule used to live on .artist-links only, so an artist without a Follow
   section got 75px. The last section before the footer always gets 150. */
html body main > section.fusion-section:last-of-type { padding-bottom: 150px; }