/* =========================================================
   Heike's Happy Accidents — "LIVING CANVAS"
   A bright gallery-cream site splashed with tube-paint color.
   The visitor paints the hero away to uncover her name; works
   paint themselves onto the wall; a fluid brush follows the cursor.
   Fraunces (display) + Inter (text), self-hosted variable woff2.
   Ground-up rebuild — shares no layout DNA with the dark template.
   ========================================================= */

/* ---------- Self-hosted fonts (variable woff2, latin subset) ---------- */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('assets/fonts/fraunces.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url('assets/fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('assets/fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 3rd family — DELIBERATE exception to the 2-font rule: Caveat is used ONLY for
   the artist's handwritten margin notes (cue, scribbles, tombstone meta). The
   hand of the painter on her own site is the point. */
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('assets/fonts/caveat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens (standard schema — contrast-check.py reads these) ---------- */
:root {
  --accent:      #2743C6;   /* ultramarine — the signature pigment (CTA fill) */
  --accent-deep: #22399F;   /* darker ultramarine — links/eyebrows on cream */
  --ink:         #1A1610;   /* warm near-black text */
  --muted:       #5C5342;   /* secondary text */
  --surface:     #F4ECDD;   /* gallery-cream canvas (page) */
  --surface-2:   #EBE0CD;   /* deeper cream (alt bands) */
  --line:        #DBCFB6;   /* borders on cream */
  --white:       #FDFAF3;   /* bright paper (cards + button text) */

  /* tube-paint palette — the joy of "happy accidents" (decorative only) */
  --p-ultra:  #2743C6;
  --p-vermil: #E0472B;
  --p-mari:   #F2A93B;
  --p-virid:  #1F9E6E;
  --p-rose:   #D8477E;
  --p-violet: #6E4AA6;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  --fs-hero: clamp(3rem, 9vw + 1rem, 9rem);
  --fs-h2:   clamp(2.1rem, 4vw + 0.6rem, 4.5rem);
  --fs-body: clamp(1rem, 0.3vw + 0.95rem, 1.15rem);
  --fs-eyebrow: 0.8125rem;

  --space-section: clamp(5rem, 3rem + 8vw, 11rem);
  --maxw: 1280px;
  --pad-x: clamp(1.2rem, 5vw, 3.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-paint: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.5s;
  --radius: 4px;
  --sheet: clamp(10px, 2vw, 26px);   /* white desk margin around the parchment */
}

/* ---------- Reset-ish ---------- */
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; background: #FFFFFF; }
/* THE DESK & THE SHEET: a white blank page underneath; a torn-edged parchment
   sheet floats on it (fixed, so it frames the viewport while content scrolls
   across it); everything else lives on the parchment. */
body {
  background: transparent;         /* html is the white desk; body must not cover the sheet */
  padding: var(--sheet);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  cursor: none; /* the fluid brush replaces the pointer (desktop) */
}
body::before {
  content: ""; position: fixed; inset: var(--sheet); z-index: -1;
  background:
    radial-gradient(120% 85% at 18% 0%, rgba(196, 166, 114, .42), transparent 62%),
    radial-gradient(95% 75% at 88% 12%, rgba(209, 179, 128, .34), transparent 58%),
    radial-gradient(110% 80% at 78% 96%, rgba(188, 155, 102, .38), transparent 60%),
    radial-gradient(80% 60% at 8% 88%, rgba(203, 174, 122, .32), transparent 55%),
    radial-gradient(60% 45% at 45% 42%, rgba(214, 189, 146, .20), transparent 70%),
    /* darkened, worn edges of the sheet */
    radial-gradient(140% 120% at 50% 50%, transparent 58%, rgba(139, 108, 62, .30) 97%),
    var(--surface);
  border-radius: 5px;
  box-shadow:
    0 2px 6px rgba(26, 22, 16, .12),
    0 24px 70px -24px rgba(26, 22, 16, .32),
    inset 0 0 110px rgba(139, 108, 62, .20),
    inset 0 0 14px rgba(139, 108, 62, .18);
  filter: url(#torn-edge); /* SVG displacement (index.html) → hand-torn edges */
}
/* paper fibre — rides over the parchment only, whisper-quiet */
body::after {
  content: ""; position: fixed; inset: var(--sheet); z-index: 240; pointer-events: none;
  opacity: .55; mix-blend-mode: multiply; border-radius: 5px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.72 0 0 0 0 0.66 0 0 0 0 0.55 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.58 0 0 0 0 0.44 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)'/%3E%3C/svg%3E");
}
body.no-brush { cursor: auto; } /* touch / reduced-motion / no-JS */
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.02; font-weight: 500; }
button { font: inherit; color: inherit; cursor: pointer; }
body:not(.no-brush) a, body:not(.no-brush) button { cursor: none; }
::selection { background: var(--p-mari); color: var(--ink); }

.skip-link {
  position: fixed; left: -999px; top: 0; z-index: 300;
  background: var(--accent); color: var(--white); padding: .8rem 1.2rem;
  border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Fluid brush cursor (sitewide overlay) ---------- */
.brush-canvas {
  position: fixed; inset: 0; z-index: 250; pointer-events: none;
  mix-blend-mode: multiply;
}
.brush-dot {
  position: fixed; top: 0; left: 0; z-index: 251; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--ink); mix-blend-mode: difference;
  transition: width .25s var(--ease), height .25s var(--ease), opacity .3s;
  will-change: transform;
}
.brush-dot.is-hot { width: 42px; height: 42px; margin: -21px 0 0 -21px; } /* over links */

/* ---------- Buttons — paint SLOSHES up, a different pigment per button ----------
   Two stacked waves with blobby crests + an overshoot ease = liquid slosh.
   Flood colors are DEEPENED variants so white text stays AA on every flood. */
.btn {
  --by: .9rem; --bx: 1.7rem;
  --flood: #2743C6;          /* per-button pigment (see assignments below) */
  --lean: 0deg;              /* per-button hand-placed tilt */
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: var(--by) var(--bx); overflow: hidden;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  border-radius: 42px 38px 44px 36px / 38px 44px 36px 42px; /* hand-drawn pill */
  border: 1.5px solid var(--ink); background: transparent;
  color: var(--ink);
  transform: rotate(var(--lean));
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn span { position: relative; z-index: 2; }
/* main wave */
.btn::before {
  content: ""; position: absolute; left: -14%; right: -14%; top: -34%; bottom: -10%;
  z-index: 0; background: var(--flood);
  border-radius: 46% 54% 0 0 / 100% 78% 0 0;
  transform: translateY(108%) rotate(-2.5deg);
  transition: transform .55s cubic-bezier(.3, 1.25, .4, 1);
}
/* trailing splash wave — lighter, offset, slightly delayed */
.btn::after {
  content: ""; position: absolute; left: -18%; right: -18%; top: -40%; bottom: -10%;
  z-index: 1; background: color-mix(in srgb, var(--flood) 74%, #FDFAF3);
  border-radius: 58% 42% 0 0 / 74% 100% 0 0; opacity: .55;
  transform: translateY(112%) rotate(2deg);
  transition: transform .68s cubic-bezier(.3, 1.25, .4, 1) .06s;
}
.btn:hover, .btn:focus-visible { color: var(--white); border-color: var(--flood); transform: rotate(var(--lean)) translateY(-2px); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(6%) rotate(1.5deg); }
.btn:hover::after, .btn:focus-visible::after { transform: translateY(16%) rotate(-1.2deg); }
.btn--fill { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--fill:hover, .btn--fill:focus-visible { border-color: var(--ink); }
.btn--lg { --by: 1.15rem; --bx: 2.3rem; font-size: 1.05rem; }

/* one pigment per button — no two alike (deepened for AA white text) */
.nav__cta { --flood: #157A54; --lean: 0deg; }                      /* viridian over blue   */
.hero__actions .btn--fill { --flood: #B22F63; --lean: -2.4deg; }   /* rose over blue       */
.hero__actions .btn + .btn { --flood: #2743C6; --lean: 1.8deg; }   /* ultramarine on cream */
.steps__cta .btn { --flood: #B93317; --lean: -7deg; }              /* vermilion over blue  */
.contact__form .btn { --flood: #6E4AA6; --lean: 1.2deg; }          /* violet over blue     */

/* circular STAMP button (commissions) — a wax-seal of paint */
.btn--stamp {
  width: 158px; height: 158px; padding: 0;
  border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;
  justify-content: center; text-align: center;
}
.btn--stamp span { max-width: 8ch; line-height: 1.25; }

/* form submit — a tilted torn label, pushed to the right edge of the form */
.contact__form .btn { justify-self: end; border-radius: 26px 10px 24px 12px / 12px 26px 10px 24px; }

/* ---------- Nav (framed inside the sheet) ---------- */
.nav {
  position: fixed; top: var(--sheet); left: var(--sheet); right: var(--sheet); z-index: 200;
  border-bottom: 1.5px solid transparent;
  border-radius: 5px 5px 0 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  mix-blend-mode: normal;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--ink);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 1.1rem var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav__brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.02rem; }
.nav__blob {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 60% 40% 55% 45% / 55% 48% 52% 45%;
  background: conic-gradient(from 20deg, var(--p-ultra), var(--p-vermil), var(--p-mari), var(--p-virid), var(--p-rose), var(--p-ultra));
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.nav__name em { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.nav__links { display: flex; gap: 1.8rem; }
.nav__links a {
  font-size: .92rem; color: var(--ink); position: relative; padding: .55rem 0; font-weight: 500;
}
/* hand-drawn squiggle underline, painted on hover */
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 6px; width: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'%3E%3Cpath d='M1 4.2 Q 8 1.4 15 3.6 T 30 3.2 T 45 4 T 59 2.6' fill='none' stroke='%232743C6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 60px 6px;
  transition: width var(--dur) var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { width: 100%; }
.nav__toggle { display: none; width: 46px; height: 46px; border: 1.5px solid var(--ink); border-radius: 10px; background: none; }
.nav__toggle-bar, .nav__toggle-bar::before, .nav__toggle-bar::after {
  display: block; width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; margin: 0 auto;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle-bar { position: relative; }
.nav__toggle-bar::before, .nav__toggle-bar::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bar::before { top: -7px; } .nav__toggle-bar::after { top: 7px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before { transform: rotate(-90deg) translateX(-7px); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after { opacity: 0; }

/* ============================================================
   HERO — the paint-to-reveal canvas
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center; isolation: isolate;
}
.hero__reveal {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; text-align: center;
  padding: 7rem var(--pad-x) 5rem;
}
/* soft paint splashes behind the title */
.hero__splash {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: 0;
  will-change: transform;
}
.hero__splash--1 { width: 44vmin; height: 44vmin; top: 8%; left: 8%;  background: radial-gradient(circle at 40% 40%, var(--p-ultra), transparent 70%); }
.hero__splash--2 { width: 40vmin; height: 40vmin; top: 12%; right: 6%; background: radial-gradient(circle at 50% 50%, var(--p-vermil), transparent 70%); }
.hero__splash--3 { width: 46vmin; height: 46vmin; bottom: 4%; left: 26%; background: radial-gradient(circle at 50% 50%, var(--p-mari), transparent 70%); }
.hero__splash--4 { width: 34vmin; height: 34vmin; bottom: 10%; right: 18%; background: radial-gradient(circle at 50% 50%, var(--p-rose), transparent 72%); }
/* width:100% so the grid track (not max-content) bounds it — text wraps instead
   of overflowing and clipping on narrow screens. */
.hero__content { position: relative; z-index: 2; width: 100%; max-width: 1100px; margin-inline: auto; }
.hero__eyebrow {
  font-size: var(--fs-eyebrow); letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 600; margin-bottom: 1.4rem;
}
.hero__title {
  font-family: var(--font-display); font-size: var(--fs-hero);
  font-weight: 340; letter-spacing: -0.02em; line-height: .92;
}
.hero__title .l1 { display: block; font-weight: 340; }
.hero__title .l2 { display: block; font-style: italic; font-weight: 400; }
.hero__title .paintword { position: relative; } /* wraps on narrow screens */
.hero__sub {
  max-width: 46ch; margin: 1.8rem auto 0; color: var(--muted);
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); line-height: 1.55;
}
.hero__sub em { font-family: var(--font-display); font-style: italic; color: var(--ink); }
/* CTAs live OFF TO THE SIDE — a stack of hand-placed paint shapes on the right
   edge, like daubs on the sheet's margin. (Centered row again on phones.) */
.hero__actions {
  position: absolute; z-index: 3; right: clamp(1.2rem, 4.5vw, 4rem); bottom: 16%;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1.2rem;
}
.hero__actions .btn--fill {
  --by: 1.5rem; --bx: 2.1rem;
  border-radius: 55% 45% 52% 48% / 46% 58% 42% 54%;  /* a fat paint dab */
}
.hero__actions .btn + .btn {
  --by: .8rem; --bx: 1.4rem; font-size: .9rem;
  border-radius: 8px 22px 10px 24px / 22px 9px 24px 10px; /* torn label strip */
}

/* the cream "primer" the visitor wipes away */
.hero__primer { position: absolute; inset: 0; z-index: 5; touch-action: none; }
.hero__cue {
  position: absolute; z-index: 6; left: 50%; bottom: 12%; transform: translateX(-50%) rotate(-2deg);
  font-family: var(--font-hand); font-size: 1.5rem; color: var(--ink);
  font-weight: 600; display: flex; align-items: center; gap: .6rem; pointer-events: none;
  transition: opacity .5s;
}
.hero__cue::before { content: ""; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--p-vermil), var(--p-rose)); animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.hero__replay {
  position: absolute; z-index: 6; right: var(--pad-x); bottom: 2.2rem;
  display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--ink); border-radius: 100px; padding: .55rem 1rem;
  opacity: 0; transition: opacity .4s, transform .3s var(--ease);
}
.hero__replay.is-ready { opacity: 1; }
.hero__replay:hover { transform: translateY(-2px); }
.hero__scrollcue {
  position: absolute; z-index: 6; left: var(--pad-x); bottom: 2.2rem;
  writing-mode: vertical-rl; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 1rem;
}
.hero__scrollcue span { width: 1.5px; height: 44px; background: linear-gradient(var(--ink), transparent); animation: drop 1.8s var(--ease) infinite; }
@keyframes drop { 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- Section shell ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: var(--space-section) var(--pad-x); }
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 20ch; }
.kicker {
  font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 600; margin-bottom: 1.1rem;
  display: inline-flex; align-items: center; gap: .7rem;
}
.kicker::before { content: attr(data-n); font-family: var(--font-display); font-style: italic; font-size: 1.3rem; letter-spacing: 0; color: var(--ink); }
.section__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 340; letter-spacing: -0.02em; }
.section__title em { font-style: italic; font-weight: 400; }
/* kinetic split-text: words rise into place */
.reveal-words .word { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-words .word > span { display: inline-block; transform: translateY(105%); }
.reveal-words.is-in .word > span { transform: translateY(0); transition: transform .7s var(--ease); }
.reveal-words.is-in .word:nth-child(2) > span { transition-delay: .06s; }
.reveal-words.is-in .word:nth-child(3) > span { transition-delay: .12s; }
.reveal-words.is-in .word:nth-child(4) > span { transition-delay: .18s; }
.reveal-words.is-in .word:nth-child(5) > span { transition-delay: .24s; }
.reveal-words.is-in .word:nth-child(6) > span { transition-delay: .3s; }
.reveal-words.is-in .word:nth-child(7) > span { transition-delay: .36s; }

/* ---------- Gallery: "the wall" ---------- */
.gallery__bar { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: end; justify-content: space-between; margin-bottom: 2.4rem; }
.gallery__filters { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  background: none; border: 1.5px solid var(--line); border-radius: 100px;
  padding: .5rem 1.15rem; font-size: .88rem; font-weight: 500; color: var(--muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:hover, .chip:focus-visible { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; grid-auto-flow: dense; gap: 1.6rem; }
.art { margin: 0; display: flex; flex-direction: column; }
.art--tall { grid-row: span 2; } .art--wide { grid-column: span 2; }
.art.is-filtered { display: none; }
.art__frame {
  --tilt: 0deg;
  position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 7px 12px 8px 14px / 12px 8px 13px 9px; /* deckled, not machine-cut */
  padding: clamp(.55rem, 1.1vw, .9rem);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(26,22,16,.5);
  transform: rotate(var(--tilt));
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.art:nth-child(4n+2) .art__frame { --tilt: .5deg; }
.art:nth-child(4n+3) .art__frame { --tilt: -.5deg; }
.art__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
/* the paint-swipe that wipes off to "paint" the work onto the wall */
.art__wipe {
  position: absolute; inset: 0; z-index: 2; background: var(--surface);
  transform-origin: right center; transform: scaleX(1);
  transition: transform .95s var(--ease-paint);
  -webkit-mask: radial-gradient(120% 60% at 0% 50%, #000 60%, transparent 62%) left/300% 100% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-over;
}
.art.is-painted .art__frame .art__wipe { transform: scaleX(0); }
.art__frame:hover { transform: translateY(-7px) rotate(var(--tilt)); border-color: var(--ink);
  box-shadow: 0 1px 0 var(--line), 0 34px 60px -30px rgba(26,22,16,.6); }
.art__cap { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 1rem; padding: .8rem .2rem 0; }
.art__cap strong { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.1rem; }
.art__cap .tag { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.art__cap .meta { grid-column: 1/-1; font-family: var(--font-hand); font-size: 1.05rem; color: var(--muted); margin-top: .1rem; }

/* marker highlight — a brush of marigold swipes behind key phrases on scroll */
.marklight {
  background-image: linear-gradient(104deg, transparent 1%, rgba(242, 169, 59, .5) 6% 94%, transparent 99%);
  background-repeat: no-repeat; background-size: 0% 86%; background-position: 0 62%;
  transition: background-size .7s var(--ease-paint) .18s;
  border-radius: 2px;
}
.marklight.is-in { background-size: 100% 86%; }
.no-js .marklight { background-size: 100% 86%; }

/* handwritten margin notes — the artist's hand on her own site */
.scribble {
  font-family: var(--font-hand); font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  color: var(--ink); font-weight: 600; line-height: 1.15; pointer-events: none;
}
.hero__actions .scribble { transform: rotate(-4deg); margin-bottom: -.2rem; margin-right: .6rem; }
.about__note { position: absolute; bottom: -2.4rem; right: 0; transform: rotate(-2.5deg); color: var(--muted); }

/* pressure letters swell smoothly; buttons chase the brush on the translate axis */
.pchar { transition: font-variation-settings .18s ease; }
.hero__actions .btn, .btn--stamp { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), translate .3s var(--ease); }

/* loupe glide inside the lightbox */
.lightbox__body img { transition: transform .5s var(--ease), transform-origin .16s linear; }
/* Sample tag — placeholders must never read as real inventory */
.art--placeholder .art__frame::after {
  content: "Sample"; position: absolute; top: .8rem; right: .8rem; z-index: 3;
  font: 600 .6rem/1 var(--font); letter-spacing: .13em; text-transform: uppercase;
  color: var(--white); background: var(--ink); padding: .32rem .55rem; border-radius: 100px; pointer-events: none;
}
.gallery__note { margin-top: 1.8rem; color: var(--muted); max-width: 52ch; }
.gallery__note a { color: var(--accent-deep); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent-deep); }
.gallery__note a:hover { box-shadow: inset 0 -1.4em 0 var(--p-mari); color: var(--ink); }

/* ---------- Lightbox ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.lightbox:not([open]) { display: none; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(7px); }
.lightbox__body { max-width: min(1100px, 92vw); text-align: center; }
.lightbox__body img { max-height: 76vh; width: auto; max-width: 100%; margin: 0 auto; background: var(--white); padding: clamp(.6rem,1.2vw,1rem); border: 1px solid var(--line); box-shadow: 0 40px 90px -40px rgba(26,22,16,.6); }
.lightbox__cap { margin-top: 1.2rem; display: flex; gap: 1rem; justify-content: center; align-items: baseline; }
.lightbox__cap strong { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.35rem; }
.lightbox__cap span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lightbox__ask { margin-top: .5rem; } .lightbox__ask a { color: var(--accent-deep); font-weight: 600; }
.lightbox__nav, .lightbox__close {
  position: fixed; z-index: 5; width: 54px; height: 54px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--ink); color: var(--ink); font-size: 1.15rem;
  display: grid; place-items: center; transition: background var(--dur), color var(--dur), transform var(--dur);
}
.lightbox__nav:hover, .lightbox__close:hover { background: var(--accent); color: var(--white); border-color: var(--accent); transform: scale(1.07); }
.lightbox__nav--prev { left: clamp(.6rem,3vw,2.5rem); top: 50%; translate: 0 -50%; }
.lightbox__nav--next { right: clamp(.6rem,3vw,2.5rem); top: 50%; translate: 0 -50%; }
.lightbox__close { top: 1.3rem; right: clamp(.6rem,3vw,2.5rem); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.about__media { position: relative; }
.about__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 30px 60px -34px rgba(26,22,16,.55); }
.about__tape { position: absolute; top: -14px; left: 28px; background: color-mix(in srgb, var(--p-mari) 70%, transparent); width: 120px; height: 34px; transform: rotate(-4deg); }
.about__pull { font-family: var(--font-display); font-weight: 340; font-size: clamp(1.7rem, 2.2vw + .8rem, 2.9rem); line-height: 1.12; letter-spacing: -.015em; }
.about__pull em { font-style: italic; color: var(--accent-deep); }
.about__body p { color: var(--muted); margin-top: 1.3rem; max-width: 52ch; }
.about__list { list-style: none; padding: 0; margin-top: 2rem; display: grid; gap: .85rem; }
.about__list li { padding-left: 2rem; position: relative; color: var(--ink); }
.about__list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 60% 40% 55% 45% / 55% 48% 52% 45%; }
.about__list li:nth-child(1)::before { background: var(--p-vermil); }
.about__list li:nth-child(2)::before { background: var(--p-virid); }
.about__list li:nth-child(3)::before { background: var(--p-violet); }

/* ---------- Commissions (painted timeline, on raw canvas weave) ---------- */
.steps {
  background:
    repeating-linear-gradient(0deg, rgba(139, 108, 62, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(139, 108, 62, .05) 0 1px, transparent 1px 4px),
    var(--surface-2);
  max-width: none;
}
.steps > * { max-width: var(--maxw); margin-inline: auto; }
.steps__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; position: relative; align-items: start; }
.steps__list::before { content: ""; position: absolute; left: 3%; right: 3%; top: 2.8rem; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--p-ultra), var(--p-vermil) 33%, var(--p-mari) 66%, var(--p-virid)); opacity: .55; }
.steps__card { background: var(--white); border: 1px solid var(--line); padding: 2rem 1.7rem 1.8rem; position: relative; overflow: hidden;
  border-radius: 10px 16px 9px 15px / 15px 9px 16px 10px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.steps__card:nth-child(2) { border-radius: 15px 9px 16px 10px / 9px 15px 10px 16px; }
.steps__card:nth-child(3) { border-radius: 9px 14px 10px 17px / 14px 10px 15px 9px; }
.steps__card:nth-child(4) { border-radius: 16px 10px 14px 9px / 10px 16px 9px 15px; }
.steps__card:nth-child(even) { margin-top: 1.8rem; }
.steps__card:first-child { border-color: var(--ink); }
.steps__card:hover { transform: translateY(-5px); border-color: var(--ink); }
.steps__no { font-family: var(--font-display); font-style: italic; font-size: 2rem; }
.steps__no:nth-child(1) { color: var(--accent-deep); }
.steps__card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin: .5rem 0 .5rem; }
.steps__card p { color: var(--muted); font-size: .95rem; }
/* stamp sits off to the right, overlapping the timeline's tail */
.steps__cta { margin-top: .6rem; display: flex; justify-content: flex-end; padding-right: 4%; }

/* ---------- Contact ---------- */
.contact__panel { display: grid; grid-template-columns: 1.1fr .9fr; background: var(--white); border: 1.5px solid var(--ink); border-radius: 14px 22px 12px 20px / 20px 12px 22px 14px; overflow: hidden; box-shadow: 0 40px 80px -44px rgba(26,22,16,.5); }
.contact__form-col { padding: clamp(2rem, 4vw, 3.6rem); }
.contact__form { margin-top: 1.8rem; display: grid; gap: 1.1rem; max-width: 500px; }
.contact__form label { display: grid; gap: .45rem; font-size: .88rem; font-weight: 600; color: var(--ink); }
.contact__form .form-hint { font-weight: 400; color: var(--muted); }
.contact__form input, .contact__form textarea {
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); border-radius: 6px;
  padding: .8rem .95rem; font: inherit; font-size: .98rem;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.contact__form textarea { resize: vertical; min-height: 110px; }
.contact__form ::placeholder { color: var(--muted); opacity: .75; }
.contact__form .btn { justify-self: start; margin-top: .3rem; }
.form-status { font-size: .9rem; color: var(--accent-deep); min-height: 1.2em; }
.form-privacy { font-size: .8rem; color: var(--muted); }
.contact__info { background: var(--surface-2); border-left: 1.5px solid var(--ink); padding: clamp(2rem,4vw,3.6rem); display: flex; flex-direction: column; gap: 1.8rem; }
.contact__info h3 { font-family: var(--font); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: .5rem; }
.contact__info p { color: var(--muted); }
.contact__big { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; }
.contact__big:hover { color: var(--accent-deep); }
.contact__big--sm { font-size: 1.1rem; word-break: break-all; }

/* ---------- Footer ---------- */
.footer { border-top: 2px solid var(--ink); background: var(--surface-2); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 2.2rem var(--pad-x) 2.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
/* the colophon sign-off: her hand, a polite bow */
.footer__sig { flex-basis: 100%; font-family: var(--font-hand); font-weight: 600; font-size: 2.4rem; transform: rotate(-2.5deg); }
.footer__brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.footer__nap { color: var(--muted); font-size: .9rem; }
.footer__built { color: var(--muted); font-size: .85rem; }
.footer__built a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.footer__built a:hover { color: var(--ink); }

/* ---------- Scroll reveal default ---------- */
[data-reveal] { opacity: .001; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav__links { display: none; position: absolute; inset: 100% 0 auto 0; flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 2px solid var(--ink); padding: .5rem var(--pad-x) 1rem; }
  .nav__links.is-open { display: flex; } .no-js .nav__links { display: flex; }
  .nav__links a { padding: .9rem 0; font-size: 1.05rem; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 230px; }
  .about { grid-template-columns: 1fr; } .about__media { max-width: 440px; }
  .steps__list { grid-template-columns: repeat(2, 1fr); }
  .contact__panel { grid-template-columns: 1fr; } .contact__info { border-left: 0; border-top: 1.5px solid var(--ink); }
}
@media (max-width: 900px) {
  /* the side-stack needs breathing room — back to a centered row sooner */
  .hero__actions { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 2.2rem; }
  .hero__actions .btn--fill { --by: 1.05rem; --bx: 1.8rem; border-radius: 42px 38px 44px 36px / 38px 44px 36px 42px; }
  .steps__cta { justify-content: center; }
  .btn--stamp { margin-top: 0; }
}
@media (max-width: 640px) {
  :root { --fs-hero: clamp(2rem, 9.5vw + .3rem, 3.2rem); --sheet: 7px; } /* headline must fit a phone */
  body { cursor: auto; } /* no fluid brush on phones */
  .nav__cta { display: none; } /* menu + hero already carry the CTA — no 2-line pill */
  .hero__title { line-height: .98; overflow-wrap: break-word; }
  .hero__eyebrow { letter-spacing: .2em; } /* .34em tracking overruns a phone */
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 250px; } .art--wide { grid-column: span 1; }
  .steps__list { grid-template-columns: 1fr; } .steps__list::before { display: none; } .steps__card:nth-child(even) { margin-top: 0; }
  .hero__replay, .hero__scrollcue { display: none; }
}

/* ---------- Motion / accessibility safety ----------
   Policy: AUTONOMOUS motion (ticker, drifting splashes, spinning blob, entrance
   choreography) honors the OS flag. USER-INITIATED paint (drag-to-uncover,
   cursor brush, hover slosh, scroll wipes) stays on — it only moves when the
   visitor moves, which is the accepted carve-out. Deliberate call: on Windows
   this flag is often set by "performance" tweaks, not by need, and it would
   otherwise erase the site's entire concept. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-words .word > span { transform: none !important; }
  .nav__blob { animation: none; }
  /* exemptions — interaction-driven, finite, small-area */
  .btn::before, .btn::after { transition-duration: .55s !important; }
  .btn::after { transition-duration: .68s !important; }
  .art__wipe { transition-duration: .95s !important; }
  .brush-dot { transition-duration: .25s !important; }
}