/* Single-artist gallery templates — 10 dramatic, art-gallery-grade looks.
 *
 * Loaded ONLY on artist sites (middleware injects the <link> when
 * ARTIST_SITE). Every rule is scoped to html[data-artist-site]. Layout +
 * styling switch on [data-template]:
 *
 *   classic · monograph · editorial · atelier · passepartout ·
 *   kinfolk · salon · noir · bold · brutalist
 *
 * Colours come from middleware-injected palette custom properties
 * (--bg / --ink / --accent / --ink-muted); each template supplies its own
 * fallbacks via var(--x, default) so a site with no palette still looks
 * intentional, and a site WITH a palette restyles every template.
 *
 * Shared card hooks (both SSR'd + JS-hydrated grids):
 *   a.card > .card__media > img ; .card__body > .card__title + .card__sub
 * Hero: .shop-hero > .section__eyebrow + h1.shop-hero__title + .hero__lede
 *
 * Motion is real but guarded behind prefers-reduced-motion. Several
 * templates reveal the caption as an overlay on hover — done by promoting
 * .card to a positioning context and floating .card__body over .card__media.
 */

/* ══ Shared base ════════════════════════════════════════════════════════ */
html[data-artist-site] body { background: var(--bg, #ffffff); color: var(--ink, #15212d); }
html[data-artist-site] #grid.grid { display: grid; }
html[data-artist-site] .card { position: relative; }
html[data-artist-site] .card__media { overflow: hidden; position: relative; }
html[data-artist-site] .card__media img {
  display: block; width: 100%;
  transition: transform .8s cubic-bezier(.16, .84, .3, 1), filter .6s ease, opacity .5s ease;
  will-change: transform;
}
html[data-artist-site] a.card__tag,
html[data-artist-site] .card__price { color: var(--accent, inherit); }
/* Single-artist site → the artist dropdown is meaningless; hide it. */
html[data-artist-site] #artist { display: none; }

/* Entrance motion — hero rises, tiles stagger in. */
@media (prefers-reduced-motion: no-preference) {
  html[data-artist-site] .shop-hero__title,
  html[data-artist-site] .shop-hero .section__eyebrow,
  html[data-artist-site] .hero__lede { animation: as-hero .9s both cubic-bezier(.2, .7, .2, 1); }
  html[data-artist-site] .shop-hero .section__eyebrow { animation-delay: .05s; }
  html[data-artist-site] .hero__lede { animation-delay: .16s; }
  html[data-artist-site] #grid.grid > * { animation: as-rise .7s both cubic-bezier(.2, .7, .2, 1); }
  html[data-artist-site] #grid.grid > *:nth-child(1) { animation-delay: .04s; }
  html[data-artist-site] #grid.grid > *:nth-child(2) { animation-delay: .08s; }
  html[data-artist-site] #grid.grid > *:nth-child(3) { animation-delay: .12s; }
  html[data-artist-site] #grid.grid > *:nth-child(4) { animation-delay: .16s; }
  html[data-artist-site] #grid.grid > *:nth-child(5) { animation-delay: .20s; }
  html[data-artist-site] #grid.grid > *:nth-child(6) { animation-delay: .24s; }
  html[data-artist-site] #grid.grid > *:nth-child(7) { animation-delay: .28s; }
  html[data-artist-site] #grid.grid > *:nth-child(8) { animation-delay: .32s; }
  html[data-artist-site] #grid.grid > *:nth-child(n+9) { animation-delay: .36s; }
}
@keyframes as-hero { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes as-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* Overlay-caption helper — used by templates that float the caption over
   the image on hover. Applied per-template (not globally). */
html[data-artist-site].as-overlay-ready { }

/* ══ 1. CLASSIC — grand white gallery, serif drama, slow zoom ══════════ */
html[data-template="classic"] .shop-hero { text-align: center; padding: 84px 24px 28px; }
html[data-template="classic"] .section__eyebrow {
  text-transform: uppercase; letter-spacing: .42em; font-size: .7rem; color: var(--accent, #9a8f7a);
}
html[data-template="classic"] .shop-hero__title {
  font-family: "Playfair Display", Georgia, serif; font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: .005em; line-height: 1.04;
}
html[data-template="classic"] .shop-hero__title::after {
  content: ""; display: block; width: 60px; height: 2px; background: var(--accent, #9a8f7a);
  margin: 22px auto 0;
}
html[data-template="classic"] #grid.grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 56px 44px;
  max-width: 1160px; margin: 0 auto;
}
html[data-template="classic"] .card__title { font-family: "Playfair Display", Georgia, serif; font-weight: 500; }
html[data-template="classic"] .card:hover .card__media img { transform: scale(1.06); }
html[data-template="classic"] .card__media::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  pointer-events: none;
}

/* ══ 2. MONOGRAPH — museum white cube, cinematic margins, hairlines ════
   Templates own their background/mood (the storefront defines --bg globally,
   so a var() fallback never fires); the artist palette contributes --accent. */
html[data-template="monograph"] body { background: #fcfcfb; }
html[data-template="monograph"] .shop-hero { text-align: left; max-width: 1180px; margin: 0 auto; padding: 120px 40px 8px; }
html[data-template="monograph"] .section__eyebrow {
  text-transform: uppercase; letter-spacing: .4em; font-size: .64rem; color: var(--ink-muted, #9a9a93);
}
html[data-template="monograph"] .shop-hero__title {
  font-family: "Playfair Display", Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: .02em;
}
html[data-template="monograph"] #grid.grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 96px 64px;
  max-width: 1180px; margin: 0 auto; padding-top: 16px;
}
html[data-template="monograph"] .card__body {
  border-top: 1px solid color-mix(in srgb, var(--ink, #15212d) 16%, transparent);
  padding-top: 12px; margin-top: 18px; max-width: 30ch;
}
html[data-template="monograph"] .card__title { font-family: system-ui, sans-serif; font-weight: 500; font-size: .92rem; letter-spacing: .01em; }
html[data-template="monograph"] .card__sub { font-size: .78rem; color: var(--ink-muted, #9a9a93); }
html[data-template="monograph"] .card:hover .card__media img { filter: brightness(.96) contrast(1.03); }

/* ══ 3. EDITORIAL — magazine spread, oversized lead, hover captions ════ */
html[data-template="editorial"] body { background: #faf8f4; }
html[data-template="editorial"] .shop-hero { text-align: left; max-width: 1280px; margin: 0 auto; padding: 64px 28px 16px; }
html[data-template="editorial"] .section__eyebrow {
  text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--accent, #b5462e);
}
html[data-template="editorial"] .shop-hero__title {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5rem); max-width: 15ch; line-height: .98; letter-spacing: -.01em;
}
html[data-template="editorial"] #grid.grid {
  grid-template-columns: repeat(6, 1fr); gap: 22px; max-width: 1280px; margin: 0 auto;
}
html[data-template="editorial"] #grid.grid > * { grid-column: span 2; }
html[data-template="editorial"] #grid.grid > *:nth-child(7n + 1) { grid-column: span 4; }
html[data-template="editorial"] #grid.grid > *:nth-child(7n + 6) { grid-column: span 3; }
html[data-template="editorial"] #grid.grid > *:nth-child(7n + 1) .card__title { font-size: 1.5rem; }
html[data-template="editorial"] .card__title { font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
/* Hover-reveal caption over the image. */
html[data-template="editorial"] .card__body {
  position: absolute; inset: auto 0 0 0; padding: 28px 16px 14px; margin: 0;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72));
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
}
html[data-template="editorial"] .card:hover .card__body { opacity: 1; transform: none; }
html[data-template="editorial"] .card:hover .card__media img { transform: scale(1.05); }
html[data-template="editorial"] .card__sub { color: rgba(255,255,255,.82); }
@media (max-width: 700px) {
  html[data-template="editorial"] #grid.grid { grid-template-columns: repeat(2, 1fr); }
  html[data-template="editorial"] #grid.grid > *,
  html[data-template="editorial"] #grid.grid > *:nth-child(7n + 1),
  html[data-template="editorial"] #grid.grid > *:nth-child(7n + 6) { grid-column: span 1; }
}

/* ══ 4. ATELIER — warm paper, italic serif, tactile print shadows ══════ */
html[data-template="atelier"] body { background: #f1e9dc; color: #2e271e; }
html[data-template="atelier"] .shop-hero { text-align: center; padding: 84px 24px 20px; }
html[data-template="atelier"] .section__eyebrow {
  font-style: italic; letter-spacing: .04em; text-transform: none; font-size: 1rem; color: var(--accent, #9a6a3c);
}
html[data-template="atelier"] .shop-hero__title {
  font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-style: italic;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}
html[data-template="atelier"] #grid.grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 60px 44px;
  max-width: 1120px; margin: 0 auto;
}
html[data-template="atelier"] .card__media {
  background: #fffdf8; padding: 12px;
  box-shadow: 0 10px 28px rgba(70, 48, 24, .18); transition: box-shadow .5s ease, transform .5s ease;
}
html[data-template="atelier"] .card:hover .card__media { box-shadow: 0 22px 46px rgba(70, 48, 24, .28); transform: translateY(-4px); }
html[data-template="atelier"] .card__title { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; }

/* ══ 5. PASSEPARTOUT — deep matted frames, museum label captions ═══════ */
html[data-template="passepartout"] body { background: #e9e9e3; color: #20211c; }
html[data-template="passepartout"] .shop-hero { text-align: center; padding: 80px 24px 22px; }
html[data-template="passepartout"] .section__eyebrow {
  text-transform: uppercase; letter-spacing: .36em; font-size: .66rem; color: var(--ink-muted, #8c8c84);
}
html[data-template="passepartout"] .shop-hero__title {
  font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.2rem, 4.4vw, 3.2rem);
}
html[data-template="passepartout"] #grid.grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 56px; max-width: 1200px; margin: 0 auto;
}
html[data-template="passepartout"] .card__media {
  background: #fff; padding: 34px;
  border: 1px solid color-mix(in srgb, var(--ink, #20211c) 14%, transparent);
  box-shadow: 0 6px 20px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.06);
  transition: box-shadow .5s ease;
}
html[data-template="passepartout"] .card:hover .card__media { box-shadow: 0 16px 40px rgba(0,0,0,.22); }
html[data-template="passepartout"] .card__media img { box-shadow: 0 2px 5px rgba(0,0,0,.3); }
html[data-template="passepartout"] .card__body { text-align: center; margin-top: 16px; }
html[data-template="passepartout"] .card__title { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: .98rem; }
html[data-template="passepartout"] .card__sub { font-size: .76rem; letter-spacing: .04em; color: var(--ink-muted, #8c8c84); }

/* ══ 6. KINFOLK — zen, monumental whitespace, two columns, slow fades ══ */
html[data-template="kinfolk"] body { background: #f6f5f2; color: #38382f; }
html[data-template="kinfolk"] .shop-hero { text-align: center; padding: 160px 24px 56px; }
html[data-template="kinfolk"] .section__eyebrow {
  text-transform: uppercase; letter-spacing: .5em; font-size: .6rem; color: var(--ink-muted, #aaa89e);
}
html[data-template="kinfolk"] .shop-hero__title {
  font-family: system-ui, sans-serif; font-weight: 200;
  font-size: clamp(2rem, 4vw, 3rem); letter-spacing: .03em;
}
html[data-template="kinfolk"] #grid.grid {
  grid-template-columns: repeat(2, 1fr); gap: 160px 96px; max-width: 940px; margin: 0 auto;
}
html[data-template="kinfolk"] .card:hover .card__media img { transform: scale(1.03); filter: saturate(1.05); }
html[data-template="kinfolk"] .card__body { text-align: center; margin-top: 22px; }
html[data-template="kinfolk"] .card__title { font-family: system-ui, sans-serif; font-weight: 300; font-size: .92rem; letter-spacing: .06em; }
html[data-template="kinfolk"] .card__sub { font-size: .76rem; color: var(--ink-muted, #aaa89e); }
@media (max-width: 700px) { html[data-template="kinfolk"] #grid.grid { grid-template-columns: 1fr; gap: 96px; } }

/* ══ 7. SALON — dense salon hang, gilt frames on a deep wall ═══════════
   Dark templates own their background: a light artist palette must not
   flatten the drama (and a dark --ink would vanish on a dark wall). Only
   --accent is honoured as the per-artist tint. */
html[data-template="salon"] body { background: #1c241f; color: #ece4d3; }
html[data-template="salon"] .shop-hero {
  text-align: center; padding: 84px 24px 18px;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent, #c8a96a) 12%, transparent), transparent 55%);
}
html[data-template="salon"] .section__eyebrow {
  text-transform: uppercase; letter-spacing: .34em; font-size: .66rem; color: var(--accent, #c8a96a);
}
html[data-template="salon"] .shop-hero__title {
  font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.6rem);
}
html[data-template="salon"] #grid.grid {
  display: block; column-count: 4; column-gap: 26px; max-width: 1320px; margin: 0 auto;
}
html[data-template="salon"] .card {
  display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 26px; padding: 12px;
  background: #0d130f;
  border: 1px solid color-mix(in srgb, var(--accent, #c8a96a) 50%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,.5); transition: transform .4s ease, box-shadow .4s ease;
}
html[data-template="salon"] .card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.6); }
html[data-template="salon"] .card__title { font-family: "Playfair Display", Georgia, serif; font-size: .95rem; }
html[data-template="salon"] .card__sub { color: rgba(236, 228, 211, .62); }
@media (max-width: 1000px) { html[data-template="salon"] #grid.grid { column-count: 3; } }
@media (max-width: 700px)  { html[data-template="salon"] #grid.grid { column-count: 2; } }

/* ══ 8. NOIR — cinematic dark, spotlight, gold, hover-reveal captions ══
   Dark template — owns its background; only --accent is themed. */
html[data-template="noir"] body { background: #0a0a0c; color: #ece8e1; }
html[data-template="noir"] .shop-hero {
  text-align: center; padding: 128px 24px 40px;
  background: radial-gradient(ellipse at 50% -15%, color-mix(in srgb, var(--accent, #c8a96a) 20%, transparent), transparent 62%);
}
html[data-template="noir"] .section__eyebrow {
  text-transform: uppercase; letter-spacing: .46em; font-size: .68rem; color: var(--accent, #c8a96a);
}
html[data-template="noir"] .shop-hero__title {
  font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02;
}
html[data-template="noir"] .shop-hero__title::after {
  content: ""; display: block; width: 64px; height: 1px; background: var(--accent, #c8a96a); margin: 22px auto 0;
}
html[data-template="noir"] #grid.grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px; max-width: none; margin: 0;
}
html[data-template="noir"] .card__media img { filter: brightness(.82) saturate(.95); }
html[data-template="noir"] .card:hover .card__media img { transform: scale(1.06); filter: brightness(1.05) saturate(1.05); }
html[data-template="noir"] .card__body {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px; margin: 0; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  opacity: 0; transition: opacity .4s ease;
}
html[data-template="noir"] .card:hover .card__body { opacity: 1; }
html[data-template="noir"] .card__title { font-family: "Playfair Display", Georgia, serif; }
html[data-template="noir"] .card__sub { color: var(--accent, #c8a96a); letter-spacing: .04em; }
html[data-template="noir"] .filters { border-color: rgba(255,255,255,.1); }

/* ══ 9. BOLD — full-bleed wall, monumental type, gapless grid ══════════
   Dark template — owns its background; only --accent is themed. */
html[data-template="bold"] body { background: #0e0e10; color: #f4f4f5; }
html[data-template="bold"] .shop-hero { text-align: center; padding: 104px 16px 36px; }
html[data-template="bold"] .section__eyebrow { text-transform: uppercase; letter-spacing: .34em; color: var(--accent, #ff4d2e); }
html[data-template="bold"] .shop-hero__title {
  font-family: "Bellota Text", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(3rem, 9vw, 6.5rem); text-transform: uppercase; letter-spacing: .02em; line-height: .92;
  color: #f4f4f5;
}
html[data-template="bold"] #grid.grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2px; max-width: none; margin: 0;
}
html[data-template="bold"] .card, html[data-template="bold"] .card__media, html[data-template="bold"] .card__media img { border-radius: 0; }
html[data-template="bold"] .card__media img { filter: grayscale(1) contrast(1.05); }
html[data-template="bold"] .card:hover .card__media img { filter: grayscale(0); transform: scale(1.04); }
html[data-template="bold"] .card__body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px; margin: 0; color: #fff; background: rgba(14,14,16,.42);
  opacity: 0; transition: opacity .35s ease;
}
html[data-template="bold"] .card:hover .card__body { opacity: 1; }
html[data-template="bold"] .card__title { font-family: "Bellota Text", system-ui, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
html[data-template="bold"] .filters { border-color: rgba(255,255,255,.12); }

/* ══ 10. BRUTALIST — raw mono grid, hard rules, invert-on-hover label ══ */
html[data-template="brutalist"] body { background: #f4f4f0; color: #0a0a0a; }
html[data-template="brutalist"] .shop-hero {
  text-align: left; padding: 56px 24px 20px; border-bottom: 3px solid var(--ink, #0a0a0a);
}
html[data-template="brutalist"] .section__eyebrow {
  font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem;
}
html[data-template="brutalist"] .shop-hero__title {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.02em; line-height: .98;
}
html[data-template="brutalist"] #grid.grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0;
  border-left: 1px solid var(--ink, #0a0a0a); border-top: 1px solid var(--ink, #0a0a0a);
  max-width: none; margin: 0;
}
html[data-template="brutalist"] .card {
  border-right: 1px solid var(--ink, #0a0a0a); border-bottom: 1px solid var(--ink, #0a0a0a);
}
html[data-template="brutalist"] .card__media img { border-radius: 0; filter: grayscale(1); transition: filter .3s steps(3); }
html[data-template="brutalist"] .card:hover .card__media img { filter: grayscale(0); }
html[data-template="brutalist"] .card__body { padding: 14px 16px 18px; background: var(--bg, #f4f4f0); }
html[data-template="brutalist"] .card__title {
  font-family: ui-monospace, Menlo, monospace; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .02em;
}
html[data-template="brutalist"] .card__sub { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; }
html[data-template="brutalist"] .card:hover .card__body { background: var(--ink, #0a0a0a); color: var(--bg, #f4f4f0); }

/* ══ Dark-template chrome ══════════════════════════════════════════════
   The storefront hero is var(--cream) and the sticky filter bar is white;
   on a dark template that's a jarring light band (and a white title on
   cream is unreadable). Carry the dark mood across hero + filters. */
html[data-template="bold"] .shop-hero { background: #0e0e10; border-bottom-color: rgba(255,255,255,.08); }
html[data-template="noir"] .filters,
html[data-template="bold"] .filters,
html[data-template="salon"] .filters {
  background: rgba(12, 14, 12, .9); border-bottom-color: rgba(255,255,255,.1);
}
html[data-template="noir"]  .filters input, html[data-template="noir"]  .filters select,
html[data-template="bold"]  .filters input, html[data-template="bold"]  .filters select,
html[data-template="salon"] .filters input, html[data-template="salon"] .filters select {
  background: rgba(255,255,255,.06); color: inherit; border-color: rgba(255,255,255,.2);
}