/* rots-funk.css — gallery-punk overlay on top of the modernist DS.
   ponytail: pure additive override, loaded after site.css. Delete the two
   <link> tags to revert; changes nothing in the DS itself. */

:root {
  --funk-ink: var(--color-text, #201e1d); --funk-accent: var(--color-accent, #ec3013);
  /* swap the DS type for something funkier */
  --font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;
  --funk-marker: "Permanent Marker", var(--font-heading);
}
body { font-family: var(--font-body); }
h1, h2, h3, h4, .section-title, .display { font-family: var(--font-heading) !important; }

/* hand-scrawled marker on the loud bits */
.price__now, .brandmark, .work__stamp[data-free="true"], .badge {
  font-family: var(--funk-marker) !important; font-weight: 400 !important;
}

/* ── headings: risograph offset + drunk skew ───────────────────────── */
.section-title, .display {
  text-shadow: 3px 3px 0 var(--funk-accent), 6px 6px 0 rgba(32,30,29,.15);
  letter-spacing: -.01em;
}
.section-title:nth-of-type(odd)  { transform: rotate(-1.6deg); }
.section-title:nth-of-type(even) { transform: rotate(1.2deg); }
/* marker scrawl under every heading */
.section-title { position: relative; display: inline-block; }
.section-title::after {
  content: ""; position: absolute; left: -2%; right: -4%; bottom: -.15em; height: .12em;
  background: var(--funk-accent);
  border-radius: 60% 40% 55% 45% / 100% 100% 100% 100%;
  transform: rotate(-.6deg);
}

/* ── work cards: hand-pinned, marker border, hard shadow ───────────── */
.work {
  transition: transform .18s ease, box-shadow .18s ease;
}
.work__media {
  border: 3px solid var(--funk-ink);
  /* wobbly hand-drawn frame */
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 8px 8px 0 var(--funk-ink);
  overflow: hidden;
  background: var(--color-bg, #f3f2f2);
}
/* alternate the tilt so the grid reads like taped-up canvases */
.work:nth-child(3n+1) { transform: rotate(-2deg); }
.work:nth-child(3n+2) { transform: rotate(1.4deg); }
.work:nth-child(3n+3) { transform: rotate(-.8deg); }
.work:hover {
  transform: rotate(0) translateY(-4px) scale(1.02);
  z-index: 2;
}
.work:hover .work__media {
  box-shadow: 12px 12px 0 var(--funk-accent);
}

/* sold works: greyed canvas + stamped */
.work[data-sold="true"] .work__media { filter: grayscale(1) opacity(.72); }
.work__stamp[data-sold="true"] {
  background: var(--funk-ink); color: #fff; z-index: 3;
  transform: rotate(-6deg); border: 2px solid #fff;
  font-family: var(--funk-marker, inherit);
}
[data-soldbtn] { opacity: .6; cursor: not-allowed; }

/* price pops like a spray-can tag */
.price__now {
  font-style: italic;
  transform: rotate(-3deg);
  display: inline-block;
}
.price__was { text-decoration: line-through wavy var(--funk-accent); }

/* free-stamp: crooked rubber stamp */
.work__stamp[data-free="true"] {
  transform: rotate(-8deg) scale(1.1);
  border: 2px dashed var(--funk-accent);
}

/* filter/sort pills: chunkier, offset shadow on active */
.chip[aria-pressed="true"], .filter [aria-current="true"], .is-active {
  box-shadow: 3px 3px 0 var(--funk-ink);
}

/* ── mobile: kill tilt/overflow, keep the funk cheap ───────────────── */
@media (max-width: 640px) {
  .display { transform: none; text-shadow: 2px 2px 0 var(--funk-accent); }
  .work, .work:nth-child(3n+1), .work:nth-child(3n+2), .work:nth-child(3n+3) { transform: none; }
  .work__media { box-shadow: 5px 5px 0 var(--funk-ink); border-width: 2px; }
  .work:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .work, .work:hover { transition: none; transform: none; }
}

/* ── Picasso / free-style layer ────────────────────────────────────────
   Cubist confetti behind the hero + hand-scrawled accents. Primary palette:
   the bright blue/ochre/red from the canvases themselves. */
:root { --pic-blue: #4a7fb5; --pic-ochre: #e0a021; --pic-red: var(--funk-accent); }

/* two-tone cut heading, like a face split profile+front */
h1.section-title, .hero .display, h1.display {
  background: linear-gradient(105deg, var(--funk-ink) 0 56%, var(--pic-red) 56% 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;   /* clip mode can't keep the riso shadow */
}

/* ── the rest of the text, weirder ─────────────────────────────────── */
/* intro/lede leans in, italic, hand-set */
.lede, .hero .sub {
  font-style: italic;
  transform: rotate(-.5deg);
  border-left: 4px solid var(--pic-blue);
  padding-left: .7em;
}
/* body copy: warmer, looser, faux hand-set with a tiny baseline wobble */
.section p, .work__meta, .lede { letter-spacing: .005em; }
/* drop-cap only on the intro lede, not on card meta lines */
.lede::first-letter { font-size: 1.6em; font-weight: 800; color: var(--pic-red); line-height: .9; }
/* filter/sort pills: chunky sticker look, each tilted its own way */
.chip, .filter a, .filter button, [data-filter], [data-sort] {
  border: 2px solid var(--funk-ink) !important;
  border-radius: 40px 12px 40px 12px !important;
}
.chip:nth-child(odd)  { transform: rotate(-2deg); }
.chip:nth-child(even) { transform: rotate(1.5deg); }
/* buttons: spray-tag energy */
.btn { transform: rotate(-1deg); border: 2px solid var(--funk-ink) !important; }
.btn:hover { transform: rotate(0) scale(1.04); }
/* brandmark = the painting logo, no red box */
.nav .brandmark, .nav .brandmark:hover {
  background: none !important; width: 46px; height: 46px;
  border-radius: 9px; overflow: hidden; padding: 0;
}
.brandmark__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav .brandmark:hover { transform: rotate(-6deg) scale(1.08); }

.work__media { position: relative; }

/* work detail: same wobbly frame, and kill the grey gap under the photo */
.detail__media {
  min-height: 0 !important; background: var(--color-bg) !important;
  border: 3px solid var(--funk-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 8px 8px 0 var(--funk-ink);
  overflow: hidden; transform: rotate(-1deg);
}

/* drop the grey box + dividers around the filter/sort pills;
   each pill already carries its own sticker border */
.chipset { border: 0 !important; gap: .5rem !important; }
.chip { border-left: 0 !important; }