/* ArtPro Gallery — the per-page styles from the static site.
 *
 * On the static site each page carried its own <style> block: the service
 * cards lived in services.html, the artist cards in artists.html, and so on.
 * styles.css never contained them. The first port copied styles.css and the
 * markup but not these, so every one of those components rendered unstyled —
 * the services page came out as a column of underlined links.
 *
 * They are gathered here verbatim, in page order, and loaded site-wide. That
 * is safe because every selector is a distinctive component class
 * (.svc-hub-card, .artist-block, .fi-grid …) that appears on one page only.
 * Two blocks are duplicated between artist.html and art-by-artists.html in
 * the original — .artwork-grid and .artwork — and are kept once here.
 *
 * As with styles.css: copied, not rewritten. Do not restyle.
 */

/* ---------- index.html — featured links, FAQ, visualiser promo ---------- */
  #featured-art .card__artist a { color:inherit; text-decoration:none; transition:color .2s; }
  #featured-art .card__artist a:hover { color:var(--gold-deep,#8a6d1f); text-decoration:underline; }
  .faq { max-width:820px; border-top:1px solid var(--border); }
  .faq__item { border-bottom:1px solid var(--border); }
  .faq__item summary { cursor:pointer; padding:18px 0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:clamp(16px,1.6vw,19px); color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .faq__item summary::-webkit-details-marker { display:none; }
  .faq__item summary::after { content:"+"; color:var(--gold); font-size:24px; line-height:1; flex:0 0 auto; }
  .faq__item[open] summary::after { content:"\2013"; }
  .faq__item p { margin:0 0 20px; color:var(--muted); max-width:70ch; line-height:1.7; }
  /* "see it on your wall" promo */
  .viz-promo { border-block:1px solid var(--border); background:var(--surface); }
  .viz-promo__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
  @media (max-width:820px){ .viz-promo__grid { grid-template-columns:1fr; gap:36px; } }
  .viz-promo__visual { position:relative; aspect-ratio:4/3; background:linear-gradient(155deg,#ece6d9,#ddd5c4); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .viz-promo__frame { position:relative; background:#fbfaf6; padding:3.4%; box-shadow:0 26px 55px rgba(40,34,25,.34),0 5px 16px rgba(40,34,25,.22); transform:rotate(-1.6deg); max-width:64%; }
  .viz-promo__frame img { display:block; width:100%; height:auto; }
  .viz-promo__handle { position:absolute; right:-11px; bottom:-11px; width:22px; height:22px; background:var(--gold); border:2px solid #fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.4); }
  .viz-promo__tip { position:absolute; left:16px; bottom:14px; background:rgba(33,29,24,.82); color:#f4efe6; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; padding:6px 12px; }

/* ---------- services.html — service hub cards ---------- */
  .svc-hub-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:clamp(18px, 2.4vw, 30px); }
  .svc-hub-card { text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:12px; }
  .svc-hub-card__img { aspect-ratio:4/3; overflow:hidden; border:1px solid var(--border); background:var(--surface); }
  .svc-hub-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .4s ease; }
  .svc-hub-card:hover .svc-hub-card__img img { transform:scale(1.05); }
  .svc-hub-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
  .svc-hub-card__name { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-weight:500; font-size:18px; color:var(--ink); display:flex; align-items:center; gap:.5em; }
  .svc-hub-card__name .arw { color:var(--gold); transition:transform .2s ease; }
  .svc-hub-card:hover .svc-hub-card__name .arw { transform:translateX(4px); }
  .svc-hub-card__desc { font-size:13.5px; color:var(--muted); line-height:1.55; margin-top:-4px; }

/* ---------- about.html — owner portrait placeholder ---------- */
  /* Owner portrait sits over the "LH" placeholder; hidden until a photo is set in the admin. */
  .about-portrait:not([src]){ display:none; }

/* ---------- art-for-sale.html — artist links on cards ---------- */
  .card__artist a { color:inherit; text-decoration:none; transition:color .2s; }
  .card__artist a:hover { color:var(--gold-deep,#8a6d1f); text-decoration:underline; }

/* ---------- artists.html — roster search and cards ---------- */
  .artist-search { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,44px); }
  .artist-search input {
    flex:1; min-width:240px; background:var(--surface); border:1px solid var(--border);
    padding:14px 16px; font-family:var(--font-body); font-size:15px; color:var(--ink);
  }
  .artist-search input:focus { outline:none; border-color:var(--gold); }
  .artist-count { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--muted); }
  .artist-empty { display:none; color:var(--muted); padding:24px 0; }

  /* ---- artist cards (2-up, horizontal) ---- */
  .artist-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(18px, 2.2vw, 30px); }
  .artist-card {
    display:grid; grid-template-columns:minmax(130px, 40%) 1fr;
    text-decoration:none; color:inherit; min-height:186px;
    border:1px solid var(--border); background:var(--surface); overflow:hidden;
    transition:border-color .25s ease, box-shadow .3s ease, transform .25s ease;
  }
  .artist-card:hover { border-color:var(--gold); box-shadow:0 22px 44px -30px rgba(40,34,25,.55); transform:translateY(-3px); }
  .artist-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
  .artist-card__photo { overflow:hidden; background:var(--paper); }
  .artist-card__photo img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.03); transition:filter .4s ease, transform .6s ease; }
  .artist-card:hover .artist-card__photo img { filter:grayscale(0); transform:scale(1.045); }
  .artist-card__photo--placeholder img { filter:grayscale(1) opacity(.45); }
  .artist-card__body { display:flex; flex-direction:column; padding:clamp(18px, 1.8vw, 26px); }
  .artist-card__eyebrow { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.24em; font-size:10px; color:var(--gold-deep); margin:0 0 10px; }
  .artist-card__name { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-weight:500; font-size:clamp(18px, 1.7vw, 23px); line-height:1.04; color:var(--ink); margin:0; }
  /* mini paintings strip */
  .artist-card__works { display:flex; gap:7px; margin-top:14px; }
  .artist-card__works span { flex:0 0 auto; width:46px; height:46px; overflow:hidden; border:1px solid var(--border); background:var(--paper); }
  .artist-card__works img { width:100%; height:100%; object-fit:cover; }
  .artist-card__cta { margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--ink); }
  .artist-card__cta .arw { color:var(--gold); transition:transform .2s ease; }
  .artist-card:hover .artist-card__cta .arw { transform:translateX(5px); }
  .artist-card__cta .count { margin-left:auto; color:var(--muted); letter-spacing:.1em; font-size:11px; }
  @media (max-width:600px) { .artist-grid { grid-template-columns:1fr; } .artist-card { min-height:200px; } }

/* ---------- art-by-artists.html — artist blocks and artwork tiles ---------- */
  /* ---- artist-grouped catalog ---- */
  .aba-intro { max-width:60ch; }
  .artist-block { padding-block: clamp(34px, 4.5vw, 60px); border-top:1px solid var(--border); }
  .artist-block:first-of-type { border-top:0; padding-top:0; }
  .artist-block__head {
    display:flex; align-items:center; justify-content:space-between;
    gap:18px; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,30px);
  }
  .artist-block__id { display:flex; align-items:center; gap:16px; }
  .artist-block__photo {
    width:60px; height:60px; border-radius:50%; object-fit:cover; object-position:center top;
    border:1px solid var(--border); background:var(--surface); filter:grayscale(.2); flex:0 0 auto;
  }
  .artist-block__badge {
    width:60px; height:60px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
    border:1px solid var(--border); background:var(--ink-deep); color:var(--gold);
    font-family:var(--font-display); font-size:22px;
  }
  .artist-block__name { margin:0; line-height:1; }
  .artist-block__namelink { color:inherit; text-decoration:none; transition:color .2s; }
  .artist-block__namelink:hover { color:var(--gold-deep); }
  .artist-block__meta {
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em;
    font-size:12px; color:var(--muted); margin:6px 0 0;
  }
  .artwork-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:clamp(16px, 2vw, 26px); }
  .artwork { text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; }
  .artwork__img { aspect-ratio:1/1; overflow:hidden; background:var(--surface); border:1px solid var(--border); position:relative; }
  .artwork__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .artwork:hover .artwork__img img { transform:scale(1.05); }
  .artwork:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
  .artwork__title { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:15px; font-weight:500; color:var(--ink); line-height:1.15; }
  .artwork__meta { font-size:12px; color:var(--muted); margin-top:-4px; }
  .artwork__price { font-family:var(--font-display); letter-spacing:.06em; font-size:14px; color:var(--gold-deep); margin-top:2px; }
  .artwork__sold {
    position:absolute; top:8px; left:8px; background:var(--ink); color:var(--paper);
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em;
    font-size:10px; padding:3px 8px; border-radius:2px;
  }
  .aba-note { font-size:13px; color:var(--muted); }

/* ---------- artist.html — biography layout ---------- */
  .bio-layout { display:grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap:clamp(28px, 5vw, 64px); align-items:start; }
  .bio-photo-wrap { position:relative; }
  .bio-photo { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; border:1px solid var(--border); background:var(--surface); filter:grayscale(.15); }
  .bio-side__actions { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
  .bio-side__actions .btn { justify-content:center; }
  .bio-eyebrow { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.28em; font-size:12px; color:var(--gold-deep); margin:0 0 14px; }
  .bio-name { margin:0 0 8px; }
  .bio-born { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.18em; font-size:13px; color:var(--muted); margin:0 0 22px; }
  .bio-text { max-width:64ch; }
  .bio-text p { margin:0 0 16px; }
  .bio-works { margin-top:clamp(40px,6vw,72px); }
  .bio-works__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
  .artwork-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:clamp(16px, 2vw, 26px); }
  .artwork { text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; }
  .artwork__img { aspect-ratio:1/1; overflow:hidden; background:var(--surface); border:1px solid var(--border); }
  .artwork__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .artwork:hover .artwork__img img { transform:scale(1.05); }
  .artwork__title { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:15px; font-weight:500; color:var(--ink); line-height:1.15; }
  .artwork__meta { font-size:12px; color:var(--muted); margin-top:-4px; }
  .artwork__price { font-family:var(--font-display); letter-spacing:.06em; font-size:14px; color:var(--gold-deep); margin-top:2px; }
  .bio-empty { color:var(--muted); font-size:14px; }
  @media (max-width:720px){ .bio-layout { grid-template-columns:1fr; } .bio-photo { max-width:320px; } }

/* ---------- gallery.html — gallery hero, meta and photo strip ---------- */
  .gal-hero__img { width:100%; aspect-ratio:16/9; max-height:62vh; object-fit:cover; border:1px solid var(--border); background:var(--surface); cursor:zoom-in; display:block; }
  .gal-meta { display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,40px); align-items:flex-start; justify-content:space-between; margin-top:clamp(22px,3vw,34px); }
  .gal-meta__role { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--gold-deep); margin:0 0 8px; }
  .gal-meta__addr { max-width:46ch; }
  .gal-meta__addr p { margin:0; color:var(--muted); line-height:1.65; }
  .gal-meta__actions { display:flex; gap:12px; flex-wrap:wrap; }
  .gal-photos { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; margin-top:clamp(24px,3vw,40px); }
  .gal-photo { aspect-ratio:4/3; overflow:hidden; border:1px solid var(--border); background:var(--surface); cursor:zoom-in; padding:0; }
  .gal-photo img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; display:block; }
  .gal-photo:hover img { transform:scale(1.05); }
  .gal-empty { color:var(--muted); font-size:14px; margin-top:24px; }

/* ---------- furniture.html — the three category rows ---------- */
  /* furniture shop - three tidy sections, images kept to a sensible size */
  .furn-intro { max-width: 60ch; }
  .furn-intro .btn { margin-top: 18px; }
  .furn-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 52px); align-items: center; margin-top: clamp(30px, 5vw, 60px); }
  .furn-row:first-child { margin-top: clamp(24px, 4vw, 44px); }
  .furn-row__media { margin: 0; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
  .furn-row__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; max-height: 380px; transition: transform .6s ease; }
  .furn-row__media:hover img { transform: scale(1.04); }
  .furn-row__body h2 { margin: 0; }
  .furn-row__body p { color: var(--muted); margin-top: 12px; max-width: 46ch; }
  .furn-row--flip .furn-row__media { order: 2; }
  a.furn-row { text-decoration: none; color: inherit; }
  a.furn-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  a.furn-row:hover .furn-row__media img { transform: scale(1.04); }
  .furn-row__more { display: inline-flex; align-items: center; gap: .5em; margin-top: 16px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--ink); }
  .furn-row__more .btn__arrow { color: var(--gold); transition: transform .2s ease; }
  a.furn-row:hover .furn-row__more .btn__arrow { transform: translateX(5px); }
  @media (max-width: 760px) {
    .furn-row { grid-template-columns: 1fr; gap: 16px; }
    .furn-row--flip .furn-row__media { order: 0; }
    .furn-row__media img { max-height: 300px; }
  }

/* ---------- furniture-items.html — category nav and item cards ---------- */
  .fi-nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(20px,3vw,30px); }
  .fi-nav a { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:12px; padding:8px 16px; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:var(--muted); transition:border-color .2s ease, color .2s ease, background .2s ease; }
  .fi-nav a:hover { border-color:var(--gold); color:var(--ink); }
  .fi-nav a.is-active { background:var(--gold); border-color:var(--gold); color:#1a1712; }
  .fi-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:clamp(16px,2.4vw,26px); margin-top:clamp(24px,3vw,40px); }
  .fi-card { border:1px solid var(--border); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; }
  .fi-card__img { aspect-ratio:4/3; overflow:hidden; border:0; padding:0; background:var(--paper); cursor:zoom-in; }
  .fi-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; display:block; }
  .fi-card__img:hover img { transform:scale(1.05); }
  .fi-card__desc { padding:14px 16px; color:var(--muted); font-size:14px; line-height:1.6; }
  .fi-empty { color:var(--muted); margin-top:24px; }