/* ============================================================================
   ART MAMA — shared stylesheet
   One file, linked by every page. Change it here, it changes everywhere.
   Header, footer, type, buttons, colors, spacing all live here so no page drifts.
   ============================================================================ */

:root{
  /* experiment: hue glides smoothly as scroll updates --accent-h */

  /* ---- Betty's palette (sampled from her paper works) ---- */
  --paper:#F6F2EA; --paper-2:#EFE9DC;
  --lilac:#C9BEE6; --teal:#A7E1DA; --sage:#C6D3A0; --rose:#E6A8BE;
  --gold:#C9A24B; --amber:#C9761A;                 /* amber = award star, pops on pastel */
  --accent-h:266;                                  /* rotated by scroll (experiment), smoothed in JS */
  --plum:hsl(var(--accent-h) 30% 42%);             /* button/accent — dark enough for white text */
  --plum-deep:hsl(var(--accent-h) 32% 34%);        /* pressed/hover */
  --lilac-live:hsl(var(--accent-h) 42% 82%);       /* pastel — quote marks, soft bits */
  --tint-live:hsl(var(--accent-h) 34% 78%);        /* pastel card fill — camp boxes */
  --tint-ink:hsl(var(--accent-h) 45% 24%);         /* readable text on --tint-live */
  --logo-live:hsl(var(--accent-h) 26% 46%);        /* client logos, monocolour, shifts too */
  --ink:#2A2436; --ink-2:#4A4356;
  /* contrast-checked: ink/paper 13.4:1 · white/plum 6.8:1 · plum/paper 6.1:1 · amber/paper 4.7:1 */

  --display:'Fraunces', Georgia, serif;
  --body:'Instrument Sans', system-ui, sans-serif;

  /* soft, low, diffuse shadows — resting a millimetre off the page, never hard */
  --shadow-soft:0 4px 16px rgba(42,36,54,.08);
  --shadow-card:0 10px 30px rgba(42,36,54,.12);
  --shadow-btn:0 3px 0 rgba(42,36,54,.22);         /* the "solid" button shadow you can press away */

  /* corner radius — option 2, "barely softened". One dial for the whole site. */
  --radius:4px;         /* buttons, chips, controls */
  --radius-card:6px;    /* cards, images, blocks — a hair more, still crisp */

  --tap:60px;
  --pad:clamp(1.3rem, 5vw, 3.5rem);
  --wrap:62rem;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*{margin:0; box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body); color:var(--ink); background:var(--paper);
     font-size:1.15rem; line-height:1.55; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--plum); outline-offset:3px}

/* ---- protect images: no easy right-click / drag / long-press save ---- */
.protect, .protect img, #gl{
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none; -khtml-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
}

/* ---- morph background layers ---- */
#gl{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; background:var(--paper)}
.veil{position:fixed; inset:0; z-index:1; pointer-events:none; background:rgba(246,242,234,.82)}
.siteheader, main, footer{position:relative; z-index:3}

/* ============================================================================
   SHARED HEADER — same on every page, sticky, never drifts
   ============================================================================ */
.siteheader{position:sticky; top:0; z-index:20; display:flex; align-items:center;
  padding:calc(.8rem + var(--safe-t)) var(--pad) .8rem;
  background:linear-gradient(to bottom, rgba(246,242,234,.97), rgba(246,242,234,.78));
  backdrop-filter:blur(8px)}
.wm{display:inline-flex; flex-direction:column; line-height:.9; text-decoration:none; color:var(--ink)}
.wm .wm-main{font-family:var(--display); font-weight:900; font-size:1.5rem; letter-spacing:-.01em}
.wm .wm-main b{color:var(--plum); font-weight:900}
.wm .wm-sub{font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--plum); margin-top:.28rem}
.menu-btn{margin-left:auto; display:flex; align-items:center; gap:.5rem; min-height:52px; padding:0 1.1rem;
  font-family:var(--body); font-weight:600; font-size:1.05rem; background:#fff; color:var(--ink);
  border:2px solid var(--ink); border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow-soft);
  transition:transform .06s ease, box-shadow .06s ease}
.menu-btn:hover{border-color:var(--plum); color:var(--plum); transform:translateY(-1px); box-shadow:0 5px 14px rgba(42,36,54,.16)}
.menu-btn:active{transform:translateY(2px); box-shadow:none}
.nav-desktop{display:none}
@media (min-width:880px){
  .menu-btn{display:none}
  .nav-desktop{display:flex; margin-left:auto; gap:.4rem}
  .nav-desktop a{padding:.7rem 1.1rem; font-weight:600; font-size:1.05rem; text-decoration:none;
    border-radius:var(--radius); color:var(--ink); transition:background .15s}
  .nav-desktop a:hover{background:var(--plum); color:#fff; transform:translateY(-1px)}
}

/* full-screen tap menu */
.sheet{position:fixed; inset:0; z-index:40; background:var(--paper); display:none; flex-direction:column;
  padding:calc(1rem + var(--safe-t)) var(--pad) calc(2rem + var(--safe-b))}
.sheet.open{display:flex}
.sheet-top{display:flex; align-items:center; margin-bottom:1.5rem}
.sheet-close{margin-left:auto; min-height:52px; padding:0 1.1rem; font-weight:600; font-size:1.05rem;
  background:#fff; border:2px solid var(--ink); border-radius:var(--radius); cursor:pointer; color:var(--ink)}
.sheet-close:active{transform:translateY(2px)}
.sheet a{display:flex; align-items:center; min-height:66px; font-family:var(--display); font-weight:600;
  font-size:1.7rem; color:var(--ink); text-decoration:none; border-bottom:2px solid rgba(42,36,54,.1)}
.sheet a span{margin-left:auto; color:var(--plum); font-family:var(--body); font-size:1.4rem}
.sheet a:active{color:var(--plum)}

/* ============================================================================
   SECTIONS + TYPE
   ============================================================================ */
section{padding:clamp(3.5rem,10vh,7rem) var(--pad); min-height:min(100svh,54rem);
  display:flex; flex-direction:column; justify-content:center}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto}
.eyebrow{font-weight:600; font-size:1.05rem; color:var(--plum); margin-bottom:1rem}
h1{font-family:var(--display); font-weight:900; font-size:clamp(2.9rem,9vw,5.5rem); line-height:.96;
   letter-spacing:-.02em; margin-bottom:1.2rem; color:#241F30; text-wrap:balance}
h2{font-family:var(--display); font-weight:900; font-size:clamp(2.1rem,6vw,3.6rem); line-height:1;
   letter-spacing:-.015em; margin-bottom:1.1rem; color:#241F30; text-wrap:balance}
.lede{font-size:clamp(1.2rem,2.4vw,1.4rem); line-height:1.5; max-width:34rem; margin-bottom:1.8rem; color:var(--ink)}

/* ============================================================================
   BUTTONS — every one gives visible feedback on press
   ============================================================================ */
.btns{display:flex; flex-direction:column; gap:.8rem; max-width:26rem}
@media (min-width:560px){ .btns{flex-direction:row; flex-wrap:wrap} }
.btn{display:flex; align-items:center; justify-content:center; min-height:var(--tap); padding:0 1.6rem;
  font-family:var(--body); font-weight:600; font-size:1.2rem; text-decoration:none; border-radius:var(--radius);
  text-align:center; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .15s, color .15s, border-color .15s}
.btn-primary{background:var(--plum); color:#fff; box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--plum-deep); transform:translateY(-2px); box-shadow:0 6px 16px rgba(42,36,54,.28)}
.btn-primary:active{transform:translateY(3px); box-shadow:0 0 0 rgba(0,0,0,0)}
.btn-secondary{background:#fff; color:var(--ink); border:2px solid var(--ink); box-shadow:var(--shadow-soft)}
.btn-secondary:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(42,36,54,.2); border-color:var(--plum); color:var(--plum)}
.btn-secondary:active{transform:translateY(3px); box-shadow:none}
.cue{font-size:1rem; font-weight:500; color:var(--ink-2); margin-top:1.5rem}

/* ---- award accolade: amber star pops off a soft card ---- */
.accolade{display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem; padding:.75rem 1.15rem;
  background:#fff; border:1px solid rgba(42,36,54,.12); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  font-weight:600; font-size:1.05rem; color:var(--ink)}
.accolade .star{color:var(--amber); font-size:1.35rem; line-height:1}

/* ---- commissioned-by: continuous scrolling marquee ---- */
.clients{background:var(--paper-2); border-top:1px solid rgba(42,36,54,.08);
  border-bottom:1px solid rgba(42,36,54,.08); padding:1.8rem 0; min-height:auto; overflow:hidden}
.clients p{font-weight:600; font-size:.95rem; color:var(--tint-ink); margin-bottom:1.1rem;
  text-align:center; letter-spacing:.02em}
.marquee{display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)}
.marquee-track{display:flex; flex-shrink:0; align-items:flex-start; gap:2rem; padding-right:2rem;
  animation:marquee 46s linear infinite; will-change:transform}
.marquee-track span.brand{display:flex; flex-direction:column; align-items:center; gap:.6rem;
  flex-shrink:0; width:clamp(96px,13vw,128px); text-decoration:none}
.brand-logo{width:clamp(76px,11vw,104px); height:clamp(76px,11vw,104px);
  display:flex; align-items:center; justify-content:center; background:#fff;
  border:1px solid rgba(42,36,54,.1); border-radius:var(--radius-card); box-shadow:var(--shadow-soft);
  overflow:hidden; padding:12%; transition:transform .18s, box-shadow .18s}
.brand-logo img{max-width:100%; max-height:100%; object-fit:contain; display:block}
.brand-logo .mono{font-family:var(--display); font-weight:900; font-size:1.9rem; color:var(--logo-live);
  line-height:1; letter-spacing:-.02em}
.brand-name{font-family:var(--body); font-weight:600; font-size:.82rem; color:var(--tint-ink);
  white-space:nowrap; opacity:.85; text-align:center}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

/* ---- testimonial pull-quote (gallery caption) ---- */
.quote{position:relative; padding:1.5rem 0 1.5rem 2rem; margin:2.5rem 0 0; border-left:3px solid var(--plum)}
.quote::before{content:"\201C"; position:absolute; left:0; top:-.2rem; transform:translateX(-40%);
  font-family:var(--display); font-weight:900; font-size:3.4rem; color:var(--lilac-live); line-height:1}
.quote p{font-family:var(--display); font-weight:500; font-style:italic; font-size:1.5rem; line-height:1.4;
  color:var(--ink); margin:0 0 .9rem; max-width:34rem}
.quote cite{display:block; font-style:normal; font-weight:600; font-size:1.05rem; color:var(--ink)}
.quote cite small{display:block; font-weight:400; font-size:.98rem; color:var(--ink-2); margin-top:.15rem}
.quote.tint{border-left:0; background:#fff; border-radius:var(--radius-card); padding:1.8rem 1.9rem; box-shadow:var(--shadow-card)}
.quote.tint::before{left:1.4rem; top:.5rem; transform:none}

/* ---- two-hands fork ---- */
.fork{display:grid; gap:1.1rem}
@media (min-width:640px){ .fork{grid-template-columns:1fr 1fr} }
.door{position:relative; overflow:hidden; border-radius:var(--radius-card); min-height:20rem; display:flex; align-items:flex-end;
  text-decoration:none; color:#fff; box-shadow:var(--shadow-card); transition:transform .06s ease}
.door:hover{transform:translateY(-4px); box-shadow:0 22px 50px rgba(42,36,54,.38)}
.door:active{transform:scale(.985)}
.door{transition:transform .22s ease, box-shadow .22s ease}
.door img{transition:transform .5s ease}
.door:hover img{transform:scale(1.05)}
.door img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.door .grad{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(36,31,48,.9) 0%, rgba(36,31,48,.15) 55%, transparent 100%)}
.door .t{position:relative; padding:1.5rem}
.door h3{font-family:var(--display); font-weight:900; font-size:1.9rem; margin-bottom:.3rem}
.door p{font-size:1.05rem; margin:0}
.door .price{display:inline-block; margin-top:.7rem; font-weight:600; font-size:1rem;
  background:rgba(255,255,255,.95); color:var(--plum-deep); padding:.4rem .9rem; border-radius:var(--radius)}

/* ---- media (image + text) ---- */
.media{display:grid; gap:1.6rem; align-items:center}
@media (min-width:760px){ .media{grid-template-columns:1.1fr .9fr; gap:2.5rem} }
.media img{border-radius:var(--radius-card); box-shadow:var(--shadow-card)}

/* ---- services list ---- */
.svc{background:#fff; border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card)}
.svc a{display:flex; align-items:center; gap:1rem; min-height:76px; padding:1.1rem 1.4rem; text-decoration:none;
  border-bottom:2px solid var(--paper-2); transition:background .18s, padding-left .18s}
.svc a:last-child{border-bottom:0}
.svc a:hover{background:var(--paper-2); padding-left:1.9rem}
.svc a:hover .chev{transform:translateX(5px); color:var(--plum-deep)}
.svc a:active{background:var(--paper-2)}
.svc .txt h3{font-family:var(--display); font-weight:600; font-size:1.35rem; color:var(--ink); margin-bottom:.15rem}
.svc .txt p{font-size:1.02rem; color:var(--ink-2); margin:0}
.svc .chev{margin-left:auto; color:var(--plum); font-size:1.6rem; flex-shrink:0; transition:transform .18s, color .18s}

.wedding{margin-top:1.6rem; border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card)}
.wedding figcaption{padding:1rem 1.2rem; background:#fff; font-size:1.05rem; color:var(--ink-2)}
.wedding b{color:var(--ink); font-weight:600}

/* ---- camp pledge ---- */
.pledge{display:grid; gap:1rem; margin-top:1.8rem}
@media (min-width:560px){ .pledge{grid-template-columns:repeat(3,1fr)} }
.pledge div{background:var(--tint-live); border-radius:var(--radius-card); padding:1.3rem; box-shadow:var(--shadow-soft)}
.pledge b{display:block; font-family:var(--display); font-weight:900; font-size:2.1rem; color:var(--tint-ink); line-height:1}
.pledge span{font-size:1.05rem; color:var(--tint-ink); font-weight:500; opacity:.8}

/* ---- contact ---- */
.mailbtn{display:flex; align-items:center; justify-content:center; gap:.6rem; min-height:72px; max-width:32rem;
  background:var(--plum); color:#fff; font-family:var(--display); font-weight:600; font-size:1.5rem;
  text-decoration:none; border-radius:var(--radius-card); box-shadow:var(--shadow-btn); margin-bottom:1rem;
  word-break:break-word; padding:0 1rem; text-align:center; transition:transform .06s ease, box-shadow .06s ease}
.mailbtn:hover{transform:translateY(-2px); box-shadow:0 7px 18px rgba(42,36,54,.3); background:var(--plum-deep)}
.mailbtn:active{transform:translateY(3px); box-shadow:none}

/* ============================================================================
   SHARED FOOTER — same on every page
   ============================================================================ */
footer{padding:3rem var(--pad) calc(1.6rem + var(--safe-b)); background:var(--ink); color:#D9D3E4}
.footer-cols{display:grid; gap:2rem 2.5rem; max-width:var(--wrap); margin:0 auto 2.5rem;
  grid-template-columns:1fr}
@media (min-width:640px){ .footer-cols{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .footer-cols{grid-template-columns:1.2fr 1fr 1fr 1fr} }
.footer-brand .wm{color:#fff}
.footer-brand .wm .wm-main{color:#fff; font-size:1.7rem}
.footer-brand .wm .wm-main b{color:var(--lilac-live)}
.footer-brand .wm .wm-sub{color:var(--lilac-live)}
.footer-brand p{color:#9D96AE; font-size:1rem; margin-top:.7rem; max-width:20rem; line-height:1.5}
.footer-col h4{font-family:var(--body); font-weight:600; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--lilac-live); margin-bottom:1rem}
.footer-col a{display:flex; align-items:center; min-height:44px; color:#D9D3E4; text-decoration:none;
  font-size:1.05rem}
.footer-col a{transition:color .15s, padding-left .15s}
.footer-col a:hover{color:#fff; padding-left:.35rem}
.footer-col a:active{color:#fff}
.footer-mark{font-family:var(--display); font-weight:900; color:#fff; line-height:.78; letter-spacing:-.02em;
  font-size:clamp(4.5rem,23vw,14rem); margin:1rem 0 1.4rem; text-transform:none;
  max-width:var(--wrap); margin-left:auto; margin-right:auto}
.footer-legal{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; max-width:var(--wrap);
  margin:0 auto; padding-top:1.6rem; border-top:1px solid rgba(217,211,228,.18)}
.footer-legal a{color:#9D96AE; text-decoration:none; font-size:.95rem; min-height:44px;
  display:inline-flex; align-items:center}
.footer-legal a{transition:color .15s}
.footer-legal a:hover{color:#fff; text-decoration:underline}
.footer-legal .cpr{color:#9D96AE; font-size:.95rem}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important} }

/* ---- paintbrush cursor + sparkle layer ---- */
:root{
  --brush-cursor:url('brush-cursor.png') 2 2, auto;
}
@media (pointer:fine){
  html, body{cursor:var(--brush-cursor)}
  a, button, .btn, .door, .svc a, .menu-btn, summary, [role=button]{cursor:var(--brush-cursor)}
}
#sparkles{position:fixed; inset:0; z-index:60; pointer-events:none}

/* hover lifts are motion — honour reduced-motion by removing the transforms */
@media (prefers-reduced-motion:reduce){
  .btn:hover, .btn-primary:hover, .btn-secondary:hover, .menu-btn:hover, .nav-desktop a:hover,
  .door:hover, .mailbtn:hover{ transform:none !important }
}

/* ============================================================================
   WORK SUPER-MENU  — desktop dropdown (≥880px) + mobile sheet accordion
   ============================================================================ */
@media (min-width:880px){
  .navitem{position:static; display:flex; align-items:center}
  .nav-trigger{display:inline-flex; align-items:center; gap:.34rem;
    padding:.7rem 1.1rem; font-family:var(--body); font-weight:600; font-size:1.05rem;
    color:var(--ink); background:none; border:0; border-radius:var(--radius);
    cursor:var(--brush-cursor); transition:background .15s, color .15s}
  .nav-trigger:hover, .nav-trigger[aria-expanded="true"]{background:var(--plum); color:#fff}
  .nav-trigger .chev{font-size:.7em; line-height:1; transition:transform .18s}
  .nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}

  /* full-width MEGA-MENU: drops below the header, spans header content width */
  .submenu{position:absolute; top:100%; left:var(--pad); right:var(--pad); z-index:30;
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
    margin-top:.4rem; padding:20px;
    background:var(--paper-2); border:1px solid rgba(42,36,54,.1);
    border-radius:var(--radius-card); box-shadow:var(--shadow-card);
    opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s}
  .navitem.open .submenu{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto}

  .mm-card{display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
    background:var(--paper); border:1px solid rgba(42,36,54,.08); border-radius:var(--radius-card);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
  .mm-card:hover, .mm-card:focus-visible{transform:translateY(-3px); border-color:var(--plum);
    box-shadow:0 8px 18px rgba(42,36,54,.16)}
  .mm-thumb{display:block; height:140px; background:var(--paper-2); overflow:hidden}
  .mm-thumb img{width:100%; height:100%; object-fit:cover; display:block}
  .mm-thumb--empty{background:var(--tint-live)}
  .mm-name{font-family:var(--body); font-weight:700; font-size:1rem; color:var(--ink);
    padding:.55rem .7rem .12rem}
  .mm-card:hover .mm-name, .mm-card:focus-visible .mm-name{color:var(--plum)}
  .mm-sub{font-family:var(--body); font-weight:500; font-size:.8rem; color:var(--ink-2);
    opacity:.85; padding:0 .7rem .6rem; line-height:1.25}
}

/* mobile sheet — Work accordion group */
.sheet-group{display:flex; align-items:center; width:100%; min-height:66px;
  font-family:var(--display); font-weight:600; font-size:1.7rem; color:var(--ink);
  background:none; border:0; border-bottom:2px solid rgba(42,36,54,.1);
  text-align:left; cursor:pointer}
.sheet-group .chev{margin-left:auto; color:var(--plum); font-family:var(--body); font-size:1.3rem; transition:transform .2s}
.sheet-group[aria-expanded="true"] .chev{transform:rotate(180deg)}
.sheet-sub{display:flex; flex-direction:column}
.sheet-sub[hidden]{display:none}
.sheet-sub a{min-height:56px; font-size:1.28rem; padding-left:1.1rem; color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .submenu{transition:none}
  .nav-trigger .chev, .sheet-group .chev{transition:none}
}


/* SITE PAGES v1 */
/* ============================================================================
   SITE PAGES — murals / paintings / workshops / accessories / events / about / contact
   ============================================================================ */
.pg section{min-height:0; padding:clamp(2.6rem,6vh,4.5rem) var(--pad)}
.pg .hero{padding:clamp(3.5rem,8vh,6rem) var(--pad) clamp(2rem,4vh,3rem);
  background:linear-gradient(160deg,var(--paper),var(--paper-2))}
.pg .hero h1{margin:.15rem 0 0}
.pg .wrap{width:100%; max-width:var(--wrap); margin:0 auto}
.pg h2.sec{margin-bottom:.4rem}
.pg .btns{max-width:26rem}

.band{background:var(--paper-2)}
.band-plum{background:var(--plum); color:#fff}
.band-plum .eyebrow{color:var(--lilac-live)}
.band-plum h2, .band-plum .lede, .band-plum p{color:#fff}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}

.cat{margin-bottom:2.6rem}
.cat-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom:1rem; padding-bottom:.55rem; border-bottom:1px solid rgba(42,36,54,.12)}
.cat-head h3{font-family:var(--display); font-weight:900; font-size:1.5rem}
.cat-head .loc{font-size:.85rem; color:var(--plum); font-weight:600; white-space:nowrap}

/* neutral image placeholder (paper-tint + 'image pending' badge) */
.ph{position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:200px; padding:1.2rem; border-radius:var(--radius-card);
  background:var(--paper-2); border:1px dashed rgba(42,36,54,.28);
  color:var(--ink-2); font-style:italic; font-size:.92rem}
.ph::before{content:'image pending'; position:absolute; top:8px; left:8px; font-style:normal;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--plum);
  background:var(--paper); border:1px solid rgba(42,36,54,.14); border-radius:3px; padding:2px 6px}
.ph.tall{min-height:320px}
.ph.wide{min-height:240px}

.review{max-width:44rem; margin:0 auto; text-align:center}
.review .q{font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.35; color:var(--ink)}
.band-plum .review .q{color:#fff}
.review .who{margin-top:1rem; color:var(--plum); font-weight:600; font-size:.95rem}
.band-plum .review .who{color:var(--lilac-live)}
.review::before{content:'\201C'; display:block; font-family:var(--display); font-size:3.4rem;
  line-height:.6; color:var(--lilac); margin-bottom:.4rem}
.band-plum .review::before{color:var(--lilac-live)}

.cta{text-align:center}
.cta h2{margin-bottom:.5rem}
.cta p{color:var(--ink-2); max-width:34rem; margin:0 auto 1.4rem; font-size:1.15rem}
.cta .btns{margin:1.4rem auto 0; align-items:center}

.about-row{display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; align-items:center; margin-bottom:2.6rem}
.about-row:nth-child(even) .txt{order:2}
.about-row h3{font-family:var(--display); font-weight:900; color:var(--plum); font-size:1.4rem; margin-bottom:.5rem}
.about-row p{color:var(--ink-2); font-size:1.08rem}

.logostrip{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:1.2rem}
.logostile{width:118px; height:64px; background:#fff; border:1px solid rgba(42,36,54,.1);
  border-radius:var(--radius-card); box-shadow:var(--shadow-soft); padding:11px;
  display:flex; align-items:center; justify-content:center}
.logostile img{max-width:100%; max-height:100%; object-fit:contain; display:block}

/* paintings gallery — masonry, no crop */
.gallerygrid{column-width:230px; column-gap:14px; margin-top:1.4rem}
.gallerygrid img{width:100%; margin:0 0 14px; border-radius:var(--radius-card);
  break-inside:avoid; box-shadow:var(--shadow-soft); background:var(--paper-2)}

.evt-shot{width:100%; height:100%; min-height:200px; object-fit:cover; border-radius:var(--radius-card); box-shadow:var(--shadow-soft)}

.todo{display:block; margin-top:.7rem; font-size:.82rem; color:var(--amber); font-weight:600}

.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:1rem}
.contact-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  min-height:120px; padding:1.2rem; text-align:center; text-decoration:none;
  background:#fff; border:1px solid rgba(42,36,54,.1); border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft); color:var(--ink); font-weight:600; font-size:1.05rem;
  transition:transform .15s, box-shadow .15s, border-color .15s}
.contact-card:hover{transform:translateY(-3px); border-color:var(--plum); color:var(--plum); box-shadow:var(--shadow-card)}
.contact-card .eml{font-weight:500; font-size:.9rem; color:var(--ink-2)}

@media (max-width:820px){
  .grid-2,.grid-3,.grid-4,.about-row,.contact-cards{grid-template-columns:1fr}
  .about-row:nth-child(even) .txt{order:0}
}

/* ---- two-hands Murals door: neutral placeholder (no mural photo yet) ---- */
.door-ph{position:absolute; inset:0; background:var(--paper-2);
  display:flex; align-items:flex-start; justify-content:center; text-align:center;
  padding:1.4rem; color:var(--ink-2); font-style:italic; font-size:.9rem}

/* ---- "Places she's worked" cards (repurposed truck band) ---- */
.places{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:.4rem}
@media (min-width:760px){ .places{grid-template-columns:repeat(4,1fr)} }
.place{position:relative; margin:0; border-radius:var(--radius-card); overflow:hidden;
  box-shadow:var(--shadow-card); background:var(--paper-2)}
.place img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block}
.place-ph{width:100%; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); border:1px dashed rgba(42,36,54,.25);
  color:var(--ink-2); font-style:italic; font-size:.85rem; text-align:center; padding:1rem}
.place figcaption{position:absolute; left:0; right:0; bottom:0; padding:.8rem .9rem; color:#fff;
  font-family:var(--display); font-weight:900; font-size:1.35rem; line-height:1;
  background:linear-gradient(to top, rgba(36,31,48,.85) 0%, rgba(36,31,48,.15) 70%, transparent 100%)}