/* storefront.css -- the artist storefront layer (FAMILY page: /hub/artist/<slug>/).
 * MARKED LAYER hub-storefront-20260913 build (lineage: hub-2c builder hub.css tokens; hub-2d motion hooks)
 * MARKED LAYER hub-brand-20260914-56 tokens-type-surfaces: site.css tokens via hub.css aliases; one rule per line for the CSS gate.
 * ROUND2-BRIEF paper palette (0c, 2026-09-13) refuted by owner 2026-09-14: THE ART OF THE DIGITAL A&R IS OFF BRAND, FIX THAT */
.sf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px 40px }
.sf-section { padding: clamp(32px, 5vw, 56px) 0 8px; border-top: 1px solid var(--seam) }
.sf-h3 { margin: 22px 0 10px; font: 400 0.7rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--canvas-gold) }
.sf-count { font: 400 0.8rem/1 var(--mono); color: var(--ash) }
.sf-cover { position: relative; margin: 0 -16px 8px; overflow: hidden; background: var(--void); color: var(--salt); border-bottom: 3px solid transparent; border-image: var(--hub-tri) 1 }
.sf-cover__photo { position: absolute; inset: 0 }
.sf-cover__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .55 }
.sf-cover__band { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 60vh; padding: 28px 16px 24px; background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .7) 62%, var(--void) 100%) }
.sf-cover__marks { display: flex; align-items: center; gap: 12px; margin-bottom: 16px }
.sf-logo { display: block; width: 148px; max-width: 42%; height: auto; border: 1px solid var(--seam-strong); background: var(--tile) }
.sf-flag { display: block; width: 44px; height: 28px; object-fit: cover; border: 1px solid var(--seam-strong) }
body[data-hub-layer] .sf-cover .sf-name { margin: 6px 0 14px; font: 900 clamp(52px, 10vw, 150px)/0.86 var(--display); letter-spacing: -0.005em; text-transform: uppercase; color: var(--salt); text-wrap: balance; overflow-wrap: break-word }
.sf-tagline { margin: 0 0 8px; font: 300 clamp(1.05rem, 1.6vw, 1.3rem)/1.5 var(--body); color: var(--salt) }
.sf-cat { margin: 0 0 14px; font: 400 0.72rem/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--salt) }
body[data-hub-layer] .sf-state { align-self: flex-start; padding: 8px 12px; border: 1px solid var(--seam-strong); color: var(--salt) }
body[data-hub-layer] .sf-state[data-state="CLAIMED"] { border-color: var(--canvas-gold); color: var(--canvas-gold) }
.sf-section--bio { display: grid; gap: 22px 40px }
.sf-section--bio > .ar-h2 { grid-column: 1 / -1 }
body[data-hub-layer] .sf-bio__short { margin: 0 0 18px; font: 300 clamp(1.15rem, 1.8vw, 1.45rem)/1.5 var(--body); color: var(--salt); opacity: 1; max-width: 62ch }
.sf-bio__long { max-width: 62ch; font-weight: 300; line-height: 1.7; color: var(--salt) }
.sf-dated__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--canvas-green) }
.sf-dated__line { padding: 9px 0 9px 14px; font-size: 14px; line-height: 1.45; color: var(--salt); border-bottom: 1px solid var(--seam) }
.sf-picture { margin: 0; border: 1px solid var(--seam); background: var(--tile) }
.sf-picture__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover }
.sf-picture__cap { padding: 10px 12px; font: 400 0.7rem/1.5 var(--mono); letter-spacing: 0.04em; color: var(--ash) }
.sf-connect, .sf-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.sf-connect__link, .sf-sections__link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--seam); background: var(--void); color: var(--salt); text-decoration: none; font: 400 0.72rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; transition: border-color var(--m-dur-fast) ease, background-color var(--m-dur-fast) ease, color var(--m-dur-fast) ease }
.sf-connect__link:is(:hover, :focus-visible), .sf-sections__link:is(:hover, :focus-visible) { border-color: var(--canvas-red); background-color: var(--tile); color: var(--salt) }
.sf-connect__link:active, .sf-sections__link:active, .sf-card__buy:active { transform: scale(.97) }
.sf-connect__icon { flex: 0 0 30px; width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--seam-strong); border-radius: 50%; background: var(--tile); color: var(--salt); font: 400 12px/1 var(--mono); transition: background-color var(--m-dur-fast) ease }
.sf-connect__link:is(:hover, :focus-visible) .sf-connect__icon { background: var(--canvas-red); border-color: var(--canvas-red) }
.sf-connect__icon::before { content: "\2197" }
[data-net="instagram"] .sf-connect__icon::before { content: "IG" }
[data-net="facebook"] .sf-connect__icon::before { content: "f" }
[data-net="youtube"] .sf-connect__icon::before { content: "\25B6" }
[data-net="spotify"] .sf-connect__icon::before { content: "\266A" }
[data-net="apple-music"] .sf-connect__icon::before { content: "\266B" }
[data-net^="amazon"] .sf-connect__icon::before { content: "a" }
[data-net^="google"] .sf-connect__icon::before { content: "G" }
[data-net="chartmetric"] .sf-connect__icon::before { content: "\25AE" }
[data-net="square-shop"] .sf-connect__icon::before { content: "\25A3" }
[data-net^="store-bookbaby"] .sf-connect__icon::before { content: "\25A4" }
[data-net="email"] .sf-connect__icon::before { content: "@" }
:is([data-net="instagram"], [data-net="youtube"]) .sf-connect__icon { border-color: var(--canvas-red) }
:is([data-net="spotify"], [data-net="apple-music"]) .sf-connect__icon { border-color: var(--canvas-green) }
:is([data-net^="amazon"], [data-net^="google"], [data-net="square-shop"], [data-net^="store-bookbaby"]) .sf-connect__icon { border-color: var(--canvas-gold) }
.sf-sections__link[data-kind="hub"] { border-left: 3px solid var(--canvas-gold) }
.sf-sections__link[data-kind="site"] { border-left: 3px solid var(--canvas-red) }
.sf-seats .hub-seat[data-state="taken"] { border-color: var(--canvas-gold) }
.sf-btn { min-height: 48px; padding: 12px 20px }
.sf-doors .hub-door { text-align: left; font: inherit; cursor: pointer; min-height: 110px; border-style: solid; border-color: var(--seam); border-width: 0 1px 1px 0; background: var(--void); color: var(--salt) }
.sf-doors .hub-door:focus-visible { outline: 2px solid var(--canvas-gold); outline-offset: -2px }
.sf-door__note { display: none; margin-top: 6px; color: var(--red-ink) }
.sf-door[data-rsvp-state="none"] .sf-door__note { display: block }
.sf-board__more { min-height: 48px; margin: 12px 0 0 }
.sf-fold { display: grid; gap: 8px }
.sf-board { padding: 28px 0 12px; border-top: 1px solid var(--seam) }
.sf-board__head { display: flex; align-items: baseline; gap: 12px }
.sf-board__head .ar-h2 { margin: 0 }
.sf-board__site { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--salt); text-decoration: underline; text-decoration-color: var(--red-ink); text-underline-offset: 5px }
.sf-board__site:is(:hover, :focus-visible) { color: var(--red-ink) }
.sf-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.sf-card { display: flex; flex-direction: column; min-width: 0; padding: 0 0 10px; border: 1px solid var(--seam); background: var(--void); transition: border-color var(--m-dur-fast) ease }
.sf-card:is(:hover, :focus-within) { border-color: var(--seam-strong) }
.sf-card__img { display: block; aspect-ratio: 1 / 1; background: var(--tile) }
.sf-card[data-kind="video"] .sf-card__img { aspect-ratio: 4 / 3 }
.sf-card__img img { display: block; width: 100%; height: 100%; object-fit: cover }
.sf-card__t { margin: 10px 10px 4px; font: 700 1.15rem/1.02 var(--display); letter-spacing: 0.01em; text-transform: uppercase }
.sf-card__sub { margin: 0 10px 4px; font-size: 13px; color: var(--salt) }
.sf-card__meta { margin: 0 10px 4px; font: 400 0.68rem/1.45 var(--mono); color: var(--ash) }
.sf-card__buys { list-style: none; margin: auto 0 0; padding: 6px 10px 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center }
.sf-card__buys li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100% }
.sf-card__buy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--canvas-red); background: transparent; color: var(--salt); text-decoration: none; font: 400 0.7rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; transition: background-color var(--m-dur-fast) ease, transform var(--m-dur-fast) var(--m-ease-spring) }
.sf-card__buy:is(:hover, :focus-visible) { background: var(--canvas-red) }
.sf-price { font: 400 0.8rem/1 var(--mono); color: var(--salt) }
.sf-price--out { color: var(--red-ink) }
@media (max-width: 1023px) { .sf-board[data-cap][data-open="0"] .sf-card:nth-child(n+5) { display: none }
.sf-board[data-open="1"] .sf-board__more { display: none }
 }
@media (min-width: 720px) { .sf-cover__band { padding: 40px 24px 30px; min-height: 52vh }
.sf-logo { width: 200px }
.sf-section--bio { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start }
.sf-connect, .sf-sections { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 }
@media (min-width: 1024px) { .sf-board__more { display: none }
.sf-fold { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.sf-board { border-top: 0; border-left: 1px solid var(--seam); padding-left: 14px }
.sf-board:first-child { border-left: 0; padding-left: 0 }
body[data-hub-layer] .sf-board .ar-h2 { font-size: clamp(28px, 2.6vw, 40px) }
.sf-grid { grid-template-columns: 1fr }
.sf-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 10px; align-items: start }
.sf-card__img { flex: 0 0 96px; width: 96px; aspect-ratio: 1 / 1; grid-row: 1 / -1 }
.sf-card > :not(.sf-card__img) { grid-column: 2 }
.sf-card__buys { padding-left: 0; padding-right: 10px }
.sf-card[data-kind="video"] .sf-card__img { aspect-ratio: 1 / 1 }
.sf-card > :not(.sf-card__img) { margin-left: 0 }
.sf-card__t { margin-top: 8px }
.sf-connect, .sf-sections { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.sf-cover { margin: 0 0 8px }
.sf-picture { position: sticky; top: 72px }
 }
@media (prefers-reduced-motion: reduce) { .sf-connect__link:active, .sf-sections__link:active, .sf-card__buy:active { transform: none }
 }
/* fix-css-r1 (2026-09-14): this sheet loads only on storefront pages; nothing here waits on the observer to be seen */
html.m-ready body[data-hub-layer] [data-reveal]:not(.is-in), html.m-ready body[data-hub-layer] [data-stagger]:not(.is-in) > * { opacity: 1 }

/* MARKED LAYER skyhigh-storefront-picture-first-20260928: keep the complete cover photo clear,
   with the artist name and studio information on their own canvas below it. */
body[data-hub-layer] .sf-cover { display: flex; flex-direction: column; }
body[data-hub-layer] .sf-cover__photo {
  position: relative; inset: auto; display: flex; justify-content: center;
  background: linear-gradient(100deg, #2c0e0b 0%, #0b0a09 38%, #0b0a09 62%, #0d281b 100%);
  border-left: 3px solid var(--canvas-red); border-right: 3px solid var(--canvas-green);
}
body[data-hub-layer] .sf-cover__img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: min(76vh, 860px);
  object-fit: contain; opacity: 1; filter: none; border-inline: 2px solid var(--canvas-gold);
}
body[data-hub-layer] .sf-cover__band {
  position: relative; min-height: 0; background: var(--void);
  border-top: 2px solid var(--canvas-gold);
}
body[data-hub-layer] .sf-picture__img {
  width: 100%; height: auto; max-height: 72vh; aspect-ratio: auto; object-fit: contain;
}
@media (min-width: 900px) {
  body[data-hub-layer] .sf-cover {
    display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    min-height: min(76vh, 860px); align-items: stretch;
  }
  body[data-hub-layer] .sf-cover__photo { align-items: center; }
  body[data-hub-layer] .sf-cover__band {
    display: flex; flex-direction: column; justify-content: center;
    border-top: 0; border-left: 2px solid var(--canvas-gold);
    padding-inline: clamp(28px, 4vw, 72px);
  }
}