/* ============================================================
   ARTIST PAGE — shares tokens, grain, cursor-free chrome, footer,
   buttons and the .shot component styles with site.css (always
   loaded before this file). This file only adds the layout pieces
   unique to an artist page: the top bar, the header, bio,
   portfolio/healed grids and the Instagram strip.

   Reviews and FAQ are studio-level content only (client decision,
   2026-08-02) and are not part of this template — see
   PROJECT_STATUS.md §2b decision 13. The FAQ styling that used to
   live here moved to site.css as .faq for the homepage section.

   Modularity note: every section below is written to appear only
   when assets/artist.js finds real data for it — there is no
   "empty state" styling here on purpose, because an empty section
   should never render at all (see PROJECT_STATUS.md §8).
   ============================================================ */

.abar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:nowrap;
  padding:14px clamp(18px,5vw,80px);border-bottom:1px solid var(--faint);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);position:relative;z-index:3}
.abar a{transition:color .3s}
.abar a:hover{color:var(--blood-2)}
.abar nav{display:flex;gap:clamp(14px,2vw,28px);align-items:center}

/* ---- header: portrait + name + role + primary CTAs ---- */
.ahero{position:relative;z-index:3;background:var(--void);display:grid;
  grid-template-columns:260px 1fr;gap:clamp(24px,4vw,56px);
  padding:clamp(40px,7vh,80px) clamp(18px,5vw,80px);align-items:end}
.ahero-portrait{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--faint);filter:contrast(1.05) brightness(.95)}
.ahero-info .kicker{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--blood-2);margin-bottom:10px}
.ahero-info h1{font-size:clamp(38px,7vw,92px);line-height:.94}
.ahero-info .astyle{font-size:14px;letter-spacing:.06em;color:var(--ash);margin-top:14px}
.ahero-info .ctas{margin-top:26px}
@media(max-width:640px){
  .ahero{grid-template-columns:1fr;padding-top:32px}
  .ahero-portrait{max-width:220px}
}

/* ---- generic section shell every block below shares ---- */
.sec-block{position:relative;z-index:3;background:var(--void);padding:clamp(50px,8vh,110px) 0;border-top:1px solid var(--faint)}

/* ---- bio / "Her story" — REBALANCED 2026-08-22 (client direction) ---------
   What this replaced and why: the bio used to be a single 64ch text column
   under a full-width display heading, which left the right half of the
   section empty on desktop; and for the one artist who had a photo (Sabina)
   the photo was ABSOLUTELY positioned against the far right edge while the
   heading and text both sat left — so it read as stranded rather than as
   part of a composition.

   Now: one two-column grid for EVERY artist, photo or not. Heading and photo
   stack in the narrower left column, the prose runs full-height in the wider
   right column beside them. The asymmetry is the 0.9/1.1 column ratio and the
   photo hanging below the heading, not an absolutely-positioned element
   floating free — so nothing is "accidentally empty" and the same rules
   produce a deliberate layout whether A.bioImage exists or not.

   No .abio-editorial variant any more: it existed only to special-case the
   one artist with a photo, and this layout no longer needs the split. */
.abio{display:grid;align-items:start;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  column-gap:clamp(30px,5vw,80px);
  padding-left:clamp(18px,5vw,80px);padding-right:clamp(18px,5vw,80px)}
.abio .sec-head{grid-column:1;grid-row:1;padding:0;margin:0}
/* Scoped down from the sitewide clamp(40px,7vw,104px): that size is authored
   for a full-bleed heading and would wrap to four or five lines inside a
   column this narrow. */
.abio .sec-head h2{font-size:clamp(32px,4.4vw,62px);line-height:.96}
.abio-photo{grid-column:1;grid-row:2;margin:clamp(24px,3.4vw,40px) 0 0;max-width:380px}
.abio-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  border:1px solid var(--faint);filter:contrast(1.05) brightness(.95)}
/* Spans both rows so the prose sits level with the heading rather than
   starting below the photo. */
.abio-body{grid-column:2;grid-row:1/span 2;padding:0;max-width:58ch}
/* With a photo the left column (heading + 4:5 photo) is far taller than these
   three paragraphs — start-aligned it left ~310px of dead column beside the
   photo, measured at 1440px. Centring balances the prose against the photo so
   the whitespace sits above AND below it and reads as breathing room.
   Deliberately NOT applied when there is no photo: then the left column is
   just the heading, and a hanging heading with the text starting level with
   it is the correct editorial shape. */
.abio-has-photo .abio-body{align-self:center}
.abio-body p{font-size:clamp(15px,1.6vw,18px);line-height:1.75;margin-top:20px;color:#c3bcb1}
.abio-body p:first-child{margin-top:0;font-size:clamp(17px,1.9vw,21px);line-height:1.65;color:var(--bone)}
.abio-body a{color:var(--bone);border-bottom:1px solid var(--faint);transition:color .3s,border-color .3s}
.abio-body a:hover{color:var(--blood-2);border-color:var(--blood-2)}

@media(max-width:860px){
  /* Stacked in reading order — heading, photo, prose — not a squeezed
     desktop grid. Explicit rows/columns are dropped so auto-placement
     follows DOM order, which assets/artist.js already emits in that order. */
  .abio{grid-template-columns:1fr;column-gap:0}
  .abio .sec-head,.abio-photo,.abio-body{grid-column:1;grid-row:auto}
  .abio .sec-head h2{font-size:clamp(34px,7vw,56px)}
  .abio-photo{margin:26px 0 28px;max-width:none}
  .abio-body{max-width:64ch}
}

/* ---- portfolio / healed — both reuse the same grid + .shot card. Selected
   Work (portfolio) additionally sits inside the generic .carousel/.car-nav
   scaffold (see site.css) — the track carries BOTH "track" and "aport-grid"
   so .carousel .track's higher-specificity flex/overflow rules win the
   layout, while this grid-template-columns rule simply goes unused for it;
   healed still renders as a plain static grid with no carousel wrapper. */
.aport-grid{padding:0 clamp(18px,5vw,80px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
@media(max-width:820px){.aport-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.aport-grid{grid-template-columns:1fr}}

/* ---- Available Designs at a Special Rate — always rendered once the data
   key exists (see assets/artist.js), so this needs a real empty state, not
   just card styling. No dashed/dotted "add content" chrome — a plain quiet
   card in the site's own void/panel palette, consistent with how the rest
   of the site handles "nothing here yet" (e.g. the Walk-In flash section). */
.adesigns-empty{padding:0 clamp(18px,5vw,80px)}
.adesigns-empty p{max-width:46ch;padding:clamp(28px,4vh,40px) clamp(20px,3vw,32px);
  background:var(--panel);border:1px solid var(--faint);color:var(--ash);
  font-size:14px;line-height:1.6}
.adesigns-grid{padding:0 clamp(18px,5vw,80px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
@media(max-width:820px){.adesigns-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.adesigns-grid{grid-template-columns:1fr}}
.adesign-card{position:relative;margin:0}
.adesign-media{aspect-ratio:3/4;overflow:hidden;background:var(--ink2);border:1px solid var(--faint)}
.adesign-media img{width:100%;height:100%;object-fit:cover;display:block}
.adesign-media-empty{display:flex;align-items:center;justify-content:center}
.adesign-card figcaption{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.adesign-title{font-size:14px;color:var(--bone)}
.adesign-rate{font-size:13px;color:var(--blood-2)}
.adesign-status{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.adesign-status-unavailable{color:var(--ash)}
.adesign-status-available{color:var(--blood-2)}

/* ---- Instagram, inside the portfolio section -----------------------------
   Replaces the old standalone .a-ig-strip (a full-width panel band between
   sections, which read as a second footer). It now shares the carousel's own
   control row: handle left, prev/next right, directly above the work. Only
   .aport-carousel gets the space-between — the homepage's .studio-carousel
   uses the same .fw-nav-row and must keep its buttons hard right. */
.aport-carousel .fw-nav-row{justify-content:space-between;align-items:center;gap:16px}
.aport-ig{display:inline-flex;align-items:center;gap:9px;min-width:0;
  font-size:clamp(12px,1.2vw,14px);letter-spacing:.1em;color:var(--bone);
  border-bottom:1px solid var(--faint);padding-bottom:4px;
  transition:color .3s,border-color .3s}
.aport-ig span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aport-ig svg{flex:0 0 auto;width:16px;height:16px;fill:currentColor}
.aport-ig:hover{color:var(--blood-2);border-color:var(--blood-2)}
.aport-ig:focus-visible{outline:2px solid var(--blood-2);outline-offset:4px}

/* ---- booking ctas share .ctas/.btn from site.css; just add padding ---- */
.abook .ctas{padding:0 clamp(18px,5vw,80px)}