/* ============================================================================
   SARART · HOME — every value ported verbatim from the approved mockup
   (components/home/* inline styles + app/globals.css). Nothing estimated.
   Order: Hero → Featured (+ product card) → Why SarArt → The Process →
   Polaroids → Testimonials → The Artist.
   ============================================================================ */

/* ═══════════════════════════════ 1 · HERO ═══════════════════════════════ */
.hero { position: relative; height: 230vh; background: var(--ink); }
.hero__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.hero__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  padding: 12px;
}
.hero__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-tile);
  transform-origin: center;
  will-change: transform, opacity;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  /* initial state (p=0): scattered, small, fully blurred layer. JS overwrites
     this on mount with the exact state for the real scroll position. */
  transform: translate3d(0, 0, 0) scale(0.58);
  opacity: 0.4;
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__blur { position: absolute; inset: 0; opacity: 1; will-change: opacity; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(26, 26, 32, 0.78) 0%, rgba(26, 26, 32, 0.5) 55%, rgba(26, 26, 32, 0.82) 100%);
  pointer-events: none;
}

.hero__content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1);
  width: min(92%, 680px);
  text-align: center;
  z-index: 5;
  will-change: transform, opacity;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 22px;
}
.hero__h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.7rem, 12vw, 6.2rem);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.015em;
  min-height: 2.1em;
}
.hero__white { font-weight: 800; }
.hero__gold { font-style: italic; font-weight: 400; color: var(--gold); }
.hero__caret {
  display: inline-block;
  width: 3px;
  height: 0.92em;
  background: var(--gold);
  margin-left: 5px;
  vertical-align: -1px;
  animation: blink 1s step-end infinite;
}
.hero__sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1rem, 3.7vw, 1.22rem);
  color: #c9c9d2;
  max-width: 560px;
  margin: 22px auto 0;
  line-height: 1.6;
}
.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
.hero__cta { font-size: 16px; padding: 17px 38px; min-height: 54px; box-shadow: 0 12px 30px rgba(211, 148, 7, 0.32); }
.hero__trust { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c9c9d2; font-weight: 300; letter-spacing: 0.02em; }
.hero__story {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 3px;
  margin-top: 4px;
}
.hero__scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.hero__scroll-label { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; }
.hero__scroll-arrow { display: inline-block; animation: bob 1.6s ease-in-out infinite; }

/* ═══════════════════════ 2 · FEATURED + PRODUCT CARD ═══════════════════════ */
.featured {
  position: relative;
  background: linear-gradient(180deg, #1a1a20 0%, #0f0f14 12%, #0f0f14 88%, #13131a 100%);
  padding: clamp(84px, 13vw, 150px) clamp(20px, 6vw, 72px) clamp(56px, 8vw, 90px);
}
.featured__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.feat-bgword {
  position: absolute;
  /* sits HIGH — its top half lives in the air between the intro and the cards,
     tilted so letters peek above/below the card row. */
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  white-space: nowrap;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(6rem, 23vw, 21rem);
  line-height: 1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(211, 148, 7, 0.5);
  user-select: none;
}
.featured__inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; }
.featured__intro {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; margin-bottom: clamp(84px, 11vw, 150px);
}
.featured__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 8vw, 3.4rem); margin: 0; line-height: 1.05; }
.featured__sub { color: var(--text-muted); font-weight: 300; max-width: 46ch; margin: 0; font-size: clamp(.95rem, 3.5vw, 1.05rem); line-height: 1.6; }
.featured__viewall { display: flex; justify-content: center; margin-top: clamp(36px, 6vw, 56px); }

/* track: 4-up grid on desktop */
.feat-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px); }
.feat-dots { display: none; }
.feat-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 20px;
  background: rgba(255, 255, 255, 0.25); cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.feat-dot.is-on { width: 22px; background: var(--gold); }

/* ---- product card (shared: featured / shop / related) ---- */
.feat-card, .pcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.feat-card { transition: opacity .7s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s ease; }
.pcard { transition: border-color .4s ease, transform .35s var(--ease-out), box-shadow .35s ease; }

.pcard__media {
  position: relative;
  /* Same image box in BOTH variants: 3/4 is the shop's framing, so the garment
     and the model keep their headroom (4/5 cropped the model's head). */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #ffffff;
}
.feat-card .pcard__media { border-radius: 14px 14px 0 0; }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-img { will-change: transform; transition: transform .7s var(--ease-out); }
.pcard__placeholder { position: absolute; inset: 0; background: #ffffff; }
.pcard__back { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.pcard__back.is-on { opacity: 1; }
.pcard__overlay { position: absolute; inset: 0; z-index: 2; }
.pcard__watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: monospace; font-size: 11px; letter-spacing: .16em; color: var(--text-placeholder); z-index: 1;
}
.pcard__watermark--feat {
  top: auto; left: auto; bottom: 10px; right: 12px; transform: none;
  font-size: 9px; letter-spacing: .1em; color: #c4c1ba; z-index: 3;
}
.pcard__badge {
  position: absolute; top: 9px; left: 9px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 20px; backdrop-filter: blur(4px); z-index: 3;
}
.pcard__badge--feat { top: 12px; left: 12px; font-size: 10px; letter-spacing: .14em; padding: 5px 10px; }

.parrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(26, 26, 32, 0.7); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); opacity: 0;
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.parrow--left { left: 8px; }
.parrow--right { right: 8px; }
@media (hover: hover) {
  .pcard:hover .parrow { opacity: 1; }
  .parrow:hover { background: var(--gold) !important; color: var(--gold-ink) !important; }
}
.pcard__dots { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; }
.pcard__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: background .3s ease; }
.pcard__dot.is-on { background: var(--gold); }

.pcard__info { padding: 13px 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.feat-card .pcard__info { padding: 18px 18px 20px; gap: 4px; }
.pcard__artist { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.feat-card .pcard__artist { font-size: 11px; letter-spacing: .16em; }
.pcard__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; margin: 0; }
.feat-card .pcard__name { font-size: 1.35rem; }
.pcard__name a { color: inherit; text-decoration: none; }
.pcard__row { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; gap: 8px; }
.feat-card .pcard__row { margin-top: 12px; gap: 10px; }
.pcard__price { font-size: 1rem; font-weight: 700; color: #fff; }
.feat-card .pcard__price { font-size: 1.2rem; }
/* Renders as an <a> (it navigates to the piece instead of adding to the cart),
   so it needs the centering a <button> gives for free — same box, same look. */
.pcard__add {
  flex: 1; max-width: 128px; background: var(--gold); color: var(--gold-ink); border: none; cursor: pointer;
  font-weight: 700; font-size: 12.5px; padding: 9px 14px; border-radius: var(--r-pill); min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; box-sizing: border-box;
  font-family: var(--font-sans);
  transition: box-shadow .3s ease, transform .3s ease;
}
.feat-card .pcard__add { max-width: 160px; font-size: 14px; padding: 13px 16px; min-height: 46px; }
.pcard__sold {
  flex: 1; max-width: 128px; text-align: center; background: transparent; color: var(--text-muted);
  border: 1px solid var(--line-strong); font-weight: 700; font-size: 12px; padding: 9px 12px;
  border-radius: var(--r-pill); min-height: 38px; display: flex; align-items: center; justify-content: center; letter-spacing: .04em;
}
.feat-card .pcard__sold { max-width: 160px; font-size: 13px; padding: 12px 14px; min-height: 46px; }

@media (hover: hover) and (min-width: 880px) {
  .feat-card:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.5); border-color: rgba(211, 148, 7, 0.4); }
  .feat-card:hover .feat-img { transform: scale(1.08); }
  .feat-card:hover .feat-addbtn { box-shadow: 0 12px 26px rgba(211, 148, 7, 0.45); transform: translateY(-2px); }
}

/* Featured → mobile peek carousel */
@media (max-width: 879px) {
  .feat-track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    /* overflow-x:auto forces overflow-y off `visible`; make it explicitly hidden
       so the track never becomes a nested VERTICAL scroll container that captures
       the page's vertical gesture. Generous padding = nothing actually clips. */
    overflow-y: hidden;
    scroll-snap-type: x proximity; /* proximity won't fight a diagonal drag */
    gap: 14px;
    margin: 0 -20px;
    padding: 20px 20px 24px; /* fits badge + ghost frame (8px) + shadow */
    scroll-padding: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .feat-track::-webkit-scrollbar { display: none; }
  /* peek carousel: main card ~76% so the next card's edge shows */
  .feat-track > .card-mount { flex: 0 0 76%; scroll-snap-align: center; }
  .feat-card .pcard__name { font-size: 1.18rem; }
  .feat-card .pcard__info { padding: 15px 15px 17px; }
  .feat-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
  /* the giant word crops to unreadable fragments at 23vw on phones */
  .feat-bgword { font-size: clamp(3.4rem, 16vw, 6rem); }
}

/* ═══════════════════════════ 3 · WHY SARART ═══════════════════════════ */
.why {
  position: relative;
  padding: clamp(80px, 13vw, 160px) clamp(24px, 6vw, 72px);
  background: radial-gradient(60% 66% at 32% 46%, rgba(211, 148, 7, .07), rgba(211, 148, 7, 0) 70%), #13131a;
}
.why__inner {
  position: relative; z-index: 1; max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(44px, 6vw, 84px); align-items: center;
}
.wsa-text { display: flex; flex-direction: column; gap: 20px; max-width: 480px; }
.why__heading {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.5rem);
  margin: 0; line-height: 1.06; letter-spacing: -.01em;
}
.why__heading em { font-style: italic; font-weight: 500; color: var(--gold); }
.why__p { color: #c1c1cb; font-weight: 300; font-size: clamp(1rem, 1.9vw, 1.1rem); line-height: 1.7; margin: 0; }
.why__cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 4px;
  color: var(--gold); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .04em;
  align-self: flex-start; border-bottom: 1px solid rgba(211, 148, 7, .4); padding-bottom: 3px;
}
.why__collage { display: flex; justify-content: center; }
.why__collage-inner { position: relative; width: 100%; max-width: 470px; margin: 0 auto; }
.why__big {
  position: relative; width: 82%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 34px 66px rgba(0, 0, 0, .55);
}
.why__big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.why__big-inset { position: absolute; inset: 0; box-shadow: inset 0 0 50px 8px rgba(10, 10, 14, .35); }
.why__small {
  position: absolute; right: -2%; bottom: -6%; width: 47%; aspect-ratio: 3 / 4;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(211, 148, 7, .6);
  box-shadow: 0 30px 56px rgba(0, 0, 0, .72), 0 0 22px rgba(211, 148, 7, .1);
  background: var(--ink); z-index: 2;
}
.why__small img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 879px) {
  .wsa-text { text-align: center; align-items: center; margin-left: auto; margin-right: auto; }
  .why__cta { align-self: center; }
}

/* ══════════════════════════ 4 · THE PROCESS ══════════════════════════ */
.process {
  position: relative; overflow: hidden;
  padding: clamp(64px, 11vw, 120px) clamp(20px, 6vw, 72px);
  background: linear-gradient(180deg, #13131a 0%, #16161f 12%, #16161f 86%, #17141c 100%);
}
.process__light { background: radial-gradient(70% 52% at 50% 0%, rgba(212, 220, 242, .05), rgba(212, 220, 242, 0) 60%); }
.process__inner { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; }
.process__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: clamp(44px, 7vw, 72px); }
.process__eyebrow { letter-spacing: .3em; font-weight: 600; }
.process__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 7vw, 3.2rem); margin: 0; line-height: 1.05; }
.process__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: clamp(28px, 4vw, 52px); align-items: start;
}
.process__step { display: flex; flex-direction: column; gap: 16px; }
.process__n {
  font-family: var(--font-serif); font-weight: 700; font-style: italic;
  font-size: clamp(3.4rem, 6vw, 5rem); line-height: .9;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--gold); letter-spacing: -.02em;
}
.process__media {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  background: #ffffff; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.process__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.process__step-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem; margin: 4px 0 0; line-height: 1.1; }
.process__body { color: #b8b8c4; font-weight: 300; font-size: .98rem; line-height: 1.65; margin: 0; }
.process__cta { display: flex; justify-content: center; margin-top: clamp(44px, 7vw, 72px); }
.process__btn { font-size: 15px; padding: 16px 38px; min-height: 52px; box-shadow: 0 12px 30px rgba(211, 148, 7, .28); }

/* ═══════════════════════════ 5 · POLAROIDS ═══════════════════════════ */
.polaroids {
  position: relative;
  padding: clamp(64px, 11vw, 120px) clamp(20px, 6vw, 72px);
  background: linear-gradient(180deg, #17141c 0%, #17141c 84%, #16161f 100%);
}
.polaroids__cast { background: radial-gradient(58% 50% at 50% 42%, rgba(211, 148, 7, .05), rgba(211, 148, 7, 0) 70%); }
.polaroids__inner { position: relative; z-index: 1; max-width: var(--wrap-narrow); margin: 0 auto; }
.polaroids__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: clamp(44px, 7vw, 72px); }
.polaroids__eyebrow { letter-spacing: .3em; font-weight: 600; }
.polaroids__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 7vw, 3.2rem); margin: 0; line-height: 1.05; }
.polaroids__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(22px, 3vw, 46px); }
.polaroids__cell { display: flex; }

/* ── FRAME TREATMENT (encapsulated — swap this block for the picture-frame
   look when the client sends the reference; nothing else changes) ── */
.frame-polaroid {
  position: relative; display: block;
  width: clamp(230px, 80vw, 300px);
  background: #f6f5f1;
  padding: 13px 13px 46px;
  border-radius: var(--r-xs);
  box-shadow: 0 26px 54px rgba(0, 0, 0, .5);
  transform: rotate(var(--rot, 0deg));
  text-decoration: none;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.frame-polaroid__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #e7e5df; }
.frame-polaroid__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-polaroid__chip {
  position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%);
  background: var(--gold); color: var(--gold-ink);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 20px; white-space: nowrap;
}
@media (hover: hover) and (min-width: 880px) {
  /* hover straightens the card and lifts it */
  .frame-polaroid:hover { transform: rotate(0deg) translateY(-10px); box-shadow: 0 36px 70px rgba(0, 0, 0, .6); }
}

/* ═════════════════════════ 6 · TESTIMONIALS ═════════════════════════ */
.testi {
  position: relative;
  padding: clamp(64px, 12vw, 120px) clamp(20px, 6vw, 72px);
  /* COOL "stage" — deliberately WITHOUT a central glow so it reads distinct from
     Why SarArt's warm gold glow above. */
  background: linear-gradient(180deg, #16161f 0%, #13131a 60%, #13131a 100%);
  overflow: hidden;
}
.testi__inner { position: relative; z-index: 1; max-width: var(--wrap-narrow); margin: 0 auto; }
.testi__intro { text-align: center; margin-bottom: clamp(48px, 8vw, 72px); }
.testi__eyebrow { letter-spacing: .28em; font-weight: 600; }
.testi__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 8vw, 3.2rem); margin: 10px 0 0; }

.testi__deck {
  position: relative;
  height: clamp(360px, 82vw, 460px);
  max-width: 560px;
  margin: 0 auto;
  /* horizontal drag/swipe must never block vertical page scroll */
  touch-action: pan-y;
}
.testi__card {
  position: absolute; left: 0; right: 0; top: 0; margin-inline: auto;
  width: clamp(250px, 80vw, 330px);
  min-height: clamp(300px, 72vw, 420px);
  box-sizing: border-box;
  padding: clamp(20px, 5vw, 30px) clamp(18px, 4.6vw, 28px) clamp(18px, 4vw, 26px);
  border: 1px solid;
  border-radius: var(--r-sm);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--shadow-lift);
  transition: transform .5s var(--ease-inout), opacity .5s ease, background .5s ease, color .5s ease, border-color .5s ease;
  background: var(--surface);
  color: var(--text-1);
  border-color: rgba(255, 255, 255, .1);
  cursor: pointer;
  z-index: 2;
  opacity: .92;
}
.testi__card.is-center {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: transparent;
  cursor: default;
  z-index: 3;
  opacity: 1;
}
.testi__avatar {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 19px; flex: none;
  background: rgba(211, 148, 7, .16); color: var(--gold); border: none;
  transition: background .5s ease, color .5s ease;
}
.testi__avatar--photo { border: 1px solid rgba(211, 148, 7, .45); }
.testi__card.is-center .testi__avatar { background: rgba(26, 26, 32, .14); color: var(--gold-ink); }
.testi__card.is-center .testi__avatar--photo { border-color: rgba(26, 26, 32, .3); }
.testi__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testi-quote {
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: clamp(1rem, 3vw, 1.12rem); line-height: 1.45; margin: 0; color: currentColor;
}
.testi__who { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.testi__name { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.testi__loc { font-size: 13px; opacity: .7; }
.testi__dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(28px, 5vw, 40px); }

@media (max-width: 600px) {
  /* the long quote ran ~9 heavy italic lines on phones: one step smaller,
     more line-height, and regular (not italic) reads noticeably lighter. */
  .testi-quote { font-size: clamp(0.94rem, 3.4vw, 1.04rem); line-height: 1.52; font-style: normal; }
}

/* ═══════════════════════════ 7 · THE ARTIST ═══════════════════════════ */
.artist { position: relative; overflow: hidden; padding: clamp(64px, 12vw, 120px) clamp(20px, 6vw, 72px); }
.artist__base { background: linear-gradient(150deg, #1c1a1f 0%, #141219 48%, #0f0f14 100%); }
.artist__glow {
  position: absolute; left: 58%; top: 48%;
  width: min(780px, 72vw); height: min(780px, 72vw); z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(211, 148, 7, .13), rgba(211, 148, 7, 0) 62%);
  filter: blur(12px);
  transform: translate(-50%, -50%);
  animation: goldBreath 16s ease-in-out infinite;
  pointer-events: none;
}
.artist__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 150px 34px rgba(10, 10, 14, .5);
  background: linear-gradient(180deg, #13131a 0%, rgba(19, 19, 26, 0) 16%, rgba(15, 15, 20, 0) 82%, #0f0f14 100%);
}

.artist-grid {
  position: relative; z-index: 2;
  display: grid; max-width: 1000px; margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "photo text";
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}
.art-photo { grid-area: photo; position: relative; max-width: 360px; width: 100%; justify-self: center; }
.art-text { grid-area: text; display: flex; flex-direction: column; gap: 18px; }
.art-head, .art-body { display: flex; flex-direction: column; gap: 18px; }

.artist__ghost {
  position: absolute; inset: 0; transform: translate(16px, 16px);
  border: 1px solid rgba(211, 148, 7, .4); border-radius: var(--r-xl); z-index: 0; pointer-events: none;
}
.artist__card {
  position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid rgba(211, 148, 7, .32);
  box-shadow: var(--shadow-deep);
  background: repeating-linear-gradient(45deg, #23232c, #23232c 14px, #1e1e26 14px, #1e1e26 28px);
}
.artist__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.artist__inset { position: absolute; inset: 0; border-radius: var(--r-xl); box-shadow: inset 0 0 40px rgba(10, 10, 14, .28); pointer-events: none; }
/* ENCAPSULATED: swap the span contents for the scanned signature (SVG/PNG). */
.artist-signature {
  position: absolute; right: 16px; bottom: 15px; z-index: 2;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(15px, 2.6vw, 20px); color: var(--gold); opacity: .82;
  transform: rotate(-4deg); transform-origin: right bottom;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6); pointer-events: none; white-space: nowrap;
}

.artist__eyebrow { letter-spacing: .28em; font-weight: 600; }
.artist__heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.8rem, 4.8vw, 2.7rem); margin: 0; line-height: 1.12; }
.artist__heading em { font-style: italic; font-weight: 500; color: var(--gold); }
.artist__body { color: #c1c1cb; font-weight: 300; font-size: clamp(1rem, 3.6vw, 1.1rem); line-height: 1.7; margin: 0; }
.artist__credential { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; }
.artist__diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; margin-top: 6px; opacity: .9; }
.artist__credential-text { color: rgba(211, 148, 7, .82); font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1.5; max-width: 44ch; }
.artist__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 8px; }
.artist__btn { font-size: 15px; padding: 15px 32px; min-height: 50px; }
.artist__secondary {
  display: inline-flex; align-items: center; gap: 8px; color: var(--gold); text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: .03em;
  border-bottom: 1px solid rgba(211, 148, 7, .35); padding-bottom: 3px;
}

@media (max-width: 760px) {
  /* mobile: title reads FIRST, photo in the middle, CTAs at the end */
  .artist-grid { grid-template-columns: 1fr; grid-template-areas: "head" "photo" "body"; gap: clamp(26px, 6vw, 38px); }
  .art-text { display: contents; }
  .art-head { grid-area: head; }
  .art-body { grid-area: body; }
  .art-photo { grid-area: photo; }
}