/* ============ CANVAS · art · self-painting strokes, palette, gallery ============
   v2 foundation compliant · showpiece tier
   ============================================================================= */
:root{
  --surface:#F6F2EA; --surface-2:#FFFFFF; --ink:#231F1A; --muted:#6E6558;
  --crimson:#B33C2E; --cobalt:#2B4C9B; --ochre:#8A6410; --viridian:#2E6B4F; --plum:#6E3B6E;
  --line:#DDD4C2; --dark:#1D1915; --dark-ink:#EFE8DC; --dark-muted:#A99C89; --wa:#1FAB55;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --t-display:clamp(2.6rem,9.5vw,5.4rem); --t-h2:clamp(1.6rem,4.8vw,2.5rem);
  --t-h3:1.15rem; --t-body:1rem; --t-small:.875rem; --t-caption:.75rem; --t-micro:.6875rem;
  --r-s:6px;--r-m:14px;--r-full:999px;
  --shadow-1:0 1px 2px rgba(35,31,26,.06),0 12px 30px -14px rgba(35,31,26,.25);
  --shadow-2:0 30px 60px -26px rgba(35,31,26,.4);
  --ease:cubic-bezier(.22,1,.36,1); --dur:.6s;
  --d:'Fraunces',Georgia,serif; --m:'JetBrains Mono',ui-monospace,monospace;
  --b:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--b);background:var(--surface);color:var(--ink);line-height:1.65;font-size:var(--t-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--d);font-weight:600;line-height:1.08;letter-spacing:-.015em;overflow-wrap:break-word}
.wrap{max-width:940px;margin:0 auto;padding-inline:var(--s4)}
section{padding-block:var(--s8);position:relative}
@media(min-width:768px){section{padding-block:var(--s9)}}
.skip{position:absolute;left:-999px;top:var(--s2)}
.skip:focus{left:var(--s2);z-index:100;background:var(--ink);color:#fff;padding:var(--s2) var(--s4);border-radius:var(--r-s)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:var(--r-s)}
.rv{opacity:0;transform:translateY(26px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}.rv[data-d="2"]{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--b);font-weight:650;font-size:var(--t-small);height:52px;padding-inline:var(--s5);border-radius:var(--r-s);border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-crimson{background:var(--crimson);color:#FBF3EA;box-shadow:var(--shadow-1)}
.btn-cobalt{background:var(--cobalt);color:#F0F3FB}
.btn-outline{border-color:var(--ink);color:var(--ink);background:var(--surface-2)}
.btn-wa{background:var(--wa);color:#fff}
.k{font-family:var(--m);font-size:var(--t-micro);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cobalt);display:block;margin-bottom:var(--s3)}
.k::before{content:"⌘ "}
h2{font-size:var(--t-h2)}
h2 em{font-style:italic;font-weight:400;color:var(--crimson)}
.lead{color:var(--muted);max-width:56ch;margin-top:var(--s3)}
/* self-painting brushstroke — draws when .in lands */
.stroke-u{position:relative;white-space:nowrap}
.stroke-u svg{position:absolute;left:-3%;right:-3%;bottom:-.32em;width:106%;height:.55em;overflow:visible}
.stroke-u path{fill:none;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.4s var(--ease) .25s}
.in .stroke-u path,.rv.in.stroke-host .stroke-u path{stroke-dashoffset:0}
/* scroll progress — a paint drip */
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--crimson),var(--cobalt),var(--ochre));z-index:60;border-radius:0 4px 4px 0}

/* ---------- HERO — the studio ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden;border-bottom:2px solid var(--ink);
background:linear-gradient(180deg,#F0EADC,var(--surface))}
/* big paint swashes behind — SVG, animated draw */
.swash{position:absolute;inset:0;pointer-events:none}
.swash path{fill:none;stroke-linecap:round;opacity:.5;stroke-dasharray:1400;stroke-dashoffset:1400;animation:paint 2.6s var(--ease) forwards}
.swash path:nth-child(1){stroke:var(--crimson);stroke-width:38;animation-delay:.2s}
.swash path:nth-child(2){stroke:var(--cobalt);stroke-width:26;animation-delay:.7s;opacity:.4}
.swash path:nth-child(3){stroke:var(--ochre);stroke-width:18;animation-delay:1.2s;opacity:.45}
@keyframes paint{to{stroke-dashoffset:0}}
.hero-nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s4);max-width:940px;margin:0 auto;width:100%}
.mark{font-family:var(--d);font-style:italic;font-size:1.1rem}
.mark b{color:var(--crimson);font-style:normal}
.hero-body{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:var(--s6) var(--s8)}
.stamp{font-family:var(--m);font-size:var(--t-caption);letter-spacing:.2em;text-transform:uppercase;color:var(--viridian);display:block;margin-bottom:var(--s5)}
.hero h1{font-size:var(--t-display);max-width:13ch}
.hero h1 em{font-style:italic;font-weight:400;color:var(--crimson)}
.hero .sub{color:var(--muted);max-width:52ch;margin-block:var(--s5) var(--s6);font-size:1.05rem}
.cta-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.meta-row{display:flex;gap:var(--s5);flex-wrap:wrap;font-size:var(--t-small);color:var(--muted)}
.meta-row span{display:inline-flex;align-items:center;gap:var(--s2)}
.meta-row svg{width:16px;height:16px;color:var(--crimson)}
/* wet-paint scroll cue */
.drip{position:absolute;bottom:var(--s5);left:50%;transform:translateX(-50%);z-index:3;width:14px;height:44px;color:var(--crimson);opacity:.8}
.drip circle{animation:dripfall 2.2s var(--ease) infinite}
@keyframes dripfall{0%{transform:translateY(-8px);opacity:0}30%{opacity:1}100%{transform:translateY(26px);opacity:0}}

/* palette band */
.band{background:var(--dark);color:var(--dark-muted);overflow:hidden;padding-block:var(--s3)}
.band-track{display:flex;gap:var(--s7);width:max-content;animation:mq 28s linear infinite;font-family:var(--d);font-style:italic;font-size:var(--t-small)}
.band-track.paused{animation-play-state:paused}
.band .sw{width:14px;height:14px;border-radius:50%;display:inline-block;align-self:center;border:1.5px solid rgba(239,232,220,.4)}
@keyframes mq{to{transform:translateX(-50%)}}

/* stats — paint tubes / swatch cards */
.swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s6)}
.swatch{border-radius:var(--r-m);padding:var(--s5) var(--s4);position:relative;overflow:hidden;color:#fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease);box-shadow:var(--shadow-1)}
.swatch:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow-2)}
.swatch .pig{font-family:var(--m);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;opacity:.85;display:block;margin-bottom:var(--s1)}
.swatch b{font-family:var(--d);font-size:clamp(1.8rem,5vw,2.4rem);display:block}
.swatch span{font-size:var(--t-caption);opacity:.9}
.sw-1{background:linear-gradient(150deg,#C9503F,var(--crimson))}
.sw-2{background:linear-gradient(150deg,#3B60B8,var(--cobalt))}
.sw-3{background:linear-gradient(150deg,#3D8264,var(--viridian))}
.sw-4{background:linear-gradient(150deg,#84508A,var(--plum))}
@media(min-width:768px){.swatches{grid-template-columns:repeat(4,1fr)}}

/* subjects — studio doors */
.studios{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
.studio{background:var(--surface-2);border:1.5px solid var(--ink);border-radius:var(--r-s);padding:var(--s4);position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.studio::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:var(--r-s) var(--r-s) 0 0}
.studio:nth-child(5n+1)::before{background:var(--crimson)}
.studio:nth-child(5n+2)::before{background:var(--cobalt)}
.studio:nth-child(5n+3)::before{background:var(--viridian)}
.studio:nth-child(5n+4)::before{background:var(--ochre)}
.studio:nth-child(5n+5)::before{background:var(--plum)}
.studio:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
.studio b{font-family:var(--d);font-size:var(--t-body);display:block;margin-bottom:var(--s1)}
.studio span{font-size:var(--t-caption);color:var(--muted)}
@media(min-width:768px){.studios{grid-template-columns:repeat(3,1fr)}}

/* timeline — periods (Blue Period style) */
.periods{margin-top:var(--s7)}
.period{display:grid;grid-template-columns:8px 1fr;gap:var(--s5);padding-bottom:var(--s7)}
.period .bar{border-radius:var(--r-full)}
.period:nth-child(1) .bar{background:linear-gradient(var(--cobalt),transparent)}
.period:nth-child(2) .bar{background:linear-gradient(var(--crimson),transparent)}
.period:nth-child(3) .bar{background:linear-gradient(var(--ochre),transparent)}
.period .era{font-family:var(--d);font-style:italic;font-size:clamp(1.2rem,3.5vw,1.6rem)}
.period:nth-child(1) .era{color:var(--cobalt)}
.period:nth-child(2) .era{color:var(--crimson)}
.period:nth-child(3) .era{color:var(--ochre)}
.period .yr{font-family:var(--m);font-size:var(--t-micro);color:var(--muted);letter-spacing:.12em;display:block;margin-top:var(--s1)}
.period h3{font-size:var(--t-h3);margin-block:var(--s2) var(--s1)}
.period .org{font-size:var(--t-small);color:var(--viridian);font-weight:650;margin-bottom:var(--s2)}
.period p{color:var(--muted);font-size:var(--t-small);max-width:56ch}

/* gallery — NEW block, tilted frames */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s6)}
.frame{background:var(--surface-2);border:1.5px solid var(--ink);padding:var(--s3) var(--s3) var(--s4);box-shadow:var(--shadow-1);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.frame:nth-child(odd){transform:rotate(-1.6deg)}
.frame:nth-child(even){transform:rotate(1.4deg)}
.frame:hover{transform:rotate(0) translateY(-6px);box-shadow:var(--shadow-2);z-index:2}
.frame .art{aspect-ratio:4/3;border-radius:3px;margin-bottom:var(--s3);position:relative;overflow:hidden}
.frame .art::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.frame:hover .art::after{transform:translateX(120%)}
.g1{background:linear-gradient(140deg,#E8B7A4,#B33C2E 70%)}
.g2{background:linear-gradient(140deg,#A9C0EE,#2B4C9B 75%)}
.g3{background:linear-gradient(140deg,#F0DCA8,#8A6410 80%)}
.g4{background:linear-gradient(140deg,#B4D8C4,#2E6B4F 75%)}
.g5{background:linear-gradient(140deg,#D8B4D8,#6E3B6E 75%)}
.g6{background:linear-gradient(140deg,#DED4C2,#6E6558 80%)}
.frame b{font-family:var(--d);font-size:var(--t-small);display:block}
.frame span{font-size:var(--t-caption);color:var(--muted)}
@media(min-width:768px){.gallery{grid-template-columns:repeat(3,1fr)}}

/* awards — vernissage list */
.aw{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s1);border-bottom:1px dashed var(--line);flex-wrap:wrap;align-items:baseline;transition:padding .3s var(--ease)}
.aw:hover{padding-left:var(--s4)}
.aw .t{font-family:var(--d);font-size:var(--t-h3)}
.aw .t::before{content:"❋ ";color:var(--crimson)}
.aw .n{color:var(--muted);font-size:var(--t-small);flex-basis:100%;padding-left:var(--s5)}
.aw .y{font-family:var(--m);color:var(--cobalt);font-weight:700;font-size:var(--t-caption)}

/* testimonials — gallery placards */
.placards{display:grid;gap:var(--s3);margin-top:var(--s6)}
.placard{background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-s);padding:var(--s5);position:relative;box-shadow:var(--shadow-1)}
.placard::before{content:"EXHIBITION NOTE";position:absolute;top:-9px;left:var(--s4);background:var(--surface);font-family:var(--m);font-size:.56rem;letter-spacing:.22em;color:var(--crimson);padding-inline:var(--s2)}
.placard p{font-family:var(--d);font-style:italic;font-size:var(--t-body);margin-bottom:var(--s3)}
.placard b{font-size:var(--t-small)}
.placard span{display:block;font-size:var(--t-caption);color:var(--muted)}
@media(min-width:768px){.placards{grid-template-columns:repeat(3,1fr)}}

/* job prefs — commission sheet */
.commission{background:var(--dark);color:var(--dark-ink);border-radius:var(--r-m);margin-top:var(--s6);padding:clamp(var(--s6),5vw,var(--s7));position:relative;box-shadow:var(--shadow-2);overflow:hidden}
.commission::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(179,60,46,.35),transparent);top:-90px;right:-70px}
.commission h3{font-family:var(--d);font-style:italic;text-align:center;font-size:1.35rem;color:#E8B7A4;margin-bottom:var(--s1)}
.commission .sub2{text-align:center;font-family:var(--m);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dark-muted);margin-bottom:var(--s5)}
.crow{display:flex;justify-content:space-between;gap:var(--s3);padding-block:var(--s3);border-bottom:1px dotted rgba(239,232,220,.28);font-size:var(--t-small);flex-wrap:wrap;position:relative}
.crow span{color:var(--dark-muted);font-family:var(--m);font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.06em}
.crow b{text-align:right;overflow-wrap:anywhere}
.crow .yes{color:#9FD8A8}
.refs{display:grid;gap:var(--s3);margin-top:var(--s4)}
.ref{background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-s);padding:var(--s4);font-size:var(--t-small)}
.ref b{font-family:var(--d)}
.ref span{display:block;color:var(--muted);font-size:var(--t-caption)}
@media(min-width:768px){.refs{grid-template-columns:1fr 1fr}}

.fin{text-align:center}
.fin p{color:var(--muted);margin-top:var(--s3)}
.fin .cta-row{justify-content:center;margin-top:var(--s6)}
footer{border-top:2px solid var(--ink);padding:var(--s5);text-align:center;font-size:var(--t-caption);color:var(--muted)}
footer a{color:var(--crimson);font-weight:650}
.stick{position:fixed;inset-inline:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);border-top:2px solid var(--ink);padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));display:flex;gap:var(--s3);transform:translateY(110%);transition:transform .4s var(--ease)}
.stick.show{transform:none}
.stick .btn{flex:1}
@media(min-width:768px){.stick{display:none}}